随着科技的发展，人们的工作方式打破了空间、时间的束缚，传统线下场景逐步迁移到线上，衍生出大量的工具型产品。由于实际业务场景灵活多变，为了尽可能覆盖场景需求，工具型产品往往功能庞大且逻辑复杂，经常会收到用户反馈产品「复杂、难以理解」。对于工具型产品的设计者，如何「简化设计」是他们必须要面对的重要难题之一。
本文将从用户感知层面尝试分析用户感觉复杂的原因，并根据以往项目经验给出一些工具型产品简化设计的方法。
提纲：
1、为什么用户感觉复杂
2、如何简化概念，降低认知成本
3、如何让流程简短高效
4、如何简化页面信息布局
5、如何让操作更轻松
6、结语
你是否曾收到过类似的反馈：
“这文案是什么意思？”、“这能干什么？我需要干什么”、“那个功能在哪里？我找不到”、“要设置这么多项，好麻烦啊”、“这不能拖动吗？”...
这些都是用户感到复杂的反馈。从用户的感知层面分析，让用户感到复杂的原因可以划分为四大方面：概念、流程、界面、操作，以下将详细阐述原因。
导致用户感觉产品复杂的其中一个主要原因是：用户难以理解产品的概念模型。概念模型指事物的基础定义及行为模式。（例如：汽车，一种在陆地上行驶的交通工具。通常需要司机驾驶，需要消耗汽油... ）用户根据概念模型对事物的行为进行预测，构建出自身的心理模型。
因此，当产品没有清晰、准确地传达出概念模型，将导致用户产生错误的心理模型。用户需要在大量探索过程中，逐步纠正自己的想法，最终才能了解产品实际的概念模型。
另外，根据「雅各布定律」和「设计心理学2：与复杂共存」，用户基于以往积累经验去理解新事物，即在使用产品前已构建心理模型。而当产品的概念模型与用户的心理模型不匹配时，用户在使用产品的过程中将持续产生认知冲突，也将给用户带来巨大的认知成本。尤其对于传统工具型产品，颠覆型的概念模型，反而提高用户的认知成本，让用户感到复杂难懂。
1.2 流程复杂
工具型产品的流程主要分为两方面：单功能使用流程、多功能组合使用流程。
在单功能使用流程方面，难免会遇到一些功能在生效前，需要经过多个设置步骤的情况。虽然环环相扣的流程能够降低产品的出错概率，但却会给用户带来更多的成本。对于每个步骤，用户都需要经历「理解」-「操作」-「反馈」的环节。在一些情况下用户甚至不堪忍受，直接放弃使用功能。例如，在Airtable中创建甘特视图，需要经历3步才能完成配置，查看到效果。对于一些抱着尝试心态的新手用户来说，这是难以接受的体验：在还没理解功能的作用效果前，就要经历如此复杂的流程。
而多功能组合使用流程方面，工具型产品在产品功能设计层面，往往将功能的颗粒度设计得相当精细，以灵活满足各种场景需要。就Excel中的单元格而言，可设置单元格字体、单元格背景、单元格边框。但如此精细的功能设计将导致，若用户需要简单实现整体的目标效果时，其操作流程就变得十分的冗长。甚至在一些需要重复设置的场景下，工作量将几何级数地增长，让用户的工作流程将变得极其复杂。
1.3 界面复杂
大多数工具型产品都希望能在一个界面让用户完成所有任务，却忽略了用户在现实场景下的使用流程。通常一个任务完成的前提是，需要按照一定的步骤完成若干个细项任务。若无法聚焦于每一个个细项任务，而需要耗费大量的时间精力来排除其他信息的干扰，则会产生“注意力被分散”、“太复杂”等体验感受，导致最终任务完成难度增加。
对用户来说，界面内的信息越多负担就越大。工具型产品通常伴随数量众多的功能和选项，一味的平铺功能，只为了展示自身的功能多样性，缺乏合理的组织布局，导致用户需要在几十甚至上百个选项中进行选择，则会大大降低用户使用效率。
1.4 操作复杂
设计者在不考虑具体操作场景的前提下，不同功能均使用同一种交互方式，名义上为了让用户降低学习成本，但实际上却是不负责任地将复杂的理解过程转移给了用户。对于用户而言，复杂的操作可以分为两种：一种是「步骤复杂」，例如需要多次点击、页面跳转、设备切换等；另外一种则是「认知复杂」，例如交互方式与心理预期不匹配，需用户自行转换。无论是哪种，对于工具型产品而言都是灾难的。
除此之外，缺乏及时的反馈也会给用户带来不必要的麻烦。用户需要反复操作比操作中的冗余更可怕，就像高速公路的减速带，不断降低用户的效率。
2.1 隐喻、类比已有事物
当产品的概念模型越趋近于用户的心理模型时，用户就越感觉产品容易理解和使用，所要求的使用能力和学习成本就越低。而用户心理模型是根据用户的目标，以及其过往的经验构成的。因此在设计产品的概念模型时，应尽量使用隐喻、类比的方式，让产品的文案概念及交互行为模式）与用户所熟知事物相近。从而让用户建立联想，激活行为记忆，降低认知探索成本。
HyperCard，苹果的早期时间的一款脚本系统。它以「Card」对产品进行命名，同时在产品交互形态上以一叠卡片的形态呈现。这让用户很容易就联想到现实生活中的卡片小册子，进而快速地了解到产品的大致行为模式。
需要注意的是，传统工具型产品的用户往往已被已有产品教育，积累了一定的使用经验、习惯。对于此类产品的概念模型简化应慎重考虑，因为用户所建立的心理模型是较难改变的，颠覆性的变化会让用户之前付出的学习成本付诸东流。此时可尝试用户的其他感知层面切入（流程、原型、操作），以探索简化的可能。
2.2 巧用大白话
在实际业务场景中，难免会遇到概念新颖、逻辑复杂的产品功能。由于用户从未曾接触过类似的事物，未建立起相应的心理模型。在设计产品概念时也就难以使用隐喻、类比的方式来降低产品的复杂度。此时可采用「目标导向」的设计方法，帮助用户快速理解产品功能。因为用户除了基于过往经验建立心理模型，还可根据目标而对产品的行为模式做预测。
与其生搬硬套地创造概念，不如在合适的使用场景下，使用目标导向的大白话，清晰的传达出功能的目标效果。让用户快速了解产品功能的目标效果，减少全新概念的理解成本。
例如，在交互原型设计中，按钮往往存在多个状态（默认态、悬停态、点击态、禁用态）。Figma对其赋予概念“变体（Variants）”，用户难以对此概念产生目标效果的联想，无法建立起对应的心理模型。而在MasterGo中，亦存在相同的功能，但使用的是更加符合目标效果的大白话“组件状态”。
3.1 快速、直观呈现效果
对于工具型产品来说，效果直观是非常必要的。一来能让用户的探索快速获得反馈，降低用户的理解成本。二来能带来更加轻量的操作体验，鼓励用户探索，给予用户充分的掌控感。工具型产品的设计者应以此作为设计理念之一。但难免会遇到产品功能的逻辑流程较为复杂，需要经历多个环环相扣步骤的情况。而研发者往往更关注与代码的逻辑及可维护性，更加推荐逻辑严谨但流程冗长的设计。这时设计者应坚守设计理念，不断在用户体验与功能逻辑中寻找平衡，贯彻落实设计理念。
对于冗长的流程，设计者可通过以下方式解决：
（1）根据场景自动化配置
良好的产品应该是聪明、高情商的，能够根据用户的实际情况进行自动化的配置，以减少用户操作。在进行自动化配置时，应谨慎梳理清楚用户的所有场景，以及每种场景意图，避免过度聪明，导致画蛇添足。
例如，在Notion中可一键创建Timeline视图，无需用户进行任何配置。因为其做了场景自动化配置处理：自动配置所需要的字段。
（2）清晰的修改配置入口
在进行自动化配置后，不可避免可能存在场景理解错误的情况，导致自动配置的结果不符合用户实际情况。此时应提供清晰的修改配置入口，例如在用户可发现错误的地方中提供入口，允许用户在发现错误后即可发起修改。
（3）异常后置处理，先让用户用起来
不应要求用户在功能生效前处理完所有异常。因为对于每一个步骤，用户都要付出理解及操作成本。尤其在处理异常情况时，用户需要耗费巨大的成本，极有可能因阻碍过大，从而放弃使用功能。设计者应将异常后置，确保用户能都快速查看功能效果并使用起来。对于异常的问题，应允许用户后续持续处理，不阻断功能的使用。
例如，在Figma中导入sketch文件会遇到，多种格式适配问题。但不影响导入流程以及FIigma的正常使用，用户可以在倒入后在对异常进行处理。
3.2 基于目标组合功能，一键快速设置
一般来说，工具型产品服务的用户群体较广，需要满足丰富的个性化需求。在产品功能设计上，功能的颗粒度较小，能支持精细化的配置。这样导致用户需要实现组合的目标效果时，需要执行多个功能配置，整体的配置流程较为冗长、复杂。设计者在设计工具型产品时，除了要考虑单个功能的使用体验，也要从用户目标出发，全局考虑用户使用产品的整体流程体验。
如何既能保持产品的「灵活度」以满足丰富的场景，又能减少整体操作流程，提升用户效率。「一键操作」及「自定义脚本」是较为有效的方法。
（1）一键操作
基于用户的目标，可以对一些列相关的功能进行组合，允许用户一键设置，快速达到目标效果。同时应存在更多配置的入口，允许进阶用户进行更加详细的配置。例如，Keynote中可对文本框进行快速样式设置，设置内容包含字体颜色、文本框背景颜色。当用户需求较为简单时，只需设置一次即可达到目标效果，而无需设置多次。
（2）自定义脚本
自定义脚本，指允许用户将一系列操作/设置组合为一个操作组的能力。在一些进阶场景，用户往往存在个性化的需求，对产品功能有着相对固定的使用习惯。自定义脚本，能够极大帮助用户减少重复性的操作，提高整体效率。
在Figma中，充满了类似概念的设计，如：组件、样式（文字、颜色、效果）。用户可自定义保存相关的配置参数，以方便多次复用或一键修改。
4.1 围绕行为组织功能，走一步看一步
在设计界面原型时，需要先了解用户的任务目标，用户想做什么，先做什么后做什么。充分掌握用户心理模型的行为路径，基于用户的行为路径进行组织功能，以确保用户在每个环节中所看到的信息都是必要且准确的。工具型产品通常拥有多个可选设置项，拆分任务步骤可减少用户被非必选项的干扰。
除此之外，不同的用户角色的行为路径也会有所不同，例如：创建者，协作者，以及是否有编辑权限等等。不同的用户场景对于功能的诉求也是不一样的，而这就需要设计师从产品的定位，主流用户以及使用习惯综合考量。在优先满足主流用户场景的基础功能上，再进行其他场景的功能增减。
4.2 功能层级分区，巧妙地藏起来
（1）功能分区
George A. Miller在《神奇的数字7加减2：我们加工信息能力的某些限制》中表明，人的大脑最多同时处理7±2个信息块（即5-9个），若超过则出错的概率将会大大提高。对于无法避免复杂信息的情况下，可以将烦琐的信息分块，组织成清晰的层级结构，例如：微软Office 中顶部工具栏包含上百个功能选项，为了便于用户能快速找到想要的功能，他们将所有功能进行分块，包括：字体、对齐方式等模块。每个模块下再细分具体设置项，具体设置项又包含了其它功能。基于清晰的层级结构，用户可快速通过「字体模块」-「字体设置项」- 「微软雅黑」三个层级中快速找到想要的选项。
值得注意的是在信息分块时，需制定出清晰的划分界限，可通过询问不同的用户来判断界限是否清晰。
与此同时，布局效果是否清晰，对于简化界面设计而言同样重要。合理运用「格式塔原理」中的「接近性原则」，将同类元素放在一起让用户在视觉上感觉是一组，再根据同组元素中的重要性不同，大小上也应有所差异。做到让用户只看一眼便可快速找到想要的功能。
（2）隐藏高级功能
「帕累托法则（二八法则）」同样适用于工具型产品设计，即20%的功能影响80%的用户体验结果。换句话说，大部分普通用户经常使用的基础功能仅占20%，但影响程度却远超于剩下的80%。所以需将功能划分为基础功能和高级功能，在优先展示基础功能的前提下，再考虑高级功能或自定义功能的展示，必要时可将高级功能或自定义功能进行隐藏，但前提需是可见的。例如：更多设置，更多选项等，即对专家用户始终保持可见，但又不打扰普通用户。
5.1 减少不必要的操作，使用更自然的交互
简化操作的过程中，针对不同的操作赋予最自然的交互形式能减少用户操作过程中的精力消耗。自然的交互应该是用户无意识的操作，是基于过往生活经验，阅历，学识等的一种本能，几乎不需要过多的学习成本即可完成。例如：用户旋转一张图片。相对于在输入框中输入旋转角度参数而言，将光标直接操控在图片上旋转显得更自然。输入需要至少三步（点击文本框-敲击键盘数字-点击确认），而直接旋转只需要两步（点击-旋转）。因为对于用户而言，点击图片进行旋转更接近现实生活中的操作，不管是交互步骤还是心理认知上，都会降低用户的操作难度，让用户觉得产品更简单更自然。
5.2 提供及时的反馈与帮助，避免重复操作
在操作过程中得不到反馈，出错后再重新填写，同样会增加操作的复杂性。在尼尔森十大可用性原则中，第一原则就是系统状态的可见性。系统需要让用户知道自己在做什么，需要让用户知道系统做了什么。例如：在表单填写时及时反馈是否出错，在格式设置时及时反馈是否生效，可以让用户少走弯路。必要时给用户提供帮助也能简化用户操作的复杂性，提高操作的成功率。
引用《简约至上》中的所说：创造简单用户体验的秘诀就在于把复杂性转移到正确的地方。任何产品都具有一定的复杂性，设计的目的不是为了消除所有复杂性，而是将它们放到最合适的位置。简化产品的复杂性替用户排除不必要的干扰，通过设计师的努力给每一个用户带来简单、愉悦的使用体验，让复杂的工作更简单。
作者：腾讯ISUX 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
7秒的消费决策中，67%的决策取决于色彩。
色彩是我们感知世界的重要媒介，在设计中仅次于功能的另一要素。色彩与我们的生活息息相关，怎样科学配色、灵活用色成了绝大部分设计师的难题。
作为一名拥有多年拧螺丝经验的设计师，不免每天都会和色彩打交道，在配色的过程中，你是否也曾遇到过以下困扰：每次做项目随便吸色？
盲目运用色卡？
配色总是看起来不舒服？
色感差，天天被老板和同事Diss？
…
接下来，请你花几分钟看看谷歌等其他大厂，都在用的系统配色方案。以下以船长BI为例，做品牌色彩的规范引导。
船长BI：
深圳船奇科技有限公司-是中国专业的跨境电商SAAS系统服务企业。旗下船长BI，专注亚马逊精细化运营与大数据分析，为不同阶段、不同规模的企业提供全场景多维度分析，一站式精准推广和全链路供应链协同管理，帮助企业实现数智化运营。同是船奇科技也是亚马逊SPN服务商。
01
1-1 设计主张
船长BI系统是亚马逊精准化运营及大数据下钻分析的高效化共同体。从单功能运作到多功能融合，再到大数据多元化产品下钻、闭环及溯源，打破了亚马逊跨境运营服务商单点运作的局限。我们希望新的品牌色，能够为船长BI在跨境企业中营造更加权威、高效向数智化转型的视觉感知。
船长BI 设计语言：英文Captain BI Design Language简称CapDesign。
经过团队的诸多调研到佐证,我们将品牌标准色太平洋蓝(Pacific Blue)，升级为更加科学、权威、智略的明亮立体的黑绿松石色(Dark Turquoise)。黑绿松石色在跨境电商行业中具有更多神秘的数智化意味，在实际应用中隐含着更多的生机和信任，表明了船长对进入数智化运营新挑战的气魄。同时，品牌色的升级能够快速区别于竞品，形成船长BI独特的色彩感知，通过色彩感知形成品牌记忆。
色彩命名源自潘通Pantone。
1-2 创建调色板
人的视觉系统在辨别颜色时，不会把色光分解成RGB或者CMYK几种单独颜色，而是按照色相度、纯度和明度来判断的，也就是HSB。HSB模式可以完美固定HSB中的某一个参数，只对其他两个参数做改变或者只改动其中的一个参数，符合人对色彩差异幅度的感知，而RGB、CMYK都是牵一发动全身的节奏。↗
我们以CapDesign品牌基准色#2AC5D4（H=185\ S=80\ B=83) 为起始点，S饱和度、B明度保持不变，H色相以185°为起点，以15°为增量或减量标准，生成24色色板。这个色板是我们选取辅助色的重要依据。
02
拓展丰富的辅助色
2-1 以邻近色、互补色、对比色为原则，选择绚丽多彩的辅助色↗
为了保有更多CapDesign 的品牌基调，我们选择了相对较多的邻近色，以保证整体色韵的清爽感和数智科技化意味。并利用对比色及互补色扩展色相，选择更加丰富多元的辅助色，使其色相对比鲜明，以保证能色彩够满足各种复杂场景。
Q：色相位到底选择多少个合适？
A：有的产品选择7个色相位，有的产品选择10几个色相位，都是允许的，选择的依据取决于：
1.色彩对比明显，选择色相数少；色彩对比柔和，选择色相数多；
2.产品功能的场景简单，选择色相数少；产品功能的场景复杂，选择色相数多；
Captain BI 是亚马逊运营与大数据集成，功能交叉比对及数据可视场景复杂，为迎合业务发展需要，CapColor选择的色相位为13个。
2-2 校正辅助色(波长和振幅)
虽然我们保持相同的饱和度和明度，使用科学的方法得到了较为合适的色相，但由于每个色相的波长各不相同，导致色彩在感官感受上存在差异。
在可见光波谱当中，波长越长其穿透力就越强；红色的波长是最长，穿透力就最强，感知度最高。↗
为了让不同色相在视觉感官上看起来更加协调，需要对色板的明度和饱和度进行反复的校验，以保证视觉感官更加和谐舒适。
校正原则
A.色相最好维系在同类色(色相环中15°夹角内的颜色)↗
B.色相感官保持平衡(明度和饱和度)
C.保证视障群体的识别度(WCAG 对比度)
调色的技巧
浅灰色调: 饱和度减少(S↓)，明度增加(B↑)
深色色调: 饱和度减少(S↑)，明度增加(B↓)
使用HSB调色模式时，可以参考以上规律，能让快速调和想要的颜色。校正后得到了以下色域清晰、对比明显的主色及辅助色。并且针对视障群体进行了色彩测试。
2-3 拓展梯度色谱
校正主色和辅助色后，我们需建立完整的梯度色板，来满足不同场景下颜色的应用。建立色彩层级，以提升品牌感知，达到信息传达辨识、强化界面层级等作用。
在梯度色板系统中，很多配色产品都是使用Tints and shades系统：通过在原有色相的基础上增加白色或者增加黑色，来改变它的明度和饱和度，形成梯度色板。但这种方法得到的调色板往往比较刻板生硬。CapColor在Material Design-Color的基础上进行了细化，构建更有层次感、空间感、立体感的梯度色板。
CapColor梯度色板：
1.在Primary的基础上，使用Tints and shades系统找到Light和Dark：
Light=(White+primary) 95%叠色；
Dark=Black 60%叠色；
Primary=原色相。
2.结合Material Design-Color实践，得到CapDesign梯度色板及相应的参数。
CapColor选择10阶梯度，对比稳健，更能凸显船长系列产品权威和成熟的形象；9阶梯度相对生硬跳跃，12阶梯度过于柔和平滑。
有的色相穿透性强、饱和度高，所以还需要进一步的校验，如蓝色 RYB：
运用以上的方法，得到CapDesign丰富的调色板，为后期业务做支撑：
03
易用的中性灰色
Captain BI系统大部分是由容器、面板、列表、卡片等其他组件及元素构成。中性色为系统锐化布局、表达边界、建立信息层次起到决定性作用。
3-1 中性色
中性色的搭建同时满足暗黑模式、换肤及印刷等诸多场景，故在实现时按照透明度的呈现方式。
3-2 黑绿松石灰色
中性黑绿松石灰色解决更多复杂的场景，如表格和表单双底色、图标的颜色等。中性黑绿松石灰色增强布局、区别背景，起到强化信息层次的作用。
黑绿松石灰在中性灰色的基础上增加色相和饱和度，这样得到的蓝灰色还是有些许生硬，还需要对饱和度和明度进行微调，让颜色更有层次感。
中性黑绿松石灰的方法：
在配色模式HSB中：
H=185(Brand Color)；
S=3(必要时微调)；
B=保持不变。
3-3 WCAG 2.1测试
为保证视障用户的使用，保证足够的对比度，CapDesign 遵守 WCAG 2.1 的标准，对调色板对比度进行了可用性测试，为后期灵活用色奠定基础。以中性灰色为例：
WCAG 2.1中规范了A、AA、AAA的对比值范围及使用场景，感兴趣的朋友可以前往WCAG 2.1官网详细了解，在这不在赘述。
3-4 场景案列
实践是检验真理的唯一标准，以下通表格的微交互对中性色进行完美的诠释：左边的表头和表格背景粘连到一起，视觉及信息识别困难。通过交叉运用中性灰色，明显右边的表格结构、信息层级得到强化，视觉更聚焦。
结语
主观情感的取色，一开始可能没遇到什么大问题，但随着产品不断完善，主观取色往往不能满足业务发展诉求。科学的系统配色，真正满足和服务设计；同时对设计一致性及提升团队效率起到肯定的作用。
通过这个漫长的配色过程，你是否重新审视过去设计中的配色方法？希望对配色困扰的你有所帮助。
色彩系统中的系统配色部分已经完成，接下来我们将死熬，续更系统配色在实际项目中的应用，做到科学配色、灵活用色。
作者：楚焱UX
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
表格系列第一篇我们聊了表格的基础内容和表格的组成要素，包含表格由内（展示项）、外（操作项）两部分组成，如图：
表格作为展现结构化数据最为清晰、高效的形式，常和按钮、搜索、筛选、分页等其他元素一起协同，构成表格页。通常表格页面包含三个部分：数据过滤、数据操作、数据查看。
数据过滤是对数据进行筛选的部分，由搜索、筛选、标签这三个部分组成。产品设计上提供多维的筛选和排序，将操作者所关注的数据展示到前面，便于快速查看、对比、分析信息，是一种增加用户效率的有效方式。
一般搜索和筛选会同时出现，但是两者一般很少同时使用来对数据进行定位；
搜索的交互触发方式有“实时筛选”和“点击按钮触发筛选”。实时筛选只适合数据量较小、数据严谨的表格页面，建议谨慎使用。“点击按钮触发筛选”适合大部分表格场景。
因用户需要手动输入，很难保证精准搜索，原则上所有搜索均为模糊搜索，必要精准搜索的地方使用筛选功能，给用户提供筛选选项。
用户搜索意图不明确时，将用户的查询与待检索的内容进行模糊匹配，使用模糊搜索时一定要结合自己的实际场景，慎重使用。
优点：只要有相关的内容都会被检索出来，减少了精准搜索带来的记忆负担；
缺点：容易把相关的信息也带出来，例如检索地址广州，把广州的相关编码也匹配出来。
用户在搜索时，针对某一数据字段搜索，来查找所需要的数据。
优点：搜索匹配精准度高。
缺点：每次只能对单一条件进行搜索。
搜索根据表现形式，可以分为以下四种类型：
单属性精确搜索：通过某个特定属性就可以快速定位到目标数据，具有唯一识别性的、高使用频率的、对用户决策有意义的。
切换属性搜索：可以设置几个常用的类别来快速切换搜索的维度，方便用户使用。
多标签模糊搜索：表格多个数据都具有特征，往往业务要求对数据的精确度较高。
多属性组合搜索：可以输入多个字段进行组合搜索（取并集），对空间的利用率高，适合更加复杂的列表内容。
筛选是将用户所需数据选出展示，其余数据暂时隐藏，通过筛选器的选择可以快速定位所需的数据，取消用户输入的过程，提升查找效率。一般筛选有三种形式：
平铺筛选就是将筛选项的内容，直接展示于页面之上，用于筛选条件很多，单独筛选条件对应数据无交叉，常见于信息密集型产品。
优点：可以承载多维的数据信息，选中项的可见性高，用户理解成本与操作成本低，且提高了用户筛选的效率。
缺点：占用太多页面空间，影响首屏的展示效率，增加用户的决策时间。一般配合“勾选即执行”使用，因此在执行筛选的过程（动画或加载时长）可能分散用户精力。
通常电商类产品在筛选区往往采用平铺布局。
条件筛选是最常用的筛选交互，便于从多个维度筛选，应对各种复杂的筛选情况。条件选择完后，选择触发筛选（若筛选条件不交叉可以选择实时筛选）。
优点：空间利用率高，起到了很好的收纳作用，整体页面更加美观。
缺点：当筛选过多时，信息量过于冗杂繁多。
2.3 表头筛选
优点：筛选当前列，更直观，一般情况下表单左侧数据筛选频次越高。
缺点：筛选的内容仅限于特定、单次列的筛选，对于首次使用者来说陌生，交互形式需要学习
2.4 如何合理的使用筛选项
信息排序：基于用户使用场景，以目标导向为依据，将高频的筛选项排列到前面，低频的筛选项置于后面。
默认折叠低频筛选项：当筛选条件有高低频之分，且对页面空间要求较高时，通过展示高频筛选项、隐藏低频筛选项，更好的提升用户体验。
所有筛选项都很低频：以点击高级筛选按钮的形式触发，将全部筛选项置于气泡或者弹窗之中。
在企业级中后台中，用户查看的数据往往属性较多且不唯一，通过简单的检索方式很难精确定位到目标数据，所以，在实际使用时，常会将大量非交叉关系的属性进行罗列，搜索、筛选、标签切换组合出现，形成多属性组合检索。
三、tab标签
标签切换一般用于和时间、状态的流转有关，且没有交集的数据内容。数据类型在5个以下的建议采用tab页切换的方式进行交互，展示清晰，用户操作效率高；超过5个可以考虑下拉选择或模糊搜索。
优点：根据标签，可以很清楚知道划分，筛选的准确性高，切换tab就可以筛选内容。
缺点：分类需覆盖选项，并且保证每一项没有交集，分类不能过多，超过7±2个选项可选择下拉筛选。
在使用中，索引本身应该是0思考成本的，否则就失去了索引的核心价值。围绕这一点，有两个设计原则：
1）宁少勿多和高频前置：即不要揣测用户需要，最常使用的展示位置尽量靠前。
2）当搜索项不可避免的比较多时，可以进行分类展示，降低寻找成本。
数据操作是表格的操作部分，根据操作对象的不同，可以分为：
单行操作也称行内操作，常见的显性与隐性两种方式。
1.1 显性操作：
操作项显示在行内，直观；文字按钮操作项一般不多于三个，图标按钮不多于四个时，操作项跟在行条目后面；当超过时，建议将相对低频操作选项折叠收起，点击"更多"或“...”下拉显示。操作按钮致灰时，鼠标选中可显示原因。
如果单行操作不那么重要，或者说行操作过多影响用户阅读时，可将所有的操作进行隐藏；
当用户鼠标悬停时进行展开所有操作，界面简洁，留更多的空间给需要查看的数据内容，减轻空间压力，减少干扰。这种方式能最大程度上满足用户快速查看与编辑的需求，但是在实际使用中，用户的初次使用门槛较高，需要有一定的学习成本。
a、对齐式
将所有操作进行整齐排列，一般是一个操作对应一列，当有操作缺失时，展示为空，这种方式能够让用户直接了解到操作的缺失，但反复的出现会造成表格视觉上的冗余，适合列数较少的表格使用。
将所有操作按照一定的预设排列顺序进行平铺，这种方式能够适应B端的大多数场景，将操作都简单平铺出来虽然看上去简单粗暴，但是在实际工作中，也是一种不错的处理方式
设计点：操作按按钮是全局操作还是单行操作其实是可以根据具体业务场景来决定的，判断用户批量操作是不是高频功能，如果是，就采用全局操作，如果操作是低频操作，那么完全可以只提供单个操作功能。
二、批量操作（表格外）
批量操作适用于数据量较大的表格，通常把操作放在表外部上方，这样操作更便捷。批量操作允许用户对一行或多行对象执行操作，通常与复选框操作配合使用，并在选中复选框后激活表上方操作按钮，如删除、批准、拒绝、复制之类的操作，这将节省用户时间，避免重复对多行进行相同操作，分显隐性操作：
较为常用，外漏操作简单易懂。如有赞的批量操作，表格左上角和左下角都有，这样不管用户从上往下选还是从下往上选的场景都能覆盖；飞书的批量操作外漏在表格表格的右上角，虽然按钮放在右侧符合用户右手操作鼠标的习惯，而且考虑到适配问题，但是批量操作的路径不符合用户的操作动线，路径变长，大家可自行抉择
容易造成记忆负担，增加学习成本，适合批量操作较低频的操作，产品没有那么复杂的产品。如飞书文档
统揽全局，无需选择数据内容即可进行的操作，常见的【新增】、【导入】操作。
数据查看是表格的主体部分，是信息的主要承载区域。在开始之前，我们先来看看该区的结构：主要由表头、行、列、单元格四个部分组成。
每个表头代表一个对象的属性，决定了下方每行对象要显示的数据类型。
表头在展示信息的时候尽量概括、准确、简化，达到节省表格头部空间，引导用户的注意力聚焦于表格中的数据本身。表头并不是表格的必要元素，当数据本身能自我表意的时候（例如邮箱），表头是可以删减掉的。
通常，表头的设计会和下方列表设计有一定的区分，标头文字有一定的标题属性，所以会通过背景色、分割线、文字加粗等方式来做区分。
根据表头的构成，可以分为以下三类：
除了容纳行标签之外，表头也可以添加排序、搜索、筛选等功能，通过对表头标签的筛选可快速完成筛选条件。这些功能受列的影响，一般只能做单次筛选。虽然表头筛选能在一定程度上节约空间，但对于复杂业务的产品来说，数据信息列多，高频筛选功能可能会被遮盖，表头复杂影响用户表格阅读，不推荐使用。
可配置列与配置筛选条件的功能类似，同样是考虑到不同角色的用户，查看数据的视角不一样，对应的关心的字段也会不一样。
有些表格由于数据量较大，需要对页面的上下滚动完成对数据的查阅，对表头进行固定，可以帮助用户更快地找到单元格的属性和含义，尤其是单元格属性信息数据没有特征时（比如都是数字、百分比、姓名等）固定表头可以大大提高使用效率。
当然还有固定列，当表格需要展示不同类别的数据较多一屏展示不下，可以对首尾字段进行固定，让用户通过左右滑动来实现对数据的快速翻阅，满足用户对数据的认知以及对数据操作的需求。
注意尽量避免横向滚动：正常鼠标横向滚动是需要用户按住 「Shift + 滚动」 才会使表格进行滚动，对于所有的鼠标用户而言，横向滚动都是极为痛苦的。
表头在能够概括的情况下，尽量简炼、准确，一般可根据上下文关系来进行减短简化，以达到节省表格头部空间和减轻视觉压力的作用。当数据结构比较复杂的时候，使用多级表头来体现表头与数据的层次关系。
对于比较复杂的表头，可以定义一个专有名词，如果有需要解释，则在字段名称旁边加说明小图标(小问号)。鼠标hover上去对专业术语或用户不常见的名词给予该字段的详细解释，同时满足新手、普通、专家用户的需求。
如果表格数据可以自我解释，表头就不是必须的。例如电子邮箱的收件表格，每列数据区别度高不会混淆，去掉表头也能轻易阅读。
表体部分所需要注意的设计点比较多，内容包括了数据的对齐方式、字体、分割线、行高、数据显示、单元格、行与列等，下面我们来依次聊聊。
表格内数据按照格式塔原理进行对齐，能让表格更加规范易理解，营造出良好的视觉引导线，视线流动更顺畅,提升数据的浏览效率，让用户快速的捕捉到所需内容。其对齐规则如下：
符合正常的心智模型，便于用户扫描过程中快速定位到下一行文本，左对齐的文本在展示的时候起到了纵向分割线的作用。多行情况下，居中和顶部对齐都是可以的。
包含金额、长宽高等需要关联比较的数字字段，这是因为我们在对比数字时，首先看个位，然后十位、百位等。
比如日期（2020-11-11），状态文字（未审核、已收款等）或者存在布尔关系的文本（是/否、男/女等），字段固定不变，居中对齐能更好地信息呈现。这里根据业务也可以按照文本型左对齐处理，让用户查看表格不会感觉混乱。
对齐方式保持相同可以使表格更好阅读，上下文保持一致，能保持表格竖直方向整洁，营造一致性和上下文环境。多级表头：多行或多列合并居中对齐，最底层表头可以按其数据对齐方式对齐。
使表格更加规则，视觉统一提高操作效率。
表格数据一般包含文本和数字，良好的字体能提高表格本身的阅读性。设计上需要注意以下几点：
表格中的数据要根据数量级确定展示形式，不需要精确的数学呈现，可以让用户更快地查找信息，下面是展示形式的建议。数据的度量单位无需重复标注，只需要在表头标识清楚即可，注意同一列单位保持一致。
深入了解用户需求，根据需求为用户提供差值、升降变化、合计值、平均值等直接展示形式。
表格中字体保持一致，文字信息字体统一、数字信息字体统一即可。数字信息字体选择——建议等宽等高字体，等宽的数字在同一竖线时更容易对比。推荐以下几款数字字体在表格中有更好的呈现效果，分别为：微软雅黑、Helvetica Neue、Helvetica、Arial、sans-serif。
设计表格时，尽量避免任何装饰性字体，简约至上才是关键
不要出现衬线字体：因为个性会产生阅读噪音，不利于用户对数据的理解和思考。
不要出现全大写字体：因为它很难读，需要转化思维。
不要出现使用斜体：易引起视线疲劳，影响阅读。不要出现多种字体：保持风格统一。
在表格设计当中，每一条线都有着它存在的意义，比如：
当表格中展示横线，隐藏纵线：用户的横向阅读体验更佳，强调一条数据的完整性，能够让用户进行快速地对应。
当表格中展示纵线，隐藏横线：用户的纵向阅读体验更佳，强调数据上下间的对比，能够让用户找到同一纬度数据下的对比。
在表格设计中，合理地使用分割线可以实现对表格行与列的强调。按照分割线的分布情况，可以分为4种类型：网格型、水平线型、斑马条纹型、极简留白型。这个部分在上一篇已详细说明。
设计tips：表格具有的颜色尽可能少，颜色和可读性是密切相关的，要合理的使用颜色，普通表尽量使用简单的背景色和点缀色。
背景色方面，除了行/列交替颜色(可以区隔内容，引导视线)、悬停高亮底色(便于准确辨别光标所在行)等处理方法，还可以对表头表尾进行视觉区分，但不能增加过多颜色以引起混乱。
分割线颜色尽量不要与背景色相差太大。当字体选择深灰色，背景为浅白色时，边框选择浅灰色，这样可以减少我们视觉疲劳，不会使表格看起来令人生畏。
分割线和斑马纹的应用色彩都不应该太深，如果你项目中对表格有比较多的选中需求，那么就不太建议使用斑马纹的格式，因为选中背景需要被高亮，那么一个列表就会出现 3 种颜色，是要尽力避免发生的。
开发同学工作的时候，使用的是盒子模型，设计师在出设计图的时候也要遵循开发逻辑。
为了让表格中的文字高度看起来舒适，有着视觉的呼吸感。我们首先得了解影响行高是由文字的高度以及上下间距组成。因此我们得出：
单元格高度=内容高度+上间距+下间距
单元格的尺寸包含：文字行高建议设为字号的1.5倍，上下间距设为字号的1.2倍。
对于单行显示数据内容的表格，建议行高约为内容高度的2.5-3倍；对于多行显示数据的表格，建议行中内容的最高点与最低点到行框的上下边距略小于文字高度。
当数据有单行信息展示有多行信息展示时（或长度不固定），要定义内容的行数（根据业务），根据行数确定行高多出的内容做省略处理。
固定行高时可以规范几种不同的表格行高，例如在我日常工作中规定了3种行高56px80px110px，行高较高时，我们数据内容都进行居中对齐就会有一些问题。有些单元格只有一行信息，有些有多行信息，会使页面看起来更混乱，信息查找速度降低。
表格行高跟随行内占用最多行数的单元格变化，设置固定的上下边距，表格行高随着数据信息的换行而变化如下图。
单元格数据一般有文字、图标、头像、进度等，在具体业务中，如果你找对了用户想看的关键数据，将会大大提升用户体验，反之则干扰用户查找信息，对于较为重要的数据可以进行关键数据的标识设计。
标签：关键数据较多，颜色与视觉重量要做区分。
图标：名称与文件类型图标区分。
人员信息：展示在表格中也十分常见，通常会用头像+名称的方式，例如下图temabition和飞书中对人员信息的展示。
度量单位的使用：其中的关键区别在于数字的大小。数据的度量单位无需重复，一般在表头标识清楚即可。
进度条：进度条或简单的数据图，它更能直观地展示数据的进度状态，方便用户对数据信息做判断如下图。
关键属性标识：比如用户重点关注数据状态、某些数据的上升和下降等，可用符号进行标识，帮助用户快速定位到目标信息。
空表格：表格数据为空时要给予一定的提示信息或快捷操作，让用户更快地进行对数据的操作。
空单元格：当表格单元格中没有相应数据时，要避免直接留出空白单元格。空白格容易造成用户的困惑甚至误解，用户会搞不清楚到底是没有数据，还是根本没有值？
正确做法是，数据不存在（数据库中没有该字段）用“-”，没有数量（数据库中有该字段）用“0”，且小数点后位数、单位，都要与上下单元格保持一致
是对单条数据的修改，直接在单元格编辑信息的形式有很多，针对不同的数据提供对应的编辑方案。
包含：原位编辑，悬停气泡编辑，下拉状态编辑，点击弹窗编辑拖曳排序等等。针对不同的业务性质对单元格采用不同的交互形式。
拖拽排序为用户的自定义排序，在用户拖拽时页面布局保持不变，适用于数据量较小有自定义排序的情况下。
可以通过视图切换查看更多细节，例如在teambition中支持对任务的表格/列表/看板三种视图的查看，每种视图的侧重点不同，可以 适应不同角色用户的不同专注点。
工作中常常会遇到单元格数据过多的情况，常见的方法有两种：
1、定义一个单元格长度或字数限制，超过该范围以"..."显示，鼠标悬停时出现气泡显示完整内容。
2、折行显示，这种方法让平铺直叙，用户可以直接了当的看到所有信息，建议不要超过三行，超出可“...”显示。
3、允许用户拖边框设置列宽，并记录设置。这种方案弊端是会占用横向的空间。
列宽的设置对于用户的高效阅读还是很有作用的，在设计时要根据具体的业务信息进行分析，列宽严谨的处理方式有三种：
第一，通过栅格，由列的数量决定列宽，主流框架组件一般是这种；
第二，可以固定部分列的宽度，其余列则按百分比处理；
第三，在固定宽度的基础上，允许用户自由拖动调整列宽的大小。（当然我觉得不要太拘泥这个，合适就好）
为了让不同数据在表格中相互独立，不混淆。我们需要保证首尾列的内容与表格两边的间距N1保持固定，不同列之间的间距N2在最小宽度的基础上，随着表格的尺寸不同而做自适应的变化。
在设计表格的初期，就需要做好设计规范，表格的边距要统一制定。
列的数量建议最多展示9条，因为人们的记忆在7±2之间，数据太多用户会找不到重点。但也不是必须，根据业务需求，如果需要大量数据展示时也要展示，因为视觉永远低于业务（好用比好看更重要）。
列信息从左往右视觉权重程度逐渐降低，最后一列权重高（以眼动实验或点击数据为依据得出权重高低）。所以尽量减少列的数量，关注用户需要的必要信息。当数据列过多时，要分清主次列，非重点、辅助性信息可以通过次级入口来解决，如固定重要列(主体名称/操作列)，次级列在表格中间区域左右拖动。
为便于用户对数据进行对比分析，可以在原始数据的基础上给出差值、升降变化等数据处理结果，减少用户数据加工的过程，直达用户获取信息的目标(需要明确用户目标)，提高用户的阅读速度。
在一些用户高度自定义表格中，数据的列宽不好确定的情况下，可以允许用户对列宽进行调节。通过光标的变化提示列宽自定义操作，拖动可完成列宽设置。
列数据还可以根据用户需求进行自定义设置，可以选择要展示的列，在默认情况下仅展示最常用、最重要的几个指标（如下图），也可以对列进行排序。在表格右上方的设置按钮对表格进行设置，清晰高效。用户可以根据自己的需要，自由的选择显示所需指标，隐藏不必要指标，减少干扰。但需注意系统应记住用户上一次的自定义列设置，减少用户重复操作。
底栏在表格最下方，一般是统计信息、分页控件、备注说明、操作按钮(加载更多)等内容。
底栏最常见的元素就是分页，分页固定能省去用户需要翻到顶部或底部进行操作的麻烦。
1. 良好转换：用户在结果列表中查找特定信息而不仅仅浏览信息流。
2. 掌控感：分页可以让用户知道表格的总量以及当前页面在总量中的位置，知道浏览完页面需要多长时间。
3. 数据加载快：通过对加载内容的限制，可以极大的减少数据加载的时间。
额外的动作：用户要到达下一页表内容，就必须点击分页控件上的按钮跳转，等待表格新内容的加载。
简洁型：当分页数量较少时，通常在7页以内，就只有最基础的展示。
迷你型：当页面空间不足或者降低分页的视觉影响时，可以采用迷你型。
多功能型：当表格数据较多，为了满足更多的用户需求，可以根据需求选择分页类型。完整型的虽然满足各种功能需求，但是所占空间较大，所以我们要根据自己的需求合理拆分使用。
分页的选择需要根据不同的场景选择最优的设计方案。
表格无限下拉加载使用户在数据内容面前一直滚动查看。向下滚动的时候不断加载新内容，虽然十分方便与诱人，但不是什么场景都适用。一般来说，无限滚动适用于在数据有限且信息重复的表格，有利于内容探索。分页则适用用户在寻找特定信息及浏览记录，易快速访问。
1.高效浏览：一个高效的方法让用户浏览表格数据信息。
2.体验更好：用户使用滚动能获得比点击分页有更好的体验。
1.受限性能：缓慢的加载速度会造成用户的不耐烦与离开。当数据量过大时，结果就是页面性能越来越低。
2.位置丢失：没法标记当前位置且不能再随意回到之前位置。一旦离开，就会丢失当前的浏览记录，要回到上次的位置，必须得重新滚动去寻找。
3.信息缺失：滚动条并没有反映出实际数据量。
除了分页的使用还可以进行无限滚动的交互，鼠标点击“加载更多”按钮以查看更多数据。这个功能不太适合数据量较大的表格，在具体业务中一定要慎用。
在今天的 UI 设计领域，由扁平化设计风格占据主导地位，已经是无可辩驳的事实了。扁平化应用除了提升用户获取信息的效率外，对设计师而言就是设计的难度大大降低了。
一个界面的 UI 视觉元素，仅仅只需要图片素材、矢量图标、几何、文字，UI 设计师的工作仅仅是对内容进行组织和排版，涉及到原创的也仅仅只有少量的图标（大多数人还画不好）。
这种状态持续了很多年，看起来岁月一片静好。
但是，这两年市场发出了一些不同的声音，那就是打破纯扁平风格的 UI 风格、元素开始越来越盛行了。
比如新拟态风格在年初炒了一波热度，各大平台和公众号都铺天盖地的发文和介绍，介绍它的设计理念和设计方法。
还有就是以饿了么、美团为首的国民级应用在主页显眼的位置里使用极具识别性的拟物图标，引起设计圈的热议。
首先讲讲新拟态设计，之所以之前只字不提，是因为我对这个风格实在没什么好感，有种对纯拟物借尸还魂的味道，且它的样式对于信息密度高的应用是完全不适用的，只能活在飞机稿里。
而国内大型应用开始在实际项目中上线拟物图标，意义就不一样了，证明这样的设计是经过几个大厂团队认可，且有共识的。
当然，这并不因为大厂用了就无脑推崇。而是纯扁平的设计已经越来越难满足部分需要强视觉效果的页面设计了。
今天的互联网和过去不一样，用户的增长留存不再是过去一样通过裂变和口碑完成，一个产品只要认真打磨体验、功能就能获得用户的青睐和驻留。用户的精力时间是固定的，而互联网产品又层出不穷，佛系的等待用户临幸是没有出路，这种现状也被称为互联网的下半场。
佛系不行，当舔狗更不行（成本太高），所以今天大型产品都在对待用户的态度都选择更具更具侵略性的霸道总裁人设。不仅是用色饱和度越来越高，运营活动越来越密集，广告和强提示也越来越多。比如刚打开了三个应用，进入的首页大家自己意会……
有点扯远了，回到话题上。在这种掠夺用户注意力的思路指引下，再做所谓的性冷淡、大留白、极简风就不会合适。当对扁平的视觉效果已经开发到极限以后，那么进一步在一些细节处应用拟物就成为必然的选择。
而拟物的应用并不可能铺设到整个应用中去，因为完全拟物化的设计降低信息浏览效率是必然的，所以它只适合做局部的视觉强化，来加强用户对特定区域的感知。
最常见的需要被凸出的要素，就是首页中应用的快速入口图标、分类图标和底部导航栏图标了。这些区域长期受运营活动支配，相信大家已经很习惯了。
只是，这些图标开始在脱离运营活动的状态下，也开始使用非扁平模式，那就不再是运营设计师的工作职责，而是 UI 设计师们绕不过去的槛了（知识盲区）！
且除了 APP 外，其它领域对于拟物设计的需求也会开始逐渐提升，尤其是目前越来越复（fu）杂（kua）的大屏数据展示、车载界面、定制系统等等。
作为新世代的 UI 设计师，多数人对拟物的设计可以说是完全空白的状态，所以是时候要重拾拟物设计这个传统艺能了。
前面我有提到，拟物主要应用在关键的图标上，但应用的拟物风格并不是过去我们追求的那种极其真实、复杂的拟物，而是经过一定简化、抽象后的拟物 —— 轻拟物。我们要先来明确一下轻拟物到底是什么。
首先我们看看，过去优秀的拟物图标和设计案例，它不仅表现元素本身的光影、透视、构造，甚至会非常完整的表现物体表面的材质和肌理。
这种图标单看起来确实很好看、细致。但是，把它丢进我们当前的页面中是非常违和的，因为它们细节实在太多了，而且画起来非常耗时间，不利于项目整体的推进。
所以为了符合画面的质感，又要考虑项目效率，轻拟物这个概念开始被提出和应用，作为一个折中的解决方案。
它和纯拟物设计的共同点在于，也表现光影、结构、透视，但它尽可能精简了轮廓的复杂度、肌理和层级，呈现出更概念化、理想化、易于辨识的拟物图形。
所以，我们主要去学习的内容是轻拟物的设计方法，而不是徒手画照片（这个可以缓缓）！
而轻拟物虽然 “轻”，但它依旧也还具备拟物的基本特征，是有实体质感的。但是扁平从插画到图标设计经过多年的改版，有各种叹（hua）为（li）观（hu）止（shao）的设计，应用大量的渐变、投影、模糊的效果，比如下图案例。
这在我们之前图标的系列干货中有提过，这类设计是面性图标的进阶版，它们依旧属于扁平风格的范畴之内，不能和轻拟物划上等号。
对于这几年才开始学习 UI 设计的新手来讲，拟物已经变成一个很陌生的事物，这对行业来说是比较悲哀的一件事。
因为拟物的设计不仅仅是画图标而已，对它的学习可以全方位的提升设计师的基础素养，不仅包括对传统美术（结构、光影、色彩、透视）知识点的剖析，还包含对 PS 使用的深入探索。
可以说，自从拟物不成为必修题材以后，九成以上的UI设计师是不会用 PS 的，这极大的限制了他们自身的可能性和作品的多样性。
轻拟物本身也是拟物，所以它的核心基础和拟物设计师一致的，只是省略了更多复杂的细节。而对于整个拟物的体系来讲，最重要的东西实际上只有2个，形体、光影。
形体的表现，就是对图形外轮廓的样式的呈现。在过去我们写的图标分享中，有写过面性图标进阶的设计中，可以包含更多的细节、内部元素，而不是仅仅只有外轮廓。
轻拟物的形体设计就要处于进阶面性图标或者更难的水平之上，即你要把这个图形的内容有明确的示意并画出来，而不是用抽象的图形做填充而已。
比如大众点评的快速入口图标，虽然看起来很复杂，但是那是配色上的复杂，而不是形体轮廓上的具象化。
换句话说，拟物插画的图形基底，类似扁平插画风格图标，不能表现得太抽象，也不能增加过多的细节，需要一种恰到好处的平衡（玄学），这就非常考验设计师的判断和经验了。
并且，在描绘轮廓的时候，新手尽可能的采取正视图来进行绘制，而不要通过俯视图、侧视图、斜视图等方法来呈现图形的多个面，这样难度会大幅度上升，比如下面这种情况。
除了形体外，光影就是整个拟物的灵魂了。
当一个完整的图形完成填充色时，它是扁平图案，如果完成光影呈现的时候，它就是三维空间的立体图形，比如下面这个圆的案例：
在拟物的设计中，我们对光影的定义是至关重要的，所以首先就是针对该图形确定光源的方向，是上方、前方、左上还右上，这对后续的设计有一连串的影响。
如果对光影没有正确的解释，那么在制作细节的渐变角度、投影的使用上，就会产生错误的设计，造成光影视觉冲突和矛盾。
在创建了光源以后，物体受到光线的影响就会产生明暗面和投影，可以简单划分成4个部分，高光、亮部、暗部、投影。
这和我们学习的素描有一定的差异，美术中对光影的表现害会包含明暗交界、反光面，这对于轻拟物的来说负担太重，所以我们要去掉它们，接下来重点讲讲高光和暗部。
高光是物体作为受光物对光源的直接反映，比如人像摄影中人眼眸中的高光就是对闪光灯的镜像表现，再或者一拳超人中男主光头上长期存在的高光配饰（多数动画的光头角色都有）……
高光可以非常有效的增加画面的层次和对比性，让物体看上去更有冲击力和观赏性。
而暗部，则完全是为了正常表现物体结构和弧度增加的示意，因为不在受光面，所以颜色会变暗。在实际操作过程中，我们可以通过渐变的方式开控制明暗的表达，但尽量不要直接手动设置一个渐变色出来，而是为它叠加暗部或亮部的黑白透明度渐变。
了解这几个特性以后，下面，我们就通过一个实例来讲解一下轻拟物设计的过程吧。
作为轻拟物的演示，直接画个图标讲一遍怎么操作是没什么用的，我们要从实际场景出发，用它来解决一些真实的问题。比如看看下面的 KFC 官方 APP 首页：
总结它的问题，不难发现首页顶部业务功能太多了，顶部图标就包含30个（加滑动的），虽然每个模块图标单看都没有硬伤，但堆积到一起，就使得顶部缺乏足够的信息层级和对比性。
我们要做的，就是通过轻拟物的方式，调整快速入口最大的三个图标，凸显它们的重要性以及和其它图标的视觉差异性。先从第一个图标开始，讲解一下如何完成轻拟物化设计的升级。
第一步：确认轮廓造型
第一个操作，即确定图标本身的轮廓。根据原有图标的样式我做了一些改动，包括加粗车头，减少高度，增加车灯等。并对每一个模块进行纯色的填充，定义它们的色彩和做出区分。
形体的重要性在于要对图形本身有比较合理的呈现，不要让比例失调和图不达意。
第二步：完善图形细节
这一步，就要在原有基础上，进行下一步的深入。包括对一些细节交代得更清楚一点，增加一些有趣的小元素等等，完善它的具体样式。
第三步：增加基础的暗部表现
在这里，我们就要开始为图标增加高光了，高光从右上角打下来，那么有叠加关系的元素就会产生一个向下的投影。并且反向暗部的表现，让整体的立体感稍强。
这一步在软件中主要使用蒙版功能，通过蒙版在背景上方创建一个图层，然后添加深色的透明度渐变，就可以表现出对暗部和投影的效果。
第四步：增加高光效果
接着，就是最后一步，将高光添加到画面中来，讲整个图标的质感进行拉升，
通过上面的演示，我们可以将整个拟物设计流程精简成：
1.确定图形基本轮廓、外形比例、模块色彩
2.丰富细节样式增加趣味性和适当的拟真感
3.通过蒙版添加暗部来完善表现的明暗和层级关系
4.添加高光元素作为图形的亮点，拉升层次感
然后，通过这样的步骤，再来完成后续的两个图形，拆解完的效果如下。
然后，再用这三个修改后图标套用进原来的页面，并做出对应的修改，再来看看前后对比：
通过这个对比，我们就可以看出在这个复杂的首页头部中，轻拟物风格可以从一众平面中被凸显出来，且不会显得太突兀和复杂。
而这就是轻拟物在项目设计中的实际作用，当画面元素已经开始超负荷，且容易导致同质化的审美疲劳和主次不清时，就是轻拟物登场的时候了。
B 端产品主要是 Web 端产品，空间大、操作多，内容相对复杂。需要通过页面布局或者视觉设计表达出明确的逻辑关系，从设计角度降低用户的学习成本。而用户有固定的认知规律。格式塔原理揭示了人类视觉的认知是整体的：我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。
格式塔主要包括 7 个基本原则：
今天我们就来总结下，格式塔原理在 B 端产品中是如何应用的？
我们先看 2 张截图，分别是不同分辨率下的界面效果。
可以明显的感觉到高分辨率下，菜单列间距离较大，菜单的归属关系很清晰。而低分辨率下，菜单间的距离变小，特别是后面两列的菜单会给人混在一起的感觉。这就是格式塔原理中的接近性原则，距离近的关联亲密，距离远的就各自独立分组。
当我们想要传达给用户层级关系时，就需要善于利用接近性原则。例如表格上方的功能按钮，通常我们将高频、核心操作放置在左侧，低频、辅助功能放置在右侧。通过增大元素间的距离，达到功能分区的目的。
相似性原则是通过颜色、尺寸、图形等方面的共同属性，实现信息的分组或者高可读性。
例如在可视化图表中，不同范围值的指标采用不同的背景色。通过背景色的差异，将同一范围内的数据形成视觉关联，提高用户对信息的识别效率。
通过图形尺寸的相似性也可以构建内容分区。例如阿里云、腾讯云控制台的首页，都采用了双列设计，左侧主要以高频的业务功能信息为主，右侧是辅助运营信息。两列尺寸宽度有明显差异，用户会将相同宽度的卡片归为一组。这样有助于用户理解两类卡片的内容差异，并有效地突出业务信息。
IBM、苹果的 Logo 设计，无论是“用刀砍过”，还是被“偷咬了一口”，用户仍然可以识别出完整图形。这就是视觉闭合性原则的一种表现方式。
在 UI 设计中，则会通过对齐方式，形成虚拟空间。例如下图中阿里云通过明显的背景色、阴影等手法形成有形的内容空间。而微信公众号则是平铺背景色，内容区借助标题、卡片对齐形成视觉闭合空间，最终将页面划分为左侧导航菜单和内容区两个空间。视觉表现上更轻量化。
另外闭合性是需要元素之间相互辅助的，单独的元素无法构建出闭合空间。以下图为例，虽然四个小的卡片做了间距分割，但是由于界面整体上是横向分割的。我们会将 4 个卡片看作是整体元素去理解和认知。
用户更习惯于从左到右的横扫阅读，因此连续性主要体现在横向空间中。
下图中，虽然左侧的标签文字与右侧的内容信息有较为明显的间距，高度尺寸差距也比较大。但是用户不会将内容看作是 4 个独立的个体，而是理解为两组信息。
在某些场景中，如果信息平均分布，不会产生连续性的视觉感知。
例如下图指标监控中，指标都是采用小卡片，间距、尺寸较为统一。这种情况下用户就很难对信息分组处理。在我看来这些指标只是一个个的视觉散点，没有明确的视觉重点。用户无法感知到内在的逻辑性。用户想要找到某个指标时，需要逐个检索，花费的成本更高。
通过上述很多图片，我们可以看出页面元素基本都是横平竖直，中规中矩的元素和分割方式。或许有些单调乏味，但是胜在简单，不会带来额外的视觉噪点。
特别是 B 端产品，基本看不到异形的存在，甚至全圆角矩形都很少见到。即使有异形，也只是作为视觉表现元素存在于内容中，而不会作为空间的划分边界。
主体与背景原则最典型的应用就是蒙版弹窗。通过拉大主体与背景的差异性，凸显弹窗信息。
当我们需要着重表现内容时，同样适用于主体与背景原则。例如登录界面的设计，会通过差异化的背景、阴影等方式，带给用户清晰的视觉层级，适当凸显输入框的主体地位。
而 B 端内容区是核心空间，基本都是采用纯白背景，与页面背景形成对比，从而占据信息的主体地位。
共同命运原则听起来有点玄学，指的是相同运动特征的元素会被认为是同一组或者是具有相关性的内容。运动的元素在 B 端产品中应用很少，我没有找到合适的案例解释这个原理。
在移动端产品中有些应用案例。比如 iOS 系统中，桌面布局编辑态下抖动的图标，可以与静态不可编辑的内容形成隔离效果，视觉引导性更强。同样今日头条频道编辑时，也采用了抖动效果。
虽然 B 端产品没有 C 端色彩丰富，表现力上没那么炫酷。但是两者对信息传达的要求是一样的，要求和谐、有序、层次分明，辅助传达内在的业务层信息。灵活地运用格式塔原理将对产品的体验提升会有很大的帮助。
格式塔原理不仅限于视觉表现，产品经理或交互设计师在原型设计时，也要重视格式塔原理，辅助设计方案表达，提高团队间的协作效率。
今天的分享就到这里了。如果有更好的案例，欢迎评论区留言分享给大家~
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
快速迭代的产品存在着同质化趋向，如何做出差异性？如何将品牌精神向外传达？如何在有限的时间内，满足产品需求的同时带给用户更好的
体验感，进而体现设计的价值呢？静态画面动起来或许是个不错的选择！
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
Hi，我是彩云。界面是用户在与任何产品、APP 或平台交互时看到的内容，用户体验就是建立在坚实的界面设计基础之上的。所以，如果你想要在 UI 设计上提升能力，应该多去思考界面设计背后的原因。
今天会跟大家分享一些被广泛运用的界面设计规则，它们能快速使得你的界面设计更干净、高效。
用更容易让用户理解（说人话）的引导文案，提升使用体验。
（彩云注：下面 2 个案例中，左侧的“购物车”和“库存 2”太过于术语化，右侧的“仅剩 2”和“加入购物车”更加贴近用户的日常理解。大家平时工作的时候，也一定要注意界面中的文案，尤其是说明文字，控件文字等等，这个点经常容易被忽略。）
良好的对齐方式，可以增强内容的可读性，让用户的视线更容易扫描。
（彩云注：左侧的“之”字形视动线比较难阅读，且不够专业；右侧的垂直对齐增强了可读性，也让设计看起来更加统一，能够快速的提升设计细节。）
使用图标、动画作为标签，有助于更轻松地理解内容，它使界面看起来更加理性和丰富，能瞬间抓住用户的眼球。
（彩云注：左侧的导航相较于右边，很难第一时间准确识别它的意思，增加图标后不仅更快看清，视觉上也更加美观。）
大段的长句会让内容变得难以阅读。为了获得好的体验和 UI，应该注意拆分内容，并使用项目符号突出关键点，利用拆分好的内容块让用户更快抓住重点。特别是在“功能说明和条款条件”或任何声明时，提炼要点有助于提升用户体验，这样也不至于让用户直接忽略。
（彩云注：左侧的大段文字我想应该没多少人会去阅读，右边的至少还能在短时间内快速看看几个关键词。）
进度条帮助用户追踪流程，它也能使查看上下步骤更加容易。线上购物，表单填写，申请流程等场景使用这种格式能很好的简化流程。
（彩云注：左边的表单 UI 不方便跟踪进度和流程，右边的表单把进度放在顶部能帮助用户清楚的知道流程进度。）
错误提示一定要明确，易于理解，方便用户进行下一步的操作。如果用户不理解界面上出现的错误，用户就会感到很失望，可能会放弃接下来的流程。在 UI 设计时，在正确的地方用通俗的语言说明问题，以避免歧义，这一点非常重要。
（彩云注：我常常遇到各种出错，但出现的提示太过于术语化，也没有提示在正确的地方让我非常苦恼。）
从菲茨定律（Fitt’s Law）中我们应该知道，目标区域的距离和外观与所采取的行动成正比。因此，为了将注意力集中在转化按钮上，按钮应该准确放置在合理位置上。此外，按钮的大小应该易于点击，避免用户因尝试点击时不方便而流失。
（彩云注：左侧的按钮不在正确的决策位置以及按钮太小，右侧的按钮简洁明了并且符合用户的心理预期，能够让用户更快决策并点击。）
颜色是 UI 中不可缺少的部分，它能影响用户使用应用时的情绪。正确地使用颜色将使 UI 看起来更加丰富合理。
（彩云注：左侧的蓝色按钮颜色并不符合用户对于删除的心理预期，右侧的红色按钮对用户的心理预期有危险和警告，用红色代表删除能够让用户集中注意力关注这一特殊的操作。）
用单列展示内容，能更好地帮助用户扫描。当你的应用和网站上要展示大量信息时，将所有信息垂直对齐时，能更好的保持用户关注度。
当用户准备登录或注册你平台的时候，把所有可用的社交媒体登录尽量放在首位。这将避免用户填写表格时付出额外的认知负担和时间消耗而流失。首先使用社交媒体账号，能很好地增加点击率。
在用户做选择的时候，需要清晰地告诉用户选中的到底是哪一个选项。模棱两可的颜色会增加用户的认知负担。更少的颜色和清晰的选中状态能让用户获得更好的体验。
（彩云注：左侧的问题在于选中状态不清晰且选项的颜色过于丰富，右侧的选中状态清晰且选项颜色只有 2 种，选中和非选中，体验会更好。）
如果想给信息分组，使用留白是最好的方式。加条线作为分组符号会在界面中增加了一个额外元素，空白能让 UI 看起来更加干净和优雅。用线分组的情况适用于类似 Twitter、Medium 之类的重内容平台等场景。
保持设计的一致性，能够降低功能复杂度并让用户更快决策，一致性设计让用户更快熟悉操作而不需要太多思考。（彩云注：左侧的选项圆角不一致，会让用户思考为什么这里会有不同，而右侧的一致性选项设计，能让用户忽略内容外的干扰。）
在搜索输入栏添加适当的占位符，提示用户可以在平台上搜索和找到的内容，这样可以提供用户参考并带来更好的用户体验。
以上这些就是在设计数字产品体验时应该遵循的 14 个基本规则，这些点虽然基础，但却经常被人忽略。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
无论作为设计师还是普通浏览者，大家观看一个网站时最先接触到的就是网页的头部区域，这部分内容为网站的其他各个方面设定了基调，在网页设计中起着非常关键的作用。
尤其是如今简洁设计比较盛行，多数时候把头部内容设计好就变成了吸引用户眼球最好的办法。网页设计师在设计网站头部时投入了大量精力，同时要兼顾创造力和实用性。根据一项Google的研究，用户只需要短短数秒就可以形成对一个网站的看法，甚至有些观点是在令人难以置信的1秒内形成的。用户对品牌的了解就是从这么短的时间内开始的。
在通常网页设计中，首页上方的整个空间都被视为头部区域。作为人们在加载网站后的最初几秒内看到部分，头部信息起到了一种邀请作用，它应该提供有关网站的基本信息，以便用户能够在几秒内了解网站的主要内容。
如果以招聘活动站点为例，整个头部区域设计要明确传达企业形象，及本次招聘活动的特点。给浏览者一个强烈的视觉印象，企业已向你发出邀请，我们对人才十分渴求，等等信息… 如果有线上线下活动同时参与，那么在整体风格上尽量保持一致。
网页头部的任务是给用户提供一些基本问题的答案：代表什么品牌，提供什么服务等等。如果我们在内容上引起了用户情感上的共鸣，那么就是正确的设计。
那么主要元素通常包括：
在设计网站头部内容时，从思维层面来讲没有任何东西会限制你的创造力，它应该是令人难忘的、简洁和兼具实用性的，是一个可以展示创造性的开放领域。
下面让我们一起来看看头部内容设计的一些技巧。
1. 关于尺寸
对于网页头部图片的大小是没有统一的答案。有时候设计师希望提供相对固定的数字，但网页设计最大的难点之一是很难确保每个屏幕尺寸的有效性。即使两个屏幕的尺寸相同，分辨率也可能不同，因此用户看到的内容也不一定完全一样。
因此，我们不要拘泥于精确的像素概念，最好遵循经验积累的常识规则。
头部的高度本着不干扰内容感知的基本原则。对于一些展示信息资源的页面，较小的头部区域是一个不错的选择，而对于落地页或者企业客户首页，头部区域可能会更大，而且多数大客户会有主视觉单屏展示页。
如果某些网页，例如落地页头部内容较长的情况下，最好在首屏给下一屏内容露出一些空间，这样用户就可以意识到下一页还有内容，引导用户滚动。
2. Logo展现
当一个人发现自己在陌生网站上，总是习惯于从屏幕的左上角开始浏览网站。尽管设计师有时候认为打破常规的布局也可以带来不错的效果，但是多数用户如果他们常规位置找不到预期的信息，将会不假思索地认为这个页面是难用的和不规范的，需要花费很多的努力才能理解。这就要看你的设计目的和受众群体能够接受哪些程度的变化，我们今天主要说大多数受众。
Logo ——与居中或右侧放置相比，用户更容易记住那些 Logo 放在左边的品牌。如果你使用的是圆形 Logo，那么可以把它居中放置，尽管它的有效性仍然比放在左侧要低。
3. 吸顶导航栏
吸顶导航，换句话说就是「粘性标题」，当你滚动页面时，导航区在页面中跟随，现在成为一个网页设计标准。如果不违反网站整体设计理念，请将导航栏吸顶固定。无论是PC端还是移动端设计，这都是一个好的选择：
可根据页面内容展示要求，向下滚动时调整导航背景透明度，尽量少的影响内容展示同时使页面看起来更生动和通透。还可以在滚动时简化导航栏样式或高度，使用户能找到但又不过于抢眼。
总之，固定导航栏有助于提升用户体验，保持用户导向并给予了他们更多控制权。
3. 关于图片的应用
头部内容所用图片可以选择直接和要表达的业务相关性很强的，例如招聘类网站使用招聘场景图片；也可以选择中性感觉的例如办公场景、城市风景类图片进行虚化降低清晰度或明度来突出前景内容；
高质量图片——摄影对于网页设计师来说是一个强大的工具。它可以讲述一个故事，唤起用户的情感，并鼓励访问者进一步滚动。对于那些有强烈冲击力的图片的网站，试着做一个透明的标题，它可以更好地显示图像，并保留了主要链接。
轮播图片——如果客户给了几张代表该企业业务的出色照片，这种方式就没错！企业希望用户可以滚动浏览一组精美的高分辨率图像。
插画——网站的头部图片必须能引起读者的共鸣，建立起人与人之间的联系。如果图片是独特的且易于辨认，即使是从网站标题中剪切出来，效果也会很好，可以利用当今的插图潮流来实现这一点。
4. 视频或动画
当然我们也不能只关注静态图片，添加视频也是最有效的网站头部创意之一。如果可能的话，尝试着在头部内容中添加主题视频材料，很多网站利用在背景中添加短视频来吸引用户，尽可能以最好的方式展示他们的公司或产品。
△ 华夏幸福校招官网首页动画，拨云见日的效果加上中式剪纸风格的运用，将公司各业务线融合到几个转轮中，产生了故事性的动画场景。
如果想要使设计更具吸引力、生动和令人难忘的另一种方法是添加动画。它可以使网站头部内容变得非常酷。以每季校园招聘企业站点为例，各大公司对应届生群体的追逐，很大程度上体现在对该群体审美和喜好的迎合上，年轻有活力的动画或视频元素绝对是吸引眼球的不二之选。
当然不一定只有满屏大型动画，一般动画越复杂面积越大占用流量越多，客户打开延迟也影响观感。这时候我们可以根据功能不同，设计一些交互性的动画，去提升客户使用感受，尽量不影响网页打开速度。
5. 移动端头部设计
网页头部不可能只显示PC端的网页上，还应该正确显示在移动端的网页上。因此，在近年的设计中，网页必须具有响应性，并且能够很好地适应各种移动设备，这样才能带给用户完整的设计体验。
移动设备的日常使用广泛性早已影响网站设计，即使在PC中，也有一些细节看起来像是面向移动设备的网站设计。例如，Banner和汉堡包菜单都起源于移动设计。
移动端有着与PC端不同的屏幕尺寸和操作方式，很多时候需要设计师在一开始就考虑到两种界面的适应情况，比如在PC上顶部一条的导航，到移动端就演变为一个汉堡包菜单。而原本PC页面中展开显示的内容，在移动端会向下层延伸，首层界面成为一个内容聚合页。
网站是以头部内容为先导的，它就像是一张独特的名片。因此，我们在设计网站时，尽可能最大限度地关注该区域。
最后还要提醒大家，一定记得定期更新网站头部内容哦！以校园招聘大客户为例，大多数企业都会在每年春秋两季的招聘旺季更新其招聘主题风格，以保持网站的新鲜感和时效性。
以上只是在工作中的一些点滴体会，微不足道。感恩能在UXD集体中不断成长。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
网站设计之一：怒马！超实用的单页网站设计指南（附大量资源）
网站设计之二：旅游网站设计分析！教你10个小技巧
网站设计之三：实例教学！如何将极简风格的原则运用到网站设计中？
网站设计之四：另辟蹊径谈创新！提升网站设计形式的几种方法
网站设计之五：经验分享：移动网站设计应该避免的“七宗罪”
网站设计之六：4000 字快速回顾20多年的网页设计发展史！
网站设计之七：腾讯出品！2021-2022设计趋势报告：动态篇
网站设计之八：为什么千万别随便学国外的极简设计？
网站设计之九：高手出品！2020~2021年UI界面设计趋势
网站设计之十：如何做好网页头部内容设计？来看 58 设计师的总结！
移动端网页在今天虽然已经变得越来越重要，但我们在日常使用中依然会遇到一些糟糕的页面。近日，开发者Umer Mansoor就总结了开发移动网页时应该避免的“七宗罪”。
在移动端方寸地，有细节才能抓住用户，可以参阅这《60个以小见大的设计细节！》，保证会学到很多。还有，记得不要犯《ANDROID应用中十大常见UX错误》
众所周知网页加载速度是网站性能的一项重要衡量指标，毕竟很多时候用户并不总是在WiFi状态下浏览网页，所以加载缓慢无疑是移动页面七宗罪之首。移动网页在设计时应该避免集成过多高分辨率的图片以及累赘的脚本文件。
当网页映入眼前，凌乱的文字排版当然也是访客难以忍受的。就像人们在现实生活中倾向于和思路清晰的人交流一样，当用户和网页“交流”时也希望能快速找到自己需要的信息。所以杂乱的排版同样是移动网页应该避免的设计误区之一。比如Eurosmartz的移动版完全不像是为移动设备设计的网页。
随着移动设备性能的提升，很多移动网页设计者倾向于在移动端堆叠更多的内容，这时导航功能就变得必不可少了。可诸多移动页面在设计导航功能时又没有足够重视其可操控性，比如按钮太过紧密、链接间距过小、菜单过于隐蔽等等。各种社交网站的点赞功能尤其容易在滑动网页时误点击。蹩脚的导航无疑严重影响了用户和网页“互动”的过程，以至于有些用户要“抱怨”自己手指太肥。
某些时候我们可能会遇到一些桌面端和移动端页面风格差异巨大的站点，比如Toybox。一些对此站点不熟悉的用户在从Toybox的桌面端跳转到移动端时，也许很难意识到这是同一个网站的两个不同版本。虽然Toybox桌面端的动态效果挺好，但这种会给用户造成极大困惑的设计明显难以得到用户的喜爱。
网页弹窗在桌面端已经令用户厌烦不已，可不幸的是一些移动端的网页设计者还是把其带到了移动页面上。毫无疑问由于移动设备屏幕尺寸的限制在移动端弹窗明显会有更好的传播效果，但无疑也会遭受到用户更多的厌恶。
当用户使用iPad访问某一个网站时将其自动重定向到适配iPad的版本，这听上去的确是一个好想法，可在实际操作中一样会遇到问题。比如当一个网站的移动版由于以上的种种问题让用户感到难以接受而想切换回桌面版时，自动重定向基本上让用户陷入了死循环。此外由于重定向而导致浏览器无法打开网页的现象也时常出现。所以在使用自动重定向功能时应该三思而行。
作为用户当然可以理解网页开发者在页面上设置一些广告，可横幅形式的广告无疑应该被归为“七宗罪”之一。从互联网的发展历程来看，横幅广告的思维好像还停留在1999年，可现在已经是2013年末尾了。
总结看来，Umer Mansoor列举了页面加载缓慢、排版凌乱、导航功能不易使用、桌面端和移动端页面风格差异巨大、弹窗、自动重定向、横幅广告共七种让移动页面体验糟糕的“罪恶”。如果自己设计的页面中包含这其中的某些项，也许是时候考虑做一些改进了。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
网站设计之一：怒马！超实用的单页网站设计指南（附大量资源）
网站设计之二：旅游网站设计分析！教你10个小技巧
网站设计之三：实例教学！如何将极简风格的原则运用到网站设计中？
网站设计之四：另辟蹊径谈创新！提升网站设计形式的几种方法
网站设计之五：经验分享：移动网站设计应该避免的“七宗罪”
网站设计之六：4000 字快速回顾20多年的网页设计发展史！
网站设计之七：腾讯出品！2021-2022设计趋势报告：动态篇
网站设计之八：为什么千万别随便学国外的极简设计？
网站设计之九：高手出品！2020~2021年UI界面设计趋势
网站设计之十：如何做好网页头部内容设计？来看 58 设计师的总结！
提到网页设计，最先想到的是当今主流的韩国设计和扁平化设计，当然个性化排版、视频代替文本、全屏大视野、滚动视差、多平台全适应等设计形式已经进入了我们的视野。西方简单、功能性的美学精神”少即是多”这一设计理念攻占了我们的大脑，很多时候，在开始做设计之前脑子里会来回浮现这些风格的设计。那么，怎样在主流设计方式中做出有自己特色的网站呢？我们从以下几点介绍在大环境下提升网站设计形式的方法。
那么，怎样在主流设计方式中作出自己的特色呢？我们从以下几点介绍些提升网站设计形式的方法：
在众多的设计师追逐主流风格的同时，民族文化感觉的设计越来越少，不光在国内，在世界各地都出现了这样的情况。当然不可否认还有很多设计师在为民族设计而努力。下面这几个站点虽然只有简单的设计和动态效果，但是却有一种非常淳朴的民族风格，这也是最吸引人的地方，每个细节都流露出民族的特点和气氛。不是只有文化性质的网站才能赋予文化设计风格，在商业产品类型的设计推广中同样适用。
日本眼药水网站，将现代工业社会的产物与传统鬼神文化中的五种妖怪以卷轴、插画传统形式展示，与漫天遍地的明星代言广告形成对比，同样是眼干、眼涩、眼疲劳，同样是以办公室、上班族为消费群，文化创意上的突破使人眼前一亮。
(小编按：那个妹子是我的女神横山美雪，吗？)和风服装店，日本特色的风铃、简约的插画，”和风”，大和民族追求与自然的和谐之美，从这个服装网站上我们可以看到日本设计文化体现了对自然的尊重，反映了朴素美学的内敛性格。
缅甸传统舞蹈音乐合奏网站，缅甸古代戏剧舞蹈，是从缅甸傀儡戏、古典戏剧及阿迎舞等古典艺术中产生的。傀儡戏中的一些节目和各种傀儡角色的不同的舞蹈动作被大量移植到现代缅甸舞中。傀儡舞中”傀儡步”、”傀儡爬跳”等成为现代缅甸舞的基本动作，是文化多样性的辉煌继承。黑白图片和大面积留白的海报设计形式，突出舞蹈者主体，用在网站上更显神秘。
http://www.itwillbeastounding.com/
俄罗斯莫斯科大剧院是莫斯科的地标性建筑之一，是莫斯科有名的芭蕾舞与歌剧剧院；是俄罗斯历史最悠久的剧院，享誉天下，是世界上最著名的剧院之一。它不仅继承了欧洲芭蕾的历史传统，更重要的是，在俄罗斯丰富的民族音乐与舞蹈的沃土上，建立和发展了自己的芭蕾体系。将沙俄古典风格融汇于设计版块中，同样大量留白处理给了图片展示更多的空间。
大面积整站或局部性使用高清图片，在之前设计分享中我们见到了很多案例，这里介绍几个日本以图片展示为主的网站，精致的图片不需要过多的装饰。
坂本龙一是日本当代最让人尊崇的音乐家之一，音乐领域涉猎甚广，在先锋电子乐领域拥有特殊地位。代表作有《Merry Christmas Mr. Lawrence》《末代皇帝》《遮蔽的天空》《桃太郎》《高跟鞋》等，为1992年巴塞罗那奥运会开幕式谱曲并担任指挥……坂本龙一成为”大众明星”的原因，一方面在于他个人对于电子、摇滚、爵士等多重音乐风格极具灵感的把握；另一方面则在于他能在商业、艺术和实验之间找到平衡点，作出既有实验意义又有动听旋律的作品。
http://moonlinx.jp/special_issue/003/
日本设计强调材料的内在之美，注重与大自然的和谐，珍惜自然材质，这与日本自然资源相对稀缺有很大的关系。日式风格中，回归自然是最大的特色，推崇贴近自然、强调自然主义，让使用者有置身自然的感觉。用产品的工艺制作图片作为网站的主体和背景，拉近了观者与产品的距离。
http://www.ishiyamasenko.co.jp/
传统工艺美妆店铺，单从cover引导页的图片就能看出该店铺的卖点。特色产品图加上柔美的动态散花效果，为网站加分，导航中加入商城外链可直接在线购物，利于用户体验。
日本联合新闻社，社内的场景图片很好的展示要表达的主旨。
街区是一个城市的重要标志性特色，将这样杂乱无章的旧街道作为网站通栏头图，配合简介的形式设计，也能很出彩。
美宝莲日本网站，将实体店作为网站背景，搭建成实景的巨幅海报展板，这种形式是否比存粹的明星代言更接地气些？！
对比下面两个日韩服饰类网站，可以看出日本网站在图片选择上更注重产品本身，极具质感和张力的图片真实朴素，力求展示产品与人的关系。而韩国则更注重整体的氛围的搭配，通过环境的营造来提升产品的品味和档次，产品只是搭建系统中的一部分。
图素质量低是我们在设计过程中经常遇到的情况，我们通常用到最多的方法莫过于高斯模糊、柔光、滤色、添加纹理质感，将图片处理成做旧、仿古、年代感、单色……又会是什么效果呢？！
箔工艺，金银箔具有很好的延展性，将金银打展成薄膜状，与绢结合，应用于古代服饰中。此文化再京都有四百余年的历史，现在主要用于文物修复。取箔工艺品的一个局部，重新组合作为整张背景，贴片处理的文字与背景的融合更显古代文化的精妙。
http://www.hiroto-rakusho.com/
人物素材粗糙的情况下，采用水彩的滤镜效果，背景加入点状网格，极具形势感的箭头做引导，个性十足。
全日本剑道联合会，网站采用时间轴展示的形式，从1950－2000年每一期获胜者的照片和信息，可以看出由于70年代以前都是黑白照片且像素低，和近期的彩色照片反差较大，所以网站设计成了古朴做旧的年代感风格，加入很多早期照片中的截图作为插画元素，确保了风格统一。
http://www.kendo.or.jp/champ/#/about
Daum是韩国最大的门户网站之一，以邮件和社区产品为核心，是韩国第一个电子邮件服务网站Hanmail的前身。牛仔蓝单色照片处理更像电影和动漫场景。
也有整体黑白加入局部彩色色的案例，将复杂图片简化处理，对于简洁的页面设计来说，这是个不错的方法。每个版块都是黑白照片做背景，文字做JS动态移入效果，在图片的某个元素上加入VI主体颜色，故事感很强。
手绘、矢量图形设计的图形场景环境，用在食品、旅游、地图、婴幼儿等方向的设计上更容易拉近消费者，给人放松愉悦的心情。相比图文混排更贴近生活。
狗粮推广网站，将网站设计成宠物乐园，各个品种的狗狗们都有自己的一段视频，内容是狗狗们对几种产品的喜好对比。
http://www.solvida.jp/solpa/#/MainPage/001
企划创意公司，技术上只是一个简单的FLASH站，但空间跨越性思维设计却给这个网站带来了不凡的效果。由局部的空间延伸出各种异空间的交汇，加入互动效果而引发的更多惊喜也进一步提升了用户参与度。
用3D拼图建造起一个小型城市，4个建筑代表网站要展示的4个心理学的具体分类，建筑物夸张的拟人化动作实现页面跳转。
http://www.soc.nara-u.ac.jp/kokoro/
日本儿童专用鸡蛋，此网站将所有产品相关内容装进鸡蛋中，食用后产生的剩余物可大变身继续用于其它物品的生产，循环利用避免环境污染，所以在首页展示上才会有类似瀑布流的大量周边产品展示。网站首页是自动向下播放展示的瀑布流效果，hover及跳转都伴随非常可爱的音乐和动态，恰当音乐的播放和触碰hover的小惊喜也会给网站增添色彩。
日本山形放送局的地区地形图，大家都看过现实版的景点手绘地图，该网站也用了这种形式。比较有意思的是他的功能非常强大，是一个可放大缩小的真实版地图，没有跳转，完整的手绘google地形图。以小青蛙作为代言人对每个景区的优势作手绘图形注解，以当前弹出的形式展示该地的历史、自然、观光、社会、祭祀、美食、传统等信息的详细图文、视频解析。
http://www.nhk.or.jp/yamagata/mitekero/
九州熊本天草村,用动态图形化完整的对天草村进行了设计演绎，重要景点默认做了动态处理，跳转后都是另一个完整的实景矢量图。对景点中的标志性小建筑做了页面弹出实景详细讲解。
这种形式在新加坡儿童乐园的设计中也同样得到了使用。
设计风格也是体现一个国家文化的重要方式，严寒漫长的冬季成为俄罗斯的标志，在页面上打造一个同色系的冰雪世界，反而使彩色的主体信息更加突出。
一个优秀的网站它的交互性也非常重要，拥有好的交互性可以让浏览者有着更高的参与感，并且也能增大网站自身传播效果，还可以提高用户对自己的网站的依赖性和忠诚度。
Panasonic剃须刀产品JS展示站，设计形式与松下电子实现”星罗棋布的网络社会”和”与地球环境共存”的理想呼应，整站的背景都是由动线点组成的动态图形面拼合而成，图片和文字的展示停留在这星罗棋布的空间组合中。此时网站要表达的不仅是展示产品，还有松下文化。
http://panasonic.jp/shaver/lamdash/dna/index.html
东京交响乐团，该网站对用户的参与性做到了极致，从网站主内容上没有关于东京交响乐团的图片文字信息，用户可以在页面专属音乐键盘提示的情况下，用独创音乐的新颖形式创作属于自己的个性音乐，并对音乐逐帧做了记录，可以返回欣赏创作成果，并分享到各网站。
SPECIAL-T 绿茶网站，玩过网游的同学们都知道游戏中做任务有地图寻路功能，该网站采用了这个原理，在大海中建立类似于西游记的龙宫，用户在没有任何导视的情况下，360度无死角在海洋里自由探寻，最终的成果便是在一段时间的遨游后到达网站的终点产品引导页，阐释special的感受。
http://ogreen.special-t.com/en/
如果你想要一种优雅而直观的产品展示方式，全屏视频网站是一个不错的选择。全屏视频网站能一瞬间点燃人们的好奇心，当然也可能马上让访客失去兴趣，这都取决于你是否能够驾驭这类高大上的设计风格。
日本福祉大学，校园内外学生学习、活动氛围的场景视频作为背景播放展示，视频上一层则是手动切换的内容介绍字幕，一个大学的网站更像是一个微电影展示。
http://www.n-fukushi.ac.jp/lifestyle/
Mikihiko Kyobashi 海底摄影记录展示站，整站视频展示配上海洋真实的声音。透过视频看到的海洋不是一汪死水，阳光穿透海面，碧海蓝天，比静态的照片更能展示生命的气息。
bc服装网站，暗色的动态视频做背景，与前层简单的图文排版形成反差，图片hover的3D立体效果令人耳目一新。
图片与视频的混排切换展示，拉伸后展开整站播放效果。
http://getgoingtoday.org/beyond
日清食品，微距拍摄的视频，用时间倒数计时的方式，记录在这一碗日清方便面泡好的3分钟内，世界各国家不同肤色年龄的人群品尝日清食品的状态缓慢特写，加入了用各国语言描述倒数计时的声音，视频中间穿插有和日清logo呼应的装饰语言，隐藏在页面下方的时间轴可以找到每一分每一秒的画面祯，时间可自行选择切换到想要的那一帧。
以上五点都是当下主流设计中另辟蹊径找创意，简单五点很难将所有好的创意都涵盖在内，除此之外大家肯定也有更好更多的想法。网页设计总是立足于浏览者的审美、文化，以及信息传播的习惯、方式，还有网页开发技术的进步。对于绝大部份网站来说，没有强大的专业力量去研究用户新的习惯和需求，也不可能开发出新的技术功能，只能在一些大型的网站中窥见一些发展的趋势，再从中找到自身可借鉴的地方。这种借鉴如果成为普遍性，那我们也很难在互联网的大潮中有自己的一席之地。网页设计已逐渐往多元化方向发展，更好的创意、更新的想法都来源于我们真实的生活感受，想要我们的网站变得更强大、拥有更好的用户体验，无可厚非，我们应该做的是大胆、大步地去尝试。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
网站设计之一：怒马！超实用的单页网站设计指南（附大量资源）
网站设计之二：旅游网站设计分析！教你10个小技巧
网站设计之三：实例教学！如何将极简风格的原则运用到网站设计中？
网站设计之四：另辟蹊径谈创新！提升网站设计形式的几种方法
网站设计之五：经验分享：移动网站设计应该避免的“七宗罪”
网站设计之六：4000 字快速回顾20多年的网页设计发展史！
网站设计之七：腾讯出品！2021-2022设计趋势报告：动态篇
网站设计之八：为什么千万别随便学国外的极简设计？
网站设计之九：高手出品！2020~2021年UI界面设计趋势
网站设计之十：如何做好网页头部内容设计？来看 58 设计师的总结！
蓝蓝设计的小编 http://www.lanlanwork.com