如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
短视频产品成为年轻用户社交娱乐的主场景，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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
常见的页面跳转方式有直接跳转、左右跳转、上下跳转等，再设计时需要考虑好其中的关联性，给出最符合用户心理预期的过渡方式，从而做出最合适的设计。
页面跳转在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界面设计 、 包装设计
蓝蓝设计的小编 http://www.lanlanwork.com
