什么样的界面算好用?

用户觉得软件不好用通常是由于操作界面不符合常识，交互逻辑出人意料导致的。

这里我们要引入三个模型的概念:实现模型，心理模型和呈现模型。

 

 

 

设计师要理解业务诉求?

用户是真的想要一匹很快的马吗？或许吧。

 

 

 

 

然后福特就发明了汽车，很好的满足了的客户的需求。

嗯！这个可能是一个很好的满足了这个客户以及一群客户的需求。

这个故事告诉我们，我们需要挖掘客户真正想要的东西，而不是停留在现有客户所说事物的表面，傻傻去找一匹很快的“马”。

接到需求后产品经理一般会在PRD评审时向设计侧讲解需求背景和功能逻辑，在这个阶段我们可以了解到产品经理规划中的用户流程和使用方式。产品原型呈现的只是无数解决方案中的一种，了解了业务诉求再回顾原型方案，经常可以带来全新的视野，并由此推导设计方案。

 

下面我们就看下如何从组件，结构，功能，状态几个层面解决设计问题。

 

一.明确功能用途

1.1 信达雅的文案

文案是界面的重要构成，却是界面设计中最不被重视的一部分。很多软件之所以用起来有一层朦胧的隔阂感，罪魁祸首就是晦涩的文案。简单的纠正文案可能会带来焕然一新的使用感受。

• 信:语义准确，明确事件的主体客体。
• 达:避免无效或重复文案，减少被动语态，简洁通顺地进行描述。
• 雅:优雅且有涵养地与用户沟通。
• 配图:有些流程或者用词比较特殊，单用语言难以描述，配上图一目了然。

 

 

 

1.2 视觉线索

图形用户界面诞生之初，界面元素对物理世界的模拟是为了便于用户将现实中的常识套用到虚拟界面上:拟物化通过质感暗示用户界面的交互方式;在扁平化时代，提供视觉线索仍然是必要的原则。拿拖拽操作来说，首先可以拖动的组件上要有把手，暗示可以捡起。组件被拿起来时要明显扩大的投影样式描绘高度，并在列表中显示一条瞄准线便于用户精确定位。

 

 

 

再比如卡片式设计，和现实中的卡片相同，它可以明确地划分出功能和信息的关系。要注意的是，视觉分区越多，页面复杂度越高，设计时需要控制平衡。

 

 

 

1.3 熟悉的组件

用户点击下拉选择器的时候，自然会期望在周围弹开一个选项浮层，因为他们用过的所有软件交互都是这样。这个就是习惯用法范式的应用（尽可能套用常规的交互方式让软件的操作容易预测，用户理解成本低）。

 

 

然而在常规组件无法承载实际需求时，有必要跳出惯用范式，通过差异的视觉样式给用户思想准备。例如一些原型图中的选择器使用了下拉的样式，触发的却是选择抽屉或者弹窗。这种意外的发生或多或少会降低用户使用时的信心，因为他们再也不确定点击下拉后会发生什么。通过特殊与常规的区分，其实也维护了惯用范式的一致性。

你一定遇到过这种棘手的原型:页面导航又多又深，林林总总地铺酒在导航区和功能区，信息密度堪比柯林斯英汉辞典。页面导航是界面的基本框架，处理系统的导航方式是页面设计早期就需要完成的工作。

 

二. 几种反例

 

 

 

• 主导航级数过多:视觉样式复杂，操作时需要频繁卷展。
• 内容区头部导航堆积:用户先看到的不是内容而是导航，浏览效率较低
• 横向导航分配不合理：不合理的结构会影响视线扫描和点选，且空间利用率低。以图中的结构为例，一级导航下不一定都会有二级或三级导航，就会导致页面版式差异过大。

 

2.1 控制一级导航深度

一级导航过深时，有必要进行降级。顶栏导航可以向边栏导航转移。边栏导航是一级时，可将最低级的导航放到内容区吸顶;若层级仍然不够用或导航条目较多，可以再增加一个纵向导航。

 

 

 

2.2 平衡内容区导航

吸顶导航会占用内容区的纵向空间，但可以随时跳转。

内容区内的导航性质更类似于筛选，能够随内容滚，不便于随时切换。

页签类型区别大或是需要切换对比时，可以将导航吸顶;页签下内容形式近似或需要更多浏览空间时，可以将导航放在内容区。

 

 

 

2.3 减少空间浪费

很多原型会习惯性地在页面顶部配置一个顶栏。实际上里面的商标，账户信息，设置等功能可以整合到边栏中，这样内容区上方会多一些纵向空间。

 

 

 

三.合理布置功能

3.1分级展示功能

比如一些的图表类页面主要用于浏览而不是编辑，这种情况下将操作隐藏到省略号或者汉堡菜单中，不仅可以减少信息干扰，还能避免误操作。

 

 

高级功能的隐藏很好理解，比如 macOS 的网络配置只显示基础的连接功能，DNS 配置等高级操作被整理到了一个按钮中。你可以想象如果所有的配置项都展示一个页面，对于用户日常联网操作会有多么不友好。

 

 

 

 

 

3.2 拆分功能

除了分级，当页面或区域内的功能过于集中时，可以进行拆分以降低信息压力。

分离检索与查看:列表同时兼具浏览与管理的功能，但在字段众多，空间有限的情况下，可以选择其中有代表性的字段在单元行中显示，便于快速扫描和管理，完整的单元行信息放到下一个层级显示。

 

 

分离表单区块:当表单存在区块表单时，可以只在表单中显示区块的预览，将区块的新增和配置放到抽屉中进行，由此减少功能堆积。

 

 

 

3.3 数据的编辑

涉及数据编辑的页面存在四种设计方式，需要综合考虑表单的数量，用户的操作频次和使用方式来判断采用哪种。

查看模式:带查看模式的页面视觉效果整齐，信息干扰最小，且不会误操作。但需要进入编辑模式修改页面内容。

 

 

直接编辑模式:用户到达页面时，数据就可以被修改生效。常见于设置类页面。该模式使用效率最高。但由于容易误操作且视觉信息冗杂，不太适合大型表单。

 

 

行内编辑模式:页面样式类似查看模式，当鼠标悬停在数据上，界面会提示用户此处可以编辑，用户点击后可以快速针对局部数据做修改。该模式只适用表单项少的情况。

 

 

实时保存:页面长期处于编辑模式，系统会自动保存用户的操作。常见于线上文档工具。该模式误操作风险最高，需要提供版本控制和操作撤回功能。

 

 

 

3.4减轻视觉压力

业务层面上无法避免单页出现大量表单时，可以在视觉上分节。注意!和真正的分步不同，这里的只是从视觉层面对页面信息进行处理，没有流程先后的概念，所以尽可能不要拆分页面。

以下图为例，通过视觉上的划分，即使在同一个页面显示同样数量的表单，版面空间的呼吸给予了用户喘歇的余地。锚点导航是个锦上添花的控件，空间允许时可以加上。

 

 

 

四.补救意外情况

4.1空状态引导

一个列表出现空状态的可能性有:

 

 

 

• 确实没有条目:如果能添加的话，可以提示用户如何添加。
• 应用了过多筛选器:提示用户尝试其他筛选方式或重置筛选器。
• 加载异常:提示用户刷新页面。

虽然后果一样，但问题本质不同，解决方式自然也不同，此时需要分别给出对应的引导。

 

4.2 异常引导

再没有什么比一行“操作失败”的提示更让人绝望，用户不知道哪出了问题，也不清楚如何解决。异常流程时有发生，此时系统的引导会起到至关重要的作用，它能够带用户走回正轨，减少无助感。

 

 

 

4.3 标明功能不可用的原因

该问题的重灾区是工具类软件，用着用着一些功能突然就灰掉了，只能慢慢摸索是哪里的问题。功能之所以不可用肯定有个原因，不论是直接显示还是鼠标悬停时显示，有必要要让用户明白原由或者如何解决，避免把用户困在死胡同。

 

 

 

4.4提供帮助

新手教程特别考验用户的记忆力，尤其是在新接触软件的学习爬坡阶段，而且很难保证在一段时间不用后，用户还能记得如何操作。当系统引入了晦涩概念或复杂交互时，最好在该功能周围提供说明，或悬停时展示 tooltip.使用户无需长期记忆，在用到该功能时又可以快速上手。

 

 

 

结语

图形界面的本质是人与机器交流的语言。与现实生活一样，我们倾向与礼貌体贴的对象沟通。所以下手设计时要尽最大可能从人类的本性出发，才能在业务和产品逻辑的限制下，为用户塑造更具亲和力的界面模型。