地理空间数据可视化 (Geo Spatial Data Visualization) 是近年来兴起的一个热门领域，越来越多的政府、企业青睐于通过这种强视觉的形式来展示政绩与实力。市场需求的增长也吸引了越来越多的设计师投身于这个领域。而在这样一个细分领域，也对设计师的能力提出了全新的要求。在该领域，我们团队沉淀出一套固定且可复用的设计模式。
编辑导语：在一个团队里，成员之间“协同合作”是非常有必要的，比如一些岗位没办法完全理解设计师的想法，多沟通可以避免一些不必要的摩擦；在出现问题时，现在自己的环节找找问题，再进行沟通；本文作者分享了关于精准还原设计稿的环节，我们一起来看一下。
UI设计师作为展示产品形态的执行层，产品上线前走查视觉与交互还原是必经环节。
设计师可能都遇到过一个问题，作图时连一像素的分割线都纠结好几次，但是开发完的效果却不尽人意，UI验收不通过；然后前端这边委屈的想拿出藏在键盘下的四十米大刀找你来血拼。
我们经常会听到身边的设计师与开发哥的一些对话，关于对齐、大小、间距等设计还原问题经常会讨论很久；甚至有时会觉得，几个像素的间距是不是有必要这么纠结？
「还原」是指事物恢复到原来的状况或形状，互联网中的「设计还原」是说开发后实际界面和设计稿效果有偏差，进行设计校对。
一直以来，设计验收都不太受重视：
不同的项目类型还原度也不同：用户产品>B端产品>后台；对于用户产品最好是能做到像素级还原。
在这个快速发展、迭代、更新的时代，互联网产品的用户体验重视度越来越高，而其中的产品设计还原也成为了工作流中重要的一环。
我相信每一名UI设计师，心里应该都有一个前端能100%还原设计稿的梦想，毕竟那是我们艰苦奋斗的劳动成果。
而视觉还原的高低与否，则直接取决于设计——开发——测试这些环节的协作质量；不仅仅影响上线产品的用户体验，还影响着作为产品设计最后一环的工作质量。
经过走访UI/UX设计师、前端工程师和测试工程师的还原设计图的工作场景。
深究原因后，线上效果的失真率其实涉及到设计、前端开发、测试这三个环节，分析造成这种现象出现的原因大概有以下几点：
了解开发依据哪些规则还原设计稿，前期的准备工作是重中之重，设定好每一个细节规则，后期落地还原时才会将页面的失真率降到最低。
UI 设计中，设计规范是设计还原一个关键步骤；一个好的规范应该是高效的、简单易懂的。
设计规范通常可以把颜色、字体、组件等内容制定成规范，不仅仅保证视觉的一致性，也极大方便样式和组件的复用，后期的维护和开发；在规范的辅助下，开发在搭建全局共用控件时规则更加清晰明了，如按钮、行间距、字体大小、色值等等。
3.1.1 色彩规范
颜色是设计中最重要的元素，颜色的运用与搭配决定设计的品质感；在 UI 设计中，颜色的使用规范主要在于：品牌主色、文本颜色、界面颜色（背景色、线框色）等。
3.1.2 字体规范
文字是APP主要信息的表现，尤其是新闻阅读、社区APP等制定标准的设计规范和良好的排版方式，用户使用APP也觉得毫无疲劳感，这一点很重要。
不同的字体气质不一样，并且不同场景下带给人的感受也不一样；所以需要在设计的时候考虑到字体的设计效果，然后在设计规范中注明；主要规范标准字的大小，标准字要注意跟上文的标准色进行组合，突出APP重要的信息和弱化次要的信息。
3.1.3 图标规范
在 UI 界面中，具有标识性质的图形就是图标。作为 UI 设计中重要的设计模块，产品的每个页面中都有可能存在图标。
设计规范中，图标一般按照用途分为两类：应用图标、功能图标。
图标还应该根据不同的功能需求设计不同的状态：如常态、选中态、点击态等。
应用图标：各种应用程序的识别标志，在应用商店里下载的一些应用程序的标志。
功能图标：规范中最好标明图标格式与使用方式。比如 Web 设计，图片可以使用 iconfont 管理，可生成代码交付给前端开发；如果是原生 APP，那么需要标注图标导出格式与尺寸。
3.1.4 图片规范
图片作为界面设计的重要组成部分，需要标明尺寸规范，分为不同用途的种类。
3.1.5 控件规范
控件是指产品界面中可操作的部件，与组件是有一些区别的：控件翻译为 Control，组件翻译为 Component。
通俗的解释说法就是组件为多个元素组合而成，控件为单一元素组合而成。
常用的 UI 控件（Control）：按钮、输入框、下拉列表、下拉菜单、单选框、复选框、选项卡、搜索框、分页、切换按钮、步进器、进度条、角标等。
3.1.5.1 按钮
按钮有 5 个状态：正常、点击、悬停、加载、禁用。
需要在规范中分别罗列出这五个状态，标注上对应的按钮填充色、边框色、圆角值、按钮宽度和高度，按钮文本大小、颜色值；如果是图标按钮的话，除了上述参数值以外，还需要标注 icon 和按钮文本之间的间距，icon 图标的大小。
3.1.5.2 输入框
用于单行信息录入文字上下居中显示，支持键盘录入和剪切板输入文本，对特定格式的文本进行处理：密码隐藏显示、身份证、卡号分段显示，标注宽高。
3.1.5.3 选择
选择可分为单选与多选，并且也有五种不同状态：未选择、已选中、未选悬停、已选失效、未选失效项，规范中需展示出所有效果状态。
3.1.5.4 进度条
用于向用户展示步骤的步数以及当前所处的进程。
3.1.6 缺省页
常用的 UI 组件（Component）：表格、对话框、提示条、气泡提示、日期选择器、多级选择器、标签输入框、组合框、上传等。
如果UI忽略规范，前端在不知道有可复用组件的情况下，很可能每一次都要手动书写代码；写的代码越多，遗漏掉细节和犯错的可能性越大，导致效率降低。
最关键的是——对于今后的迭代，前端又得一个页面一个页面修改。
3.2.1 组件的好处
统一性：
高效性：
延续性：
3.2.2 组件化的特点
3.2.3 组件化分类
我们根据当下现有的业务场景和对往后一段时期的业务发展方向进行规划，将组件库的组件类型分为通用组件和业务组件；一般业务组件库是不对外的，所以在Ant Design官网只能看到通用组件部分。
3.2.3.1 通用组件
指适用范围广，扩大频次高，可重复使用多个业务且不包含业务逻辑。某些导航栏，按钮，吐司，弹窗等。我们将通用组件细分为五个子类别：基础组件，导航，数据录入，数据展示，操作反馈。
2.3.2 业务组件
这类组件对比通用组件而言最大的特点就是包含了一系列业务属性，跟产品功能有重叠的关联性，因此影响到适用范围可能仅限于于1〜2个业务系统或特殊场景，且复使用频次不高。毕竟使用场景特殊也有限，放出参考意义不大。
2.3.3 组件化搭建流程场景
组件化的搭建在两种场景下进行：
1）产品立项前就开始组件化，在产品0到1之前，拥有一套组件和设计规范。设计师可以从以前项目的组件库和设计规范直接套用并修改，这样项目前期设计做起来更加方便且省时省力少挖坑。
2）产品经历过0到1后，产品趋于成熟，这个时候开始做组件化。组件化搭建最多会有六个步骤，分别为：梳理类目、场景走查、问题分析、方案设计、生成插件库、验证开发。
具体的组件化设计升级流程我总结成了下图：
当团队搭建完成组件化之后，接下来就是成员间的使用，这一过程有业务需求产生组件模板、组件模版形成页面、页面形成页面流程和页面流程形成用户体验。
组件库重建之初无法一应俱全，是需要后续设计师不断的维护与迭代的。
关于设计输出，现在很多像蓝湖、zeplin、Pxcooker这种标注软件把设计师从手动标注解救出来，往往把视觉稿在蓝湖一扔就完事，前端开发完界面视觉还原度还是不高。
因为标注软件只能负责生成元素的尺寸、样式，遇到复杂样式即使你反复衡量的一些像素，开发还是会漏掉——这样很有可能出现视觉灾难。
所以，一些复杂而又关键的页面我建议可以贴心的做些手动标注，主动告诉开发重要性和注意点。
我们现在工作中会有两种标注情景：
3.3.1 运营标注
因为很多数据是后台传输到前端，有图片、有文字，每个内容都需要给运营设置一个上传标准。
3.3.2 开发标注
开发标注是从设计稿落地成代码的主要参考，除了蓝湖提供的标注，我们还需要写一些重要部分设计说明，例如：模块区分、局部特殊设计（该内容根据自身产品而确定）。
3.3.2.1 常规手动标注
3.3.2.2 特殊模块/页面划分说明
复杂的表单设计，是很具有代表性的复杂页面，根据页面的布局进行原型化示例，帮助前端更好的搭建代码框架。
关于切图，切图之前应跟开发确定好输出的格式和尺寸，确定应该用 SVG，一倍图或是两倍图，SVG体量小渲染质量好，单色使时还能替换颜色；PNG则通常用在实景图，一倍图和二倍图则根据实际需要进行输出。
如果要做分层动画，那我们就涉及到分层切图，如果桌面端和手机端样式差别较大，那我们需要和开发沟通好如何实现，是否需要特殊切图；所有的特殊切图合特殊样式，我们都应该提前跟开发沟通好。
设计-开发这个环节的协作质量对视觉还原起着决定性的重要影响；但是，由于本身的工作性质，我们和开发之间沟通是个棘手又麻烦的历史遗留难题；设计师与开发鸡同鸭讲从而导致视觉还原度低下的局面，几乎每天都在上演。
俗话说“知己知彼百战百胜”，如果设计师能够了解一些基本的开发术语以及开发流程，就可以更好的打破沟通隔阂。
那网页设计稿的实现具体是怎样操作的呢？
步骤可以概括如下：
3.5.1 设计师的要了解的「盒子模型」
3.5.1.1 什么是盒子模型
在开发的工作流当中反复提到的盒子模型。虽然不需要完全了解前端是怎么通过代码来落地你的设计稿的，但你一定要知道什么是「盒子模型」。
「盒子模型」是前端的基础知识，在「盒子模型」理论中，页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间。
一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构，二是理解多个盒子之间的相互关系。
3.5.1.2 盒子模型的组成
每个元素都看成一个盒子，盒子模型是由 content（内容）、padding（内边距）、margin（外边距）和 border（边框）这 4 个属性组成的；此外，在盒子模型中，还有宽度 width 和高度 height 两大辅助性属性。
举一个真实界面示例，我们在浏览器中打开「开发者模式」可以看到网页的样式代码以及当前界面是如何通过「盒子模型」来布局的。
前端并不能简单的像UI画图时一样，随意地拖放一个可见元素到某一个位置；他们要通过把每一个元素装进一个「盒子」中，再去界面中定位它所处的位置。
3.5.1.3 了解盒子模型对于UI的好处
当你摸清了前端是如何布局实现你的设计稿后，你在作图的过程中就会开始懂得站在落地的角度思考问题，善用「盒子」，将界面中每一块布局「盒子化」。
我举一个示例，如果我们不使用「盒子」，当我们在做一个卡片时，前端并不知道UI是如何定义每一个元素的间距；比如，然后将这一个间距套用在他也不知道应该设置为多高的「盒子」当中。
所以UI在出稿时就带入「盒子模型」思维，合理地构思好每一块元素的布局，一方面可以帮助自己在输出页面时，布局更加合理；另一方面可以在前端落地时辅助前端准确还原。
优秀的设计离不开开发人员的落地支持，作为设计师，协同开发人员完成设计落地也是工作中重要的一环。
做好以下几点，站在开发人员的角度为他们“多想一步”，高质量的设计还原指日可待。
在进行设计还原的时候我更希望大家把设计评审的环节重视起来，之前也有详细的讲到过《如何进行设计评审》的，因为我认为评审对于设计还原的意义是把问题前置化。
通过设计评审可以把改版视觉变化最大的地方和开发说明清楚，这些改版布局框架改变都会增加开发工作量；这个环节把握好了，那基本都能实现出来，特殊情况除外，比如前期忽略了一些后台数据的问题。
有些细微的地方需要我们特别像开发说明，也加深他们的印象，在实现时候就减少出错；像开发走读的时候，只把关键核心点，规则讲清楚；我们前面每走一步，都是为了后面我们检视还原度的时候要轻松一些，开发也轻松一些，就比如前期基础没打好，后面深入很难。
设计师做好会议记录（记录问题及解决方案，以及达成的共识），并且在会议结束后以邮件形式发送前端们，抄送产品和运营，确保会议内容的传达到位；让设计师与前端工程师相关问题达成一致，提升工作效率。
在开发紧张环节中，即使我们前面所有工作都准备好了，也很难避免开发不找我沟通；这时候我们要积极回应他们，并且和他们一起处理问题。
比如某些难度大一点的页面，开发实现效果和设计稿差异不小；那么这时候，开发会截一张他们实现的效果图给你看，这时你就要仔细去找问题，不要一口咬定就是开发的原因；先沟通具体原因，然后找出解决办法，如果是标注出现问题，比如标注标死了，页面不灵活，适配局限性很大。
在视觉走查的时候我们可以把test环境下的页面和设计稿拿出来对比，走查头部、尾部等位置是否完整统一，按钮样式、反馈状态、报错等样式是否统一；是否有缺少的场景和状态，根据任务流程对场景和状态进行排查，保证设计的完整性。
这里给大家推荐两个视觉走查方法：
1）大家来找茬法
验收的时候，我们需要把开发实现后的效果截图，然后再去和设计稿做对比。
我们可以直接把截图放在设计图上方，降低透明度，大致比对下，就知道哪里不太对，然后再具体标注需要修改地方的参数。
2）页面重构走查
走查还原的时候，在Chrome浏览器的空白处右键点击检查，找到里面的Computed窗口，我们可以找到具体的文字、间距、投影等属性。
有时候一些比较细微的调整，我们可以双击具体的数值进行调整，调整到自己满意之后再给到具体的数值给开发；这样就不用在我们摇摆不定的情况下，造成双方的困扰
4.3.1 确保可用性
设计任务流程，进行设计走查，在移动App端，我们所设计的应用是建立在手指点击操作的基础上进行使用的。
我们的手指不像鼠标一样能够精确定位和响应，所以我们需要在设计的过程中确保可点击的区域能够较为明显的识别。
4.3.2 确保易读性
文本内容是大部分产品的重要组成部分，所以文本的排版是非常重要的（很多人说中文排版不好看，那是因为你不会用中文排版的方式去做排版）；确保文字清晰、易阅读是在文字处理上的必须保证的。
在众多设计原理中，格式塔原理一直被广泛应用，它可以很好的梳理界面信息结构、层级关系，从而提升设计的可读性；在自查过程中，我们可以通过格式塔原理检验页面中的元素是否符合标准。
4.3.3 反馈机制
当用户和产品需要交互时，会使用不同的模式反馈信息或结果，为用户在各个阶段提供必要、积极、及时的反馈，避免过度反馈，以免带来不必要的打扰。
常见的三种反馈信息如下，大家可以在此基础上自查是否有反馈、反馈是否传达清晰，是否对用户有即时的响应等细节
4.3.4 动效还原
动效这块是产品中比较高规格的一个存在，所以在使用的过程中一定要谨慎，不能随意加入多余的动效，导致在使用产品的过程中出现问题。
在我走查的经验多了以后，发现 最容易造成落地页面与设计稿视觉差异的，其实就是颜色与间距还有图标的视觉错觉。不要小看这两个细节元素，把控不好它们会让落地页面效果大打折扣。所以在进行页面还原的可以着重对比一下几点:
4.4.1 分割线
在验收的时候要特别注意分割线的问题，分割线是在所有屏幕上都是1px，但是很多程序员没有注意这个，或者说设计师在开发前没有特别说明；程序员就写成了1pt，因为pt是1x下的单位，px是实际单位。
所以在做分割线的是，单位需要是「px」，这样才能保证每个屏幕的分割线都是1像素。
下面主要以3个主要场景来分点解释分割线的标注：
4.4.2 投影
阴影作为一个重要的视觉元素，让主元素和其他元素从背景中“弹出”并拥有深度，更好地将信息层级呈现给用户。
常规投影与弥散阴影推荐使用css代码完美实现；特殊情况下还需提前与开发人员沟通权衡各种方式的利弊，选择适合项目产品的实现方式。
结合自己实际的工作经验和与开发人员沟通的心得，实现弥散投影的方法，可以通过两个方法实现：
1）切图对接开发人员
虽然切图可以解决这个问题，但是切图也有一些弊端，因为每个卡片都使用切图的话，会使开发的包变大，可能会出现加载慢、闪退等情况，这些体验也是很糟糕了；所以在这个过程中的一些问题务必要提前与开发人员及项目人员沟通好。
2）CSS代码实现
常规情况下，效果都比较好，但是也会遇到一些遇到异常情况，比如不规则形状，通常用代码也比较复杂，这个时候需要提前与开发人员沟通切图情况，避免后期一些问题。
在做设计的过程中，我们需要更好地理解下游的工作，达到一个高效的沟通。
不管是哪一种方法，没有对错之分，关键是要懂得“权衡利弊”，提前与开发人员沟通到位；只要是适合自己公司项目且能够高效还原设计稿的方法，都是值得一用的。
4.4.3 文字行高
文本间距也是影响落地效果的关键因素之一，文本间距指的是——纯文本与其他元素之间的间距。
UI出稿时应该注意 文本行高可能导致前端的测量误差，文本间距主要的原因是 sketch 与 ios 系统中字体的行高不同；最简单的解决方法是通过手动调整 sketch 中字体的行高，业界常用的行高是字体 size 的1.2或者1.4倍，实际这两个值都是够不准确的。
首先我们要理解什么是行高（line-height）。
我以 Sketch 为例，当我们设置了一个70px的文本，Sketch 会默认给我们设置文本为98px行高，文本的上下会包含一定的空白像素。
如果UI不设定行高规范，落地过程中就会出现以下问题：
行高的解决办法：
面对行高的问题，我一般会在设计的过程中，输出规范行高（可以是x倍行高，也可以是具体的行高值，如28px的多行文本行高为40px），和前端进行对接落地。
最简单的解决方法是通过手动调整 sketch 中字体的行高，业界常用的行高是字体 size 的1.2或者1.4倍，实际这两个值都是够不准确的。
最近看到了一个新的公式可以同步开发根据字号设置行高。
设字号为x，行高=x+2ceil（x/10），ceil（）的意思是向上取整数 L（行高） 比如：12 + 2 * ceil(12/10) = 16。
注意这里适用于单行行高，由于多行涉及到的排版问题不仅仅是行高带来的，有机会的话可以单独聊一下。
推荐DoraemonKit 是一个功能平台，能够让每一个 App 快速接入一些常用的或者你没有实现的一些辅助开发工具、测试效率工具、视觉辅助工具；而且能够完美在 Doraemon 面板中接入你已经实现的与业务紧密耦合的一些非通有的辅助工具；并搭配滴滴的dokit平台，让功能得到延伸，接入方便，便于扩展。
4.4.4 视觉重心修正
在设计上为了保证界面的视觉平衡，往往不是设计软件直接精准对齐，我们总是会通过调整间距、大小或者角度补齐一些负空间，让画面保持视觉平衡。
还有设计中通常向右箭头来表示模块入口，当我们把箭头和文字右对齐，箭头视觉上会更外突；这时候我们会往里面缩进1至2像素，但是切图完给完全不知情的前端后，设计师要主动讲解一下，或者写进规范里。
项目会有些需要展示logo的地方， 有的圆形、有的长方形、有的纯文字，尺寸差距比较悬殊。
这种情况下，我们需要给他限制一个高度，在这个高度以内，再根据logo本身的体量来调整图形的大小，处理好logo的视觉平衡。
特殊场景在设计过程中常常会被忽略，等到在现实中碰到才会意识到缺失异常状态会非常尴尬，所以大家在完成主流程设计后，一定也要考虑到特殊场景。
大家可以参照以下几种场景对设计进行自查优化调整：
1）网络异常
考虑到网络异常情况时，通常产品会通过异常状态页面或者交互反馈来告知用户当前的异常状态和如何解决问题（解决方案引导、刷新、toast）。
2）服务器异常
服务器异常状况较少出现，时间也较短，通常不提示具体原因，设计处理方式为在新页面展示缺省页，文案+插画的形式给予用户提示及重试引导。
3）空状态
空状态指的是页面中无内容，主要的几个情况，设计师需要根据不同的场景给出文案+插画的表现形式引导用户：
4）内容缺失
内容缺失展示效果的考虑，设定页面图片缺失的占位图。
5）加载页面的表达方
考虑网络加载或者数据加载的时候会等待几秒钟，通常产品会有一个简单页面的占位图形式来减轻用户在等待时的焦虑感；可以是loading，也可以是整体页面的刷新动效。
设计还原的时候最后还还看一下不同机型适配的问题。保证不同机型的界面呈现效果一致。
4.6.1 动态眼光
手机适配的时候很多设计师会遇到一个问题，就是在750*1335的屏幕上做的设计图；但是适配到640*1136的屏幕上就有元素放不下，所以设计师在出图时需要用动态的眼光去考虑问题。
知识点：在简单的界面中，由于本身界面的内容比较少，确定位置就会比较难，因为要考虑到不同的界面内容要怎么放才能保持视觉统一；这个时候可以先将界面中的信息分成不同的几个部分，先保证每个部分内的固定内容，再确定自适应的内容。
4.6.2 固定适配内容
在简单的界面中，由于本身界面的内容比较少，确定位置就会比较难，因为要考虑到不同的界面内容要怎么放才能保持视觉统一；这个时候可以先将界面中的信息分成不同的几个部分，先保证每个部分内的固定内容，再确定自适应的内容。
4.6.2.1 图标或按钮
4.6.2.2 搜索框
4.6.2.3 Y轴间距
一般来说，Y轴的间如果在相近的组件里，都会是固定的，不会有变化。
4.6.2.4 图片
像这种图片的列表或者，十字纵横的头像或文字，大小都是固定的，变得会是间距或者数量，如下图所示：
对于比较复杂的模块，快速找到将以上所说的固定因素和自适应因素，除了能够让标注效率大大提高之外，还能够找到合适的适配方法，避免出现开发完成后才发现某机型适配效果不理想的情况。
4.6.3 自适配内容
自适配内容也给大家梳理出来。
4.6.3.1 文字弹性适配
文字流指在多行文字的情况下，文字数量变化会影像页面布局和元素大小，如下图所示：
文字弹性适配一般涉及的是宽度适配，宽度适配普遍使用的是间距适配，即定好左右页边距，中间弹性拉伸。
当文字左右两边有内容的时候，我们需要标明文字可显示的范围，也就是说它最多能显示几个字——这种方式可以做到较好的适配，也是做快速常用的适配方法。
4.6.3.2 banner
这里说的图片是指banner或者feed流里的图片，适配的方法大多都是自适应，界面中的元素间距和数量不变，元素尺寸进行等比缩放，比较适用于固定比例；但尺寸随屏幕宽度变化的元素，如下图所示：
对于比较复杂的模块，快速找到将以上所说的固定因素和自适应因素，除了能够让标注效率大大提高之外，还能够找到合适的适配方法，避免出现开发完成后才发现某机型适配效果不理想的情况。
假设视觉还原上真的出了问题，首先要寻找原因，是自己没做到位？还是对方没理解你的想法？
我感觉可以按照以下几个方法去做：
设计团队内部先弄明白改版的意义，画好标注色值、像素的示意图和文档，做好产品原型等任何能让对方不需纠结，直接可以上手的工作。
做好前期的准备工作，尽可能的多做思考，完善设计稿；尤其是边界情况，把自己的问题留给自己，这样可能产生的设计还原问题就会大幅减少。
多向开发同学请教，即便遇到技术确实难以实现的情况，不要逃避或者过于固执，了解具体原因，不断累积自己的技术知识；自己的专业、努力是赢得程序员尊重的前提，赢得他们的尊重你才能顺利开展工作。
这是一个比较复杂而且需要长期努力的话题，每个公司都会有其实际情况存在，团队越大，情况越复杂。
设计师团队或者个人的话语权如果很弱，确实会面对十分被动的处境；首先需要说明的是，话语权是赢得的，而不是赋予的；想要改善被动的局面，要认清所处的环境，问题的症结，调整定位，并付出努力；只有证明了设计确实能够解决问题，甚至驱动商业价值，才会逐步提升话语权。
完成一项任务时最重要的是团队的思维模式是否统一，设计师在乎用户体验，工程师只在乎开发成本，那问题没办法达成一致是很正常的。
想要让大家认同你的看法，就要在平常不断的潜移默化影响别人；比如没事多跟公司其他人聊产品、聊体验、聊感受，慢慢给他们灌输体验的重要性。
只要你的话题有趣，人有趣，没有人会拒绝跟你聊；时间长了，整个团队的思路就会有所转变。
设计师自己可以先按优先级去排布还原顺序，看这1像素是否对当前产品重要性。
在搞清楚产品进度、优先级的情况下，记录所有还原问题，自己标记优先级，整理完毕后一次性给他，再跟程序员解决方案和时间；也可以与开发同学共同摸索一套双方都能接受的清单模式，标明问题，修改建议，重要层级，根据实际情况详细说明或者简要说明，能够当面沟通更佳。
良好的团队合作氛围是有效的润滑剂；好的合作关系如同一条战壕里的战友，哪怕多年后回想起来，也应该是一起冲锋陷阵的光辉岁月。
设计师应该认识到自己在整个项目流程中的位置，不卑不亢，把麻烦留给自己，不要推卸责任或者互相推诿，逐步打造自己的声誉和气场。
一个优质的项目落地是各部门协同合作的成果，就像我们玩游戏，后期高质量的输出也需要前期优秀的辅助来打铺垫。
在“协同作战”的基础上，灵活运用规范、标注和走查的方法来主动推动项目的进行；不仅可以让设计稿得到最大程度的还原，也可以提升我们协作能力和对环节的把控能力。
任何问题只要多交流，会避免很多阻塞情况；出于设计师的角度当然都希望每一张视觉稿得到100%的还原；因为用户只看你上线效果，但是往往排期紧张需要一些取舍，我希望能在有限的时间内做到最好。
在后期视觉验收的时候，我们可以换位思考，把自己当做程序员，站在他们的角度去思考问题；怎么样的验收方式会更方便开发修改，减少重复返工的次数，情愿验收标注的时候多花10分钟，也要把修改意见写详细，帮开发节省时间，反过来也帮我们自己减少了二次验收的成本。
文章来源：人人都是产品经理 作者：郝小七
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
文章来源：tob.design 作者：三鱼先生
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
偶然间发现了一本3年前买入的书《侘（cha第四声）寂》，心里打着哪怕是看上10分钟至少也是没荒废这个假期的念头，读了起来；
那么关于“侘寂”，虽然认识不深，但又有一些个小想法，借着假期的余温跟大家唠上一唠：
百度上对侘寂的解释是：侘寂是现代文学翻译上的一个误解，侘び（WABI）与寂び(SABI)。国人将其整理为侘寂一词。日本美学家冈仓天心的著书《茶之本 Book of tea》把侘び的翻译成“Imperfect”所指的应是侘び美学中，外表的残缺…还有人说“侘寂”是一种思想，一种美学，一种世界观。
我觉得吧，说的太深了不好理解，甚至有点啰嗦了，我尝试着概括了一下，基于在下有限的语言能力大概是这个样子：
虽然解释中有提到残缺之美，但在我认知里侘寂还真没有什么残缺的感觉，特别是以无印良品为代表的日式自然风格，他们对过于装饰嗤之以鼻，钟情于“不虚张声势，却历久弥坚“的设计；我试图去按照自己的意思揣摩无印良品的设计哲学，结合名词本身，再次总结了一下：侘寂美学不会执着营造表象，取而代之的是尽量流露事物本质，不会随着时间的推移而丧失所谓的“新鲜感”；所以回过头来再看无印良品的设计（不管是平面还是产品），大差不差，我们都会感慨道：真 tm 耐看啊！！！
嗯，结合上文，关于“侘寂”这个词，我觉着大概也就是这么个意思了。
侘寂是 无印良品 / 宜家家居 等产品设计哲学的灵感之源，也是侘寂理念的追随者。但最大牌的死忠粉就不得不提乔布斯和他的苹果了，老乔本人对日本美学的热爱超越任何人，深受日本侘寂美学影响，也因此成就了苹果手机极简风格的设计（说个后话，这种简约是建立在内在高品质和对细节追求的基础之上的，一定程度上对侘寂轻度的人为干预）。
插个题外话，仔细琢磨一下，不难发现 20 世纪中后期，从包豪斯的第三任校长密斯凡德罗到博朗的迪特·拉姆斯和苹果的设计不约而同的在表达类似“少即是多”的设计理念；这种大一统的现象很奇妙，一定程度上结束了工艺美术和装饰艺术对设计界的统治，这既是开始，也为设计风格的轮回做着准备。
回归下主题，国际知名品牌的设计风格被分析得透透的了，我也不赘述了，主要说国内的深受影响的产品。在我的印象里，oppo 的 color OS 算是其一，特别是当年 color OS 6“无边有界”的概念让人着实兴奋一把：
坦诚的讲，以侘寂为核心出发的产品在我们的生活中并不少见，他们以突出内容为主，没有其他什么过度的装饰；前有 Instagram，Evernote，也有最近大火的 clubhouse；
从产品理念上讲他们注重对主线功能的强调，对诱导性功能不太在乎；再聚焦到用户界面上来讲，他们认为保持最舒适的屏效要比塞满每一个像素更重要；哈，那么问题来了，国内的产品（特别是巨型体量的产品）都不约而同的对屏效有着深深的执念，导致他们看起来难受的一比。这次我们先聊聊屏效：
1. 屏效的取舍
屏效这个词是“坪效”的演变，后者可以理解成实体店铺每平米的营业额，是一个经营效益的指标。所以类比下来，手机屏幕也可以这样计算，就简单理解成 “每一像素可以带来多少商业效益” 就行了。
理论上来讲，一般用户最有用的浏览区域为手机前 3 屏，如果更严格点来说是前 2 屏，按这个思路的话，咱大概就能得这么个结论：每一屏里给用户看到更多的东西，那么收益（浏览量/点击率什么的）也会成正比，所以这个结论就一直被传承下去了。但…如果不是抖音的出现，那么怕是我现在还对以上结论深信不疑：
哎，不是说单屏内展示的越多越牛 X 么，为什么抖音这一屏一个的做法立刻风靡了全球，甚至还把快手这个老对手拉上了这条新体验的船。带着这个疑问，试图刨根问底，追溯源头，冷静分析下了当前的现状：这大概是形式影响商业价值的一个绝妙的 case 了。先看以前，从互联网产品诞生以来，feed 流的广告形式大概也就是这两种了：
传统的 banner 理论上就是“CPM”，是一种展示付费广告，根据曝光次数收费，这种形式太多见，我们常用的饿了么 / 美团外卖的顶部 banner 都是这样；CPC 不用过多解释，就是点了广告主就给钱的那种，在今日头条刷新闻的时候经常可以看到，还有公众号的底部广告也是这样的原理。再看看抖音的设计：
抖音的 GD 单页广告的形式基本上是集各种模式的优点于一身，既有品牌曝光（CPM），也有点击（CPC），甚至还有按时长收费的 CPT 整合进来。我猜测创造这种形式的设计师本身也对美学和商业有深刻的理解，不得不说既保证了体验又提升了商业价值，美的不可方物啊～所以说，通过这个例子也许你会发现，屏效和商业价值并不是“是非题”，更像“多选题”，我们总是对所谓的习惯报以崇高的敬意，但事实上这折射出了人的“奴性”，通常我们认为对的事情也仅仅是习以为常罢了。
话说回来，例子虽然生动且具备说服力，但我猜想你应该跟我一样，未必有机会去做这么颠覆性的设计（即使有机会也未必有胆量哈哈哈哈哈），我试着找了几个例子希望能够帮助你在设计上可以 balance 屏效和商业价值：
最后再给大家分享个压箱底的小技巧，也是之前看到知乎的广告突然间被启发到的：
当然，以上的例子是尽可能的通过屏效来平衡美学和商业之间的关系，总的来说，侘寂这种理念在我国互联网注重运营的土壤上不是那么的好生长，大家尽力就好～
上点小福利
尽管我一直坚持输出设计观点，但我发现好多朋友练就了 “一看就会，一用就废” 的日常技能，所以还是准备了一些经过我严选的模版和素材送给铁子们，希望铁子们在学会理论的同时也能手活跟上，眼高手低不可取，眼手双高真牛 B！
侘寂之美是许多当代设计师所追求的境界，但互联网貌似就是一滩死肥，无论你怎么施肥，也未必能开花结果，各种方案也会相应的受到各种挑战，说白了这种以美学驱动创新本就抽象不可具象，甚至又一些玄学夹杂其中。假如你也希望能够借势突破，不妨以美学为指导思想，以商业价值为突击点去尝试方案的可能性，或许这样说服力才有可能被大幅提升。
文章来源：优设 作者：负能量补给站
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
中控系统
转自：站酷
作者：LH丕
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
关于按钮的一些知识和我的一些观点分享给大家。
按钮是最常用的组件之一，有很多小伙伴并没有很全面的认识这个组件，今天我把关于按钮的一些知识和我的一些观点分享给大家。
一 按钮的作用
在使用按钮之前，你要了解什么是按钮，按钮的作用是什么，什么时候该用按钮。
1）什么是按钮
按钮用于触发一个及时操作。
2）有什么作用
2.1 功能操作
比较常见的是：展开收起、加减、下拉等。这种情况下以功能性为主，按钮的形式适当弱化，重点强调功能，突出主体信息。
2.2 指引用户下一步操作
这个是最常见的使用场景，每个可交互页面上都有这类按钮的出现，用来指引用户下一步该怎么做。比如：创建、保存...
2.3 培养用户习惯
当用户知悉某个按钮能指向某个操作，或者获取某类信息后，长此以往用户就会形成使用习惯。如果某操作能够为用户持续带来价值，那就可以在按钮的位置让它更醒目，持续培养用户点击习惯。
二 按钮有哪些类型
· 主按钮：用于主动行动点，一个操作区域内只有且只能有一个主按钮；
· 默认按钮：用户内有主次之分的一组行动点；
· 虚线按钮：常用于【添加】操作；
· 文本按钮：用于次级的行动点；
· 链接按钮：用于作为外链的行动点。
三 按钮的状态
1）交互状态
1.1 Normal 正常状态
此状态为按钮的正常显示状态，就是按钮在也页面中的常规状态。
1.2 Hover 悬浮状态
此状态为按钮的悬浮状态，当鼠标滑过时候的状态会给用户一个交互反馈，因为它只是一个视觉上的反馈并无实际作用，所以在移动端就把此状态去掉了。
此状态的效果并没有具体的规则，具体按产品风格来定。这里我给一个参考效果，但并不是唯一效果，如果不合适，可以酌情更改。
1.3 Click 点击状态
此状态为按钮的鼠标 / 手指按钮状态，操作完此状态后，就会引发此按钮的真实作用。
同时，此状态的效果也没有具体的规则，具体按产品风格来定。这里我给一个参考效果，但并不是唯一效果，如果不合适，可以酌情更改。
1.4 Disable 禁用状态
此状态为按钮的不可操作状态。
当页面中有未完成的任务或页面中有错误导致不可提交页面时，按钮会处于 Disable 状态。这个状态在产品中也是很常用的，而且这种情况下应该引导用户去做其他操作，所以此按钮在视觉上一定要弱于其他。所以要制定一个通用的展示方案。
一般方案有两种：
· 无论按钮本身颜色是什么，它的背景色均为纯灰色，常用的色值有：#CCC、#999等，此种方案为常用方案；
· Disable 状态为 Normal 状态的 30% 透明度，如果你想让按钮都有颜色倾向的话，可以用这种方案。
2）状态属性
· 常规：常规样式的按钮，主操作按钮；
· 危险按钮：删除/移动/修改权限等危险操作，一般需要二次确认；
· 幽灵按钮：用于背景色比较复杂的地方，常用在首页/产品页等展示场景；
· 加载：用于异步操作等待反馈的时候，可以避免多次提交。
四 按钮的使用方法 / 禁忌
1）一个操作区有且只有一个主按钮
一个操作区有且只有一个主按钮去引导用户操作，如有有多个或没有则会影响用户的判断。尽可能少的让用户去做选择，产品的终极目标应该是“傻瓜式”产品，不要让用户有学习成本。
2）圆角值
根据产品风格，三种圆角值的设定：
2.1 圆角值为 0
这种适合用在比较严谨 / 企业级产品中，比如：阿里云；
2.2 小圆角值
这种是最常用的形式，在不失严谨的同时还有一些细节，如果可以的话，尽量选这种的；
2.3 超大圆角值
这种一般需要有独特的产品风格才可使用。样式不好把控全局效果，所以使用频率较低，慎重使用。
较大圆角值，此类千万不要用，不要问，问就是太丑。
3）精简文字
按钮里面的文字一定是精简的，不要展示过多文字，更不要折行。
4）文字与按钮比例要适中
文字与按钮的比例要适中，文字不要太大或太小，都会影响视觉展示。
5）弥散阴影
如果你想要用弥散阴影，阴影的颜色尽量用带按钮本身颜色倾向的，这样会让按钮更有呼吸感。需要注意的是：只有主按钮才能用阴影，其他级别的不要用，不然识别度会变差，并且会让按钮的体验变得很差。
6）主次操作按钮样式统一
主次操作按钮样式要统一，不要滥用样式。
7）按钮样式与其他组件要有区别
实际使用中，按钮样式不要与其他组件样式混用，避免让用户产生误解，做一些不必要的操作和思考。
8）不同场景适配
现在暗黑模式也是常用的场景了，所以黑/白场景下都要考虑到识别度的问题。
9）主次按钮的位置
主次按钮左右的问题，也常常出现在设计讨论会中，这次我直接放个结论吧，以后不要再为这件事吵架了。
在提交页面、弹窗中，主按钮在右；在其他常规页面上，酌情考虑。
五 按钮尺寸
按钮尺寸具体用多大的，这里我总结了一个规范（仅代表个人意见）。
· 高 = 文字行高 + Xn，X=自然数，n=4
· 宽 = 文字宽度 + Xn，X=自然数，n=4
在其他地方也可以用类似的公式去做规范，比如卡片的间距，你可以设置 n 为基础值，在此基础上用 Xn 去选取合适的值。
注意：常用的字号为 12px、14px，尽量不要用太大的字号在按钮上。
小结
按钮只是众多组件中的其中一个，也是最常用的组件之一。对于设计师来说，无论大小组件，我们都要精益求精的去思考，只有把每一个细节做好了，才能做好产品。日积月累的把每一个知识点掌握了，我们也就成长了。
文章来源：优设网 作者：友设青年
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
