前言

从入行到如今的这些年中，眼中的设计风格不断变化。伴随这些年行业的兴起，从最早的拟物风到现在的内容当道，越来越多的设计师参与其中，为行业贡献着自己的理解。但也发现同质化的现象越趋明显，个人认为这里面有设计师本身的问题，也有行业风气的问题。同质化的现象有很多的组成因素，可能是页面视觉是直接的拿来主义，亦可能是脱离不了舒适圈的习惯为之。

我很担心的一件事情就是我们一味的反对同质化的假，最后会演变成另外一种假。是一味的摈弃，还是部分的接纳。这是一个界限的问题，而这个界限我还没想明白。如今风格太现成，都像麦当劳一样，思想的麦当劳，短暂的吃下去了，饱了，不去想了。这个惯性思维很可怕，最可怕的是可能有段时间自身都意识不到这个问题。

那么如何跳出这个惯性思维？我这边借用冯小刚导演在十三邀里说的一段话来解释。创作过程太正常很多时候是经验在发挥作用，每次都和自己的经验作斗争，最后可能会出现一个在经验之外又让自己激动的东西。简而言之就是革了自己的命。可能哪天我想明白这个问题，会再写一章如何创新来讲这个问题。

那么本章主要讲我们是如何在前期定义一张大屏的风格？主要可以从几个方面来讲：配色、字体、构图、氛围。

一、定义页面配色

定义大屏配色的前提是对于用户的政务有着充分的调研，明白是主管哪个行业的，分别用对应的色系去定调子。

举个例子，生物医药、环保等行业通常选用能表达健康安全的绿色；公安、教育、政府等通常选用能表达科技未来的蓝色；消费业、服务业等行业通常选用能表达热闹、朝气的暖色调。

它们有个共性就是主色调不管倾向于哪个颜色，背景通常是对应颜色的暗色系。因为可视化大屏使用环境通常是在室内、展厅等这种外部环境比较暗的地方，避免对于观赏者视觉上的不适应。而且这也有帮助观赏者对于数据的聚焦比对的工作，暗色调的背景加上高亮的配色，也容易在界面中将层次做出来，这点特别适用与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字体进行了微调后使用。

接下来我们直接推荐几个有风格的英文和数字字体给大家（私货环节！）：

（一）英文字体

1.Futura

Futura这个字体是我自己特别喜欢的一个字体，字体表现很现代，看上去特别利落，继承了包豪斯的设计理念。

2.Optima

Optima也是我个人比较心水的一款，字体充满人文主义。字体本身严格遵循了黄金分割原则，比例优美，字里行间充满了变化。

3.Garamond

Garamond简直就是衬线体之中的典范，就这么说吧，经典的设计中一定会出现他的身影。

4.Bodoni

Bodoni被誉为“现代主义风格最完美的体现”。字体粗细对比强烈，给人浪漫的感觉。

5.Didot

Didot和Bodoni很相似，都是给人浪漫的感觉，不同的是Didot在数字上面做了不一样的处理，两者在电商上使用都蛮多的，一般用做价格显示。

（二）数字字体

1.DIN

DIN被德国人视为“国民字体”，有着悠久的历史。德国的路标和路牌的标准字体就是DIN。其中的4这个设计挺有个性和特点的，容易辩识出来。除了前面说的问题，真的是精准的徳国工艺阿（dog脸~）

2.lcdD

lcdD是常见的电子表数字的字体风格，更加端正鲜明的视觉效果，运用在数字提示等内容上，倾斜风的设计让字体更有自己的独特魅力。

3.Lato

Lato就是那种非常现代科技感的一款，并且具备了很多常用自己的特点，属于那种用了不会出错的字体。

4.Avanti

Avanti和DIN在字形上是很相似的，但是它的字形更加饱满。差异主要在3、5、8这三个数字以及G、Q都做了不一样的处理，上半部较小而下半部较大，多了一些变化和趣味性。这个字体还有一个细体，一粗一细，灵活使用。

5.Tensans

Tensans和Avanti也很相似，如5和8上下部分的比例，6和9的转折以及中圈部分都挺相似的，有点像Avanti字体的加粗版本。但是Tensans特征更加明显，比如2、3、4、7的转角尖锐，切角锋利，具有很浓重的现代工业气息，比较适合速度、刚猛、游戏等主题的设计。

6.Impact

Impact这个字体第一感觉就是厚重醒目，视觉冲击力很强。特粗的笔画、紧缩的间距以及狭窄的中宫，特别适合大标题和醒目的价格展示。

7.BebasNeue

字体字面比较秀长，笔画流畅，简约大方。适用于化妆品、服装等女性向。

8.Niagara-Solid

和上面哪个BebasNeue是有点相像的，字面细瘦，挺拔优美。多了一些衬线体的字重和体势的变化，设计感与装饰感更强，尤为时尚，在女性、文化、时尚类中用的格外多。

9.Gaoel

Gaoel有着Avanti的韵味，但是更加年轻、圆润，令人惊喜的是大写的字母有着统一的特点，特别未来。不过需要注意的是该款没有小写，小写就直接变成如下样子。整体字体设计很圆润，年轻化，可爱非常适合一些偏年轻化的产品，同时字重非常适合金融产品的字重效果！

10.Proxima Nova

Proxima Nova的style还是比较多的，我个人用的比较多还是在它的细体上做修改，比较纤细现代。

11.Gotham

Gotham号称发布会字体，特别现代干净的一款字体，这些年看到的较多是手机发布会的海报设计，纤细的字体压在海报上很有力量。

12.Expansiva

Expansiva也是特别有个性的一款字体，用于做数字的也比较多，目前看到的可视化设计中存在，但是使用量并不多，由于字形骨骼的因素，用于数字上比较多。

文章来源：tob.design        作者：王亮亮同学

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

设计分析是作为交互设计师必备的一项基础能力，一套有效的分析思路可以帮助我们找准设计发力点，更效率的推导出合理的设计方案，它是一种思维能力，也是一种方法工具，但是在我们的实际项目中，常常会遇到这样几种场景：

• 新手设计师或者第一次做活动的设计师，设计分析不知道要如何入手

• 花了很多时间做分析，但感觉对实际画稿子并没有什么帮助

• 分析过程中发散了很多很好的点，但最后大多都落不了地

这些情况常常会导致设计分析流于形式，套用了很多方法、花了很多时间、输出了很长的文档，内容看上去似乎很丰富，但落地的方案却平平无奇，甚至也会自我怀疑设计分析真的有用吗？

总结下来，会出现这些场景的原因有两点：首先是设计分析太泛，没有聚焦到核心问题；其次是时间分配不合理，没有抓到发力重点。那么结合我们目前的项目来看，怎样做一个更有用的设计分析呢？

活动中常见的项目类型

根据活动产品化设计思路，可以把我们的日常项目分为两类：迭代型项目以及探索型项目。

迭代型项目是指过往已有过积累的成熟项目，例如大促主会场、我的专属会场、榜单会场、攻略等等，通常是一些已经比较固化的经典业务，或基础的功能类业务；探索型项目则是一些全新的业务方向，例如下沉会场、直播会场等等，刚处于进入期或成长初期。

如何完成一个有效的设计分析

1. 迭代型项目

迭代型项目容易陷入的一个误区是时间分配不合理，没有抓到发力重点，尤其是对于很多新手设计师来说，往往大部分的精力花在重复之前已经做过的内容，比如花了很多时间重新去分析用户、分析方向、分析行业趋势等等，但是对于已经比较稳定的迭代型项目来说，这部分背景内容相对来说已经比较固化（除非有明显的变化），这就可能会导致重复分析出来的结论跟之前的差别并不大，也很难带来实际业务提升。

既然迭代型项目过往已有过经验和策略的沉淀，也经历过多轮的数据迭代，核心思路应该是先定义要解决什么问题、然后才是如何解决，这样才能找准关键发力点。

要解决什么问题

首先要思考是不是真的有问题，没有问题的项目也可以不用再花时间做分析，效率做即可，例如像全部会场，本身的业务模式就比较简单，过往的效果也相对比较稳定，如果不考虑进行突破性的创新，通常是可以效率复用的，这种时候则不需要再去做分析，毕竟也要考虑投入产出比。

那么怎么定义要解决什么问题呢？有三个常用的思路：看数据、看用户反馈、看运营策略。

第一，从数据分析中找到关键问题，例如根据618的项目数据复盘，我们发现预售会场、品牌会场的页面跳失率较高，那么双11核心可以围绕“如何降低跌失率？”“如何提升流量利益效率？”去进行分析，从而推导出更有针对性的设计策略。

第二，根据用户反馈来找到关建问题，例如过往的主会场，用户调研一直都会反馈主推楼层太长而找不到感兴趣的内容，那么可以围绕“如何更好的进行需求匹配？”“如何提升屏效？”来思考和分析，解决实际存在的问题，才更有可能提升体验和数据。

第三，结合运营策略，很多业务虽然已经相对稳定，但随着每次大促战略的变化，运营策略上也会有一些新的需求，那么就根据这些差异化的诉求去找到发力点。例如针对我的专属会场，在原会场定位不变的情况下，在近两次大促中运营侧都提出需要由这个会场来承载平台服务内容曝光的诉求，那么服务内容如何匹配“专属”会场的用户心智，则是这个会场可以重点解决的问题。

如何判断真正有效的解决方案

在定义清楚核心要解决的问题后，就可以按照常用的设计方法进行方案的推导，在发散解决方案的过程中，如何判断方案的合理有效，确保最后的可落地性，是让我们设计分析有价值的关键，因此总结了两个常用的技巧。

首先要理解业务逻辑，减少无用的策略发散，很多时候我们的方案很难推动落地的原因，是没有考虑到业务的诉求，越能够深入的了解业务，才能更好的解决业务侧的顾虑，保证方案的可落地性。

其次是要跳出来从整体来看优先级，我们在进入自己的思维逻辑中时，会比较容易陷入细节，有时候自己觉得很棒的想法花很大力气去推却很难获得其他人的重视，并不是因为我们的方案不够好，而是没有关注到整体优先级，因此要学会看全局，通过多沟通多评估的方式来让自己的判断更加准确。

2. 探索型项目

探索型的项目没有过往的参考依据，相当于需要从零开始去探索如何做，对于设计分析的能力要求会更高，那么常常容易陷入两种极端相反的误区，要不就是容易被方法论套路，设计分析过泛但得不出实际有价值的结论，要不就是完全没有头绪，属于想一步做一步的类型，分析的内容之间缺乏逻辑。

因此，探索型项目的核心思路是要先有分析框架、再做纵向深挖，就像画交互稿的过程一样，需要先定义交互框架，纵再进行交互细节的打磨，才能够保证设计效率及效果。

确定分析框架

确定分析框架的过程主要分为两步，一是先想清楚要分析哪些内容，包括哪些环节是必要的，哪些是重点的，时间要怎么分配。例如当我们第一次做宠物品类活动时，需要对这个品类有深入的理解，因此我们在前期需要去分析养宠人群的特征、宠物行业的发展现状、京东宠物货品的优势等内容，而如果我们做的是一次大促的综合会场，其主要用户群体如果跟常规站内主流群体并无差异时，则不需要再花费大量的时间单独去分析用户画像，因此，需要结合项目情况先想清楚需要分析的内容、以及这些内容的必要性和优先级。

第二步是梳理清楚内容之间的逻辑关系，常见的逻辑结构有两种，一是递进式的推导（A→B→C），分析维度之间是先后关联的，通过严谨的逻辑步步推导而来，例如先梳理用户画像、才能进行用户行为痛点的分析、进而推导解决方案；另一种逻辑结构是进行综合归纳（A+B→C），即通过几个不同的维度综合推导，例如经典的五导家分析方法，结合用户目标以及业务目标综合推导出设计目标。

在很多设计分析中，我们也会参考一些方法论，其实方法论提供的就是分析框架，在理解了这一步之后，相信也能更灵活的应用。以下是根据我们日常项目梳理的一些常用分析框架。

纵向深挖如何得到有价值的策略

有了分析框架后，接下来就可以进入每个模块的具体分析了，如果要得到有价值的策略，同样有两个小技巧。

首先，策略要足够具体、有差异化，尽量避免提出过于笼统的结论。例如针对如何提升流量利用率比较泛的策略就是要进行流量精细化运营，这个大的方向没有错，但如果只到这一步是很难指导具体内容落地的，所以需要细化到流量的渠道有哪些、这些渠道有什么样的特征、针对不同的渠道用户可以用怎样的内容吸引他们，才能够更准确的判断是否会存什么问题。

其次，策略最好能够关联验证指标，可以参考UGD数据增长思路，在推导策略时要能预判它能带来哪些数据指标的提升，以保证设计分析的结论是有理有据的。

文章来源：站酷   作者：大葱设计

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

今天跟大家分享的是深色背景的网站界面，深色背景稳重大气，体现科技感。在界面布局方面简洁清晰，同时界面中的表格、按钮、标签、图表等控件精致美观，不管是做web端网页、大屏界面，还是手机app，都可以借鉴。

（图片均来源于网络）

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

更多精彩文章：

ui界面设计之网站设计案例欣赏（一）

今天分享的题目是从品牌到UI，用设计的思想与这个世界和解；这里的我说的和解比较宽泛，大家可以理解成与客户和解，也可与产品经理和解，也可以是与自己和解；

为什么选这个主题呢，原因是之前在网上听一群人总是说互联网走到了下半场，我和好奇，就去查这个下半场到底是什么，后来总算知道了，互联网行业走到现在，已经从增量时代转为存量时代，这个存量时代就是下半场，人口、流量、资本的红利都逐渐收紧。

在这种情况下我的产品如何从同类产品中脱颖而出，或许增加品牌属性是种方法，希望大家在听完这个分享后，会有一些启发。

在互联网的增量时代，品牌设计与UI设计是两条平行线，几乎没有交集，你做你的画册、slogan、包装，我做我的网站、app、微信小程序，偶尔互相模仿，但也不是主流，毕竟两者载体不同，目的不同，用户也不同；

但是到了存量时代，影响用户选择的一个重要因素是「品牌」，一个产品要想从同类产品中区别出来，需要有个性，UI+品牌成为产品生命周期中重要的一环，下面我们看看如何在用户心中植入产品品牌； 

在在品牌植入方便，国外很多产品已经走在了我们前面，我们来看看谷歌，谷歌开发者大会上对 Material（ Design做了更新，我印象特别深刻的是Google对图形语言单独拿出来做一个模块解释它，它提取了圆形作为视觉DNA，并沿用到产品的每一个控件；

当然，如果我们想传达我们产品的品牌理念，只在图标组件里运用是远远不够的。

诞生于1886年的可口可乐，每年都做产品运营推广，不断大量的重复它logo的弧线元素和瓶子的外形；

还有刚刚过去的双11，从2012年11月11日开始的天猫节，现在是全球最大的B2C平台，天猫猫头运用也是渗透到全产品线里面去了，问大家个问题，大家有没有人知道这个猫头品牌是谁创立的？其实就是马云的继任者，现任阿里巴巴集团董事局主席张勇；讲的有点远了，我们再回到我们的主题；

这个图很好的解释了品牌与产品与用户的关系，产品需要品牌牵引、支撑，现在互联网产品越来越趋于同质化，UI 设计师已经不能局限于界面的表现层，更要了解产品背后的逻辑，然后以业务为依据设计品牌，以品牌为基准去设计产品。

第一章意义Significance，这个章节我们讲讲从品牌到UI的意义

第一个意义是对内：可以规范统一，协作

品牌本身就可以作为设计规范的一个重要指导原则，通过对配色、文字、图标、控件等建立设计规范，可以有效减少设计决策时间，传达一致的品牌调性。

第二个意义是对外：可以提高认知，溢价增值

如果一个产品失去了个性，不看 logo，单纯看界面的话，很多时候根本分不清是到底是哪一家公司的产品。如果能够关注设计细节对品牌的影响，肯定能更好地提高用户对产品的认知，当你对一件产品注入了感情，同时也就为产品提供了营销推广的立足点；也可以这么说，设计师创造的情感性价值，直接实现了产品的溢价增值；

第二章感知Perception

有位设计界的前辈讲过，品牌知名度其实就是信任度的体现，他说世界上最成功的品牌就是宗教，这里没有诋毁任何宗教的意思，但是宗教建立的品牌信任度，远远超过了任何商品；

这里我们从用户的角度出发，看下用户是如何从产品感知品牌的；

在设计产品的时候常常会发现我们觉得理所当然的地方，用户往往没按我们想的方式去使用。那是因为设计师通常有整体观，站在金字塔顶端去规划一个产品的设计，而用户则恰恰相反，在金字塔底端往上爬，他们不知道这个金字塔多高，也不知道从哪一面开始最好爬，所以会遇到各种问题。

同样，用户对品牌的感知由低向高的，用户通过各种场景接触到产品，再通过产品的视觉呈现、功能体验、信息内容等感知品牌，最后在心中形成印象，构建品牌信念，从而影响下次产生相应需求时对产品的选择；

可以联想下我们的购物体验，是不是总是从同一个地方shopping，这就是购物APP品牌价值已经使你已经形成了习惯选择；

作为设计师，我们需要充分理解品牌内核，由内向外将抽象的品牌内核转化为具象的视觉符号，再延伸到用户与产品的各个接触点，从而将品牌理念植入用户内心。

第三章融合Integration既然上面我们讲品牌和UI最终要走的一起，这一章我们讲他们如何在工作融合

 第一步，明确定位，提取关键词，建立情绪板

当代广告教皇，美国奥美广告创始人大卫.奥格威说，“最重要的决定是如何定位你的产品。”

在大师的指引下，我们发现首先找到品牌定位，定位自己的细分市场和目标用户；

2.围绕品牌定位提取关键词；

3.建立情绪版，将抽象的概念转化为可感知的视觉；

第二步，提取视觉表现元素，并设计融入品牌定位。我们重点从颜色、图形、纹理、字体四个方面讲一下。

有时甚至不需要任何图形，单凭颜色就能产生对某一事物的联想。

现在UI设计流行的极简风，我们发现这些应用采用极简化设计的同时，图标也变得更鲜艳，更引人注目，说明这些产品也在寻求一个平衡，在 UI 设计变得极简趋同的同时，仍然能保留核心的品牌基因。

颜色在 UI 中的表现有 logo、导航栏底色、图标、文字、可视化图表、插图、按钮等等。 

现在UI设计流行的极简风，我们发现这些应用采用极简化设计的同时，图标也变得更鲜艳，更引人注目，说明这些产品也在寻求一个平衡，在 UI 设计变得极简趋同的同时，仍然能保留核心的品牌基因。 

图形

我们知道颜色是抽象感知，图形是相对具象的表现方式。

一旦某个特有的图形在用户心中形成烙印，用户见到相似的图形组合都能往该图形联想，从而关系到图形背后所代表的品牌，这也是很多企业做品牌升级的时候 logo 都越来越简洁的原因，因为这样能有效降低用户的认知负担，提高品牌认知。

图形通常从 logo 本身提取，并在 UI 中延伸应用。比如马蜂窝、百度网盘、京东做品牌升级的时候都不约而同地从 logo 中提取了一个代表微笑的弧度，传递友好、温暖的品牌形象。

飞猪提取了 logo 中「猪的发型」用于搜索框，韩国的电商品牌11街也将 logo 延长作为界面中的搜索框。

纹理

在 UI 设计或者运营推广运用中，通过提取品牌图形元素，再运用分形、排列、重复、平铺等设计手法形成品牌纹理。

我们看看京东的启动页用 Joy 的外形旋转做成的纹理背景；

国外著名的聊天应用 Whatsapp，在聊天页的背景用涂鸦插图纹理做背景；

还有腾讯文档的启动页、登录页用了渐变的菱形作为纹理，辅助品牌的视觉表现。

我们还在聊图形复制变形的时候，国外的UI设计已经细化到了十分惊人的程度

例如UBER 在做的品牌升级，设计师出来将每个国家富有代表性的图形提炼， 然后重复运⽤平铺，形成带有地域特色的⼏何纹理，运⽤到闪屏和线上线下的产品当中。

字体

字体是最容易被忽视的设计元素，很多人会认为 UI 中的字体用系统默认的就行。其实字体对于产品气质的体现着很大的作用，很多品牌都把字体设计当成品牌基因中重要一部分。

字体的选择需要契合产品功能特点与品牌调性。

微信读书使用了方正宋三，让人阅读起来有种文字秀丽的浸入感；每日故宫使用了方正清刻悦宋体，字里行间隐含着历史古韵，渗透着文化气息；澎湃新闻使用方正准雅宋体，体现其作为新闻产品「专注时政与思想」的严肃一面。

英文字体也可以使用契合产品气质的英文字体。比如常被用作数字字体的 Din、经典的衬线字体 Playfair Display、⾕歌御用的 Roboto 等。

第三步，融入品牌触点

这里我解释下品牌触点这概念，是指一款产品中品牌信息接触点，是决定用户对产品品牌印象的关键；

我们看几个案例，

启动页：知乎的启动页采用 slogan 加 logo 的方式来体现品牌，这也是绝大多数应用的做法；每日故宫启动的时候伴随着一声钟声，页面会有一个光线流动的动画，极具仪式感，一下子就把用户带入故宫庄严的氛围当中。

图标：东家的每一个图标都融入了印刷式字体的元素，体现其匠人的品牌基因；mono 则直接把产品名称「 M O N O」用于导航栏。

插图：Dropbox 的儿童风格的插画与 B站 的二次元插画都非常契合品牌特征。

品牌触点式多样的，除了上面的启动页、图标、插图之外，还有预加载图、loading、动效、新手引导等等都能体现品牌触点，这些品牌触点，都是讲述品牌故事的关键载体，帮助产品从同行业中脱颖而出，这里由于时间的关系我们就不展开讲了，有兴趣的同学，我们可以单独交流哦

互联网行业已经过了拓荒时代，行业沉淀下了许多有价值的知识，也有许多非常好的 UI 组件和规范文档可以直接使用；

另一方面，很多公司对于 UI 设计在整个产品生命周期中的价值，普遍觉得不是非常重要，UI 设计部门只是一个业务支持部门，起不到主导作用。而如果 UI 设计师做的工作还是停留在把产品的原型文档变漂亮，肯定是不行了。

设计师不仅需要对产品业务和商业有深入了解，更重要的是对于品牌在整个产品链路中的应用与把控。

我们需要走出舒适圈，主动去挖掘更深层次的设计价值，提升自我价值。

诚然改变一个大的设计生存环境是非常漫长的过程。要不停的尝试，就像不停的迭代做新产品一样，不能因为一两次的失败打消掉设计的积极性。

设计的终极最后就是和解 Compromise

开篇我提到了与世界和解，分享下我是怎么和这个世界和解的，我相信三句话，可以跟这个世界和解 

再次谢谢大家听我叨叨，如果大家喜欢，下次我们可以叨叨点关于设计的更有意思的事，谢谢

文章来源：tob.design        作者：无名大师29aef85c40

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

2020又过大半了，去年这个时候我们研究了目前国际大厂在使用的一些趋势-晶白，点线底纹，光感，那么到了今天又有哪些新的趋势映入眼帘呢，你还在使用那套旧的设计风格来做设计，今天带大家来看看今年哪些性格值得我们学习呢？

什么是液态视觉

参加过去年UCAN的同学应该对于这个水的主KV印象深刻，当时是以水，宇宙概念做的整个视觉。整个视觉最让人深刻的莫过于这个画龙点睛的水滴液态效果。

整个水滴流动感，运用到整个KV各个地方，背景还有底纹等等，印象深刻。

在2020年，液态视觉毫无疑问是当前最受关注的视觉风格之一。这种效果看起来像流动的各种液体，在设计中不仅可以很强的吸引人眼球，同时无论是作为背景元素，还是装饰都让人过目难忘。

液态视觉除了视觉感官层面会让你记忆深刻，它的整个视觉概念也可以讲很多故事，比如你可以说整个设计概念，是围绕”水“来设计，水是流动的，水也是生命之泉，能赋予很多产品很强的概念，所以也就是为什么今年会被很多大型KV所运用的原因。同时这种流动感也可以比如宇宙万物，生命不息，也可以运用在很多大型的科技发布会上。

所以作为设计，今年我们势必要去关注这个趋势和理念，尝试如何去运用到我们产品中去。

液态视觉的情感感受

1、生命力

使用过siri的朋友对这个效果应该不会陌生，液态视觉一个非常直观的感受就是具有生命力，可以随机的发生各种各样的变化，正是如此，被很多语音产品在页面中使用。

在很多科技类产品，智能功能这块都会看见这种风格的运用，所以假如你今天需要设计一款智能，很未来的产品，这种液态风格设计一定需要去关注。

比如这款科技类产品，在启动页面时候，就直接跳出一个类似水滴的机器人，用智能语音和你对话，然后随着人机交互，它会变成不同的形态。

2.流动运动感

液态视觉另外一个特点就是具有流动感运动感，在很多智能家居中被广泛运用，比如图中这个智能水壶页面设计，随着水温度的变化，颜色和形状都会发生变化。

在很多发布会中，营造一些比较大气的感觉，或者宇宙场景时候经常运营到这个风格，在空间上和视觉上都有方向和动态效果。

这组海报设计，就非常有方向感和宇宙未来感，整个图形都朝着一个方向走向，这也是其他图形元素很难表达的风格特点。

GlebKuznetsov的作品中这个动态效果，随着液态效果的流动，整个画面呈现出非常有程序的水流动效果。

3.科幻未来感

液态效果另外一个视觉感受就是未来感和科技感，因为它造型的变化，抽象图形的表达，给人很神秘，抽象的视觉感受。

如上图，通过将流动的图形，进行旋转，形成虫洞感觉，不由自主想起宇宙和未来感。

液态视觉的技法特点

1.质感柔软呈现透明

液态风格特点虽然视觉冲击力强，但是视觉表现上，柔软和透明是非常大的一个特点。整体的材质比较轻，加上透明效果运用，整体会非常的轻盈。通常人工智能页面场景运用比较多。

2.色彩丰富大胆渐变

液态风格另外一个特点是什么。色彩丰富，大胆的渐变色，形成很强的视觉冲击力。

整个色彩类似彩虹，或者霓虹灯反射效果，这也是它在设计中能吸引人很重要的一个原因。

Kikk的官网设计，和Ucan有些神似，也是采用的的一个液态的玻璃球，配色大胆的渐变在视觉表现和冲击力让都让人印象深刻。

3.塑料质感运用

塑料质感：液态视觉视觉质感丰富，质感也很大胆，比较常用的有塑料质感，配合灯光，如上图就是运用是塑料质感，配色彩色的渐变，非常梦幻。

这种塑料质感不止是在设计中用到，在时尚摄影中也被经常使用。

4.玻璃质感运用

玻璃质感的运用，一般会运用玻璃这种效果，出现在画面中，随着玻璃的折射效果进行变换，玻璃的质感和平面这种强反差的设计，让你过目不忘。

玻璃质感的折射效果，结合后面文字的透出，很好的将这种液态融合效果运用到了。

在越来越多的国外设计中，都经常看见这种玻璃液态图形和平面设计的融合。

5.水的质感运用

水的质感，毋庸置疑，但是这个水的质感一般是运用气泡的表现形式，再结合折射效果，整个视觉水泡就是核心视觉元素。

Ucan的主视觉效果，就是采用类似的手法，这类设计很巧妙，同时简约又不失大气。

6.点线面结合运用

除了塑料，扁平质感以外，点线的运用在液态设计中非常多，比如上图的OPPO和colo的海报设计，就是运用了流动变化的线条，让整个设计呈现出简约高科技之美。

用线成为整个设计主体，通过流动的线勾勒出一幅场景，在科技类产品中运用较多。支付宝很多理财产品都曾经运用过类似风格。

在界面中运用

天猫双11的很多场景中，其实都有用到液态设计元素，比如双11的潮流盛典舞台设计，就是运用的液态当元素，整个画面非常潮。

在AI人工智能的产品设计中，液态设计经常被广泛使用，无论是智能语音设计，还是说智能家居是使用，都能看见它运用的影子。

这组机器学习的网站设计，通过液态设计，讲玻璃元素设计成动态的方式非常的逼真。整个设计给人空间和未来感展现。

这个液态网站的设计，大胆的渐变，流动的液态效果，让整个页面充满了时尚感。

液态设计除了一些抽象元素，一些3D的元素也可以使用，整体呈现出来的效果，也非常的有吸引力。当然得结合设计整体来平衡。

目前来说液态设计在界面中运用，一般在科技网站，AI或者机器人场景比较多，一般液态会呈现多种变化趋势。

在平面中运用

在平面设计中案例比较多，目前很多商业设计中都运用到了一个液态的图形配合一些几何图形，干净利索的文字都能搭配出不错的视觉效果。

这组海报，看似简约但是充满了设计感，除了液态的核心元素，字体运用，板式空间的利用都体现出设计师极高的功底。 

在韩国很多艺术展的设计中，抽象的几何图片配合液态的动态变化。整体非常强的视觉冲击。

如果你今天做设计，找不到感觉了，不如放弃下你之前的设计套路。尝试一下新的设计思路，说不定可以打开不一样的视角。

在品牌中运用

今天除了页面是动态的，在很多时候品牌LOGO也是动态的液态的，会变化，如上图这个logo他会随着不同的方向去旋转变化。LOGO一定要是静态的么？不可以是动态的？甚至液态么，我觉得一定有可能会出现液态的图形。

电信OI公司的logo就是液态呈现的，他的变化有几十种展示方式。

整个图形以明亮，形状变化的“气泡”为液态容器，可根据客户的声音改变LOGO的颜色和形状。

或许在未来，液态的LOGO会成为一种新的主流，只是作为新时代的设计师，我们必须要去了解和关注。

最后

趋势是变化的，唯一比变的就是变化，作为处在互联网中的设计师，我们身边的一切都是变化的，身边的人，身边的事儿，甚至是商业模式都在变化，学会拥抱变化， 并且让自己持续的成长和变的更好，是每个设计师都要学习的。

文章来源：站酷  作者：我们的设计日记

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

编辑导语：B端产品往往由于业务体量庞大，导致信息复杂，同时对业务的性的要求很高；服务于B端的业务，不能够出信息错误，填错一个信息，就会引发巨大的问题。本文结合笔者自己的工作经验，总结了大型B端业务中表单的设计方法，供小伙伴参考。

一、表单的定义

表单是信息添加、录入的通用形式；其作为获取用户输入的重要交互方式，也承担着将问题和答案进行配对的角色。

二、表单的设计原则

设计原则是任何一种解决方案的指路灯，它们体现解决方案应包含的基本目标。

针对互联网表单设计，我倡导的原则如下：

1. 尽量减少痛苦；
2. 说明填写完成路径；
3. 考虑情境；
4. 确保一直沟通。

三、表单的结构

我们先看看表单的结构，表单主要由5部分组成：

1. 标题：这个元素帮助用户引导完成表单填写的整个过程，尤其在你对信息进行分组方便用户填写时，特别有用。
2. 标签：告诉用户相对应的输入字段的含义。
3. 输入域：包含了文本框、密码框、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
4. 提示信息：包含帮助信息、占位符和反馈信息提示。
5. 操作按钮：包括提交按钮、保存按钮、复位按钮和一般按钮；用于将表单数据传送到服务器上。

四、表单的表现形式

1. 标签

标签根据标签与输入域的位置关系，分为：左对齐、右对齐、顶部对齐、内联标签、图标标签和浮动标签。

每种标签样式都有自身的优点与局现性，根据不同的场景选择适合的标签样式，能提高用户阅读效率，同时还能降低信息填写时的错误率。

1）顶部对齐：根据Matteo Penzo 发布的关于标签放置的文章表明：采用顶部对齐的标签样式，浏览表单所需的时间最短；如果希望用户能快速扫描填写表单，顶部对齐的标签是一个不错的选择。

顶部对齐的结构，使得能放下更长的标签；但对于纵向空间是一个挑战，当填写信息过多时，表单就会很长。

• 优点：有最快的浏览和处理速度，同时标签长度弹性大。
• 缺点：非常占纵向空间。

2）左对齐：左对齐标签，文字开头按阅读视线对齐，符合人们的阅读习惯，是有利于阅读的。

浏览表单所需时间最长，但是缓慢完成率并不总是一件坏事——如果表单要求敏感数据(例如提供驾驶证、身份证、银行卡号等，可以故意减缓用户的填写速度，来确保填写的准确性）。

左对齐的结构需要更多的横向空间，因此在移动端的呈现上可以是个问题。

此外，在屏幕空间有限的情况下，也会一定程度上限制了标签和输入框的长度。

• 优点：文字开头按阅读视线对齐，方便阅读，节约纵向空间。
• 缺点：填写速度慢，标签长度和输入框弹性小。

3）右对齐：右对齐使得标签和输入之间的距离固定，有明确的视觉关联。

对于简短的表格，右对齐的标签可以有很快的完成时间；但由于标签长短不同，左边缘参差不齐，整体扫读表单的时候不容易了解全部信息。

与左对齐类似，在屏幕空间有限的情况下，也会一定程度上限制了标签和输入框的长度。

• 优点：时间较短，节约纵向空间。
• 缺点：整体可读性低，标签长度和输入框弹性小。

4）内联标签：内联标签由于它对空间的占比很小，往往运用于移动端的界面设计中；但如果在交互上处理不好，会有很大的缺陷。

内联标签是用作提示性文字，来告诉用户应该填写什么内容，但用户在填写的适合，它就会消失；因此用户无法仔细检查他们是否写下了所要求的内容，这增加了错误的可能性。

另外一个问题是：用户可能会把占位符文本误认为预填数据，因此忽略它（正如尼尔森诺曼集团的眼动追踪研究所证实的）。

• 优点：空间占比小。
• 缺点：在增加错误的可能性。

5）图标标签：图标标签是内联标签的一种演化形式，在一定程度上缓解用户的困惑和自我怀疑的心理。

但就图标而言，用户需要时间来反应它所代表的意思——若表意性不强或者并不是常见的图标样式，用户就要思考和猜测它的含义。

此外，输入项一多，还得记忆那个图标所对应的意思。

• 优点：空间占比小；在一定程度上缓解用户的困惑和自我怀疑。
• 缺点：可能造成用户的认知负担，增加用户记忆成本。

6）浮动标签：用户在输入时，内部标题（提示信息）进行浮动位移，即节省了空间，提示性信息依旧在。

但相比其他几种标签样式来说，需要一定的开发成本。

• 优点：空间占比小，无需用户对标签进行记忆
• 缺点：需要一定的开发成本

关于标签样式的选择

2. 输入域

输入域是表单的核心主体，包含了文本框、选择器、开关、复选框、单选框、步骤条、滑块、上传、标签页等控件（按类型分）。

选择适合的控件样式，能在一定程度上提高表单填写的效率。

在输入域中，存在多种控件样式，那么在设计产品的过程中，我们该如何选择，如何取舍呢？

以下是我在日常工作中的一些摸索，也包括借鉴前辈的一些经验。供大家参考。

1）文本框

文本框包含了单行文本框和多行文本框。

针对单行文本框的设计建议：

a. 选择适合的大小，它的宽度应该向用户暗示所需输入内容的长度来减轻判断负担。

如下图即一典型案例，一个实际不需要花多少钱的金额输入框在左图中进行等宽处理的话，容易误导用户对所需输入金额的判断，造成极大不安全感。

b. 采用字段掩码，自动匹配特定数字的输入格式。

例如：电话、身份证、银行卡等；按照7加减二法则，根据用户的记忆结构来最大化提升阅读体验。

c. 弹出键盘应与需要输入的文本类型相匹配（移动端）。

d. 涉及到金额输入时，当用户输入的金额超过千时，出现最高分位提示，每多输入一位，最高分位随之增加。

e. 文字输入最好有自动补全、自动建议功能，减少不必要的文字输入，减少出错。

例如：填写地址栏通常是表单中最成问题的部分，像地址自动填充（基于用户的定位和输入提供准确的建议）的工具使用户能以更少打字量完成输入。

f. 有限制输入时，给予用户明确的提示，增加用户感知，减少出错率。

知识扩展：什么是7加减二法则？

早在19世纪中叶，爱尔兰哲学家汉米尔顿观察到，有一个神奇的7±2效应；意思就是人们的短时记忆的信息量是7个，可能会上下浮动2个。

针对多行文本框的设计建议：

使用可拉伸的文本框比固定框更好，从使用体验讲，可变化的文本框使页面整体效果更统一。

固定文的文本框当输入文本超过其设置的宽度，会出现内滚动条，当页面上出现两个滚动条时（大页面的滚动条），在使用操作上会带来一定的混乱。

2）选择框

包括下拉列表、选框、开关、日期选择器等。

对于选择框有如下几个建议：

a. 避免设置默认值：除非您认为大部分用户将选择该值，尤其是必填字段。

为什么？

因为你可能会增加错误，用户会快速扫描表单，所以他们可能会跳过一些已经有默认值的字段。

但是这个规则不适用于智能的默认值，也就是根据用户的信息设置的默认值；因为智能的默认值可以使表单更快，更准确地完成。

例如：根据定位数据预先选择用户所在的国家/地区。

不过，请谨慎使用。

b. 当选项很多时，提供检索功能。

c. 提示信息要明确，要让用户明确自己选择的是什么。

3）单选框与复选框

a. 按一定的逻辑进行选项排序，例如根据发生的可能性、难易程度、风险大小来排序。

b. 选项应该易于理解，容易区分。

c. 尽可能提供默认选项。

4）关于控件的选择

a. 选择框优于输入框。

任何高密度的操作，都会引起用户的不适；因此，在输入项的选择时，用选择来代替键盘输入。

• 一方面：简化用户的操作，点击次数远小于输入，减少用户的操作密度；
• 另一方面：减轻用户的认知、记忆负担。

相较于输入框，选择操作步骤少，相对来说效率较高；同时，用户用思考输入值，也不用承担输入错误要重新输入的风险。

用户可以通过选择项，清晰明确的知道有哪些值可以选择，对于一些无关紧要，或者用户较难理解的输入项，可以预制默认值，可以照顾到各阶段的用户。

b. 单选框与下拉选择框。

单选框较为适合选项较少（少于五个），同时选择项之间较为类似，需要强调或对比时，可以优先考虑单选框。

另外，当选项能见度和快速响应优先时，也建议优先考虑单选框。

因为相较于下拉选择，用户可以通过展示出来的选项，直接选中目标选项，提升输入效率。

下拉选择框较为适合选项较多（超过五个），有默认选项或者选择项之间有较大差异，同时下拉选择，最好不要引起随后输入项数量以及页面的变化；否则下拉选择的收起以及页面的变化，易引起用户不适。

若选项过多，超过二十个，最好引入模糊匹配以及一定排序规则（首字母排序、数字排序等），方面用户提前预知选项的大致位置，或通过模糊检索找到相应的选项。

5）关于必填项

大多数情况下，所有字段都是必填项，只有几个字段是可选的，一般用“*”标记必填字段。

但星号并不适合所有类型的用户，记得之前客户问星号是什么意思？

它是页面中的标签还是描述中的标签；同时，并且红色会从用户方面引起负面关联，因为红色表示错误。

为了避免这种误解，可采用文本框内暗提示。

它也是一个比较清晰标志必填项的方式，并且还很节省空间，也能在一定程度上起到视觉降噪的作用。

3. 提示信息

提示信息可以分为引导性提示（帮助文字、输入框提示、错误提示信息）和反馈性提示两种。

这里主要想讲讲错误提示的设计：

1）关于错误提示的最佳位置

Javier Bargas-Avila和Glenn Oberholzer对表单验证的研究发现——在表单顶部显示所有错误信息，会给用户的记忆造成较高的认知符合，会强制用户回忆每个错误输入框中的错误消息。

错误信息提示在输入框行间显示是减少记忆认知负荷的有效方法。

它可以帮助当场识别错误而不是靠回忆错误，缩短反应时间，提高表单填写效率。

因此，错误信息提示与错误的字段邻近放置可以获得最佳性能。

下面来看一个简单的例子，如下图：

当我们在录入客户信息时，假设填写错误手机号码，按照上面的论述，错误提示可以最直观的显示在这4个位置。

哪一个位置是最佳位置呢？

答案是：右边。理由如下：

a. 错误信息提示右边，符合人们从左到右的阅读习惯；用户视觉路径自然流畅，很大程度上减少了用户的精力和视觉工作。

放在左边则恰恰相反，同时左边与用户期望相违背，因为左侧放置更高优先级的元素，是我们的直觉。

但事实上用户需要专注于纠正他们的输入，因此输入框应该是更重要的元素。

b. 对于上边的错误信息提示，有着更高的认知负荷。

当标签顶部对齐时，错误提示和输入框中的提示这两个文本靠得很近会产生视觉噪音，用户注意力被分散，很难专注于其中一个，并且可能混淆它们。

c. 放置下边的错误信息提示，虽然不符合从左到右的阅读习惯，但它确与自然的从上倒下的阅读流程相对应。

手机屏幕缺少水平空间，把错误信息提示放置在下方是个不错的选择。

虽然它可能会增加用户阅读文本时的认知负荷（与类比上边的错误信息提示），但可以通过将它们隔开足够的间隔来防止这种情况。

综上所述，如果是web端请选择放置在右边，如果是移动端则放置在下边。

当然，如果开发时间有限，都选择放置下边也可以，方便适配。

2）帮助信息

有时候需要帮助性信息，来辅助用户完成表单填写。

当文本简短的时候，可以直接放在改输入框的附近。

当文案过长的时候，就需要做气泡框——获取鼠标焦点，则展开信息，失去焦点则消失（在气泡展开时，切忌勿挡住input输入框）。

也有些产品是将帮助信息放在页面顶部，如果是针对全局帮助性信息，则可以采用这种方式。

如果只是针对某个元素提醒，则应将两者放在一起，让用户知道当前处于什么地方，在针对什么进行引导、辅助。

五、复杂业务表单布局结构探索

在复杂业务表单设计中采用单列布局，大家有没有遇到过类似的问题，例如：

• 客户1：“单列右侧空白区域过大，留白多，表单太长啦。”
• 客户2：“单列纵向占比大，表单太长，我看不到全部内容。”
• 客户3：“怎么不采用多列，多列我能看的内容多啊”等等…

针对这些问题，我们团队从自身的业务出发，对复杂业务表单布局进行了相应的探索。

1. 多列与单列的探索

首先，我们根据下图的规则对复杂业务的表单布局进行多方案的实验：

方案一：采用4列布局，标签顶对齐。

那为什么标签不采用右对齐呢？

四列布局，页面已经很拥挤，加上标签长度长短不一且最大长度也无法确定（用户自定义），所以放置采用了标签顶对齐。

总体上来看，缩减的长图并不理想。

方案二：三列布局，标签右对齐的方式。

由于三列布局，页面空间较大，尝试着把标签右对齐，总体上达到了缩减表单长度的目的。

但字段若出现换行，则页面信息模块是混乱的。

根据CXL研究所的发现：单列表单比多列表单完成得更快一些。在这项研究中，参与测试的人完成单列表单的平均速度比多列表单快15.4秒；多列布局虽然缩减了表单长度，空间利用率也提高了，但整体的填写效率降低了，这与表单设计原则相违背。

同时从开发效率来看，单列成本较低（多列需要做响应式）；从业务承载上看，单列扩展性更强，适合复杂多样的业务场景（多列适合交单一的场景）。

综上，最后还是采用单列布局。

2. 单列布局在复杂业务中运用

面临的问题该如何解决？

我们团队重新审视了客户的这些反馈：空白区域过大、留白过大、表单太长、我看不全、不知道什么时候可以填完等等。

我们尝试把这些问题翻译成：我无法预知表单的填写内容，我想要是把空白的地方也利用上我是不是就看全了整个表单。

如果是这样，用户的本质述求就是想要掌控感。

对现有的单列布局做了以下几个处理：

• a. 采用卡片式布局，区分内容；
• b. 增加引导式的定位锚点；
• c. 在锚处加入微动效反馈，给予用户确定感。

感谢阅读！本文给表单设计提供了一个基本的指南，在具体项目中，你可能需要根据产品特性和用户需求进行调整。

文章来源：人人都是产品经理           作者：@Nick 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

编辑导读：如今，谷歌可以说是科技领域最大、最具有影响力的公司之一。正因为如此，它们的数字产品设计会对整个行业产生巨大的影响，成为人们竞相模仿的榜样。在该公司的UI&UX（用户界面&用户体验）设计指南中，设计师们提到了10条原则，不管是iOS还是安卓系统都同样适用。在这篇文章中，作者从这10条指南出发，加上自己的经验和相关案例，在设计方面为大家提供一些建议，希望对大家设计产品有帮助。

6. 利用声音和触感唤起用户的情感

这里的声音特指“Hero sounds”，用于衬托一些喜庆的、重要的高光时刻，它们常被用来激起用户的情感，或烘托一种喜悦的气氛，从而塑造产品或品牌在用户心中的形象。以下场合适合使用 Hero sounds：庆祝用户进行了某项操作；欢迎用户使用新的应用程序或体验；确认用户成功使用某款产品。——《谷歌声音设计指南》

声音可以被用来传递成功、成就或获得回报等信息。谷歌指南中提到，Hero sounds出现的次数不应该频繁，否则无法突出其重要性。通过在同样的环节提供同样的声音，久而久之用户会将这种提示音与成就感挂钩，从而增加对产品的粘性。如每成功更新一次应用程序就会出现庆祝的声音，或者每次待办事项标记为完成后就会出现庆祝的提示音。

不管我们是否注意到这一点，我们所听到的产品的声音与自己的感觉都是相挂钩的。无论是手机发出的“叮咚”的消息提示音，还是MacBook的废纸篓在清空时发出的揉纸的声音，都在某种程度上影响着我们的情绪，也帮助我们更加了解用户界面上发生的一切。

触觉可以和声音配合使用，也可以单独使用。举个例子，在手机黑屏的时候，触觉是唯一一种可以对用户提供反馈的方式。和其他配合使用时，触觉应该强有力、传达愉悦的情绪。——《安卓触觉设计指南》

除了声音之外，触觉设计（如震动）也是一种刺激感觉的好方法，可以为用户提供更加完整的体验。用户可以通过触觉提示来尝试、学习使用某一款产品。在有了不同的触觉体验后，我们将会对产品的某些功能有更加深入的了解。

举个例子，如果某个用户通过APP进行付款，但在付款过程中出现了错误。这时候APP会进行一连串紧张、短促的震动，对用户进行错误反馈。当用户熟悉了这种震动模式之后，下一次再感受到这种震动，就会立刻知道付款出现了问题。

产品设计师很容易忽略声音和触觉这两个板块，而过度专注于画面。但这两个板块却也扮演着非常重要的效果，可以为用户体验锦上添花。

7. 通过动图表达独特的风格、塑造个性化品牌体验

图片来自Material

动图可以增加用户的好感，在互动中为用户增加个性化体验，也可以表现品牌独特的风格。——《谷歌手势设计指南》

动图是我自己设计的产品Confetti中一个非常重要的因素，这是一款运动追踪APP，是为那些追踪自己生活习惯的用户设计的。在设计这款产品时，我希望可以为用户创造出一种满足感，鼓励他们培养好习惯。在这款APP中，我大量使用切换功能，通过不同的手势，界面或进程可以平滑过渡，使用起来非常便捷。当一个好习惯完成时，还会出现彩屑动画飞舞的，加强用户的满意度。

简言之，动图可以应用于不同的场景，通过过渡和变化的吸引用户。

动图可以强化两种元素之间的联系，实现快速切换，迅速解决特定的任务。动图可以让用户专注于眼下最重要的事，不被其他因素所干扰。——《谷歌手势设计指南》

在2020年，你的产品可以在一秒之内激怒用户。正如塔拉斯·斯凯斯基（Taras Skytski）在《用户体验设计中动画使用的终极指南》中指出的那样：“众多研究发现，界面动画的最佳速度在200到500毫秒之间。这一数字是通过研究人类大脑运行机制所得出的。100毫秒及以下的动画因为速度太短而无法被识别，而超过1秒的动画则会造成一种延迟感，让用户感到不舒服。”

通过动图及产生的动画效果（如切换）可以改善用户体验，同时保证可以迅速找到需要的版面，而不被其他信息干扰。但如果动图及切换画面的过程增加了不必要的等待时间，又不能改善体验，那么这种环节就没有必要存在。

8. 通过图像进行交流，并区分和突出产品特性

图片来自Bribble｜制图Elena Petkovska

我们或多或少都有这样的体验：打开一个界面，里面充斥着太多文字和太少的图像。在用户体验设计中，展示画面比阅读文字效果更好。用户不希望通过阅读来理解一款产品，而是希望通过图像对一款产品进行直观的视觉理解。

你所选择的图像应该能够清晰地展示产品特点，不管是用户自己上传的图片，专业摄影师的图片，还是插画风格的图片，它们都应该能直观展示产品外观，反应产品的特点。——《谷歌图像设计指南》

APP里的插图和所有的视觉元素一样重要，好的图片可以让用户界面更加生动，使用户体验更加完善。恰当的图片还能展示品牌风格，成为无声的“故事讲述者”。

我们应当有目的地使用图像，作为总体内容的补充而非替代。照片或者插图最好能够传达足够的信息，如产品外形、风格，APP的用途，状态等。媒体界有这么一句话：一张图片抵得上1000个字。你可以在Unsplash、Pexels、Adobe Stock等网站上找到高质量的图片。

9. 关注产品的像素密度

图片来自Material

用户界面设计中应该关注产品的像素密度，让界面可以适应不同的屏幕。——《谷歌像素密度设计指南》

像素密度（PPI）是用来衡量每物理英寸的像素数。另一个常用的单位是DP（Density-independent pixels，有时候简称为DIP）。像素密度=屏幕宽度或高度（以像素为单位）/屏幕宽度或高度（以英寸为单位）。

在设计界面时，我们不应该只关注像素，还应该关注不同设备的像素密度。这样可以让我们在做设计时保证元素适当缩放，以适应不同屏幕的尺寸。

举个例子，我们现在有一个按钮素材资源，大小为200 x 50 px。在一个160ppi的屏幕上可以原画显示；在一个320ppi的屏幕上它就会扩大成400 x 100 px，相当于原始素材的两倍大。

通过以上例子我们可以了解，在像素密度不同的屏幕上，素材呈现的状态是不一样的。在实际应用中，素材可以会被放大三倍甚至四倍，如果素材不够清晰，就会在拉大后虚掉。这就需要我们在选择素材时格外谨慎，尝试在不同设备上打开并检查。

素材密度如何适应屏幕尺寸？举个例子，iPhone XS Max的屏幕是414 x 896 pt，注意这里的尺寸是物理尺寸pt，而非像素。如果以像素为单位计算，那么它的屏幕是1242 x 2688 px。所以当我们为iPhone XS Max设计应用产品时，我会首先考虑用414 x 896 pt的素材，然后在输出素材时将其乘以3。

10. 考虑设计在线/离线状态

图片来自Material

离线状态可以让用户知道这款应用程序没有连接网络。如果你的产品有一些功能需要联网使用，你最好能向用户明确显示连线状态。——《谷歌离线设计指南》

离线访问功能是设计师经常忽略、对用户体验影响却非常重要的一环。虽然有些功能离线也可以使用，但是在能联网的时候，最好还是主动提示用户，推荐他们连接网络。

如果有可能的话，要提前告知用户下载相关信息，以便脱机访问。最常见的例子就是Spotify等音乐应用程序，它允许用户下载歌曲，以便在没有网络的时候也能继续听歌。

假如你的产品不像Spotify或者Netflix那样需要下载具体内容，你可以发挥创意来设计在线、离线两种模式。

谷歌浏览器在离线页面提供恐龙游戏就是一个著名的例子（在谷歌浏览器连网的过程中，离线画面会出现一只霸王龙，按空格键或者向上的箭头就能控制霸王龙——译者注）。这个小游戏填补了用户等待连线的时间，将消极体验转变成了积极体验。

11. 总结

我希望这份设计指南可以为你提供一些想法。除了谷歌的设计指南之外，我们还可以在IEM Carbon、Zendesk Garden、Workday Canvas等网站找到关于用户界面和用户体验的设计指导，在这一领域进行更深入地探索。

文章来源：人人都是产品经理           作者：Danny Sapio           译者：Michiko

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务