年少时，经常听到身边的同事聊一些名词概念，羡慕之余犹豫羞于提问，导致我经常会陷入其中无法自拔，痛苦不已；过了这么多年，大多数概念都随着工作的原因慢慢被理解和消化，或逐渐消失或不再提及。但唯独，“设计系统”这个词阴魂不散，反反复复的出现在我的面前，特别是在面试这个场景下，几乎每一场都会有这个词被提到。
也源于最近做B端稍微多一些，不如今天就以toB产品为例来唠唠我认知下的设计系统是什么以及如何帮助设计落地执行的。
理论上来讲，设计系统分为两个大部分，一部分是指导思想，另一部分是实际产出；前者去指导后者执行，二者的关系像极了竞技运动中的教练安排的“战术”和球员场上的“执行动作”，如果用一张图来表示，大概就是这么个事：
需要强调的是，要设计一套“设计语言”，首先需要聚焦到“语言”这个词上，通常我们认知里的语言无非是一套沟通方式，因为我们对他习以为常，所以并没有更进一步的了解，我试图去查了下语言的来源，以及为什么世界上会出现这么多语言之类的问题，搜过出来的结果很多很复杂，但概括来说就是支撑一套语言的核心分为“语言特性”以及“语言构成”这两大部分。
第一块，词汇：ta的作用是让你表达出想法，就好比如果你跟我一样English is not good的情况下，还嘚嘚瑟瑟的出国游玩，一定也经历过用“蹦单词+比划”的方式去问路、点菜吧，典型的通过word的方式传递信息。
另一趴，语法，ta会让你更顺畅的表达出自己的想法，通过对词汇的重组和编排，信息传递的有效性被大大增加，你可以通过“主动宾”来陈述观点或表达疑问，尽可能的丰富此刻你的所思所想。就像上面的例子，按照语法规则稍微调整一下，看起来就顺畅多的多了~
那么如果映射到设计上，显而易见，组件库对应词汇，交互流程对应语法；所以你会发现当我们不断迭代产品的时候，我们无非就是想把产品当做一件事情讲清楚罢了。
再就是当一套组件被创造出来，ta需要遵循一定的规则形成一个完整的页面，跟我们造句几乎一模一样；所以这个时候充当语法的交互流程就至关重要。现实情况下，往往交互形态是千变万化的，经常性的会因为业务场景的不同创造一些流程出来；但如果是基于语言的背景下，我们需要尽可能的抽练一些标准化的规则形成语法，我们称之为“设计模式”：
我从中挑了搜索这个比较通用的模式来简单讲下；抛开组件的“点”思维，需要我们定义的是“信息交互”的“线性”流程，我试着把其中的每个环节提炼了出来，抽练了一个流程出来：
通过上图也许你会发现“模式”注重的是流程节点的体验感知（用户跟产品交互的一来一往），并注重封装成标准化方案。另外有一点，我把整个搜索的过程分为了2个个小线程——输入行为和消费行为，这是为了以后团队协作更好的理解这条模式的运作方式，以及之后的拓展，举个例子：产品经理决定加一个历史搜索（就是显示用户过往的搜索结果），这个时候设计师就可以把这个功能当做一个拓展包，直接扔到这个主干里来：
另外，toB CRM鼻祖salesforce在自己的设计网站上公布了他们的设计模式，给出了一些特定的场景下的解决方案，不过写的相对更偏组件流程一些：
PS . 插个有的没的的小话题，一个很好玩的事，如果你细心琢磨的话，也许会发现其实组件本身也是带有一定的潜在交互，这种交互不需要你特意安插，天生就有，就好比一个按钮摆在那，在没有任何引导的情况下，正常人也知道点一点。所以映射到语言里，语法貌似并不是必要的（当然ta的存在是为了设计系统更完整，产品更好），比如这个烂大街的梗：
这种现象是著名的“贝叶斯理论”，利用相关信息总结出未知信息，也就是说我们的大脑是可以通过残缺的信息来补足未知的信息的，人类的大脑真的是奇奇妙妙啊~
相比构成，特性这个就好理解多了，相当于设计原则这类的，我们需要通过一定的规则约束对语言有一个明确的指向；比如现代汉语就具备适应性、开放性两大特征。
但不得不说，作为面试官我个人不是很喜欢作品集里描述设计原则的时候就3个词：“简洁”“高效”“清晰”。并不是讨厌这三个词，而是当我追问候选人为什么是这三个的时候，我得到的回复基本是Material Design（或其他大厂的设计系统）就是这么写的亦或是其他很苍白的回答，这无疑是暴露了对设计系统的认知残缺，是一个非常掉分的互动过程。其实，当google、IBM、salesforce在对外宣讲他们的设计原则的时候，也许就只有两个字“清晰”，但背后或许有非常多的思考，甚至超乎你我的想象。
但...异乎寻常的是，AntDesign 的设计原则写的很"深奥"，凭我的功力真的看不出背后的东西，也不知道如何指导设计（也许他们是在探索设计哲学吧哈哈哈哈）：
当我们对上述各方诉求梳理清楚后，首先要精准的概括和整理这些内容的权重和占比（需要注意的是，虽然允许多个原则存在，但也要有一定的侧重和比例，这种做法在顺畅的环节上不会有所建树，但在多个原则冲突的情况下为了保全大局，顺应占比最大的原则是相对稳妥的选择，一定程度上可以帮助设计师规避掉不必要的纠结或撕逼的过程）；再然后基于当下的情况产出相应的原则，形成整套设计系统的王炸：
但在实际操作中，高度整合后的设计原则虽然指明了方向，但缺失了可衡量性，这就会导致“认知偏差”的情况，因为每个人对图例中的“高效”或“灵活”理解不同，会对同一个事物有不同的理解，就跟“小马过河”这个典故一样，小松鼠觉着水很深，小马却觉着也就那样；也正是基于此，需要设计师们在此基础上拆分明确的细则，帮助整个团队建立统一认知：
到这一步基本上设计系统就被定了调了，我们可以明确对一个设计进行评判和衡量，以“清晰”为例，我们有个B端产品里面有个表单填写的页面，需要用户提供一些个信息，前两天，团队一个设计师做了个方案是把表单新开tab，但产品觉着不够清晰，反而觉着蒙版的形式更清晰。他就很疑惑，明明信息获得了更好的展示咋就不清晰了？
说到底，是我们在做设计定义的时候，对“清晰”的认知就是偏薄的，这个案例里面显然第一个方案对信息的展示更加充分明了，但在这个场景下“清晰”并不仅仅指的是信息呈现，产品经理希望用户透过浮层能确认当前处在哪一步（或哪个页面）也同样是一个维度；从这个case里，你会发现，定义一个原则真的不仅仅是搬运一个名词这么简单，所有的原则和特性必须遵循易于操作且合理，这样才是一条合格且优秀的原则。
ps . Salesforce的Lightning设计系统是我最喜欢的design system之一，原因很多，其中很重要的一条是因为他们真的是把“美”作为一个很重要的原则：
色彩体系的定制往往是重灾区，最常见的做法是把颜色用色块的方式一字排开，一排叫做品牌色，一排叫做辅助色，还有一排是灰度：
这种定义存在很大的风险，就跟菜谱只告诉你需要哪些食材，不告诉你配比一样，做出来的菜大概率是一塌糊涂，难以下咽。所以如果你正在建设一套团队协作级别的设计规范，务必要把“协作”当做最重要的事，用比例的方式来告诉你的队友他们应该怎么做：
同理，其他的模块，比如字号，间距，图标，我都建议尽可能的“场景化”，让设计规范有一定的代入感，这样会大大提高设计的效能和品质。
抛出这个问题，是因为经常在不同的场合听到“设计系统是扼杀设计师的创造力”之类的观点；我个人是很难以认同这个的，对design system的最大误解就是限制设计师的想象力。首先设计系统本身就是一个庞大且复杂的设计观集合，需要调动整个团队的想象力和创造力，最终达到一个统一共识才有可能被实施和执行；其次，创造力并不全是设计个btn或者弹窗，真正能展示创造力的是像乐高一样，通过零件（组件）拼装成各种各样的令人叹为观止的创意，那才是我理解的创造力：
另外从系统性思维上讲，如果在不考虑资源的情况下，我倒是挺支持每一位设计师都自己去设计一套设计系统，因为在我们平时看来，2/3年经验的设计师和10年的设计师他们的产出物或许不会差太多，但对设计观架构的能力千差万别，前者依赖感觉和直觉素养做事，后者更靠缜密的逻辑和推理来做事；我更喜欢后者多一些，并不是因为他们讲起自己作品的时候听起来多么高大上，而是因为依据推理方法可以时刻保持输出的稳定性。
我无意诋毁这两大巨星，也无意内卷，只是想说，做事，终究不能托付给“天赋”和“灵感”，勤奋和努力在一定程度上也许可以帮你飞到更高。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：负能量补给站
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
RayData作为一个系列的可视化工具，内容资产作为基础的构成发挥着重要的作用，在日益更新迭代的过程中，会发现每条产品线对图表组件的需求都很繁重，无法避免地重复开发。通过开发通用型组件可以一定程度的解决问题，但是存在灵活性差，组件库维护困难等问题，而且内部产品图表库各自独立，缺乏统一的设计语言。
通过对类似竞品的调研，发现图表做为承载数据信息的组件，本身只是工具，它的使用体验优劣还往往取决于业务需求、数据类型、图表本身的视觉效果接受度等因素。而且图表类型的丰富和灵活程度，使用的框架及响应时间，商业或免费和开源状态也都是评判标准之一。
无论是小而美的个人项目还是大数据可视交互管理系统，项目生命周期的前四分之三阶段，进行的缓慢纠结，充斥着大量需求变更，新想法的临时加入。当多个项目同时展开，图表组件效果是否灵活多变、复用性的高低对制作人员生产力、客户方耐力、项目最终达成时双方的消耗力有极大考验。
通过对类似竞品的调研，发现常见的可视化图表库都存在自身的局限性，体量大，功能冗余，更新缓慢。最终促成了我们从两个维度入手，提炼关键词，简化并转化成图表库系统的功能点。
图表存在很多分类方式，基于形状命名、作者命名、抽象概念命名和数据结构命名等。
为了更好的帮助使用者快速定位，我们简化了图表大分类，依据人对形状轮廓最初的感知，调动直观的感受来进行分类和命名。
整个图表库的设计层包含显性和隐性的两种，显性的规范面向用户，隐性的规范面向开发。
通过调研常见的工具类产品，结合对产品易用性的理解，我们把产品的颜色方案提出来单独定义一个全局的颜色方案，以便一套配色贯穿整个项目使用，然后对通用的设置和个性化设置分开设计。
可视化的组合来源有四种：视觉暗示、坐标系、标尺以及背景信息。
其中视觉暗示是比较重要的组成，以直角坐标系结构为例，对大分类下的参数进行深入挖掘。
从设计的角度出发，我们希望赋予图表样式更多的可能性，开放高度自定义的调节参数。
通常用户在初次浏览图表时会把注意力放在图形的差异化上，比如突出的颜色、突出的图形，但并没有及时将所有的数值联系起来，之后才会进行比较，然后再看整体、分布和多变量关系。在颜色和属性系统中单独设置最大值、最小值的颜色和样式，可以使得图表展示信息的信息维度更高一层。
数据可视化是基于物理世界反馈的信息，通过用各种视觉变量（例如图形、颜色、维度）把数据进行编码、再现的过程。
色彩是数据可视化中滥用和忽视最严重的变量之一，也是所有视觉变量中最富于变化的一种。
信息图表除图形外感官最明显的就是颜色，为了能够达到图表设计的高度自定义，色彩的搭配、自定义的程度，每个图元都有对应的颜色设置。
从设计的角度出发，尝试在颜色系统中加入阴影、发光、全局阴影等结构，进一步还原设计的图形处理习惯，丰富图表的表达。
可视化项目的配色一般来源于实际需求和3D场景效果的搭配，通常是不能预判配色的。
在这种情况下如果需要帮助项目的快速搭建，预置方案就要做到覆盖面广，适应性强，控制取色范围，由此提出以下原则。
制定规范时候我们确定了默认的布局方式，综合实际使用，以柱状图为例，宽度滑块的最大对应100%宽度，图形撑满，更贴近使用者的直觉，另外考虑到多端融合，涉及到一些放大预览的功能，默认选用百分比布局更合理。
在实际配置图表时候，图形和文字的位置关系千变万化，为了应对这种情况我们引入了文字基线位置和相对位置作为位置参照。使用中配合偏移量调节基本能覆盖所有的情况。
为了应对项目灵活配置的需求，我们把图表编辑和Config参数结合，可视化控制生成的图表Config参数，直接导出到项目使用。
除了匀速动画，为了达成更自然的动态效果，引入缓入缓出速度曲线，同时为了达成更丰富的表达，增加了一条简洁的回弹曲线
动效是图表数据表达的一个重要构成，针对图表的动效，通过总结图元的运动方式，结合Material Design的一些处理方式，整理了一套图表元素动效规范集合。
针对缺乏静态数据等真实数据源，检验生成图表的视觉效果的问题，我们为用户提供了指定范围随机数生成功能，可以快速生成与应用项目数据相类似的效果。
颜色配置方案能在同一项目中起到控制整个颜色风格的作用，可以快速应用到图表上。
图表库在项目中的应用
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者:RayData实验室
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
随着信息碎片化趋势的加强，用户的注意力也呈碎片化趋势，本文主要分析了用户注意力的类型以及如何合理吸引用户注意力。
在界面设计中，我们常常能看到许多产品以各种形式抢夺用户注意力，比如弹窗、通知提示等，亦或者通过色彩、大小等设计方式。大部分情况下，这些抢夺注意力的方式简单粗暴，如果不能在适合的场景采用相应的设计手法，不仅达不到期望的目标，反而影响浏览体验。 
在信息量极其庞大的当下，信息被割裂得更加碎片化，现在可以满足用户诉求的产品太多了，许多产品的拉新成本高得离谱，关键是拉新后，留存也是令人头秃的问题。
每个企业都希望自己的产品可以获取更多用户流量、提升用户活跃，自然就需要想方设法吸引用户注意力。这是一个酒香也怕巷子深的时代，产品能满足用户需求、有着极致优秀的体验还不够，还需要让用户知道你的好，让自身产品吸引更多目标用户，是每个产品的愿望。
用户的注意力也呈碎片化趋势，很容易受到外界的影响，并且这种注意力分散的趋势会越来越明显。可能用户上一秒在看公众号，下一秒就打开了抖音，然后看到微信消息，点进去回两句...一天过去了，最后发现好像什么事都没有干成。
这就是矛盾的地方，一方面产品希望留住用户，另一方面用户在各产品间反复横跳，就是不在你的产品里面待着。
研究表明，用户的注意力只能维持在 10 分钟左右，大脑在短暂休息后可以再次集中注意力 7-10 分钟，7-10 分钟差不多是人对任何任务保持专注的时间上限。
用户容易受到各种信息的影响这不假，但是如果采用错误的设计方式吸引用户，非但不能如愿以偿，反而可能引起反感。
作为交互设计师，我们要了解用户的注意力是如何被吸引的、如何通过设计在不阻碍用户的基础上适当吸引用户注意力、哪些场景不该干扰用户注意力，这些都是我们需要面对的问题。
现阶段，由于体验设备的限制，大家大部分情况下还只是与手机、电脑等设备进行交互，此时我们接收信息的方式主要包含：视觉、听觉、触觉。我们借助这些感官与世界和设备交流，下面会介绍设计师该用什么方式合理获取用户注意力。
界面设计的组成部分主要是控件、图标、文字信息、色彩等组成，而要想获取用户注意力，设计师必须清楚哪些信息应当突出，哪些应当弱化，如果所有信息都想突出，那就相当于没突出。
大脑有两种处理信息的注意力机制。
一种是通过视觉、听觉、触觉等感官获取信息，这种机制是“自外而内”（自下而上）的，即我们从外界感知的，此时的影响因素是外界刺激而非内心驱动，甚至人们自身在这个过程中都没有发现被吸引了注意力。
另一种是来自我们自身的，如记忆、想法等，是由我们的主观能动性进行驱动，比如你在专注思考今晚吃什么（这真的是一件纠结的事），这是“自内而外”（自上而下）的，没有这种注意力，就没法专注起来。
这两种注意力并没有孰好孰坏之分，都在我们生活中起到至关重要的作用。区分这两种处理信息的机制并不难，问题主要出现在我们了解这个有什么作用？
那当然是有用的，举个简单的例子：
马蜂窝的首页是内容信息推荐，用户在这个场景中，如果是浏览首页的旅游地点信息流，没有携带特别明确的目的，就会更容易受到信息流推荐的影响，比如有吸引的图片、标题、按钮等，都很容易吸引用户，此时的注意力属于“自外而内”的。
此时设计形式以图片为主，文字在界面中的占比相对较小，起辅助作用，在这种场景下，图片相比于文字更容易吸引用户。
而如果你想去成都旅游，于是你搜索了成都，想看看成都相关的游记，这时情况就不同了，因为你在搜索时具备了比较明确的目的。
你会关注搜索的内容哪些是和成都相关并且你感兴趣的，此时你注意力可能在搜索结果是不是能满足需求，这时注意力属于“自内而外”的。
因此，页面设计的关键就不是整些花里胡哨的操作，而是让用户便于高效搜寻，比如把你的搜索关键词高亮突出，信息采用高效的列表排列。
说到这里，我们了解到了注意力的“自下而上”是被动的（外界的刺激），“自上而下”是主动的（个人意愿），而且针对这两种不同的注意力机制，有不同的设计方式。
这次我们主要讲的是：外界刺激下的“自下而上”的注意力类型，讨论哪些设计可以更快、更直接、更合理地获得人们注意力。
人们每天醒来就要与外界进行各种“沟通”，只要一走出门，就是面对外界的各种变化和信息，触觉的、视觉的、嗅觉的...所以人们不可能注意到所有事物，比如马路上的车在跑，你可能只会关注到法拉利。
一般来说，人们更倾向于关注事物的显著特征，比如颜色和大小，心理学家称之为“显著线索”（salient cue）。人们的注意力有限，所以大脑会关注比较重要的、差异化的信息。
人们不擅长区分细节信息，因为在大多数情况下，显著线索已经足以帮助信息之间的差异。不信，你看看下面哪个是小米的新 logo，拿来检测视力，用的都说好！
所以，不要指望用户一定会关注你界面中设计的关键信息，你所认为的“显著线索”对用户来说未必很明显。如果你担心人们会过滤某些信息，可以尝试用以下的方式吸引他们的注意力。
大脑有自身的信息处理注意机制，我们需要了解其基本运作规律，在设计中更好突出我们的重点信息，弱化次要信息，在合理吸引用户注意力的同时，尽可能降低对用户的干扰。
视觉是一切感觉之首，大脑的大量资源都用于接收和解析眼睛见到的信息，上文讲到，差异化的信息更容易吸引注意力。在设计中，有许多种方式可以达到这种效果，从视觉的角度看，有颜色对比、大小对比、形状对比、清晰度对比、阴影对比、运用图片、动态信息等方式。
如果设计师想吸引用户进行某个操作，颜色一定是最常用的手法，但这里的关键在于，加强颜色的对比，而非整个界面都用重点色突出。没有对比，就没有伤害，颜色也一样，没有对比，就没有突出。
下图中，美团外卖“我的”界面，尽管“我的功能”、“我的服务”、“更多推荐”都是采用黄色高亮色，但由于缺少对比，所以在这几个模块中，并没有哪个功能显得更为突出。其次，一屏之内，出现了 8 个小红点，看起来更像是在玩消消乐，用户看了，也不知道先点哪个后点哪个，那么干脆就不点了吧，如此一来，反而达不到预期的效果。
反观懂车帝的界面，突出高亮显示的功能，只有“发布”、“任务中心”，界面相比起美团更清爽，减少了许多视觉压力，此时用户更容易聚焦到对应的功能。
我们常能看到网上的鄙视甲方的话，甲方说标题一定要大！要粗！但实际上，一般情况下，加强元素的大小、粗细对比，能够丰富设计的层次，人们的视觉总是更容易受到更大视觉面积的影响，因此文字大小、粗细对比确实能够让用户的视觉有非常清晰的聚焦点。
在大厂的设计中，我们能看到非常多设计都是遵循这种理念，比如 Apple、小米等。
apple 官网
小米官网
看看下面的图片，你会注意到什么元素？
是的，我们的注意力会很自然地聚焦在差异性的图形上，而忽略相同的视觉信息。形状结构差异性，在引导用户视觉浏览动线上，也是常用的手法。
以知乎为例，在知乎会员页中，列表整体上均以左图右文的形式展示，在这种相同结构下，用户浏览动线相对比较统一，而界面中间配置了 banner 图片，在结构上形成了差异化，则更容易在视觉上形成突出效果。所以，就算这张图片换成小图，或者其他的结构形式，也同样可以达到区分的效果。
当清晰的物体和模糊的物体放在一起时，人们会先注意到轮廓清晰的物体，而模糊的信息则容易形成背景。
iOS 是模糊效果运用最多也是效果最好的系统，这种效果不仅使界面整体更沉浸，减少页面层级变化的视觉割裂感，还能将边缘轮廓清晰的内容凸显出来。
阴影效果可以让元素在原有界面的 Z 轴方向上进行突出，可以与界面其他未添加阴影效果的元素有明显区分，在视觉层级上更高。
在 Material design 上，阴影被用来体现元素层级高度，阴影大小反映 Z 轴的卡片高度。感知上距离界面越高，阴影越大。
以美团会员页为例，顶部的会员卡片由于加上阴影效果，信息层级上显得更高。
毋庸置疑，图片信息相比于文字信息，更能吸引用户的注意力，因为人们对于图像识别能力几乎是与生俱来的，有时候图片传递信息会比文字更快速、更直接。许多信息（比如情绪、氛围感）很难靠文字传递，恰巧这些正是图片最轻松传达的。
以 App Store 为例，当图片与文字放置在一起的时候，图片的吸睛效果会比文字更强。尽管图片并非在页面最上方，用户未必会第一时间知道这是一张什么内容的图片，但知道视觉有一张图片，视觉吸引到该处的概率会更大。
此外，人们对于图片中人脸的识别更为突出，据研究，在大脑有一处特殊区域，专门用来识别人脸，称为梭形脸部区，可以让人脸识别绕过通常的视觉解析渠道，从而得到快速识别。
视觉对运动物体有一种特殊的处理机制，当视线中出现了运动物体，眼睛就会不由自主地转向运动物体，视觉焦点中心也随之移至运动物体，这是反射性注意。在设计中，合理地使用动态设计效果，能够很轻松地引导用户注意力。
以下面优酷信息流为例，界面中的动态图片更容易获取用户的视觉注意力。
视频也是动态信息的一种呈现形式，在视觉媒介中，按照吸引用户注意力的程度排序，分别是：视频、图片、纯文字，视频由于本身的动态特性，在对静态信息的对比中，吸引注意力的效果尤为明显。
在手机上，许多产品都会采用视频作为宣传的形式，视频能够承载较大的信息量，同时传达的效果又直截了当。
听觉在设备中的运用也很频繁，常见有提示音、闹钟等，比如支付宝、微信在收款时，也有收钱的提示音。
特别是在手机上使用声音作为交互的某种反馈时，需要注意选择恰当的声音，避免引起用户反感，在声音的使用上要谨慎。
固定的声音（如铃声）对于用户而言可以形成条件反射，下课铃声响了，你会意识到是下课了；闹钟响了，你会意识到今天又是元气满满的一天。需要注意的是，倘若声音的出现与用户没有存在关联，久而久之，这种声音就容易被用户忽略。
对于视障人士而言，声音还是接收信息的主要渠道，比如 iPhone 的旁白功能，此时用户操作的注意力会集中在对声音的感知。
与触觉相关的接收信息方式主要是振动，在与设备交互功能中，人们对于振动反馈的要求越来越高。在手机设备领域，许多厂商开始有意识地采用更好的振动马达，目前就是提升振动反馈。
振动也是在关键节点吸引用户注意力，当用户操作成功、失误的时候，给予轻微的振动反馈，能够加强用户对当前状态的感知。
一次只做一件事，尽管许多人认为自己可以一脑多用，同时处理多件事，但是研究表明，人们在大部分情况下，很难同时完成多个任务。大家在一定有时会遇到很烦躁的情况，比如一下子要做设计，一下子又要开会，时间被分散，注意力无法集中。同样是，当用户面对复杂的界面时，也会出现这种情况。
在设计界面时，倘若界面有太多干扰项，就会增加用户的认知成本，无法快速辨别该执行什么操作。
以 App Store 和潮汐为例，下面这两个页面都可以看出信息的专注性，App Store 以卡片形式清晰呈现每一个专注或应用；潮汐首页只突出了底部的四个操作。这些都让用户尽可能减少无谓的信息干扰，专注于当前界面的操作。
你以为我讲了 App store 和潮汐的例子就完了吗？上面的 App 由于定位和商业化程度的不同，才有了这种简约的设计形式，大多数设计师面对的界面是产品极力要求把所有信息都在一屏之内塞得满满当当。
面对商业化，许多设计师可能会认为毫无有心无力，但是日常处理复杂的信息量才是许多设计师的常态，大部分业务由于商业化等原因，都会往界面塞进更多内容。
交互设计师除了了解产品功能，还需要考虑如何组织、转移这些复杂的信息，如果信息组织得当，也可以强化重点功能模块，合理引导用户的注意力。
以猫眼为例，首页承载着功能入口和电影资源推荐等功能，但是通过合理的信息布局，仍然可以使界面结构变得清晰。
Krug 可用性第三定律提到：去掉每个页面上一半的文字，然后把剩下的文字再去掉一半。
尽管上述提到的定律有点夸张，但是，繁杂、多余的信息文案，确实会让用户花费更多时间理解，当用户无法快速了解内容信息时，注意力就容易漂移。在设计时，设计师尤其要记住，在保证信息完整性的前提下，尽可能让文案更加简短，做到让用户快速领会到设计所表达的意思。
信息易读性，是获取注意力的基本，用户是懒惰的，不要期待用户会在如何了解你的产品这种事情上花费太多时间。
以下图为例，左边文案“你必须先登录才能提交订单”明显就不如“登录并提交”来得直观，在交互文案中，要格外注意信息表达的精简性，当然不能以牺牲表达的信息完整性为代价。
内容相关性，即推荐的内容与用户相关，许多内容型产品，通过算法等方式，根据用户的偏好进行内容推荐。
抖音视频推荐、头条资讯推荐、网易云歌单推荐、淘宝商品推荐...你会发现，我们生活在一个所有资讯信息与我们相关性极高的世界，因为他们推荐算法，很大程度上就是基于我们历史行为而推荐的，如果是不相关的信息，我们可能压根就不会看，我们被这些信息吸引注意力，这些信息确实帮助我们降低了筛选的成本。尽管另外一方面，这些信息也可能限制了我们发现更多其他的信息。
本文介绍了注意力的主要类型：“自外而内”、“自内而外”，并且就“自下而上”的注意力类型进行了分析。
在设计中，无论是无法让用户集中注意力，还是到处都在抢占注意力，都不算是好设计。作为设计师，我们需要了解如何合理吸引用户注意力，以兼顾用户体验和商业化。人们大多通过视觉、听觉、触觉与设备进行交互，同时从信息设计的角度也进行了分析。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：热风_
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
随着互联网的发展，近这几年设计圈子里大家都在讨论UGD（User Growth Design），要向UGD转型等等，以用户为中心，以增长为导向，这个概念本身并没有问题，而且是对UED的一种非常棒的进化和升级，要求设计团队需要具备更综合的专业能力与视野。本着对团队的升级优化，我也以UGD的思路对团队有了新的更高的要求，然而在这个过程中却发现在很多问题。
随着各种社交平台的传播普及，什么闭环、串联、颗粒度等等这些互联网黑语，满大街飞来飞去，设计师们的PPT、汇报资料是越来越丰富多彩，但项目效果却并不明显。数据、增长的概念确实是铺开了，但却成了PPT里的装饰，并没有真正落地生根。
经过很长时间的摸索，我们终于有了一套适合团队自己的UGD思路，也一步一步的在不断的优化提升，下面以我们做过的一个项目（用户投资路径优化）为例来说说我们对UGD的思考，以及设计师对数据分析以及场景化设计的思路。
作为设计师，最常关注的用户数据就是转化率、点击率、停留时长、跳转路径等等，从单一数据来看，都是一些常见的简单的数据，但要真正能够分析用户，还需要结合实际场景来分析。
案例：
我们在分析交易线的数据时发现了一些问题，并对数据做了对比分析。
[ 项目列表页 ]
用户的点击主要集中在前十个投资项目，占据整个页面点击的80%。
[ 项目详情页 ]
用户通过列表页进入到详情页，详情页的浏览率较高，但转化却很低，另外优惠券的点击率十分高，超过85%，意味着进入到详情页的用户，基本上都进入过优惠券页面，而最终促成成交却很低。
以上是整个交易环节最初始的两个页面，也是最核心的页面，从单个页面的数据（点）来看都属于正常漏斗数据表现，接下来我们从用户路径（线）的角度来继续分析。
我们从用户当中，抽取了部分最终完成了交易的用户，对整个交易路径的进行分析，结果发现用户在列表页——详情页——优惠券这三个步骤之间反复切换。
不难看出，用户在列表页、详情页、优惠券选择页来回切换，即使最终产生交易，但整个路径耗时长，反复操作，跳转不合理，导致大量流失，这是目前数据所呈现出来的情况，也是问题的核心所在。
案例：
这是最典型的购物交易场景，通过上面的分析，我们再结合场景化的思路进一步整理思考用户的操作行为目的。
用户为何反复的从列表页进入详情，又跳转回列表页再进入详情页？这就是突破口了，想清楚这一点，解决思路也就清晰了。
我们举一个现实生活中的购物场景来帮助思考分析（灵感来源于生活）。
购物路径1：想买东西-找到对应的货架-使用优惠券并买单；
购物路径2：有优惠券-到超市看看有没有想买的-使用优惠券并买单；
在现实生活中，除了”有想买的东西”这一主观需求外，对交易产生一定决策作用的，就是优惠。
结合前面对投资用户路径的分析来看，用户交易路径如此反复，实际上就是在同样的资金投入的前提下，对比不同的项目、不同的优惠，如何搭配才能利益最大化，这就是用户的最核心需求。
基于场景化的分析明确用户的核心需求，确定需要增长（优化）的数据指标，我们提出来了两个解决方向。
[ A方案——详情页的快速切换（优化） ]
，在原有的路径上，保持用户的操作习惯，新增详情页左右滑动切换的功能，用户学习成本低，开发成本低，可快速上线，但对于路径优化、数据对比不够直接，治标不治本；
[ B方案—— 设计新的快速路径（创新）]
结合前面分析的两种现实生活中的购物场景，在原有的路径上，针对平台老客对平台项目的规则详情已经清楚了解的特点，设置多一条快速通道，减少干扰，对比直接，加快老客的决策速度，但用户学习成本高，开发成本高，虽然治本但风险也大。
案例：
A方案直接开发上线即可，上线后就可以收集数据进行分析了，经过两周的时间，从数据表现来看，交易总时长稍有所下降但并不明显，约下降了2%，而交易率基本持平。
[ B方案最终UI稿 ]
在此期间B方案完成设计开发后，协调产品运营推广等业务方，选择确定部分渠道进行ABtest，经过一个多月，持续收集数据反馈优化方案，多轮ABtest后，从数据反馈来看，B方案数据提升明显，有效的降低了用户的决策时长（降低了近20%） ，提升交易成功率（老客转化提升1%），说明方案的可行性强，随即全量更新。
在后续工作过程中，持续根据数据表现，分析，发现并提出问题，提出解决方案，测试验证，不断的循环重复，持续提升用户体验，以数据为依据，以增长（优化）为目标，这就是我们对于UGD的一些思考跟尝试。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：包大佬
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
据说只要可能犯错，就一定会有人犯错，用户犯错的可能性比我们想象中要大得多得多得多
做好防错与容错，可以让用户更顺畅...
据说只要可能犯错，就一定会有人犯错，用户犯错的可能性比我们想象中要大得多得多得多得多。
做好防错与容错，可以让用户更顺畅的达成自己的目标。
恩，用户总是那么不可理喻对吧
都做得那么明显了，还犯错。该提醒的也提醒了...诶～
打住，打住，当用户犯错时，别急着怪他，我们需要先判断清楚。
用户委屈的说：“来来来，我就想下载一个资源，大家都是讲道理的设计师，来评评理，我错在哪里？”
这，这... 每一步的确都好像没问题，那，问题究竟在哪？
作为设计师的你是不是已经敏锐的察觉到了什么？
对，关键点在 ' 67bh ' 这里。都是空格惹的祸！
那好，你准备好方案救用户了吗？......（这里理论上应该停顿30s以上吧）。
当然，现在不会公布答案，方式有好多种。留着你看完文章中间部分再跟大家一起找方案吧。
这一部分的重点不是方案，而是思维。
很多时候，用户并没有错，作为一个有担当的设计师，我们可不能甩锅。
有了这个前提，我们就可以去掉心中的那些烦躁和埋怨...开始愿意伸出援手，去拯救用户了。
对，这个疑问就已经包含了解决方案了。
真的感叹中文的博大精深，避 （防错）、免 （容错）。
为了让大家能更好的理解什么是防错和容错，我特意举一个例子哈～
（什么，防错容错你都懂？你怎么知道我讲的跟你想的一样呢，既然这么厉害赶紧做下面这道题。）
对，就是图片里那个拿滑板的家伙，估计是第一次来这片海滩，有鲨鱼都不知道，还使劲忘海里冲...
从避（防错）的角度来看，你有什么方法帮他呢？（先不考虑哪种方法更好也不要考虑成本哈，能达到目的的都行。）
友情提示：防错的目的是让用户在操作之前，尽量减少用户出错的可能性。
看看的你脑袋是不是真的转得飞起...
我这边有几个想法，看看我们有没有缘，想到一块儿去了：
大声告诉他，这位拿滑板的大哥，海里有鲨鱼，别忘海里冲了...
警告这位大哥，嘿兄弟，这里只允许坐轮船和直升机去海岛那边。
在通往海岛的路线全程搭起防鲨网。
恩，目前就想到这些了，还有方案的同学可以在评论区炸沙发哈。
这些方式，我们试着抽象一下：
【提前做好引导和提示】大声告诉他，这位拿滑板的大哥，海里有鲨鱼，别忘海里冲了...
【优先选择减少输入】警告这位大哥，嘿兄弟，这里只允许坐轮船和直升机去海岛那边。
【限制原操作范围】在通往海岛的路线全程搭起防鲨网。
大家应该都发现了，这种方式虽然能达到让用户安全的目的，但是用户会有挫败感，同时也会有被限制的感觉。
我只要说到USB插头，大家应该就开始脑补画面了吧“为什么我插的进去的第一次永远是错的方向，OMG!”
那，容错呢？
还是这位拿着滑板的大哥，想要去海上的小岛，从免（容错）的角度来看，你有什么方法帮他呢？
友情提示：容错的目的是在用户操作之后，自动纠正/化解错误或提供挽回的方法。
我有几个奇怪的方法，来跟大家分享一下：
呃...驯化/杀死鲨鱼。
派一直专业驱鲨救援队跟随这位大哥（滑板大哥：我何德何能，太感动了）。
同样，我们继续抽象一下：
【让原本的错误不影响用户行为和结果】呃...驯化/杀死鲨鱼。
【出现错误可挽回】派一直专业驱鲨救援队跟随这位大哥，出现鲨鱼就杀鱼。
诶，成本好像非常高哈，但是用户感觉良好哦～
因为他甚至都感知不到这片海还有过危险，按自己喜欢的方式行动就行。
我提一提微信消息的撤销功能，大家可能就会舒缓一口气了。
不知道挽回了多少个尴尬的瞬间，是吧～
可是...我只是一个有无缚鸡之力的设计师，我肝不过鲨鱼怎么办？
来来来，前面那个喊救命的大哥又来了，大家赶紧想想办法吧～
（第一步和第四步就是单纯点击，就先删掉了）
前面讲的方法也列在右侧了，看看你们是不是可以针对每种方法找到对应方案了呢？
看看是不是可以这样？
方案一：使用方法-提前做好引导和提示
方案二：使用方法-优先选择减少输入
方案三：使用方法-限制操作范围
方案四：使用方法-出现错误可挽回
方案五：使用方法-让错误不影响结果
在这个案例中，大家觉得那个方案更好呢？
好吧，这个问题的确很蠢。当然是 方案二 + 方案五 结合使用了。因为是两个平台的交互，而对于各自平台而言，一个控制好输出，一个控制好输入。对平台自身的容错性有很大的帮助。
通过上面的案例，相信大家都已经熟练掌握好防错和容错的方法了。
什么，还没掌握？那你滚回去，（望着你正在慢慢蜷缩的身体）不.........不是你滚，是你的鼠标往回滚!
那，我们先不管那几个往回滚的同学，开始进行强化学习啦～
找了一些生活中经常用到的产品，让大家感受一下防错容错的魅力。
如果你根本无法从图中发现什么，那我只能说... 你还是需要经常用银杏叶擦擦眼睛了（因为擦了之后你就更容易发现（人性）。
案例先到这里，大家一定以为要结束了吧～不，不，前面这些都不是最重要的。
方法总会越来越多，靠“别人”总结的方法也就能应个急。
来来来，放空～～～～抛弃你的职业相关认知、抛弃你的设计师的身份，你再看我们的设计。
你像孩子一样，好奇又“无知”。
你会发现，为什么会有这么多奇怪的看不见的规则，为什么我这么难完成我的任务。
如果当客户遇到问题，你能用合适的方法去解决，那你已经是个不错的设计师了，但离优秀还很远，因为优秀的设计师必须具有敏锐的嗅觉，要在产品团队的前面，感知并规避风险。
所以，更重要的还是，我们必须学会变身。
好了，这一次真的需要大家独立思考了，并且没有标准答案，大家可以交流交流。
在以下场景中，可能会出现什么“错误”，如何有效处理用户“犯错”？
在生活中，其实会有很多很多“让用户犯错”的产品/场景，多参与其中，去发现问题，去思考解决方案，慢慢的，你就会具备非常好的问题发现能力和解决能力了。
说了这么多，可能有一部分同学会想说：
“用户出错的情况应该很少吧，你花这么长的篇幅”
“你一定低估了用户的智商”
我告诉你，出来玩玩，谁带智商做事啊～
不信你看。
百度一下，你会发现用户犯错的可能性大大超出你的预期。
只是，你以为与你“无关”而已。
要防止用户犯错，你需要不断的模拟用户的操作行为，去捕获那些可能存在的问题，然后将它一一化解；这个过程很难，因为你要抛开自己以往的经验和认知，去感受用户的视角。
想想，用户体验的改进不就是让产品越来越符合用户认知，从而减少用户“犯错”吗？
只是有些错误，我们只作为围观者，将它推向了用户。
从现在起，将“错误”留给自己。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：得勿
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
面对国内外竞品崛起，QQ 音视频如何寻求突破，制定对用户有价值的策略，赢得数据增长和用户口碑。
要突破用户增长停滞的困境，需从全局角度思考，对问题所处的系统进行分析与洞察，找出拓展应用场景的机会点，提供技术或价值创新的功能与服务。
首先，针对 QQ 音视频所处行业的竞争态势进行全面、系统的分析，包括内部优劣势，以及外部机会和威胁，以此制定相应的策略与计划。
关注竞争对手，更要研究用户，通过用户调研洞察用户需求，找出 QQ 音视频应持续巩固优化，以及需考虑突破的使用场景。
综观音视频的行业发展与科技趋势，有三个主要的发展方向：
超高清视频
5G 高带宽、低时延将开拓更多玩法和业务场景，超高清视频通话将带来更豐富的感官體驗，犹如面对面沟通。
应用场景多元化
从使用场景来看，音视频已走出会议室，从单纯的沟通交流，扩展至丰富的应用场景，广泛服务于人们的日常生活。
智能终端+音视频云服务
未来智能终端将具备联网连接的能力，搭配音视频服务提供商的云服务，使得通话无所不在，可随时通过智能终端进行音视频通话。
综合前述分析，提出 QQ 音视频的用户体验愿景（UX Vision）和价值主张（Value Proposition）。
QQ 音视频的本质在于沟通，其声影重现的独特优势，消弭了空间距离。未来随着通信技术的演进，高画质、低时延、实时互动的感官体验，将实现远距临场（Telepresence）的终极目标，使用户感受到近乎面对面交流的体验，就像在眼前〝一起做〞某些事。
2. 价值主张
综上所述，提出 QQ 音视频为用户传递的价值——社交临场感（Social Presence）。
临场感相关理论与研究，源自 Short、Williams 和 Christie 等三位学者于 1976 年所提出的社会临场感理论（Social Presence Theory），指的是双方通过传播媒介进行沟通的过程中，所能感受到对方真实存在的程度。QQ 音视频凭借高度的媒介丰富性，提供实时响应、语言/非语言线索交互，使用户能轻易地在社交互动中感知对方真实存在，进而在心理上获得归属感与认同感。
根据过往文献与媒介特性，将 QQ 音视频的社交临场感分为四个层次：
界面质量（Interface Quality）
界面可用性与视觉设计不会干扰操作，能让用户专注于音视频沟通。
真实感（Realness）
音视频的声画体验及与人交流的方式，能贴近于真实世界。
互动性（Interactivity）
用户之间的互动交流越强，越能感受到对方的存在。
情感传达（Affective Expression）
通过情绪表达、环境氛围的营造与对方建立连接，在心理上感到彼此的存在。
围绕社交临场感的价值主张，制定突破当前困境的目标与设计策略。音视频产品除了广泛应用在通讯场景，正逐渐赋能更多创新场景。基于 Q 群生态和调研结果，聚焦于生活、办公、娱乐等场景进行探索。
两个主要的设计目标：
重塑体验
回归通讯本质、夯实基础体验，对通话界面进行改版设计，让用户专注于音视频沟通。
场景探索
开拓应用场景，通过社交临场感赋能生活、办公、娱乐等场景需求，为用户创造价值。
针对 QQ 音视频的应用场景，制定相应的设计策略。
界面质量是影响社交临场感的关键要素，然而调研结果显示，QQ 音视频的通话质量和体验落后竞品，包括主界面功能复杂、通话流程痛点多、核心能力落后竞品等体验问题。
针对上述问题，提出 QQ 音视频改版的设计思路：
1. 化繁为简，回归本质
分析不同通话类型的用户习惯，以及各个功能的使用数据，区分功能优先级，分为核心功能、辅助功能、高级功能等三个层次，重新定义功能架构与布局。
2. 链路排查，解决痛点
运用认知走查（Cognitive Walkthrough）快速排查通话过程存在的用户痛点，并将缺失的功能与信息补齐，最终解决超过 16 个以上的可用性问题。
3. 补齐短板，超越竞品
对于视频画面的思考：
QQ 采用 1 大 N 小的画中画模式，适合 1 人主讲、他人观看的场景，主客位明显，缺少一种与他人共在的感觉；反观微信是 9 路宫格画面，视频画面仅聚集在上半部，有利于节省流量，但同时也限制了屏幕利用率。
兼合上述两者的优点，设计了 16 人视频通话的功能：
16 人视频通话也延伸了不同的创意玩法，例如祝朋友生日快乐、拼字表白或求婚。
QQ 视频通话重度用户的通话对象，主要来自恋人伴侣，这类用户最希望获得〝在一起〞的陪伴感，而社交临场感的〝真实感〞是营造音视频陪伴感的关键因素——彷佛对方就在眼前，两个人一起聊天、一起做某些事。
1. 让他 ‧ 她看到最好的你
声影的真实感，是让对方感受到你就在眼前的必要条件。真实感包括流畅度与清晰度，通过用户行为分析，发现在不同场景下，用户对视频清晰度与流畅度有不同偏好 。
为此，QQ 音视频开创了的高清 / 流畅模式，用户能根据自身需求做选择，切换自动、流畅 480P、高清 720P 三种模式，针对不同模式定制码表，匹配不同的帧率和码率。除此之外，QQ 音视频也与手机厂商合作，开发 QQ 5G 1080P 超高清视频通话，提前布局 5G 应用。
2. 记录〝在一起〞的时刻
创造情感连接，有助于拉近彼此距离，营造陪伴感。有什么是情侣、闺蜜平时会做的事，因为分隔两地不能一起做了？
循着这个思路，设计了全新的双人合拍模式。距离遥远的两人，通过 QQ 音视频实现留影合拍，让彼此的情感得以沉淀。另外，为了增添合拍时的乐趣，该模式结合了 P 图资源与人脸识别的能力，让用户可选用场景模版与挂件，创造属于两人的高光时刻。
3. 〝一起做〞某些事
情绪之间的感染，更能强化陪伴感与互动感，据此设计了第一款支持视频聊天的一起看应用 ——视频包厢。有别于Q群一起看的广播形式，视频包厢诉求更亲密、1v1的陪伴感，彷佛对方坐在身边，一边看剧、一边聊天。视频包厢的价值，除了提升QQ音视频的互动性，也为关系链活跃拓展应用场景。
线上会议是办公用户主要的使用场景，一方面将聚焦用户核心需求，思考办公场景的功能设计，另一方面增强用户之间的互动性，让会议更具社交临场感，就像面对面沟通一样高效。
1. 沟通更多元
为什么需要文字聊天？当主持人开启全员静音，此时无法回应讲者；多人通话时，最多同时听到 6 个人的声音；不方便开麦或摄像头，又想参与互动。
为了解决痛点、完善沟通形式，QQ 音视频新增了文字聊天的功能，可通过手势快速展开 / 收起聊天界面，并支持发送表情和文字消息；这些消息只会在通话界面沉淀，不影响未参与会议的群成员，避免不必要的打扰。
2. 轻松会议管理
对办公用户而言，线上会议需要完善的管理机制。QQ 音视频尝试结合 Q 群管家机器人，小成本实现通话预定。用户能设置通话主题、开始时间、会议提醒，并支持分享会议链接到微信、QQ 空间等其他渠道；获取链接的用户，能快速拉起 QQ 加入会议。
3. 以我所⻅为你呈现
面对面分享是信息共享最有效率的方式，分享者能够当面指出要点，有效地表达与沟通。QQ 音视频借助系统镜像投屏，实现边通话、边共享的能力。在商务会议中，将手机中的信息与操作，实时同步给其他参会成员，例如文件、照片、邮件内容等，并支持同步画面、设备声音。另外，诸如游戏分享、作业辅导、操作协助等场景，都能通过屏幕共享满足需求，为用户带来实质性的效益。手机端最后一块拼图完成后，QQ 多端皆可实现屏幕共享，现已成为 QQ 音视频的口碑能力。
疫情期间，线下聚会被迫停止，线上娱乐应运而生。在此契机之下，借助音视频实时互动、声影重现的特性，开启了新的娱乐形态——QQ一起派对。
QQ 一起派对是基于音视频展开的实时社交游戏，旨在打造真实聚会游戏体验，让游戏过程更贴近线下真实场景，就像面对面一起玩聚会游戏，能与好友边玩游戏、边聊天。通过环境氛围的营造，包括场景具象化、增强代入感等方法，实时感知好友的情感变化，从而获得社交临场感，在心理上感到彼此的存在。
此外，有别于竞品需通过点击按钮作答，QQ 一起派对利用实时语音识别，让用户通过更自然的人机交互方式，在游戏过程中进行语音抢答，彷佛置身于真实世界中与好友互动。
QQ 音视频经过一系列的体验重塑，获得不错的成果。基于生活、办公、娱乐等场景深挖需求，新增许多实用功能和创新玩法，为用户体验和价值创新奠定良好的基础，且归功于这些积累，以致于在疫情期间，QQ 音视频能不畏竞品的挑战。除此之外，多项新增能力，例如屏幕共享、视频包厢、QQ 一起派对，获得用户广泛好评；调研显示，用户乐于将 QQ 一起派对推荐给其他人，足见该功能获得不错的用户口碑。
对于音视频行业来说，疫情迎来的爆发式增长，无法保持高速成长态势，会有一定程度的回落，但能提高大众接受度和习惯养成，认识到音视频能在一定程度上替代线下沟通，不仅限于通讯功能，音视频应用拥有更多的可能性，正逐渐赋能更多创新场景。为此，QQ 音视频基于社交临场感，探索并赋能生活、办公、娱乐等应用场景，提供技术或价值创新的功能与服务，为用户创造独特的价值。
面对市场上同类竞品的崛起，作为一个 UX 设计师，除了因应产品思维设定目标，亦应思考如何以价值驱动解决问题：对于如何解决问题、迈向未来愿景，提出最适切、有效的方法。换言之，要关注的不只是当前面临的问题，更重要的是擘画用户体验愿景，提出该产品的价值主张，并制定相应的设计策略。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：腾讯ISUX
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
听到<夜配色>这个词，你脑海中会联想到什么样的色彩？或者什么样的画面？
可能最容易被人联想到的就是黑色，因为夜晚给人的印象通常就是一片漆黑。如果继续联想，可能有的人也会想到蓝色，因为真实的夜晚也并非纯黑，但是这种蓝一定是暗色的蓝。
但是夜晚也并非什么都看不见，有时候也会有光亮，比如自然的星光或者人造的灯光，这种光可以是冷色的。
当然也可以是暖色的。这些情况基本上就是人们通常会联想到的关于<夜配色>的色彩形象。
而让大家失望的是，这些通常会想到的色彩印象其实都不属于<夜配色>的形式，那到底什么是“夜配色”呢？
电影《绿皮书》海报
这个需要从第 91 届奥斯卡金像奖最佳影片《绿皮书》说起，《绿皮书》的海报色彩很美：水蓝色的汽车与天空色相呼应，司机也穿着蓝色的上衣，整个画面都散发着明净的蓝青色调，奇妙的是，后座的“主人”却穿着一件咖啡色系的套头衫，但是露出的衬领同样也蓝色系的，其实这种色彩组合就属于<夜配色>。不过大家先别急，我们接着往下看。
电影《绿皮书》剧照
不仅电影海报如此，整部剧中的色彩搭配也始终保持着<夜配色>的基调。比如女演员明亮的蓝色针织外套与褐色的裙子就形成了夜配色，其他场景也是如此，这正是它迷人的地方。电影《绿皮书》讲述的是一段跨越种族、阶级的友谊故事，而<夜配色>恰恰具有民族的、世界的、神秘的、共通的色彩属性。
具有以上这些属性，很大程度上是因为这种色彩搭配的不常见性，不常见不代表就没有规律可循，任何色彩搭配必定有它的内在规律，我们不能只看表面，抓到本质才能掌握它的内核。我们把刚刚提取的这几组颜色排列出来分析一下。
我们看这些色彩有什么共性：上方的颜色纯度或明度都是在偏低的范围，而下方颜色的纯度或明度都普遍偏高。如果再结合冷暖色来看我们会发现，上方都是暖色系，而下方都是冷色系。
因此我们可以总结出：低纯度或低明度的暖色搭配高纯度或高明度的冷色，这种配色形式就是<夜配色>，也叫<影印色>。
如果大家难以理解，我们可以再通俗一点，就是暗浊的暖色搭配鲜亮的冷色。严格来讲<夜配色>并不算什么真正的配色技巧，无非属于冷暖色搭配范畴，但是因为搭配在一起很特别，所以我们就把它单独拿出来作为一种搭配原则来探讨。
异域情调
最早引入<夜配色>这一概念的是服装领域。很多咖啡色系的衣裙如果只是搭配黑色或米色等色系，整体上虽然和谐但也会显得单调和乏味，所以就会加入蓝色系，这时就会有不一样的感觉。并且<夜配色>的搭配具有高级感，比如蓝色的牛仔裤就可以试试搭配驼色上衣。
复古绅士
而且<夜配色>的搭配男女通用，比如男士的话可以是水绿色的毛衣搭配棕色西装外套，或是是领带、胸花都可以。男士使用夜配色，很有时尚感，会显得精致典雅，细节处彰显低调华丽的质感，整体具有复古绅士的浪漫气息。
魅力碰撞
使用<夜配色>也可以考虑面积配比，想要冷暖碰撞的效果，通常情况下就是在上半身和下半身使用一对夜配色，比如葡萄酒色配天青蓝，充满异域风情。
点睛之笔
当然也可以用点缀的方式来使用<夜配色>，比如用鲜亮的冷色搭配低明度的咖啡色，用鲜亮的冷色来点缀，展示高级感，对于服装搭配而言，衣领、袖口、包、鞋这些都可以是点缀色的应用载体。
对于这些<夜配色>在服装领域的应用，我们可以将它们提取出来，按照暖色和冷色重新摆放，然后旋转角度，不知道大家发现什么没有，其实<夜配色>的独特美感，像极了天空色与大地色的碰撞。
虽然到这里大家对<夜配色>已经有了一些基本的了解，但是想要良好的运用到设计当中，还需要继续加深理解，毕竟我们之前所看到的都是电影或者服装领域的<夜配色>，而我们切入的角度，就是先排除那些不属于<夜配色>的形式。
回到之前我们总结的，首先<夜配色>包含一种冷色和一种暖色，然后色调上分为暗浊的和鲜亮的，所以它们两两组合就会出现四种形式：也就是暗浊的冷色搭配鲜亮的冷色、暗浊的冷色搭配鲜亮的暖色、暗浊的暖色搭配鲜亮的暖色、暗浊的暖色搭配鲜亮的冷色。
暗浊的<冷色>——鲜亮的<冷色>
首先第一种就是暗浊的冷色搭配鲜亮的冷色，这种配色形式很常用，比如通常我们确定一个背景色之后，上方的文字色或元素色就会在背景色的基础上改变纯度或明度。
暗浊的<冷色>——鲜亮的<暖色>
第二种就是暗浊的冷色搭配鲜亮的暖色，这种比第一种更常见，因为这种形式就是我们通常所讲的冷暖搭配，一冷一暖，一亮一暗。
暗浊的<暖色>——鲜亮的<暖色>
第三种形式就是暗浊的暖色搭配鲜亮的暖色，这种搭配形式整体方向也是比较偏向统一协调的，不会有太大的问题，但也很难给人眼前一亮的视觉冲击。
暗浊的<暖色>——鲜亮的<冷色>
最后一种就是暗浊的暖色搭配鲜亮的冷色，也就是我们这期教程中所讲的<夜配色>，这种配色形式运用到平面设计领域，整体上还是可以保留它的气质和风格的：神秘、充满异域风情，当然我认为这些属性并不是一成不变的，但是不变的是<夜配色>会给人不一样的感觉，因为通常人们都不太会这么配色，所以我们什么情况下去使用<夜配色>，相信大家心理已经有答案了吧。接下来我们来尝试几个案例。
这是一个人物插画，首先我们先将人物皮肤的颜色填充进来，然后是箱子。
接下来就是为人物的穿着填色，这时候我们就可以回想之前我们列举的服装搭配的例子了，我们可以将裤子的颜色填充一个大地色。
然后是上衣的颜色，如果是常规的人物插画配色，通常情况下衣服都会选择一个跟裤子颜色相统一和谐的颜色，但是如果我们想要一些不一样的效果，这时就可以使用<夜配色>，将衣服的颜色填充一个天蓝色，也是我们之前所讲的碰撞色，因为面积相当。
当然，我们也可以将裤子填充水蓝色，有些类似牛仔裤的颜色，衣服填充一个咖色，这也是一种<夜配色>。
或者我们也可以使用点缀色的形式，比如整体颜色是咖色，但是我们可以在衣领、袖口、裤脚这些小面积区域填充亮冷色。
再或者是鞋子的颜色也可以，或者再大胆一些给头发染个色。
我们也可以尝试一个网页首屏，比如画面中这种色调的图片现在很流行，本身就很适合我们这期内容所讲<夜配色>。
如果我们添加白色文字，虽然识别度很好，但是不会给人眼前一亮的感觉，会稍显平庸。
这时我们就可以尝试<夜配色>的搭配，当然文字色可以有选择，都可以尝试一下，甚至是偏暖一些的文字也不是说就不可以，我们总结出的规律要为我们所用，而不要被规律所限制，希望大家能明白这个道理，千万不要理解的太死板。
最后我又尝试了一个海报，海报的主题是“南非当代摄影展”，这个名字就会让我脑海中浮现出异域风情，所以我认为可以使用夜配色。
先将图片置入到版面当中，而这张图片本身就是大地色调，因此也是适合<夜配色>搭配的。
所以上方的背景色我们就可以填充一个天蓝色，现在整体上下色调对比就是<夜配色>的形式。
文字这里我们也可以不使用黑色，替换成大地色，下方的小字使用上方的蓝色。但是做到这里我感觉画面还缺少点什么，也就是整个版面的构图和文字编排都很规矩和工整，这时候就需要有一些破坏这种工整的元素。
所以我就在右下方这里添加了一个手写体的英文，为这个画面增加一些灵动，当然颜色上也是吸取上方的蓝色，形成呼应。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：研习社
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
最近一直在恶补关于结构化思维的知识，作为一名视觉设计师的我，经常使用发散思维的方式来工作和思考。虽然在工作中常常能冒出很多点子和想法，但很难将它们组织成一个清晰完整的解决方案，随着工作时间越长，发现这种思维能力会让自己在工作中经常遇到这些困惑：
如果你也有同感，建议要开始学习结构化思维，其实结构化思维是一个职场人非常基础的能力，掌握这项能力能让我们在职场上少走很多弯路，但是这种能力不容易学会，是需要在平时刻意训练才能渐渐掌握。
设计师随着年龄的增长，除了保持硬核的专业技术能力之外，更重要的是不断提升自己的思维能力，接下来我结合自己的这段时间的思考和实践给大家做些分享：
本篇文章大纲如下：
先来做一个小游戏，大家试下用 3 秒钟时间速记下图，然后说出图上有多少种颜色。
是不是觉得有点记不住？如果图片换成这样呢？答案是不是一目了然？
图二将颜色进行整理分类成暖色系和冷色系，并且颜色按照从深到浅的规律排序，更容易让人理解和记忆，因为它更加符合我们人类大脑思维的 3 条基本规律：
结构化思维定义
结构化思维是当我们面对问题的时候，通过某种结构，从多个侧面进行思考，拆成一个个能解决的部分，并且采取恰当的手段系统性地解决问题，是一种从无序到有序的思考过程；也是从整体到局部，并且层级分明的思考模式。
结构化思维可以真正的帮助我们去思考和表达，作为设计师的我们在日常工作中非常忙碌，被很多琐碎的项目搞得自己手忙脚乱，因此学会用结构化思维有以下四大价值：
1. 理清大脑思路
更系统化的全局思考，让自己的设计思路经得起推敲
2. 高效解决问题
更有效率和节奏的解决手上问题，减少让自己重复劳动
3. 清晰表达沟通
与项目成员的沟通更顺畅，让他人更准确理解自己所表达的内容
4. 构建知识体系
通过碎片化知识进行结构化整理，逐渐建立自己的知识体系
讲了这么多，那应该怎么掌握这种思维能力呢，其实我们很早就接触到结构化思维了，比如学习写作文时的“总分总”结构，解答数学题时先求什么再求什么，都属于结构化思维的范畴。
结构化思维分为两种框架，第一种是自上而下的拆解法，适用于日常思考问题和表达沟通上；第二种是自下而上的归纳法，适用于归纳总结，输出文章。
自上而下的结构原理来自金字塔结构，有 4 个特点：结论先行、以上统下、归类分组和逻辑递进，下面用一副简单的图来表示结构。
如何应用
1.结构化思考问题
举个例子大家会更明白些，比如最近接到一个设计需求是进行官网的改版，那我们利用结构树进行自上而下思考，从了解现状-深入分析-解决方案进行结构化思考。
了解现状是先思考改版的背景以及目标，深入分析是要清晰目前官网的问题是什么？竞品是怎么做的？解决方案拆解为交互体验层面和视觉表达层面应该怎么做？
通过前期这三步的结构化思考，让自己大脑捋顺思路，就更清楚该怎么进行下一步了！
2. 结构化表达沟通
比如我们平时输出了多个设计方案时，需要跟产品阐述设计方案 A 更好，那应该怎么清晰的表达呢？
同样利用结构树，第一步先表达自己的结论，再给出更合适的理由，然后逐步阐述支持理由的每一个事实依据。用结构化的方法表达出来，让同事也更清楚自己的想法和设计思路！
当手上有一堆信息却毫无头绪时，而且不清楚该用什么框架的时候，通过下面四个步骤可以把信息进行结构化整理。
从收集信息-归类分组-提炼结构-完善框架四步组成，像刚才开始玩的小游戏就是用这四步进行总结和完善，我概括抽象成以下这四步方法：
可以看到从一开始各自洒落零散的信息到逐渐清晰的结构化信息，这就是自下而上归纳法的神妙之处。当然我举例的是比较概括性的模型，具体可以通过自己工作中的真实案例进行不断的练习。
结构化思维是每一个设计师都必备的，今天的小分享更多是一个抛砖引玉，剩下的需要大家真正实际应用到工作和生活中，大家平时跟产品沟通交流，项目汇报，撰写文章都逐渐用结构化思考的方法，久而久之你会发现处理更复杂的事情都游刃有余，事半功倍！
文章来源：优设 作者：PSERIC
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
空状态是APP内必然存在的一个状态，现在在很多产品里空状态是不太受到重视的，给人的感觉是比较临时性，可有可无的，但是这个状态在引导性、愉悦性和保留用户等方面的潜质对于产品体验在细节当中的成败有着不可忽视的作用。适宜的空状态设计可以提升用户体验，实现用户留存。
因此针对美柚APP内的空状态进行一次全新的升级探索，前期也进行大量研究分析，对后续的探索方案有所方向指导。
空状态是APP内必然存在的一个状态，现在在很多产品里空状态是不太受到重视的，给人的感觉是比较临时性，可有可无的，但是这个状态在引导性、愉悦性和保留用户等方面的潜质对于产品体验在细节当中的成败有着不可忽视的作用。适宜的空状态设计可以提升用户体验，实现用户留存。
因此针对美柚APP内的空状态进行一次全新的升级探索，前期也进行大量研究分析，对后续的探索方案有所方向指导。
文章来源：站酷 作者：huangzhijianwusD
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
