网页 UI 设计模型探析

任何关于 UI 设计的讨论， 终将会回到 UI 模型的探讨。我们见过的大大小小的网站，都符合 UI 设计模型。网页技术发展到现在，有很多基础功能都大同小异（如“登录”、“注册”），设计模式找出了相同的部分，进行要点总结，设计师进行交互设计时参考设计模型进行工作，可以避免在一些基础的问题上犯错误。UI 模型起源于解决普遍性问题，如果越多的人使用，作用就越大。

模型剖析：

模型认知：掌握了 UI 设计模型就获取了设计的捷径
它是一个省时省力，并且相当实用的讨巧方法。

常见的用户界面模型举例：

汉堡包按钮（The Hamburger menu）：富有争议，近来收到一些质疑。但是它用处广泛，好处是对移动端适配友好。
面包屑（Breadcrumbs）：在层级导航时，会让用户内心感觉安全。
账号注册（Account registration）：为了给用户提供服务而获取用户信息的一种方式，样式从简到繁都有。
连续滚动（Continuous scroll）：解决内容太多无法在一个页面完成的问题，适用于讲述视觉故事。
可用性（availability）：在线状态
FAQ：常问问题

“从上至下” vs“ 从下至上”设计方法：常用“从下至上”方法设计，将界面分解为各个组件，这样常常会导致我们无法从整体把握设计。用户通常会由上至下，用自己的常识和经验对网站进行交互。因此，网站交互需要和用户期望一致。外部一致（和竞争对手或其他网站一致）毫无必要，重要的是内部一致。这也是设计模型解决的问题。

破坏模型的风险：最大的风险是会自绝于用户。当我们希望打破模型的时候，问自己三个问题：

为什么要破坏模型？
我们是否创造了一个更好的模型？
用户能够快速掌握新模型吗？

打破模型的方法：用户进行每一次交互都会希望获得反馈。我们可以做的是在用户没有反馈意图的时候，给用户一个意外的反馈。

原型对测试模型的作用：原型之所以如此重要的原因是，用户无法清晰表达他们需要什么。测试模型的最好办法是建立原型然后找人进行测试，以下是提高现有模型的方法：

找出设计问题：进行用户访谈，用户调查等；
研究现有的设计模型：查看其他app或者网站是如何解决的；
将设计原型化：以现有的设计为基础，或彻底重新设计，你的假设需要不受之前设计的束缚；
至少找 5 个用户测试；
总结测试结果并进行迭代测试；

设计流程

不同层级的 UI 模型：

设计一致性：保持设计一致性是为了网站更好的逻辑体验，确保内容外部一致。保证一致性有难度，因此需要创建一个 Style Guide（具体方法后面会写）。
设计策略：用策略模型（模型流）帮助用户在网站完成任务流。例如，侧边栏和汉堡包菜单都是模型流 - 他们只是帮助用户在网站交互的两种方式。
设计情境：只适用于部分网站，如电商网站。亚马逊在下订单时候的分步设计，并不是凭空发明出来的，而是依据现实情境设计得到的。

本篇理论较多，下一篇开始切入具体模型，并结合案例进行讲解。