很多时候，我们会发现，我们加的质感有点平，比如像下面这种：
很明显，这种地方就有点平：
原因就是因为“颜色掉层次了”，我们只需要在他的中间再加一层颜色，就可以让它的质感饱满起来。
具体步骤就是，我们可以先给它加一些“形状”然后进行羽化:
我们可以看下前后对比，这样就不会那么平了：
一旦发现质感有点平，就可以用这种“颜色掉层次”的思维去尝试优化！
这是一位同学做的质感临摹练习：
颜色有点太闷了，不够透彻，我们先来把颜色弄的透一点，我用圆形来表示，首先我们的颜色不能太重，弄个小渐变：
这是我们的一个基础，如果感觉明暗对比不够，可以再适当加强对比：
然后加一点反光，这是非常灵魂的一个步骤：
然后再加一点左上角的高光：
这时候我们再来加中间的暗部形状，我们看原版的有一个很大的问题，就是中间的暗部爱心和背景有点糊在一起了：
就是因为两层都是暗色，所以没有区分开，所以这也是为什么我们把背景色调亮的一个原因，我们把中间的形状加上去：
然后再来个内阴影和边缘光：
大功告成，我们再来对比下前后的质感：
是不是好了很多。
有时候我们会觉得自己的设计有点主次不分，这种感觉往往和颜色有关。
下面两个圆形，你会觉得那个更吸引你的眼球：
对，没错，肯定是第一个，因为第一个颜色的饱和度比较高，颜色比较纯，所以更加吸引眼球。
那我们看下面跟米同学的启动图标作业：
感觉所有颜色有点糊在一起，甚至感觉背景比形象还要吸引眼球，就是因为背景的颜色饱和度太高了！
当跟米把背景的颜色饱和度降低时，我们再看下效果：
我们可以很清晰的把视线聚焦在吉祥物的身上。
所以我们在做视觉的时候，一定要注意，你的重点是什么，注意饱和度对比、明暗对比，千万不要本末倒置！
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
一、改版背景
QQ游戏中心是手Q用户触达游戏的重要场景，每天有海量用户来此进行游戏相关的互动操作，随着产品的功能迭代，体验的逐步更新，用户对QQ游戏中心也有着更多更强的诉求。
在2022年的研究报告《游戏中心核心价值及机会点定性研究》中发现用户在游戏中心内最为关心的是领取福利，通过在游戏中心获得游戏相关的礼品道具帮助提升游戏体验。同时用户对游戏有着较强的社交感、成就感、沉浸感诉求。
随着产品目标的调整，游戏中心的功能也逐渐丰富化，除开领福利和找游戏，用户可以在此消费游戏内容、购买游戏道具、以及使用游戏相关功能等，用户触达游戏的方式变得更加多元，用户的粘黏性也进一步提升，产品依势也需要打造更好的产品游戏氛围感和品牌印象来建立用户口碑、提升转化。
同时，以“生机”为设计理念的QQ，也进行了体验上的版本迭代，游戏中心作为QQ内的重要业务，也将跟随紧随其后完成体验的更迭，提升用户体验、延续QQ品牌基因。
二、制定设计策略
对用户、产品、设计的诉求进行整合后，梳理出本次改版的基本设计思路——在提升产品用户体验的基础上，以品牌符号强化产品的记忆点，一方面从产品体验上给用户带来更顺畅体验，同时以品牌图形强化游戏感和沉浸感，提升用户心中的品牌印象。
优化基础体验：跟随手Q“生机”设计理念和界面风格，统一UI界面样式 ；重构内容消费的信息容器，提升内容消费效率；提升设计效率，以及打造更高效团队合作方式。
打造品牌记忆点：通过品牌基因的植入、游戏氛围感的增强，让产品更具辨识度，同时加强产品的游戏属性，强化用户的沉浸感。
游戏中心改版总览图
三、解决问题
3.1 基础体验优化
游戏中心本次改版在体验上的优化聚焦在3方面：
① 焕新界面
随着产品功能的扩充和迭代，游戏中心的界面风格开始趋于参差，同时伴随QQ设计规范——Q语言的更新，游戏中心的首要任务即完成界面风格的统一。
· 统一风格
以往的游戏中心，采用更为丰富多彩的设计语言，导致从手Q进到游戏中心较为强烈的割裂感。而本次改版中延续手Q的简约透气的风格表现，通过色彩样式、组件、圆角等设计要素将界面进行规范统一，保证体验的一致性。
· 求同存异
在首页、游戏、攻略这3个场景，界面的风格向手Q设计语言靠拢，色调以手Q蓝为主，以相对简洁的界面风格保证内容传递的高效性。
同时根据业务诉求，也保持了游戏中心自有特色——在福利和商城tab两个主场景下强化游戏氛围感：采用3D图形和多彩图标、界面主色调使用情绪更高的橙黄色，让整体感知更符合产品的特质。
除开界面风格，图标的设计也融入了游戏中心的特色——保持基础型与手Q图标一致外，同时将一些图标通过游戏化语义表达出来，使其更具趣味性和游戏感。
②重构容器
· 优化内容消费体验
内容卡片结构化
游戏中心的消费内容来源丰富，包含问答站、小世界、频道等多处内容源，给用户带来海量内容的同时，也导致了信息容器的冗杂，增加用户的认知负担、降低浏览效率。
在前期和产品的梳理中，发现游戏中心的feed类型可以分为4大类，总计有21种样式。为解决用户的浏览体验问题，对feeds结构进行了结构化整理，以流式布局将所有样式整合为6个部分，基于不同消费内容去排列组合feed类型，简化产品逻辑，同时用户更聚焦内容阅读。
· 提升游戏分发效率
游戏tab作为游戏分发的主要场景，改版前主要以横向列表容器去承载游戏信息，用户探索新游的效率较低，同时雷同化的结构，容易浏览疲劳。
针对以上情况，在页面设计上丰富了承载容器的样式，采用高效率的游戏图标排列或者游戏合集卡片，提高了浏览效率，也让用户更容易命中自己钟爱的游戏类型，不同的容器类型组合也让整个浏览更有节奏，减少疲劳感。
③提升设计效率
游戏中心在以往产品功能的快速迭代中，由于规范和组件的不完善以及和开发同学协作模式的不确定性，让产品界面的实现往往不尽满意，无论是开发效率还是还原程度都受到一定的影响，最终导致用户体验的不完满，所以本次的改版，提升设计的效率也是体验提升的重要一环
· 统一设计规范
界面的基础样式和控件，和手Q基本规范保持一致，包括颜色、图标风格、基础控件、圆角、栅格等。同时基于业务的诉求，我们在手Q基础上拉出一条规范支线用于游戏中心的设计——主要在基础色、图标等拓展了更多样式。
· 提升协作效率
以往黑夜模式的适配，开发和设计需要同时输出和还原两次设计稿，导致适配成本较高。在本次改版中，将新风格页面的组件token化，搭建起设计和开发之间界面样式的映射关系，开发和设计只需还原一次设计稿，即可完成黑夜模式的适配，达到高效设计、快速上线迭代目的。
黑夜模式的上线，也提升了游戏中心的浏览感受，让用户的体验更友好、更亲近用户，回归Q语言亲和自然的设计原则。
3.2 打造品牌记忆点
① 打造品牌记忆符号
QQ围绕社交有效性、社交广度与深度、社交动力等维度，打造一个积极向上充满生命力的社交生态体系。生机的理念承载乐观活力与积极延续，具备有序和精致的特点，也象征万物发展所蕴含的生命力。——Q语言-设计理念
在游戏的世界观中，“能量”经常作为源动力元素以推动游戏进展，QQ游戏中心承接Q语言“生机”的设计理念，提炼衍生“能量”概念，以能量元素将生机理念具像化，赋予产品积极快乐充满活力的品牌感知。
在确定能量作为核心关键词后，对此发进行情绪版关键词的发散，结合前文提到各方诉求，最终把关键词锁定到能量、游戏感、氛围上。
② 品牌基因拓展
在对关键词的发散阶段，讨论和尝试了多种能将“能量”概念视觉化的元素，考虑到UI界面的延展性和可用性，最终把可视化元素锁定在宝石和光上——宝石造型上相对简单，光在动画塑造上能拥有多样丰富的表现形式。
为契合概念的设定和后续的延展，我们把宝石定义为能量石。在能量石的设计上，特意营造出能量充盈、光感琉璃的视觉感受，造型上采用多面切割结构，色彩上兼容蓝色和黄色两种色调，以匹配游戏中心的整体界面风格。
除开主体图形，也从其他设计维度去落地能量的设计理念：
能量之石
除开前面的基础宝石，也设计了多种能量石的造型，并兼容磨砂质感，以应对不同场景使用。
在UI界面的运用
在产品的核心界面上，将能量石作为背景图案使用，强化品牌和氛围感；
和业务也进行结合——以能量石将商城的幸运值图形化，让品牌和功能直接连接起来；
把能量石材质和游戏元素进行结合——王者皮肤墙功能内，将游戏LOGO赋予能量石材质，让游戏和平台品牌之间产生品牌上的关联。
能量之石图形在界面内的运用
与3D图形的结合
宝箱是游戏中心一个重要道具，每日有大量活跃用户来游戏中心做任务开宝箱，开宝箱成为了产品触达用户的高频场景。
因此对宝箱进行了设计，希望在高触发场景加强用户的品牌感知，强化游戏感。宝箱在造型上采用了和宝石一样的切割造型，同时宝箱上加入了能量石，把3D图形和能量石进行结合。
除开宝箱外，对业务内常用的图标进行了3D化处理。
3D图形在界面内的运用
· 动效
在动效的设计上，也承接能量的设计理念，以光为设计灵感，设计了游戏感强烈，电光火石般的的动画效果——能量光，用于界面内UI界面和3D图形动画，强化整个产品的游戏氛围感。
动效在界面中的运用
· 颜色
在界面颜色的使用上，主界面延续手Q的标准蓝色调，包括控件、字色也与手Q统一，保证界面整体色调的延续性。同时基于业务诉求，拓展了情绪感知更强烈的“游戏橙”。
对于以内容体验为主的页面——比如游戏中心的首页、游戏发现页、攻略页，使用手Q的标准蓝；在需要强氛围和游戏感的页面——游戏福利页和游戏商城页，采用游戏橙。
· 质感
由于游戏中心内多处用到的3D元素，对3D的质感进行了规范统一。
材质
考虑到UI界面的通用性，避免3D材质的喧宾夺主，材质风格以简单通用为主，颜色以界面主色调为基础，漫射材质多营造轻黏土的通用质感；针对能量石的材质，则采用光感通透的玻璃材质。
灯光
灯光采用基本的三点布光，旨在表现物体的质感、立体感和空间透视感。整体布光氛围积极，友好，明朗，透传QQ活力生动的品牌气质。
· 字体
游戏平台内，有着较多需要运营设计的场景，字体是信息展示的重要元素，选择了造型感较强造字工房的逼格青春字体，作为界面内的强调字体，更好的营造游戏氛围感。
字体在运营活动和UI界面中的运用
四、总结
QQ游戏中心作为QQ用户触达游戏的重要途径，用户们在体验链路上有着各式各样的诉求。产品功能的多元化也让用户体验必须追随功能持续迭代。拥有几亿用户的QQ，各类产品的统一优质体验，也是“一切以用户为中心”原则的必要体现。
如今人们出行都离不开手机，都通过手机接触过互联网地图，手机地图凭借着可手势直观操作、地图可快速迭代、信息可实时更新的优势，形成了成熟的地图交互体验。在解析手机地图的体验设计前，让我们先看看地图的发展历程。
地图拥有着古老的历史，记录了人类对世界认知的演进过程，经历过泥板、壁画、羊皮、纸张等载体，依据使用和文化需要拥有着丰富多样的美术形式。不同时期、材质、美术形式的地图见证人们认识世界的过程。
随着照相机和飞机的发展，出现了航空摄影测量技术，让地图的测绘精准度达到顶峰。交通、旅游、印刷业的发展，让纸媒地图开始融入人们的生活，地图的平面设计更是百花齐放，有具体也有抽象，让地图兼顾功能、美感、有趣。
再随着卫星影像、瓦片地图技术和互联网的发展，人们可以日常地使用电子地图。受限于网络速度的限制，矢量地图应运而生，在特定范围显示相应的矢量瓦片信息，让互联网地图的形状趋向统一化。
iPhone革命性的触屏体验，通过手势与地图进行直观自然的交互体验，结合内置GPS、陀螺仪传感器，小蓝点成为地图定位的通用标志，激发更多地图的功能和创意。
二、手机地图的创新体验
手机地图继承了互联网电子地图的可快速迭代、信息可实时更新的优势，结合触屏手势操作后，大大的提升了地图展示信息的维度。电子地图从工具逐步被引入到各种垂类服务和社交娱乐中，这些场景也不断丰富和完善着地图的信息。
手势交互让地图从移动到缩放都高效地动起来，激励人们探索更广的区域。更革命性的是让地图从平面到立体之间的顺滑转换，帮助人们更好的映射到真实世界。
可视化信息是互联网地图的主要优势之一，将数据转化为可视化图形，归类在不同的数据层，可以单个或多个层级叠加在地图上展示，传达位置上的数据。
底图是手机地图的基础，通常就是地图本身，它承托着上面的可视化信息。随着地图可更自由地缩放，地图本身的内容不断细化和归类，在不同的缩放层级下，展示符合用户查看场景的核心内容。
触屏手势交互有别于摇杆、鼠标、触控笔等物理外设的控制方式，让用户在小小的屏幕对大范围的地图有更随心所欲的操作，让原本受矢量图形限制的地图有了更多层次、更丰富立面的信息呈现方式。
单指拖动
拖动是地图最基本的阅读操作，一般以用户的定位为初始中心点，用户可以有目的有方向地查看附近的地点。
单指划动
当用户想快速翻阅时会拨走要略过的内容，划动模拟了这一行为。地图被划动后也会模拟物理世界以一定的摩擦力停下，向用户展示地图的新区域，是比拖动要快速的浏览方式。
双指拖动缩放
物理控件只能让地图根据屏幕中心进行缩放，而触屏缩放能让地图根据两个指尖的中心点缩放，并同时位移，符合用户空间操控认知。
双指划动缩放
划动缩放和划动一样，让用户以更轻量的手势加速的缩放地图，并以一定的摩擦力减速停止，让用户快速找到目标位置。
单指快捷缩放
为了让用户能单手并可控地缩放地图，不少地图都设计了自己独有的缩放方式。 zenly，通过屏幕两侧的边缘，直接完成地图的最大和最小缩放跨度。
snapchat拖动右侧边可缘唤起缩放滑块，并使用emoji来表达距离，充满幽默感。
腾讯地图，通过划动右侧的滑块，实现单手顺滑地缩放，滑块也支持划动手势。
百度地图，通过点击一个缩放控件，让地图以当前中心点进行分段缩放。
无限循环的地图
地球是圆的，可以无限巡航，一些应用将缩到最小的世界地图做循环处理，以呼应地球的循环转动体验。
方向视角切换
在陌生的环境用户未必能分得清楚南北方向，利用手机的陀螺仪，可以告知用户正在面向的方向。定位按钮的二次点击，将地图从南北向转到用户面向的方向，有助于用户二次确认自己的定位。
更多地图使用了2D/3D视角的切换方式，2D是南北向的标准地图，3D是用户面向方向的地图，帮助用户更直观地对应物理空间。
旋转方向
可通过双指或陀螺仪旋转地图，地图上的文字也做出相应调整，保持水平、沿道路方向调整，以保证可读性。
3D的旋转也一样，在保持水平和沿道路方向的同时，文字保持垂直。
当缩小到足够远时，用户面向的方向意义就不大了，苹果在缩小到一定范围时，将地图回弹保持南北向。
双指拖动调整视角
地图3D视角也支持自由调节，通过双指平行的上下滑动，可以平顺调整3D视图鸟瞰的角度。
在地图的最低视角做回弹处理，生动不呆板。
远近也能影响鸟瞰的视角变化，视角越低越接近平视，拉进时有俯冲的感觉。
四、可视化信息：生动呈现地图动态数据
从古代开始，人们就已经懂得通过绘制山脉、河流、海洋、建筑等对重要位置信息进行标记，地图本身就是一个信息可视化工具。 互联网地图最大的优势，就是能提供实时的信息数据。将数据标记在相应位置的坐标上，并分别归类在不同的层级，叠加在地图上查看。
地图的常用数据形式可大致分为：点、线、面、热力图等，一个地图可同时唤起多种类型、多个图层的信息内容。
点数据
点数据是单个地理坐标上的标记，代表该位置上的信息，是地图上最常用的数据信息。地图通过不同的小图标来区分位置类型，使用频率越高的样式越简洁，地标建筑做形象化图形标识。
聚合图在地图上呈现也是点数据，它实质是显示一定区域内的信息聚合，但不强调具体的区域。聚合图可以避免因为该区域的点数据过多，在地图上信息过于密集。
百度的充电桩地图就是以区域聚合充电桩数量，根据缩放调整数据的聚合。
腾讯地图的文博地图也是聚合图，并根据文物的类型做了快速筛选。
线数据
线数据在地图上呈现为线性，一般都沿着可行道路展示信息。导航路线是最常用的线数据，它提供具体行驶路线方案，并实时展示线路行驶的进度与方向。
也有粗略表示进度的线路数据，如快递的物流进度路线就不需要具体的实际线路，只需要示意大致进程。
街景地图则仅展示有全景图的道路范围，不提供进度与方向。
面数据
面数据要展示地图上的具体区域，疫情环境下出现了区域风控需求，需通过了面数据画出区域范围。疫情地图采用了聚合图、面区块两种数据形式。
zenly使用了反向的面数据，根据用户的行走记录，将用户走过的范围擦亮，用户未走过的地方是一块彩色的平面，充满娱乐感。
热力图
热力图以特殊的高亮梯度显示地图上区域的热度，热力图的数据不会指向地图上具体的位置，它能呈现热度变化的趋势。百度地图用热力图直观展示地区上的拥挤程度。
高德地图的空气质量地图，使用聚合图作为空气质量评分，热力图作为空气质量范围。
snapchat使用热力图来表现该区域用户发布动态的热度，引导用户发现内容，由于热力图不指向具体位置，能更好的保护用户隐私。
热力图并不局限于面，路线也可以反映道路的热度。Strava利用用户的骑行数据，生成光点线路的热力图，可以看出哪些是热门的骑行线路和必经地点。
路况也是一种线性的热力图，路况使用按段测量的方式，热力值的梯度相对跳跃。
让数据动起来
地图是安静的，但真实世界是忙碌的，让数据动起来，给地图增添更多情感化设计，缓解用户的等待压力。
忙碌的商家
外卖小哥端午节雨中送餐
公交努力奔来
五、底图：为更好呈现信息的色彩系统
手机地图的底图最常使用矢量瓦片地图，因为数据体积小，在互联网环境下读取速度快。矢量地图用几何图形来表达区域，不展示具体细节，因此需要通过颜色去传达不同区域的属性或功能。
人们对于颜色和环境是能建立一定的联想的，如绿色想到大自然，蓝色想到水，红色想到警示。根据人们对色彩的联想，给矢量地图中不同属性的区域进行配色，帮助用户理解地图。谷歌地图就曾经为不同类型的信息标记出700多种颜色，最后简化为25个颜色，形成了地图的色彩系统。
工具类地图应用以地图为核心基础，对矢量图形有最全面的归类，因而拥有最丰富的配色系统。由于人们对区域功能的颜色联想是相似的，各地图厂商的标准地图的配色都很接近。地图用色素雅，才能让多个颜色能和谐的同时存在，降低用户的视觉疲劳，并能突出地图上的信息图层，让用户聚焦所关心的数据。
而一些垂直场景的应用，地图区域功能的描述相对次要，通常会对地图的用色进行大幅度精简。以打车应用为例，地图用色少且色调相近，突出核心的打车状态信息颜色，同时体现应用的品牌特色。
不少运用地图的概念设计中，会更极致的使用单色系地图，仅突出数据信息的颜色，充满未来感。
六、未来的地图
随着网络速度的提升，手机硬件的升级，顺应AR/VR技术的发展，地图逐步进入3D和全真时代。苹果地图在现有的地图的3D视图下，已对地标建筑赋予更多细节，并在夜间模式模拟了灯光效果。
3D地图就像是虚拟世界中的基础建设一样，苹果地图添加精细地标模型后，同时应用到Carplay的导航中，在驾驶时可直观看到与现实世界对应的3D地标。
谷歌更是提出“沉浸式视图”的高保真3D地图，使用图像还原一座城市的面貌，为浏览一座城市提供了几乎真实的鸟瞰视角。
同时全真模拟日照和天气系统，和现实一样模拟东升西落的光线方向，模拟晚上和雨天下的城市面貌。
随着地图的立体全真化，地图的数据也将向空间延伸。相对全真地图而言，人们本身就身置真实的地图场景中，未来借助AR设备，人们无需对照地图即可完成导航。
结语
地图历来是人们借助艺术的手法，以极具想象力的方式对世界进行再现，它遵循科学测量的法则，使用几何的线条和形状对地球的进行抽象化。地图反映了制作者对世界的认知，而现代的科学技术让地图呈现尽可能客观。但地图并非单纯地呈现地球，而是呈现人们眼中的世界，它寄托着人们对美好生活的想象，更好的认识、探索和规划世界。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~——————————
工欲善其事，必先利其器。好的工具可以有效的激发设计师的灵感、提升设计师的效率。我们准备做一个设计效率工具系列，整个系列将好的设计工具贯穿到完整的设计流程中，并结合日常我们使用的情况向大家做推荐。通常的设计流程分为日常的积累、研究分析、设计创作、测试评估、对外宣传这几个环节。此篇为综述篇，之后的篇章会针对不同环节进行深入的陈述。
设计师日常除了应对当下的需求，每天可以拿出一定时间保持学习的习惯。不仅可以让我们紧跟最近的设计趋势、设计潮流、设计方法，也可以让我们潜移默化中得到提升。
Panda帮助设计师不错过每天的设计灵感和资讯，包括新的设计方法理念、流行潮流、也有一些新产品推出。我们可以把Panda替换Chrome主页，每次打开浏览器页面都可以随时看到最新的设计资讯。一些英文的订阅也可以用chrome浏览器的翻译功能可以粗略查看。
地址：https://app.usepanda.com/#
全球顶尖创意内容平台，作为中国成立最早、最受欢迎的创意垂直网站，以 “Open Your Mind” 为宗旨，始终专注在全球创意、艺术、灵感、人文领域寻找最有质感的声音。
我们总在生活中与「一瞬间的感动」相遇。Voicer的理念即是发现这「感动」， 将它传递给更多热爱生活的人们。内容包括创意内容品牌、在线杂志等。致力于分享生活和设计之美。
地址：https://www.voicer.me
涵盖设计商业思维、产品设计原则、设计系统等关于推动设计团队前进的实践读物，同时提供PDF和有声格式。
地址：https://www.designbetter.co
——————————
设计师在调研过程会研究用户、记录用户的行为和需求，会使用一些高效的记录工具。同时繁多的调研的信息需要汇总整理，协作整理，这里会推荐一些记录和整理的工具给大家。
Noted 是一款将录音和笔记相机相结合的软件。我们做访谈用户或做会议纪要的时候，经常错过记录的内容，如果通过一些软件录音的话，后期回听需要比较多时间成本。Noted可以在记录笔记的同时记录输入文字的时间点所对应的录音，输入的每个字的时间点都会对应到。当内容没记录下来时可以随时跳到对应时间的录音进行回听，方便在漫长的录音文件中快速检索。
重塑学习方式的阅读笔记工具，更加高效阅读书籍和学习，可以在阅读时摘录笔记，制作学习卡，提取关键词，根据笔记生成思维导图，梳理知识框架。非常适合阅读专业书籍，阅读论文以及复习。
地址：https://www.marginnote.com/chinese/home
一款功能强大的手写笔记软件，拥有多种笔记封面和纸张模板可以选择，支持自定义模板，可以简单处理图片，可以导入pdf、ppt等文稿并做标记，也适合做电子手账。
地址：https://www.goodnotes.com/zh-cn
调研阶段方便多人一起搜集资料和汇总，多人同时在线编辑，内容实时同步。随时随地高效协作，轻松创作。
地址：https://docs.qq.com/home
功能强大的思维导图软件，极简设计，流畅体验，多种结构图风格选择，方便资料的汇集和思路的整理。
地址：https://www.xmind.cn
——————————
当设计目标确定时，接下来进行具体的创意设计。设计师除了通过脑暴进行发散方案以外，一些高效的设计工具可以让我们事半工倍。
UI设计灵感库，基于dribbble平台精心挑选优质内容，提高效率便捷，为设计师提供专项更好的灵感。同时支持邮件订阅推送。
地址：https://collectui.com
Adobe color不仅从各个维度解决了我们的配色需求，同时也提供找图需求。其中包含 9 种智能调色模式可以选择。拾取主题色、拾取图片中的渐变色、协助工具可以合理帮助检查不同颜色的对比、探索behance趋势。
地址：https://color.adobe.com/zh/create
图标动态效果库，当绘制的图标需要一些巧妙的微动态效果时可以参考。
地址：https://useanimations.com/index.html
当插件特别多时候，FigmaEX极大的改善了Figma中使用插件的体验，将插件可视化。可以进行展开，同时显示插件的名称与图标。可以通过拖拽调整插件的顺序，调节高度。
地址：https://moonvy.com/figmaEX/
Autoflow｜流程图插件
输出交互设计稿的时候，方便快捷的在不同画板之间连线，提升输出效率。
地址：https://www.figma.com/community/plugin/733902567457592893/Autoflow
这是一个非常简单实用的 Figma 插件，它可以帮你将任何形状元素倾斜过来。
地址：https://www.figma.com/c/plugin/741472919529947576/SkewDat?ref=prototyprio
最棒最全的插画库，支持快速搜索，一键调整颜色。
地址：https://undraw.co/illustrations
一款免费的在线服务，它通过 AI 自动去除图片中不需要的部分，只需要上传图片，等待几秒钟即可。用鼠标把不要的部分划掉，松开鼠标就会闪几下，被划掉的部分就消失了，比如去水印之类的小东西，如果用 PS 的图章，估计要十来分钟，而用 Magic Eraser 就几秒钟，简单易用，推荐使用。
地址：https://www.magiceraser.io
设计输出后可以通过这个清单去做最后的检查。网站列举了一些通用场景（页面、元素、流程、主题、品牌）下的基本设计要素。可以检查你的设计在这些场景下是否符合规范。样式、颜色、命名、易用性等是否合适。
地址：https://www.checklist.design/?ref=prototyprio
——————————
好的方案不是一蹴而就的，设计方案需要不断的打磨和迭代。方案需要持续和用户进行沟通和测试，才能得到完善的方案。也需要和开发工程师不断沟通，以达到最佳的实现效果。
用户测试阶段方便高效的收集用户反馈，一般用于定量的用户测试。
地址：https://docs.qq.com/
一般的眼动跟踪设备比较昂贵，使用繁琐。这个名为鹰眼的眼动追踪APP，可以通过手机前置摄像头捕捉用户在使用产品时的视觉动向。
地址：https://www.usehawkeye.com/?ref=prototyprio
覆盖产品经理、设计师、工程师协作需求。设计交付更轻松，有效管理和使用设计资产。
地址：https://codesign.qq.com/
在项目上线前设计师都会对最终的产品实现效果进行走查，以保证设计还原的准确性，体验的流畅性。这是一款视觉还原工具，帮助前端工程师在页面重构阶段就能快速发现开发稿与视觉稿的差异，实时对比、实时修改，减少工程师与设计师的沟通成本，提升整体开发效率。 ：
pixeleye.暂未对外开放敬请期待
——————————
设计完成后汇报展示、产品的宣传包装等，提供更便捷优秀的展示形式。
样机的类型全面而且免费，综合质量很高。
地址：https://www.mockupworld.co
素材非常优质精美，有免费和付费的资源。
地址：https://www.ls.graphics/#UI
主要面向设计师群体，帮助设计师建立个人在线作品集。几分钟就可以建好一个作品集网站，提供精美模板选择。最大的特点是易于操作，无需懂网页程式，都能在建立一个网站。最重要的是你可以使用自己的域名。Adobe Portfolio需要收费。已订阅用户可免费使用。
地址：https://portfolio.adobe.com/start
此综述篇大家有了比较整体的了解，在设计流程中每个环节，介绍了一些比较好用的工具，后续的设计工具系列文章会针对某一环节进行更深入的探索。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：腾讯ISUX团队 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
“效率一直是公共舆论中的一个重要话题：在古希腊人眼中，它是政治和社会运转的方式；工业革命早期，亚当·斯密将其视作提升生产力的强劲动力。”时至今日，它被奉为公共生活的首要目标，效率升级实质是广义世界里生产力的一次革新。
科技和物联网以看不见的方式正重塑这个世界，从生活到工作，科技把每一张有形的办公桌移到了云端，让每一场可能发生的对话跨过了坐标的限制。技术开放地定义着我们所理解的现实工作环境，腾讯文档以对效率协作世界新的理解重新归来。
我们希望“让协作更高效，让创作更轻松。” 站在新旧交替的路口，是时候以全新的设计语言，让工具退去冷冰的外壳，走进与智能隔空对话的新世界。
产品感知关键词：
Phase 1
我们把腾讯文档的品牌因子比做是架落与两岸的桥，从时间和空间的角度，连接现在与未来。在这里，代表效率协作先进生产力创造的新世界，转承着庞大信息流的无限可能性。希望在这里发生的每一次虚拟与现实间的交流都是如此贴近你。
在此，我们赋予这个新世界以“数字”之名为前缀：
在数的数字（number）里，从有限0到无限∞；在物的数字（digital）里，从有形到无形。
就像霍金所说，宇宙最根本的东西首先是空间，其次是物质，再次是时间。因为物质的存在和运动必须是在空间里进行。而没有物质，谈论时间是没有意义的。
而在这个广阔的效率世界里，由无形的空间结构支持，答应着无声的时钟….
关键词的联想：
连结、握手、相遇、构建、乐高、晶体、方块、魔术、火花、梦想、成就、有序、几何、空间、数字、代码、窗口
从联想中提炼具有关键的隐喻和形式：
把关键性的隐喻抽象出来，找到表现形式，使其更简洁纯粹，更容易被组合
品牌关键词
秩序是一切天体、物质、时间、生命、形态和形式秩序状态运行的最基本法则。
万物有序，虽然呈现的现象千变万化，但褪去复杂的外表，内在规律却是不变的。以更规整和原始的抽象基础形为所有应用元素的开端，以秩序作为布局的基本准则。
正如我们腾讯文档一直在思考的，寻找秩序中的效率，再从效率中找到变化的规律。
早在上世纪，透明性和通透感就追随着设计的平面到立面。从沃德装饰语言的中立性到密斯凡德罗建造的清晰，以形式的通透对内容的冗杂，以材质的纯粹对结构的多样。
在这里，我们用“轻和透”来体现技术带来的未来感，在画面中叙述的更多是余白空间所带来的无边想象力。
“光从来都是为了它所照亮的事物存在而不是为了它本身。”
流质的光影和颜色是整体设计中氛围的基调，用颜色之间缓慢的渐变预演空间中正在发生或者即将发生的故事。
我们用了色盘中相对沉静的极光色系（蓝紫绿），拓宽空间的边界感。
与正在交融和变化的颜色中间态，一同隐喻了智能和科技作用下的每一次协作和创作的真实实现。
Metaphor Box 协作盒子，我们用一个变化的立方隐喻一个协作空间站。在这里有可能发生的是各种各样的碰撞。思想的火花，创作的灵感，执行的高效。这里有属于一个也有属于一群人的精彩。
最终我们将腾讯文档的Logo图形化，赋予Metaphor Box协作空间的概念。利用有序的几何线条为空间背景构图。在原本的智慧的品牌蓝基础上，添加了一点灵动偏暖的渐变色，为整体画面增添生命力及亲和力。最终完善后应用到官网、官网登录页、闪屏页、空页面的场景。
闪屏
在闪屏的延展中，我们基于大的品牌理念延展出两个不一样的方向。
A. 以腾讯文档logo的形状为视觉元素载体空间，向里呈现一个轻盈有机的未来世界。
B. 以腾讯文档产品“协作盒子”的概念，立体的展现一个代表科技为基底，多方协同运转的动力世界。
最终，我们选择了整体画面更为清晰，主体更为清透明确的主图形。
调整细节后应用到闪屏
官网首页Banner是最直接、最具感染力的视觉传达路径，我们需要让用户在进入 docs.qq.com 即刻形成品牌印象，通过Slogan传达腾讯文档的产品价值，同时在Slogan的字段上添加了正在编辑态的光标元素，体现文档高效的协作能力，最终以响应式的方式适配到移动端。
在官网的其他页面，我们将品牌语言进一步落地。
在腾讯文档空状态的设计中，我们以几何的ip形象为页面穿插一个个不一样的故事性叙白。传递腾讯文档平易近人的智能语调。
在画面的整体构成中，我们增加了一些轻透的质感元素，结合几何形的整体图形语言，让画面轻盈也丰富。
古尔德在《奇妙的生命》一书中写道：“有些人觉得（人类是唯一智慧生命的）前景令人沮丧，我却总为之感到振奋。我将它当成是一个源泉，它带来了自由，也带来了道德上的责任。”效率的背后不止是关于工作方式的改变，仍然需要不负所望：构建责任。
我们在逐步进化腾讯文档的整体视觉语言系统。后续我们将推出下篇，向大家展示腾讯文档品牌在UI语言和其他品牌延展中的更多设计。
在这个快时代，精耕出自己的风格，打造更舒适的用户体验，敬请期待......
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：腾讯ISUX团队 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
2015年之后的中国互联网，人口红利、流量红利逐渐退场。2019年遭遇第一场资本寒冬，上半年投资总金额同比下降了58.5%。也在2019年，“精益创业”、“精益数据分析”、“增长黑客”等一系列数据思潮开始流行。而UX设计师作为半个产品经理，我们很容易将这股“数据热”迁移到自己身上：每个UX设计师都要学数据分析了吗？数据和设计是什么关系？天天盯数据会限制设计师的想象力吗？数据到底要怎么用？……
过往，设计师一般不会把“数据”挂在嘴边。我们提倡“以用户为中心，打磨极致用户体验”，较少考虑成本和商业效益。
通俗来说，就是产品经理负责“生意”，设计师负责“体验”。以“造鞋”为例子，产品经理做了市场调研，决定要生产儿童运动鞋，设计师负责设计“适合4-11岁的儿童在城市公园玩闹”的鞋子应该长什么样、穿着它跑跑跳跳是不是舒服的。但是设计师不需要担心运动鞋的销量，产品经理则要跟老板汇报销量业绩。
在红利消退、产品同质化严重和快速迭代的多重压力下，UX设计迎来了更高的挑战：仅凭主观判断“好不好用、好不好看”来打磨产品内在体验，不考虑产品的生存、增长和盈利，很难在行业立足。与此同时，随着数据采集工具的日渐成熟，数据以“客观”和“便捷”两大特点，帮助我们更快获得“设计的依据”。精益化设计是必然趋势，而“数据分析”是精益化设计的手段之一。
沿用“设计鞋”的案例，UX设计师要在自己所在领域思考：在设计调研的过程中，我们用什么数据指标来衡量这个儿童鞋好穿、好卖？在鞋进行批量生产前，我们有没有数据资源支持我们研究父母/小孩对鞋子外观的偏好、小孩运动时容易受到哪些物理伤害等等？如果有条件进行小范围的数据实验，我们如何设计数据实验来评估好穿好卖？
“理解任何事物都需要先对它进行定义，这样才能够在头脑中清楚地知道正在讨论的是这个东西，而不是其他东西。”非常喜欢美国经济学家Thomas Sowell在《经济学的思维方式》里说的这句话。
如果我们对“数据”下定义，那么产品设计语境中的“数据”具体是什么？数据是怎么产生的？
从数据采集手段来看，互联网产品的数据来源主要有3个：二手资料数据、问卷调研数据和应用埋点数据。
行业数据和竞品数据一般通过二手资料获得，包括商业交易数据、用户群的态度和意愿、用户舆论指数、竞品的用户规模和盈利状况等宏观数据。常用的搜索渠道有：百度指数、企鹅智酷、艾瑞、尼尔森、各大科技资讯平台等。
我们可以将这些理解为“市场数据”，在立项期对产品方向有一定指导意义，能快速了解市场概况，也能帮助产品思考差异化定位的问题。
以“腾讯文档为”项目为例，我们想提高腾讯文档用户创建文档的成功率，通过模板创建文档是关键路径之一。研究用户通过模板创建的路径时，想大概了解用户找模板时可能会在意什么。于是我们尝试使用百度指数搜索“模板”、“文档模板”、“PPT模板”、“Word模板”、“Excel模板”，从搜索量得知：PPT模板搜索量最高，符合我们的推测；Word模板内容中，简历、合同需求量较大，而部分用户只是想要好看的Word背景等等。虽然我们得到的有效信息不多，但我们能够通过二手资料的方式，快速了解用户需求的基本面。
问卷调研数据是通过向目标用户发放问卷获得的，侧重于收集人口学信息、用户自述的历史行为、主观态度或意愿，比如用户满意度调查、流失用户原因调查等。本质上是通过建立假设、再进行抽样统计的方法来得到用户口述的答案。也就是，问卷倾向于听用户说了什么、而看不见用户真正做了什么。严谨的问卷分析也会比对后台数据，校验用户说的和做的是否一致，以清洗无效数据。
较之于问卷调研数据，我们想看“用户做了什么”，则通过分析应用埋点数据获得。
“应用埋点数据”也叫“埋点数据”、“前端页面数据”，我们可以简单理解为“通过技术手段获得用户在应用内（网站、客户端、小程序等）的操作行为数据”。其背后原理是：用户和界面发生交互，系统需要向服务器发送请求和返回请求，把这些请求预埋一段计数代码，就能得到页面的曝光数据和用户的操作数据。
埋点需要产品经理或设计师做好数据指标的定义，跟开发工程师提前沟通，让开发工程师在代码中嵌入埋点。一个埋点由多个字段组成，规范地定义字段，有利于我们在数据平台搜索埋点更方便。当我们怀疑数据有效性时，也更方便排查埋点问题。
埋点类型可分为曝光埋点、操作埋点和时长埋点：
1. 曝光埋点可以捕捉页面被展示的次数，可以是针对整个页面，也可以是页面中的某个区域。即我们常说的PV、UV。
2. 操作埋点则是在用户对页面某个区域（按钮、卡片、提示条等）进行手势操作（点击、双击、长按、滑动等）时，进行打点记录。对应的，也称之为某个操作的PV、UV。
3. 时长埋点是通过标记以上两类埋点、并计算时间差获得的。比如，我们记录用户选取模板耗费的时长，可以通过离开页面的时间（t2）-进入页面的时间（t1）计算。而离开页面则用点击左上角返回按钮、点击具体模板等“离开”操作来核算。
基于以上3种原始数据，我们可以运算得出点击率、功能渗透率、人均点击次数、人均使用时长等具有对比价值的数据。
较之于二手资料和调研数据，埋点数据更加贴近用户的真实表现，作为反馈指标的灵敏度更高，可挖掘性更强，也能作为客观衡量指标引入到每一次产品迭代中。
设计师理解埋点的原理，有助于在数据采集环节跟数据开发更好地沟通，并提出合理的数据需求。另外，当我们拿到一组数据，也需要从根本原理上去判断数据的信度和效度，确保数据没有质量问题再进行下一步分析。
数据分析能力会在UX设计师的岗位招聘要求中被提及，但除了电商和广告行业的数据化设计知识体系较为成熟，其他领域还在探索。另外，相比于市场营销、产品经理、产品运营等职能，设计师的分析框架是相对晚熟的。
实际上，我们很难从招聘广告中归纳“具备数据分析能力的设计师”长什么样，但我们期望这样的设计师对数据的感知力强、分析逻辑清晰、数据经验丰富，对某个垂直领域的数据仪表盘了如指掌等等。
数据对UX设计有什么用？或者说，在设计链路的哪一个环节，数据和设计才能发生化学反应？
UX设计日常流程为：得到一个需求（需求评审/需求挖掘）——输出设计方案（设计决策）——验证设计方案（设计实验）。顺着这个流程，我们来看看数据在UX设计各阶段的作用。
肖恩·凯利斯在《增长黑客》开篇就提到“仓筒组织”这个概念：职能组织有各自的KPI，但未必对最终的业务目标都有利。比如开发人力有限的情况下，产品经理想上线新功能，市场运营想搞推广活动，设计想做UI大改版做炫酷的动画——就像N匹马有N个方向，马车跑不快。
尤其是当产品进入成长期，我们会发现“能做的事情真的太多了”！不仅仅是来自老板和产品经理的需求，每天都有用户想教你做产品，刚刚竞争对手又上线了N个新功能等等。另外，当多个产品经理分管不同业务线，每个产品经理都会认为自己提的需求优先级最高。那么，ABCD这几个需求，哪个更值得即刻实现？
有目标导向和成本意识的设计师，不会拿到PRD就开始画稿，而是做需求评审。下次产品经理给你提需求，或者自己想要主动提案，不妨从下面几个问题开始思考效益。
如果这个新功能上线或对已有功能做这些优化点：
｜正向评估：如果做，能使哪些用户在什么场景受益？用户会因此使用、消费、甚至推荐我们的产品吗？
｜负向评估：如果不做，是否会造成用户口碑变差，甚至弃用我们的产品？
｜数据导向：预估这个需求对大盘数据（AARRR）有何贡献？如果无法在短期看到对大盘数据的直接提升，应该取什么样的数据指标来评估其价值（GSM模型）？
｜比对优先级：目前有ABCD四个需求，而人力资源有限，当下最应该解决哪个数据环节的问题？
我们以腾讯文档的Excel按行填写功能为例，阐述如何在需求评审阶段就思考数据效益。
一开始，我们只是从用户吐槽中了解到在手机端使用Excel录入信息的困扰：协作人之间容易窜行误删误改别人填写的行，甚至把创建人输入的表头信息都给删掉了。
我们模拟信息收集场景，摘出Excel移动端输入的体验节点，发现“在有限的屏幕内去处理表格信息，需要来回滚动/缩放表格，再回到自己的行再输入”这一点最容易发生错误，尤其在没有冻结首行的情况下。
我们有收集表功能，也支持表格转收集表，但是都依赖创建人主动去使用这个品类/这个功能。我们是否可以在创建人不干预的情况下，直接把来回滚动的表格输入变成纵向的表单输入？
以上都是从“感知”角度发现和分析问题，确认了“存在这么一个问题”，然后提出了一个可行的想法。往往这个时候，我们容易为之兴奋。
但是如果我们坚持更精益的投入产出比，我们应当评估“这是不是一个要优先解决的问题”，即评估收益：改变Excel移动端的输入体验，能带来什么收益？
首先，我们做正负向评估。
｜正向评估：如果做，用户可以在手机端更顺畅地录入信息，避免串行删改的错误。虽然这不足以吸引新用户使用我们的产品，但这个体验未在竞品实现，能形成差异化的记忆点，也许能带来好的口碑。
｜负向评估：如果不做，手机端的Excel输入体验跟其他竞品无差，用户倒不会因此流失，但是创建人会因为协作者的犯错苦恼，也许会因此转为采用“IM一对一沟通”来避免出错。
然后是设定数据目标：如果这个功能落到数据板上，能作何贡献？
｜数据导向：我们预期这个功能能够通过提升手机端的输入体验，来避免用户出错，降低创建人整理数据的负担，以提高用户留存（而非预期这是一个拉新功能）。并且，设计假设正确，应该能通过一些数据指标看到用户的行为变化。
最后，对比同期提出的几个产品需求，评估优先级。
｜比对优先级：假设Excel按行填写的需求是A（图中黄色点），同期有一个影响文档安全分享的需求B。如果我们按照正负向评估去考量优先级，将AB两个需求都放在象限图里，越外层越应该优先处理，那么我们就应该优先处理需求B。
以上是为了将思维可视化呈现给读者，实操时更重要的是数据意识和敏感度。图示仅供参考，用何种形式表达不重要。
掌握一套清晰的需求评审思路，才有话语权去讨论这个需求是做还是不做、即刻要做还是延后再做。这不仅仅是UX设计师需要具备的目标导向思维和需求分析能力，而是整个团队都应该建立的数据意识和工作流。这也适用于对设计师提案的自我审查，避免自娱自乐。
产品在不同的成长阶段关注的短期效益会有所不同。初创期，产品先要验证其假设的需求是不是用户真实需求、商业模式是否可行。当产品发展到一定的用户规模，我们可以通过对比关键数据指标，去判断现阶段是否符合预期。这就像我们去医院抽血做体检，血样指标可以反映我们当前是否健康。
如何检验产品健康度呢？我们首先关注宏观的数据转化是否符合预期，即AARRR。海盗指标这一套，想必大家耳熟能详。但对设计师来说，难点在于如何将宏观数据转化与具体的用户使用场景进行关联，进而落实到具体的设计任务。
以腾讯文档为例，在线文档的核心用户价值是“从创作到协作的多人多端无缝同步”，因此我们定义用户的关键路径是“创作→分享→协作”，即：
基于关键路径，我们继续下钻分析每一个环节，建立用于监控“转化质量”的行为漏斗。比如在“分享”这一步，落到APP里，这个行为漏斗是：
我们发现仅30%的创建人在分享文档前设置了非私密权限——这个数据并不符合我们的预期，因为这会导致创建人分享文档后，协作人无法直接查看或编辑文档。协作人需要进行权限申请，创建人则需要处理相应的权限申请通知或更改权限，从“申请权限”到“审批通过”的时间差降低了协作效率。
我们进一步去找关联的数据指标，来确认“这给用户造成了困扰”——“有多少用户在文档分享出去之后再返回来设置权限”‘、“一个创建者平均要处理多少次权限申请”等等。
通过小范围的用户测试，我们了解到“权限设置”是一个视觉盲区。于是，我们优化分享页的信息展示，来改善“用户看不见权限设置”这个问题。另外，当创建人在处理权限申请的通知时，提供修改权限的入口，以避免重复处理同一个文档的申请消息。
最终，我们将“分享前进行权限设置”的转化提高到80%——吹牛的，业务数据太敏感，无法以真实数据跟大家分享，本文的数字皆为脱敏数据。
这就像一个剥洋葱的过程。先找到产品的核心价值和对应的主路径，再拆解到对应的多个用户任务流，关注微观的某个环节转化是否有问题。利用数据诊断产品健康度，然后继续用数据或其他研究方法下钻，下钻到可以落地到设计点的层面。
2016年听了白木彰老师在杭州的一次现场分享，他对“Design”的理解非常透彻。“Sign”是“标志”，应该是大家最共通的常识，就像国旗是这个国家的sign。那“De”是什么？台下有人回答“重新定义”，而白木彰很自信地说：“不，这是一个否定词”。
对于UX来说，同理。每一次的设计都是一次否定，否定现有体验的合理性，否定现有的产品、服务或某一功能完全满足需求。反过来想，则是审问自己的设计方案：每一次的“否定”，真的更好吗？
这里举一个“小需求”为例：腾讯文档Excel的PC端右键菜单高度优化。笔者目前负责腾讯文档编辑模块的UX工作，日常就是很多这样的“小优化”，其实这更加考验数据敏感度和对“严谨”的坚持。
需求背景就是用户反馈“右键菜单太长了，小屏幕看不到菜单底部的内容”。
“展示问题”的解法有很多：
解法1/ 用UI手段，降低单个menu item的高度。
解法2/ 重新归类，通过折叠来缩短菜单。
解法3/ 当菜单无法完整展示，重新锚定其在屏幕的坐标。
对比竞品，确实有表格产品通过（2）去解决这个问题，但是我们捞数据发现：右键菜单中，插入行列是高频操作（红色部分），点击次数比其他功能高5～130倍，且人均点击量分别是3次和2次。我们决定不去对增加行列进行菜单折叠，因为这样做虽然我们解决了“菜单太高”的问题，但降低了点击效率。
接到某个需求的“A问题”，我们容易一叶障目。但是，会不会因为我们解决了A问题而引发B问题呢？数据帮助我们快速决策，避免B问题的出现。谨慎对待每一次小设计，因为每一次小设计都是一次否定。
大家对数据实验应该不陌生，常用的方法有AB测试和灰度测试，是一种控制变量的抽样实验方法。
AB测试是指通过抽取抽取等量用户样本进行AB两个设计方案的投放，对比两组数据，进行方案择优。这两个方案的差异要严格控制在“仅有一个因素的差异”。这跟我们初中做生物实验论证“一棵小树的生长需要阳光”的思路一样：两组等量的小树，一组有阳光，一组没有阳光，经历相同的时间后对比生长的平均高度差。水、空气、养分等其他条件要严格一致。因此大改版等“多变量”的设计并不适用于AB测试去印证。
大改版则通过灰度测试或拆分变量去做AB测试来确保效果。灰度测试是指如果软件要在不久的将来推出一个全新的功能，或者做一次比较重大的改版的话，要先进行一个小范围的尝试工作，然后再慢慢放量，直到这个全新的功能覆盖到所有用户。也就是说在全量发布的黑白之间有一个灰，所以这种方法也通常被称为灰度测试。
设计师需要观察综合的数据指标，以腾讯文档为例常规的指标有：PV、UV、人均点击次数、功能渗透率、使用该功能的留存率等等。另外是多渠道收集用户反馈，包括腾讯文档的“吐个槽”社区、微博搜索关键词、随访身边的用户朋友等。
数据化设计不是对“精心打磨体验”的否定。恰恰相反，对设计工匠来说，数据分析能力是一种新的“打磨工具”，提倡在设计实施和决策过程中更科学和客观。UX和数据的关系，就像我们期望鞋子被量产之前能够有数据佐证“这款鞋好看好穿好卖”，而不是否定“好看又好穿的鞋子能带来更好的销量”。
最后，“价值-设计-数据”是一个动态课题，必然随着业界经验的沉淀和数据工具的发展，不断迭代。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：腾讯ISUX团队 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
通知是产品中极其重要的一部分，它能快速将内容的状态及变化通过不同的方式传达给用户，以便用户在收到信息后根据所传递的内容及时做出应对策略。
在这里，有一个很现实的问题，很多产品喜欢一股脑的把有效的/无效的、重要的/不重要的、用户想知道的/不想知道的等所有信息通通推送给用户。那么，你的推送渠道真的用对了吗？是否做了信息优先级区分？推送时间段是否有效？站在用户角度，下面这些场景你肯定碰到过：
◇ 手机屏幕总是频繁弹出信息，接二连三的震动、提示音让你一怒之下卸载了一些不太常用的APP；
◇ 桌面图标99+、主页的消息入口99+、进入消息分类还是99+，清理起来非常麻烦，还不如关闭几个分类通知，少一个也能缓口气；
◇ 一天少看了几个小视频，好不容易节省出来的流量被通知无情的消耗，还不如关闭系统通知权限来得快；
◇ 每隔一段时间，都要在手机短信中回复一大堆TD（退订），想吐的感觉；
◇ ......
在频繁地打扰下，用户关闭了一个个通知权限、甚至一度卸载APP。不难看出，好的消息通知能巧妙的将用户求留住（部分用户利用通知就能保持对微信、QQ的控制欲），做的不好就会起到负面作用、失去了消息通知的初衷，这里面最需要把控就是推送的一个“度”。
用户可能因为一条走心的推送而转化、也可能因为被打扰而放弃使用，站在设计角度，需尽可能打造让用户更喜欢的通知系统。那么，对于不同的业务需求及使用场景，又该如何差异化的进行消息推送，笔者通过本文进行分析总结，与大家一起了解。
一、消息推送的基本知识
二、消息通知渠道
三、让用户再次开启通知权限
四、提高触达率的小技巧
五、结语
消息通知是产品提供的一项服务，能够及时将产品的期待或内容的变化、根据其等级权重合理的通过不同渠道及时同步给用户，常见的如互动提醒、老用户召回、活动拉新、产品更新或帮助提醒等，通过站内红点、弹窗、短信、邮件等方式与用户进行信息交换。
用户层面，方便及时获取到想要知道的信息、以及对信息交换的控制权。例如：用户发布一条新的短视频想要对评论/点赞及时掌控、给心上人发了信息想在第一时间看到回复...等，产品也是借此用户对内容的控制欲，利用消息推送提升用户的使用体验。
产品层面，通过主动推送想让用户知道的信息，以达到新/老用户转化的目的。例如：通过手机短信形式发放优惠券对老用户召回、应用内通知或桌面推送对用户拉新...等，以此提高产品收益，获取更大的商业价值。
首先，一个好的消息系统首先需要将消息内容设计的全面，以便用户通过消息通知能准确无误的了解到对应内容；
其次，消息的触达方式需合理有效，必须提供便捷的操作入口以供用户及时反馈；
另外，为了避免过于打扰用户，需选择合理的推送渠道，提高用户触达概率及反馈效率。
消息通知渠道分为应用内通知应用外通知。应用内通知主要来源于消息中心或系统主动触发的弹窗来体现，而应用外通知包括桌面图标红点、手机短信、电子邮件、push、公众号信息（需绑定）等渠道推送。
1）消息功能入口
消息功能入口提示也称为红点提示，主要有底部Tad栏、首页右上角、个人中心右上角三种形式。当有新的通知出现时，对应图标的右上角会出现小红点提示，清晰明了，关于小红点设计，之前《小红点篇 | 用好这招，让用户的触达率大幅度提升！》这篇文章有详细说明。
红点提示的用户触达率较高，但需要用户在登录状态下才能查看，比如订单状态变化、用户与用户/产品之间的互动消息、产品活动通知等。
2）消息列表
当产品的消息类型较多时，点击消息功能入口即可跳转至二级分类列表。与上述相比，消息列表的内容则更加清晰，通过第一次消息入口功能的引导触发，这里的用户触达率将成倍增加。
3）弹窗通知
以弹窗的形式覆盖在页面内容顶层，阻碍用户的当前操作并迫使用户对弹窗做出决策，可以是系统主动弹出或用户手动触发，对用户的干扰极大。
弹窗通知最大的优势在于会100%被用户看到，无法忽略，否则将不能进行其他操作，很适合产品的一些重要事件提醒，例如应用升级、活动通知、优惠券引流等。
4）Toast 通知
Toast通知是用户在操作之后给出的即时反馈，与当前页面内容关联性极强，但不会中断用户的操作，出现的时间很短，一般持续3秒后自动消失，对用户的干扰也比较小。
需要注意的是，Toast容易在用户不注意的情况下被遗漏，所以适合用于操作后不影响大局、且不可二次操作、不可逆转的轻量提示，例如删除成功、提交成功等。
1）桌面小红点
小红点通常以圆点+数字的形式出现在图标右上角，用来提示应用内的未读消息数量，进入应用查看或清除后小红点则会消失。桌面小红点有一个必备前提，需要同时开启设备和应用内的通知权限方能接收提醒通知。
在部分应用中，桌面小红点具有较大的价值，能对用户产生积极的影响，使用频率得到进一定的提升。例如：社交类应用中的私信、评论、点赞等；商家端的咨询信息、下单提醒等，用户在看到后都会有强烈的点击欲望，对一些数据的提升起到推动作用。
2）PUSH推送
PUSH推送通知常见于设备顶部横幅（几秒后消失）、通知中心以及锁屏后的中部区域，用户可从卡片中的内容获取信息类型及重要程度，用以决策是否需要立即打开。
这种推送方式，用户几乎很难忽略，不处理的话会长时间浮于屏幕之上，非常适合价值及时效性较高的消息通知。除视觉提醒之外，还可通过听觉触达用户，例如支付号、微信的收款信息等，不过依然要同时开启设备和应用内的通知权限。
3）手机短信
短信推送是大家很熟悉的通知渠道了，毕竟现在都是用手机注册账号，手机号获取难度几乎为“0”，常见的有验证码短信（用户请求）、营销短信（产品推送）两种：
验证码类似“一问一答”的互动，没有什么特别的玩法；
营销类短信对于拉取新用户、老用户召回、节日/活动促销能起到不可替代作用，产品可通过短信发送图片、文字以及超链接，内容的时效性、用户的触达率都相对较高。
着重说明一点，因为短信通知的成本较高，在使用之前需要足够的思考分析，细分用户群体做到精准投放，避免所花费的成本与产生的价值不成正比。另外，如果需要放超链接，那么短信内容一定要有足够的说服力及吸引力，总是被用户当做诈骗短信删除、举报的话还不如不放。
为了减少对用户的打扰，让产品更人性化，一般会在短信结尾提供TD（退订）提示，用户回复即可取消后续的推送，但是否真的取消成功，这就得看产品了(¬◡¬)...
4）电子邮件
电子邮件推送方式使用的并不多，一方面需要产品有web端服务，纯粹的移动端APP邮件推送不会有什么效果；另一方面，绝大多数的用户登录电子邮箱并不频繁，还容易被用户一键清理或误删。
电子邮件唯一的好处就是用户可通过超链接直达内容出处，相比APP应用，免去了下载等一系列操作，还可以长时间滞留，便于用户随时查看或添加星标，处理时间段选择较为灵活，很适合web端服务。针对一些商业化的邮件推送，也需要花费一定的经济成本。
产品获取用户邮箱地址的难度较大（邮箱账号除外），不难理解，使用手机号一键登录、验证码登录、第三方账号登录远比邮箱地址登录要方便的多。除此之外，还可以通过个人设置的添加邮箱、问卷调查的邮箱地址预留来获取，不过这就要看用户的主动意愿了。
5）公众号消息
公众号背靠社交应用，普及程度及用户触达率是极高的，不过这需要产品利用部分业务、活动为导向，引导用户关注公众号后方能接收到消息通知。
目前公众号只能向用户发送符合部分场景要求的服务通知，例如刷卡通知、物流轨迹变化、商品购买等。如果预算足够的话，还可以购买公众号列表、内容详情页、朋友圈等产品广告位进行特定用户群体推送，无需用户关注也可以看到并进行转化。
用户一旦关闭通知权限，对产品来说无疑是一个损失，这意味着没有消息通知的推动，用户的使用频率以及与产品之间的互动显然会减少（就连夫妻之间都需要时常互动与沟通交流，何况对于有选择余地的产品），时间长了，用户转投其他产品的“怀抱”也不是不可能。
有没有想过，用户只是关闭通知权限而已，并没有卸载APP，真的就没办法了吗？是不是该做点什么...
用户之所以还未卸载APP，说明还有价值，归根结底，关闭通知权限的原因都是因为消息的“狂轰乱炸”带来的无尽骚扰，几乎没有例外，而产品还会添上一把火，用户再次打开APP时无底线的催促用户再度开启，耗尽用户最后一点耐心后，或许再也没有机会了。
这个时候，设计师考虑的不是频繁提醒用户开启，而是用户关闭通知的真正原因（“狂轰乱炸”只是概括），细化各种可能性，然后从中找出机会点，但凡有所改进都值得试一试，毕竟相比什么都不做不会更糟。这么解释似乎毫无说服力，下面举个例子：
当产品中的某项免费服务突然有一天开始收费了，但受到了大多数用户的抵触，这个时候你该怎么做，是无视用户诉求继续收费、还是恢复到之前的免费？这并不是一个选择题，继续收费会导致大量用户流失、恢复免费可能连维持运营成本都难，所以不经思索的选择草草收场、连下下策都算不上。用户抵触的原因可能收费过高或是与实际价值不符，有没有想过利用限时折扣、附加其他增值服务（成本较小）或者组合捆绑销售也不失为一种策略。
那么，到底该如何做既能愉快的发送消息通知、还能能挽回用户的心呢？
用户关闭通知权限，并非没有需求，最典型的就是在某宝、某东加了满满一“车”商品等待降价，然后抱怨消息通知太吵关掉了通知权限，最后就是无法收到折扣通知、还把问题怪在了APP身上，着实太冤。用户只要还有需求，通知权限就还有被重新开启的机会。
1）损失厌恶/利益引诱
首先，我们需要找出对应的价值点，利用优秀的文案给予用户思考的余地，用户每多思考一会，结果都有可能发生改变。
人们都讨厌失去，对于损失的不可控很难接受，在引导用户开启通知权限时，需要强调不开启会失去什么，毕竟面对“得到”和“失去”时，损失更加让人难以忍受，例如物流产品告诉用户“未开启通知，将错过重要的快递信息”。还可以通过激励等进行利益引诱，如“开启后能及时获取红包卡券、折扣通知”等，并提供快捷通道，促使用户重新开启通知权限。
2）消息分类/分别处理
每种类型的通知都不可能符合所有用户的“胃口”，针对社交、电商类产品，可将通知类型分类处理，用户希望接收哪种类型的消息单独开启即可。
例如支付宝将消息拆分为多个类型；京东还增加了午休免打扰设置，开启后在12：30-13：30不会收到任何消息提醒；微信群过多、消息太吵时，开启免打扰又担心错过重要人的信息，于是微信在去年上线了开启群消息免打扰后、可设置群内4个人的消息正常通知，算是比较人性化的设计了。
3）提供关闭/关不彻底
部分产品提供了关闭消息通知功能，但又关不彻底，这是产品基于妥协的基础上，依然在低频推送消息的“流氓”玩法，与用户完全关闭相比，已经算是不错的结果了。
常见于PC客户端，就像很多软件的插件一样，不管怎么关，总是无法彻底关闭，甚至还将开启操作伪装成其他内容引导用户误触；手机短信推送也会有这种情况，用户回复过“退订”后依然会收到相关短信。
这种方式需谨慎使用，在用户关闭通知后，需通过后续推送内容的质量、频率试探用户底线，然后逐渐提升，切不可无视用户操作。
反复推送相同的内容只会让用户更加反感，回复退订、卸载应用都可能在这一刻发生。
很明显，消息发出后，如果用户的触达率较高就没必要再次推送。反之触达率较低，重复推送会让用户有种被催促、胁迫的感觉，适得其反，触达率低有没有可能是文案不够友好、表达不够清晰或者吸引力不够？即便同一件事情，也尽量使用不同的表达方式，如何想办法重新引起用户的关注才是关键点。
中华文字博大精深，且有56个民族，其性格习惯各异，特别在利用当前社会热点、媒介进行的营销推送时，尽可能规避掉敏感信息，如地域/民族歧视、性暗示等。
很多时候，消息推送太少无法满足产品目标、太多则会惹恼用户导致通知权限被彻底关闭，所以不仅要考虑消息推送频率，更重要的是对受众群体进行分类、分别推送，不要每次都一股脑的将消息发给所有用户，当然，能做到千人千面（成本大）则会更好。
没有用户愿意在不明所以的情况下来看长篇大论的内容，需确保消息内容简单直接、清晰易懂，并符合用户认知习惯，还得保持友好的语气以及富有创造力的品牌形象。
处于营销目的时，可利用感兴趣的事件/事物勾起用户的点击欲望，例如网络热词、时下热点等，笔者虽然并不提倡“标题党”，但不得不说，很多标题党都能起到不错的效果。
消息通知需要一个有效操作入口，并且在消息内容中有对应的指向，点击应用内通知切换APP界面、应用外推送链接跳转至web页，从始至终都需要为用户提供一个查看更多内容或参与的有效途径。
消息通知设计的主要目的是在正确的时间、以正确的方式将内容呈现给用户，并提高产品的转化率，不管用户愿不愿意接受，这始终都是一个呈现信息的不错途径。
本文主要总结了消息的通知渠道、常见问题处理、提升用户触达率的方法，以帮助新手设计师快速掌握完整的消息系统。或许最终的结果事与愿违，但不能否认其魔力，需要做好的是确保消息内容质量、对应的受众群体及合理的推送渠道，相信总有一种方式适合你产品。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。
文章来源：站酷 作者：大漠飞鹰CYSJ
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
众所周知，人机交互是一门集调研，构思，设计和测试为一体的学科。作为一门覆盖多领域的多学科，包括并不限于心理学，行为学，编程，工程，设计，调研，和工商管理，现代人机交互的核心已经不再是从技术层面去解决问题， 而是侧重于以多个视角去挖掘问题的本质并思考问题背后的价值。也因此，人机交互学术界一直以来都试图寻找一种思考模式，或者理论模型，去将复杂的思考流程提炼出来。
近三十年来，人机交互领域的方法论可谓百花齐放，尽管许多知名研究机构与院校都发布了不同的设计模型与流程图，但是其内核终究大致相同（寻找问题——定义问题——设计——测试）。
以下是近年来国际最主流的七种人机交互设计模型：
1. 尼尔森诺曼集团设计流程 （Nielsen Norman Group）
2. 斯坦福大学设计学院设计流程（Stanford Design Thinking Process）
3. 《情景化设计:为生活而设计》 中的设计流程 （Contextual Design: Design for Life）
4. IBM环形设计模型 （IBM Loop Model）
5. 英国设计协会双钻石设计模型（Design Council Double Diamond）
6. LUMA 学院设计流程（LUMA Institute Design process）
7. Dubberly Design Office 桥型设计模型（Analysis-Synthesis Bridge Model）
其中，前6种应该都是大家相对熟悉的，我们在文末也附上了官方链接供大家探索。今天这篇文章我们将简要的带大家了解列表中最后一个也是最有特色的一个人机交互模型：桥型模型（Analysis-Synthesis Bridge Model）。
桥型模型是美国 Dubberly Design Office发表的设计流程图（Analysis-Synthesis Bridge Model），对于不清楚的读者，此公司的创始人Hugh Dubberly 曾发布超五十篇人机交互领域的研究型文章，在多个知名设计协会挂名，并被录入美国 ACM 的 SIGCHI Academy， 成为公认对人机交互领域做出最杰出贡献的人之一。Dubberly 也曾在多个美国知名大学任职，因此，此模型也是多数国际人机交互学科的公认理论。
尽管相较于其他的流程图，这个流程图较为抽象，但是其所用的多维度分类却相对明了的阐释了设计的本质。如图所示，桥型模型的x轴分为现在和未来，y轴分为具象和抽象，以此来定义设计的状态。同时也加入了动词“形容”，“分析”，“研究”，“制作”去定义设计中的操作。在这个桥型设计流程中，设计师从左下角到右下角的过程代表从现象走向抽象再从抽象走向产品的过程，与此同时也代表着从今天走向明天，或者说从问题的现在态走向解决问题后的未来态。
起点从左下角开始，（what “is”）代表着问题本身，而左上角的（model of what “is”） 代表问题的抽象模型或者问题的本质。这两个阶段代表着设计中的调研阶段（Researching）。此时的设计师应该通过“形容具象的现象”（左下角格子 Describe+Concrete）即收集信息来拓宽对问题的了解然后再进行“分析抽象的模型”（左上角格子Interpret+Abstract）去制作问题模型来更清晰的看到现象的本质和规律。
在这个阶段，“世界并不清楚他想要什么样的设计”—— Paola Antonelli
在开始阶段之所以要抽象出问题模型，是因为作为设计师不能单纯的听从人们的诉求。当生活中出现一个问题时，生活中人们往往不太清楚自己烦恼的本质是什么，要么他们只看到了问题的表面，要么他们被太多因素混淆了。因此在这个阶段，设计师的责任就是去分析问题存在的环境与原因，并且以人为中心的角度去分析表象下人们的真正需求。也是因此，避免以技术为中心的分析（machine-centered-research）而选择以人为中心的研究（human-centered-research）才是交互设计师应有的职责。
在做以人为中心的研究时，收集和分析信息时避免内隐偏见（unconcious bias）是非常重要的。这里指由于生长在固定社会和文化下的而无意识带有的偏见，比如身体健全的人忘记考虑残疾人的需求，或者经常用电子产品的人下意识认为一些复杂操作很常规。在设计里，歧视不止包括在搜集用户信息时忽略了个别群体，同时也包括设计师本身所带的特定视角。一个成功的设计纵然应该满足大多数人的需求，但是一个向善的设计也不应该忽视特殊群体的情况。这里不得不提到，虽然现如今很多设计往往依靠大数据来进行设计，但是大数据本身就代表着忽略少部分群体的需求，导致少数群体的歧视愈发严重，甚至一度威胁到一些小众的题材。因此在调研时考虑到人种，年龄，经济情况，教育程度，是否残疾，和对科技的熟悉度可以更严谨的分析不同视角下问题的影响。
左下角常用的用户研究方法有情景调查（contextual inquiry），利益相关者逻辑图（stakeholder map)，和参与型研究(Participatory Research)等等。左上角常用的分析方式有带入虚拟人格（persona）和流程图（journey mapping）等等。
右侧的两个阶段则代表问题的未来态或者设计原型态（prototyping）。右上角的 （model of what "could be")代表问题的未来的可能性，也就是一般说的设计和构思部分，而右下角的（what “could be”）就是将这些未来的可能性做出来，从概念化为产品。
然而如何从右上角的抽象模型到右下角具体设计呢？在这里便需要了解一个大致的设计信息层级。
如图所示，一个设计的是由多层结构组成的，从抽象到具象分为五个阶段，策略（Strategy），内容（Scope），结构（Structure），框架（Skeleton），视觉（Surface）。一个严谨的设计应该是从下而上发展的（从深层的策略到浅层视觉），并且每次在考虑深层的策略时应该避免浅层的干扰。这是因为浅层只是策略的表现的方式，而深层策略才是决定产品核心价值的关键。决定策略（Strategy）时应该直接依据模型左上角“问题的本质”来决定要设立什么样的产品目标。只有策略定了，才能确定这个产品的内容与受众群体。假如目标是让盲人点餐，那么内容有可能就是在这个页面提供特殊的菜单形式和电话快捷键。而假如目标是让人听音乐，那么内容可能就是提供音乐推荐与保存。而在结构方面，确立内容后只需要一个完善的逻辑，比如用户的具体使用流程是什么，就可以快速具现这个产品的结构。最后，框架和视觉阶段则更多只是一种表现手法的选择。无论最终选择如何设计，只要保证框架和视觉元素在整个产品中保持一致并且符合产品定位即可。
从策略到视觉的过程也就是模型中从右上角到右下角的过程。每个设计师的目标都应该是以具象的产品实现相对抽象的策略。而要想让视觉和策略紧密联系，就应该尽可能在每一步的过度时都考虑到前后步骤的衔接是否逻辑通顺，避免层与层之间脱节的现象发生。尽管在现实中，层与层之间的分隔往往没有这么清楚，但是这种分层的设计逻辑可以作为一个有用的构思框架，让设计师在发散思维的时候不偏离目标。
而最后即便到了右下角的产品产出，一个完整的设计流程也不算结束。一个成功的设计总是需要多个设计迭代的。尽管在每一个一个迭代中，右下角可能是最终产出，但是在一个完整设计流程里，右下角还应该连接左下角，将已经完成的设计再一次进行分析和测试并总结出优缺点，再进行下一轮的设计。
在右上角的设计部分中经常使用的方法有故事模版（story boarding），纸质低保真模版（paper prototyping），和以人为中心设计（human centered design）等等。
总而言之，桥型模型作为国际人机交互院校最常用的模型，从多个角度描述了从一个问题从研究到解决的过程。我们可以看得出，设计从来都不是一个随性而为的过程。从左侧的无偏见而系统的分析问题到右侧的遵循结构进行设计，设计师都应该在一个严谨的框架下进行思考和设计，这样才能做到有针对性的解决问题。在这里也希望大家能多多关注各类人机交互设计理念并从中获取灵感亦或找到适合自己的设计流程。
下面是六种其他主流国际人机交互模型和官方链接供大家探索：
1. 尼尔森诺曼集团设计流程 （Nielsen Norman Group）
研究问题领域（discover），探索不同可能（explore），测试设计（test)，和倾听反馈(listen)
官网链接： https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf
2. 斯坦福大学设计学院设计流程（Stanford Design Thinking Process）
抽离问题(empathize)，定义问题(define)，寻找灵感(ideate)，制作原型(prototype)，测试成品(test)。
官网链接： https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf
3. 《情景化设计:为生活而设计》 中的设计流程 （Contextual Design: Design for Life）
理解问题(understand)，发明未来(invent)，情景话设计(design)，制作原型(validate)，和开发产品(develop)。
书本链接：https://www.goodreads.com/book/show/33805307-contextual-design
4. IBM环形设计模型 （IBM Loop Model）
观察(observe)，反思反馈(reflect)，和制作（make）。
官网链接： https://www.ibm.com/design/thinking/page/framework/loop
5. 英国设计协会双钻石设计模型（Design Council Double Diamond Model）
发现(discover)，定义(define)，制作(develop)，传递(deliver)。
6. LUMA 学院设计流程（LUMA Institute Design process）
看(looking)，理解(understanding)，制作(making)。
官网链接： https://www.luma-institute.com/about-luma/luma-system/
以上就是本篇的全部内容了，希望大家读完后能对国际主流人机交互领域多了一些了解或者从中获取一些启发。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：腾讯ISUX团队 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
平时用QQ音视频来做什么呢？和好友聊天？与家人联系？还是工作开会？现在你有了新选择，解锁视频娱乐新方式，QQ一起派对让你不必出门，也能和好友一起玩聚会游戏。
挖掘更好玩的娱乐社交场景，能带给用户更愉悦的体验。疫情期间，线下聚会因此受限，线上娱乐应运而生，在此契机之下，期望借助音视频实时互动、声影重现的特性，开启了新的娱乐形态——QQ一起派对。
观察竞品普遍存在不足之处，即缺乏真实聚会游戏的氛围与互动。因此，解决社交游戏产品缺少真实情境的问题，成为QQ一起派对的创新机会点，有利于在竞品中突围，塑造差异化优势。
QQ一起派对是基于音视频展开的线上聚会游戏，结合了实时互动与娱乐化内容。为了让游戏过程更贴近真实聚会场景，我们从游戏氛围和自然交互两方面切入，寻找创新突破口。
游戏氛围
构建适用于游戏类型的界面框架，让线上聚会更贴近真实世界，并运用视觉感染力，营造环境氛围，包括场景具象化、增强代入感等方法，实时感知好友的情感变化，从而获得社交临场感，在心理上感到彼此的存在。
自然交互
有别于竞品需通过点击按钮作答，QQ一起派对利用实时语音识别，让用户通过更自然的人机交互方式，在游戏过程中进行语音抢答，彷佛置身于真实世界中与好友互动，成为QQ一起派对的独特卖点（Unique Selling Proposition）。
综上所述，QQ一起派对的设计要素包括：、
1. 社交临场感（Social Presence）：场景具象化、高度同步实时响应、感知他人情感变化
2. 沉浸感（Immersion）：营造氛围、增强代入感、突出内容与主角
3. 可玩性（Playability）：游戏界面、游戏机制、游戏互动
4. 凝聚力（Cohesion）：将好友聚在一起、吸引更多用户来玩
舞台场景化布局
QQ一起派对能让用户创建房间，邀请好友参加线上聚会，促使游戏氛围具象化。游戏类型聚焦于〝你演我猜〞、〝明星问答〞等猜题游戏，为了增强代入感，让用户融入情境之中，我们采用舞台表演的界面隐喻（Interface Metaphor），借由深色背景突出内容与表演者。界面框架选择一个大画面与多个小画面的组合，更贴近轮流上台表演的游戏类型。通过舞台场景化布局，模拟线下互动的真实感。
我们真实还原了线下抢答的互动体验，通过倒计时动效、实时分数标签，以及抢答成功反馈，增添游戏的紧张感与刺激感。
在游戏过程中，除了通过视频画面感知好友的情感变化，用户的语音状态也会实时反馈在头像上，响应抢答题目、好友交谈，以及各种表达情绪的声音，借着声音视觉化的效果，搭配视频与人声的重现，交织出多层次的感官体验。
发送邀请是召集好友的重要途径，而作为〝邀请函〞的消息，需要传达明确的信息，让用户一眼就能感知房间内的状态，包括准备开始、游戏中、游戏结束等，避免用户点击加入游戏时，却因游戏已开始或结束而无法加入。为此，我们将邀请消息实况化，持续更新当前状态、参与成员等，让用户能实时感知派对房间的变化。
QQ一起派对初期聚焦于好友一起玩，但仍不免发生创建了房间，当下找不到好友，或因等待过久而退出房间的状况，使得创建房间到实际参与的转化率受到影响。从用户访谈结果来看，用户存在排解寂寞的心理诉求，但对象不一定得是熟人好友，因此渴望找到游戏伙伴、快速开始游戏，成为QQ一起派对扩展至陌生人玩法的契机。
针对找不到好友的问题，我们新增了匹配陌生人的能力，用户可从游戏大厅进行随机匹配，倘若创建房间后找不到好友，也能在房间内匹配玩家，降低游戏参与门槛。
此外，进一步优化房间内的界面布局，将游戏卡片缩小平铺排列，让用户一眼就能看到多款游戏，提升对游戏数量的感知与转化率。在游戏类型上，新增了猜歌与知识问答两款游戏，并提升现有题库质量，避免游戏趣味性不足，影响用户留存率。
为了增强游戏氛围，我们通过情感化设计带领用户进入情景中，让用户更好地理解每个玩法，并从游戏玩法与情感诉求提炼出场景元素，以此搭建游戏世界观，并将故事情节加以推演，增强趣味性与独特性，还能进一步提升记忆度。
光效有利于吸引和聚焦视线，并以不同的表现形式来影响情绪。我们从光的色彩、动效、光感和造型等层面，创造出五种增强感官体验的光效设计，将其应用在游戏大厅入口，借由不同的光效类型与动画形态，强化用户的世界观感知。
带有情感的故事会在记忆中发酵，引领用户进入场景。我们将游戏入口的功能属性，转化为富有故事性的场景设计，当用户被故事所吸引，多感官区域被激活，将会激发用户情绪，有利于记忆与理解游戏入口，对游戏产生共情，进而超出产品的功能价值，与用户建立情感链接。
例如匹配陌生人入口，使用QQ的IP形象驾驶UFO，准备召集用户前往神秘的太空之旅，意味着通过陌生人匹配，你将摆脱寂寞，以光速般的速度找到游戏伙伴、快速开始游戏。通过故事剧情激发情感共鸣，并适当结合IP渗透品牌价值，吸引用户参与游戏。
破格设计能够加强张力、突出游戏主题，我们运用破格效果的3D图标造型，彰显游戏的独特调性，树立鲜明的品牌印象。
组件化除了提高设计效率，还能从整体一致性考量差异化。我们将游戏卡片、题库卡片、提示卡片和入口卡片等功能界面，构建一套组件系统，让框架布局贯通全流程，打造体验一致的可玩性，利于后续的扩充与延展。
根据游戏可玩性研究，提供挑战与磨练技巧的机会，对持续参与游戏的动机有正面影响。有鉴于此，除了提供随机匹配、召集同好共乐，我们还设计了极限生存战玩法，希望借着1v1淘汰赛制增添乐趣与挑战性，激发用户持续参与的动力，特别是年轻人酷爱这种竞技感，击败的对手越多，获得的奖励就越高，有利于勾起用户的胜负欲。
为了营造同场竞技的临场感，我们利用匹配动效强化氛围。随着已加入玩家的数字不断增加，底部会实时展示用户头像，具象化呈现玩家数量，烘托热闹气氛，消除等待时的焦虑感，让用户处于蓄势待发的状态，而红蓝对战布局则进一步强化PK宣战的氛围。过程中若有玩家遭到淘汰，用户也能通过底部头像感知剩馀玩家数量，以此增强游戏临场感与成就感。
每轮击败对手时，答题区域将变为全屏的庆祝画面，搭配撒花特效、头像聚光灯，营造欢愉的胜利氛围。而在游戏结果页，我们同样利用色彩和动效的差异对比，塑造胜败双方的情绪氛围，以此增强荣誉感与仪式感。在生存战登顶挑战成功的用户，将会站上颁奖台授予最高荣誉，在舞台聚光灯的照耀下，迎接光荣胜利。排行榜有助于强化击败众多好手的感知，激发胜利者的分享欲。
QQ一起派对推出后深受用户喜爱、获得广泛好评，调研结果显示，用户整体评价相当高，也乐于将QQ一起派对推荐给好友。
综而观之，音视频除了广泛应用在通讯场景，正逐渐赋能更多创新场景，而娱乐场景更成为兵家必争之地。QQ一起派对开启了新的娱乐形态，充分发挥音视频声影重现的独特优势，消弭了空间距离，尝试解决社交游戏产品缺少真实情境的问题，让游戏过程更具临场感，就像面对面进行游戏一般。未来将从玩法丰富性、游戏挑战性、题库可玩性三方面持续优化，打造更好玩的音视频体验。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：腾讯ISUX团队 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
距离业界首次提出“全链路设计师”这个概念已经过去了几年，从称谓的变化我们就可以感受到设计师这一角色职责的变化。在近几年的产品设计工作中，我们和上下游之间的协作越来越紧密，介入阶段越来越往前，新的趋势对设计师也提出了更高的要求，包括更深入的产品思考，对用户的时时洞察，高效的沟通合作，以及细致的质量把控等等。那么如何成为一个全能型的互联网设计师呢？本文以日常工作流程为路径，为大家整理了一波实用小技巧和小工具。希望能够帮助大家在保持设计的专业度的同时，在工作的方方面面都能够得心应手。
有效的设计积累让我们事半功倍。养成随手记录的习惯，逐渐形成自己的素材库，不仅能够让我们在需要的时候能够快速检索灵感，偶尔回顾也总能有新的感受。
字体识别神器：WhatFont
当你想知道一个设计精美的网站设计使用了什么字体时，可以安装一款叫做 WhatFont 的浏览器插件，开启时鼠标 hover 到文字上即可快速识别出字体、字号、字重、行高和颜色。对于不习惯使用控制台的朋友来说非常简单实用。
插件最新的版本停留在 2017 年，不过在大部分网页上都是可以正常使用的。同类产品还有 Fonts Ninja 等，除了识别字体还可以收藏和管理字体，可根据你的需要进行选择。
用户体验设计档案: UXArchive
该网站收集了来自世界一流的科技公司的产品用户体验流程。例如，你正在设计“忘记密码”体验，需要参考时通常都是打开不同的 App 一个一个体验和截图。而通过这个网站，你可以根据场景快速浏览其他公司的示例，对比不同的解决方案。
地址：https://uxarchive.com/
素材管理: Eagle
Eagle 应该是很多设计师耳熟能详的素材管理产品了，它支持图片和视频等基础格式，有丰富的标签系统和智能分类功能。此外还支持可视的字体管理，也能够预览 PSD 格式（常用的图形和文稿格式基本都支持），可用于放一些 mockup 素材。自动解析图片色板，从而允许按颜色搜索也是相当实用。
地址：https://cn.eagle.cool/
灵感速记: Flomo
Flomo 是一款非常轻量的笔记工具，用类似发微博的方式快速记录一些知识片段。相比 Eagle 用于“剪藏”已有的内容，Flomo 更注重主动创造和记录。产品的功能目前非常简单，但背后的「卡片笔记法」理念很有意思，提倡先快速积累卡片，然后通过标签和关联让结构涌现，积累知识的复利。感兴趣的朋友可以了解他们对于“知识管理”的思考。
地址：https://help.flomoapp.com/weekly/orgin
当我们进入到产品设计工作中时，了解用户往往是最重要的前提和基石。大公司的团队往往有专职的用户调研团队来协助产品设计，但对小型一点都团队可能用户调研这个流程是全部归到设计师角色里的。而且即使有专门的用研报告，直接观察用户的行为和描述往往是最直观的，也更容易洞察到问题和机会。这里介绍两种我们常用的低成本的方法。
用户反馈什么: 七麦
如果你的产品是一个成熟的上架了各大应用商店的 App，可以通过一些第三方平台看到各应用商店的评分评论汇总，构成和趋势，也可以将自己的 App 和竞品放到一起对比。例如我日常使用的“七麦”，可以通过微信订阅每日评分变化，也可以导出指定时间段的评论的汇总表格，做更深入的检索和分析。
用户谈论什么: 微博
商店评分和用户反馈通常的内容通常比较有针对性，大部分都是围绕已有的功能。如果想要看到用户在生活中如何使用我们的产品，使用过程中有什么样的情绪和感受，看他们如何理解在用的这个东西，则可以去社交平台上搜索产品的关键词，常常会有些很有趣的发现。据说早期微信的剪刀石头布的想法就来源于一个微博用户的分享。
来到我们最熟悉的设计实操阶段。设计类工具非常多，Sketch 和 Figma 也都有相对丰富的插件市场，这里选择了几个我们日常使用的小工具来进行分享。聪明地使用已有资源，可以帮助我们呈现最好的设计概念。
Mesh Gradient 网格渐变工具
一款 Figma 插件，Illustrator 里强大的 Mesh 功能在 Figma 里也能用了。做好的渐变还可以保存下来多次复用。
Runner Pro
如果你主力使用 Sketch，习惯键盘操作，熟悉各种指令名称，而且有完整的组件库，那么 Runner Pro 将会是一个很好的 Sketch 助手。它的使用方式就像在 Mac 中使用系统聚焦搜索，通过一个搜索框即可快速完成组件插入，指令运行，插件安装，以及快速前往某个画板。
Runner 的组件搜索支持中文，但对于多个关键词的模糊搜索还是对英文支持比较完整。
Blush 插画插件
一个由 Pablo Stanley 设计的免费可商用的手绘风格的插图库。任务造型有数十种选项可供选择，可以自定义角色的头发、裤子、肤色等等，无需打开 Illustrator 即可创建独一无二的插图。适合用来做运营插画，拼用户故事版，PPT配图等。
地址：https://blush.design/zh-CN
另外也有越来越多的设计师开始用 Figma 的原型功能直接做 PPT 了，顺应这个趋势他们还提供同系列的 ppt 模板，一键套娃。
POSE 人体姿势参考
在自己画人物插画的时候，如果对人体动作和比例难以把握，那一定不能错过这个插件—POSE。它是我发现的用于创建解剖学和身体插图的最佳工具。Gal Shir 在 Behance 和 Dribbble 上都有众多的粉丝，这是他在 Snapchat 做插画师时创作的软件。
地址：https://galshir.com/pose/
动画曲线预览
细腻的动画能够让体验更有温度，这个网站提供了五种简单的网页版式和最基础的三组动画曲线，你可以选择最适合你的 demo，体验不同动画曲线在实际页面上的感受。底部还可以调整具体参数来达到想要的效果。
地址：
需求过程中我们需要反复和上下游沟通，在这个阶段里设计稿是解决方案的可视化呈现，是中间产物，首先要满足方便沟通和传递的诉求。方案定稿后，交付的则是产品的设计蓝图，首要确保方案的完整性，要能够拆解和执行。
Design Project Template
这是由 Dropbox 团队整理的设计项目模板，可以从 Figma Community 中复制一份使用。每份设计稿都包含基础的项目信息，责任人，进度等概览信息，尤其对于直接和开发、产品经理共享 Figma 稿件的团队而言很好地保留了相关的上下文信息，提升项目沟通效率。
设计协作工具 XSHOW
XSHOW是一款由 ISUX 研发的高效设计协作平台，通过其官方 Sketch 插件，你可一键将设计稿上传到云端，XSHOW 会保留完整的版本记录和成员操作。上传到云端后分享给开发人员即可在线查看标注，多端预览。除此之外 XSHOW 的团队管理还可以控制权限时效，这一点在敏感项目对外合作的场景下可以说非常实用了。
地址:
https://xshow.tencent.com
还原自检 Window Resizer + Zeplin
Window Resizer 是一款 Chrome 插件，正如其名就是可以把浏览器窗口固定到指定尺寸，可用于检查网页的自适应策略，或截特定尺寸的图。
我们常常配合标注工具 Zeplin 的叠图功能使用。将浏览器设置为和设计稿相同的尺寸，再将半透明设计稿叠上去即可一眼看出网页是否还原到位，还有哪些地方需要调整。一图胜千言，再也不怕开发哥哥说“看不出来”了，显著提升了沟通效率和团队和谐气氛。
使用示例: 上层为设计稿，下层为对应浏览器尺寸的实现效果。
图片压缩工具
如果仍采用非在线的较为传统的交付方式，通常需要导出为图片发给对方。有时输出网页设计或者完整流程交互稿的尺寸较大，可以多做一步压缩工作。一来同步方案的时候合作方更容易打开，另外需要导出多个版本时占用我们自己电脑空间也比较少。
如果图片在 5M 以内或者需要批量处理，可以用 ImageOptim 或者 Tinypng 应用来进行无损压缩，通常可以减少 60-90% 左右。但如果图片尺寸超过 5M ，使用以上两个应用耗时较长而且容易失败，此时可以试试在线压缩网站 https://compresspng.com/，即使是超过 20M 的大图也可以稳定压缩。
Rotato 动态 Mockup
Rotato 提供了很多常见的动态 Mockup 效果，只要将你的设计稿放进去（图片或视频皆可），即可快速实现高端大气的展示效果，支持非常完备的苹果设备以及部分主流安卓设备，效果包括界面的反转，拉近，滚动展示等。
地址：
https://www.rotato.app/mockups
设计上线后效果如何？有效的验证能够帮助我们有目的持续迭代精进。
AB 测试用户样本计算小工具
AB 测试，也称为分桶测试或分批测试。AB测试本质上就是把平台的流量分为为几个不同的组进行实验，然后观察不同组的用户数据指标，例如：点击率、次日留存、人均观看时长等等核心指标，最终选择一个更有效的实验组上线。
在开始设计实验之前，需要明确实验的目标。基于假设方案中的元素个数，AB 测试可以分为单一变量测试和多变量测试。这里以单一变量为例来进行简单的说明，如何进行流量分桶。我们推荐这个免费的小工具，来进行流量分配：https://www.evanmiller.org/ab-testing/sample-size.html，根据实验的预期结果，大盘用户量，来确定实验所需最小流量。
以腾讯文档里面某一个按钮的点击率为例，目前大盘点击率为5%，预期实验能够提升0.5pp。
这个工具还可以进行很多其他维度的流量配置，感兴趣的同学可以进行深入的研究。我们希望大家在设计的同时，能够大胆创新的提出假设，然后进行科学的验证，从而得到一个更有效的设计。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：腾讯ISUX团队 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com