提纲：

1、为什么用户感觉复杂

2、如何简化概念，降低认知成本

3、如何让流程简短高效

4、如何简化页面信息布局

5、如何让操作更轻松

6、结语

一、为什么用户感到复杂

你是否曾收到过类似的反馈：

“这文案是什么意思？”、“这能干什么？我需要干什么”、“那个功能在哪里？我找不到”、“要设置这么多项，好麻烦啊”、“这不能拖动吗？”…

这些都是用户感到复杂的反馈。从用户的感知层面分析，让用户感到复杂的原因可以划分为四大方面：概念、流程、界面、操作，以下将详细阐述原因。

1、概念复杂

导致用户感觉产品复杂的其中一个主要原因是：用户难以理解产品的概念模型。概念模型指事物的基础定义及行为模式。（例如：汽车，一种在陆地上行驶的交通工具。通常需要司机驾驶，需要消耗汽油… ）用户根据概念模型对事物的行为进行预测，构建出自身的心理模型。

因此，当产品没有清晰、准确地传达出概念模型，将导致用户产生错误的心理模型。用户需要在大量探索过程中，逐步纠正自己的想法，最终才能了解产品实际的概念模型。

另外，根据「雅各布定律」和「设计心理学2：与复杂共存」，用户基于以往积累经验去理解新事物，即在使用产品前已构建心理模型。而当产品的概念模型与用户的心理模型不匹配时，用户在使用产品的过程中将持续产生认知冲突，也将给用户带来巨大的认知成本。尤其对于传统工具型产品，颠覆型的概念模型，反而提高用户的认知成本，让用户感到复杂难懂。

2、流程复杂

工具型产品的流程主要分为两方面：单功能使用流程、多功能组合使用流程。

在单功能使用流程方面，难免会遇到一些功能在生效前，需要经过多个设置步骤的情况。虽然环环相扣的流程能够降低产品的出错概率，但却会给用户带来更多的成本。对于每个步骤，用户都需要经历「理解」-「操作」-「反馈」的环节。在一些情况下用户甚至不堪忍受，直接放弃使用功能。例如，在Airtable中创建甘特视图，需要经历3步才能完成配置，查看到效果。对于一些抱着尝试心态的新手用户来说，这是难以接受的体验：在还没理解功能的作用效果前，就要经历如此复杂的流程。

而多功能组合使用流程方面，工具型产品在产品功能设计层面，往往将功能的颗粒度设计得相当精细，以灵活满足各种场景需要。就Excel中的单元格而言，可设置单元格字体、单元格背景、单元格边框。但如此精细的功能设计将导致，若用户需要简单实现整体的目标效果时，其操作流程就变得十分的冗长。甚至在一些需要重复设置的场景下，工作量将几何级数地增长，让用户的工作流程将变得极其复杂。

3、界面复杂

大多数工具型产品都希望能在一个界面让用户完成所有任务，却忽略了用户在现实场景下的使用流程。通常一个任务完成的前提是，需要按照一定的步骤完成若干个细项任务。若无法聚焦于每一个个细项任务，而需要耗费大量的时间精力来排除其他信息的干扰，则会产生“注意力被分散”、“太复杂”等体验感受，导致最终任务完成难度增加。

对用户来说，界面内的信息越多负担就越大。工具型产品通常伴随数量众多的功能和选项，一味的平铺功能，只为了展示自身的功能多样性，缺乏合理的组织布局，导致用户需要在几十甚至上百个选项中进行选择，则会大大降低用户使用效率。

4、操作复杂

设计者在不考虑具体操作场景的前提下，不同功能均使用同一种交互方式，名义上为了让用户降低学习成本，但实际上却是不负责任地将复杂的理解过程转移给了用户。对于用户而言，复杂的操作可以分为两种：一种是「步骤复杂」，例如需要多次点击、页面跳转、设备切换等；另外一种则是「认知复杂」，例如交互方式与心理预期不匹配，需用户自行转换。无论是哪种，对于工具型产品而言都是灾难的。

除此之外，缺乏及时的反馈也会给用户带来不必要的麻烦。用户需要反复操作比操作中的冗余更可怕，就像高速公路的减速带，不断降低用户的效率。

二、如何简化概念，降低认知成本

1、隐喻、类比已有事物

当产品的概念模型越趋近于用户的心理模型时，用户就越感觉产品容易理解和使用，所要求的使用能力和学习成本就越低。而用户心理模型是根据用户的目标，以及其过往的经验构成的。因此在设计产品的概念模型时，应尽量使用隐喻、类比的方式，让产品的文案概念及交互行为模式）与用户所熟知事物相近。从而让用户建立联想，激活行为记忆，降低认知探索成本。

HyperCard，苹果的早期时间的一款脚本系统。它以「Card」对产品进行命名，同时在产品交互形态上以一叠卡片的形态呈现。这让用户很容易就联想到现实生活中的卡片小册子，进而快速地了解到产品的大致行为模式。

需要注意的是，传统工具型产品的用户往往已被已有产品教育，积累了一定的使用经验、习惯。对于此类产品的概念模型简化应慎重考虑，因为用户所建立的心理模型是较难改变的，颠覆性的变化会让用户之前付出的学习成本付诸东流。此时可尝试用户的其他感知层面切入（流程、原型、操作），以探索简化的可能。

2、巧用大白话

在实际业务场景中，难免会遇到概念新颖、逻辑复杂的产品功能。由于用户从未曾接触过类似的事物，未建立起相应的心理模型。在设计产品概念时也就难以使用隐喻、类比的方式来降低产品的复杂度。此时可采用「目标导向」的设计方法，帮助用户快速理解产品功能。因为用户除了基于过往经验建立心理模型，还可根据目标而对产品的行为模式做预测。

与其生搬硬套地创造概念，不如在合适的使用场景下，使用目标导向的大白话，清晰的传达出功能的目标效果。让用户快速了解产品功能的目标效果，减少全新概念的理解成本。

例如，在交互原型设计中，按钮往往存在多个状态（默认态、悬停态、点击态、禁用态）。Figma对其赋予概念“变体（Variants）”，用户难以对此概念产生目标效果的联想，无法建立起对应的心理模型。而在MasterGo中，亦存在相同的功能，但使用的是更加符合目标效果的大白话“组件状态”。

三、如何让流程简短高效

1、快速、直观呈现效果

对于工具型产品来说，效果直观是非常必要的。一来能让用户的探索快速获得反馈，降低用户的理解成本。二来能带来更加轻量的操作体验，鼓励用户探索，给予用户充分的掌控感。工具型产品的设计者应以此作为设计理念之一。但难免会遇到产品功能的逻辑流程较为复杂，需要经历多个环环相扣步骤的情况。而研发者往往更关注与代码的逻辑及可维护性，更加推荐逻辑严谨但流程冗长的设计。这时设计者应坚守设计理念，不断在用户体验与功能逻辑中寻找平衡，贯彻落实设计理念。

对于冗长的流程，设计者可通过以下方式解决：

1.根据场景自动化配置

良好的产品应该是聪明、高情商的，能够根据用户的实际情况进行自动化的配置，以减少用户操作。在进行自动化配置时，应谨慎梳理清楚用户的所有场景，以及每种场景意图，避免过度聪明，导致画蛇添足。

例如，在Notion中可一键创建Timeline视图，无需用户进行任何配置。因为其做了场景自动化配置处理：自动配置所需要的字段。

2.清晰的修改配置入口

在进行自动化配置后，不可避免可能存在场景理解错误的情况，导致自动配置的结果不符合用户实际情况。此时应提供清晰的修改配置入口，例如在用户可发现错误的地方中提供入口，允许用户在发现错误后即可发起修改。

3.异常后置处理，先让用户用起来

不应要求用户在功能生效前处理完所有异常。因为对于每一个步骤，用户都要付出理解及操作成本。尤其在处理异常情况时，用户需要耗费巨大的成本，极有可能因阻碍过大，从而放弃使用功能。设计者应将异常后置，确保用户能都快速查看功能效果并使用起来。对于异常的问题，应允许用户后续持续处理，不阻断功能的使用。

例如，在Figma中导入sketch文件会遇到，多种格式适配问题。但不影响导入流程以及FIigma的正常使用，用户可以在倒入后在对异常进行处理。

2、基于目标组合功能，一键快速设置

一般来说，工具型产品服务的用户群体较广，需要满足丰富的个性化需求。在产品功能设计上，功能的颗粒度较小，能支持精细化的配置。这样导致用户需要实现组合的目标效果时，需要执行多个功能配置，整体的配置流程较为冗长、复杂。设计者在设计工具型产品时，除了要考虑单个功能的使用体验，也要从用户目标出发，全局考虑用户使用产品的整体流程体验。

如何既能保持产品的「灵活度」以满足丰富的场景，又能减少整体操作流程，提升用户效率。「一键操作」及「自定义脚本」是较为有效的方法。

1.一键操作

基于用户的目标，可以对一些列相关的功能进行组合，允许用户一键设置，快速达到目标效果。同时应存在更多配置的入口，允许进阶用户进行更加详细的配置。例如，Keynote中可对文本框进行快速样式设置，设置内容包含字体颜色、文本框背景颜色。当用户需求较为简单时，只需设置一次即可达到目标效果，而无需设置多次。

2.自定义脚本

自定义脚本，指允许用户将一系列操作/设置组合为一个操作组的能力。在一些进阶场景，用户往往存在个性化的需求，对产品功能有着相对固定的使用习惯。自定义脚本，能够极大帮助用户减少重复性的操作，提高整体效率。

在Figma中，充满了类似概念的设计，如：组件、样式（文字、颜色、效果）。用户可自定义保存相关的配置参数，以方便多次复用或一键修改。

四、如何简化页面信息布局

1、围绕行为组织功能，走一步看一步

在设计界面原型时，需要先了解用户的任务目标，用户想做什么，先做什么后做什么。充分掌握用户心理模型的行为路径，基于用户的行为路径进行组织功能，以确保用户在每个环节中所看到的信息都是必要且准确的。工具型产品通常拥有多个可选设置项，拆分任务步骤可减少用户被非必选项的干扰。

除此之外，不同的用户角色的行为路径也会有所不同，例如：创建者，协作者，以及是否有编辑权限等等。不同的用户场景对于功能的诉求也是不一样的，而这就需要设计师从产品的定位，主流用户以及使用习惯综合考量。在优先满足主流用户场景的基础功能上，再进行其他场景的功能增减。

2、功能层级分区，巧妙地藏起来

1.功能分区

George A. Miller在《神奇的数字7加减2：我们加工信息能力的某些限制》中表明，人的大脑最多同时处理7±2个信息块（即5-9个），若超过则出错的概率将会大大提高。对于无法避免复杂信息的情况下，可以将烦琐的信息分块，组织成清晰的层级结构，例如：微软Office 中顶部工具栏包含上百个功能选项，为了便于用户能快速找到想要的功能，他们将所有功能进行分块，包括：字体、对齐方式等模块。每个模块下再细分具体设置项，具体设置项又包含了其它功能。基于清晰的层级结构，用户可快速通过「字体模块」-「字体设置项」- 「微软雅黑」三个层级中快速找到想要的选项。

值得注意的是在信息分块时，需制定出清晰的划分界限，可通过询问不同的用户来判断界限是否清晰。

与此同时，布局效果是否清晰，对于简化界面设计而言同样重要。合理运用「格式塔原理」中的「接近性原则」，将同类元素放在一起让用户在视觉上感觉是一组，再根据同组元素中的重要性不同，大小上也应有所差异。做到让用户只看一眼便可快速找到想要的功能。

2.隐藏高级功能

「帕累托法则（二八法则）」同样适用于工具型产品设计，即20%的功能影响80%的用户体验结果。换句话说，大部分普通用户经常使用的基础功能仅占20%，但影响程度却远超于剩下的80%。所以需将功能划分为基础功能和高级功能，在优先展示基础功能的前提下，再考虑高级功能或自定义功能的展示，必要时可将高级功能或自定义功能进行隐藏，但前提需是可见的。例如：更多设置，更多选项等，即对专家用户始终保持可见，但又不打扰普通用户。

五、如何让操作更轻松

1、减少不必要的操作，使用更自然的交互

简化操作的过程中，针对不同的操作赋予最自然的交互形式能减少用户操作过程中的精力消耗。自然的交互应该是用户无意识的操作，是基于过往生活经验，阅历，学识等的一种本能，几乎不需要过多的学习成本即可完成。例如：用户旋转一张图片。相对于在输入框中输入旋转角度参数而言，将光标直接操控在图片上旋转显得更自然。输入需要至少三步（点击文本框-敲击键盘数字-点击确认），而直接旋转只需要两步（点击-旋转）。因为对于用户而言，点击图片进行旋转更接近现实生活中的操作，不管是交互步骤还是心理认知上，都会降低用户的操作难度，让用户觉得产品更简单更自然。

2、提供及时的反馈与帮助，避免重复操作

在操作过程中得不到反馈，出错后再重新填写，同样会增加操作的复杂性。在尼尔森十大可用性原则中，第一原则就是系统状态的可见性。系统需要让用户知道自己在做什么，需要让用户知道系统做了什么。例如：在表单填写时及时反馈是否出错，在格式设置时及时反馈是否生效，可以让用户少走弯路。必要时给用户提供帮助也能简化用户操作的复杂性，提高操作的成功率。

六、结语

引用《简约至上》中的所说：创造简单用户体验的秘诀就在于把复杂性转移到正确的地方。任何产品都具有一定的复杂性，设计的目的不是为了消除所有复杂性，而是将它们放到最合适的位置。简化产品的复杂性替用户排除不必要的干扰，通过设计师的努力给每一个用户带来简单、愉悦的使用体验，让复杂的工作更简单。

参考文献：

[1]Bill Moggridge.Designing Interactions[M].MIT Press，2006

[2][美]Alan Cooper,Robert Reimann,David Cronin,Christopher Noessel,Jason Csizamdi,Doug LeMoine.About Face 4 交互设计精髓[M].倪卫国，刘松涛，薛菲，杭敏译.北京：电子工业出版社，2015

[3][英]科尔伯恩(Colborne.G).简约至上：交互式设计四策[M].李松峰，秦绪文译.北京：人民邮电出版社，2011

[4]刘津，李月.破茧成蝶：用户体验设计师的成长之路[M].北京：人民邮电出版社，2014

[5][美]唐纳德•A•诺曼.设计心理学2:与复杂共处[M].张磊译.北京：中信出版社，2015

作者：ISUX设计

转载请注明：学UI网》面对繁冗，拒绝“摆烂”｜工具型产品如何简化设计

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:   ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系010-63334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

正文

经常使用爱奇艺刷剧的同学，有没有发现爱奇艺的应用图标又变了。前段时间爱奇艺针对品牌设计进行了较大的调整，最近又悄悄地将应用图标的背景色换成了这种多彩色混合渐变的形式。

针对这个视觉效果估计大家各有看法，我们就不讨论这个话题了，今天黑马哥是来出教程的~O(∩_∩)O~。

这个类似于极光/弥散渐变的风格最近也比较流行，在 UI 场景中的运用也是比较普及的，被运用到应用图标的案例中相对较少。大概的回忆了一下，也有一些产品会使用，特别是比较知名的 Instagram 很早之前就使用了，也成为了流行趋势中的优秀案例之一。

通过极光/弥散渐变（混合渐变）的形式强化应用图标外轮廓背景，不仅可以提高视觉感，也是体现年轻化趋势的一种色彩表现形式。不过渐变中的色彩本身也是关键性的因素，如果色彩不够年轻活泼，带来的效果也是千差万别的。

一、渐变的表现形式

渐变色在我们的设计中是非常普及的，渐变色分为线性渐变、径向渐变、角度渐变、混合渐变、流体渐变等形式。不同的渐变形式可以营造不一样的视觉体验，可以丰富色彩环境、强化光影质感、增强层次感和空间感等。

1、线性渐变

这是最常见的一种渐变方式，具备明确的方向性，由两种或者多种颜色组合形成。相较于单色来说，线性渐变可以使得画面更加丰富，色彩营造出的层次感更强。

2、径向渐变

径向渐变是以中心向外扩散而形成的圆形渐变，可以作为立体感的表现，也可以营造向中心聚拢的光影效果。

3、角度渐变

角度渐变形成类似于雷达扫描的效果，属于运用相对较少的渐变形式。在一些应用图标的外轮廓背景中会被使用，也可以作为营造产品的光影变化。

4、混合渐变

混合渐变就是多种颜色随机混合，色彩形成不均匀的自然弥散开，也可以成为弥散渐变或者极光渐变。是最近比较流行的视觉风格，可以呈现出丰富的色彩变化和随性自然的年轻化趋势，被广泛应用到平面设计、UI 设计、电商设计等众多视觉设计领域。

5、流体渐变

流体渐变就是多种颜色渐变组合，形成带有流动感的视觉效果，通常作为背景来丰富设计的视觉感。也有动态形式的流体渐变，在 APP 和一些屏幕壁纸中出现，带来的感官体验也是非常不错的。

随着视觉感官体验的不断追求，设计师已经不满足于趋于平面化的渐变形式，探索出造型多变、色彩丰富、刺激感官的视觉体验，以更加丰富的表现形式来探索渐变方式。

二、渐变小教程

线性渐变、径向渐变和角度渐变实现起来比较简单，软件自带的渐变属性即可满足。下面重点给大家分享如何实现混合渐变的效果，以后再单独给大家分享关于流体渐变的技巧。

混合渐变顾名思义就是将多种颜色进行混合，形成色彩丰富的过度效果，需要把控的是颜色之间的自然过渡。

方法一：

通过绘制几个不同颜色的形状图形，然后执行高斯模糊形成混合渐变，模糊的参数值要适当大一些，一直到颜色自然过渡为止。

方法二：

如果想要随机性大一些，可以通过画笔工具随意涂抹颜色，这样形成的效果更加随机性。然后再执行高斯模糊将颜色融合，带来自然随性的视觉体验。

三、分享几个案例

不能只是纸上谈兵，只有反复磨练和尝试才会熟能生巧。根据以上的方式黑马哥完成了以下的作品案例，大家也一起来动动手吧！

1、邻近色系易把控

混合渐变技法层面来说并不难，配色是相对具备难度的，很多同学都会因为配色不到位而做不出优秀的作品。针对应用图标设计中的配色来说，邻近色系的搭配是最容易把控的。选择色相范围在 60° 以内的色值，混合出来的色彩排斥感都是比较低的，融合度比较高，能够呈现出比较舒适自然的视觉感官体验。

如果选择了色相角度大于 60° 的色值，只要数值的增减关系控制在 30° 以内都属于可控范围，这时候如果出现较大的色彩排斥感，可以通过降低不透明度来进行视觉平衡。

2、强视觉感还得对比色

虽然邻近色的处理比较容易把控，但是带来的视觉感也是与颜色对比关系成正比的，想要达到强视觉感还得选对比色。色相选择范围在 120°~180° 之间的色值，容易形成较强的视觉张力，通过增加高斯模糊的值才能稍微过度相互之间的色彩排斥感。

3、学会举一反三

今天分享的经验不局限于应用图标的设计范畴，我们要学会将这个技法举一反三，运用到更多的设计场景中。比如在下面作品中的一组信息卡片的设计中，通过混合渐变形成的卡片背景提高了局部的视觉感，配合磨砂玻璃质感的运用，提高了该部分的视觉感官体验。

4、其他作品欣赏

为了辅助大家理解和开拓思维，为大家选择了几个类似的案例作品，希望可以带给大家更多设计灵感。（以下作品版权归属原作者，仅作为学习交流）

四、布置一个小作业

通过对混合渐变实现技巧的学习和案例欣赏，相信大家对于混合渐变有了比较全面的认知。学以致用的目的，下面为大家准备了一个小作业，希望以此来强化大家的理解。

根据以上示意图提供的高保真原型图，以混合渐变的形式增强其作品的视觉感。

以下方案为黑马哥完成的一个示意，大家可以转换思维和调整新的配色方案，输出不一样的全新作品。

作者：黑马青年

转载请注明：学UI网》这个效果原来是这样做出来的

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

一、删除，实现表单轻量化

前几年，我们在银行或者移动营业厅开通一些新业务时，都会填写表单，通常是密密麻麻一堆信息。但是实际需要填写的内容可能只有2～3项，业务人员会特意勾选出来给客户，其余的都是非必填项，或者是业务人员填写的。

线上表单设计时，没有专门的业务人员指导，用户更容易迷失。所以设计师或者产品经理的首要任务就是尽可能地减少表单信息量，降低用户的认知负荷。

最近在做一个表单的优化，业务方要求增加“入参”、“出参”两个表格项，说是用户会看。与用户沟通后，反馈也说“会看一下”。但是在深度挖掘用户场景后，发现用户确实会查看这个信息，只不过不是在当前环节查看，而是在结果项中查看。

所以我们最终去掉了这两个信息量较大的表格内容，从而让整个表单的信息量得到了明显的下降。

因此面对复杂长表单，我们需要从需求入手，判断是否有必要让用户提供如此多的复杂信息。

二、组织，让表单更加有层次

当我们不得不面对复杂表单时，如果采用简单内容平铺，用户看到的是满屏的散点信息，造成信息识别困难，用户一时间难以找到填写思路，反而增加用户的心理负担。因此信息的层次性，对于复杂表单至关重要。

首先要从内容和视觉层面让复杂信息变得清晰、规整，更加符合用户的认知习惯。例如，可以利用分组标题、分割线、卡片，按照不同信息的类别、属性和相关性进行区块划分。

根据不同的布局和交互，主要有以下4种表单设计模式。

1、顺序表单

表单分组后，可以按照业务逻辑顺序铺开展示。用户只要按顺序填写就可以了。但是对于超长表单，这种布局方式下，用户无法全览页面信息。页面上下滚动、定位查找带来的交互成本比较高。

1）平铺表单

2）卡片表单

因此顺序表单更多地用在业务信息比较简单的场景中。

2、锚点表单

为了解决长表单的定位效率问题，可以在顺序表单的基础上增加锚点。另外锚点还可以帮助用户快速了解表单所包含的内容模块。

根据锚点的布局，可以分为横向锚点和纵向锚点两类。锚点需要吸顶方便用户操作。本质上来说，锚点表单是顺序表单的优化版本。

3、标签表单

如果长表单内容没有依赖关系，还可以将表单拆分为几个相互独立的标签内容，这就是标签表单。

不过标签表单更强调内容的并列关系，常用于配置表单中，例如 MAC 或者 Windows 系统的配置弹窗。

标签表单在全新表单中应用较少。因为标签表单容易造成内容遗漏，并且无法告知用户哪些标签已经填写，哪些标签未填写，或者无法清晰地展示校验信息。来回切换标签查看信息，也会影响效率，因此主要用于用户有目的的配置行为中。

4、步骤表单

步骤表单是一种常见的表单拆分方式。通过节点将子表单串联起来，形成一个完整的业务闭环。例如阿里云的云服务器订单流程，或者一些开户流程等。

步骤表单有几个特点：

1）过程串联

理论上来说，步骤表单有明显的操作顺序，用户需要按照节点完成内容填写，因此不会产生信息遗漏。当然也可以根据实际的业务场景，设置选填节点。但是总得来说，步骤表单更强调的是顺序操作。

2）业务引导性

对于复杂业务，步骤表单可以将分散在不同页面中的独立业务串联起来，在一定程度上具备新人教学功能，帮助用户了解业务逻辑。减少用户自定义操作时在不同页面的跳转，从而提供新人用户的操作效率。例如系统配置向导类的步骤表单。

3）逆向操作

由于步骤表单存在正向和逆向操作，因此设计时还需要考虑清楚逆向操作的设计逻辑。例如：

• 当用户想要修改前面步骤信息时，除了逐步返回，是否可以步骤条直接跨节点修改？
• 用户中途退出表单后，重启时是从第一步开始，还是直接从未填写的步骤开始呢？
• 用户如果完成了步骤条表单填写，想要二次修改时，是用普通表单，还是仍然使用步骤表单形式呢？

4）节点的平衡性

步骤表单可以分拆信息，化整为零。但是信息节点也不能过多，否则同样会影响用户的操作效率。所以要减少不必要的流程节点。

最近在做设计时，发现步骤表单最后一步是内容预览。通过用户调研发现，部分用户会谨慎地预览前面４步填写的内容。而另一部分用户则认为，刚填写了内容不需要预览，强制预览的设计并不友好。该如何平衡设计呢？

最终我们选择了将预览节点取消，将预览功能调整到第４步，采用「预览」按钮的形式。既满足了部分用户预览的需要，另一部分用户也可以不做预览，直接提交申请。

所以步骤表单过程中的节点具有一定的强制性，需要谨慎对待，保证节点的合理有效。

三、隐藏，让表单更加灵活

1、模块隐藏

表单实际上是任务信息的集合，为了具有更高的适配性，内容通常是多种场景的集合。而场景有高频、低频区分，对于高频信息需要优先展示，便于提高用户的填写效率；对于低频场景，可以隐藏弱化展示，从而降低整个表单的复杂度。

例如我们常见的「高级配置」，通常在表单的底部默认收起展示。

2、信息隐藏

复杂表单中信息会出现多级信息共存的场景。这种场景下，复杂表单默认展示当前选项对应的子内容，隐藏其他选项的内容，从而提高信息的指向性。

3、合理的组件形式

比较典型的就是单选和下拉选择器如何选择。有人为了强调效率，一味地追求单选按钮平铺展示，认为单选更加直观，用户不需要点击下拉滚动查看备选项。但是用户同样需要逐个浏览选择，反而增加了整个页面的信息量。

所以单选框更多用在备选项较少的场景，如果备选项较多，建议优先采用下拉选择器，隐藏备选项。

四、转移，扩展表单的异步空间

1、信息转移

在表单设计时，可以将部分二级信息转移到弹窗、抽屉中，利用浮层空间拓展业务内容，根据用户操作逐级加载出来。从而减少表单的信息量。

例如下图中，没有将「所有配送区域及运费」直接展示出来供用户选择，而是放在了弹窗中，表单中只呈现最后的选择结果。既简化了表单的内容，又让选择结果更加突出，方便用户的查看和校验。

2、记忆转移

现在很多浏览器都增加了密码存储功能，减少用户记忆成本。

而在电商购物网站可以设定默认的收货地址。系统自动读取调用，从而减少用户的输入操作。

3、行为转移

现在越来越多的网站支持「手机短信验证码」免密注册登录方式，或者第三方登录方式，或者手机端扫码登录。将原有的表单填写转变为系统行为，从而降低用户的行为成本。

好了，以上就是我总结的表单设计的内容～

重复一遍：

• 删除，实现表单轻量化
• 组织，让表单更加有层次
• 隐藏，让表单更加灵活
• 转移，扩展表单的异步空间

作者：子牧先生

转载请注明：学UI网》设计基础(7): 简约设计4原则在表单设计中的应用

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

在设计中，相邻的元素比分开较远的元素会更加吸引人注意，在做设计阅读顺序的时候，利用设计分组是一个非常有效的方法，将不同信息进行视觉间距分组，能提升用户对于内容上的理解。

如上图slack的设计，插画引导图和底部按钮上面文字拉开了距离，使得内容更聚焦。第二个界面的顶部头像和下面的文字也是通过分组形成了对比。

stadium-live的产品设计上，登录页面按钮为一组，顶部品牌LOGO和slogan一组，人物为一组，每组信息之间分组非常清晰，每一组都不会对对方视觉互相干扰，间距非常合理，用户阅读从一组信息到另外一组信息也很清晰。

后面两张页面也是如此，顶部的导航，和下面表单信息，以及头像和底部按钮，通过分组处理，内容更加符合用户的视觉动线。

在球员定制的处理上，最左边那张图，通过卡片和线条分组处理，从视觉上很清晰的看见排名，哪个球队和哪个球队之间比赛。

当一组信息比较接近，证明必须是有关联的，如果距离比较远，这意味着这组信息和他们是不同的，简单来说，通过邻近性，通过分组创造这些关系，为信息带来层次。

二、运用空白建立层次 

classpass的设计不会使用太多的视觉元素，而是运用留白把内容进行分组，每个页面的留白恰到好处，同时留白本身就是对信息进行分组，所以页面中减少了很多线条使用，页面会更加干净有品质感。

must是一款电影软件，整体设计非常杂志感，页面就是通过图文处理，以及留白空间的处理，增加对比，基本产品体验你不会感觉到视觉负担，元素之间的信息组织的非常清晰。

在电影展示页面，信息的处理，以及打分设计上，重复运用留白来处理信息层级，在设计中，当你元素周围留白越多，它产品的注意力也越强，如右边的打分页面，几乎所有焦点都在这个弹窗上。

artsy是一款艺术品电商网站，整个app的设计也充满了艺术气息，每次我设计找不到感觉时候就会去打开看看，里面的排版，还有设计的细节处理，都值得我学习，但我喜欢的还是他对于板式和留白空间的处理。

在首页设计，我最喜欢他相框的设计，就像欣赏美术馆的一幅画，页面留白也非常大，衬线体和非衬线体的对比也运用的非常好。

整个APP的设计被大量留白包围，虽然现在流行各种质感，各种光感，C4D的设计，很多设计师认为设计越多越好，但是大量视觉元素会让页面过于饱和，如果没有很好的视觉引导，用户会感到不知所措。

三、运用氛围建立层次 

有设计感的纹理从视觉感受上比简约主义更能吸引用户注意力，但是背景纹理运用不能为了设计而设计，而是需要和产品内容有关系。比如纹理和文字内容，和信息是密切相关的。如上图，是一款打车软件，背景结合了打车的地图，公路线路，用车场景，让页面对比和设计层次更加突出。

jour这款产品在设计上，背景通过有层次的氛围纹理和质感，使得页面氛围感很强，层次细节更加丰富，当然在设计的时候切忌对于设计氛围过度运用，那样会让用户分散注意力。

其它场景上氛围纹理的运用，卡片上通过系列插画的塑造，页面虽然有很多插画，但是页面平衡感同样重要。需要考虑用户在界面看见的和其它页面视觉感受是一致的。

氛围除了图形，其实色彩也是很重要一种方式，我很喜欢的ASANS的设计，在背景上就是运用了一些几何图形的肌理效果让整个空间感更加丰富，这些几何图形丰富细节同时也让整个内容更加凸显。

如上图是他里面一个注册登录场景，在界面中，除了背景灰色底纹通过几何图形来烘托视觉层次，同时在插画上也是非常巧妙，用户输出，完成后，整个插画到品牌图形的连贯变化体验非常好。

Sift是一款新闻类阅读产品，这类型产品设计一般就是文字排版，设计简约为主，但是sift运用了一种大胆的设计，背景氛围上采用一些点线底纹的肌理效果，和内容结合的很平衡。

Lugg是一款货车APP有点像国内的货拉拉，整个设计也氛围感非常强，运用的全插画设计，在页面每个细节，从引导页，让页面核心功能设计都能看见完整插画的运用，我目前我看见运用插画氛围作为主设计最好的产品。

感兴趣的同学可以去美国苹果商店去下载使用，页面中增加氛围是一种增加层次很好的方式，但是同时需要主要好视觉平衡，不要做到本末倒置。

四、运用衬线字体和无衬线字体建立层次 

字体对比，运用衬线字体和非衬线字体对比是非常常用的方式，如上图运用了Adelle Sans字和Tiempos字体这两款字体的对比让页面内容结构非常清晰。

上图官网的设计，干净的排版，通过字体大小，字型进行对比，体现出视觉层次。

字体的选择本身也是设计中很重要的因素，好的设计不仅能提升设计品质，同时也能让页面视觉层次更加分明。

五、结语 

回归设计本质，其实我一直觉得设计这个工作就是一个翻译官，我们的使命是让用户使用产品过程中更加易懂，同时我们能方便地解决他们的问题，而不仅仅是专注在界面美观本身上，今天分享的这些提升设计层次的一些技巧，也是为了让页面有更好的体验。

作者：叮当猫

转载请注明：学UI网》这么好的设计排版技巧，不看亏了啊！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

如果光看视觉不论主题感觉还不错的，但最大的问题也是不符合主题，主体是一个现实的篮球运动员，却搞了很多魔幻的元素，结果就很像魔幻篮球似的，这样在练习的时候可以试试，但作为一个项目需求肯定是不会让你过的。

再来看看修改后的：

修改后的图整个就和谐统一多了，更符合主题。

我们做图的时候符合主题是最基本的，那到底该怎么做呢？今天就给家分享一下设计思路。

一、明确风格

视觉设计师经常会遇到各种各样的需求，首先我们要做的第一件事就是了解需求，明确风格。
我们可以通过了解需求背景，和观察人物素材来了解，之后再去推进设计。

我们来看看素材：

这不是NBA巨星科比么？！明显是现实题材，不应该加入一些魔幻、科幻什么的元素进去。

二、明确需求

明确需求的目的是为了抓住设计关键点，方便为接下来的设计推进提高效率。比如这次作业是要求大家设计一张带有神秘感的剪影海报，我们可以找剪影的参考来提取这类视觉表现的关键点是什么：

找了很多参考，可以看到剪影视觉的效果还是蛮强的。很容易出效果，通过观察我们要学会提取里面的关键点：

我们要做的就很明确了，在一个场景里设置一个光源，再加入人物调黑放在光源前面形成对比。

三、元素联想

我们的人物素材是篮球员，我们就可以通过篮球运d动员这一个点为中心去发散联想：

再用这些点来组成画面，就会很符合主题了。

比如我们的场景可以是球星的发布会背景墙：

一个简单的场景就ok了

然后是我们的光源：

原图中就是一个圆，就比较普通。
其实光源也可能是各种各样的造型，来增加设计感和主题感。我们刚才联想到有篮球，光源我们就可以用篮球来做。但我又懒得画，怎么快速的做一个呢。这里给大家分享个省力的小办法。

我直接从开源的图标网站去下载，里面的图标都可以免费用，且可以下载到矢量文件。

直接下一个不错的放图里看看：

emm，感觉有点太粗了，一点也不透气，没关系。我们把源文件拖进AI里调整下描边粗细就可以了：

再放回图里看看：

这样就轻薄透气多了！再给图形加个外发光效果：

光源就完成了，又快又贴合主题棒棒的！
接着可以继续丰富画面，比如把光源想成一个霓虹灯，那可能需要绘制一些线路，也可以在墙上张贴一些人物宣传海报：

还可以增加灯光对地面的倒影，直接把墙上的篮球图形复制一个下来，使用透视工具拉一下变形，放到地面上：

这里要注意做好两个点，倒影才能更真实：
1.靠近光源的位置会很亮，远离光源的地方要暗下去；
2.靠近光源的位置边缘比较实，远离光源的地方要用高斯模糊虚化下去。

这样整个场景就很丰富啦。

接下来是人物的处理，有一个点给大家分享下：

直接把人物涂黑也有剪影的感觉，但是毫无细节，人物就很平，薄的像纸，一点都不立体

为了解决这个问题，我们可以给人物的边缘加一些过度的光，注意观察手臂的位置：

有过度光的人物是不是就显得很立体啦？

这个同学的也有点这个问题，整个手臂没有加过度光，所以会显得有点平：

加完过度光看下整体效果：

一张帅帅的人物剪影海报就完成了！

四、其它的一些附加知识点

1.低视角会让画面充满压迫力。

以Amor的作业为例：人物我们不能调，

但我们可以调整地面的俯视角度。比如右边这张，就放大了透视，就给人一种仰视角色的感觉，整张图更有压迫感。左边这张因为透视比较小，视角就比较高，显得是在俯视角色。就缺少了一点气势：

小小的改动就可以提升一个气质。

2.在光源里加入一些碎片会让画面更丰满，充满细节。

这是兜兜一张作业，也是很不错的。

我们观察下底部光源的位置的区别：

很多同学打完光就会让它空着，就会显得很单一，光也会显得有点苍白平淡。其实我们可以在光源里加入一些细节，就可以让光的层次更丰富了，从而让画面更耐看。

作者：慢热

转载请注明：学UI网》哦，原来这样可以更高级！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

本篇讲述：激进式创新

激进式创新是相对罕见的，它同时依赖革命性的技术和创新的商业模式来解决问题，激进创新的发生往往伴随着产品的创新、组织创新等连锁反应甚至引起产业结构的变化。科技的创新带来了很多革命，iPhone开创了电容触屏时代，ARVR打开了元宇宙之门；新的商业模式利用现有的资源引起行业巨变，如Uber和滴滴用物联网技术关联私家车和出行乘客，连接异地旅者和房东的Airbnb等都是激进式创新。

作为设计师，我们在技术和用户间承接着场景和体验，了解激进式创新的方法可以让我们在工作更好地帮助团队突破。很多具有划时代意义的创新产品其实都有设计师创始人的身影：颠覆传统酒店行业的Airbnb（爱彼迎）的联合创始人Rian Chesky和Joe Gebbia，首创了华夫格底跑鞋的Nike（耐克）创始人Bill Bowerman，设计开发了凹凸面圆点拼接积木的LEGO（乐高）创始人Ole Kirk Kristiansen，颠覆内容传播权威、开启全民播客时代的Youtube联合创始人Chad Hurley…他们都是设计师出身，基于自己对行业、产品和用户需求的洞察革新了行业。

一、激进创新启动 / 策略2则

上一篇提到渐进式创新的起点难度主要在于沟通和传达，而激进式创新依赖创意突破，有两类需求命题可能会让创意发散变得艰难。其中一种是需求命题过于具体，这可能会限制创意的发散空间；另一种则是需求命题过于宏大，无边无际让设计师不知从何着手调研和发散。针对这两种状态，下面的方法将针对性地帮助设计师们解题。

策略1.  问题挖掘 Dig Deeper

命题过于具体很可能会限制创意的发散空间，仿佛解决方案已经有了安排，那设计师很可能会被限制在已有思路中。问题挖掘就是针对这类命题打破砂锅问到底，从而帮助自己更好地获得发散思路。问题挖掘就是写下所有能想到的问题，挖掘前因后果，了解内外机会和风险。

提问可以从以下三种工具角度着手：

• 5W1H问题

5W1H分别是：是什么，是谁，为什么，在哪里，在何时，如何。从这六个提问开始着手列出所有想问的问题，并继续发散关联的子问题。然后尝试自己回答刚刚列出的问题，有些问题可能和命题无关则跳过。当我们自行完成了梳理筛选后，就可以将这些问题在和需求方沟通和访谈时提出，进行深入了解，获得灵感。

• 是什么（What） “我们的创新想要解决什么问题？关键假设是什么？”…
• 是谁（Who）“产品创新的购买者是谁？用户是谁？相关利益人是谁？”…
• 为什么（Why）“为何这个问题重要？为何发生这个问题？为何之前未能解决？”…
• 在哪里（Where） “这个问题发生在哪里？之前在哪里解决？还有哪里有相似的问题? ”…
• 在何时（When）“这个问题何时发生？问题何时开始？何时可以解决?” …
• 如何（How）“如何解决？已经尝试了哪些解决办法？”…

• 5个为什么（5Why）

经典的连问5个为什么。如果我们针对看到的结果，只问一个“为什么”，很容易停在第一层的表象原因，只有不断的深入挖掘才可以层层递进，找出最关键的底层原因。

• “机器为什么停下来？” 电路过载，使保险丝熔断。
• “为什么？” 轴承润滑不足，因此被锁定。
• “为什么？” 机器人上的油泵没有循环足够的油。
• “为什么？” 泵入口被金属屑堵塞。
• “为什么？” 泵上没有过滤器。

• 层层扩散

如果五个为什么是向内层层递进，那层层扩散就是向外发问。以最为基础的命题问题作为中心点扩散，向外展开相关因素：产品的核心问题，相关结构技术，外部文化和法规…

• “这个产品我们要解决一个什么问题？为什么要解决这个问题？”
• “别人对这个产品的当前印象和期待是怎样的，需求发起者是谁？”
• “这个产品的开发方式，有什么背景，历史渊源，复杂的代码历史，变动难度？”
• “这个产品拥有的资源？”
• “这个产品有什么文化、政治、法规背景”
• “我们的外部优势和劣势是什么？”

策略2. 设置边界 Planting Limits

都说设计是戴脚镣跳舞，你是否接到过抽象空泛且听起来没有任何限制的命题？创作条件没有限制也许意味无限可能，但更常意味着难以聚焦。适当的束缚有时可以帮助更好地放飞想法。所以如果面对的命题太庞大，可以尝试给自己设限，或思考可能存在的限制，就能抓到一个相对靠谱的起点。

• “这个项目要控制成本投入，用最少的资金，最少的人力。”
• “最大程度保留用户的现有体验，尽可能减少用户学习成本。”
• “新创意最大程度满足原来的代码框架，使用最小的开发成本。”
• “新的产品体验要极简，将用户路径缩短到三步以内。”
• “在链路上需要用户使用的媒介最少化。”

例. 重新设计支付流程

• 原体验：原本用户需要携带钱包出门，钱包里会有多张信用卡，储蓄卡，还会有很多现金。而用户出门手机也必不可少。
• 设置边界: 在优化的支付流程里，尽可能减少用户支付需要携带的东西；在用户支付流程中减少遇到的阻力，提升消费。
• 新体验：让用户可以用软件进行转账，输入需要支付的价格，双方确认后输密码转账。

-> 让用户可以直接扫码进行支付，无需输入价格，无需人工核对。

-> 让用户用指纹确认，或开通多少元以下免密码支付，无需输入密码。

-> 让用户直接手机感应支付，无需打开手机或软件。

-> 扫脸进行支付，即使不带手机也可以进行支付。

二、激进创新过程 / 策略3则

上一篇渐进式创新介绍的方法和原则在激进式创新同样适用，而本文将介绍三则对于命题较大的激进式创新非常适合的过程方法，分别是：创意矩阵，逆向思考，多问“如果”。

策略1.  创意矩阵 Creative Matrix

如果需要用创意解决一个较为庞大的主题，尤其是激进类创新设计，那创意矩阵可以迅速排列组合进行发散，且不遗漏内容。

创意矩阵以表格的形式，让X轴和Y轴上的内容进行交叉碰撞，强制、批量地激发创意的方法。如在X轴写下选择一类用户和主题间的需求（目的 / 流程 / 用户类型 / 特点 / 心理等…），Y轴写下解决问题的方式（内外部新机会 / 实现方式 / 科技 / 环境 / 媒介 / 分发渠道 / 政策等…），横纵碰撞在一起，就会有一张完全覆盖的创意表格，之后可找出亮点、分析可行性进行创意选择和组合。

例：设计一个针对工业设计的3D建模软件，打破市面上常见的软件功能和体验。

我们以Gravity Sketch的3D建模产品为例，用创意矩阵倒推思考的流程。

（1）首先确定XY轴发散方向。能带来革命性改变的体验往往依赖技术层面的实现，技术革新会带来在流程、建模方式的革新。所以我们将3D软件依托的技术和媒介为Y轴，在媒介的放散方向上同时考虑建模现有媒介（传统的PC端和云端软件等）是否还有新的机会；再考虑相对激进、未来的媒介（如pad端、VR端等）。3D建模的工程经常会涉及到协作分享等流程，选择以整体设计步骤为X轴。从这个矩阵开始进行发散，交叉重合的部分思考结合出的设计，再选取其中的亮点向产品方向创新。

（2）梳理亮点。在梳理发散过程中可以看出，VR客户端和pad用移动端有相对创新的亮点，不同于较为传统的PC端和云端。如果pad端和VR端可以满足3D建模软件所需要的性能，这样的创新就可以被支持。

（3）继续探索。针对每一个流程步骤，可以聚焦到里面的每一个分步骤，探索亮点。比如创作阶段的流程可以展开到具体设计到建模的步骤。当把步骤进行分解之后，可以发散出各个阶段利用VR的创作优势。

（4）梳理亮点。在草图和草模阶段，VR内直接创作可以节约物理材料，支持无死角设计不用重复出图，帮助立体想象、可视、模拟真实尺寸体验，打通草图到建模的链路…颠覆草图到建模阶段的设计流程，提升整体效率和可能性。

策略2.  逆向思考：程序 / 观念 / 状态

逆向思维缔造了许多打破常规的创意。上一篇我们介绍了在渐进式创新中实用的原理/功能/结构三种逆向思路。这里介绍3类更适用于激进式创新的逆向思路和具体的案例，为激进式创新赋能。

• 程序或方向逆向 ｜ 颠倒事物发展变化的构成顺序、排列位置。

例a. C端服务直接收费 -> C端服务免费，其他项盈利

很多产品在收费时直接向C端用户收取服务费用，但是容易面临C端有付费意愿的用户量数不多。不如让用户免费使用体验服务，扩大用户留存的基础上，通过向B端等有更多支付意愿的商家收取费用。QQ、微信等通讯软件的出现让用户免费使用通讯、社区等功能，通过用户的留存从其他商业化项目收费，如收取在软件内的广告费用。

例b. 主动检索 -> 算法推荐

以前用户浏览信息的方式，偏重于主动搜索需要或感兴趣的内容，但是检索流程相对繁琐，用户可能并不够了解自己的喜好。逆向思路让用户被动接收信息，由算法基于用户的浏览喜好状态进行推荐，无需用户进行检索即可将信息推送给用户。短视频等产品就是通过算法推荐匹配出用户感兴趣的视频，让用户享受“刷”视频的过程。

• 观念逆向 ｜ 设计者反转看待问题的观念，或针对人们的观念逆向设计。

例a. 少即是多 -> 多才是多

现代主义建筑大师Ludwig Mies Van der Rohe提出“少即是多(Less is more)”的极简设计理念改变了很多产品和建筑设计，之后许多设计师都遵循”少即是多原则进行设计，罗伯特•文丘里 （Robert Venturi）逆向而行从设计思路上“反叛”，开创了“少则无聊(Less is bore)”观念，让设计的建筑更符合街道氛围和文化。BJARKE INGELS B.I.G 事务所则喊出了“多才是多(Yes is more)”，设计出造型夸张有趣的建筑，并从外观出发让设计带有更多丰富的能力。

例b. 追随变化 -> 锁定不变

在日新月异、瞬息万变的互联网，很多企业和产品都在努力拥抱、追随变化，但很少有人去思考什么是不变的。Amazon（亚马逊）创始人Devin Beverage在亚马逊创立之初就选择思考未来十年，什么是不变的，并得出了三件极其普通但是消费者最核心在意、不会变化的三件事情：无限选择，最低价格，快速配送。在用户的底层需求上出发，并且长期、持续地投入让亚马逊成长为现在的头部企业，支持经典的包括支持自营&第三方卖家平台（Marketplace）、开放给消费者的比价工具、Prime会员两日达、影视服务等开创性产品设计。

• 状态（过程）逆向 ｜ 改变现在的状态，如正变负，进变退、动变静、硬变软等等，获得创新。

例a. 人在路上跑动 -> 跑步机跑道带动

过去跑步都是人在道路上跑动锻炼身体，人动路不动。但在艳阳天、雨天等天气下在室外的环境就会不适合跑步运动。跑步机的诞生就让用户可以随时在室内环境中舒适、不占空间地进行运动，让“地”动起来，人在原地跑动。不但可以调节跑步机跑带的角度速度等模拟各类环境，还可以监控记录用户的跑动、健康状态，一举多得。

例b. 人去商店购物堂食 -> 外卖快递送上门

过去的购物体验基本都依赖用户到店进行。但这样商店能辐射的客户范围会相对狭小、用户也必须出行才能购物和享用美食。比起提升到店体验，支持送货上门，让用户足不出户体验到购物的乐趣和便捷。不但让顾客可以享受到更远距离、甚至海外的商品，商家同时可以辐射更远距离的顾客，也不用依赖实体门店进行销售。

策略3.  多问”如果”， What if… 

多问些异想天开的问题，别害怕天马行空的发散。我们总是可以把解题思路再聚焦到一个盒子，所以不用最初就把盖子盖上。阿尔伯特•爱因斯坦甚至说过：“如果一开始这个想法不荒谬，那么它就没有希望了。” 在发散的过程中要敢于想象发散，才能带来突破式创新。当我们想要解决问题的时候可以首先大胆发问、设想出“如果”的场景后，再去考虑实现该场景所需要用到的技术；也可以从技术出发，畅想落地场景的“如果“。

对于市面上一些带有亮点的产品，我们也可以倒推去思考当初设计者问出的“如果”是什么。这几年全球都在疫情的不断反复中挣扎，我们可以以远程工作场景为例，来思考一些“如果”。

例. 远程协作

• 发散：如果我们远隔万里还能面对面、身处一个空间工作交流…

如果远程状态下我们还可以像在办公室一样一起查看模型…

如果在查看模型的基础上我们还可以调整、比对修改方案，及时看到反馈…

• 结果：空间感知设计评审

Microsoft Mesh使人们能够与全息状态联系，跨空间共享，并从世界上任何地方进行协作。通过为组织引入支持 Mesh 的混合现实体验，可以增强虚拟会议、进行虚拟设计会话、远程帮助他人以及举办沉浸式虚拟会议，从而大幅提高工作效率。

Mesh通过允许用户使用任何设备在任何位置加入任何位置来增强 3D 设计评审。无论是物理存在还是全息，同事都可以实时查看和批注 3D 模型。所有内容都在设计会话之间持续存在，因此团队可以从他们中断的地方快速开始交流理解，激发创造力。

例. 远程培训和维护

• 发散：如果维修人员不能上门工作，是否有人能远程教学我修理电器…

如果维修人员可以远程修理我的电器就好了…

如果他们能看到我看到的内容，完全基于我的视角指导我…

如果还能在我的视觉标记、说明、演示操作方法…

如果在工业界专业领域，也能这样进行教学、监督、指导…

• 结果：远程培训和学习

Hololens利用AR技术进行远程培训，特别是关于手术、设备维护和交通管制等复杂主题的培训，很难与讲师在同一个房间，并从多个角度查看同一组对象。员工可以通过全息传送、全息共享和可视化效果从任何地方一起学习，有助于提高虚拟培训的效率，同时降低差旅和物流成本。

三、激进创新决策 / 策略三则

Warren Bennis说，“创新—任何新想法—根据定义，一开始都不会被接受。在创新被组织接受和内化之前，需要反复尝试、无休止的演示、单调的排练。这需要勇敢的耐心。”激进式创新需要经过的等待和挑战可能非常漫长，在这个过程中，更需要谨慎地筛选想法和推进。下面的三则方法可以帮助我们在决策中减少试错成本。

策略1.  考虑实现时间和所需要的技术系统。

九宫格视窗可以帮助进一步决策，将创意灵感在“系统结构”和“实现时间”两个维度进行排列选择，之后根据需求的资源和达成所需时间进行选择和规划。突破式的创新往往需要大量的时间来完善技术和系统，所以在筛选想法的过程中结合这两个因素，可以保证持续性的创新。

例. Netflix播放创新

现在我们熟知的Netflix网飞是一家会员订阅制的流媒体播放平台。

• DVD及蓝光租赁提供商

最初在1997年刚成立时，Netflix曾经是一家在线DVD及蓝光租赁提供商。当时DVD技术刚诞生，轻质的材料代替了原本笨重的VHS电影格式存储，让邮寄DVD成为了可能。Netflix创新地使用线上下单、往返邮寄的租赁模式，让用户通过免费快递信封租赁及归还Netflix库存的大量影片实体光盘，并以此打败了线下租赁连锁店百视达。

• 付费订阅流媒体

2006年在线点播技术兴起，随着新技术的出现Netflix 转向通过互联网流式传输视频，提供更广泛的内容选择，并且可以无限观看、点播、低价，高质量的影视内容，并最终吸引了对手Blockbuster 的核心客户。Netflix的付费订阅模式和Apple的iTune下载、Youtube的免费模式成为当时最热门的三个细分市场。

Netflix的创新帮助他们在市场上站稳脚跟并不断突破，但如果在1997年Neflix就把流媒体视频作为目标进行创新、不考虑当时的现实技术和研发时长，那公司可能在漫长的科技发展等待中生存，也就没有后来的故事了。所以对于突破性的创意，按照时间维度、技术实现给出逐步创新的节奏，通常能更好地帮助产品持续创新。

策略2.  考虑可推动性&可实现性

如果你的创意需要在大公司里进行落地和推进，可以使用“传播速度和可实现性”矩阵逐步选择，第一步聚焦适应速度和传播速度，将决策者对产品的影响也放入考察。第二步，审查可实现性和财务可行性，之后做出相应选择和推动。

这个矩阵也可以用于对外部环境的判断，在第一步骤中考虑想法在文化、政治、地缘等因素下的适应和传播速度，在第二步骤中考虑市场技术或包容度是否能支持该想法的推动。

例. 出行产品的本地化决策

以出行领域的产品设计为例，我们可以看看在这个领域里一些创新决策考虑。我们熟悉的Uber，滴滴等打车平台通过利用空闲的私家车来接送乘客，降低了打车花费、难度和空闲汽车的利用率，颠覆了原本的出租车打车市场。而在决策想法时，这类出行产品需要考虑当地的具体交通、运输工具、出行状态等现实因素进行推送。

• UberEats在美国部分城市用汽车送外卖

Uber优步是起源美国的打车平台，2016年该品牌在美国本土开启外卖业务。当时中国已经成熟的外卖业务主要是由骑手骑电瓶车来完成外卖服务，但在美国一些城市自行车作为工具的出行道路十分有限，人们居住的距离也相对遥远。所以Uber从他们已有的打车系统上汲取了思路，在这些城市让司机用汽车送外卖解决了路程遥远的问题，同时让他们可以有机结合接送乘客和接送外卖的订单，系统规划路线后不但提高效率，也让司机增加了收益。

• Gojek在印尼用摩托车送乘客

2015年，当来自美国的Uber和来自新加坡的打车平台Grab在印尼打得火热、且都使用出租车和私家车作为接送乘客的交通工具时，印尼市场的Gojek则聚焦印尼的国情，把打车平台的思路运用在打摩的上，规范化摩的市场。在交通严重拥挤的印尼，摩的的快速穿梭远比汽车出行更适合本土，这让Gojak成为了印尼的第一大出行平台，并在后来拓展出庞大的本地生活产品体系。

策略3.   小心鸿沟

“如果解决方案意味着与他们习惯接受的标准有太大的偏离，那么成年公众的口味不一定准备好接受符合他们要求的合乎逻辑的解决方案。” ——Raymond Loewy，著名的可口可乐瓶、壳牌石油标志背后的工业设计师这样说。

如果你的创意需要很多解释，大量的培训和“帮助”功能，那么这样的设计可能过于先进或复杂，不易被大众理解。产品创意在初期会辐射到的创新者、早期使用者与普通使用大众间可能存在着差距，在一些案例中，早期使用者觉得有趣认可的解决方案并不被大众所买单，所以在选择创意和推进过程中，设计师也要考虑这种差距。

例. Airbnb如何更好地衔接早期大众

Airbnb将寻求经济实惠住宿地点的旅行者与想要租房或备用房间的人联系起来，这个想法现在已经被大众熟悉。但在2009年业务的第一年，这个创意是非常具有创新性的，尚不为大众熟知。

• 好创意却不得市场认可

当时虽然早期使用者的反馈非常好，但团队仍然面临着严峻的用户增长和收入挑战，甚至一度每周只赚200美元。为什么这样一个对租客和出租者都互惠互利的创新，却不能在市场上得到良好的反馈呢？一天下午，团队正在与Paul Graham一起思考纽约市的搜索结果，试图弄清楚为什么他们增长。Paul Graham给出了一个简单的建议：前往纽约，租一台相机，花一些时间与客户一起列出他们的房产，并用美丽的高分辨率照片取代业余摄影。因此，团队成员飞往纽约，与Airbnb在网站上列出房产的客户会面、拍摄高质量照片。结果收入迅速增加了100%（400美元）。

• 照片减少沟通鸿沟

究其原因，其实是虽然当时Airbnb的想法已经在市场上独具突破性，但团队没有考虑到早期使用者和早期大众之间的差距。早期使用者往往乐于尝试新事物且有很强的需求（特别体验、更低成本出行等），而早期大众会和他们现有的酒店体验进行比较，安全、正规、优质、温馨的入住体验是他们的强需求，那些非高清、非精美照片很难在第一印象上说服早起大众这些品质。弥补上这个预期差距后，也就有更多的用户愿意尝试了。在后续的迭代中，Airbnb也也在系统改进上不断强化安全、正规，更好地满足用户。

结语

激进式创新往往依赖团队基于用户需求、市场、技术等多维度内容的理解。在创新过程中，设计师更多了解相关领域和创意方法就能更有益启迪想法。希望本文激进篇、上文渐进篇的设计策略可以帮助设计师们更好地创新发散。

创新思维可以被学习累积，设计师可以保持多看多思考的习惯，从其他优秀的设计和产品上反推创意思路。设计创新时要相信推进的过程，如果对题目感到无从下手，相比纠结现有思路是不是最优解，不如用文中的方法把想法全部写下来并原型尝试。许多时候我们离优秀的想法只是一步之遥，也许转个弯就柳暗花明了。

1. 《Creative Strategies》by Fridolin Beisert (Author), Jessie Kawata (Artist)
2. 《The Design Thinking Playbook: Mindful Digital Transformation of Teams, Products, Services, Businesses and Ecosystems》Michael Lewrick（Author)，Nadia Langensand（Artist）
3. 《Zero to One: Notes on Startups, or How to Build the Future》by Peter Thiel, Blake Masters
4. 《Thinking, Fast and Slow》Daniel Kahneman
5. 《Cross the Chasm》Geoffrey A. Moore
6. 《The Innovator‘s Dilemma》Clayton M. Christensen
7. 《Lean Startup》Eric Ries
8. What are 5 Whys? | Interaction Design Foundation (IxDF)
9. https://cwodtke.medium.com/how-i-stopped-worrying-and-learned-to-love-design-thinking-f1142bab60e8
10. Types of Innovation – The Ultimate Guide with Definitions and Examples
11. The Design Process Simplifed – Design Sojourn
12. https://medium.com/user-experience-design-1/10-design-principles-every-designer-should-know-a03e12f8deca
13. https://blog.prototypr.io/shaping-user-behaviour-is-better-than-changing-them-47997f36e71
14. Airbnb 2021 Release: 100+ innovations and upgrades across our entire service
15. Clipdrop – Copy and Paste reality with AR + ML | Product Hunt
16. https://dodo-africa.medium.com/how-design-turned-airbnb-from-a-dying-startup-to-a-billion-dollar-business-b7f711e9ef73
17. https://docs.microsoft.com/zh-cn/mesh/get-started

作者：ISUX设计

转载请注明：学UI网》设计策略｜源源不断的创新思路（激进篇）

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

作者：葱爷

转载请注明：学UI网》logo设计除了用首字母，还能怎么做？

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

共识目标大致分为两方面，拉齐理解和对齐标准。

拉齐理解，减小彼此间的认知差距。总体上，我们需要拉齐彼此对度量长短期价值和目标的理解；到各执行阶段，则需要拉齐对所需资源和预期输出的理解。

对齐标准，选择团队认同的维度指标与监测方式。个体对体验优劣的主观感受和不同岗位职责的关注视角不尽相同。总体上，我们需要以产品定位规划为指导，结合客观资源情况选择适合的衡量标准。

如上图举例，一个对内的商户操作系统与其他竞对在系统操作层面的比较意义不大，度量模型中用于和同类产品对标的功能完整性的参考价值降低，则可以考虑暂不纳入监测维度。

确定维度后的下探监测指标是共识最主要的内容。如上举例，当前业务首要关心产品SOP（Standard Operating Procedure 标准操作程序）“使用率”，而这项指标与已确认的参与度指标定义极为贴合，那我们就不妨直接将该项做为参与度内衡量指标优先接入。

二、共识内容

到了具体的共识内容，我们再按立项之前、项目执行，项目复盘的阶段顺序聊聊。

1、立项之前

01.确认要做体验度量吗？
体验度量模型从搭建、验证，到持续分析应用需要一个渐进的过程。充足的数据和稳定的调研机制是良好应用模型的基础。处于探索与深化初期的产品调整较为频繁，数据资源可能也有待完善。这一阶段体验度量理论方法或可以辅助完善线上埋点、建立定期走查、用户调研等机制，但对度量前期数据可用于分析的价值预期要适度降低。

02.首期度量的范围和预期？

首因效应的影响不容忽视。虽然第一印象并非总是正确的，但却是最鲜明、最牢固的，并且决定着以后双方交往的进程。

如上说到，度量需要一个渐进的过程。我们可以选择由局部扩充至整体，也可以由整体完善至局部。首期度量就面临着这样的选择，当然选择的范围也对应着不同的预期。

由局部扩充至整体，围绕业务当前需求，圈定最小度量范围。这样选择，一方面可以适度减低试跑数据的成本；另一方面，首期度量结果还不便向前比对应用分析，但这不妨碍调研监测到的信息为业务当前需求提供辅助价值。需要注意的是，虽然选择了由局部开始，但要始终遵循度量模型既定的统一框架，不能过分定制化。

由整体完善至局部，先监测宏观指标再逐步完善下探。这样选择，一般可以快速选定已处于长期监测的指标接入系统，但也因指标较为宏观，初期不免暂时无法解释数据现象，就需要多期的下探追踪来定位原因。

2、项目执行

01.指标统计

这部分是共识内容的主体，具体指标选取与统计方式我们在《体验度量经验分享：如何搭建体验指标模型?》中进行了梳理介绍。这里补充两个共识小方法，准备详细参考资料和选取整合已有资源。

对应每次共识的内容，参考资料可以有效提高沟通效率。“站在前人的肩膀上”在具体可感的案例指标基础上调整，远比凭空讨论有效。

选取整合已有资源，“避免重复造轮子”。举例满意度维度，如此前已建立了相似的NPS调研制度，那便不必费时费力重新发调研问卷或是开发线上场景化调研能力。接入现有调研数据，选择符合模型需要的数据接入或许更经济适用。然后，在此基础上再去优化指标细项与收集方式。

02.分析提炼

指标选取和统计仅仅是准备，怎么应用现有食材炒出好吃的“菜”，目前依旧需要人工分析提炼。

结合业务所需，明确重点分析方向，深挖原因是收获满意结果的基础。面对大量的数据呈现，虽不可预知提炼的结果，但唯有聚焦能减少迷失，尽量避免最终呈现结果过于泛泛。
分析结果往往包含需求洞察、痛点定位等多条信息，整体打包解决稍不实际。为跟进度量结果逐步落地，需明确优先级共识，推动度量不仅仅停留在“报告”的阶段。

3、项目复盘

01.如何评定度量的投入产出？

每期度量复盘，除共识达成情况和后期调整外，团队内对度量本身的投入产出评定常常有被忽略。

因度量周期较长，定位问题也较宽泛，即便已经定义了问题优先级，通常状况下也不便短期内解决，有些方向性的洞察也会分散应用到更多常规需求上，度量的价值也就没能被很好的跟踪记录下来。这一方面我们的经验也稍显欠缺，与需求绑定似乎还是不够明确的解决方案。拿出来和大家分享，期待收获更多的讨论。

三、共识方式

最后，简要聊聊共识的态度与形式。

中立的态度是沟通的基础。每个环节共识前，可以先单独收集团队成员的思路想法，引导大家放心分享自己的见解，提高收集效率，而不需当即讨论合适与否。

内部访谈，基于团队成员职责差异，制定访谈大纲与沟通顺序，为方便更高效的沟通与记录。内部沟通在达成指标统计共识的基础上，更可以帮我们对产品表象之下的业务逻辑有更加深入的理解。

稳定的节奏，明确每一阶段的待办与负责人，定期组会对齐进度，定期汇总小结，逐层汇报共识，得到更广泛团队成员的认可。

以上，便是对往期度量共识中非理论方法部分的梳理。如何沟通没有标准，共识程度也难以衡量。期待大家提出宝贵意见，共同讨论如何将度量的理论方法更好地应用于业务实践。

作者：李明玥、贺紫蒙

转载请注明：学UI网》体验度量经验分享：如何沟通共识?

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

一、暗色模式下饱和度不宜过高

高饱和度的颜色能形成强烈的对比。在暗黑模式下使用高饱和度会很刺眼，给用户很不好的体验。暗黑模式一般在晚上使用，因此对设计师来说，需要做的是让整个配色相对柔和，让用户感到放松。基于此，在设计的时候应该将饱和度限制在200-500之间。

(彩云注：这里的200-500彩云去查了不少资料，但没有找到最好的答案，这里引用的是Material Design中的颜色规范，感兴趣的同学可以自行查找)

二、 按钮要有优先级

在同一个界面，最理想的状态是只有一个最主要的关键按钮和紧跟着的次要按钮。这是因为如果一个界面上有太多这种行动按钮（CTA）按钮，会让关键操作淹没在这些按钮中，让用户不知所措。

三、简化不必要的动词

没必要在菜单上增加动词和短语，用最少的信息写清楚功能就足够让用户理解了。所以，在菜单设计上要尽量避免增加无关紧要的词，这样才不会影响用户体验。

四、字体尺寸类别越少越好

你可能注意到，很少有表单的字体大小不平衡，字体之间的类别尽量少一些看起来会更加平衡。在决定字体大小时，尽量规范字号的标准。比如标题（16px），副标题（12px），正文（10px），说明文字（8px），这些尺寸都是以2为倍数的。

五、不要混用图标风格

尽管我知道要做好图标一致性，但在实际工作中依然经常犯错。很多设计师经常用不同风格的图标混在一起，这样会让整个UI界面的设计显得很不成熟。图标是为了让用户更有效率地理解事物。在使用图标的时候一定要注意图标的一致性，尤其是一些是一些风格细节。

这里也跟大家分享2个我自己常用的figma图标库：

1)Unicorn    (https://www.figma.com/community/file/931512007012650048)

2)Basil Icons     (https://www.figma.com/community/file/931906394678748246)

六、不同背景下的颜色饱和度适当微调

通常情况下，我们会认为一个颜色在深色模式和亮色模式下是用的同一个颜色值，但这其实是错误的。一个颜色在亮色模式下看起来非常漂亮，但在深色模式看可能就太暗了，反之亦然。解决这个问题最好办法是使用2套不同饱和度的颜色。

七、新手引导多给用户自主权

App的新手引导决定了用户第一次体验产品时的感受。在设计的时候，试着公开需要哪些具体步骤，增加”跳过“和前后移动查看的能力对新用户来说非常重要。

八、在图片上增加叠加层

许多网站和App都是用图片驱动的，但在图片上直接增加文字内容有时候会被淹没掉。在图片上增加一个叠加层可以提升内容的可读性。

九、信息部分露出

对于一些大屏设备来说，像笔记本电脑，平板电脑和智能电视，它们都有非常多闲置的空间。对于这些闲置的空间来说，尽量通过设计告诉它底部还有更多内容。这对UI和UX方面都有好处，因为空间的使用方式能够让用户清晰的知道所有内容。

十、拆分大段文字

为了让用户聚焦阅读，应尽量避免使用大段的长/宽行。保持短句和简洁能够增加内容的可读性。（彩云注：这点用在你的作品集里也是很合适的，有些人经常使用大段的文字内容来描述，很可能直接劝退面试官）

十一、Z字形原理

Z字形原理，也就是大众所熟知的”古腾堡原理“，它描述了当人们看到一个均匀分布元素的设计时，眼睛的总体运动情况。通过这个原理我们知道，用户在内容上的视线是沿着Z字形来阅读的，所以遵循这一原理设计你想要核心表达的内容。

十二、扩大可点击范围

扩大点击区域，维护像按钮、单选、多选等控件的响应尺寸，如果你设计的点击区域太小会让用户点击困难，造成流失。

十三、尽量使用简洁的图标

避免使用花俏和俗气的图标，它们会让整个设计显得非常不成熟，同时也是很难理解的。用上更简单的图标形式，会让界面更高级。（彩云注：当然越简单的图标其实想画出彩会更难，另外也需要区分不同的场景，像一些运营类的图标可能会为了活动氛围做的相对风格化一些。）

十四、正确的文案表达

选错文案，会让人们对于任务缺乏兴趣，根据上下文使用更合适的词组。

十五、考虑手势操作

轻敲和点击有时候很累人，可能不如使用滑动、拖拽等手势操作，这些操作会让界面更简洁并且也能顺利地完成既定任务。

十六、展示部分文案

在探索酒店、目的地甚至是阅读任何文章时，用户经常都需要点击卡片。为了使得探索更加吸引人注目和干脆，避免使用长文本导致的滚动。相反，可以加一个阅读更多的按钮方便想看全所有内容的用户。

十七、接近法则

”邻近的物体往往被视为是同一组内容“。有时候为了把内容区分开的更清晰，尝试用线对相关内容进行分组。（彩云注：其实有留白和不同颜色做区分也是可以的，建议根据自己的设计风格和具体内容来定）

十八、文字控件可视化

在设计控件时，如果可以用图形可视化的地方就优先尝试把控件图形化，除了非常需要很精确的设置参数。对于价格范围这种，很容易将它可视化为滑块控件。

十九、占位符要接近要填写内容

对一些人来说容易理解的东西，对某些人来说可能不是。因此，最好使用示例占位符来解释输入字段，这可以防止用户在填写内容时出错。

二十、系列位置效应

根据”系列位置效应“，心理倾向于记住列表的第一项和最后一项，而不是中间项。因此，在任何App中设计导航时，根据应用的上下文保持最左和最右的选项。例如instagram，最左边是”首页“，而最右边是”用户“。（彩云注：这是一个心理学上的理论，人们对于一系列的材料更容易记住开头的内容，也叫做首因效应或者首位效应；更容易记住末尾的内容，就叫近因效应。）

二十一、减少点击次数

在设计任何体验时，点击次数都是非常重要的指标。统计用户需要点击多少次才能完成他的目标，额外的点击会减慢整个操作过程。简化过程，自然体验就会更好，所以尽可能的减少点击次数。（彩云注：下面的案例，增加可点击符号也可以减少用户思考的时间。）

二十二、少即是多

为了使内容突出，没有必要使用多种字体类型，包括加粗、改色等等。只在最需要的位置使用增强的的文字层次结构、字体重量，同时只使用一种字体足以吸引用户对内容的注意力。

二十三、留白定义重点

留白在设计中非常重要，太少或者没有留白会使得设计非常混乱。明智地使用留白可以明确地强调内容。

二十四、别让用户闲着

根据多尔蒂阈值(Doherty Threshold)这个理论：”系统需要在 400ms 内对使用者的操作做出响应，这样才能够让使用者保持专注，并提高生产效率。“。因此，我们可以使用动画、图像甚至文本来保持用户的注意力。（彩云注：给用户的提示可以先快速加载信息框架，让用户有事可做，而不是什么都看不到）

作者：彩云Sky

转载请注明：学UI网》用上这24个UI体验优化经验，果然做出来的设计更高级了！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司