注意这十点,让你避免糟糕的设计

本文是给初学者/门外汉的五分钟设计指南。好的设计原则对任何人来说都有用。这个指南会告诉你一些基础设计原则,立即就能用得上并分享给别人。我从不学习打鼓课程,从不学习吉他课程,我靠自己摸索。我认为倘若你真的对什么东西有所热诚,你就会有动力,你就会集中注意力,你可以做任何你想做的事情。
——Dave Grohl,喷火战机乐队


本文是给初学者/门外汉的五分钟设计指南。好的设计原则对任何人来说都有用。这个指南会告诉你一些基础设计原则,立即就能用得上并分享给别人。

注意这十点,让你避免糟糕的设计

如果你不相信自己能够做好设计,那么请记住传说中的人物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设计。

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

注意这十点,让你避免糟糕的设计

图片来源: Google Material DesignThe Apple Human Interface Guidelines

记住,设计需要练习

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

 

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

译者:Z Yuhan

译者地址:https://zhuanlan.zhihu.com/p/26829116?group_id=845693825560219649

本文由 @Z Yuhan 授权发布于人人都是产品经理,未经作者许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22166/

(0)
CatherineCatherine
上一篇 2017-04-30 19:26
下一篇 2017-04-30 21:36

相关推荐

  • [译]可用性之外:使用劝导式模式设计(上)

    你可能已经有一个很好的产品。你做了可用性设计,你也拥有了几个经常使用你产品的核心客户。然而,这在激烈的竞争中往往并不突出。你的产品具有高跳出率,只有很少的用户会回到应用中,用户比你期望中更快地抛弃你的产品,一般情况下,用户不会深入所有你的产品所提供的体验。

    2017-05-27
  • 转载:昨天就听闻快的与滴滴的恋情,万万没想到今天就不要脸的在一起了。

    原文:阿西博客http://wangguangxi.net.cn/?p=126 今后我要怎么选择出门打车是开滴滴还是快的尼? 又或者这俩货都没了,直接统称一个快滴打车? 不过阿西梳理了几条关于上述两个产品的使用交互体验上的建议 1.打车…

    交互设计 2015-02-14
  • 化繁为简——网易云音乐WP1.0设计思考

    项目背景 Windows Phone一直是各家公司缺少投入的平台,WP用户不得不经常面对一个成熟的APP到了WP上就变得各种功能缺失、体验支离破碎,他们渴望应用软件在体验 上能和其它平台一样受到同等重视,音乐APP也不例外。…

    2014-10-31
  • 极简主义风格:要讲究四大设计要点

    极简风并不是简单的做减法,这也是极简设计最棘手的地方。想必设计师都明白“少即是多”这个概念,但是要怎么在实际设计中践行这种极简设计的理念呢?今天的文章,就帮你梳理一下基本的法则,帮你在设计之前就理顺思路。“完美的设计是可以实现的,也许你还可以向其中加入更多的东西,但如果想从中移除某些元素,就完全不可能了。”

    2017-05-11
  • 用户体验才是核心竞争力 英雄互娱《一起来冒险》趣味至上

    (点击上方“GameLook”↑↑↑↑↑↑,订阅微信)近几年来,随着手游用户增长速度趋于平稳,手游数量的增多,人口红利的优势已经消失殆尽,如何曝光率成为困扰所有开发商的共同难题。在买量成本水涨船高的情况下,靠忠实玩家形成的用户口碑形成病毒传播则成了很多游戏的“制胜法宝”。经过了几年的发展之后,玩家们越来越懂游戏,千篇一律的复刻已经无法提起人们的兴趣,人们有了自己对于游戏的追求,这也是市场上越来越多细分品类游戏成功的主要原因,比如《纪念碑...

    2018-01-30
  • 有哪些常见的移动端UX设计误区需要规避?

    我们手机里面装满了各种各样的APP。安装这些应用,我们的初衷是让我们的生活更加便捷。但是当这些应用无法满足用户的需求的时候,用户自然而然会离开,并寻求更好的解决方案。一个成功的应用包含有诸多元素,而其中的用户体验设计 则起到了决定性的作用。在残酷的竞争中,用户体验 往往是决定成败的核心。

    2017-05-22
  • IxD案例作品分享:我来也”APP概念设计及动效设计

    本作品作者是来自站酷的设计师羊羊羊8571,本文经过作者本人许可。 转载请与作者联系!取得授权。 “我来也”是一款基于手机LBS属性的移动点名签到应用,利用手机应用解决了老师课堂点名,活动签到,会议签到!在工作…

    2015-07-29
  • 用户体验设计与创新怎么做?首期高端讲座,听世界知名企业用户体验设计总监为你答疑

    4月28日一大早海信学院的阶梯教室就已经满!满!都!是!人你看,现场是这样的还有这样的大家聚精会神,全神贯注地在做什么?原来,咱们首期高端讲座开讲啦!大家都知道,做高质量好产品一直是咱们集团的重点战略在高端讲座的首期,我们就邀请到了世界知名企业用户体验设计总监现任韩国某体验设计公司总裁Yoo老师给大家进行分享三个小时的讲座中,Yoo老师阐明了他对用户体验设计创新的理解他提到,大部分大企业往往就问题而直接解决问题,而忽略了去进行充分调查,...

    2018-05-05
  • 【干货】超全面!阿里设计师教你写好一份设计文档

    鸿影:一份设计文档 的 结构大概可以分成Background项目背景、Schedule排期、History版本历史记录、Information Architecture信息架构分析(包括Site Map、Experience Map、Flow等)、Framework框架设计、Wireframe线框图和Mockup视觉稿等。取决于实际项目的情况,部分内容可以省略,也可以 加入更多,比如Storyboard故事板,Prototype可交互原型等。

    2017-06-05
  • 移动端下拉表单的更好选择

    在表单中使用下拉菜单看起来并不重要:它们在用户界面上占用的空间不大,它们自动验证输入,所有浏览器和平台都可以支持它们,它们实现起来容易且方便,用户知道它们的好。

    2017-04-28