UX，用户体验与前端开发的关系什么是UX? UX和UI是一个东西吗？不是，UI指的是用户界面，交付的仅仅是用户在产品上

一、什么是UX?

UX和UI是一个东西吗？

不是，UI指的是用户界面，交付的仅仅是用户在产品上所看到的界面；UX则更关注用户对产品的体验感受，确保产品逻辑通顺，UI可以说是UX的重要部分，但UX绝不仅限于UI。

1.0 UX的组成

用户体验（User Experience，简称UX/UE）是一种纯主观的，在用户使用产品过程中建立起来的感受。

Look - 产品的展示（色彩、声音、图像、文字内容、网站布局、交互体验等）
Feel - 使用产品的感受
可用性 (Usability) - 使用产品的难易程度

1.1 可用性 (Usability)

易学性 (Learnability) - 产品是否易于学习
效率 (Efficiency) - 用户使用产品完成具体任务的效率
易记性 (Memorability) - 用户搁置产品一段时间后是否仍然记得如何操作
容错性 (Errors) - 操作错误出现的频率和严重程度
满意度 (Satisfication) - 用户在使用产品过程中所感受到的主观满意和接受程度

引用：

可用性测试 | 人人都是产品经理

二、用户体验设计 (UXD/UED)

2.0 UXD流程

理论上，用户体验设计的流程是：

用户调研
用户画像 (Persona) & 用户故事 (User story)

用户画像：

用户故事：作为一个<角色>, 我想要<活动>, 以便于<商业价值>

线框图 (Wireframe) & 原型图 (Prototyping)

线框图：

原型图：

UI设计和开发
测试

而事实在应用上，常常被忽略的步骤是2和3，为什么呢？

用户画像和用户故事是两个较为繁琐的部分，用户画像需要根据真实情况虚拟出目标用户，分析用户性格、背景以及使用产品的目的；用户故事则是通过人物画像编撰的一个使用产品某一项功能的故事（包括我是谁？我想用产品做什么事情？从而达成什么目标？）。而很多设计会认为这是这一步骤是“无用功”，但其实如果能够完善这一步骤的话，在UI设计和开发上，会减少更多歧义，也能让设计出的产品更好地实现功能所描述的目标，满足真实用户的需求。

线框图和原型图其实才是交互的原型，因为在原型图中可以展示出一个功能的每一个步骤是如何进行的（如何返回到上一步，如何进行到下一步），但事实上，原型图是需要进行用户测试，也就是让真实的用户体验功能的整体流程、布局安排，交互设计师再根据反馈进行更改，这两个步骤也许会反复很多次（耗时较长），且高质量的原型图和真实的UI设计图会有很大程的类似，这个步骤就常常被省略。

引用：

介绍下 User Experience (UX) Design

对于开发人员来说，在用户体验设计中，能起到的作用是什么呢？

对于开发人员来说，我们很少有机会真正与用户沟通来了解需求，而通过用户调研结果、用户画像和用户故事，我们可以知道我们的目标用户是一群或一群群什么样的人，他们使用我们的产品是想要达成什么样的目的。线框图、原型图和UI图都是帮助我们了解产品功能、交互以及操作流程从而从技术上实现它。

2.1 界面设计的八大黄金法则

让我们以得到App（App版和Web版的🌰都有哦～）开刀，来讲讲这八大法则

1、一致性 (Strive for consistency)

通用组件
✅ 使用组件库开发通用组件
❌ 编辑器上的不统一

使用统一的icon、图片

2、常用用户使用快捷操作 (Enable frequent users to use shortcuts)

✅ ESC键退出全屏编辑
💡 写笔记的时候，可以使用快捷键（command + Z）撤销文字输入、图片插入和话题插入

3、提供有用的信息反馈 (Offer informative feedback)

✅ Toast提示

this.toast = { show: true, type: 'success', tips: '复制成功', };
✅ 页面状态 (loading, error, ...)
✅. 异常处理，根据错误码给出合适的错误信息
💡 开发过程中，我们经常会去控制台或network中判断报错的原因是什么，但面向用户时，我们应该根据错误码的不同告知用户报错原因是什么（例如：404告知用户资源不存在，401告知用户没有权限）

4、设计流程需要一个完结 (Design dialog to yield closure)

✅ Toast提示操作完成（添加购物车）

❌ 购买课程成功提示时间过短（实在是不好意思，小编尽力了，视频不让上传我也没有办法展示案例😮‍💨）

好的标题可以获得更多的推荐及关注者

5、提供简洁的错误解决方案 (Offer simple error handling)

✅ 用户输入不符合规范（例如：用户昵称不能超过规定字数）

❌ 网络状态异常时，在知识城邦评论，会提示“发送失败”但不会有类似“网络异常，请稍后重试”这样更友好的提示让用户知道发送失败的原因是什么

6、允许撤销操作 (Permit easy reserval of actions)

✅ 赞/取消赞
✅ 发布笔记/删除笔记
💡 在笔记发布时可以有一个草稿箱，允许用户不发布内容，保存在草稿箱内稍后编辑

7、给用户掌控感 (Support internal locus of control)

✅ 给用户自定义设置的权利

💡 异常/报错的时候，给用户选择的权利（例如：视频loading时给用户选择是停留等待还是刷新页面）

8、减少短时间记忆负担 (Reduce short-term memory load)

✅ 单行显示icon数量不超过5个

✅ 帮助用户记忆（例如：登录状态记忆）

❌ App版首页tab展示分类超过5个，且需要左右滑动查看更多分类，不利于用户记忆

这八大黄金法则究竟帮助了我们什么？

1. 在刚接触一个需求的时候，我们常常对照设计稿和需求文档了解一个新功能，但我们常常需要考虑在异常处理的时候，我们需要给用户什么样的提示，并且考虑什么样的提示对于用户来说体验更佳？如果我们有更好的文字提示或方案，我们可以和产品、设计商讨，给用户更好的感受

2. 在开发初期，我们在将功能分组件完成时，可以优先考虑有没有组件是可以复用的，有哪些组件是有可能变成通用组件的，这样在开发过程中可以更高效省时

3. 如果开发中有多余的时间，我们可以用能力站在用户的角度上，考虑简单的优化可以让用户有更好的体验

引用：

完美界面设计秘诀:界面设计的八大黄金法则

题外话：从设计师小姐姐那里知道的UI设计的标准，有兴趣的可以了解一下

www.uisdc.com/web-vitals

三、无障碍设计

3.0 无障碍设计原则

1、提供正确的替换文字 (Provide appropriate alternative text)

给页面的非文字部分提供替换文字（例如：img标签的alt属性）

<img src="" alt="这是一张图片"

2、允许用户跳过页面重复元素 (Allow users to skip repetitive elements on the page)

页头、页尾部分允许跳过

3、保证链接在内容之外同样合理 (Ensure links make sense out of context)

"点击这里" vs. "前往得到首页"

4、不要依赖于颜色来独自传达含义 (Do not rely on color alone to convey meaning)

对于色盲人群来说不友好

对于屏幕阅读器使用用户来说无法识别颜色的差异，大部分屏幕阅读器只能识别HTML标签，aria属性和文字内容

5、为数据表格提供标题 (Provide headings for data tables)

在数据表格中使用th标签和scope属性

书店

图书1

图书2

图书3

书店1

1本

0本

3本

书店2

10本

2本

4本

<table>
    <tr>
        <th scope="col">书店</th>
        <th scope="col">图书1</th>
        <th scope="col">图书2</th>
        <th scope="col">图书3</th>
    </tr>
    <tr>
        <th scope="row">书店1</th>
        <td>1本</td>
        <td>0本</td>
        <td>3本</td>
    </tr>
    <tr>
        <th scope="row">书店2</th>
        <td>10本</td>
        <td>2本</td>
        <td>4本</td>
    </tr>
</table>