清晰流畅统一美观！聊聊产品设计的四大原则

在设计产品时，经常会不知道如何下手。其实它是有步骤的，今天从大方向来讲讲产品设计的四个原则。

设计绝不是简单的拼合，排列甚至编辑；设计是通过阐明，简化、明确、修饰，使之庄严，有说服性，甚至带一点趣味性，来赋予其价值及意义。

作者往期好文回顾：

1. 《实战干货！聊聊APP启动页的三种设计类型》
2. 《超实用！聊聊标签式导航的设计思路（附设计师做笔记方法）》
3. 《答案全在这了！写给交互设计超新人的五个误区警示》

很多人把设计原则都想得很复杂，还别说，它真的挺复杂，但是对我来说它就是四点：

•  清晰
•  流畅
•  统一
•  美观

重要性也是按这个顺序来排列，那么下面我们一点点来说说。

清晰

何为清晰？对任何产品而言，界面“清晰”是最为重要的一点。人们必须能够辨别出它是什么，才能有效地使用你设计出来的产品。而在设计的过程中相信大家经常会被产品的需求搞得蒙圈，最后出来一个乱得连自己都会吐槽的界面。

设计师在设计产品时，真正要做的应该是去关心用户使用产品的原因，去预测并观察用户使用产品时的行为然后快速做出反馈。产品在设计之初就应该定位清晰，明确自己的受众群体，设计出符合目标用户的产品。这样才能留住用户，让用户对产品更有期待。

但是每类应用的需求不同，受众群体也不同，所以每个设计师在设计产品时都会纠结怎么把产品做到清晰。比如摄影产品，打开就是快门和取景框，相信大家都懂得怎么用，这类工具类应用很简单的就能做到清晰。再说社交类应用，微信打开界面大家都能知道聊天框和标签栏的作用，这类产品说难也不难，毕竟同类产品还是很多的。其实最难做好的，还是购物类应用，不知道为什么，这类产品总是喜欢把界面元素设计得又多又乱才肯罢休，可能是我们的文化背景和生存环境导致的吧。

但是话说回来，这么多类应用都要根据自己的产品定位来设计，每个产品定位的清晰性都是不同的。所以要做到产品设计清晰，必须让目标用户在符合产品条件的基础上，去正确的理解产品界面。不需要思考就对界面的设计有所了解；或者是让用户通过产品简单的提示或帮助说明，就能够理解产品界面，并进行使用。

要做到这点就要让用户知道自己目前处于什么位置，并知道自己能干什么或要干什么。其实这些说起来很简单，但是要做到却并不容易，所以对用户的研究必不可少，让产品定位精准，明确目标用户等等，都是非常重要的步骤。这也是为什么清晰是产品设计原则中最重要的原因。如果能做到这点，即使页面再多，也不会让用户觉得不知所措。（当然页面数量还是有点影响的）

流畅

在保证了产品界面清晰的前提下，界面的流畅性可以让用户和产品之间产生良好的互动。一个优秀的产品，在用户使用的过程中不仅不需要复杂的学习就能使用，而且还能高效的使用。

如何保证流畅性？很简单，就是突出产品的核心。我们生活在一个快速发展的时代，做任何事情都容易被打扰，导致过程中断。所以想要留住用户，必须让用户没有负担且帮助用户快速完成任务。这样才能赢得用户的尊重。

想必所有人都在网上买过东西，不说远的，就说说外卖。每当我们打开一款外卖App看到最多的永远是商家吧？这些商家的排序是从距离最近的到距离最远的，然后排除无法送达的。其实我想说:用户会关心距离远近么？不要每次让用户打开你们的App时都是出现一样的排序，记住用户点餐时商家的记录以及筛选出类似的商家排在前面才是用户关心的。这样不至于每次打开App都要去重新搜索或翻半天记录或者是找订单。如果用户记不住商家名称呢？如果用户不想点这家的但是想点同类的食物呢？

保持使用流畅的另一个说法就是高效。让用户快速的完成任务，才是App存在的理由。也不要以为用户点了下单就不想删减购物车的东西，留个路口让用户删减多余的商品而不是返回去重新操作。

流畅不是让用户别无选择的去执行你设计的任务，而是引导用户去做正确的选择。不要害怕让用户掌握一切，也不要觉得你的设计就是显而易见，这世上从来没有显而易见的事情存在。

统一

让页面保持一致性。很多设计师在设计产品时，都会把统一性抛之脑后。统一性在设计过程中至少要做到:视觉、交互、结果统一。这样不仅可以降低用户学习成本，还能让开发节省不少时间来做那些必要的东西。

经常有人会问一些关于界面设计的问题。而发出来的界面很多时候都是前后不统一，上个界面的下一步还在左边，到了下个页面就到了右边了，问他原因就说:这个界面的排版这样放更好看点。其实这样的回答很不专业。在做产品时，统一性是非常重要的，它是清晰和流畅的结果，要求做到自然而然的效果。能够通过巧妙的布局，来降低用户的认知负担。

相信大家都听过一句话:好的设计都是看不见的。这里说的不是真的看不见（要真看不见还搞啥），而是说让用户察觉不到它的存在是多余的。要做到统一不仅要做到均衡的构图，让画面整体具有稳定性，还要透出空间感，不会使得用户觉得在使用的过程中产生拥挤的念头。而创新并给用户带来惊喜就是后话了。

美观

其实美观没什么好说的，因为每个人对它认知是不同的。新人觉得美观是把一个界面做到漂亮；而资深设计师就知道美观是让界面的设计无瑕疵，整齐，细节完美。

简单来说说美观的几个方面:

1. 文字：一个界面要做到信息阅读流畅，符合人们阅读习惯。

2. 颜色：不要为了突出设计感，就采用夸张的颜色来设计，有时候简单的搭配反而更能体现出产品的功能。

3. 图标：大家都说一个交互设计师的功底是看交互设计文档，那么一个UI视觉设计师的功底看什么呢？没错，就是（线性）图标。

4. 布局：有时候一个界面的布局好坏不能完全看交互设计师，这里面视觉的设计至关重要，即使做得再烂的布局都是可以通过视觉设计师来逆转乾坤的（不包括捣乱的那些孩子）。

再提一个点，动效，当然动效也属于美观中的一种。近年非常流行动效，很多设计师沉迷其中，然后在自己的产品中加入各式各样的动效。其实，动效是是一把双刃剑，这里也不详说了，大家有需要我可以单独出一篇动效的文章。只要在设计的过程中把控好度，动效是可以起到美化产品的作用的。

总结

说完上面这四个原则，大家可以联系自己的产品去想想是不是这么回事。清晰>流畅>统一>美观，一个好的产品一定是按照这个顺序来设计产品的。在做设计之前一定要理解需求再下手，如果你的界面已经满足需求，就不要再加入其它元素了，千万不要觉得页面太简单东西太少，我就要加入其它东西来充实，这样很傻。如果之前没有考虑到这四个点来做设计，那从现在开始好好想想自己应该怎么入手。

清晰，理解需求；流畅，明确用户目标；统一，界面元素保持一致；美观，做到简约而不简单。

欢迎关注我的公众号：UDai部落

「超实用的UI设计自学指南」

UI配色：《帮你从零开始全面掌握UI设计的配色方法》

UI版式：《一份详尽全面的UI设计字体与排版指南》

自学姿势：《别着急学软件！先掌握科学有效的UI设计自学姿势（超全面）》

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量160万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com