手机微博怎么换行 干货 | “低保真到高保真”需要多少次的推敲与考量（二）

手机微博怎么换行 干货 | “低保真到高保真”需要多少次的推敲与考量（二）

上一篇文章（）中笔者从视觉美化的角度进行了分析，本文将继续从用户体验和开发原则两个方面来分析从低保真走向高保真需要的思维。

用户体验

用户体验是UI设计需要考虑的因素，在实现视觉舒适度之后，我们可以花更多的时间去模拟用户场景，深入思考用户体验，包括情绪、信念、偏好、认知印象、生理心理反应、行为、成就等。

用户体验没有一个确切的标准，它随着产品的服务色彩、针对不同人群的做法而不同。

用户体验虽然和我前面讲的愿景以及后面讲的开发规则有一些重合，但是还是稍有不同，需要分开来讨论，比如产品使用的流畅度、视觉感官体验、模拟真实物理世界的交互体验等。

用户体验可以分为三个方面：感知、交互、情感。

01 感官体验

感官体验可以细分为视觉、听觉、触觉的用户体验，其中听觉和触觉目前在产品中运用较少，参考价值也不够权威，所以暂时不做介绍。

1.视觉统一

视觉设计的统一性可以让一个产品具有吸引力。正是这种吸引力让用户觉得产品是可爱的，是简单的，还是大胆的。其实产品的概念就是从视觉上吸引用户，让他们爱上产品。视觉统一性可以创造用户粘性。

视觉统一包括产品颜色的统一、同一场景下图标的统一、相同交互属性的按钮样式的统一、面板间距的统一、各页面控件的统一。（具体如何使用在上面的视觉部分我已经详细分析过了）

2. 信息层次

了解用户核心与非核心需求，按照优先级排列信息层级，引导用户的视觉方向。

通俗的说，就是指用户打开产品后首先想做什么，然后想做什么。设计师在设计页面时也会根据用户需求的强度，强化主视觉，弱化次要信息。比如最近很火的共享单车产品，80%的用户最短时间内打开产品就是为了扫码骑车，所以首页黄金位置只有一个“扫码用车”按钮，次要功能被弱化。

当涉及到特定的信息卡时，还应根据字段优先级别和在卡片中的位置来区分视觉强度。

（具体信息卡处理细节在上面的视觉控制部分也进行了详细分析）

3. 可视化文本和数据

图形永远比文字更直观、立体。相比传统的表格或文字呈现数据的方式，可视化可以更直观地呈现数据，使数据更客观、更有说服力。在各类报告和说明文件中，使用直观的图表呈现数据，简洁可靠。

4.视觉扩张和收缩

艺术是无拘无束的，设计是克制的。尤其对于产品界面的设计，我们更关心的是如何让页面在视觉上更加整洁舒适，同时保证必要字段的存在。在需要吸引用户注意力的元素上，我们可以放开设计，用丰富的元素和手法去体现。当涉及到信息量大、阅读体验好的页面时，我们要学会克制设计，不要让过度的设计干扰主题。至于度的把控，我们需要不断站在用户的角度去思考，这里的图标有必要复杂化吗？

02 互动体验

用户交互体验对产品的用户留存率影响很大，好的交互体验应该是好用、好用、好用的，交互过程中的交互方式、交互形式、反馈都是值得深入思考的。

1.简化交互流程

做产品不像拍电影电视剧，充满坎坷和波折。产品交互的每一个步骤都是有用且必要的，因为每增加一个交互步骤，都可能阻挡用户，从而降低留存率。比如过去的产品注册需要填写各种个人信息才能成功注册，非常繁琐，但现在大多数注册只需要手机验证就可以一键登录。后来，指纹解锁、人脸解锁取代了密码输入。

弹窗并不受用户欢迎，所以在设计时尽量避免不必要的弹窗。很多不重要的提示，用三秒的提示窗就可以搞定，不要让用户进行不必要的交互。

当用户填写表格时，最好让他们选择多项选择题，而不是填空题。

如果可以通过一个按钮进行切换，就不要做出额外的选择。

2.降低用户学习成本

很多交互方式已经形成了用户的习惯，比如左滑删除、下拉刷新，又或者房子图标就是首页，人物图标就是个人中心等等。在产品初期，我们尽量不去尝试改变这些交互方式，因为这些根深蒂固在用户心理的交互方式，如果改变需要很大的学习成本。微信曾经把首页的下拉交互改成拍短视频，遭到很多用户的抱怨，不得不删除。

如果产品需要增加一些新的功能，那么在初始阶段最好使用文字代替图标，或者在用户第一次打开产品时就给出操作说明。

3.预测用户的下一步行动

当用户进行某项操作时，往往会有相关的操作。比如在美图秀秀中保存编辑好的照片后，可以直接分享到朋友圈或微博等，或者用手机相机拍照后再打开微信聊天时会提示是否发送刚刚拍摄的照片。这些交互细节都会让用户觉得产品更加友好，从而增加用户粘性。

4.降低用户错误操作的概率

首先，我们可以通过提供清晰的信息板块层级，让用户在操作完成前就能预知到操作内容，降低用户误操作的概率。对于一些不可逆的敏感交互操作，我们需要在操作过程中给用户提供反馈，最好有清晰的文字提示和二次确认。对于一些可撤销的交互，用户可以在操作后返回。

5.添加有趣的交互效果

交互效果不仅能在视觉上让产品更加优质，在体验上也能为用户提供完整的信息和关联形式，让用户更清楚直观的看到某些元素从哪里来，又回到哪里去。（交互效果的具体表现形式在视觉篇有详细分析）

6.优化开发规则，减少用户使用中的bug

对于用户来说，没有什么比产品使用过程中出现 Bug 更让人无法忍受的了。说到这里，可能有人会疑惑，设计师能控制 Bug 的数量吗？答案是可以的。我们在做设计图的时候，可以尽量减少开发规则和开发判断，从而减少开发完成后 Bug 的发生。下面我会详细分析如何优化开发规则。

03 情感体验

情感体验是以感性带动心理的体验活动，是用户在产品客观环境的影响下，产生的一种奇妙的主观感受体验。

1. 用户的专属感和自豪感

一种专属感，一种“归属感、唯一归属感”的主观感受开始充斥用户的意识，他会觉得这个产品特别“懂”他。这个“懂”字，是“大品”独有的、不可或缺的属性。在传统的认知体系中，专属感意味着一种稀缺性，一种对稀缺资源的占有，一种只有极狭窄的受众群体才能享有的“特权”。它常常和“定制”、“独家供应”、“限量”等词捆绑在一起，因此频繁出现在奢侈品行业的产品理念和营销推广活动中。

比如我们在产品中设计了不同的原创头像供用户选择，而不是只使用一个默认头像。再比如产品中的积分等级不只是分为LV1-LV5，而是增加了独特的标识，从感官上区分等级，提升用户的专属感和自豪感，同时也有助于提升用户活跃度。在给用户发送通知时，在“你好”前加上用户的名字，也会提升用户的专属感。

2. 用户对产品的感知友好

产品是用来服务用户的，解决用户需求的。早期你加入百度联盟的时候，百度批准你，给你发邮件是这样的：百度已经批准你加入百度联盟了。批准，这个语气让人感觉很不舒服。所以就说：恭喜你成为百度联盟的一员。这种用文字表达的感觉，也是用户体验的一个细节。

再比如，当服务器需要维护时，要给用户清晰明确的通知，因为产品不可用会严重影响用户的安全感，从而影响产品的友好度。另外，当产品页面一片空白时，可以添加有趣的图形和情感化的文字，以增强用户的友好度。

这也是为什么百度和谷歌要制作节日logo的原因，因为搜索产品太常见了，在节日期间制作logo，会给用户一种感觉和情感，粘性会更好，我们可以从视觉上去提升这种东西。

3.用户对产品的信任

信任可以体现在很多方面，比如我们希望在玩游戏的时候能有更多的任务提示，或者在我电池电量不足的时候提醒我充电。这些对系统更加人性化的诉求，其实都是因为人类天生对机器有恐惧和陌生感——我们不喜欢冰冷的机器，比如 DOS 命令，我们喜欢有欢迎界面的机器或者 MAC OS——我们喜欢和人对话。

产品必须在用户每次操作后给出及时、人性化的反馈，例如当用户可进行某项操作的次数有限时，在次数快用完时，应给出人性化的提醒。

在商品页面适当加入可滚动的栏目、推荐位置等，并经常变换，为页面增添情感色彩，让用户感觉到商品是“活的”，而不是一成不变的。

开发规则

设计美观又实用是一门技术，而如何帮助开发者将自己的设计百分百还原又是另一门技术。设计页面时有很多需要注意的地方和技巧，可以在程序后期的开发中节省精力和资源。而且借助插件，设计师在后期的图标裁剪和标注上可以省去很多力气。

设计师不应该限制自己的思维，当然那只是日常的练习，设计师在工作中要时刻明白这样的设计该如何去实现，才能进行开发，成本是否和得到的效果一致。

1. 尽量减少对齐规则

不要在一个页面上使用过多的对齐规则，尤其是对一个页面上的同一个模块。不要使用不同的对齐规则。这会浪费大量不必要的开发时间，并且可能在视觉上不舒服。

2. 不要在页面背景中添加图片

很多设计概念稿喜欢在背景中添加一些图片，让页面看起来更有科技感和神秘感，但线上产品中实现起来难度很大，很难满足市面上手机的尺寸适配，不同尺寸的手机容易出现背景图片挤压变形的情况。

3. 尽量少用投影

在我们的设计软件中，对于投影可以调整的属性有很多，比如颜色、透明度、漫反射大小、XY位置等等。因此漫反射投影经常出现在很多概念稿中，但是在设计实现的时候，程序员很难把投影做得像在设计软件中那么自然，因为程序软件中的投影没有那么多可以调整的属性。

4. 尽可能保持控件统一

最好能将页面内的按钮、边距、字体大小、颜色等控件统一起来，方便后期不同页面的开发中可以复用，减少与开发人员不必要的沟通时间，也能保证视觉的一致性。

5.考虑消息的最大长度

对于字段信息，我们尽量使用设计中可能出现的真实信息，避免设计一张信息卡然后照搬整个页面。抛开视觉不适的问题，从开发规则上来说，很容易出现意想不到的问题。比如信息字段的最大长度可能超出设计稿的容忍度而引发bug。对于一些不重要的信息展示页面，可以用控制字段显示长度的方法省略，而对于重要的文字介绍页面，比如某个项目的详细信息页，就要避免文字遗漏，做换行或者其他处理方式。

6. 水平放置多个按钮（图标）时，注意模块的均等划分

当横向有多个按钮（图标）时，尽量使用模块均分，并将按钮（图标）居中放置在固定的模块区域内或遵循其他统一的对齐规则，以减少开发时的沟通时间。例如网易云下方的菜单图标及勾选，底部的导航栏图标。

7. 当文本有气泡时

当文字周围有气泡时，很多入门级设计师喜欢将气泡设计成等大等小，文字与气泡之间的距离没有固定值。如果文字内容固定，这样还可以接受，但当气泡内的文字内容是搜索历史或者一些后台可以更改的标签等时，就应该制定一个规则，包括文字与气泡之间的距离、气泡与气泡之间的距离、气泡与页边距的最小距离等。

8. 如何实现运动效果

交互动画的实现需要非常详细的讲解，这里我就不多说了，以后再专门写一篇文章来分析。

这里给大家分享一些实用的知识，在AE中可以设计一些有趣的图形效果，可以使用插件一键生成Json项目文件，然后直接将文件交给开发者快速在产品中实现。

该插件可以在附件中下载，安装和使用步骤也非常简单。

第一步：安装插件（下载附件）

解压文件后打开ZXP文件会弹出一个弹窗，将文件拖进去安装，提示安装完成之后关闭即可。

第 2 步：使用插件

打开AE，点击窗口-扩展-

然后选择需要生成的动画，选择输出位置，点击即可。最后将生成的.json文件发送给开发者即可。（动画要用AE里面的图形工具来制作，当然，你需要自己去尝试去发现新世界。）

9. 剪切注释

继分享完动态效果插件之后，这里再给大家分享一个必备的图标剪切与注释工具。

第一步：安装插件（下载附件）

将解压好的“ ”文件放入插件-管理插件-弹窗左下角的齿轮-打开插件文件夹，然后将“ ”文件放入文件中。（英文版看我截图的位置）

第 2 步：使用插件

当我们完成页面后，我们不再需要手动标记，只需要使用内置的切片工具将切片放入相应的剪切组中，然后选择剪切多个，勾选...选项，并将剪切设置为透明即可。

然后选择插件-导出规范，最后选择需要导出的画板。导出后会生成一个文件夹，里面有一个单独的页面，所有切好的文件，以及一个标注好尺寸的Html文件。然后最随意的把这个文件夹扔给开发人员。

总结

视觉舒适是基础，如果连最基本的东西都做不到，那就静下心来从视觉入手，每个设计师都要经历“过度设计”，才能真正理解什么是极简设计，视觉是最基本的用户体验。

在制作一个页面的时候，我们不断在两种身份之间切换，以设计师的角度去设计美观度，再以用户的角度去审视设计的实用性和可用性，设计师本身就是一个用户。