如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

这种现象被称作为梵雷斯托夫效应（相对于普通事件或物体，要记得独特、有特色的事件或物体可能性会大增）。梵雷斯托夫效应有两个触发条件：背景不同以及经验不同。背景不同是指一个刺激物与周围的刺激物不同，比如在一串字母中突然出现了一个数字，那个数字就会让人印象深刻；

经验不同则是指一个刺激物与记忆中的经验不同，比如一些经常被我们误读的成语，因为与平时的经验相悖，所以看到正确解释的时候印象特别深刻。

我们在了解了这两个触发条件之后，就可以利用它们来触发梵雷斯托夫效应，从而帮助我们做出令用户印象深刻的设计。下面就结合实际案例来看看如何利用它们。

前面说过，背景不同是指一个刺激物与周围的刺激物不同。具体到界面中，我们可以理解为在一堆相同类型的元素/模块中，对其中需要突出的做特殊化处理。

案例1 功能入口

京东金融底部导航中的“信用”以及保险页面中金刚区的“1元购”，都采用了与同类型元素不同的视觉样式。前者采用了色块+动效，后者采用了3D视角，分别让它们在底部导航和金刚区中“脱颖而出”，引起用户的关注。

案例2 列表内元素

爱奇艺的首页推荐中，其中一个视频内容的封面是采用动图的形式，在其他静态封面的衬托下，就显得格外醒目。飞猪的首页推荐中，则是把专题栏目的信息部分（彩色底白字）设计得与其他商品（白底黑字）差异较大，来吸引用户关注点击。

案例3 模块之间

美团外卖的个人中心将一些常用功能至于一个单独的模块中，并且将其中的图标设计成与其他模块内的图标所不同的样式（黄色填充），如此即突出了常用功能模块。另一边爱奇艺的个人中心，“会员服务”与“我的泡泡”则是直接从下面的宫格式布局中脱离出来，并且将各自的一些功能外置，布局交互完全不同于下面的其他模块，以达到突出这两个模块的目的。

以上三个就是典型的“背景不同”触发梵雷斯托夫效应，从而让用户印象深刻的案例。不难发现，对于“背景不同”，已经应用的比较广泛，并且大家也较为熟知了，接下来看看“经验不同”。

经验不同需要颠覆过去的认知，我们可以理解为在一些已经被大家所熟知的视觉/交互中，对其进行“改革创新”。

案例1 虎扑评论点赞

虎扑中的评论点赞不同于我们看到的其他产品，它采用的是一个灯泡ICON来表达该评论“亮了”，更贴合用户对有趣评论赞赏认同的真实场景。与众不同的方式也加强了用户的印象，提升了用户的黏度。

案例2 哔哩哔哩打赏

哔哩哔哩中的打赏采用了“马里奥踩蘑菇”游戏的形式，不同的砖块代表不同的打赏数额，选择完数额，滑动马里奥顶一下砖块就完成了打赏的整个过程。相比于普通的宫格式菜单选择，是不是有意思多了呢？

案例3 微信读书推荐

微信读书的书城中有一个“摇一摇”的功能，摇动一下手机或者点击一下“摇一摇”ICON，就会随机推荐一本书给你。每一次摇动背后的不确定性就像抢红包一样，满足了用户的猎奇心理，提升了体验的趣味性。相比于普通的推荐版块，不仅能让用户印象深刻，更会让他们对此爱不释手。

其实这些“经验不同”的案例也不完完全全是创新，比如摇一摇之前就是微信中的一个社交功能。大家可以将平时看到的有意思的设计记录下来，并思考一下可以复用在哪些地方，说不定下次功能更新就能用上了哦～

在利用“背景不同”时，需要注意避免出现处处都强调的情况。每个元素/模块都突出了，也就失去了重点，如下图。

而“经验不同”需要注意的是，避免为了创新而创新，让“惊喜”变成“惊吓”。如下图，

“清音”作为一个标签指示，显然与我们平时所看到的那些标签样式大不相同，足以让我们印象深刻。但是，在知道它是一个标签之前，我曾误以为它是一个按钮。在触击无反馈并且右滑屏幕发现后面还有“浊音”之后，我才知道原来这是一个标签……这样的“经验不同”只会造成“负面”的印象深刻。

相对于普通的事物，特殊化的事物更容易让人印象深刻，我们称这为梵雷斯托夫效应。触发梵雷斯托夫效应有两个条件：背景不同和经验不同，我们可以利用这两个条件来做出令用户印象深刻的设计。

“背景不同”：对需要突出的元素/模块做特殊化处理，在同类型元素/模块中脱颖而出。需要注意的是，避免到处都强调，从而失去强调的意义。

“经验不同”：对过去所熟悉的视觉/交互进行“创新”，从其他不同类型的产品中复用、移植过来。需要注意的是，避免让“惊喜”变成“惊吓”。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

微云在不断完善基础功能的同时，还基于用户行为，增加了许多情感化的体验，比如往年今日、人脸相册等。在情感化运营上，微云在2018年开始了较为完整的节日闪屏设计，希望向用户传达节日的祝福，拉近产品与用户的距离。

什么是节日闪屏？

节日闪屏是指在特定的节日进行情感化设计，传递品牌关怀的闪屏。优秀的节日闪屏，在内容上不仅能够触达用户的记忆点，也能够与品牌相融合，这样既拉近了用户与产品的距离，也强化了品牌的认知和记忆。

确定设计目标

在开始设计之前，我们期望节日闪屏能够达到以下两个目标：

• 传达节日祝福唤起用户回忆
• 体现微云品牌调性

不同的节日有不同的文化背景和风俗习惯，节日祝福可以结合最典型的特征，这样更有利于唤起用户回忆，后文会结合案例进行分析。然而，品牌调性是贯穿所有节日的，在设计之初，我们明确微云的品牌调性，这样更有利于品牌的传达。

1. 品牌调性研究

Alan Cooper在《About face 4》中提到，在传达品牌调性时，可以用一组形容词来描述产品及体验，这些词可以组成词云，用来指导视觉设计。如何创建这组词云呢？Allan Cooper 提供了四个方法：从品牌大纲提炼关键词、分析现有产品的界面和服务、分析竞品的界面和服务、收集用户反馈。

结合微云的特征，我们从现有产品的界面和用户反馈两个角度进行分析，提炼符合微云调性的词云。

2. 分析现有产品界面

微云的平台较多，包括WEB端、PC端、移动端、小程序等，其中WEB端和移动端的用户最多，就从这两个端入手，分析产品界面的品牌特征。从结构布局和色彩比例上，可以归纳两端的共同点：结构清晰、留白较多、简约干净。

3. 分析用户反馈

微云用户在职业分布上，白领用户占最大。结合使用场景分析，用户反馈最多的词是：轻量、方便、下载快速。

4. 提炼微云品牌词云

结合产品界面「结构清晰、留白较多、简约干净」的特征和「轻量、方便、下载快速」的用户反馈，我们提炼出适合描述微云品牌的词云：简约、干净、留白。

如何做一个节日闪屏？

接下来就以劳动节闪屏为例，从节日特征和品牌调性两个维度来阐述节日闪屏的设计过程。

1. 节日特征

利用穷举法，筛选最典型的节日特征。

微云是一个工具化的产品，旅行/度假更适合旅行类产品，劳动/休息与微云更契合。结合产品功能，定了两个方向，第一个是「五一不劳你动，微云帮你整理」，与备份照片功能结合；第二个是「劳动光荣」，凸显节日气氛。以下是一些草图方案：

2. 品牌调性

前面三个方案重点在于功能的表达，把用户目光吸引到场景上，内容丰富，但可能造成用户在3秒内无法明白画面主题。方案四重点在于气氛的表达，关注人物故事，角色正在辛勤的劳动，直接点题，场景只起烘托作用。结合「简约、干净、留白」的品牌调性和「唤起美好回忆」的品牌期望，我们选择了氛围方向进行深入设计。

主题确定之后，就开始进行优化设计了。围绕着关键词，采用扁平化的设计手法，在色彩搭配上，由于劳动节没有明显的色彩倾向，故以品牌蓝为主色调，橙色来源于产品的图标，作为辅助色提亮整体画面；在页面排版上，保持大面积的留白，简约清爽。

3. 小结

劳动节闪屏上线后，我们进行了复盘，我们希望微云的节日闪屏给用户传达的是「你的珍贵回忆微云帮你记录」这样的小心思，而不是「我们有xx功能」之类的广告，所以在以后的节日闪屏中，我们会更加倾向节日故事性的表达。视觉风格则采用简约、干净、留白的方式，重点突出人物故事，不在场景上过多渲染。

4. 其他的节日闪屏设计

按照上面的思路，我们完善了其他的节日闪屏设计。

母亲节闪屏

母亲节是一个西方的节日，在这一天，孩子给母亲送康乃馨，来表达自己的爱意。在节日故事上选择了最具代表性的孩子给母亲送花的场景。

端午节闪屏

一提到端午节，就会想起粽子的「甜咸之战」，可见粽子在端午节的重要地位，所以端午节的节日故事就围绕粽子开展，三个好友齐心协力包粽子。

七夕闪屏

牛郎织女，鹊桥相会，是七夕节的美丽传说，这一天情侣相聚，相互表达爱意。七夕故事定格在情侣相会的瞬间，女生飞奔向男生，在银河上翩翩起舞，表达久别重逢的喜悦。

中秋闪屏&圣诞节闪屏

中秋节故事主题是合家团圆、赏月吃饼。圣诞节故事则以父女二人齐心协力装饰圣诞树为主题。

△ 备注：圣诞节最终效果图由另一同事绘制

所有节日闪屏合集

输出节日闪屏规范

节日闪屏除了故事性的表达之外，在设计上我们也输出了一部分规范，用来把控风格的统一。

1. 配色规范

色彩作为用户最容易感知的部分，使用时与品牌相呼应，主色与辅助色均来源于产品图标。有明显色彩属性的节日，以节日固有色为主，比如春节红色，中秋黄色等等。无明显色彩属性的节日，可以以品牌蓝为主，强化品牌印记。

2. 角色规范

我们希望重点展示的是人物的珍贵回忆，基于此，我们设计了一批角色，讲述角色的故事，让用户产生代入感。为了保证统一性，我们制定了人物的细节规范，包括角色头身比=1 : 9、服装款式以休闲为主、服饰颜色与品牌色呼应等。

在设定好人物细节规范之后，我们也完善了角色资源库，方便后期在其他场景的应用。

3. 场景规范

在场景设计上，我们以简洁，明确为主，场景主要起烘托人物故事的作用，而不进行过多的渲染。

拓展场景的使用

做了一系列闪屏之后，这些插图和角色并没有闲置，我们在线下挖掘了一些新的使用场景。这些素材被重新利用起来，变身为办公室的装饰挂画，营造出一个充满品牌气氛的办公环境。

总结

2018年微云希望通过节日闪屏的情感化运营，给用户传达节日关怀的同时也强化微云的品牌认知。在后续的规划中，我们希望节日闪屏不仅仅是单方面的给用户传递关怀，还能够和用户互动，实现更深层次的情感交流，比如点击节日闪屏，跳转到往年今日，帮助用户回忆起以往的美好回忆，增加用户粘性。2019年微云会继续给大家传递节日的祝福，也会不断探索新的闪屏设计风格，敬请大家期待。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

模型交互的设计分析及体验建议模型交互的作用范围及交互特点

当用户在真实环境的场景中稳定放下物体模型后，会有与模型进行进一步互动的需求。这类模型交互，通常会改变模型本身的物理属性。例如：

• 移动：改变物体在环境中的位置。
• 缩放：改变物体的大小。
• 旋转：旋转物体便于用户不改变自身位置观察物体。
• 删除/重置：让模型在环境中消失或出现。

基于目前的 AR技术和手机设备限制，目前的模型交互主要是通过屏幕利用二维交互驱动 AR 三维场景中的模型，从而与模型进行互动。屏幕二维交互设计，主要是利用二维手势和界面控件去达到交互的目的。例如：

• 按钮/摇杆：在手机界面中设计按钮、摇杆。
• 手势：目前技术支持的瞬间的手势操作、连续的手势操作。比如单指点击、单指长按、双指缩放、双指旋转等等，我们在日常使用APP常用的手势操作。

通过进行合理的分析设计，赋予这些手势和界面控件具体的功能，去控制三维场景中模型的移动、旋转、缩放。

模型移动的交互定义及设计形式

用户会与模型进行互动，移动是最为常见的一种操作行为。通过在手机屏幕的手势操作或按钮操作，控制模型在现实场景中的位移。

我们需要通过设计用户使用常用并熟知的手势与模型进行交互，利用二维手势驱动三维空间中的模型在X轴、Y轴、Z轴的位移。

放置模型后根据移动范围X轴、Y轴、Z轴，与在现实环境的虚拟模型进行移动互动操作，设计手段包括手势、摇杆的方式。可以参考以下五种设计内容：

• 单指按住左右移动：模型移动以屏幕有效的外侧边沿为限。
• 单指按住前后移动：纵深移动遵循近大远小的透视效果。
• 单指按住上下移动：模型以中轴线上下移动，实际为改变模型所在平面位置，投影以暗示高度。（需注意，单指按住前后和上下移动不会同时出现。）
• 点哪去哪：模型从原位置向目标位置移动。
• 界面摇杆：若屏幕手势交互有可能对控制对象造成持续遮挡，或者无法很好的完成复杂操作要求，可以通过屏幕控件满足需求。

模型移动并非需要X、Y、Z三个轴均开放，实际是根据模型位移交互的具体需求去选择开放维度，并设计合理的交互方式去响应模型的移动。可参考以下案例：

模型旋转的交互定义及设计形式

在现实场景中除了移动模型的位置，还可以通过旋转360°来观察模型细节，不仅控制模型还能把玩模型，赋予模型生命感，让用户更好地与模型进行互动。设计手段主要是针对手势的设计。可以参考以下三种设计内容：

• 双指顺/逆时拧：一只手双指顺时/逆时拧旋转模型。
• 双指向左/向右滑动：一只手双指左右滑动。
• 单指向左/向右滑动：一只手单指左右滑动。

旋转模型是为了全方位观察模型，让用户更好地把玩模型。通过以下案例来进行说明：

模型缩放的交互定义及设计形式

移动模型、旋转模型都是与模型互动，如果想深入了解模型则需要对模型进行缩放操作。设计手段包括手势、滑动条、缩放倍数的按钮。可以参考以下三种设计内容：

• 双指扩展/捏合缩放：以模型的中心点等比缩放。
• 拖动滑动条缩放：拖动滑动条在0-100%的范围内进行缩放，当标尺拖动到极限时，则模型不再响应缩放。
• 固定缩放倍数按钮：倍数已经固定，限定缩放的大小。

双指扩展/捏合缩放是在二维手机界面被大家熟知的手势操作，而滑动条、固定缩放倍数按钮的缩放形式，在AR场景多用于游戏类产品，一般在模型放置时固定模型大小，进入游戏后不支持手持操作。可以参考以下案例：

有一种特殊的情况，当支持放置多个模型时，如何设计呢？此时，需要通过点击选中模型，模型进入选中态，与其他模型区分开，选中后进行的操作只作用于该模型，并支持删除模型的功能。

为了增加模型交互时体验的丰富和细腻程度，模型交互（过程中、成功后）会有相应的反馈设计。包括：模型自身的动效、符合真实世界的视觉表现、音效、震动、语音反馈等。

模型交互的设计原则和建议

1. 根据模型需要定义交互自由度

模型的交互程度，需根据特定模型的自身属性/产品的类型去定义，并非所有可交互类型都需要涉及。跟核心模型体验无关的交互可禁止或增加操作难度。例如科普类模型固定放置在平面后，需要便捷地旋转以查看模型细节，但Y轴移动查看的需求不大，部分场景可考虑禁止Y轴操作。又例如游戏类 AR 模型位置相对固定，更多的体验在于与固定模型进行的细部交互。

2. 手势设计简单且符合直觉

手势设计优先使用通用的方式，若没有通用的方式，则尽可能使用简单和符合用户直觉的方式进行设计。若违反该原则可能造成用户的理解和记忆障碍，需要加重用户引导，避免给用户造成操作困难。

3. 手势设计按需搭配且不可冲突

在设定模型的交互自由度后，可选择合适的手势进行搭配使用。但一种操作方式只可匹配一个交互结果，不可出现手势冲突。手势的搭配需要成套考虑。例如以下搭配：

异常处理的设计分析及体验建议

1. AR中异常情况的定义及设计内容

传统APP设计存在异常情况，比如无网络加载失败，登录发生错误等情况，那在放置类AR 中是否存在异常情况呢？

在放置类AR 场景中体验时，由于使用者操作不当，导致模型出屏或模型丢失，无法与其再进行交互，我们统称为异常情况。还有一种情况比较特殊，当正在体验放置类AR时，其它应用突然被唤起，再重新返回放置类AR 场景的处理。所以我们从交互设计层面需要对异常情况进行及时处理，正确引导用户解决困惑，给使用者一个良好的 AR 体验。

在与模型互动过程中，会出现异常情况，需要通过一些设计形式可以及时地帮助使用者解决异常问题，设计手段包括：文字、动图、语音、辅助图形、重置、复位，具体运用根据实际设计需求而定。可以参考以下设计内容：

• 模型出屏：模型出屏后视觉线索引导用户找到模型，可以搭配文字、动图、语音等形式，按照设计场景来自由组合。
• 模型丢失：当视觉线索引导未找到模型时，通过点击按钮将模型复位。按钮可以常驻或非常驻。

当发生模型出屏、模型丢弃复位的异常情况，根据产品类型和场景选择合适的设计手段，解决用户的困惑。结合具体案例以说明：

在异常情况中有一些相对特殊的情况，第一种情况：体验放置类AR时，手机来电后不得不离开，当再次返回时，根据技术能力来进行交互设计引导，保留场景及模型或引导用户重新获取平面建立AR场景。第二种情况：当进入AR场景后，模型是固定大小尺寸，在设计时，需要考虑让用户可以重新放置模型在新的位置，提供重置按钮。

游戏类、科普类设计时需要保留之前AR场景，有延续性的体验，技术做不到保留，则需要重新识别平面再次建立AR场景进行体验，如果支持放置多个模型的场景，建议不保留。当进入AR场景后，模型是固定大小尺寸，在设计时，要考虑界面上需要重置按钮，让用户可以重新放置模型在新的位置。下面结合案例具体说明：

此外，在AR内容体验中也会发生丢失平面的异常情况。这里的异常处理可以使用话术准确告知用户原因，还可以配以图片、动图、语音，更具象更清晰引导用户解决问题。需注意与平面识别引导的设计形式保持一致性，若平面识别未使用语音，则识别失败提示也不能使用语音，避免突兀感。可以参考以下设计内容：

• 纯文字话术：通过简单明了的文字正确引导用户操作。
• 图片/动图+文字话术：图片/动图诠释文字的含义，帮助用户理解如何操作。
• 语音+文字话术：语音辅助文字，使信息更有效传达，从而引导用户操作。

2. 异常情况的设计原则和建议

模型出屏后需要及时引导用户找到模型，避免焦虑感。

模型丢失后需要通过设计形式的组合搭配，以操作便捷的交互引导用户。

建议在设计游戏类、科普类AR产品时，再次返回APP 需要保留之前的AR场景，保留延续性。

注意如果进入AR场景时无音效和语音，则异常情况引导不能出现音效和语音，避免突兀感。

平面识别失败后需要及时反馈用户如何操作，需注意设计形式保持前后一致。

放置类AR的设计核心原则

以上就是AR放置类交互节点的分析和设计建议的详细内容。我们希望设计师能围绕AR应用的真实场景，考虑到每个体验节点的细节，结合上文提到设计建议，在设计过程中关注以下关键目标，为用户创造更加友好和细腻的交互流程和体验过程。

• 清晰：传达的内容清晰明了，不会产生疑惑或歧义。
• 有效：能帮助用户成功达到交互目标。
• 流畅：无停顿感，过程一气呵成。
• 愉悦：用户感觉愉快、无压力。
• 可控：可自主交互，过程反馈清晰，给用户尽在掌握中的感受。

希望通过我们提出的设计内容、设计原则建议能帮助到作为阅读的设计师、开发者们，在日后的产品设计、交互设计中能让用户在放置类AR场景有更好的体验，这也是我们编写的目的所在，为AI科技尽绵薄之力。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

这太棒了。

我也反复听过不少错误和模棱两可的说法被反复提起。因此，为了帮助大家——因为我确实喜欢帮助人——我在这里介绍一份简单易学的纠正理解偏差的小清单，希望能够广泛传播（我很有信心，因为研究表明，读者喜欢简单易学的清单）。

UXRen

1、适应不舒适的感觉

“我只知道一件事，就是我一无所知。”—苏格拉底（Socrates）

我们在重视回答和害怕提问的环境中长大。在学校里，我们因为回答正确而得到奖励；在工作中，我们因为提出好的点子而得到奖励。难怪很多人会找理由避免做研究，特别是定性研究。显得无知所产生的焦虑在心中滋长。定量的东西至少有标准化测试所带来的熟悉感，令人舒适。保持研究型思维模式意味着要认识到偏差无处不在，确定性只是一种错觉，任何答案的有效期都是短暂的。因此从长远来看，好的问题更有价值得多。只有你承认自己没有答案，才能问出好问题—也才会了解更多。

UXRen

2、先提问，再做原型

“如果我们只测试开瓶器，可能永远不会意识到客户更喜欢螺旋盖的瓶子。”
—维克多·隆巴迪（Victor Lombardi），《设计败道：来自著名用户体验案例的教训》（Why We Fail）

我们理所当然会急于制作原型，测试原型。原型就是答案，可触可摸，即使只是纸上的草图。这样做很舒服，比只是问问题舒服多了，即便这无异于烧钱。对于任何想要立竿见影地证明自己价值的人来说，只问问题，就像那只洗棉花糖的浣熊一样，事与愿违。

太早制作原型的风险在于，这会把资源投入去回答一个无人问及的问题，同时还忽略了机会成本。测试原型可以帮助你优化好点子，但不会告诉你是否在解决恰当的问题，并且，也很容易将原型的亮点误以为是点子的质量。不论如何，研究报告中的亮点也容易被误认为是具有价值的洞察。

提出恰当的问题，不会让不好的点子得到保留和维护，反而会帮助你更快地将它们识别和清除。你只需要有足够强大的内心去拥抱错误。

（如果你正在想“嘿！这对我的团队会有帮助”，我们会非常乐意去你的办公室呆一天，确定你是否准备和Mule Design Studio合作。）

 UXRen

3、了解目标

除非你事先知道做某项研究的动机，否则提问就是浪费时间。你必须公开发誓：你的动机不是“为了证明自己是正确的”。这是每个人内心隐藏的目标。参看第一点。

通常，出于对研究的一腔热情，团队往往会在目标不明确、不一致时就开始跟客户对话。然后，他们会感觉花了宝贵的时间，但却不知道怎么去应用自己了解到的东西来提供解决方案，因而没有什么可供展示的。于是就有了这样的说法：“我们去年做了研究，但却是浪费时间。”于是，又回到了建立原型和测试原型的舒适圈。又或者，他们对听到的内容有不同的理解，结果又因谁对谁错更加争论不休。

在大公司、大机构中，有时大家都有心照不宣的目标：“表现出我们在尽力做研究，不过还是让产品负责人做他想做的事吧。”这听起来可能有点嘲讽意味，但通过跟许多在资金充足的研究部门的资深研究者交谈，我了解到，尽管他们撰写的报告相当精彩，但对决策的影响却为零。承认这个事实，是阻止它发生的第一步。

完美绝佳的起点，是把你的目标设置成：“我们需要确定水准，快速理解他人的观点。”不要在事后任意添加其他目标。

只有当你确定了目标，才知道自己需要了解什么。而在你选择怎么回答之前，你必须知道自己的问题是什么。

UXRen

4、在重大问题上达成一致

“从本质上讲，所有商业活动都是在人的行为上下赌注。”
——《“厚”数据的力量》（The Power of ‘Thick’ Data）,《华尔街日报》

问题的质量决定了结果的用处。提出错误的问题跟用原型解决错误的问题如出一辙，它们都会给你一些你不想要的东西。从优先级最高的问题开始。确定这类问题的办法是：如果你在这些问题上的假设搞错了或忽略了，风险会最大。

最重要的研究问题是你想要知道什么，而不是你在访谈中要问什么。事实上，直接抛出你的研究问题往往是最糟糕的方式。人们往往不知道或者不愿承认他们真实的行为，但人人都很擅长编造答案。

设计研究总是和用户研究混淆。回答高优先级研究问题的方式多种多样，跟有代表性的用户对话只是其中一种。你所需要知道的，并非都是与用户相关。

通常，最关键的问题是：“基于证据，我们对客户、竞争、内部能力真正了解些什么？”问法各有不同。这可能是一个非常难以完全诚实作答的问题，但又得在短时间内回答。

UXRen

5、时间和金钱永远是够用的

当研究被定义为设计之外的一种工作，人们就很容易把收集证据当作额外负担，找理由不做。

通常，团队必须获得权威人士的许可，才能进行研究工作。提问本质上是对权威的挑战。如果你曾经和一位不同意为百万美元项目开展定性研究的领导合作，那么问问自己，这位领导购买一辆价值5万美元的汽车前会不会自己做做研究？口头上提出反对意见，心里面往往是害怕自己的主意被破坏，被证明错误，或者不那么行之有效。

如果你的目标和高优先级问题明确直白，不管时间和预算如何，你都可以了解到一些有用的信息。比如在线研究，午餐时间外出观察，测试其他产品的可用性，发挥创意。

只要不是做调查就行。

UXRen

6、不要指望数据能改变想法

“当一个人要靠着对某件事的不理解来拿薪水时，要让他理解这件事是很困难的。”—厄普顿·辛克莱（Upton Sinclair）

即使研究已经证明了这一点，但训练有素的专业研究者还是往往很难接受。如果你习惯和重视某种特定数据类型的同事一起工作，那你可能很难去说服那些不假思索就否定这种观点的人。而且，可能会因为数据不足而让某人觉得自己的专业能力受到了侮辱。

收集证据的全部意义在于基于证据做出决定。如果这些证据破坏或者反驳了决策者所信奉的想法，他们就会找理由去否定或忽视这些证据。这也是定性研究者在一些工程师驱动的组织中处境艰难的核心原因。即使问题需要的是更具描述性的答案，熟悉且擅长数字的人却想要用数字表达的答案。

因此，在尝试用数据去影响决策之前，你必须了解你的同事和领导的个人特点和他们所处的环境，了解他们是怎么做决定的。

UXRen

7、接受混乱带来的不完美

“我们善变，愚蠢，记忆力差，且有自我毁灭的天赋。”
——苏珊·柯林斯（Suzanne Collins）,《饥饿游戏：嘲笑鸟》（ Mockingjay）

人类的生活是混乱的。人类如果没有遇到问题，就不需要产品和服务，我们也就不会有工作。在真实、混乱的世界中为人们找出解决问题的最佳途径需要一些时间，并在一定程度上放开控制。虽然有必要采取一种合乎道德的、足够严格的方法，但并不存在绝对纯净的定性环境。明确的目标和好的问题可以承受各种不可预知的情况的考验。

人们希望开展舒适有序、显得专业的活动，这导致他们不恰当地使用焦点小组、可用性实验室、眼球追踪、调查和光鲜的报告等方式，但其实，不那么正式的研究可能会更加有效。

将证据纳入设计决策，本身就是一个增强了解的过程。你永远不会找到正确的答案并解决问题。如果过程行之有效，你就会在做决策时信心备增。

UXRen

8、致力于合作

每个从事相同工作的人面对的都是相同的现实。做出产品决策的人需要对信息完全知情。如果知识只存在于一个人的头脑中（除非你在伦敦，而那个人是你的出租车司机），那么知识本身有多好并不重要。

一组人制作报告，而另一组人收到报告后置若罔闻，便是没有合作的研究。如果这样工作，即使是最用心的团队也会让知识溜走。而如果合作中缺乏证据，则意味着每个人都心照不宣地默认：胜出的是个人偏好。这两种方法都不是最有效的。

最有效的方法，是让产品开发人员直接参与提问和回答。这样做也很有趣。实现这一点的方法有多种，依具体公司或机构而定。

提问关键在于建立一个共享的决策框架，以便做出更快更好的决策。我曾经就此召开了一场研讨会，它带来了改变。

UXRen

9、找到纠正你的偏差的伙伴

“我们可能对显而易见的事情视而不见，也可能对自己的盲目视而不见。”
——丹尼尔·卡尼曼（Daniel Kahneman), 《思考，快与慢》（Thinking Fast and Slow）

你做了一些工作，找到了一些答案。现在你需要确定它们的意义。在解释研究结果时，合作变得尤为重要。每个人都被偏差所困扰，而且自己还无从察觉。我们所看到的是最符合我们现有信念的。因此，我们必须参考外部标准（包括预先设定的目标和问题），一起工作，互相检查。

这与你有多聪明或消息多灵通无关。一旦你接受了这一点，只要你在一个心理上有安全感和相互尊重的团队中工作，识别出偏差就会是一场有趣的游戏。

维基百科（https://en.wikipedia.org/wiki/List_of_cognitive_biases）提供了不错的认知偏差清单，可以和认知偏差图（ Cognitive Bias Codex  ）一起打印出来贴在墙上。

也许，这就叫正确的设计。

UXRen

总之，当我们在讨论设计研究时，实际上是在讨论基于证据的设计。创作、批评和探究都是设计过程中不可分割的一部分。将它们分裂开来，就会因无知、自负或恐惧而错上加错。

设计是一种价值的转换。在实现任何产出之前，你必须先问问人们真正需要什么、看重什么，问问你希望从中得到什么样的商业价值回报。

只要你采取道德的方法，诚实对待你的所见所闻，朝着富有价值的目标前进，那么，你所提出的问题和你找到答案的方式都无关紧要。正确的方法并非只有一种，正确的答案也并非只有一个。享受不确定性吧！它永无止境。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

云雷纹

祥云纹

八宝纹

云头纹

寿字纹

万字纹

唐草纹

环带纹

缠枝纹

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

你可能已经注意到，在17、18年的时候，渐变在印刷和web设计中的使用的越来越多了。看起来设计行业已经接受了这种趋势，这种渐变过渡在形状和颜色上只会越来越动态。如果你不知道如何将彩色的形状和背景应用到你想要通过设计传达的信息中去，那么使用彩色的形状和背景是一件棘手的事情。

5大渐变趋势是什么，如何在你的工作中有效地使用渐变呢?

1、 双色版的渐变

双色调渐变是两种颜色，它们之间有平滑过渡。没有更多，没有更少。使用Illustrator中的渐变工具创建这些类型的颜色过渡非常简单。当为Duotone渐变组合颜色时，没有规则。当你混合3种颜色或更多颜色时，规则就会出现.但是两个，你可以做任何你想做的事情。这一切都取决于你对设计本身的意图。如果你需要强大而大胆的信息，那么你可能需要考虑使用更鲜明，更高对比度的颜色组合。另一方面，如果你希望采用柔和，更安静的方法，则使用较少饱和的颜色就好了。看你怎么用了

如何使用双色版的渐变？

你可以像Duotone Gradients一样有创意。这种类型的渐变最广泛使用是照片叠加。渐变主要用作内容的简单背景。以下示例是由JessicaHägg和Stink Studios为Spotify创建的此类案例之一。

Duotone Gradient的另一个例子是由Barthelemy Chalvet为AgenceMe创建的家庭导航设计。在这里，我们再次将Duotone视为内容的背景。内容包括文本和插图。但是，图中使用的颜色非常谨慎。插图主要是浅色调，只是一些色彩鲜艳的细节，与背景双色调（温暖）相反（冷）。

总而言之，使用双色调渐变趋势的最安全方法是将渐变背景与黑白照片混合，或将它们作为照片叠加层应用。如果你将它们与其他颜色混合，请确保不要过分。多种颜色在设计中可能非常出色，但如果匹配不当，它们也会引入混乱和混乱。如有疑问，请使用较少的颜色。在大多数情况下，少即是多。

2、半透明渐变

前五大渐变趋势包括半透明渐变。这些类型的渐变在它们中具有褪色效果，它们在一端具有全色调，而在另一端具有0％颜色不透明度。

这些半透明渐变可以是双色调甚至是三色调渐变，但它们总是以透明度结束或开始。

如何使用半透明渐变？

使用半透明渐变的一种方法是将它们与其他渐变形状和背景重叠，或者作为照片上的叠加层。下面的示例显示了Studio-JQ制作的艺术作品

在这里，我们可以看到在三色渐变圆上使用一个半透明形状。微妙的半透明形状在渐变圆形前形成雾气氛，就像褪色的月亮，简单而有效地使用透明效果。

在Magdiel Lopez制作的海报艺术品中可以看到混合了摄影和纹理的半透明渐变的另一种奇妙用法。

三、网格渐变

网格渐变是在Illustrator中使用网格工具制作的渐变，因此是标题。这种类型的渐变需要更多的技巧来制作。通常它们将多种颜色混合在一起，这应该小心生产，因为某些颜色不能很好地匹配。除了将多种颜色混合在一起外，它们还形成一种类似于液体的纹理图案，使其具有更加动感的外观。

到目前为止，您可能已经注意到所有渐变如何与黑白照片完美配合，为他们提供增强色彩强度所需的对比度。它还消除了设计中“过多”的混乱和感觉。

如何使用网格渐变？

网格渐变可以用作独立模式。由于它们通常具有动态外观，因此可以作为简约模式应用，并辅以创意印刷术。

使用网格渐变进行品牌推广也越来越受欢迎。这种类型的使用可以在下面由Focus Lab制作的简约品牌项目中看到。

4.渐变模糊

这是事情变得有趣的地方......。介绍渐变模糊！我相信你已经看到了这些有趣的外观，有一种强烈的“艺术”感觉。它们现在是Top 5 Gradient Trends的一部分。

如何使用渐变模糊？

它们似乎经常被用作海报设计的一部分。抽象的伟大之处在于它可以用来描述各种情感和抽象概念。它可以说明声音，光线，宇宙，幸福或悲伤。我们根本不知道如何描述这些单词中的许多单词，但精心挑选的模糊彩色形状可以帮助我们。

让我们看一些使用渐变模糊的示例：

5.渐变球体

最后的渐变趋势是渐变球体，具有强烈三维形状的网状圆圈，提醒我们在行星和气泡上。

如何使用渐变球体？

Gradient Spheres在应用程序和网页设计中占据了一席之地。由于它们与行星类似物体相似，因此它们通常用于技术未来类型的项目中。例如，Jiyoon Kim使用Gradient Spheres设计一个具有轻盈未来感的创意手表UI。

Mirtho Prepont为Asana制作的海报设计中使用的Gradient Sphere的另一个创意示例：

写在最后

如果你使用渐变的照片，第一步应该是选择正确的照片。最好的选择是具有清晰焦点的照片，如果可能的话，焦点周围没有其他任何东西。值得花时间的第二件事是照片的颜色。如果颜色与你的渐变无任何关系，最安全的做法是将照片切换为黑白模式。

但是，有时可以通过在Photoshop中使用“颜色饱和度”工具或“颜色平衡”来调整颜色。这正是我在这个例子中所做的。第三是选择渐变形状和背景。

选择正确的渐变对象时，请确保它们都具有相似的色调。在我的例子中，我使用蓝色/紫色物体与粉红色/黄色物体形成鲜明对比。这些都是我需要的颜色。任何更多的东西，组成会感到混乱。虽然很容易穿过线，所以如果你不确定，只需要减少颜色和减少形状。

如果你感觉某些东西仍然缺失，请添加中性几何形状，如果背景为浅色，则为白色;如果背景为暗，则为黑色。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

Cheatsheet总结了我的方法

我最近致力于为电子健康记录（EHR）产品定义间距系统，以改善产品页面的可读性和一致性。我提出了3个间距规则（3C规则）和以4为基准的间距网格，并且这些规则与新的印刷系统配合得非常好。

存在的问题

当定位垂直元素时，设计师不应做出随意或者任其自然的判断。通常设计师通过按住Shift和上下箭头键在Photoshop中实现垂直增量：“根据实际情况来决定使用5px或10px。”这种方法虽然是10的倍数并且可用，但是它不符合任何印刷要求的规范。

——Robert Bringhurst，著有《印刷风格元素》一书。

• 我们在EHR产品中使用了5px、10px、15px、20px的边距/填充，但是在何时何种情况下使用这些间距，我们并没有一个严格的规范。

• 边距/填充只是间距系统的一部分，字体行高也会增加额外的高度空间，但目前我们没有为现有（旧的）文字样式创建行高规范。

• 相似的组件和内容在产品中看起来不一致，这造成了EHR产品的整体样式不统一，并且因为数据疏密程度不同，造成了阅读体验的不流畅。

解决问题

步骤1：确定文本行高（确定基准网格）

首先我们假设使用非常流行的8点基准网格（即以8的倍数为一个间距规单位）会达到好的效果，因此在实验中，我把基准主体字体大小设置为13px，行高设置为8的倍数即16px或则24px然后看看这两个行高规则是否有用。如果没用，则意味着8点基准网格是不适用的。

然后我将基准字体大小设置为13px，并在16px和24px之间的偶数寻找行高值。开始我将它与18px（6的倍数）匹配，如果成功那就意味着我采用了6点基准网格，也就是6的倍数（间距会是3、6、12、18、24）。后来我尝试了20px的行高，使用起来效果很好，所以我采用了4点基准栅格（也就是间距为2、4、8、12、16、20等）。

步骤2：用希克定律和几何级数来确定间距值

“随着可选择数量的增加，做出决定的难度将会增加。”

——希克定律

我们要想出一个可感知的间距系统来简化设计决策，另外将所需值的数量保持在一个最小范围内。

• 间距值是基准网格的倍数数值（如步骤1中确定的4点基准网格），因此我的间距值为4点基网格（2、4、8、12、16、20、24、28…)

• 一般来说，4–-5个间距值已经为产品设计提供了足够的差异性，即使对于复杂的企业产品也足够了，但是在实际过程中可能需要灵活的在规范中增加间距值。

•    我决定使用4点基准网格，因为它提供了更好的视觉可感知区间，对于层次结构的展示来说非常好，因此间距值应该是(2、4、8、16)。

如何以可预见的方式应用这些间距值？3C法则来拯救你。

我深受Nathan Curtis上面文章中介绍的Insets，Stacks＆Inline等间距词汇的影响。我决定在其基础上构建一个额外的词汇组，以便我的团队更容易理解每个词汇的使用环境。我将所有的间距规则分解成3个C：容器、内容和组件。

· 容器规则使用了平方差的概念（使用16px）

· 内容规则使用了堆栈的概念（头部堆栈使用2px，叶节点堆栈使用0、4、8、16px具体取决于内容类型）

· 组件规则使用内联的概念（大多数情况下使用8px，4px表示关联关系）

第1C：容器规则

容器是UI中的框架，其中包含内容，通常这些内容是页面、卡片、模态、弹窗等。由于容器在层次结构中处于最高层次，所以我确保所有容器的间距值（在我的例子中是16px）。提示：切勿在任何间距计算中包含边框。

第2C：内容规则

• 内容存在于容器内部，内容包含：

• 标题（h1、h2、h3、h4、h5） 以段落，列表，表格，表格的形式穿插数据。

所有这些内容都是使用页边距垂直叠加的，但字体行高也为指定的页边距增加了额外的间距。我无法以一致的方式解决这个问题，因此我同时考虑了行高和边距，创建了自己的处理堆栈的方法，以下是我的过程：

A）首先解决头部堆栈

• 如下图，我通过使用2个选项来获取标题的行高。

• 为了简化这2个选项之间的行高决策，我计算了每个行高比，并决定使用等于1.5或更高的行高。对于选择哪个行高，我仍然犹豫不决，但是在进行了视觉探索并回顾了设计团队的结果之后，我们确定了应该采用那个行高选项。

视觉探索的过程

• 我从顶部的H1开始，尝试使用2px、4px、8px等的不同间距选项。行高为36px的间距选项都很紧凑，但4px间距与行高40px感觉恰到好处！

• 接下来我解决了H2问题，在我们的产品中，H2恰好是白色页面的第一个标题。所以根据容器规则，最上面的H2在顶部有16px。我决定在所有H2标题上面给出16px间距高度（最大允许间距值），因为这个值使得层次结构非常清晰。

• 然后我在所有标题（H2、H3、H4、H5）和列表、段落、表格之间进行了间距值0px、2px、4px和8px的实验。2px和4px的间距相差无多，但是我们在设计团队内部审查结果时，2px的视觉感知更好，尽可能的坚持只有一个边际数值，因为它简化了设计和开发过程。

标题和叶节点间距实验

标头堆栈 - 间距为2px和4px

B）接下来解决叶节点堆栈

EHR有4种主要类型的叶节点：

• 表单（几乎50％的产品）
• 列表（几乎30％的产品）
• 表格（可能是产品的15％）
• 段落（可能是产品的5％）

我开始为最简单的内容类型——段落来处理间距。

每个段落内的间距

这非常简单，只需要清空段落中的所有文本行空间，这样两行之间就有0px边距。

Sketch中的排版段落（行高20px是通过视觉探索得出的，并使用WCAG SC 1.4.8进行验证，其中规定“ 行间距至少是段落内的空间的1.5倍 ”（20/13 = 1.538）

两个连续段落之间的间距

我第一个想法是使用行高为20px的间距，但后来看到了WCAG SC 1.4.8，其中指出   “段落间距至少要比行间距大1.5倍，因此一段最后一行的行高为250％，这样可以保持距离下一段第一行间距更合适。 假设％值是根据基本字体为13px的大小计算的，我计算出两段之间的实际间距应约为（ps - ls）= 13px，将使用margin-bottom：13px在CSS中定义。但是13px不是我们在步骤2中确定的间距值之一，因此我选择了16px作为段落底部的边距。

解释WCAG SC 1.4.8中的段落间隔规则

在Sketch中多段落排版

如果对计算结果有疑问，我总是用视觉探索进行交叉检查。与其他可能的值相比，段落之间的16px间距最佳。其实我认为12px间距会更好。但是我不想仅为这个用例为整个间距系统添加额外的值，另外我们的EHR产品没有很多段落，几乎没有任何连续的段落。

列表中列表项内的间距

列表是由多个同质数据项组成的数据结构，由于列表将所有这些同质数据项组合在一起，因此列表项不像段落（它们之间有16px）那样间距很重要。同时列表项仍然需要稍微分开，所以我尝试了0px和16px之间的间距，我只有3个值可以试验2、4、8，总体看起来列表项之间的间距为8px看起来最适合层次结构。

带有标签的2个连续输入字段之间的间距

表单有连续的输入字段，一个接一个地叠加在另一个之下。

无标签2个连续输入字段之间的间距

无标签对于可访问性来说并不是一个好的处理方式。然而在某些情况下，标签最好不要显示，这些情况是：

• 当多个输入字段一起表示1个对象时（例如在下面的地址部分，“地址”字段包括街道地址1，街道地址2，城市，州，邮编）
•   当标签过于明显/重复且无法拼写时，例如搜索。

第3C：组件规则

组件有按钮、输入字段、图标等，这些组件通常放置在一起（内联）。此外所有的组件的尺寸均为4的倍数（也是8的倍数），因此按钮和输入域内部有一个24px高度的空间（加上1px 顶部和1px的底部边框，整体高度为26px）。当组件能完美利用好基准网格，并且按规则设置间距时，整体布局才会完美和谐。

2个组件的间距

我用了一个简单的规则，即在大多数时候任意2个相邻组件之间使用8px间距。在少数情况下使用4px来显示两个组件之间更紧密的关系（格式塔的接近性原则）。

组件内部间距

我对组件内部的任何左/右填充都使用了8px。

图标在组件内部间距

根据格式塔的接近性原则，将图标放在组件内，将他们的间距设置为4px，而不是通常的8px。

外部图标与组件间距

如果图标与组件关联组合，则其与组件间距为4px以显示其关联关系（格式塔的邻近原则）。但是如果图标与一组组件关联，那么它与最后一个组件间距8px，以表明它不仅仅是与最后一个组件关联，而是与整个组件关联。

结论

• 你将提出一个具有有限数值和有明确使用规范的间距系统，这非常易于使用并且合乎逻辑记忆。
• 在UI中使用间距，使其信息层次结构更加合理清晰，并遵守可访问性指南WCAG1.4.8，这有助于不同能力的人更好的掌握和理解信息。
• 开发工程师了解间距系统，并且熟悉其应用的场景和规则，这样可以让设计和开发之间的沟通更顺畅，工作效率更高等。
• 设计师不再需要对所有内容进行排查，开发工程师不再需要花时间检查Zeplin等其他工具中样式问题。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

文叠文

该技巧操作起来很简单，就是在标题或内文下面，增加相关的英文单词或阿拉伯数字就可以了。不过在处理下面的文字时要注意：

• 颜色要比上面的文字淡，以免影响其识别性；
• 字体要用粗体，且字号要比上面的文字大；
• 要与上面的文字错位排版。

之所以这么处理是为了增加版面的层次、对比，以及丰富元素。

给标题增加小色块

这是增强标题设计感的另一种处理方式，单纯的文字标题难免显得单调，我们可以通过增加辅助元素使它变得更丰富一点，比如在文字的基础上加小色块。

色块的高度最好大于笔画厚度，小于文字的高度，加上去的方式可以是叠加于文字之上，或是置于文字底部，创造出文字的一部分在色块内一部分在色块外的对比效果。还有，色块的颜色最好来源于版面中的其他元素。

用斜线或点填充空白

在做设计的时候常常会遇到这两种情况，一是版面中会多出一些影响版面平衡的空白，但已经没有合适的内容可以填充了，如果硬塞一些装饰文字或者图案，很可能会弄巧成拙；二是有的区域小元素小信息比较多、比较散。怎么办呢？

这两种情况都可以通过该方法解决。把斜线或点重复排列成一个矩形，然后把它填充在空白处就可以平衡版面，且不会造成突兀的感觉，如下图案例：

要点：线条不宜太粗，点也不宜太大，而且此方法只适合填补小空白，不适合填补大面积的空白。

在比较散的元素下方排一组斜线，可以把各个分散的元素联系起来，使其成为一个整体。如下图：

把背景分成两个斜切的色块

背景能很大程度地影响版面的设计感，这一点应该都有体会，常规的处理方式是把背景作为一整个色块，而如果把背景分割成两个几何色块时，设计感立马就会增加不少。

分割的方式好比用一把刀在背景的黄金分割处，划一条倾斜的直线贯穿版面，使整个背景一分为二，而这两个色块的颜色对比要比较强烈。另外，在横版中用左右分割，竖版中用上下分割效果会比较好。

给图片加圆形色块

增加对比关系是加强设计感的最有效技巧，我们也可以用此方式来优化图片。如果版面中的配图是没有背景的产品或人物，那么在这些图片上加一个圆形的色块，创造出虚与实的对比，通常也能得到不错的效果。

要点：

• 色块可以置于图片底部，也可以采用正片叠底压在图片上方；
• 圆形色块的边长至少要超出图片宽或高；
• 图片与色块要错位排列。

给每行文字都加一个色块

该手法在画册和海报设计中比较多见，与直接在一段文字下方加一个大色块不同，而是要根据每行文字不同长度，单独加一个相应长短的色块，所以这些文字每一行的长短最好是不一样的。

这种处理方式可以使整段文字看起来更整体，增加文字视觉冲击力，而且还能使文字与背景区隔开，加强文字的识别性。

要点：

• 段落文字行数太多或太少效果都不会很好，3-10行左右为最佳。
• 各个小色块可以相互连起来，也可以相互隔开，以实际效果为准。

用飘带装饰包装上的文字

如果你看过的食品包装够多，你应该能发现，很多包装上的产品名称、广告语或者卖点等信息，都会摆放在一条飘带上。这么处理的效果通常不错，因为飘带具有礼品、赠送的寓意，用在哪里都不会太唐突，而且飘带的形式简单、有细节、变化丰富，很适合用作装饰元素。

还有一点也很重要，飘带的形式一般都是柔软的曲线，这与版面中其他直线元素可以形成鲜明的对比，加强版面的灵活性。

结语

以上的七个小妙招是不是既简单又实用，你们在做设计的时候记得拿出来试试。不过这些也确实只是小技巧而已，只能优化局部，不要指望用上这几招就能做出很好的设计，而且它们也不一定适合所有情形，在实际操作中一定要具体问题具体分析，灵活运用。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

AR的特点

• 不隔离真实世界，而是将计算机生成的信息和物体叠加到现实场景中。
• 借助AR设备，用户可以更自然地与增强现实环境进行交互，这类交互满足实时性，例如手势、语音。
• 计算机生成的物体与真实环境无缝对接，并且用户在真实环境中运动时，也将继续维持正确的位置关系。

放置类AR的场景及类型

AR的场景多种多样，其中在手机设备的AR体验中，有一种基本且常见的场景：通过手机摄像头，用户在环境中放置虚拟物体（模型），用户与它有一些具体的互动操作，如移动、旋转等。

我们将这类场景统一称为放置类AR场景：放置对象可以是一扇虚拟场景的任意门，用户可走入门中互动；也可以是一件家居商品，用户可预览商品是否与室内环境搭配等。针对不同的放置对象和场景，设计侧重点也会有所不同。

基于真实环境放置虚拟模型，并与模型进行交互的AR场景。

放置类AR的交互框架及节点

无论放置的对象类型如何，用户打开相机，在屏幕中放下具体模型和进行互动的过程具有共性。我们把中间的完整流程拆分为了以下部分：

初始启动的节点分析和设计建议

1. 初始启动环节的作用

用户打开放置类AR功能后，进入环境识别前的过程，均属于初始启动的范围。放置类AR为何需要有初始启动环节，用户不直接进入AR场景进行体验？

由于技术和产品的需要，放置类AR初始启动承载帮助用户理解、AR素材准备，为用户带来更优的AR体验。

初始启动的流程中，包括启动页、引导页、加载页三个部分节点，三个节点可同时存在，也可只存在一个或两个节点，具体需要根据设计需求来决定。

启动页的定义及设计形式

在启动页游戏AR应用中比较常见，只有短暂停留。页面起到品牌露出的作用，或在启动APP后渲染氛围，迅速将用户带入。设计手段包含：音乐、音效、视觉、文字、动效，具体运用根据实际设计需求而定。可以参考以下两种设计内容：

• 品牌露出。围绕 logo 进行设计，给用户强化品牌的印象。
• 氛围烘托。围绕主场景/故事设计海报式的视觉设计，让用户对之后的AR应用的情节/人物/模型有初步印象。

启动页虽然不传递明确的含义和信息，但不同的设计手段可以给用户传递出不同的品牌调性和场景氛围感，其中音效和动效形式的应用会增加启动页设计的吸引力，下面将结合案例具体说明。

引导页的定义及设计形式

引导页促进用户进入后续的核心体验流程，传达有关体验的明确内容，根据 APP 的类型，引导内容有所不同。但不涉及后续具体细节操作。常见的引导包含：内容介绍、安全警告、体验建议、环境要求、玩法介绍、新手引导等。设计手段包含：语音、音乐、音效、视觉、文字、动效。具体运用根据实际设计需求而定。可以参考以下五种设计内容：

• 产品介绍式引导。简明扼要地介绍AR应用的主要作用。
• 辅助信息式引导。模型的补充理解信息，引导用户了解模型背景知识等。
• 体验建议/要求式引导。简明扼要地提出会直接影响AR应用体验沉浸感的建议或者要求，以引导用户照做，获得后续最佳体验。
• 背景故事式引导。通常以丰富的可视化形式展现于产品/模型交互相关的背景故事。
• 试玩式引导。直接以某个模型举例，引导用户一步步进行交互，获得该模型的完整交互体验。

引导页有明确内容，根据设计需求可以考虑从产品介绍、展示辅助信息、在体验时的建议或要求等。每种设计内容有各自的适用场景、设计形式及优缺点，将结合具体的案例进行说明。

加载页定义及设计形式

加载页需要用户等待，加载时长根据加载内容的大小而变化。过程可能包含素材下载、模型加载、材质渲染、界面UI等。设计手段：文字、视觉、动效、音乐、音效。具体运用根据实际设计需求而定。可以参考以下五种设计形式：

• 进度条式。常见的是浮层样式。感知最弱，通常设计样式跟随移动应用的框架样式。
• 文案式。通过文案传达加载过程中的信息，让用户知道进行到哪个步骤了，后台正在做什么。但需要注意进程描述的文案不超过3条，且语言需要简单好理解，避免使用技术性语言迷惑用户。
• 转场式。完整的转场页设计，视觉需要符合产品的整体调性，以保证整体的和谐统一。游戏中最常见。
• 下载式。下载式的加载可取消加载，因为模型较大，需要较长时间进行下载体验。并且通常用户只对单一模型感兴趣，没有连续体验多个模型的需求。必须下载成功，才能进入后续的AR体验。
• 静默式。将模型下载过程并入引导页，使用户无感知。该方法适合情节连贯的AR体验。

建议使用Jigspace、Lego AR、AliceARQuest等AR应用进行体验。

2. 初始启动设计原则及建议

整个初始启动环节包含启动页、引导页和加载页，整体的设计原则可总结为：

初始启动设计第一步是根据应用类型选择设计内容和形式

不管是启动页还是引导页的设计，都需要根据应用的类型去决定以何种形式给用户展现必要的信息。例如：游戏类注重用户的沉浸感，引导以故事介绍+体验建议为主。科普类的需要通过界面+三维的形式展示更多信息给用户，引导以产品介绍和信息补充为主。

启动页设计目标导向，不拖沓不无聊

根据APP类别选择恰当的形式，尽量简单直接，尽快进入后续内容页。游戏类可形式丰富，时长稍长。

引导页设计简单直接，使用多维度设计手段增加引导信息的丰富度

不管引导的内容是产品介绍，还是试玩引导，简单直接始终是目标，不在引导的部分占用用户过长的时间。另外也不能为了节约时间而使必要信息缺失，因此可以选择丰富的设计手段，让必要信息充分暴露。

加载页设计优先考虑无感知加载，否则根据加载时长使用不同形式

如无法无感知，则根据加载时长选择加载的设计形式。例如：时长较短的加载过程需要简单明快，不打扰用户。时长较长的加载过程需要过程明晰，给用户明确的预期。尽可能避免阻断式的加载过程。通过设计方法增加长时间等待的愉悦感，减少不耐烦。

场景搭建的节点分析和设计建议

1. 场景搭建环节的作用

AR应用启动后，经历完内容引导加载的过程，便正式进入了AR场景搭建环节。从技术的角度来说，想让模型稳定地融合于真实世界，我们首先需要让手机摄像头认识周围的环境，即为场景搭建的第一环节：环境的感知识别（环境识别包括平面识别、图片识别、物体识别等，本文聚焦在环境中的平面识别）。确定平面之后才能继续进行模型放置，直至用户成功把模型在真实环境中放下。

2. 平面识别的作用及完整节点

平面识别指通过对环境特征的感知，确定一个基于真实环境的平面。确定放置平面后，即可构建虚拟世界的坐标系，在虚拟世界中放置模型。平面识别是放置类AR体验的第一步，是后续所有体验内容存在的基石。因此在设计中我们需要保证平面识别的成功率，保证用户的顺畅体验。

这个环节本质上是个技术驱动的环节。程序启动后，系统以手机摄像头为原点建立了3D世界坐标系。相机界面打开后，系统开始识别拍摄到的真实环境。通过检测所捕获的图像之间的视觉差异点（即特征点），系统可以确立一个平面，并在世界坐标系中赋予平面一个位置信息，自此3D世界坐标系与真实环境中的平面建立了联系。找到平面后，系统仍会持续进行检测、更新平面的信息。

平面识别的成功需要用户将手机摄像头对准平面并移动手机，从而获得更多平面的特征点、确定平面。因此在设计中，首先需要引导用户做此动作配合；同时在用户动作中，应对识别状态给予实时反馈，让用户有把控感；识别失败时，有效的容错设计可以减少用户挫败感，提升识别成功率。设计节点可总结为以下几点：

动作引导定义及设计形式

动作引导需要引导用户做出配合的动作从而成功识别到平面。主要的引导内容是：引导用户将手机朝向一个平面任意方向移动，从而识别到平面。

表现用户动作的引导形式有多种，如：文字、图片、动图、语音以及这些方式的组合方案等等。每种单提示形式都有其各自的优缺点。如文字可准确传达信息但阅读时间较长；动图传达直观，但准确性不够等。因此建议使用组合方案的形式进行动作提示，结合单提示形式的优点，同时规避其缺点。可以参考以下2种：

• 动图类组合引导。用动图直观展示用户需要配合做的动作，同时辅以文字说明，清晰直观。
• 语音类组合引导。视觉+听觉双通道提示，使信息更有效传达。

动作引导建议使用组合方案来进行提示，可以根据产品类型和场景选择合适的方案。结合具体案例以说明：

平面识别中的定义及设计形式

程序识别平面的过程中，所花费时间往往受用户所处环境的影响，环境较复杂时，识别时间可能较长。因此建议在平面识别的过程中，反馈识别的状态，帮助用户了解系统的行为，知道自己所处的状态。状态反馈有两种建议的方式：

• 动效过渡。用特征点闪动、平面延展等动效形式表示平面正在识别中的状态。
• 可视化识别进度。通过量化平面识别进度来表示状态，让用户清晰了解自己所处的状态阶段。

平面识别中的状态反馈可以让用户了解系统行为，明晰所属状态。该步骤通常会和下一步合并设计。结合案例进行说明：

平面识别成功的定义及设计形式

平面识别成功后，建议可视化检测到的平面，给用户成功的反馈，同时让用户知道即将放置模型的平面在哪里。

• 平面可视化。通过UI层直接可视化出识别到的平面，如使用网格等UI形式。
• 模型放置位置的可视化。通过模型放置位置的UI侧面可视化识别到的平面局部，与下一步自然衔接。

平面识别成功的反馈是平面识别环节完成的节点，该步骤可能与之后的模型放置结合设计。结合案例进行说明。

平面识别异常的原因及设计

前文提到平面识别主要依赖对环境特征的检测，在一些情况下会很难识别到平面。当出现异常时，如何引导用户解决异常也是体验设计的重要内容之一。经过前期技术调研，平面识别异常的情况主要有以下几种：

• 光线过暗，没有足够的光。
• 光线过曝，光太强造成画面过曝。
• 缺少纹理，扫描纹理很少的平面很难成功，例如扫描纯白的墙是无法成功识别平面的。
• 图像模糊 ，如果用户快速移动手机，就会造成拍摄图像模糊，导致无法识别或识别不准确。

我们可以对每种异常进行具体的提示，也可以给出综合提示。这里建议的异常提示策略主要有两种：

• 针对性提示。在用户长时间检测不到平面时，根据当前具体的异常情况给出针对性提示。如检测到光线太暗，就提示用户去光线充足的地方体验。
• 总结式提示。若无法获得具体的异常情况，可总结、合并4个原因的解决方法进行提示。

进行提示内容话术设计时需注意：

• 提示话术不能太技术，需要用户可理解；
• 提示内容需保证用户可操作。

另外异常提示的设计形式也有多种：文字、图片、动图、语音、组合方案等等。在设计时需要结合「动作引导」的设计形式进行整体提示的组合方案设计。例如动作引导是文字+动图的形式，异常提示就不应该出现语音形式；动作引导是文字+语音形式，异常提示同样使用语音的形式更一致。

平面识别的设计原则及建议

平面识别的设计原则及建议：

• 动作引导需要自然、直观、易学。减少用户认知成本。
• 识别状态实时反馈，形式可以是视觉、声音甚至震动。给用户可控感、掌控感。
• 需要有容错设计。避免用户因识别失败带来的挫败感。
• 设计形式的一致性。动作引导与异常提示的设计形式需配套，保证设计的一致性。

模型放置的定义及作用

确定了放置平面后，下一步就是放置模型。模型放置指：通过一定的放置方式，让模型出现在平面的某个位置上。

在模型放置模块中，我们需要定义和设计放置方式以及放置位置。放置方式可以是自动放置，也可以是手动放置。放置位置可以是给用户体验效果最好的一个坐标点，即最佳放置位置；也可以是一片区域的任意一个坐标点，即可放置区域。

1. 放置方式的定义及设计形式

模型的放置方式主要有两大类：

• 识别到平面后系统自动放置模型；
• 经用户操作手动放置模型，可以是点击屏幕触发模型放置或拖拽模型进行放置。

可以参考以下三种设计形式：

• 自动放置。检测到平面后，模型自动出现在场景中，用户无需做任何操作。此方式适合用户不需走动的AR场景，对模型的位置要求不高。
• 点击手动放置。检测到平面后，用户需要点击屏幕触发模型放置。此方式适合场景互动类应用，需要用户在环境中走动，对模型位置有一定要求。
• 拖拽手动放置。检测到平面后，将模型从屏幕的模型库中拖拽到平面上。

模型的放置方式主要有自动放置与手动放置，可根据不同场景设定适宜的放置方式，以下结合案例具体说明。

2. 放置位置的设计内容及建议

放置模型时，模型即将放置的位置需要根据具体互动场景进行设计，以保证用户的视觉体验和互动体验。如果模型放置过近，用户无法看到模型全貌；过远，需要用户走动才能进行互动的应用会增加互动难度。可以参考以下两种设计内容：

• 最佳位置。自动放置场景和部分点击触发放置场景下，建议给模型设置一个默认最佳位置（具体的坐标点）。
• 可放置区域。拖拽放置场景下，建议给模型设置一个可放置区域。

在做具体的放置位置设计时，需要考虑以下几方面的因素：

• 模型完整呈现。需保证模型初次出现时在屏幕中显示完整且以最佳视角出现。
• 互动距离适宜。例如在AR任意门体验中，需要保证用户走两三步就能进入虚拟场景。自由放置的模型可以设置最近以及最远的互动界线，以免模型过大或过小造成交互困难。
• 场景元素布局符合逻辑。需考虑模型与场景内其它元素的关系，设计合乎逻辑的位置。例如食物出现在场景中的盘子里等。

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