“时间”作为人机交互界面中经常出现的元素，本质上都是为了去传递时间维度的信息。但是我们平时在使用一些互联网产品时会发现，关于“时间”的显示状态或形式在不同场景、不同页面里往往是不太一样的，这是出于怎样的考虑呢？今天我们就来聊一聊，如何在产品设计中把握“时间”显示的诀窍，让其在页面中发挥最大的作用。
按照“时间”元素在页面中的出现场景和所起到的作用，可以大致归为以下几类：
时间作为描述整个事件的重要组成部分，缺失后会对原本所要传达的内容产生严重的影响，进而影响用户的使用预期和结果，比方说用户可能不能以一个较低的价格完成商品购买，或错过了产品发布会的时间。
指用户本人作为行为主体或行为的接收对象，在某一动作发生后为其所打上的时间标记，比方说“我”购买商品下单的时间或收到一封邮件的时间。
用户在使用产品进行内容消费时，时间作为该条内容的附属信息，起到补充说明的作用，比方说一条短视频或新闻的发布时间。
在上面的案例中，我们会发现“时间”在对应场景里所发挥的作用不同，用户在使用产品时往往对时间存在不一样的关注程度。因此我们在做页面设计时，要根据具体场景和用户诉求判断“时间”元素的重要性和优先级，通常情况下：时间作为事件的关键构成要素＞行为的时间标记＞内容的附属信息，之后再思考用什么样的设计形式去展示来达到我们的目标。
“时间”的呈现方式和运用技巧
在讨论“时间”元素的设计之前，我们先共识一些有关时间的理解和概念。时间可以划分为“时间点”和“时间段”两个维度，类似我们高中物理时学过的“时刻”和”时间间隔“的概念。
拿开会举例子：“下午 4:30 会议开始”、“下午 6:00 会议结束”描述的是事件开始、结束的时间点，而“整个会议持续 1.5 小时”、“会议时间为下午 4:30-6:00”描述的是事件过程的时间段；但是，我们在会议开始时也可以这样讲“会议将在 1.5 小时后结束”。
通过上面的例子我们可以发下，同样是描述一件事情，运用不同的时间点、时间段的方式去表达，意思一样但却传递出不一样的情感，并且两者存在如下的“换算”关系：
1）时间段加上定语会变成时间点（但同样是时间点，“下午 6:00”是绝对时间，而“1.5 小时后”是相对时间，刚好对应到我们设计时两种时间戳类型）；
2）两个时间点之间则表示时间段。
所以，我们在平时表达或设计时，要先想清楚用“时间”是想侧重表达某一事件、动作发生的即刻时间节点？还是想描述其所持续的时间过程？之后我们再针对不同语境去选取合适的文案和呈现方式。
时间的呈现方式离不开：时间戳类型、时间显示格式、时间颗粒度。其中，时间颗粒度指的是描述时间的最小单位，往往颗粒度越细，给用户传达的确定感越强（如转账时间是 12 日 15:15:20），对用户的激励作用越明显（如距抢购结束仅剩 00 时 01 分 23.6 秒）。
1. 绝对时间戳
绝对时间可理解为事物发生时的确切时间，由具体日期（年、月、日）和时间（时、分、秒）组成。使用绝对时间戳的优势是信息传达精准，显得正式，给人确定感和安全感，同时排布规整，便于形成认知习惯；但缺点是内容显示过长不利于阅读，并且占用空间较大。
在时间显示格式的选择上，为了避免混淆，推荐使用文字格式或“-”分隔符来分隔日期，而“/”分隔符在不同国家有不同的展示顺序习惯，容易造成误解，尽量少用。
时间颗粒度的选择依情况而定，一般场景总结如下：
2. 相对时间戳
相对时间在产品设计领域通常是指内容生产、到达、或状态发生改变时，距当前时间点的时间差值，多用于 push 通知、信息流产品，侧重强调内容的时效性；而“倒计时”也算相对时间的一种，侧重营造时间的紧迫感。使用相对时间戳的优势是用户辨识、理解成本低，不用通过计算来判断时间过去或还剩下多久；缺点是不够精确、正式，并很难衡量两个时间点的临近性。
在使用相对时间时，要注意格式友好。时间单位可随着时间的推移自动改变；数字不要过多，尽量取整；并且可设置其与绝对时间转换的临界点。
在设计界面中的“时间”元素时，要遵循场景贴合、便于阅读理解的总体原则；之后根据场景和目标，再选取合适的“时间”呈现方式（包括时间戳类型、时间显示格式、时间颗粒度）。
当时间作为“A.事件的关键构成要素”时
一般情况下使用绝对时间，并且要看是为了强调某一关键时间节点，还是侧重表达整个持续过程。此外，选用关联场景的文案或者运用倒计时（相对时间）的形式，可一定程度上促进用户更加集中注意力，提升对信息的关注度，并达到特殊的激励作用和转化效果。
当时间作为“B.行为的时间标记”时
该场景通常是为了追求确定感，通过提供精准的时间和日期便于用户定位到过去或将来的某个时间点（段）去查找、回顾相应内容，因此大多数采用绝对时间，时间颗粒度依具体情况而定。
当时间作为“C.内容的附属信息”时
如果所设计的产品供给内容的更新速度快，用户活跃度高，并且此时内容的时间信息准确性不那么重要反而更侧重于内容的时效性，那么通常会使用相对时间。部分信息流产品（比如新闻资讯类、社区类）会在列表页使用相对时间，在详情页使用绝对时间，时间颗粒度也是依情况而定；并且会随着时间推移，在某一时间节点前把相对时间转换为绝对时间。
文章来源：优设 作者：VMIC UED
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
我们在周围的世界中看到了许多熟悉的设计模式。例如，大多数道路用实线或条纹线分隔车道。还有交通灯和道路标志可以帮助您在道路上行驶。如果每个国家/地区使用不同的系统，司机将不得不为他们想要驾车经过的每个国家/地区学习新的驾驶模式——但这不切实际！
UX 设计模式的工作原理类似。它们使用户无需学习新系统即可熟悉浏览数字产品或网页。
什么是用户体验设计模式？
UX 设计模式是用于构建用户界面的常见构建块。设计师使用 UX 设计模式作为可重用组件来解决常见的可用性问题。
例如，我们经常看到的一种设计模式是面包屑。面包屑向用户显示他们所在的页面以及返回主页的路径。
UX 设计模式如何改善用户体验
设计模式为设计人员提供了构建块以更快地创建用户界面，但它们也增强了用户体验。
UX 设计模式通常遵循用户熟悉的通用设计标准，从而减少学习和浏览新产品或网站所需的时间和认知负担。
在《我们如何决定》一书中，作者乔纳·莱勒 (Jonah Lehrer) 写道，识别熟悉的模式会释放出多巴胺——一种与动机、奖励、记忆和注意力有关的化学物质。当用户体验模式按预期工作时，多巴胺命中会增加。
使用有效的UX 设计心理学技术的设计师，例如熟悉的 UI 设计模式，可以增强用户体验并使产品交互更加愉快。
UX 和 UI 模式之间的差异
大多数设计师交替使用UX 模式和UI 模式这两个术语，因为区别很小，有很多重叠，并且可能会引起混淆！
UX 模式：用户流和导航的可重用模式——在社交媒体平台或网站上无限或连续滚动。用户认识到他们可以向下滚动以刷新页面。
UI 模式：用于视觉和交互设计的可重用模式——一个汉堡图标。用户知道汉堡包图标将打开导航。
何时以及如何应用设计模式
知道何时使用设计模式对于产品设计和用户体验至关重要。设计人员必须仅在有明确的可用性原因时才使用设计模式。
以下是识别用户需求和应用设计模式的四步、以问题为中心的方法：
查明问题——您可以通过分析和可用性测试的组合来识别问题。例如，您注意到在获取客户详细信息时，您的产品注册流程有很高的流失率。通过可用性测试，您了解到一个常见的痛点是注册过程耗时太长——您的注册表单要求填写全名、电子邮件、年龄、性别、城市和手机号码（其中许多细节与使用产品无关） 。
通过市场和竞争对手研究找到解决方案——寻找竞争对手和流行的设计库，以找到常见的 UI 模式来解决您的问题。回到我们上面的例子，您会发现竞争对手通常只在注册时询问用户的全名和电子邮件地址。它们还允许用户使用社交媒体帐户进行注册和登录，从而简化注册流程。
自定义设计模式——您必须自定义新的设计模式以匹配您的品牌和现有设计系统。对于我们的用户注册示例，此自定义可能包括调整输入、社交媒体按钮和提交按钮的圆角半径。占位符文本、输入标签和错误/成功消息将使用您的样式指南中的颜色。
测试您的设计模式——最后，您必须始终测试新的设计模式实现，以确保它们满足可用性和品牌要求。
上面的例子展示了可用性测试的重要性——识别和应用用户界面设计模式以测试开始和结束。
不要因为竞争对手有一个设计模式或者你认为这是正确的做法就添加一个设计模式。例如，您的网页设计是否需要面包屑导航？对于电子商务，可能有必要让用户返回到产品类别或知道他们在结账序列中的位置。但是，对于大多数其他网站，它只是添加了额外的数据点供用户处理。
UX 设计模式的常见示例
设计模式分为六大类：
A. 数据输入输出
B. 内容结构
C. 导航
D. 社交媒体和分享
E. 激励
F. 等级制度
数据输入和输出
数据输入和输出是最常见的用户/产品交互之一。用户输入信息，系统返回数据或完成一个动作。
一个很好的例子是许多网站和应用程序使用的日期选择器。尽管它们看起来略有不同，但大多数日期选择器显示类似的布局和功能——标题中的月/年、星期几和日期。
当用户单击一个日期时，它会突出显示以选择。最后，有一个 CTA（有时是一个取消按钮），用户可以在完成并准备继续时单击。
数据输入和输出的其他示例包括：
a) 表单提交
b) 成功/失败消息
c) 应用通知
d) 进度条/步骤
内容结构
你有没有注意到大多数界面使用类似的块布局和图像缩略图？或者，管理界面的左侧导航面板和右侧的内容如何？
使用这些熟悉的内容结构和 UI 模式可以帮助用户快速浏览新的数字产品或网站。目标是最大限度地减少摩擦（例如学习新界面），以获得无缝和愉快的用户体验。
导航
熟悉的 UI 模式可以帮助用户轻松浏览网站或数字产品。桌面和移动界面有不同的导航模式。
例如，主导航位于桌面网站或应用程序的标题中或左侧。在移动应用程序中，主导航栏位于页脚中，只需用拇指触碰即可。
无限或连续滚动是 Instagram 和 Pinterest 使用的典型导航设计模式。当用户滚动时，系统会刷新以显示更多内容。这种设计模式很熟悉并增强了用户体验，因为用户不需要单击下一步按钮或分页来查看更多内容。
社交媒体与分享
设计师可以使用多种社交媒体和共享设计模式，包括：
a) 链接的品牌社交媒体图标
b) 共享图标 - 向右弯曲的箭头或三个点的共享图标
c) 引言——用引号引用此人的姓名和形象
这些熟悉的设计模式可帮助用户找到社会认同，以建立对您的产品和品牌的信任。
这些设计模式利用心理学，鼓励用户执行所需的操作。这里的目标是在用户和产品之间建立联系。
激励
激励 UX 模式利用设计心理学来鼓励用户执行任务和操作，从而创建用户/产品关系。
设计师鼓励使用设计模式通过积极的反馈、认知、游戏化等来吸引用户。
例如，游戏化模式鼓励用户邀请朋友来获得奖励。UI 模式将通过 CTA 向用户显示他们当前的积分，以邀请更多朋友赚取更多。
等级制度
层次结构模式类似于内容结构，因为它们为用户创造了即时的视觉熟悉度，以便快速浏览界面并知道如何完成所需的操作。
博客的两种常见层次结构模式包括标题和目录。用户可以滚动页面以快速找到他们想要的内容或使用目录跳转到特定部分。
面包屑是电子商务网站用来帮助用户浏览产品页面和结账流程的另一种层次结构模式。
总结
UX设计模式是用户体验的重要组成部分，因为它们最大限度地减少了产品的学习曲线和人类认知负担。设计师必须知道何时使用这些 UX 设计模式，而不仅仅是出于习惯或模仿竞争对手而实施它们。
分析和可用性研究可帮助设计人员确定界面中缺少哪些 UX 模式，然后测试他们是否实施了正确的模式。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
2021年，标志设计师朝着更大胆、更具创新性的设计迈出了一大步。与平面设计趋势类似，品牌推广大量采用软循环动画和鲜艳的配色方案。它还开辟了实验排版，鼓励创造性思维重新审视标志设计。
2022年的标志设计趋势很可能会延续这一大趋势，我们希望看到上述美学在全球范围内得到重塑。您会看到设计师同样选择极简主义和卡通标志、3D 和平面标志、花卉和文字标志。我们认为2021年是创作自由的一年。然而，看起来在2022年，我们将看到它真正的肆无忌惮。
1) 简单的几何图形和基本形状
2) 高大的标志
3) 饱和颜色和渐变
4) 象征主义和极简主义代替现实主义
5) 涂鸦和草图
6) 粗体字标标志
7) 无衬线标志
8) 花艺和微妙的装饰
9) 黑白标志
10) 3D与平面样式
简单的几何图形和基本形状
在2022年，拥有基于复杂图形的标志几乎会很少见。此类标志通常难以记住，客户可能会很难发现在品牌与其图形表示之间的联系。对于寻求加强存在感和提高品牌知名度的大企业来说，这可能是一个巨大的问题。因此，公司倾向于拒绝此类标志，而倾向于使用一些基本的东西。
基本的几何形状是各种三角形、圆形、正方形、点和线，它们使标志设计成为简单的图像。作为优化，建议设计师使用充满活力或独特的配色方案。或者相反，切换到黑白，将这种极简效果发挥到极致。最后，还有负空间，这是另一种采用简单几何形状并保持视觉趣味的好方法。
高大的标志
虽然2022年的大多数标志设计趋势与我们两年、三年或五年前曾经拥有的一切产生共鸣，但高大的标志就像一口新鲜空气和创造力。反对过度使用的三角形、方形和圆形标志。正如我们从多个Behance项目中看到的那样，它们的美学非常适合寻求领先的时尚公司、精品店、创意工作室和大品牌。
高大的标志部分借鉴了装饰艺术风格，它们特别喜欢优雅的垂直框架。高大的标志同样具有波西米亚风美学和现代几何元素。事实上，这种标志设计趋势的根源并不那么重要。真正重要的是新的形状让设计师想出了新的标志创意，所以在这里我们希望他们以不同的方式处理字体和图形元素。
饱和颜色和渐变
实践表明，标志的颜色工作和色彩的选择是一个非常个人化的故事，通常很难跟踪全球趋势或与特定颜色相关的任何标志趋势。有人更喜欢黑白标志。有人会选择现在特别流行的单色、裸色或大地色。然而，如果我们看看大品牌，我们将能够在标志设计中使用生动、饱和的颜色来定义一个巨大的趋势。
对标志设计中颜色的兴趣已经发展到这样的程度，创作者不仅要增加饱和度，还要选择纯粹、生动的解决方案，同时尽可能地简化标志。太多的细节和颜色会造成混乱的外观，因此选择其中一个至关重要——在极简主义时代，选择很明确。然而，我们不禁强调鲜艳的色彩很难处理——尤其是糖果色。它们可以使品牌标识看起来廉价甚至业余。因此，当您关注这一标志设计趋势时，重要的是要取得平衡——否则您将面临使用可疑标志的风险。
象征主义和极简主义代替现实主义
有多种与简化标志和极简主义相关的标志趋势——这可能是最能说明问题的。我们每个人都将标志创建为一件真正的艺术品。动物、花卉、神话和生物——在标志内，它们展示了精湛的技艺和对细节的迷人关注。诚然，这样的标志确实看起来很引人注目，但从响应式设计的角度来看，它们失去了其他类型的标志。
您可能还记得响应式标志，这个术语是在大约4年前引入的。这些是可以适应不同屏幕尺寸或其他媒体的标志。为此，设计人员可以删除字标、简化或隐藏标志。今天几乎没有人认为响应式标志是一种独立的现象或趋势。相反，响应性是标志的自然特征，象征主义和极简主义的运动正好证明了这一点。
涂鸦和草图
2022年，草图和涂鸦将作为图形设计趋势回归，因此它们作为单独的标志设计趋势出现。其复兴的关键是人们对设计师个人品牌方法的兴趣增加。显然，没有什么比以独特风格绘制的快速草图、卡通人物和形状更好的了。
因此，要为标志设计中的更多涂鸦以及企业品牌中草率的卡通标志和快速绘制的吉祥物做好准备。以快速和朴实的方式制作的手绘标志也受到欢迎，我们已经看到以这种方式书写品牌名称的项目和团队。
粗体字标标志
如果我们考虑2021年的标志设计趋势，粗体字标志将是最好的例子。于2020年底推出的实验排版项目专注于不常见的几何解决方案。难怪品牌和标志设计师不能忽视这种大规模的图形设计创新——在这里，我们在标志设计方面有了一个全新的方向。
许多跨国公司选择字标标志。例如H&M、可口可乐、Zara、谷歌、Visa等品牌。然而，几乎没有人认真考虑使用实验字体进行品牌重塑。这就是为什么此类文字商标标志主要在独立工作室、小型企业、精品店、沙龙和个人创作者中传播。也许，这些大胆标志的特征是其吸引力的另一个关键。您可以将它们视为那些知道要注意什么的鉴赏家的标志——或者那些想要感受品牌美学的人。
无衬线标志
虽然使用大胆的实验排版并不是每个人的趋势，但无衬线字体是每个人都知道和理解的。自从设计师拒绝花哨的脚本和衬线字体而支持无衬线字体以来，已经有一段时间了。但由于存在普遍趋势，我们可以说它仍然是2021年的标志设计趋势——顺便说一下，这得到了我们上面写的极简主义和基本几何形状的流行的支持。
拒绝花哨字体的动机非常简单——使用无衬线字体要容易得多。使它们适应不同的屏幕和画布尺寸并不复杂，因此它们更适合响应式标志。有趣的是，几年前，我们观察到了一个相反的过程：许多公司从无衬线字体切换到衬线字体，因为复古设计非常流行。今天，随着复古狂热慢慢释放出来，健康的实用主义出现了，无衬线字体再次相关。
花艺和微妙的装饰
我已经不知道设计师和产品创造者用极简主义制作了一系列标志多少年了。与此同时，许多小企业继续选择和使用它们，所以这些标志不会退缩——就好像它们刚刚出现在市场上一样。所以请放心，它们将与您共存数个季节，同时还会定期推出新款式，例如2022年风靡一时的Boho。
也许，这种标志设计趋势是最流行的。优雅的线条看起来令人着迷，因此使用它们的诱惑很大。2019年如此，2022年依旧如此。 事实上，这种微妙的视觉风格并不仅仅集中在花艺上。有很多日常用品：从家具到文具和衣服。重要的是这些标志模板是如何制作的！
黑白标志
随着我们继续从各个方面学习了解极简主义，让我们在这个市场中传递2022年的另一个自信趋势：黑白标志。实际上，将黑白色调视为一种趋势是很奇怪的，因为它是一种经典的解决方案，并且它的存在与时间和风格的变化无关。所以，我们需要让您注意到对此类标志的兴趣是日益增加的，其中最重要的例子是GoDaddy的重新设计之一。他们逐渐简化了他们的标志，现在他们似乎到达了最后阶段——带有带有无衬线字体和保留标志的黑白标志。
黑白标志的最佳之处在于它们令人难以置信的风格灵活性，这使得它们在品牌设计师中流行起来。它们完美地适应了品牌的审美，因此可以将它们用于字体、装饰元素和几何形状的各种实验。极简主义、创造性的排版、花卉、象征主义、原始几何——一切都与黑白标志相得益彰。
3D与平面样式
3D是2021年最有前途的图形设计趋势之一。随着技术的发展，这种图形变得如此庞大，以至于我们永远无法预见。甚至可以在直观的在Spline或 Procreate的最新更新中进行高质量3D对象的制作。图像质量也得到了发展。
然而，在标志设计中，情况颇有争议。设计师将平面样式的 logo 转换为3D，反之亦然，力求使 logo 风格更加生动和简洁——后者对于旧版本的3D和假3D尤为典型。出于同样的原因，他们付出了很多努力来探索类似于3D的方向——等距艺术。它允许在视错觉、鲜艳的色彩、渐变、阴影和形状的帮助下获得大量图像。可能它看起来比3D更适用于标志设计——但时间会证明公司和客户会习惯什么。
最后
显然，2022年和2021年的标志设计趋势没有明确的界限。大多数处于巅峰的趋势已经伴随我们很长一段时间了。
但是，我们可以肯定地说，例如之前非常受欢迎的故障风格，不太可能成为本季标志设计的主角。在过去的几年里已经有很多这样的事情。动画标志也是如此，这是2021年最有希望的标志趋势之一。动画本身继续引起人们的兴趣，这是展示品牌的一种成功技术——但不幸的是，它并没有被证明是可行的。
最后，3D的命运也没有确定，我们还不能说3D或扁平风格的标志设计是否会成为一种趋势。我们已经写过，设计师的立场是模棱两可的，一个方向和另一个方向都有品牌重塑。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
设计原则是设计师为规范和塑造他们的作品而制定的规则。这些原则强调焦点设计元素，遵循它们有助于帮助设计师与广泛受众产生共鸣。
尽管设计原则听起来可能限制了自由，但它们的创建是为了支持设计师的工作，而不是设置障碍。您可以将它们视为建立一般顺序但不干扰作者创造力的拼写规则。因此，设计工作依赖于设计原则，一旦使用得当，就会开始吸引观众的注意力和兴趣。理解这些原则意味着理解并控制整个项目、创建它的过程以及每个涉及的设计元素。
不同的团队和工作室区分不同数量的设计原则。然而，七项原则被认为是基本原则。它们是平衡、层次、统一、对比、强调、比例和重复/节奏。
1. 平衡
平衡可能是最明显和最容易理解的原则。这也是让视觉内容感觉舒适的一个重要功能。这个想法是设计的每个元素——比如字体、颜色、图形、背景、形状、图案、按钮、文本等——都有它们的视觉重量。较重的元素会迅速吸引观众的注意力，而较轻的元素则不会，主要用于完成整个场景的整体性与和谐性。
有两种类型的平衡，对称和不对称。对称平衡是通过沿中心轴对齐的等重元素实现的。不对称平衡与镜像相反。它使用不同权重的元素并且更常见。这样的构图围绕一个或几个突出的部分排列，因此创作者寻求轻元素和重元素之间的平衡以获得视觉图像。
2. 层次结构
层次结构是网页和应用程序设计中最重要的设计原则之一。它用于对设计元素进行优先级排序，并根据其重要性设置重点。这里有一个简单的规则：如果一切都标记为重要，那么一切都不重要。
层次结构引导用户跨界面从焦点对象到二流对象，并有助于按逻辑顺序了解事物。如果忽略了这一设计原则，构图就会显得杂乱无章，而且很难找到必要的信息。
设计中有两种主要类型的层次结构：视觉和排版。可以通过场景内对象的比例和颜色强调获得视觉层次。排版层次结构是通过不同的字体、大小和字体粗细来实现的。
3. 统一
你可能遇到过这样的网站、印刷品，甚至是室内设计概念：大量的元素很难融合在一起，所以整体形象看起来一团糟。为了解决这种图形的混杂，使用统一的原则，应该创造视觉和心理的和谐。
统一意味着与品牌理念和信息的联系，因此每个制作的设计，无论是网站页面、T恤印刷品还是广告，都应该成为其中的一部分。它与设计系统密切相关，是大多数平面设计公司和项目应该考虑的原则。
4. 对比
虽然统一和平衡创造了易于交互的视觉上可接受的设计，但多样性增加了吸引注意力的细节。如果没有多样性，即使是最平衡、最精心组织的概念也会缺乏对比，变得单调乏味。
这个设计原则为项目添加不同的视觉元素、图案、符号或排版。事实上，这是设计师可以尽情发挥创造力并顺应潮流的地方。
5. 强调
强调是通过在构图中设置焦点元素来创建画面的设计原则。这意味着它们会吸引观众的眼球，但不会超过其他元素，否则平衡就会倾斜。这就像一个好的海报设计：你立刻就能看到正在演奏的乐队，并且找到细节：音乐会的日期和地点、门票价格等。
强调可以通过比例、重量、位置、颜色、形状和样式来实现。创建一个大胆的、色彩鲜艳的元素是不够的，因为一切都应该在一个设计中连贯地显示。
6. 比例
比例是指元素相互之间的大小，是最全面的设计原则。调整比例并根据物体的大小和视觉重量对物体进行分组有助于突出重点并保持构图的统一。
设计组合中比例的主要思想是，越重要的元素越大，不重要的元素越小。就像着陆页、文章或海报一样，对象之间的比例关系与其对读者的重要性相关。
7. 重复/节奏
这两个设计原则相辅相成，相互补充。重复是指在设计中实现相同或相似的元素：如图像、按钮、颜色、字体或形状。它用于创建统一性和一致性。通过使用相同的图标、背景或风格化元素，可以轻松实现重复。如果使用得当，它可以控制浏览者在页面上的移动，因为重复元素可以成为吸引和引导注意力的绝佳方式。
元素重复的方式创造了一种节奏感。当设计中有节奏感时，观者将其视为旋律。有五种类型的视觉节奏：随机、规则、交替、流动和渐进。
随机— 没有特定规则间隔的重复元素。
定期— 重复进行相同的间隔。它通常是通过创建一个网格或一系列垂直线来获得的。
交替— 允许在设计中重复多个元素。
流动— 模仿自然流动并显示遵循各种弯曲和曲线的重复元素。
渐进式— 通过在重复时改变元素的一个特征而获得。
最后
定义要使用的设计原则并不总是有意义的，因为它们可能会在创作过程中参与和拒绝，而设计师的主要目标仍然是传达重要信息，创造和谐构图，设计可用的界面。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
设计趋势可以塑造一切，从设计师的创作方式到用户界面设计，再到从网站到包装设计的未来迭代。
让我们深入探讨2022年的一些顶级网页设计趋势。我们将着眼于 2021年末开始出现的趋势，这些趋势是为来年奠定基础的，以及一些即将流行的趋势设计。
有趣、乐观的设计
时尚的形状、颜色，甚至是面孔都可以带来很多乐趣。设计师正在使用网页设计趋势，为从网站的所有内容提供有趣、乐观的设计。这些设计的共同点是它们为世界注入了一点额外的快乐。
充满乐趣和乐观的图像具有面孔、较轻的字体，以及散发出积极情绪的颜色。为了充分利用这一趋势，请考虑更轻的元素，并避免选择较重的字体或颜色。
黑白配色方案
黑白配色方案是今年最鲜明、最美丽的设计趋势。没有颜色，你可以在限制范围内思考和设计。
大胆和实验性的排版
在2022年，没有错误的排版方式。大粗体字体——甚至衬线字体——无处不在。在玩这种网站设计趋势时，请考虑字体将如何响应以及如何最大限度地对访问者产生影响。
三维设计元素
虽然2020年和2021年有很多设计师网站处理完整的3D 设计，但新兴趋势是将3D元素与更扁平的整体美感结合起来。
具有3D风格的元素可能包括阴影、动画或图层效果，以创建深度和维度。
三维设计也延伸到视觉叙事。考虑如何以突出景深和阴影的方式捕捉您的故事或产品。
近乎野兽派
野蛮主义是人们想要加入的网站设计趋势，但对于大多数项目来说，它过于苛刻和尖锐。
这些设计使用了许多相同的鲜明效果。不是单色字体，更容易看到衬线是常态。即使有一些明显的边界和线条，元素之间也有足够的空间。没有太多的装饰或其他视觉效果，只留下颜色和文字来真正承载这些项目。
滚动文本元素
虽然总是希望文本元素可读，但它们也可以是动态的。滚动文本元素——通常使用超大字体、几个词、在一个位置——可以增加对关键词的强调并激发用户的兴趣。
轮廓字体是一种流行的选择，保持可读性的关键是使用简短、常用的单词或短语。
玻璃态
玻璃态的第一个展示于2020年末和2021年初的新态，并演变成现在流行的更完整的玻璃效应。
正是您可能想的那样：设计元素的外观让人联想到玻璃。可能有透明度、冷淡或光泽的元素。
设计师们一直在Dirbbble上以一种主要方式使用这种风格，并找到了网站设计的方法。
更多渐变
渐变是不断出现的设计趋势。2021年，设计中的大部分渐变出现在背景中。
到 2022 年，渐变将采用两种新形式：
1) 用于文本颜色填充（例如上面的示例）以提供最大的影响和强调
2) 作为用其他线条填充插图或图标以创建纹理深度效果
没有图像的主页
无需图像即可设计，您将在 2022 年紧跟潮流。
使用不同类型的用户界面或设计技巧来充分利用没有图像的主页。在此处的示例中，Kirifuda 使用了漂亮的黑白配色方案，在文本元素之间具有叠印效果。超大的排版和手写风格的字体有助于将它们融合在一起。
分屏美学
分屏美学重新奏效。几年前的趋势当时出于可用性和响应的原因而起作用，现在它更像是一种新设计。
这些视觉效果可以包括水平或垂直分割的屏幕，每一切面有不同的功能。
交互式字体
在屏幕上与您一起移动的文本是交互式字体背后的支柱。在大多数情况下，这可以使用悬停状态，尽管您可以尝试一些其他更复杂的效果。
在考虑交互式文本元素时，请考虑可读性和理解力。文本效果只有在其中的文字仍然可读和可理解的情况下才有效。
包容性设计
设计师正在努力打造一个更具包容性的网络，它几乎在所有发布的内容中都有体现。从图像到语言再到替代文本，没有理由不尝试让您的项目更加包容所有人。
包容性延伸到种族、性别中立、文化、可及性和能力。共同的主题是您的网站应该以这样的方式组合在一起，以便任何想要访问内容的人都可以访问内容，并且人们也可以在屏幕上看到他们可以与之相关的其他人。
结论
就网站设计趋势而言，新的一年已经开始以非凡的方式爆发。如何将这些元素合并到现有项目中是作为设计师该考虑的问题。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
为什么设计师要有成本思维，以及成本思维在做我们做设计时对我们有什么帮助。
不仅仅在工作中我们需要思考成本，在生活中我们也无时无刻都在计算成本。成本总是和收益挂钩，所以贝克尔在《人类行为的经济学分析》中提到：人的任何行为都是理性选择的结果，无利可图的事人们事不会去做。虽然这句话不能覆盖所有的人，但是大多数人就是如此。
在夜深人静的夜晚你饥肠辘辘想吃夜宵，你可以选择下楼到周边小吃店就餐，也可以选择叫外卖，前者付出的成本是你需要通过身体行动来交换最后的结果，后者则是花费一定的金钱来代替前者的行动。
那么我们通常会如何选择呢？如果这两种成本有很大的差异，比如需要到很遥远的地方那么除了身体行动成本外，时间成本也会计算其中，所以相比后者成本陡然增大，于是我们就会选择成本低收益大的方式。但是假如你现在极度想要吃那家的夜宵，外卖点餐会特别影响口感，那么你可能会选择前者，这里由于外卖口感和主观意愿影响到了我们理性的选择。‘
成本决定了收益的效率、大小和方式，小到你伸手拿一支笔你会选择最近的，大到我们人生的投资。成本与收益之间并非是直接关系，收益的大小的不取决于成本的大小，还有风险因素。例如我们在对UI界面进行优化，可以选择的方式有很多：
1.只调整视觉，替换样式
2.对页面逻辑进行重构
3.整体功能进行重新分类组合
......
我们的目标是让用户获得更好的体验并且提升业务价值。3种方式需要的成本高低不同，我们都希望付出最小的成本达到最好的效果，于是我们就会考虑到风险因素，假如新流程用户不会用怎么办，假如新版本导致的数据下滑怎么办，假如行业出了新政策了怎么办等等。所以除了这些成本外也要考虑应对风险的成本。
你看为什么有钱人都会坐头等舱是因为头等舱可以帮他们节约更多的时间，提供更好的环境与服务，让他们产出更多的价值。还有假如你的车坏了，你最直接的方法就是花钱找人帮你修而不是自学自修，因为你将花费太高的成本。
再举一个例子，我们想提升能力，有的人选择自学、白嫖，有的人选择报培训班，这也只是时间和金钱上的成本选择，如果你的自学（白嫖）在短时间收益很大那就毫无疑问帮你省了一大笔钱，但是如果自学很久都毫无效果，那么时间就是你花费的成本，时间和金钱不同的是，时间不可逆。看起来花钱比花时间更好？不是，花钱也有风险，比如课程质量和服务很差，钱没了还学不到，甚至赔上了时间。但如果你选对了，那么收益就远远会大于自学。
实现成本指的是想法与落地中间需要付出的行为、时间和其他损耗，例如我们希望提升用户下单的转化率，我们可以选择：1.减少整个流程的步骤 2.将按钮设计的更明显 3.给用户发放优惠券 4.给用户营造抢购氛围，在这几个方案中最低成本是2，因为只需要调整样式和简单开发就可以实现，但收益并不是最高的，而其他的方案需要更多的角色花费更多的时间来参与，但是收益也不是显而易见的。所以如果你的产品比较成熟，那么我们一定选择成本更低的方案，反之我们会进行更高成本的尝试。
还有比如我们找工作，新公司福利待遇比现在公司好50%，平台也更大，是否不需要思考直接去呢？当然不是，你需要考虑通勤成本、生活成本、自身成长成本等等因素。如果你50%薪资涨幅换来的是996、每天通勤时间3、4个小时，不仅仅是时间精力，还有我们的身体健康的成本，我会觉得远远不值，成本太高。
我们先来看一下定义：机会成本是指面临多方案抉择时，被舍弃的选项中价值最高的就是本次决策的机会成本。举个例子，比如当前版本我们有1个开发一个设计一个产品，我们面临着两个需求，但是资源和时间只够我们做一个需求，这时候2选1，那个被抛弃的需求所拥有的价值就是我们所选择的那个需求的机会成本，相当于我们放弃了那个需求所拥有的价值。
再通俗一点讲，我现在有100万，面临着两个选择：1.银行理财，年收益4%，4000. 2.做生意投资，年收益8%，8000，那么就相当于我花费了这4w的潜在成本获得了8万的收益。
边际成本的理解很简单，我们可以理解为我们每付出一定的成本收货的收益或者每收获1个单位的收益所付出的成本。用一个通俗一点的例子来讲，比如你一共学习10天，第一天学完你考了30分，第二天学完你考了50分……第8天学完你考了94分，第9天学完你考了98分第10天学完你考了100分，花费的单位天数一样但是每次增加的分数却越来越少，收益也就越来越少。
在做产品设计的时候，我们往往会有一个板块叫为你推荐，比如微信阅读中的这个板块，它一次提供了用户6本书，虽然算法可以算出有许多书，但是这里每次只提供给用户6本，是因为涉及到了边际成本，少量多次提供能够让用户更聚焦，更快的选择好书本进行阅读，每多提供几本书，用户选择阅读的时间成本就会越大。有同学会问：那我只给1本不就好了，用户就能马上读了，何必要推荐6本？
我们如何保证那一本刚好是用户想读的，没有办法做到如此精准，如果每次只推荐一本书，而用户尝试了几次都不喜欢，他们就会放弃，所以这里就会选择一个临界值，比如我们可以选择每次放不同数量的书，根据数据判断在给用户几本书的时候用户阅读转化和选择时间成本更低。
体验成本也是我们设计师需要时刻关注的，俞军老师在产品方法论中提到，用户价值=新体验-旧体验-替换成本，体验成本可以包含很多信息，最主要的就是认知与交互的成本。
如何降低认知成本可以从以下这些点进行优化
文案的设计要求是简单易懂，避免产生歧义，之前给大家举过的一个高德地图导航在到达目的地之后给出一个“原路返回”按钮的分析，大家可以再思考一下，是否会产生歧义。还有确定、确认大家是否知道怎么用呢？
文案也需要有情感化，避免生硬、带负面情绪的问题等等
视觉最为直观，一个按钮一个控件的样式是否能满足用户的心智和预期，将会影响用户的认知，例如以下的几个按钮，出现在不同场景用户会出现一系列问题：为什么我点了没用？为什么还不能点？我到底该点哪里？
还有你的品牌是否识别度高，也决定了用户对你的认知，最近小米花了百万请大师做了新的logo，在视觉上更加圆润，在圆logo的基础上做了很多的微调，实际上也是避免了太大的logo变化导致品牌认知成本的提高，认知成本一旦太高，品牌市场的敏感度和曝光度还有各种替换、衍生、配套的隐性成本也会大大增加。所以这一举动是明智的。
比如我们希望新用户去关注一些大咖、kol获得更好的推荐，但是如果我们只是将推荐者的头像和昵称给新用户，那么这个策略就是失败的。因为我们没有考虑新用户的认知：1.我为什么要关注她 2.关注她我能获得什么。所以仅仅依靠头像和名字在这里对用户的认知是没有任何帮助的。
我们通过利用肢体来和媒介进行交互，目的是完成某项任务。其实只需要你抬手，那么就是产生了成本，只不过某些成本是固定的无法减少的，比如你要去骑车那就需要去解锁，如果没有锁车可能就会被偷走，这是出于安全考虑。
行为成本在具体数字产品中我们可以发现很多，例如你只需要将手机拿起，屏幕就会亮，相比于找到解锁键再按一下成本就低了很多。而亮屏后不直接解锁是为了防止误触或者隐私，所以还需要通过指纹或者人脸进行识别。
例如几种不同的验证方式，利用滑动拼图来解锁和输入相关验证码解锁，前者比后者的学习成本和操作成本都低。
在移动端我总结了几个减少交互成本的方法，不妨来看下：
soul音频处理
日期选择
iPhone底部横条切换窗口
游戏昵称随机
股票买入数量
这里也有同学会问，既然都可以代替，那滑动能否代替输入？必须也是可以的，例如iOS自带的计时器中选择时间的控制器，还有闹钟设置，这里要注意的是，滑动代替输入是要基于本身该信息是由范围内并且不需要精细化控制的，比如房价筛选，房价本身量级很大，用户筛选也不会精确到个位数，在这里用点击和输入会比滑动的成本更低。
反例就是音量、明暗控制，大家可以感受一下输入在这里的鸡肋。你需要精确控制选输入，需要大致的范围选点击，非常模糊的感受选择滑动。
例如我们在开车进行导航的时候，打字输入非常不便，于是加入了语音输入。还有在微信进行账号切换时，我们可以选择利用语音输入数字来验证身份。
对于新用户操作复杂功能和界面的时候，提供更多提示能够很大程度上减少用户的操作成本。
在iOS或者安卓的手势控制中，我们会发现又一些常用的手势比如：点击、拖动、轻扫、双击、缩放，这里我们可以定义为一级手势。还有一些不常用的比如：重按、长按、三指滑动、三指缩放等，这些手势的认知成本和行为成本都很高，定义为二级手势，不建议频繁使用。
设计师在日常工作中接到的需求繁多，无论是在做需求之前还是在思考设计方案的时候，成本思维可以帮助我们很好的规避一些问题和风险，我们追求控制成本使收益最大化。所以学会控制成本的设计师不仅仅题可以提高个人工作效率还可以帮助公司创造更多价值。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
先看目录，大家按需取用，当然更建议全文阅读（全文7756字，建议阅读20分钟）
大部分设计师应该都遇到过这种场景：在做设计前并没有考虑到加载，但在进行还原度走查或者验收的时候才发现，由于某些页面数据请求较慢，导致在页面中会出现空屏状态。这时才想起需要在这些页面添加动画来承载页面的过渡。
归根结底是因为设计师在设计过程中，更多关注页面本身，而很少去思考页面在呈现过程中何时会出现白屏状态，都是后知后觉去补充完善。加载作为必备的一环，却总是被忽略。目前很多B端产品在这方面都没有一个系统合理的规划，导致系统的加载体验缺失或者不统一。
因此希望这篇文章能够讲清楚中后台加载出现的场景和规则，对需要深入了解加载以及在制定加载规则的设计师朋友们带来一些帮助。
加载通俗来讲就是用户从触发页面操作，到页面最终呈现的一个等待过程。这个过程始终存在不可避免，只是时间有快有慢。快的加载只需要几百毫秒就结束，但慢的加载就可能会达到几秒甚至十几秒，让人产生焦虑。
而为什么会有如此大的差距，这就需要从页面渲染的整体过程来进行说明。当我们从浏览器输入网址，再到我们看到完整页面的这个过程，网页到底经过了哪些步骤呢。经过资料查询和与前端确认，整体过程可以阐述如下：
从这里我们可以看到页面的呈现是程序经过了一系列操作才最终呈现到我们面前的。在这里可以将其简化为四个阶段：用户操作功能→页面向服务器发送请求→服务器接受并返回数据→页面呈现。
而决定整个页面加载快慢的就在于请求与数据这里。一般我们可以将页面的数据分为2种类型：静态资源和动态资源。
静态资源：前端的固定页面，这里面包含HTML、CSS、JS、图片等等，不需要查数据库也不需要程序处理，直接就能够显示的页面。可以简单理解为你页面上的固定字段和结构。这种页面一般加载速度比较快，比如我们看到的展示型官网一般都是前端写好的静态资源。
动态资源：而对于页面上的动态变化的，需要程序处理或者从数据库中读数据，能根据不同的条件在页面显示不同的数据，比如表格数据、统计数据等称为动态资源，这种都需要调用后台接口来进行返回，因此加载速度相比于静态资源就会更慢。
而它们的区分点用下图可以表示：
可以看到静态资源基本是直接返回，而动态资源还需要连接数据库调取资源，尤其是在遇到数据库调取较慢时就会花费更多时间。而我们加载缓慢的大多数问题，也基本上更多出现在动态资源的获取上。
当我们清楚加载形成的原因，接下来要做的就是在需要加载的地方对其进行处理。这也是在设计过程中我们经常遗漏的地方。我们先看一下目前常见的2种处理方式：「默认处理」和「使用进度指示器」
当我们对加载过程不进行任何处理时，程序就会以默认的方式进行-即根据资源获取速度一步步呈现。可以看到嘿店后台的处理过程就是一种默认处理方式：
但是这种做法就会导致我们在页面加载过程中会出现空屏状态，比如上图切换到概览时出现了空屏状态，尤其是当遇到了网络缓慢的情况，会造成在加载时页面停留在当前状态下不动，往往会让用户陷入到「系统故障」的错觉。
这个名词说起来可能比较陌生，它指代的就是我们平时经常看到的加载动画、骨架屏或者进度条等。进度指示器的作用就是告知用户当前页面并没有故障，而是正在读取数据。
通过添加进度指示器来对空屏状态进行承载，能够减轻用户的焦虑感。目前很多B端产品更通用的形式是添加动画来过渡。
但是在体验过程中很容易发现一个问题，就是在产品的整体加载过程中，某些空屏状态是没被加载动画覆盖到的。当这些没被覆盖到的加载过程过长时，很容易出现焦虑感。比如神策数据在左侧列表切换时的加载过程就没被覆盖：
想要更全面的把加载动画覆盖到所有页面，我们就需要弄清页面在哪些状态下会出现空屏状态，从而制定统一的加载动画规则。这个问题可以先思考一下，后面解答。
在制定统一加载规则之前，我们需要明确一个概念，就是加载的模态与非模态。
模态加载的含义就是当前加载会中断用户其余操作，用户在这个期间只能等待加载而不能进行其他操作（有的模态会提供取消按钮）。如果你的页面涉及到以下2种情况，可以考虑使用：
1.用户当前的操作本身不能与其他操作同时进行。比如系统更新，或者工具类的导入导出相关操作，我们只能等待更新、导出完成才能继续进行后续的操作。这时候可以使用模态加载来承载，比如protopie的导入操作；
2.当用户进入到一个全新的页面时，这个时候页面什么都没有，我们只能等待页面加载完成才能进行后续的操作，因此在这种情况下也可以采用模态加载，比如我们刚进入Asanan产品页面看到的首屏加载动画：
除了上述2种情况外，你也可以根据你的业务场景来进行模态加载的选择，但建议是尽量少用模态加载，其会对用户的打断和干扰性比较强。
非模态加载的话，这种加载通常只会出现在需要加载的部分，不会中断用户其他操作。对用户干扰比较小。比如我们常见的功能切换加载、数据筛选加载等都属于非模态加载。
非模态加载相比于模态加载会更轻量，因为用户随时都可以打断也不会影响到其他操作。因此建议在大部分情况下都可以使用非模态弹窗来进行承载，比如飞书的左侧栏切换操作：
接下来我们进入正题，在这里我从加载的角度将网页整体加载过程分为呈现加载规则和操作加载规则。
我们先谈页面呈现规则。前面已经明确加载产生的原因和类型后，我们就可以开始为我们的产品制定统一的加载规则，以保证后续页面加载的一致性。
在拆解页面的加载过程前，我们进一步阐述之前提到的渲染原则，从前文中提到最后会经过「解码」和「渲染」2个步骤，这也是决定了我们看到的页面的最终呈现顺序：
我们看到的页面是由HTML、CSS和JavaScript来进行构成的。HTML可以看作最简单的框架、CSS则是赋予了框架样式，JavaScript则是负责页面中的交互(当然JS也可以控制样式，这里只描述主要功能)。
页面在「解码」阶段，拿到的HTML文档会被解码为DOM树，同时将CSS文件解析成CSSOM，这两者结合后一起渲染页面，JS一般是在最后渲染。所以逻辑上就是框架和样式一起渲染，最后渲染交互。视觉的角度来讲就是先看到元素样式，然后才能进行对应操作。
由于浏览器渲染顺序一般会根据代码的顺序进行渲染，而代码在页面中的构建一般也是按照页面的上下和左右的顺序去写的，因此我们看到的页面的视觉呈现顺序也是遵循从上到下，从左到右。
所以几乎所有的产品都是先看到顶栏，然后左侧边栏，然后其他内容。因此我们可以通过这个原则来拆解对应的页面，我们按照页面常规结构可以将其分为三个加载部分：顶栏、左侧导航栏、内容区域。而其加载顺序如图所示：
当知道对应页面的渲染顺序后，我们就能够清楚在页面渲染的过程中哪些地方会出现空屏了。因此将页面加载过程拆解为如下顺序：
我们的加载动画需要承载的就是上述这些白屏的地方，从而将加载细化为三种场景的拆分：全局加载+局部加载+内部加载。如图所示：
通过这三种加载就可以涵盖页面所涉及到的所有部分。接下来详细阐述一下这三种类型的定义和用法。
如上图所示，全局加载的目的是为了覆盖用户从输入网址到页面的资源渲染的这个中间过程的空屏状态而存在的。而这种状态会涉及三种场景：
1.通过网址进入到一个新的页面时；
2.通过鼠标右键或网页刷新按钮对该页面刷新时；
3.通过页面操作需要新开页面时。
该全局加载的动画构成为：
1：覆盖整个页面的加载，由纯白色+加载动画构成；
2：加载类型为模态加载，因为用户在这种页面状态下并不能进行其它操作。
但在这里我们需要注意全局加载的开始和结束时间：
开始时间：当进入页面时立即呈现加载动画；
结束时间：当页面加载出顶栏的时候，此时停止加载。
为何要这么处理结束时间，原因其实图中已经给出了。这里再解释一下原则：只要有页面资源返回，我们的全局加载动画就会结束，随后启用局部加载来承接后续的状态，避免用户在当前状态长时间等待。而顶栏在一般情况下都是最先加载出来的，所以以顶栏出现作为结束全局加载的标准。当然如果你的结构没有顶栏，可以以左侧栏来作为结束标准。
局部加载是用在页面整体框架加载的过程中，承接在全局加载后。局部加载的使用场景可以概括如下：
1.顶栏加载结束后，用在剩余框架的加载效果（具体体现为左侧边栏和右侧内容区域）；
2.对于涉及到局部页面的切换操作都会进行局部加载（比如左侧边栏的切换）；
光看文字可能不是特别清晰，在这里可以举一个动态的例子来帮助理解：
上述展示的是在页面呈现的时候一个完整的局部加载。在这里需要注意的是我们首次渲染和第二次渲染在加载动画上是可以有区分的，可以通过程序控制让这种加载动画只在初次加载时出现。
第一次加载时出现是因为我们需要有加载动画来承接框架首次加载的空屏时间：
但第二次的时候由于有缓存（缓存会加载我们的静态资源，能够让我们的页面框架在第二次时更快显示），这样在读取框架时基本不需要加载，我们就可以通过程序来直接去掉其中的局部加载动画，直接显示框架来进行呈现。
目前在飞书和钉钉等B端产品后台均采用了这种处理方式。可以看到图中我在第一次切换到角色管理时是有碰撞小球的局部动画存在的，而第二次再次进入时则直接出现框架。这样既能够保证加载动画能够覆盖所有的空屏状态，又避免了局部加载动画的频繁出现。
内部加载是用在页面内部不同模块数据间的加载。当框架都已经加载结束，但某些数据由于接口比较慢，此时还没有返回，这时我们就可以用内部加载来进行承载。这应该是我们更常见的加载情况：
在进行内部加载的时候，需要注意，内部加载的时候一般标题是存在的，因为标题基本都是固定的，所以能够很快被拉取。比如Zoho的内部加载，加载时标题已经出现了：
通过这三种类型的加载，能够覆盖从用户输入网址，到页面渲染完成这个页面呈现过程中的全部加载场景。
说完页面的呈现规则，再谈页面操作加载规则。页面的操作其实对应的是页面控件的反馈。而我们的常用的控件比如有按钮、tab切换等。我们不仅需要考虑控件本身的加载状态，而且需要考虑到控件影响的其他页面范围。
控件的加载并不是随时都需要，我们要根据实际的数据量大小及业务场景来选择性使用。目前我们需要考虑的控件及其加载状态主要有如下：
比如图中的按钮的加载状态是必备的，在很多场景下都会用到。但是下拉列表和级联列表，在一般的场景下都不太需要进行加载，当遇到列表中的数据特别多或者调取特别慢时就可以考虑为其加上加载状态。
这种控件比如日期筛选、表格筛选或者保存等操作，当你切换筛选条件后所有与其相关的页面元素都会发生变化。在这种情况下我们需要考虑到被影响元素的状态。目前的设计实现上有两种做法：
1.被影响元素不可被操作，且该区域有遮罩+加载动画来覆盖；
2.被影响元素可进行操作，无任何动画，但操作并不会影响之前提交的结果；
这两种方案一种是利用遮罩防止用户无效操作，另一种则是保持了足够的操作自由性。个人在这里更倾向于处理方式1，我认为被影响的元素是需要有遮罩+动画的，来避免用户在加载期间对其进行无效操作，比如示例中方案2后面修改的名称是没有被系统保存的。
需要注意的是如果在产品中使用方案1，我们的遮罩区域只需要覆盖被影响的元素就可以了（保存这种可以将按钮一起覆盖），比如通过筛选导致图表数据发生变化，这时只需覆盖图表区域，而不用覆盖筛选区域。这样的好处是当某些筛选数据出现加载过慢问题时，用户可以通过切换筛选项来打断当前加载。
上述描述的操作都是针对于当前页加载。当控件导致页面刷新或者跳转时，则整体遵照页面呈现的规则进行加载。
上面阐述的加载已经完全能够覆盖我们页面整体的加载，但是还是需要提及一下骨架屏和进度条这两种加载形式。
先说骨架屏。实际上骨架屏的使用效果体验是优于加载动画的体验的（骨架屏的加入使用会让用户感觉网页出现的更快）。那么为什么在大部分的B端业务页面中没被用到呢，主要有2点原因：
1.每种骨架屏都需要进行对应的定制开发，需要与加载后的页面框架保持一致，这会增加了开发成本。
2.中后台的业务界面对来说固定结构的页面会较少，这对于骨架屏的使用机会就相对较少。
个人认为在前期可以以统一加载体验为主，在后期业务相对成熟后，可以针对固定结构，通过骨架屏的使用优化加载体验。
再说进度条。我理解的进度条的使用条件：对于加载时间较长的规定场景可以考虑用进度条来承载，比如我们常见的游戏加载中进度条就用得比较多，因为游戏一般资源比较大。还比如figma在进入设计文件的过程中也采用了进度条加载也是因为设计文件可能会很大。
进度条在特定场景下能够缓解用户焦虑，让用户知道进展。但进度条在多数情况下都抓取不到程序的真实进度，这也会导致有时候我们看着加载到99%，那最后的1%迟迟加载不出来的的原因。目前很多中后台产品对于进度条加载使用相对较少的原因，很大程度是没有那种加载特别长的场景。
因此这两种加载场景的使用会更加定制化，如果需要使用请根据具体的业务场景来进行选择。
如果把加载动画等比作页面加载的外在，那么缓存和加载策略则是页面加载的内核，合理使用缓存和加载策略可以从根本上提升我们页面的加载速度，让用户更快速地看到页面。
大家肯定听过缓存这个概念，前后端都可以使用缓存。缓存就是数据交换的缓冲区（称作Cache），是存贮数据（使用频繁的数据）的临时地方。在这里主要讲一下浏览器缓存：
从这张图可以看出，服务器在请求数据时，会进行缓存的判断，如果有缓存则首先读取缓存，如果没有则从服务器中拿取。调取缓存会在很大程度上提升页面的加载速度，缩短了从服务获取数据的时间。通常浏览器会主动对页面的静态资源进行对应的缓存，这也就解释了我们第二次进入页面会比初次进入页面时加载快的原因。
但程序其实也可以对动态资源（也就是需要从数据库等拿到的资源）进行缓存的，并且可以设置缓存的过期时间（比如设置过期时间为1小时，那么1小时过后就会重新拉取新资源）。对于某些动态资源拉取过慢并且更新频率不高的我们可以采用动态资源缓存的策略，从而提升整体的页面加载体验。
现阶段我们常用的主要有下列6种加载策略：
加载策略的本质就是通过对应的加载设置来缩短产品与服务器交换数据的时间，接下来我们详细看一下每种加载策略的具体使用策略：
懒加载是当内容落入视窗被用户看到时，才会进行加载。这种比较节省资源和减轻服务器压力。对于当前页面内容很多的可以采用这种加载策略。而这种加载策略的设计，能够让用户更快看到当前屏幕内的内容，减少等待时间。
比如苹果官网的加载策略就采取了这样的一种方式。我们可以看到右侧的资源只有在我们向下滚动出现在屏幕中时才会进行对应的加载，这样能够保证用户在进入网页第一时间看到首屏内容，并且用户几乎感知不到这种加载延迟。
预加载是在页面空闲的时候就把用户即将用到的资源加载完存到缓存中，等用户需要使用时，通过缓存直接调用呈现。比如用户在看A页面的时候，就可以通过预加载来准备用户需要的B页面资源。当用户需要B页面的时候，立刻就可以呈现。
比如某些页面在实际中加载比较慢，这个时候就可以考虑是否用预加载的策略来提升网页整体加载速度。比如知乎的视频和文字在都进行了对应的预加载。即使当你处于断网状态（图中我将页面网络切换为断开状态），可以看到依旧可以点击全文进行查看和视频的部分预览。
当页面中有文字和图片时，优先加载占用网络资源小的，比如文字资源，然后再进行占用资源较大的加载，比如图片资源。通过分步加载也能有效减少页面等待时间。比如大众点评等图片很多的网站往往会采用这种加载策略。
分页加载是我们目前很常见的方式，比如我们常用的百度和谷歌等搜索引擎都是使用的分页加载，分页适用于数据量比较大的内容，比如表格数据或者大数据搜索场景可以使用。
分页加载可以理解为当前获取到100条数据，但是将100条数据分别拆成5页每页20条数据提供给用户，这样也可以让用户减少等待时间：
在目前还有一种滚动分页的加载，就是不提供视觉上的分页，而是当用户进行滚动时，自动加载一定数量的内容，这样从用户的视角看就是一个连续不间断的数据展示。比如一些资讯类的网站就是采用的这种加载策略，有的也把这种滚动分页的方式称为自动加载。
这里讲的延迟加载更多的是一种防护加载机制，一般延迟设置的时间为300ms。这里的延迟加载有2种使用，第一种多用于搜索，通过延迟加载能够让用户更好进行连续输入，避免搜索结果被高频率刷新，同时缓解服务器压力。如下图，可以看到我在输入1后会有个延迟才出现加载列表，并且我在连续输入12306的过程中是没有对结果进行更新的，当我输入完后才更新。
第二种则是通过延迟加载可以更好防止反复操作。当用户在同一组件上面进行切换时，如果该操作小于300ms,则只记录最后的点击操作。这种情况可以用在我们的表格翻页和开关等状态上，防止用户疯狂点击导致数据反复请求和屏幕闪烁的情况。我们可以通过下面这个组件演示例子来进行对应的感知：
延迟加载更多用于上述2种场景，对于其他情况的加载，直接加上就可以了，并不需要刻意设置延迟。
这里想要表达的含义是当用户在操作后，客户端立即反馈操作成功，然后把请求放到后台与服务器交互，这一过程用户不需要了解，不需要等待。无论在什么网络环境下你基本上都能操作成功。比如微信的朋友圈发布就是这样的操作，即使你在断网的情况下都能够立刻发布，但实际上这个时候并没有发送成功，还需要上传到服务器后才你的朋友们才能看见。
这样的好处是用户使用起来非常流畅，但是坏处就是，当操作不成功时，用户并不能及时进行感知，仍然以为操作已经成功了。所以这种场景我们也需要根据场景进行对应的判断和选择。对于复杂的B端场景个人建议慎用或者不用这种操作，毕竟很多发布的功能会同时影响很多业务线。
这里就拿微信的朋友圈发布来进行举例，下方手机状态都为断网状态，可以看到微信立即发布，而贴吧在这种状态下提示网络错误。
通过这些加载策略的选择性使用，能够在特定环境下提升我们系统的整体使用体验。因此我们需要对这些加载策略有一个比较全面的认识，这样我们不仅知道加载慢的原因，还可以利用加载策略去提升页面性能。
在整体的加载过程中，别忘了考虑加载异常的情况。在通常情况下我们会我们会遇到网络速度过慢或者突然断网这两种状况让页面一直加载不出来，这时我们需要考虑对长时间的加载过程进行处理。
通常做法是我们要对加载状态有一个最长时间的限制，一般为加载不超过10s，超过最长时间后就进行异常状态显示（提示语+刷新按钮）。这样用户可以选择重新加载或者离开此页面，而不是一直等待。
在这里还想到一点，就是对于编辑页面，我们应当加入网络连接是否异常的判断，比如当进入到编辑页面后，如果遇到网络断开，需要在页面的顶部加上常驻提示条【当前网络连接断开】，这样用户能够及时进行察觉并修复。避免在无网环境下继续输入。这对于某些需要输入很多内容且并不提供本地保存的页面来讲是非常有必要的。
加载在设计中是非常容易被忽略的模块，因为在大部分情况下网络速度都较快，人们很难深刻地感受到加载过程。但加载却在产品运行中起着不可或缺的作用。通过这篇文章想要告诉大家的有几个点：
1.我们需要明白加载为什么会出现，这个过程是怎么样的；
2.加载的通用处理手段是怎么样的，非通用处理方式有哪些；
3.通过缓存和对应加载策略能够让页面加载速度有本质上的提升。
这样当我们在页面上遇到加载速度慢的问题时，在为其加上动画承载过渡的同时，还应该思考其加载缓慢背后的原因，是因为数据量太大还是加载策略的相关问题，是否可以将其进行懒加载或者分步加载，这时我应该去找前端或者后端如何沟通。从源头上解决加载时间长的问题，才是后续产品设计过程中的长久思路。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
提及“设计的温度”，不得不提我们老生常谈的“情感化设计”，提出这一概念的美国认知心理学家唐纳德·诺曼将设计拆解为三个层次：本能层、行为层、反思层，层层递进。
1/ 本能层的设计，是视觉的直接反馈，是指用户第一眼看到的、感觉到的东西是否会激发用户兴趣；
2/ 行为层的设计，注重的是效用，产品功能是否好用，易用，用户使用产品过程中能否高效解决问题；
3/ 反思层的设计，是情感化设计的最高层次，指用户使用产品后，是否建立情感连接和记忆反馈。
因而，它们是从美学诉求到效率诉求再到情感诉求的一个进阶关系。
如果一款产品在满足基本功能，对于用户有用，同时好看并且易用，使用完之后还能产生愉悦以及满足感的话，那么这将是一款好的情感化设计产品，那必然是一个有“温度”的设计。
如果一个项目本身充满社会使命和责任感，那么“有温度的设计”将可以助推项目的落地链条，让使用平台的用户有“温度”，更让项目背后的人员感受到“温度”。
因为，接下来陈述的项目是一个很有“温度”的项目——用互联网工具去温热社会中的穷苦灰暗，用互联网思维去帮扶社会的乡村孤寡老人和留守儿童，用有温度的设计去践行有温度的项目。
随着我国社会经济的快速发展，农村青壮年劳动力转入城市，人口老龄化趋势加剧和家庭结构的演变，“空心村”越来越多，因此在乡村出现大量的“留守儿童”和“孤寡老人”。据统计，在农村独居和空巢老人超过3000万人，留守儿童也达到了近2000万人
孤寡老人因为独居生活、物质困难、缺乏照料面临着易患疾病、精神压抑等很多问题；而留守儿童因为缺少父母监管和陪伴，极易产生很多身体及心理问题，这两大群体是我国人群结构的重大组成部分，一个是未来的花朵和希望，一个是曾经发过光热的迟暮老人，他们需要关爱和守护，需要有一座“有温度”的桥梁，为留守儿童撑起蓝天、健康成长；为孤寡老人送达温暖、安享晚年。
基于社会现状，践行社会责任，腾讯为村平台联合中国社会福利基金会、腾讯公益慈善基金会，预想搭建一个线上与线下结合的平台，成立“为村暖心小站”，立足于脱贫地区的农村社区，主要服务农村的一老一小以及其他需要帮助的困难群体，解决日间照料、健康护理及心理关怀等诸多问题。
“暖心小站”的整个帮扶路径是以线上+线下相结合的模式，依据产品需求，在线上可以招募志愿者、发布救助需求、触达爱心人群；在线下建设实体服务站，开展具体的帮扶活动。从而形成一个从线上到线下的一个完整帮扶闭环。
那在线上的呈现形态上，主要考虑APP和小程序两种方式，经过对比分析，APP稳定性高、体验好，但是在乡村的受众群体内，互联网基础还是很薄弱的，要让村民朋友下载和适应一个新APP是一个难度非常大的事。而微信在乡村的覆盖面非常广，占有率很高，那么依托于微信的生态、建立小程序，在推广层面会更加便捷和高效。同时，暖心小站本身结构简单，是一个非常轻量化的应用，这种特性也更适合以小程序为载体。
在线上的产品框架上，设立两大专区：关爱老人专区和呵护小孩专区，各自创建知识宣导、在线课堂、爱心募捐等版块内容，同时在线上召集志愿者，在线下成立社区服务站，开展帮扶活动，然后志愿者们在线下实地服务打卡同步展示在线上的暖心小站。
确定框架之后，梳理角色和场景。本项目主要包含线下服务站的站长，工作人员，志愿者以及社会的爱心人士。
站长、工作人员、志愿者主要是通过线上为村暖心小站这个平台发布活动信息、记录服务概况、展示志愿者风采，社会的爱心人士通过线上平台查看对应信息并参与对应活动，最终帮助农村的一老一小解决各种帮扶问题。
经过梳理分析，平台使用人群的年龄跨度较大，30岁到60岁这个群体占到了80%左右，所以在产品的呈现形式上将兼顾青年到老年的年龄跨度，让设计更友好，让产品有温度。
基于前面分析，在农村现实环境中的孤寡老人和留守儿童，他们生活是灰暗的，情感是封闭的，他们需要有更多志愿者以及爱心人士给他们带去阳光和温暖，让孤寡老人可以健康生活，让留守儿童可以健康成长。
所以在设计目标的确定上：让产品形成一个“有温度、有故事、可以连接情感的桥梁”。让贫苦生活渗透阳光、感受温暖、看到希望。
品牌色的推导，是站在线下的实际场景感受来提炼，乡村的孤寡老人和留守儿童的生活是贫苦的、灰暗的，他们需要金灿灿的阳光给生活带来希望，而我们日常所的见的公益组织通常都是以红色系为主，似乎已经形成了作为公益组织的标识色，因为这种大红色传递爱心、带来温暖。
这些颜色都很有代表性，黄色代表阳光，红色代表公益，而暖心小站，将这两种颜色进行叠加融合，形成阳光橙，再以阳光黄纳入辅助色，形成温暖、友爱、活力、阳光的色彩体系。
在设计原则上，考虑到我们的用户群体年龄跨度比较大，一些年长用户互联网基础薄弱，为了让产品更有亲和力，让年长用户都能轻松上手，所以在策略上制定简单、易用、温暖的设计原则，保持框架简单清晰、交互简单易用，让产品有温度，让用户觉得有用、好用、还想用。
在“简单”方面，保持产品的页面框架要简单，结构要清晰，让用户清楚知道自己在哪里，所以在产品形态上只做了内容页的垂直展示，没有过多琐碎的信息入口，让页面信息更集中，浏览体验更聚焦，让年长用户也可以简单使用。
在“易用”方面，简单的框架和结构是易用的基础，在视觉元素的排列上，通过加大的图片、加大的间距、加大的圆角，通透的页面布局可以让内容陈列更集中，获取信息更高效。页面的间距以4px为基数，分为5个跨度，在统一性的基础上让界面更有节奏感，层级更清晰，从而提高产品的易用性。
在“温暖”方面，主要体现在在调性、元素、和内容上：
调性：以“温暖橙”+“阳光黄”为品牌色系贯穿始终，形成温暖、阳光的整体基调；
元素：在常规尺度上进行适当加大，加大的字体，加大的卡片占符，加大的点击区域，让产品更照顾年长用户的操作习惯，让产品更有温度；
内容：在内容及主图的运营展示上，突出“温暖”的调性，增强用户的共鸣，拉近用户与产品之间的距离。
整体以大面积的“温暖橙”为基调进行铺设，营造温暖阳光的质感，顶部展示产品名称和合作logo，增加产品的权威性和信赖度。
自上而下，控制大的间距和留白，分别设置了热门小站、一老一小专区、志愿者风采、活动回顾、学习园地等版块。全方面展示了小站的基础信息、输送了对孤寡老人和留守儿童的健康资讯、汇集了志愿者服务的风采、记录了帮扶活动的结果反馈、以及陈列了关爱老人和小孩的相关线上课程。
一老一小的入口及详情：通过大头图的形式加强专题感知，引导用户点击。详情内展示相关的关爱资讯和助力入口，让用户可以选择性的进行点对点帮扶。
小站详情：分为小站介绍、人员风采、小站活动、和运营概况四个部分，清晰展示线下暖心小站的各项事务，让线上用户对线下小站有更全面的了解。
个人中心：功能简单，布局简洁，根据不同身份类型展示不同入口。作为站长的话，拥有志愿者审核、活动管理的权限，整体表现形式以统一的卡片式陈列，让内容更聚焦。
秉持“简单、易用、温暖”的设计原则，尽可能地让产品陈列简单、操作流程易用、设计满足功能凸显温暖，让用户想用，让产品好用。
经过多次推导与线下团队配合，小站1.0在今年5月初上线，第一批试点小站正在使用中，得到了较多正向良好的反馈，为乡村的一老一小带去了许多暖心的帮扶行动。
产品上线之后，通过在线上发布活动信息召集志愿者。在线上顺利举行了多场暖心活动，比如在重庆马蜂社区的服务站内为当地留守儿童举办了多项课业辅导的活动，在重庆周家寨服务站新建了日间照料室，提升老人的居住生活质量。
今年5月20号，在中国互联网公益峰会上，为村暖心小站进行线上交流展示，获得了很多与会代表的关注和认可。
截止2021年7月，平台上线了两个试点小站，共举办了数10次线上+线下结合的活动，活动参与了520人，受到36000人以上的关注。暖心小站的建立和运营，对乡村的“一老一小”提供了更加有针对性和个性化的服务，同时加强对当地社会组织的培育和孵化，提升了服务对象的生活质量，促进和谐社区建设，助力乡村振兴。
通过这些试点小站的成果和反馈，让设计目标也得到一定程度的印证，让产品体现了“有温度、有故事、可以连接情感”的桥梁。
随着互联网的发展，人们对于产品不再是简单的形式服从功能，而是逐步转向形式服从情感。让设计回归情感，让有温度的设计去创造有温度的产品，可以增进人与产品之间的情感连接，让产品更有生命力。再者，用有“温度”的设计思维，去捕捉和解决社会问题，通过具有社会责任感的设计，推动社会进步，形成坚实有用的“设计力”。
那么，如何提升自己的设计力呢？可以概述三个保持一个向善。
设计需要坚持，而坚持源于热爱，保持热忱之心会发现许多美好的事物，同一个需求会自发性地探索很多不同的解决方案，因此会洞察需求背后最本质的东西，切入要点寻找最优解。
还有一句话：“设计路上，唯有热爱，方能抵御岁月漫长”。
这里的“敏感”指的是设计师要有好奇心，善于发现新事物，善于追踪最新行业动态，是一种职业敏感，是一种自觉行为，表现为热情、兴奋、敏锐，对新事物充满热情，对于新发现充满兴奋，能够特别敏锐的捕捉社会痛点解决设计难题。
生活中常说，有共情的人往往都特别感性、多愁善感，泪点低笑点也低，因为特别有代入感，而且对事物特别专注。
设计上所说的共情力则需要保持感性，同时也需要理性加持，不偏不倚。让设计师自己能切换到项目内的各种角色，不把自己当成局外人，将自己融于产品本身，随时切换为不同用户的视角，更能深入地发现、分析和解决问题，让设计站得住脚、更接地气，让设计有依有据。
设计的最终目的是传递需求、解决问题，这就意味着设计的初衷不同，那么最终的导向也会截然不同。
设计向善，保持“善”的初心，主张设计回归社会、回归到人心最本质的出发点，做有温度的设计、有仁心的设计、可持续的设计。
关注社会问题，保持一颗敏感而善良的心，用“设计向善”解决社会痛点，坚实巩固自己的设计力。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
关于树形选择，我们必须先知道它的基础概念，“树” 究竟是什么？我们先来看看树状结构的定义
树状结构其实是作为一种层次结构化的表达方式，它能够将树的抽象出来表达完整的构造关系，为什么叫做树，是因为它更像是一个上下颠倒的树，根部在最顶端，枝叶反而变为下方。
同样在对树状结构的整体命名上，也遵循了与之类似的表达方式：
节点（Node）：是树状结构当中的基本单位，使用节点可以表示 不同数据间的 组成关系（从属关系与并列关系）通常节点会分为几类特殊情况。
1.根节点：整个树状结构的开端被称为根节点。一个树状结构一定只有一个根，在思维导图中，根节点就代表着它的开端，用于延展出更多的树状结构。不过在目前的树形选择当中，因为对易用性的要求，通常会隐藏根节点，只展示子节点。而根节点隐藏在 标题、选项文本 当中。
2.子节点：根节点之外的节点被称为子节点。一个树状结构子节点数量是没有具体限制，在树形选择当中是直接展示出来的部分。
3.叶节点：没有连接到其他子节点的节点。叶节点属于一类特殊的子节点，它是整个树状结构的最末端节点，在树形选择当中是一个重要的概念，下面会展开来讲。
分支（Branch）：节点之间的链接，在我们树形选择当中，分支的线条可以选择显隐。其搭配的使用方式也有所不同
同时我们还会用到节点的几个基础的概念：
节点层级：指当前节点所在的层级，比如根节点为第一层级，根的子节点为第二层级，以此类推；
节点高度：对于某一节点的高度，便是该节点下所有叶节点从上到下的个数；
节点深度：指该节点到根节点的唯一路径长度，深度与层级较为类似。
树状结构究竟出现在生活中的什么地方呢？树状结构对于我们又有什么用呢？大家可能理解上会觉得很枯燥，我给大家举一个例子：
回忆一下我们小学使用字典时的场景，首先我们是先通过声母，去确定这个汉字的大概的页数范围，然后通过韵母去确定这个汉字的详细位置，最后通过音调找到想要寻找的汉字：
其实字典的设计，便是一个典型的树形结构。而在 B端系统中我们常见的公司组织架构、省 市 县 地址选择、在线教育的班级结构 等等，这些都是使用了完整的树形结构。
采用树形可以快速进行结构化的表达，其目的是为了用户能够快速地增删改查，想要更多了解结构化表达的同学推荐大家看一本书《金字塔原理》，里面讲了非常多的逻辑化思维、表达的方法与内容，内容比较多，而这种思维其实在我们工作生活中都能够用到。
1.层级缩进
为了将树的整个结构完整的表达出来，会使用层级缩进的方式进行区分，通常会使用 8px 对下一级节点进行缩进，这样能够表达更为完整的层级关系。
这里要注意，如果想要更为强调树形选择的层级关系或者树形内容本身就比较多的情况下，可以见解 Coding 编辑器的思路，即：将缩进内容使用“分支线”进行表达，更明确清晰。 这里使用层级线后，折叠图标也会有所不同，下面有明确解释。
2.折叠图标（节点按钮）
主要是将节点下的所有树叶与子节点进行展示，在整个树的结构中，折叠图标一般分为两种：三角折叠、方形折叠
三角折叠：为页面层级较少时使用。因为在较少的层级下，用户不用特意去思考当前节点所在层级究竟在哪。
方形折叠： 更多与页面层级线进行配合使用，通过层级缩进，将页面层级线标识清楚，能够更好的在多层级情况下进行合理区分。
3.选择控件
整个树形结构依旧是在选择录入框架下，分为单选和多选。因此需要对其类型有所展示，特别是在多选的场景下，一定要标明它的类型，方便用户进行理解使用。
通常这个控件可以在单选的时候进行隐藏，这里先按下不表，我在树形选择的类型当中深入给同学们进行分析理解。
4.选项文本
注意字数限制、超出后如何处理即可，我就不做过多介绍。
在讲树形选择之前，我先为大家讲解关于与其相关的同类型产品，为了方便大家的记忆，我选择出了两类不同的组件进行对比，感兴趣的同学可以关注“CE青年” 后台回复树形对比进行查看。我通过视频的形式为大家进行了讲解，相信大家在看完之后一定会有所收获。
单选树只能选择叶节点，也就是需要将每个树展开过后才能进行选择。
它是一个较为传统的选择方式，因为它的选择热区较小并且理解成本较高，因此这种方式不太满足现如今对于B端产品效率提升方面的要求，并且要求十分特殊，因此使用较少，现多以单选节点树为主。
单选节点树与单选树最大的区别在于其能够选择子节点，这样可快速选择该子节点以及其各种叶节点。
同时传统的单选节点树中是采取单选按钮的方式，随着对B端要求的不断提高，并且在树的功能越发的复杂过后，几乎取消了 单选按钮 的形式，取而代之的是将整个 文本标签 作为选择的热区，用户点击过后即可进行选择。
因此在树形选择当中，逐渐将单选节点树演变成由两部分热区所组成的一个控件：
在左侧，主要以树类型的展开折叠操作，热区通常就是图标折叠图标这一部分；
在右侧，以选择该选项、节点的操作为主，热区范围以整个选项文本作为基础，进行延展即可。
这里还是提示以下新读者，这类选择一定要进行 Hover 状态处理，不然用户无法根据光标的变化判断是否可点击，当然老读者跳过就行～
大家在对比单选与多选时会发现，为什么不会存在多选树？不存在只选择选项的多选呢？
思考时间又到了，别忘下划，自己先想想呢～
虽然在理论上会存在多选树的情况，但是它存在的价值比较诡异。首先在树的节点当中，我选择一个子节点就是选择该节点下的所有。因此可以说是选择了一个节点；或者说它选择了该节点下的多个选项，因此在实际情况中这类场景过于的少，更多会用多选节点树进行代替。
当然，多选节点树与单选节点树在结构上是十分接近的，就是将复选框展示出来，方便大家进行选择。考虑到大家经验不足，建议这里复选框放在折叠图标前侧，原因有二：
在树形选择后续的拓展当中，经常会遇到选择增加一些操作功能，比如 新增、删除、复制、粘贴、拖动排序。我看很多设计师最开始因为种种原因将选择组件部分放在后侧，导致之后的操作无法进行更多的拓展，随之崩溃，对树形选择又是一顿乱造～
现有的基础架构基本都是沿用了这类设计，可减少前端同学的工作量，同时也减少他 BUG 的产生。
多选节点树的使用场景非常多，我举一个大家在树形选择中都会犯的例子，希望大家能够多理解其中存在的特殊逻辑：
比如在一个大型上市公司当中，我作为老板会去设定整个“设计部”的权限，并且想要得到的效果是之后有任何新员工都是使用这个权限。如果作为一个新人设计师，很容易就会使用多选节点树，将整个组织架构进行选择，但是这样的选择与用户实际想要的内容是存在较大差异的。
在产品设计中，对于上诉的“设计部”这个概念其实是一个动态数据，即在之后新增到“设计部”的所有员工，我不必再去权限管理中重新配置。我们遇到动态数据的情况时，首先不建议大家采取树形选择，因为首先对于这个概念的理解成本很高，无法通过树形选择这样的方式让用户理解；同时系统对于这类动态数据的情况都建议特殊处理，至于怎么处理，大家可以在评论区讨论，我也会在后续文章当中为大家进行讲解。
易理解：
因为树状结构本身就已经存在很久，早在 DOS 计算机时代就有它的影子，经过长期累月的发展，用户在理解上也会相对更加容易
快浏览：
在数据量特别大的时候，能够根据子节点优先找到自己想要的叶节点，从而提升选择效率，与《选择录入02》当中讲到的 Tab选择十分类似，没看过的同学建议先去看看。
看结构：
结构，能够辅助人们进行快速记忆，从而对整体框架有着更深了解。而树形选择正是有了这种结构能够更为方便的让更多人熟知，从而更快了解业务。
首先对于树形选择本身的控件形式，你就需要去分析其能承载的内容数据量。应该是在什么范围内较为合适。
当数据量过大时一定会出现异步加载、数据分页等诸多情况，因此在设计中，需对这类情况进行设计。
全选功能本身较为简答，无外乎就是一个复选框的事情，但是在上面提到的数据量过大 + 全选的存在，会有些问题还需要大家进行留意。
在树形选择当中，都可以采取键盘操作从而提高效率。基本规则是：
↑键：向上切换同级节点；从第一子节点，顺序返回父节点；
↓键：向下切换同级节点；顺序进入已展开的第一子节点；
←键：关闭当前级别节点；返回上一级父节点；
→键：展开子节点列表；顺序进入已经展开的第一子节点；
回车键：提交当前 foucs 的节点选项；
树形选择是较为常见的一类方式，但由于大家对 基本的树形结构 认识不足，导致对其设计会有许多误区。
关于树形选择大家还有什么疑惑，可以在评论区咱们一起讨论～
任何一个新颖的设计浪潮，都会影响设计师的设计表达。我们能做的就是感受浪潮、寻找源头、思考走向，随时精准有力的拥抱变化。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
2021年至今「逆反差字体」这个原本偏小众的字体设计风格，从卷土重来到广泛应用，再次受到诸多设计师的追捧，一股新浪潮扑面而来。
纵观它的出现、流行与发展，身为设计师，期待本文可以通过对经典设计的客观分析，蓄力字体设计领域的经验和技巧，为2022年的创作积累更多灵感。
Reverse contrast现在国内被称为「逆反差字体」。设计师皮特·比亚克（Peter Biľak）在2012年发表的文章中曾提到：这种逆反差字体的设计是有意通过违背读者的预期来吸引注意的，怪异的字母形式在日益饱和的商业信息世界中脱颖而出。
二十世纪中，荷兰著名书法家和设计师格里特·诺泽尔（Gerrit Noordzij）倡导以书写走向作为字体设计的基础，通过习惯来定义书写理论：平移和扩张。这个逻辑反映出人们对拉丁字母普遍造型认知：横细竖粗。
竖笔画在西文字体中起到承重、平衡结构的作用。如果颠倒粗细对比关系，使其横粗竖细，就会造成横向视觉，让人产生印错的感觉，这与传统的三大主流西文字体的设计方法也是相差甚远。
逆向设计的规则营造出视觉上强烈的差异感，比起普通字体更怪诞、夸张，更具有戏剧性和情绪化，让人印象深刻。它最大的特点是重构了拉丁字母的视觉比例。经发展，中文表达上使用“逆反差”还是生动准确的。
在商业广告海报张贴应用中Caslon Italian字体被铸造出来。这是19世纪初，工业革命在金属活字印刷领域的一个新奇的创新。
1825年，印刷工和社会改革家托马斯·卡森·汉萨德（Thomas Curson Hansard）把逆反差字体描述为“排版怪物”。
1854年，French Antique字体发行，造型如铁轨般的字型引来了一种新的风格——French Clarendon。它在美国广告制作中展开了大量生产使用。在获得市场认可后的半个多世纪，它仍在马戏团的海报和西部电影宣传上被广泛应用。
这组彩色的活字印刷样本，让逆反差的设计风格在当下更显复古。
19世纪，在追求创新的欧洲人看来，逆反差字体的古怪造型仍是离经叛道的。而现代设计师则带着更多反思和辩证，以非传统的审美来认识这种字体风格。
20世纪，逆反差字体的浪潮席卷欧洲。瑞士著名的字体设计师马克斯·米丁格（Max Miedinger）于 1954年设计了自己的第一款逆反差字体Pro Arte。大名鼎鼎的Helvetica字体就是由他设计的。
20世纪80年代，远在亚洲的日本也接受了这股“逆浪潮”。当时的动漫和游戏开始风靡，热血与科幻的世界里结合字体夸张的造型，让设计简直天衣无缝。
1980年，在游戏UI中诞生了世界上第一款逆反差像素字体，让游戏世界充满着奇幻感。
这种像素化的设计方法，如今是很潮的视觉表达。
80年代，逆反差字体在音乐和书籍等多个包装领域的应用也是继往开来。
逆反差字体从未真正流行但也从未被抛弃过。如今，除了趣味盎然，又增加了更加疯狂的风格效果，最为典型的是Maelstrom。很多字体的诞生，都证明着逆反差的无无限可能性。
西文有着较为完整的逆反差字体更迭历史，汉字相对创造力偏弱。中国设计师在进行汉字逆反差设计的探索时，不妨大胆些，打破局限，从中国书法中吸取创作养分，这是民族文化理解上的考验，也是对民族文化的尊重。
大多书法风格多变，并没有严谨的横粗竖细。不过，难得能在清代的漆书中找到横粗竖细的规律存在，它牺牲了部分汉字的视觉结构，传达出一种钝拙感和趣味性，这正是漆书的魅力所在。
汉仪2020年1月出品一款汉仪吉金，灵感来源就是漆书，在其基础之上造型更加现代。
民国时期，在广告招贴、书籍封面上，也能发现很多逆反差风格的字体设计。这些都是汉字设计上逆反差的初次实验。
徐学成是中国第一代字体设计师，在晚年仍坚持实验性设计的尝试，1998年他主持设计出华康雅艺体这款逆反差字体。
造字工房也推出过几款视觉冲击力强、节奏分明、充满艺术张力的字体：造字工房溢尚真体、彩体、超凡体等。
3type（三言）设计研发的基本美术体，在2020年10月进入试用阶段。它简单明了，拥有大胆灵动的字形，是为数不多的优秀中字逆反差字体。
基本美术体也是本文的灵感来源。曾路过顺爱烤肉公司，被牌匾上的字体所吸引，便开始了我对逆反差风格字体的探索研究。
日本一度受到美国Fantail（扇形尾）风格的西字影响，也展开过一系列的实验性尝试。最为典型的是写研在80年代，推出的「扇尾兰」字体，它凭借写研在行业内的影响力得以广泛的运用。
其后，C&G 花束字体、TA-Sigma字体等，这些极具逆反差风格的扇尾字形也在市场应用中大放异彩。
历经200年的锻造与发展，逆反差字体如今获得了越来越多设计师的青睐，中外设计有目共睹。
野兽派美学（The brutalist aesthetic）频繁的应用于当代平面设计和网页设计中，逆反差字体有着原始且未经雕琢的质朴风格，往往在简洁精致的物体上形成鲜明对比，增加设计内容的趣味性。
近两年，看到了很多比例夸张、造型狂野的验性字体形式出现，这要归功于酸性设计的盛行。
酸性设计，是一种主观情绪化、美感与欲望交织、传达致幻又辛辣酸涩的一种复杂感受的体现。它强调出了失调和混沌共存的状态，这和逆反差字体的反叛精神极为契合，二者结合来表达科幻感与未来主义时情绪饱满而热烈。希望本文能帮助更多朋友梳理逆反差字体与设计风格的关联性。
逆反差字体是一场字体设计的视觉革命。看似怪诞，其实是对视觉设计规律的突破与创新，虽“有悖常理”，但并非昙花一现，它在字体设计的历史上拥有自己长久的舞台。
任何一个新颖的设计浪潮，都会影响设计师的设计表达。我们能做的就是感受浪潮、寻找源头、思考走向，随时精准有力的拥抱变化。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com