如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
响应式已经成为网页设计的主流，目前已很多网站能兼容手机端 ，但是唯有 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
常见的页面跳转方式有直接跳转、左右跳转、上下跳转等，再设计时需要考虑好其中的关联性，给出最符合用户心理预期的过渡方式，从而做出最合适的设计。
页面跳转在APP中属于最常见，也是最基础的一个交互细节点。
我们常见的跳转方式：直接跳转、左右跳转、上下跳转、翻转、联动；其它酷炫的效果我们看过很多，但是现实中能做到的又有几个呢？
首先我们看一下，我们的视觉顺序「阅读顺序」是：左→右，上→下。因此延伸出目前APP最常见的两种页面跳转方式：左右跳转，上下跳转。
最原始、最简单的跳转方式，web端常见，在APP中出现较少，标签切换常见，这个比较简单，没什么讲的。
常用于快速开发，Android中常用。
实现难度：无；
维护成本：无。
最常见的跳转方式。（ios原生效果）
实现难度：简单 ；
维护成本：低；
运用场景：夫级→子级→子子级，依次类推。
常用场景：
这里有个细节要注意，就是我们的返回键在左上角，也就养成了用户一种习惯，左上角的键，与点击之后的效果，往往就应该是页面从右侧退出的样子，与进入时反向的效果。
这也是为什么大部分APP不会把入口按钮放在左上角的原因。
那么左上角这个位置，除了给返回键当做固有的位置外。还常常用于抽屉式导航，因为抽屉式导航的方向，与返回时的移动方向是一致的。常见抽屉式导航APP如：滴滴打车、摩拜单车等。
相对于左右跳转，上下跳转就比较难理解了。
实现难度：简单 ；
维护成本：低。
这种跳转方式也很常见，但是大部分人不清楚什么时候用，这里我们简单分析下。
运用场景：
1. 对当前页面创建新的条目时；
2. 独立启动的一个子内容。（如小程序：微信/支付宝等）
比如我们在微信聊天页，发起一个聊天的时候：
还有我们新添加群人员时，新建笔记本时，新建地址时等。
我们用微信聊天页面在举例：点击＋号离的内容时：图片、拍照、位置、红包、收藏等，都是采用下到上的方式呈现，因为这些创建都是对当前聊天窗口一次性产生内容。（大家可以去感受一下这些细节）
下面我们看下百度的设置>地址管理>添加地址：左右>左右>上下。
实现难度：中等；
维护成本：低；
运用场景：完全切换内容，换到一个全新的内容集合里。
常见的有平安好医生中间的按钮，一级大姨妈APP中间的商城。
实现难度：高 ；
维护成本：高；
运用场景：元素之间从上级到下级关联性强。
如APP store 每日推荐到介绍页。类似的还有Behance APP的作品展示。国内APP很少有这种联动效果，因为一旦页面结构改变，整个效果基本无法复用。
类似于这种强联动，我们会在很多概念设计稿中看到，但是在实际的APP是很少见到的。因为开发成本/维护成本都很高。
这里强调一下搜索页面。搜索页面的进入往往有两种形式。一直是icon做入口，另一种是搜索框做入口。
icon做入口：更像是上下级关系，常用左右跳转来实现。比如：抖音。
搜索框做入口：点击就给与获取光标的感知，所已做好做简单的联动过渡效果。比如：微信、云音乐。
关于其它方式，基本上只有极个别的APP中可以看到。
其它的方式，要结合实际的情况来考究。一定要注意关联性。比如微信新出的浮动展开效果，因为元素要浮动，为了更加贴合所以有了收缩的效果。
形式上其实就是上下左右内外。考虑好之间的关联性，给出最符合用户心理预期的过渡方式，就可以帮助我们找到最合适的设计。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
表单作为平台与用户联系最为紧密的一环，也是影响商业交易成功与否的重要分水岭。良好的表单设计可以给用户提供流畅自然的交易体验，保证用户购物情绪的正向增长，而混乱无序的表单则引起用户的负面情绪，影响甚至阻碍用户交易的完成，降低用户的品牌好感度和信赖度。
那么在设计过程中，需要怎样规避风险，提升表单页面的产品体验呢？下面我们将结合实际案例，从七个方面介绍表单设计中的常见注意事项。当然，这些规则都是在表单设计中的一般准则，每条准则都有例外。
01 | 单列浏览
表单承载的主要功能是向用户清楚地传达信息，保持有秩序的单列表单形式更利于用户浏览动线，它能帮助用户识别并填写内容，而多列的表单形式则会破坏用户填写规律，影响效率。
02 | 竖向排列
在表单中有多个选项以供用户选择时，将每个选项以竖向的排列方式位于每个选项下方时，更利于用户阅读浏览的习惯。
03 | 操作一致
表单填写过程中我们应当避免在整流程中出现按钮样式、颜色的变化。需要用户确认的操作行为的一致能有效减少用户在行动时的困惑和犹豫，确保用户在表单填写过程中的流畅体验，从而实现最终商业上的交易成就。
04 | 标题不可取代
虽然通过使用占位符代替标题的方式扩充了表单的填写空间，减少了视觉噪音，但是这种做法并不利于用户的短期记忆。一旦用户触发输入，占位符消失，用户可能会陷入这里该填写什么的迷茫，必须删除所有输入内容后才能再次显示标题，显然，这是违背人性的。
05 | 输入域符合预期
输入域的长度与预期输入的内容成正比，确保输入字段长度符合用户心理预期，并能在表单中能完整呈现。
06 | 不隐藏基础帮助信息
作为一个购物流程中的信息确认和采集环节，需要用户对于购买的产品有明确的认知。因此在设计过程中对于用户填写表单有基础帮助的信息应该做强调或显示设计，避免出现因为隐藏帮助信息导致的客户投诉。
07 | 减少二次确认
基于OTA行业特性，出行表单业务对标电商购买表单业务需要填写的信息更为冗长，层级更为复杂，为了减少用户填写过程中的心理负担，降低填写难度，我们需要对不必要的信息进行删减或合并，为用户信息输入提供便利。
以注册环节为例，在Web设计时往往会有二次确认密码的环节，但在移动端这样的操作会增加用户填写的负担，因此大部分移动端界面上我们不建议对用户的密码信息进行二次确认，转而通过使用明文显示或者优化密码消失交互的方法来改善这一环节的体验。
08 | *号的使用
沿用通用符号习惯，在表单设计中若是对业务必填的信息，我们往往采用 * 号的形式来帮助用户区分信息优先级。但当表单中必填信息多于非必填信息时，大量 * 号的应用反而会给用户认知增加负担，使得无法快速识别哪些是必须填写的，哪些是不必须填写的。因此在表单设计中，当必填项多于非必填项时，隐藏 * 号标记，转而通过暗提示标记非必填项的形式来帮助用户识别。
09 | 暗提示的应用
暗提示作为辅助用户填写表单的主要方式，在设计上，需要尽可能地减少视觉噪音，确保文案言简意赅，表现形式不干扰用户。因此，对比度过深或过浅，色彩过于突出的都不适合用于暗提示的视觉表现。
在交互上，暗提示也并不是一直存在的。当光标触发表单项时，暗提示保持显示，指导用户输入。而当用户输入字段后，暗提示内容隐藏，让用户专注于已填内容。
10 | 设置默认选项
在复杂表单中，对于如证件类型、手机区号、国籍等较为通用的选项，为用户提供默认选择的交互可以有效简化操作步骤，减轻用户填写表单的负担，更快地帮助用户完成表单内容的填写。
11 | 替代输入
对于表单填写过程中可以固化选择的信息，应让用户进行选择操作以代替手动输入，尽可能地让用户减少输入成本。
如：出游人信息采集时，提供添加常用出游人选项可以帮助减少重复填写的负担；证件类型采集时提供证件类型选项可以减少用户困惑，在已有的选项中快速选择；邮箱采集时自动联想显示Email网址可以辅助用户规范文本格式，快速完成表单填写。
12 | 键盘匹配
根据表单填写类型的不同，自动匹配键盘类型。如“中文输入”呼出中文键盘，“姓名（英文）”输入呼出锁定大写的英文键盘，“手机号码”输入呼出数字键盘……免去用户切换键盘操作的步骤。
同时根据填写步骤，合理的定义键盘右下角的功能键，帮助用户实现换行/完成的操作，省去用户收起点开键盘的重复动作和表单上下填写项的切换，让填写表单的过程更为顺畅，用户思考不被打断。
13 | 按钮层级
在用户面对多个按钮的场景选择时，我们应当帮助用户预先区分出主要行动和次要行动，通过视觉语言强调主要按钮，弱化次要按钮，引导用户进行选择。
14 | 二次确认
因移动端特性，用户在填写场景较为不稳定如吃饭途中、行驶途中等，当用户花费精力填写了部分表单信息后，为了防止用户误操作而丢失已填信息的场景，需要在此时进行二次操作确认，确认用户操作意图。当然，如果用户没有对表单进行任何编辑，这样的退出操作是不需要二次确认的。
15 | 多行文本
在复杂表单中，面对填写内容过长的同类表单，用户会在预览时产生输入压力。运用字号、颜色、间距等视觉手段将相似层级的信息进行逻辑分组，帮助用户更好地区分多行文本的信息层级，便于输入。
16 | 号码组合规律
对于一些常用的号码字段，可以采用线下通用的数字组合规律帮助用户阅读和记忆，如电话号码的组合规律为 3 4 4 ，银行卡号的组合规律为 4 4 4 4 3。空格在数字呈现处的应用虽然细微，但是在长数字的阅读场景中仍能给用户带来识别便利。
17 | 选项露出
在网页端表单设计中，用户在表单填写中需要对选项进行选择时，常用的交互形式是在选择器的下拉列表中进行选项的二次点击。而在移动端设计中，触发选择器后的二次点击会增加用户的填写成本。所以在设计时，当选项少于8时，在表单中直接显示所有可选项，当选项超出过多时则在列表浮层中进行选择。
18 | 减少页面跳转
在表单填写中我们期望用户保持专注，尽量避免产生引导用户离开当前页面的填写交互，这种交互跳转很容易打断用户固有的行为轨迹。因此运用浮层、弹窗等交互来完成辅助信息的采集是我们较为推崇的交互形式。
19 | 关联标记
当用户提交表单信息后，如已填写的内容有偏差，需要明确的标记有问题的数据及错误原因，帮助用户找到问题并解决问题。杜绝报错信息描述模糊，信息不关联的报错信息引发用户困惑。
20 | 实时校验
在某些业务场景中，为了帮助用户在提交信息前校正他所填写的内容，避免大面积报错场景的出现。我们可以使用实时校验的方法，在用户输入完成后进行判断及结果反馈，如登陆注册流程的验证码校验就可以运用实时校验的报错方式。
当然需要注意的是，运用实时校验的表单需在用户明确离开此项输入状态时再进行结果反馈，而非在填写过程中进行实时校验，避免出现填写时持续报错的情况。
21 | 密码保护
在输入密码的表单中，部分平台会在密码输入时显示暗文字段以此保护用户隐私，而鉴于前述第七条准则，移动端的密码已简化至只输入一次，暗文的显示会让用户无法确认所输密码信息。因此在需要隐私保护的场景下，我们需要完善密码交互的呈现形式，当输入时，输入位短暂显示为明文，保持1秒或者保持到下一位密码输入后再变成暗文，这样的交互改善可以确保用户在输入中明确内容，也满足了其隐私需求。
22 | 提交反馈
在用户完成整个任务环节时，提供成功或失败的反馈能让用户在枯燥的表单填写后有更强烈的情感反馈。所以在设计时，我们需要提供正向的激励夸赞用户表单填写成功，在表单没有完成时鼓励用户修改内容，重新提交，不可以负面情绪责怪用户。
今年上半年，本着提升途牛产品调性，为内容传达提效的初衷，由途牛UED组织并发起了一次针对现有关键页面升级的项目，在架构升级全量推进初期，我们优先选取了酒店表单业务作为此次设计重构的首选试验点。
表单作为一个偏理性的产品，直接影响着用户决策到产品转化的数据，在此环节，更需要降低用户成本，维持产品决策热情以实现商业价值上的成功。在酒店表单业务改版过程中，除了应用上述七方面的设计准则帮助提升用户体验，我们也结合了酒店现有问题和产品特性进行了更为精细化的设计重构。
整合信息框架
—
体制让步
对用户来说，途牛是一个整体的产品，所有表单的基础体验应该是一致的。以往，基于企业平台的发展，酒店细分的国内酒店和国际酒店两个业务相对独立，虽然同样隶属于下单环节，但是业务迭代进程及侧重方向的不同导致表单前台呈现差异较大。
借助途牛整体关键页面升级的项目，在此次酒店业务重构初期，协同两个业务的产品、设计、研发我们共同整合资源，解决历史遗留体验问题，为国内、国际酒店表单业务进行整体体验的统一和提升助力。另一方面，UED也通过酒店业务的试点思路，将基础表单框架进行模块细分，逐步影响并推广至全站表单业务升级。
框架构建
回顾现有酒店表单业务的问题，主要体现在内容层级模糊，类型样式混乱上。这些随着每一次迭代需求增加而新增的表单项，只是基于业务类型进行了单模块的设计，而对于用户来说，差异化的表单项样式无形中增加了填写时信息获取的成本。
基于人体本身的生理构造，我们在获取文本信息时，并不会逐字阅读，往往采用“扫视”的方式识别段落轮廓从而获取信息，规律性的排列方式也会帮助持续这种“扫视”的节奏，提升信息转化效率。
因此在设计上我们遵循相似信息一致性的原则，简化重复冗余的视觉噪音，将每个单元表单项模型遵循“上类型+下内容”的形式帮助用户快速对所需填写的表单类型建立心理预期。在大量相同的填写区域，统一左侧内容标题对齐方式，并通过字色、字重等形式确保未触发时内容标题为主，暗提示为辅，填写后填写内容为主，内容标题为辅的视觉表达，从而在表单的不同阶段仍旧保证了用户对于主次信息的识别体验。
品牌信息传达
为了减弱表单填写页冰冷感，在框架信息整合的基础上，我们此次改版也将品牌解构，用色彩的形式融入表单页面设计，将品牌功能化，辅助产品以深化品牌用户心中形成立体感知。
当然品牌功能化的融入也需要有所限制，此次我们主要从氛围、控件、操作、提示这四个方面展开，在不影响表单主要信息呈现的基础上，遵循适度、适量两个原则。
内容层级排序
—
用户吸引
回顾整个购买流程，填写订单业务承担着维系用户在产品详情所产生的内容吸引到内容转化的责任，而如何在枯燥的酒店表单中维稳甚至加固用户的内容吸引？为此，我们参照了《Actionable Gamification》关于人性八大核心驱动力中的“拥有感&占有欲”和“失去&避免”这两条来帮助我们。
结合对用户使用场景的需求分析，我们将信息在用户心中的关注度进行了重新排序，首屏弱化了用户已经在详情页明确的酒店名称，转而对用户需在此环节明确的房型、入住时间、离店时间等内容进行了强化和整合，明确产品归属。同时为了加固用户的内容吸引，我们前置了酒店“超值价”、“可免费取消”等信息来解除用户对于产品价格和沉没成本的疑虑，从而正向地激励用户完成后续的表单填写。
细分模块
除了对首屏信息的排序重置外，对于需要用户填写的每个单元模块我们也做出了一些调整。
如取消险模块，此前为避免客诉，将所有需要用户确认和查看的信息都进行了高亮提示和行动引导。这些信息虽然是我们需要用户知道的，但并不一定是用户在填写时想要详细了解的，过多的信息干扰反而影响了有用信息识别，也降低了用户填写表单的效率。因此新版表单重构时我们将协议信息整合至末尾统一确认，同时对文字、icon进行视觉减负，统一弱化辅助信息呈现，转而强调用户需要确认的取消险金额和投保人模块。
从上图国际酒店改版前后的方案进行对比可见，每个细分模块都有着或多或少细节的调整，当然还有没有展现的辅助信息交互浮层框架的统一。这些信息呈现的形态与交互的逻辑也都遵循着前文“保持秩序、描述清晰、化繁为简、帮助用户、信息分组、减少跳转、及时反馈”这七大原则，每一个细节都可以展开来细细剖析，这里就不多加赘述了。
结语
—
蚍蜉亦可撼树，在产品升级的过程中，用户体验的提升往往需要依靠像表单这样一个个微小的业务作为突破点，从而裂变反哺至全局。此次酒店表单重构项目从产品角度来看，功能上并没有改变，而通过代入用户场景，用户感知，用户行为习惯等方面进行细节的体验升级。后续我们还将进行更加深入地探索与迭代，将体验升级持续扩散至其他业务，为每一位途牛用户带来更便捷、更自然的出行体验。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
交互设计中的“所见即所得”原则
“所见即所得”原则我记得在之前的文章中就提到过，但是没有详细说明。最近在体验一些产品时，发现很多交互设计上的坑都可以归纳到“所见非所得”上。
所见非所得
我们可以首先来看一下“所见非所得”的案例：上周寄件去北京，在填写收件人信息时候，发现了一个“智能填写”的功能很有意思。所谓“智能填写”就是OCR识别技术，系统可以识别图片上的地址。例如，你的收件人地址正好是身份证上的住址，那么你就可以上传身份证照片，系统直接识别照片上的地址而不需要手动去输入。
用户具体的操作流程是：
1 拍摄/上传照片；
点击“上传图片”按钮，用户可以选择拍摄或者上传相册里的照片，框选合适的识别区域；
2 系统识别并展示结果；
系统会自动识别图片中的地址信息，并且在输入框中展示，如果有识别错误的地方，用户可以手动编辑修改；
3 用户确认；
用户对地址信息确认无误了，点击“智能填写”按钮，输入框里的地址信息会自动回填到地址栏；
了解了大致流程，我们来看一下两款竞品。产品A和B都提供了“智能填写”的功能，但是在交互设计上存在差异。产品A，当用户上传完图片才会出现“智能填写”按钮；产品B是全程展示“智能填写”按钮的。我个人更加偏爱产品A的处理模式，因为当用户都没有上传图片时，给用户展示“智能填写”按钮是没有任何意义的，这里的“智能填写”虽然可见但是不可得，用户也不能点击。当然有人会说，虽然不可点击，但是展示了也没什么问题吧？当然有问题，它会给用户带来两个痛点：
1） 增加了用户的学习成本；
对于新用户来说，产品A肯定更加容易上手。因为新用户一进入这个页面，只能看到上传图片的按钮，用户明白了我首先要上传图片。产品B是直接一股脑的把所有选项展示出来，用户不知道这些选项之间的联系和操作顺序。
2） 阻断正常操作流程；
给用户展示了他们本不应该看到的元素，可能会阻断正常的操作流程。用户如果还没上传图片，就点击“智能填写”按钮会直接报错，“所传参数不能为空”，用户哪里看懂这是什么意思。
之前在火车站取票，前面排队的大婶跟我说她的票取不了。我凑过去一看，发现她没有关闭购买保险的弹框。因为这个弹框没有盖住底部“确认打印”按钮，用户误以为还是可以点击的，导致无法正常完成取票流程。
了解到这些痛点，那么如何才能在交互设计上实现“所见即所得”原则呢？我总结了两个方法：限制和就近。
限制原则
了解限制原则，我们需要回答两个问题：
1）为什么要限制？
因为多才要限制，多会带来哪些坏处？内容多，用户处理不过来；选项多，用户挑花了眼；时间多，优惠券没有有限期限制用户懒得用。
2）限制什么？
限制用户与界面交互的触点。还是以智能填写为例，当前界面有三个触点：上传图片按钮、输入框、智能填写按钮。这三个触点分别对应着步骤一、步骤二和步骤三。如果我们在步骤一的阶段给用户提供了步骤三的触点，保不齐会有用户尝试去交互，这样的无效操作会触发报错场景。所以当用户处于一个线性的操作流程中，根据用户所处的阶段，分析用户可能进行交互操作，提供交互触点，保证用户看到的触点都是可交互的。
罔顾用户的操作阶段，一股脑的把所有触点都提供给用户。设计师倒是很省心，但是用户却会很糟心，他们需要花时间去判断和分析每一个触点的作用以及它们之间可能存在的联系。这个工作应该由我们代劳，我们来分析用户处于不同阶段所需要的功能触点。
举个知乎的例子，知乎有一个“向知友提问”的功能。但是这个按钮只会在用户滑动搜索结果页3屏后才会出现，因为滑动了3屏，我们可以猜测用户对当前的搜索结果不满意，引导用户去提问。
当然限制原则不仅仅是限制交互触点，还可以应用到产品逻辑中，帮助用户解决很多问题。我曾经遇到过一个场景，公司上线了一款优惠券，用户点击“立即领取”按钮即可领取。但是有些用户会被风控判定为了风险等级过高，导致领取失败。对于这个报错文案，我们改了好几版，但是每次都会收到用户的投诉。我们无法直接告诉用户，你是因为风险等级过高导致无法领取，因为用户风险等级过高是因为开通了某项业务。当时开通的时候，我们并未告知开通后会被判定为高风险用户。所以为了不必要的麻烦，最好的办法就是进行判断前置，如果判断用户为高风险用户那么就直接不展示该优惠券。
就近原则
从上面的阐述中，我们可以发现“所见即所得”原则最根本的目的是为了节省用户的操作时间，提升产品易用性。广义的操作时间还应该包括了用户对于反馈的感知时间，因为只有充分理解系统反馈的信息才能进行进一步的操作。如何帮助用户快速的消化反馈的信息呢？因为反馈是系统对于用户操作的回应，那么我们可以让操作和反馈尽量的贴近一点，这就是就近原则。就近原则可以分为两类：位置就近和形式就近。
1） 位置就近
所见即所得，这里的“所见”即代表着用户的视线，而用户的视线总是停留在上一个交互触点附近。
例如，还是寄件的场景，要填写发件人信息，我懒得重新填写一遍地址，正好看到输入框右边有一个附近地址的功能。我点了一下，没有反应，又点了几下才发现底部出现了一个“附近地址”的列表。这里的交互触点是“附近地址”的文字链接，我的视线也是停留在附近，没有注意到下拉列表已经出现在底部。操作和反馈完全不在同一视觉区域。
2）形式就近
形式就近，这里的形式特指反馈形式。目前最通用的反馈方式是弹框，弹框的弊端也就恰恰在于它的“通用”上。所有类型的反馈都可以用弹框来承载，用户无法立刻感知到弹框所传递内容是什么。既然反馈是系统对于用户操作的回应，而用户操作又是一个个交互触点所触发的。如果我们可以通过改变触点自身形态的变化来完成信息的传递，用户感知起来会更加容易。
举个例子，用户在输入登录密码的时候，其触点是输入框。当用户密码输入错误的时候，我们可以通过抖动输入框的方式告知用户输入错误，这里抖动是现实生活中“摇头”的映射，我们都知道摇头代表着否定的意思，用户不用看到弹框上的“密码错误”几个字也能明白密码输错了。
总结
以上就是我对交互设计中“所见即所得”原则的总结和分析，如果你有不同的意见和看法，欢迎留言或者加群讨论
蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
字符是指计算机中使用的字母、数字、标点符号等等。
计算机最初发明出来是用来解决数字计算问题的。
后来发现，计算机还可以做更多的事，例如文本处理。其实计算机挺笨的，它读到的所有字符都是由1和0组成的字符串，因为计算机电路只有两种状态，「开」和「闭」，对应「1」和「0」。计算机也只可以直接存储和处理二进制数字。
「二进制」是数字世界里的基本规则。
下面这些不同格式的文件，在本质上都是一串由1和0组成的代码，要了解这些文件首先要了解二进制。人有十根手指头，但计算机电路只有「开」和「闭」两种状态，所以满十进一位的计数方式更适合人类计算，而满二进一的二进制更适合计算机。计算机只需要1和0这两个数字就可以传递一切信息。
△ MP4
△ MP3
△ JPG
△ TXT
△ AVI
以图像为例，我们用电脑或手机看到的图像都是在某个角落里存储着下面这样的一串数据。开头的16位翻译过来就是 BMP文件开始的标识。
BMP文件标识后面的数字就是图像的各项基本信息。
△ 图像的各项基本信息
△ 颜色深度
最开始的24位，都是1，像素显示为红、绿、蓝三种颜色，相加后显示为白色。
接下来的24位，前8位是1，后面都是0，像素显示为红色。
再后面24位的前16位都是1，最后8位为0，像素显示红、绿两色，相加后显示为黄色。
根据这样的规则整个55×55的格子铺满颜色就得到一张完整的图片。所以一个 BMP图像文件中的1和0就在逐个记录图像中每一个像素点的颜色。
△ 二进制图片生成方式
△ 色光三原色和颜料三原色区别
下面所有文件的显示都和图像显示例子一样，文件中的1和0按照人们事先设计好的规则排列好，只需要找到正确的打开方式按照特定的规则来解读这些数据，我们就可以获得其中的信息。我们怎么才能知道某一个文件的1和0究竟是按什么规则排列的？我们又要用怎样的方式来解读？这就用到了扩展名，在文件的名字后面加几个特定的字符，就可以帮助系统辨别出文件的类型，从而提示电脑去按照某种特定的规则来正确解读其中的信息。
△ MP4格式扩展名
△ MP3格式扩展名
△ JPG格式扩展名
△ TXT格式扩展名
△ AVI格式扩展名
更多其他文件拓展名：
为了在计算机上显示字符，必须将字符转换成二进制数字。所以就有了统一、标准字符转换规则，即字符编码。字符编码是给所有的汉字定一个的数字编号，并用1和0来表示这个数字编号。
文字的一个字符对应一个编码（码点），而编码对应字符集里的一个「字」，字符通过字符集与「字」相连。像图中所示Unicode、GB 2312、Shift_JIS 都是字符集，其主要作用是为每一个「字」分配一个编码。
△ 文本编码流程
字符集里的每一个编码对应的是一个「字」而不是「字形」，也就是一个「字」在不同的地区或标准中可能有不同的「字形」，但字符集中只能对其分配一个编码（除非相差过大，比如简化字），要显示其不同的「字形」要通过使用为不同地区或标准设计的字体来实现。
△ 字异形（左简体中文，右日文）
ASCII
ASCII（American Standard Code for Information Interchange，美国信息交换标准代码）出现在上个世纪60年代的美国，ASCII 一共定义了128个字符，包括英文字母 A-Z，a-z，0-9，一些标点符号和控制符号。ASCII 采用的编码模型是简单字符集，在英语系国家里 ASCII 标准很完美。但是世界上有好几千种语言，其他语言系的国家想使用计算机，ASCII 就远远不够了。所以编码进入了混乱的时代。
△ ASCII编码
混乱时代
计算机的一个字节是8位，可以表示256个字符。ASCII 使用了7位，所以人们决定把剩余的1位也利用起来。人们对于 ASCII 已规定好的128个字符没有异议，但是不同语系的人对于其他字符的需求不一样，所以对于剩下的128个字符的扩展千奇百怪。而且在亚洲语言系统中有更多的字符。于是就又产生了各种多字节表示一个字符的方法，每个语系都有自己特定的编码页（code pages），这就使整个局面更加混乱不堪。这时 Unicode 出现了。
Unicode
Unicode 就是给计算机中所有的字符各自分配一个代号。Unicode 可以认为是字符的编号，它为每种语言中的每个字符设定了统一并且唯一的二进制编码，Unicode 字符集和编码方式解决了跨语言、跨平台的交流问题。但在 Unicode 里每一个字符都是用4个字节来编码，原本英文字母仅需1个字节编码，中文需2~3个字节编码即可，这对于存储或传输资源而言是很不划算的。
UTF-8
UTF-8 基于 Unicode 编码的一种节约字节的编码，是一种可变长度字符编码方式。在UTF-8编码中，英文字母是一个字节，中文（非生僻字）是2~3个字节。可以认为， UTF-8 是对 Unicode 的一种压缩算法。UTF-8 等编码方式有效的节约了存储空间和传输带宽，因而受到了极大的推广应用。并且 UTF-8 兼容 ASCII 字符集。
UTF：Unicode Transformation Format
△ 中文编码类型
「文字」是信息交流的工具，可读性、易读性至关重要。在网页设计中文字使用需要考虑几个要素：首先考虑字体，其次是字重、字号、行高、字间距、行间距、段间距等。
△ 字体、字重
△ 字间距、字号、行高
△ 行间距、段间距
「字体」是文字的外在形式特征，不同的字体有不同的性格。
字体种类
综合中文、英文都适用的广义分类。
衬线、无衬线
△ 衬线和无衬线差异1
△ 衬线和无衬线差异2
字体 – 中文
字体构成：
△ 笔画
中宫，是指等分成九个小方格最中间的那一格。
△ 中宫
△ 中宫和字体关系
△ 中宫紧凑、中宫松散
间架结构，汉字种类众多，笔划不等，空间排布极为重要。字体的间架结构可分为两类：单体字、合体字。
△ 单体字 间架结构
△ 合体字 间架结构
汉字字形众多，有些字形会产生视觉大小变化，顶格、缩格、出格就是针对不同结构的字体笔画特征进行微调，让他们看起来更加均衡、等大、视觉更完整。
△ 调整前
△ 调整后
字形调整实例：
衬线、无衬线字形演变：
△ 衬线 字形演变
△ 无衬线 字形演变
字体对比：
微软雅黑、方正兰亭黑简体、思源黑体、苹方-简，笔画宽度均匀，横平竖直。同一字号，微软雅黑最粗，小字号时阅读会较为吃力。方正兰亭黑从微软雅黑派衍生出来，可以更好地适应其他应用场合。
黑体、华文黑体、冬青黑体笔画末端宽度不同。
字体 – 英文
「字谷」概念来自西文字母设计，字谷指字母中部分或完全封闭的空间，即字母当中留白部分。
英文的字体结构是由4条平行线组成，有时候是5条，但是一般大写线会忽略。「基线」在西文中是标准，单个字母的所有立脚点都是在这条线上（除了 g、j、p、y）。英文文字结构多种多样，4条平行线的位置也会发生改变。
升部：上缘线和主线之间的内容。
降部：下缘线和基线之间的内容。
字体对比：Helvetica Neue、Arial、DIN
Helvetica Neue：中性，无衬线，现代主义风格字体。字体末端严格保持横平竖直，性格严谨、保守，没有任何的修饰，适合不同分辨率的显示器。该字体是 Helvetica 字体的升级版本，拥有更多的字重，更易于不同场合的应用。字形则相对偏胖，笔画更清晰，而且小字号的情况下可读性也很高。
Arial：Arial 是一套随同多套微软应用软件所分发，无衬线。该字体比例及字重和 Helvetica 极相似，其实是 Monotype Grotesque 系列的衍变。在字体及字距上都做了一些细微的调整和变动，以增加它在电脑屏幕的不同分辨率的可读性。
DIN：字形瘦长，无衬线，适合显示比较长的数字，但是小字号的情况下识别度较低。DIN 字体在德国有着悠久历史，是交通标志、路牌、门牌和车牌的标准字体。虽然曾经是德国纳粹使用的字体，但是经过设计和重新升级。DIN 在杂志、海报以及其他各种设计领域都被广泛地使用。
Helvetica Neue、Arial、DIN 数字对比：
「字重」是同一种字体的不同字形粗细，即字体重量。字重的划分根据不同字体厂商各有不同，不同的字重称呼也可以不一样，常见的划分如下：
在排版中，一种字体会在标题、正文、说明注释等不同内容下使用，单一的字重不能很好适应排版需求，于是衍生出了同一个字体的不同字重。
「字号」是字体的高度，不同平台字号规范不同。
在界面设计中，文字字号决定了信息层次和权重。首先要设定基准字号（最小字号），然后可依据一定规律设定导航、标题等稍大字号。一般网页基准字号有12px、14px、16px等。
字号也受阅读距离影响，眼睛到屏幕距离40~70cm，为较适合的阅读距离。
Ant Design 定义的电脑显示器阅读距离（50 cm）从原先的12上升至14，以保证在多数常用显示器上的用户阅读效率最佳。
「行高」可以理解为一个包裹在字体外面的无形的盒子。字号和行高决定着一套字体系统的动态与秩序之美。
西文：西文基本行高是字号的1.2倍左右，字体有上伸部（ascender）和下延部（descender）可来创造行间空隙。
中文：中文因为字符密实且高度一致，所以一般行高需要更大，根据不同人群的特点（儿童、年轻人、老年人）以及使用环境，可达到1.5~2倍甚至更大。
Ant Design 受到5音阶以及自然律的启发定义了10个不同字号以及与之相对应的行高。
「字间距」是指一组字母之间相互间隔的距离，受字偶距和字体影响。
字偶距：是指两个字母（或其他字符，比如数字，标点符号等）之间的空白。不同的字母有不同的外形，所以字体使用相等的字间距是不协调的。所以需要调整字偶距来提升可读性。
按字间距可分类为：比例字体（Proportional）和等宽字体（Monospaced）。
比例字体：根据字符外形特点设置不同字距的字体，这种字体外形协调，可读性好。
等宽字体：每个字符设置相同字距的字体，其优点是可以很好的控制排版对齐。
行间距（line spacing / leading）：行与行之间的距离，作为一段文本中的留白，行间距让字与字之间有了可呼吸的空间，行间距对文章的易读性有很大影响。
排版推荐使用行间距1.2~2倍。
如何设定行间距，如何规范行间距
行间距由行高决定，为了确保可读性增加行间距，就需要增加行高。举个例子：字号12，行高设定20，那么行间距=「（行高-字号）÷2」×2，除2又乘2，我就简单的简化成行间距 = 行高 – 字号，那么行间距就是20-12=8，并且可以将这个数值固定下来，重复使用。
注：至于为什么是20，因为最初一个字节用8个二进制位来表示，所以现在的很多网页设计中常用到8。12+8=20，参考 Ant Design，网上有很多设计师总结的行间距计算方法，对于一个数学不好的我来说，参考已有总结和经验得出的数值，固定这个数值重复使用，这样最简单。
段间距（paragraphs spacing）：段落与段落之间的距离，可保持页面节奏，与字体、行高相互关联。为保证文章易读性，正文段间距，可以简单地取一个空行（也就是一个行高），这是比较常规也比较合适的做法。举个例子：字号12，行高设定20，段间距 = 行高 + 行间距。
要设置「有节奏感的文本内容」就要遵循这些规则：段间距大于行高，行高大于行间距，行间距大于字间距。
网页设计内容一般都是通过电脑各种浏览器来承载显示的，浏览器显示字体是直接读取用户操作系统里的字体。
字体是界面设计中最基本的构成之一，科学的字体系统：始终保证信息具有优秀的易读可读性，提升用户的阅读体验及工作效率。
下图数据来源：世界互联网市场份额统计网站 Net MarketShare。
△ 操作系统市场占有率 TOP10
各操作系统默认字体：
电脑浏览器直接读取用户操作系统里的字体，不同浏览器对文字的渲染方式不同，因此了解市场浏览器使用情况很有必要。
下图数据来源：世界互联网市场份额统计网站 Net MarketShare
除了操作系统默认字体，其次需要优先选择使用的就是已购版权字体，如果没有已购买的字体，可考虑一些免费字体，非免费字体使用时需谨慎。
△ 公司常购版权字体
字体使用三原则
体系化：在同一个系统UI设计中先建立体系化的设计思路，对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，提高字体应用的性价比，减少不必要的样式浪费。
重复：重复设计中出现的一个或多个内容。任何事情都可以重复。字体、字重字号、颜色、一条线、各种形状（如圆形、正方形或三角形）等。字体使用最好不要超过3种，一般同一个系统UI设计内容的字体数量建议2种即可，中文一种、英文数字一种。且字体样式上也遵循重复原则，避免毫无意义的使用大量字号、颜色、字重、行高等。
韵律：在需要拉开差距的时候可以尝试选择对比大的字体字号，令字号之间产生一种微妙的韵律感。为保证良好的阅读体验，每行保持适当的字符数量。每行上拥有适当的字符数量是文本可读性的关键。如果每行文字太短，视线必须反复折回来，打破读者的节奏。如果一行文字太长，用户的眼睛将很难专注于文本。英文无特殊要求避免使用全大写字符，因为会大大延缓用户扫描和阅读的速度。
现有产品字体统计
字体规范
综合考虑不同操作系统选用最佳字体体验。
代码声明：
一般情况下会选用「一粗一细」两种字重。
粗体：在视觉面积上较重，笔画加粗，字腔（笔画间空间）小，突出显示，产生强调作用。常用于标题和标语。
细体：在视觉面积上较轻，笔画轻细，字腔（笔画间空间）大，结构疏朗清透，阅读时不会让读者产生压迫感。常用于正文和说明。
中文、英文推荐使用字重：
现有产品字号统计
字号规范
参考：Ant Design 受到5音阶以及自然规律启发定义了10个不同字号以及与之相对应的行高。
使用比例字体，根据字符外形特点设置不同字距的字体，这种字体外形协调，可读性好。
Ant Design 两大色彩体系：系统级、产品级。
系统级色彩体系
系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。
产品级色彩体系
产品级色彩体系则是在具体设计过程中，基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。
中性色包含了黑、白、灰。在网页设计中被大量使用，合理的选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。中性色板一共包含了从白到黑的10个颜色。
Ant Design 的中性色主要应用在文字、背景、边框、分割线等场景中。产品中性色的定义需要考虑深色浅色背景的差异，同时结合 WCAG 2.0标准。中性色在落地的时候是按照「透明度」的方式实现。
VIP大数据用户体验部 的中性色也是主要应用在界面的文字、背景、边框、分割线等场景中。考虑到深浅色背景的差异，中性色根据设计需求在落地的时候可按照色值和透明度两种方式实现，两种方式优先使用色值方式，尽量避免两者混搭使用。
功能色代表了明确的信息以及状态，比如成功、警告、失败、提醒、链接等。
功能色的选取需要遵守用户对色彩的基本认知。在一套产品体系下，功能色尽量保持一致，不要有过多的自定义干扰用户的认知体验。
文案内容来源于 Ant Design，一文一字之间可研究琢磨的空间还很大。
分享一个感触很深的例子，里面有一个专业用语「阈yù值」和「阀fá值」，这两个字一开始我看了很久才看出来区别，查资料了解到，其实「阀fá值」在专业行业里是一个错别字，是一个错误的用词，其正确用法是「阈值」是所属行业认可通用词。「阈yù值」又叫临界值，是指一个效应能够产生的值或最高值。
所以精准、清晰的语言会更容易让用户理解，合适的语气更容易让用户建立信任感。因此在界面设计时，在使用和定义文案时要注意以下几点：
在有限的空间内将重要的信息放在最前面，让用户第一眼看到最重要的内容。（或通过高亮、留白等方式突出重要信息）。
因为硬件软件一直在变化，设计规范和内容也要定时更新，规范是为了在繁多复杂业务中寻求一种平衡，帮助各团队更的完成任务，有些内容适合强制规定，有些内容适合规范一个范围，有些内容适合制定一种规律方法……当出现特殊情况时需要重新审视和不断完善灵活使用。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com
