用经典的设计原则，深度解析闲鱼的用户体验设计

今天我们主要从用户体验的部分原则来看闲鱼，主要以产品视觉设计四大原则、交互设计十大可用性原则、情感化设计来看闲鱼，今天先讲两个部分：视觉和交互的用户体验。

其实主要是因为用户体验分为这个几个方面：

1. 视觉的感官体验，给用户带来的是视觉表现层的体验，所以我们把产品视觉设计四大原则来对照用户的感官体验。
2. 交互的用户体验，也就是产品设计中给用户使用过程产生交互互动，比如点击效果、输入、弹出、切换等等。所以我们用交互设计尼尔森十大可用性原则来对照交互的用户体验。
3. 情感用户体验，这是由外而内的心理作用，给用户带来心理认同，增加满足和愉悦感。所以我们用情感化设计原则来对照我们的情感用户体验。

产品视觉设计四大原则

在产品视觉的设计中我们可以用四大原则来满足用户感官体验的优化，主要是：对齐；重复；亲密；对比。

1. 对齐

页面信息对齐，左对齐、右对齐、居中对齐，保持页面视觉统一

移动端的阅读习惯是从左往右的，因此我们也是遵循向左对齐，或者尾部信息向右对齐。居中对齐在整体信息排列中较少使用，除非是比较正规、传统的产品设计使用居中对齐的大关系。而在小细节的对齐中居中对齐应对logo/头像等也有使用。从开发的成本上，对齐的设计也是方便了他们的开发。

举例子

闲鱼消息页面顶部功能区域采用居中对齐方式，比较正式一些，突出显示引导用户点击；个人头像和消息左对齐显示，发布图片右对齐显示。

闲鱼我的页面，功能图标和信息左对齐显示，消息和进入按钮右对齐显示；赞赏、关注、粉丝居中显示。

重点突出的信息，居中显示，引导用户浏览路径。常规列表左对齐、右对齐显示，满足用户浏览习惯，提升用户体验。

2. 重复

重复比较简单的理解为一致性，颜色、形状、材质、空间关系、线宽、材质、空间等等。我们常说视觉规范的一致性就是这样，保持这些单元的统一，贯穿始终这样我们的页面排版才会整体、产品设计才会整体。

举例子

闲鱼消息页面，头部功能区域圆形图标重复，字体重复。消息列表头像、名称、消息、图片重复，保持一致性，和统一。

首页部分功能区域图标重复、风格重复一致。活动区域标题和图片保持重复性原则。在类别筛选部分，每个类别瀑布流展现，宫格重复，保证页面筛选一致性。

3. 亲密

如果多个项相互之间存在很近的亲密性，它们就会成为一个视觉整体。因此我们在设计时候往往需要将信息整合把有亲密组织关系的内容整合一起。减少了混乱不堪的信息内容排列，整合框架，这也是方便用户浏览，满足了易读性、易用性。个人观点（在产品设计中亲密度的把控，要多学理论、然后理论实践结合，多多体证，才能更好的满足用户体验）

举例子

闲鱼首页分为4大部分，功能区域、活动区域、闲置区域、分类区域，每个区域相互亲密，形成一个整体，通过间距分割，满足用户的易读性，降低学习记忆负担。

消息页面就更明显了，主要分为功能操作区域和消息列表区域，每个区域相互亲密通过间隔和表现形式区分。（这类需求就没有基本需求那样必备，是产品中期望需求体验越多越好，用户越满意，反之用户满意度也会下降）。

4. 对比

对比的通俗来说就是要有对比性、不同点，就是要避免页面上的元素太过相似，这样那既要避免了同质化也强调了差异化的节奏感，突出重点信息传递。当然这个度需要我们在日常工作中多多积累。比较常见的对比有方向对比、信息对比、颜色对比、对称对比、比例对比等等。

举例子

闲鱼聊天页面，双方消息颜色对比，色彩的对比更加强的双方聊天的视觉效果，对比也是比较明显。

闲鱼的兑换详情页面，文字和信息的对比，突出展示内容信息，让用户一目了然区分内容和图片，多重信息对比，也增加了信息获取的质量，提升用户体验。

产品设计的四大原则是一位美国设计师Robin Williams归纳整理的，文章中也有许多排版中案例说明，如果想进一步了解排版设计四大原则，可以看看这本书《写给大家看的设计书》。

交互设计十大可用性原则

尼尔森（Jakob Nielsen）是一位人机交互学博士，于1995年1月1日发表了「十大可用性原则」。尼尔森的十大可用性原则是尼尔森博士分析了两百多个可用性问题而提炼出的十项通用型原则。它是产品设计与用户体验设计的重要参考标准，值得深入研究与运用。

百度百科

这是一套实用性的原则，无论是产品开发还是落地，都能够很好的帮助我们提升用户体验和设计质量。以人为本，以用户为中心，让我们设计师能够很好的明确设计方向和用户需求的科学方法论。

1. 状态可见性原则

解读状态可见原则，我们将会从实际的案例中挑选，结合原则进行说明，方便大家更好的理解和把控状态可见性原则。

让用户知道系统在做什么

就是在产品设计过程中，向用户展示系统进行的操作状态。

举个例子

比如当页面刷新过程中，告知用户加载进度。当系统进行判断操作过程中告知用户当前操作状态。当用户清除缓存时告知用户产品怎么清除缓存。等等

让用户知道自己处于系统的什么位置

其实就是我是在哪里呀，我要去哪呀，从哪去呀，让用户一目了然，不用太多学习成本。这是在页面元素中的核心，一旦用户不知道自己处于系统什么位置，就会容易操作失误或者放弃产品。失去了设计为用户服务的本质。

举个例子

在闲鱼页面我们系统的标题栏、TAB栏的提示贯穿整体，用户知道我们所处的什么页面。比如认证提示，每一步告知用户进行到哪里了。

让用户知道系统做了什么

让用户知道产品做了什么，明确了知道下一步如何操作。

举个例子

在闲鱼登录时当你输入密码错误等，系统提示密码输入错误，可以重新输入。

当你退出登录，系统提示保存了当前数据，下次可继续登录。

当你清除缓存时，产品展示已清除置灰，数量变化等。

让用户知道自己在做什么

当用户进行操作时，产品及时反馈，用户做了什么。

举个例子

在闲鱼中最简单的例子就是当我们聊天时候，我们输入信息发送，显示在我们跟对方的聊天页面中。