系统设计智能电子设备框架概括，先来张图如何缓解一下？|用户体验

如今我们的生活几乎无时无刻都离不开我们的智能电子设备，譬如在玩游戏、叫外卖、出门打车、导航、移动支付、网上购物等等，这些应用、网站、服务就是我们使用的数字产品。

本文谈到的复杂系统界面其实是一个相对的概念，即相对于普通轻量级网站、程序而言，应用内界页面较多或层级关系比较复杂的一种类型的数字产品界面。目前的数字产品界面是一个有扁平化世界，如果没有很好的页面暗示系统设计，用户会对当前所在的界面一脸懵逼，产品的可用性将会大打折扣。

所以本次分享的主要是本人的一些见解，通过有效的系统界面设计，减少人们在真实世界与平面界面世界的割裂感，同时通过这个框架可以加快我们的设计过程，少走弯路。

而本文所谈到的框架概括起来就一下三点：

1、一致性 2、层级 3、个性

先了解什么叫预期

在谈预期之前，先来张图缓解一下吧 — —||

（请看图1↓，你知道每一个页面返回的上一层的页面是怎么样的吗？）

图1

当然，很多人可能会猜到，左一返回的上一级页面可能是文章列表,有可能是首页头条，还有可能是我的收藏；左二返回上一层可能是“关于公众号”的页面；左三返回可能就是桌面启动器了，左四就可能是“我”或者抽屉导航栏等……

没错，预期简单来说就是用户的“方向感”，用户对当前页面和操作可能造成的结果的解读。而上案例大部分用户能够大致猜到所属层级页面，主要是建立在用户长期使用的经验之上进行的。（见图1.1）

明白什么叫预期之后，下面就好讲了

一、 一致性

通过建立一致性来维持预期，建立一致性依赖于对用户的察觉

建立一致性有2中途径：

1、 外部一致性

（应用的设计、内容和行为是否跟用户使用的其他应用相似？）

如下图，Win跟Mac的应用界面布局和操作习惯是不一样的，如果要为win设计界面，则应该也要符合win的用户群体的使用习惯和设计规范，让用户在使用你的产品时“方向感”也不会出错。

图2.1

2、 内部一致性

（布局、排版、色彩、图像、logo、图表、控件和可供性）

如下图，Google的邮箱、新闻、日历等就保持了很好的内部一致性，建立内部一致性可以使用统一的布局、排版形式等等来做到。

图2.2

二、 层级

内容信息的组织形式，即内容优先级，通过层级关系达到视觉引导的作用。

如何建立层级？

1、 基于用户模型，定义页面元素，并列举出来

2、 根据页面元素出现在使用场景中的用途系统设计，按重要程度排序

3、 决定元素位置、颜色和尺寸

4、 开展可用性测试，进行评估和改进

5、 完善UI模式，应用级、页面级、小组件级

例子：（还是谷歌家的孩子）

图3

三、 个性

超越平凡，通过交互层面、视觉层面的设计来达到此目的，当然我在这一块我做得不是很好，这一块很大程度上是取决于用户的类型和使用场景，我也很难展开讲orz。

例子：Material Design

图4

嗯，零零散散地讲了这么多，讲的不好的地方请多多指正~~~

参考书籍（所讲内容差不多，相应侧重点不同）：

《写给大家看的设计书》偏排版

《交互设计四策略》偏交互

《可用性工程》偏用研

《视觉可用性》偏工具