如何避免糟糕的设计

给初学者/门外汉的五分钟设计指南。

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

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

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

——Dave Grohl,喷火战机乐队

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

1. 足够强烈的色彩对比

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

图片来源:UI Design Do\’s and Don\’ts

2. 深灰比黑色更好

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

3. 重要内容放在前面

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

图片来源: UI Design Do\’s and Don\’ts

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

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

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

再看两个例子。

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

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

4. 对齐一切

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

图片来源:UI Design Do\’s and Don\’ts

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

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

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

5. 文字尺寸和留白

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

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

图片来源:UI Design Do\’s and Don\’ts

好的留白VS不好的留白:

图片来源: UI Design Do\’s and Don\’ts

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

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

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

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

来源:《用户如何查看网格布局的搜索结果?》

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

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

8. 让设计用起来舒服

手的使用是一个重要的问题,建议参考Luke Wrobluewski的文章《Responsive Navigation: Optimizing for Touch Across Devices》

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

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

图片来源:《Responsive Navigation: Optimizing for Touch Across Devices》

9. 借用色板

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

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

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

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

译者Z Yuhan:推荐我的文章《谷歌Material Design从这些方面打破了我的思维局限》

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

图片来源: Google Material Design和The Apple Human Interface Guidelines

记住,设计需要练习

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

suck at design

译文地址:交互进阶

译者:Z Yuhan

(0)

相关推荐

  • 那些应该杜绝滥用的UI设计

    @TerryFan:创新总是很少,互相借鉴总是特别多,我们一起来看看那些被滥用但有时并没那么好的设计,给大家敲响警钟,参考无罪,但是多独立思考,自主设计. 如果你是一位有的设计师,你也许常会在其他界面 ...

  • 弹窗设计的5条基本原则

    当你将弹窗设计及使用得恰到好处时,它们就会是非常有效的用户界面元素.它们能帮助用户快速且便捷地达成目标.然而当错误使用时,弹窗却会困扰你的用户.学会如何设计弹窗,会帮助你在使用时避免那些可能对用户造成 ...

  • 向客户展示设计想法时常犯的错误及解决方法

    小编:作为设计师,向你的客户或者老板展示设计作品也是你的工作中必不可少的一个环节,甚至可以说是决定项目成败的最后的关键环节.一个优秀的设计师不仅需要有出色的设计能力,还要有良好的沟通和表达能力.如果因 ...

  • 了解什么是用户体验设计?

    在日常生活中,我们是不是会经常碰到过"这个东西好难用啊! ""找不到厕所的位置,怎么办啊,急死我了! ""水龙头的水一直飞溅出来打湿自己的衣服! &q ...

  • 从六个方面辨别什么是好的设计

    当我在media上发表第一篇文章时,有一位读者问了我一个问题,引起了我的共鸣.她说评判设计的优劣是一种偏主观性的行为,她想知道,是否有人能够设计出一套能够辨别出优秀设计作品的准则.于是我生出了&quo ...

  • UI动画可不是卡通片

    我之前撰文讲过多余的动画,引发了一些共鸣.得到了非常积极的反馈,我很高兴了解到,动画过多的界面也会令其他人手足无措. 老实说,我并不反对为界面进行动效设计.我主要是在质疑那些妨碍用户的动画. 克制,是 ...

  • 优秀设计主管必备的品质(下篇)

    编者按:我们每周会征询一些设计主管的建议.本周的议题是"你觉得优秀的设计主管需要哪些必备的品质?"下面请看Libby Bawcombe和Chris Thelwell的分享. 还有, ...

  • 【译】设计师必须知道的16句名言

    【译】设计师必须知道的16句名言

  • 【DDC译文】如何表达App中的手势操作

    手势,是那些能够与应用程序进行交互的手指动作.触摸屏提供了很多自然手势比如:点击.滑动.缩放等活动.但是不同于用户图形界面控件,这些交互行为很难被用户发现,除非他们提前知晓手势的存在,否则他们不会尝试 ...