以下内容主要分成两大部分，第一是聊聊响应式和自适应的区别和原理，以及我们应该如何去设计响应式界面；第二部分也是比较关键的B端系统设计的核心，B端设计中台完整构建过程的具体步骤，以及应用到的格式塔原则，和命名的一些注意事项，内容较多，大家可以根据上述目录来选择性阅读。

1.1多端兼容设计的发展史

简单概括多端兼容设计的发展史，最早是桌面端，比如桌面的一些应用；后来出现了移动端，针对移动端大家用的都是WAP，指一种无线应用协议，大家在用手机浏览一些网站，会把网站翻译成一种低流量的浏览方式，比如去掉图片大图，只剩全文字，因为当时网络不好，早在3G和2G时代移动端用的都是WAP；在2008年之后出现了响应式，也就是做一套代码可以兼容三端（网页、移动端、iPad）设备，在发展的同时也遇到很多问题，但响应式同时也遇到了很多问题；于是又出现了自适应，指不同的设备打开不同的页面进行自适应，自适应能增加效率，但需要增加工作量；2017年以后直到现在看到最常用的就是渐进式，类似完整的像在使用一个APP。这是多端兼容设计的整体的发展。

1.2 响应式布局的种类

1.2.1 响应式布局RWD

可以理解成用户在手机、电脑、ipad打开同一个界面，所呈现的界面是一样的。需要考虑移动端设计和网页端怎么通过一套代码进行兼容。

1.2.2 自适应布局AWD

自动布局算是响应式的一种，但平时看到很多响应式其实并不是真正的响应式，而是自动布局，因为界面在不同的设备用的是不同的模板，当我们用电脑打开呈现的是一套模板，而用手机打开则是另外一套模板，这种看起来是响应式，其实不是。因为当我在开发者模式下调节不同设备展示时，就会发现，其实是换了一个网址来根据不同的设备进行自适应的，而真正的响应式是不需要刷新的，在拖小窗口的时候就会变成手机端的那个样子。

1.2.3 渐进式布局PWD

渐进式布局是近几年比较新起的，这种布局设计，很像一个网站或者本身它就是一个网站，但用起来就像一个APP一样，看到这里大家很容易相到，小程序就是渐进式布局得一种，小程序明显是一个网页，但通过技术的一些嵌入和一些接口或者缓存的方式的操作，让用户在使用的时候感觉小程序就是一个APP，但核心技术还是web网页。

1.3 如何应用设计响应式

响应式的原理是通过定位的方式来做响应式的各种开发，需要在页面中至少标出这十个点：中心点，上下左右点，上左上右点和下左下右点，这几个点其实就代表了做响应式和做布局相应的位置。这样可能大家不容易理解，其实结合figma来看，这些点对应的就是这样（如下图），在figma中的布局点。设计师通过调节图形的布局点，可以做到在页面拉伸时，让想动的元素跟随变化，不动的元素静止不动，这就是响应式的原理。换言之，我们做响应式布局的原理也就是通过figma或者sketch中的布局约束这个功能来实现的。

1.4 响应式和自适应的区别

01、响应式

如下图是响应式的优点和缺点。响应式其实就是只开发一套页面，这个页面兼容三端。虽然做了响应式，但如何响应是需要设计师去设计的。比如我们设计了一个移动端界面，然后全部做好对应的自动布局，再进行页面拉伸，内容随之会发生变化，比如当拉伸到1024*768的时候，也就是iPad的尺寸，就会发现局部在设计上有些不合实际情况，这时就需要设计师在对应尺寸的设计稿上进行内容上的微调，比如按钮不可能那么长，就把按钮设计的短一点。当继续进行拉伸到1440网页的宽度时，然后再酌情针对网页尺寸的呈现样式，局部进行尺寸的调整，比如文字和按钮被拉伸到网页版都需要居中对齐，电脑端的样式就需要设计师重新排版了。

通常在B端系统，设计师需要做响应式设计时，往往是从大往小做设计，这也取决于这个B端产品是否需要进行移动端的设计，《B端设计总概二》中提到过什么情况下进行设计B端移动端。如果需要设计B端移动端，就需要我们将网页改成移动端设计，比如B端的侧边栏导航在拉伸到移动端时，就会变成用一个折叠悬浮的iocn来替代等等这样设计上的改变。在figma中，做三端拉伸时候，可以用断点插件来进行演示，通过对断点插件的设置，就可以完美的看到页面在三端不同情况的适配呈现，断点插件用来做演示非常方便。

02、自适应

如下图是自适应的优点和缺点，其实就是一个项目开发三个页面，分别做定制设计，网页端、移动端和Ipad端。

2.1必读前言

我们都知道2021年也就是今年是我国新基建的元年，十四五规划2035远景目标里提到重点发展传统企业数字化转型，尤其是今年我们设计师更能深刻体会，C端和B端已经是完全两个不同的行业，C端发展近十年，已经很难再做到创新上的突破，该做的功能和创新都已经做了，而B端这片蓝海才刚刚开始发力，很多企业也都在考虑B端系统的搭建，降本提效率成了很多公司新的指标，因此数字化转型重点在于B端系统探索，B端重点在于中台的搭建！设计师通过设计中台，构建出基本的业务类型，再分类到业务中，构建出不同的业务界面，所以设计中台非常关键，很多公司经常会用这两个系统去构建，Antdesign和Elemnet就是设计中台，我们会发现用Antdesign可以做出很多的系统，那怎么进行设计中台的设计呢？和我们设计师有什么样的关联度呢？带着这个问题，我们深度探索B端设计中台的落地！

2.2 中台的概念及作用

概念：中台是互联网的术语，一般应用于大型企业，中国互联网的变革永远是从大型互联网开始，大型互联网公司引发了技术的变革，这也是中台的兴起，一般指搭建一个灵活快速应对变化的架构，快速实现前端提的需求，避免重复建设，达到提高工作效率目的。

作用：降本提效。如果没有组件库，普通设计师一天最多做十个页面，再多就不太可能了，如果有组件化得产生，一天可以做一百个左右的界面。在面对B端系统这样几千个页面的巨大的工作量前，组件库的作用尤为重要。但如果落地，就需要前端工程师的密切配合，因为设计师设计的组件只是一个样式，而前端需要把组件进行代码化，所以组件一定是代码化的，也就是说只有代码化的组件才是真正的组件。所以视觉组件的复用，和前端代码的复用，可以大大提高设计师的工作效率。

2.3 设计中台的构建过程

2.3.1 基本库建立

基本库指的是一些色彩系统、字体系统、图标系统、栅格系统、间距系统等等，之所以强调系统两个字，有系统就要统一规则和统一规范，然后进行调用应用在系统中的各个地方，比如我们想调用一个颜色，不是去随选用一个颜色，应该严格的从色彩系统中去调用，如果系统组件库里没有这个颜色，我们也绝对不可以使用，可以先用替代色做或者根据业务再进行补充颜色进组件库为了后续的调用，这是一种比较严谨的使用方式。所以在建立组件库的时候我们要考虑全面，组件库中如果没有相应的组件，我们应该试着反推一下，是否要加进组件库中去，来进行系统的调用。在做中台的过程中，我们一直使用Antdesign，我们对组件的名称，组件的分类其实一点都不陌生，其实Antdesign也在借鉴国外的Bootstrap组件库（大家感兴趣可以下载Bootstrap组件库进行查看），所以并不是Antdesign组件库形成了一定的规则，它也是在沿用别人的规则，而这些规则也需要不断的有大公司去继承出来，所以慢慢衍生出来现在这样的组件库，那中台设计，首先要搭建基本库，把基本库里的基础一些系统搭建好后，我们继续去做扩展库。

2.3.2 扩展库建立

如下图，扩展库中包含了很多内容，比如分了四类，导航系统，数据录入，数据展示和反馈系统。其中导航系统又包含了，面包屑导航、下拉菜单、导航菜单、顶部导航等等，包括后面的数据录入、数据展示、反馈系统也包含了很多内容。我们做这样的扩展库，也不需要做成像Antdesign的组件库里包含的那么多，或者和新出得字节Arco组件库，因为它们面向的是系统级的解决方案，各行各业都可以用它，它面向的是一个大系统，也许我们只涉及到了其中的20%，因为也没有一个系统能用到它所有的组件，所以我们自己在设计组件库的时候，一定是按照我们自己项目的范围去做组件库，而不是做一个大而全的，大而全的组件库对我们也没有意义。它们做的是公共平台，而我们要做的是一个专属平台。

2.3.3 方法库建立

形成完基本库和扩展库后，第三步是建立方法库。方法库告诉我们的是什么时候用，比如我做了一个多选框，这个多选框应该什么时候用，是不是只要遇见一个选择就去用多选框，肯定不是，应该加以说明什么时候用这个多选框。类似于是组件的设计说明。

2.3.4 案例库建立

最后再做一个案例库，最佳实践库，具体组件什么时候用我们知道了，接着案例库就是在告诉我们应该如何正确的使用，或者说的方法是什么。比如标签的左对齐和右对齐，这种情况都对，什么时候用顶对齐，什么时候用左对齐，什么时候用右对齐呢？那么根据眼动仪实验数据数据来看，并且结合给出一些工作中业务中的最佳实践得案例放进去，给使用的人去做指引。

所以设计师做的事情，不仅仅是应用组件库和创造组价库，还应该指导其他设计师，指导开发人员在去复用每个页面组件的的时候，应该怎么正确的使用，这也是在B端设计中一个关键的环节，同时我们的视觉系统一定也是和业务有关联度的，所以在B端中做设计一定也不会脱离业务去做，我们一定要联系到实际的业务场景中，这个业务场景指的就是业务和视觉的结合，在做C端的时候，业务场景一定不会比B端多，C端的业务场景大多是定制化的业务场景，它要求的是个性化，不要求通用，尽量得个性化，比如图标、按钮、页面，而B端需要统一化，中台组件库的落地，可以大大提高设计师的工作效率和开发人员的协同效率，严谨的调用组件使用组件，可以使得系统页面保持高度的一致。

2.4 认识格式塔原则

2.4.1接近性

如图1：可以看出纵列的关系更紧密，因为纵间距小于行间距。

如图2：可以看出行间距大于列间距，它得横向关系更加紧密。通过图中这样的视觉设计为什么会感觉间距更加紧密呢？这属于用户心理学的应用，如果元素相邻的更近，元素之间的关系就会更加的紧密。

如图3：如果元素相邻的关系都是保持一样的，那么它们的关系是相对对等的。

由此可以得出结论，如果相邻的关系越近，它们的关联度就越近，如果相邻的越远，它们的关联度就越远。

应用案例：如图4卡片中得标题和内容，设计中把标题和内容进行区分，所以我们会做大量的留白，这样的留白就会让信息结构具有层次感，层次感就是指它们信息结构的关联度，如果想让它们有关联度，就让它们距离近一点不要做区分，如果不想让它们有关联度，或者关联度出现一个等级的区分，那么就可以加一条线，让它们之间的关联度分隔开。这就是格式塔接近性的应用。

2.4.2 相似性

如图5：如果去区分右边的形状，通常我们会根据形状进行区分，因为人的潜意识会认为相似的形状会更有相关的分类性。这就是格式塔中的相似性原则。

应用案例：如果文字的标题大小是保持一致的，包括它有统一的大小，统一的色彩，统一的字号，那系统中的其他同样功能的地方，都应该用统一的文字，这就是格式塔相似性的应用，比如图标也是一样，只有用了相似的图形大小，相似的颜色，在相同的位置，用相同的图标进行表达，图标之间的设计才具有相似性。

2.4.3 主体与背景

如图6：可以看到有一个L，是主体与背景进行了区分，如果在设计的时候让L看的更加明显，我们采用的办法就是将主体的色彩或者形状变的更加独特，或者将背景的颜色变得更加分明，这样就可以做到那个L看的更加明显。这就是主题与背景区分原则。

应用案例：比如警告弹出，可以用色彩去区分，目标就是让用户看的更加得清晰，当警告的时候给用户一个警告的信息，当成功的时候给用户一个成功的信息。还有类似对话框的弹出，采用背景变暗和加阴影的方式，都使用到了格式塔的主体与背景变化关系的原理。因此应用在我们设计系统中，前景和背景进行区分的时候，我们就可以通过色彩进行区分，色彩的区分要保持统一，比如背景色彩透明度50%同时加一些背景模糊，其他的背景也需要保持一致，阴影也是一样，如果把阴影放在一个平面上，距离平面越近，它得阴影越短，距离平面越远，它得阴影越长，这也是阴影的层级关系。

2.4.4 封闭性

如图7：可以看出这是一个四分之一的圆形。

如图8：这个图可以看出是一个五角星。

封闭性应用案例：当一个形状被另外一个形状或者被另外一个色彩阻断的时候，并不影响人们对这个形状额外得认知，一定会脑补出另外一个形状，这个原则和我们UI的关系是什么呢？比如一个loading，半圆一直在旋转，或者图表中的圆占比，我们就可以判断出谁大谁小，谁多谁少，判断出当前的进程和位置，封闭性原则通常应用在图标的设计，图表的设计和步骤条的设计中。

2.4.5 连续性

如图9：可以看出用一些简单得形状来体现，其中三角形具有明显的指向性，三角形箭头指向右边，上面五个是一组，可以看出它们具有连续性；另外一组三角形箭头指向右下角，可以看出它们是连续的一组。不同的形状会有连续性，箭头也特别有指向性，这就是为什么返回和前要进放在不同的位置，当我们的数据需要有连续的时候，我们也要使用相似的形状来表达，这就是连续性原则的应用。

同理如图10：连续性一定是要有连续等阶的变化，从左上角开始，向下和向右我们可以看出有明显的颜色连续等阶变化，通过色彩的透明度也可以做到连续性。

2.5 组件的命名规则

2.5.1 如何正确的命名

很多公司或者不同公司有不同的命名方式，这个需要和团队开发提前做沟通，主要以方便开发习惯操作为主，如果不命名也不能非得说成是错误的，命名可以理解成是一件锦上添花的事情，因为一切都以效率优先，命名自然会影响工作效率，通常情况，组件的命名可以分成组件的名称、级别、尺寸、状态，这样的命名顺序来进行，这样命名开发使用也比较方便，因为是按照了开发的统一规则来进行命名的。如图所示：

2.5.2 更多命名英文词汇

当英文不好的时候，推荐大家记常用组件英文名，以及常用状态名、级别名、内部名、尺寸名和位置名，那这些英文也几乎涵盖了工作中80%的英文词汇，收藏记忆哦~

文章来源：站酷   作者：飞鱼十七

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

“复杂是世界的一部分，但它不应该令人困惑，好的设计帮我们驯服复杂，不是让事物变简单（如果复杂是符合需求的），而是去管理复杂”--唐纳德·A·诺曼

与复杂共处，这是一个有趣的话题。在这个奉行“少即是多”的时代，设计师对于复杂噤若寒蝉，认为优秀的设计应该简洁明了，若无必要，勿增实体，而复杂则常备被视作失败设计的标签。设计师为了保持设计上的简约挖空心思，甚至试图通过削弱功能的方式来降低产品的复杂度，得到自己想象中的完美设计。然而一味追求“简单”的设计真的符合用户的实际需求吗？从心理学的角度来看，复杂的事物往往功能强大，而功能强大意味着更好的服务与更高的价值，用户也更愿意为之付费。当我们购买商品时，我们会仔细斟酌，拿着产品的功能列表反复比对，这个时候我们忘记了产品复杂与否，更多考虑的是功能是否满足自身需求。

对于大部分B端产品而言，复杂或许难以避免，复杂是出于实实在在的业务的需要，而非某位设计师的错误喜好。B端产品之所以给人感觉会相对复杂，是因为产品需要完成复杂的工作任务，界面内承载的信息内容较多，在视觉上会带给用户压力，直观感受上觉得产品很复杂。但是这些信息又都是必需的，如果缺少这些必要的信息，会对用户理解和使用产品造成阻碍。就如同飞机的驾驶舱，密密麻麻的按钮如此复杂，但是每一个按钮都有着相应的功能，不可或缺。既然复杂难以避免，那么作为设计师我们不应该被动接受或盲目拒绝复杂，我们应该学会如何与复杂共处，去尝试驯服复杂、管理复杂。

理性看待复杂

相信很多设计师和我一样，经历过现代主义浪潮的洗礼，对于简约的设计有着或多或少的偏好。因为这种偏好，在自己进行设计时也希望能够选用这种风格，在设计时刻意的去追求界面简约，却忽略了界面上的简约不等同于产品易于理解和使用。从心理学的角度上看，复杂的事物更容易理解，简单的事物反倒令人困惑，一味的追求简单反而会让事物变得复杂。

B端产品的目标是降本提效，追求简约的设计思想在B端产品的设计中并没有那么适用，为了提升用户的操作效率，我们需要将一些能够帮助用户理解的信息与常用的操作直观的展示给用户。这会在一定程度上增加界面的复杂度，但是相较于产品视觉界面会因此变得复杂，产品的易用性和操作效率对于B端产品而言会更为重要。

与复杂共处的前提是能够理性地看待复杂，复杂本身的含义即非褒义也非贬义。复杂描述的是事物的状态，它在词典上的解释是拥有很多即错综复杂又相互关联的组成部分的事物。产品复杂与否是由产品本身所从事的业务和需要完成的任务来决定，就像我们不能要求一个做机械结构设计的工程软件做得像一个图画板一样简单，因为两者的功能需求不是一个层面的，所以我们也不能单纯的将产品简洁还复杂作为评判一款产品优秀与否的标准。

分清复杂与困惑

我们之所以对复杂怀有畏惧，其实更多的是畏惧令人困惑的复杂，复杂与困惑有着本质的区别，理解他们之间的区别很有必要，复杂描述的是事物的状态，而困惑表述的是用户使用产品时的心理。复杂的背后可以拥有规则与逻辑，理解这些规则和逻辑，能够帮助我们理解和使用产品。而令人困惑的产品往往缺少这样的内在规则与逻辑，用户难以理解产品的运转机制，需要花费很大力气才能完成有效操作，容易让用户产生挫败感。产品可以是复杂的，但是不应该让用户困惑。

在很多复杂的传统线下业务数字化转型的过程中，为了让产品易于使用，设计师需要深入到一线，去了解真实用户在线下业务场景中是如何处理日常任务的，在流程线上化过程中也需要遵循这样的业务流程，这样能够让用户更快上手，而如果我们在设计过程中不去参考用户在线下的操作场景，按照自己的想法去意测用户的行为，这样设计出的产品背离了用户的心理模型，缺乏内在逻辑，会让用户感到混乱困惑，陷入深深的麻烦。

基于产品本身功能需要，我们可能无法很主观的去降低产品的复杂度，这就需要我们在进行产品设计时花费更多的心思，通过对业务流程、页面布局、信息呈现上的调整与设计让产品变得清晰，不让用户陷入困惑。如下图的关于表单编辑器的A\B两种设计，用户在编辑器内完成一系列针对表单的编辑、配置操作，然后发布表单。方案A中将这些表单编辑配置项通过tab进行排列，这种方式结构简单，但是扩展性较差，过多的栏目也容易让用户陷入困惑，不清楚需要完成哪些配置项才能进行发布。方案B中采用了步骤导航加侧栏导航的双层导航结构，在步骤导航上给出完成表单编辑配置的主要步骤，在大的步骤下用侧栏导航承载小的编辑项，结构清晰，且能够对用户编辑表单提供一定的帮助指引。虽然两种方案信息内容上都一致，视觉观感上甚至方案B更为复杂，但是方案B在这里可能是更合适的方案，因为方案B在配置流程的指引上更为清晰，也更贴近用户心理模型，即使没有使用过在线表单的用户也能理解产品流程，因而用户能够更容易的完成表单配置并发布表单。

功能决定产品的复杂程度

我们在使用产品时，都会有一个大概的心理预期，会认为某一类型的产品会较为复杂，某一类型的产品会相对简单。为什么我们会有这样的认知呢？是因为我们知道这些产品大概有哪些功能，而这些功能就决定了产品的复杂层度。产品的复杂程度由产品的业务与功能决定，而不是依照设计师的自我喜好，像如淘宝、京东这类的购物网站、拥有着很多的栏目，所以淘宝、京东的界面相对来说较为复杂；而像百度这样的搜索引擎功能相对来说比较简单，所以界面设计相对简单干净。

我们可以容许一个功能强大的产品设计得相对复杂，但是一个功能简单的产品设计得复杂难用就是一个灾难。作为设计师我们需要根据产品的实际需要来进行设计，即不过度设计，也不执着于追求简约，而是基于需求恰到好处的进行设计。

复杂产品也能有好的体验

复杂的产品会有好的用户体验吗？答案是肯定的，用户体验的好坏与产品是复杂还是简单并没有直接的关系，很多时候复杂的产品也能带给我们良好的用户体验，在互联网产品中，我们可以看到很多复杂的产品，这些复杂的软件产品，一点点的改变着我们的生活与工作方式，让我们生活与工作变得便捷与高效。

首先可以看看我们的国民级电商应用淘宝，乍看淘宝的界面，可能会觉得十分复杂，甚至会给人一种眼花缭乱的感觉，但是包括我在内的许多人仍然十分喜欢逛淘宝。淘宝内除了有本身的淘宝、天猫店铺外还有专做海淘的天猫国际，做社区团购的淘鲜达，专做拍卖的阿里拍卖等数十个板块，业务繁多，功能复杂，但这几乎很难改变，因为之所以做这些业务和功能背后都有着商业上的考量。从交互设计的角度看，虽然淘宝的业务和功能繁多，却有着清晰的布局、信息对齐、内容组织，产品尽管复杂，但并不令人感到费解和困惑。购物流程也与用户在线下购物流程相仿，贴近用户的心理模型，用户容易了解产品功能、容易与之交互，整体上有着良好的用户体验。

又如我一直在使用的一款笔记软件Notion，Notion相对于印象笔记、有道云笔记而言更为复杂，需要花费一定的时间成本学习才能够从容上手使用，但是这并不妨碍Notion被众多使用者所追捧。Notion的很多功能在使用之前，甚至都不会想到会出现在一款笔记产品里面，如甘特图，多维表格等，这类功能一般出现在项目管理类软件中。而Notion块结构的布局模式，让笔记能够自由拖拽，拥有了极强的自由度，用户可以很自由的用各种各样的形式来记笔记，要是你肯再花一些心思，你甚至可以在Notion内搭建一个个人专属网站来记录的学习知识，打造个人专属知识库。将我们习以为常的线性笔记思维，转变成纵向思维，甚至是网格状思维。Notion无疑是复杂的，但是这样做是为了给用户提供的强大功能和极高的自由度，这些功能恰恰也切合了用户的需求，创造了一种全新的笔记体验，带给用户愉悦的使用感受。

过度简化的潜在风险

简单是产品追求的最终形态吗？其实未必，很多时候产品设计的过度简单反而会给用户带来麻烦。为了追求简单的设计，不可避免的就需要隐藏一些信息或者拉长操作路径，这是一个权衡的过程，我们在做设计时也会经常面临这样的抉择，是追求视觉上的简约美观还是信息传达准确性与操作上的效率。给用户一个简约美观的视觉感受无疑很重要，人们对于美的事物往往更有耐心，也更愿意去探索。但是对于一款针对B端用户的效率软件、办公应用而言，准确的传达信息，帮助用户进行判断，频繁使用的功能设计得更高效便捷，这些点能带给用户更实际价值，也是我们在设计产品时应该优先考虑的点。

特别是在一些专业性的软件中，如果我们为了追求简约而弱化或者省略掉一些关键信息，还有可能会导致用户错误操作的出现，造成严重的后果。试想一下当你在使用软件编写一个计算字段时，软件提供给你了计算公式却没有就近给你提供计算公式的解释和用法示例，导致你因为书写上的不规范使得计算结果频繁出错。这时你可能会满怀愤怒的抱怨为什么产品会如此难用，为什么不能配置过程中给到更多的反馈与帮助信息来减少配置错误的发生。

如何与复杂共处

前面我们了解了关于复杂的定义，认识了复杂与困惑之间的区别，也明确了在B端产品中复杂或许难以避免，复杂是出于实实在在的业务的需要而非某位设计师的错误喜好，既然复杂无法避免，我们就应该学会与复杂共处，管理与驯服复杂。那么如何与复杂共处呢，有一些策略或许可以给予我们一些思路。

1.为产品注入规则

复杂与困惑的本质区别在于复杂的背后隐藏着规则与逻辑，而困惑缺少这样的规则与逻辑，让人无法预测与揣摩，对应到软件产品的设计，一款成功的优秀的软件产品，应该是易学易用、能够满足用户预期，用户能够直观的理解产品的流程与主要功能，并通过产品实现自己的目标。那么具体到软件的设计上我们应该怎样做呢？

这里可以看看我们团队正在使用的研发管理工具TAPD，TAPD是一款敏捷研发协作工具，凝聚了腾讯研发方法及敏捷实践精髓，其中敏捷开发的方法就是TAPD的内在规则与逻辑，有过敏捷开发经验，理解敏捷开发流程的的开发人员能够快速的上手使用TAPD，对于不了解敏捷开发的开发人员也可以通过产品帮助中心学习敏捷开发思想，进而理解产品的功能与流程，因此虽然TAPD功能与页面结构相对复杂，但是基于对敏捷开发的认识用户还是能从产品复杂的功能界面中摸索出一条操作路径，实现自己的目标。这就是产品拥有内核思想以后能够带来的直观好处，将原本零散的功能点通过特定逻辑链接成操作流程，帮助用户更好地理解与使用产品。

相同的在我们公司自己的一个项目中我们也运用了同样的方法，在我们公司之前研发的一款crm产品中，为了给用户提供最佳的销售实践，帮助用户更快上手使用我们的产品，我们在设计产品时寻找了硅谷蓝图团队做了顾问咨询，并依照硅谷蓝图的销售转化路径来构建我们的产品体系，确定产品功能，梳理产品中的业务流程。并希望在以后为客户做实施的过程中能够将硅谷蓝图的销售方法一起带给用户，让用户能够更好地使用我们的产品，实现产品的最高价值，为中小企业销售团队赋能。

通过前面两个案例其实我们可以感受到，当一款复杂的产品有了内在的规则与逻辑以后，用户理解和使用我们的产品会变得更顺畅，用户不会迷失在茫茫的功能之中，通过理解规则与逻辑，用户能够对自己操作结果有一个大概的预期，而不是处于困惑状态，作为设计师的我们也可以将这种规则逻辑作为我们设计的引导，让我们的设计更为系统和有条理，让产品不再是一堆功能的堆叠，各自为战。

2. 贴近用户心理模型设计

复杂是用户的一种心理感受，用户觉得产品复杂除了产品本身结构信息复杂之外，也是因为产品在设计上没有贴合用户的心理预期，用户很难理解产品的流程与交互，所以贴近用户心理进行设计就显得尤为重要。这里我们需要先了解三个概念，实现模型、表现模型和心理模型，三个概念的释义如下：

实现模型：产品是怎样工作的
心里模型：用户认为产品是怎样工作的
表现模型：通过设计来让用户认为产品是怎样工作的

表现模型越接近心理模型，用户就越容易了解产品功能、容易与之交互。表现模型越接近实现模型，用户越难理解产品，产品就越难使用。复杂产品在用户体验过程中的痛点在于用户需要花费时间学习或培训之后才能了解产品的运转机制，很多B端产品在设计时更多的偏向于实现模型，用户在使用产品的过程中会发现很多地方的交互和自己心理预期并不一致，使用过程中会遇到很多的阻碍，影响整体的使用体验。对于一款复杂的产品而言，我们需要让我们产品的表现模型更接近于用户的心理模型，这样用户能够更容易了解产品的功能，并与之交互。

大家使用电脑时有没有遇到过类似下图这样的电脑报错信息，里面是一堆的专业名词，看得人一头雾水。这时候我们能做的只有默默的打开百度，去了解弹窗里面讲的内容究竟是什么，了解后才明白原来这样，然后按照百度上操作步骤一通操作，侥幸解决了问题。但是当下次我们遇到相同问题时，可能还是不知道如何解决，无可避免还是需要求助百度。这个就是表现模型贴近与实现模型会带给用户的困扰，用户不是专业的开发者，他们不了解也不需要了解产品背后的实现逻辑，这对用户而言是没有价值的，给予用户这些信息不能对用户起到预想的帮助作用。贴近实现模型进行设计会让用户与产品交互变得困难，变相的是在人为的增加产品的复杂度，与复杂共处，我们需要学会贴近用户心理进行设计。

3.统一交互模式

复杂的产品往往功能、页面繁多，如果页面内的视觉元素以及交互各自为战，那么放大到整个产品就是一个灾难，不仅是产品给用户感官上不统一、整体性差，过多的交互模式也会增加用户的学习与记忆成本，用户在这些相视功能但是不同的视觉与交互的模块之间容易陷入困惑，对用户使用产品造成困扰。针对这个问题，现在越来越多的公司开始通过搭建组件库的方式来规范自家产品内的视觉与交互，一个规范完整的组件库的确能够在很大程度上解决产品在视觉与交互上的一致性问题，通过模块化解决方案，也能降低冗余的生产成本，实现产品快速开发。因此很多人也认为搭建好组件库就能一次性的解决产品体验一致性问题，但实际上就算一个产品有了一个自己的组件库，依旧还会遇到体验上统一性问题，这是为什么呢？

在原子化设计理论中，粒子是构成页面的最小颗粒，粒子构成简单组件，简单组件到复杂组件，再到区块、页面。虽然用组件能去构建页面，但是还会遇到页面结构、交互不一致的问题，设计师各自使用组件去搭建并不能提升我们的效率和解决设计一致性的问题，在末端设计并没有做到约束。因此我们在构建好组件以后还需要继续抽取出了页面级的组装结构和交互模式。

这里我们拿B端产品中常见的列表页来举例，纵观所有后台列表页面，抽取后无非就分为这么几个区域。不同的业务可以通过基础组件和样式定义符合自己业务线的子模块。比如列表页中的筛选区，在不同的业务场景下，对筛选器的需求也各不相同，简单的可能只需要使用标签选择就能够完成筛选，复杂的可能添加很多的筛选项甚至选项之间还有且或关系，我们需要根据实际的业务场景设计适合的筛选器，但是需要注意的是一个产品中用到的筛选器形式不应太多，我们需要抽取归纳出三四种筛选器形式去覆盖我们产品内所有的筛选场景。来保证产品内不会出现各种相识却有各不相同的筛选器。

B端后台产品中比较常见的还有表单，我们可以归纳出产品内可能会使用到的表单类型，然后定义出具体的框架结构与交互，在具体的设计过程中在根据实际情况选用不同的表单区块。

1.分组表单

一种常见的信息录入以及信息展示表单，这种形式是我们最长用。

2.分步表单

分布表单适用于信息录入项以及信息展示项过多，在一个页面内已经不能合理清晰的组织传递信息，或者表单内容的录入方式或者展示方式存在较大差异，不适宜在一个页面内进行展示时。按照布局的不同也可分为横向步骤和纵向步骤两种。

3.组合表单

组合表单因其结构能够承载更多的信息，每一个栏目都可以承载一个独立的表单页，有效的管理信息。

4.弹窗表单

很多时候我们也会用弹窗来承载表单，好处是交互衔接流畅，不用跳页。

将产品中类似的区块做成最佳的交互模式范例，能够最大的程度的规范我们产品中的交互，这样才能真正的实现产品体验上的统一，化繁为简，让复杂的产品也能够调理清晰，上手简单容易。在面对复杂的系统级软件时，在统一组件样式的基础上还应该统一产品内的交互模式。

信息归纳突出重心

复杂的产品页面内信息往往都特别繁多，如果不做好信息归纳，用户将很难把握住重点内容，信息获取效率低下，十分影响用户的使用体验，所以信息的强弱的整理十分重要，那么什么样的信息是对用户而言重要的信息呢？

信息设计大师爱德华·塔夫特认为优秀的视觉设计应该是“将清晰的思考视觉化”，他还认为只有充分理解观看者的“认知任务”及一些设计原则才能设计出优秀的产品。

如何找到对用户真正重要的信息需要借助到产品设计中一个十分重要的工具--用户模型，通过调研的来得用户模型是对于我们产品客户的抽象归纳，通过用户模型我们可以确定哪些功能对于用户而言是高价值的重要内容该重点突出，哪些内容相对不是那么重要可以弱化处理，通过对于页面内容强弱的划分，用户能够更快的获取到对自己有用的内容，尽管页面仍旧复杂，但是信息划分合理、层级清晰、表意明确的页面人就能够带给用户良好的用户体验，帮助用户高效的处理任务。

说在最后

复杂是产品的本来特性，本身不含褒贬，但是如果复杂不加以控制，让其发展为困惑与混乱，这对于一款产品而言绝对不是一件好事情，这样即使产品功能上很优秀，用户也无法长期忍受，一旦市场上出现替代产品，那么忍受已久的用户也将抛弃产品转向体验更好的新产品。

曾经我也是一个极简主义的追捧者，但是经历过越来越多的设计项目，我开始发现某些产品复杂性是必需的，将产品做得简单并不是其核心诉求。真正需要处理的问题也不是复杂，而是混淆的状态和由此产生的无条理性。解决的方法不是简单的去除几个界面元素，让其在视觉界面上变得简洁干净，而是要让产品拥有内在规则、一致且能够被理解。

文章来源：站酷   作者：Yone杨
分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

具有大量库存商品，或是涉及复杂产品的网站，通常会提供产品类别页面，或者是产品列表页面。 类别页面就像是特定产品类别的主页。他们可能不提供完整的产品列表，但可能会展示一些产品并提供产品子类别的链接。这种页面本质上是用户在进入产品列表页面的过程中经过的一个中间步骤，让用户不用一下子面对海量的分类信息。

Eddie Bauer 在其全局导航中， WOMEN 链接将用户带到了这个传统的类别页面。这些页面通常包含产品照片和营销内容，以及促销子类别（例如SHOP FLANNEL 和 SHOP FLEECE ）的链接。

类别页面通常提供以下组合：

• 类别的描述、解释及其包含的内容
• 带有描述和代表性图像的子类别菜单
• 推销该类别中的特色产品

并非所有产品都需要专门的类别页面。 不过这种情况有时候会让用户非常恼火，因为用户需要通过额外的步骤才能查看特定类别的产品。

许多网站完全省略了类别页面，而是将用户直接引导到产品列表页面，在那里他们可以借助过滤筛选的方式来浏览产品。

Bonobos 网站上的 Pants & Jeans 链接不是类别页面，而是将用户直接带到产品的列表页面。这种方法通常效果很好，因为它尽快向客户展示了他们可选的选择。

虽然本文偏向于电商网站中的类别页面的探讨，但实际上这些页面也用于其他类型的网站，特别是新闻资讯和教育类的网站。这些建议也可能适用于这些情况，但最好根据领域对你的设计进行测试，以防你的用户需求与购物型用户的需求不同。

何时使用类别页面

如果您的电商网站所涉及的产品非常复杂，以至于您的许多客户需要经过学习之后才会使用，才能正确地过滤和比较产品，那么类别页面就是一个好主意了 。此外，具有 大类别和大量子类别的网站，有时会提供某种类型的独立类别页面，以帮助用户找到有意义的起点。

不过，你可以决定让特定的产品具有类别页面，而其他的则不具有独立的类别页面。例如，Lululemon 主打的健身服装产品（大多不需要分类页面），同时也销售一种名为 MIRROR 的昂贵的家庭健身产品，后者需要更详细的解释，因此有自己的分类页面。

Lululemon 为其复杂的家庭健身产品 MIRROR 提供了一个单独的类别页面，但并未为其所有产品类别使用类别页面。

阐释复杂产品

类别页面可以对电子产品等复杂产品起到解释作用 。如果用户还不了解产品选项，他们可能还没有准备好单击单个产品。与随机点击不同的产品相比，类别页面为他们提供了一种更有效地了解各种潜在相关产品功能的途径。

例如，智能手表通常会有不同的功能和价格范围，著名智能手表品牌 Fossil 在自己的网站提供了一个类别页面，列出了不同类型的智能手表，并提供「立即购买」、「了解更多」 以及「比较」的选项。

Fossil 的 智能手表分类页面解释了不同型号的智能手表的功能和性能差异

子类别的特征

购物型用户可能不需要通过网站来学习服装或食品等熟悉商品的内容和知识。然而，一个拥有大量产品和内容，并组织成许多子类别的网站，仍然可以从类别页面中受益——尤其当子类别页面可以通过独特的图文清楚地介绍产品的时候。这比一长串标签文本更容易方便用户了解产品，此外它还可以为国外的购物者提供帮助。

REI 销售用于各种户外活动的许多产品，从皮划艇到登山用具。如果点击网站的全局导航中Camp & Hike 链接之后，页面跳转到一个包含所有露营产品的列表面，用户可能会不知所措，而且无趣。相反，REI 让链接指向到一个传统的类别页面，而不是列表，这个页面包括：

• 子类别 (帐篷, 睡袋 , 远足)
• 该类别中最受欢迎的品牌（Osprey、YETI）
• 与类别相关的季节性信息（寒冷天气徒步旅行）
• 建议（如何选择睡垫、食物储存和处理的技巧）

REI 使用传统的类别页面来帮助购物者在庞大的 Camp & Hike 类别中找到适合自己的产品。

不要强迫客户浏览类别页面

如果你的网站确实提供了传统的类别页面，请同样为用户提供了避免进入这些页面的简单方法，并在他们愿意时，也能直接转到产品列表页面。为你的站点的全局导航，提供指向子类别产品的列表页面（比如使用超大导航 Megamenu ），以及指向传统类别页面的链接。

可能还需要确保搜索结果始终指向产品选项，而不是将购物者引导到类别页面。在我们的研究中，Zappos 会将某些搜索结果指向到以品牌为中心的类别页面，而不是链接到该品牌的产品。

在用户测试的时候，一位参与者看到孩子后很生气，因为搜索她最喜欢的品牌 Sam Edelman 时，她进入了一个具有促销感的传统类别页面，而不是指向她要的产品。对她来说，这感觉像是一个不必要的额外步骤。

「当我进入 Sam Edelman 时，我想看到结果。我不希望打开一个品牌的分类页面。」

当用户在 Zappos.com 上搜索「sam edelman」时，她很恼火地看到一个没有列出任何单个产品的品牌类别页面。

当用户搜索时，他们希望立即看到结果。

混合：在产品列表页面上提供类别信息 

为了避免传统的类别页面的缺陷，并提供对产品列表的快速访问，许多电商网站现在在主产品列表页面中，结合混用了少量的类别有页面的设计——例如简短的描述性内容，或简短的子类别菜单。

在女士紧身裤 产品列表页面上，Lululemon 包含了一些传统会在类别页面上显示的元素：营销内容（蓝绿色框标注的区域）和对不同紧身裤样式的解释，以及指向这些子类别的链接（以黄色框标注的区域）。

这种混合呈现方法效果很好，因为对描述或子类别菜单感兴趣的用户可以暂停并阅读它，而不感兴趣的用户可以简单地跳过，直接快速访问实际的产品列表。

说明内容

一些电商网站在 产品 Banner 旁边加入营销的内容和元素，这些元素传达有用的信息而不会减慢用户的速度，就像传统的类别页面一样。

高级珠宝零售商 VRAI 使用混合式设计，在一些产品列表页面中包含类别页面样式元素。它的一个产品列表页面当中，圆形订婚戒指页面中，包含了带有价格的产品列表，以及解释性的内容。顶部的文字描述了此类产品的一般特征。侧面板提供了有关该类别中所有产品共有特征的说明，以及更多详细信息。

在这个列表页面中，VRAI 包含了促销内容（以蓝绿色框标注）和说明性内容（以黄色框标注）。其中所呈现的图文内容是典型的传统类别页面的特征（没有产品列表）。

子导航

一些零售类的网站不使用类别页面，而是提供指向产品列表页面上的子类别的导航链接。这些链接（这是最初发明类别页面的原因之一）让用户轻松浏览网站的产品库存。

例如，Ann Taylor 的 裤子 列表页面显示了不同款式裤子的类别，并提供指向该子类别的链接。这些内容直接显示在产品列表上方，帮助用户了解可用类别项目，并且直接导航到这些类别。

Ann Taylor 的网站在 裤子 的列表页面的顶部，加入了不同裤子款式和合身度的说明和图片，以便用户了解其中的差异。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

在数字化的浪潮下，政府希望通过人工智能占据智慧城市的发展先机，推动民生改善及产业增长，这离不开政府和科技公司的紧密合作。因此，科技公司不仅面向To B型企业，同时面向政府或相关事业单位，即是称之为「To G」这种特殊划分。

鲲云科技（以下简称为鲲云）就是这样一类科技公司，他们作为一家技术领先的人工智能公司，以数据流技术为核心，提供高性能低延时、高通用性、高算力性价比的下一代人工智能计算平台和软硬一体化的平台解决方案，加速人工智能技术在智慧城市、智慧安监、智慧制造、自动驾驶等领域的落地。

01.表现层 

1.1 提升视觉精致度

当用户接触一个产品或物品的第一步，永远是外观视觉。固然，企业官网作为互联网产品，优质的官网必然是为它的用户有针对性地服务。虽然访客首先感受到的是网站的视觉设计，但我们不仅要对网站视觉美观与否有所重视，更好的访问体验、更实用的网站功能、更高的网站辨识度，以及通过视觉实现直观的价值传递表达，都需进行深度探讨。

网站呈现给访客的第一印象尤其重要，而网站首屏则会作为传递网站风格及功能的媒介。我们从鲲云的品牌设计理念出发，以直观的视觉形式来体现科技感。

首页Banner质感升级

一个视觉效果好的网站，80%以上是靠优质的图片支撑。我们首先在官网首页Banner采用产品渲染图来呈现鲲云核心产品。首屏的功能性常会被忽视，其实，企业官网附带着商业属性，商业环境下的视觉应该更注重强化产品，满足需求的产品力加持。

为了提升banner的视觉质感，我们对鲲云三款主打产品重新建模渲染，通过主要光源及补光掌握好产品形态，在将产品细节充分展现清晰的前提下，产品暗面加入环境光使整个画面更丰富饱满。

与此同时，完成产品渲染后结合了场景化的特殊版面来营造氛围，使整个画面更具真实感染力。这样一来，当访客来到鲲云官网，一个极具科技感和创造力的鲲云会给访客留下深刻的第一印象。

图标/Icon差异化升级

图标是比文字更容易理解的可视化语言，它对于信息传递十分高效，可以说图标将这个世界结合起来。鲲云图标体系由两部分构成，分别是UI icon和3D icon。

3D icon可帮助访客更简易、高效地理解鲲云两大核心技术的实际属性。UI icon拥有清晰、简洁单色线性的特征，其风格符合鲲云品牌气质，每个图标特征和细节保持一致，在视觉上呈现出更好的统一性。

我们提炼鲲云logo造型轮廓特征、以及根据产品和服务方向进行图形发散，提取鲲云品牌基因，进而使图标实现差异化设计。

1.2 交互动效细节

一个可以给人留下记忆点的网站，往往需要靠一个个精致到位的细节设计，做到让网站最终脱颖而出。可以说，细节是构建起整个设计的基本元素，细节不仅是细节。

科技类产品复杂度较高，只查看技术和产品概念往往会感到枯燥，如何做到直观呈现鲲云核心技术区别于普通技术，还能提升趣味性？

在首页接着往下呈现鲲云核心技术的第三屏中，我们应用柱状图结合交互微动效的方式，将鲲云CAISA芯片与普通芯片进行利用率、性能及延时三方面的对比。

当访客点击查看某一维度对比，可触发柱状图由下至上匀速的位置及渐变色变化，更直观地向访客表明鲲云此款芯片可提供更高的算力性价比的优势，同时引导访客注意力，加强访客与其互动链接。

在网站中较为常用且能保障性能的微动效有四个变化属性：大小、位置、旋转、透明度。这四个属性任何一种或是几种有所变化时，就能达到交互微动效的目的，如果再加入其它不必要的属性，则会影响动效的流畅度。

首页第四屏的四个核心产品展示中，移动鼠标放置各个产品版块触发的微动效，缓动的效果能让版块更自然顺滑，看起来十分舒服和谐，符合访客认知及预期。

1.3 文案升级

我们明确了鲲云官网文案语言要保证表述清晰明了、详略得当，直观地将产品信息及优势传达给访客，便于访客理解且能产生记忆点。

“

关于鲲云

提供下一代计算平台 加速人工智能落地

---------------------

核心技术

数据流创新架构 突破冯诺依曼瓶颈

---------------------

产品中心

自主芯片架构 成就领先的算力性价比

---------------------

应用案例

我们的技术已在多个行业实现规模化落地

---------------------

合作伙伴

携手共创人工智能新时代

”

我们见过不少企业官网文案，都喜欢用抽象的词汇来高度概括产品概念。在我们看来，佐证产品使用真实专业的语言搭配数据内容，可体现出产品专业性的同时，用更真实的力量打动访客。

1.4 移动端兼容

我们利用响应式网页设计构建网页布局，使页面能够更好地适配不同尺寸屏幕，进而使网页体验更适应用户的需求偏好。

02.引导层

官网建设需要遵循“不要让我思考”的原则，这是产品设计中广为流传的一句话。网站作为单向信息传播工具，我们难以左右访客的浏览行为。

我们需确定官网的层级结构，做好访客整体体验的宏观把控，让访客按照我们设想的行为去操作。我们除了必须满足访客基本浏览需求之外，更要主动展示企业核心竞争力的内容，这是最终实现增长的有效途径。

我们从用户分层入手，站在各个访客角色的角度进行审视，使得鲲云官网各版块页面设计上不同的展示区、功能区以及CTA按钮等充分满足访客想看到的信息需求。诚然，各版块信息内容之间存在价值等级，例如知乎的问答会占据首页较大的空间。

根据鲲云先有技术再有解决方案的底层逻辑，我们将鲲云「核心技术」板块放置在导航栏第一位，先有「核心技术」，再有「产品中心」，后有「解决方案」及「应用案例」。

路径1：「核心技术」页面关联「系列产品」

路径2：「产品中心」页面关联「应用场景」

路径3：「解决方案」页面关联「应用案例」

通过设计官网层级结构，结合对访客心智特点的思考和利用，让访客更多行为能够发生在直觉系统的判断中。当然，降低访客跳出率、建立起访客信任都在上述层级结构设计的考虑范围之内。

对于To B和To G产品，企业更看重的是产品本身能否为企业带来价值。鲲云的客户群体角色通常为多层级，他们会从性价比、效率提升、适配企业状况等多个维度进行筛选和考量，本质既是要优化客户效率，实现“降本增效”。

基于这一特点，我们在「核心技术」板块Banner图设计了下载白皮书的「 CTA 行动号召按钮」，并确保CTA颜色对比显眼且目标清晰。

03.品效合一

3.1 为SEM专设了专题页

基于鲲云SEM投放需求，我们专门设计了专属落地页——「解决方案」版块，将官网首页与该广告转化页分开，各司其职。

大家应该多少有听说过，我们可以通过FABE法则和AIDA模型等经典方法搭建出一个优质的网页框架。

一个落地页应该凸显对访客有利的信息，当访客来到广告转化页时，如何快速获得想要的信息，并为他们建立起对鲲云产品的价值认同进而实现转化，这时就需重点打造信息分层。

整个页面采用相对清晰简约的视觉设计，围绕「解决方案」这一核心有层次地规划整个布局及各信息点优先级。页面Banner作为门面，也是整个页面氛围的关键所在，我们将重点信息突出，文案传达简洁有力，图片素材的选取兼顾了鲲云品牌形象，整个页面的营销属性做到尽量弱化。

3.2 转化入口

访客浏览页面时，不一定会经历完整转化过程才会转化，我们设计了及时的行为号召入口，帮助访客在某一节点做出行动时，实现快速转化：

1. 咨询弹窗
2. 右侧悬浮商桥
3. 解决方案资料下载
4. 底部「立即体验」入口

......

行业特性指导整站设计

鲲云面向的客户群不仅是面向To B，同时面向从To B衍生出To G这一种特殊划分。基于这一行业特点，我们在整站设计中有更多精致度和可视化的思考，它不需要五花八门的Banner、会员体系以及炫酷的交互动效。

我们只需要让访客“惯性”操作，制定更符合人性的策略来指导设计，让访客按照我们设想的行为去操作，这是最终实现增长的有效途径。当然，提高转化率是我们引导设计的主要目的之外，降低访客的跳出率、建立起访客信任都在我们网站引导路径设计的考虑范围之内。

增长超人为客户做的从来都不仅仅是一个网站，而是为企业提供从营销策划到落地的一整套互联网解决方案。网站只是一个载体，我们真正的价值在于能够帮助企业找到正确的竞争优势，扭转高成本低转化的现状，实现营收增长。

文章来源：站酷   作者：增长超人
分享此文一切功德，皆悉回向给文章原作者及众读者.

///

它是如何开始的-固定屏幕

在千禧年来临之前，我们首先开始在单一视图屏幕中进行UI设计，这类屏幕在当时最流行的尺寸是640x480。大多数时候，我们甚至没有考虑让屏幕滚动，而是在特定区域或文本局部区块中设置了内部滚动条。毋庸置疑，当时的大部分网页也是用Flash或HTML创建的，并带有用于布局的表格。那是在智能手机出现之前，随着事物的发展，我们经历了第一个向“响应式”设计的根本转变。我们已经走了很长一段路，CSS已得到长足的发展，“响应式”网页设计从2010年开始才真正获得了专有工具。

图表来源: https://www.webdesignmuseum.org/web-design-history

///

它现在怎么样-响应式设计

随着CSS3的发布，我们获得了对“媒体查询”（Media Queries）的访问权限（译者注：随着移动互联网的兴起,我们需要适配多种移动端设备,这就需要用到Media Queries，即“媒体查询”），此后不久，Ethan Marcotte在2009年底创造了“响应式设计”一词。十多年来，我们一直使用“响应式网页设计” (RWD) 创建网页布局，作为一种网页设计方法，仅需基于一种屏幕尺寸进行设计，“响应式”使我们的设计能够适配各种设备和屏幕尺寸。

在早期，当移动电话还不兼容媒体查询或JavaScript时，“移动优先”和”渐进式增强”的概念就成为了非常流行的方法，当时有很多CSS完全不受支持。

用我们今天的话来说响应式设计，我们认为页面的布局要适配整个浏览器、屏幕大小和那些需要投射到整个布局上的限制。当需要设计从桌面端调整为移动设备屏幕所需的尺寸时，我们使用“媒体查询”来更改整个页面布局。

///

它的未来是什么-组件驱动

很快，使用这种“响应式”设计方法可能会被认为与使用表格进行页面布局一样过时—就像我们在90年代所做的那样。

我们通过基于viewport（视口）的“媒体查询”获得了许多强大的工具，但我们也缺乏很多适配的可能性，因为“媒体查询”是一个适用于整个页面的通用解决方案，并且对每个用户来说都一样。我们缺乏响应“用户需求”的能力，也缺乏将“响应式”样式注入“组件”本身的能力。

当我们谈到组件时，这里指的是页面上的“元素”，这些元素可以由其它“元素”的集合组成。例如卡片、横划卡或推荐模块之类的UI内容，每个“块”都由各种更小的“构建块”组成。这些组件拼凑在一起构成我们的网页。我们可以使用 global viewport information（全局视口信息）来设置这些组件，但它们仍然无法拥有自己的风格。当我们的设计系统是基于“组件”的而不是基于“页面”的时，这使得它变得更加困难。

好消息是这个生态系统正在发生变化，而且它正在迅速变化，这需要我们进行一些思维转变：考虑如何设计和定义组件样式以及它们如何适应周围环境。

CSS正在不断发展，“响应式”网页设计的新时代即将到来。从目前的情况来看，自从我们第一次引入 “响应式网页设计” (RWD) 以来，仅仅10多年的时间，这个生态系统已经准备好迎接CSS发生一些相当大的改变。

让我们深入研究一下可以期待哪些类型的变化，这会如何改变我们的设计方法，以及我们如何考虑界面设计。

///

用户能够设置基于个人偏好的“媒体查询”

简单来说，我们可以期待新的基于偏好的“媒体查询”来帮助我们更好地“响应”用户。它们将使我们能够根据用户自己的特定偏好或需求来设定网页样式。这将使我们能够根据用户的体验偏好来调整用户体验。

这绝不是一个完整的列表，但能给你一些想法，这些基于偏好的“媒体查询”可能包括：

这些将帮助我们构建更具活力和个性化的网页体验，专门满足我们用户的专属需求，尤其是那些希望网站易于访问的用户。更进一步说，这些基于偏好的“媒体查询“尊重任何用户已经在操作系统设置的偏好。举个例子，当用户的操作系统偏好设定为“减少动效”时，他们很可能不喜欢你页面上的超级华丽的介绍、加载或飞入的动画动效。我们应先尊重他们的偏好，并为其他人提供“动效增强”的体验。

另一个流行的媒体查询是@prefers-color-scheme（配色偏好设定），它允许我们根据用户的偏好和操作系统中的设置将我们的设计更改为“亮色模式”或“暗色模式”。这不依赖于用户需要手动来更改“暗色模式”，它会自动发生。

///

“容器查询”为你的设计系统注入新的生命力

CSS 中最令人兴奋的新兴领域之一是“容器查询”（container queries），通常也称为“元素查询”。从基于“页面”的“响应式”设计到基于“容器”的“响应式”设计的转变对发展“设计系统”的作用价值不容低估，尽管今天使用它并不安全，但重要的是要了解其发展方向。

简而言之，“容器查询”将允许我们基于“父级容器”而不是整个页面来设置规则。这意味着任何组件都更加独立，与现代设计系统保持一致，真正成为“即插即用”模块，可以转移到任何页面或布局，而且无需根据新环境重新考虑所有内容。

“容器查询”为我们如何规划、设计和构建特定组件提供了一种更加动态的方法，因为组件本身拥有它的响应信息。

甚至Ethan Marcotte自己也表达了为什么“容器查询”如此重要，我们应该研究一下。

///

考虑各种形态因素

由于各种“形态因素”（form factors）的变化和扩展，例如新的屏幕类型，可折叠屏，我们需要“媒体查询”来考虑这些场景。在这里提到的所有内容中，请记住，这是最具实验性的，并且只是一项正在进行的工作，仍在尝试解决我们可能遇到的任何复杂问题，同时考虑未来“形体因素”可能会如何发展。

在可折叠屏场景中，原型中有一些“媒体查询”可以让你定位屏幕跨度以及我们如何让内容根据新环境进行适配。例如，你可以在一个屏幕上放置一个收起的侧边栏（或菜单），并允许内容在另一个屏幕上展开并随页面滚动。

///

为什么我们需要它？

我知道你在想什么，我们已经从事网页设计并使用“响应式”来进行网页设计10余年了。我们对其相当满意，那么为什么要改变呢？如果我们真的以终局视角来看响应式设计，那么它就是关于个人用户的用户体验设计。我们正朝着一个与每一位个体用户高度相关的时代迈进。我们的网页体验应该去适应用户的需求偏好。随着设计系统的发展以及我们如何创建更便携的网页，诸如“容器查询”之类的工具将变得非常有意义。

配图：CSS 将基于各个层级来确定用户的最佳体验

考虑到这一点，这意味着我们现在可以使用基于页面的媒体查（包括跨越屏幕的细微差别）来设计宏观布局；使用容器查询的组件设计微观布局；使用基于用户偏好的媒体查询，根据用户独特的偏好和需求定制用户体验。

对于新的响应式设计，有许多新概念正在被原型化和概念化-请看下面的延伸阅读。所有这些协同工作的方式需要我们从根本上转变我们对设计和用户独特体验的看法。我们需要更加适应这样一个事实：即我们的设计不是静态的，不仅在布局上，还有在用户可获得的体验中，我们需要学会在这种模糊性中做出计划。网页和设计的未来变得越来越复杂，我们需要适应和挑战自己，理解“新响应式”体验的意义。

文章来源：站酷   作者:MEUX
分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

失败的网页设计各不相同，但是优秀的网页设计则有着共通的特点。你需要思考人们想要的是什么，什么东西能够触动他们，让他们欲罢不能，无法忘怀。

听起来似乎很简单，不是吗？取悦用户的关键在于像用户一样思考。并不是每一次创新、每一次重塑、每一种新技术都能让用户愉悦，那些真正易于理解、便于使用、降低难度的技术、设计手法和抓人的视觉元素，才是一切的关键。下面总结的7项秘诀，会让你的网页脱颖而出的。

1、定制化

定制化，或者说个性化，是今天网页设计中最典型的趋势之一。用户希望浏览网页的时候获得更加私人的浏览体验，无论是玩页游还是购物。

看看世界上最著名的那些网站是怎么做的吧。Amazon 为用户提供基于购买历史的产品推荐，Netflix 则会推荐相关的作品、有待观看的下一部，并且基于用户 Twitter 上的内容来进行推荐。

每一个微小的自定义设计，都能让用户感觉这些用户体验设计是为他们而做的。同时，这种设计也会给用户一种参与感和沟通的体验，从而加深用户的忠诚度。如此一来，用户会更好地融入整个网站的用户群或者社区。

2、简练的动效

另外一个大热的流行趋势，就是动效设计。它不仅能为用户带来惊喜，而且具备强大的引导性。

动效设计的精髓在于简单。令人头晕或者不知所措的动效，应该不是你要的东西吧？动效应该是有目的性的，和其他所有的设计元素一样，有针对性，达成目标是它存在的意义。

对动效或者说动画最熟悉的，无疑是迪士尼。Frank Thomas 的《生命的错觉：迪士尼动画》中，就详细总结了创造今天动画的12个原则：

·挤压和拉伸
·预期
·登台
·连续动作和姿态对应
·缓进缓出
·弧形运动
·次要动作
·时序
·夸张
·立体刻画
·吸引力

3、使用约定俗成的设计模式

对于常见的问题，设计模式就是可靠且可复用的解决方案。简而言之，最常见的信息和交互方式被整合到一个界面当中，比如点击按钮，滚动页面，滑动解锁，它们都是设计师模式。

你需要熟悉这些常见的设计模式，并且在设计界面和交互的时候将它们用进去。这符合用户在体验上的诉求，也是易用性的最基本构成。

同时你也要在自己的设计中创造设计模式，在不同的页面中使用相同、相似或者规则化的设计，让用户习惯。比如，不同页面中的CTA按钮的色彩保持一致，卡片式的元素使用相同的样式，等等等等。

4、给设计以性格

没人会喜欢单调无聊的设计。你的网站应当同你的品牌保持一致的性格，拥有独特的气息。

要做到这一点，通常需要用到微妙走心的文案和亲切自然的语调如果你真的不知道怎么做，可以看看MailChimp 是怎么做的。（请注意他们的文本和图片是如何无缝地连接到一起的）

5、在屏幕内思考

用户同网站交互都是在屏幕内进行的，无论是桌面端还是移动端，整个体验都是围绕着屏幕进行的。

这并不是一句废话。屏幕是一个区域，它界定范畴，赋予概念，创造隐喻。这也解释了为什么视差滚动和卡片式界面是如此的流行。这两种概念将一定量的信息合理地放置到屏幕这个容器中，让用户随之同下一个元素进行互动。

如何运用好这个概念其实并不是那么容易。一个屏幕内应当承载多少信息，需要仔细考虑。一个桌面端页面所能承载的信息量在移动端屏幕上，可能需要划分到几个页面当中去。

从屏幕的角度来考虑问题，可能会让你的计划更加庞大复杂，但是这种考量是有价值的，这种基于屏幕或者基于设备的考虑能让用户感觉更加便捷贴心。

6、一体化的内容和交互

视频、游戏、测试都争取让用户能与之进行互动，这种互动的目的在于驱动用户参与到设计中来。用户与界面交互的越多，用户所获得的体验就越好。

不过，有趣的元素能让这一切截然不同。

让交互内容尽量简单，不要牵扯太多，让用户可以一目了然，让他们轻松获得反馈的信息，不用在冗杂的体验中沦陷。这其实和美剧的5分钟原则有着异曲同工之妙。

7、轻松有序的设计

最后一个秘诀并非不重要，它甚至可以说是最基础的原则：让你的设计保持干净、整洁和有序。使用栅格可以让每一个页面元素都有准确的位置。将响应式设计落实到每一个元素，能让页面能从一个设备兼容到另一个设备。

简约风和极简风能成为设计趋势是有道理的。用户可以更轻松理解这一切。简约的视觉设计更容易交互。没有复杂信息并且被精心设计的界面能更好地运作，赋予更好的体验。

苹果的官方App Store 和Google Play 都推荐过的游戏 Two Dots 就是个典型案例。谁都可以拿起手机毫无障碍地开始玩儿，它设计简单干净，容易互动，视觉元素周围有足够的空间，无需担心误触。同时，其他游戏所具备的东西它也有——有趣好玩，可以共享得分，能分享到社交媒体。

结语

界定一个网站的体验与否有的时候并不是单一的标准，而今天所推荐的7条秘诀本身也更接近于基本的Guideline，了解用户，熟悉趋势才能提供优秀的体验。

文章来源：优设  作者:陈子木
分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

虽然直觉认为按钮是一种很简单的控件，但在梳理按钮相关知识点的过程中，发现小小控件其中包含了很多容易被忽略的细节。

按钮几乎是每一个页面不可或缺的元素，对于按钮的认识基本停留在视觉层面，一个圆角矩形搭配一句文案就能拼凑成一个最基础的按钮。视觉是一个观察的切入点，但仅停留在视觉层面还是不够的，比设计表现更重要的往往是背后支持设计的理由。本文中的所有案例均来自线上产品，观点仅是个人粗浅的理解，有疑问的地方欢迎大家讨论指正。

按钮的定义

1. 按钮的来源

数字世界是现实世界的一种映射，许多数字概念，都可以在现实世界中找到原型。按钮就是很生动的一个案例。在视觉表现上贴近现实生活中真实物体的外观，拟合用户心智模型，降低用户的认知和理解成本。

2. 按钮的定义

如果从视觉形式上看，按钮的组成很简单，一个矩形容器加上文字或图标即可组合成一个常见的按钮，但是仅仅从视觉层面定义按钮是不严谨的。按钮是一种重要的控件类型，而控件是图形用户界面（GUI）的主要构成模块。想要深入理解按钮，就必须要求我们首先理解什么是控件以及控件的分类。

3. 控件分类和介绍

定义：控件是用户和产品间进行交流的屏幕对象，是图形用户界面（GUI）的主要构成模块。

分类：根据用户目标，可将控件分为 4 大类。

每一类控件下又有更多具体细分。所有界面中常见的具体控件都可以根据其功能找到所属的类别。

4. 按钮的分类

在以上各个细分控件中，我将部分控件归入按钮类别：

命令控件下的：传统按钮、图标按钮、文字按钮

选择控件下的：开关按钮、单选按钮、组合图标按钮、状态切换按钮（开关和复选框样式比较固定，为了方便讨论，姑且不算在按钮范畴之内）

因此如果以按钮为主体，以功能属性为分类条件，可将按钮分为：命令型按钮和选择型按钮

命令型按钮与选择型按钮的区别

不论从功能维度、交互维度、视觉维度上看，这两类按钮各自都有不同的特点。

选择型按钮非瞬时状态有：“选中”和“未选中”两种互斥状态。可以把选择型按钮理解为某种状态的确认和展示。

命令型按钮的非瞬时状态只有一种：正常状态，当用户点击命令型按钮后，命令即可下达。可以把命令型按钮理解为一个动作，点击按钮代表着立即执行这个动作。

常见按钮的拆解

介绍完了命令型按钮和选择型按钮在功能、交互、视觉层面的区别点后，我们再来看看实际工作中常见和常用的按钮类型。

1. 传统按钮（有容器兜底的按钮）的来源：

GUI 中“按钮”的概念来源于真实世界中的按钮。真实的按钮具有一个非常显而易见的特点：拥有一个适合点击按压的受力面，这个受力面就是可点击感的来源。试想一下，假设一个按钮只有针尖般大小，且不说你是否能认出这是按钮，即便你知道这是按钮，你会有按下的欲望吗？真实情况下，摆在人们面前的按钮面积越大，想按压的欲望就越强。因此传统按钮的最显著特点就是拥有一个承载内容的“受力面”，也就是承载文字或者图标的“容器”。受限于早期的显像技术，以及与真实世界的对照，这种“容器”通常一般都是矩形，后期渐渐衍生出更加柔和的圆角。

风格发展：

在相当长的一段时间里按钮都有三维凸起的特征，进一步巩固了按钮的可点击感。不过进入移动时代后，这种流行趋势发生了改变，按钮的三维印记被不断移除。用户已经建立起了成熟的心智模型，即便按钮在视觉上越来越“平”，也不妨碍点击行为的发生。结合多年的使用经验，用户已经将矩形形状这一特征和按钮牢固地联系了起来。即便现在的按钮大多都是扁平化，用户也能一眼就辨认出按钮属性。

2. 传统按钮的拆解：

常见按钮一般是由容器和内容组成。

容器层面

• 容器形状：

移动端比较主流的按钮形状有：矩形、圆角矩形、胶囊形和圆形 4 种。一般，在人们的认知里，圆角越大传递的感觉越圆润亲切。其实形状本身并没有好坏区别，与单纯视觉偏好相比，元素的统一性更加重要。一旦选定了某一种按钮形状，就需要保证所有场景中出现的按钮都尽量看上去整体统一。

• 容器尺寸：

视觉上，按钮越大，越吸引用户注意，决定按钮大小的主要依据是按钮在页面中的优先级。而一个产品涉及到页面众多，如果不同的页面元素之间缺乏统一的调度规则，就会出现按钮尺寸过多，没有规律，细节混乱，效率低下的情况。为了既能适应不同的场景，又能保持产品级的控件统一，一般要给按钮尺寸设定几个档位以适配不同页面需求。排除个别特殊页面，一般把按钮设置为 5 个优先级梯度档位就足以满足设计需求。

我们可以从优先级从高到低的顺序，将按钮分为：特大、大、正常、小、特小 5 个尺寸档位。

下面展示最常使用的三个档位，大、正常、小档位。

• 容器颜色：

按钮的大小、形状、颜色三个维度中，人眼是对颜色信息最为敏感的。在一个页面中，突出一个元素的方式有多种，其中最简洁有效的方式就是用颜色进行突出。颜色包含了色相、饱和度和明度三种属性，改变颜色的不同属性，都会对按钮的表意产生影响。同时，不同的颜色代表着不同的含义，配色时需要加以注意。

• 容器样式：

容器除了基本的尺寸、形状、颜色之外，还有多种样式。

上文介绍的容器是强面性的，此外，容器还有弱面性、线性等样式。

• 容器细节：

虽然现阶段的按钮越来越扁平，但在扁平的趋势下，依旧有发挥设计创意的空间。

颜色渐变、投影、动效都是常用的设计手法。

内容层面

聊完了“容器”部分，再来看看容器承载的“内容”又有哪些细节点。

3. 图标按钮的介绍

并非所有按钮都需要容器，尤其当按钮密度较大时，去掉容器只保留内容，可以更好地提高空间利用率，简约视觉。

4. 文字按钮的介绍

比图标按钮更轻量的按钮类型是文字按钮，以文字的形式展示，和界面融合度更高，当用户有需要时才会注意到文字按钮的可点击性。

5. 传统按钮与图标按钮的组合

这种组合形式相当常见，将多个功能整合在一个区域内，如底部工具栏（ToolBar）或者顶部导航栏（Navigation Bar）。不同按钮承载着不同功能，侧重越明显，越利于用户快速识别并决策。

特殊按钮类型

上面介绍的是常见的按钮形式，除了以上按钮，有一些按钮形式专门适用于某些特殊场景。

如悬浮按钮、胶囊按钮等。

按钮的优先级

一个页面往往有多个按钮，不同按钮承载不同功能，功能之间有相同或者不同的优先级，因此按钮之间也存在这相同或者不同的视觉优先级。

我们分两类情况来讨论：相同优先级的按钮和不同优先级的按钮组合。

按钮样式小结

上文罗列了实际工作中常用到的一些按钮样式，最重要的步骤是分清按钮主次，使用不同的样式进行搭配。

优先级强到弱：

强面性按钮、弱面性按钮/线性按钮、图标按钮、文字按钮

碎碎念：

本文中出现的部分名词，比如“弱面性”、“容器”等，只是为了便于交流和统一指向，并没有具体权威出处。文中提及的按钮类型均来源于线上产品，样本有限，适用场景相对固定，还有很多样式没有一一遍历。但掌握了如何选择样式的原理，就可以根据日后具体需求做出合理方案。文中出现的数据都是经验型数据，如按钮按下状态是在正常状态下添加 10%纯黑的遮罩，文字字号大小等，这些都是建议型数据，可以根据具体情况灵活调整。

文章来源：站酷   作者：设计师doo


分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

文章来源：站酷   作者：船长的成长日记

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务