今天来改一个海报分享页的设计，这是最初的设计：
修改后：
我们分成两大块说说本次改稿思路：
1. 海报设计
2. 海报分享页的整体设计
第一部分 海报的设计
现在海报上的内容排版看着挺随便的，没有啥设计感。
海报上要放的内容不多：用户头像、名称、日期、文字、品牌信息（logo）
一开始我也没有太多的修改灵感，但是在看了许多参考图后，发现几个共通点，这几点完全能够运用在类似的设计上，让海报更有设计感。
第一点：数字/日期的特殊处理
特征总结下来就是这三点：
1.对某个数字单独用不同的字体
2.数字用更大的字号
3.与其他文字结合而出的特殊排版
用以上的思路，改一下我们的稿子：
这样是不是好一点？
第二点：海报采用实景的照片，那文字最好用白色
观察类似的参考，几乎99.99%的实景图上的文字都是采用白色。
不排除有的分享卡片用的浅色图、黑色字。
观察得知：
浅图黑色字，重在强调文字内容，对比更强烈,而深图浅色字，文字更融入画面，更温和一些.
这里我们更想采用浅色的文字：不用那么强调文字，重在让画面更和谐。
第二部分 海报分享页面的设计
第一点：遮罩用什么方式？
除了海报本身之外，整个分享页面也是要设计。
大多以背景图叠一层毛玻璃遮罩，看起来更有质感。
这种设计相比于纯黑色透明度的遮罩方式要更有层次感，不至于那么平，也让页面更聚焦在海报本身。
第二点：分享弹窗的几种形式
a. 将分享方式一屏全摆出来
适用于用户可分享的方式 不是那么多的情况，否则会占据画面太多高度。
b. 侧滑
用户可分享的方式很多的话，可以采用侧滑。缺点是需要用户滑动才能看到后面的功能。
在这里我们只有五个分享平台，用不着再侧滑，直接都摆出来就行。
第三点：取消按钮的形式
a. 底部按钮：更容易操作关闭
b. 海报上部的“阴暗角落”：更不容易点击，相较也不那么容易被发现。
究其原因可能是，产品想让用户去分享，不想让用户很快就离开这个页面。
取消按钮也用不着那么强调，修改后：
c. 分享弹窗的右上角：不如a更易点击，但比b好点
最后一点：除非是分享长图，否则海报最好一屏就展示完。
这也是我之前忽略了的一点，导致做出来的海报展示不全。
总结
很多的 APP 都有海报分享功能，这次看了许许多多的类似设计，并且把通用的点，总结分享给大家，我总结的这些，希望能对你有帮助！～
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：花菜 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
今天来分享几个设计案例，主要聊聊以下四个话题：
· 信息处理
· 装饰元素的摆放
· 长页面设计 模块间要有差异
· 空间利用率
首先看这个弹窗需求，产品经理给我们提供的原型图是这样的：
先不要急着开始画，理解需求是最重要的一步。
这个弹窗最想要传达给用户什么信息？
「小窝准备完成，宠物到家了」显然是最重要的信息。排的时候就要使劲凸显。
在经过一些尝试后，我们挑选出了以下两版：
对于这个弹窗，版本 2 的层级会更舒服。
于是对版本 2 进一步优化。
1. 同样的字号下，英文看着会比中文小。这上面用英文的「TA」不如直接写中文，看着也会更加整齐：
2. 字体也是有性格的，它能够影响页面的风格。所以将字体换成圆体，让页面更活泼可爱。
3. 尽量使上下两段文字长短不一，看着会更有节奏感。
4. 标点符号的细节很重要：有的字体标点符号与文字看着不在一条线上，记得一定要对齐！
5. 标题有点单调，我们再增加设计样式，让页面更精致！
这样就完成了，但是还是差了点什么：
是整个页面太安静了，少了一些热闹庆祝的氛围，那就加一些彩带装饰吧。
在添加时，需注意大小对比、前后层次、造型差异化，才能加的自然好看。
1. 大小对比，有的彩带大些长些，有些则小点短点。
2. 前后层次，有的在卡片前面，有的在卡片后方。
3. 造型差异化，除了彩带再来点其他元素。
在一个长长长页面里，相同的排版会没有新鲜感，容易产生视觉疲劳。
我们可以通过两种方式，让设计模块有差异。
1.排版不一
2.视觉不一
比如这个例子，同样都是听音乐，但是会用不同的排版穿插展示。
就算是同样的排版，我们也可以在其中用不同的视觉。
比如以下这个案例：一开始它从头到尾都是运用的一种视觉，排版也十分相似，页面整体结构也没有主次。
在我们对不同模块的卡片处理后，就好很多。
页面的空间可以站在三维的角度去看，分为 x 轴、y轴、z 轴。
页面的空间是十分宝贵的，当页面承载的内容越来越多，我们不能只在 y 轴（高度）上一直增加页面的高度。学会利用 x 轴（宽度）和 z 轴（深度）的空间能有效减短 y 轴（高度）。
4.1 利用 x 轴的空间
我们来看下面这个例子，他一开始采用的竖排方式：
如果我们将它改成横排、滑动查看后，页面就能够展示更多的内容，就越可能捕捉到用户想看的信息。
这就是减少了 y 轴的空间，利用了 x 轴的空间。
4.2 利用 z 轴空间
z 轴空间就是利用深度、前后的空间，就像我们经常看到的「页面二楼」，下拉页面后，在页面的后面出现一些内容：
这个 banner 的滑动也是利用了 z 轴空间：
以上就是我在空间利用率上面的收获，大家心里留个印象，说不定之后就能解决一些相关的问题～
不知道今天分享的大家get到了吗？总结一下～
1.信息处理：明确信息的层级关系，有助于信息处理。
2.装饰元素：有大有小、有前有后、造型不同，会让装饰元素更自然
3.长页面设计：模块与模块间要排版或视觉不一
4.空间利用率：把页面当成三维空间，除了 y 轴，也要考虑到 x 轴和 z 轴的空间利用。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：花菜 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
这些天遇到了些问题，在进行视觉设计的时候，老是觉得自己设计上差点意思，总觉的哪里不太满意。
也不是不好看，就是觉得还能够设计得更加深入些，不管是从板式、字体、图形、颜色等方面。
为了找到解决的办法，我不断的去欣赏别人的作品，从站酷到behance，从behance到各类获奖作品。
嗯...为什么别人能够有这么新颖的设计想法？我总结来几点大家。
这是世界三大平面设计之一冈特·兰堡的作品。
这是不是会给你一些灵感？我第一眼感觉这有点熟悉，似乎在别人的作品中运用过这种版式、元素。
在这版设计中，与冈特·兰堡的作品相似之处就有：黄底黑字的横条和蓝色调的背景，再结合一些设计图形，就能产生出一种新颖的设计风格。
就是在大师的视觉中提取元素灵感进行转化，运用在我们的设计中会有不一样的视觉体验。
我们接着看他的其他作品。
这张作品就能给我很不错的灵感，把想要突出的地方用强烈的对比手法进行设计。或者将想要突出的元素进行特殊化处理。
类似于这样的作品。
当灵感有限的时候，我们就可以静下心来分析一下其他大师的作品，认真观察大师的作品，有哪些地方是可以提取灵感出来。
再结合自己的设计让其提高升华，让自己的作品耳目一新，使作品获得新生。
保持这种发掘思维去分析作品，久而久之你就会有源源不断的灵感浮现脑海里。
你走你的阳关道，我过我的独木桥，反其道而行，虽然在国内市场不太友好，但是尝试一下走独木桥的感觉，是否会带给你不一样的反馈。
特立独行的视觉，做出差异化会给人们一种新颖的视觉观感，就会吸引用户，就比如乔布斯手下的苹果产品，打破了当时对电子产品的认知，且对细节的把控极致到位。
人们其实都有视觉疲劳，长时间的保持这种风格，难免会让人觉得平庸，突然出现的新颖视觉或想法，就能够打破这种局面。
好比这个官网，首页第一屏在我们印象中就是一个banner，在我们做网站的时候就认为第一屏就是应该放个banner在那里！
我们就好像思维固化了，第一屏就非得是个banner吗？我们可以根据企业的属性进行判断，我们是否还有更优的方案，尽可能的赋予设计灵魂。
类似于这样的首页是否就是反其道而行呢？与同行就拉开差别了呢？自己品牌更加深入人心呢？
比如一个正常的首页，在开始设计时，最顶部的是导航栏，导航栏中最左边是一个logo，其次在右边是产品介绍等等...
我们有没有想过为什么会这么布局？我们可以反问自己：这种布局是最合适的吗？最好看的吗？还有没有更加合适的方式？
这种方式把logo放中间突出品牌就挺不错的。还有一些把导航栏折叠起来的。
刚开始我们是这样布局的，这就很普通没有做出差异化。
我们是不是可以把文案进行精细处理，提取重要的词句，把他们放大，要有视觉冲击力，重要的元素再次放大！
这样布局方式就新颖很多，突出了主要文案，加强了视觉冲击，又加深了品牌印象。
没有新颖的想法往往是自己的思路、思维还没有打开，开始进行视觉设计的时候：选择这类行业自己认为还不错的视觉方向，开始进行视觉输出。
那就错了，假如开始设计APP，只找一些APP的视觉稿那肯定是不够的，风格就比较单一，你的视觉参考都不够丰富，怎么能够做出让人眼前一亮的风格！
我们不妨跳出圈子出来观察！
可以去看别人品牌设计的、数字艺术设计的、图形设计的、包装设计的、服装设计的甚至产品设计的都可以。有可能是某一个小地方让你有所启发。
大量的看，觉得很好的视觉就思考：我们的视觉是这样的会不会更好！
就比如这张视觉稿，色彩很艳丽，颜色跨度很大，有黑色的粗线，如果把这风格运用在APP视觉上会是怎样的效果？
看到一张足够吸引你的视觉稿，就想想如何转化到工作中去，那可能就会有不一样的视觉风格。
所以在设定风格时，
不局限于同行。
不局限于风格。
打开搜索范围，让头脑风暴更猛一些。
做设计不是完成任务，所思考的是多方面的，好的设计是得花很多心思的；得保持冷静，让自己放松，着急或者有压力的心境下你的思绪是乱的，根本就做不了设计。
所以有时候做设计得脸皮厚一些。
再者平时的审美积累是非常重要的，这个就相当于你的底子，有底子往上爬的速度也会快一些。
做到这些你就离大师不远了！
最后，设计是永无止境的探索！加油共勉。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：橙汁 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
我们在设定界面风格的时候，少不了颜色的配比，但颜色一定是讲究平衡的，其中一个最重要的平衡就是明暗的平衡，如果你的界面全屏都是很亮的颜色，那就会导致非常的刺眼，比如像瑞文同学的这个颜色设定：
就是过于明亮了，其实当我们的颜色过于明亮时，最常用的一种方式就是，直接用黑色去压住亮色，像下面这组图标的做法一样，减少亮部颜色，直接增加黑色：
这样就不会那么刺眼了，当我们明白了底层原理之后，再去优化配色，我们看前后的变化：
这样就会比之前舒服很多，当然，也可以试试头图变成黑色，按钮变成绿色，把重色面积继续加大，但不管哪一种，都会比之前全是亮色要好很多！
小A同学是一个非常有潜力的同学，但是最开始交上来的吉祥物作业，也不是很理想，效果如下：
话不多说，我们就改动一个点，五官紧凑，看看前后效果对比：
可爱的程度完全不在一个档次，我们再看看小A同学后面的延展效果：
比之前强了很多很多倍，就是因为一个五官紧凑。
我们在做练习的时候，很重要的一个锻炼点就是视觉敏锐度，能够敏锐的发现哪里不舒服，这个真的很重要。
而视觉敏锐度里面就有一个维度是颜色，比如我们在看下面一兜糖同学做的质感图标作业：
我们应该快速的看出，第一个图标颜色不是很和谐，没有后面两个那么舒服，主要是那个蓝色有点脏，我们看优化后的三个图标：
就比之前要统一舒服很多。
当我们的练习达到一定量时，敏锐度自然就会提高很多，所以一定要多去练习，把敏锐度这一块提高上来。
这是潘子同学的疑惑点：
他感觉绿色好难啊，第一次交上来的作业如下：
先不说造型问题，就光说颜色，就有点单薄，也有点太亮了，还有就是颜色比较正。
其实我们在配绿色的时候，只要把绿色加一点蓝色，或者加一点黄色就会让颜色好看很多。
后来潘子同学把颜色进行了优化：
这样就比之前还要多了。
还有包括柠檬同学用的绿色:
也是比较好看的。
这回再用绿色的时候，大家清楚怎么好看了吧！
大家平时多的界面应该都是常规类型的居多，应该很少会接触到游戏类型的界面设计吧？哈哈。今天就给大家分享一个游戏类型的排行榜界面，看看是怎么做。和咱平时的又有什么不同呢？
先来看看效果：
确实和普通页面还是有很大差异的哈，可以发现所有的模块更风格化，也蕴含了光影细节在里面。
这样一张界面细节很多，我们今天主要讲讲1、2、3名的头像框怎么做出等级差异。
首先我们就要先明确游戏风格的界面和普通界面有什么不同，特点有哪些，造型、光影、质感等等。
明确了才能动手去执行。
大家平时应该也会遇到很多排行类的需求，需要做出等级感。那是如果如何表现等级差异的呢？我主要是从以下三个点去推进，分享给大家：
2.1颜色
·主色：
首先就是三个等级的颜色差异
比如第一名最尊贵，我们就可以选用和背景色对比最强烈的金色去表现。
金色本身也带有尊贵感。
第二名和第三名的颜色就可以选用背景的类似色或者同类色比如紫色和蓝色，让它们在视觉上天然的弱化下去一个等级。
·微渐变：
采用微渐变的形式，让颜色更丰富，不会显得很平，同时靠颜色的变化也能表现出轻微的质感。
2.2复杂度
第二点就是复杂度了。
这个很好理解，就是越重要的，在造型上就会有越多的细节和层次。第一名层次细节非常丰富，第三名就简简单单的，从造型上表现出等级差异感。
2.3大小
比较常规的一个方法就是大小差异了，第一名最大，二三名一样大就可以了。
明白了原理，怎么把细节做到位也是很重要的，我们拿第一名框的造型举例，说说是怎么做出复杂度这么高的造型的。
3.1 重复
先有一个基础圆，然后我们重复几个。这一步很简单，很多同学都会做。但也有很多同学到这就做不下去了。重点要学会后面怎么做。
3.2 圆的对比
全是相同的圆就会显得很重复，没有细节。我们可以调整圆线段的不同粗细、形式去增加细节。
把他们组合到一起看看。
有点那味了，有些同学做到这一步就不知道该怎么继续了，可能会继续加圆，这肯定是不行的。
3.3 丰富基础形
如果我们继续加圆圈可能又会变得重复了，这是因为我们的基础形单一，所以我们要加入别的基础性在画面里去。
为了方便理解，我们加入一个比较直观的形状正方形看看：
正方形组合又组成很多三角形，造型一下就丰富了很多！所以基础形状的多样性是我们丰富造型很重要的一个点哦。
本案例就加入了其它相对更复杂一些的基础形，效果会更细腻一些，但道理是相同的。
4. 加入点缀和光影
因为是游戏风格的，加上一点外发光更有感觉，再加上一些星星点缀，可以进一步提升丰富度。
看下页面效果：
等级差异明显，造型精致，整体还是比较满意的。
很多时候，我们会发现，我们加的质感有点平，比如像下面这种：
很明显，这种地方就有点平：
原因就是因为“颜色掉层次了”，我们只需要在他的中间再加一层颜色，就可以让它的质感饱满起来。
具体步骤就是，我们可以先给它加一些“形状”然后进行羽化:
我们可以看下前后对比，这样就不会那么平了：
一旦发现质感有点平，就可以用这种“颜色掉层次”的思维去尝试优化！
这是一位同学做的质感临摹练习：
颜色有点太闷了，不够透彻，我们先来把颜色弄的透一点，我用圆形来表示，首先我们的颜色不能太重，弄个小渐变：
这是我们的一个基础，如果感觉明暗对比不够，可以再适当加强对比：
然后加一点反光，这是非常灵魂的一个步骤：
然后再加一点左上角的高光：
这时候我们再来加中间的暗部形状，我们看原版的有一个很大的问题，就是中间的暗部爱心和背景有点糊在一起了：
就是因为两层都是暗色，所以没有区分开，所以这也是为什么我们把背景色调亮的一个原因，我们把中间的形状加上去：
然后再来个内阴影和边缘光：
大功告成，我们再来对比下前后的质感：
是不是好了很多。
有时候我们会觉得自己的设计有点主次不分，这种感觉往往和颜色有关。
下面两个圆形，你会觉得那个更吸引你的眼球：
对，没错，肯定是第一个，因为第一个颜色的饱和度比较高，颜色比较纯，所以更加吸引眼球。
那我们看下面跟米同学的启动图标作业：
感觉所有颜色有点糊在一起，甚至感觉背景比形象还要吸引眼球，就是因为背景的颜色饱和度太高了！
当跟米把背景的颜色饱和度降低时，我们再看下效果：
我们可以很清晰的把视线聚焦在吉祥物的身上。
所以我们在做视觉的时候，一定要注意，你的重点是什么，注意饱和度对比、明暗对比，千万不要本末倒置！
蓝蓝设计建立了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，报下信息，蓝小助会请您入群。欢迎您加入噢~~要突破用户增长停滞的困境，需从全局角度思考，对问题所处的系统进行分析与洞察，找出拓展应用场景的机会点，提供技术或价值创新的功能与服务。
首先，针对QQ音视频所处行业的竞争态势进行全面、系统的分析，包括内部优劣势，以及外部机会和威胁，以此制定相应的策略与计划。
关注竞争对手，更要研究用户，通过用户调研洞察用户需求，找出QQ音视频应持续巩固优化，以及需考虑突破的使用场景。
综观音视频的行业发展与科技趋势，有三个主要的发展方向：
1. 超高清视频
5G高带宽、低时延将开拓更多玩法和业务场景，超高清视频通话将带来更豐富的感官體驗，犹如面对面沟通。
2. 应用场景多元化
从使用场景来看，音视频已走出会议室，从单纯的沟通交流，扩展至丰富的应用场景，广泛服务于人们的日常生活。
3. 智能终端+音视频云服务
未来智能终端将具备联网连接的能力，搭配音视频服务提供商的云服务，使得通话无所不在，可随时通过智能终端进行音视频通话。
综合前述分析，提出QQ音视频的用户体验愿景（UX Vision）和价值主张（Value Proposition）。
QQ音视频的本质在于沟通，其声影重现的独特优势，消弭了空间距离。未来随着通信技术的演进，高画质、低时延、实时互动的感官体验，将实现远距临场（Telepresence）的终极目标，使用户感受到近乎面对面交流的体验，就像在眼前〝一起做〞某些事。
综上所述，提出QQ音视频为用户传递的价值——社交临场感（Social Presence）。
临场感相关理论与研究，源自Short、Williams和Christie等三位学者于1976年所提出的社会临场感理论（Social Presence Theory），指的是双方通过传播媒介进行沟通的过程中，所能感受到对方真实存在的程度。QQ音视频凭借高度的媒介丰富性，提供实时响应、语言/非语言线索交互，使用户能轻易地在社交互动中感知对方真实存在，进而在心理上获得归属感与认同感。
根据过往文献与媒介特性，将QQ音视频的社交临场感分为四个层次：
1. 界面质量（Interface Quality）
界面可用性与视觉设计不会干扰操作，能让用户专注于音视频沟通。
2. 真实感（Realness）
音视频的声画体验及与人交流的方式，能贴近于真实世界。
3. 互动性（Interactivity）
用户之间的互动交流越强，越能感受到对方的存在。
4. 情感传达（Affective Expression）
通过情绪表达、环境氛围的营造与对方建立连接，在心理上感到彼此的存在。
围绕社交临场感的价值主张，制定突破当前困境的目标与设计策略。音视频产品除了广泛应用在通讯场景，正逐渐赋能更多创新场景。基于Q群生态和调研结果，聚焦于生活、办公、娱乐等场景进行探索。
两个主要的设计目标：
1. 重塑体验
回归通讯本质、夯实基础体验，对通话界面进行改版设计，让用户专注于音视频沟通。
2. 场景探索
开拓应用场景，通过社交临场感赋能生活、办公、娱乐等场景需求，为用户创造价值。
针对QQ音视频的应用场景，制定相应的设计策略。
界面质量是影响社交临场感的关键要素，然而调研结果显示，QQ音视频的通话质量和体验落后竞品，包括主界面功能复杂、通话流程痛点多、核心能力落后竞品等体验问题。
针对上述问题，提出QQ音视频改版的设计思路：
1. 化繁为简，回归本质
2. 链路排查，解决痛点
3. 补齐短板，超越竞品
分析不同通话类型的用户习惯，以及各个功能的使用数据，区分功能优先级，分为核心功能、辅助功能、高级功能等三个层次，重新定义功能架构与布局。
主界面：少就是多，收折非常用功能，确保核心通话体验。
更多面板：主界面功能越少，更多功能入口越能起到引导作用，从右上角找到进阶功能。
快捷手势：通过新手引导、红点引导、快捷手势，满足高级用户的需求。
运用认知走查（Cognitive Walkthrough）快速排查通话过程存在的用户痛点，并将缺失的功能与信息补齐，最终解决超过16个以上的可用性问题。
QQ采用1大N小的画中画模式，适合1人主讲、他人观看的场景，主客位明显，缺少一种与他人共在的感觉；反观微信是9路宫格画面，视频画面仅聚集在上半部，有利于节省流量，但同时也限制了屏幕利用率。
兼合上述两者的优点，设计了16人视频通话的功能：
1. 100%屏幕利用率，让内容展示更完整。
2. 力求面画均等分割，最多支持16路视频。
3. 手势快速切换宫格与画中画
16人视频通话也延伸了不同的创意玩法，例如祝朋友生日快乐、拼字表白或求婚。
QQ视频通话重度用户的通话对象，主要来自恋人伴侣，这类用户最希望获得〝在一起〞的陪伴感，而社交临场感的〝真实感〞是营造音视频陪伴感的关键因素——彷佛对方就在眼前，两个人一起聊天、一起做某些事。
声影的真实感，是让对方感受到你就在眼前的必要条件。真实感包括流畅度与清晰度，通过用户行为分析，发现在不同场景下，用户对视频清晰度与流畅度有不同偏好 。
为此，QQ音视频开创了的高清 / 流畅模式，用户能根据自身需求做选择，切换自动、流畅480P、高清720P三种模式，针对不同模式定制码表，匹配不同的帧率和码率。除此之外，QQ音视频也与手机厂商合作，开发QQ 5G 1080P超高清视频通话，提前布局5G应用。
创造情感连接，有助于拉近彼此距离，营造陪伴感。有什么是情侣、闺蜜平时会做的事，因为分隔两地不能一起做了？
循着这个思路，设计了全新的双人合拍模式。距离遥远的两人，通过QQ音视频实现留影合拍，让彼此的情感得以沈淀。另外，为了增添合拍时的乐趣，该模式结合了P图资源与人脸识别的能力，让用户可选用场景模版与挂件，创造属于两人的高光时刻。
情绪之间的感染，更能强化陪伴感与互动感，据此设计了第一款支持视频聊天的一起看应用 ——视频包厢。有别于Q群一起看的广播形式，视频包厢诉求更亲密、1v1的陪伴感，彷佛对方坐在身边，一边看剧、一边聊天。视频包厢的价值，除了提升QQ音视频的互动性，也为关系链活跃拓展应用场景。
线上会议是办公用户主要的使用场景，一方面将聚焦用户核心需求，思考办公场景的功能设计，另一方面增强用户之间的互动性，让会议更具社交临场感，就像面对面沟通一样高效。
为什么需要文字聊天？当主持人开启全员静音，此时无法回应讲者；多人通话时，最多同时听到6个人的声音；不方便开麦或摄像头，又想参与互动。
为了解决痛点、完善沟通形式，QQ音视频新增了文字聊天的功能，可通过手势快速展开 / 收起聊天界面，并支持发送表情和文字消息；这些消息只会在通话界面沈淀，不影响未参与会议的群成员，避免不必要的打扰。
对办公用户而言，线上会议需要完善的管理机制。QQ音视频尝试结合Q群管家机器人，小成本实现通话预定。用户能设置通话主题、开始时间、会议提醒，并支持分享会议链接到微信、QQ空间等其他渠道；获取链接的用户，能快速拉起QQ加入会议。
面对面分享是信息共享最有效率的方式，分享者能够当面指出要点，有效地表达与沟通。QQ音视频借助系统镜像投屏，实现边通话、边共享的能力。在商务会议中，将手机中的信息与操作，实时同步给其他参会成员，例如文件、照片、邮件内容等，并支持同步画面、设备声音。另外，诸如游戏分享、作业辅导、操作协助等场景，都能通过屏幕共享满足需求，为用户带来实质性的效益。手机端最后一块拼图完成后，QQ多端皆可实现屏幕共享，现已成为QQ音视频的口碑能力。
疫情期间，线下聚会被迫停止，线上娱乐应运而生。在此契机之下，借助音视频实时互动、声影重现的特性，开启了新的娱乐形态——QQ一起派对。
QQ一起派对是基于音视频展开的实时社交游戏，旨在打造真实聚会游戏体验，让游戏过程更贴近线下真实场景，就像面对面一起玩聚会游戏，能与好友边玩游戏、边聊天。通过环境氛围的营造，包括场景具象化、增强代入感等方法，实时感知好友的情感变化，从而获得社交临场感，在心理上感到彼此的存在。
此外，有别于竞品需通过点击按钮作答，QQ一起派对利用实时语音识别，让用户通过更自然的人机交互方式，在游戏过程中进行语音抢答，彷佛置身于真实世界中与好友互动。
QQ音视频经过一系列的体验重塑，获得不错的成果。基于生活、办公、娱乐等场景深挖需求，新增许多实用功能和创新玩法，为用户体验和价值创新奠定良好的基础，且归功于这些积累，以致于在疫情期间，QQ音视频能不畏竞品的挑战。除此之外，多项新增能力，例如屏幕共享、视频包厢、QQ一起派对，获得用户广泛好评；调研显示，用户乐于将QQ一起派对推荐给其他人，足见该功能获得不错的用户口碑。
对于音视频行业来说，疫情迎来的爆发式增长，无法保持高速成长态势，会有一定程度的回落，但能提高大众接受度和习惯养成，体认到音视频能在一定程度上替代线下沟通，不仅限于通讯功能，音视频应用拥有更多的可能性，正逐渐赋能更多创新场景。为此，QQ音视频基于社交临场感，探索并赋能生活、办公、娱乐等应用场景，提供技术或价值创新的功能与服务，为用户创造独特的价值。
面对市场上同类竞品的崛起，作为一个UX设计师，除了因应产品思维设定目标，亦应思考如何以价值驱动解决问题：对于如何解决问题、迈向未来愿景，提出最适切、有效的方法。换言之，要关注的不只是当前面临的问题，更重要的是擘画用户体验愿景，提出该产品的价值主张，并制定相应的设计策略。
以QQ音视频来说，项目初期设计师便与产品经理共同讨论产品方向、策略和功能规划，并根据调研报告，找出拓展应用场景的机会点，借此描绘出QQ音视频的未来愿景、给用户带来的价值。尔后根据里程碑计划（Milestone Plan），从通讯本质、场景探索到新终端应用，逐步朝着远距临场的终极目标前进，此举不仅有助于产品功能先行布局，也能确保功能设计围绕用户价值。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：腾讯ISUX团队 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
——————————
工欲善其事，必先利其器。好的工具可以有效的激发设计师的灵感、提升设计师的效率。我们准备做一个设计效率工具系列，整个系列将好的设计工具贯穿到完整的设计流程中，并结合日常我们使用的情况向大家做推荐。通常的设计流程分为日常的积累、研究分析、设计创作、测试评估、对外宣传这几个环节。此篇为综述篇，之后的篇章会针对不同环节进行深入的陈述。
设计师日常除了应对当下的需求，每天可以拿出一定时间保持学习的习惯。不仅可以让我们紧跟最近的设计趋势、设计潮流、设计方法，也可以让我们潜移默化中得到提升。
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咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com