二、看优秀的交互文档 

目前我觉得交互流程标注比较好的展示方式，是按照一个主流程在一个站点地图/画板的形式展示。当一个主流程中存在几个支线操作流程时，可以分别在一个站点地图/画板中，展示出来。同时用标题区分说明分支流程的操作名字。如下图所示：

全局断网：一般是在首页使用tips提示。用户在其他界面点击操作时，也会出现toast反馈提示用户。也有一些app在用户进入出现对话框提示用户网络异常。相对于对话框，使用tips对用户的干扰更小。

操作成功：一般操作成功都是根据具体的使用场景对出对应的提示。

操作失败：异常情况导致操作失败，这时需要统一的提示，通常使用toast，也有一些使用对话框强提示用户。

加载：涉及到全局加载和局部加载，全局加载在设计中要统一说明，例如上一个界面点击进入下一个界面，使用的全局加载就需要说明。如果是一些小场景的加载，那么需要特殊说明。例如上拉加载，下拉加载，局部小区域加载等。

1.初始状态的定义：初始化状态，没有任何内容，需要用户进行某种操作才能产生内容的界面。

2.清空状态的定义：通过删除或其他用户操作，清空当前的页面内容，产生了空界面，这时候需要有明确的提示，且告知用户该如何处理。

3.出错状态的定义：由于网络、服务器或者没有找他其他结果等原因导致无法加载内容，产生了空界面，这时候需要有明确的提示，且告知用户该如何处理。用户操作反馈的无结果界面也可以用这样的思路来设计。

三、思考设计背后的逻辑 

这样的改版，作为设计师或者产品经理，应该从两方面来看待这个事情，即从产品诉求和用户诉求双方面来看待，从两个方面看待得到的结果是迥然不同的。

产品诉求角度：新版将用户下单的状态显示在首页可提升首页访问深度和曝光率。

个人中心订单页并不能做到流量的二次利用。这也是这次改版的主要原因。

以前用户查看订单状态都是只能去订单页面，路径较长，且订单页面没有产品曝光，无法进行其他转化，流量无法被多次利用。

所以将用户的订单状态这种高频操作放置于首页，可利于其他业务的曝光。

美团的吃喝玩乐，其他业务被用户查看的概率提升。对产品来说是有巨大的好处。

用户诉求视角：将用户订单状态放于首页，用户的使用场景，会不时的查看订单状态，放置于首页可方面快捷的提供用户查看订单状态，对用户来说体验好。

从用户诉求和产品的诉求来看，这次改版应该是很优秀的。

但是脱离于个体业务，从产品全局来看，这种设计的逻辑方式，会让用户对于app的信息的寻找逻辑进行颠覆和破坏。

以后是不是重要的东西都可以放置于首页？如果这个改版开了个头，以后其他业务也都有这个诉求，整个产品的生态都会失去控制。

四、总结设计方法 

设计师接到的设计需求，大部分情况下是通过产品经理那里获得的。而产品经理的原始需求来源于：业务方、用户和老板。

产品经理会将原始需求进行整理，从而转化成产品需求，在这一过程中产品经理可能会出现对原始需求的理解出现偏差（范围扩大、范围缩小或者是方向错误）。

设计师如果直接拿着产品需求就开始做设计，可能会导致设计方案不符合业务需求。所以设计师进行设计前，最好也了解原始需求是怎么样产生的，这样才能做到心中有数。

• 提升清理缓存的成功率；
• 和开发沟通，是否有更好的更改缓存机制；
• 通过设计的手段引导用户清理缓存垃圾等。
• 是否可以增加自动清理功能。

例如注册流程/绑定银行卡的过程中，总的转化率只有0.06%，用户完成率过低，如果要优化整个用户注册操作流程，那么需要找出流失过大的节点进行优化。

从数据可以看出有两个失败率最高，分别为：注册流程和绑定银行卡流程。

以表单设计为例。常见的设计方案，是将所有的表单内容按照分组的方式，进行排列，如下图所示：

但是这种方案存在一个问题，用户进来之后，发现有大量的信息需要填写，填写压力大，导致用户的填写意愿变弱，导致提交成功率降低。

下图左边为分步设计，右图为表单信息隐藏到下一级页面。

4、切换用户视角

五、项目复盘 

1、提升设计师多种设计方法能力

2、提升设计师整体设计思维推导能力

3、提升设计师整体汇报、述职和晋升答辩能力

所以在工作中，每做完一个重要项目都要做好项目复盘。这样的话，既是是阶段性工作的总结，也是为下一次做项目提供更好的经验。

复盘的方法有多种，可以结合设计方法来做总结，在复盘的过程中，要体现最终的结果，即通过数据或用户反馈对我们设计验证。

也要总结其中的不足，为之后工作中避免踩坑，并更好的为以后的工作提供服务。

 转载请注明：学UI网》译文|交互设计不只是流程图与点击

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

前言

01.B端产品设计原则  

02.设计目的和业务逻辑的理解  

1.为什么做这个需求？

2.这个需求有什么功能？

3.怎么实现这些功能？

结构梳理

1.功能结构

2.业务流程

3.跳转逻辑

 03.交互设计  

1.信息载体

2.信息设计

3.导航设计

4.权限设计

5.图表设计

6.组件设计

7.反馈机制

8.语言设计

9.特殊场景

10.动效设计

 04.视觉设计  

原文地址：墨染动效（公众号）

作者：乔公子

转载请注明：学UI网》B端交互设计过程中的思考

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

一、功能背景

二、设计迭代

三、设计总结

转载请注明：学UI网》从微信朋友验证功能迭代，看交互设计对产品的价值

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

△ 豆瓣 App 电影榜单卡片

颜色的搭配其实是一个非常值得研究的问题。深入剖析的话内容也会很多，本文会告诉你，颜色如何挑选会更有规律，并保证基本和谐。

1. 色彩学概念浅谈

想要做好色彩的搭配，需了解一些色彩学概念。色彩学将颜色分为：同类色、类似色、邻近色、中差色、对比色、互补色。这几种颜色通过色相环的角度进行取色，如下图所示：

任意颜色都可以作为基色，每一个基色都有其相对应的同类色、对比色、互补色等等。

通常情况下，相邻的两个颜色，选择基色和邻近色之间的颜色，也就是与基色之间的角度 ≤ 60° 的颜色，会让页面的颜色显得和谐统一。

△ 得到 App 服务内容卡片

△ QQ 音乐 App 榜单卡片

如果选用对比色和互补色，则需要控制颜色的面积，比如以红色为主的页面中可以出现蓝色，但蓝色的面积占比最好不要超过 20%。

除了色相上的变化，颜色还有明度和纯度上的变化，对于颜色的影响也至关重要。这三个词汇的概念如下：

• 色相 Hue：也称色调，是指色彩的相貌
• 纯度 Saturation：也称饱和度，是指色彩的鲜艳程度
• 明度 Brightness：也称亮度，是指颜色的明暗程度

色相、纯度、明度三者构成了色立体的概念，让色相环由二维变成了三维的概念。

2. HSB 色彩模式

RGB 和 CMYK 是我们较为熟知的色彩模式。而根据上文提到过的色彩学概念，在实际工作中我们也可以借鉴 HSB 色彩模式进行调色和选择颜色。

在 sketch 和 PS 的 HSB 色板界面如下图：

其中：

• 色相 Hue (H)：取值在 0-360 度之间
• 纯度 Saturation (S)：取值在 0-100 之间，数值越高色彩就越纯艳
• 明度 Brightness (B)：取值在 0-100 之间，数值越高色彩就越明亮

由于纯度 Saturation (S) 和明度 Brightness (B) 之间的数值都是在 0-100 之间，因此两者具备一定的对应关系。这些数值可以为你在选择颜色时提供依据。

具体怎么使用这些数值，我们用案例来说明：

案例  

某 PC 端产品功能卡片需要做配色设计：

已知产品的品牌色是以下两个颜色，其 HSB 色值如下图所示：

– 颜色 A：H=233，S=74，B=100（主色）

– 颜色 B：H=267，S=79，B=100（辅色）

因此卡片的衍生色我们可以使用：蓝色调 + 临近色，且临近色的颜色最好介于蓝色和紫色之间，会使产品页面颜色的搭配更加和谐统一。

于是我们可以先根据品牌主色：

– 颜色 A：H=233，S=74，B=100

来确定初步颜色，我们只改变色相（H）的数值，分别在 233 的基础上进行 +10 和 -10，由此可以得到三个颜色 A1、A2、A3，呈现效果如下图：

– 颜色 A1：H=253，S=74，B=100

– 颜色 A2：H=243，S=74，B=100

– 颜色 A3：H=223，S=74，B=100

现在的卡片颜色略显单薄，我们可以再给每一张卡片加一个颜色，做出过渡色效果。于是我们在数值 A1、A2、A3的基础上，保持色相（H）不变，只改变这三个数值的明度（B）和纯度（S）的数值。以颜色 A1 为例：

– 颜色 A1：H=253，S=74，B=100

现在，我们想要得到一个比 A1 更深一点的颜色 A1-1，根据色彩学理论，我们可以降低明度（B）的数值，这样颜色会变深，同时增加纯度（S）的数值，这样颜色会更沉稳纯正，为了保证数值可控，我们将明度（B）降低 26，将纯度（S）提高 26，所以可以得到颜色 A1-1 的色值：

– 颜色 A1-1：H=253，S=100，B=74

A1 和 A1-1 的颜色效果如下图：

按照此方法，我们可以得到两组颜色和其数值：

所以我们的卡片可以使用渐变色：

这样卡片的颜色就基本确定下来了，我们可以再调整下卡片的细节，比如增加相关的背景插图，调整卡片上的文字排版等等，这组 PC 端卡片最后的效果如下图：

3. 补充说明

一个页面中元素的色彩选择有很多影响因素，比如：产品的品牌色、页面的功能、页面的内容、氛围等等，所以还是要具体情况具体分析，综合考虑选择颜色。

当然，以上提出的这些数值只是参考，为的是给你的颜色选择提供理论支撑。在实际应用中，也还是需要设计师根据具体情况，以及人眼视觉感知的效果，酌情做颜色上的优化处理。

原文链接：长弓小子（公众号）

作者：元尧

转载请注明：学UI网》详解｜交互设计中的色彩搭配，这样更有效！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

一、什么是渐进式披露？      

在产品设计中常常能听到这样的说法：把控制权给用户，确保用户明白一切都在自己的掌控之中。

虽然更多的选择会让用户兴奋，但问题是过多的选择也会让用户无法轻易的作出决定，反而造成体验上的负担。

渐进式披露不再是简单地给用户提供大量的信息和选择，而是将这个过程分解成几部分，让用户集中注意力在当前的事件上，从易到难地引导用户。

这样不仅可以确保用户不会被新信息淹没，还可以分解用户不想做的任务。例如将一个特别长的表单分成三或四个步骤，分步进行填写，同时还能单独查看每个步骤的内容。

二、渐进式披露的优势

想象一下这样的场景，我们刚下载了一款新游戏，进入游戏后发现里面有各种各样的游戏规则和操作细节，如果只是简单地将所有游戏信息推送出来，那么我们可能就会淹没在各种规则和细节里，根本记不下这么多规则，甚至会影响游戏体验。

产品设计也是如此，以一种渐进的方式呈现信息，可以让用户在深入了解产品细节前就投入到产品的使用中。

对新用户来说，渐进式披露让他们有足够的时间熟悉产品的基本知识，然后再进行更复杂的功能或任务，这样可以让整个产品更易于探索并提升可用性。

三、渐进式披露设计准则

划分主次和优先级

渐进式披露主要的目的是将用户注意力集中在重要的事情上，尤其是在一开始的时候。

在设计时，我们要考虑导航菜单以及选项的优先级，信息和功能的呈现也必须如此，通过渐进式披露能让用户首先体验产品最核心的功能和信息。

将注意力集中在关键功能上。比如进入电商App，重点是引导用户如何完成从看到买的整个过程，至于用户是从主页购买、搜索购买，还是从直播购买，这些等待用户慢慢去发现。

从主要内容向次要内容过渡

对于想要了解产品中每个功能的用户来说，除了明显的主要内容，次要内容的呈现也变得很重要。

通过好的按钮设计或可点击的链接来实现从主要内容向次要内容过渡。

转载请注明：学UI网》渐进式披露！交互设计领域独有的设计方法论

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

准则 1.  Timely —— 找准时机，即时反馈

在用户操作后尽快 / 立即给予反馈是最有效的。即时反馈有助于帮助用户养成正确的操作习惯，或纠正用户的不当操作。

如果反馈内容需要较长时间的加载，也可以给用户设计一些有特点的 / 情感化的加载状态，缓解用户等待的不耐烦，又可以传达一定的品牌调性。

例如：知乎 App 在加载内容的过程中，增加了 IP 形象的动态效果：

准则 2.  Specific —— 具体分析，差异对待

在设计交互反馈时，不仅仅要给出正确或错误的判断结果，同时也应该考虑到用户的个性化需求，针对不同类型、场景、地区的用户提供差异性引导和服务。

例如：大众点评、高德地图可以根据用户的位置，在用户开始使用产品时就推送个性化信息：

准则 3.  Balanced —— 正负反馈，穿插结合

通常来说，正面的反馈会激发用户的自信等积极情绪，因此我们更习惯使用正面反馈。但是一些不得不使用负面反馈的时候，我们可以在其中穿插一些正面的消息，减少或缓解用户的因负面反馈带来的消极情绪。

这就好像是别人跟你说：“ 坏消息是……，但是，这样做的好处是…… ”，坏消息不可避免，但加上一点转折，就会让他人心里稍微舒服一些。

例如：美团单车在你骑完车之后，需要支付费用时提示你可以购买单车套餐，虽然是在劝用户花钱，但看上去依旧很友善，其中的话术包括：“本次骑行免费”，“当前已是最优价格”：

准则 4.  Instructive —— 提示下步，指引行动

有效的反馈会主动多引导一步，对用户的下一步行动给出清晰的、正确的、指导性的意见，有助于驱动用户继续做出有效操作。

很多 App 在截屏之后都会给出下一步分享的路径引导：

准则 5.  Emotional —— 情感属性，引起共鸣

有科学依据证实，人脑会更容易被附带情绪的信息所吸引。用户更有可能会注意那些看上去承载了一些情绪的反馈，从而也更有可能改变其行为方式。

例如：虽然只是一个提醒弹窗，QQ 音乐会员到期的续费提醒文案却经过精心的设计，由各类歌名组成的一句话，每天的到期提醒都不同：

准则 6.  Traceable —— 可被溯源，可供反馈

一些特殊情况下的、有重大意义的反馈可以被追溯到其根本原因，可以提供给用户进行申诉和询问的渠道，供用户进行反馈。

例如：电商平台和外卖平台都会在用户下单或退单之后，提供商品物流的详细信息，在查看购买的商品的当前状态时，并可以追溯到商品所在的各个历史环节：

再比如，高德打车如果发现用户的行程订单金额与预估金额差距较大时，会给用户发短信提示，并给出客服和投诉渠道：

准则 7.  Less is more —— 质量优先，减少数量

在这个信息过载而注意力稀缺的时代，好的反馈在于质量，不在于数量。有时数量越多，反而会对用户造成不必要的负担。用户并不需要给出很多反馈或者记录生活中一切信息的产品，而是需要能够帮他们理出头绪、提出有效解决方案、呈现有用信息的产品。

以上这 7 大准则，来源于我们日常工作中的积累和沉淀，对于设计产品的交互反馈具备较高的指导意义，希望对你有启发。

原文链接：长弓小子（公众号）

作者：元尧

转载请注明：学UI网》干货｜交互设计中的「有效反馈」7大准则！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

为什么需要设计质量保证

在设计中，最常见的质量保证方式就是在产品验收环节进行「设计走查」。不过因为是上线前的最后验收环节之一，经常会出现因临近上线时间，且交互和UI类的问题在修改优先级中一般都是较低的，最后只能修改部分设计上的「bug」，其他只能舍弃或放入永远不会开工的下次迭代再改。设计师在各种来回扯皮之间筋疲力尽，看不到设计价值在需求中的体现，各种“这里设计不好”的锅一不小心也接了一堆。更严重的问题在于，用户得不到更优秀的体验，轻则耗费更多时间，重则放弃使用功能。不管哪种结果，对于产品整体满意度都会有不同程度的影响。

由此可见，设计质量保证仅靠最后临门一脚的设计走查远远是不够的。在需求全周期中各个环节都可以加入对设计质量的把控（Design QA）。Design QA的概念来源于研发流程中测试环节。质量保证缩写为QA（Quality Assurance），是产品交付流程中非常重要的一环，一般就是大家了解的测试工程师的岗位职责内容。在这个环节中，测试人员需要对产品功能进行仔细认证，确认是否满足了产品需求并且可以正常使用。但与测试不同，设计QA须加入到产品需求全周期的各个环节中，最终形成与产品设计并行的一个流程，才能有效保证质量。

设计QA实施步骤和方案

步骤1: 需求分级，确定是否需要设计QA

要保证设计质量，在B端设计中不是易事。我们经常会听到：

· “这个功能能用就行”：公司/团队不理解或不够认同设计价值是什么，不明白为什么体验会在每一处未还原的设计稿上慢慢丢失

· “这还原的不挺好，和你设计稿我看一样啊”：非专业的同事无法分辨设计稿与研发实现稿的细微差异

· “没时间改了，下次再说吧”：设计质量保证低于功能质量保证，或者团队必须在有限的时间交付需求

在接到需求后可以根据以往经验或与产品经理的沟通，确定本次需求设计等级：

• A：公司级和部门级重点、设计周期长内容多、设计可沉淀输出的内容多的需求
• B：正常迭代、量级一般的需求
• C：时间紧迫倒逼排期、无前端研发资源、少量调整、评估不需要设计的需求

在确认等级后，作为设计师可以有一定的心理预期。对于A类可能各个环节都需要详细的进行QA，而对于C类有可能连设计走查都没有预留时间，只能靠后续线上的直接验证了。后面的几个步骤可针对不同的等级选取全部或部分进行实施。

步骤2:交互设计中，考虑极限下的正确展示

B端交互设计中，很重要却经常制作不到位的就是极限情况。看起来都是各种表格，简单的给定一个宽度即可，但在上线后经常发现，填充了真实商家数据的表格，总有意想不到的错位折行和重要信息截断，用户的可阅读性降低。

                                             左：重要信息被截断；右：折行错位

步骤3: 设计评审与交付，交互说明与UI标注一体化

在完成制作后一定要进行评审，对功能完整性、页面流程、页面文案、组件特殊交互逻辑要求、交互可实现性与开发成本进行评估。项目相关利益人都需要参加，尤其是测试同事需要参与评审，保证后续测试用例编写质量。在交互与UI全部评审完成并通过后，交付给研发的设计稿最好可以做到交互说明文档与UI标注一体化，方便研发同事查看。避免在交互说明与UI标注中来回切换，导致交互或UI细节遗漏。这里推荐一个sketch插件：NoteBook Pro （需要付费，lite版大约¥76），方便在sketch中添加交互说明标注，在上传到可以在线查看UI标注的平台，比如Zeplin/Relay等。

交互说明+UI标注在一个页面上同时呈现

步骤4: 参加测试用例评审，确保测试用例涵盖所有交互细节

一般来说，交互稿与UI稿交付给研发同学后，设计师就要开始忙下一个需求了。直到通知设计走查前，设计师暂时不会再随时跟进需求进展，而是交接到产品或项目经理手中。而在这个从设计稿到研发实现的过程中，设计师也需要在关键节点参与其中，确保设计质量。测试用例是其中一个设计师可以参与的环节。其实有时候很多交互文档中的内容会被用作测试用例，所以需要再次和研发与测试同学对齐所有交互内容，保证交互设计内容不会在此阶段被降级甚至直接去掉。

步骤5:设计走查，输出并记录结果

此环节很重要的一点就是走查文档或记录。未完成修改的内容，建议研发给出一个解释，并以文档的方式记录下来抄送给相关利益人，标明可能带来的风险。同时尝试与产品或项目经理沟通，推动迭代优化的具体时间，避免「下次一定」的无效承诺。

总结

设计QA是贯穿整个产品需求全周期的设计流程，在以往的点状设计走查之外，需要与团队上下游通力合作沟通，才能确保优秀的产品呈现在用户面前。

参考文献：

https://blog.prototypr.io/the-qa-process-in-ux-design-7cd3ffa771ad

https://www.nngroup.com/articles/quality-assurance-ux/

https://uxdesign.cc/the-importance-of-design-qa-in-digital-product-design-c3f3d128270

https://wearebrain.com/blog/customer-ux-ui/ux-designers-and-qa-engineers-collaboration/

https://owl.tools/notebook-sketch-plugin

原文地址：京东设计中心JDC（公众号）

作者：唐朋博、李小猛

转载请注明：学UI网》B端交互设计在产品需求全周期中的质量保证

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

1.  本能层 —— 感官刺激

对于本能层，设计师需要在符合功能需求的前提下，尽可能的给用户带来听觉、视觉、触觉的感官刺激，极力去促成用户与产品的 “一见钟情”。

案例 1  ：App Store 的卡片推荐做的很有新意，比如：把吉祥物（品牌形象）是小熊的工具收集到了一起，并取名为：熊帮手。

案例 2  ：微博长按点赞按钮，可以选择不同的点赞状态。图标还是动态的，很有趣。

案例 3  ：淘宝双十一预热，首页的 icon 变成了 “今晚 20 点双 11 抢预售”的字样，烘托氛围又打了广告。

案例 4  ：微信拨打语音的界面，在等待好友接听的过程中，可以看到好友朋友圈的图片，缓解用户等待时的无聊，也为即将进行的语音聊天提供了话题。

2. 行为层 —— 细节引导

对于行为层，设计师需对用户的行为进行预判和引导，利用细节处理打动用户，让用户对产品产生信任感和依赖感。

案例 1  ：当苹果公司发现用户最近在官方渠道购买了新的 iPhone ，老 iPhone 的设置页面就会给出提示，让用户为新的 iPhone 做好数据迁移准备。

案例 2  ：iOS 系统后台在看缩略效果时，会将用户的敏感、私密的信息的 App 页面进行模糊处理，保护用户的隐私安全。

案例 3  ：在屏幕很暗的情况下，打开微信支付二维码，屏幕会瞬间亮起，便于商家扫码付款。

案例 4  ：货拉拉在展示搬家车辆详细信息时，使用了剖面图，并模拟了不同搬家场景下的家具内容，让用户更好估算车辆空间。

3. 反思层 —— 认知共鸣

对于反思层，设计师要调动用户最深层的记忆和感知，将视觉效果、产品功能和用户认知紧密结合，形成用户对于产品和品牌的深刻认知。

案例 1  ：FigJam 是一款来自 Figma 的多人协作在线白板工具，可以进行头脑风暴、绘制流程、多人协同标记等。里面也有很多人性化的小功能，比如：当两个人同时长按 “H” 键时，就会出现 highfive（击掌的动效），非常适合当设计师达成共识时使用：

案例 2  ：小睡眠 App 发现学生时代的我们经常会在枯燥的课堂上睡觉，所以准备了各种课堂讲解、校长发言、领导开会的声音作为催眠、助眠的音乐，让人会心一笑。

案例 3  ：饿了么在异常天气下通过在界面上增加天气的元素，让用户看到外卖小哥的辛苦，使用视觉和内容共情，唤起用户的同理心，降低用户因外卖迟到而做的投诉和差评。

案例 4  ：QQ音乐上线了宠物功能，一共有五个品种的宠物让用户可以选择领取，多听歌能喂饱宠物，然后送它出去参加演唱会或者和好友进行互动。

原文链接：长弓小子（公众号）

作者：元尧

转载请注明：学UI网》案例锦囊｜交互设计中「情感化」设计优秀案例（二）

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司