过去几十年间，工业设计大师 Dieter Rams 为博朗 Braun 和 Vitsoe 做过许多经典产品设计，深深的影响了包含 Apple、Sony 等在内的品牌。在互联网软件行业中，随着人们对于各类应用的使用体验要求越来越高，产品设计正扮演着一个越来越重要的角色。
image.png
笔者针对移动端产品设计，总结了一些基本原则，仅供参考，欢迎提出建议一起交流学习。
概述
首先，谈产品设计就必须要考虑用户体验。对于大多数软件产品来说，用户体验就是产品的生命。产品经理应该与交互设计师、开发人员密切合作，设计良好的用户体验，打造有实用价值的产品。一般，用户体验主要是指视觉感观体验、交互体验。
视觉感观体验：呈现给用户视听上的体验，强调舒适性。一般是色彩、声音、图像、文字内容、网站布局等呈现。对应的是视觉（UI排版）设计。
交互体验：用户使用产品、交流过程的体验，强调互动、交互特性。交互体验的过程贯穿浏览、点击、输入、输出等过程给访客产生的体验。对应的是交互设计。
6个用户体验问题：
- 该用户界面要求用户完成的最重要的任务是什么？
- 这是最简单的解决方案吗？
- 信息是否组织得当？
- 设计是否易用且一目了然？
- 标准是否一致？
- 能否减少用户点击次数？
当我们在做产品设计时，可以问自己以上6个问题，促进思考，去对当前设计精进和优化。下面，介绍视觉设计和交互设计的基本原则。
视觉设计原则
UI设计的四大基本原则：亲密性、对齐、重复、对比。
应用思路：用逻辑将信息建立亲密性；利用对齐的方法；找到并制造重复元素；加入对比。
接下来，让我们一起来看看这四大原则的详细解说：
亲密性（Proximity）原则
彼此相关的项应该靠近，并归组在一起，建立更近的亲密性。亲密性的根本目的是实现组织性。
如果多个项相互之间存在很近的亲密性（亲密性意味着存在关联），他们就会成为一个视觉单元，而不是多个孤立的元素。这有助于组织信息，减少混乱，为读者提供清晰的结构，这样页面的理解和视觉上都变得更有条理，更能表达信息。另外，亲密性原则可以使页面产生相应的空白，空白既可以表达项与项的关系，也可以使页面看上去有更多的空间，页面不会显得拥挤（减少视觉疲劳），页面更美观（有条理），页面的布局会变得更有组织。
案例：微信的发现页面，朋友圈和视频号是独立的2个视觉单元；扫一扫主要是指二维码/条码、街景、翻译的扫描识别，摇一摇主要是指人、歌曲的摇一摇上的识别，存在识别的关联，所以归组在一起，形成一个视觉单元。看一看和搜一搜也是类似的关联性，形成一个关联视觉单元。页面上的空白条（浅灰色），使得每个视觉单元更加清晰，页面更有组织性。如下图所示：
image.png
对齐（Alignment）原则
任何东西都不能在页面随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系，这样能建立一种清晰、精巧而且清爽的外观。对齐的根本目的是使页面统一而且有条理。
如果页面上的一些项是对齐的，这会得到一个更内聚的单元，即使对齐的元素物理位置是彼此分离的，但在你眼里，他们之间也会有一条看不见的线把彼此连在一起。
对齐主要有左对齐、居中对齐、右对齐。居中对齐的线条比较“软”，会创建一种更正式、更稳重的外观，显得更为中规中矩，但通常会乏味；左对齐或者右对齐的线条比较“硬”，线条更明确，这样外观会更清晰、效果更分明。所以我们可以看到页面上的对齐主要采用左右对齐。
注意：一定要坚持一个原则：只使用一种对齐方式。因为我们眼睛都喜欢看有序的事物，这会给人一种平静、安全的感觉。此外有助于表达信息。另外，避免居中对齐（除非有意而为）。
案例：微信强调熟人社交关系、安全，但居中对齐强调的是正式且乏味，与微信的定位违背，所以微信每个页面都采用左对齐（左对齐符合阅读习惯，更能便捷找到阅读的起点）。
微信的发现页面的左对齐，如下图所示：
image.png
重复（Repetition）原则
让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片，等等。这样一来，要素都一致，各个部分看起来都是一体的，即能增加条理性，还可以加强统一性。重复的根本目的是统一，并增强视觉效果。
重复会为产品带来一种专业性和权威性，会使用户感觉有人在负责，因为重复显然是一种经过深思熟虑的设计决策。
案例：微信每个页面上，左对齐的重复、字体的样式的重复、线条的样式的重复、空白条的样式的重复…… 注意，重复并不代表完全相同，而是存在明确关联的紧密相关的对象。
微信首页列表中，朋友聊天列表和服务号的字体相同，但颜色不同（多样性的统一）。
微信的发现页面，各个视觉要素的重复，如下图所示：
image.png
对比（Contrast）原则
页面上的不同元素之间要有对比效果，达到吸引读者的对比效果。要避免页面上的元素太过相似。如果元素（字体、颜色、大小、线宽、形状、空间等）不相同，那就干脆让它们截然不同。要让页面引人注目，对比通常是最重要的一个因素，正是它能使读者首先看这个页面。
对比的根本目的是增强页面的效果（更有可读性），有助于信息的组织（防止混淆）。
对比不仅可以用来吸引眼球，还可以用来组织信息、清晰层级、在页面上指引用户，并且制造焦点。
案例：微信的聊天窗口，对话信息文本的底色的对比，信息文本与背景的底色的对比。如下图所示：
image.png
需要注意的是，这些设计原则需要合理搭配才会有好的整理效果，设计页面时很少只使用某一种原则。
而且，需要注意四大原则的应用思路：把信息归入逻辑亲密性，利用对齐，找到并制造重复元素，加入对比。
交互设计原则
交互设计：强调交互性，主要是人机的互动反馈过程。这里总结交互设计的十大易用性原则
尼尔森的十大可用性原则，强调易用性，是交互设计的重要参考标准。
状态可见原则（Visibility of system status）
用户在系统上的任何操作，不论是单击、滚动还是按下键盘，系统应即时给出反馈。“即时”是指用户可以接受的等待时间（reasonable time）。
案例：微信的发送信息时，信息文本左边有个半透明白灰色的转轮给出发送中的反馈，发送失败时会出现红色感叹圆给出发送失败的反馈。
点击微信右上角+，即时给出显示相应的操作按钮的反馈。如下图所示：
image
环境贴切原则（Match between system and the real world）
系统的一切表现和表述，应该尽可能贴近用户所在的环境，而不要使用系统的语言。《iPhone人机交互指南》里提到的隐喻与拟物化是很好的实践。此外，还应该使用易懂和约定俗成的表达。
简洁元素–减少视觉元素的堆叠，提高交互元素的辨识，合理隐喻交互元素。
如今简洁风格是一种设计趋势，复杂的元素会增加用户的识别成本，用户需要接受和学习的元素过多容易造成审美和使用的疲劳，特别要注意元素尽量具备统一的连贯性，所以界面越简洁越好，元素越少越好，可大大减少视觉上的信息接受量。
在使用图形隐喻时，在移动产品中，由于界面大小的因素，我们经常会遇到用图标做功能按钮，因此按钮的图标就需要充分考虑用户的体验认知。例如普遍的圈型箭头是刷新、心型是关注、星型是收藏、齿轮是设置 等等。我们在采用图形隐喻功能的时候，应当考虑用户的认知，避免用户学习和识别的成本。
减少界面–尽量减少界面间的交互，避免新页面切断了用户使用的流畅感。
在一个页面里能够交互完成的内容，尽量减少页面的切换，当然前提是考虑了系统的负载。
例如搜索功能，触击搜索按钮后平滑展开输入框，同时展开虚拟键盘。
例如选择功能，触击后展开选择器，在选择器里连续触击某条选项两次完成选择，或者选中某条选项后再触击完成。
如上两条简单的示例，都是可以在当前界面内完成的。在当前界面平滑交互出来的元素给用户在体验上更加流畅，同时也让用户觉得只是在原有界面上载入了新元素，用户感观上只需要接受新的元素。而新界面突然切断用户使用的流畅感，也就是说用户的思维需要进行切换，需要重新接受并认识新的页面，就像进入了另一间屋子。
撤销重做原则（User control and freedom）
为了避免用户的误用和误击，系统应提供撤销和重做功能。
案例：微信的导航栏切换、页面返回。
聊天窗口误发信息，支持撤回信息。如下图所示：
image
一致性原则（Consistency and standards）
同一用语、功能、操作保持一致。整体性——所有交互元素的设计上，用户对信息沟通顺畅，保持体验统一。
案例：微信的摇一摇功能，打开摇一摇的页面，icon保持一致。如下图所示：
image
防错原则（Error prevention）
通过系统的设计、重组或特别安排，防止用户出错。
案例：微信的附近的人功能，使用会弹窗提示，提示用户位置信息会泄漏，防止用户出错。如下图所示：
image
易取原则（Recognition rather than recall）
尽可能减少用户对操作的回忆负担，功能选项应该是可见的，使用说明都是可预见的。
案例：微信的发现页面，每个子功能的图标全部采用拟物化（参考环境贴切原则的图示），每个操作都是可预见的。
灵活高效原则（Flexibility and efficiency of use）
中级用户的数量远高于初级和高级用户数。为大多数用户设计，不要低估，也不可轻视，保持灵活高效。
案例：微信的发现页面的子功能默认全部显示，但在设置中可以对每个子功能的启用停用，满足不同用户的需求，保持灵活高效原则。如下图所示：
image
易扫原则（Aesthetic and minimalist design）
互联网用户浏览网页的动作不是读，不是看，而是扫。易扫，意味着突出重点，弱化和剔除无关信息。
案例：微信对信息详细分类在不同的页面，每个页面只显示相关的功能。
微信的发现页面，只显示存在着探索关联的功能（参考环境贴切原则的图示）。
容错原则（Help users recognize, diagnose, and recover from errors）
帮助用户从错误中恢复，将损失降到最低。如果无法自动挽回，则提供详尽的说明文字和指导方向，而非代码，比如404。
案例：微信用户误删好友后，直接通过群找到好友，添加到通讯录，不用好友通过验证，恢复好友。
微信误发红包，对方也不接收红包，超过24小时后自动退回到用户钱包，避免用户的损失。
人性化帮助原则（Help and documentation）
如果系统不使用文档是最好的，但是有必要提供帮助和文档.
帮助性提示最好的方式是：1、无需提示；2、一次性提示；3、常驻提示；4；帮助文档。
案例：微信发朋友圈的状态时，文字文本会出现“这一刻的想法…”提示帮助。
微信的帮助与反馈，提供常见问题、相应功能的快捷帮助以及意见反馈。如下图所示：
最后，从功能结构和成本方面可以考虑两项原则：少即是多、成本控制
少即是多
例如，office有众多强大的功能，大约90%的用户只用到其中10%的功能，那另外的90%的功能大多数不会用到，反而让整个office软件显得臃肿且安装缓慢；百度也有很多产品，但是在baidu.com上我们只看到摆出来多多少少10来个产品而已；google的产品也是如此；他们做了这么多的功能，但是看上去却如此简单，这太了不起了!
并不是说我们不要去做复杂的产品，相反的，我们需要做功能足够丰富的产品! 一个产品20%的功能是用户常用到的，而另外80%是不常用的，我们称前者为基础功能，后者为扩展功能；而同时又有80%的用户平常也就只用这20%的功能，这是二八原则。并不是说要去砍掉那80%的功能来满足大部分用户，我们需要做一个功能丰富的产品，但是我们同时要给用户展示一个简单的产品，让用户自己去发现那被“隐藏”的功能，用户会感到“哇!太神奇，这个产品居然还可以这么用，好强大!”
成本控制
从细节开始减少用户的操作及学习成本，使用户快速上手和识别产品特性。
了解用户的使用情境(碎片化的时间，随时会被打断)，尽量不要增加学习成本(操作学习、界面学习)，因为用户的时间是碎片化的，他们没有太多时间学习，特别是多手式操作是有学习和记忆的成本的。
腾讯、百度等等很多第三方的数据显示，一个月都不下载新应用的用户占60%以上，绝大多数APP应用的用户留存率不高。因此，除非你的产品是特别的刚需，否则不要挑战用户的智商，大部分用户是不会像我们一样对产品深思熟虑和了解透彻之后再使用的。
未经作者许可，禁止转载。欢迎留言交流，一起学习~
网友评论