如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
大多数设计师在实际工作中，经常会碰到设计稿改来改去，改得焦头烂额，甚至怀疑自己的设计水平，这是为什么呢？又有什么解决的方法？这篇文章为你答疑解惑。「设计」这一门工种，似乎是永远避免不了「改稿」这一环节的，即便是非常顶尖的设计师，不为甲方不为外部原因所妥协，也会在自我实践中寻求改变。但是，「改设计」也未必是越改越好，如果沟通不当，也会存在越改越糟的结果。所以，作为设计师，一方面我们要吸取不同的意见，另一方面也要全面提升自己的知识架构、坚守自己的原则。
接下来以「UI设计」为例，剖析我们日常工作中「改了又改」的问题。在实际工作中，UI设计师通常会面临来自老板、产品、运营、开发等各方人员的意见，也常常会因为字体的粗细、间距的大小、颜色的选择等等问题各执一词、争论不休，就像下图一样：
为什么会这样呢？其实，在UI设计中，频繁改稿主要存在三种情况：
针对以上问题，在实际项目中怎样避免陷入频繁改稿的死循环，从而提高工作效率、推动项目进展，提升自己作为设计师的成就感呢？
首先我们来了解一下UI设计的工作流，只有清楚自己岗位的流程，才能更好地拿捏设计。每个公司的类型和规模可能都不太一样，但基本一致，无非就是5个阶段：需求 – 设计 – 开发 – 测试 – 上线。如果按职位划分就是：产品经理 – 交互设计师 – UI设计师 – 前后端开发工程师 – 测试人员 – 产品上线。
所以我们UI设计师是处于流水线中游的状态，向上对接产品，向下对接开发。在这个流程中，要做到减少设计修改的频率：
向上要明确产品经理的需求，将原型需求准确恰当的视觉化；
向下要考虑开发实现以及时间成本，因为如果一个设计做的非常绚丽，但是开发实现不出来或者很难实现或者实现的时间成本很大，那么肯定需要对设计方案做出调整，采纳折中方案。
所以，不想让自己的设计改了又改，那么一定要全方位的多沟通，一定不要「闭门造车」。
UI设计师接到产品原型后，一定要弄清这几点，再开始设计：
1. 原型是否确定，会不会存在变动？
我们在接收到产品经理递交过来的交互原型稿之后，先和对方确定收到的需求是否完整，是否是最终稿件以及是否会存在变动。一般来讲，在大型企业里面流程都比较规范，产品经理输出最终原型之后，后期变动的可能性较低。但在中小型企业，通常因为项目时间紧张，流程不够完善，反复的可能性较多。一些大型需求，产品经理有可能会分模块、一部分一小点的流转到UI设计，这样存在的问题隐患比较多，因为经验较少的产品经理全局概念较差，虽然口头上说这一部分的需求已经完善了，实际上当所有需求汇总之后极有可能需要再次调整。所以作为UI设计师，我们尽可能不要去接局部输出的原型，需要再次确认无误后，我们再着手设计，这样就避免了原型需求的变动造成设计的变动。
还有一点，在产品经理给到交互原型时，我们是被动的接受，还是在需求沟通之中也能及时参与呢？最好在产品需求的评审阶段，对应的UI设计师可以积极参与讨论，一起沟通。一来可以熟悉产品思考的整个过程，二来可以在原型的沟通中站在设计的角度及时发现问题，提出建议，避免在原型定稿后再去修改的尴尬。
2. 项目的时间周期
在接到产品的原型后，一定要及时确认项目的时间周期，通常产品经理会主动告知项目的周期，询问UI设计完成时间，我们根据需求的复杂程度给出UI输出的预计时间，再根据这个时间节点来划分每一天完成的工作量。如果产品经理给的时间周期比较短，那么尽可能的阐述原因申请设计时间。如果时间过于仓促的话，设计思考的时间就少，考虑的问题很难全面，不利于界面效果的最佳呈现，导致后续改稿的可能性也很大。
3. 理清设计意图，处理好信息层级
接到产品原型，一定要理清设计意图，处理好信息层级。
当产品经理递交给我们确定的需求原型之后，切莫盲目开始设计，UI设计并不是把原型框架进行简单的排列，我们需要理清设计意图，熟悉功能架构、掌握交互逻辑，明白产品经理想要解决什么问题，达到什么程度以及具体的设计方向。
信息层级这个问题，好像我们在实际工作中经常会提起，但是要做到恰如其分的标准还是有点难度的。准确把握界面的信息层级还需要跟产品经理多方面的沟通，因为有些时候我们以为的，并不是产品想要的，所以一定要多次确认，才能精准把握。
△ 上图左侧是lofter首页列表，右侧是我统一梳理层级关系之后的效果
改动的重点：
在实际设计过程中，当碰到一个设计模块拿捏不准的时候，可以在 sketch 或者 ps 中建立多个画板，将几种不同的设计方案平铺展开，进行视觉对比分析。如果自己拿不准，可以叫组员或者其他部门的「小白」来进行选择投票或者提出改善性建议。不要小看「小白」，不要觉得他们不懂设计，提的建议对设计无用。其实不然，我们的设计最终目的是给人用的，而且要好用，所以一定要多结合小白用户的多方面意见，才能让自己的设计更经得起推敲。
上图为笔者在处理个人中心界面效果拿捏不准的时候，布局了多个效果进行对比，通过对比的呈现后，就可以清晰判断每一个界面存在的问题。
另外，UI设计中，不要停留于表面，不要用「好看或不好看」去做简单评断，在设计过程中我们的界面布局、颜色把控、字符间距、icon设置等多方面都要经得起推敲：为什么这样设计？换一种设计合不合适？
只有让每一处设计都有理论的支撑，深思熟虑后，才会让设计更切实际，才能让人信服，才能实现产品指数的增长，也更能体现设计师的价值。
当设计稿出来之后，一般会组织 UI评审，UI设计师一定要将自己的设计理念表达清楚，将设计中考究的观点输送给参与评审的各方人员，这样会让你的设计更有信服力。如果在评审过程中，产品、运营或开发对设计稿提出不同的意见，我们首先不要急于否定，要确定立场：大家都是以产品为核心去思考问题，也不要人云亦云，要清楚他们为什么会提出这个意见，是不是自己的设计哪里没有展现好？即便对方的建议本身没有可取性，那么你也要站在你的视角用你的观点解释给对方听。这决定于每个设计师的自身知识架构和理论支撑，所以一定要让自己不停地吸收，才能让自己的设计更经得起推敲。
以上是我在实际工作中的一些比较浅薄的总结，如有阐述不周的地方大家可以相互探讨。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
目录
1.「注」入重量感
2.「空」出高级感
3.「圆」有亲近感
4.「装」出华丽感
5.「质」换画面感
6.「写」出文艺感
一.「注」入重量感
突出重量感是大多数设计师常用的技巧，在设计中，为了提高文案或者标题的视觉层级，很多设计师往往会从字体的重量感进行思考，给字体注入内容往往能加大字体视觉重量，字体的重量感也就是版面中的“存在感”，“存在感”一旦提高，视觉层级也伴随着提高。
一般我们在突出字体重量感的方法上常常会选择线条较粗的字体、加大描边或者设计成立体字来突出“重量”，甚至可以缩小字体间距，营造紧张的感觉，使文字更具“重量"。另外在颜色上，黑色物品相对于浅色物品在视觉上显得更重，这一点在字体上也同样适用的。
二.「空」出高级感
字体的高级感一般体现在品等产品的设计上，利用大量的留白，在字体的颜色上尽量选择近乎无彩色如灰色，做到简洁大方、少即是多。而在字体类型的选择上，衬线体往往比非衬线体更具有格调，宋体往往比黑体更加高雅，利用传统字体也能给读者一种信赖感。
看到这里也许有人会说：“从用户体验角度思考应该使用非衬线体，因为其更易读、字形更简洁。”而在《设计师要懂心理学》一书中表明研究发现：常规的衬线体和非衬线体两者在理解难易度、阅读速度和使用倾向并无差异。
三.「圆」有亲近感
字体所展示出的亲近感主要体现在于字体端角的圆滑上，先从生活常见的例子讲起，在人类的常识里尖锐的物品往往会给人冰冷、危险和难以靠近的感觉，而圆滑的东西往往让人有亲近感，更利于吸引读者接近。这里最形象的例子要数按钮和图标的演变，按钮和图标的设计从直角到圆角的演变，其中不乏也有以上原因。
在突出亲近感时，圆角类型的字体所表达的感觉如果还不够强烈，这里不妨可以选用较粗的线条字体再加上暖色系的颜色，这样亲近感就更加强烈了。
四.「装」出华丽感
一般文字是用于阅读，而为了博人眼球，设计师也慢慢让文字字体有了装饰，利用线条的不规则粗细来突出文字的“美”，从而体现出华丽感，华丽感较强的字体大多数用于女性品牌的产品，装饰性高的文字，不仅引人注目的效果，还能强调了产品的“贵”。要注意的是修饰性的文字不利于阅读，不适合大量文字，容易视觉疲劳。
五.「质」换画面感
材质感的字体往往用在游戏的设计上比较多，将武器或游戏场景等有质感的东西贴在字体上，间接展示游戏场景、风格等。因此，运用材质的字体往往更具有画面感，从而影响读者视觉对大脑的影响，产生了身临其境的感觉，于是在脑海中留下对产品认知。
质感的字体往往容易让人感觉到“力量”，这也和第一点注入内容说法一样。
六.「写」出文艺感
手写的字体，会让读者感觉到手的温暖与肤触的温柔，这里被利用到的应该算淘宝商家的感谢信了，利用牛皮纸加上手写字体，可谓是为了好评诚意满满。
手写的字体还常常与手绘贴图一起出现在手帐本，或可爱优雅、或呆萌粗线条；另外，你或许还能在文艺菜单上看到它，朴实无华却清晰温暖，文艺感十足。
后言
没有最好的字体，只有合适的字体，字体的难度并不在于设计和选择上，而是在于你选择或设计的字体给读者的感觉是否符合产品所想表达的亦或是读者所需要的。
在设计中，字体的样式往往起到辅助文案传递的作用，所以如何在不同的设计风格中用好字体尤为重要。字体如果用得好，在设计中常常会给读者所需要的感觉，这里我们例举几种常见的感觉：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
排版就是要将版面中必要的元素进行有序组织、摆放，在空空如也的画板里把一堆杂乱无章的东西排得好看并不容易，简单的对齐排列？结果可能是既单调又呆板，如果全凭感觉加些几何大色块，又觉得太大众，且跟自己的品牌和主题没有直接的关联，怎么办？今天葱爷给大家分享一个实用的排版方法：图形排版法。
什么是图形排版法？说白了其实就是用图形来承载文字或者图片。
1、更易排版：在图形里排版，可选择性更少，所以更容易。
2、更有趣：用与内容或品牌相关的图形排版，本身就是个有趣的创意。
3、更整体：把设计元素聚集于图形内排列，自然显得更整体。
4、更有助于：信息传达图形本身也可以传达出一部分信息。
常用于电商设计和海报设计中：
▲用电视机图形排列主播头像和介绍文字
▲用胶片图形排列图片和文字
▲用展示架图形排列游戏装备和文字
▲用红包和单据图形排列促销信息
▲用房屋的形式排列信息
▲用购物券的形式排列促销文字
▲用蒸笼图形排列图文
▲用广告牌的形式排列文字和图标
那么，像上面这种采用图形排版法的设计是怎么操作的呢？可以简单分为四步：
观察版面上需要排列元素的多少与形式。举个例子，以下是一本农产品小册子其中1P的文案，册子的成品尺寸为w110x200mm。
客户只提供了这些文字，从上图可以看到，字数并不少，且都是关于企业介绍的段落文字，显然这些文字要集中排版，不过如果只是像上图那样简单的对齐，未免有点单调，最好引入图片或者图形加以丰富，由于没有合适的图片，所以我决定采用图形排版法。
用什么样的图形才能把现有的元素组合起来呢？图形的提取和选择有三个方向：
1.根据文字的属性来选择图形，比如下图需要排版的内文是一些优惠信息，所以设计师选择用优惠券的图形来承载文字。
2.根据图片来选择图形，比如下图需要排列的元素中有很多产品，所以设计师用盒子与展示台的图形来承载它们。
3.根据设计（品牌）调性来选择图形，下图是一个春节期间的电商侧栏，所以设计师用灯笼图形来作为排版的载体。
现在，我们再回过头来看看前面说的这个画册设计例子，这里需要排版的元素并无图片，而企业简介类的文字也提取不出合适的图形，所以依据品牌调性来选择图形是最靠谱的，哪些图形可以使用呢？
由于这是一个主打天然、健康的农产品品牌，所以很容易想到太阳、山、白云、树、叶子、花等图形，在这些图形中，哪一个最合适呢？
我们可以根据以下几条标准来选择：
1.图形与品牌调性要相符；
2.图形的造型要尽量简单；
3.图形要美观；
4.要适合承载内容；
5.图形的形态要适合版面尺寸。
由此可见，叶子图形是最合适的。因为其造型最简单比较好承载文字信息，不会影响到阅读性，并且也更便于在狭长版面中运用。
即使确定了采用什么图形来排版也还有很多要注意的地方，比如同样一个元素，可以设计成很多不同的图形，它们所产生的效果也会有很大差别。一般来说，抽象的、几何化的图形会比具像化的图形更合适，因为前者更简洁、更适合排版、更有设计感，下图是树叶图形的两个不同设计方向。
显然右边简化后的效果比左图效果更合适。图形设计好后当然就要把文字排上去了，文字排版的方式有两种，一种是沿着图形的内轮廓绕排（如左图），一种是在图形轮廓内自由排版（如右图）。
使用第一种排版方式能使文字与图形结合得更自然，适合字数比较多且呈段式的文字；使用第二种排版方式的优点是不需要完全受限于轮廓，更灵活，适合字数比较少的文案，很显然，在本例中更适合采用轮廓绕排。
提示：在AI中，把文字工具移动到图形的路径处，当出现如下图标时，单击鼠标左键便可以输入文字了，而且每一行文字的起始都会沿着图形的内轮廓排列。
在菜单栏文字选项中点击区域文字选项，即可调出参数框，如下图：
当然，如过版面中只是光秃秃的一个图形加上其中的文字，还是会有些单调，所以需要再加以补充、优化，首先要在轮廓之外也放一些文字，比如页码和标题等，然后背景也可以与图形呼应，比如这里用了与叶子呼应的森林图片（背景做了高斯模糊处理）。
现在我们可以看到，版面的右上角明显有点空，而且整体上还缺少一些对比关系，于是我把叶子的图形复制出两片，分别排列在主体右上角和左下角作为点缀，到这里这个小页面的设计就完成了。
图形排版法可以使版面变得更有趣、更有创意，但是用不好也容易造成呆板、生硬的感觉，所以，最好不要把所有文字都限制在图形范围内，上面的例子虽然简单，但基本上回答了运用图形排版会遇到的主要问题。最后请大家记住，版面中没有哪一个元素是独立的，要始终站在整体的角度来设计每一个局部。
蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
短视频产品成为年轻用户社交娱乐的主场景，QQ在短视频社交的耕耘过程中，打造了丰富的发表能力，让用户更方便的记录生活精彩瞬间，同时也更方便的与好友互动，今天我们对设计过程进行复盘，将过程难点与设计思路从能力建构、设计切入、设计亮点引入、设计亮点深挖简述供各位参考。
二 发表能力建构
————————
同质化竞争突围
发表能力构建方面从最轻的发表成本以及最多的发表回馈两个维度做横向的铺陈，建构了除了拍摄以外，轻量主观表达的文字视频，不受时空与题材影响发表动机的影集，勾引起共同参与及话题的游戏，最多社交参与感的问答等发表能力等四种发表方式。打造轻量发表成本的文字视频可以确保发表量足够，以解决发表量与观看量不对等的问题，在小游戏与问答等发表方式，除了可以营造社交场景以外，创新的玩法也能与竞品拉开差异，在众多的短视频产品中具有自身的特色。
然而单纯的发表能力差异容易被模仿，能够保持自身优势与特色的时间十分短暂，建立起与用户情感上的连接可以有效的加深用户对服务的认可以及归属感，举个例子，前段时间笔者至上海出差数日，意料之外的一份小礼物却促使我成为该酒店的常客，这证明了建立情感连接确实可以成为与同业同质化竞争时不错的突围点。
三 设计切入角度
————————
建立情感连接，是视频设计“双面性”的一面
参考诺曼的理论，情感化设计分为本能，行为，反思三个层面。在打造视频制作工具的过程中，满足本能的外观愉悦以及确保行为过程的顺畅性属于基本要求，可以参照过去设计工具的手法，保证架构流程界面反馈每一环节的使用效能和低理解成本，而反思的范畴则与内容相关。为制作视频内容而设计，需要将用户的经验，喜好，文化转化成特殊符号，以触及情感连结最重要的反思环节。
用户与产品接触的过程按时间展开分为初次接触、逐渐了解、熟悉依赖三个阶段，若在每个阶段都能与用户保持情感连接，必能逐步加深用户印象，达到竞争差异化的目的。下文两个案例演示我们如何在引入期和成长期选择合适触点，制定相应设计策略和方案，从而达到此目的。
四 设计亮点引入
————————
唤起情感，拉近与用户的距离
为了让用户更主动的发表相册视频，QQ团队在影集发表模块上规划了智能相册的能力，借助用户回忆塑造超级符号，把用户的亲身经历与产品功能建立联系，提高使用意愿。在影集的引导步骤中，寻找合宜的契机，把零散的照片按特定线索重新组织，经过精心包装以回忆墙的方式重新呈现给用户。
影集功能的重新包装：
4.1 场景搭建
QQ经授权后访问用户相册，沿时间和位置线索用聚类算法对照片归类，产生与特定场景关联的照片组，再用图像识别技术从照片组中精选特定n张合成视频，为后续情绪升级埋下基础。
4.2 意境传达
为视频搭配转场音乐是主要增色手段。
转场效果设计要以情绪传达为目的，过渡动画和快慢节奏的灵活搭配打造大片质感，叠加细节让画面生动不僵硬。
在配乐标准上，我们基于用户习惯推导，明晰场景+节奏的音乐选择维度。
转场和音乐的挑选需贴合场景特征。在“聚会”场景中，设计师选用翻转重组的效果传递欢快愉悦氛围，曝光和光晕细节可以模拟真实光影效果。“往年今日”则表现出安静氛围，沉浸的复古滤镜和低调的叠黑效果让情绪表达含蓄收敛，涟漪波动仿若时光倒流。
4.3 捕捉时机，宣传专属回忆
在信息架构层的设计使用卡片横滑的方式，一方面可以暗喻时光隧道，另一方面考虑到大卡片比其他尺寸的缩略图在陈列和交互行为上更利于突出视频的优势。
4.4 案例回顾
我们采用情感符号引导发表的策略，得到数据的支撑，影集发表总量和发表转化率均有明显提升。经过市场横向对比，QQ团队在对影集的功能规划和整体设计理念上占据了优势位置。
五 设计亮点深挖
————————
打造情感体验峰值，强化用户印象
在任何体验中，都应该重视体验过程中的情感峰值，如同丹尼尔卡曼说，体验产品时能够被记住的只有峰值与终值的体验，我们在智能相册的环节之中建立起与用户情感上的链结，而链结后的情感峰值，则选择在发表成本最高发表频率的文字视频中深挖，让体验情感的峰值在高频率的场景中发生获取最高的投入回馈。
5.1 过程颇折
文字视频上线后发现用户发表意愿未达预期，症结在于其过程缺少能激发用户主观意愿表达的情绪触发点。我们提出两个优化思路，
1 降低理解成本，体验对齐于常见动态发表界面。
2 支持自定义背景，用带场景暗示的背景烘托情绪氛围。对比实验后发现2既可增加文字视频的意境表达又不干扰基础操作，是为更佳方案。
文字视频的初期方案和优化方向：
5.2 策略制定
QQ团队基于对用户发表场景统计，确定以传达心情和高频发表时间点为线索，策略制定是考虑到既要与用户表达有耦合但不能具体有所指。
5.3 意境传达
背景模版设计有以下原则：
1 界限分明，背景效果不要干扰主体信息。
2 意象与认知相符，有情理之中意料之外的惊喜，引起用户好奇心。
3 表义避免太具象。抽象表达腾出更大想象空间，让用户创意不受缚于环境。
以下是全部模版效果展示。
5.4 案例回顾
经优化后文字视频的背景从纯视觉角度转变成带动用户情绪刺激发表的触发点，后续团队结合运营策略，在特殊节日或特殊事件前更新模版可以持续刺激拉升文字视频发表量，该策略的运用屡建奇效。
六 总结心得
————————
设计经验
产品体验路径中植入情感因素意义重大。在引入期唤起情感降低用户心理戒备，产生熟悉亲切感。接触期有效调动用户情绪制造情感峰值，加深印象。成熟期创造互动机会，让情感得到延伸寄托进而巩固市场地位。此过程环环相扣层层递进，在用户心理推波助澜。
好设计是能影响用户非理性，改变情绪最终影响他的行为。设计的高境界在于只影响不明说，用户不需要领会设计意图，但情绪已经被感染了，在情绪的作用下，按照设计者预定的轨迹，自然做出选择。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
响应式已经成为网页设计的主流，目前已很多网站能兼容手机端 ，但是唯有 dashboard 的界面是相当难在移动端显示，特别是数据复杂、内容较多的后台数据，是很难直接展示到移动端的。
今天我们分享一系列 dashboard UI 设计作品，主要展示一些用户数据、图表的可视化组合设计。这些作品界面布局合理，层级分明，设计美观，对要做这类 UI 的同学有很好的参考价值。
– 01 –
by limor.tabeka
– 02 –
卡路里消耗跟踪器 by Cuberto
dribbble.com/cuberto
– 03 –
健身活动追踪 by Cuberto
– 04 –
医院 APP 设计 by Nicat Manafov
dribbble.com/nicatmanafovv
– 05 –
by Stelian Subotin
– 06 –
– 07 –
by Zoeyshen
dribbble.com/zoeyshen
– 08 –
by Gabe Becker
– 09 –
by Cedrica
dribbble.com/rddstudio
– 10 –
by Michal Parulski
http://dribbble.com/Shuma87
– 11 –
by Divan Raj
dribbble.com/divanraj
– 12 –
by Maciej Kałaska
dribbble.com/themce
– 13 –
by Gregory Muryn-Mukha
dribbble.com/murynmukha
– 14 –
by Saepul Rohman
dribbble.com/SaepulRohman
– 15 –
by Dmitro Petrenko
dribbble.com/ortimd
– 16 –
健康生活 APP，by OKatarina
dribbble.com/OKatarina
– 17 –
暗色系移动端后台 by ortimd
dribbble.com/ortimd
– 18 –
by Riko Sapto
dribbble.com/RikoSapto
– 19 –
by Taras Migulko
dribbble.com/migulko
– 20 –
电子单车 APP 后台设计 by Arnar Ólafsson
dribbble.com/pollur
– 21 –
by Cedrica
dribbble.com/cedrica
– 22 –
交易证券数据界面设计 by Iftikhar Shaikh
dribbble.com/iftikharshaikh
– 23 –
记帐应用统计界面 by Matt Koziorowski
dribbble.com/mattkoziorowski
– 24 –
by Matt Koziorowski
dribbble.com/mattkoziorowski
– 25 –
银行 APP 数据界面 by Vlad Ermakov
dribbble.com/ermalength
– 26 –
比特币交易界面设计 by Pawel Kwasnik
dribbble.com/pawelkwasnik
– 27 –
医疗护理app用户后台 by Masudur Rahman
dribbble.com/uigeek
– 28 –
by Manoj Rajput
dribbble.com/manojrajput
– 29 –
这个展开菜单很好看呢 by Martin Mroč
dribbble.com/martinmroc
从收集的这些 Dashboard 界面来看，它的展示形式和PC 端有很大的区别，移动端的后台只能显示少量或简化版的数据。比如 PC 一个页面的功能，在移动端可以分开1-2个页面来区分，或者使用类似 Tab 的形式来展现。
如果是手机 WEB 端可以用响应式来解决，以节省成本，但这样通常交互并不十分友好，如果时间和成本允许的话，建议产品和交互人员策划新的后台版本。
蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在多人团队里，通常不同的设计师负责不同的流程，如果没有UI设计规范，不同的设计师就会对相同的组件做出不同的方案。产生大量重复工作，效率比较低。而制作设计规范和UI KIT之后，则可以直接利用KIT里的组件快速搭建好页面，把设计师从基础工作中释放出来，大大提升设计效率。
目录
一、为什么要建立规范
二、规范的适用范围
三、如何建立规范
1 利于多人协作，提率
2 增强一致性，塑造品牌感
制作和遵循设计规范，能够保证整个产品的交互效果和视觉风格、乃至文案的统一性，提升用户的体验。
3 减少冗余内容，方便维护和更新
同类内容使用一样的组件，能够降低输出的内容量，减少冗余的控件和代码。同时也便于维护，在迭代时进行统一的更新和应用。
4 利于工作交接
方便设计团队和其他团队交接，如果团队有人员变动，也方便后续入职的同事能够通过规范迅速熟悉产品，快速上手。
前面的文章我提到过，如果产品处于启动期的话，这个时候最重要的事情是圈到第一波用户，让自己活下去。在这个阶段产品会频繁的改版、验证，迭代非常快，整个团队可能都处于拼命加班的状态。在这种情况下做设计规范文档显然事倍功半，一个是浪费人力资源，另外就算做了，在频繁更新的背景下也很难去执行。
因此设计规范文档更适合于那些跨越0-1阶段的产品，这个时候产品已经用有了一定的用户，团队也会扩张。这个时候我们可以选择制作基础的设计规范，比如栅格、配色、字体、图标规范等等。对于成熟期的产品来说，大版本更新的周期是非常长的，这个阶段通常会制作更为详细的设计指南、设计原则、do & don’t、品牌书、图标手册等等。
电商类的产品对于大家来说都是比较熟悉的，就算不从事这个方面，日常使用也会很频繁，所以此次案例我们以下面这个电商APP作为示范。
做规范时通常会有这两种情况：
1、不打算进行大版本更新的产品
对于小版本迭代的产品来说，建立规范只需要在sketch里把所有设计稿进行归拢和分类。直接根据现有的稿子梳理出规范，再对不符合规范的文件进行调整即可。
2、新版本 新规范
而对于需要做新版本并且建立新版本规范的产品来说，在做设计稿之前，我们就需要先统一一些基础的内容，比如颜色、字体、栅格等等，然后在设计过程中去制作KIT、对基础的规范进行补充。
1 制定统一的栅格系统
因为现在都是一稿适配多端，所以首先需要确定设计的基准尺寸，是基于iphone8？还是iphone 8P？或者1080*1920等等……每个公司设计稿的基准都不一样，我们是以一倍图为基准进行设计的，所以我这里的基准尺寸就是375*667，单位为pt。
栅格一种情况是制定网格系统，网格系统的话首先要制定最小的设计单位，比如淘宝的最小单位是3，掌阅的最小单位是4，airbnb的最小单位是6……定好最小设计单位之后，界面中所有间距采用最小单位的倍数。
假定我们最小单位4的网格，排版时横向和纵向的间距都是4的倍数，比如8、12、24。
第二种情况是可以直接建立横向栅格系统，常用的是12栅格，12栅格比较好的地方是能够同时被2、3、4整除，因此能够根据具体需求灵活的设计各种模块。当然如果产品比较轻量化，是不需要这么复杂的栅格的，可以根据需求设置6、4甚至2栅格等等。
2 色彩规范
色彩规范主要表明色彩的色值和使用范围，一般会从品牌色、辅助色、基础色、状态用色等等。如下图所示。
如果产品常用到渐变的话，需要注明渐变的角度以及渐变色的色值。包括产品如果有夜间模式的话，要额外注明日间和夜间模式下各个颜色的对应色值。当然这里的夜间模式说的是真·夜间，而不是微博那种直接加一个黑色透明度蒙层的伪·夜间。
额外提一句，重要内容和正文内容要保证文本的可识别度，WCAG指南中指出，文本和背景色的对比度需要达到3：1。大家可以通过
https://webaim.org/resources/contrastchecker/ 的颜色对比检查器来核对颜色。我这里的品牌色和强调色对比度为3：1和6.3：1，而辅助颜色（比如标签）的对比度则在2-3之间。
3 字体
字体规范最需要注意的是提取出各个场景下需要用的字体和字号。
需要注意的是，要标注上应用场景方便其他人理解。不然其他成员也并不知道到底什么时候应用一级标题、什么时候用二级标题。
4 图标
通常来说图标分为两种，功能性图标和展示性图标。
功能性图标是为了引导用户理解和操作，需要表现和简介，方便用户识别其含义。功能性图标常规状态下为无彩色。
展示性图标通常为页面入口，会有更多形状、颜色、质感的表达，吸引用户的注意力和点击欲望，强调差异性，比如各种品类区的图标、徽章、等级图标等等。
图标规范通常来说会先定一些基础尺寸，梳理好各个页面的图标尺寸，进行整合，最后确定好几个基础尺寸，比如我这里的基础尺寸是4个。功能层级一致的图标尺寸要一致。
为了保证不同形状的图标在视觉上保持大小一致，会制作一个图标的基础制作说明。制作说明里会统一图标的圆角、描边的粗细；如果是涉及到展示性图标的话，还会有图标的视角选择、配色的选择、以及如何表现质感等等等等
5 默认图
电商APP的话有大量的产品图片，所以我们也把默认的占位图样式进行了统一。因为我们这里样式都是一致的，所以采用了统一的规范，如果有多种默认样式，或者有其他类型的占位图，需要分别进行说明。
页面组件通常包括导航栏、工具栏、弹框、列表、卡片、空状态等等，按照原子设计理念来说，还可以把组件拆分为原子、分子等更小的基础设计组件，比如角标、标签、按钮、图像、优惠券、选择器、进度指示器等等
页面组件除了梳理出规范之外，通常会整理成一整套UI KIT，保存为sketch文件日常拖拽使用，或者导入为Libraries直接调用。当然，也可以直接在KIT上备注出规范和注意事项，具体输出什么格式这个看团队的需求即可。
因为组件部分是一个比较庞大的内容，需要根据具体产品
1按钮
按钮一般有悬浮按钮、填充按钮、线框按钮和文本按钮等类型。其中悬浮按钮具有最高的优先级，属于强引导型按钮。
按钮通常会有三种状态，常规状态、点击状态和不可用状态。因此在规范中需要标明按钮在这三种状态下的样式，比如颜色、投影、圆角、文字大小等等
除此以外，也可能会有加载状态，也就是在点击按钮后，如果有1S以上的数据延迟，通常会考虑触发按钮的加载状态。加载状态的按钮样式为按钮上显示进度指示器。
2 导航
对现有页面的导航进行收拢和分类，比如我这里分类为常规标题样式、标签样式、搜索框样式、无标题样式、字母导航……
标题需要注意文字的极限值，ICON尺寸和位置的话要考虑最小可点击区域，我这里icon的尺寸设置为24pt，但是热区是44pt，所以要注意间距的设置，热区不能重叠。
3 标签
标签通常有多个使用场景，我们可以对标签进行分组，比如运营类标签、内容属性标签、筛选标签等等
然后对每类的标签统一样式、文字内边距以及说明适用场景。
4 弹窗
弹窗是为了提示和通知用户而位于页面内容之上的一种控件。它是引导用户专注于某一项任务，用户可以通过操作来关闭弹框。弹框包含模态（对话框、操作菜单）和非模态（toast、 snake bar等）两种形式。
模态弹窗需要定义蒙层的样式（颜色、透明度），以及弹框内的文字说明和按钮。
我这里拿一个对话框的规范进行举例，这是一个无ICON的双按钮对话框，因此在这里我们需要说明标题、正文文本、按钮以及背景遮罩的信息，还有字号、行距、文字极限值、文字色、按钮的状态等等……
除此之外，组件类的规范可以配上常用案例、don’t&do，会更方便团队人员理解，防止错误状况。
5 列表
列表是由多个等宽的行组成的、按照一定规律排列的连续条目。列表在一些资讯类产品里会有更多的组合形式。我这款产品里用到的列表主要是单行和双行列表，那么我们就整理出对应的列表类型和需要说明的事项。
写这篇文的初衷，是因为从去年底我建立公众号，并且在站酷发表了一些文章，得到了很多人的认可。很多粉丝私信我各种问题，陆续有人问我设计规范怎么做、交互规范什么样之类的问题。但是公司内部的文件确实没有办法公开分享，所以我就想说，那不如专门写一篇文章详细教大家制作移动UI设计规范吧。
这篇的基础部分我做的比较详细，组件部分写的有些概括，主要是因为组件部分不是通用的，要根据自己的稿子进行整理和归纳，归纳好之后做好标注和规范说明即可，这部分是一个罗列的内容，所以就不必展开了……
当然还有很多内容没有展开说，比如在Sketch里把KIT制作成Libraries统一使用，但是我想作为一篇设计规范入门教程目前应该足够了，更多的内容我在后续开新文去补充吧。
蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
我们的文化中会将大师们捧上天，凸显他们和常人差别最大的那个部分。大师当然是有属于他们的秘诀的，可是他们的成功同样植根于他们生而为人的烟火气。从一个人的视角来解读大师，在崇敬的同时，我们也应当对自己有信心——他们已经替我们走出了一条，可供参考的道路。创造力是我们每个人与生俱来的，我们天生就是创造者。人人都可以创造，而且大多数人都以不同方式进行着创造。毫无疑问，创造新事物时，我们是最快乐的。
不幸的是，许多人会找借口不去创造，比如：「我没有足够的创造力或天赋。」这是不对的。在重新审视简·奥斯汀（Jane Austin）、毕加索（Picasso）、爱迪生（Edison）、蒂凡尼（Tiffany）和丘吉尔（Churchill）等著名人物的经历之后，我意识到，创造力和我们常说的天赋，只是勇气和不懈努力的副产物。
每个人都是有创造力的。众生平等，人人皆可创造。个体性和独立性只是用来发掘和完善内心世界的。因此我们每个人都是有创造力的。
正如我在上文中提到的，勇气是与创造力和创新直接相关的。对此 Paul Johnson 赋予了最好的定义：
创意往往反映出巨大的勇气，尤其是当艺术家不向最终的敌人——年龄或衰老，低头的时候。
我开始探索，我想知道创造力是什么。为什么有些人能够通过他们的创造改变历史的进程？是什么引导他们创造？他们的工作背后有什么秘诀吗？为什么有的人名垂青史而另一些则不然？
最终我发现了一个残酷的事实——以创造为事业的人每天都在不知不觉中辛苦工作，而且前途未卜。正如约翰逊所写的，你必须能够战胜时间和任何可能出现的身体缺陷。比如贝多芬不得不和他的听觉缺陷作斗争；爱迪生失败了几千次才发明出最后的灯泡；瓦格纳生活贫困，经常向人要钱；艾米丽·狄金森从不顾及公众的态度，无论是鼓励或批评，始终独自一人写诗。
在我致力于研究不同性格的人的时候，最让我惊讶的是每个创作者总是在前人的基础上创作。没有人凭空创造出好作品，而这打破了我一直以来所持有的刻板印象。
所以让我们深入研读一下创造者们的经历，看看他们是如何工作的，让他们如此特别的秘密，就在其中。
「如果我没有足够的天赋，又有很多竞争对手，那么我将每天创作一幅画，直到让世人知道我是活着的最伟大的画家。」这无疑是毕加索踏上成为历史上最成功的艺术家的道路时，一直秉持的信条之一。
毕加索出生于西班牙的马拉加，仅有的绘画启蒙知识是由他的父亲传授的。至于其他方面，我们可以很容易地说毕加索是自学成才、自我推销，在他所居住城市的街道上接受教育的。从很小的时候起，他就一直密切关注着市场，因此他总能知道什么才是可以卖出去的。
不同于等待灵感的到来，找寻上帝赋予才华的人们，毕加索每天都在创作。他的工作原则是速度胜于准确和努力。他是我们所知道的最不安分、最具实验性的创造者之一。他做的每件事都必须尽快完成，不会对作品精雕细琢。
毕加索做过许多工作。除了绘画，他还做雕塑、面具。无论是在画布上、纸上，石头上，陶瓷上还是在金属上，他都是卓越的艺术大师。对他来说，没有任何物质障碍。他是一个绝对的实验主义者，每十年都会改变他的风格，对于颠覆从前的自己从不畏惧。
他还设计过海报、标志、广告、戏剧服装和服装。毕加索离世前留下了超过3万件作品，这是有来源的（catalogue raisonne – 1932-1978）。毕加索是一个有数量观念、强烈的职业道德和实验精神的人。
也许你不会想到这份名单上会出现这位政坛人物，但我这样做是有充分理由的。他是一位首相，二战后他在历史上赢得了一席之地，但他确实值得被列入名单，因为他也是一位画家和文字大师。
丘吉尔是如何开始写作的？父亲离世后，丘吉尔悲痛万分。他觉得丧失了自我，也失去了内心的平静。因此，他决定写一本完整的传记献给他的父亲。在那之后，他发现了自己对文字的热爱和激情。丘吉尔不知道什么是创造力，他只知道「努力工作」这几个字。
温斯顿日以继夜地工作。感谢上帝，他很好，只有在8小时睡眠不足的情况下才会感到疲倦。——丘吉尔的妻子 Clementine Churchill
很少有人知道丘吉尔一生中写作超过1000万字。这其中包括他的演讲稿、书籍和文章。这种写作量比任何作家写的都多。他从小就有写下所有他感兴趣或参与之事的习惯。
他不仅练就了写作技能，而且还从中赚钱。每次他去不同的国家，或者参与一场战争，他都会写相关的文章卖给报纸或期刊。他写了三本关于二战的书，共有约200万字，是关于那个时期覆盖范围最广、最有价值的资料之一。
语言是唯一不会消亡的东西。——温斯顿·丘吉尔
当他不写作、不娱乐、不与政治斗争时，他就画画。他发现画不仅可以作为爱好，而且可以成为面对困境时的避风港。因为画画的时候你要保持心无旁骛，这样便可以放松你的大脑。
他从不逃避艰苦的工作，相反，他竭尽全力地工作：议会、行政、地缘政治、写作、绘画、建造田园诗般的房屋和花园。丘吉尔自命不凡，他的创造力流淌在他的血液中。他希望自己所见的一切，都能亲自动手实现，这就是他有别于他那个时代的其他人的特质。
在所有创意大师中，克里斯托巴尔·巴伦西亚加是最专注于创造美好事物的创造者。工作渗透了他生活的方方面面，他将自己全部的精力交付于工作。
作为著名品牌巴黎世家的创始人，他是怎么进入时尚圈的？三岁时他参加了一个缝纫班，他对此表现出极大的热情。在接下来的74年里，他的缝纫技术炉火纯青。在他的余生中，他每天都要做一件针线活以保持手的灵活度。他是当时唯一一个在服装设计上独当一面的设计师，他做过缝纫、剪裁、选料等一切与制衣相关的工作。他唯一不会做的事就是画画，需要助理代为完成。
他的工作量巨大，整日都待在工作室里。以至于人们一度认为「克里斯托巴尔·巴伦西亚加」是一个假名，也许并无其人。几乎没有人采访过他或是见过他，也几乎没有他的照片。他从不参加社交活动，除了和一两个老朋友相聚外，他很少出去吃饭。
这一切都使他得以专注于创作能永远流传的作品。他孜孜不倦地工作和创造。这就是为什么现在几乎没有设计师能够创造出像他在上世纪五六十年代那样的创作作品，这些作品正如同其他人所说的——那都是馆藏级的作品。
他工作非常努力。巴黎世家每个系列都有200-250个设计，所有这些都是他自己完成的，因为他几乎不信任任何助手。他甚至拒绝了年轻有为的纪梵希（Hubert de Givenchy）的帮助。
从他三岁到生命的最后几天，他每天都努力工作。在上世纪60年代最艰难的时期，他停止了工作，因为心脏病发作，大师最终离世而去。
路易斯·康福特·蒂芙尼痴迷于用玻璃制作窗户和灯具，并以玻璃进行珠宝创作。他的父亲查尔斯·路易斯·蒂凡尼（Charles Lewis Tiffany）生于1812年，1837年在纽约开了一家商店，销售文具和精美的器皿。他似乎继承了他父亲的品味，把平凡与非凡融合在一起。
蒂芙尼是一位真正的创造者，他勇于尝试，乐于为自己设定不可能完成的任务。尽管他父亲是个商人，他早年还是选择了学习绘画。但从本质上讲，他也是组织者、领导者和商人，也是一个挥霍无度的人和收藏家。如果要给出一个定义，蒂芙尼是一位创造者和推动者，他的远见卓识和组织能力使这一切成为了可能。
在二十世纪初，他雇用了100多名玻璃行业的出色工人，鼓励他们试验自己的想法，并辅以化学方法，对这些想法进行进一步的研究和推动。
他利用他的珠宝工作室实验特殊的金属反应。这些金属与彩色玻璃结合在一起，形成了「宝石花瓶」。他一直在研究他在旅行或参观博物馆时挑选的古代玻璃碎片。他在寻找可以用于复刻它们的化学方法。
蒂凡尼对探索发现和实验有着一种无法言喻的渴望，这让他能够创作出如今每件价值超过100万美元的作品。他经常去不同的国家旅行，研究与玻璃有关的古代文化。他保存了旅途中的许多发现，参观博物馆都会留下详细的笔记。
重要的一点是，蒂芙尼喜欢与他人合作或从其他风格中获得灵感，但他从不抄袭。他写道：
神赐给我们的才干不是要我们模仿别人的才能，而是要我们运用自己的头脑和想象力。即使是在团队中工作，艺术家的个人风格也是通向真正美丽的道路。——Charles Lewis Tiffany
他还创造了一种表面粗糙的昂贵玻璃，之后他为其取名「熔岩」。「熔岩」的灵感来自他在维苏威火山附近发现的碎片。他对古代的研究发现，埋在灰烬中的瓷砖（如庞贝古城）经过了2000年的化学变化，产生了光泽。这个变化过程可以在工厂实现。不久，他卖的瓷砖比花瓶还多。
要成为一个创造者，就必须成为一个艺术家？大错特错。发明家和商人托马斯·阿尔瓦·爱迪生背后有1000多项专利。大多数发明家在现代社会发展中发挥了至关重要的作用。他们的灵感来自于解决他人需求的渴望，以及与艺术家合作。
他的灵感来源于给予人们闻所未闻的东西。例如，他发明第一台录音机的灵感来自伟大的歌手和乐器演奏家的声音。他想给他们更好的创作工具。
他在电力方面的贡献也是如此。他信任与其他创作者和艺术家的合作。他鼓励蒂芙尼将燃气灯换成电灯，这样生意会更好。后来他与蒂芙尼合作，设计了纽约第一家完全使用电灯照明的剧院，帮助许多舞者寻找新的可能性来发展自己的演艺事业。
天才是1%的灵感加上99%的汗水。——爱迪生
他的实验室看起来更像是画室，而不是科学家的工作室。有时他沉迷工作就会睡在地板上的衣服里。他的名言「天才是1%的灵感和99%的汗水」诠释了他的职业道德观。做一个创造者不是一句空话，而是一种生活方式。
有句话说，只有业余爱好者才需要别人给灵感，专业的创作者靠的是自己日复一日重复工作。我多么不希望这是真的，但别无他法。或者就像我的一个朋友说的：「如果你不利用各种信息，你就不可能保持灵感。」他所说的信息是指读书，看电影，听音乐，去画廊，和聪明有趣的人交谈，旅行和探索一个新的国家。这可以看作一种「消费」。一旦你「消费」了，你就必须创造并回馈世界。
在阅读了这些创造者的故事后，我们可以看到所有人都有一个共同点——努力工作。所有的创造者都有一个人生座右铭——不断创造。其他的部分只是他们的个性。
做一个创造者不是一个头衔，而是一种生活方式。这不是三天打鱼两天晒网的事，也不仅仅是一个爱好，这是你的生活。当然，他们能够坚持下去，也因为他们内心对于这件事情足够热爱。
我们不需要上帝般的灵感来创造非凡。真正的创造者总是在收集周遭各种各样的信息，无论是在自然中、在不同的国家、在书籍中、在电影中、在音乐中、在食物中，还是在与艺术家或其他像你这样的创造者的合作中。
同样值得注意的是，创作者在创作时通常都是以自我为中心的。他们不允许其他人越俎代庖，因为他们想确保他们的工作朝着自己认同的方向发展。而且，这是因为他们喜欢创造自己的生活，而不是让别人为他们创造生活。当然，在大多数现代环境中，在工作中以自我为中心是不现实的，也是不的。但每个人都有自己的方式。有些人是推动者，有些人是独裁者。
PS：当然还有更多伟大的创造者值得我们去写（无论男女）。这个名单仅代表个人观点。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com
