页面布局是页面设计的一部分，我们不仅要处理页面上视觉元素的布局与排列，还要考虑这些元素在不同大小的屏幕上的适配问题。
页面布局不仅仅是前端同学要考虑的问题，也是设计同学要重点关注的；怎样的布局能更好的展示页面内容同时兼容不同屏幕的大小呢？不同的布局形式下，设计师要着重考虑哪些点呢？今天就来探讨下这个问题。
固定布局（Fixed Layout）：网页上所有的元素宽度以像素（px）为单位。例如，直接设定网页的主体部分宽度为960px/1200px，某个搜索框宽度为60px等等。这种布局具有很强的稳定性与可控性，缺点也显而易见，即不能根据用户的屏幕尺寸做出不同的表现。当前，大部分门户网站、新闻资讯类网站、企业的PC宣传站点都采用了这种布局方式。
PC：大多采用居中布局，所有样式使用绝对宽度/高度(px)，设计一稿合适的尺寸就可以，在屏幕宽高缩小时，使用横向和竖向的滚动条来查阅被遮掩部分；如果大于这个宽度则内容居中，填加背景宽度。页面的模块、弹窗、间距等都是固定尺寸，需要设计补充的页面规约比较少。
优势：这种布局方式对设计师来说是最简单的，跟动态布局相比，能够更好地控制页面的美观度，排版稳定，在窗口拉伸过程中规避了内容重叠或者不规则的情况，仍保持原始比例，静态位置和内容样式。
劣势：显而易见，即不能根据用户的屏幕尺寸做出不同的表现，对于超大屏和超小屏用户不友好。
知乎网页端：
微博网页端：
流式布局（Liquid）的特点是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。
流式布局也叫也叫百分比布局，是移动端开发中经常使用的布局方式之一。元素的宽度按照屏幕分辨率自动进行适配调整，保证当前屏幕分辨率发生改变的时候，页面中的元素大小也可以跟着改变。
流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。固定宽度布局使用的是像素，但是流布局使用的是百分比，这位网页提供了很强的可塑性和流动性。把元素的宽,高,边距,间距不再用固定数值,改用百分比,这样元素的高,间距会根据页面的尺寸随时调整，以达到适应当前页面的目的。屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。
* 百分比是基于元素父级的大小计算得来的；* 元素的水平或者竖直间距都是相对于父级的宽度计算的.* 边框不能用百分比设置
网页中主要的划分区域的尺寸使用百分数（搭配宽度最大值、最小值属性使用），例如，设置网页主体的宽度为80%，最小宽为960px，（最小宽也就是保证页面内容不会错乱的情况下的宽度，到达最小宽度后，不再适应，出滚动条）图片也作类似处理（宽度:100%, 最大宽一般设定为图片本身的尺寸，防止被拉伸而失真）。
注意：
宽度自适应，但是里面的图标、字体等也是固定大小的，并不是所有的东西都是自适应的。一些大的图片，设置宽度为百分比自适应即可，随着屏幕大小进行变化,对于小图标或者文本等, 一般都是固定宽高大小。
同时考虑到页面具体模块、弹窗、字段等在最小宽度下的显示，比如给出字段最小宽度，在最小宽度显示不下时如何处理。可以参考阿Zi之前的文章：https://www.zcool.com.cn/article/ZMTE5NDAzNg==.html
在网页布局中，我们通过设置元素的宽高定义元素的显示大小，但是，在不同窗口大小，不同分辨率下，宽高相同的元素显示状况是不同的。所以，我们往往需要元素的大小能够根据窗口或子元素自动调整以达到自适应。没错，在页面设计中，自适应的规则往往是需要设计补充的最多的。
因为阿Zi所在公司的管理系统是采用左侧导航栏固定，右侧内容区自适应的流式布局，所以举几个实际工作中的应用的规约例子：
a.弹窗自适应
b.模块、卡片自适应
一种是当页面横向拉伸时，卡片里内容个数不变，布局不变。可以把宽度均分成几块，然后内容在模块内居中，给出最小宽度；如下，设定单个最小宽100px，如到达最小宽度后显示不全，出现横向滚动条；更灵活的情况就是收缩时内容/区块布局变动的。同样要设置区块最小宽；向右自适应—横向排序，右侧不够则折行；最小宽度平均分成均等份，剩余宽度均分到其他列。
据统计，PC端用户的主流分辨率主要为 1920、1440 和 1366，个别系统还存在 1280 的显示设备。有些情况下不太好控制内容自适应，那么就需要出2，3套尺寸的设计稿来适配。可以根据具体情况判断系统是否需要进行适配，以及哪些区块需要考虑动态布局，哪些时候出多套尺寸。
优势：流式布局一般用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少)
劣势：因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，显示不协调。
两栏
常见的做法是将左边的导航栏固定，对右边的工作区域进行动态缩放。
两栏的左侧固定宽栏框大多在40到300范围（适用于左侧导航、筛选的情况）。
举例：
Ant Design
三栏
在特殊场景下，左侧会有双重左栏的情况，适用与一级导航简单，二级导航复杂的页面。
举例：Teambition
还有两侧固定，中间自适应的布局，有圣杯布局和双飞翼布局。圣杯布局来源于文章In Search of the Holy Grail，而双飞翼布局来源于淘宝UED。虽然两者的实现方法略有差异，但是视觉上都差不多，就是三栏，然后左右两边宽度固定，中间宽度自适应。
还有瀑布流布局也是流式布局的一种。是当下比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。
优点
1.有效的降低了界面复杂度，节省了空间；
2.对触屏设备来说，交互方式更符合直觉：在移动应用的交互环境当中，通过向上滑动进行滚屏的操作已经成为最基本的用户习惯，而且所需要的操作精准程度远远低于点击链接或按钮。
3.更高的参与度：以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上，从而让他们更乐于沉浸在探索与浏览当中。
缺点
1.有限的应用场景：无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容。
例如，在电商网站当中，用户时常需要在商品列表与详情页面之间切换，这种情况下，传统的、带有页码导航的方式可以帮助用户更稳妥和准确的回到某个特定的列表页面当中。
2.关于页面数量的印象：其实站在用户的角度来看，这一点并非负面;不过，如果对于你的网站来说，通过更多的内容页面展示更多的相关信息(包括广告)是很重要的策略，那么单页无限滚动的方式对你并不适用。
3.关于精准定位：无限滚动加载让用户很难精准定位到某一模块。
举例：pinterest
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。响应式布局能使网站在手机和平板电脑上有更好的浏览体验，也就就是说一个网站能后兼容多个终端，而不是为了每一个终端做一个特定的版本。
响应式布局意味着，无论用户是在iPhone还是笔记本电脑上查看网站，都应该能够访问所需的内容，拥有一致的用户体验，这就要求UX/UI设计人员考虑的问题更多，同时考虑到网站和移动设备的场景，忽略这些肯定会阻碍网站或移动应用程序的用户体验。
接下来从响应式设计的特点着手，展开下设计师需要了解和注意的点。
CSS断点是响应式网站的经典特征。他们的工作是根据屏幕大小将设计“分解”为较小的网站版本。断点通常具有最小和最大宽度，这些宽度决定了用户可以看到哪个版本的设计。
但是，一个网站需要多少个断点才能真正响应？如果设备不适合最小或最大宽度，则网站设计仍然看起来很奇怪，这违背了创建响应式设计的全部目的。
尼克·巴比奇（Nick Babich）指出，大多数响应式网站都需要至少三个或四个断点才能正常工作。根据缩放的大小，内容将相应地进行调整。断点通常针对移动设备，平板电脑和台式机视图进行细分，尽管您可以拥有更多的断点，以便涵盖所有基础，以提高设备的灵活性。许多设计师还包括“较小”的断点，这些内容在内容中会自行调整以保持设计的视觉平衡，但不会发生大的变化。这包括更改字体大小之类的内容，但不包括一般结构。
图像在任何网站中都非常重要，无论是高分辨率照片还是自定义插图。那里的一些设计师相信裁剪图像，以便用户只能在较小的屏幕上看到图像的一部分，因此视觉效果保持不变。对于我们而言，最好的方法是使用矢量图像。
对于许多设计团队而言，最好首先关注最小的屏幕来开始设计。这主要是因为通过将移动设计放在首位，团队可以对内容的去向有一个很好的了解。
响应式设计围绕内容，假设你采用建议的“移动设备优先”方法，则意味着您应该为移动设备分配重要内容的优先级，并随着屏幕尺寸的增加添加更多内容。
当涉及到响应式设计时，与常规设计相对应的只是关注内容。因此，通过首先创建移动版本，我们可以缩小从一开始就需要显示的关键内容（用户绝对需要的部分）的范围。从那里，我们可以在进入更大的屏幕时添加更多的细节和更多的内容，或者找到更好的方式来显示关键内容。
1）注意视觉层次，从最小宽度的断点开始
这建议从最小的屏幕分辨率开始的原因有关。这不仅是要了解内容的哪些部分绝对重要，还在于了解呈现这些内容的最佳方法。
当网站在不同的断点切换时，网站的视觉层次结构可能必须适应，从某种意义上说，它需要适应屏幕尺寸的变化，为了保持产品的可用性，组件也必须适应。
如上所述，在响应式网页设计中使用的每个断点都将有一个最小宽度和一个最大宽度。当使用移动优先的方法设计，一个好的经验法则就是可以从你的三个断点的每个最小宽度开始设计。这样，您将为较小的设备设计屏幕，并在屏幕变大时添加更多内容和UI元素。请记住：向上拓展而不是向下缩放，向上拓展总是容易的。
对于基于Web的产品，按钮可能非常简单。毕竟，光标是几乎任何人都可以使用的准确工具，但我们的手指说的不一样。所讨论的手指的大小可能因用户而异，并且设计人员需要考虑移动屏幕上的可用空间很小。
根据Apple的《人机界面指南》，平均手指轻触为44×44像素。为了提高可用性，请确保针对此平均值对按钮和可点击区域进行适当调整。
如果您依赖导航栏作为查找信息的主要方式，则需要在移动设计中仔细确定导航栏的优先级。该产品的各个方面（例如导航设计）绝对至关重要，需要在响应迅速的网站中进行仔细计划。随着设备屏幕的变小，该导航栏的空间将越来越小。
那么像这些问题就需要我们重点考虑：什么时候隐藏导航选项？全部隐藏吗？首先隐藏哪些？
常用的做法是，将导航、头部搜索、用户信息等内容隐藏在按钮后面，例如我们在手机上经常能看到的汉堡菜单。的确，汉堡菜单并不是唯一的选择，但不可否认的是，整个导航菜单都需要隐藏在智能手机中。
这就是要尝试确定整个产品中最重要的页面，并确保无论使用哪种设备，用户都可以找到它们。在设计过程中尽早完成此优先级设置总是最好的，因此，如果我们从移动设计入手，我们将已经需要包含一些重要的内容。
优势：
a.用户体验友好
随着电脑尺寸多元化，智能设备（pad/智能手机）普及化，在当下追求用户体验至上的时代，网站普遍使用固定的宽度逐渐满足不了现在不同设备与不同分辨率需求。在高分辨率电脑宽屏显示器上，两边留白过多。在手机上显示，内容显示过小，用户为了看清楚，首先需要放大界面，再左右拖拖界面。响应式网站可以根据不同终端、不同尺寸和不同应用环境，自动调整界面布局、展示内容、内容大小，提供非常好视觉展示效果，一致性友好体验。
b.提高转换率和销量
响应式网站意味着您无需在网站设置跳转，从而极大完善了用户体验，这也是响应式网站的最大优势所在。另外，使用集成式设计和CSS表单一类的功能使网站无论在何种设备上都能营造出风格一致的感觉和外观。若熟悉这种布局，用户可以在任何设备上轻松浏览您的网站，进而提高转换率。
c.节省开发投入
摒弃传统网站，选择响应式网页，单从开发阶段就节省大量时间和金钱。为不同的设备同时开发多个网站，意味着后期也需要更多的开发支持费用和维护成本。
d.三站合一，维护简单
电脑、手机、微信三个网站使用的是同一个网址，同一个后台管理，数据同步更新，所有图片和内容只需要上传更新一次即可，维护简单轻松。
劣势：
a.设计与风格有局限性
虽然响应式布局拥有如此显著的优点，但它也并不是十全十美的，在很多方面，它也有它自身的局限性：
自由度太低，局限性较大，这种情况就是必须兼顾移动端以及PC端的表现，比如最常见的移动端并没有悬停效果，PC端就要酌情考虑了。需要考虑在手机，pad，PC上三种屏幕下的页面内元素的呈现，会导致有着非常大的局限。
b.对IE老板兼容性不友好
对于老版本IE（IE6、IE7、IE8）支持不好，这是一个致命的问题，如果你的网站用户大多还采用老版本IE的话，建议不做响应式网页设计。
c.灵活性有所欠缺
基于不同终端的设备属性不同，对产品用户体验要求就会截然不同。内容比较多带有功能性的网站不适合做响应式网站设计，如：电商类型网站，宽屏的pc端内容如果全部要在手机端进行展示，势必导致手机端的界面非常长，需要根据手机端属性进行重新信息框架设计，这样对响应网站要求非常高，实现难度与成本非常高。但是大型网站为了提高用户体验，通常做法，把高分辨率宽屏网站最小的响应尺寸响应到1024px，不再适配手机端，手机端重新设计开发一套手机网站，简单理解为2.5响应，如：电商网站亚马逊、Calvin Klein、Nike、视频网站Youtube，等。
d.速度可能会变慢
由于响应式页面是同时下载多套CSS样式代码，可能在手机上就下载PC、Pad的冗余代码，导致文件变大，影响加载速度。
根据响应式网站的优缺点，我们不难看出：企业官网、单页宣传网站非常适合做响应式网站设计，由于它们的界面内容比较少，结构比较简单，所以在不同终端、不同尺寸设备上进行网站信息框架调整、内容加减、图片、文字、栅格响应比较容易。内容比较多带有功能性的网站不适合做响应式网站设计。
示例1----Dribbble
在1960-2048的屏幕下，显示5列内容
在950-1330-1960屏幕下显示3到4列
在500-620-950尺寸下显示1-2列布局，并且把头部主导航、搜索框、用户设置等内容收起到到左上角菜单：
示例2----Event Apart
互动设计会议Event Apart创造了从其主要网站到其移动网站的无缝过渡。
他们选择在大多数平台上保持大多数相同的布局，平板电脑版本与台式机相同，并且可以使用。这是因为他们为清晰起见选择在白色背景上以粗体显示内容，并且在调整大小时，可以轻松滚动信息。
唯一真正的变化是，对于移动版本，顶部的面包屑折叠成一个汉堡菜单，并用“菜单”一词明确指示。
示例3----Popular Science
无论使用哪种设备，Popular Science都能为您带来出色的用户体验。
正如您所期望的那样，内容处于中心位置，并且具有响应式图像和简洁的版式，Popular Science成功地创建了易于阅读和使用的响应式网站。本网站上的信息以一种可以在各种设备上轻松按比例缩小其所有内容的方式显示。
最后
虽然目前响应式设计的模式的普及还是有很多难题需要突破：比如响应式的图片、跨端交互、更高的性能、全新的合作流程等等。但是随着科技不断发展，响应技术逐渐完善，给响应式设计提供强有力的技术支持；响应式设计可以在不同终端提供完美展示效果与友好的用户体验，吻合用户体验至上的趋势。所以说，响应式设计必定是未来发展趋势。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
设计规范是一个老生常谈的话题了，网上相关的文章也非常多，但我相信有很多设计师对设计规范的理解还是比较模糊，认为设计规范指的就是字体，颜色，控件规范那些，这种理解其实是比较狭隘的。
于我而言，设计规范用一句话总结就是：设计规范是针对特定产品所制定出来的一整套产品标准，包括流程标准，技术标准，设计规则等等。通过这套标准，能减少错误发生率并提高设计质量和输出稳定性。
举个例子，我在做QQ的3D厘米秀项目的时候，一开始合作方提交的设计资源正确率很低，风格也各不相同。然后为了解决这个问题，我在项目中定义了流程标准，资源标准，cp合作标准等等。通过这些规范让多个不同设计团队能合作到一起，提升了整体协作的效率和质量，这些标准就成了设计规范的一部分。
可以说，每个项目因合作方式，人员习惯，落地形式的不同，所形成的规范是有区别的。所以，设计规范更应该是针对项目来说的，除非是问你Android或iOS这种已经广泛适用的平台级规范。不然是很难有标准答案的，回答更应该是一种思路的描述，比如你会如何定义一套规范、解决了哪些问题以及如何验证这套规范真的助力了产品的体验提升。
1. 遵守用户习惯，减少认知成本
Don’t make me think。大家都知道，好用得产品都是尽可能的减少用户思考，不断去贴近用户的使用习惯。比如在iOS系统里想返回上一个页面时，你会熟悉的去左上角找返回操作，但如果把返回操作放在右上角就会很不习惯；再比如对国内用户来说，他们习惯正确按钮用绿色，错误按钮用红色，如果你非要反过来制造所谓的差异化，用户就会感到困惑，误操作的概率也可能会大量增加。
2. 统一品牌性格
品牌性格不论是大到公司层面，还是小到具体某一个产品，都需要有一套品牌识别体系来约束，只有统一得视觉印象才能更好的让用户记住。那这些品牌识别体系其实也是设计规范的一部分，在具体执行中，可以根据一些品牌核心概念规范快速做一些风格决策。
比如腾讯QQ的品牌影像风格关键词是青春、互动，叙事和干净，那么在选择画面配色的时候就可以根据关键词指导画面的选择，使得整体的画风得到统一。
3. 降低新人学习成本
这里所说的新人不单纯指刚入职场的设计新人，也包括刚参与到一个新项目的设计老手，设计规范是能够以的沟通成本实现快速上手。有成熟的控件资源和标杆的设计参考，就算是之前完全没做过的设计师也能搭建出一个还不错的页面。
4. 提高开发效率
有了好的设计规范，开发就能把一些常用的样式进行封装，在需要复用的场景中直接调用。这样做，一方面可以通过调用的方式减少样式代码的复制使用，提升效率的同时降低软件包体积，另一方面也可以减少不必要的工作量，方便后期维护。
5. 保证设计的一致性
有设计规范的约束，能让团队在一个既定的框架内做设计，统一大家的输出质量，从而保证设计的一致性。
设计规范的学习肯定不是靠死记硬背，而是要讲究方法，从我自身的经验来说，我觉得大致可以有以下2个步骤：
在新手期，多去看一些大厂的设计规范，先建立认知，不要求全部记住。把这些规范当成字典，先大致了解一遍，等真正做的时候拿不准再去查阅就好了。这里推荐几个必看的大厂设计规范官网，建议收藏。
其实网上很多设计规范，原理之类的文章，源头都来自于这些大厂规范，想获得一手信息，最好是自己去这些网站多看看。
这也就是我为什么不写具体规范数值的原因，因为网上的资料实在是太多太详细了，写一些重复的知识实在是没多少价值。学知识的路上一定不要什么都等别人喂给自己，需要更多的主动性，这样才能提升自己的学习能力和解决问题的能力。
针对自己要做的模块，有针对性的找市面上大厂的应用作为参考，直接截图标注，自己总结规律印象会更加深刻。
我开始做UI的时候就这样学习的，不知道字体该用多大，间距用多大，颜色怎么用，就直接去找相类似的界面截图参考，量它们的尺寸，吸它们的颜色，然后就这样一步步的把规范经验积累起来了。
比如从QQ的动态tab页面中，我们可以借鉴到很多信息，比如列表的高度，列表左侧的图标尺寸和圆角，间隔线高度和配色，右侧的箭头大小和配色，列表文字的字号和配色，用户头像大小和结合的样式，图标与文字的间距等等。这些借鉴并非是抄袭，要你做的跟这个界面一模一样，只是参考这里面的某几个属性然后结合自己的产品综合运用，减少出错。
发现了吗？一个优秀的界面设计，上面的任何信息其实都可以拿来参考，就看你会不会用了。
需要强调的是，这些参考来的标准，并非是标准答案，还是要根据自己的实际项目需要做调整，只是至少知道一个范围，在这个范围内不大会犯错。
这就像刚开始做设计时一样，去参考这些规范相当于做临摹的练习，这种临摹是需要的，临摹的过程中不断加入自己的思考，然后通过总结，变成自己的知识体系。
随着对设计规范理解的加深，自身设计能力的不断提高，就要开始从设计规范的使用者转变为规范的制定者了。如何制定针对项目的设计规范呢？我的经验是在项目过程中把做的好的和踩坑后的正确解法进行总结，并形成文字，积累多了就形成了规范。要把每一次遇到的问题都当成是一次改进流程和规范的机会。
我自己是有随时记录的习惯，项目中一旦发现问题就会赶紧把它记录下来。有时候甚至还蛮期待出现问题的，因为出了问题才能找到优化的机会，自己也能从中找到解决问题的成就感。
曾经在QQ的3D厘米秀项目中遇到过非常多的坑，然后从填坑的过程中慢慢总结出各种设计规范，去帮助项目减少错误率，提升设计质量。从最终的产出和结果来看，自身的进步是可观的，对产品的帮助也比较大，所以很值得去做。
刚掌握设计规范的时候，干活是特别舒服的一件事，因为做需求可以很快，好像拼拼组件就能完成。但稍微做久一点时间，又会觉得好像没啥进步，天天拼组件，担心影响设计的创意性，真是挺矛盾的。
其实，规范也是要在遵守和引领用户习惯中不断迭代的。既要保持大的设计规范框架不变化，又要在设计的过程中给用户制造惊喜。比如，整个UI的配色和字体需要保持统一，但在一些图形，动效上可以做出亮点，让用户在整个使用体验中既是沉浸的又能有些小惊喜。规范的打破与重建一定是需要一个动态平衡的过程。
设计规范绝对不需要死记硬背，而是要充分理解并灵活使用，才能发挥它的价值。随着UI行业的不断成熟，设计工具的简单化，各种组件化资源和思维越来越普及，可以预见的是未来一般的UI界面会高度组件化，设计师单纯在界面上花费的时间可能会越来越少。
这从行业的发展来说，减少了很多体力劳动，让设计和开发有更多的时间去打磨产品细节，肯定是好事。但对设计师自身来说，省下了以前那种常规设计需求的时间后还能做些什么，设计师的价值又在哪？值得每个设计师去思考。
转自：优设网
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天给大家详细的分析一下移动端选择器。
一.什么是选择器
选择器是一个输入字段， 用户必须在其中选择一个（或多个）选项，这与文本字段中用户可以自由使用的输入区不同。选择器具有各种不同的形状和形式。下拉菜单，复选框，切换按钮，滑块等都是不同类型的选择器，但它们看起来彼此并不相似。这些类型的选择器之间的主要功能差异是用户可以选择的选项数量：一个或多个。
二.选择器的类别
-单选选择器
-多选选择器
1.单选选择器
单选选择器按效果又可以分为：点击选择器、滑动选择器、多联动选择器、开关选择器、可搜索效果的选择器、地图选择器。
特点：同一时间只能选择一个选项，当你已经选择完一项后，准备选取另一项，那么后选的一项会立刻使先选的一项被取消选择。
1-1点击选择器
点击选择器可分为两种状态，状态一为立即触发，当你点击后会立即跳到下一步操作；状态二为再次确认触发，当选中某项时，不会立即触发操作，而是需要再点击别的触发类组件（如保存按钮）后，再执行操作。
-立即触发式：
特点：直接进入，并没有再次确认的按钮，可以让你快速到达想要的目的。
建议：虽然目的能快速达到，不过也很可能会造成误操作，所以在设定这类选择器时要多考虑手指的触碰区域以及每个选择元素的距离，同时正因为是直接跳转，所以应当加入一些操作提示。
举例：汽车之家在用户选择二手车时就会出现此选择器，当我在汽车之家想要选择二手车时，它会弹出立即触发式选择器控件，我们在控件上可以看到有7个圆形选项，分别为：汽车之家诚信联盟、准新车、奥迪、奔驰、宝马、三厢轿车、分期购车，当我点击“奥迪”选项时就会立即跳转选择后的页面，为了让用户知道自己选择后的状态，在跳转页面时还会弹出非模态弹窗的文字提示“共找到1943辆车”。
-再次确认触发式：
特点：这是最为常见的选择器类型，当所在选项选上，除了选择另一个选项之外，便没法取消选中状态。（选且只能选择一个选项）
建议：在设定此类选择器时我们应该从产品的角度去考虑是否给用户一个默认选项，甚至是否考虑给出一个重置按钮。
举例：我刚注册小红书时，在小红书填写信息页面中，它的默认选项是“男”，我点击“女”，则会自动取消掉“男”，它们两者并不能同时存在，并且只有我点击下一步按钮时才会正式确认我选择完成。
1-2滑动选择器
特点：滑动选择器是将需要选中的内容滑动至中部，然后点击确认按钮确认选中后返回选中内容。大多数运用在选择时间或地址上。
建议：滑动选择器的展示区域有限，部分选项会被隐藏，最好是当用户对所有选项都比较熟悉、有预期的时候，才使用它。为了保证手机屏幕触控精度，以免发生误触，滚轮选择器建议控制在5列以内。
举例：在小红书填写年龄信息时，我们只需用手指在区域内滑动即可选择想要的选项。
1-3多联动选择器
特点：多联动选择器是由两个或两个以上的中继器制作而成，第一个中继器选择后，一般会对第二个中继器进行筛选，不过因为显示的区域有限，所以当你要切换时，还只能挨个切换，效率低下。
建议：可以通过数据以及功能来减少选择时间，例如在选择地区时，根据当前GPS定位地理位置，定位相关省级信息及名称，减少滑动操作。
举例：如下，当我选择了内蒙古自治区，那么2级内容就应该筛选掉内蒙古以外的城市，比较适用于省份-城市或者品牌-产品这种类似的选择，当然下面第一张多联动选择器也结合了滑动选择器。
多联动选择器展示的方式非常多，不仅可以用滑动形式展示，还可以用点击、平铺列表等形式展示。
在左图选择城市时，我们必须要先选择省份，再选择城市，最后才能选择县；
右图则没有先后顺序，不过当你首先选择颜色时，如果没有相同尺码的衣服，缺货的尺码则不会被选中，先选择尺码也是相同道理。
1-4切换开关选择器
特点：切换开关选择器有且只有两种选项，用来在开和关两种状态之间切换。开关属于触发类组件，拨动开关时，它所指挥的某个操作会立即生效，常见的使用就是授权。开关的默认状态并不都是关闭的，还要从产品本身的设定上来决策。
建议：如果某开关的功能是用户经常使用的状态，那么可以在默认状态下打开开关，不过需要注意的是在某些特殊的开关按钮需要打开时，必须要提前告知用户。
举例：当我打开UC浏览器的设置时，它的辅助功能就使用了切换开关选择器，切换的开关只需要点击即可。
1-5可搜索选择器
特点：可搜索选择器一般用于选择项较多时，特别是对于电商购物类的APP搜索选择器是必不可少的，搜索选择器会根据用户输入的内容，对中继器进行模糊的搜索，让用户快速找到并选择内容。
建议：在搜索区域输入文字时，可给予用户更多的文字提示以及以及引导类信息。
举例：小红书在搜索时就会出现数字化的信息提示，这样能够很好的引导用户进入到想要的搜索结果：笔记或者商品页面。
1-6地图选择器
特点：作为最特别的选择器，它的功能是复杂的，它的操作方式也是多样化的，地图选择器的操作可点击、可拖拽、可放大缩小等等，它多用于生活类APP。
建议：可以在选择器中加入更多趣味、互动、可感知的设计，如加入过节元素、车辆行驶路径、热门区域、甚至选取后手机的震动等。
举例：
打车类APP必用的地图选择器，滴滴出行的用户可以实时看到车辆信息，可以采用点击、拖拽、放大等操作来选取上车地点，选取后还有文字信息提示，让用户确认操作是否正确。
贝壳APP则用地图选择器来让用户选择二手房，同时也采用了联动式的效果，第一步是查看区域，可以明确看到区域的售房套数，点击选择区域后我们可以看到每个路段的房子套数，点击路段后就可以看到每个楼盘的套数以及均价，直到点击楼盘就会弹出详细信息框。这样有助于用户在选择二手房时从大数据分析二手房的情况，有更好的对比性与选择性。
2.多选选择器
当单选选择器不能满足用户需要时，这时我们就可以采用多选选择器，一般常用的多选选择器都是采用点击的方式，当然也有滑动类型的多选选择器。
2-1点击多选选择器
特点：当用户想要选择多个类别的情况下，我们就可以用点击多选选择器来展示提供给用户选择，通过屏幕点击选中或取消选中该选项，它不会立即触发操作，需要再点击别的触发类组件（如保存按钮）后，再执行操作。
建议：从用户的角度来讲尽量不要强制用户选择数量或者默认全部数量；多选项时触碰区域不能太小，以免造成误操作。
举例：小红书在选择感兴趣的内容时就采用了点击多选选择器，不过在选择兴趣时它就强制用户至少关注4个兴趣，而对于单兴趣或者少兴趣的用户来讲，这无疑会造成用户体验的不佳，被逼再次从中选择次要的兴趣。
2-2滑动多选选择器
特别注明：从用户的角度来看，它可以选择多个区域段的内容，所以我把它分为多选选择器中。
特点：当系统给出的选项不在自己的选择区间时，可以很好的自定义选择区间，把定义权限交在用户手里。同样，它需要再点击别的触发类组件（如保存按钮）后，再执行操作。
建议：在用户滑动操作期间要有明确的操作提示，让用户时刻感知目前处于的状态；滑动区域尽量不要超过100刻度，如果刻度距离太小，用户在滑动时也很难精准的选择范围。
举例：在汽车之家APP中，当我要选择汽车价格范围时就会出现此选择器，我们可以用手指滑动来选取它的价格区间，相对于上半部分的单选价格拓展性更强，用户可以自行选择上半部分的单选选择器，也可以选择滑动多选选择器，给予用户更多的选择。
三、选择器的十大应用要点
1、简单易懂
标题易懂：
在选择器中标题一定要简单明了，很快的让用户知道他在为什么做选择（如：当你关注某烹饪的APP后，它会让你勾选喜欢的菜谱，你的标题就可以用“选择菜谱”四个字，简单明了）
文字标签易懂：
一般使用短语而不是句子，也并不需要用标点符号来结尾。（如：当选择想要的菜谱时，菜谱后的文字不需要加入标点符号）
选取状态易懂：
用户能够明确感知什么是选中状态，什么是未选中状态，什么是禁用状态。（如：选中状态为高亮显示，未选中为普通显示，禁用状态为灰度显示）
反馈提示易懂：
当你在选择中遇到选项限制或是否需要确认操作时，反馈提示一定要一目了然。（如：当你选择某衣服时，S码不能选择，则会用灰度显示的文字代替，甚至可以用中横线划过文字，明确告诉用户不能选择）
2、基本排序
从逻辑顺序：
逻辑排序能让用户很快很准的找到自己需要的选项，特别是对于选择地址/时间/个数等常规的选项时，可以按照字母/远近/大小来进行排序。例如下面在选择地址时，就是按照A-Z字母排序，这样可以大大节省用户选择的时间。
从产品利益角度排列顺序：
当然为了产品自身的利益也可以自己优化排序方式，选项的顺序可以说服用户进行选择，用户可能因为第一个选项在列表中的位置而选择了第一个选项；可以辅助用户，也可以让用户向着产品所希望的方向倾斜。例如你在选择菜谱时，产品为了让用户选择更加优质的菜谱，就会把用户评价高的菜谱放在前列；当然商家也会这么做，例如你要去买某款商品，商家会在选项中把热门、优质的产品放在最上方，让你优先选择。
从用户体验排列顺序：
从用户角度来说哪些对用户体验好，那么就把它排在前面。例如汽车之家在进行车辆类别的排序中就把用户量最多的轿车排在第一位，而把用户量最少的轻客放在了最后一位；同样它在汽车品牌选择中，单独列出了热门品牌把它放在前列，让用户进行快速选择。
3、一致性
视觉布局一致：
每个元素之间的对齐、元素与元素之间的间距、按钮不同状态的视觉体现。一般情况下移动端更倾向于左对齐，这样有利于快速读取选择内容，可以提高用户的浏览效率并减少错误。
图片/插画风格统一：
在图文结合的选择器中，我们一定要保证图片（插画）的优质以及风格的统一。
4、合理运用默认选项
默认选项是选择器的开始状态。在不同的选择器中有不同的默认方式。
默认未选中：
这是最常见的一种状态，特别是对于选择年龄、生日这些个人隐私信息，系统也没有办法进行默认选择。
默认选中其中一个选项：
要想默认其中一项，必须考虑两点因素，因素一：你想要潜意识的像用户传达信息，在单选选择器中默认选择一项后，就可以潜意识的向用户传递信息必须要在这组单选项之中选择一个。因素二就是产品的倾向，例如此产品的性别9成都是女性，那么建议默认选项为女性。
默认选中全部：
其实默认选中全部在用户体验上来讲真的不是那么的友好，例如微博这个选择器界面，刚进这个界面时已经全部勾选中，并且当你没注意习惯性的点击下面的按钮时会生立即效，没有返回的余地。（吐槽：有些APP甚至没有一键取消功能，要一个个的点击取消...）这也是为了产品牺牲掉了部分用户体验吧！
5、给用户更多选择
单选选择器的更多选择：
如果用户不想做出选择，那么应该提供一个中立选项，为用户提供一个明确的方向，中立选项比勉强选择要好。例如在选择行业领域时，以上并没有你所处的领域或你不确定你的领域，你就可以选择“不限”或“其他”。
多选选择器的更多选择：
在多选选择器中，如果不能把控到用户的准确选项区间，那么可以考虑滑动多选选择器，让用户有更多的选择区间，不管是汽车之家还是懂车帝在选择车辆价格上两者都是采用的相同方式。
6、控件状态
选择控件在操作过程中必须更改其状态/外观，要明确让用户知道是否能选中，是否被选中。控件状态一般分为三种：未选中、选中、禁用。
未选中
选择器的开始状态，向用户表明，可对该选择控件进行操作。
选中
用户操作选取状态，选择控件处于被选中的状态。
禁用
一般情况会为灰色显示，用户将无法与选项进行交互。
7、操作提示
指的是用户在操作中让用户得到相应的反馈，用户根据这些反馈可以判断当前状态以及操作后状态。在选择器中，操作提示一般用辅助文案提示及非模态弹窗提示。
辅助文案提示（选择前与选择中）：
辅助文案指的是在选择控件主体之外另外放置一些文案信息来充当说明，例如下面是地区选择，我在选择不同层级的区域时，它的上方会出现辅助提示文案，让你明确的知道你上一层级选择的是什么。
同样，当我在选择价格区间时，滑动选择器的左上方一样有文字类的提示：
非模态弹窗提示（选择后）：
非模态弹窗一般出现在用户操作完的跳转页面中，为了让用户感知所选的选项在页面的状态，如下，非模态弹窗告知用户一共有7辆车符合标准。
当然除了非模态弹窗外，还有模态弹窗，但是用户体验极差，目前很少使用，所以就不列出来了。
8、合理使用操作区域
扩大点击区域：
在选取按钮类的操作时，容易出现点击不到或误操作的现象，我们可以通过扩大点击区的交互区域来提高易用性，例如下图，虽然按钮在左边，但是可以把横向区域都列为可点击区域。
当然我们也可以从设计的角度来扩大视觉范围，从而也提高了点击范围，这样的处理不仅提升了视觉层面，还提升了交互体验。（图文结合方式）
注意交互间距：
在元素与元素之间一定要有合理的交互间距，不然很容易出现误选的情况。
合理利用有效区域：
在选项较多的选择器中，我们可以利用好选择主体控件之外的区域，例如在选择城市/品牌时，我们可以做A-Z index式字母交互区，帮助用户快速找到想要的选项。
9、趣味性
让用户选择本来就是一件枯燥乏味的事情，如果让这件事变得有趣那么会极大的提升用户体验。
从文本层面：
例如当用户填写性别信息时，你给予用户的文字信息并不是“男”/“女”，而是“帅气的boy”与“酷酷的girl”，这样会让用户觉得这是一件比较有趣的事情，而不是被动选择。（注：这样的取名一定要符合产品的特性）
从视觉层面：
加入可玩儿性的选项，例如汽车之家的头像切换，可以选择自己喜欢的头像。（头像并不是强制选择的，如果不进行操作则是默认选项）
从交互层面：
让用户去享受选择。例如Soul的星球首页就做的非常棒，在未选择状态他的人物会360度围绕着转动，当然你也可以快速拖拽，或者放大缩小，可玩儿性十足，并且在内部设定了最匹配/新人的高亮显示，协助用户去选择。
10、合理使用选择器
不同的产品在使用选择器时都各有不同，因为每个选择器都有他的利弊，而真正要怎么去选择还要根据产品本身来定。
那么我就拿目前市面上最常见的5个地址选择器的类型来分析一下利弊：
1/多联动选择器（平铺式）
货车帮采用的是多联动平铺式选择器，它最大的特点就是能够一眼就看清楚所有地址，不过地址多时需要花时间去找，只是当你经常使用此功能时便会形成记忆，再此搜索的时候就能形成记忆点击，效率很高，并且在操作外还有路径提示，不仅可以帮助你记住层级选项，还可以实时返回路径进行重新选择。
手势操作：点－点－点
2/多联动选择器（列表跳转式）
闲鱼采用的是多联动列表跳转式选择器，这个选择器最大的缺陷就是选择三级之后用户可能会忘了上一级的内容，那么就又要切换到上一级，闲鱼采用它的原因是因为它只有二级联动，不存在遗忘现象，不过这样列表式的选择效率并没有平铺的效率高，人眼习惯扫视横向内容，所以横向的内容获取往往要比纵向的多，在地址选择器上我个人是不太建议采用多联动列表跳转式，因为并不也不直观。
手势操作：滑－点－点
3/多联动选择器（列表式）
转转采用的是多联动列表式选择器，它的优点是可以根据右侧字母来找城市，数据偏大也能够很快的查找。不过如果在层级的选项中出现错误，同样就要切换到上一级，并且在操作中没有辅助信息提示。
手势操作：滑/点－滑/点
4/多联动选择器（下滑式）
安居客采用的是多联动下滑式选择器，这种形式的选择器不会遮挡后面的主要内容信息，在选择完地址之后能立即看到地址的筛选结果。优点是能快速选择多级地址，并且层级分明，扩展性较强可以做成地址多选。缺点是不适合3个层级以上的地址选择。
手势操作：点－滑/点－点
5/地图选择器
美团外卖采用的是地图选择器，这个选择器一般用在需要精准定位的生活类APP中，它的优点就是能够快速精准定位，并且自动录取定位信息，它的缺点也显而易见，不能含带层级并且对范围也有约束。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
互联网下半场，所有的比拼都在产品体验；然而“体验”是一个非常抽象的词，我们怎么把一个抽象的概念拆解成可落地执行的策略，作用到企业中后台产品上，怎么衡量策略的有效性，这一直是我们团队面临的重大课题。
业界关于体验度量的经验
目前关于“体验度量”比较成熟的理论模型当属 Google 的 HEART 模型，另外还有 ISO 9126 软件质量模型和Davis 的 TAM 技术接受模型。后人在此基础上进行了很多实践，譬如 SAP 的用户体验问卷（UEQ）、Oracle 的客户体验价值公式（CX）等。公司内部各个 BU 也在不断的尝试和探索，譬如新零售技术团队的 TES 模型。技术团队研发效能的 DEVA 模型，国际 UED 语音设计的 HII 模型，阿里云的 QoUE 模型。纵观这些模型和实践，大多是主观数据和客观数据的结合。
我们团队也曾提出过 TECH 、PTECH 模型，但由于模型的操作门槛较高、对埋点数据有不少要求，难以推广到各条业务线。痛定思痛后，我们决定重新回归业务，回归“体验度量”的初心，去繁从简，提高通用性。
企业中后台产品的特点
企业级中后台产品最大的特点是任务性质非常明确；用户使用这类产品通常是为了解决某个确定的问题点，期待用新的解决方式降本增效。
桌面研究也表明：可用性问题是软件行业的普遍问题：在英国，一般商用计算机用户只有30%-40%的有效生产率；软件缺陷中，48%是可用性问题。
正是基于上述原因，我们尝试提出了“两章一分”的标准，分别从设计验收、可用性测试、易用度分数等三个维度对产品体验进行体检和把关。
什么是「两章一分」
1. 设计验收章
“设计验收章”主要有 3 个维度：产品还原度、任务流程跑通率、单页面加载时间。
产品还原度：指技术同学的最终产出与设计稿之间的差异；
汇总人工智能线、技术风险线等 5 个产品近 1 年的可用性测试结果。除功能、性能问题外，高频体验问题主要集中在“帮助引导”、“操作反馈”、“任务流程”、“概念术语”、“功能入口”这 5 个方面。同时，结合之前项目沉淀的设计经验和设计工具，我们最终将“产品还原度”的子维度定为“信息导航”、“帮助引导”、“操作反馈”、“文案名词”；每个子维度用 2-3 句描述来进行评分。
任务流程跑通率：验收确认能跑通的主干任务流程数，在所有主干任务流程数中的占比；举个例子，设计稿中枚举了 10 条主干任务流程，验收发现其中 9 条已跑通，那么任务流程跑通率就是 9/10*100%=90%。
单页面加载时间：接入雨燕性能指标数据的产品看“首次有效渲染时长 fmp”这个指标；未接入的产品直接主观判断，超过 3 秒的视为不合格。
2. 可用性测试章
“可用性测试章”也在验收阶段执行，同样有三个参评维度：最终完成率、人均求助次数和高阻碍页面。
我们没有考虑将可用性测试的常用指标——操作时长作为参评维度，主要原因是企业中后台产品类型多、使用场景复杂程度各自不同：用语雀创建企业空间只需要 5 分钟；用云凤蝶搭建一个后台页面可能需要 60 分钟，用 sofa stack 创建并发布一个应用可能需要 2-3 个小时……难以确定可以作为标准的具体操作时长。
3. 易用度分数
“易用度分数”标准为 5.5 分。
「两章一分」的实践
截至 2020 年 9 月，已有 58 个 产品实践过“两章一分”系列方法，基本覆盖平台设计团队支撑的重点项目及 UV 超过 100 的产品。详细数据如下图：
完整体验“两章一分”的 18 个产品，仅可用性测试就帮助发现 364 个问题，平均每个产品发现 20 个问题；其中，“九州2.0 发布部署”发现问题数多达 53 个。
设计验收：共创式验收
企业中后台产品生产阶段中，由于一般没有专门的测试同学，因此设计验收都是由设计师或 PD 单独执行，没有作为必选环节，有时候甚至会因为开发周期紧张而直接略过；既没有方法论，又缺乏仪式感。
“两章一分”的实践中，我们首次践行“共创式验收”，以项目组会议的方式，邀请各个角色共同参与到验收环节中：如果产品没有什么技术门槛，那么各个角色分别独立操作核心流程；如果产品有一定的技术门槛，则由技术同学操作核心流程，同时共享屏幕，其他同学从旁观察。操作完毕后，项目组内共同讨论发现的体验问题，并将问题落地到 Aone 中进行排期管理落地。
可用性测试：引入“技术支持”+圈定测试人数+ 线上测试降成本
企业中后台产品通常有一定的技术门槛，以 SOFAstack的测试任务为例：
使用 sofaboot 技术栈，创建 “hello world” 应用，通过“经典版”发布部署模式发布成功。
测试过程中经常会出现一些涉及到底层技术系统的问题，非设计同学能解决，因此我们建议做企业中后台产品的可用性测试时，需要配备至少一名技术支持同学，以备不时之需。
Jakob Nielsen 在 2000年提出测试 5 人就能发现 85%的可用性问题；结合我们的实际业务场景：有些产品真实客户非常难找；前期“共创式验收”已跑通核心主干流程；因此我们将测试人数限制为 3 人。
我们开始实操案例时，恰逢疫情期间，于是就引入了线上远程测试的方式；后续实践下来，发现远程测试能在观察、分析阶段显著降低执行成本。
通过钉钉或阿里郎发起视频会议，邀请参加测试和观察的同学入会，请测试用户共享操作屏幕，主持人录屏捕捉用户操作轨迹，PD、技术等项目组成员从旁观察。测试结束后，使用语音转文本工具，快速将音频转成文字。这种模式最大的好处有两点：
执行阶段的多样化
最开始提出“两章一分”的时候，我们原本希望这套标准能被作为判断产品体验是否好用，能否上线的标准之一；但实际并未推动成功。这里面有很多原因，其中一个非常实际的问题是很多产品需要调用线上数据库才能跑通核心流程，在测试阶段没法跑通；这就导致在测试阶段做可用性测试无法真实还原用户场景。
此外，设计师或 PD 新接手某款产品时，也希望能通过可用性测试的方式来快速了解产品问题。回归到“两章一分”的初心——帮助产品发现体验问题，因此，我们拓展了方法的执行阶段，不再局限于测试或验证阶段，只要场景适合，都可以用。
产品简介
LinkE 研发运维中心是云通未来 Serverless 战场的重要产品；业务方希望用该产品来整合研发同学日常高频使用的研发、运维、中间件平台，大幅减少平台割裂和跳转，提供沉浸式的产品体验。
目前该产品还处于 0-1 建设的阶段。
实践过程
结果用户在任务 2 遇到高阻碍页面，导致可用性测试结果为“不通过”，任务 2 的易用度分为仅 4.4 分，显著低于 5.5 分的参考标准；最终发现 30+ 问题点，并推动 PD 思考产品逻辑设置是否合理。
实践效果
在实践过程中，我们发现企业中后台产品的典型场景大致可以分为 4 个场景；不同场景面临的设计项目有所偏重；不同设计项目在体验度量方面的切入点也有所不同。譬如：云凤蝶是一个典型的沉浸式画布页面，所有操作几乎都是通过编辑器属性面板来调整，那么如何来评估编辑器的效率呢？通过一系列实践和思考，我们提出可以通过“高频属性查找、配置的步骤数和时间”、“设置相同组件属性的耗时变化”等指标进行衡量。以下是我们根据不同典型场景、设计项目提出的体验度量切入点。
「两章一分」的未来
经过 S1 长达几个月的探索：我们制定了“两章一分”的标准；对 30+ 产品进行了易用度分数的测试，捕捉分数基线；提炼实操方法技巧，并赋能给各位设计师；联合设计师和业务方跑通近 20 个案例。不管是问题发现数量，还是设计师、业务方的主观反馈，都让我们坚定“两章一分”在企业中后台产品体验优化中是一个相对有效的模式。为此，S2 我们打算继续深化。
我们团队当前支持的企业中后台产品以 0-1 阶段产品为主，PD 通常缺少用户意识和体验优化手段，这就导致了设计稿还原度较差、产品上手门槛较高。针对这一现状，我们尝试性地提出了“两章一分”这个评价标准，从设计验收、可用性测试、易用度分数 3 个维度来评价产品当前的体验现状。
通过 S1 50+ 产品的实操，我们一边不断完善评价标准和实操经验，一边总结体验度量经验；共帮助 18 个产品发现 364 个产品，并在 link 、sofa 等重点产品线中落地到业务生产环节中，在业务方层面收到良好反馈。
在这过程中，我们总结了适合不同场景、不同设计项目的体验度量切入点，验证了这种方式在当前企业中后台产品中确实有效。后续我们将尝试细化标准，闭环案例，对内对外发声等方式，更好地推动体验思维在企业中后台产品生根发芽；同时，也期待能跟对这块感兴趣的同行朋友们多多交流。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
用户画像作为一种设计工具，可以很好得帮助设计师跳出“为自己设计”的惯性思维，聚焦目标用户，发现核心价值，赋能产品。
在产品研发过程中，产品、设计、研发等人员经常会提到“我们要为目标用户设计”、“我们的用户是谁”等字眼，可见找准目标用户在产研过程中至关重要。用户画像作为一种设计工具，可以很好得帮助设计师跳出“为自己设计”的惯性思维，聚焦目标用户，发现核心价值，赋能产品，在互联网各类型产品中有广泛的应用。
本文将介绍用户画像概念、价值以及如何从0到1构建用户画像，希望阅读后能让大家了解用户画像相关理论，并有助于后续对用户画像的深度学习。
目前业界常使用的用户画像概念有2种，一种是User persona，一种User portrait，也有翻译为User profile。
第一种用户画像，即User persona，根据Alan Cooper的《About Face》，是基于产品对真实世界的观察，抽象出来的具有代表性的虚拟用户模型，有时也被称为综合的用户原型（Composite User Archetype）。这个概念最早由Alan Cooper在《The Inmates are Running the Asylum》（软件创新之路）一书中提出，后续在多处书籍进行了不停的完善。
这个画像主要特征如下：
1、描述一个用户画像包括角色描述和用户目标
这里角色描述是指如名称、年龄、位置、收入、职业等，这类角色描述主要是为了使用户画像更丰富、真实，具象；重点关注的是用户动机，用户目标是其动机。
2、可以代表相似的用户群体或类型，也可以代表个体
User persona是抽象的、虚拟的，代表一个典型的用户群体；虽然也可以代表个体，但个体并不是实际独立的个人，而是从实际观察研究中综合而来。
3、须针对具体情境-具体产品的行为和目标
User persona研究的是用户在具体情境下对产品的使用，关注其在一定范围内的行为、态度、能力、动机等。即使同一个角色，在不同产品下的动机也是有差异的，一般来说不轻易在不同产品间复用，需要考虑不同类产品的切入场景。
第二种用户画像，即User portrait，是指用户信息标签化，通过收集用户多维度的信息数据（如人口统计属性、社会属性、行为偏好、消费习惯等），并对其进行统计、分析，从而抽象出的用户信息全貌，相比user persona，它更侧重于数据挖掘、标签体系搭建。
这类画像主要特征如下：
1、真实性：集合了每个个体的真实信息，如既有人口统计属性等静态信息，也有用户行为的动态信息。
2、时效性：用户动态信息并非一层不变，可以实时追踪其变化。
3、覆盖度广：既能监测到用户感兴趣的内容，也可以看到其不感兴趣的内容，维度众多，颗粒度粗细均有。
以下是这2类用户画像的简要差异对比：
本文重点介绍第一种用户画像（user persona），至于如何创建数据画像标签及应用，会在后面的文章中介绍到，此处不再赘述。
用户画像作为一种设计工具，其作用贯穿产品生命周期的前中后。结合设计工作的几个阶段，画像的价值主要有：
1、设计前：帮助确立产品定位、目标
2、设计中：帮助确立设计目标、设计策略与准则
3、设计后：促进其他工作，如市场推广、运营活动、销售规划
整体来说，用户画像（user persona）多采用定性的研究方法来进行角色划分，主要可采用的资料来源有：人种学研究、情境调查、观察法、访谈法、桌面研究等，具体实行时会根据业务情况稍作调整。
本文结合酷家乐-快搭、赢客2条业务线经验，梳理了从0到1构建画像的流程与方法，如下图所示：
Step1：确立目标与画像维度
明确业务目标与用户角色，不同的角色与目标在收集信息时有所差异，进而影响到最终得到的画像结果。因此在做画像之前，需要考虑清楚画像目的。明确目标后，就可以结合目标与角色，制定出画像信息维度。
此处有2个注意点：
1、通用信息有哪些？2、如何筛选出目标用户？
针对第一点，通用信息维度可以结合用户画像的构成要素，自身业务情况有选择性的摘取。这里需要注意，to C和to B类的信息维度会有些许差异，比如to C属性产品会关注用户的性别、年龄、家庭情况、爱好习惯等，而to B类则不太关注这些，它们会更侧重用户的工作能力、工作内容、使用工作等等。
用户画像构成要素汇总：
针对第二点，由于是创建用户画像，我们需要尽可能覆盖不同用户。那找谁进行研究呢？这里介绍2个小tips。
Tips1：用户筛选条件
寻找与业务紧密相关的产品、运营，一起讨论确定用户类型，在讨论中我们会定义符合条件的用户，得出一张用户筛选条件表，进而根据这张表邀约用户。
Tips2：工作职能筛选
针对一些to B类岗位职能划分清楚的产品，可以基于工作职能寻找用户。实操中需要结合实际情况，看是否需要区分管理岗与普通执行岗。
以快搭智能设计业务线为例，在用户画像项目中
业务目标：整体全面的了解用户特征、产品认知、使用场景与痛点
目标用户：考虑目标是希望先对快搭工具侧使用用户有个全面、整体的认知，问卷法中D端&B端用户有访问&开通过快搭行为都算，而在深入挖掘场景与痛点时，结合问卷的反馈，D端和B端重点寻找活跃用户，并细分了用户身份类型。
这2者结合，最终梳理出快搭的用户画像维度。
Step2：确立调研方法
确立画像信息维度后，需要结合用户、时间精力、经费等因素，选择合适的调研方法以实现信息收集。常用的调研方法有3种：
定性研究：如访谈法、二手资料研究
定量研究：如问卷调研、数据分析
定性+定量：上面2种方法的结合。
每种方法如何选择？可以从调研方法的差异性、产品所处生命周期，再结合实际时间精力、经费等情况酌情选择。
1、调研方法的差异性
定量和定性是一个相对的概念，定量法着重了解“是什么”，即发现用户做了什么，挖掘事实信息。而定性方法着重了解“为什么”，即挖掘用户行为背后的原因，从而理解现象。
2、与产品生命周期对应的调研方法
新生期：这个时期产品尚未定型，目标用户也在市场探索中，可以尝试通过访谈法，找专家用户或竞对产品的用户，重点挖掘TA们使用产品的场景，核心痛点是什么，以便进行MVP版本的验证。
成长期：这时产品已经进入用户快速增长时期，随着体量的变大，用户会出现分层，暴露的问题也会越来越多，可以尝试通过定量法进行用户分层，再辅助定性了解每类用户，针对性解决问题。
成熟期：用户体量趋于平稳，产品一方面需要维稳，持续满足现有用户的需求，提升产品体验；另一方面需要尝试突破，找到细分市场，以挖掘新的增长点。可以尝试先定性挖掘蓝海，再定量进行验证。
衰退期：定性了解原因，调整产品。
以快搭智能设计业务线为例，综合了目的、产品周期、调研方法、时间精力等因素，采用了数据+问卷+电话访谈三种方法结合。
Step3：制定计划与数据收集
在明确目标与方法后，需要对整个研究进行细化，制定具体详实的执行计划并落地，把控整体节奏以收集有效的信息。
例如，若使用问卷法，则需要进行问卷设计——被访者选取——问卷投放——问卷回收。若使用访谈法，则需要准备访谈前中后的相关资料。采用不同方法，执行环节需要注意事项有所不同，可以针对性查阅相关方法的工具书、文章，此处不再赘述。
Step4：分析资料，角色聚类
第三步骤收集整理到有效信息后，需要识别关键的行为变量，将调研到的用户与行为变量进行一一对应，并识别差异化行为模式。
在寻找可能导致用户间行为差异变量时，结合以往经验，笔者总结了一下可供参考的维度。
以行为变量为依据进行用户对应时，不必追求绝对的精准，只要相对能映射清楚即可。梳理完后，观察可发现某些用户群体聚集在几个行为变量上，它们构成了一个显著的行为模式，由此聚类出某个角色类型。依此类推，可以发现几个不同的行为模式。为保证全面，映射完最好遍历一下，检查是否有用户或变量的遗漏。
以快搭为例，用户在使用智能设计工具时，行为变量可细分为：职业类型、专业技能水平、使用方式、看重因素等等，一一对应后聚类出几大类角色类型，比如其中一类追求速度，看重整体效果；另一类，重过程，讲究细节。
除了上述方法外，针对to B类的企业级产品，当用户的职能属性很强时，可以将企业职能作为划分角色类型的依据。这时，只要针对每类角色抽样出典型样本，保证完整性，进行调研即可。
Step5：综合特征，产出画像
完成角色聚类后，梳理每类角色的行为、目标、痛点等维度特征，形成画像的基本框架，并对每个角色进行属性信息、场景等详细描述，让画像更加丰满、真实。
此时需要注意：
1、虽然网上有提供很多画像模板，但只是参考示例，大家需要根据自己收集到的信息，制作属于自己业务的画像；
2、最好为每个画像贴上一张符合角色特征和所处环境的照片，传递更加情感化的信息，带入感更强。
3、确立画像优先级。根据Alan Cooper的建议，一个产品最好不要超过3个用户角色，在得出画像后，需要结合覆盖人群基数大小、收益潜力、竞争优势、业务规划等维度去评估重要程度，定义好主要角色、次要角色、补充角色等
4、用户画像作为一种设计工具，不是一层不变的，需要随着时间推移不断进行迭代，在产品积累了一定用户量时，可以使用定量法进行验证，补充优化更多维度信息。
以快搭为例，某类角色-销售型导购画像如下：
Step6：结合产品，画像落地
用户画像只有落地，助力产品设计，才能体现其价值，否则就是空中楼阁。
在创建完画像后，可以组织分享画像结果，让团队内成员对服务的用户达成共识，进而探讨产品的新机会点或改进点，逐步落地到产品设计、推广营销中。用户画像在设计前中后如何应用，后续有文章进一步详解，本文不再赘述。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
可以说，每个项目因合作方式，人员习惯，落地形式的不同，所形成的规范是有区别的。所以，设计规范更应该是针对项目来说的，除非是问你Android或iOS这种已经广泛适用的平台级规范。不然是很难有标准答案的，回答更应该是一种思路的描述，比如你会如何定义一套规范、解决了哪些问题以及如何验证这套规范真的助力了产品的体验提升。
Don't make me think。大家都知道，好用得产品都是尽可能的减少用户思考，不断去贴近用户的使用习惯。比如在iOS系统里想返回上一个页面时，你会熟悉的去左上角找返回操作，但如果把返回操作放在右上角就会很不习惯；再比如对国内用户来说，他们习惯正确按钮用绿色，错误按钮用红色，如果你非要反过来制造所谓的差异化，用户就会感到困惑，误操作的概率也可能会大量增加。
其实网上很多设计规范，原理之类的文章，源头都来自于这些大厂规范，想获得一手信息，最好是自己去这些网站多看看。
这也就是我为什么不写具体规范数值的原因，因为网上的资料实在是太多太详细了，写一些重复的知识实在是没多少价值。学知识的路上一定不要什么都等别人喂给自己，需要更多的主动性，这样才能提升自己的学习能力和解决问题的能力。
2）针对自己要做的模块，有针对性的找市面上大厂的应用作为参考，直接截图标注，自己总结规律印象会更加深刻。
我开始做UI的时候就这样学习的，不知道字体该用多大，间距用多大，颜色怎么用，就直接去找相类似的界面截图参考，量它们的尺寸，吸它们的颜色，然后就这样一步步的把规范经验积累起来了。
比如从QQ的动态tab页面中，我们可以借鉴到很多信息，比如列表的高度，列表左侧的图标尺寸和圆角，间隔线高度和配色，右侧的箭头大小和配色，列表文字的字号和配色，用户头像大小和结合的样式，图标与文字的间距等等。这些借鉴并非是抄袭，要你做的跟这个界面一模一样，只是参考这里面的某几个属性然后结合自己的产品综合运用，减少出错。
发现了吗？一个优秀的界面设计，上面的任何信息其实都可以拿来参考，就看你会不会用了。
文章来源：彩云译设计 作者：彩云
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
你觉得设计系统重要吗？那目前手里的设计系统是在灵活运用？还是落灰、摆设？你对设计系统理解有多深？它在你的设计中有多大的用处？节省时间、减少出错率、视觉一致性还是仅仅觉得就应该有个规范？那怎么避免设计系统带来了统一和便利，但同时失去了变化和新鲜感？
设计系统是今年来热门的话题之一，想要带来良好的用户体验，设计系统就是其中重要的一环，那它和设计规范、设计模式、设计语言、设计原则有什么关系？
设计系统用一套连贯组织、相互关联的模式和共享实践以达到数字产品的目的。简单的说就是一系列可重用的组件和它们的使用指导文档，在制作这些组件的过程中会考虑到公司的设计理论和品牌化(颜色，文案，字体等等)，所以它们也通常包括在设计系统里。设计系统为公司的各种产品提供了基石和指导。是一种动态的，是需要维护与改进的。
设计模式是一种经常性，可重复使用的解决方案，可用于解决设计问题，我们经常会说解决整个方案我们要运用什么样的设计模式。
设计语言是把设计作为一种“沟通的方式”，用于在特定的场景中进行内容与信息的传递。设计语言可以理解为由品牌基因+设计规范+多场景应用三大要素组成的一套设计应用规范系统。
设计原则可以理解为设计语言中的语法，是构建设计语言系统的起点，用于传达品牌主张或设计理念，它将指引业务设计执行的方向。
比如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模板。
标注方面，目前我们团队使用的是蓝湖私有化。
一般情况下，公司有不同的产品线，且都需要长期的开发与迭代。
公司中，越来越多的设计师加入，设计风格需要统一。
设计体系里面包含了设计语言、设计规范，需要与前端、品牌、动态设计、 用户研究等沟通，还是需要迭代优化的，这是非常繁琐耗时的项目，初期会非常的艰难，当设计师开始做组件时，也是非常耗时的工作，需要考虑不同场景下的使用情况以及设计的延展性，都需要投入大量的设计人力。
聊了这么多，大家对设计系统有了一定了解，建立好设计系统可以事半功倍，以此提升效率才能提升UED价值。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天早上，权威色彩机构 Pantone 公布了2021年度双流行色：灰+亮丽黄。
这是继2016年水晶粉+宁静蓝之后，第二次推出组合年度色，寓意光明，传递力量与希望。
灰+亮丽黄这两个独立的色彩，联手打造出梦寐以求的色彩组合，像是自然风化的岩石上浮起的日出，带来了一种更深层的体贴和踏实感，同时也表现了对未来充满希望的乐观精神。
这正是经历过艰难的2020年后，世界所需要的。
PANTONE 17-5104 Ultimate Gray是海滩上的鹅卵石和自然元素的颜色，其风化的外观彰显了经得起时间考验的能力，象征着坚实而可靠，体现了恒久不渝的感觉。
PANTONE 13-0647 Illuminating则是充满活力的明亮欢快黄色，是充满阳光的温暖黄色阴影。
灰与亮丽黄的双流行色组合，突显不同的元素如何互相支持，寓意着阳光和友善，凝聚了更深程度的体贴感。
这个色彩组合实用又稳固，温暖又乐观，为我们带来韧性和希望。
Jil Sander Pre-Fall 2021
当人们期望寻求能量来强化自己，克服持续的不确定感时，坚实可靠而又热情洋溢的色调，恰好能够满足我们对生命力的追求。
在过去几年里，潘通的选择充满了社会意义，被看作是对全球情绪的捕捉。
而在经历了记忆中最黯淡的一年之后，2021年的组合色旨在以坚韧的精神基底传递积极和幸福即将到来的讯息，给人们带来希望，让人感到一切都将变得更加光明。
Prada 2021SS
持久耐看的灰和生动活泼的亮丽黄，联手表达出我们所需要的坚韧的正向态度。
这种力量与正向的结合，是一种结合了洞察力、创新和直觉，以及对智慧和经验尊重的颜色。
它启发了重生的能力，推动我们前进，迈向新的思考方式与新观念，最能代表 Pantone 2021年度代表色的精神。
针对这组双流行色，Pantone 还推出了5种不同的官方配色系列，表现灰和亮丽黄的多功能性，以帮助大家更好地理解和应用。
AVIARY 鸟舍
▼
【鸟舍】是生动活泼，令人愉悦的色彩组合，有着异想天开的独特性和极强的爆发力。
持久耐看的灰带来属于大自然基本元素的颜色，温暖乐观、充满活力的亮丽黄为色彩组合注入更多能量，高雅的云端舞者白则为系列注入戏剧感。
ENLIGHTENMENT 启蒙
▼
【启蒙】是一个面对未来、年轻的色彩故事，唤起一个催眠的空间，将我们的心灵延伸到另一个界域，激发出我们重新开始想象的渴望。
灰与亮丽黄的配比，融合了智慧、经验以及我们想要前进，迈向新的思考方式与发掘新的深刻见解的渴望。
与此同时，银金属色的铅水晶则增添一丝闪烁的月夜光泽。
INTRIGUE 魅惑
▼
【魅惑】是一个迷人的色彩百汇，拥抱各种影响因素的大融合。一方面流露奇特又强烈的个人主义风格，同时又显示一种大众化的吸引力。
其四季皆宜的持久性，在加入稳定可靠的 P灰与象征阳光的亮丽黄之后被突显出来。
ORBITAL 轨道
▼
【轨道】反映了探索星际旅行的狂热，是在令人着迷的外太空星系中发现的闪烁着金属色调的调色板，能让人联想到遥远的星系。
SUN AND SHADOW 光影
▼
【太阳与阴影】是一种永恒而无性别的色彩组合，描述着我们周围的原始之美。灰和亮丽黄为大地色系注入更多的希望和力量，将今年的双色年度色的特殊韵味发挥到。
除了这五组配色之外，Pantone 还推出了一系列灰+亮丽黄的色彩营销案例。
色彩营销案例
可以预见，在接下来的一年里，我们会更多地看到这些色彩，因为它们意味着对时代精神的内在定义，传达着消费者的期望与态度。
现在，咱们就先来康康这组能够引起全球共鸣色彩的无限可能吧！
时尚领域
Agatha Ruiz de la 2021SS
Prada 2021SS
Alice + Olivia 2021SS
友善、愉悦又乐观的亮丽黄，是一种年轻个性的色彩，明媚肆意，预示着阳光灿烂的一天即将到来，让人忍不住想要亲近。
把亮丽黄带入服饰中，可以给整个造型增加一种明亮感。
Alexander Mcqeen 2021SS
Brandon Maxwell 2021SS
灰有着洗净铅华的淡然与不争，它游离于所有颜色的边缘，却能与任何色彩作搭配。彰显着低调内敛的品质感和恰到好处的高级感。
Prada 2021SS
将灰与亮丽黄相结合，给低调耐看的灰加入一些明亮感，可以带来一种另类吸引力，传达出阳光与力量的讯息。
除了服饰之外，灰和亮丽黄还经常出现在围巾、鞋履、包袋、披肩等配饰上，产生一种夺目的搭配效果。
美妆领域
灰与亮丽黄是热色调与冷色调的混搭，运用在美妆领域可以营造戏剧化的风格。
家居装饰领域
灰与亮丽黄的组合，非常适合用来为家里任意一个房间的气氛定调，增添一丝阳光与正面的气息。
黄色往往作为家具家居上的提亮高光色，而灰色则会被设计成基底色，常出现在水泥家具或地板中的颜色。
将亮丽黄与灰并用在桌布、床单及家饰品包括枕头与桌上摆饰会带来生机与活力。
以灰做为扎实的基础，衬托吸引注意、强化直觉、活泼的亮丽黄，是位于家中或商业空间的任何办公室最理想的色彩组合，点亮通往开放心灵，寻找追求知识的欲望、原创力及丰富智谋的路径。
把大门涂上亮丽黄色，并在外侧加工时用上稳固可靠的灰，可以传达着温暖欢迎的讯息。
包装设计领域
将拥有最高可见度与反光度的亮丽黄搭配坚韧的灰，不论出现在何处都能引起注目。
结合友善的亮丽黄与默默令人安心的灰，应用在装置设计上，为可靠、智慧与经验的扎实基础，注入一股活力。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
1. 圆角
不同的圆角，所带来的气质是不同的。圆角很小，视觉印象是硬朗，高冷，具有攻击性的，多用于严肃、高端、冲突感强烈的设计中；而更大的圆角给人的感觉是有亲和力，柔软，安全的，多用于儿童产品、娱乐性强的设计中。
在设计的时候，根据自己的产品属性选择气质相符的圆角设计很有必要。
△ 常见的卡片弧度形式有4类：直接、小圆角、大圆角、特殊圆角
我一般喜欢用4的倍数来设置圆角，比如圆角大小为4px、8px、12px之类的。要注意的是，圆角越大，可用面积会越小，需要根据实际场景进行平衡，以视觉上舒服为宜。
2. 比例
卡片的比例，我习惯遵循一些美感规律，比如黄金比例（1.618），白银比例（1.414），青铜比例（1.732），正方形之类的比例。当然，实际设计需求中的比例，还是要结合内容的多少具体分析。
我的经验是，当比较接近这些美感比例其中之一时，就直接优化到这个比例。比如做了一个卡片，宽高比是1.5，比较接近于黄金比例，我就干脆让它等于黄金比例。
3. 异型
除了正常的卡片样式，还可以做一些异型的卡片设计。异型卡片具有较强的形式感和视觉冲击力，所以会比较多的用在游戏或者运营相关的界面中，吸引用户的注意力。缺点是批量化设计成本略高且因为过于风格化而不够耐看。
1. 颜色
卡片的颜色搭配可以使用纯色和渐变色。这些颜色与文字之间的对比要符合界面对比度标准（ https://contrast-grid.eightshapes.com/，这个网站可以直接查到可用性数值，只要不是DNP就是可以用的配色），以免影响内容本身的阅读。如果拿不准的话，可以多用一些白色，比较不容易出错。
纯色卡片设计会让界面显得冷静高级，但对配色的要求相对较高，用不好的话会显得单调，沉闷。如果你坚持要用这种卡片配色的话，建议搭配一些图形纹理，会更容易把控，还能提升画面细节。
△ 纯色卡片设计
渐变色的卡片设计目前较为常见，层次细节更加丰富，画面也显得更活泼一些。
△ 渐变色卡片设计https://dribbble.com/shots/12284120-Wallet-Design-App
有些朋友经常因为配色不好而发愁，其实是需要多去找一些参考来看的，实在担心配色不好，直接去吸优秀的配色方案也是OK的，但要注意搭配合理。
教大家一个方法，去dribbble上搜color或直接打开 → https://dribbble.com/search/color这个链接，就可以看到非常多的优秀配色方案了。
2. 图案
卡片的设计还可以结合辅助图形，以图案的形式与卡片进行结合。这些辅助图形可以来源于品牌符号的延伸，让品牌有更多的露出机会。
也可以是运用一些简单的图形，提升卡片的设计细节，以下是一些还不错的设计案例。这些卡片上的图形都有借鉴参考的价值，自己平时有时间的话，也可以多做一些作为图形的储备。强烈建议收藏，真的可以很有用。
△ 来源：https://dribbble.com/shots/10513966-Gradient-Bank-cards
△ 来源：https://dribbble.com/shots/10498737-Dark-Bank-Application-Design
△ 来源：https://dribbble.com/shots/11313260-Finance-App-Exploration
△ 来源：https://www.behance.net/gallery/84029601/100-Financial-Virtual-Design-Cards-PSD-XD
这里彩云给大家找了非常多的卡片设计形式，可以从中参考学习配色和纹理造型。
3. 图片、视频
卡片背景也可以用图片和视频的形式进行设计，图片和视频的选择一般会偏暗色，以不影响内容阅读为准。
△ 来源：https://dribbble.com/shots/5717917-Travel-Article-Application
1. 文字
卡片上的文字不要太长，我的经验是横向不要超过42字（关于这个字数，有资料可以查，感兴趣的可以找找看），纵向不要超过5行。过多的文本不建议使用卡片形式。
其实这张卡片的设计中，我也用到了黄金比例来指导自己的设计，方便快速确定文字比例关系。
2. 间距（网格法）
卡片上的文字间距最好有一定的规律，这里可以按网格法来规划，比如8px网格，10px网格等等。网格的使用其实可以很灵活，比如我这里的卡片其实就用到了8px网格，各间距就会用8的倍数来做。大小比例就尽量用黄金比例来处理，这样做目的一方面是为了让界面有秩序，另一方面是提升决策效率。秩序产生美，而效率让你早点下班。
3. 减少线框
卡片中尽量减少线框，多用留白来进行内容划分。
4. 层次清晰
卡片中的内容层级要做好，标题和内容之间的差异要明显。这里的层次主要是通过对比拉开的，做好对比的关键就是对比效果要强烈，决不能模棱两可。
比如下图中左边的案例只是在文字的字号上有一定的对比，但字号间相差不大，效果不明显，就会让人第一时间不知道看哪。而右侧的案例则用了加粗，大字号，大留白等，让画面有了强烈的对比，从而产生更好的信息层级。
5. 内容出界
只在卡片的框框里做设计，有时候未免显得太呆板，破开卡片的边界可以让卡片本身更具形式感。如果被人说你的设计没啥亮点，那内容出界的设计就是一个很好的提升设计亮点的手法。
△ 彩云曾经做的一张banner就是运用了出界的手法
△ 来源：dribbble。界面上的天气图标也用了出界的手法，让画面显得更有亮点
1. 光感
卡片中的光感细节能提升设计的质感。下面这张图是我最近做的一张会员卡的背景设计，大家对比下，在卡片顶部加了1px高光线和斜面反光的细节前后的质感区别。
这个小细节，我经常会用到，执行简单又容易出效果。
2. 投影
投影的细节，不要过重，但又要能与背景分离开。有2个小技巧：
3. 3D效果
3D卡片的设计，因为不便于内容编排和阅读，所以带透视的卡片在实际UI中并不太常用。但在作品集包装和运营页面中，则可以带来比较好的视觉冲击力，可以尝试运用。
△ 图片来自：Cradle
以上就是今天彩云关于卡片设计的一些经验总结，卡片设计的应用已经如此广泛，我们有必要利用它来提升自己的界面设计细节。
转自：优设网
蓝蓝设计( 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com