• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 立即用得上!写给初学者的五分钟设计指南(附大量干货)

立即用得上!写给初学者的五分钟设计指南(附大量干货)

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含新手入门,经验分享,设计入门,设计指南等相关知识,希望在学习及工作中可以帮助到您

雨涵:好的设计原则对任何人来说都有用。这个指南会告诉你一些基础设计原则,立即就能用得上并分享给别人。

如果你不相信自己能够做好设计,那么请记住传说中的人物David Eric Grohl说过的这段话:

我从不学习打鼓课程,从不学习吉他课程,我靠自己摸索。我认为倘若你真的对什么东西有所热诚,你就会有动力,你就会集中注意力,你可以做任何你想做的事情。——Dave Grohl,喷火战机乐队

记着上面那段话,你准备好要开始速成课了吗?让我们开始吧(没有特定顺序):

1. 足够强烈的色彩对比

背景和字体必须有足够区分,阅读起来不伤眼睛。白底黑字是最容易辨认的。最好不要使用浅灰、黄色或绿色。如果别人必须眯着眼睛才能看清文字,那肯定是有问题的。

看完这篇你绝对能用好「对比原则」:《设计基础功!帮你彻底掌握设计四大原则中的对比原则》

进阶版的对比方法:《实例教学!利用「对比原则」做出抢眼设计的20个方法》

2. 深灰比黑色更好

如果可以的话,尝试使用#333333 RGB(51, 51, 51),而不是黑色,作为文字颜色。黑白对比晃眼睛,让人更难集中注意力。

3. 重要内容放在前面

布局是帮助使用App或网站的重要信息。重要的内容应该是第一眼可见的,不需要缩放、滚动或点击。

让我们看看几个视觉层级设计的正面实例。

Instagram(下图左侧)将让用户发布的图片/视频作为焦点。

Pinterest(下图右侧)的主要功能是搜索,人们在上面浏览翻找信息。

再看两个例子。

Spotify(下图左侧)显然把唱片封面和音乐标题放在第一位,将用户操作放在第二位。尽管操作是第二位,Spotify仍然保证播放暂停按钮的比重大于前进后退。

Facebook(下图右侧)看起与Instagram非常相似,把好友发布的内容放到前面和中心。

4. 对齐一切

如果你感觉哪里有些不对,最快的解决方式很可能是把不对齐的东西全部对齐。有时设计师会念叨需要使用“栅格”,这其实是在提醒团队需要解决对齐的问题。保证元素对齐是改进任何App或网站的最简单的方法,可以立马让视觉效果提升10倍。

让我们再看看其它对齐案例,这次是Medium。

下面是一个Medium的页面,你觉得看起来如何?是不是有哪里不对?提示:注意左侧的对齐情况,看起来怎么样?

下图我仅仅将内容左侧对齐了。

进阶版的对齐方法:《基础小科普!聊聊界面中常用的对齐形式》

5. 文字尺寸和留白

我们是给人做设计的,不是给蚂蚁做的。增加文字尺寸并多留些空白能够保证内容更加易读。

好的文字尺寸VS不好的文字尺寸:

好的留白VS不好的留白:

这篇留白教程非常通俗易懂,你肯定会喜欢:《呼吸感!五个诀窍帮你快速掌握留白的艺术》

6. 如果顺序很重要的话,使用列表

大部分移动/网页App有搜索功能,对于应该如何展示搜索结果,可能有些争议。

如果顺序是很重要的,那么列表是最有效的。

如果顺序不重要,并且还鼓励用户多浏览探索(像是Pinterest或Airbnb),那么网格视图就可以提供更多的信息,方便用户浏览探索。

7. 先做灰度设计,再上色

灰度设计能够保证聚焦于关键的用户体验。颜色牵扯到较多的情绪反射,并且容易打扰我们所聚焦的关键问题。

8. 让设计用起来舒服

手的使用是一个重要的问题,Luke画出了手机上最容易使用的部分(对于右手来说)——我挺喜欢哪些可以设置左右手的App的。

很多高效的手机App保证导航和主要操作在手机的底部。

9. 借用色板

色彩是一种难以捉摸的艺术。我强烈推荐大家去Dribbble搜索“Color Palettes”或者使用色板编辑器,如Coolors或者Color Claim。这样做可以节约好几个小时的争论、纠结的时间。

也可以选择一些专门提供色板的网站,比如这个专门提供扁平化色板:《专属扁平化设计的PS色板(配色库)》。这个《自动生成上千款热门配色色板的COOLORS》里面有1000+的色板。

如果想自己做色板,可以来看看这篇教程:《教你在PS里通过照片创建色板》

10. 使用Apple和Google的系统设计规范

这两家公司都有很棒的资源帮助任何人搭建Android或iOS的App。

例如,Google的Material里有设计原则、资源、色彩、图标和控件,能够帮助你快速开始App设计。

学习笔记:

  1. 《Material Design从这11个方面打破了我的思维局限》
  2. 《学霸的自学笔记!Material Design设计规范学习心得》
  3. 《重磅教程!帮你全面彻底搞定MATERIAL DESIGN的学习笔记》

Apple则有HIG(Human Interface Guideline),里面罗列了有所有设计iOS平台App所需要知道的东西。

中文版地址:

  1. 《UI设计师必读的IOS 10人机界面设计指南 (一)》
  2. 《UI设计师必读的IOS 10人机界面设计指南 (二)》
  3. 《UI设计师必读的IOS 10人机界面设计指南 (三)》
  4. 《UI设计师必读的IOS 10人机界面设计指南 (四)》

记住,设计需要练习!

需要一些时间和练习才能够训练出一双辨别设计的锐眼,但是你会发现上面的建议会大大提高你的设计。

原文地址:《How to not suck at design, a 5 minute guide for the non-designer》
译文地址:zhuanlanzhihu

设计微博:拥有粉丝量200万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。

您可能想查找下面的文章:

  • 想成为交互设计师?来看前辈的入行心得!
  • 立即用得上!写给初学者的五分钟设计指南(附大量干货)

相关文章

  • 2018-08-23以登录账号密码不匹配为例,全面浅析设计背后的逻辑
  • 2018-08-23实战案例!腾讯QQ支付品牌重塑设计背后的经验总结
  • 2018-08-23专业科班方法!平面设计中如何把握比例?
  • 2017-08-06分享13款优秀的网页线框图设计和制作工具
  • 2018-08-23想进阶成高手?得学会如何在设计中打造最合适的组件!
  • 2018-08-23实战案例!众安保险PC官网的改版设计经验总结
  • 2018-08-23实例教学!25个帮你运用好极简风格的设计方法
  • 2017-08-06.html 、.htm 、 .shtml 以及 .shtm 四种扩展名的文件区别
  • 2018-08-23如何做出用户不反感的错误提示?来看这篇总结!
  • 2018-08-23布局太死板?6个小技巧让你的网页设计活力十足!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 让IE支持CSS3 Media Query实现响应式Web设计
    • 专访三部曲!Google设计主管如何培养设计文化?
    • 如何做落地页设计?这儿有20个顶尖的案例和优点分析
    • src与href属性的区别
    • 资深交互设计师经常强调的「场景」到底是什么?
    • 浏览器自动填充表单导致网页样式丢失原因分析及解决
    • struts2跳转后css和js失效的问题解决思路及实现步骤
    • 成功跳槽后,我想和你分享这3个经验
    • 怎样设计网页?怎样制作网页?
    • 过来人经验!聊聊交互设计师怎么准备作品集

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有