“时间”作为人机交互界面中经常出现的元素，本质上都是为了去传递时间维度的信息。但是我们平时在使用一些互联网产品时会发现，关于“时间”的显示状态或形式在不同场景、不同页面里往往是不太一样的，这是出于怎样的考虑呢？今天我们就来聊一聊，如何在产品设计中把握“时间”显示的诀窍，让其在页面中发挥最大的作用。
按照“时间”元素在页面中的出现场景和所起到的作用，可以大致归为以下几类：
指用户本人作为行为主体或行为的接收对象，在某一动作发生后为其所打上的时间标记，比方说“我”购买商品下单的时间或收到一封邮件的时间。
用户在使用产品进行内容消费时，时间作为该条内容的附属信息，起到补充说明的作用，比方说一条短视频或新闻的发布时间。
在上面的案例中，我们会发现“时间”在对应场景里所发挥的作用不同，用户在使用产品时往往对时间存在不一样的关注程度。因此我们在做页面设计时，要根据具体场景和用户诉求判断“时间”元素的重要性和优先级，通常情况下：时间作为事件的关键构成要素＞行为的时间标记＞内容的附属信息，之后再思考用什么样的设计形式去展示来达到我们的目标。
在讨论“时间”元素的设计之前，我们先共识一些有关时间的理解和概念。时间可以划分为“时间点”和“时间段”两个维度，类似我们高中物理时学过的“时刻”和"时间间隔“的概念。
拿开会举例子：“下午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秒）。
绝对时间可理解为事物发生时的确切时间，由具体日期（年、月、日）和时间（时、分、秒）组成。使用绝对时间戳的优势是信息传达精准，显得正式，给人确定感和安全感，同时排布规整，便于形成认知习惯；但缺点是内容显示过长不利于阅读，并且占用空间较大。
在时间显示格式的选择上，为了避免混淆，推荐使用文字格式或“-”分隔符来分隔日期，而“/”分隔符在不同国家有不同的展示顺序习惯，容易造成误解，尽量少用。
时间颗粒度的选择依情况而定，一般场景总结如下：
相对时间在产品设计领域通常是指内容生产、到达、或状态发生改变时，距当前时间点的时间差值，多用于push通知、信息流产品，侧重强调内容的时效性；而“倒计时”也算相对时间的一种，侧重营造时间的紧迫感。使用相对时间戳的优势是用户辨识、理解成本低，不用通过计算来判断时间过去或还剩下多久；缺点是不够精确、正式，并很难衡量两个时间点的临近性。
在使用相对时间是，要注意格式友好。时间单位可随着时间的推移自动改变；数字不要过多，尽量取整；并且可设置其与绝对时间转换的临界点。
在设计界面中的“时间”元素时，要遵循场景贴合、便于阅读理解的总体原则；之后根据场景和目标，再选取合适的“时间”呈现方式（包括时间戳类型、时间显示格式、时间颗粒度）。
一般情况下使用绝对时间，并且要看是为了强调某一关键时间节点，还是侧重表达整个持续过程。此外，选用关联场景的文案或者运用倒计时（相对时间）的形式，可一定程度上促进用户更加集中注意力，提升对信息的关注度，并达到特殊的激励作用和转化效果。
该场景通常是为了追求确定感，通过提供精准的时间和日期便于用户定位到过去或将来的某个时间点（段）去查找、回顾相应内容，因此大多数采用绝对时间，时间颗粒度依具体情况而定。
如果所设计的产品供给内容的更新速度快，用户活跃度高，并且此时内容的时间信息准确性不那么重要反而更侧重于内容的时效性，那么通常会使用相对时间。部分信息流产品（比如新闻资讯类、社区类）会在列表页使用相对时间，在详情页使用绝对时间，时间颗粒度也是依情况而定；并且会随着时间推移，在某一时间节点前把相对时间转换为绝对时间。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
前言
说起按钮，很多做设计的小伙伴是熟悉的不能再熟悉了，它是我们在设计界面时最常用、最重要的组件之一，也是易被忽略的元素之一，所以在设计之前，做好对按钮组件的认识、了解非常有必要。
从我们有记忆认知开始，按钮就时刻在和我们打交道，墙上的电灯开关、电视机的调节按钮、遥控器的按钮等等，这些物理按钮不仅仅是当下UI按钮组件的前身，且不会消失，依然会有很多非数字化的产品及机器设备在持续延用，不管如何演变，基本不会脱离实物参考。按钮最吸引我们的莫过于通过简单触摸就能轻松满足自己的行为需求，按钮设计的直观性及易用性会影响着人们完成一件事情的意愿及效率。
在UI设计中，如何完美的避开问题、把按钮设计的更好，是每个设计师需要深思的问题。按钮设计的好坏，将直接关系着用户引流、触发行动、产品转化率等至关重要的问题。另外，精致的按钮也会让整个页面的视觉提升档次。本篇文章将对按钮作出解析，介绍在设计按钮时需要着重考虑的因素及设计标准，并将理论付诸于实践。
分享目录
一、按钮的作用
二、按钮的类型
三、按钮的状态
四、按钮的大小及风格
五、常见误区及避坑指南
六、总结
一、按钮的作用
1. 什么是按钮
在UI设计中，按钮是一个明确指示交互行为动作的组件，主要用于触发某一个即时操作，很多时候，我们需要采取下一步行动或返回到上一步，都要通过按钮（部分场景可用手势交互）来完成。
在视觉层面，按钮的组成看起来很简单，由一个底色块/线框加上一组文案即可组成，但真正要将按钮设计好，仅停留在视觉层面并不严谨，其大小、位置、色值、文案...等每一个细节的处理都关系着用户的操作体验，下面的这几种情况大家肯定有碰到过：
2 按钮有什么用
通常，我们在设计按钮之前，需要详细理解按钮所存在的意义，哪里该加、哪里不该加、为什么要加，主要从以下几点来体现按钮的作用：
2.1 功能性操作
这种按钮很常见，比如展开、收起、下拉、加减等，按钮视觉较弱，重点强调该页面的功能，突出主体信息，在操作之后会发生一些交互变化，这类按钮主要起到功能形态的作用。
2.2 明确引导下一步操作
当用户完成一个页面的内容填充或信息确认，就会失去视觉焦点，而下一步按钮就会聚焦视觉重心，通过文案告知用户下一步该怎么做，常见的有保存、下一步、支付、确定...等。
另外，用户需要完成某个任务，但同一个任务流程的信息、种类较多，这时就会通过分步骤、分页的方式，并在每个步骤的末尾增加一个能起到上下衔接作用的按钮，明确引导用户进入下一步操作，以此来提升用户完成整个任务的成功率。
2.3 培养行为习惯
如果在操作某个按钮之后得到了一定的利益，且能持续为用户带来价值，那么不妨将这个按钮设计的更醒目，并在同等级但不同的地方保持视觉的统一，持续培养用户点击习惯，当用户下次再看到类似这种按钮时，惯性思维就会引导点击。
3 按钮的组成
在大部分的认知中，最常见的按钮就是一个底色块加上一句文案就完成了，殊不知一个好的按钮需要经过很多细节的把控，才能发挥出按钮的最大作用。例如文案的长短/边距、容器的大小/圆角、填充色的主/次之分...等，下面我们来看看一个按钮到底是由哪些属性、元素组成。
◇ 圆角：传达出按钮的气质，决定用户的视觉感受，最常见的为小圆角，也有较为严谨、力量型的全直角、卡通可爱、年轻化风格的全圆角。
◇ 图标：用于按钮含义的图形化抽象表达，例如加载中、编辑；
◇ 容器：整个按钮的载体，容纳文案、图标等元素；
◇ 边框：确定按钮的边界，常用于次级按钮描边；
◇ 文案：用文字表达按钮的含义，精简文案；
◇ 背景：表达按钮的当前状态，对按钮合理的使用主体色能有效传播品牌气质；
◇ 投影：让按钮具有层次感，配合渐变背景能体现出微质感的效果。
二、按钮的类型
1 功能类型
按照功能属性分类，可将按钮类型分为流程控制和功能选项操作。
流程控制：常见的传统按钮，如支付、下一步、确定、保存等，容器承载着图标、图标+文案、文案。
功能选项：开关/加减控件、标签栏/分类、状态切换等，操作之后只针对当前页面做出属性的调整，不涉及流程的变化。
2 视觉样式（横向）
视觉样式有所区别，在不同的页面可能存在同等级的权重。
常规按钮：最常见的按钮，当同一个页面出现多个常规按钮时，会有主次之分；
虚线按钮：常用于添加、上传等操作；
文本按钮：仅用文字作为触发点，部分会用主色、右侧箭头、下划线等方式突出。
3 层级分类（纵向）
高权重：带有填充色的主操作按钮，当同一个页面存在多个按钮，只允许存在一个高权重（主操作）按钮；
中权重：带边框轮廓的概述按钮，同一页面可存在多个中权重的按钮；
低权重：纯文本按钮，以及浅色填充+浅色文字的按钮，同一页面可存在多个低权重按钮。
三、按钮的状态
在设计按钮时，为了体现按钮不同的具体含义，以及后续设计、开发的统一性，明确按钮交互样式是设计过程中不可缺少的重要组成部分。设计师需要在不干扰界面视觉的前提下，对每个按钮的样式、状态有清晰的定义，与其他元素、布局区分开来，以确保按钮的可供性。常见的状态主要有以下几种：
◇ 待激活状态：需要完成一定的操作、或有一个以上必要的前置条件后才允许交互；
◇ 正常状态：按钮的正常显示状态，可进行交互操作；
◇ 点击状态：触碰效果，表示按钮正在进行交互且未结束，会在正常状态的基础上增加一个纯黑色不且透明度为10%的蒙层，交互完成后，即会引发此按钮的真实作用；
◇ 加载状态：产生交互后没有立即执行、或系统需要一定的时间才能执行完成；
◇ 禁用状态：系统默认暂不允许操作、或需要用户离开此页面去完成一定的前置条件才能使用。
四、按钮的大小及风格
1 按钮的尺寸
在PC端设计按钮时，因为鼠标的精准点击，我们通常会将按钮设计的小一些，同时也能让整个界面看起来更加细腻，只要不影响操作，36px~48px范围内的按钮是比较常见的。但移动端的按钮设计，我们要更多的考虑到物理尺寸，即手指（指尖）在操作时需占用的实际范围。
iOS的设计规范中，将按钮的最小点击区域规定为44pt，一旦小于这个数值，操作时就会出现精准度较低的情况，导致操作失误或无效。
在实际的iOS界面中，很多应用在设计按钮时并未严格遵循最小44pt的这个标准，例如很多一、二级界面的次级功能入口，有些连30pt都不到，也并未对用户造成多大的影响，可能是对应的功能权重、用户点击频率都非常低的原因，还有一部分文字按钮，其本身永远都不可能达到最小的触控标准（触控热区加大即可），所以关于按钮的尺寸大小并非规定的很死板。
费茨定律告诉我们「目标尺寸越大，移动至目标所花费的时间就越短」，所以，在满足手指触控范围的同时，还要根据所对应功能的权重占比来适当调节按钮的大小。不难理解，当某个元素的尺寸越大就越吸引眼球，就更容易被视觉捕捉到，也更容易被「点击」，精准度被降低的同时，也减少了用户的操作成本。
我们以8像素栅格系统、iOS的2倍图为例，较为常见的有：小型-64px、中型-80~88px、大型-98px、超大型-随机这四种按钮。
2 按钮的风格
在UI设计中，几乎每个页面都存在按钮，样式、种类也有很多，但设计风格常见的也就几种，例如扁平化、微质感、拟物化、新拟态（概念）...
2.1 扁平化按钮
通常在容器中填充一个纯色即可，没有多余的视觉干扰，操作简便，这种类型的按钮一般在应用中用的最多。例如：工具型应用、B端应用等。
2.2 微质感按钮
相比扁平化，填充渐变色再加上浅浅的投影，不仅能保持信息内容的简洁、让用户产生更强的操作欲望，还能让页面具有品质感，更加耐看。例如：年轻化应用、娱乐类应用、儿童应用等。
2.3 拟物化按钮
大多设计的很立体，3D质感、属性样式丰富多彩，参考现实世界中的事务或摄取应用场景中的某些元素，使其更加逼真，有较强的代入感。例如：游戏类应用、H5专题、运营banner等。
2.4 新拟态按钮
2021年风靡一时，几乎无人不知，但要想落地却不太现实，实用性不强，也只能在飞机稿中出出风头，随着时间的流逝，逐渐销声匿迹，不知哪天会不会经改良后再次面世（当初扁平化问世，也是几经波折，经多年改良才逐渐被大众所接受）。目前只有少数工具类应用使用了新拟态，例如：计算器、AI设备控制、有道云笔记等。
五、常见误区及避坑指南
1 主/次操作层级分明
当同一个页面出现多个按钮时，只允许存在一个主操作按钮，其他不做特别设定。当然，如果次要操作较多，也不益过多的出现次级按钮，可根据权重降级处理，以小图标或文字按钮的方式呈现。
2. 统一样式
主/次操作按钮要统一样式，用户需操作时，尽可能的减少其思考及选择时间，按钮应该迎合用户固有认知及惯性思维，节省时间成本，提高操作效率。
3. 圆角值
在大多数界面设计中，我们通常所见到按钮还是小圆角和全圆角居多，也有部分按钮完全直角，需要根据产品的行业属性与气质来选择最合适的圆角类型。不管如何，尽量避免大圆角（卡片除外）按钮，不方不圆、不伦不类的，显的不够成熟也不好看。
3.1 小圆角
小圆角按钮的圆角值通常控制在高度的1/5、1/6，儿童类型的应用也有1/4（较大）的，并非绝对值。如果习惯使用8像素网格，根据按钮的尺寸大小，直接将圆角值固定在8px、16px、24px（较大）这几个数值，能减少设计组件的数量，也利于开发做组件封装后续调用。
3.2 全圆角
全圆角按钮的圆角值固定为高度的1/2，或者在软件的圆角设置中直接将数值拉到极限。
3.3 直角
不设圆角值，在PC端较为常见，也有部分较为严谨的移动端应用使用直角按钮。
4. 按钮中的文字
按钮中的文字要便于用户理解，不能过于陌生或绕口，用户碰到不易理解的信息会产生困惑，甚至误导用户导致操作失误从而造成损失。除此之外，文字还需要精简，不能过多或折行且能合理的引导用户完成操作。
上图的文案歧义就很明显，自以为聪明的设计师想要挽留用户，刻意将主次按钮样式对换，希望用户操作不成功，那么用户在需要取消订单时就疑惑了，到底是点击「确定」还是主操作按钮「取消」才能取消成功呢？或许稍加思考，用户也能反应过来，但无疑增加了选择难度、思考时间及操作成本。
5. 文字与按钮比例
按钮中的文字太大或太小都会影响用户对信息接收的效率，大小比例需要适中。文字太大会感觉很拥挤（跟大家衣服买小了感觉一样），没有呼吸感，要给文字四周留下足够的空间，同时文字太小会显得小气，看起来也会比较吃力，不利于信息接收。
6. 按钮与其他组件的区分
设计好按钮组件之后，页面中的其他组件或元素要与按钮有很明显的区别，避免让用户产生不必要的误解。
7. 弹窗主/次按钮的位置
在弹窗中，主按钮是在左？还是在右？这是一个争论不休的问题，那么不争了，在移动端的弹窗设计中，主按钮靠右就行了，不一定绝对正确，但绝对不是错的。根据调查数据显示，单手使用右手操作手机的用户比左手操作手机的用户量高，且用户也有一定的意识，左侧为上一步、右侧为下一步，顶部左侧为返回，右侧为保存或确定。
8. 无障碍设计
可访问性是按钮设计最重要目标之一，不仅要样式统一，还应符合用户的认知，让用户能快速知晓这个元素能否点击？点击之后会发生什么？甚至有种似曾相识的感觉。如果将按钮样式设计的与用户认知有较大的偏差，不易于用户理解。
9. 减少使用禁用按钮
在表单设计中，大部分都需要用户完成一定任务之后才能正常操作下一步按钮，在完成之前，需少用禁用按钮，在前面有讲到「待激活状态」，即在按钮中填充浅浅的主体色等待用户完成任务激活。
通常系统默认不允许操作或存在时间限制会用到填充为灰色的禁用按钮，即便如此，也要尽量让系统将其隐藏，万不得已的情况下需要在按钮附近说明情况，以免使用不当引起用户的负面情绪。
10. 投影的使用
在给按钮添加投影时，选择灰色或纯黑色加调整不同明度即可满足基本效果，但如果想要更好的视觉体验，可以基于按钮本身的色值来调整，让投影效果看起来更舒适，跟页面更搭。另外，切勿过度使用投影，宁缺毋滥，若按钮的投影太深，看起来粗糙脏乱，还不如不用，颜色较浅的按钮尽量不使用投影，否则可能会影响按钮的识别度，让这个页面看起来不够清爽。
六、总结
对于设计师来说，按钮作为设计组件之一，有很多细节容易被忽略，我们需要对每一个细小的元素进行深入思考，如论任何大小组件，都需要做到精益求精，才能给用户带来更好的使用体验。
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
以下内容主要分成两大部分，第一是聊聊响应式和自适应的区别和原理，以及我们应该如何去设计响应式界面；第二部分也是比较关键的B端系统设计的核心，B端设计中台完整构建过程的具体步骤，以及应用到的格式塔原则，和命名的一些注意事项，内容较多，大家可以根据上述目录来选择性阅读。
简单概括多端兼容设计的发展史，最早是桌面端，比如桌面的一些应用；后来出现了移动端，针对移动端大家用的都是WAP，指一种无线应用协议，大家在用手机浏览一些网站，会把网站翻译成一种低流量的浏览方式，比如去掉图片大图，只剩全文字，因为当时网络不好，早在3G和2G时代移动端用的都是WAP；在2008年之后出现了响应式，也就是做一套代码可以兼容三端（网页、移动端、iPad）设备，在发展的同时也遇到很多问题，但响应式同时也遇到了很多问题；于是又出现了自适应，指不同的设备打开不同的页面进行自适应，自适应能增加效率，但需要增加工作量；2017年以后直到现在看到最常用的就是渐进式，类似完整的像在使用一个APP。这是多端兼容设计的整体的发展。
可以理解成用户在手机、电脑、ipad打开同一个界面，所呈现的界面是一样的。需要考虑移动端设计和网页端怎么通过一套代码进行兼容。
自动布局算是响应式的一种，但平时看到很多响应式其实并不是真正的响应式，而是自动布局，因为界面在不同的设备用的是不同的模板，当我们用电脑打开呈现的是一套模板，而用手机打开则是另外一套模板，这种看起来是响应式，其实不是。因为当我在开发者模式下调节不同设备展示时，就会发现，其实是换了一个网址来根据不同的设备进行自适应的，而真正的响应式是不需要刷新的，在拖小窗口的时候就会变成手机端的那个样子。
渐进式布局是近几年比较新起的，这种布局设计，很像一个网站或者本身它就是一个网站，但用起来就像一个APP一样，看到这里大家很容易相到，小程序就是渐进式布局得一种，小程序明显是一个网页，但通过技术的一些嵌入和一些接口或者缓存的方式的操作，让用户在使用的时候感觉小程序就是一个APP，但核心技术还是web网页。
响应式的原理是通过定位的方式来做响应式的各种开发，需要在页面中至少标出这十个点：中心点，上下左右点，上左上右点和下左下右点，这几个点其实就代表了做响应式和做布局相应的位置。这样可能大家不容易理解，其实结合figma来看，这些点对应的就是这样（如下图），在figma中的布局点。设计师通过调节图形的布局点，可以做到在页面拉伸时，让想动的元素跟随变化，不动的元素静止不动，这就是响应式的原理。换言之，我们做响应式布局的原理也就是通过figma或者sketch中的布局约束这个功能来实现的。
01、响应式
如下图是响应式的优点和缺点。响应式其实就是只开发一套页面，这个页面兼容三端。虽然做了响应式，但如何响应是需要设计师去设计的。比如我们设计了一个移动端界面，然后全部做好对应的自动布局，再进行页面拉伸，内容随之会发生变化，比如当拉伸到1024*768的时候，也就是iPad的尺寸，就会发现局部在设计上有些不合实际情况，这时就需要设计师在对应尺寸的设计稿上进行内容上的微调，比如按钮不可能那么长，就把按钮设计的短一点。当继续进行拉伸到1440网页的宽度时，然后再酌情针对网页尺寸的呈现样式，局部进行尺寸的调整，比如文字和按钮被拉伸到网页版都需要居中对齐，电脑端的样式就需要设计师重新排版了。
通常在B端系统，设计师需要做响应式设计时，往往是从大往小做设计，这也取决于这个B端产品是否需要进行移动端的设计，《B端设计总概二》中提到过什么情况下进行设计B端移动端。如果需要设计B端移动端，就需要我们将网页改成移动端设计，比如B端的侧边栏导航在拉伸到移动端时，就会变成用一个折叠悬浮的iocn来替代等等这样设计上的改变。在figma中，做三端拉伸时候，可以用断点插件来进行演示，通过对断点插件的设置，就可以完美的看到页面在三端不同情况的适配呈现，断点插件用来做演示非常方便。
02、自适应
如下图是自适应的优点和缺点，其实就是一个项目开发三个页面，分别做定制设计，网页端、移动端和Ipad端。
我们都知道2021年也就是今年是我国新基建的元年，十四五规划2035远景目标里提到重点发展传统企业数字化转型，尤其是今年我们设计师更能深刻体会，C端和B端已经是完全两个不同的行业，C端发展近十年，已经很难再做到创新上的突破，该做的功能和创新都已经做了，而B端这片蓝海才刚刚开始发力，很多企业也都在考虑B端系统的搭建，降本提效率成了很多公司新的指标，因此数字化转型重点在于B端系统探索，B端重点在于中台的搭建！设计师通过设计中台，构建出基本的业务类型，再分类到业务中，构建出不同的业务界面，所以设计中台非常关键，很多公司经常会用这两个系统去构建，Antdesign和Elemnet就是设计中台，我们会发现用Antdesign可以做出很多的系统，那怎么进行设计中台的设计呢？和我们设计师有什么样的关联度呢？带着这个问题，我们深度探索B端设计中台的落地！
概念：中台是互联网的术语，一般应用于大型企业，中国互联网的变革永远是从大型互联网开始，大型互联网公司引发了技术的变革，这也是中台的兴起，一般指搭建一个灵活快速应对变化的架构，快速实现前端提的需求，避免重复建设，达到提高工作效率目的。
作用：降本提效。如果没有组件库，普通设计师一天最多做十个页面，再多就不太可能了，如果有组件化得产生，一天可以做一百个左右的界面。在面对B端系统这样几千个页面的巨大的工作量前，组件库的作用尤为重要。但如果落地，就需要前端工程师的密切配合，因为设计师设计的组件只是一个样式，而前端需要把组件进行代码化，所以组件一定是代码化的，也就是说只有代码化的组件才是真正的组件。所以视觉组件的复用，和前端代码的复用，可以大大提高设计师的工作效率。
基本库指的是一些色彩系统、字体系统、图标系统、栅格系统、间距系统等等，之所以强调系统两个字，有系统就要统一规则和统一规范，然后进行调用应用在系统中的各个地方，比如我们想调用一个颜色，不是去随选用一个颜色，应该严格的从色彩系统中去调用，如果系统组件库里没有这个颜色，我们也绝对不可以使用，可以先用替代色做或者根据业务再进行补充颜色进组件库为了后续的调用，这是一种比较严谨的使用方式。所以在建立组件库的时候我们要考虑全面，组件库中如果没有相应的组件，我们应该试着反推一下，是否要加进组件库中去，来进行系统的调用。在做中台的过程中，我们一直使用Antdesign，我们对组件的名称，组件的分类其实一点都不陌生，其实Antdesign也在借鉴国外的Bootstrap组件库（大家感兴趣可以下载Bootstrap组件库进行查看），所以并不是Antdesign组件库形成了一定的规则，它也是在沿用别人的规则，而这些规则也需要不断的有大公司去继承出来，所以慢慢衍生出来现在这样的组件库，那中台设计，首先要搭建基本库，把基本库里的基础一些系统搭建好后，我们继续去做扩展库。
如下图，扩展库中包含了很多内容，比如分了四类，导航系统，数据录入，数据展示和反馈系统。其中导航系统又包含了，面包屑导航、下拉菜单、导航菜单、顶部导航等等，包括后面的数据录入、数据展示、反馈系统也包含了很多内容。我们做这样的扩展库，也不需要做成像Antdesign的组件库里包含的那么多，或者和新出得字节Arco组件库，因为它们面向的是系统级的解决方案，各行各业都可以用它，它面向的是一个大系统，也许我们只涉及到了其中的20%，因为也没有一个系统能用到它所有的组件，所以我们自己在设计组件库的时候，一定是按照我们自己项目的范围去做组件库，而不是做一个大而全的，大而全的组件库对我们也没有意义。它们做的是公共平台，而我们要做的是一个专属平台。
形成完基本库和扩展库后，第三步是建立方法库。方法库告诉我们的是什么时候用，比如我做了一个多选框，这个多选框应该什么时候用，是不是只要遇见一个选择就去用多选框，肯定不是，应该加以说明什么时候用这个多选框。类似于是组件的设计说明。
最后再做一个案例库，最佳实践库，具体组件什么时候用我们知道了，接着案例库就是在告诉我们应该如何正确的使用，或者说的方法是什么。比如标签的左对齐和右对齐，这种情况都对，什么时候用顶对齐，什么时候用左对齐，什么时候用右对齐呢？那么根据眼动仪实验数据数据来看，并且结合给出一些工作中业务中的最佳实践得案例放进去，给使用的人去做指引。
所以设计师做的事情，不仅仅是应用组件库和创造组价库，还应该指导其他设计师，指导开发人员在去复用每个页面组件的的时候，应该怎么正确的使用，这也是在B端设计中一个关键的环节，同时我们的视觉系统一定也是和业务有关联度的，所以在B端中做设计一定也不会脱离业务去做，我们一定要联系到实际的业务场景中，这个业务场景指的就是业务和视觉的结合，在做C端的时候，业务场景一定不会比B端多，C端的业务场景大多是定制化的业务场景，它要求的是个性化，不要求通用，尽量得个性化，比如图标、按钮、页面，而B端需要统一化，中台组件库的落地，可以大大提高设计师的工作效率和开发人员的协同效率，严谨的调用组件使用组件，可以使得系统页面保持高度的一致。
如图1：可以看出纵列的关系更紧密，因为纵间距小于行间距。
如图2：可以看出行间距大于列间距，它得横向关系更加紧密。通过图中这样的视觉设计为什么会感觉间距更加紧密呢？这属于用户心理学的应用，如果元素相邻的更近，元素之间的关系就会更加的紧密。
如图3：如果元素相邻的关系都是保持一样的，那么它们的关系是相对对等的。
由此可以得出结论，如果相邻的关系越近，它们的关联度就越近，如果相邻的越远，它们的关联度就越远。
应用案例：如图4卡片中得标题和内容，设计中把标题和内容进行区分，所以我们会做大量的留白，这样的留白就会让信息结构具有层次感，层次感就是指它们信息结构的关联度，如果想让它们有关联度，就让它们距离近一点不要做区分，如果不想让它们有关联度，或者关联度出现一个等级的区分，那么就可以加一条线，让它们之间的关联度分隔开。这就是格式塔接近性的应用。
如图5：如果去区分右边的形状，通常我们会根据形状进行区分，因为人的潜意识会认为相似的形状会更有相关的分类性。这就是格式塔中的相似性原则。
应用案例：如果文字的标题大小是保持一致的，包括它有统一的大小，统一的色彩，统一的字号，那系统中的其他同样功能的地方，都应该用统一的文字，这就是格式塔相似性的应用，比如图标也是一样，只有用了相似的图形大小，相似的颜色，在相同的位置，用相同的图标进行表达，图标之间的设计才具有相似性。
如图6：可以看到有一个L，是主体与背景进行了区分，如果在设计的时候让L看的更加明显，我们采用的办法就是将主体的色彩或者形状变的更加独特，或者将背景的颜色变得更加分明，这样就可以做到那个L看的更加明显。这就是主题与背景区分原则。
应用案例：比如警告弹出，可以用色彩去区分，目标就是让用户看的更加得清晰，当警告的时候给用户一个警告的信息，当成功的时候给用户一个成功的信息。还有类似对话框的弹出，采用背景变暗和加阴影的方式，都使用到了格式塔的主体与背景变化关系的原理。因此应用在我们设计系统中，前景和背景进行区分的时候，我们就可以通过色彩进行区分，色彩的区分要保持统一，比如背景色彩透明度50%同时加一些背景模糊，其他的背景也需要保持一致，阴影也是一样，如果把阴影放在一个平面上，距离平面越近，它得阴影越短，距离平面越远，它得阴影越长，这也是阴影的层级关系。
如图7：可以看出这是一个四分之一的圆形。
如图8：这个图可以看出是一个五角星。
封闭性应用案例：当一个形状被另外一个形状或者被另外一个色彩阻断的时候，并不影响人们对这个形状额外得认知，一定会脑补出另外一个形状，这个原则和我们UI的关系是什么呢？比如一个loading，半圆一直在旋转，或者图表中的圆占比，我们就可以判断出谁大谁小，谁多谁少，判断出当前的进程和位置，封闭性原则通常应用在图标的设计，图表的设计和步骤条的设计中。
如图9：可以看出用一些简单得形状来体现，其中三角形具有明显的指向性，三角形箭头指向右边，上面五个是一组，可以看出它们具有连续性；另外一组三角形箭头指向右下角，可以看出它们是连续的一组。不同的形状会有连续性，箭头也特别有指向性，这就是为什么返回和前要进放在不同的位置，当我们的数据需要有连续的时候，我们也要使用相似的形状来表达，这就是连续性原则的应用。
同理如图10：连续性一定是要有连续等阶的变化，从左上角开始，向下和向右我们可以看出有明显的颜色连续等阶变化，通过色彩的透明度也可以做到连续性。
很多公司或者不同公司有不同的命名方式，这个需要和团队开发提前做沟通，主要以方便开发习惯操作为主，如果不命名也不能非得说成是错误的，命名可以理解成是一件锦上添花的事情，因为一切都以效率优先，命名自然会影响工作效率，通常情况，组件的命名可以分成组件的名称、级别、尺寸、状态，这样的命名顺序来进行，这样命名开发使用也比较方便，因为是按照了开发的统一规则来进行命名的。如图所示：
当英文不好的时候，推荐大家记常用组件英文名，以及常用状态名、级别名、内部名、尺寸名和位置名，那这些英文也几乎涵盖了工作中80%的英文词汇，收藏记忆哦~
至此B端系统设计总概系列为终结篇，回顾第一篇主要内容是如何正确设计组件库，B端业务调研的具体过程步骤，以及视觉规范的建立，可以看出第一篇属于B端设计的方法论或者设计指导，也是为开展B端设计前的一些准备工作；回顾第二篇总概主要内容是如何设计表单、表格、图标、仪表盘这些经常用到的设计难点，第二篇更加讲究设计落地过程中遇到的疑难杂症，专业技法；回顾当前总概三，主要内容就是中台规范的建立和自适应、响应式适配的难点，主要是成系统的B端设计步骤。我们都知道B端市场刚刚打开，而且当下对B端设计师的需求还远远不能满足我国现代化建设，数字化推进这么的大市场，作为UIUX，更早的拓宽一条路是我们当下必要的选择，谢谢阅读，祝愿各位2022乘风破浪，B端设计学有所成，如虎生翼！
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
在产品设计过程中，了解需求是产品落地的基础之一，而在B端产品中，需求可能会涉及到业务需求、用户需求及管理需求三个方面，具体该如何保障B端需求的快速洞察、快速实现呢？不妨看看作者的总结和梳理。
需求是产品存在的基础，贯穿整个产品的整个生命周期。本文聊聊需求的管理方法论。需求管理方法论概念包含了，需求调研和挖掘、需求分析、需求管理（输出需求文档），也可以用一句话来说明，就是收集客户想要什么，最终确定实际做什么。
本文会涉及到面试过程中问到的需求相关内容，可以先收藏后细品。
在我看来，B端需求主要分为业务需求、用户需求和管理需求。
在下文中会用这三类需求进行详细说明。
1）调研的8大科学方法已经前面写过，这边介绍一下调研时的几个小技巧。
① 用图形作为调研助手
用图形会引导大家的讨论方向一致，收敛，不易跑题。图形会引起参与者的视觉共鸣，从而加速、加深理解的程度。图形的逻辑清晰，可以避免讨论结果似是而非的现象，为后续需求变动提供证据（甩锅）。
② 找到调研的合适颗粒度
对于颗粒度的把握，是没有一个定数，但如果调研结束后，不需要再向客户进行咨询就可以进行设计工作了，那么这个调研就做到位了。第一次调研现场，颗粒度尽量越细越好，因为后续的调研会增加更多成本。
2）业务流程优化的一个方法-ESEIA方法ESEIA流程优化方法是由五个首字母组成，包括E（Eliminate）清除、S（Simplify）简化、E（Establish）增加、I（Integrate）整合和A（Automate）自动化，用来减少流程中的非增值活动，增加流程中的增值活动，然后进行整合和自动化，如图所示。
案例：蓝湖SaaS，是一款针对产品设计到开发阶段的流程优化工具，从产品原型设计——原型上传——UI设计师打开——根据原型设计——设计稿切图——打包上传——程序员下载——打开设计稿并查找相应切图——开发时不定时查询，一系列流程中找到可清除的不增值的活动，简化相应活动，增加增值的活动（在线编辑和设计），整合后使流程连贯，数据上云，让整个上传下载自动化，提高流程处理速度和质量。
需求的来源会有各种不同的渠道，有内部同事、领导、自己产生的需求。也有外部市场、用户、竞品分析、行业规范等产生的需求。我们需要先把他们产生的需求分类，摆正位置，才能对症下药。不管是哪个渠道来的需求，在上文有说到，可分为三类，业务需求、管理需求、用户需求。业务需求和管理需求分别来自于业务流程优化和管理流程方面，如图（房产营销部分业务流程）。
1）业务需求，那需要从直接相关方和上下游的间接相关方来看，比如房产营销中的客户锁定期和解锁期，就会可能影响到销售、财务、采购、管理者等各个相关方，需要每个相关方都接触了解后才能设计。
2）管理需求，主要在上层管理的需求，一般只需要针对相关领导的需求就行，但需要知道需求方真实的需求，和该需求是否能够实现。由于管理流程是附加于业务流程之上的，所以如果业务流程没有能够产生这个管理需求的能力，那就需要从业务流程中去重新审视这个管理需求的真实性和可行性。
3）用户需求，这个就比较简单了，主要就是使用习惯，交互等事宜。可以从同一层级的直接相关方了解后进行分析。
1）方法一：逻辑演绎
当产品经理不清楚客户的业务但又感到有问题时，可以用逻辑推演来判断，通过逻辑推演可判断客户的需求是不是合理的、正确的。
例如：为什么需要做这个功能？缺少这个功能会如何？这个功能与其上游的工作流的关系，与下游的工作流的关系？思考新需求对现有业务逻辑的影响，会不会影响现有业务功能，当然也同样要考虑到一些潜在的影响，这同样是你对需求评估的一个重要标准。
2）多维度观察
产品经理与客户在专业知识方面是不对等的，客户并不知道他提的需求将来在系统中会带来什么后果，产品经理也未必听懂了客户的真实需求，因此对客户提的“表面需求”要经过侧面的判断才能确定为“真实需求”。为了解决这个问题，可以参考使用5W1H分析法帮助做好判断工作：
在需求调研中使用5W1H方法，首先要理解的是What、How，而作为判断的重要依据的是Why，其他Where、When、Who是附属信息，没有经验的产品经理只会从正面进行调研，即询问“做什么”“怎么做”，但是最为重要的“为什么做（Why）”却往往不问，这样就会失去多维度观察需求的机会，也同时失去了识别需求的虚实的机会。
3）价值判断
对于复杂的、规模较大的需求，用简单的、操作层面的能够做评估的依据难以确定是否是真实的需求，可以用“目的、价值和功能”三要素来分析和判断。目标，客户的需求目标是什么？价值，确认该目标达成后，客户可以获得什么价值？功能，做什么功能可支持该价值的实现？
如果针对某个需求的判断符合下述条件，那么它就可能不是真实的需求。
从各个渠道来的需求，经过上述的分析后，可以放入到需求池中。需求池里的需求主要有：
过滤了一些伪需求，通过挖掘知道了用户的真实目的，确定了需求方意愿度，明确了需求价值点，根据需求价值来提供解决方案，整理出了需求池，接下来就是对需求的优先级排序：
1）从需求分类的层级来排序，在B端产品中，因为业务需求是所有需求的底层，所有业务需求是第一位的，然后才是管理需求，最后才是用户需求。这就是为什么很多B端产品不讲究交互设计，而在业务流程上做了很大的投入。
2）可以从两个纬度四个象限进行划分，一个是紧急程度，一个是重要程度。按照优先级划分为重要紧急、不重要紧急、重要不紧急、不重要不紧急。
如果产品在0-1阶段，那根据KANO模型的基本型需求>期望型需求>兴奋型需求来判断，如果产品在1-N的迭代期，根据，产品价值大实现成本低>产品价值大实现成本高>产品价值小实现成本低>产品价值小实现成本高来判断（图来自网络）。
功能需求整理输出产品方案，做需求文档输出时，为了全面考虑产品方案的逻辑完整性和流程的完整性，可用以下三个点来自查自检。
1）前置条件：触发该流程的前提条件，如领取优惠券的前置条件为“注册且登录账号”，甚至还有其他比如是否是新用户等等。
2）数据来源：流程中数据来源，如审核功能中：审核人员审批下级发起的审核单。审核人员的操作流程中，下部发起审核产生审批单就是审核人员的操作流程中的数据来源；数据来源通常是在发生数据流转的场景下需要进行说明。
3）角色及权限：即用户在系统中承担的作用的抽象，是否已经把功能抽象到权限中去，这样可针对权限的设置来分配某些角色可以用，某些角色不可以用。
1）事件：主要是指功能的交互规则及逻辑判断。
这个模块用来说明用户和系统之间发生的交互。交互规则是泛指的交互规则，包含功能的页面布局、触发功能的动作及触发后的交互效果；逻辑判断则是指当用户在前端发生行为，系统对用户行为进行识别、判断并返回相应的动作的过程。
2）触发反馈：指用户与系统完成交互后，用户和系统会得到什么样的反馈及产生什么样的数据和结果。
3）异常处理：是对主流程补充，我们尽可能全的罗列并写清楚异常流程时，可以有效避免在产品设计时的场景遗漏。异常流程的梳理建议是参考测试同事的正反例原则。
1）数据埋点：埋点就不多进行赘述，但不管是采用第三方系统还是自己的埋点体系，都要做好数据分类，后续提取数据时能减少很多功夫。
2）数据需求：主要为业务方和产品经理在使用和运营提供决策依据，在设计产品方案时一定要规划相对的监控数据指标，以便于后续运营和迭代时有数据进行支撑。
3）数据字典：不要出现这个数据在这是姓名，到另外一个页面成为了用户名这样的事情。以上，是我对B端产品（项目）的理解，后续会对业务需求、管理需求、用户需求分别分析一下。
文章来源：人人都是产品经理 作者：pm老潘
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
随着媒体发展，品牌广告演变出众多创新十足、彰显品牌调性的创意。广告创意日益精进的同时用户体验阈值也不断提升，如何实现创意突破、触动用户心弦、实现用户体验与商业价值的双赢是品牌广告面临的挑战。
百度品牌广告为寻求自我突破，塑造对用户有价值、对客户强权益的新型广告形态，从全局进行思考，打破现有样式的局限，进行创新形态重构。我们将结合卡间联动的创新实践分享品牌广告的创意探索。
超级品专是品牌广告的重要产品形态，通过品牌广告结合自然搜索结果，逐步帮助客户构建在百度搜索生态的品牌运营阵地，同时给用户带来更完整的品牌信息获取满足（下图左）。在实际运用中发现，超级品专在样式上希望进一步做突破：
1）沉浸感：提升下方白色组卡品牌调性。
2）触达率：提升下方组卡的触达及感知。
基于以上分析，我们进行了系统性的样式创新，推出卡间联动创新形态，该形态的本质在于通过彩卡形态提升沉浸感，通过互动化的炫动浮层动效引导用户下滑浏览探索，从而提升品宣和数据效果，达到品效双赢的终极目标。
1. 整体视觉升级，沉浸式彩卡，突显品牌调性
界面背景上做了多种设计尝试，将白卡区升级为彩卡，提取头卡物料进行智能取色，使头卡和下方组卡更融合，强化整体性，提升沉浸感，将整体区域打造成“品牌运营阵地”。
2. 首屏强动效吸引，提升视觉冲击力，增强品牌认知
首屏以动效形式展现品牌主推信息，加强用户感知，使用户快速理解品牌亮点，获取品牌信息。此外，我们针对不同行业、不同营销目标，以差异化的动效形式作为品牌服务的延伸，增强视觉冲击力，突显产品亮点，强化品牌认知。
3.下滑展现动画，强化品牌卖点，激发用户探索兴趣
组卡区结合品牌信息，根据用户搜索品牌的诉求和目标，强化品牌的 2-3 个卖点，通过用户下滑操作触发一段动画，引导视觉动线持续向下，玩法上增加了惊喜感，激发了用户的探索兴趣，吸引用户关注到价值信息后形成点击转化。
4. 控制展现时长与展现频次，减少对用户的干扰，注重用户体验
前续通过动效传递品牌信息价值，同时我们还以不干扰用户操作为目标，控制动效展现时长及展现频率，让用户更专注并沉浸于内容本身，体验更加友好。
那么卡间联动设计创新是否真正实现品效双赢？实现商业价值与用户体验的共赢？我们通过线上数据分析和用户体验调研，来揭秘卡间联动效果。
1. 数据分析显示：有效提升转化效果和停留时长
首发客户来自汽车行业，通过该客户投放超级品专和卡间联动样式的实验对比，后者数据显著提升，点击率平均提升 11%，停留时长提升 20.2%。
2. 定性调研显示：有效激发用户兴趣，增强品牌认知和记忆
在调研方法的选择上，考虑到卡间联动的设计创新效果与用户视觉注视息息相关，因此，我们引入眼动追踪技术，通过记录用户的视觉注视过程，获取客观数据，同时结合问卷评分和深度访谈，从主客观全面了解用户的真实体验感受。
在调研用户的选择上，为了找到最具代表性的目标用户，我们根据行业用户画像设定年龄和性别配比，同时结合百度 App 使用习惯进行筛选。
评估维度的选择，重点参考了广告效果评估理论模型（AIDMA 模型），该模型阐述了用户对品牌从“注意”到“行为”转变的心理过程，基于该心理机制，结合品牌广告关注品牌吸引和印象增强的特点，从中提炼了注意兴趣、情感偏好、记忆效果三个维度来衡量品牌宣传效果。
关于这个模型的详细介绍：
在实验设计上，我们对比了超级品专和卡间联动样式。调研结果如下：
1. 注意兴趣：卡间联动吸引用户关注，引起用户兴趣，可提升品牌宣传效果
卡间联动能有效提升用户注意兴趣，整卡的注视时长提升 37.5%。用户在浏览整页过程中，分配更多的时间在卡间联动样式区域，注视时间占比从 46.6%提升至 55.8%，增幅 19.7%，注意吸引提升效果明显。
进一步细分数据发现，卡间联动首屏和下方组卡注视时长均有所提升，其中首屏动效最先吸引用户，提升效果更明显。
2. 情感偏好：卡间联动用户主观偏好更高，增强用户对品牌的印象
整体上，用户对卡间联动表现出更高的情感偏好，其中，卡间联动广告设计感和惊喜感提升效果最好，评分提升高于 50%。
结合来自用户的主观反馈可以看到，卡间联动提升用户情感偏好的原因主要为动效生动形象，互动性强，能更好的突出品牌特征，传达品牌调性。
3. 记忆效果：卡间联动视觉冲击力强，有互动感，用户印象更深刻，品牌记忆效果更好
卡间联动通过动效突出品牌卖点，用户可回忆起更多的品牌细节，相较于超级品专，用户记忆印象更深刻。
综上，卡间联动设计样式，在效果数据和品牌宣传上均有不错的表现，是品牌广告“品效双赢”的一次成功尝试。我们不仅考虑样式的精品化，更注重行业的通用性和规模化，目前卡间联动样式已覆盖了汽车、旅游、食品饮料、奢侈品等行业客户的通用诉求，满足新品宣发、卖点展示等多维度营销诉求。
同时最大程度降低物料制作难度，赋能客户低成本实现创意表达，如汽车行业客户仅需提供汽车前视图、侧视图、顶视图三张图片，即可生成炫酷的动效效果，快速投放。
在品牌广告自我突破和创新发展的道路上，我们也将继续探索、持续优化，始终不变的初心是，用设计创新的力量，提升用户体验，创造价值。
文章来源：站酷 作者：百度MEUX
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
“时间”作为人机交互界面中经常出现的元素，本质上都是为了去传递时间维度的信息。但是我们平时在使用一些互联网产品时会发现，关于“时间”的显示状态或形式在不同场景、不同页面里往往是不太一样的，这是出于怎样的考虑呢？今天我们就来聊一聊，如何在产品设计中把握“时间”显示的诀窍，让其在页面中发挥最大的作用。
按照“时间”元素在页面中的出现场景和所起到的作用，可以大致归为以下几类：
时间作为描述整个事件的重要组成部分，缺失后会对原本所要传达的内容产生严重的影响，进而影响用户的使用预期和结果，比方说用户可能不能以一个较低的价格完成商品购买，或错过了产品发布会的时间。
指用户本人作为行为主体或行为的接收对象，在某一动作发生后为其所打上的时间标记，比方说“我”购买商品下单的时间或收到一封邮件的时间。
用户在使用产品进行内容消费时，时间作为该条内容的附属信息，起到补充说明的作用，比方说一条短视频或新闻的发布时间。
在上面的案例中，我们会发现“时间”在对应场景里所发挥的作用不同，用户在使用产品时往往对时间存在不一样的关注程度。因此我们在做页面设计时，要根据具体场景和用户诉求判断“时间”元素的重要性和优先级，通常情况下：时间作为事件的关键构成要素＞行为的时间标记＞内容的附属信息，之后再思考用什么样的设计形式去展示来达到我们的目标。
“时间”的呈现方式和运用技巧
在讨论“时间”元素的设计之前，我们先共识一些有关时间的理解和概念。时间可以划分为“时间点”和“时间段”两个维度，类似我们高中物理时学过的“时刻”和”时间间隔“的概念。
拿开会举例子：“下午 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com