很多时候，我们发现自己精心设计的作品总是乱乱的感觉，究其根本，大部分都是文字、图形、色彩处理不当，后续的优化调整也都围绕着这几点进行，这也是为什么设计师在制定设计规范的时候，会把文字（标题、正文、提示的字号）、色彩（主色、辅助、点缀、渐变的使用场景）规范分的很细。然而，有时候即便用好了规范，依然没达到理想的视觉效果，这里就要提到设计规范中很少有人关注、且非常容易被忽视的「间距」问题。优秀的界面设计应该体现在每个维度，间距在设计中也是不可缺少的部分，尤其是界面元素较为密集时，需要对间距的使用掌握得当，合理的利用间距留白，能将信息更高效的传达给用户。文字、图形、色彩是UI设计的三大组成元素，间距即是这几种元素结合的媒介，如何通过间距给用户带来更舒适的视觉体验是设计过程中极其重要的一环，那么你所理解的间距到底是什么、有什么作用、如何合理有效的使用？笔者进行了整理总结，通过本篇文章揭晓。一、间距在UI中的重要性1.什么是间距？间距指的是界面各元素彼此相隔的距离，可以是文字自身的行距、与图片、与组件、与模块的间距，或是界面两侧的安全距离（如网页的宽度为1920px，内容区为1400px，那么安全距离为两侧各260px）等。作为UI设计师，在设计界面的每一个元素都需要考虑到上、下、左、右以及毗邻元素的属性来合理调整间距，利用各间距之间的规律来组织界面内容，确保信息的节奏性，给用户轻松、预约的浏览体验。2.间距的实际作用间距可以让界面信息更有节奏，提升内容的可读性，还能通过不同的疏密程度来阐述各元素之间的关系，以吸引用户的注意力，所以在控制界面间距时，一定要有“较真”的心态，任何一次的改动与调整都要先考虑清楚为什么，能给产品和用户带来什么。要做好间距，不能仅停留在视觉层面，需要进行多方面思考。设计师层面：规范的定义间距，不必每个元素都去考虑间距的大小，有效减少决策和思考时间，提升效率。开发层面：开发可以按照基础间距去定义变量，长期如此，虽然不能炼成像素眼，但仅凭视觉也能看出间距的倍数。例如基础间距以8px增量，在使用8px、16px、24px、32px、48px...等，开发直接使用基础间距x1、x2、x3...，以此类推，在开发眼中，肉眼定然看不出1px的差别，但却能区分出8px的差距，不必每次都去测量，还能减少误差，高度还原设计效果。用户层面：有节奏且具备一致性美感的界面效果，信息的有效传递变的轻松，用户体验能得到很大程度的提升。3.间距的统一性设计规范的目的是提升设计师的工作效率、团队之间的高效沟通、让设计风格始终保持高度统一。同理，间距也是设计规范中非常重要的一环，它作为规范中的最小单元，如果没有遵循统一，将会直接影响界面整体的版式和布局，信息的疏密程度严重影响用户的浏览。不仅是设计师，开发每次面对同样的模块都需要定义不同的间距也是崩溃的，毫无规律可循。统一的间距能让界面的视觉效果更有节奏，设计师在设计某些相似的模块时可直接复用组件，即便是多人共同完成同个项目或更换成员，也不会因间距不统一的问题造成整个APP的风格混乱。对开发来说，如果清楚间距的使用规律，即便有小的误差，也能自行更正，例如使用8px增量，8、16、24...按倍数规律以此类推，若出现9的间距，开发会更正为8、15则会更正为16，自行多退少补，虽然设计师需要细心、尽量不出现这种小的出入，但任何事情都没法做到绝对，统一的间距能让减少设计的出入以及与设计师之间的频繁沟通，能进一步提高开发效率。▲

APP的顶部导航栏（以下简称“导航栏”）对我们来说再熟悉不过了，它是UI设计中必不可少的组成部分，几乎每一个页面都会使用到。虽然看起来很简单，感觉不需要花费多少精力，但设计一个与产品需求、用户目标匹配度较高的导航栏并非那么容易，这里面有很多需要注意的设计细节。导航栏集合了用户常用或必用一些功能，复用率极高，当用户在进行部分路径操作时，导航栏就像黑暗中的一盏“明灯”，指引着用户进入下一步或回到上一步操作，所以做好用户体验是非常重要的。我们每天都在跟导航栏打交道，如果仔细观察就会发现，不同应用的顶部导航栏都或多或少的存在一些差异，为了让大家对导航栏有一个更清晰、全面的认识，本文将对导航栏的设计风格、组成结构、样式、交互等多方面做出总结，希望能帮到大家，一起来看看吧。一、导航栏基本介绍1.导航栏在哪里？在UI设计组件中，如标签栏、菜单栏、Tab栏、应用栏、标题栏、导航栏...等诸多类型和叫法中，有很多新人设计师难以区分这些重复叫法以及对应的所在区域。导航栏位于应用程序的顶部，即状态栏下方，主要用于明确页面位置、层级等，并且连接着父/子级结构页面，权重应高于当前页面的所有内容。如果用户不知道当前所在位置、如何回到上一步的时候，就说明导航栏一定存在问题。虽然在iOS系统中叫做「导航栏」、Android系统叫「顶部应用栏」，叫法不一，但所在位置以及起到的作用几乎一致。2.导航栏能起到什么作用？首先，导航栏能告知用户当前所在位置，并提供回到上一步或部分下一步操作入口，不至于让用户迷失方向；其次，以顶部Tab的方式将当前页面内容作出整理分类，并将各类型入口聚合在导航栏，给用户提供全局操作；最后，还能增加品牌曝光，例如容器品牌色、图标品牌色等，甚至在有必要的情况下放置品牌LOGO。3.为什么有的页面没有导航栏？当系统想要给用户提供更多信息或用户需要沉浸式的使用体验，这时系统需要弱化、隐藏导航栏来释放更多的页面空间，以备增加单屏页面信息量的空间资源预留。例如在线上读书、地图导航过程中，系统会将导航栏进行隐藏，因为这时用户的关注点只会长时间停留在内容本身，没有频繁的操作需求，隐藏导航栏既能预留空间，还能减少无关元素对用户的干扰；使用滴滴出行在选择服务车型时，会暂时隐藏导航栏的背景容器，只保留了相关图标操作入口，虽然没有全部隐藏，但对本就不宽裕的地图空间能起到一定的缓解作用，相比上述处在导航过程中，现下场景的操作需求、频率显然要高出许多。二、导航栏的结构组成常见的导航栏分为左、中、右结构，主要由返回按钮（左）、标题（中）、辅助操作按钮（右）三部分元素组成，这也是基于大家最常用、常见的布局方式。在实际应用中，为了满足多元化的产品需求及用户目标，根据不同的场景，导航栏的布局方式也非常多，不管样式多么复杂，这也仅仅是站在设计角度，其目的还是为了让用户操作起来更简单、便捷。下面以iOS的2倍图为例对导航栏进行一一拆解，看看我们所见过形形色色的导航栏到底会用到哪些元素、组件。1.容器即导航栏的范围约束容器，所有元素都应该在容器里面。在iOS系统应用中，常规导航栏的固定高度为88px，即便在大标题导航样式下，不管当前的高度是多少，随着界面的滚动，随后也会转换为88px的常规高度，例如iPhone界面、产品经理应用等。另外，部分应用为了释放更多界面空间，从表面上看不到容器的存在，实际是将容器的不透明度调整为0，逻辑上容器是依然存在的，且各元素依然受到容器的约束，例如滴滴打车界面。2.标题标题用于描述用户当前所在位置或页面的具体所在场景，在iPhone全面屏出现之前，因设备屏幕空间有限，大部分使用常规标题，即34px~40px（栅格所需、笔者常用36px）加粗且居中标题文字。当全面屏设备逐渐普及后，屏幕的高度得到了进一步扩展，导航栏的可发挥空间必然增加，大标题风格开始兴起，随后也被引入了设计平台规范。大标题导航栏主要取决于产品定位与功能影响，并不单单是设计风格的问题，毫无疑问，大标题能让页面头部有更多的留白空间，呼吸感更强，非常适合产品结构不深、功能单一且体量级别较轻的应用，也就是我们常说的「小而美」，人人都是产品经理平台在这方面做的相当出色。大标题导航栏的容器高度为192px，字号通常设定在56px~68px（栅格所需、笔者常用64px）的范围，页面上滑后，会恢复到88px的常规高度，标题字号也随之减小。3.图标主页面导航栏中的图标比较多元化，例如左侧常见的定位、品牌logo、抽屉菜单入口等，右侧例如搜索、消息、扫一扫、更多……。二级及以后的页面导航图标相对固定，左侧必定有一个返回到上级页面的“回退”图标，可以是向左剪头、向下剪头、关闭按钮等。需要注意的是，不管设计什么样式，都需要符合“回退”样式预期，确保用户不会产生疑惑。右侧一般放置功能图标，如次级功能延展、信息提交、删除等，最多不超过两个操作入口，避免造成功能层级混乱。4.按钮导航栏的左侧已被「返回」图标占领，按钮基本只能放在右侧，且以文字按钮样式居多，主要用于承载页面的辅助操作、功能入口。当导航有足够的纵向空间时，也可使用如圆形、方形、圆角矩形类型的容器按钮，需通过按钮的形状、大小、填充、描边等样式来确定在页面中的视觉权重，灵活区分主次层级关系，好的导航按钮总能抓住用户的注意力。5.搜索框当搜索功能权重较高，用图标、按钮作为入口已不能满足用户频繁的搜索需求时，就会以输入框的方式占据导航栏大部分区域，不仅能突出搜索功能、向用户推荐搜索内容标签，还能提升产品的可操作性，随着搜索框区域的扩大，用户无需精准点击，触手可及。对于内容较多的首页，导航栏需要承载如标题、分类、头像、按钮等诸多信息，这是可适时增加导航栏的高度，搜索框放在第二行展示，可避免过度弱化搜索框给用户带来操作上的影响，例如京东、淘宝等电商类型的应用。如果想节省页面整体纵向空间，若条件允许，可在页面上滑后缩小导航栏高度，只显示搜索框，例如美团外卖。6.用户头像很多社交类产品，会在导航栏的左、右侧放置用户的头像信息，方便随时调用与用户相关的功能。例如点击后进入个人设置、个人信息展示、会员中心、个人主页等。7.标签/分类导航栏的分类菜单包括分段控件和标签导航，分段控件通常包含2~4个标签，直接点击进行内容切换，不支持左右滑动；标签导航则相对灵活，很适合分类较多的内容，可通过左右滑动来查看所有分类，实现更方便的导航。8.更多菜单上述提到的标签是对产品内容的分类，而这里更多指的是产品、系统的辅助功能。当页面的某些功能操作频率较高或与当前页面信息相关联但不方便直接展示入口、也可能因导航栏剩余空间不足以承载时，将功能放置在更多菜单中，既能适当的给用户提供操作入口，也能满足产品多方面的隐性需求。9.分割线分隔线并不仅仅是一条线，它可以是线、面或投影，用于分隔导航栏与内容区域的一个边界线，通过视觉阻断的方式让用户感知内容区域，避免在页面产生上下滑动交互后重复扫视顶部位置。分割线是为了体现导航栏与内容界面的层级关系，缺少视觉分割可能会让用户感觉它们是一个平级，会增加感知难度。当然，并不是所有的应用或界面都需要视觉分割，例如：界面内容极少、界面背景色与导航栏容器背景色值有明显差异、多图/多卡片……三、导航栏样式分类1.常规样式最常见的样式，95%以上的2级及后续界面使用的都是常规导航栏，部分较为简单的主页也会使用这种类型。以iOS的2倍图为例，容器高度固定在88px，基本只有按钮、标题组成，背景色多为白色或主体色。2.大标题在iOS11系统发布之后，大标题导航栏逐渐流行。大标题一般只出现在主页面（底部标签功能分类），至于基础规范上述有详细说明。大标题导航栏会给人一种高逼格、通透的空间感，整体风格偏向简约大气，并不适合电商类型应用，因所占空间较大，适合用在如新闻资讯、社交、工具型且功能较为单一的应用。3.搜索框类型根据搜索功能的权重，在常规导航栏中添加一个搜索框并替代标题展示。因空间限制，搜索框高度一般设置在56px~64px，宽度随其他功能图标的多少而定，若图标较多，可将搜索框放在第二行。如无特别需要，尽量将搜索框整体居中，让两侧的间距相等或两侧图标数量相同，以提升视觉美观度。4.Tab导航Tab栏有分段控件和多标签导航两种，需明确突出已选中的标签即可，上述有详细规范说明，暂不做赘述。5.通栏导航栏通栏导航可以是上述类型中的任何一种，唯一不同的是在视觉层没有容器（或不透明度0%）的存在。在初始化状态下，它可以与背景/图片融为一体，对节省头部空间、渲染氛围起到很大的作用，同时也能减少导航栏与内容区域的割裂感，电商类应用中很常见。在页面上滑至背景消失后，会逐渐恢复至常规样式。尤其要注意背景色与导航栏中元素的色彩明暗对比（例如图标深色、背景就必须浅色），如若背景不可控，建议在导航栏下方增加一个黑色透明渐变蒙层，以确保证信息的可识别性。6.小程序不管是哪个平台的小程序，我们都可以理解为内嵌的“子级”APP，其导航栏右上角一部分区域为“父级”APP原生功能，是无法作出任何修改的，这是硬性规则。除此之外，至于放什么元素、用什么类型可随意发挥。四、内容区域的交互关联众所周知，导航栏最主要的作用是方便用户随时进行上一步或部分功能的下一步操作，帮助用户不迷路，但有时候，导航栏还能协助用户快速完成任务，以及交互后的内容管理、信息层级重新划分等。1.导航栏中的按钮点击交互当用户与导航栏中的文字/图标按钮产生交互时，不用离开此页面就对内容进行管理并能即时反馈，例如增加、删除、分享等操作，协助用户快速完成任务。2.界面上滑，导航栏内容减少随着界面的向上滑动，大标题、或带搜索功能且占据两行的大尺寸导航栏将恢复至常规尺寸，信息的数量、层级也将重新划分，以弱化导航栏吸引力的方式，减少对用户的干扰。3.界面上滑，导航栏内容增加界面产生上滑交互后，原本常规样式的导航栏会自动增加信息内容。例如美团外卖，首屏上滑至一半时，将特色标签及筛选入口悬浮至导航栏，目的是为了帮助用户快速做出决策。4.导航栏与内容区域的信息分割大多数用分隔线直接分割，但部分产品为了保持界面的干净整洁、减少无关信息的干扰，在无任何交互产生的情况下，导航栏与内容区域的元素间隔较远，利用空间留白自动形成视觉分割，当产生滚动交互后，留白不可控，就会在导航栏下方增加投影、分隔线或毛玻璃效果，进行视觉分割。五、导航栏的相同点/不同点1.同一应用中的相同点导航栏在同一个应用中的高度、位置及其部分属性（字号、图标大小、用色规范）需具备统一性，这也是格式塔心理学中的「一致性」对UI设计的硬性要求。即便是大标题样式，那么底部标签栏（主结构、功能）所对应页面的导航栏也会遵循一致性要求。当然，部分只在首页设定大标题样式的应用除外。顾名思义，导航栏还需要具备导航的作用，不管什么时候，用户只要一抬头（扫视导航栏）就能清楚知道当前正处于什么位置或流程，这主要从标题（后续会有标题设计的单独文章）信息中快速获取，如果当前页面不设标题，那么用户需要在页面头部某些层级较为突出的关键信息中获取，一旦页面滑动覆盖至关键信息位置，就需要呈现标题给用户指路，避免用户产生疑惑而付出更多的时间、增加理解难度。2.不同平台中的差异这里主要指的是iOS、Android两大系统，在同等比例、同宽度前提下，Android（MD设计规范）系统的标题为左对齐，且容器高度比iOS要高；iOS系统一般只会在大标题样式下让标题左对齐。另外，Android一般会在容器底部增加投影，以区分导航栏与内容区域的分割；iOS除上述（2-9）提到的分割元素外，还可以使用高斯模糊且带不透明度的方式来区分，毛玻璃效果的味道。六、结语导航栏几乎是每个界面必定存在的控件，虽然常用，但并不是每个设计师都能将其设计的优秀，需要在基础设计规范、作用之上，赋予其更大的产品价值。“如果逃不掉，那就静下心来享受”，导航栏既然不能轻易删减，那么就把它设计好，或许还能带来意想不到的好处。以上内容集合了笔者使用众多APP后以及根据工作中的经验总结，让我们从更全面的角度来看待导航栏在不同页面、不同应用中的使用方式和设计细节，以及不同场景下的交互变化，让信息变得更高效，用户使用起来更便捷。本篇文章希望能帮大家看到在设计导航栏的时可能忽略的一些问题。每次的总结梳理，都是一次知识、能量的升华，个人拙见及表达方式固然不能尽善尽美，欢迎一起交流、进行思维碰撞。往期回顾：标签篇

在现实生活中，每个人都会不同程度的给别人、被别人贴标签，这是一种低门槛、高效率的记住一个人/物的有效方式。我们在背后谈论某个人/物的特点，最直观的表达方式就是利用标签叙述，例如，某个人好帅/善良、某件事做起来很简单/方便等，甚至将某种相似的人/物进行简单的归类后使用共同的标签，这都能让我们更清晰的掌握某些关键信息。在互联网产品设计中，标签虽然不是很起眼，但是绝对不能忽视它，只要使用得当，尤其是在电商类产品中堪称神助攻的存在，其功能的强大不是笔者几段文字能介绍清楚的，了解过产品运营、用户行为及心理学的设计师就知道为什么会“爱”上标签了。很多时候，看似简单的组件/元素，背后都蕴藏着不简单的运作方式，其方式的不同，给产品带来的结果也截然不同。UI设计中的标签可用于传达信息、建立可预知操作等，能帮助或促进用户更快速完成任务、协助产品达成业务目标，深受产品经理、运营者的喜爱，但作为设计师的我们真的能听之任之吗？标签该不该用、怎么用、如何更好的使用都有一定的原则，即便同一个产品，被不同的设计师设计出来也可能是千变万化。本文笔者将根据标签的定义、属性特征及使用场景作出一些思考和探索，帮助大家对标签有一个更清晰的认识。分享目录一、标签基本介绍二、标签在设计中的作用三、不同场景下的使用方式四、标签的设计（主产品列表）五、结语一、标签基本介绍1.什么是标签标签是结合产品内容及属性特征经提炼后产出的关键词，是信息的一种集合方式，便于用户查找、定位以及系统识别。好的标签设计会根据业务需求场景、服务理念形成独特的视觉标记，依托产品、用户目标需求，引导或促进用户进入下一步操作，用以提高商品、信息的转化。2.标签色彩标签主要帮助用户快速识别信息、提升信息转化效率，色彩是一个很重要的因素，好的配色能高效、精准的传达信息。在标签的配色中，主要针对以下两种场景：一种是白色背景，这种没有任何冲突的背景给标签配色创造了极佳的条件，主体色、辅助色、点缀色均可使用，在面对同一组信息多标签的情况下，还能多种色彩混合，以便对标签更好的分类；另一种是图片背景，更多用在封面、头图、商品详情等位置，相比白色背景会受到很多局限，一般使用白色/黑色+不透明度、或者主体色作为标签容器，文字使用黑色或反白处理。3.标签形状形状是标签信息传递中的视觉轮廓表现，它是用于承载信息的容器，对文字元素的包容性极强，能使标签信息更加聚焦，让用户在获取内容、信息归类时更加专注。常用的标签形状有圆形、矩形（半圆角、全圆角）、三角形（角标）、气泡或异形，真实情况还得受界面使用场景、品牌调性以及设计规范等因素的控制。二、标签在设计中的作用为了对信息进行归类，标签可能出现在任何一个页面，通过精、简的表达方式，希望能引起用户的关注以及激发用户想要进一步了解的欲望。例如双11快到了，手机里的各大应用图标都贴上了双11标签，预示优惠活动已经启动，以激发用户点击的欲望；打开外卖应用，看到琳琅满目的满减、特色标签，也能让我们快速的择优处理。总之，在什么时间、需要使用什么样的标签，主要看产品想达到一个什么样的目的。1.突出产品特色（营销）标签的首要任务就是为满足用户的隐性需求而传达特色信息，通过让用户对产品产生联想并增加需求欲望，促进用户完成下一步操作。对于产品而言，标签能传递出折扣、优惠、卖点、特色等与用户利益相关的各种信息，而对于用户来说又能让其快速获取关键信息，降低内容的理解难度等。例如：美团、饿了么店铺的优惠，如满x减x、免费配送、店铺红包、首次优惠...等标签让用户潜意识的认为能降低经济成本，即便事实并非如此；通过产品特色信息，如品牌、服务、复购率、售出累计、排名...等标签体现出专业、高质量以及热情的服务态度，无时不刻都在击溃用户最后的心理防线，以提高产品的转化率。2.建立用户操作预知通过建立用户操作预知，让其在操作之前就能清楚点击后会发生什么。例如：登录腾讯动漫时，会用小标签提示上次的的登录方式，降低多账号的记忆成本；腾讯视频的封面会有VIP（需开通会员）、付费（需额外付费）、等标签，让用户在操作之前就能根据当前账号情况来判断操作之后可能会发生的事情，提前有一定的心理预期。3.个性化内容推荐用户在接触一个新产品或新功能时，一开始总会有些不知所措，这时系统会提供一些用户可能感兴趣的、产品希望用户选择的标签，并引导用户操作来获取想要的内容，以满足用户的潜在需求。4.操作前/后的内容引流标签既能突出产品特色信息、又不会占用太多空间，所以通过对用户建立好感、吸引其注意力进行引流也是一个很不错的方式。常见的有两种引流方式，一种是在用户操作之前没有目标，系统通过标签对用户进行方向性的指引，例如淘宝搜索中的历史、热搜、兴趣推荐等。另一种则是用户在完成某个任务之后，产品通过相似或相关联的标签吸引用户继续浏览其他相关内容的潜在需求，以增加用户在应用中的停留时长，例如小红书文章详情页的结尾，会提供与当前内容相关的标签，点击之后可快速查看其他相似的内容。5.信息分类通过标签建立有效的信息分类，能帮助用户快速筛选出自己想要的内容，避免用户因浪费大量时间浏览了非需求内的信息而失去耐心。例如淘票票电影评论区，用户可选择自己感兴趣的标签去查找自己想要的信息，提高浏览效率，节约时间成本。6.从众心理推动转化当用户对某个商品犹豫不决、无法快速做出决定时，正处在转化的边缘，这时只需要一个“催化剂”，可利用从众心理推动用户转化。例如商品的销售量、收藏量、有多少用户正在下单...等，都会对当前用户的心理产生极大影响，很多时候，用户的想法和行为受到周围人的影响程度，往往超过理性的认知。三、不同场景下的使用方式在用户层面，标签提供的是内容的核心或特色关键词，能提升用户浏览效率，帮助其快速做出决策。站在设计角度，标签不仅能多样化的展示各种关键信息、提高视觉表现力，最主要的是能通过设计手段为业务赋能，促进产品、信息的转化。直白一点，产品经理说“需要重点突出功能的特色、卖点”、运营说“目前我们在做活动，要特别突出折扣优惠”、业务说“有很多用户不知道xxx，需要设计的最明显”......最后一致决定都很重要。相信绝大多数设计师都遇到过这种问题，怎么办？是直接拒绝还是等着各部门撕逼后给出一个确定的结果？其实面对上述情况，设计师的角色不要只停留在画界面上，应该站在用户的角度去分析，提这些需求的人到底想表达什么（表面上用视觉突出），能给用户带来什么，需要经过讨论，深度分析产品的真实需求、用户的痛点及诉求，从中找到一个最佳的平衡点，然后通过结论来确定设计的可行性、易用性以及视觉表现方式，不要忘了，设计的本质就是解决问题。最后你会发现，如有必要，将众多信息同时展示出来、而且还不可以影响其他信息的传达并非不可能，使用标签就是一个很不错的解决方式，下面让我们来一起来看看，不同类型的类产品标签在不同的场景下都有什么关联以及不同的使用特点。1.超链接标签这种类型的标签以#+文字形式的超链接为主，大多出现在文字内容较多的列表页面、详情页的开头或结尾，也可以理解大家常说的话题，它能让用户通过标签就能了解到这些内容的主题及核心，帮用户快速链接到与该内容相关联的信息。相信有一些设计师应该经历过这种情况，看新闻越看越感兴趣、刷抖音刷到停不下来、看旅游攻略根本不想睡觉…等，这都是源于系统背后的算法与自动推荐机制，产品的背后总有一双无形的大手在帮我们自动匹配。而＃+文字标签的出现只不过是将关联、或想推荐给我们的内容摆在的明面上（系统、用户推荐均可），把选择权交给了用户，即便用户没有点击标签，划走后或许还是逃不脱系统的算法推荐，可用户一旦主动点击，产品内容会更加匹配，用户的满意度就会更高。这样通过明（用户主动点击标签）、暗（系统算法推荐机制）的双刃剑，不仅能满足用户想浏览其他内容的潜在需求，也达到了产品相关联属性内容的引流。例如抖音将标签放在了标题后面，用户随时能知晓当前短视频的类型、属性等信息；小红书的文章详情页结尾也会有相关联的标签，用户可通过该标签快速跳到其他相似的内容列表，以便获取更多对自己有价值的信息。2.图片封面标签常用在带有封面图片的内容列表中，例如视频、音乐、电商类型的应用，在产品封面配上图标或文字小标签后，不仅让用户对信息有更快速的理解，还能丰富图片内容、让视觉表现更加生动。需要说明的是，因图片本身的色彩比较复杂，一定要注意标签的配色，标签既然作为辅助说明来传递信息，就需要有一定程度的突出，不然，一旦与图片该区域的色彩融合或严重冲突，就会给整个界面的美观度带来负面效果。这种类型的标签大多数只用于信息传递，并无对应的交互操作，分为动态和静态两种类型。腾讯视频列表封面的标签属于动态，也就是通过后台管理系统随时对内容进行调整，可能今天是A标签、明天就变成了B标签、或者什么都没有，标签的类型数量及样式会有一定的控制，针对分类、功能、权限类的标记非常实用。京东的商品封面则是静态标签，为了体现出其质量、折扣、品牌等信息，在处理图片之初就将标签融合，让其成为图片本身的一部分，不过会增加相应的制作成本。相比前者，静态标签的使用方式非常灵活且不受系统的控制，对用户的吸引力更强，对产品促销、提高转化率能起到很大的作用。

最真实的例子，当我们在某社交软件将头像设置成帅哥/美女，搭讪与被搭讪的概率会成倍提升，这也是为什么行骗的人总是会先设置一个美女头像（背后抠脚大汉）总能提高成功率的原因，头像的魔力可见一斑。不论是真实社交、虚拟网络，甚至跟社交毫不沾边，任何应用只要有用户的概念，就会有头像的存在，只不过产品头像权重、用户重视程度不同而已。在这个“看脸的时代”，跟陌生人搭讪的成本很高，第一步就用看头像来确定是否建立社交关系是最直接快速的方式。在UI设计中，95%以上的应用会涉及到头像元素，例如消息列表、个人中心/主页、会员服务、评价、排行榜等功能版块，明明用昵称或几个文字就能说清楚的地方，偏偏设计了一个头像、而且还占据该信息组的主视觉。那么，看起来简简单单、或方或圆的小头像到底还有哪些我们不知道的细节知识，今天笔者就通过这篇文章跟大家聊聊头像元素的方方面面，希望对大家有所帮助，欢迎共同探讨，相互交流。一、头像在UI界面中的作用1.多账号区分出于特殊原因，很多销售、客服等职业，在同一个应用中可能会存在多个账号，需要确认自己当前登录的是哪个账号时，查看头像就是最好的区分（需设置不同的头像）方式，当然也有一些非正常需要的用户有另外的小号，相信头像也会有所区别，其作用这里不便多说，避免「社死」。另外，如QQ登录、微信账号切换页面，也会利用突出的头像来快速区分账号信息。2.凸显自身形象某个用户使用了一张成熟稳重、端庄得体的形象照作为个人头像时，在大多数情况下，这个人一定不是个动不动就爆粗口的键盘侠或网络喷子，虽然“隔着屏幕你又打不到我”，但在发表内容时会注意自己的措辞，潜意识的维护自己的网络形象（头像），这就是现实与网络中头像的人格映射。当碰到匿名社交时，为自己戴上面具后就会变得肆无忌惮，与前者相比，至少不再那么约束。3.“面对面”沟通代表很多时候，不管是跟好友聊天、还是在不同的应用中留言评论，有头像的用户总感觉是在进行平等交流，这么说感觉很抽象，下面举个例子：如果是一个单身男性，当社交应用中有人加好友或请教问题时，针对有美女头像的用户，其响应效率、质量都会比其他头像的用户要高，这是不争的事实（别杠，我们不谈个例），这也说明自己时刻都在注意在对方心中的形象，总担心被对方看“穿”。二、各场景中的头像类型1.默认头像非强制登录的应用，切换到个人中心时，一般会有一个默认头像占位，可以是人物形象剪影或品牌吉祥物，以确保用户在登录之前保持页面的完整性。另外，即便用户登录后有上传自己的头像，但遇到网络延迟、头像加载失败、匿名操作等情况，系统默认头像都可起到临时替补的作用。常见的默认头像有灰色、彩色两种色彩模式，其二者各有利弊。1）灰色头像灰色头像色彩感较弱，可能会导致视觉不平衡，打破画面的美感，但也正好通过这一丝的不和谐，用一种明显且突兀的方式提醒用户去更换头像，强迫症患者几乎无法抵抗。2）彩色头像绝大多数是结合品牌色、吉祥物等进行展示，还能起到丰富画面、增加趣味性的作用，相比灰色头像则更加生动，不管用户是否登录、有无更换头像，都能保持界面的视觉平衡，唯一的缺点可能降低用户更换头像的欲望。2.系统推荐头像1）用户选择大家早期接触的QQ就是最典型的案例，系统提供了多种头像以供用户选择，甚至将部分头像纳入了QQ会员功能，当用户没有合适的图片作为头像且难以抉择时，使用系统推荐的头像不仅能降低用户的选择成本，还能满足部分个性化需求。如果默认头像跟产品相关联，也可作为品牌传播途径，两全其美的选择。另外，最近很火的匿名社交应用Soul

在UI设计中，无论从效率角度、还是视觉角度来讲，组件元素始终在界面中扮演着极其重要的角色，其作用主要是提升应用的可用性、易用性，以帮助用户轻松完成任务。选项看起来是一个很简单的组件，交互状态仅仅只是选中（填充）、未选中（描边）、不可选（置灰）三种，但在真正的设计过程中，比你想象的要难的多，其视觉样式、元素大小及选项数量都是至关重要的因素。一个好的选项从来都不缺乏细节，虽然看起来并不复杂，实际要考虑的因素非常多，因为这不仅关系着用户体验，还涉及一些界面交互逻辑的问题，需要结合不同的使用场景、合理的将各选项灵活运用到界面当中，这其中的细节不容忽视。本篇文章将围绕单选、复选、拨动开关三种选项元素的设计细节及使用场景展开分析，希望能帮助新手设计师避开选项设计的误区，为用户打造出更好的操作体验。一、单选：独一无二1.什么是单选？单选按钮最早来源于老式的汽车收音机上的电台频道的切换按键，按下其中的一个按键就成为了被选中状态，其他就会被弹出，用户可通过这种方式快速切换不同的电台。在UI设计中，单选是指当界面中存在两个或以上的选项时，且各项之间相互排斥，用户仅能在选项列表中选择其中的一个来使用，即便反复选择，最终的结果始终独一无二。单选框有选中、未选中两种状态（极少数不可选），主要通过填充和描边互换的样式将当前状态反馈给用户。单选是一种较为精简的模式，它至少包含两个选项，为了提升操作效率，需要尽可能的将所有选项展示给用户，无需多余的操作和思考，即能快速完成任务。如果是必填选项，最好提供一个与当前用户较匹配或选中率最大的一个选项作为默认值，即便默认值有误，对用户也不会有什么影响，因为用户本来就需要去操作，可一旦匹配到对应的用户，就能免去这一步的作，且默认值是经过多方面分析、反复推敲后才进行预设，只会是有益无害。2.单选组件样式1）按钮式按钮样式适合用在选项不多、文案不长的场景，可平铺在界面中或以弹窗的方式呈现。例如，购买衣服时，品牌、尺码、颜色都可以设计成按钮样式。2）圆形组合未选中都是浅灰色描边的圆形，选中后，Android常见的是描边变主色+内圆点填充，而iOS更多则是描边变填充+对勾图标组合。其实这些不重要，真的没必要纠结是用圆点组合还是对勾组合样式，只要在同一个产品中统一样式即可，用户不会因为这两种表现方式的不同而影响后续的操作。3）对钩对勾样式经常出现在弹窗列表选项中，只有选中后才会有“✔”标记，相比圆形组合，给用户的引导性更强。在单个任务中，首次进入选择页面时，列表中没有任何标记（有默认选项除外），选中条件后，标记对勾的同时，无需其他操作即自动进入下一步任务流程，再次回到选项列表时，系统会标记上次的选择作为参考。另外，这种样式不会太过于局限选项的数量和字数。4）选择器通常作为表单项以弹窗的形式出现，适合二级、三级联动选项。例如：选择地址（省/市/区）、日期（年/月/日）、时间（时/分/秒）等选项较多且具有关联性的选项组。3.单选的使用准则首先要确保单选组件的可用性，所有单选项需要清晰的呈现给用户，避免嵌套或隐藏二级单选，否则会影响结构的识别性。其次为确保可读性，单选组件的布局要符合用户认知。选项较少且标签较短时，使用多行多列的按钮式布局比较常见，例如电商APP的商品属性选择等；标签较长则使用圆形图标、对钩样式单列多行显示，例如选择退款原因；联动选项需根据关联的等级数量，在选择器中多列显示，例如三级联动地址，省、市、区三列并行。如果将选项毫无章法的平铺、标签/图标上下排布，会造成视觉动线混乱、内容紧凑及一些不可预知的问题出现。4.提供默认选项如果可以的话，尽量给用户提供一个默认选项，这并非随意设定，需要经过多方面分析综合决定。举个例子，你的产品属社交类型，大多数为男性用户，那么将男性设定为默认的性别选择，这类用户就可以直接跳过这一步，节约了大量用户的操作成本，即便面对的是女性用户，这也不影响原本就需要手动选择的步骤。默认选项需合理设定，切不可乱用，否则一些“偷懒”的用户并不会更换默认选项，导致后续数据分析的精准度。二、复选：循环往复1.什么是复选？复选操作不会像单选那样出现信息阻隔，也没有拨动开关那么强的视觉干扰，通常包含一个或多个选项供用户选择，其选项条件不是互斥的，用户可从中选择一项或者多项，具体情况则根据选项条件的限制而定。1）选择一项一些设计师将复选理解为多选，且先不论对错，笔者想说明的是，多选只不过是复选的一种选择方式。在真实的设计中，有很多场景是不设限的，我们可以将选中/未选中理解为“是/否、同意/不同意、开启/关闭……”等意思。例如，注册页面中必定存在的「用户服务协议」，单个选项可反复操作；管理系统或B端的批量操作、权限设置等，选择其中的一项也可进入下一步操作流程。2）选择多项强制多选一般会设定需选择数量的下限和上限。例如：首次进入某些APP时，需选择个性化定制标签，通常最少不低于3项，最多不超过6项；还有，在填写调查问卷的多项选择时，最少选中两项、不设上限等，这些就是复选中真正意义上的多选。2.复选的使用准则相比单选，复选需要配备提交按钮，提交后才会记录被选中的信息。对于批量性的选项操作，复选框的操作效率比拨动开关要高出许多，例如，在某些页面开启/关闭几个权限，每个权限用单独的拨动开关进行控制，完全没问题，但涉及到几十个权限的控制，这种批量操作使用复选框一定是最佳的选择，只要用户能清楚操作之后会发生什么即可。3.常见的使用场景1）标签选择个性化标签选择中最为常见，在标签文字、选项数量较少的情况下，使用外观大小完全相同的标签按钮多列显示，有助于用户浏览，还能节约页面纵向空间，用浅色描边/主色填充或明暗等级来区分选中/未选中状态，部分产品还会在选中的状态上增加一个小图标（✓、+/-），区分会更加明显。这种方式切记标签不能过长，否则可能会导致文字折行或容器内很拥挤，不利于用户阅读。2）列表选择当选项过多、标签长短不一时，适合使用列表式选择。WEB端常见的是圆角矩形勾选填充，例如管理系统的商品列表；移动端更多则是原型勾选填充，例如购物车，当然并没有明显的界定，所有页面统一样式即可。4.未定状态与单选视觉样式唯一不同的是多了一个未定状态。常见于管理系统或B端，当选项存在多个子级时，只是某些子级被选中，但并未全部选中，这时父级状态尚不确定，即为未定状态。三、拨动开关：白天与黑夜1.什么是拨动开关？拨动开关就像生活中控制灯泡的开关，它是在两个互斥的选项中始终存在默认值、且操作会立即生效的按钮，操作后必定是对立的选项，例如开启/关闭、是/否、同意/不同意等。2.拨动开关的使用准则拨动开关必须表意明确，用户在操作之前就能清楚操作后会发生什么，使用时，需遵循以下原则：用于操作后立即生效的场景；标签和按钮是两个分离的视觉焦点，当用户有可能产生疑惑、或标签不足以言明时，需增加辅助文字予以说明；主要用于控制全局，权重较高，针对单个任务流程的控制，请使用单选/复选；默认就是开启/关闭状态，若存在子级，父级关闭的同时将子级隐藏（避免置灰）；当操作有风险时，必须给予明确的提示；避免大面积使用，如果存在太多需要开启/关闭的条件，建议使用复选；3.背景与文案拨动开关的背景通常只介于两种状态，关闭状态下为置灰（全服通用），开启后为绿色，也有很多产品将其设定为品牌色，统一颜色样式即可。辅助文案常见有两种类型，第一种为当前状态反馈，例如：获取设备通知权限“消息推送已开启/关闭”，这种反馈在应用中可灵活运用，尤其是在关闭状态下，可起到一定的引导作用。第二种为标签辅助提示，例如：操作后的好处或风险，告知用户会发生什么，提前让用户有一定的心理预期。四、单选控件的纠葛1.单选框vs复选框是用单选框还是用复选框，似乎是最好界定的，笔者查阅了很多资料，得到的信息是“需选择一个选项用单选、多个选项用复选”，答案出奇的一致，这好像什么都说了（确实如此）、又好像什么都没说（是个设计师都懂），当我们仔细分析之会发现，并非仅仅如此。在PC端遇到两个对立的选项（如：是/否、同意/不同意、通过/不通过）时，除了用两个单选项之外，也可以使用复选框，尤其是在权限控制中，必定是复选。另外，移动端注册登录流程中，用户服务协议也是最具代表性的复选框（同意/不同意二选一）使用案例。除去这些特殊的使用场景，其他大部分就直接单选。2.单选框vs拨动开关仅存在两个选项时，单选与拨动开关的使用，有一些设计师就将其混淆了。笔者曾遇到过这样的设计案例，有产品将性别（男/女）、O2O取货方式（送货上门/到店自取）只有两个选项的任务用拨动开关来呈现，操作后，通过开关上的滑块左右移动+文案辅助来确定当前选中的条件。笔者认为，这种方式不可取，最大的弊端就是在当前状态下，用户并不知道另一个选项是什么，需要通过猜测或试错来确定，无疑让增加了任务的完成难度，也打破了用户对常用操作的固有认知。至于什么时候需要用拨动开关，上述3-2《拨动开关的使用准则》中有详细说明，除此之外使用单选框，能解决设计中80%的单选与拨动开关的选择性问题。3.单选框vs下拉列表选项较少可直接在当前页面用单选框（选择性别）、按钮（标签）呈现，当用户需要在大量的选项中进行选择时，PC端可使用下拉列表，移动端更多使用的是操作栏弹窗或跳转到新页面让用户操作。其实这方面没有明确的界限，需根据使用场景以及选项的属性根据实际情况灵活变动。五、必备常识和使用技巧1.选项的几种状态单选、复选、拨动开关各自都有不同的状态，在设计之前，设计师需要清楚地知道这些状态所代表的含义以及不同的使用场景，避免后续在使用中给用户造成困扰。2.符合用户认知的控件样式首先，选项框样式应符合用户认知，不能为了所谓的差异化、个性化打破用户固有认知，而带来额外的认知负担。例如单选/复选常见的是圆形填充+对钩（PC端）、圆角矩形填充+对钩（移动端）两种方式，虽然这并不是唯一，但至少不会出错。虽然鼓励跳出常规的设计思维做出改变，但一切都以不增加用户使用难度、提供更好的用户体验为出发点，不然还不如不变。3.注意对齐方式按钮式不用多说，文字跟容器上下左右居中。列表中的对齐方式无非两种，选项框在前，文字和选项框都是左对齐，单选/复选均可采用这种方式；选项框在后，则文字左对齐、选项框右对齐，采用这种方式的单选居多；拨动开关则是全网统一，标签左对齐，开/关右对齐。4.清晰简短的标签选项标签需清晰简短、直接表达核心含义，尽量避免否定的表达方式，以免用户产生误解。像拨动开关这种两极分化的选项，当用户不清楚对立的选项内容时，可以使用副标题进行描述，让用户在操作之前有一定的心理预期。5.批量选择、节约操作成本虽然都是将选择权交给用户，但面对不同的场景，需提供一个「全选」操作，帮助用户一次完成多个重复的操作，降低操作成本。例如：B端的内容管理，批量操作能节省很多时间，还能降低因多次重复操作产生的失误概率；C端最具代表性的有购物车、以及初次进入部分应用时的个性化标签选择。6.触控热区的设定针对移动端，点击区域切勿直接使用选项框的范围大小，需单独设定热区范围。大家都知道，大拇指在移动端应用中使用频率是最高的，相对来说，要有足够大（非绝对）的操作区域以供手指进行精准交互，以免无效操作或操作失误。需要将文本标签、选项框以及各选项区域均分后四周的留白都作为触动热区，操作起来就会轻松很多。六、结语本文笔者主要总结了单选、复选、拨动开关的使用规范及常见问题，不过设计规范只是基于产品本身构建的一个标准，为了约束后续的视觉统一而存在的规范参考。在真实的设计中，这些设计规范并不是唯一，需要根据产品的特点和使用场景进行灵活变动，设计出最适合自身产品的控件才是最重要的。遵循设计规范只是最基础的标准，遵循的同时跳出规范的束缚才会有创意，这就离不开我们平时的积累，钻研各产品中优秀的设计细节，通过查漏补缺、扬长避短，在其他产品的亮点中找到与自身产品的平衡点并将其融合，这才是我们学习和总结的最终目的。往期回顾：应用图标

如果说一个人的脸面、衣着打扮是给陌生人的第一印象，那么APP的应用图标风格与气质就是留给新用户的第一印象，关系着用户是否对这个APP感兴趣、是否会打开应用介绍、是否会点击下载按钮起着决定性的作用。一个好的应用图标有着无限可能，无形中对用户产生强大的吸引力，并有一种想要了解的冲动，况且图形本身就能让人充分发挥想象力，这就是为什么不管在哪个应用市场第一眼看到的是应用图标，而非应用名称。在一部手机就能解决很多问题的互联网时代，相信每个人都有下载几十上百个APP，琳琅满目的列表，应用图标是否能在第一时间抓住用户眼球（目标明确或铁粉除外）非常重要，一个视觉传达清晰且有吸引力的图标能提升用户点击率，即便用户只使用过一次，相对来说，印象也会更深刻。本文根据笔者对大量应用图标的分析、结合设计准则进行总结，希望能帮助大家在设计过程中规避掉一些常见的问题，欢迎一起探讨、取长补短、共同进步。分享目录一、四大设计原则二、色彩的表现形式三、主体图形分类四、背景图案及元素五、主体图形的表现手法六、应用图标设计流程七、总结一、四大设计原则应用图标代表产品的外在形象，设计的精美与否决定着用户的第一印象，是否产生打开的欲望跟当前图标的视觉所传达的内涵有最直接的关系。应用图标虽然不同于设计LOGO，表现方式也千变万化，但必定有自身的设计准则要去遵守，利用设计的手段将视觉传播的价值最大化。1.可识别性首先，应用图标需要尽量简约。过于复杂的图标会增加用户的理解成本、甚至误导用户，但如果过于追求简约，缺乏细节、个性化以及必要的隐喻信息，也会因过于单调，造成表意不明确等问题。简约并非简单，设计师需要通过专业的知识进行合理的简化，以提升应用图标的设计品质，方便用户在不同场景中都能清晰的辨认。其次，需表意明确、易于理解。应用图标代表的是产品的行业属性、功能作用或与众不同的优势，要让用户第一眼就能识别出所代表的含义，贴近用户的心理预期。简约易识别是应用图标必备的基础属性之一，这也是为什么大部分产品都将logo作为应用图标主视觉的原因，因为logo设计考虑到了方方面面以及后续延展的问题，即便有些logo较为复杂，也会通过提取局部元素、吉祥物、主体色等方式来强化应用图标属性，给用户形成独特的记忆，以提升应用的下载量和使用率。2.关联性应用图标应该与产品的属性、品牌有极强的关联性，通过品牌延展赋予产品更强的生命力，让用户从接触应用图标的第一眼开始、再到后面的使用，整个过程始终都能保持清晰且统一的品牌认知，通过和谐统一的视觉效果，带来更好的用户体验。应用图标需要与品牌之间必须保持高度的一致，着重从以下几点体现：1）LOGO毫无疑问，用品牌logo作为主体图形是最佳选择，结合品牌色搭配使用，能将产品核心理念、品牌形象的传播效果达到极致，在APP应用市场中，大家会发现大多数产品都在使用logo作为应用图标的主视觉图形。2）品牌色品牌色即主体色，将贯穿APP所有页面的元素组件。众所周知，每种颜色都有其特定的含义，能传递给用户不同的心理感受。用主体色作为应用图标的背景色，可以烘托出产品的情感氛围，并与进入应用后的主体色遥相呼应，以最小的视觉跳跃性将前后关联，强化用户对产品的记忆感知。3）IP/吉祥物吉祥物属于品牌logo延展的一部分，

“少即是多”是经常挂在嘴边的话题，在设计过程中，设计师们都会想尽一切办法去简化交互流程、组件元素及各种设计属性，让用户使用起来更简单。当产品简化到一定程度，就必须要面对其不可简化的复杂性。诺曼曾说过

下拉菜单是在界面设计中很常用的组件，它以下拉的方式同时展示多个标签并帮助用户缩小选择范围，快速满足用户的选择需求，尤其是一些导航，设计师会很依赖下拉菜单的使用。在UI设计中，虽然经常会使用到下拉菜单，但很多设计师对它并不是很了解，如果过度使用或滥用，也会对用户体验产生负面影响，所以，如何正确的使用下拉菜单就显得非常重要，设计师需要对它有一个更为全面的了解。那么，如何区分下拉菜单设计的是否合理？到底有哪些利弊？什么场景下需要使用下拉菜单，笔者将从什么是下拉菜单开始，对下拉菜单的构成、类型、使用场景及注意事项进行一步步梳理总结，希望本篇文章对大家有一定的帮助。一、基本介绍及结构梳理1

Spool在购物页面上写道「您无需注册即可在我们的网站进行购买，只需要点击继续按钮。为了方便您在网站的后续购买，您可以在完成付款流程后创建一个账号。」结果购买的客户数量增加了

标签栏是用户进入APP的第一触点，绝大多数以固定在设备底部的形式、让用户在应用中的不同模块之间快速切换。它作为移动应用中最常见的元素之一，是UI设计师们绕不开的课题。一个好的底部标签栏可传达出产品的核心功能、品牌形象及设计理念，还能用作判断应用是否精致的标准，用户可通过第一触点来感受这个APP是粗糙的还是精致的。所以看似简单，但要想设计出视觉美观、反馈清晰的底部标签栏，有很多值得我们深究的地方。那么标签栏为何存在？背后满足的需求和场景到底有哪些？能给产品、用户带来什么价值？本文将从很多优秀产品中，挖掘出值得学习和借鉴的设计亮点，对标签栏作出思考及分析，希望能帮到大家。一、了解标签栏1

表单是UI设计中很常见的元素，不管是PC端还是移动端，表单几乎是无法规避的UI控件，用户可以通过表单完成线上购物、信息交换、文章订阅等任务，使用范畴极为广泛且牵扯到方方面面。表单设计看似很简单、实则很容易忽略用户体验，作为设计师，需要根据触发条件、使用场景将各元素进行灵活的调整，才能确保用户顺畅的完成表单任务，因此，设计出一个可用性非常好的表单非常有必要。本文将针对表单的设计准则及用户体验进行了总结，希望能够帮到大家。一、认识表单1

产品经理：我觉得这里要加个弹窗，你去设计吧。设计师：emmm...。弹窗到底该不该加？怎么加？用什么形态展示？真正的作用是什么？这些真的是产品经理说了算吗？好的产品通常会在恰当的时间、合适的位置给出合理的反馈，弹窗也是必不可少的反馈方式，不反馈、反馈不及时或反馈不合理都会带来不好的使用体验，甚至误导用户，从而导致用户流失。很多时候，产品经理会从商业角度、公司业务、资源限制等方面考虑问题，但这些未必是用户所需要的，设计师不应该完全按照产品需求做设计，否则就成了只会照搬产品原型的“美工”。需要做的是从用户角度出发，把产品需求转化成设计目标，只有经过反复的推敲、认真分析，最终才能打磨出服务于用户的弹窗设计，所以弹窗该不该加、如何加就成了设计师不可推卸的责任和使命。本篇文章将围绕着弹窗类型、使用场景、转化率及常见问题为侧重点，将自己对弹窗的理解、设计经验分享给大家，帮助大家对弹窗组件有更清晰的认识，为后续避坑设计出更好的弹窗做准备。本期大纲一、弹窗的基本介绍二、弹窗体系分类三、弹窗的使用场景四、如何设计有效的弹窗五、需关注的问题点六、总结一、弹窗的基本介绍1

在UI设计中，配图的好坏将直接影响着界面的品质及用户的视觉体验。纵观如今高质量的界面设计，具有设计感的配图不仅是吸引用户的重要元素，能比原本平淡无奇的文字界面更让人产生点击欲望，还能体现出设计师的品味、以及相关方面的专业性。在这个快节奏的时代，相比文字，图像的传达效率会更快、更高、更有助于用户轻松理解及记忆。配图用的好，往往能起到决定画面基调、流程引导、视觉平衡等关键作用，所以，在同等样式的布局下，因图片的使用及处理方式的不同，界面的品质也会存在较大的差异。本篇文章将介绍一些在UI设计中配图的基础知识，帮助大家在图片列表、背景处理、图文混排、头图等相关界面设计无从下手时提供灵感，在选择图片、后续处理时如何做到有规律可循带来一些思路。一、了解UI设计中的图片1

做好图标设计是一个入门级UI设计师的必备技能之一，图标是界面中非常重要的组成部分，在实际的工作中，即便是一些工作多年且有一定经验的设计师，也很难保证自己设计的图标有多么完美。不同位置的图标在界面中所起到的作用不同、风格也不同、其设计思路更是有所区别，例如金刚区、分类、标签栏、服务工具等。用图标准确的表达出实际含义，仅仅学其「形」是不够的，需要对图标有较为全面、系统的认识，了解图标的相关概念、正确的绘制方法及处理好一系列的细节，本篇文章将介绍图标设计的具体方法及要点，帮你规避掉一些常见的问题，让图标设计有理有据。一、图标的定义1

说起按钮，很多做设计的小伙伴是熟悉的不能再熟悉了，它是我们在设计界面时最常用、最重要的组件之一，也仍易被忽略的元素之一，所以在设计之前，做好对按钮组件的认识、了解非常有必要。从我们有记忆认知开始，按钮就时刻在和我们打交道，墙上电灯开关、电视机的调节按钮、遥控器的按钮等等，这些物理按钮不仅仅是当下UI按钮组件的前身，且不会消失，依然会有很多非数字化的产品及机器设备在持续延用，不管如何演变，基本不会脱离实物参考。按钮最吸引我们的莫过于通过简单触摸就能轻松满足自己的行为需求，按钮设计的直观性及易用性会影响着人们完成一件事情的意愿及效率。在UI设计中，如何完美的避开问题、把按钮设计的更好，是每个设计师需要深思的问题。按钮设计的好坏，将直接关系着用户引流、触发行动、产品转化率等至关重要的问题。另外，精致的按钮也会让整个页面的视觉提升档次。本篇文章将对按钮作出解析，介绍在设计按钮时需要着重考虑的因素及设计标准，并将理论付诸于实践。一、按钮的作用1.

设计师最重要的是要跳出纯画图的桎梏，从设计表现的执行层面往后延展，扩宽自己的眼界，并非只停留在对原型稿的美化。在设计过程中需要思考自己的工作能给业务、公司带来多大的商业价值，站在业务和用户体验的角度思考，从产品的底层逻辑出发，去挖掘设计机会点，利用设计手段来助力、驱动业务的增长。用户想要的并没有那么复杂，设计师只需要在满足产品需求的情况下做一些细节的处理，这可能是一个功能流程的优化、符合用户预期的视觉表现、打动用户心理的感情牌、意想不到的惊喜、制造行为错觉、提前行为预判、迎合人性的弱点等，将用户转化的最后一道心理防线击溃。01.「微信」折叠置顶聊天-解决置顶太多的问题产品体验：当微信即时会话列表中的置顶聊天达到一定数量时，Tab栏上方会悬浮“折叠置顶聊天”提示，点击即可折叠，列表的最上方就会有折叠置顶聊天的显示，再次点击即可展开。设计思考：几乎每个人都有几个置顶的好友和群聊，可一旦置顶太多，就会导致其他未置顶的消息不能及时看到，毕竟设备可视化区域就那么一点，完全被置顶聊天覆盖，很是影响与其他人/群交流的正常使用。当我们因工作或其他交流需要，必须要置顶多个好友和群聊，但是又担心太占屏幕资源，微信最新推出的“折叠置顶聊天”就能派上用场了，这一简单的折叠/展开功能对普通用户来说是真香，再也不用担心被必须要置顶但又感觉太吵、定点查看的群聊，折叠起来即可，想想都很美好。微信这样做是对自身社交环境的逐步净化，留给用户更多自主选择的权利，进一步提升了用户体验。（PS：折叠置顶聊天虽然对普通用户很友好，但针对营销群来说，消息能触达给客户几率就会变得很小，商业化空间也会跟着逐步变小）02.「支付宝」搜索“我裂开了”-有一种想买保险的冲动产品体验：在支付宝搜索“我裂开了”，手机屏幕右下角会出现碎屏特效，如同屏幕真的裂开一样，随后关闭弹窗将停留在碎屏保险页面。设计思考：相信有不少伙伴或多或少的碰到过因手机不慎跌落导致碎屏的悲剧，去到手机维修店，随便都要几百元才能更换屏幕，鉴于此，支付宝也推出了手机碎屏保险，用户花几十元就能买个“放心”，防患于未然。支付宝最新版本再上“新活儿”，在原本已有手机碎屏险的基础上增加了一个动效彩蛋。搜索“我裂开了、碎屏保险...”等关键词，手机屏幕右下角会出现裂开特效，网友直呼：“这也太逼真了、真正体验了一把碎屏后的感觉”。碎屏特效不仅能提醒大家多关爱自己的手机，以减少因意外情况导致碎屏风险的情况发生，还猝不及防的为碎屏险做了一波宣传，让用户模拟碎屏后的感受提高重视程度，从而产生购买手机碎屏险的想法。03.「抖音」买过Ta的商品-加速用户再次下单产品体验：刷抖音过程中，如果刷到的视频是我们曾经下单过的商家，左下角名字上方会有“买过Ta的商品”的标签提示。设计思考：抖音的本质虽然是短视频，但最大的吸引点就是直播带货，很多明星、网红也纷纷加入直播带货大军。用户在刷抖音时，看到很多不是钢需但价格却很便宜的商品，基于付出较低金钱成本、感性消费的这类群体可能不等主播介绍完就毫不犹豫的下单了，如果服务好、产品满意，后续再次下单也绝不含糊。用户如果抖音刷到下过单的商家发布的视频，会有“买过Ta的商品”的提示，主要目的是当用户对商家的商品、服务较为满意且有后续下单需求时，就会产生一种依赖，另外，同一款商品也会有多个商家同时售卖，用户看到这个提示时，能快速回忆之前购物的实际情况，在满意度达标的驱使下，可能产生再次下单的欲望，甚至将本身就有后续下单的需求直接提前，提升了转化成功的概率。04.「支付宝」桌面小组件-不同操作习惯的用户相同对待产品体验：支付宝组件添加到iOS系统桌面后，长按组件可将功能入口根据用户习惯放置在左侧或右侧，方便即时操作。设计思考：“左撇子”最常见的一个行为就是和其他人部分日常操作行为相反，例如拿筷子、握笔写字的手等。使用移动设备的人群也是如此，当然这并不是异类，只不过是操作行为习惯不同而已。在用户体验方面，左手拿手机的用户认为操作入口在左侧方便，而右手拿手机的则认为入口在右侧更便捷，其实这并没有一个明确的说法。作为设计师，当我们在纠结于入口是放在左边、还是右边时，支付宝添加到桌面的组件则做出了左与右的妥协（不是放中间），让用户根据习惯偏好设置，自行选择组件入口的位置靠屏幕左侧或者右侧，给左右手操作习惯不同的用户提供了极大的方便。05.「抖音」巧妙的广告插入-与第一个视频无缝衔接产品体验：打开抖音，启动页后面的广告会与进入APP之后的首个视频完美融合，无任何割裂感，给用户造成一种本身就是短视频的错觉。设计思考：平时，我们在各种APP中，总是被突如其来的广告所打扰，但它作为产品盈利的一个重要渠道，投放广告则是必然，虽然对用户造成的影响不可避免，但适时、适量且合理的投放能有效降低对用户的影响。在抖音启动页之后的广告使用了较为巧妙的方式，用户进入该APP时，广告在持续几秒钟之后，会与正式进入之后的第一个视频无缝衔接，给用户造成一种正在播放的错觉，相比直接穿插的闪屏或广告，则减少了用户潜在视线的转移，同时也减少了对其感官体验的影响，提升了用户对广告的接受程度。06.「夸克浏览器」行为预判-减少用户操作步骤产品体验：在夸克浏览器输入框中输入“某某城市+天气”关键词，上方会以卡片的方式出现关键词地区最近一周的天气。设计思考：能够在互联网产品中快速找到自己所需，最便捷的方式应该就是搜索了，输入关键词、一键出结果，即便存在多个不同的需求，反复操作即可满足。站在设计师的角度，若能通过行为预判“举一反三”，提前预知用户需求并呈现结果，恰好解决了用户需求时，用户满意度就能得到大幅度的提升。在夸克浏览器搜索某地天气时，系统会临时展示该地区一周的基本天气，该方式在不影响用户正常操作及使用的前提下，通过行为预判提前展示结果，帮助有实际需求的用户更快触达。另外，产品不应该仅凭用户通过自己的眼睛去寻找自己所需，且用户在使用浏览器时可能存在多个需求，及时反馈结果能减少操作，例如：用户未点击搜索按钮就已知晓结果则可快速转移至下一搜索目标，避免经过结果页后再次进入输入框搜索的多余步骤，为使用体验增添很多便利。07.「微博」信息备注-拒绝只做标题党产品体验：从微博的发现页进入热搜榜单，标题内容如果不是真实事件，会在后面做信息备注，如综艺、剧集...等，拒绝只做标题党。设计思考：任何内容，有一个好的标题就等同于有一张好看的脸，不管内在如何，但一定有着“致命”的吸引力；其次，好的标题相当于给给内容镀了一层金，总是感觉特别晃眼，不由自主的想去点一下，由此可见标题的重要性。或许大家有个这样的经历，对于自己的偶像、明星，但凡TA的感情、生活有一点风吹草动，就会迫不及待的要查探一番，结果看了个寂寞，原来这只不过是某个综艺、电影中的故事情节，看完之后总有种被标题党所“骗”的感觉。其实，碰到过的只是冰山一角，作为网络推广必杀技之一，你永远想不到标题党到底有多么的猖獗，久而久之，用户被“骗”的次数越来越多，信任度就会逐渐下降，最终殃及整个平台。微博的热搜榜单内容，如果不是现实世界中的真实事件，在标题后方都作了来源标记，避免那些为了推广的作者大放厥词，一本正经的“胡说八道”，无良骗取用户的点击量而引起用户的反感，最终由平台来背锅。简单的标记提醒，能给用户关联出更真实的内容，方便用户根据标题快速判断出对内容是否感兴趣，合理选择预览，避免用户被“骗”引起反感而导致用户流失。08.「快手」人性化的提示-危险！危险！危险！产品体验：在抖音中，类似幅度较大且危险的动作短视频，顶部会有“专业动作，请勿轻易模仿”的提示，避免用户模仿。设计思考：“术业有专攻”，站在自己的角度，有时候看着别人很轻易的达到自己想要的结果，总是感觉很简单、容易，但你永远想不到别人在背后到底付出了什么样努力和艰辛，并非轻易模仿就能达到的效果。在抖音刷到较为危险的动作视频时，顶部会出现温馨提示“专业动作，请勿轻易模仿”。我们都知道，对于那些具有一定危险性的动作，一方面出于长期的训练做到对动作的精准把控，另一方面也有一定的防护措施，其安全预防自然高于常人。顶部简单的文字提示，有效避免一些“铁憨憨”用户出于好奇，在不知深浅的情况下真的去模仿，给自身带来安全隐患，出于对用户安全方面的考虑，这个提示十分友好贴心。09.「iPhone」锁屏长按触发-降低误触的可能性产品体验：iPhone设备在锁屏的情况下，为避免用户误触，底部的手电筒、相机入口需要长按方可开启/进入对应的功能。设计思考：“你手电筒怎么是开着的”，听到别人这样提醒自己时，多少都有些莫名其妙，看了下自己的手机......。其实这种情况再常见不过了，手机揣在口袋，总是会因为晃动、摩擦而长时间开着某些功能，超级耗电的原因也许就在这里。iPhone为预防用户经常误触设备按钮，将锁屏后的手电筒、相机功能入口设计为长按触发，虽然不能完全避免，但却成倍的增加了误触设备的难度。当用户将iPhone放在入口袋，系统将可能存在的误触行为发生之前加以制止，避免出现设备电量资源无端的损耗以及造成的不必要的打扰，增加产品的容错性，定能赢得更多用户的信任与认可。10.「知乎」摇一摇-更快触达反馈入口产品体验：进入知乎APP摇一摇，会出现反馈弹窗，用户可通过快捷入口进入，将遇到的问题或建议反复给平台，还可点击左上角“不再显示”，关闭摇一摇反馈功能。设计思考：产品在不断优化及更新迭代的过程中，一部分的需求就来自用户反馈，用户的反馈与建议固然重要，但也不可能在应用的首页就增设一个反馈入口。大部分应用都将反馈入口放在设置功能（二/三及页面）中，因为入口层级太深、路径较长，以至于用户即便有千言万语，也可能会因为找不到反馈功能而失去信心，放弃了宝贵意见的反馈，产品也无法更真实的触达用户诉求，了解不到用户流失的真正原因。进入知乎APP后摇一摇，系统会以弹窗的形式提供反馈入口，避免用户有真正反馈需求时因找不到入口而放弃。虽然摇一摇是隐藏性质的，用特定的交互手势方可触发且没有明确的提示，用户需要在无意中才能发现，但这却增加了一种送达用户的途径，提升反馈入口被用户发现的几率。另外，基于人性化考虑，若用户感觉摇一摇呼出弹窗会影响正常使用，点击左上角的“不再展示”关闭即可。11.「小红书」减少步骤-提升产品的易用性

设计不是拼图，深入下去，有很多细节需要推敲，而这些细节的背后的逻辑与意义更值得关注。产品主要强调的是与人的交互，用户通过对产品的操作来实现自身的目的，比如双击，滑动，常按等，而操作一般建立在产品的功能基础上，产品的功能细节体现在产品的业务逻辑中，产品所提供的功能是否更好的满足用户的需求，操作细节与功能细节密不可分，功能影响着用户的操作，而操作细节更多体现在用户的感受。01.「顺丰速运」收寄影响汇总-实时更新受疫情影响派件的地区产品体验：打开顺丰速运小程序的寄件咨询，可在“收寄影响汇总”中实时查询受特殊环境影响、暂停收寄件的地区。设计思考：在这个飞速发展的时代，任何事物所遵循一直不变的原则就是“一直在变”。就拿寄快递来说，在我们的印象中，受潜在意识及惯性思维的驱使，感觉只要寄出物品，就没有到达不了的地方，但在当下疫情肆虐的大环境下，现实告诉我们，任何地方都有可能送达不了，不要等快件卡在半路才知道收件地址被“禁”了。顺丰速运最近上线了“收寄影响汇总”功能，方便用户在寄件之前就能知晓收件地址是否在可配送范围之内，防止寄出之后对方无法收件，特别是保质期较短（生鲜、食物）的物品，避免因快件滞留给自己带来不必要的损失。“收寄影响汇总”功能需要用户寄件（盈利）的同时又能兼顾到现实环境的影响、并在用户有需要时及时反馈，不得不说是一个非常好的功能，通过“服务至上”的考量给予用户更好的体验，定能收获更广泛的用户群体也能让产品获得更多的认可与信任。02.「Keep」跑步-提供动力的多目标设计产品体验：使用Keep跑步，可以用距离、时长、热量、配速设定目标，作为自己跑步坚持下去的动力和精神支柱。设计思考：大佬王建林曾说“给自己定一个小目标，比如先赚他一个亿”，emm......扯远了。我们做任何事情，都会先定下一个目标，不管多大，它都将是自己坚持下去的动力和努力想要达到的，很多时候，一旦达到目标而没有及时进阶目标、或者根本没有目标，就会安于现状，甚至逐渐颓废走下坡路。其实跑步也不例外，坚持下去需要极强的耐力及自律，可人的惰性是天生的，没有人敢说跑步会比吹着空调、磕着瓜子、刷着抖音舒服，但依然有人能坚持下去，这始终离不开自己坚定不移的目标。使用keep跑步，可根据自己的习惯在跑步之前给自己定下时间、距离等目标，有效避免半途而废，通过具体的计划比如3km、30分钟等，让自己更容易坚持下来，如果单凭三分钟热度或毫无标的运动，注定刚开始就要时刻面临结束的下场。Keep的多种类目标设计可满足不同类型的用户群体选择适合自己的类型，同时也提供了能让自己坚持下去的动力（跑步频繁看手机就是最好的证明）源泉，将自己的想法变成目标任务，一旦完成，也会有一定成就感，为自律增添一份定力。03.「腾讯视频」自制GIF-免去借助第三方应用的步骤产品体验：在腾讯视频的全屏播放页面，选择好自己想要截取的位置，可通过右侧的“摄像机”图标进入生成GIF图片。设计思考：平时大家在看视频的时候，发现搞笑或煽情的片段就想截图分享给他人，但图片始终不如动图生动自然，如果想截取片段制作动图，还得先录制好、再借助第三方应用生成GIF图片，很不方便。使用腾讯视频看片时，如想截取部分片段（GIF）则无需这么麻烦，只需在横屏观看时从右侧的入口进入，自行录制片段制作GIF，最长不超过10s，便于用户随时以动态的形式分享，免去了第三方应用的介入，省时省力。04.「QQ音乐」设置循环次数-不要让单曲循环毁了一首歌产品体验：在QQ音乐的播放界面，播放模式为单曲循环状态下，长按播放模式按钮，可在弹窗中设置循环次数。设计思考：喜欢单曲循环听歌的人最容易陷入歌曲或自己背后的故事之中，认真去听每一个细节，用来记录真情实感，对自己来说也是一件比较浪漫的事情，但如果过分的对一首歌单曲循环，也可称得上成功毁掉一首歌系列。QQ音乐最近上线了设置单曲循环次数功能，长按播放界面的播放模式图标即可。很多时候，我们听到喜欢的歌曲总是会忍不住多听几遍，但一直听下去难免会有些枯燥，这时只需根据自己的喜好设置循环播放次数，最多不超过20次，既可以满足自己当时的心理需求，也能避免因长时间陷入异常心情的环境中无法自拔，给自己、歌曲带来很大的“创伤”。05.「腾讯视频」毫无违和感的中途广告-不打断用户产品体验：使用腾讯视频看片，当相关台词出现时，跟台词相关联的广告会从左下角无缝插入，与剧情毫无违和感。设计思考：大家似乎已经习惯了所有视频类应用的片头广告，这也成了所有用户的潜在意识，但为什么非常痛恨视频中间直接插播的广告呢，很明显，片头广告具有确定性且用户有心理准备，易于接受，但在视频中间插播的广告显得太过于突然、甚至直接打断用户沉浸式的体验，显然没有做好准备“迎接”，以至于遭到用户的吐槽、反感，甚至厌恶。腾讯视频在影片播放中插入广告时则换了一个思维，当与广告相关联的特定台词出现，该广告毫无违和感出现在屏幕左下角，相比中途直接插播广告更为巧妙、更加友好，既不打断用户观看，似乎还透漏着小幽默，用户更易于接受，如感兴趣直接点击进入转化流程，无需要则直接略过，也将对看片时的影响程度降到最低。虽然用这种方式插入的广告其点击、转化率都没有中途直接插播的高，但却能找到更多的机会点，以量多来弥补点击、转化率的不足，也不失为一种好的策略。（PS：自古以来，产品若想盈利，那么与用户一定是对立，既不能为了满足用户需求无下限的给用户提供便利，也不能为了达到产品的目的过分的剥削用户，我们需要在中间找到一个平衡点，在满足产品需求的同时也要满足用户诉求，可用设计的手段将双方的损失降到最低，以达到共赢的效果）06.「爱奇艺」空间音频-手机看片

作为设计师，在拿到产品需求的时候，所要做的不仅仅是完成产品的设计工作，更重要的是要思考如何通过设计的的手段去推动产品背后的商业价值达到最大化，提升视觉体验、增强用户的粘性以达到用户转化的目的。不需要我们设计的有多么复杂，可能是一个步骤的简化、一句打动人心的文案、贴心的提示、趣味的动效...01.「Keep」自动暂停-减少操作次数

作为设计师，在拿到产品需求的时候，所要做的不仅仅是完成产品的设计工作，更重要的是要思考如何通过设计的的手段去推动产品背后的商业价值达到最大化，提升视觉体验、增强用户的粘性以达到用户转化的目的。不需要我们设计的有多么复杂，可能是一个步骤的简化、一句打动人心的文案、贴心的提示、趣味的动效...01.「抖音」连续使用时间过长-官方的温馨提示产品体验：连续刷抖音超过1个小时，会刷到抖音官方的温馨提示视频，提醒用户连续使用时间过长，注意护眼。设计思考：抖音本身的内容以轻松、搞笑为主，符合社会压力大、需要快速放松、消遣的现代人，短短几分钟的时间，连跟朋友在微信上聊天都不够。但是，在强大的运营团队以专业的消费心理学作为支撑，以各种组织行为学、认知神经科学等原理下设计出来的短视频，如果自控力稍差，就会成为自己精神世界的“鸦片”，沉迷在其中而早已忘记时间的流逝。连续刷抖音1小时，会出现官方的温馨提示视频，提醒用户注意护眼，充分考虑到用户的身心健康，以情感化的方式引起警觉，即便户不会立即放下手机，但可能会通过清楚的时间观念及自身健康从而进行节制，几秒钟的视频提醒，足以体现出产品对用户的关爱，是一个很暖心的设计。（PS：这种提示就类似“吸烟有害健康、游戏防沉迷提醒......”，表面上看是在驱离用户，实则跟用户之间建起了一座相互信任的桥梁，以提升用户后续的使用粘性）02.「淘宝」取件码-让取件变的更高效产品体验：在淘宝待收货订单列表，如果该订单已完成物流服务，系统为方便用户浏览，单个订单的下方会显示取件码，用户再也不用进入到物流详情页去查看取件码了。设计思考：平时，我们在淘宝所买的商品多件一起送达时，会非常兴奋的去快递站点，从订单列表一个一个的进入物流详情查看取件码以备取件，乍一看似乎没什么毛病。既然应用已经从第三方公司接入物流轨迹信息，为什么不能更合理的加以运用，给用户带来更大便利呢？在淘宝购买的商品如果快递已送达，订单列表即会显示取件码，共有多少包裹待取一目了然，且不用进入物流详情页查看，在列表上下滑动就能看到多个取件码信息。淘宝将快递包裹的取件码单独提取出来并置于订单列表，将操作流程进行简化，让取件过程变的更高效，通过去除不必要的操作减少用户在出示取件码时的打断，在很大程度上提升用户操作及取件效率，更快速的满足了用户需求。03.「微信」手机充值-确保财产安全的额外提醒产品体验：在微信使用手机充值时，如果输入的号码不在通讯录中，号码的下发会有很明显的提示，点击充值，选择面额进入下一步后，还会有弹窗提示用户二次确认。设计思考：大家平时用微信进行手机充值时，基本都是给自己或者亲人充值，那么这部分人的手机号码绝大部分在手机通讯录中，除非自己记忆力超好，能全背下来，否则还是会老老实实的添加到电话簿。几年前，本人曾经遇到过这种情况，手机突然收到充值成功100块的短信息，间隔不到30秒，再次收到相同信息，查询话费后激动的不行，确实多了200块，然而两分钟后，充值的花费突然被扣除，毫无疑问，是别人充错找回了。用微信手机充值时，输入的号码如果不在通讯录中，会有特别的提醒，方便因手滑输错手机号码的用户及时更正，避免造成经济损失，即便充错后可以通过客服找回，但必定会花费额外的时间和不必要的麻烦。不管做什么事，都不存在万无一失，微信的及时纠错提醒能有效提升用户的财产安全系数，让用户对产品更加信任。04.「Keep」长按结束-提高产品的容错性产品体验：使用Keep跑步时，界面的操作按钮都是单击有效，唯独结束按钮需要长按3秒才能起作用，目的是为了防止用户在跑步过程中失误操作。设计思考：我们在使用线上应用跑步时，都会习惯性让应用一直处在打开状态，时不时的还会看一下持续跑步时时间和累计距离，也许在定下目标后，这些数据就是决定自己坚持下去的动力。跑步过程中，在界面上有操作需求时，因用户的注意力不集中，触控的精准度也就不高，操作失误是很常见的事情，如果是无关紧要的误触就没关系，通过其他操作恢复即可，但误触到了停止按钮后，一旦结束本次跑步，自己坚持下去的动力极有可能会被终结。在Keep的跑步页面，如果不小心误触到停止按钮也不用担心，用户必须要长按停止按钮3秒才能结束跑步，系统主要考虑到在跑步过程中主要的精力及思维都集中在运动上面，操作的精准度就不高，将按钮设定为长按能避免用户在非主观意识的情况下误触导致跑步提前结束，从而失去坚持下去的动力。一个好的产品除了要降低用户出错的概率，同时还还要承担其出错之后的后果，将用户的损失降到最低，因为产品无法控制或去避免用户出错，Keep的长按结束按钮就规避了用户误触之后可能带来的损失，提升产品的容错性，增加用户对产品的信任度。05.「微信」消息提醒-到期之前及时获知待办事项产品体验：在微信对话框中，长按消息从小窗中进入“提醒”功能，可根据自己的需要选择此条消息的设置时间提醒，到期前，公众号“服务通知”即会弹出提醒的消息。设计思考：“明天下午3点给我打个电话，我不方便打给你”、“好的”。收到这条微信消息时，默默的记了很多遍，自我感觉一定会记得。到了第二天晚上，卧槽......忘记了。其实，上面的这种场景很多小伙伴都碰到过，尤其是每天被工作、生活的各种琐事充斥着大脑，哪里每次都能清楚记得别人用微信给我发过什么呢。微信的消息提醒功能可以很好的解决这个痛点，当用户收到好友发来具有时效性的待办微信消息时，不妨设置一个消息提醒，在即将到期时间就可以收到公众号的消息推送通知，帮助用户在消息到期之前获取记忆并及时处理，有效避免被忘记的可能。06.「饿了么」订单备注-直观高效的历史记录产品体验：在饿了么下单备注时，最近输入过的订单备注信息会显示在下方，跟系统的快捷输入叠加在一起，也可以对历史（非系统）记录进行删减。设计思考：长期点外卖的用户，如果经常使用备注功能，那么基本都是一些常见的信息，比如是否加辣、餐具份数、送餐地点等，虽然只是简单的几个字，但每次下单基本不会忘记，也不会耽误多少时间。在饿了么的订单备注中，最近输入过的备注历史记录都会显示在下方的快捷输入区域，虽然只是简单的几个字或一句话，但对于惯性（每次备注基本一样）输入的用户非常实用，点击一键完成，省去了用户每次下单都要重新码字的步骤，节省时间成本，在进行备注操作时更直观高效。07.「抖音」搜索乱码-你是否能承受冷嘲热讽？产品体验：在抖音APP搜索框输入一串乱码，呈现的搜索结果为儿童作品，比如DIY、玩具、插画、各种模型等。设计思考：在应用中，除了进行过特定的操作外，使用搜索功能是用户找出自己想要内容的最快途径，即便系统无法匹配出想要的结果，但会对关键词进行自动纠正或者呈现出相似的内容，总之，尽量将用户失望的情绪降到最低。最近在体验抖音搜索功能时有被惊到，在输入一连串的乱码后，结果都是儿童作品，类似手办、玩具、游戏等之类的视频，虽然呈现的搜索结果从表面上看跟关键词毫无关联，但并未感觉到有什么不妥，在自嘲的一笑之后，似乎冥冥之中感觉到理该如此，毕竟在搜索框胡乱输入一通，如果不是“碰瓷”的话，这种事情也只有小孩子才能干得出来.......emmm。08.「哔哩哔哩」占位符-友好的提示促进友好的交流产品体验：哔哩哔哩的弹幕和评论框的占位符，描述中都插入了“友善”一词，用以提醒用户友好交流，共同维护网络文明。设计思考：对于网络评论区的乱象用“混乱不堪”来形容再合适不过，一些低俗、恶趣味、恶意中伤、假人设、无原则的秀下限等，将人类最丑陋、恶心的嘴脸体现的淋漓尽致。虽然，每个人的文化、性格、经历都有所不同，对于一些事物的认知存在部分差异，出现观念上的分歧及碰撞在所难免，但这并不能成为披上一张不为人知的皮就开始毫无道德的恶意中伤、在扭曲观点的过程中获取征服快感的理由，不管是恶性循环、还是良性循环，都将对用户和应用产生不同程度的正负影响。哔哩哔哩在评论/弹幕输入框占位符的提示中，都插入了“友善”二字，提醒用户文明发言和交流，希望通过明显的提示唤醒一小部分扭曲心理的键盘侠的良知，共同维护网络文明、素质交流，降低用户之间、以及对产品的恶意伤害。很多时候，即便每个人似乎都有着铿锵的理由试图去说服对方，从而陷入无法调节的漩涡，但可以选择理性的思考文明交流，给对方一份尊重，在良性循环的作用下相互让步并及早终止无休止的争论，以至于不会让自己过于不痛快，也能还网络一片“净土”。09.「微信」模糊一下-让状态背景更柔和产品体验：在微信设置状态时选择图片作为背景后，勾选“模糊一下”，系统即可进行模糊，让图片细节不再那么吸引眼球，凸显文字内容。设计思考：微信的状态自上线以后一直不温不火，听见最多的理由是有效期只有24小时，这主要是源于产品团队设计背后的思考。比如，设置一个不开心的状态，一天后自动消失，也许产品是让你每天换一个心情，不要总是不开心。设置状态后，选择图片作为背景时，可根据个人喜好勾选左下方的“模糊一下”，即可对图片自动模糊，类似毛玻璃效果，让图片上方的文字更加突出，在视觉上可以更好的建立界面的深度和层次感，不想图片表现的过于清晰且喜欢界面柔和感的用户不妨试一试吧！10.「全民K歌」离线K歌-兼顾无网络场景下的用户体验产品体验：进入全民K歌，在没有网络的状态下，如果是之前缓存过的歌曲，依然可以正常使用k歌及部分无需联网的功能。设计思考：在互联网发达的今天，很多事情都可以在手机APP中解决，但这还有一个不可或缺的助力就是网络（信号）。虽然网络发展迅速且全面覆盖，但权利掌握在三大liumang手中，尤其是5G到来，并不是每个伙伴的网速都变快了，继续用4G的你，在以前有信号的某个角落、网络能用但不是很流畅的那条地铁，现在还有网络吗？甚至在网络正常的情况下，下载速度也大不如前。虽然这些种种问题不是某个APP能解决的，但是在考虑到用户体验时，需要尽可能的提供给用户使用不受网络限制的一些功能。全民K歌在无网络的环境下使用，以前缓存过的歌曲依然可以正常K歌，虽然很片面，但相比完全无法使用的APP则给了用户更多的期望，且该产品主打的就是K歌功能。离线k歌对用户来说，避免了在特殊场景中被拒之门外、导致对产品信任度降低的情况；对产品来说，有效减缓用户活跃度以及使用频率的降低速度，兼顾了用户在特殊场景对产品使用体验的关照，让产品获得更多的认可与信任。11.「今日头条」个性化推荐-把选择权交给用户产品体验：在今日头条的隐私-个性化设置中，根据自己的喜好设置系统的推荐内容，避免每次进入都是千篇一律。设计思考：在智能跟踪及算法的运作下，用户的线上行为始终被应用给拿捏的死死的，但太过于智能并非是一件好事，最尴尬的莫过于在电商平台搜索了一件xiuxiu的商品，以后铺天盖地推荐的全是这些东东。本人亲测，买过一件衣服后，还会经常看见同款，“大哥”，给我推荐相同风格、颜色或同款搭配不好吗，一摸一样的是几个意思，我又不是来进货的，这就有点推销的味道，用户买了一件后就被抓住不放还疯狂推荐。一个正常人如果买了一个冰箱，系统还推荐不同款式的冰箱并觉得还可能会买，不是你有bing就是我脑袋有bao。所谓智能推荐，就是在很多时候能正确把控用户心中所想，提前作出行为预判为用户提供便利超出用户的预期，强人所难只会适得其反，如无把握，还不如把选择权交给用户。今日头条APP将推荐内容的选择权交给了用户，用户可在隐私功能中选择是否根据位置、搜索记录、关注内容等进行个性化设置推荐，避免单一途径或系统自认为不错的内容推荐导致用户产生反感。用户拥有选择权，则有了一种掌控感，即便推荐的内容让用户不如意，但不会立即将矛头指向应用，毕竟这是自己的选择。12.「即刻」“果果”-表达产品团队的关爱之意产品体验：在即刻APP的搜索框输入“果果”搜索，除了匹配出对应的结果之外，还有满屏的爱心飘落。设计思考：很多APP在搜索功能中隐藏了彩蛋，需要输入特定的关键词才能触发，给予用户意外惊喜，每一个彩蛋都有它本身存在的意义，可能是个梗，也可能是一种纪念或祝福。在即刻APP输入“果果”关键词搜索，会触发“爱心”彩蛋，这主要源自于即刻团队养的的一只名叫“果果”的猫，大家都明白，养宠物需要较强的耐心并付出很多关爱，但这跟应用好像没有什么关联，“爱心”彩蛋的设计，产品团队除了在线上的虚拟世界纪念现实中的“果果”之外，更大可能是向用户传达即刻产品团队（像对宠物一样）的爱心，利用情感化的设计引起用户共鸣，让视觉效果变的有趣又有温度。13.「iPhone」勿扰模式-应对不同场景的小妙招产品体验：调出iPhone手机的控制中心，长按勿扰模式按钮，可快捷选择一个关闭勿扰模式的条件，非常方便实用。设计思考：勿扰模式，顾名思义，就是避免在不方便的时候受到打扰，提前在系统设置中设定好各种条件，需要时开启，不需要时关闭，仅此而已。但总有很多时候，开启勿扰模式后忘了去关闭，或者自动关闭的时间总是阴差阳错，让自己处在很尴尬的境地。iPhone手机的勿扰模式除了应有的功能设置外，呼出控制中心，长按勿扰模式入口，会弹出多个自动关闭勿扰模式的条件用以应对不同的场景，比如开会一小时，可选择“1小时”或“直到我离开此位置”，避免每次因使用场景不同都要去设置不同时间段的麻烦操作，尤其在特殊场景能节省很多时间。很多时候，产品不光要满足了用户的基本需求，还应在基础之上给用户提供更多的便利，例如“勿扰模式”按钮，不仅仅只是一个开关。14.「Keep」数据收集-避免下次出现同样的问题产品体验：使用Keep线上健身，如果课程没有完成中途退出，系统会提供退出原因让用户选择性反馈，作为后期优化更新、满足用户需求、提升体验的重要依据。设计思考：任何一个产品都不可能做到让所有用户满意，首先是满足最主流的用户群体，然后不断优化更新在不影响老用户的情况下满足另外一部分新用户。产品优化更新的需求有一大部分来自用户反馈，反馈的内容有积极的一面，也会有消极的一面，产品团队需要做的就是综合正反两方面的信息来改进产品和使用体验。使用Keep在健身过程中，如果用户中途退出，系统会弹出最常见的退出原因供用户反馈，虽然对当前的用户体验没有益处甚至是减分，但反馈结果对产品未来的更新迭代、改善用户体验和整体满意度非常重要。例如，很多用户反馈锻炼动作“太难”，系统可以通过降低动作难度，在下次更新上线后给用户带来更满意的使用体验；如果一小部分用户反馈“太容易”，系统就会去分析用户的基本属性，针对性的对这类用户个性化的推荐难度较高的运动课程。用户反馈能有效解决因产品存在的问题导致用户退出的痛点，有助于提高用户忠诚度，减少用户流失。15.「高德地图」添加途经点-多个位置

我们在体验优秀的产品时，很多看似简单是设计往往会隐藏着很多细节，大到功能流程、小到文案或按钮，这种观察力来自于平时的多看、多练、多思考，很多小技巧能够恰到好处地提升界面的设计视觉效果和使用体验。设计师都明白，确定用户转化的关键不是产品本身，而是用户的主观心理感受。在设计一个高效且美观的UI界面时，不仅要要将需求转化为解决方案、把各个功能细节表述清楚，还应站在业务的角度考虑如何用设计手段提升产品的转化率和数据的提升，通过深入挖掘用户习惯，解决可能碰到的一系列问题，减少用户在使用中的困惑及提高愉悦程度。01.「微信」来电通知-个性化的铃声设置产品体验：在微信我的-设置-新消息通知-来点铃声页面即可更换系统提供的铃声/歌曲，还可以为单个好友单独设置。最让人兴奋的是，在设定好铃声后，还能开启对方也能听到我为TA设置的专属铃声。设计思考：你想换微信的来电铃声吗？想，比换电话铃声还想。为什么？因为不用看手机就知道是谁发来的，可以提前编理由或者决定是不是方便接，......斜眼笑。不不不，开个玩笑哈，主要是上次和一群朋友聚餐时，不知谁的微信来电铃声响起，大家都习惯性的掏出了自己的手机。将微信升级到最新版本，语音和视频通话来电铃声都可以更换了，除了8种铃声外，还有QQ音乐、视频号里的音频内容作为海量的音乐素材库，用户可以随意搜索设置自己心仪的来电铃声。勾选“朋友呼叫我时可听到我的来电铃声”选项，呼叫的朋友也能同步欣赏，这不由的让人想起了郭德纲的“爸爸接电话了”的铃声，不信你就试试。更换微信来电铃声不仅能满足用户区分好友身份、恶作剧、小心思等需求外，还能避免在人群较多的场合，铃声一响，在场很多人都掏出手机的“窘境”。02.「网易云音乐」点赞图标-“热评”谐音梗产品体验：在网易云音乐的评论区，部分评论后面的大拇指点赞图标变成了水瓶外观样式，即热门评价的谐音“热瓶”。设计思考：有时候在听歌过程中控制不住自己的情绪，一不小心就陷入在评论区无法自拔，因为里面很多的文案让人感同身受，内心难以平静。网易云音乐的热门评论很多，比如爱情、亲情、友情、青春...等，每每都会有很强的代入感，其实，那些没有评论反而频繁翻看的人，才是最孤独的人，随着看的人越来越多，热评也就成了焦点。细心的用户会发现，在网易云音乐的评论区，有一部分点赞图标并不是翘起的大拇指样式，而使用了热水瓶的抽象形状，则是代表此条评论为“热瓶（热评）”，使用谐音梗的视觉样式让本来平淡无奇的界面元素变的更有意思，偶尔还会戳中用户的笑点，并希望用户主动的参与到评论互动中来，增加活跃度。03.「饿了么」最近看过-快捷的查看入口产品体验：在饿了么美食外卖类别列表，系统会在右下角提供最近查看过的店铺列表入口，即-店铺浏览记录，进入后可快速在有意向的店铺中点外卖。设计思考：选择条件越多、越自由则越难选择，这是选择性困难综合症“患者”最普遍的症状。每次到了饭点，很多人总是会打开外卖应用一遍又一遍的上下滑动店铺列表，到底吃什么：随便，可产品中从来都没有“随便”这一选项，不管用户如何选择性困难，但饭终究还是要吃，如果没有留住用户，一旦离开了当前应用，极有可能会通过其他平台或者渠道解决。饿了么为了最大程度的留住用户并促进下单，在美食外卖类别页面的右下角提供了最近浏览的店铺入口，一方面能减少可供选择的范围，当用户在列表中刷过一遍后，所点进去看过的必定是在某一方面亮点存在吸引力，与其让用户漫无目的继续查找，不如引导其进入已查看过的店铺，毕竟对用户产生过吸引力的店铺更有可能促进用户决策并下单转化；另一方面，如果用户在查看过一些店铺后，有明确的目标需要去下单，根据记忆继续在页面滑动查找，必定会付出更大的操作成本，甚至可能直接被忽略带过，此时，通过最近看过的入口可直接引导其进入下单流程，降低用户流失的可能并提高转化率。04.「京东」个人头像-意想不到的上传失败产品体验：京东APP的个人头像设置，如果将“东哥”之前在美国被拘的照片设为头像，系统会做拦截，是无法上传成功的。设计思考：在用户的认知中，99.9...9%的APP个人头像，如无特别规定或说明，随便一张图片都可以作为个人头像且可以设置成功，即便是涉及违规，也是在后续被举报或系统发现后才会采取相关的措施进行处理。虽然大部分用户的头像是自己的照片，但还是有部分用户将自己的偶像（明星、企业家或崇拜的某人）作为个人头像。在京东APP设置个人头像时，上传“东哥”昔日被拘的照片，则会一直处于上传失败状态，虽然这个细节承包了我好久的笑点，但必须为京东的产品团队点赞。其实对于负面信息，不管是真实还是伪造，都会让企业的形象受损，带来经济损失，如果被某些恶作剧的用户设置头像成功，被商家或其他用户看到，可能成为产品的一大槽点或茶余饭后的谈资，系统拦截此照片的做法，能很大程度的维护企业形象，如果换做其他企业，有多少团队能想到呢？05.「支付宝」一键备注-降低操作成本

@浅时光cysj

如何让自己的产品在保证基本的可用性和易用性的同时，还能让界面看起来柔和、更富有亲和力？一个产品能留住用户的虽然是内容本身的质量与吸引力，但一个小小的细节却能够阻止用户的流失，成为内容转化的最后一道防线，让人眼前一亮，值得借鉴。01.「高德地图」奥运彩蛋-一起为奥运健儿加油“打气”产品体验：东京奥运会期间，进入高德地图缩小后，每个省份都会出现奥运火炬旗帜，点击旗帜后屏幕会出现连续“+1”为中国奥运健儿加油的提示。设计思考：奥运会对于国家和民族有着重要意义，不仅可以强身健体、增强国民体质，另外还能促进国家体育运动的发展，所以赢得奖牌可以提升民族凝聚力和自豪感，奥运健儿在赛场努力，全国群众只能在屏幕为之加油打气，哪怕只是精神上的。奥运期间，为了给中国奥运健儿加油打气，高德地图上线了一个彩蛋，进入首页将地图缩小至中国版图范围，就能看到在每个省份上有一个奥运火炬，点击会出现连续“+1”的动效，顶部还会出现鼓励运动员加油的弹幕，虽然只是简单的一句话，运动员也看不到，但在用户心中却是诚心诚意，祝愿奥运健儿都能如常所愿的夺冠，也期待国家体育运动的的发展进入一个新的台阶。祝福他人、温暖自己，这是一个很暖心的小细节。02.「即刻」宠儿-“爷爷，即刻APP好好用啊”产品体验：在即刻app系统设置页面上滑，底部会出现一只猫，用手指戳一下会听到猫叫声，如果一直戳，在反复的猫叫声后还会听到语音彩蛋“爷爷，即刻APP好好用啊~”。设计思考：即刻APP的用户基本都知道，该团队养了一只名字叫“果果”的猫，其不仅在线下是团队的宠儿，细心的网友还发现“果果”已经火到了线上。在即刻系统设置中，隐藏着“果果”彩蛋，只要向上滑且不松手，就能看到这只猫，用手指戳一下可以听到猫叫声，虽然是人为模拟音效，但是感觉真的很用心，多戳几下还能听到“爷爷，即刻APP好好用啊~”。虽然“果果”彩蛋是隐形的，需要用户自己去发现，当用户找到这颗彩蛋时能在快乐的情绪中对产品产生好感，让整个交互过程变的生动有趣，获得一份喜悦和乐趣的同时，增强用户对产品的探知欲。03.「抖音」搜索-让人眼前一亮的奥运“金牌雨”产品体验：在抖音搜索奥运冠军运动员姓名时，不仅呈现搜索结果，还会触发“金牌雨”，满屏的金牌缓缓落下，应时应景。设计思考：一句“抖音，记录美好生活”，从老人到小孩、普通人到明星，很多人都欲罢不能。为了及时了解明星、当下热点，尤其是追星族，即便是新闻、微博，也体现不出抖音的距离感，简单的搜索一下，就能了解明星日常、重大事件等信息，“抱”着（抖音视频）睡觉都不是问题。奥运期间，在抖音搜索体育明星，如果有满屏的金牌落下，毫无疑问是该明星最近在奥运夺冠了。如果粉丝只是常规的日常搜索，当看到“金牌雨”时，所带来的惊喜必定让用户眼前一亮，在感想奥运金牌来之不易的激动之余，对该服务带来的体验也会非常兴奋和满意，为整个搜索的交互过程增添趣味性，也让产品产生更强的吸引力。04.「Keep」心理暗示-利用从众心理刺激转化产品体验：在keep运动课程的详情页封面图的右下角，会提示当前正在锻炼该课程的人数，点击进后进入列表，选择其中的用户可进入查看正在锻炼的课程进度，还能为该用户打气。设计思考：你放弃健身的理由是什么？太饿了、太累了、下雨了......一万个理由，在别人觉得理所当然的情况下，还让自己心服口服，有被自己惊到“原来口才这么好”。众所周知，跑步半小时不如在外面逛街两个小时痛快，看半小时健身课不如追剧、刷两小时抖音舒服，鲜明的对比，细想起来就会知道，原来所谓的理由是如此的微不足道。keep应用就是为上述用户而生，下雨了？累了？困了？没关系，不用出去，在家锻炼就好，而且还针对不同的情况搭配对应的锻炼课程，如果坚持不下去就一个字“懒”。除此之外，在课程的详情页可以看到当前有多少人正在锻炼该课程，满满的陪伴感，点击进入查看用户正在锻炼的进度，还能为TA加油打气，打造出了健身房的氛围，除了给别人打气外，我想，所期望的更应该是在自己锻炼时能得到TA人的鼓励吧。其实用户进入到课程详情页后，继续还是放弃就在一念之差，系统展示当前正在运动的人数也是给用户的心理暗示，让其想法和行为在一定程度上受到周围人的影响，往往会超出理性的认知，利用从众心理刺激用户进行下一步动作，从而实现转化，也为用户提供了坚持下去的动力。05.「微信」您有一笔待接收的转账-避免经济损失产品体验：如果有微信好友转账过来，自己却未接收，系统会在列表该好友昵称下方提示“你有一笔待接收的转账”，有效时间低于两小时，还会额外提示“2小时后到期”。设计思考：大家都知道，微信红包、转账在发出后，只有在24小时内有效，对方如果未接收，到期后自动退回。有时候，好友发来红包/转账，为了保持自己良好的人设形象，一般不会立即领取，总会等一段时间，殊不知“无形装X、最为致命”，一旦忘记就得不偿失了。微信转账的信息（红色文字）提示能解决用户容易忘记接收的痛点，当存在未接收的转账信息时，系统会在会话列表给予提示，临近到期还会额外增加时间提醒，能有效避免用户未及时接收转账而过期、特殊情况还会给自己带来经济损失的情况，不打扰用户的情况下，在适当的时间给予消息提醒，从用户的角度出发，可谓是非常友好。06.「淘宝」店铺宝贝总数-小提示

Saffer

作为UI/UX设计师，在体验大量应用的同时，需要用心去发现设计的优秀之处，并依据实际情况分析背后所带来的商业价值，为日后自己设计时奠定坚实的基础。很多时候，设计的好坏并不是完全用美观来衡量，其背后必定要深思熟虑。产出时需要站在业务与产品的角度考虑全局，还要随时考虑用户的使用场景、群体性格、行为预判等，从细节上入手，为用户带去更好的使用体验，利用设计的手段满足用户需求的同时促进、推动业务的展开。241.「微信」红包回复-用最短的路径

，这种人性化的设计往往最能打动用户。

如何让自己的产品在保证基本的可用性和易用性的同时，还能让界面看起来柔和、更富有亲和力？一个产品能留住用户的虽然是内容本身的质量与吸引力，但一个小小的细节却能够阻止用户的流失，成为内容转化的最后一道防线，让人眼前一亮，值得借鉴。01.「网易云音乐」勾选协议-双重提示引导用户快速定位产品体验：在网易云音乐的登录页面，如果忘记勾选服务/协议并点击登录，除了屏幕中间有toast弹窗提示之外，下方勾选区域的文字也会跟随抖动，引起用户的注意。设计思考：99%以上的应用都有登录功能，因其产品目标（套路）的不同，部分应用设定为“登录/注册即表示同意服务/协议”，无需手动勾选同意，另一部分则需要用户自己去手动勾选。因设计方式的不统一，造成很多用户进入登录页后，在未勾选“同意”的情况下直接点击登录而遭到系统拦截，并给予一定的提示，此时，用户只能通过浏览页面信息并快速定位至服务/协议区域进行操作。在登录网易云音乐的过程中，如果未勾选服务/协议，系统会通过toast弹窗+区域元素抖动的形式强化视觉，给予用户双重提示，便于用户在登录遭到拦截并清楚原因后，无需任何信息筛选或印象记忆，即可快速被抖动的文字吸引并定位至此处进行勾选操作，减少用户思考时间，提高登录的效率及完成率。02.「美团」防踩坑-反正我除了“菜”，什么都没有产品体验：在美团外卖下单，如果选择的商品不包含主食，在提交订单时，会在商品上方提示是否需要添加主食，如需添加，可通过快捷入口在不离开当前页面的情况下以弹窗的形式给用户提供最便捷的选择。设计思考：在工作忙碌的情况下，用外卖平台点餐，当收到外卖时就傻眼了，发现只有菜、没有饭，打电话给商家，只能被要求重新下单点主食，因为很多都有xx元起送、再加上配送费的原因，我想很多人这时候都放弃了，除了站在原地发发呆、吐槽，也只能赶紧去找个地方吃饭了。用美团外卖点菜，如果检测到用户的商品商品中不存在主食，则会在提交订单页面的中心位置提示用户是否需要主食，非常显眼的底色块+文案提示及能有效提醒用户并通过快捷入口快速满足需求，避免用户在收到商品后没有主食而带来时间或经济上的损失，为了更好的服务于用户，这个提示算是非常贴心的。03.「cctalk」课表日历-让回到起点更高效

一起探索你「在看」是最好的肯定与鼓励

在互联网产品日趋成熟的今天，APP同质化越来越严重，使得设计不够精致、没有气质及品牌感。一个设计精致APP不应漏过任何一个细节，美观、可用和高效的界面设计都需要花费大量的时间从细节上去打磨，并从多方面钻研并创造出打动人心的UI/UE设计。01.「微信」授权登录-多重身份

在我们日常使用App的过程中，经常会意外的发现一些小惊喜，是用户没有想到的细节或功能，它可能让用户瞬间对此应用的喜爱提高了一个度，也可能让此刻心情不悦的你豁然开朗，从而形成商业价值。01.「钉钉」摇一摇-任务记录一目了然产品体验：在钉钉首页进行“摇一摇”，会直接跳转至最近使用记录页面，且顶部有最近使用的功能、聊天、图片及文件等分类导航，如无需使用，可在我的-设置-效率套件中关闭此功能。设计思考：很多APP都有摇一摇，大部分都是为明确的功能提供了一个入口，指向性的引导用户去使用，但也有一些APP将摇一摇设定为隐藏的功能，进入APP摇一摇，可能会有意想不到的惊喜。钉钉首页的摇一摇是触发快速查看近期任务的快捷方式，其中包含最近聊天记录、功能、多媒体文件等，其顶部做了明确的分类导航，方便用户在需要查看最近任务时，快速分类查看，如果不需要此功能，可在设置-效率套件中关闭。摇一摇功能可以让用户根据自己的习惯偏好进行设置，考虑周全且人性化，创新性的为用户创造了更多个性化的使用体验。02.「微信」图片提取文字-“一键”码字产品体验：在微信对话框中，打开缩略图并长按，从弹窗菜单中点击提取文字，即可将图片中所有文字提取出来，方便用户复制、转发或者收藏。设计思考：微信是我们日常使用最为频繁的社交软件，它可以让我们在线聊天或是视频，除此之外还可以利用公众号来购物或是了解其他的趣事。在聊天互动过程中，有时候为了图方便，直接一张图片、截图发过去，在对方有提取文字需求的情况下就苦逼了，只能把图片保存，然后对照图片码字或通过第三方应用将文字提取出来，如果手机较为老旧的话，刚从第三方退出来，微信任务进程就直接“歇菜”了，无端浪费很多时间。其实微信远远不止我们所看到的这些功能，还有很多贴心的设计等待细心的网友去发现。当我们接受到带有文字的图片后，打开缩略图，只需长按图片选择“提取文字”就能迅速帮助我们完成文字识别并提取出来，然后选择性的复制以应对接下来的文字需求。虽说此功能较隐蔽，但我们发现后并加以利用，定能带来更便捷的使用体验，减少码字出错、第三方应用抢内存的情况出现，节省大量时间和避免突发性问题，这算是一个非常贴心的设计了。（PS：在拿到名片、书本、纸张时，拍张照片，大量文字信息瞬间提取）03.「小宇宙」前进/后退-不同的设定

用户群体较年轻，而且社交群体多样化，强调沟通的同时还突出了“乐”的重要性，年轻人爱玩，在当下好像没有什么毛病。QQ最新版本增加了表情弹射玩法，弹射？有没有一听就很刺激的感觉。在聊天过程中，选中并长按

产品始于需求、立于价值、久于体验，良好的用户体验是互联网产品立于之根本，也是UI设计师、交互设计师所追求的目标之一，需要在用户目标不清晰以及对应用不理解的情况下，利用设计手段合理、合适的跟用户对话，并解决用户的需求，完成应用该有的使命。至于如何引导、如何设计，大部分往往都是通过产品的细节达到目的。01.「蜻蜓FM」0元VIP周卡-免费只为收更多的费产品体验：新用户进入蜻蜓FM会员页面，通过上方醒目的￥0元开通超级会员以及套餐列表中的0元周卡吸引用户立即开通，走完正常的支付（0元）流程后，即可享受一周的会员服务。会员到期后，系统会按照月卡标准自动扣费。设计思考：VIP增值服务是一个应用产生盈利的重要板块，部分产品甚至把所有的收入来源都聚焦在这里，如何让用户产生花钱购买增值服务的动机是需要慎重思考的，一不小心、可能因为门槛的原因把用户拒之门外，用户可能永远都不再回来了，所以除了有物超所值服务和特权之外，还得有合理的手段，毕竟到了花钱的阶段，谁都不傻。不管用哪种方式引导用户购买增值服务，用户都会花一定的时间思考所提供的服务是否跟对应的价值成正比、是否还有别的优惠、其他同等产品会不会更好等情况，这时的心理防线最为脆弱，或许一点点正面或负面的信息出现，都可能让用户立即做出两种完全相反的决策。蜻蜓FM在会员套餐中增加了0元周卡，走完付费（无需付费）流程后，便可享受VIP所有特权和服务，这种做法明显是利用用户损失厌恶的心理来促进转化。用户购买之前，页面上方醒目的“￥0”足够引起用户的注意，同时套餐中的0元周卡会让大部分用户毫不犹豫的去开通VIP，毕竟“白嫖”谁不喜欢？就算在使用之后有部分不满意，自己也毫无损失，也是基于大众用户心理：免费的东西拿了是应该的，不拿就是自己的损失，比如那个...砍一刀0元带走...什么的就这么个套路。用户购买之后，在一星期之内可享受所有特权和服务，如果有心的话，就有足够的时间来了解所有增值服务内容，减少周卡到期后用户续费的决策时间和心理防备，因之前开通周卡时已走完支付流程，用户只要在自己心里“点头”就能无需任何操作进行接下来的自动续费，有效避免用户在真实的续费操作过程中打“退堂鼓”。另外用户在使用VIP服务一段时间后，对于突如其来的中断会很厌恶、烦恼，让其有一种取消就会损失很严重的“错觉”，促使用户继续使用，以此提高转化。（PS：暗雷，因之前在免费开通周卡服务时，同时也开通了自动按月付费流程，会有小部分用户忘记取消或在到期后取消，系统都会正常扣费，这一个月你是注定要熬的......）02.「网易云音乐」卡带模式-永远的经典产品体验：网易云音乐的歌曲播放页面，在延展功能菜单中，点击切换卡带模式，即可变成横屏复古的磁带效果。设计思考：有人说“情歌还是老的好”，虽然随时都有新歌出现，但每个爱好音乐的人都有着自己的执着。音乐不仅是娱乐、爱好和态度，更是一种情怀，许多80、90后都会有那么几首最爱的老歌，也会视为永远的经典，比如去KTV的时候，开始一定不是新歌，而是唱自己最拿手那一首。经典、情怀、念旧是一部分人挥之不去的回忆。在网易云音乐播放页面的延展功能中切换卡带模式，横屏磁带出现的那一刹那，仿佛时光倒流，满满的回忆杀，这也是继“尸骨未寒”的虾米音乐离开之后，复古的磁带效果再一次出现，经典的力量体现着部分人对音乐的态度，通过突出的复古磁带效果，给用户带来美好的回忆，能让产品获得更多的认可与信任。03.「淘宝」新增地址-简单的交互让操作更高效产品体验：在淘宝新增收货地址，点击收货人输入框时，会自动弹出姓名+电话历史记录，点击可自动录入对应的输入框。设计思考：关于收货地址，想必用户和设计师们是无比熟悉了，它是用户下单成功之前必须要完善的功能，通常一个用户有三五个收货地址再正常不过，有必要的话，还会修改现有的地址或新增地址。新增地址时，需要输入姓名、电话、地址等一套常规信息录入流程，看来似乎没有什么不妥，但本着提供更好的使用体验为目的，设计师们可以从行为预判、操作效率、状态认知等多方面进行分析，必定能设计出更为便捷新增地址流程。在淘宝新增地址时，点击姓名输入框，会自动弹出姓名+电话的历史记录，以便用户通过选择快速完成信息的输入，对于需要在家、公司或租房处新增地址的用户，免去了部分信息的重复输入，节省时间成本。给用户新增一个简单的交互，就可以减少时间和不必要的重复步骤，让操作流程变的更高效，以此增加产品的易用性。04.「网易蜗牛读书」免费时长-解决用户所顾虑的“缺斤少两”产品体验：使用网易蜗牛读书，每日有60分钟的免费阅读时间，在阅读过程中，如果查看/参与话题、评论，此阶段是不计入阅读时间的，待回到正常阅读状态后再次接着计时。设计思考：众所周知，免费的东西不拿白不拿，合理的“白嫖”从来都没觉得不体面，毕竟在网络发达的时代，总是有层出不穷的套路身不由己，能省就省吧。虽然很多用户都会不经思索的大肆挥霍着免费得到的东西，但终会有部分人格外珍惜，有意去避免任何不必要的浪费。网易蜗牛读书为用户每天提供60分钟的免费阅读时间，但大家都知道，看书不是只为看书，而是要记住书中的知识或奇闻趣事，期间就免不了在评论发表自己的看法、了解别人的意见等，做阅读之外的事情，其中必定会花费不少时间，那么60分钟的免费阅读时间就会大打折扣。产品团队似乎早就看破了用户的这层顾虑，在阅读过程中如有出现评论、参与话题、查看注释等操作，则计时停止，待再次阅读书本内容时接着计时，用户丝毫不必担心阅读过程中的“小插曲”会占用免费阅读时间，这一贴心的产品细节可谓是十分友好，非常贴心且人性化。05.「iPhone」关机-操作流程为什么这么繁琐？产品体验：iPhone的关机操作需要同时按下音量＋键和电源键，触发区域置于设备的最顶部且通过长距离的滑动才能完成关机操作，需花费更多的时间，及较高的操作难度。设计思考：人言“iPhone的设计是魔鬼”，这句话一点都不假。之前在网上看到一个帖子，iPhone

不管你是一个什么类型的设计师，想要做出优秀的作品都离不开长期经验的累积，那么去体验优秀的作品并找到优秀的点，挖掘背后的设计原因以及带来的商业价值是必经之路。灵感有时候来源于灵光一现，但更多时候来于自己设计信息的脑存量。在体验优秀的作品时，我们需要站在用户的角度去发现好设计细节及交互解决方案，思考能给企业或用户带来价值并记录下来，久而久之，就能提高自己的语言组织以及总结能力，再通过不断的练习，以达到质变效果。2021

设计师最重要的是要跳出纯画图的桎梏，从设计表现的执行层面往后延展，扩宽自己的眼界，并非只停留在对原型稿的美化。在设计过程中需要思考自己的工作能给业务、公司带来多大的商业价值，站在业务和用户体验的角度思考，从产品的底层逻辑出发，去挖掘设计机会点，利用设计手段来助力、驱动业务的增长。用户想要的并没有那么复杂，设计师只需要在满足产品需求的情况下做一些细节的处理，这可能是一个功能流程的优化、符合用户预期的视觉表现、打动用户心理的感情牌、意想不到的惊喜、制造行为错觉、提前行为预判、迎合人性的弱点等，将用户转化的最后一道心理防线击溃。01.

「钉钉」tab栏里藏乾坤-上滑展示更多功能入口产品体验：按住钉钉底部标签栏的控制条上滑，会弹出更多的功能入口，点击直接进入对应的功能页，非常方便。设计思考：标签栏（Tab

作为设计师，我们时时刻刻都在和各种应用打交道，在体验的过程中，其实里面有很多小揪揪需要深挖和思考，所以千万不能小瞧它。很多产品细节的背后都是为了更多新用户的加入、浏览、留存、付费/转化等，以最终达到对用户服务/体验的提升、内容生产者的利益以及企业自身的商业化。01.「搜狗输入法」复杂/生僻字-贴心的拼音合并功能产品体验：使用搜狗输入法，当遇到生僻/复杂文字不会打拼音时，不妨试试将文字的偏旁部首拆开分别拼音，或许有你想要的结果。设计思考：中华文明五千年历史，从甲骨文算起，汉字已经3000多年的历史，虽然我们天天接触汉字，但基于目前科技普遍，电子设备多的数不胜数，很多情况下直接减少了我们对汉字的接触和温故，然而有时候打字却遇到部分比较复杂的汉字突然不知道怎么拼，尤其是工作所需或需要紧急回复时，“认字认一半”可能无法快速解决当前问题，到底是感慨中华文化博大精深、还是尴尬呢？使用搜狗输入法打字，如遇到较为复杂/生僻字不会打拼音时，可直接拆分其偏旁部首分别拼音，在右侧即会出现拼音叠加的单个文字，再配合“认字认一半”方法，虽然不能解决所有类似的需求，但能满足大部分用户所碰到的问题，减少因不会拼音带来的困扰，兼顾了特殊用户对打字使用体验的关照，贴心的拼音合并方式操作简单，这是一个非常实用但容易被忽视的好功能。02.「得物」3D空间-720度无死角浏览商品产品体验：在得物APP浏览商品时，可从详情页主图进入3D空间，通过上下、前后左右拖动360度无死角预览、放大缩小让细节清晰可见，使之购买前对商品更加了解。设计思考：得物（毒）APP名字虽然没那么响亮，但作为定向的电商平台，在自己所在的圈子里还是小有名气，如果你是喜欢潮流、运动的人群，那一定知道“毒”，即现在的得物。此App聚集了一大批热爱球鞋、潮品穿搭和潮流文化的爱好者，其平台商品上架的标准也极为严格，其用户体验更是不必多说。得物APP的3D空间算是用户体验非常好的一个黑科技了，通过详情页主图的3D空间进入，在这里，部分商品能进行可操控式自转，用户通过翻转、放大、缩小等操作来查看商品的材质、图案、纹理、细节等，真正实现了可交互式互动，堪称360°x2无死角预览。得物利用3D空间黑科技为用户带来更为便利、有趣、流畅的购物体验，打造了真正科技感的沉浸式购物。03.「马蜂窝」趣味且炫酷的连击点赞产品体验：在马蜂窝的游记中，对网友们晒出的攻略、心得赞善有加时，多次点击左下角的“顶”，页面中会以“喜欢”的手势图标从底部直奔头像，并用“连击”样式的数字累计，以及代表作者心情的回应。设计思考：《羞羞的铁拳》电影中有一段让我印象非常深刻，记着马小在“铁锅炖自己”时说了声：老铁们礼物刷起来，666走起来，当时被满屏覆盖的666应该让很多屏幕的观者都兴奋不已。现如今，各种产品的线上内容也都加入了喜欢、点赞、推荐等操作，样式和原理基本大同小异，大部分都是通过心/星型图标，点击选中、再次点击取消，有点复选框的感觉，其实可以根据产品的属性及受众用户的性格延伸出多种样式，比如情感、个性、趣味等，以此给用户带去不同的心理感受。马蜂窝游记详情页左下角的顶（又名：点赞）存在连续点击时，会出现一连串“喜欢”的手势图标并从底部快速移动至作者头像，头像且以闪动的效果+文案做出回应，配合数字累加和抖动效果，着实炫酷，算是狠狠的秀了一把，有种直播礼物满天飞的既视感。我们都知道，点赞不光是对作者的认可，其不同的视觉效果还能表达自己对作者的赞美程度和内心的满足感。另外，动态视觉效果大大提高了趣味性，就一个点赞功能，活生生整出了打游戏砍怪时的连击效果，利用非常炫酷有趣样式，提升用户对产品的满意度。04.「真快乐」中断登录流程-最后的弹窗挽留产品体验：真快乐使用第三方应用登录授权成功后，需要绑定手机号码，如果此时返回，系统通过弹窗配合警告性质的文案对用户流失前做出最后一步挽留。设计思考：登录是用户转化最关键的一环，没有用户量再好的产品也是空谈，因为这涉及产品的用户量、使用粘性及企业的利益，所以有很多产品想尽一切办法促使用户注册，哪怕是“僵尸”也在所不惜，一旦用户注册成功，平台就会抓取用户的隐私信息、操作数据等，便于日后对症下药用来促进用户转化和唤醒“僵尸”用户。这个随时都有可能把用户阻挡在门外的登录门槛，是无法越过的，只能通过不同的手段来提升注册量。真快乐APP使用第三方账号授权成功后，用户若在绑定手机号码环节操作退出/返回时，系统会利用弹窗对用户做出操作警告，提醒用户退出页面可能带来的影响和后果（无法购物），对用户的返回流程制造难度，让用户思考

在UI/UE设计中，我们如何将至关重要的信息有效地传递给用户，这是设计本身的职责。但是绝大多数信息的呈现，我们可以在细节的处理方面带给用户惊喜，让用户喜欢并完成最终的转化，通过设计的手段提升产品的可读性以及可访问性。初级与高阶设计师的区别，并不是在整体大的布局上有什么差别，通常都体现在产品的细节上，好的产品可以在内容不变的情况下，通过细节的处理让之焕然一新。01.「有道云笔记」新拟态风格-你还记得吗？

在UI/UE设计中，我们如何将至关重要的信息有效地传递给用户，这是设计本身的职责。但是绝大多数信息的呈现，我们可以在细节的处理方面带给用户惊喜，让用户喜欢并完成最终的转化，通过设计的手段提升产品的可读性以及可访问性。初级与高阶设计师的区别，并不是在整体大的布局上有什么差别，通常都体现在产品的细节上，好的产品可以在内容不变的情况下，通过细节的处理让之焕然一新。01.「讯飞输入法」双重输入方式-提升产品易用性产品体验：在讯飞输入法的键盘打字输入状态下，也可同时使用手写输入方式，便于用户有切换输入需求时免去手动操作。设计思考：在我们使用的移动通讯设备中，输入法是避不开一个软件，不管是内置还是自行下载，随时都会使用。不知大家有没有碰到过这种情况，在打字时突然忘了拼音、手写时突然不会写，遇到这种卡壳情况只能通过在键盘设置中频繁更改输入方式，真的很麻烦。讯飞输入法在用户打字输入的情况下，考虑到了可能会有手写输入的需求，增加了在键盘可控的范围内同时可手写输入，方便用户在最短的时间内无成本更换场景需求，无需多余的操作便可达到目标，将操作流程和路径都进行了简化，降低产品的使用难度，增加易用性。02.「百度地图」3D地球-线上版的世界国家介绍知识库产品体验：在百度地图的个人中心-更多功能里面打开3D地球模式，可拖动旋转或放大缩小查看国家地理位置，点击国家名字，会提示当前疫情环境下该国家的出入境限制情况，还可查看该国家的基本基本信息。设计思考：说到地图软件，我们的第一反应便是导航，看着地图上的各种建筑、道路等街景标记，跟随指引到达目的地。其实除了传统的街道图地图外，还有卫星图、三维图等，且该行业也在3D方向也不断发展，逐渐引申向高科技方面延伸，用一种惊艳的方式呈现给使用者。百度地图本身提供了普通模式、地球模式、三维模式、地铁模式等好多种，为了迎合大众，直接将普通模式呈现给了用户。还有一个鲜为人知功能就是“3D地球”，用户可以通过转动或放大缩小来查看各个国家的地理位置，且地球原本就是圆的，全球视野以球形展示也则更加直观。点击国家名字，会弹出天气、访问人数以及疫情期间的出入境信息，隔离还是禁止入境给予明确提示，便于用户合理安排出入境时间，还能通过查看详情进行了解该国家的基本信息（利用自己强大的百度百科），给用户普及国家地理知识。从表面上看，3D地球并无较为实用的功能，但从另一个角度，何不看成是一本线上版的国家知识文库呢？同时3D地球模式还在提供了月球视角，从左上角进入月球预览模式（操作方式相同），当第一眼看到标记的“嫦娥5号着陆点”时激动了......，用一种炫酷的方式将“地球”和“月球”以趣味化的方式呈现给用户，很大程度上满足了喜好探索的用户“猎奇”心理。03.「腾讯视频」巧妙的影片广告植入产品体验：在腾讯视频首页的任何一个影片分类栏目下拉刷新时，系统利用下拉延伸的空间及时间差中，都不同程度的投放了对应的广告，刷新完成后恢复原状。设计思考：有人说，曾经有企业为了用户体验而坚决不植入广告，单纯的只靠公开透明的增值业务来赚钱，后来都他们“饿死了”。其实跟用户体验相比，如何将流量变现使企业获得收益维持正常运转显得更为重要，于是，植入广告就成了很多产品的收入来源（前提是你有很大的用户量）。大部分用户都知道腾讯家族的应用，随便扳着手指就能列出很多个，其广告的植入可以用恐怖、变态等词来形容，或许大家会对广告非常反感，但站在产品设计的角度，就算设计出被用户骂声一片又不得不用的产品，无疑也是成功的，“王者农药、吃鸡”就是最好的例子。腾讯视频的广告植入可谓是无孔不入，就连下拉刷新这种空档也不能幸免。下拉刷新给绝大多数用户的第一感觉就是下拉页面，然后等着刷新交互过程的完成，而腾讯视频在下拉延伸的空间及时间差中植入广告非常的巧妙，

如何让自己的产品在保证基本的可用性和易用性的同时，还能让界面看起来柔和、更富有亲和力？一个产品能留住用户的虽然是内容本身的质量与吸引力，但一个小小的细节却能够阻止用户的流失，成为内容转化的最后一道防线，让人眼前一亮，值得借鉴。01.「微信」简便且高效的图片翻译功能产品体验：在微信的聊天对话框中打开英文图片，点击下方的翻译功能按钮，即可翻译图片上的外文，并以中文显示。设计思考：在我们的生活中，有时候多多少会遇到一些英文，比如进口食品包装、药物说明、护肤品等，其中就有一部分是纯英文说明，无论自己多么博学多才，但不见得都能理解英文。记得之前有一次，我自己的电脑蓝屏，出现的全是英文，虽然自己也是一直提倡用互联网解决问题，且也有一些拍译软件，但一想着需要下载注册，没准儿还要先看广告或收费，且天生对英文有一种与生俱来陌生感，还未开始便放弃了，于是成了伸手党，去请求别人帮助。微信的图片翻译功能就是专为解决这一问题而生。通过在对话框中点击图片直接翻译，看到一道绿色的光由上而下扫过之后，图片中的英文就变成了中文，着实方便，比起以前通过第三方或先提取图片中的文字来翻译，操作简单且效率还提升了很多，可以说是一个非常实用的小功能。02.「橙」不一样的的登录方式产品体验：在橙APP的登录页面，区别了常见的登录界面样式，使用对话聊天的方式按流程提示用户完成登录，界面流程方式新颖，浓厚的社交行业属性。设计思考：在任何应用中，要想有自己的“私密”领地，都绕不开登录/注册的流程，但凡手持智能手机又想玩的开的用户，对登录的流程是非常熟悉的，比如手机号+验证码、一键登录、第三方登录，无外乎这几种常规的登录方式，如果想来点“刺激”的，无非就是加个logo、贴个插图、来点动效等，见怪不怪了。橙APP的登录方式虽然同样是手机号+验证码登录，但在流程样式上却非常新颖。鉴于应用本身属于社交行业，通过对话询问的方式让用户按照流程输入了手机号和验证码，给用户造成这不是对使用该APP设置门槛的错觉，降低用户的防备心理（很多产品用户量的增长都被挡在了登录之门外），让用户不知不觉在聊天过程中完成了登录流程操作，其方式非常友好且登录的过程是愉快的，同时还兼带了浓浓的社交行业属性，通过更直观的登录场景感受，拉近用户跟产品之间的距离，使用户的印象更加深刻。03.「高德地图」桌面一键导航-出行更高效产品体验：通过高德地图的收藏夹，点击收藏地址右侧的功能菜单，在弹窗中将该地址“添加快捷导航到桌面”，后续就不用每次输入常用的目的地了，直接通过桌面的图标入口即可一键导航。设计思考：对于在外的工作人员，导航算是手机必备的软件，以前只是纯粹的导航认路，而随着汽车量的增长，各地交通逐渐开始变得紧张，那么不管我们是否知道路线，驾驶之前都会习惯性打开地图导航，随时观察路线拥堵情况来思考是否有更换更优路线的需求，于是就按照惯例打开导航、录入目的地、选择路线......等一系列的常规操作，日复一日，似乎没有觉得什么不妥。高德地图的桌面一键导航功能，为长期有驾驶需求的用户提供了更为便捷的操作，将经常使用的目的地添加的收藏夹，再添加到桌面以生成目的地导航便捷入口，有需要时桌面点击即可，系统将自动规划最优路线，通过最便捷的方式一键导航，再也不用日复一日的重复之前的操作了。站在设计师的角度，在解决用户需求时，操作越复杂、步骤越多，用户的选择条件、视觉负担及时间成本就越多，出错的情况也越多，故而用户流失的可能性就越大。高德地图通过一键导航简化操作流程，通过合理的操作路径，降低用户时间成本，有效提升了使用频率及粘性。04.「爱奇艺阅读」性别选择-更明确的指引和提示产品体验：首次进入爱奇艺阅读APP，在性别选择页面中，男生和女生的头像通过动画的形式反复左右替换，用强视觉提醒的方式推动用户进行选择操作，以便于提供更匹配的内容资源。设计思考：大部分新闻或阅读类型的APP，在用户首次进入应用时，都有类似性别、行业、爱好之类的选择，其主要目的是确定用户的属性，并提供更加匹配该属性的内容资源来提升用户的满意度。其流程也是千篇一律，以建议性的提醒用户去做选择，如无需要直接跳过即可。爱奇艺阅读首次即进入APP时，以动态的性别头像插图反复左右切换的动效方式来提示有用户选择性别，相比常见的静态按钮直接显示在那里会更加友好，不会过于生硬、冷冰冰，其动画视觉样式给予明确的指引和提示，更能引起用户的注意，通过强烈的视觉提醒促使用户更高效的完成当前任务。类似这种选择且非强制性的前置页面，很多设计师只是按部就班当做一个流程，其实要想做好并非仅仅如此，可以通过趣味化、情感化、动效等方式增强用户去选择的欲望，以提高操作几率，用户一旦选择，进入应用之后所看的内容定然更符合自身的需求，也能提高用户的满意度，其满意度的高低能决定用户的去留及转化，所以应用中，用户的前置选择对产品的重要性可想而知。05.「饿了么」合适的时间、合适的提醒产品体验：如果在饿了么有正在进行中的订单，再次进入应用时，右下角会提供一个查看的快捷入口，点击可快速进入该订单查看进度或骑手配送状态。设计思考：随着外卖行业的普及，给我们的生活带来了很大的便利，尤其是一日三餐，我们只需花几分钟的时间在外卖平台上下单，其他的事情交给商家和外卖小哥，很大程度上缩短了我们去店途中和店里的等待时间，特别是对上班族来说，真的是太便利了。不过外卖平台不像京东淘宝-人们可以无忧无虑的逛上几个小时，通常都是目标明确的用户，在短时间内完成自己的需求，要么下单、要么查看配送进度。如果在饿了么有订单存在，再次进入首页，右下角会提示配送信息，点击直接进入查看详情。从表面上看，右下角的入口虽然提供了快捷通道，但似乎不太友好，总是会遮挡部分内容。其实并非如此，是因产品根据用户的使用场景进行行为预判而设计的快捷入口，在正常情况下，从下单到完结一般在30分钟左右，如果用户存在未完结订单且在短时间内再次进入平台，80%以上的用户此时需求为查询配送进度，因此，右下角的进度提示正是在合适的时间给予用户合适的提醒，根据用户的场景需求提供了最为便捷的解决方案，由此可见、利大于弊。06.「搜狗输入法」教你少打字、多开挂产品体验：进入搜狗输入法的设置中，可开启开挂模式，里面的三连发、回声、重要的事情说三遍分别对应不同的效果。设计思考：搜狗输入法在业界虽不敢说是最牛，但一定是数一数二的存在，发展至今，不仅仅是在满足用户的基本需求，还提供了让用户感到惊喜的功能，而现在更是研发了很多“黑科技”。从搜狗输入法左侧的logo中进入工具选项，在设置中即可选择开挂模式（真实效果见上图）。正如字面的意思，搜狗输入法通过智能帮助用户自动完成一些列的复制粘贴工作，瞬间让打字刷屏的手速快到逆天，且操作简单、轻松完成，方便用户在开怼、卖萌、刷屏过程中直接碾压对方的打字速度。开挂功能可谓是实用性与趣味性兼备，让我们在日常中，面对不同的社交需求时带来贴心的改变。（凡事有一个度，刷屏如果没有用对场景，可能会遭到对方的反感，事在人为。就像之前的“拍一拍”功能面世，却有人在上班时间拿去拍领导、拍老板，后果就不说了，刀可切菜亦可伤人）07.「美团」垃圾分类-解决餐后垃圾分类之忧产品体验：美团我的页面，推荐工具的“垃圾分类”功能，能帮助我们进行识别因外卖产出的垃圾类型，便于跟线下对应的垃圾桶“对号入座”，减少不必要的垃圾混合而增加清洁工人的工作量。设计思考：外卖平台的兴起，给我们的生活带来了很大的便利，同时也产生了一些危害，首当其冲就是环境的污染。比如包装盒、包装袋、餐具等大量生活垃圾的产出，确实在外卖行业普及后，乱扔垃圾的情况跟随着疯速增长，虽然这些属于个人情况，但也有部分用户因不知垃圾如何分类，而将所有垃圾聚集在一起，然后就成清洁工的事情，最终无端增加垃圾分类的工作难度。美团的“垃圾分类”功能对卫生环保方面增添了一份力量，当用户不知道自己产出的生活垃圾是何种类型时，可通过查看常见垃圾类型提示或搜索来确定类型，方便用户按类型将垃圾丢入对应的垃圾桶，解决餐后垃圾分类之忧，帮助养成良好的垃圾分类习惯，助力垃圾分类落地。还能消除用户对“外卖垃圾分类麻烦”的顾虑，利用线上垃圾类型的普及，为绿色发展及环境保护贡献自己的一份力量。08.「优酷」个性化弹幕设置-看剧互动两不误产品体验：在优酷APP开着弹幕看片时，可通过弹幕设置调整字体的不透明度、行数、大小及速度来设定最适合自己样式。设计思考：弹幕，用户非常熟悉的一个词，很多时候在看影片时，弹幕里面的内容远远要比影片带来的乐趣多很多，除了能从中获得群众的陪伴增加愉悦感外，还可以带动视频的观看氛围，让活跃的用户有了表达自我的动力和热情。但对于“键盘侠”来说，仅仅在上方显示的几行弹幕根本无法满足自己看影片互动及调侃的需求。优酷的弹幕设置中，可以根据自己的实际需求对弹幕字体大小、透明度、区域等参数进行设置，针对喜好调侃互动的用户来说，使用满屏半透明度字体样式的弹幕无疑是最好的选择，互动看片两不误。09.「随便走」AR导航-“傻瓜”式操作，老少皆宜产品体验：使用随便走导航，全程利用AR实景，通过3D立体形式的方向引导，帮助我们找到周边的任何一个地方。设计思考：导航是我们出行必备的工具，目前高德和百度在该领域各自独霸一方，看似很牛叉，但并不是万能的。比如老人操作起来有一定的难度，经常各种功能找不到还说不好用；又比如我们在陌生的重庆市，可能你从这南面1楼进去，北面就在20楼，毫不夸张，如果通过常规的地图导航去找人，我建议你最好吃个早餐再出去，等找到人之后就可以吃夜宵了；再比如......不比了。随便走APP是一款便捷式轻量导航工具，主打“让生活乐趣一目了然”。利用“AR全息实景”的展现方式，改变了必须要有地图的模式，对于我们找周边的美食、酒店、公交、厕所、景点等需求，进行穿透式3D立体指引，操作简单，不管前、后、左、右、上、下都有非常明显的视觉引导，只有你想不到，没有它找不到，对于长期生活在大城市的用户，交通复杂、道巷纵横，很可能我就在你“隔壁”，你却找不到我“老王”。此外，随便走APP操作简单，学习成本基本为零，对家中老人而言，也是一款不错的导航工具。10.「微信读书」模拟现实的行为动作产品体验：在微信读书的书架页面，点击书籍以及书本翻页，都使模拟了现实生活中较为自然且真实的从书架拿书、及各个角度翻页的效果。设计思考：看书APP虽然众多，但真正能坚持下去、养成习惯的没有几个人能做到，站在平台的角度思考，毕竟书本的内容是平台无法修改的，除了提供优质的资源并给予方向指引外，其他便是通过设计体验来提升用户的好感度了，微信读书APP从书架的拿书动作到书本的翻页，都模拟了现实生活中用户看书的行为动作，大家都知道，真正喜欢阅读的人，是不会在意这些所谓的横竖及交互效果的，但前面都说了，这种人毕竟在于少数。因为受众的差别，模拟现实其最主要的作用就是为了吸引眼球，模拟用户的实际行为，将其代入真实的情境中，使用户对产品产生深刻的认同感，则看着更加舒心，待用户提升忠诚且养成看书习惯之后，这些作用就会慢慢变得微不足道。往期细节回顾：结语设计师需要养成体验产品的好习惯并将优秀的产品细节记录下来，加强自己的记忆，不仅能提升自己的语言组织和总结能力，也为日后输出优秀的作品当铺垫，对自己的能力提升以及未来的职业发展带来便利。扫码关注

如何让自己的产品在保证基本的可用性和易用性的同时，还能让界面看起来柔和、更富有亲和力？一个产品能留住用户的虽然是内容本身的质量与吸引力，但一个小小的细节却能够阻止用户的流失，成为内容转化的最后一道防线，让人眼前一亮，值得借鉴。01.「网易云音乐」遇见陌生人-听歌交友产品体验：使用网易云音乐的一起听功能，除了能分享给好友外，还可以选择“遇见陌生人”，系统自动匹配兴趣相投的陌生人并添加进来一起听歌。设计思考：自网易云音乐“一起听”上线以来，深受广大用户的好评，原来听着寂寞的歌曲并不会寂寞。基于不同的需求，心情不好时，邀请闺蜜一起听；有新歌发行时，邀兴趣相投的好友一起听.....，但是，并非每次都那么方便，需要好友资源、相同时间、同一个音乐应用等诸多条件，有时候邀请发出去之后，收到的只有尴尬。网易云音乐的一起听最新版本上线了“遇见陌生人”功能，这个功能能够让两个彼此之间不认识的人同时收听一首歌曲，对于有很多心事的人而言，这的确是一个可以让你袒露心声的好机会。和陌生人一起听歌，还能通过听歌来交友，实现了更多有趣的交流模式，让用户在听歌的过程中找到志同道合的好友，不得不说，这个功能真的很贴心。02.「酷狗音乐」再也不用死死盯着歌词页面了产品体验：在酷狗音乐设置中可开启桌面歌词，按住歌词卡片拖动调整摆放位置（限设备四角），还可以通过滑动使其吸附在设备两侧，待需要时再拖出来，点击卡片关闭按钮，歌词关闭，歌曲也随之停止播放。设计思考：曾几何时，智能手机还未普及，我们偶尔听到一首喜欢的歌曲，赶紧回去打开电脑，开着桌面歌词，跟着学了起来。看着桌面歌词，跟随节奏，可能是学歌最快的方式了，在KTV看着屏幕唱歌就是最好的例子。随着后来智能手机的普及，听歌/学歌确实方便多了，任何地方、任何环境（耳机）随时打开APP就行，不知大家有没有发现，虽然听歌的次数、时间都增加了，很多歌都能哼上几首，但正经起来，好像什么歌都不会唱，要想学还得盯着APP播放页的歌词，太过局限，很多人都不想浪费这个时间。酷狗音乐的桌面歌词就方便了很多。从设置中开启桌面歌词，用户在听着歌曲时逛淘宝、聊天、看书都可以随时浏览歌词，如果歌词卡片遮挡了手机内容，拖到边缘隐藏即可，非常方便有查看、摘录歌词的需求的用户使用，同一时间做着几件事情，省时省力，何乐而不为呢？03.「微信」8.0浮窗-没有最好、只有更好产品体验：微信上线8.0版本，浮窗由之前的“边缘吸附-只显示标题”调整到了“左上角-显示网页预览图”，多个浮窗更清晰。设计思考：记得以前，使用微信浏览网页时，如果中途退出，下次就得重新打开，真心麻烦，用户在此痛点的诉求下，浮窗功能便诞生了，从此，聊天/刷朋友圈、看文章不再艰难，中途停止，用浮窗挂在屏幕边缘就行了，其方便程度自然不用多说。微信一直致力于用户体验而不停的探索，正所谓没有最好，只有更好，即使上线了某个能让用户开心尖叫出来的功能，其团队也不会止步于此。微信8.0版本在上了一波“吊炸天”的功能后，也顺带优化了浮窗功能，不得不说：比以前好用多了。入口固定在了左上角，解决了之前悬浮设备两侧遮挡内容需要拖来拖去的问题，有多个浮窗时，也不用花太多时间回想哪个是自己想要的网页（之前只显示标题），通过缩略图就一目了然，能有效减少用户思考而带来选择性困难的问题，极大方便用户使用，考虑真的很人性化。04.「Boss直聘」绑定微信-重要消息再无遗漏产品体验：在Boss直聘设置功能里，进入通知和提醒，按照提示绑定微信并开启消息通知，就可以通过微信接受Boss直聘引用里的沟通信息了。设计思考：对于现在的白领技术人才，很大一部分都是一边工作一边求职，以求某得更好的前程或更高的薪资，毕竟很优秀的公司还是在少数。不管在一个企业做了多么久，只要实力相当，跳槽涨薪远比待在一个公司提薪来的快，这是一个被业界公认又不会被挑明的真相。基于本身就在工作的原因，求职不会那么的明显，投递简历之后，更不会长时间停留在求职应用里，等到下班去看时，因为长时间未回复消息导致机会稍纵即逝。Boss直聘的微信“代收消息”能帮助用户解决这个难题。通过设置中的消息与提醒，绑定微信，方便用户能通过微信及时收到重要的求职沟通信息，再也不用担心错过重要消息了，十分方便，为心中有“小九九”的求职者提供了很大的便利。05.「QQ」自习室-换种方式学习，不一样的收获产品体验：在QQ的“动态”Tab功能里，进入自习室，能看到正在学习的人数，“点击加入”便可跟其他小伙伴一起学习了，学习中可相互够沟通、点击他人头像“充电”等，很有仪式感。设计思考：不知大家是否有过这种经历：想每天早上起来跑步，可没坚持两天就被各种理由征服；想决心减肥，可控制不了自己的嘴巴和食欲，连减肥的想法都没有了；想睡前看书，可抖音、游戏、追剧一直刺激着自己的大脑神经，最后书本只能放在家里吃灰。想努力的人总是能给自己定下每天的学习目标，做好学习计划，但是没过几天就坚持不下去了，没有意志力，整个人总是陷入焦虑的状况，放弃，又不甘心，重新开始又放弃，这样的恶性循环持续下去，可还是在原地打转，有没有想过换种方法试试。进入QQ的自习室，我们就可以和更多小伙伴一起学习学习交流、互相鼓励，虽然是在线上，感觉有些虚拟，但针对自制力不强的同学却能起到获得坚持下去的动力，一群人在一起学习比一个人更有学习氛围和仪式感。（不要抬杠，报过网课同学都清楚，看直播课通常会有更强的吸收能力，而课后看回播不仅会把时长翻上两倍，其吸收能力也比较差，直到看不下去放弃为止，少数自制力很强的除外。同样的道理，在图书馆看书比在家看书的效率也能翻上好几倍）06.「百度地图」出行前的“极端”天气预报产品体验：使用百度地图，导航路线规划后，会出现当日的天气提醒，点击进入即可查看每个时段的天气预报。设计思考：“赌博看运气，出行看天气”，任何时候，大家如果优先知道天气情况就可以提前做好准备，这对人们的生活方便起到很大的作用。尤其是出行，天气的变化是影响我们是否携带雨伞、交通工具选择、保暖问题的重要因素，所以提前预知天气的重要性可想而知。使用百度地图APP，导航路线规划后，出行方式的下方会提示最近可能影响到出行问题的天气变化，便于用户选择更合理的出行方式及交通工具，避免受到恶劣天气变化的影响。还可以通过点击进入，查看每个小时的天气详情，对于时间不是很敏感的用户来说，为了错开恶劣的天气，提前或延迟出行也是一种不错的选择。07.「搜狗输入法」“跨界”复制/粘贴产品体验：电脑和移动端都使用搜狗输入法，且在同一个账号登录的情况下，电脑端出现文字复制的操作后，可在移动端设备任何位置的输入框内直接粘贴，非常便捷。设计思考：输入法给大部分用户的第一感觉就是用来输入文字的，哪个好用用哪个，一旦习惯了使用某个输入法，基本就成了忠实用户，不会随意去改变。不过有时候输入法只是辅助作用，并不需要直接使用，比如：我们在电脑网页看到自己喜欢的文案语录时，想发个朋友圈，就需要先复制，再用电脑端微信发到手机微信，最后从手机微信复制再到朋友圈粘贴，虽然很麻烦，用户还是可以接受的，不然通过自己码字就会浪费大量的时间。搜狗输入法的黑科技一直都很多，比如图片英文翻译、智能助手、文字扫描提取等，都是非常实用的功能。最近发现了一个新的设计细节，让人惊呼。当电脑和手机端都使用搜狗输入法且登录同一个账号时，在电脑端复制文字后，打开手机端任何输入窗口，即可看到在电脑上复制的文字，直接粘贴即可，由被动辅助变为主动摄取，再也不用通过聊天工具发送到手机端进行二次复制的繁琐操作了，实现“跨界”复制/粘贴，非常方便。可以看出团队站在用户体验的角度上，对于输入法使用场景的串联考虑是非常贴心的，不仅能再次俘获一大批新用户的芳心，也能提升老用户的使用忠诚度。08.「支付宝」蚂蚁森林/庄园-模拟现实世界的自然规律产品体验：在支付宝蚂蚁森林/庄园里，白天和夜晚分别使用了不同的场景，模拟现实世界中的自然规律，白天晴空万里、且有阳光照射，夜晚满天繁星、且有流星划过，颇具真实感。设计思考：几年前QQ牧场养殖、农场偷菜，如今演变却变成了支付宝的蚂蚁庄园养小鸡、森林偷能量，将以前的纯游戏思维转变成了如今的游戏+公益的形式，不仅满足了用户小游戏的需求，还能促进公益事业的发展，同时用户也会得到心理上的满足和成就感。蚂蚁森林/庄园小游戏对用户产生的粘性除了其模式的新颖，也离不开产品团队日夜刻苦钻研所提升的用户体验。蚂蚁森林/庄园的视觉场景跟随着白天、夜晚的环境变化，产品遵循现实世界惯例来呈现信息，更具真实感，便于用户在使用中将现实中的体验不经意间带入到游戏场景，可使其更加投入，通过用户的现有认知，以促成情感化的体验，使产品更具亲和力。09.「躺平」趣味化的“击掌”点赞产品体验：在躺平APP对其他用户的发表的动态推荐时，使用了击掌图标，且有光彩线条围绕着掌心向四周扩散的动效样式，趣味性十足。设计思考：推荐是对其事件/事务认可的一种表达行为，最早可追溯到上古时代的尧舜禹时期，那时候如果对某件事或人，高度认可时就使用鼓掌（慢速且有节奏）的方式来表达；到后面慢慢演变成了简单的一个字“彩”；再到如今皆可用鼓掌、竖大拇指或直接言语...表达。基于互联网的发达，为了让更多人发现其内容资源的优质性，80%以上直接沿用了竖大拇指样式来表达对内容的认可及赞许，即使有区别于其他产品，也是在局部或动效样式上做出一点改变。躺平APP的点赞样式较为新颖，使用了击掌的图标，并且使用了光彩线条围绕掌心向四周扩散的动效样式，相比竖起大拇指则更加强烈，意味着喝彩，表达了对内容的高度认可，相较于同质化严重的情况下作出了创新，

设计不是拼图，深入下去，有很多细节需要推敲，而这些细节的背后的逻辑与意义更值得关注。产品主要强调的是与人的交互，用户通过对产品的操作来实现自身的目的，比如双击，滑动，常按等，而操作一般建立在产品的功能基础上，产品的功能细节体现在产品的业务逻辑中，产品所提供的功能是否更好的满足用户的需求，操作细节与功能细节密不可分，功能影响着用户的操作，而操作细节更多体现在用户的感受。01.「淘宝」让优惠券合理使用的优先级设置产品体验：在淘宝的红包卡券列表页，可根据自身需求的实际情况设置优先使用类型，以达到优惠券的合理化使用。下单确认时，系统会自动选择事先设置好的类型，依次对订单金额使用优惠券进行减免。设计思考：只要我们出门走上街头，就会看到各种各样的优惠券在向我们招手，逛一圈回来，手里能攥一大把优惠券。即便是在家，楼梯道、门把手上、门缝下面都会有优惠券塞进来，多券在手，我们总是会去琢磨怎么花费最划算。不只是线下如此，线上更是夸张，每注册一个电商平台，都能收到一堆优惠卡券，而且还是日更新的。商家都知道，在打折促销日渐平常的今天，消费者很难会再有强烈的购物冲动，单纯的打折降价已经不能给消费者直观的感受了，额外的优惠才能对消费者更有吸引力。为了提高店铺转化率，吸引流量，商家或平台都会发放一些优惠券，让消费者有“实惠”的感觉，更有利于拉动二次进店，以驱动用户买下更多的商品。其实优惠券发放给消费者之后并非不闻不问，还需要考虑通过何种方式发放、如何提醒、如何促进消费转化都值得深究，如果优惠券过期，表面上看是用户的损失，实际真正得到损失的是平台/商家。在淘宝的红包卡券功能里，可设置优惠券的使用优先级，便于用户在下单时按照自己想要的方式让优惠券合理化依次使用，比如依据过期时间的先后、优惠力度的大小等，便于达到最大化利用。在消费者的心里，优惠的金额即自己赚到的金额，不仅能让其感受到优惠的强度，还能有效避免优惠券的浪费，有利于平台/商家发放的优惠券最大程度的使用，提高消费下单转化率，达到消费者、平台、商家三方共赢的目的。（PS：如果每次都是平台默认选择，难免浪费，比如一张8折优惠券用在10元的商品上，远远不及用在100元的商品上划算：用户的消费思维）02.「QQ」消息图标-“摸一下”就能拉近距离产品体验：双击或按住QQ下方消息小图标往四周拖动，就会变换各种不同的小表情，俏皮可爱的表情非常有趣。设计思考：Tab栏的作用主要是做内容分类，节省设备的空间，在用户需要的时候随时可以点击。可以想象一下，如果没有tab栏给大的模块分类，应用的功能全面铺开，就像进入了一个大型垃圾场（轻量型应用除外），乱糟糟的感觉。Tab栏本身就是承载多个功能集合的一个入口，其点击量影响着用户的使用频率和操作深度，直接关联着转化率的问题，所以很多应用也会在视觉呈现样式、交互手势、情感化、微动效等方向下功夫，用来吸引用户去点击，为其增加点击量及操作频率。QQ的Tab栏消息图标就使用了趣味化的微动效样式，双击、或轻触图标往四周摸一下，图标就会变换各种不同的小表情，真的是让网友震惊了，通过趣味性的表情变化，也可让用户的心理情绪也随之改变，俏皮可爱的图标样式在保证识别性的前提下增加了亲和力和趣味性，拉近与用户之间的距离。趣味化的表现方式且与年轻人生活圈接轨，体现用户时尚潮流的文化基因，时刻用户保持着新鲜感。（PS：上图中只是举例了其中几个表情，如果想了解更多，请进入QQ应用中体验）03.「百度地图」未来出行-提前规划行程变得轻而易举产品体验：①、使用百度地图自驾出行，选中其中一条路线后，点击左下方的出行建议，设定出行日期及时间，系统以每15分钟为一个时间段，计算出每个时间段出行预估的耗时，并推荐最优出行线路。②、选择公交/地铁出行时，除了应有的路线指引，还提示了未来的时间段用该出行方式存在的故障及延时信息。设计思考：出行驾车如何避开堵车高峰？如何选择合适的时间打车？公交/地铁常用线路何时会出现特殊情况停运晚点等，这些很多无法确定的时间经常困扰着大家。眼看着春节假期就来临了，这么好的旅游机会可不能在家中“躺尸”式的荒废度过，想必有很多人已经相约着去游玩一番的准备，不过经常会碰到途中堵车、路线封闭、交通工具停运等问题的出现，真的是让人“头大”。①、百度地图的“未来出行”功能，自驾可提前设定出行时间，查看未来出发时刻的相应耗时，未来时刻以每15分钟为间隔，滑动时间柱就能了解哪个时间点出发耗时最短，还可以向下滑动页面，进一步了解每一段路程的详细用时，让周末出游的用户，提前规划行程变得轻而易举。②、还可以精准预估“地铁进站”、“公交候车”的耗时，以及预估公交地铁的拥挤情况，让用户出行更添安全感，提前了解未来搭乘公交、地铁时已确定会出现的突发状况，便于提早预算换乘交工工具，节约出行时间，提高出行效率，还能方便用户下班回家避开晚高峰。04.「高德地图」出行前-人性化的天气提醒产品体验：进入高德地图首页，如果是雨天，页面视觉会显得比较暗，能看到乌云及明显的雨滴落下，3秒后回到正常状态。设计思考：不知小伙伴们是否碰到过这种情况，带着雨伞从来不下雨，下雨的时候都是没有带雨伞；打车后前往上车地点发现在下雨，要么取消订单，要么去买雨伞，总是那么的事与愿违。变化不定的天气是最为影响出行的一项因素。而面对忽晴忽雨的天气，如何才能顺利出行呢？使用高德地图，进入地图首页时，界面会出现天气动效，提示实时的天气状况，尤其是下雨天，可以提醒用户出门记得带雨伞，还便于用户根据实际的天气状况选择合适的交通工具出行，不论是打车、公交还是骑行，都可以随意调整，在用户出行之前通过视觉强调提醒，非常实用。05.「微信」公众号文章在看-让你看个够产品体验：在微信公众号的文章底部，点击在看，底部会展开一个新版块“喜欢此内容的人还喜欢”，给用户推荐相似文章。设计思考：阅读量怎么样，要看标题起的吸不吸引人，文章内容质量怎么样，要看转发量的多少。我们都知道，微信有很多公众号都会产出质量较高的文章，所以也被誉为继线上看书之后的又一个知识发源地。将公众号的文章拉到底部之后，“在看”也是一个不错的数据统计，点击过“在看”的读者，不仅预示着对文章的肯定，同时也能增加文章的阅读量，形成二次传播，在微信公众号的文章底部点击“在看”后，会出现新增的相关文章推荐版块，并提供公众号名称、文章标题、点赞数和文章封面图片等，对公众号主和自媒体的人来讲，文章曝光和阅读量的提升又多了一成机会，为读者推荐与原文相似或者同频的文章类型，既能满足引导用户继续探索的目的，还能通过所有公众号相互串联，让其他公众号的文章都有机会增加曝光和展示，进行流量分发，两全其美。06.「QQ音乐」跑步电台-让枯燥的运动变的更有趣产品体验：在QQ音乐的设置里，通过跑步电台选择适合自己跑步速度频率对应类型的歌曲播放，一边跑步一边听歌，为自己提供跑步节奏和坚持的动力。设计思考：基于现在快节奏的生活状况，很多年轻人在午餐后直接睡觉、晚饭后常坐不起，这就是大批年轻人无法控制自己身体、越来越胖的原因。“喜欢”跑步的的人群越来越多，但众所周知，跑步需要极强的耐力和自律来控制自己坚持下去，但大部分人都挨不过三分钟热度，定下跑步目标时来势汹汹，放弃时就借口连连。如果在跑步过程中感到非常无聊，就不妨用下QQ音乐的跑步电台，选择一首适合自己跑步的神曲吧。QQ音乐的跑步电台根据自己跑步的频率推荐适合的音乐，有适合慢跑的、快跑的、节奏感强烈的、专业人士的推荐......再加上QQ音乐本身带强大的歌曲库，在跑步过程中可以听到不同曲风的好歌，让跑步停不下来。用户在跑步之前一般都会设定时间或距离目标，在跑步时不停的查看数据（类似小时候在学校上着40分钟的一节课，经常查看还剩几分钟下课），播放着跑步电台的音乐，能引导用户的思维偏离设最初计定的目标，将部分思维想法转换到音乐的节奏中，给自己提供更多的跑步动力，则坚持的更久。另外，还可以设置“按步频匹配音乐”，免去手选，系统根据实时的运动频率，自动为用户精准推荐符合该频率的歌曲，让原本枯燥的运动变的更加有趣。07.「腾讯视频」暖心的提示建立信任的桥梁产品体验：在零点以后打开腾讯视频，横屏观看影片，顶部以“夜深了”温馨的提醒，暗示“熬夜党”以身体健康为重，放下手机早点休息。设计思考：在几年以前，就报道过关于网吧通宵熬夜猝死的新闻。而如今互联网时代，基于电脑、智能手机的普及，去网吧上网的人的确少了，但相同的悲剧新闻却更多了，比如躺在床上熬夜逛淘宝、刷抖音、嗨聊、追剧等，一夜过去就没再醒过来（这绝不是玩笑，可能就发生在我们身边），只不过换了种方式，去的很“安逸”而已。使用腾讯视频观看影片，在横屏状态下，到了深夜零点以后，屏幕上方会显示“夜深了”，通过暖心的文案提醒用户放下手机早点休息，表达出对用户的关切之意。语言是情感化设计最直接的利器，这种提示虽然没有直接中断用户观看视频，却很直接的将用户线上思维转换至现实的场景之中，充分的考虑到用户的身心健康，以情感化的方式引起用户警觉，促使用户结束观看，表面上看似缩短了该用户的使用时长，实则跟用户之间建起了一座相互信任的桥梁，以提升用户后续的使用粘性，增减其忠诚度。08.「躺平」动态IP插图-促使用户进一步行动产品体验：进入躺平APP关注（首页）页，当页面数据为为空时，Tab栏上方会出现IP插图，通过动态的指引方式引导用户进入发现页关注躺友，以获取内容信息。设计思考：在我们使用的众多应用中，大部分的空数据页面都仅仅只提示页面状态，甚至有的一片空白，无任何提示都，并没有合理的引导用户如何去获取数据信息，会导致用户疑惑或焦虑，对产品产生不信任感，从而造成用户流失，因用户量的减少直接影响整体业务运转，得不偿失。躺平APP的空状态利用IP打造了一套颇具独特风格的视觉形象，用一种“贱贱”的表现方式，映射出了主流用户最真实的姿态，可谓是“人贱人爱”。进入躺平首页，当没有好友、页面数据为空时，通过动态IP插图明确的行动指令引导用户去关注躺友，以获得数据内容，能让用户快速地进入到产品使用中，减少用户的疑惑和焦虑感。同时，动态的表现方式更具点击欲望，让交互行为更加活泼有趣，不仅能正确的引导用户，也是转化用户进一步操作好方法。09.「爱奇艺阅读」会“冒泡”的TabBar栏产品体验：点击爱奇艺阅读Tab栏的冒泡图标，除页面切换之外，图标还会向上冒着气泡，动态呈现方式非常有趣。设计思考：APP的Tab栏作为第一触点，对整个应用模块的分类起着不可替代的作用，还能检验应用整体的设计是否精致，其重要性不言而喻。很多设计师都会在图标风格及造型上下很大的功夫，但却常常忽视另外的一个关键点，即tab触发时的动效设计，合理的动画效果，能起到画龙点睛的作用，但在设计过程中一定要考虑什么样的动画效果更符合该产品的调性，传达出设计品牌及理念。点击爱奇艺阅读APP底部tab栏的“冒泡”图标，图标以动效方式呈现，其上方还会冒着气泡，2秒后自动消失，能降低页面切换后、内容刷新时需要等待的枯燥感，提升用户操作的愉悦度，且动态的表现方式相比静态更吸引眼球，以趣味化的方式增加视觉关注度，因此在切换

不管你是一个什么类型的设计师，想要做出优秀的作品都离不开长期经验的累积，那么去体验优秀的作品并找到优秀的点，挖掘背后的设计原因以及带来的商业价值是必经之路。灵感有时候来源于灵光一现，但更多时候来于自己设计信息的脑存量。在体验优秀的作品时，我们需要站在用户的角度去发现好设计细节及交互解决方案，思考能给企业或用户带来价值并记录下来，久而久之，就能提高自己的语言组织以及总结能力，再通过不断的练习，以达到质变效果。01.「酷狗音乐」个性化的歌词设置产品体验：在酷狗的歌词页面，点击左下角的“词”入口，即可对歌词进行字体、字号、颜色、动感等一系列的个性化设置。设计思考：面对“百年”一成不变的歌词页面，用户早已产生视觉疲劳。对于视觉效果样式较为单一的设计形式，早已无法揽住用于的心了，用户喜欢的是要让更多的选择由自己来控制，其内心会产生一种成就感，也会间接对产品产生信任。酷狗音乐的歌词设置算是有心了，通过一系列个性化设置歌词样式，让用户随心所欲，满满的成就感。比如女生喜欢可爱萌萌的样式，可以通过选择较为卡通的字体、粉粉的歌词颜色来满足少女心；男生可以选择刚硬有力的字体、开启动感歌词来满足力量和节奏感。个性化设置可以根据用户的不同偏好及浏览行为进行自行调整，让界面看起来和同类产品截然不同，有特色的产品更容易让用户记住，提升使用粘性。02.「快手」交互手势-两个需求“一箭双雕”产品体验：在快手的精选视频栏目，页面左滑后，以单列的卡片样式把该创作者的所有作品显示在设备右侧，方便用户上下滑动选择，且不会打断当前播放的视频。设计思考：短视频类型的APP我们用过很多，因为其互动性很强，所有隐藏了很多交互手势，较有代表性的莫过于抖音和快手。左滑是比较常见的手势类型，在视频播放页面，用户都知道通过左滑可以查看该创作者更多的作品，但页面的跳转会中断当前正在播放的视频，要么看完左滑，要么再次回来重新观看，别无选择。快手APP将当前视频创作者的作品选择换了一种方式展示。页面左滑后，所有作品都会显示在设备右侧，用户可上下滑动进行选择，且不打断当前视频的播放，可谓是“一箭双雕”。在同时满足用户多种需求的情况下，节约用户大量的时间成本，提升产品易用性，以便用户在最短的时间内、用最简单的操作满足自己所需。03.「高德地图」导航语音包-拉近“距离”一键完成产品体验：在高德地图的导航设置中，可选择各种语音包，比如明星、网红、地区方言等，设置成功后，在接下来的导航行程中，所选择声音将一路伴随用户进行语音播报。设计思考：从目前的网红、明星直播带货中就可以看出，追星族对明星的追捧到底有多么疯狂，近似失去理智的将每个月收入都尽数投入到明星产品中，甚至入不敷出，所买的可能是一堆连自己都不知道为什么要买的东西，TA们不会放过任何一个能与明星虚拟接触的机会，这也让很多互联网的线上产品找到了营销机会点。高德地图在导航过程中的语音播报，就很好的利用了这个机会点。在导航设置的的语音包里选择自己的喜欢的明星进行语音播报，可以设想，在旅途中自己喜欢的明星一直在给自己引路，会有一种近距离接触的错觉，这似乎比听明星的歌曲、看电视剧更有亲近感，能间接满足自己小小的虚荣心，平台也能通过此种方式增加用户粘性。另外对于有思乡之情的用户，选择家乡的地区方言播报，

作为设计师，在拿到产品需求的时候，所要做的不仅仅是完成产品的设计工作，更重要的是要思考如何通过设计的的手段去推动产品背后的商业价值达到最大化，提升视觉体验、增强用户的粘性以达到用户转化的目的。不需要我们设计的有多么复杂，可能是一个步骤的简化、一句打动人心的文案、贴心的提示、趣味的动效...01.「微信」你使用过图片备注吗？产品体验：微信好友昵称除文字备注外，还可以使用图片备注，保存成功后即可在设置备注页面描述区域看到此前备注的图片，好友信息也增加了描述入口。设计思考：当我们的微信好友过多或因好友随时改变昵称的原因，而经常找不到，我们就会随手备注一个昵称或标签，以便需要时方便查找，但针对当面即时添加的好友，就算使用的昵称备注，可依然没有印象怎么办？其实微信的备注功能比我们想象的要强大，除了昵称备注外，还可以使用图片备注。当我们因工作接触的人较多需要添加好友时，短时间是没有办法把所有好友的个人信息都记熟，这时候图片备注就能助我们一臂之力了，另外还可以直接把客户的名片作为图片备注，将单个好友的信息集合，实现一功能多用。对于记性不好或短时间内添加好友较多的用户非常实用。02.「即刻」排版设置-帮你缓解视觉疲劳产品体验：在即刻APP的排版设置里，开启“中文标点挤压”和“段间距”，文本内容会自动减小中文符号后面的间距，且段与段之间也会增加留白，提高视觉舒适度。设计思考：我们在看文章或电子书时，都有过这样感觉，当篇幅较大时，到了一定时间，就会产生视觉疲劳或专注度减弱的情况。视觉疲劳的强弱程度，用户除了自行调整外，平台还能通过设计手段提升用户体验来缓解，常见的网络文章会在不同位置穿插图片来减轻用户的视觉压力，其电子书也会通过短篇幅的翻页来缓解视觉疲劳。在即刻APP的系统设置中，可通过排版设置提升浏览体验。开启中文标点挤压，文本将自动减小中文标点符号后的空白区域，避免间隔太大造成脱节，去掉不必要的空白，还能为内容节省空间，毕竟内容才是产品最重要的部分，所以不要没理由的去掉特地为它预留空间，“挤挤总还是有的”；其次开启段间距，即段与段之间视觉更加明显，第一反应就能感觉出这是两段内容（段落的结尾如果跟上一样最后平齐，傻傻分不清是衔接上一段还是新的一段），让用户浏览文本内容的思维更清晰且减少思考，提升节奏和视觉平衡感。03.「拼多多」通过搜索关键词建立情感链接产品体验：在拼多多搜索“生日蛋糕”时，商品搜索结果呈现的同时，会有满屏的蛋糕表情落下，以示祝福。设计思考：商品搜索框，顾名思义就是搜索商品使用，用户需要查找某个商品时，输入关键词，系统通过后台数据对关键词进行匹配，然后按照特定是顺序呈现出来，旨在满足用户的搜索需求而生。拼多多搜索功能除了满足用户的基本需求外，还增加了一个小细节，搜索部分特定的关键词，结果页会使用趣味化的微动效。比如，在搜索“生日蛋糕”后，会有满屏的蛋糕表情落下，给予用户生日祝福，通过营造情感氛围，获得用户的认可，跟用户建立情感链接以鼓励继续下一步操作。同时平台用趣味的微动效生日祝福通过情感、人性化的交互方式更受人用户青睐，可以让用户感到心情愉悦，进一步增加用户的信任度及粘性。04.「微信读书」替身书架-帮你瞒天过海产品体验：使用微信读书，如果自己所看的书籍不想别其他人知道，或者想假装自己在看某个领域的书籍，可在隐私设置中开启替身书架，既可以保护隐私，还可以满足面子心理。设计思考：有人说，线上看书的效果没有看纸质书籍的效果好，其实并非全部如此，主要因人而异，比如线上看书可以有效利用碎片化时间、不分场景等，不管是线上还是线下，都没有明确的界定，只要能坚持就好，坚持是一件很不容易的事情，比如很多用户喜欢把自己在看书这件事告诉所有的朋友，利用营造人设以追求自己的面子心理，通过好友的夸赞转化为自己坚持下去的动力。微信的替身书架就可以满足用户的多种需求，通过隐私可以设置一个“分身”来代替真实书架，开启后，替身书架将代替真实书架显示在个人资料中，除了隐藏自己真正阅读的书籍，保护阅读隐私，让自己不被“视奸”外，还可以满足用户的面子（装X）需求，满足用户想要被看到的一面，利用替身书架经营自己人设的需求，比如最近在读的书籍类型、领域等，通过“造假”的方式满足自己的虚荣心，来获得他人的认同感。替身书架一定程度上可以通过裂变手段把获取的新增用户转化为活跃用户，同时满足了用户保护隐私和营造人设的需求，一举两得。05.「网易云音乐」视频歌单-边听边看更便捷产品体验：在网易云音乐听听歌时，如果遇到喜欢的视频，也可以收藏到视频歌单了，从我的-收藏和赞入口进去就能看到。设计思考：一直以来，歌单是网易云音乐的核心功能，网易云音乐也是唯一一个将歌单作为核心架构的音乐产品，当我们碰到一首非常喜欢曲时，可能也会钟情于该歌曲的MV，边看边听似乎能更好的融入歌曲的“灵魂”中，如果我们需要再次播放该MV，就要从这首歌曲处找到相应的入口。网易云音乐8.0版本最新推出了视频歌单功能，延续了用户喜欢的“歌单”模式，根据自己喜欢的歌单主题，将MV，视频、mlog内容聚合在一起，做出一个好听、好看，好玩的视频歌单，让音乐动起来，省去了以往每次找视频的一系列繁琐操作，优化路径，让边听边唱的体验更加便捷。06.「微信」朋友圈视频静音播放-减少噪音污染产品体验：在微信朋友圈，长按选中视频，然后从弹出的选项中选择“静音播放”，跳转到视频播放页面后是没有声音的。设计思考：朋友圈作为现在获取好友信息的主要场所之一，很多的用户都会在朋友圈发布图文、短语、视频等类型信息。我们通常习惯性的每隔一段时间就想去朋友看看，当看到非常感兴趣的视频时，就激动的忍不住点了进入，没想到突然来了一段劲爆的音乐，此时地铁上的人都诡异的看着你、正在午休中的同事在仇视你、上班中的领导皱着眉头看向你，就问你，尴不尴尬？其实在微信朋友圈看视频，很早就设计了这样一个细节，长按该视频，选择“静音播放”跳转到视频播放页面，此时播放视频时没有声音的，如果担心视频里的声音影响到自己或他人，可以使用静音播放，虽然事前把手机音量减到最低也可以解决这个问题，但可能导致忘记将音量调回来而造成来电或其他声音通知的信息遗漏。静音播放还能方便“摸鱼党”在上班时间给自己来一个小小的放松，避免众目睽睽之下太过张扬给自己带来不必要的麻烦。07.「饿了么」趣味/情感化-有温度的交流产品体验：在饿了么骑手信息页面，点击蓝骑士头像，头顶的蓝色竹蜻蜓会旋转2秒，且配有玩味性质的toast文案，趣味性十足，时而引发会心一笑。设计思考：眼尖的细心网友可能已发现，之前我们在饿了么点外卖，待骑手送到去取餐时，骑手头盔上有个蓝色的竹蜻蜓，这个不仅仅是装饰作用，更是对优秀骑手的一种激励政策。竹蜻蜓不仅是骑手身份的象征，还因“皮肤”的创意让外卖骑士职业在社交平台攒了一波人气，随后美团也在头盔上增加了袋鼠耳朵、美猴王的“凤翅紫金冠”等。如果你在线下没有看到，没关系，饿了么已经把竹蜻蜓搬到了线上，俨然已成了饿了么的品牌形象。在骑手的个人信息页面，点击头像，竹蜻蜓会转动，利用toast弹窗配合文案提示，趣味性十足。用户在常规的APP页面交互过程中本来只为满足一个需求而经过的必要流程，用趣味化的方式体现，虽然没有实质上的帮助，但会给用户带来惊喜，让整个操作过程感到放松、愉悦，也是情感化设计的体现，用户偶尔暖心一笑，让冷冰冰的页面变成了有温度的交流，极大的提升了用户体验。08.「高德地图」长途信息-途中所需一览无余产品体验：在高德地图路线预览时，点击长途/沿途信息，即可查看路线所经过的加油站、卫生间及服务区等沿途信息。设计思考：有网友说，好多次想在开车的过程中去加油，又不想绕路，又特别的想找中石化而不是中石油，每次遇到这种情况都觉得导航软件不够人性化。其实不仅如此，在开车途中，有时候也有餐厅、汽车维修、取款等方面的需求。高德地图的沿途/长途信息，可让用户在出行之前把需要了解的信息一览无余，提前会有心理预期，当我们行驶在高速路上，需要知道接下来距离加油站、餐厅或汽修还有多远时，高德地图的沿途搜索功用恰好能够处理用户的当务之急，考虑周全且人性化。09.「爱奇艺」导航标题字-贴心的界面环境适配产品体验：爱奇艺首页顶部导航切换时，主题背景跟随切换后，标签文字也使用跟主题背景相近的色值，让视觉更柔和。设计思考：在我们用过大多数的APP中，常见的大标题都是主题色、深色或白色，所以在不同的背景色环境中显示，视觉的舒适度总是没有那么高，也验证了一句话“合格的设计千篇一律，优秀的设计百里挑一”。爱奇艺首页顶部导航切换时，其标签文字的色值会跟随主题色一起切换，让文本逐步接近背景色，视觉上更加柔和，相比常规性的“千篇一律”舒适度更高，提升了视觉体验，还能起到降低视觉疲劳、保护眼睛的作用。这是一个很容易被设计师忽视的好功能，可以看出来，爱奇艺的团队对界面环境体验的考量是很贴心的。10.「虾米音乐」横屏磁带效果-满满的回忆杀产品体验：使用虾米音乐听歌，在播放页面横屏时，界面会变成早起的音乐播放工具“磁带”样式，颇为复古，上滑弹出多种场景音效选择，并用不同颜色的“磁带”外观区分，点击“磁带”的两个孔可切换上/下一曲。设计思考：《荆轲传奇》电视剧中最让我记忆最深刻的一句话是“这个故事虽然已经过去了2200多年，但依然会留在我们的心中，代代相传”，而今天的虾米音乐也将成为历史。相信所有虾米粉都收到一则即将停止运营的线上通知，且启动页也变成了告别画面，让用户一阵心酸，启动页的那一声告别，最后的希望也将破灭。2021年1月5日10点：停止账号注册、会员充值、虾币充值、专辑购买等服务；2021年2月5日0点：停止所有歌曲试听、下载、评论等所有音乐内容消费场景，停止个人资料导出或下载；2021年3月5日0点：运营停止，关闭服务器，届时及以后将无法登录......当看到这则消息时，虾米粉们有些泪目了，颇有壮士一去不复返的悲壮之感，虾米音乐从上线到至今都没有让用户失望过，尤其是音乐实验室一直都是音乐界里的黑科技。虽然即将成为历史，但有的设计细节仍值得我们记住。使用虾米音乐听歌，将播放页面横屏，画面变成转动的磁带效果，其中还隐藏了几个交互手势，点击磁带的左右两个孔可切换上/下一曲，上滑选择场景音效，颇为经典的复古效果给用户来了一波满满的回忆杀，通过突出的视觉样式，给用户带来美好的回忆，达到增强用户记忆的目的。让用户用一款产品很容易，记住一款产品却很难，虾米音乐的磁带效果真正起到了画龙点睛的作用。往期回顾：结语设计师需要养成体验产品的好习惯并将优秀的产品细节记录下来，加强自己的记忆，不仅能提升自己的语言组织和总结能力，也为日后输出优秀的作品当铺垫，对自己的能力提升以及未来的职业发展带来便利。扫码关注

在设计领域，相较于平淡无奇毫无重点的界面设计，其具有良好视觉层次结构的设计更受用户青睐。在设计过程中可能会纠结于各种可能性，比如是让文字变大还是变小，或者增加(或减少)元素周围的留白，颜色是该深一点还是浅一点等。其实不管何种呈现方式，设计出美观、高效和可用的UI界面需花费很长的时间，需经过反复的修改，最终才能打磨出令用户满意的产品，在满足公司战略及功能需求的情况下，其修改和优化还可以从细节上入手。01.「支付宝」避免超额消费的花呗闹钟产品体验：在支付宝花呗的消费闹钟功能里，可设置每个月的消费限额，当花呗支付使用超额后，会收到对应的消息提醒。设计思考：随着互联网的迅速发展，人们生活水平提高的同时、消费水平也越来越高。各种消费信贷产品如雨后春笋一样冒出来。花呗自出现后就深受人们的喜爱，首先是便捷的支付方式；其次花呗的申请门槛比较低，不论是学生，还是无业游民或其他没有稳定收入的，只要芝麻信用分达到650分以上就能开通，在拥有额度后，就可以在支持花呗支付的平台提前预支消费，到次月再还款，因此花呗的便利性就完全体现出来了。但总是有一部分用户在每月出账单需要还款时才发现，消费的额度远远高于自己的收入，甚至无力偿还。花呗新推出的消费闹钟功能，对于花钱没节制的用户来说，真的特别好用。在消费闹钟里设置提醒金额，点击确定设置即可，当使用金额超过用户设置的金额，将会收到提醒消息。此功能既可以减少用户超额花费的可能性，也能有效避免用户因无力偿还账单而给平台带来的经济损失，可谓是一举两得。02.「滴滴出行」关怀模式-老年人的出行福利产品体验：在滴滴出行的设置中开启关怀模式，系统会将字体放大且展示功能极简的打车模式页面，方便老年人使用；设计思考：滴滴出行主要面对的是年轻用户群体，因涉及到支付宝、地图等线上线下功能的结合，操作流程复杂且使用起来学习成本较高。在当前移动互联网时代下，老年人如何能真切感受到现代智能科技所带来的便捷、人文关怀和尊重，是如今的移动平台所要解决的问题。滴滴出行的关怀模式，就是专为方便老年人出行而推出的。老年用户在APP设置中心开启后，可快速进行一键下单操作流程。关怀模式支持大号字体显示，能提前设置五个常用地址，方便在下单时进行一键操作，简化了下单流程及删减了部分页面内容。不管是大号字体还是精简流程，都便于视力不好的老年用户叫车出行，不仅有效降低了在线叫车操作的复杂程度，也能缓解老年用户在叫车过程中出现的不确定性和焦虑感，提升了出行效率。03.「爱奇艺」搜索分类-让结果更精准产品体验：在爱奇艺使用搜索时，展开搜索框前面的类型，可选择全网、图搜剧和词搜剧，以更精确的匹配搜索结果。设计思考：很多设计师认为搜索很简单，设计一个搜索框加搜索图标放在主页顶部就搞定

在互联网产品日趋成熟的今天，APP同质化越来越严重，使得设计不够精致、没有气质及品牌感。一个设计精致APP不应漏过任何一个细节，美观、可用和高效的界面设计都需要花费大量的时间从细节上去打磨，并从多方面钻研并创造出打动人心的UI/UE设计。01.「菜鸟」备注-快速找到列表中的包裹产品体验：菜鸟的包裹列表，左滑其中的一个，可通过包裹备注修改名称，方便用户在包裹较多时有目标的查看。设计思考：网购已成为用户的日常习惯，没事的时候淘宝逛一逛、京东走一走、不急用的就在拼多多砍一砍。但网购平台何其之多。我曾经碰到过这种情况，在不同的平台都买了商品，其中有急/不急用的。最为难熬的就是等待物流了，频繁的奔波于各大电商平台个人中心的订单页面查看最近物流状况，步骤繁琐不说，还浪费大量的时间，手机差的还会闪退卡顿，相信这也是很多网购用户的苦恼，直到菜鸟包裹的出现......菜鸟定向的集合各大物流平台的包裹数据，通过手机号码，将单个用户的包裹归类到一个地方，非常方便。在使用过程中，还有一个很友好的设计细节，包裹名称备注。在包列表中，可选中其中的一个包裹左滑，对名称进行备注，便于用户包裹过多时需要对其中部分包较急的包裹进行频繁的查看，备注之后一目了然，能降低因误点造成重复操作的可能性，快速找到想要的包裹，方便用户有目标的查看。02.「虾米音乐」符合产品特性气质的标签栏产品体验：虾米音乐顶部标签栏的选中状态，文字放大的同时配合一段起伏较大的音频波纹动效，彰显行业产品特性。设计思考：标签栏是APP界面中较为常见的控件之一，在视觉表现方面，只有选中、未选中两种状态，其设计也比较简单，通常会在文字颜色/字重大小上进行变化，标签下方加上小长条来区分两者的状态，用户对于这种表现方式也是高度认可的，如果不想被同质化，未在细节上下足功夫，就很难设计出彩。虾米音乐的标签栏选中状态除了文字大小对比非常明显外，下方是一段音频波线动效，跳脱出较为常见的设计规范限制，从行业属性中获取灵感，把用户在现实世界中物理认知的“声波”形象来源作为产品特性，提取出具有独特气质的视觉音频波纹样式替代选中状态的小长条，这样能建立起视觉上的联系，让用户产生由内而外的一致感受，既有设计感又符合产品特征。03.「QQ音乐」触手可及的选择性MV播放

在互联网产品日趋成熟的今天，APP同质化越来越严重，使得设计不够精致、没有气质及品牌感。一个设计精致APP不应漏过任何一个细节，美观、可用和高效的界面设计都需要花费大量的时间从细节上去打磨，并从多方面钻研并创造出打动人心的UI/UE设计。01.「快手」刚刚看过-贴心的用户提醒产品体验：从快手“精选”栏目进入用户主页，在作品列表将所浏览过的视频上标记刚刚看过，避免重复点击观看。设计思考：身处移动互联网浪潮之中，我们不难发现，如今的短视频把用户的卷入和参与推向了一个新高度，尤其是生活在大城市高度压力下的年轻用户群。学累了，就想刷个小视频放松下，真以为然后就能集中精力再去学习？其实都是在扯淡，总觉得接下来的某个视频会有种奇异的魔力，一刷就停不下来，就好比在无边无际的海洋中，越喝越渴，别说自身难以碎片化学习，就连老人和小孩都带进来了。抖音和快手作为目前短视频的代表，都有着庞大的用户群，在用户需求基本都能满足的条件下，其战略方向准确的基础上，谁的用户体验最好，谁就是最后的赢家。快手APP虽然被后来者抖音赶超，但在用户体验上从未含糊过。细心的用户可能会发现，在用户主页的作品列表中，刚刚看过的短视频做作了提醒标记，告知用户少走冤路，避开已看过的短视频，可以避免用户因重复点击观看而浪费时间，且在非WiFi环境下，还能节约用户的数据流量，这个提示算是很贴心了。02.「腾讯视频」VIP栏目-免费营销策略转化用户产品体验：腾讯视频VIP栏目中的电视剧，基本都可以免费看前面的几集，然后根据剧情的发展程度，从免费变成付费，未完结的电视剧还可以通过二次付费进行超前点播。设计思考：免费的东西人人都喜欢，古今中外大都如此，免费策略营销也因此有强大的生命力。但互联网应用如若完全免费，不具商业性，可能连基本的日常生活都难以维持。大家都知道，会员付费是影视类应用盈利的一大来源，但用户对付费造成自己财产损失有种天然的抗拒，通常电视剧都提供几集免费观看，然后才硬性要求开通VIP。视频类应用大都如此，这里以腾讯视频为例。不难发现，付费区不同的电视剧，其免费观看的集数不同，这并不是随意设定，而是根据剧情的发展程度，在某个“高潮”即将迭起的那一集开始收费，通过免费阶段的观看，对用户产生一定的吸引，勾起想要看下去的欲望，从而出现付费动机以促成用户开通VIP。这其中还有一部分互惠原则存在，即给用户免费一部分之后，降低用户付费的心理负担，提高对费用的接受程度，来而不往非礼也。针对未完结的电视剧，如果热度较高，在用户的观看欲望高涨之际抓住机会点，通过二次付费提供超前点播，用户也随之接受。不管是强制VIP还是二次付费点播，其都需要在合适的时间、合适的地点予以合理的出现，才有利于最大程度的转化用户。03.「支付宝」城市天气-不仅仅是天气预报产品体验：支付宝首页左上角城市下方提供了天气状况，进入切换地区页面，会展示当前城市最近几天的天气情况。设计思考：随着支付功能的普及，几乎也成了每天都会打开的引用，它集合了我们的衣食住行，以前出门不能忘了带钱包，而现在只需要一部手机就能搞定一切。虽然功能众多，但对大部分用户来说，最主要还是归结于支付功能，除了部分线上支付外，就是线下支付了，顾名思义，线下即涉及用户的出行。支付宝首页城市下方的天气预报，为用户提供了贴心的提醒，便于有出行需求的用户根据天气状况的程度决定是否必须出行或准备出行的必备物品。同时支付宝集合人们的生活服务，即使用户放弃出行，部分事情也可以通过支付宝线上解决，比如外卖、购物等。04.「躺平」趣味化的下拉刷新样式产品体验：躺平APP在页面下拉刷新时，会出现一个倒挂俯冲的“小人儿”动效结合情感化设计，趣味且引人注目。设计思考：下拉刷新是APP不可缺少的功能，十分常见，主要从品牌、功能、惊喜、运营、反馈五个维度结合情感化设计。在页面下拉刷新的时候，整个页面也会跟着下移，待页面数据加载完成，页面会恢复到初始状态，在这中间就存在一个时间差，一个好的下拉刷新样式，能让用户通过时间差享受到趣味化的视觉体验及减少等待过程中的焦虑感。躺平APP下拉刷新使用了品牌IP插图，从外观视觉上是给用户打造品牌印象，倒挂俯冲的“小人儿”动效结合情感化设计，趣味化的用户体验，能在产品特性上带给用户惊喜，勾起回忆，通过视觉跟用户进行情感互动。05.「滴滴打车」添加途经点-解决位置不统一的情况产品体验：使用滴滴出行叫车，用户在行程前输入目的地时，点击右侧“+”符号添加最多不超过三个途经点。司机将按照乘客预先设定多个“途经点”，把多个乘客送达预定位置，每个途经点的停留时间不超过3分钟。设计思考：打车模式从之前的线下出租车转战到线上，诞生的了很多叫车平台，其用的最多、知名度最高的当属滴滴出行，线上叫车服务给我们的出行带来的极大的便利。不知道大家有没有碰到过这种情况，几个人一起叫车但下车点不同，等到需要时可能会跟司机发生不必要的纠纷或不愉快的出行。多个人的上车点不同，但终点一样，也会被迫每人都要叫车，因此需要付出更多的金钱成本。滴滴出行APP的添加途经点功能，完美的解决的多个用户出行的这种烦恼。途经点旨在满足多人共同乘车、个人多点出行等场景下多目的地经停的需求，减少口头沟通带来的误解与不便。途经点可以为乘客停车3分钟，不用额外收费，如乘客需要在某个地点长时等待，则需与司机沟通达成一致即可，随着此功能的上线，滴滴出行为用户提供了更为便捷的打车体验。06.「QQ」手势力度决定页面展示范围产品体验：QQ聊天的表情列表版块，系统会根据用户上滑的力度来确定表情选择区域的大小，力度越大，列表区域占比就越大，同屏可供选择的表情就越多。设计思考：经常使用QQ表情包的用户都知道，其更新频率非常快。比如社会上的最近发生的大事件、互联网当前流行的热词，甚至在疫情期间，凡是跟疫情相关的表情包都在不断变化，从开始的安全防护到后面的线上办公等，以至于深受广大用户的喜爱。QQ的表情功能其中还有一个细节，用户再选择表情时，系统根据向上滑动的力度来确定表情区域所展示的范围。滑动的力度较大时，考虑到用户可能需要在更多的表情包中选择的情况，固增大显示的区域，便于用户再同一屏界面中可浏览的范围更大，同屏展示更多的表情包让用户在更短的时间内找到自己所需，所见即所得，对用户进行的定性操作十分友好，从细节处理方面提升了用户体验。07.「高德地图」地点打卡-未来回忆曾经的足迹产品体验：在高德地图的足迹功能里，可以对我们所在的地点进行打卡，系统就会以亮光形式显示我们去过的城市，并留下“✔️️”标记，点击可以查看自己的打卡时间和具体位置。设计思考：我们在高压的生活下及忙碌的工作中，曾经去过很多地方游玩或者路过，随着时间不断的流逝，这些都成了模糊的记忆。当有一天静下心来细想，好想去过的地方很少，甚至回忆不起来。高德地图APP的足迹打卡功能可以帮助我们记录所去过的每一个地方，分为自动和手动打卡。在设置中开启自动打卡后，当用户使用导航的目的地属于名胜古迹、美食地标建筑等类型的地点，导航结束后，即可自动完成打卡，如有特别需要，还可以通过手动打卡记录每一个点。打卡功能虽然在表面上并非用户硬性需求，但在未来的某个时间看到自己曾经的足迹时也略表欣慰，还可以满足部分用户的虚荣心，也许在无意间就能抚慰认为自己去过的地方太少、较为伤感的幼小心灵，给与温暖的安抚与力量。08.「优酷」会员转化-击溃用户最后一道心理防线产品体验：优酷普通用户在看影片前面的广告时，倒计时后面会提示xxx元可关闭广告，广告下方通过展示会员特权以鼓励普通用户升级会员，且定时滚动展示刚刚已加入会员的文字提醒。设计思考：不管哪个影视平台，无论何种设备，非付费会员用户在看影片前都需要先经过长达几十秒的广告，这是任何人都无法避免的一堵墙，广告除了可盈利之外，还能起到激励普通用户开通付费会员的用处。优酷视频激励普通用户开通会员的的手段可谓是拍案叫绝。①、利益引诱：在广告倒计时的后面直接展示开通会员的最低金额，

设计的思考不仅要注重表象层面，也需要围绕信息传达这一设计的本质功能，以充满自省的精神深化和反思自己的设计意识，即做到“好看、好用”。在设计过程中，要站在公司的利益上，懂用户所想，在每一个关键点都要带给用户意想不到的惊喜，这些往往都是通过细节体现出来的。01.「夸克浏览器」首个页面-我的地盘我做主产品体验：进入夸克浏览器的首个页面，除此必要的元素之外，看到的是一片纯净之美。长按搜索框下方的空白区域，点击“+”号，可根据用户自己的喜好从弹窗中将想要的站点入口添加到搜索页，便于快捷访问。设计思考：UC浏览器可能不是每个移动端用户都知道，但绝对是一方霸主，夸克与UC本是一家。昨天在网上看到一个帖子说“自从用了夸克之后就把别的浏览器全部删掉了，没有天气挂件、没有新闻推送、没有购物频道、没有游戏插件、没有精准广告、就是最原始的上网工具，仿佛在这看到了当年的塞班时代一心一意做用户体验的影子”。迄今为止，没有任何一个应用可以满足所有用户的需求，UC浏览器也是如此，夸克可以将那些视UC为粪土的用户给揽过来，表面上看似抢夺用户，实则是风险对冲，当一个出了问题不是还有另一个么？用户不管是在夸克还是UC，其实都在自家，一个独善其身，一个兼济天下。用过手机浏览器的人都知道，在资讯爆炸的今天，夸克的画面干净得令人难以置信。在干净的同时，并非是缺少这些站点模块，而是放在了暗处，用户可以根据自己的喜好将站点咨询模块调用出来，自定义空白区域，寓意用户“自己的地盘自己做主”。众所周知，大多数浏览器都有站点推荐的功能，不过该功能都是给相应网站打广告的，内容沉杂，尤其是一些强制性的内容让用户产生了逆反心理，而夸克精选中的网站，则是一些价值很高的优秀站点，并非广告业务，这点可以从致用户的一封信和网站类型得出。这也是夸克被誉为最纯净浏览器的原因之一，不管是APP内容还是用户体验、易用性方面都能提升用户的忠诚度，深得广大用户喜爱。02.「百度」为什么把返回按按钮放在了左下角？产品体验：进入百度APP，页面中80%以上的返回操作入口都放置在左下角，单手操作手机的用户触手可及。设计思考：Android智能设备的返回入口其实一直都在屏幕下方，只不过是根据品牌的不同，左右位置不同而已。根据后来大屏手机的普及，为了节约空间资源，使屏幕最大化的被使用，把原先硬件上的部分操作入口给隐藏了，但一直都存在。设计师都知道，iOS与Android的设计规范存在着差异化，比如返回入口就一直在左上角，虽然也有右滑返回的交互手势，但毕竟是隐藏的，而且对于部分页面的左右滑动，只能对tab导航起到作用，基于目前的趋势，手机的屏幕越来越大，单手操作的灵活性就成了难点。百度APP的大部分页面则是把返回按钮直接从左上角搬到了左下角，被较为激进的用户称为反人类的设计，其实并非如此。大屏幕尺寸已经是趋势，屏幕大意味着内容可以更大限度地得到展示，将返回按钮放在左下角能有效的解决的用户单手操作大屏幕手机操作的难点，更易于操作，提升便捷性。更有效的防止用户因操作困难而导致手机滑落（碎屏），增加安全系数。03.「优酷」弹幕中毫不违和感的广告推送产品体验：在优酷观看视频打开弹幕后，每隔几分钟，系统会推送一条广告穿插在弹幕的内容中，点击可进入对应的页面。设计思考：在互联网产品中，花样广告的出场方式屡见不鲜，比如在看视频、看书之前/过程中，总是被突入起来的的广告打断，用户虽然很烦但别无选择，毕竟没有一款真正的既免费又免广告还很牛B的产品无偿提供给用户使用，即便用户觉得自己没有认真看过这些广告，但是只要它们在用户面前完成了播放，哪怕只是听到了，那就完成了品牌意识

在我们日常使用App的过程中，经常户意外的发现一些小惊喜，是用户没有想到的细节或功能，它可能让用户瞬间对此应用的喜爱提高了一个度，也可能让此刻心情不悦的你豁然开朗，从而形成商业价值。01.「印象笔记」行为预判提高任务的转化效率产品体验：在印象笔记新增笔记时，系统通过行为预判自动将光标插入内容输入区域，而不是标题区域，目的是避免打断用户的思路，便于直接进行内容输入。设计思考：在我们的工作和日常生活中，对于某些事物，为了加强记忆，很多用户都有做笔记的习惯，便于日后翻阅。记录的方式则有很多种，常见的比如：线上软件工具、线下笔记本、设定闹钟日程等，但针对于量比较大的情况，最为实用的还是线上笔记本。常见的线上工具大部分都可以通过手机端、PC端程序进行云同步服务，帮助我们记住一切想记住的内容，随身携带、随时查阅，是扩充我们大脑记忆容量和能力的高效辅助工具。印象笔记相对说，算是一个用户体验非常好的笔记工具了，最近使用时发现了一个小细节，在新建笔记时，会通过行为预判自动将光标插入内容输入区域，而非最上方的标题。我们最常见的内容输入页面，其他应用通常都是按照从上往下的顺序优先输入第一个内容。印象笔记则是通过行为预判感知，因用户在新建笔记时第一主观意愿是输入想要记录的内容，目标非常明确，而标题作为整个内容的抽象概念（路标），其重要级下降到其次。如果优先将光标插入到标题，不管用户是先输入标题还是手动将光标修改到内容区，都需要大脑下达新的指令而打扰用户的思路，甚至对于即将录入的内容造成短暂的记忆性缺失。行为预判可以通过交互设计减少冗余步骤、操作流程，目的是提高任务的转化效率。02.「同程旅行」首页上滑-重要的功能入口置顶产品体验：在同城旅行首页界面上滑后，金刚区的酒店、火车票、机票入口会悬浮在标题栏置顶，不随页面一起滚动，方便用户随时点击使用。设计思考：功能型的APP，都会有很多常用的功能作为此应用的特色或主推，但基于业务拓展，也可能增加多个方向的延伸，同时也会造成功能入口的杂乱，导致用户需要花费更多的时间通过视觉浏览来找到自己所需，甚至直接被略过，从而让用户误以为无法解决自己的需求。同程旅行APP在金刚区虽然也有大量的功能入口，但是把用户需求最大、使用频次最多、也是盈利性最强的酒店/机票/火车票在页面出现滚动时，做了置顶处理，方便用户随时点击，在需要使用时触手可及，无需通过回到首屏再使用，极大方便用户操作。另外通过长时间的给用户提供入口，能促使用户操作，提升点击率。03.「搜狗输入法」输入地名-构建特殊场景链接产品体验：使用搜狗输入法，输入的内容有去某个城市的关键词，键盘的上方会弹出当地的天气情况，5秒后自动消失。设计思考：搜狗输入法一直都是自身行业中的翘起，不仅有超强互联网词库、先进的智能组词算法等，还能通过输入的关键词模拟出用户的心理和行为预判，进行智能分享、智能回复、智能纠错，为使用者提供了良好的使用体验。最近在体验搜狗输入法时，如果输入的内容带有去某个（城市/省份）地区，系统会智能分享出当地的今日天气，5秒后自动消失，点击进入可查看最近一周的天气变化，便于用户有出行计划时，能够实时了解目的地的天气情况，如果无需提示，在设置关闭即可。搜狗输入法通过预判提前感知用户行为，对产品使用场景体验的考量还是很贴心的，针对有特殊使用需求的用户构建了场景链接，为使用体验增添很多便利。04.「UC浏览器」修改网址-控制条帮你精准定位产品体验：在使用UC浏览器输入内容时，如果中间的某个内容有误或者需要增减，可点击键盘上方的定位控制条，通过左右滑动以进行精准定位。设计思考：我们在使用移动端浏览器输入网址时，如果需要修改文本框的地址，需要用手指直接在输入框定位光标，相对很小的地址文本，要想将光标精准的定位在理想的位置，确实非常难。另外，基于手机屏幕越来越大的原因，单手可操作的范围也在逐渐变小，而大部分浏览器的地址栏又在屏幕顶部，对单手使用的人加大了操作难度。UC浏览器可通过键盘上方的控制条左右移动定位光标，精准度提升了很多，避免了用户因光标定位错误造成的重复操作，提高了操作效率，同时操作位置离手指更近了，触手可及。费茨定律表示：

设计的思考不仅要注重表象层面，也需要围绕信息传达这一设计的本质功能，以充满自省的精神深化和反思自己的设计意识，即做到“好看、好用”。在设计过程中，要站在公司的利益上，懂用户所想，在每一个关键点都要带给用户意想不到的惊喜，这些往往都是通过细节体现出来的。01.「微信」添加好友-扫描与被扫指尖切换产品体验：使用微信扫一扫添加好友时，如果对方打开二维码的速度较慢（网络不好/手机卡顿/操作不熟），为避免自己久等，可通过左下角的二维码入口将自己的个人二维码提供给对方扫描添加。设计思考：微信的扫一扫功能简直强大到不敢相信，除了我们日常要用的支付付款、物品查询、各种信息的获取等，还有一个重大的功能就是添加好友。不知道大家有没有碰到过这种情况，需要添加好友时，自己打开扫一扫，过了很久却发现对方还在功能的路径中徘徊，迟迟没有打开二维码页面，这时我们不得不说一声“你扫我吧”，于是自己从扫描页面返回，一顿骚操作，把自己的个人二维码给对方展示了出来。微信在扫一扫页面左下角提供的个人二维码入口，便于在加好友出现问题时，随时由被动变为主动，指尖切换扫描与被扫的添加方式，节约用户时间成本以及缓解扫描等待的焦虑感。基于用户添加好友时所处的使用环境，考虑周全且人性化，极大方便用户使用。02.「高德地图」录入车牌号-降低限行违章概率产品体验：在高德地图的导航设置中，录入自己的车牌号并开启避开限行提醒，在导航过程中如果途径限行路段，系统会有语音播报提醒并自动避开限行路段重新规划路线。设计思考：自北、上、广、深四个一线城市交通部分别出台汽车限行措施后，其他部分城市也相继出了限外政策，外地车牌如果想要在本城市随时出行，需要（部分城市通过摇号）获得本地车牌号方可。不管我们对交通路线有多熟悉、或者经过其他城市的限行路段，因限行导致的违章真是防不胜防，毕竟每个地方的限行政策都是通过固定渠道对外宣布，不会通知到每一个驾驶员，如果不能第一时间获得限行讯息，悔之晚矣。使用高德地图导航，在登录后录入车牌号并开启“避开限行”，系统就会自动检测导航路线，如果要经过限行/限外路段时会自动重新规划，通过绕行来避让限行的路段，如果无法避开则提示：已无法为你规避限行路段，请合理安排出行。自动规划路线能够有效避免因限行导致的违章，给我们造成经济损失，尤其是驾照，毕竟一周期才12分。就算无法避开，也可以通过语音提前知道限行路段，并合理安排出行时间。（PS：虽然很多用户感觉无需登录也可以正常使用，但登录之后可以享受更多特权以及更加优质的服务）03.「支付宝」你想要的收款二维码样式是这样的产品体验：在支付宝的收款二维码页面截图时，系统预判用户有使用二维码收款的需求，通过弹窗提示是否需要保存二维码图片，自动去掉无关信息并统一规范样式。设计思考：移动支付自上线开始，微信支付和支付宝支付各自占领着半江山，只要涉及线上交易，绝大多数用户每天必定会选择其中一个使用，虽然两大企业的方向截然不同，但支付系统在用户体验方面都是一如既往的持续提升，以此来增加用户的粘性。支付宝收款二维码页面触发截图，在截取成功的状态下，同时弹出保存二维码图片提示。跟设备截取的图片相比，单独保存的二维码样式更加简洁，且规范统一，信息内容更加聚焦，便于用户直接传送或打印使用。其实进入收款二维码页面，在下方原本就有保存图片入口，基于用户进入此页面的需求明确，对性子较急且耐性较低的用户来说，这个被弱化的保存入口，可能直接忽略（别不信，我见过有人手上拿着手机还在到处找手机）。截图时出现的弹窗提示，相当于上了一道保险，避免使用截图自行裁剪打印的样式不统一，导致付款用户心中原本就已存在的默认收款二维码样式发生变化，形成认知负担。04.「抖音」暗示用户-好看就要分享产品体验：在抖音短视频页面停留一段时间后，分享图标会自动变成最近常分享的某个用户头像，暗示用户好东西要分享。设计思考：抖音作为当前最火的短视频（直播）平台，相信很多用户即使不经常玩，但最起码会玩，虽然有部分低俗、劣质的用户在破坏着平台的规则，但整体看来是利大于弊的，其他的交给人心。下载抖音的用户大部分获取来源应该是来自于他人的分享，一传十十传百，最终传到人手必备，所以平台是相当注重分享功能的用户体验。抖音的分享功能，其实还有一个小细节，当我们停在某个短视频页面一段时间时，原本的分享图标会变成最近分享的用户的头像。用户对分享功能都有常规的认知，当我们在观看某个视频一段时间后，系统自动评判该用户对此视频感兴趣，基于用户看到感兴趣的东西就喜欢炫耀、分享的心理（比如“孙悟空到此一游”），系统将分享图标变成用户头像，意在提醒观者分享，以达到最大化传播可能的目的，以及为平台拉取新用户。05.「智行火车票」搜索攻略-确保使用的流畅性产品体验：首次打开智行火车票的搜索功能，会自动弹出搜索攻略，以指导用户可搜索的范围及使用规范，后续再次打开搜索即恢复常规用法，如果再次了解，点击搜索攻略即可。设计思考：对于搜索功能，可谓是熟悉的不能再熟悉了，千篇一律的输入关键字即可，大不了重新再来。搜索是产品中不可或缺的一部分，无论打开哪个App,都能很快找到，但如果搜索功能做的好了，也是用户转化的关键流量入口，比如搜索方式、呈现样式、搜索引导等，用户体验不容忽视。智行火车票APP的搜索攻略就是在合适的时间、合适的地点准确的传达给用户。首次进入，即自动弹出搜索攻略教育新用户，明确的告知使用搜索功能可以搜什么？怎么搜？避免用户一打开就直接撸字，而造成使用错误的概率提高以及影响搜索结果的准确性，用户一旦碰壁，很有可能转身就离开。自动弹出的搜索攻略由被动变为主动，可以提前告知用户搜索范围及关键词示例，降低出错的几率，让整个搜索流程更加顺畅，为后续的使用提供便利，减少用户的流失。06.「虾米音乐」评论-一键表达心情产品体验：在虾米音乐听歌时，进入评论功能，除了可文字评论外，还能表达听歌时的心情，随时查看有多少同样心情的人在听这首歌，很有代入感。设计思考：文字是我们交流常用的元素，但很多时候因使用的方法不当而造成含义上的变化，比如一段话后面加个感叹号，到底是消极还是敌意？声音也是一样，当我们开着车对行人按喇叭，是表示礼貌还是愤怒？而表情则是不同，它表达的是一种类型，比如一个笑脸，可以理解为满意、开心、高兴等。表情除了可以委婉的表达自己内心的情感之外，也是因为表情的无责任性，你会听到人说，请注意你的言行，但没人会说，请注意你的表情包。虾米音乐APP在歌曲的评论功能，除了有文字评论之外，还可以表达听歌时的心情，即表情评论。进入评论页面，首先看到的是某某等几人使用的什么样的心情评论，并提示共有多少人参与，引导用户接下来该做什么，让用户快速地进入到产品使用中，给予了明确行为操作的指令，触发并提高了用户的参与度。另外使用表情相比文字评论更容易操作，系统预设好可供用户选择的表情包并附带文字提示，用户无需思考便可一键操作，很大程度上降低了完成的难度。事实表明，同样能达到目的的办法，简单的是最实用、也是最受欢迎。07.「美团」收货地址-二次提醒降低出错的概率产品体验：在美团提交订单页面选择好地址后，页面上滑，详细地址会悬浮在导航栏，便于用户二次确认或修改。设计思考：线上购物已经成为了我们的家常便饭，外卖行业解决着我们“吃”的问题更不例外。通常我们在选择好商品后，地址作为重量级的信息都会优先展示在订单页面的顶部，首先基本都会提供一个默认地址，如果不需要进入地址修改即可。纵然如此，依然有部分用户因为急于下单，后续发现地址错误，就需要联系商家修改地址或者取消订单重新下单，浪费时间不说，还会影响心情。美团APP在提交订单页面，针对地址方面相当于加了一道保险。用户在选择完地址上滑页面后，详细地址悬浮在的标题栏上，点击可直接修改收货地址，虽然不一定每个用户都能看到，但长时间悬浮在页面顶部，时刻都在提醒着用户，只要稍一抬头，即可看到醒目的大字（地址），便于用户潜意识的浏览或眼睛的余光扫描，发现有误及时修改，降低下单时地址出错的概率，考虑周全，给予更好的用户体验。08.「菜鸟」下拉刷新-趣味化的“空投”产品体验：菜鸟APP在页面下拉刷新的过程中，会有一个纸箱从空中落下的动画效果，类似空投，仿佛在说“你的补给已送到，请及时查收”，非常贴合平台的属性及特征。设计思考：下拉刷新早就不是什么新鲜的东西了，几乎所有的应用里都会有这个功能，通常都是一个持续的动效在告知用户，页面的数据正在加载，请稍等，市场上很多APP的刷新样式都是大同小异。不过一旦做好刷新样式，就不仅仅是告知用户当前页面状态这么回事了，比如下拉刷新前后两种状态借助过渡动效连接到一起，让用户了解界面到底发生了什么改变，以及在刷新的过程中如何留住用户继续等待，避免用户焦躁的情绪......菜鸟APP在下拉刷新的过程中就使用了趣味性的动画方式，首先通过空中出现的箱子缓缓落到地面，有趣又贴合产品整体的设计概念，用生动形象的情感化设计反馈平台行为，为人机交互增加了趣味性和互动性，而且还可以缓解用户在等待刷新过程中的焦虑感；其次，这种动效可用帮助用户理解屏幕上发生了什么，也会让用户有所期待。（看到这个动效，有没有似曾相识的感觉“哇，那边有空投，马上要落地了，赶紧上车冲过去”）09.「美团」匿名差评-降低商家对用户的骚扰产品体验：对美团的订单进行评价时，如果选择差评（1~2分），系统将自动开启匿名开关以便于用于匿名评价，商家是无法查询到匿名用户信息的。设计思考：评价在商品页面展示给所有用户，对店铺商品起着至关重要的作用。95%的用户购物之前都会参考评价，好评会增加用户购买信心；而差评可能会让用户放弃购买这个商品，甚至认为这不仅仅是劣质商品，更有劣质店铺的潜在想法。其实有很多商家都有通过刷单来提升店铺的销售量和买家秀的质量，作假都尚且如此，何况是真实用户呢？所以商品一旦有了差评，不仅会影响店铺的整体动态评分和好评率，还会降低店铺排名，很大程度上会影响其他用户判断及产品的转化率，所以商家一看到差评就激动得马上打电话和买家沟通改评价，低头认错，尤其是新店或者新品有差评时，不断的联系（骚扰）会给消费者带来一定的困扰。美团APP的订单评价如果选择差评，系统将自动开启匿名评价，由被动变为主动，避免用户因情绪化或忘记打开匿名，而遭受到商家电话的骚扰，通过补偿被要求修改或删除差评。当然，如果用户不想匿名，关闭开关即可。匿名评价不仅降低用户的困扰，还能提升商品评论的真实性，以协助平台通过大数据对整体店铺进行排名和评分展示，减少对后来消费者的误导。（杠精思维“这样岂不是让很多键盘侠来恶意给店铺差评”。其实别忘了一个前提，就是必须要通过下单支付并等待订单完结后才可以进行评价，毕竟大部分用户不会刻意这样做，任何产品不就是满足80%以上的用吗？）10「钉钉」保护信息隐私的密聊产品体验：从钉钉好友对话框的右上角进入设置页面，点击进入密聊，即可对聊天信息上一道锁，保护信息隐私安全。设计思考：众所周知，我们在聊天的过程中，信息很容易泄露，有很多窥探用户隐私的程序，比如进入某些网页会提示需要获取用户位置、读取通讯录等都属于隐私。尤其是社交类型的应用，会有相关保护交流信息的安全措施。如消息撤回、阅后即焚、动态浏览权限等都有一定效果。钉钉推出的密聊功能就是聊天信息的一道安全锁。进入密聊后，消息禁止复制和转发、头像名字打码防截屏、不可被录屏、消息通知不显示内容等，很大强度上保护交流信息的隐私，给用户带来安全保障。（有人会问，用微信的人更多，为什么没有密聊功能呢？从用户群体和性质来分析，微信主打社交，男女老少通吃，基本上都是嗨聊、打发时间或平时的常规交流等；而钉钉主打的移动办公，主流的用户基本趋向于白领类型的群体，一般属于工作交流，很多聊天都涉及到商业信息，包括一些文件和商业机密，谁都清楚商业机密泄露的严重性）本期产品细节分享结束，我们下期再见。往期回顾：结语设计师需要养成体验产品的好习惯并将优秀的产品细节记录下来，加强自己的记忆，不仅能提升自己的语言组织和总结能力，也为日后输出优秀的作品当铺垫，对自己的能力提升以及未来的职业发展带来便利。扫码关注

根据主体色推理同色系同色系为统一的色相，使用中可以加深品牌色的感知，可以让界面更有层次，同时可以让界面保持色彩上的一致性，整体感较强，产生低对比度的和谐美感，给人协调统一的感觉。具体是指与品牌色