2+5+1:以用户为中心的web设计

最近二刷了《点石成金》和《用户体验的要素：以用户为中心的web设计》，感觉是如《启示录》一般在职业进阶的不同阶段都可以温故而知新的经典书籍。此番二刷是在从纯小白到初步入门后的前提下看的，不得不说两本书有异曲同工之妙，很多章节都在讲同一个道理。自己梳理了一下两本书的内容脉络，大致总结出一个2+5+1的以用户为中心进行web设计的公式，即2（可用性+可访问性）+5（战略层、范围层、结构层、框架层、表现层）+1（检验标准），具体分析见下文。

首先，一个网站是要可以被人们使用的，即满足可用性。作为网络时代的我们，在浏览形形色色的网站时，可能都曾遇到过令人抓狂的网站：不知道我们要用的功能在哪里，不知道我们要找的信息在哪里，注册/登录操作太繁琐，某些项目需要的个人信息太多心生烦躁，网站上内容太多眼花缭乱······这些问题本质上一一对应了用户体验设计五要素，这里暂不展开，留作后文分析。其次一个网站是需要可访问的，网站本身的性能，比如加载速度等，对用户体验也有很大影响，我们在设计网站时，除了从用户角度出发满足用户需求，也需要从系统角度出发，使之能够支持前端设计满足用户需求，并且这里还需要注意一点，我们在设计网站时，需要保持网站各模块的灵活性，即支持后续版本迭代时，不需要进行大的网站重构，而是局部调整即可，以此降低时间、人力成本，提高迭代效率。

当我们明确以上两点：可用性和可访问性后，我们需要在正式开始设计之前明确一个目标，即用什么来检验设计是否成功。转化率是一个最直接的、针对用户体验是否得到优化满足的评判标准，注册用户的转化率、订单转化率等等，但有时候涉及用户体验优化的项目可能不会直观得展示在转化率上，比如电商网站里，大促等活动会直接将转化率提升一大截，此时我们可以根据优化的内容来进行评判标准的设定，比如我们将faq进行了优化，那么相关问题的人工客服服务压力就应该有所下降，这也间接得降低了企业的成本。

当优化用户体验项目的评判标准也确认时，我们就应该卯足劲儿来落地整个项目了，从战略层、范围层、结构层、框架层、表现层依次从下往上进行。

1. 战略层

产品的经营者想从这个产品得到些什么，用户又想从产品得到些什么。有些战略目标是显而易见的，而有些战略目标并不是很容易说清楚。就像腾讯最早在做免费聊天软件，谁都不知道它想要干什么。战略层关注的内容主要为：用户需求以及网站目标。

2. 范围层(scope)

我偏向于把它理解成为功能层，即你的这个产品都可以干些什么。这个产品有哪些功能。例如“weibo.com”，能发图片，发文字，能互相关注，这就是范围层需要考虑的东西。范围层关注的内容为：产品的功能设计和信息的内容需求（定义内容的详细属性）。

3. 结构层(structure)

结构层比较抽象，主要用于设计用户如何到达某个页面，当完成了这个页面的任务以后，用户又要去什么地方。框架层定义了导航条上各项的排列方式，而结构层则确定了哪些类别应该出现在导航条上。结构层关注的内容：产品的交互设计和信息架构设计。

4. 框架层(skeleton)

网页中的图片，文字，按钮，表格不是胡乱摆放在一起的，而是有一个组织结构，有一个布局设计，能达到这些元素之间的最大效果。例：在我需要看数据的时候有一个表格，而不是文字或者其他的按钮。框架层关注的内容：信息设计、界面设计和导航设计。

5. 表现层(surface)

表现层就用户直接看到的东西，用户看得见摸得到（用鼠标）的东西，像网页上的图片，文字等等。表现层需要关注的内容：视觉设计。

每一层的设计都与上一层息息相关，我们在进行范围层的需求收集时，需要明确需求都是围绕着战略目标进行的，拒绝镀金的需求；排列好需求的优先级，将需求描述清楚避免主观的语气。

我们在进行结构层设计时，需要理解用户的思维和行为方式，配合用户行为作出响应，并且帮助用户避免犯错，一旦犯错需要给出补救措施。

我们在进行框架层设计时，需要确保用户在任何时刻都知道自己在哪里，下一步去向的入口在哪里，按照用户的行为习惯给出解决办法。

我们在进行表现层设计时，我的建议是审美不行的话就虚心跟视觉同学潜心学习好好沟通吧。

在看书过程中，最大的感受还是需要理论与实际结合才能有真正的产出，领悟到更深的内涵。恰巧新工作接到的第一个项目就是进行m端改版，所以后续完成后会再做一次总结，希望能有所进步～