作为UI设计师，虽然现在做了很多项目，但是实际上每一次想要做好，过程都还是很痛苦的。尤其是前段时间，身心俱疲，时间、心情、精力都不在线。但恰恰接到的又是一个重头的急活，产品方也不清楚自己想要什么效果，所以一开始改版的心路很渺茫。
不过也由于这次的经历也让我更加明白设计方法的重要性，越是短时间内，越需要理性分析。在实际工作中，产品有时候因为项目急需上线，给我们的时间会非常有限，根本没有太多的时间去给你思考，就比如我这次，只有半天时间去思考设计。那么如此短的时间，如何提出有效的设计方案呢？
以这次为例，学习圈页面刚上线不久，当时也是设计了许多方案，都被pass了，如下：
产品方提出页面上方的发布按钮需要重新设计，那我就要搞清楚具体是谁提出的意见，为什么要重新设计，这样才不会让自己处于完全被动状态。
由于项目刚上线，数据库也因为某些原因还不能检测点击和转化量，无法得知哪种按钮点击量高。产品方也不清楚想要什么效果，需求方向不明确就着急去动手设计，那对于设计师来说无疑是效的，问明白需求后再通过竞品分析、产品体验、用户喜好等方式去突破。
所以接下来需要我们主动出击引导产品方，得出一些需求具体的方向。那怎么去引导？反向思维法，既然需要改动的是不确定的，那么我们可以确定那些不需要改动的地方——通过排除不需要改动的，来确定需要改动。
需要排除的是：整体页面排版布局、按钮设计方向（扁平、立体、简洁、卡通等方向）、动效方向、背景（颜色元素）。
通过沟通后明确的是：
在第一版时已经对相关竞品做了分析，基本是一个纯色背景上加一个具象化大按钮，发布功能使用加号、笔、照相机等元素来制作按钮，原则：按钮凸显，背景元素比较少。其实按钮如果用照相机这种结构复杂点的元素去设计会更有方向，但是我们左上角会有拍米币的功能，用相机会更直接一些，而加号笔画过于简单，可延展性不强，所以改版的话最终决定还是使用铅笔作为图标设计元素。
关于整体颜色方向，上一版颜色设计原理是背景用产品主色（蓝色）+白色按钮，不过产品方提出太过冷静，一开始我想用色肯定要跟整个app的主色相关呀，就跳不出蓝色背景的思维，后来决定先跳出来，配色思维反过来，背景不局限在主色，按钮及周边装饰元素可使用产品的主色。
时间紧急，当时想到的是常用的太空元素（有空间感、好延展、符合用户喜好），于是背景就选了蓝紫色（据研究，紫色也是小学生最喜欢的颜色，性别倾向相对偏弱，在色环上是蓝色的邻近色，协调又会有对比。）
在设计前，我先在心里大致分了两个设计方向：
以下便是常规大按钮设计稿：
非常规按钮设计稿
在尝试的这期间，对于有疑问的地方一定要跟需求方及时沟通，及时反馈，确保自己的设计在功能上没有遗漏。比如我这次，是通过询问一个产品经理，才得知，按钮上需要加文字，才在后面加上了。
大体方案出来后，通过优缺点分析对比，同产品方选出最适合的方案。
1. 常规按钮设计稿
优点：容易被用户所熟知，用户的学习成本低，更容易点击
缺点：对于小学生来说吸引力不够，形状上偏规矩，不够活泼，另外上方第一个元素稍微有一点抢主角的光环
2. 非常规按钮设计稿
优点：配合动效会更有吸引力一些
缺点：用户的学习成本比较高
通过对比，大家一致倾向非常规按钮，那就在气泡与星球这两者中选出最终方案。在APP的任务页面也有星球的按钮，用户已经对星球有了一定的点击感知，减少了学习成本，最终选择了星球。
优化方向：
1. 颜色调整
现在看着球跟背景区分不是很明显，整体偏灰，需要加强对比，球的颜色需要调亮调纯。我们看下色环：
90度以内的邻近色，搭配在一起和谐又不失活泼。所以可以尝试将球的颜色改为背景蓝紫色的邻近色：红色或者天蓝色，如图：
红色的球虽然跟背景拉开了对比，但是过于鲜艳，大家反应有点类似于心脏。
所以相对来说蓝色的球比较适合，也跟APP的主色相呼应。
2. 细节元素调整
球的环境色过于明显，需弱化一些；周边增加几个小球，四周边缘的球太抢，也需要弱化 ；文字“写一写”由常规字体改为大一点的手写字体：
3. 添加动效
鉴于上线版本的动效反馈说不明显，按钮点击感偏弱，所以这次动效优化点需要凸显星球本身。第一想到的就是呼吸效果，但是只有一个呼吸有点单一，周边可以添加一些社交鼓励的元素，如鲜花、笑脸、太阳，动效一开始想着是从球两边飞出来，但是经过对比就参考了直播送奖励的形式，相对来说辅助性稍微好一些，视觉上不会过于太抢主角，如下最终呈现结果：
如果有限时间内想要让需求方得到满意方案，所以以下两点我觉得是挺重要的：
好啦，文章写到这里，如果大家有更好地意见也欢迎留言
文章来源：优设网 作者：麦芽糖
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
图标在UI设计体系中，是重要......
（此处省略1000字）
直接上图！
上图是我以前绘制的一套图标作品，
感兴趣的话就一起来了解一下我平时是怎么创作一套图标的吧~
1、搜集+临摹+原创
积累素材是设计师必备的“基本功”，同时也是“职业病”。
平时我会有意识的在速写本上绘制一些简易的图标，如果在一些APP中看到比较好的图标，我也会临摹下来。
下面给大家随机展示一些我平时绘制的图标。
除了绘制图标以外，我平时也喜欢绘制一些其他的图案。
2、反复打磨
将绘制好的图标利用电脑矢量化后打印出来，根据打印稿用笔标记出不合理的地方，比如：线条太粗了，重心不稳.......对不合理的地方进行反复修改，再次打印，再修改，循环多次后直到得到自己满意的效果，最后定稿。
下面这幅手绘图就是文章一开始给大家展示的图标成品的手绘最终稿了。
需要强调的是，这一次图标的绘制，有一个特殊的地方，其中一个图标是有实物的。（左：实物图；右：对应图标）
3、图标插件化
最后，将图标上传阿里的iconfont网站，制作成字体图标。
然后将字体图标做成插件（我演示的是ps插件，也可以做成其它xd/sketch/figma插件）
制作过程就是给每个图标赋予关键字，然后利用正则表达式，可以方便的搜索所有图标。
不过这个步骤我就不详细解释了，因为
转自：站酷
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
可以说，每个项目因合作方式，人员习惯，落地形式的不同，所形成的规范是有区别的。所以，设计规范更应该是针对项目来说的，除非是问你Android或iOS这种已经广泛适用的平台级规范。不然是很难有标准答案的，回答更应该是一种思路的描述，比如你会如何定义一套规范、解决了哪些问题以及如何验证这套规范真的助力了产品的体验提升。
Don't make me think。大家都知道，好用得产品都是尽可能的减少用户思考，不断去贴近用户的使用习惯。比如在iOS系统里想返回上一个页面时，你会熟悉的去左上角找返回操作，但如果把返回操作放在右上角就会很不习惯；再比如对国内用户来说，他们习惯正确按钮用绿色，错误按钮用红色，如果你非要反过来制造所谓的差异化，用户就会感到困惑，误操作的概率也可能会大量增加。
其实网上很多设计规范，原理之类的文章，源头都来自于这些大厂规范，想获得一手信息，最好是自己去这些网站多看看。
这也就是我为什么不写具体规范数值的原因，因为网上的资料实在是太多太详细了，写一些重复的知识实在是没多少价值。学知识的路上一定不要什么都等别人喂给自己，需要更多的主动性，这样才能提升自己的学习能力和解决问题的能力。
2）针对自己要做的模块，有针对性的找市面上大厂的应用作为参考，直接截图标注，自己总结规律印象会更加深刻。
我开始做UI的时候就这样学习的，不知道字体该用多大，间距用多大，颜色怎么用，就直接去找相类似的界面截图参考，量它们的尺寸，吸它们的颜色，然后就这样一步步的把规范经验积累起来了。
比如从QQ的动态tab页面中，我们可以借鉴到很多信息，比如列表的高度，列表左侧的图标尺寸和圆角，间隔线高度和配色，右侧的箭头大小和配色，列表文字的字号和配色，用户头像大小和结合的样式，图标与文字的间距等等。这些借鉴并非是抄袭，要你做的跟这个界面一模一样，只是参考这里面的某几个属性然后结合自己的产品综合运用，减少出错。
发现了吗？一个优秀的界面设计，上面的任何信息其实都可以拿来参考，就看你会不会用了。
文章来源：彩云译设计 作者：彩云
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
1. 圆角
不同的圆角，所带来的气质是不同的。圆角很小，视觉印象是硬朗，高冷，具有攻击性的，多用于严肃、高端、冲突感强烈的设计中；而更大的圆角给人的感觉是有亲和力，柔软，安全的，多用于儿童产品、娱乐性强的设计中。
在设计的时候，根据自己的产品属性选择气质相符的圆角设计很有必要。
△ 常见的卡片弧度形式有4类：直接、小圆角、大圆角、特殊圆角
我一般喜欢用4的倍数来设置圆角，比如圆角大小为4px、8px、12px之类的。要注意的是，圆角越大，可用面积会越小，需要根据实际场景进行平衡，以视觉上舒服为宜。
2. 比例
卡片的比例，我习惯遵循一些美感规律，比如黄金比例（1.618），白银比例（1.414），青铜比例（1.732），正方形之类的比例。当然，实际设计需求中的比例，还是要结合内容的多少具体分析。
我的经验是，当比较接近这些美感比例其中之一时，就直接优化到这个比例。比如做了一个卡片，宽高比是1.5，比较接近于黄金比例，我就干脆让它等于黄金比例。
3. 异型
除了正常的卡片样式，还可以做一些异型的卡片设计。异型卡片具有较强的形式感和视觉冲击力，所以会比较多的用在游戏或者运营相关的界面中，吸引用户的注意力。缺点是批量化设计成本略高且因为过于风格化而不够耐看。
1. 颜色
卡片的颜色搭配可以使用纯色和渐变色。这些颜色与文字之间的对比要符合界面对比度标准（ https://contrast-grid.eightshapes.com/，这个网站可以直接查到可用性数值，只要不是DNP就是可以用的配色），以免影响内容本身的阅读。如果拿不准的话，可以多用一些白色，比较不容易出错。
纯色卡片设计会让界面显得冷静高级，但对配色的要求相对较高，用不好的话会显得单调，沉闷。如果你坚持要用这种卡片配色的话，建议搭配一些图形纹理，会更容易把控，还能提升画面细节。
△ 纯色卡片设计
渐变色的卡片设计目前较为常见，层次细节更加丰富，画面也显得更活泼一些。
△ 渐变色卡片设计https://dribbble.com/shots/12284120-Wallet-Design-App
有些朋友经常因为配色不好而发愁，其实是需要多去找一些参考来看的，实在担心配色不好，直接去吸优秀的配色方案也是OK的，但要注意搭配合理。
教大家一个方法，去dribbble上搜color或直接打开 → https://dribbble.com/search/color这个链接，就可以看到非常多的优秀配色方案了。
2. 图案
卡片的设计还可以结合辅助图形，以图案的形式与卡片进行结合。这些辅助图形可以来源于品牌符号的延伸，让品牌有更多的露出机会。
也可以是运用一些简单的图形，提升卡片的设计细节，以下是一些还不错的设计案例。这些卡片上的图形都有借鉴参考的价值，自己平时有时间的话，也可以多做一些作为图形的储备。强烈建议收藏，真的可以很有用。
△ 来源：https://dribbble.com/shots/10513966-Gradient-Bank-cards
△ 来源：https://dribbble.com/shots/10498737-Dark-Bank-Application-Design
△ 来源：https://dribbble.com/shots/11313260-Finance-App-Exploration
△ 来源：https://www.behance.net/gallery/84029601/100-Financial-Virtual-Design-Cards-PSD-XD
这里彩云给大家找了非常多的卡片设计形式，可以从中参考学习配色和纹理造型。
3. 图片、视频
卡片背景也可以用图片和视频的形式进行设计，图片和视频的选择一般会偏暗色，以不影响内容阅读为准。
△ 来源：https://dribbble.com/shots/5717917-Travel-Article-Application
1. 文字
卡片上的文字不要太长，我的经验是横向不要超过42字（关于这个字数，有资料可以查，感兴趣的可以找找看），纵向不要超过5行。过多的文本不建议使用卡片形式。
其实这张卡片的设计中，我也用到了黄金比例来指导自己的设计，方便快速确定文字比例关系。
2. 间距（网格法）
卡片上的文字间距最好有一定的规律，这里可以按网格法来规划，比如8px网格，10px网格等等。网格的使用其实可以很灵活，比如我这里的卡片其实就用到了8px网格，各间距就会用8的倍数来做。大小比例就尽量用黄金比例来处理，这样做目的一方面是为了让界面有秩序，另一方面是提升决策效率。秩序产生美，而效率让你早点下班。
3. 减少线框
卡片中尽量减少线框，多用留白来进行内容划分。
4. 层次清晰
卡片中的内容层级要做好，标题和内容之间的差异要明显。这里的层次主要是通过对比拉开的，做好对比的关键就是对比效果要强烈，决不能模棱两可。
比如下图中左边的案例只是在文字的字号上有一定的对比，但字号间相差不大，效果不明显，就会让人第一时间不知道看哪。而右侧的案例则用了加粗，大字号，大留白等，让画面有了强烈的对比，从而产生更好的信息层级。
5. 内容出界
只在卡片的框框里做设计，有时候未免显得太呆板，破开卡片的边界可以让卡片本身更具形式感。如果被人说你的设计没啥亮点，那内容出界的设计就是一个很好的提升设计亮点的手法。
△ 彩云曾经做的一张banner就是运用了出界的手法
△ 来源：dribbble。界面上的天气图标也用了出界的手法，让画面显得更有亮点
1. 光感
卡片中的光感细节能提升设计的质感。下面这张图是我最近做的一张会员卡的背景设计，大家对比下，在卡片顶部加了1px高光线和斜面反光的细节前后的质感区别。
这个小细节，我经常会用到，执行简单又容易出效果。
2. 投影
投影的细节，不要过重，但又要能与背景分离开。有2个小技巧：
3. 3D效果
3D卡片的设计，因为不便于内容编排和阅读，所以带透视的卡片在实际UI中并不太常用。但在作品集包装和运营页面中，则可以带来比较好的视觉冲击力，可以尝试运用。
△ 图片来自：Cradle
以上就是今天彩云关于卡片设计的一些经验总结，卡片设计的应用已经如此广泛，我们有必要利用它来提升自己的界面设计细节。
转自：优设网
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一觉醒来，2020 年潘通年度色就这么发布了。
这款被命名为为「经典蓝」（Classic Blue）的色彩沉稳耐看，隽永优雅，按照潘通官方的说法，「经典蓝」仿佛暮色四合时的天空，宁神静心，让人驻足。「经典蓝」是一种稳固可靠的色彩，给人确信感，抚慰着每一个期待稳定者的心灵。
为什么会选择这样一种蓝色，潘通色彩研究所的执行董事 Leatrice Eiseman 在潘通官网上，予以详细的解释。
「我们生活在一个亟需信念和信任的时代。潘通 19-4052 经典蓝 ，这种色彩正是自信和恒久的外化体现，这种坚实可靠的蓝色调，更能与人产生深层的共鸣，令人心安。一望无际的蓝色能够唤起人类对于广袤无垠夜空的无限遐想，经典蓝鼓励着我们透过显而易见的事实，拓展思维，放飞想象。
经典蓝敦促着我们更加深入地思考，开阔视野，进行更加深入的交流。」
——Leatrice Eiseman 潘通色彩研究所执行董事
从色彩心理学的角度上来看，蓝色色相本身有着信任、信念的含义，也是的色相。在此之前，潘通曾经多次选择蓝色作为年度色， 2000 年的时候选择天蓝色（Cerulean），在 2005 年的时候则选择了蓝绿色（Blue Turquoise），2008 年的年度色叫鸢尾蓝（Blue Iris），2016 年的年度色则是静谧蓝（Serenity）。
相比于这4种蓝色，「经典蓝」更为沉静稳重，没有一点攻击性，也不显得沉重，轻松而易于互动。
「经典蓝」无疑是一个略显保守，但是非常贴合当下语境的色彩。它充满了确信感，让人觉得安全，屏蔽了焦虑。同 2019 年充满前进感的「活力珊瑚橙」相比，「经典蓝」更加内敛和笃定，悄无声息地增加每一个的信心。
除了发布这一年度色彩之外，潘通色彩研究所还专门制定了5套配色方案，这些配色方案应该会在接下来的 2020 年，得到更加广泛的应用。
沉思
这是一套舒缓的配色方案，凉爽的蓝色调和同样柔和的暖色组合到一起，给人以沉静的感觉。
呼吸
这套名为呼吸的配色方案当中，加入了更为经典的黑白色，选择了对比更加强烈、更加富有活力的搭配方式。这样的色彩搭配更容易唤起观者的幸福感，让你的设计更加具有田园牧歌的气息。
沙漠暮色
「经典蓝」的灵感来源之一就是夜幕降临时的天空。而这套名为沙漠暮色的配色方案，就与此相关。充满金属质感的潘通色更能够凸显「沙漠」的闪亮质感，而恰为对比色的「经典蓝」让这套配色方案优雅无比。
异域风情
这套配色方案比起之前的配色更加丰富，更显混搭，仿佛加入了天然的调味料。这种健康而自我的色彩搭配方式，让人仿佛身在异域，不同于此地的文化，迥异与此时的感觉，独特却令人着迷。
非传统
打破常规的桎梏，选择异乎寻常的色彩搭配，而足够传统的「经典蓝」恰恰构成了这种搭配方式当中，作为基础的底色。这套配色方案指向时尚，突破规则，如同小品，有趣而俏皮。
为了更加方便线上的设计师来使用这些配色方案，优设的小编从官方提供的这些配色方案当中，精心挑选了 9 套适合进行数字设计的配色方案，并且标注上了相应的 HEX 值便于精准取色，请尽情取用：
文章来源：优设网 推荐：陈子木
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
讲到设计初期的页面构图规划问题，其实这个构图是服从你的展示方式的，即故事线。设计前期规划阶段，先想好打算怎么表达，再选择对应的构图方式。表达上我们讲究总分主次关系 ，那么构图上依旧遵循这个规则，先具体再抽象。
全屏平铺式的构图方式是最常见的一种构图方式，如下图无意中构成横平竖直的辅助线将内容一格一格展现出来，界线清晰分割明确。因此模块之内的内容就会显得格外的清楚和突出，给人一目了然的感觉。注意哦，平铺并不代表完全一个一个格子码好，比如下图中的深红色区域，没有被网格框住但也码的很清楚，浅红色区域中有一对一的也有一对二的对应关系，故此类型的构图中加上这些灵活的变化就会显得没那么生硬。并且这种构图方式是遵循F型网页阅读习惯的，因此重要内容放哪大家知道了吧~
圆形就是一个典型的中心放射式，圆是有圆心的，通过构造不同大小的同心圆起到聚焦、凸显作用。伴随一个一个同心圆自然而然形成放射线，把重要表述放中间，其他表述按照放射线编排起来。引导用户的视线聚集在我们重点突出的功能点上，先主后次，有起有落。
视线引导式主要是依靠点线面的关系形成一条清晰的视觉引导线，引导用户的视线，避免杂乱无章的堆砌。视线流动的轨迹多则是从上至下从左到右移动，故在大屏上从左到右，从主到次，减小用户的负担和阅读疲劳。如下图是我同事做的一张大屏，指标琐碎，每个指标与指标间没有太强的相关性。当时发现大方向上有一定的前后关系，故最后用这种方式把数据串起来。设计稿上需要把样式给全，看上去有点碎，实际开发后效果还是蛮不错。
水平罗列式的构图方式有点像全屏平铺式，同样是利用人从左至右的阅读习惯。如下图，不一样的是四个大类有明显的前后关系，并且彼此之间存在对比。利用无形之中形成的水平线条把内容串在一起，将同级且对比的意思表达出来。
三角排列式的构图方式，核心思想就是一个稳！从上至下的三角构图，能把信息层级罗列得更为规整和明确。这张大屏是我做的某地数字驾驶舱中的一个分页，用来总览这个分支的三个内容，每块内容上面是政策解读下面是数据结果，清晰明确。
页面的氛围个人主要认为是通过恰到好处的细节堆砌出来，这些细节要自然合适不突兀，讲究一个“巧”字。对于我来说这些细节就好像欧亨利小说的结局一样，意料之外又在情理之中。不过讲道理这些氛围的东西并没有很明显的一定之规，有些方法在这个场景下合适在那个场景下就不合适了，需要设计师在做的时候不断尝试，也是一个缘分。
抄现实是我们在设计中最直接的也是最常用的一种表达方式，它的含义就是提取现实中存在事物的点线面关系。因此往往在发散思维中找到与主题相关的灵感点后，用方式提取其中的内容后，能紧密的结合主题。它将抽象的主题通过实体表达出来，并以之作为内容信息的载体，能够合适的存在于页面之中。这个纬度的内容我直接举几个案例描述下。
公安的项目是我同事做的，在用户那边得到了一致的好评，并且也是团队前期重点研究的一个DEMO。这个项目好在业务逻辑清晰，并且在表达方式上做到合理合适的程度。如下是项目其中一张大屏的一处细节，需求是需要排列公安系统中处置人员的不同分布，在大屏中也是核心区域。
一般在页面核心区域我们会花点心思将这块的内容做充实做饱和，毕竟第一眼需要留下好印象。设计的时候提取了警徽的基础形状、警徽的构成、胸徽的线条排布、旌旗的基础形状、放射线的构图方式，然后将文案排布形成设计结果。最后客户这边对于这块内容直接过稿，认为设计环节带出了警队的特色，给了高度的评价。
驾驶舱的项目是我直接参与主导的，当时这个项目的欢迎屏风格稿做了好几版本的，用户一直都不认可。过程中去除主观因素，总结用户对于驾驶舱的认知和理解。客户的需求是驾驶舱需要在“驾驶”的时候，眼中不光有舱内的内涵，也要有舱外的风景。如下是欢迎屏的基础状态（交互操作并未展开），设计的时候提取了汽车仪表盘的基础形状和风格组成、星光点与点的关系、逆光山体风景的天空渐变，然后组合在一起形成设计结果。最后客户这边看到后过稿，这个设计也留到了项目最后。
如下的作品是behance上一个大佬的作品，作品的名字叫做山海经，我们也是经常拿出来学习参考。在人物设定中，作者将古代的乌纱帽、官服、官徽纹样等内容融入角色的道化服之中，并且角色周边环境中大量融入一些官府的元素，比如官兵举得牌子、衙门的建筑体等。整个作品虽然融入大量的古代元素，但是用赛博朋克的方式表达出来，成品没有一丝违和感。确实给了大家一个方向，原来国风的东西可以这么玩。
1.使用足够并且容易区分层级的颜色去构造页面。数据可视化的项目往往信息的量级是不可控的，准备工作需要做充分。
2.合适的字体能让你的页面事半功倍。挑选字体得对比，确保不同的使用场景下有一致性的显示。条件允许下，针对自身业务场景打造对应的显示字体（羡慕脸.jpg）
3.好的构图可以让表达更上一个台阶。根据故事线的讲述，挑选对应的构图方式，做到从总到分、有主有次。
4.氛围彰显作品的细腻程度。细节决定成败，在作品中增添“巧”的细节，会让观赏者更加投入获取信息的节奏中。
文章来源：tob.design 作者：王亮亮同学
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
从入行到如今的这些年中，眼中的设计风格不断变化。伴随这些年行业的兴起，从最早的拟物风到现在的内容当道，越来越多的设计师参与其中，为行业贡献着自己的理解。但也发现同质化的现象越趋明显，个人认为这里面有设计师本身的问题，也有行业风气的问题。同质化的现象有很多的组成因素，可能是页面视觉是直接的拿来主义，亦可能是脱离不了舒适圈的习惯为之。
我很担心的一件事情就是我们一味的反对同质化的假，最后会演变成另外一种假。是一味的摈弃，还是部分的接纳。这是一个界限的问题，而这个界限我还没想明白。如今风格太现成，都像麦当劳一样，思想的麦当劳，短暂的吃下去了，饱了，不去想了。这个惯性思维很可怕，最可怕的是可能有段时间自身都意识不到这个问题。
那么如何跳出这个惯性思维？我这边借用冯小刚导演在十三邀里说的一段话来解释。创作过程太正常很多时候是经验在发挥作用，每次都和自己的经验作斗争，最后可能会出现一个在经验之外又让自己激动的东西。简而言之就是革了自己的命。可能哪天我想明白这个问题，会再写一章如何创新来讲这个问题。
那么本章主要讲我们是如何在前期定义一张大屏的风格？主要可以从几个方面来讲：配色、字体、构图、氛围。
定义大屏配色的前提是对于用户的政务有着充分的调研，明白是主管哪个行业的，分别用对应的色系去定调子。
举个例子，生物医药、环保等行业通常选用能表达健康安全的绿色；公安、教育、政府等通常选用能表达科技未来的蓝色；消费业、服务业等行业通常选用能表达热闹、朝气的暖色调。
它们有个共性就是主色调不管倾向于哪个颜色，背景通常是对应颜色的暗色系。因为可视化大屏使用环境通常是在室内、展厅等这种外部环境比较暗的地方，避免对于观赏者视觉上的不适应。而且这也有帮助观赏者对于数据的聚焦比对的工作，暗色调的背景加上高亮的配色，也容易在界面中将层次做出来，这点特别适用与3D城市的构建，以后我们会讲述如何在城市中做出层次对比的方法。
色彩心理学普遍还是适用于可视化大屏的，颜色对于人意识的倾向性还是比较强烈的。但是需要明确的是在数据可视化领域中，有些配色规则并不适用。在传统UI设计中我们一般会拟订主色辅色特殊状态色，甚至在灰阶会把标题、正文、背景的颜色区分做全。这样做的好处就组件一致性，给人统一的感觉。数据可视化一般会定一个主基调，围绕这个主基调会用至少5-6中以上的调色板进行设计。
假设我们需要做一个政务的可视化系统，在设计初期敲定了以靛蓝（H:200）为主色调的设定。那么我们会寻找在这个颜色周边的邻近色去做这个靛蓝色调的搭配，比如在青（H:180）和深蓝（H:220），使得整个大面积的色彩整体上过渡会比较自然。通过对纯度S和明度B的调节，我们可以找到很多色调用于数字、文字、点线面等视觉元素。然后在靛蓝色调的对比色上去寻找用于高亮的展示，比如绿（H:120）这类的，起到强化主色调的层级作用。最后找到靛蓝色的互补色左右的红（H:10）和黄（H:45）用于重点强调内容。主色调的互补色需要少量并且珍惜的使用，需要有但不是大面积得使用。
色彩是为了突出内容的重要信息，请有选择、有策略的使用颜色，切勿滥用。配色没有绝对的好坏，只有在当前场景下是否适合，色环理论只能大致告诉你一些配色的方式，最重要的是靠设计师自己眼睛去感受颜色带来的冲击力。上述的配色方式仅仅是我们工作的一个惯用方式，不同项目敲定的内容也不同，请灵活使用。
当然我们在这边提及的色调并不是一个确定的值，而是围绕选定颜色周边的一个色域。可能在文字或者数字上会沿用传统UI的规则，保持特定的统一。但是在点线面、配饰、特殊状态的触发等元素上使用这些色域去提高整个界面的层次和细节，使得画面没有那么硬，各个板块之间是有舒服得过渡。这里的色域以前是需要自己将色调于黑白二色融合的渐变中选取不同位置的颜色组成色板，如今AntDesign的轮子比较友好，填入主色就可以对应生成有层级的颜色。
我们上述的配色方案是有倾向观赏展示型的，由于用户使用大屏普遍都是汇报展览并且用户样本容量小。故在表达的过程中大量借鉴了运营设计的方式方法，因此配色方式存在包容性不够的现象，对于色盲色弱的人群是有障碍的。比如青色、蓝色、紫色在色域展开的过程中，选取其中几个颜色做叠加色板样式时，灰色模式下存在颜色拉不开的现象。可能是“蓝色”是对色障人群最友好的颜色，AntV保留MPC叠加色板，但同时在使用建议中也写明推荐使用MOB叠加色板。
在数据可视化领域中，还需要界定清楚你做的是偏向观赏展示型的还是偏向实战分析型。这两者的区别主要在观赏性的数据可视化往往需要大量的视觉语言去烘托气氛、用辅助性的元素去增强观赏的趣味。实战分析型的主要是需要消除不必要的视觉杂音、强化传达的力度。因此这就是一个尺度的问题，是偏向品牌创意的手法多一点，还是偏向传统UI的手法多一点，君可自决~
以下的案例是我自己工作中犯的错误，拿出来共勉（捂脸233333）。做的时候由于可视化的经验并不是很多，在选用颜色的过程中并没有把颜色的层级拉的特别开，导致长时间观赏容易产生识别不清的问题，进一步讲有可能在比对数据过程中产生认知障碍。回首一看，中央的核心区插画的比重大于数据本身要表达的内容，出现了喧宾夺主的情况。这也是一些设计师容易犯的错误，需要再次明确所有的手法和表达方式都是服从一个原则，即清晰有效地传达与沟通信息。
设想一下，一个充满数据的界面本身就是会伴随视觉疲劳的。人是有惰性的，会自然的抗拒一些不清晰不明确的展现方式。数据可视化在我们理解中就是通过设计师清晰有效地传达与沟通信息，使人有能力抗拒自己的惰性去从枯燥的数据中分析出超额信息。
数据可视化和大量数字打交道，选对数字的字体挺重要的。涉及到字体版权的问题请自行解决，在推荐字体之前有两件事情需要注意下：
第一、文字习惯左对齐，数字习惯右对齐。文字左对齐是人一般从左至右阅读，数字右对齐能够快速识别数据量的大小，容易与其他数据比对。因此在选用数字字体的时候，尽量使用字间距相同的字体（比如Lato字体和DIN字体，注意PS中比对的时候需要选择度量标准，使用视觉的字间距会有问题），这样比对数据的时候字间距相同更容易产生比对结果。
第二、选用数字字体的时候需要检查下常用字符是否有缺失、是否显示正常。比如钱币的符号“￥”和“$”以及“%”。还有就是“1”和“7”、“0”和“O”这两个需要能够清晰识别。（国外的很多字体是没有人民币的符号的，DIN的0和O并不是特别好识别，故很多公司会自己改良字体满足自身业务的要求）
我们最长使用的就是思源黑体、思源宋体，开源并且字体库全。缺点就是比较中性，在数字上辨识度不是很友好，因此我们在数字上最常使用的就是DIN字体。DIN 是德国标准协会，Deutsches Institut für Normung 的首字母缩写。1975年起，德国政府把DIN作为国家标准体系，DIN 标准在国际和欧洲范围内被广泛使用。DIN 字体继承了严谨可识别度高，被广泛运用。
DIN也是有缺陷的，支付宝设计师SKY在专栏里也讲过4的开头较大，以及5，6字体的圆形不够一致，7缩小后识别度问题，所以很多公司都会基于这些问题进行二次设计，比如微信钱包、京东金融、百度金融都在一些地方对DIN字体进行了微调后使用。
接下来我们直接推荐几个有风格的英文和数字字体给大家（私货环节！）：
Futura这个字体是我自己特别喜欢的一个字体，字体表现很现代，看上去特别利落，继承了包豪斯的设计理念。
Optima也是我个人比较心水的一款，字体充满人文主义。字体本身严格遵循了黄金分割原则，比例优美，字里行间充满了变化。
Garamond简直就是衬线体之中的典范，就这么说吧，经典的设计中一定会出现他的身影。
Bodoni被誉为“现代主义风格最完美的体现”。字体粗细对比强烈，给人浪漫的感觉。
Didot和Bodoni很相似，都是给人浪漫的感觉，不同的是Didot在数字上面做了不一样的处理，两者在电商上使用都蛮多的，一般用做价格显示。
DIN被德国人视为“国民字体”，有着悠久的历史。德国的路标和路牌的标准字体就是DIN。其中的4这个设计挺有个性和特点的，容易辩识出来。除了前面说的问题，真的是精准的徳国工艺阿（dog脸~）
lcdD是常见的电子表数字的字体风格，更加端正鲜明的视觉效果，运用在数字提示等内容上，倾斜风的设计让字体更有自己的独特魅力。
Lato就是那种非常现代科技感的一款，并且具备了很多常用自己的特点，属于那种用了不会出错的字体。
Avanti和DIN在字形上是很相似的，但是它的字形更加饱满。差异主要在3、5、8这三个数字以及G、Q都做了不一样的处理，上半部较小而下半部较大，多了一些变化和趣味性。这个字体还有一个细体，一粗一细，灵活使用。
Tensans和Avanti也很相似，如5和8上下部分的比例，6和9的转折以及中圈部分都挺相似的，有点像Avanti字体的加粗版本。但是Tensans特征更加明显，比如2、3、4、7的转角尖锐，切角锋利，具有很浓重的现代工业气息，比较适合速度、刚猛、游戏等主题的设计。
Impact这个字体第一感觉就是厚重醒目，视觉冲击力很强。特粗的笔画、紧缩的间距以及狭窄的中宫，特别适合大标题和醒目的价格展示。
字体字面比较秀长，笔画流畅，简约大方。适用于化妆品、服装等女性向。
和上面哪个BebasNeue是有点相像的，字面细瘦，挺拔优美。多了一些衬线体的字重和体势的变化，设计感与装饰感更强，尤为时尚，在女性、文化、时尚类中用的格外多。
Gaoel有着Avanti的韵味，但是更加年轻、圆润，令人惊喜的是大写的字母有着统一的特点，特别未来。不过需要注意的是该款没有小写，小写就直接变成如下样子。整体字体设计很圆润，年轻化，可爱非常适合一些偏年轻化的产品，同时字重非常适合金融产品的字重效果！
Proxima Nova的style还是比较多的，我个人用的比较多还是在它的细体上做修改，比较纤细现代。
Gotham号称发布会字体，特别现代干净的一款字体，这些年看到的较多是手机发布会的海报设计，纤细的字体压在海报上很有力量。
Expansiva也是特别有个性的一款字体，用于做数字的也比较多，目前看到的可视化设计中存在，但是使用量并不多，由于字形骨骼的因素，用于数字上比较多。
文章来源：tob.design 作者：王亮亮同学
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如何产出一个对实际落地更有指导性的设计分析？本文结合实际项目中常常会遇到的一些问题，总结了前期设计分析的一些实践经验。
设计分析是作为交互设计师必备的一项基础能力，一套有效的分析思路可以帮助我们找准设计发力点，更效率的推导出合理的设计方案，它是一种思维能力，也是一种方法工具，但是在我们的实际项目中，常常会遇到这样几种场景：
新手设计师或者第一次做活动的设计师，设计分析不知道要如何入手
花了很多时间做分析，但感觉对实际画稿子并没有什么帮助
分析过程中发散了很多很好的点，但最后大多都落不了地
这些情况常常会导致设计分析流于形式，套用了很多方法、花了很多时间、输出了很长的文档，内容看上去似乎很丰富，但落地的方案却平平无奇，甚至也会自我怀疑设计分析真的有用吗？
总结下来，会出现这些场景的原因有两点：首先是设计分析太泛，没有聚焦到核心问题；其次是时间分配不合理，没有抓到发力重点。那么结合我们目前的项目来看，怎样做一个更有用的设计分析呢？
根据活动产品化设计思路，可以把我们的日常项目分为两类：迭代型项目以及探索型项目。
迭代型项目是指过往已有过积累的成熟项目，例如大促主会场、我的专属会场、榜单会场、攻略等等，通常是一些已经比较固化的经典业务，或基础的功能类业务；探索型项目则是一些全新的业务方向，例如下沉会场、直播会场等等，刚处于进入期或成长初期。
迭代型项目容易陷入的一个误区是时间分配不合理，没有抓到发力重点，尤其是对于很多新手设计师来说，往往大部分的精力花在重复之前已经做过的内容，比如花了很多时间重新去分析用户、分析方向、分析行业趋势等等，但是对于已经比较稳定的迭代型项目来说，这部分背景内容相对来说已经比较固化（除非有明显的变化），这就可能会导致重复分析出来的结论跟之前的差别并不大，也很难带来实际业务提升。
既然迭代型项目过往已有过经验和策略的沉淀，也经历过多轮的数据迭代，核心思路应该是先定义要解决什么问题、然后才是如何解决，这样才能找准关键发力点。
要解决什么问题
首先要思考是不是真的有问题，没有问题的项目也可以不用再花时间做分析，效率做即可，例如像全部会场，本身的业务模式就比较简单，过往的效果也相对比较稳定，如果不考虑进行突破性的创新，通常是可以效率复用的，这种时候则不需要再去做分析，毕竟也要考虑投入产出比。
那么怎么定义要解决什么问题呢？有三个常用的思路：看数据、看用户反馈、看运营策略。
第一，从数据分析中找到关键问题，例如根据618的项目数据复盘，我们发现预售会场、品牌会场的页面跳失率较高，那么双11核心可以围绕“如何降低跌失率？”“如何提升流量利益效率？”去进行分析，从而推导出更有针对性的设计策略。
第二，根据用户反馈来找到关建问题，例如过往的主会场，用户调研一直都会反馈主推楼层太长而找不到感兴趣的内容，那么可以围绕“如何更好的进行需求匹配？”“如何提升屏效？”来思考和分析，解决实际存在的问题，才更有可能提升体验和数据。
第三，结合运营策略，很多业务虽然已经相对稳定，但随着每次大促战略的变化，运营策略上也会有一些新的需求，那么就根据这些差异化的诉求去找到发力点。例如针对我的专属会场，在原会场定位不变的情况下，在近两次大促中运营侧都提出需要由这个会场来承载平台服务内容曝光的诉求，那么服务内容如何匹配“专属”会场的用户心智，则是这个会场可以重点解决的问题。
如何判断真正有效的解决方案
在定义清楚核心要解决的问题后，就可以按照常用的设计方法进行方案的推导，在发散解决方案的过程中，如何判断方案的合理有效，确保最后的可落地性，是让我们设计分析有价值的关键，因此总结了两个常用的技巧。
首先要理解业务逻辑，减少无用的策略发散，很多时候我们的方案很难推动落地的原因，是没有考虑到业务的诉求，越能够深入的了解业务，才能更好的解决业务侧的顾虑，保证方案的可落地性。
其次是要跳出来从整体来看优先级，我们在进入自己的思维逻辑中时，会比较容易陷入细节，有时候自己觉得很棒的想法花很大力气去推却很难获得其他人的重视，并不是因为我们的方案不够好，而是没有关注到整体优先级，因此要学会看全局，通过多沟通多评估的方式来让自己的判断更加准确。
探索型的项目没有过往的参考依据，相当于需要从零开始去探索如何做，对于设计分析的能力要求会更高，那么常常容易陷入两种极端相反的误区，要不就是容易被方法论套路，设计分析过泛但得不出实际有价值的结论，要不就是完全没有头绪，属于想一步做一步的类型，分析的内容之间缺乏逻辑。
因此，探索型项目的核心思路是要先有分析框架、再做纵向深挖，就像画交互稿的过程一样，需要先定义交互框架，纵再进行交互细节的打磨，才能够保证设计效率及效果。
确定分析框架
确定分析框架的过程主要分为两步，一是先想清楚要分析哪些内容，包括哪些环节是必要的，哪些是重点的，时间要怎么分配。例如当我们第一次做宠物品类活动时，需要对这个品类有深入的理解，因此我们在前期需要去分析养宠人群的特征、宠物行业的发展现状、京东宠物货品的优势等内容，而如果我们做的是一次大促的综合会场，其主要用户群体如果跟常规站内主流群体并无差异时，则不需要再花费大量的时间单独去分析用户画像，因此，需要结合项目情况先想清楚需要分析的内容、以及这些内容的必要性和优先级。
第二步是梳理清楚内容之间的逻辑关系，常见的逻辑结构有两种，一是递进式的推导（A→B→C），分析维度之间是先后关联的，通过严谨的逻辑步步推导而来，例如先梳理用户画像、才能进行用户行为痛点的分析、进而推导解决方案；另一种逻辑结构是进行综合归纳（A+B→C），即通过几个不同的维度综合推导，例如经典的五导家分析方法，结合用户目标以及业务目标综合推导出设计目标。
在很多设计分析中，我们也会参考一些方法论，其实方法论提供的就是分析框架，在理解了这一步之后，相信也能更灵活的应用。以下是根据我们日常项目梳理的一些常用分析框架。
纵向深挖如何得到有价值的策略
有了分析框架后，接下来就可以进入每个模块的具体分析了，如果要得到有价值的策略，同样有两个小技巧。
首先，策略要足够具体、有差异化，尽量避免提出过于笼统的结论。例如针对如何提升流量利用率比较泛的策略就是要进行流量精细化运营，这个大的方向没有错，但如果只到这一步是很难指导具体内容落地的，所以需要细化到流量的渠道有哪些、这些渠道有什么样的特征、针对不同的渠道用户可以用怎样的内容吸引他们，才能够更准确的判断是否会存什么问题。
其次，策略最好能够关联验证指标，可以参考UGD数据增长思路，在推导策略时要能预判它能带来哪些数据指标的提升，以保证设计分析的结论是有理有据的。
文章来源：站酷 作者：大葱设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
