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

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

相关推荐

  • 逐渐兴起的对话式设计,你了解多少?

    对话式交互将逐渐改变人类的生活和习惯,未来的生活是怎样的正是我们所兴奋和期待的:)我以为使机器能与人沟通的关键是发展更好的对话系统。但我这想法并不对。成功的对话需要共通的知识和经验。它需要对四周环境、前后脉络、导致目前情况的历史背景以及当事人众多不同的目标和动机等都要有所领悟。现在我认为这正是当今科技的根本局限,这种局限阻碍了机器全面、拟人化地与人互动。人与人之间要建立共通的了解本来就很难,那我们如何寄望于机器建立这种关系?——唐纳德·A·诺曼

    2017-05-19
  • ios8设计规范 中文版 完整版

    文章索引 1.1 为iOS而设计(Designing for iOS) 1.1.1 以内容为核心(Defer to Content) 1.1.2 保证清晰度(Provide Clarity) 1.1.3 用深度来体现层次(Use Depth to Communicate) 1.2 iOS应用解析(iOS App An…

    2016-05-12
  • Axure 8.0手机页面拖动弹回效果

    Axure RP8.0教程 手机页面的拖动和弹回效果 。用户向上拖动页面,页面向上滑动。用户向下拖动页面,页面向下滑动。当用户拖动页面到最底部时,页面弹回显示第一屏。当用户拖动页面到最顶部时页面弹回显示最后一屏。步骤一.在部件库中拖入一个图片部件,双击打开浏览手机外壳图片,加入到工作区中,跳转这张手机外壳图的大小和位置。步骤二在手机内部框中制作一个列表页面,页面,使用到的部件有图片部件、标签部件、水平线部件、将这些部件相互组合,设计一下...

    2018-03-10
  • 交互设计思路:积分模块改版总结

    作者根据工作经验对积分模块改版进行了一些总结,与大家分享,希望可以从中收获点滴。

    2017-05-04
  • 用户体验才是真正的“一句顶一万句” 安徽燕之坊食品公司用勤哲软件实现生产、经营和管理数据的互联互通

    统计数据显示,截止2017年底,国内食品工业企业超过4万家,主营业务收入占全国工业的比重十分之一强。在实施制造强国战略和推进健康中国建设中,食品工业作为传统的“以食为天”的民生产业占据着不可或缺的重要位置。当前,食品行业在实现快速发展的过程中,面对城乡居民安全、多样、健康、营养、方便的食品消费需求时,与其他行业一样面临着转型、升级的动能和压力。尤其是在食品质量安全水平和高品质食品有效供给方面,利用现代信息技术创新消除安全和质量隐患等领域...

    2018-02-11
  • 【笔记】设计师与产品经理该如何高效地进行团队协作?

    2017年5月14日,UXRen北京分舵在北辰泰岳大厦主办了《设计师与产品经理该如何高效地进行团队协作》的分享活动,本文基于分享嘉宾朱峰现场分享整理而成。   分享嘉宾: 朱峰(现任 “蓝湖”产品负责人&联合创始人…

    交互专题 2017-08-07
  • 据说这是一个用户体验设计师必须掌握的

      引言:计算出你手机上的内容布局是一件很棘手的事情。桌面设备会给你所有用它工作的空间。但在移动设备上,你只有有限的屏幕空间。用户在滚动屏幕浏览更多内容之前,只可以浏览内容的一部分。 你最终想知道…

    2015-11-22
  • 交互设计中的5项视觉指导原则

    【分类】经验分类:经验/观点/自译原作者: Jerry Cao翻译:@ifecIFEC团队译文UI中国旗下翻译团队,由热爱翻译热爱分享的设计师组成。IFEC译者翻译国外行业热文、规范文档。欢迎关注我们的官方微博 @ifec, 加入我们…

    2017-08-04
  • 国内大公司的交互设计实习面试经验总结

    沈天宇 :看着拉钩、脉脉上关于互联网岗位的信息,找一个交互设计的岗位几乎要面对100个人的竞争。想想我面前站着100个人,我要赤手空拳的打败他们,这画面简直不敢想。所以一开始我完全不知道我到底能找到一个什么样的工作,大概有一种「大爷赏口饭吃」的姿态去找实习。毕竟,我们实验室也好几年没出过阿里的人了,我也感觉我没那么优秀。面对如此严峻的就业形势,恩,首先还是开始找实习吧。这是一个最坏的时代,(一点也不好。),而且也许以后会更坏。对于找工作...

    2018-02-01
  • 如果你想成为一名交互设计师

    第一篇:Cooper《如果你想成为一名交互设计师》    我们收到很多来自学生和可用性从业者的邮件询问如何成为一名交互设计师,需要什么样的背景才能进入这个行业,怎样才算优秀的交互设计,需要什么样的实际技能和经…

    交互专题 2016-10-26