你觉得设计系统重要吗？你了解设计系统吗？让我们一起来深度解析下设计系统，预计阅读时间为15分钟
你觉得设计系统重要吗？那目前手里的设计系统是在灵活运用？还是落灰、摆设？你对设计系统理解有多深？它在你的设计中有多大的用处？节省时间、减少出错率、视觉一致性还是仅仅觉得就应该有个规范？那怎么避免设计系统带来了统一和便利，但同时失去了变化和新鲜感？
设计系统是今年来热门的话题之一，想要带来良好的用户体验，设计系统就是其中重要的一环，那它和设计规范、设计模式、设计语言、设计原则有什么关系？
设计系统用一套连贯组织、相互关联的模式和共享实践以达到数字产品的目的。简单的说就是一系列可重用的组件和它们的使用指导文档，在制作这些组件的过程中会考虑到公司的设计理论和品牌化(颜色，文案，字体等等)，所以它们也通常包括在设计系统里。设计系统为公司的各种产品提供了基石和指导。是一种动态的，是需要维护与改进的。
设计模式是一种经常性，可重复使用的解决方案，可用于解决设计问题，我们经常会说解决整个方案我们要运用什么样的设计模式。
设计语言是把设计作为一种“沟通的方式”，用于在特定的场景中进行内容与信息的传递。设计语言可以理解为由品牌基因+设计规范+多场景应用三大要素组成的一套设计应用规范系统。
设计原则可以理解为设计语言中的语法，是构建设计语言系统的起点，用于传达品牌主张或设计理念，它将指引业务设计执行的方向。
比如Airbnb的设计原则可以简单归纳为几点：
设计规范对于设计师来说并不陌生，日常工作中也经常使用。围绕在某种风格或者大型设计项目下形成可视化、数据化的标准，针对相对独立的体系建立的统一遵守条款。统一的设计规范不仅有利于设计师提升效率，同样可以帮助产品、开发、运营、测试等相关人员对产品的体验有更好的认知。
我曾经加入一个设计团队，看到平台风格不统一，当时很自豪很坚定的制定了一套平台设计规范，从色彩体系、文字体系、icon体系、botton体系以及其他的一些UIKIT体系，还有交互方面。当时一心想着有这个规范宝典在手，平台统一性指日可待，没想到这个规范就成了我自己的规范，仅仅是我在自嗨。
为什么已经建立设计规范了，还是没能解决平台统一的问题？这里延伸出另一个问题，为什么其他设计成员不用？协作不起来？是它不够好？我严格按照标准来，为什么推不起来？
那要追溯到设计体系的目的是什么？它的意义何在？
1-建立统一的设计文化体系
2-保证多团队成员共同参与的项目视觉一致性
3-提升品牌调性
4-节省与研发人员的沟通成本
5-将元素组件化，提升设计师和程序员的工作效率
6-可以帮助设计人员有针对性地对视觉元素进行优化和迭代。
7-在用户层方面，对某产品的体验一致性得到落实
8-减少设计出错率
……
整体可以归纳为
规范定义的基础是围绕某种风格或者设计文化。对内统一，一个品牌的设计风格，是要有别于同类竞品的，比如阿里云、腾讯云，他们各自都有自己的品牌调性。在对外上两个品牌是做到了对外区分，一眼可以识别出来。他们有各自规定的一套设计语言、设计规范。这样才能在协作上达到对内统一。我们都不希望在阿里云的网站，各个页面的设计差异明显，像跳转到其他平台。而这些针对用户层一致性都是非常重要的体验。
多个设计成员协同一个产品，迭代与更改规范都能更快的同步。可以试着想象一下一个几十人的设计团队，如果没有统一设计规范，那网站会变成什么样子。
在UI还原中，设计需要经常与前端进行沟通“这里这里这样做，那里那里这样做”，对于每一块的设计，前端都会询问你，这样大大增加了沟通的成本，把时间花在了无效的事情上。
设计规范统一后，减少了无效沟通，可以更专注创新方向，比如：要改变预先设定的一个辅助色，无论是设计还是开发，修改组件的颜色，全局使用到这个组件的地方都会改动，大大节省了设计时间。
做品牌的时候需要制定一整套VI规范手册，那平台同样也需要统一的品牌感。建立统一的文化体系可以让用户无论处在哪个页面都会有熟悉感、掌握感。统一的元素、视觉风格、交互方式，更加突出该品牌应有的调性。无论你在听网易云音乐还是QQ音乐，看到界面都可以立马识别出这是哪个app。
你能分出哪个是网易云播放界面，哪个是QQ音乐播放界面吗？
设计经常碰到设计完后需要修改一个点，然后就要找出设计稿中所有相同的地方进行修改，这样很容易漏，统一规范后只需要修改组件即可。尽可能的避免错误的出现。
设计规范的意义这么强大，对网站及品牌有至关重要的作用，那为什么还会出现没有应用起来的情况呢？
很多设计师会说：“设计不就应该是变化多端的吗？就是要表现创新力呀？制定了设计规范是不是就失去了变化和新鲜感？那设计还有什么意义？开发都可以做设计的事情了。”
这里就要看对设计规范理解的深度—设计规范是分层次的，平台规范归根结底是为了确保产品的易用性，是为了减少用户的学习成本
底层基础元素也可以说是全局样式，比如色彩规定、文字大小、icon线/面、botton体系等一些基础的元素，给用户一种统一的视觉形象，在跨界面、跨端、跨系统间有熟悉感，从而潜移默化地进行品牌的渗透。
对组合自由度较低的基础组件做精简的样式变化限定，对组合自由度较高的复合组件减少过于局限的限定条件，考虑各种拓展的可能性。组件在制定过程中要考虑多种状态，多种可能。
设计规范是需要迭代的，而不是我只要制作出来就放那了，就像女生买衣服，去年的衣服已经配不上今年的我，嘻嘻
~~希望我每天都有新衣服穿，做梦中～
设计体系最大的重要性毋庸置疑就是规范节省人力，设计师可以更多的时间去发挥创造性。
很多设计师觉得统一了规范，那我的创造性从哪发挥，界面都长的差不多。在设计中，设计目的是解决商业或用户的问题，并不仅仅是为了有创意而引入新的样式或交互方式。
有了设计体系，统一了整体品牌风格，不用把精力花费在比如调整间距、对齐元素等琐碎的事情上，更多的回去关注更全局的设计策略。
它仅仅是设计软件上可复用的组件，所以可由设计师独立完成，这种想法是错误的，是需要来自不同角色支持和参与的，这里包括前端、品牌、动态设计、 用户研究等。
有时候会想只要完成了规范就大功告成了，其实不然，对待设计规范就像对待产品一样，是需要维护和改进的，包括两个方面：一种是对内部使用的开发以及同事，一种是对用户的，应该定期收集用户以及同事的反馈，确保及时更新迭代。
1-提高设计开发效率，最显而易见的好处就是，组件库的可复用性。
比如像表格、弹窗、颜色等。一些基础的组件只需要做一次。
2-确保设计一致性，为用户提供连贯一致的用户体验，设计的一致性让用户能缩短的学习使用产品的周期，让他们能够预见他们的操作所带来的改变。
网站统一的视觉规范、交互体验，会让用户产生一种掌控感。
3-设计系统促进了公司内部的合作和交流，一个成功的设计系统是需要跨功能团队参与，设计系统因此促进了公司内部不同职位的合作和交流，这种文化的建立也会帮助公司更有效地推出新的产品或服务。
已经了解了规范的目的/意义，那该怎么去着手呢？
在制定规范前期，不应该是一个人规定这个规范，设计团队的成员应积极参与，前期先把规范的基调定好，人人都参与进来了，规范也就能更好的运营，当时我就是一个人定了规范，只是单纯把规范发给其他设计人员，他们没有参与，自然不会使用规范，对里面的设计元素没有加深理解。
这个主导人建议让全队专业能力最强的人辅助产品战略分析进行。有全局把控能力，这样能把纰漏降到。
大家一般说的设计规范是界面的视觉规范，从UI的定义，User Interface—用户界面，用户与界面之间的交互关系，可以归纳规范其实可以包含两大类，一类是视觉规范，一类是交互规范。
视觉规范可以给用户传达统一的品牌形象，确保视觉一致性。后期的设计元素须复合规范的原则。
交互规范可以减少用户的学习成本，让用户有归属感。交互规范在制定的过程中，需要写好交互规则与条件，不然后期维护会混乱。像盖房子一样，地基都没打稳的话，整个楼都是偏的。
那在使用规范时，一定要遵循规范里的要求进行应用，否则会乱套，不仅起不到统一的品牌风格，反倒会给人一种一团糟、完全不专业的感觉。体验好是一个产品的竞争力。
节点和公司的进度搭边，看当前的产品是应该先独立风格还是先统一基础规范。
1-固定的设计风格规范，比如：google的“扁平”，微软的“磁贴”，可以全局使用，并且时间保持的相对长久。这些设计风格在前期就完成了独立与其他风格的区分。后期再进行拓展。这种比较适规模比较大的团队，定好基调，不会走偏。
2-不断优化的设计规范，根据公司的节奏，有些产品目前比较迫切的是需要界面统一性、交互统一性。基础做完以后，进而考虑产品固定风格。这种比较适合小团队协作。可以随时调整。
利用粒子构成的原理与三维解构，一个组件被科学的三维解析后由粒子再构成，理论上几乎能够满足所有的UI样式需求。这样所有组件构成元素都可变，高度灵活
建立单个元素——设立简单组件——构成复杂组件——形成模板——最后组成页面。
并不是每个时刻都能够直接使用完整的组件，元素是我们工具库必不可少的部分，它可以更大的方便你修改组件，再造组件以及特殊的排版，方便拖拉拽。
规范组件命名，方便查找、方便协作。
一键导出/同步组件到Sketch模板。
标注方面，目前我们团队使用的是蓝湖私有化。
一般情况下，公司有不同的产品线，且都需要长期的开发与迭代。
公司中，越来越多的设计师加入，设计风格需要统一。
设计体系里面包含了设计语言、设计规范，需要与前端、品牌、动态设计、 用户研究等沟通，还是需要迭代优化的，这是非常繁琐耗时的项目，初期会非常的艰难，当设计师开始做组件时，也是非常耗时的工作，需要考虑不同场景下的使用情况以及设计的延展性，都需要投入大量的设计人力。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
距离iPhone 12系列发售已经有段时间。
之所以没第一时间撰文，是因为 iPhone 12 mini 和 iPhone 12 Pro Max 要在11月13日才正式发售。
而在此之前，即便是Apple线下店也没有样机。
保险起见，我等接触到 Mini 和 Max 真机后，开始着手撰文。
一周前完成了文字部分，本周终于完成了几十张配图，这才和大家见面。
为了方便新同学更好的了解本文内容，我会简单提及一些关于适配的必要信息。
并附上往期内容的链接，方便延展翻阅。
本文约3200字，分以下六个部分：
在网络上搜索手机界面适配的相关内容。常会看到文中提及以下几个参数：比如屏幕分辨率（物理分辨率）、屏幕尺寸、PPI数值…
其实，在处理常见手机界面适配时，设计师只要关注以下3个基本参数：渲染像素（Pixel）、逻辑像素（Point）、 倍率（Scale）
渲染像素（Pixel）可以理解为是手机截屏时所得到的图片尺寸，单位是px；
逻辑像素（Point）可以理解为是程序员在用代码绘制页面时所用的尺寸，也被叫做“1倍图尺寸”。比如Sketch中对应的机型尺寸
对应的就是手机的逻辑像素尺寸。
倍率（Scale）因为逻辑像素和渲染像素存在着一定的比例关系，这种比例通常被称为倍率，比如切图后缀的@2x、@3x对应的就是倍率的数值。
值得一提的是，倍率不一定是整数，比如三星GALAXY J2（540×960），倍率是@1.5x；
华为M3 Life 8.0”（1920×1200）的倍率则是@2.25x
适配方式主要有两种：
1. 倍率适配
主要应用在逻辑像素相同，但倍率不同的设备。
比如iPhone 11适配到 iPhone 11 Pro Max
两个适配的逻辑像素都是 414 x 896pt，但倍率不同，前者是@2x、后者是@3x。
2. 逻辑像素适配
这种适配方式应用在两个倍率相同，但逻辑像素不同的设备，
比如iPhone 11 到iPhone 8：
两个设备的倍率都是@2x，逻辑像素则分别是：414 x 896pt 和 375 x 667pt。
如果两个设备的倍率和逻辑像素都不相同，比如iPhone 8 到 iPhone 11 Pro Max
那通常会先进行逻辑像素适配，再进行倍率适配。
由于倍率适配相对简单，只需要考虑分割线和切图这两个因素。
因此，设计师通常说的手机适配、尺寸适配常指逻辑像素适配。
所以搞清楚iPhone有哪几种逻辑像素，就成了iPhone适配和验收的关键。
在今年10月份发布的iPhone 12系列共有四部机型。
在谈新设备前，我们先简单回顾截止iPhone 11系列时，iPhone的几款主流机型及其对应的参数：
通过图表可知，在iPhone 12发布前，市面上的iPhone共有6种不同的分辨率需要完成适配。
那么iPhone 12又带来哪些变化呢？
从官方给出的屏幕数据可知，四款设备的物理像素如下：
由图可知，今年iPhone共新增了3种全新的屏幕尺寸。（其中iPhone 12和iPhone 12 Pro的物理分辨率相同，故合并看待）
但在设计层面，iPhone 12系列四款手机，只为设计师增加了1170×2532、1284×2778 两种新的设计尺寸。
画重点：目前有一些文章，错把iPhone 12 mini的屏幕参数1080×2340当做最终的绘图尺寸，认为12 mini的逻辑像素为360x780pt 。
事实上iPhone 12 mini采用了iPhone X一样的渲染像素，即1125 x 2436px，对应的逻辑像素是375x812pt。
为了解释这个问题，得从大家比较熟悉的iPhone Plus系列手机说起。
在前文提到，手机界面适配时，设计师只要关注：渲染像素（Pixel）、逻辑像素（Point） 以及倍率（Scale）这三个基本参数。
而其中的渲染像素通常会和屏幕的物理像素保持一致，比如常见iPhone 8、iPhone XS、iPhone 11 Pro都是如此。
这也导致大家很容易把物理像素和渲染像素混为一谈。
但既然说了是“通常会保持一致”，就总会有例外。
比如iPhone Plus系列，官方给出的屏幕参数（物理像素）是1080×1920，但渲染像素却是1242×2208。
所以设计师在针对Plus系列做图的时候，就得按照1242×2208进行输出。
而新款iPhone 12 mini的情况和Plus系列一样：
官方给出的物理像素尺寸是1080×2340 ，但拿到设备真机后，通过测量可知12 mini采用的渲染像素是1125×2436，这和iPhone X的渲染像素保持一致。
在明确这一点后，我们再看下iPhone 12系列设备的参数：
如果我们只看逻辑像素，加上iPhone 12系列，目前iPhone 共有7种尺寸。
这些尺寸都需要设计师留心，并完成相关机型的验收走查。
不过，到这里还没完。考虑到iPhone存在“标准”和“放大”两种模式的视图。
还需要将放大模式的尺寸考虑在内。
目前各个设备的放大模式对应的适配三要素分别如下：
其中320x693pt是全新的尺寸，出现在12 mini、12、12 Pro这三款设备中。
由此，在把放大模式纳入适配考量范围后，iPhone的逻辑像素共统计出8种尺寸。
如果将其中最小尺寸和最大尺寸比较宽高的话，宽度相差了108pt、高度相差了358pt
对于那些横滑需要外露一部分的页面，需要重新设计尺寸或调整局部的适配方案。
这对于一些单屏显示的页面而言，也是件麻烦事。
先思考一个问题，在下面几个尺寸的iPhone中，你觉得哪一种尺寸的iPhone在市面上占比最高？
在 iPhone 12发布之前，在iPhone这几种屏幕尺寸中，你觉得哪一种iPhone的市场占有率最大？
我相信绝大多数设计师，都会下意识觉得750×1334这个尺寸的机型占比最多。毕竟在过去很多年里，大家都是用这个尺寸在做图。
那实际情况究竟如何呢？
我们先看下阿里友盟今年05月01日的数据：
PS：数据公司按设备的物理分辨率进行统计，而非渲染像素。所以这里的1920×1080对应的是Plus系列手机。
今年五月，国内iPhone占比最高的机型是Plus系列。而设计师钟爱的750×1334 和 1125×2436分别排在第二和第三。
其中排在第三的1125×2436（对应@2x的设计尺寸是750×1624）和前两者的占比仍有较大的差距。
那是不是随着时间的推移，1125×2436的机型占比会逐渐增大，并逐渐占据第一呢？
如果你也有同样的想法，恐怕又得失望了。
翻看5月份的iPhone增量数据，会发现一个有意思的情况：
在增量中，828×1792（对应iPhone 11）增速以51.9%遥遥领先第二名的1125×2436。
下面，看下的11月统计的iPhone存量数据：
828×1792已经从占比第四名上升到了第三名，
再看11月份的增量数据：
828×1792的增速不减反增，从5月份的51.9%增加到了最近的63.8%
如果不考虑的iPhone 12系列，828×1792有望接替Plus系列，成为市场占比最大的iPhone尺寸。
在828×1792的设备飞速增长的同时，1125×2436这个尺寸的设备增速却在不断下降。已经从5月份的27.8%降到了现在的10.2%
过去设计师常用的设计师尺寸是750×1334，但随着iPhone进入全面屏时代，如果再把750×1334作为设计的基准尺寸显然已经不合时宜。
而目前常用的750×1624尺寸对应的机型（对应1125×2436在@2x下的尺寸）无论在存量市场中的占比，还是增量市场中的占比都少的可怜。
而新发售的iPhone 12系列中，也只有12 mini采用了1125×2436作为渲染像素的尺寸。而其余三款，采用全新的渲染像素和逻辑像素。
很难想象1125×2436这个尺寸的设备，还能和过去的750×1334尺寸一样，成为iPhone主流的分辨率尺寸……
设计基准尺寸的选择，除了要看设备的占有率，还要兼顾适配的成本。比如，当有大中小三种尺寸的设备需要设计时，优选中间尺寸作为基准尺寸。
以中间尺寸为基准，无论是适配到小尺寸、还是适配到大尺寸，界面的调整幅度都是最小的，偏差不会太大。
反之，如果选择小或大作为基准，或许页面适配到中间尺寸时感觉还行，但适配到另一侧相对极端的尺寸时，则容易出问题。
界面设计师所用的绘图基准尺寸并非一成不变。回看过去：
设计师用的基准尺寸已经从最初的640×960、变成640×1136、再到750×1334，以及现在的750×1624，已经变化了4次。设计师几乎每隔两年就会随着新iPhone的发布调整一次设计尺寸。如今随着iPhone 12的发布，加上750×1624对应机型在市场中占比的低迷，我们可以重新思考在iPhone众多尺寸中，哪一款更适合作为设计的基准尺寸。
这里先不考虑设计师对尺寸的惯性依赖，只思考适配兼容性和市场占有率这两方面。适配兼容性，按照“大中小”优选中间尺寸这一原则。我们可以很容易的在目前8种iPhone的尺寸（指逻辑像素）中选出位于中间的尺寸：
分别是 375x812pt 以及390x844pt，前者对应1125x2436px ，后者则对应1170x2532px，如果进一步将其转换成大家熟悉的@2x尺寸，则分别对应：750×1624和780×1688
在市场占有率层面，随着Apple逐渐停售之前的设备，新款iPhone的分辨率占领市场只是时间问题。而在新设备中，只有iPhone 12 mini这一款设备采用大家熟悉的1125x2436px（375x812pt，对应@2x下尺寸750x1624px）。如果按照此前的经验推算，iPhone 12（1170×2532）接替iPhone 11（828×1792）成为最热卖且占比最高的设备只是时间问题。
截止iPhone 12发布为止，显然 390x844pt （对应@2x下尺寸780x1688px）更适合作为今后的设计基准尺寸。
文章来源：优设 作者：海边来的设计师
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在理解了80/20法则后，我们可以将此法则广泛的适用于各个场景中，如下：
80/20法则也有一定的争议，但是还是适用于绝大部门场景，当然特殊场景还是要特殊对待。80/20法则可以帮助用户关注核心功能，最终达成目标。
简单明了，让人可以立即评估自己的表现距离目标有多远。
设计产品的时候，如果行为修正非常重要，可以把选择架构原则考虑进去。
复杂的应用多种多样，支持的服务和功能也千差万别，但是无论如何呈现，此类复杂应用的设计都是非常挑战设计师的设计功底的，需要设计师了解业务，了解用户，并且能够通过设计更好地提供服务。
很多时候我们会觉得情绪板设计可有可无，或者因为时间的关系不允许我们经过这一步。但，如我一开始提到的点，情绪板可以在前期帮助我们去打通很多思考的壁垒，辅助设计师在前期直观的与产品侧进行方向上的探讨，从而找到大方向上的共识。
好的网页设计具有很强的适应性并且对用户来说始终是友好的。
遵循网页布局的最佳实践，能够带来全新的数字体验，灵活地调整不断变化的技术和设计趋势，进一步实现品牌目标。
编者按：这篇趋势分析的文章出自资深设计师 Lyudmil Enchev 之手，汇总了 2021 年在网页设计领域值得注意的 10 个重要趋势。
虽然移动端设计在持续地繁荣发展，但是网页设计依然是当下硬性的设计需求。相比于以往，网页设计所面对的要求，其实越来越高，不仅要细致到位，要功能全面，要能够贴合趋势，还要能兼顾桌面和移动端。
从网络上找到灵感并不是一件复杂的事情，不过要将新的样式应用到网页中，给旧有的样式翻新，都需要配合技术的进步和新的工具。
在网页设计领域中，设计趋势从来都不是为了设计而诞生的，相反它更像是视觉、品牌、技术、先锋探索综合作用下，落地到网页作品中的一种综合表现。越来越多的技术和设计人员将聪明才智和天才想法融入到网页当中，才催生了如今我们看到的这些「趋势」，而这个，就是我们今天要聊的东西。
其实严格意义上来说，卡通插画一直在流行，流行了很多年。从卡通插画在电视上成为一代又一代人的视觉和设计启蒙开始，它就从来没有离开过网页设计的主流领域。
也正是因此，直到今天，当我们谈及网页设计趋势的时候，卡通插画也会是我们最容易想到的一个趋势发展方向。插画，是一位设计师自由创作发挥的通行证，而卡通插画，是最容易带着设计飞翔的一个设计技术。
卡通插画足够灵活，装饰性非常强，在题材和风格足够切合的情况下，能够更快和用户构成情绪上的纽带，可以说是非常强大了。
当然，不止是在这一篇文章里面强调过，3D 的重要性和作为趋势的流行程度。从文字排版到视觉图像，3D 在视觉领域的快速增长和市场需求是大家有目共睹的。
值得一提的是，在网页这个领域，除了诸多视觉元素的视觉设计之外，有一个非常突出的趋势，就是运用 3D 来构建视觉景深，渲染出层次，这非常强大。
这种景深和 3D 元素所构建出来的沉浸感使得整个网页充满了吸引力，结合色彩，阴影、高光，在高清晰度的屏幕上，这些都成为了将用户留下来的理由。看看下面的案例，你就明白我说的意思。
失真和故障效果则是另外一个重要的趋势。视觉噪音，随机的元素，缺陷，故障，模糊，低保真的元素，粗野主义式的设计，这些在这个以精致细腻为上的时代，制造出了一种反主流的声音。
并非它们必须这样，但是这样的视觉风格确实更容易在成堆的精致细腻设计当中脱颖而出——当然前提是你的故障和失真效果能够做的足够「好」。
奇怪的配色，反直觉的排版，明显的错位，看起来怪诞但是有趣的设计，这样的设计通常需要设计师更好地在对错好坏之间拿捏平衡。
感觉，感觉很重要，你明白嘛？这不是反逻辑也不是反设计，是特立独行。看看下面的案例吧。
怀旧也一直在流行，你知道的。但是如何怀旧？90年代，数字化设计刚刚从像素开始向着更加细致的未来前进，这个阶段，有大胆的尝试，有快速更迭，这些介乎新旧之间的数字设计，是我们对于 90 年代设计的美好回忆。
相比于 80 年代的粗陋（图形化界面还在艰难普及中），90年代是腾飞的阶段，从界面到游戏，在拟物化走到之前，那种介乎精致和复古之间的微妙感觉，是非常有趣的。
对于新世纪才出生的 Z 世代而言，90年代是陌生的，但是这个时代又是很容易可以被追溯到的，这也是使得 90 年代的数字风情有着能够打通不同年龄段用户的奇妙气场，它的逐步流行，并不令人意外。
你总能在这些设计当中，get 到到某些东西，然后微微一笑。
严格意义上来说，微动效和微交互并不是趋势那么简单，在如今的 UI 和 UX 设计当中，它是必不可少的组成部分，它已经从过去的「加分项」变成了如今的「基本要求」。
微交互和微动效通常不会做得特别的显著，但是它们会深入到 UI 界面的各个地方，按钮，小图标，行为召唤式的文本，翻页按钮，光标，产品图，弹出框，等等等。
微交互和微动效从最初的只需要确保可用性，到如今需要好看易用又有趣，可以说要求是比以往有明显提高了。在接下来的 2021 年可以预测的是，微动效会更加强调趣味性和交互性。
如果你正在考虑这部分的设计，看看下方的设计参考吧。
在关于网页设计趋势的文章当中，不探讨配色是不完整的。2021年的年度流行色是什么？不妨等等潘通下个月月初公布的2021年年度色。那 2021 年的在配色方法上的趋势是什么？是实验性配色。
在以往追求协调配色的时代，和谐的搭配是最主要诉求。不过现如今，用户、品牌乃至于设计师都在寻求一些更加新鲜独特的东西，实验性的配色就是在这样的诉求之下，逐渐流行起来。
这些实验性的配色通常会带有一些渐变的特质，一些反习惯和反逻辑的搭配方式，饱和度较高的蓝色、紫色和红色的融合，一些更为黯淡或者更为刺眼的搭配方式，强烈的视觉实验仿佛是在探索用户的接受极限在哪里。对于如何落地，多看看那些优秀而微妙的已有的范例吧。
如果说有什么趋势在 2021 年是非常明显的话，我只能说，是更为大胆的排版和更为粗壮的字体笔触。当然，这些设计本身是要具备相当的视觉美感和愉悦性的。怼到出血位乃至于版面之外的文本，快速切换的字体效果是「注意力经济」催生的一种设计策略。所有的一切——尤其是文本——仿佛在大声地吼叫着：看我看我看我！
这大概就是这种设计趋势诞生的本质。不过如果你设计的足够炫酷、炸裂或者优雅，谁又会去责怪你呢？
我们似乎开始厌倦横平竖直均分的网格，那些并不那么精准，带着手工制作的「不够」的元素，对于越来越多的用户而言，似乎是更好、更加易于亲近的东西。因为这样看起来更加个性，似乎给网页赋予了某种真实质感，甚至可以脑补出这些手写、手绘、手撕的视觉元素背后，站着一个有血有肉真实存在的人。
这大概才是手作感真正让人开始沉迷的重要原因。你可以开始尝试一下这种这些自由的、非正规的、甚至有错漏但是显得非常友好的视觉元素，字体，插画，排版方式，装饰元素，等等等等。
其实我们在前面已经反复提及了3D的部分，不过现在再做一个汇总：走出平面2D的领域，来试试有趣的 3D 设计，无论是好玩逼真的建模和阴影、有趣的材质和细节、脑洞大开的动画、充满纵深的转场和强化的交互，都能够让网页的设计，在2021 年更加吸引人。
因为炫酷本身就足够吸引人了不是吗？
极简主义最后还是要提及一下。虽然总体来说是老生常谈，但是它依然是很多设计师热衷、很多用户喜欢的一种主流的风格，也是值得追随的趋势。
必须说的是，还有很多厌倦了各种流行样式的用户可能会拥抱极简主义，它会作为一种持续的「趋势」而存在。这也是极简主义最让人着迷的地方：将你需要的必要的部分呈现出来，且只呈现这部分东西，没有过度装饰，没有无效信息，简单直接。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
结合理论落地项目功能，从逻辑层面思考问题。
节前有一位读者问了一个关于单选与复选框样式选择的问题，大概是：
看到很多单选与多选的设计形式，多种多样，以前看到「圆点+圆圈」就知道是单选，但是为什么现在单选与多选的设计样式五花八门，都没有遵守前面这种规范呢？这些组件的样式到底该如何确定呢？为什么会有一种模糊不清，不知道如何使用的情况？
我发现许多人都有一个习惯，就是喜欢把某个具象的内容抽象化，把某个具体的问题概念化。
比如认为单选就应该是「圆圈+圆点」的形式，但似乎从来也没有任何明文规定单选就必须是这样的形式，只不过大家看得多了，就习惯认为是这样，觉得就是这样规定的，但其实并没有过这样的规则。
要知道，样式常常根据功能在变化。比如功能优化了，样式也需要进行修饰，并不是说这里有一个单选操作，就必须是「圆圈+圆点」的形式给用户选择。无论是在电脑还是手机上，都是一样的道理。
这样去处理问题，常常会把实际的业务问题给处理没了，最后变成控件选择的问题，而不是功能本身的问题。
比如普通的弹框，也是一种单选状态，为什么不也改成下图右边这样的呢？不就是操作路径长，点击起来麻烦，多此一举，而且也不好看么？
即便真的在某个场景下，非得使用上图右边的单选形式，那么把样式改成下图这样，又有何不可呢？
只不过常规的「圆圈+圆点」被使用得多了，大家形成了共识而已，但并不代表它就是一种标准。
如果有一个规则规定说，单选必须是「圆点+圆圈」，那么各位目前所设计的绝大部分组件都将不能使用，包括各类菜单或开关。比如下图这样的 action sheet 就不应该存在，而它的出现也是因为功能属性、设备迁移、操作形式等内容的演化所呈现的结果。
这就是大家在处理设计问题时，习惯做一种概括，希望能复用于绝大多数场景而导致的错误情况，没有落实具体问题具体分析的原则。
包括这位读者的问题，也是希望能够明确单选与复选样式的选择问题，以便往后能够更有条理的使用。但可惜并不是这样，从上述我举的控件例子可以看出，单选形式早就已经变了模样，而多数人并没有注意到，还在认为单选与多选就应该是圆圈与方框的形式。
设计工具/方法论，确实是有部分指导作用，但不能作为绝对性或权威性的内容来吸收，应该辩证地去看。
而之所以在移动端延伸出许多自定义组件（形式并没有遵循所谓的市场常见规范），正是因为业务与功能的多样性导致的结果。
样式的选择不单单是看到的那部分，它还可以任意变化地处理，无论是单选或者是多选，不该被样式套牢了。而它的决定因素应该是内容。
比如，iOS 闹钟的铃声选择，有许多可选项。
但是因为内容的明确性，大家都知道，闹铃只能选择一种，不会同时有 2 个铃声响起来（当然也可以这么做），所以即便闹铃的单选形式再如何变化，大家也都知道它是单选的，这就是功能决定了操作形式的例子。
类似于，再如何变化选择样式，无论是圆圈、方框，或只有勾，甚至是其他情况，大家也都知道它就是单选。
而之所以用勾或圆点表示被选中状态，只不过是人的一种正常认知意识，即使改成三角形，只要能说清楚是被选中状态，那也不是不行，只不过三角形没有勾来得清晰罢了，而并不是因为有什么特殊含义。
所以只要梳理出符合自己产品的「单多选」样式，形成规范即可。一些人会感到模糊不清的原因是它本来就没有所谓的标准，又何来的清晰呢？
写到这，想到之前有读者问：什么时候该遵循设计规范，什么时候不该？
要知道，设计规范本身就是基于某个具体产品内容所构建的一个整合标准，为了规范化存在共性的功能形式。而对于共性的判断也应该是从功能来定义的，比如返回都在左上角类似的，但是一定么？
单拎出来说什么时候该遵循，什么时候不该遵循，是很概念化的一个问题，不可能存在一个具体话术标准，说什么时候应该，什么时候不应该的。
如果我回答，符合规范中已有的形式的，就遵循，不符合的就不遵循。那就是一句典型的废话了。但除此之外，我也就不知道如何解答了，除非你把规范和具体问题发给我，我可以跟你一起讨论讨论。
写这篇文章的时候，看到一位朋友发的信息：
为什么手机刷新都喜欢下拉？因为神经科学研究表明，这个动作，更容易让人产生对不确定性和惊喜的期待，原理和赌场的老虎机类似。
很多人都会习惯性给一些操作或交互形式做类似这样的定义。
但这么定义是不对的，因为这相当于前面说的，把业务给解释没了，成了形式上的讨论。而为什么会使用下拉、以及下拉会有什么情况，包括它所解决的问题，都没有任何的分析。
比如，下拉之所以让人上瘾，并不是因为「刷新」本身。下拉只是一种交互行为，它的出现也只是为了解决早期刷新按钮占据屏幕空间的问题，希望通过下拉进行刷新，以隐藏掉屏幕上的刷新按钮，给屏幕留出更多可用空间。
而采用下拉是因为它更符合人的直觉 —— 往下拉能看到更多新的内容。
但是人之所以会对下拉上瘾，并不是因为下拉这个行为，而是因为下拉能看到更多信息。下拉本身只是解决了屏幕空间的问题，而人其实是对内容上瘾。
比如我在腾讯新闻里看 NBA 的资讯，通常只会直接上滑，看下面的内容，看完了就关了，不会进行下拉刷新。
因为在腾讯新闻里，下拉刷新的新闻并不是的内容，更多是今天或今天之前的信息，不刷新反而是刚刚更新的资讯，那么下拉刷新虽然也是刷新，但是刷新出来的内容是旧的，也并不吸引我，反而成了我要避免的操作，因为只要一下拉，的资讯就会被旧的资讯挤掉，要刷掉进程重新打开 App 才会重新再显示的。
所以就不能简单的定义说「下拉刷新是一个容易让人上瘾的操作」，而是要关注内容，如果刷新的信息都是旧的，或者是用户没兴趣的，那即便刷新了，也不会引起用户的注意，也更不可能让用户上瘾了。
读者：
呆呆，这个图的卡片列表里，标题用省略号合适吗？
（因为原图涉及读者项目隐私，所以重画了个草图。）
又是一个没有业务背景的问题。不过这个问题比较简单，可以展开来说一下。
通常，我们会在各类产品里面见到诸如「标题超出部分用省略号显示」这样的设计，譬如上面这图。
于是，许多人在自家产品的设计过程中，遇到此类情况，被开发问到时，也会搪塞一句：文案要是超出就「…」显示吧。
大多数遇到这种情况的，都是因为之前没考虑好，才临时想了这个解决办法。
而很多时候，一些产品之所以用「…」显示，并不是因为单纯地文案溢出，可能是专门设计过的。
所以，如果简单地认为「…」就是解决溢出而使用的方法，那就有问题了。
下面举几个例子。
有些产品，我们几乎看不到列表视图里的标题是有省略号的。
因为这类产品的目的就是让用户读到完整的标题信息，对眼前的内容好做判断，从而考虑是否点进去看详情。
所以在设定的时候，界面中标题字数的规定，与界面样式就已经提前规划好了，可能在后台设置就限定死字数，要求运营人员上新时要统一界面的展示形式。
这种情况下，一般就不会再有省略号的问题，譬如一些知识付费类产品。
比较典型的还有 TED 演讲视频的标题，在《设计体系》这本书里专门提到了这个案例。
对于 TED 来说，演讲标题的信息优先级是最高的，所以他们宁可保留所有标题文案，也不对文案做截断用「…」显示。
因为对标题做截断是很容易的，而难的是把一个演讲主题提炼成一句简短句子，所以他们为了展示更清晰的标题，宁可在界面上保留长标题，甚至为长标题的显示而专门设计相符合的展示形式。
反过来，他们也因为这一点而确定了界面上标题字数的上限，确保文案不会超过界面显示的最大临界值。
包括一些资讯类产品，在标题上也会做限制，以满足最大化呈现且不使用省略号。意思是：假设界面上文案范围定了 30 个字符，那么配置的时候就必须 30 个字符以内把内容表达清楚，且必须完全显示在界面上。
所以经常看到一些 UGC 产品之所以会限制标题字数，原因除了常见的标题不能过长之外，还有一点是为了在列表页就能显示完整。
各位在设计这类产品功能时，也要注意到这一点，而不是随意说一个「字符不能超过 50 吧」。
而有些产品的内容列表，之所以频繁使用省略号，它的目的是为了引导用户点击用的。
这类形式一般出现在营销号发的文章里，多是营销人员自己为了文章点击率而做的。很少会有一款产品的所有内容都是这样的，除非是一些内容产品，运营方是企业自己，为了让产品上的内容有更多人点击而这样去设计，当中可能涵盖了广告，以此赚取广告费。
不过这类内容的设计已经让用户开始反感，所以如果不是特殊情况，最好少这样去做。
当然，还有同类型的，一般出现在页面面积小且需要展示更多信息的集合类视图，比如：
这种形式的设计，就是因为页面上想展示的信息太多，以至于通过这类合集来展示某个模块里的内容，营造出一种很丰富的感觉。
也就是利用「…」引导用户点击，表示信息没有展示全，如果要看，就点开详情，进二级页面。
还有一些产品的省略号，纯粹就是大家理解的，溢出就省略号显示。
比如同样是资讯或内容类，以文字为主的产品，虽然标题超出范围用了省略号，但用户基本也已经知道是什么内容（上面那个集合类视图也是一种），且还有摘要引读。
比如下图：
这种标题字符限制在了两行以内，多余字符用「…」展示，基本上已经是一句完整的话，能让人大致了解这条信息的意思。并且还有部分摘要，已经足够用户判断是否对它有兴趣，如果没兴趣，直接刷走也无所谓。
包括一些电商类产品，用户多以商品图片为主要决策因素，商品标题作为辅助信息，优先级不高，所以标题溢出是否省略号显示也无所谓。
这其中有一个特殊情况，就是有些产品的标题即不展示全，同时又没有省略号，比如淘宝的商品搜索结果页面。
因为这类列表实质是一个产品卖点集合的浓缩词，不是完整的一句话，多余字符展示或者不展示，都不会有太大影响，所以也不重要。
当中我比较反感的还要数农药了。
好友邀请的列表视图里，常常看不全昵称，因为好友会有游戏昵称，微信备注会展示在游戏昵称后面，以至于要点到游戏关系里先看全昵称，再到匹配界面邀请好友。
既然已经区分了微信好友与游戏好友，为什么昵称上面不也加以区分呢？
当然，经常玩的好友可能没这个必要，毕竟头像或昵称都可以很快识别出来，但是偶尔一起玩的好友通过这样的识别方式就比较难了。
这里就是简单提一句。
通过上面提到的一些例子，以及不同场景下标题省略号的处理方式，相信大家对这块的理解会比之前更深。
同样，对于开篇读者提到的问题，更符合的情况可能类似于知乎这种，有完整句子，所以标题是否省略号处理也就没太大影响。
但具体的还是要结合业务详情仔细考量。
而标题内容的展示是否要用省略号处理，优先要看这条信息的业务权重，以及是否会影响用户决策。
所以各位在设计这类内容标题是否要用「…」显示时，也要注意判断自己的产品特性符合哪种类型，而不是随意一句话，说「超出就省略号显示好了」。
最近收到两个问题，正好都与输入框有关：一个是怎么判断输入框要不要放置清空按钮；另一个是输入框超过限制后，是禁止用户继续输入，还是允许超出但会警告提示。
在一定程度上，这两个问题的分析逻辑是类似的，所以放到一起聊正合适。
先看第一个问题：怎么判断输入框里要不要放置清空按钮？
原问题是这样的：
呆呆，我最近在优化公司的产品，遇到一个问题，就是 PM 想在聊天输入框里加一个「清除按钮」，可我觉得不太合适，但是说不出原因，只能说没见过在聊天框里加清空按钮的。这个问题要怎么判断呢？
我们一般会在搜索、手机号输入框里看到类似的清空按钮，比如输错了就点一下，清空后再重新输入。但是很少会在聊天框里看到清空按钮，为什么呢？
主要是「时效性」…算了，这种概念词用多了，发现现在人都不会讲话了。说白话就是「要快」。
无论在登录注册还是搜索的场景下，除了内容本身之外，最注重的就是效率。
譬如有个数据大概是说，用户登录注册花的时间超过某个范围，转化率就会对应逐步降低。而率，就是让用户能快速登录注册账号，使用产品功能。所以设计师们会在登录注册的操作流程里抓住可提率的每个细节，输入框使用效率就是其中之一。
搜索也是一样，当用户有明确目的使用搜索框时，关键词就是用户当下最关注的信息，如果输错，再一个个删除，显得麻烦，所以清空按钮能在这里提高用户的操作效率，甚至 iOS 的搜索组件也会自带一个清空按钮。如果是电商产品，率是能间接提高成交率的。
这里的输错，也有两层意思，一个是用户在输入过程中发现错字，比如登录注册时，发现手机号输错了，一个个删除反而没清空重新输入来得快，因为删了之后，号码要重新背一遍，具体到某个数字，然后接着输，特麻烦。
或者搜索内容时，发现有错别字，删除某个字再重新输入，反而没有清空重新输入来得快，毕竟输入法有串联关键词组的功能。
另一个是反馈的结果不符合用户的心理预期。比如输入手机号已被注册，或者搜索结果不满意要重新输入关键词，使用一键清空都是比较的。
而且输入之后，系统需要给用户呈现结果，如果结果不满足用户预期，还会存在短时间内多次输入与清空的情况。那么，无论是错字还是对结果不满意，清空按钮都可以非常便捷地帮助用户一键清除上次输入的字段，让用户更快速地重新输入新字段，从而提高用户的操作效率。
于是，我们会把这类场景下的「清空」说成是「一键清空」，主要是因为方便。而它的作用就是，在出错的场景下，更快捷地给用户重置的操作。
反过来，各位可能要说：那聊天框不满足这个条件么？
我们接着看聊天输入框。
我们知道，聊天输入框的内容不是固定的，它是根据对话内容而变化的，用户甚至需要花时间持续输入并纠正自己的用词，以及话术的准确度。过程中，如果输入的内容多，而且又是即兴的，耗费的时间与精力也是很大的，清空后也难以再恢复。
它不像登录或搜索，固定的输个数字串或关键词，它是一段完整内容。虽然也会有某一句话或者某个词输错的情况，但是一键清空的操作成本太低，对应着聊天框的高输入成本，一键清空的存在与之并不相符。
于是，这里就引出了一个概念，叫做「输入成本」与「修改成本」。
清空按钮对应的，就是低修改成本，因为简单点击一下，就清空了。它所适用的场景就是低输入成本的情况，也就是前面提到的登录注册或搜索 —— 输入的内容相对固定，且可能反复。
对于登录、搜索等指向性比较明确的输入框来说，用户在乎的是输入和反馈的效率高不高。一键清空操作能带来效率上的提升，而且操作后带来的损失成本是很低的。因此，一键清空操作在这个场景下，对用户来说是安全且的。
但是在聊天场景下，一键清空作为低修改成本的作用是不适合的，因为这时候输入成本比较高。
用户在聊天输入框内表达清楚自己的想法是为了让对方理解，达到交流的目的，这样的内容是不确定的。而且在聊天输入出错情况下，我们有多种操作方式让用户重输，比如键盘快滑定位，触摸定位错字等，都比一键清空重新输入的成本低很多，而它所谓的「便捷性」在这里意义也就不大了。
于是乎，在衡量输入框是否需要清空按钮时，我们首先要知道，清空按钮是低修改成本，那么如果输入框的输入成本比较低时，我们就会使用清空按钮，来提高操作效率。而当输入成本比较高时，一键清空的操作就显得配不上这个输入框了。所以，它在聊天框里就没有存在的必要了。
包括其他非固定内容的输入框，也是一样的道理。
接着，延伸出第二个同学的问题：输入框超过限制是禁止用户继续输入，还是允许超出但会警告提示？
相信各位读完上面的，再看这个问题，应该也能分析出原因了吧？逻辑跟上面的也差不多。
也看输入成本，比如是固定内容的手机号，我们正常会禁止多余输入，因为这样用户更容易判断手机号是否正确。
如果是短长文，说明用户可能是手打字超出限制，这时候如果禁止输入，用户不好在输入框里做内容删减或修改，也会打断用户的输入流，毕竟还没写完就限制了，那得先删掉前面的，再来思考后面怎么写，会乱。而且如果是复制的，禁止输入的话，超出部分就被截断了，也要先删减，再继续复制剩余部分，非常麻烦。除非先在别处删减到限制字数内，再复制过来，但这样又增加了用户的操作成本。
如果允许输入但警告提醒，那么用户就可以根据自己已经输入完的内容做删减修改。
所以对于这个问题，我们从这个视角出发，也能了解一二，就是通过适用场景与输入成本来分析。
当然，以上所有内容更偏向于通用性说明，针对具体业务还需要具体分析。
1、从单复选组件反思功能设计问题
2、标题文案溢出使用「…」合理吗？
3、怎么判断输入框里放不放清空按钮？
文章来源：站酷 作者：呆总、
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
