前言

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咨询、用户体验公司、软件界面设计公司

是什么让你选择这家餐馆？刚进去的时候，餐馆给你的第一印象是什么？服务员是否让你在等候一阵子之后领你去合适的座位？菜单放在桌子上的什么位置？浏览体验如何？你点了哪些菜？上菜的速度够快么？味道地道么？服务员够不够勤快体贴？你是否还想去这家餐馆吃？

所有的这些问题都关乎你对于这家餐馆印象的好坏，也直指这家餐馆的用户体验本身。

当然，我们通常所说的用户体验（UX）所针对的对象大多是数字和科技产品或服务。这也就意味着，用户体验设计本身至少有着进一步提升的可能性。

现如今，用户体验设计已经成为了一门重要的学科，快速地发展，并且拥有极大的成长空间。虽然这是一门拥有多学科背景的新兴学科，但是向上追溯它的发展历程之时，我们会发现早在文艺复兴时期之前它就已经存在了。

在争论用户体验设计会带领我们走向何方这种大命题之前，回顾一下用户体验设计发展史上的精彩瞬间，应该能给我们许多启发。

公元1430左右：达芬奇的“厨房噩梦”

Michael Gelb 在他的著作《如何像达芬奇一样思考》（How to Think like Leonardo da Vinci）中讲述了米兰公爵委托达芬奇为高端宴会设计专属厨房的故事。这位伟大的艺术大师将他一贯的创造性天赋运用在这次厨房设计中，他将技术和用户体验设计融入到整个厨房的细节里面，比如传送带输送食物，也首次在厨房的安全设计中加入了喷水灭火系统。

有意思的是，达芬奇的设计很多开创性的设计一样，不足也非常明显。传送带是纯人工操作，工作不太正常，更麻烦的问题出在喷水灭火系统上，失灵的设计捎带手毁了不少食物。

当然，虽然达芬奇的这次尝试令厨房化身为噩梦，但是作为用户体验设计的早期实践，却有着无比重要的历史意义。

20世纪初：Taylorism 和工业革命

作为最早的管理顾问之一，机械工程师 Frederick Winslow Taylor 撰写了《科学管理原理》一文，深刻地影响了工程效率领域的研究。随着Henry Ford的福特汽车实现大规模生产，Taylor和他的支持者们也逐渐完善出了劳动者和工具之间高效协同交互的早期模式。

1948：丰田人性化的生产系统

和福特一样，丰田不仅在设计和生产效率上非常重视，而且对于人工输出效率也非常关心。生产过程中装配工人受到了更多的重视，几乎不亚于对技术的关注。精益生产模式的巨大成功，使得人与技术之间的交互得到了更多的重视。

1955：Dreyfuss ，为人的设计

美国著名工业设计师Henry Dreyfuss 在这一年写下了著名的设计书《为人的设计》（Designing for People）。

在书中，他写道：

当产品和用户之间的连接点变成了摩擦点，那么工业设计师的设计就是失败的。

相反，如果产品能让人们感觉更安全，更舒适，更乐于购买，更加高效，甚至只是让人们单纯地更加快乐，那么此处的设计师是成功的。

随着人与产品的接触越来越多，他在书中所讲述的许多设计规则，被大家越来越多地引用。

1966：迪士尼和开心效应

在迪士尼世界早期建设阶段，Walt Disney 在公告中是这样描述它的：“…它（迪士尼世界）会成为一个坚持使用最新的技术改善人们生活的地方…”他的想象力和技术的结合，为全世界所有人带来了无限的开心和喜悦，并激励着设计师们（尤其是用户体验设计师）前行。

1970s：施乐PARC和个人电脑

作为施乐最出名的研究机构，PARC为随后大范围普及的个人电脑的设计型态和交互逻辑定下了基调。Bob Taylor，作为一名训练有素的心理学家和工程师，带领着他的团队构建出了人机交互领域最重要也是最普及的工具，包括图形化界面（GUI）和鼠标。（随后乔布斯和盖茨先后访问了PARC，参考了施乐之星的设计，为今天的苹果和微软开辟了通向未来的道路。）

1995: Don Norman，第一个用户体验专家

身为电气工程师和认知科学家的Don Norman加盟苹果公司之后，帮助这家传奇企业对他们以人为核心的产品线进行研究和设计。而他的职位则被命名为“用户体验架构师”（User Experience Architect），这也是首个用户体验职位。

在这个阶段，Don Norman 还撰写了经典的设计书《设计心理学》（The Design of Everyday Things），直到今天它依然是设计师的必读书。

2007: iPhone

2007年MacWorld上，乔布斯发布了iPhone，称其为“跨越式产品”，并承诺它会比市面上任何智能手机都要易用。随后，iPhone不仅兑现了乔布斯的承诺，而且彻底改变了智能设备领域的格局，苹果公司再一次登顶，成为世界上最成功的公司之一。

iPhone的绝妙之处在于，它融合了当前最卓越的软件和硬件系统，借助革命性的电容触摸屏而非传统的物理键盘来同用户进行交互。可以说，初代的iPhone所提供的用户体验，远远优于同时代的任何手机。

这也在无意中让智能设备的软硬件研发和相关领域将重心放到用户体验上来。苹果公司强调他们是通过提供出色的用户体验赢得市场成功和无上荣誉，其他人自然而然就跟随这他们的脚步前进。

用户体验的未来

用户体验设计发展史上的每一个重要里程碑，都源自技术和人性的碰撞。互联网和新兴技术正在越来越多的介入我们的生活，我们可以遇见到用户体验设计会来接下来的日子里，一日千里地发展前进。只是这种发展也越来越多地需要专业技能，跨领域协作，多学科实践，比如用户研究、图形设计、客户支持、软件开发等等等等。根据 indeed.com 网站的统计数据，在用户体验设计告诉发展的今天，单过去的15天里，就有超过6000个相关职位的招聘需求发布在网上。

互联网不再单纯的局限于我们的笔记本电脑和智能手机，可穿戴设备，智能汽车和智能医疗设备也都会接入网络。全球互联的时代赋予专业的用户体验从业者更重大的责任，用户体验设计也不再局限于屏幕和像素，超出外形，关乎生活每个细节的用户体验设计无时无刻无处不存在。

所以，不论你是达芬奇还是福特，是泰勒还是乔布斯，你都拥有着无限的可能性和海量的机会，改善用户体验，创造更美好的世界。

文章来源：优设
优设译者：@陈子木

转载请注明：学UI网》用户体验设计发展简史你知道吗？

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

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

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

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

据Google技术总监RayKurzweil的所说：到2029年，电脑很可能会比人类更聪明，UX的未来也将变得更加自动化。人工智能和机器学习等最新科技已经可以支持需要人类参与的、非线性的、逻辑复杂的任务，技术创新正在改变人们的生活方式。例如科技创业型公司不仅为自动驾驶提供相关建议，甚至可以为节目表演提供更加智能的建议。

在我们创建和使用复杂产品的过程中，自动化发挥着日益重要的作用，我们可以感知到，自动化将在UX用户体验设计的未来发挥巨大的作用。用户体验设计的自动化很可能是接下来影响UX设计整个行业的一件大事 – 无论是优化设计反馈流程，还是改变和精简产品团队的运作方式，自动化都会起到重要作用。自动化正在不断增强我们创造引人注目的产品的能力。

设计自动化：迅速将概念转化为高保真原型

通常，UX设计师绘制用户体验地图和信息架构图，并在产品设计的过程中进行用户研究工作。在设计过程中，设计师的典型输出包括：手绘草图，如图一所示。还有流程图、架构图、不同保真度的线框图，如图2所示。这些交付物中的某些-尤其是高保证原型，可能需要花费几周甚至几个月的时间进行绘制。大一般情况下，在设计过程没有完全完成之前，开发人员不会进入开发过程中，因为设计稿为后续的开发提供了指导方向。

图1 低保真用户界面草图

图2 低保真用户界面草图

因此，我们需要找到优化整个可用性测试流程的新方法，以提高设计的有效性和效率，最终实现更快的信息反馈并缩短验证周期。通过应用自动化技术，如果能够快速的创建低保真线框图，同时生成高保真界面，那么就可以在更短的时间内创建产品的界面，并将更多的时间与精力用于用户研究，最终可以加快提升用户体验的每个环节。

自动化蕴含着无尽的机会

Airbnb开创了自动化用户体验的设计流程，成为自动化设计的先驱。在他们的文章“手绘草图界面”中，Airbnb的设计技术主管Benjamin Wilkins和Airbnb的设计技术专家Jon Gold，演示了如何使用专用相机设备和软件实时制作低保真草图和高保真视觉原型，例如图3和4。Airbnb的视觉设计团队最终接受了自动化产出的视觉图并对视觉效果进行调整，事实证明通过创建原型以获得快速反馈和验证设计方案的速度是非常高效的。

图3 Airbnb设计

图4 Airbnb的迭代设计

“我们将代码作为设计工具去投资。通过代码来处理包括界面布局和设计展示、逻辑和数据等内容的展示。有助于缩小工程师和设计师之间的距离，以及缩短视觉图与线上效果图之间的距离 ”。- Airbnb设计负责人 Alex Schleifer

自动化设计有什么重要意义呢？自动化不是令人印象深刻的相机设备，而是能够引发巨大兴趣的机器学习。它凸显了利用机器学习的无尽机会，优化了产品设计流程，并且能够提供越来越多的价值。未来，只需通过与Siri，Google智能助理或Slack嵌入式机器人交谈就可以设计用户原型界面。“嗨，DesignBot， call to action按钮使用标题蓝色。”正如Airbnb团队所证明的，这一切都是有可能的。

利用“设计自动化”创造更好的产品

随着即将到来的自动化设计技术，这对您的团队意味着什么呢？为了为您的团队做好迎接设计自动化的准备，您可以通过以下几种方法无缝地过渡到自动化设计的未来。

视觉与品牌设计团队

自动化设计的未来在很大程度上依赖于开发强大的可视化语言，以支持多样的设计组件和设计规范。这确保了跨设备、跨平台的产品都能拥有一致的品牌体验。现在可以花时间准备这些可视化语言，确保它们能够准确描述您的品牌。

产品负责人和产品经理

花一些时间去研究并开发加快设计过程的新方法。从创新方法入手，简化产品构思和原型制作过程。如果你不这样做，你的竞争对手当然会。自动化设计不应该成为创意的瓶颈，产品面向的是用户，加快设计过程可以更好地为用户服务。

“测试想法所需的时间应该为零 ”。- Airbnb设计主管 Benjamin Wilkins

UX设计师

在日常工作流程中开始使用新技术。不要将自动化视为对创意的威胁，而应将其视为利用创新技术来增强专业知识的机会，通过自动化构建更好的产品。通过减少耗时、重复性任务的时间，可以将更多的时间和资源用来进行用户研究，概念测试或用户验证。这所有事情完全是关乎用户体验的。

设计自动化即将到来

在过去几年中，机器学习和AI在改变整个行业的运营方式和业务方式方面发挥越来越重要的作用。由于越来越复杂的流程变得自动化，我们必须专注地去研究自动化与UX设计之间的交叉点，为设计自动化未来的到来做好准备。

虽然自动化不会在一夜之间发生，但像Airbnb这样有远见的公司正在探索在未来成为主流的新型工作方式。由于他们的探索与研究，我们能够更好地评估自动化带来的机会与影响，并了解如何更好地利用这些创新来改进我们的工作方式。无论是个人技能的提升还是设计团队的流程优化，自动化设计的潜力都是巨大的。

译者总结

在了解了自动化设计相关的内容后，笔者将现有的产品上线流程与应用自动化设计的产品上线流程进行对比，如图5所示：

图5 应用自动化设计的前后流程对比

传统的产品上线流程

需求产出，待需求评审没有问题即进入交互设计阶段（包括初期草图方案绘制，主界面绘制以及完整的交互界面与交互说明撰写），交互设计基本完成后进入视觉设计阶段，同时前端可进入开发阶段；在进行交互设计的同时，后端同步提供接口。开发完成后进入测试阶段，测试没有问题产品可发布上线。上线后收集用户反馈，进入下一轮的产品迭代中。

自动化的产品上线流程

需求产出，待需求评审没有问题即进入交互设计阶段，交互阶段草图绘制完成后即可通过自动化技术将草图转化为高保真原型界面（视觉再进行相应调整即可），减少交互、视觉与前端开发的工作量。待前后端开发完成后进入测试阶段，测试没有问题产品可发布上线。上线后收集用户反馈，进入下一轮的产品迭代中。

为了便于理解自动化技术，译者简单总结一下自动化技术的实现原理：自动化技术依赖前端强大的可视化语言，需要强大的前端组件库来识别草图中的占位符含义。例如，当在草图中绘制一个占位符时，通过智能化技术自动识别该占位符在产品中所代表的组件，进而生成高保真的用户界面。因此，可以迅速看到产品从草图阶段到上线后的效果图，也便于对设计方案进行及时更正。

结合两种流程对比，译者结合自身工作经历总结了应用自动化设计的三点优势：

（1）迅速验证多种设计方案

在项目迭代周期紧张的情况下，设计师缺少额外的时间和精力来设计多种方案，更无法验证哪种设计方案能更好地解决用户需求。精益设计时代，很难对每次的设计方案进行可用性测试。而自动化设计过程中，可以直接将设计草图转换为可点击的高保真原型界面，交互设计师有更多时间和精力来绘制多种设计方案并利用高保真界面进行用户测试，从而迅速调整设计方案使其能更精准的帮助用户解决痛点，从而提升用户体验。

（2）提前开发节点，缩短项目周期

原有的开发流程中，在需求明确之后，后端可以同步开发某些接口，而前端开发需要等完整的交互界面绘制完成后才能进入开发阶段，这导致项目周期很难缩短。自动化设计在交互设计师完成草图后前端开发即可进入开发阶段，将开发节点提前至操作阶段，可以明显缩短项目周期，提高产品迭代效率。

（3）迅速验证需求是否被满足

笔者在工作过程中发现，B端产品的用户在交互评审的过程中会否定自己的需求。产品经理收集需求的过程中，用户提出想要满足A需求。在A需求的设计方案完成后，用户看到设计界面时经常会提出自己想要实现的需求并非如此。

即，由于B端产品的专业性特殊性，用户在未看到设计界面之前并不清楚自己的需求是否得到满足。

因此，利用自动化设计可以迅速将需求转化为设计界面以进行用户测试，快速试错以明确用户的需求是否真正得到满足。

封面作者：Paul Olek

原文地址：网易UEDC（公众号）

作者：仉长娟

转载请注明：学UI网》用户体验设计的自动化正在靠近

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

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

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

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

1. 确定核心用户体验

每个产品都有核心的用户体验，这基本上是它存在的原因。它解决了人们所面临的问题，而且为他们提供有意义的价值。关键内容和功能的组合代表了核心的用户体验。要查找你的产品核心用户体验，就要问自己一个问题：“客户需要完成哪些最常见和最重要的任务？”在你用于产品的每个渠道上支持这些核心任务的本质至关重要。例如，Uber的核心用户体验是任何时间随叫随到。无论屏幕尺寸如何，此功能都能在每个设备上正常工作实现这一目的。

                             预约出租车是Uber用户最重要的任务。用户可以使用Apple Watch完成此任务。图片来源： Techcrunch

2. 定义产品的设备组

尽管存在大量不同屏幕尺寸的设备，但绝对不能定位各个设备，可以根据用户可能关注的任务定义产品的设备组。最常见的设备组是：

移动手机

平板电脑

台式电脑

智能电视

智能手表

不同的设备组在不同的上下文中提供不同的服务：用户根据他们正在查看的屏幕的类型参与不同的交互模式。例如，手机主要用于微任务，并且具有较短的用户会话。平板电脑主要用于内容消费，目前不被视为大多数人的工作工具。在了解各种设备类型的基本上下文的假设对于构建一个好的用户体验是至关重要。

3. 适应每个上下文使用的体验

确定产品的核心用户体验后，选择一组你希望支持的设备组，你需要调整每个组的体验（对于每个上下文的使用）。上下文的设计在不同设备组设计时尤为重要。

第一，并非所有功能都在所有设备上都有意义。你需要确定你的产品在多个设备组中使用的不同场景，并设计适合每个场景的体验。例如，通常移动用户比电脑用户想要的不同于产品。以 Evernote为例，可以在多台设备上使用流行的笔记本产品。其电脑版本针对内容消费进行了优化：

                           用于电脑版本的Evernote应用程序被优化用于阅读文本和查看媒体。

而移动版本是针对拍摄笔记、照片和捕获音频进行了优化的：

Evernote了解移动环境：它利用设备功能，并提供快速保存想法的方式（添加文本笔记，捕获照片或设置提醒）。

第二，不同的屏幕允许不同的输入法。以触摸输入为例。在设计具有触摸输入（移动手机和智能手机）的设备时，设计师会犯的几个常见错误包括：

小的点击目标。点击目标（如CTA按钮）必须具有足够大的尺寸。通常至少7毫米是足够的，但最好使用10mm触摸目标尺寸。

                                      图片来源：UXMag

将项目过于紧密地放在一起。你应该考虑点击目标的大小以及它们之间的间距，因为间距有助于分离控件，并给你的用户界面提供呼吸的空间。建议的间距至少为23pt以防止输入错误。

                                                                                      按钮之间的间距

使用悬停状态。但在触摸屏上，没有“悬停”。

4. 最小屏幕设计

历史上，设计师一直从事大屏幕到小屏幕的设计工作，这意味着第一个也是主要设计是为了完整的电脑桌面视图（它具有最多的功能）。只有电脑桌面设计完成后才移植到移动设备和其他设备组。但当设计电脑桌面时，我们通常面临“厨房水槽”问题：许多功能被添加到产品中，特别是当涉及多个利益相关者时。这并不奇怪，，当你有很多不动产时，添加功能是比较容易。实践经验清楚地表明，最好使用移动方法进行设计，并通过与用户相关的最小屏幕创建应用程序。

当你首先设计相关屏幕的最小尺寸时，它会强制你决定最重要的。一段时间后，你将采用同样的方法仔细选择产品的其他版本，无论是电脑桌面设备，平板电脑还是电视。

在大多数情况下，手机将是相关屏幕的最小尺寸。如果可穿戴设备对你很重要，那么你将需要考虑具有更小分辨率的微型屏幕。

5. 不要忘记大屏幕

想想大屏幕以及小屏幕，给大屏幕和小屏幕提供同样的注意力：

不只是缩小设计，使其适合那些大屏幕。充分利用你可以使用的额外空间。

                                                                                           图片来源：Wikipedia

确保图像不会因为屏幕尺寸的放大而失去质量。

                                                左：低质量图像。右：正确的分辨率。

考虑大屏幕细节。每个设备组都有自己的不同。例如，电视屏幕的设计被称为“设计10英尺体验”，因为从沙发的距离来看，与电脑桌面屏幕相比，屏幕上元素的明显尺寸明显更小。

                                                                 电视的用户界面元素应大于电脑桌面。图片来源：Samsung

6. 提供一致的体验

一致的体验意味着应用程序及其在所有屏幕尺寸上的体验都是相似的。无论设备如何，一致的用户体验是成功的全通道用户体验的关键组成部分之一：

对未来与产品的交互设定期望，并建立用户信心。

一致的体验使得你的产品在其他设备上与用户的交互更容易。

你可以将它们视为相同体验的方面，而不是将设计定制到越来越多的屏幕和设备中。例如，Google搜索应用在所有设备上提供相同的搜索体验。

                                                 当设计和功能一致时，用户可以在他们选择的设备上更快更有效地完成任务。

7. 创造无缝体验

跨不同设备组创建无缝体验对你的用户非常重要。人们可以自由地在设备之间来回移动，完成任务，或当他们从设备转移到另一设备时，他们期望他们的产品和服务与他们一起转移。这意味着用户不必考虑他们正在使用的设备，环境的变化或上下文的变化，并且可以依赖于设备良好的功能性和独立于设备的易用性。

                  大多数人如何走过他们的一天，他们访问的主要屏幕。图片来源：Intercom

根据使用情况，你可能希望确保每个设备上的内容消耗量同步。以Apple Music为例：你可以在Mac上设置播放列表，并在iPhone上即时播放，也可以开始听iPhone上的歌曲，当你转到电脑桌面时，你将被拍摄回到你在iPhone上。

                                                                  Apple Music可以很好地处理多个设备的同步。

8. 测试你的设计

在测试环境中有效的并不总是在现实世界中。在实际设备上为实际用户运行可用性测试，你可以在发布之前发现用户体验的问题并解决它。

结论

在设计多个屏幕和设备时，最好的策略是保持最终的用户体验。作为用户体验设计师，你必须评估产品的使用时间，位置和方式，以评估用户的最佳体验。无论你的内容是什么尺寸的屏幕，用户都希望在各种设备之间获得流畅的体验。

转载请注明：学UI网》在不同屏幕和设备上创建用户体验设计的8个步骤

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

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

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

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