编辑导语：各大APP的图标都各有特点，图标的设计也是一门学问。在这篇文章中，作者全面解析了各类APP图标设计背后的用意，一起学习一下吧。
如果说一个人的脸面、衣着打扮是给陌生人的第一印象，那么APP的应用图标风格与气质就是留给新用户的第一印象，关系着用户是否对这个APP感兴趣、是否会打开应用介绍、是否会点击下载按钮起着决定性的作用。
一个好的应用图标有着无限可能，无形中对用户产生强大的吸引力，并有一种想要了解的冲动，况且图形本身就能让人充分发挥想象力，这就是为什么不管在哪个应用市场第一眼看到的是应用图标，而非应用名称。
在一部手机就能解决很多问题的互联网时代，相信每个人都有下载几十上百个APP，琳琅满目的列表，应用图标是否能在第一时间抓住用户眼球（目标明确或铁粉除外）非常重要，一个视觉传达清晰且有吸引力的图标能提升用户点击率，即便用户只使用过一次，相对来说，印象也会更深刻。
本文根据笔者对大量应用图标的分析、结合设计准则进行总结，希望能帮助大家在设计过程中规避掉一些常见的问题，欢迎一起探讨、取长补短、共同进步。
应用图标代表产品的外在形象，设计的精美与否决定着用户的第一印象，是否产生打开的欲望跟当前图标的视觉所传达的内涵有最直接的关系。应用图标虽然不同于设计LOGO，表现方式也千变万化，但必定有自身的设计准则要去遵守，利用设计的手段将视觉传播的价值最大化。
首先，应用图标需要尽量简约。过于复杂的图标会增加用户的理解成本、甚至误导用户，但如果过于追求简约，缺乏细节、个性化以及必要的隐喻信息，也会因过于单调，造成表意不明确等问题。
简约并非简单，设计师需要通过专业的知识进行合理的简化，以提升应用图标的设计品质，方便用户在不同场景中都能清晰的辨认。其次，需表意明确、易于理解。
应用图标代表的是产品的行业属性、功能作用或与众不同的优势，要让用户第一眼就能识别出所代表的含义，贴近用户的心理预期。
简约易识别是应用图标必备的基础属性之一，这也是为什么大部分产品都将logo作为应用图标主视觉的原因，因为logo设计考虑到了方方面面以及后续延展的问题，即便有些logo较为复杂，也会通过提取局部元素、吉祥物、主体色等方式来强化应用图标属性，给用户形成独特的记忆，以提升应用的下载量和使用率。
应用图标应该与产品的属性、品牌有极强的关联性，通过品牌延展赋予产品更强的生命力，让用户从接触应用图标的第一眼开始、再到后面的使用，整个过程始终都能保持清晰且统一的品牌认知，通过和谐统一的视觉效果，带来更好的用户体验。
应用图标需要与品牌之间必须保持高度的一致，着重从以下几点体现：
1）LOGO
毫无疑问，用品牌logo作为主体图形是最佳选择，结合品牌色搭配使用，能将产品核心理念、品牌形象的传播效果达到极致，在APP应用市场中，大家会发现大多数产品都在使用logo作为应用图标的主视觉图形。
2）品牌色
品牌色即主体色，将贯穿APP所有页面的元素组件。众所周知，每种颜色都有其特定的含义，能传递给用户不同的心理感受。用主体色作为应用图标的背景色，可以烘托出产品的情感氛围，并与进入应用后的主体色遥相呼应，以最小的视觉跳跃性将前后关联，强化用户对产品的记忆感知。
3）IP/吉祥物
吉祥物属于品牌logo延展的一部分， 也是产品的灵魂。当logo较为复杂时，因移动设备应用图标位置空间有限，logo细节无法在短时间被用户捕捉，不宜展示时，使用IP/吉祥物或其局部元素代替也是不错的选择。
4）产品名称
如果说logo是产品的脸面，通过暗示和隐喻给用户无限遐想并让用户记住它的样子，那么名称的出现就相当于产品主动进行了自我介绍，并让用户知道如何称呼它。
将产品名称作为应用图标需谨慎使用：首先，文字传达的信息量有限：其次，用户对于图形的理解效率要优于文字；再者，应用图标都会有对应的产品名称展示（应用市场在右、桌面在下方），多少有些信息重复。
所以大家见到的应用图标主体是产品名称的不外乎两种情况，一种是产品本身将名称设计成字体logo，例如美团、懒饭；另一种是将产品名称作为logo的辅助信息提示，例如缤纷生活。
以上是应用图标与品牌属性关联最常见的四种方式，在设计中可灵活搭配，使用两种及以上的方式组合，能将品牌传播的途径发挥到最大值。
笔者上小学时，曾经在一次彩铅绘画作业中得到了老师的真心夸赞，但内心却备受打击。老师对着我画的桃子说“这西红柿画的太像了”。
举这个例子似乎并不恰当，但结果是惊人的相似，笔者想要陈述的一个观点是，不要让你辛苦做出的设计成为别人的嫁衣，让用户误以为这是其他企业的“某某某…”产品。
目前，应用市场中的APP数量巨大，且还处于增长的趋势，同行业的图标设计同质化相当严重。想要让自身产品应用图标脱颖而出，就有必要在设计之前做好竞品分析，借鉴竞品的优点，在突出自身产品核心特征、属性的基础上，还要用不同的表现手法突出其差异性，给用户留下独特的印象，避免同质化。
应用图标在设计完成之后（测试小组）、上线后（用户反馈）进行可用性测试，主要针对图标对用户的吸引力、识别度等问题作进一步优化，以确保图标在不同场景中都能被用户清晰识别并提升印象。
虽然可用性测试存在设计之后，但这一环节至关重要，它决定着产品的下载量以及使用率。
单色图标通常以品牌色作为背景色、logo以反白的形式呈现，既能突出品牌色、还能用于烘托主体图形，不过这种方式仅适合色值单一的logo，多色值可能会与背景色产生融合或色彩反差太大影响视觉传达效果。另外，如果logo视觉重量较大，也可使用白色背景+原品牌色logo，这样会更直观。
单色应用图标虽然色彩比较单一、表现形式也受到局限，但视觉清晰、简洁且识别性强，如果能运用其他设计手法丰富图标细节就再好不过了。
多色图标使用了两种及以上的颜色，更多是直接使原多色彩的logo图形+白色背景，无需任何加工，控制好尺寸规范就行。如果是运营推广所需，如春节、618、双11等活动，会对应用图标加以其他色彩烘托、点缀元素或标签等，色彩就会更多，但一般都具有时效性，活动过期即图标复原。
多色图标的细节、层次更加丰富，设计时确保各色彩搭配协调，一旦因色彩过多造成视觉混乱，就得不偿失了。
无论是单色还是多色，添加渐变会让应用图标更加细腻、耐看。渐变的表现手法应用广泛，简单的渐变能让图标细节丰富，同时也具备空间感和微立体感。
设计渐变色图标需注意图形衔接处的对比度，花里胡哨的渐变色会拉低品质感，要确保色彩的和谐，让图标视觉清晰且容易识别。
单色、多色或是渐变都可通过调整不透明度、图层叠加的方式来丰富应用图标细节，相比纯粹的渐变，立体感和空间感更强。使用颜色叠加需注意色彩对比及明暗关系，否则会衍生出脏乱的颜色。
环形构图为主，由多个元素复制并以统一的中心点、旋转角度，旋转衍生出一个主体图形。这种应用图标的设计构图饱满、色彩丰富，能给用户传递出轻松愉快的视觉体验。
需要注意的是，由于颜色较多，至少在三种颜色及以上，否则无法构成色环类的主体图形（错觉）。如果没有超强的配色功底，最好按照色环的顺序依次取色，即便没有太大的优势，但至少不会出错。
一个好的应用图标应该是多元素、多信息结合运用，才能达到更好的效果。虽然大部分主体图形使用了logo，但并不影响设计师们对其进行拆解，提取局部元素、色彩、名称等信息进行二次创作，从原则上来说，是一次线上logo的设计。
应用图标种类繁多，切不可盲目跟风，需经过认真的分析、研究，找到最适合自身产品的才是最重要的，且每种类型并非独立，在条件允许的情况下还能跨类型灵活搭配、相互组合。
1）单中文字体
仅次于图形logo的表现方式，通常会在产品名称中提取一个具有代表性的文字对笔画、结构等进行再设计。基于国人文化的优势以及对汉字的敏感度，既能降低用户对应用图标的认知成本、还能根据产品特性设计出差异化的视觉效果。
不过因为文字笔画的原因，单个文字提取难度较大，避免信息传递有误或影响识别度，建议选择笔画较少且具有特性/代表性的文字，若达不到条件，最好选择其他表现方式。
2）多中文字体
使用两个及以上汉字，大多直接将产品名称用在图当中，对用户来说更容易记忆，有利于品牌推广。相比单字体，设计感会受到一定的局限，不宜做过于夸张的表现方式，因文字较多，设计时一定要注意文字的协调与可读性。
多文字图标建议将字数控制在2~6个范围内，3字以内一行显示，超过3字即两行显示且最多不超过两行，否则会影响图标的识别效果。
3）中文、图形组合
适当添加带有产品特性的辅助图形，用引导或指向性的方式对文字进行强调，图标细节会更丰富，可以突出产品想要传达的信息、以及不同的气质，还能增加图标的形式感和趣味性。注意添加的图形不要过于复杂，不然会让信息混乱，适得其反。
4）中文图形化
根据单个字体笔画的特点进行巧妙的变形或延展，会让你的应用图标更具设计感、品质好。这种方式对设计功底的要求较高，需要确保字体的识别度，切勿霸王硬上弓，如果是为了设计而设计，就违背的信息传播的初衷。
5）中文、IP形象组合
由产品名称和IP形象组合而成，这种方式能通过品牌IP不同的视觉形象带给用户情感化的体验，让产品更具亲和力，拉近与用户之间的关系。例如，IP的喜、怒、哀、乐表情变化分别对应用户不同的心理感受，以加深用户对产品的印象及品牌认知。
1）单英文字体
单英文字体通常是提取产品名称拼音首字母或英文首字母进行创意设计，跟中文字体相比，基于字母本身线条的简洁及流畅性，再结合产品特点，很容易设计出兼具美感、高识别度的应用图标。
需要明确一点，不管如何创意，也仅局限于在26个英文字母中选择，如果想设计出差异化的应用图标，对设计师来说，是一个很大的挑战。
2）多英文字体
跟多中文不同，中文产品名称在移动端基本不会超出6个字，而全拼音或英文名则多达十几位甚至更多，为了用户能更好容易识别、记忆，依然是提取不同拼音或单词的首字母（中文全称）进行设计。
多英文的应用图标很很容易形成独有的产品简称，更利于用户记忆，但字母一定不要过多，如果无法删减，那就只突出特定的2~4个字母。
3）其他类型
字母与图形、IP形象组合以及字母图形化，其表现方式、设计原则与中文字体图标类似，这里不做过多阐述。
1）数字设计
人们对于数字来说是非常敏感的，不存在文化差异或认知误区，基于数字便于记忆且容易识别的特点，将数字图形化后应用到图标当中，会让产品具有亲和力，有利于品牌传播。单纯的数字过于简单，需增加一些细节，丰富图标层次，让其具备独特的记忆点，不然会显得单调。
2）符号设计
每个符号都有特定的含义，因此，在选择符号作为应用图标之前，首先需要了解清楚该符号是否能体现出产品属性以及想要表达的意思，例如“¥”适合攒钱、理财相关的应用，而“+-×÷”则适合用于计算器或数学相关的应用；其次，符号跟数字一样，都比较简单，需经过二次创作后才会使用。
1）线性图形
线性风格的应用图标能给人一种简洁轻快的感觉，设计师通过提取产品的品牌信息、功能服务等进行创意设计，将得到的关键词以一条或多条线段组成高度抽象的图形来达到信息传播的目的。
通常以反白的形式出现，背景可以是单色、渐变色或加以辅助图形点缀。
线性图形非常适合文艺类简约风格的应用，通过不同的线条带给用户不同的心理感受，例如直线代表大方、专业、正直；斜线代表张力、速度；曲线代表流畅、飘逸及柔软等。
设计时，切记图形不能过于复杂，否则会影响其辨识度，增加用户的认知成本，也不利于品牌推广。
2）面性图形
也可称之为剪影图形，根据产品属性，将日常生活中被大众所熟知的动物、植物、食品、工具、玩具…等事物进行简化，通过刻画事物的造型轮廓来形成独立的剪影图形。
高识别度的剪影图形会让整体看起来非常醒目，提高信息传播的效率，只要控制好造型，即便把图标缩到很小也能清晰辨认。
因现实世界中事务的复杂性，被提炼出的图形如果细节过多会显的复杂且不够干练、细节过少则难以辨认，所以需要对图形进行创意加工，最终以确保应用图标的功能和美感兼具。
3）几何图形
几何图形在应用图标中使用的很广泛，可以是线性或面性，表现形式也非常丰富，利用几何图形通过单独、组合、布尔运算等方式形成简单且个性化的创意图形，带给用户简约、现代、空间、热闹等不同的心理感受。
几何图形构图简洁，设计形式丰富多样，想设计出具备设计感和差异化的应用图标，很考验设计师的创意能力。
对纯色剪影图形增加太多细节，无疑是将其“大卸八块”，变成一堆零件，但通过多色、渐变、图层样式等表现手法设计成卡通形象，就完全不一样了。
卡通形象能体现出产品的生命力、亲和力，以及直观且易于理解和记忆的特质，对品牌形象的塑造、传播起到了很好作用。
在画卡通形象时，需要注意产品主用户群体的年龄段，切勿一开始就把活泼可爱作为卡通形象的代名词，避免绝对低龄化的表达，同时需要设计师有一定的绘画功底。
利用人体的局部元素，如眼睛、嘴巴、手足、头部等，再结合常见的表情动作进行图形化设计，相当于给原本冷冰冰的图形赋予了生命力，传达出不一样的情感，而且用户原本就对人体元素敏感度更高，更容易打动用户并形成较强的记忆。
拟人化的应用图标会显得亲民，便于拉近与用户之间的关系，适度在抽象的图形上加入情感化（动作/表情）表达，能生动、形象的体现出产品独有的特性。
如果想要较强的视觉冲击力，建议元素不要过多，最好是对某个单一的元素作放大或特写处理，让用户看到更多的细节，也可用夸张、比喻、衬托等表现手法强化特点。
拟物化图标使用的比较少，它更偏向于某种行业类型，例如工具、游戏类型的应用，通过超接近于现实世界中的物体造型，基本不需要用户思考，一眼就能理解，但也正因为这种特性，信息量的传播受到很大局限，仅适合单一且大众化的信息传达。
在如今，想同时融入行业、属性、品牌等多元化内容的信息化时代，显然不太实用了。
应用图标背景通常以单色、渐变色居多，除此之外，还可以添加与主体图形相呼应的辅助图形背景，以丰富图标的视觉层次。图形背景一定是为衬托或突出主体图形的辅助存在，切勿过分表达，以免喧宾夺主。
当主体图形的结构、色彩不是很复杂，且产品面对的是年轻化用户群体时，可通过色彩拼接、晶格化或多种鲜明的色彩渐变等方式设计出炫彩效果，色彩表现丰富的应用图标，能带给用户更强的视觉冲击力。色彩可多但不可乱，需要把控好色彩之间的对比关系。
常见于在特定的节日中，例如618、双11、双12及传统节日等，产品会存在促销、打折活动，为了更早的让用户知道，会在应用图标的某个区域以标签的方式出现，起到引导用户的作用。
不过这种表现方式具有时效性，活动截止即图标样式复原。
通过配色或节日相关的元素点缀，营造出一种感同身受的节日氛围。例如：春节期间，部分应用图标背景会调整为红色，并使用灯笼、烟花、文案等元素点缀，制造出普天同庆、与用户同乐的喜庆感，或者在高考期间鼓励学生，少了套路、多了真诚，给用户留下较深的印象。
通过元素的大小、长短、虚实、稀疏、方向以及不同的色彩、明暗关系等方式进行对比，形成强烈的反差效果，同时兼具张力和美感，这也是应用图标设计中很常见的技法表现之一。
对称在自然界中随处可见，在互联网设计中也是如此，应用图标中的主体图形以对称的方式呈现，能给用户平衡、和谐的感觉，也让图标更具有观赏性。
将应用图标中的主体图形分割，赋予不同的颜色、样式等，明确层级划分，可提升图标的美感。例如：将色块分割成不同的比例、形状，就能组合成一个完整的熊猫图形（百度搜“熊猫剪影”图片）。
如果适合使用0.168黄金比例分割就再好不过了，这是被公认为最具美感的比例。
将相同或相近的图形以某种规律连续性的排列，相比单调的图形，会更加饱满。重复性的表现手法以大小、色彩、位置、形状等作为出发点进行有序的排列，最终形成一种规律、整齐的节奏和艺术感。
需要注意的是基础图形不能过于复杂，一定是有规律的重复，否则会让图形变的混乱，无法形成整体。
在保证识别度清晰的前提下，将两个或以上的元素相互重叠、交叉在一起，能形成前后左右的层级关系，制造空间感，同时也能将多个图形关联在一起，避免图标元素零散或单调，让整体性更强，丰富用户视觉感知。
正负形也是常见的表现手法之一，利用正图为底，通过减去底层挖空的方式突出（错觉）负形，将产品特征、属性及服务多途径的传达给用户，可谓是“一石二鸟”。
正负形图标能将信息传播最大化，且设计感十足，好的正负形图标能给用户形成独特的记忆点，但设计时需要注意正、负衔接的顺畅度，否则无法清晰的传播信息。
通过产品属性、功能或特点进行思维发散，例如：夏天，我们会想到空调、海滩、冰淇淋、比基尼、裙子（女性）、夜空等一系列相关联的事和物，搜集起来并做好整理归类，确定大致的设计方向。
确定了大致的设计方向，就去找同行业、同类型或相似的应用图标分析其形状、配色、组合类型等，取长补短，这也是避免同质化非常重要的一个环节，帮助自己在后续设计出具备差异化的应用图标做铺垫。
可以从产品名称或功能属性方面找出产品最想传达的核心信息，并提炼出关键词。切记，关键词不可脱离带水、表意不明确，一定要够精炼、能表达出核心内容。关键词在精不在多，如果太多，需要通过层层递进，筛选出“一主三辅”，要知道这关系着后续应用图标传达信息的精准度。
将上一步得到的关键词转化成抽象图形，进行视觉化提炼，这时应用图标的雏形已经形成，再结合前面所提到的图形分类、表现手法以及注意事项等，进入图标绘制流程。关于图标设计规范及原则，在之前的《图标篇 | 图标设计必备的基础知识！》文章中有详细说明，这里不做阐述。
基本图形绘制完成后，通过添加点缀、辅助图形、背景处理等方式丰富图标细节，进行精细化处理，使其更精致，具备高识别度及品质感。
分别通过移动端应用商店列表、应用详情、设置中应用列表、桌面以及WEB商店等，对不同位置的大小、不同的桌面背景进行虚拟测试，以确保在不同场景中都能被用户高度识别，如果这些问题等着被用户发现，很可能给产品带来不利的影响。
需要对iOS和Android系统各输出一套图标，iOS只需一个1024px的切图便能适配所有，且无需设定圆角。Android则需要多套切图规范，如512px、198px、144px、96px、72px、48px，圆角半径以512px为基准设定为90px（参考值）。
这些固定的尺寸规范并不在技术能力范畴，如果实在不清楚，需要用时就“百度一下”一大把，或直接找开发人员拿尺寸都不是难事。
首先，笔者要感谢耐心看到这里的小伙伴，希望总结的内容能帮到大家，在前期设计中作为资料参考，避免出现常见的问题，防止进入误区。
其次，要想设计出优秀的应用图标仅看上述内容是远远不够的，少不了平时的多看、多练、多思考，需日积月累，逐渐提升自己的视觉审美、造型提炼、执行效率等多方面设计能力。
应用图标的总结分享就到这里了，对你有帮助的话就给笔者点个赞吧，如果有不同意见，欢迎在评论区交流或指正，以便查漏补缺，共同进步。
大漠飞鹰；公众号：能量眼球，人人都是产品经理专栏作家。致力于产品需求的驱动、产品体验的挖掘，利用设计的手段为受众用户带来更好的体验，即好看、好用。
本文原创发布于人人都是产品经理，未经许可，禁止转载
题图来自Unsplash，基于 CC0 协议
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
编剧导语：折叠菜单是在页面中垂直堆叠的菜单列表，通过展开/折叠来显示或隐藏更多菜单内容。APP中的折叠菜单该如何设计呢？本文作者分享了折叠菜单的设计解析及设计应用，一起来看看吧！
大家好，这里是设计夹，今天为大家分享的是「折叠菜单」。
折叠菜单(Accordion)，又称手风琴菜单，是在页面中垂直堆叠的菜单列表，通过展开/折叠来显示或隐藏更多菜单内容。
接下里通过讲解折叠菜单的构成、样式和设计解析来更进一步了解折叠菜单的运用～
折叠菜单的状态包括收起、展开、悬停、选中、禁用状态等。
在折叠菜单中，通常用“V形”图标表示菜单展开/收起的状态。“V形”图标可以在左侧，也可以放在右侧，用来表示状态。
除了使用最常见的“V形”图标，还可以用以下图标来代替：上/下填充图标；加号/减号；向上/向下箭头。
当我们把展开图标放在右侧的情况下，我们可以面板左侧设计一些图标，来增强菜单的含义，并让页面看起来更精致。
在某些场景下，还可以通过使用不同的颜色，更加直观地分隔每个菜单。
在页面设计中，大多数情况下都是使用封闭式折叠面板。
通过一条浅色的的分隔线将不同的菜单分隔开，这种样式的优点是可以节省一些竖向的屏幕空间，尤其是在移动端屏幕尺寸较小的情况下。
分离式折叠面板常用在桌面端中，每个菜单的展示更清晰，设计样式更简洁。
突出显示菜单展开的状态，这样在多个折叠菜单打开的情况下，用户也能清晰找到需要的信息。
常用的突出显示的方式有：增加阴影、背景填充、轮廓描边等。
例如在页面背景是白色的情况下，我们可以使用透明度很低的灰色作为下拉菜单的背景，更清晰地展示展开的菜单。另外，还可以为下来菜单填充和品牌色一致的颜色描边，起到强调品牌的效果。
通过在主菜单的下面添加已选择的内容，这样在不需要展开面板的情况下，用户就能知道选择了哪些内容，进一步提高操作效率。
当已选内容太多时，我们不可能将这些内容全部在主菜单罗列出来，在这样的情况下，可以使用数字徽标的形式来展示已选择的菜单数。这样的设计有点像购物车中不断变化的数字徽标，告诉用户加购的数量。
通过在折叠面板中添加提示文案，起到辅助作用，展示更多和菜单相关的信息。这种设计形式更适合用在移动端中，在有限的屏幕尺寸上尽可能多的展示内容。
等宽使用：在移动端中使用等宽的折叠菜单，方方便用户点击操作。
侧边栏：将折叠菜单放在侧边的导航抽屉中，点击左上角的图标来展开菜单项。
菜单筛选：将侧边栏与折叠面板配合使用，实现菜单筛选的功能。
侧边导航：和移动端类似，桌面端最常用的方法是把折叠菜单放到页面左侧，作为网页的侧边导航使用。
过滤器：根据桌面端的页面布局结构，折叠菜单可以放在页面左侧或右侧，实现精确查找、内容过滤等功能。
以上就是折叠菜单的设计解析及设计应用，希望通过这些知识能帮你进一步了解折叠菜单的用法。
「组件系列」的其他文章，近期也会不断更新，欢迎大家关注~
作者：Clippp，微信公众号：Clip设计夹。每周精选设计文章，专注分享关于产品、交互、UI视觉上的设计思考。
本文原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自 Pixabay，基于CC0协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
编辑导语：B端产品的展现形式包含了很多类型，标签页、弹窗、悬浮层等等。本篇文章中作者分享了如何正确的呈现B端产品，让产品的交互体验更加丝滑。感兴趣的小伙伴们快来一起看看吧，希望对你有所帮助。
在B端产品操作中，需要高频率地打开各类链接和按钮，如果点击后需要展示新的内容，那么展现形式就包含了很多种类型，标签页、新页面、悬浮层、弹窗、抽屉等等。
在面对数量庞大的B端页面、组件、交互场景下，应该选择哪种展示形式就变成了一个棘手的问题。
本篇分享就将集中在解决如何选择正确的呈现形式上，让产品的交互体验更顺滑。
网页是一种可视化的UI界面，也是一种内容载体，它是浏览器访问网站后显示的主要对象，也是浏览器展示内容中层级最高的单位。
在同一个网站中，如果我们想要访问其它网页，就需要点击按钮或链接触发，这时候，打开新网页的方式就有两种，在新窗口/标签中打开（_blank）或者在本窗口/标签中打开（_self）。
不管是哪种，本质上都需要浏览器重新加载新的页面。对于一般的企业官网、新闻网站来说，这种加载的模式没有太大的问题，因为操作频次相对适中，用户中间会有比较长的时间停顿下来查看页面的内容信息。
而B端项目则不同，虽然也有不少查看页面信息的需求，但是包含了更多需要短平快完成操作目标的使用场景，比如修改个标题，更改商品价格，添加分类字段等。
如果所有高频操作的场景，都要重新加载页面，使用起来的 “顿挫感” 是非常强的，降低使用体验。
早期的网站加载内容必须刷新页面，所以顿挫感是难以解决的，只能想办法减少跳转流程来提升用户体验。
随着网页技术的发展，异步处理（AJAX数据交换方式）技术的应用，让网页的内容可以通过不刷新或加载新网页的形式加载和显示。
简单解释，就是早期的网页加载完成以后就是 “静止” 的，里面所有内容是固定的（不是HTML的静态）。而异步处理，就是让页面中的指定模块处于 “运动” 的状态，客户端可以在不重载网页的情况下只加载和更新这个模块的内容。
比如下面的案例，设置不同的条件选项，在过去的网页中只能重载页面更新，而使用异步处理就可以直接和服务器请求数据刷新这个图表模块，而不用重载整个页面。
所以，在B端项目中，我们不再是只有重载网页一个选项，而有了其它的选择，如下图所示。
其中，网页展示作为一个基础展示对象，我就不多做介绍了。我会通过分别介绍其它几个内容的载体，帮助大家区分它们和重载页面有何不同，以及如何正确选择内容加载形式。
首先介绍浮层，它是我对通过悬浮在页面基础内容之上的内容层的统称。例如各类气泡、提示框、下拉菜单，都是浮层的表现形式。
浮层是比较底层的形式，其展示内的容完全不需要使用一个新的页面，且和触发的元素有较强的视觉联系（对比弹窗）。
浮层并不是由内容的多和少决定的，复杂的浮层可以包含非常多的交互选项和内容信息，导致我们很容易和下方解释的弹窗搞混。
比如客户端软件常见的隐藏式侧边栏，搜索栏中展开的复杂面板，都是浮层的一种而不是弹窗。
浮层最大的特点，源自它的位置定义逻辑，它会和触发它的元素具有非常紧密的位置关系，而不是像弹窗一样无差别显示在界面或浏览器视图的固定区域。
如果我们想要显示内容，完全没到用一个新页面展示的地步（如搜索建议面板），且和触发它的控件有较强的联系，就可以考虑使用浮层来展示。
弹窗，也是一种悬浮在基础内容之上的内容层，它和浮层的不同之处，就在于弹窗通常是居中固定的显示区域，和触发它的元素没有什么位置联系。并且，弹窗可以包含的内容量级也是高于浮层的。基础的弹窗包含强提示弹窗，或类似注册登录这种表单弹窗。
而高级的弹窗，则类似下方案例，约等于打开一个独立的网页。
之所以使用这些高级弹窗作为页面载体，原因就是对原触发页面的使用和关注并没有结束，需要支持快速关闭当前的窗口并返回原来的页面中去。
比如在一个非常长的列表中，你下滑了几十页的高度，肯定不想放弃掉当前的页面位置，所以Behance或者花瓣等应用，都采用窗口模式加载新页面。
或者类似一个列表页面中需要大量创建新的数据，这些数据又不复杂。于是就通过弹窗表单的形式，快速完成创建并在原页面中再次点击 “新增” 按钮。
高级的弹窗使用除了保持原页面位置、高频操作等防止加载的原因之外，还有个更重要的特征，就是强制吸引用户的注意力到窗口上。
因为弹窗主要以模态 （Modal，后方有黑色遮罩）居中显示，通过深色蒙版进行前后隔断，凸显弹窗区域，意味着我们强制让用户关注眼前的信息和任务。
如果我们想要显示的内容，需要保留原页面状态，减少页面跳转数量，又需求用户强行关注，就可以使用这种模式展示。
最后，就是最难选择，也最容易和其它组件搞混的抽屉了。
抽屉本身的特征包含悬浮属性，覆盖在原页面之上。而我们常见的侧边栏、侧边菜单并不能和抽屉画上等号，因为他们会占用画布的实际显示区域，和原有内容同层。
比如下方案例中，Jira左侧导航（不分左右）可以隐藏收入，页面内容变大，这是侧边栏。而点击列表选项，右侧弹窗的窗口覆盖原有页面，才是抽屉。
和高级的弹窗类似，抽屉也可以当成一个独立的页面展示信息。但它和弹窗不同的是，抽屉通常是从页面的右侧展开，没有遮挡左侧的空间。它的主要特征是还需要在原页面进行交互。
比如Teambition案例中的列表，我们每开一个抽屉都还可以直接点击原列表的其它选项切换下一个抽屉，省掉关闭步骤或者原页面被遮挡的情况。
它比较适合应用在表格/列表环境中，作为表格/列表内容的详情页形式展开，这样用户可以在一个页面中快速查看不同列表的具体信息或编辑。并且，表格/列表本身的特征会将标题放在最左侧，也方便抽屉的切换。
也因为这种特性，抽屉不太需要使用模态和遮罩将左侧内容遮挡掉。如果需要通过遮挡来吸引用户注意力，那么这种情况往往更适合使用弹窗。
所以，如果不想通过新页面打开的列表详情内容，且不是强制要求用户聚焦的任务，就可以使用抽屉的形式展现。
以上就是几种基本的内容展现形式说明，时间关系还有后半部分关于如何站在系统框架级的角度使用内容载体的分享，我会留在下次分享。
如果有关于这部分的实际项目疑问，也可以在下方留言。
我们下篇再见～
作者：酸梅干超人；公众号：超人的电话亭
本文由 @超人的电话亭 原创发布于人人都是产品经理。未经许可，禁止转载。
题图来自 Unsplash，基于CC0协议。
专栏作家
韩叙，微信公众号：运营狗工作日记，人人都是产品经理专栏作家。原猫眼电影产品运营专家，创业时经历了0到1的艰辛，在百度时规划了海量用户的玩法。从业10年，专注互联网运营领域，包括产品运营、用户运营、社区运营和UGC运营。
本文原创发布于人人都是产品经理，未经许可，不得转载。
题图来自Unsplash，基于CC0协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
编辑导语：产品设计上的许多细节都有可能影响到用户的产品使用体验，进而影响到产品的打开率以及留存率等。这就要求产品设计师在交互体验层上结合一定小技巧，以提升用户体验。本篇文章里，作者结合案例，总结了一些UI技巧，一起来看看吧。
对于很多设计师来讲在设计界面过程中往往会忽略掉很多的细节，比如卡片的排版、文字的排版、各种状态的反馈等等，特别是刚入行的设计师在做页面时往往是直接拿到竞品的页面搬运到自己产品上，这种做法理论上不会让自己的页面出错。
但是很多人往往忽略了一点，就是别人这么设计的目标是什么，是否会匹配自己的设计目标，如果不了解这些贸然地去搬运设计，那么时间久了会养成一个不好的习惯，需要设计师去进行设计时可能就会遇到很多难点，作为初级设计师或者刚入行的设计师，前期可以去进行搬运设计，但是一定要了解别人为什么这么做。
接下来将分享12个设计上的小技巧，大部分在日常设计中都会遇到，了解到这些设计细节，可以让我们的界面更加高效、易用、美观提升用户体验。
我在做界面时可以时常利用交互手势去帮助用户提升操作效率，避免繁杂小操作步骤。
左图中针对单条消息的操作汇聚到了icon内，对于用户理解成本比较高，当用户想要去删除或者屏蔽消息时需要通过聚合入口才能完成操作，大大的提升了用户操作成本。
我们可以在类似的消息场景或者其他列表形式的场景中，添加一些交互手势，随着手机系统的更新，用户的操作习惯已经被各大产品培养的非常成熟，并不用担心用户无法操作的情况，增加手势有弊端也有优势，右图中手势增加了用户首次使用的学习成本，但是降低了高频功能的操作成本，这个理论上是可以接受的。
利用拇指定律把关键的操作入口元素等，放置右侧提升用户操作效率。
左图中把按钮放置了模块左下侧，这样是不利于用户进行操作，当然如果整个模块的热区都是同一个，这样并没有什么问题，用户点击卡片区域任何位置都能够完成下一步操作，如果出现一个模块内存在多个热区入口，而用户想要到达目标必须通过按钮点击才能进入，那么左图中的排版位置就会提升用户的操作时间。
当一个页面内出现多个相同模块或者一个模块出现多个热区入口时，按钮点击区域有限，我们设计时就可以利用拇指定律进行排版，如右图中布局，将按钮放置右侧可以便于用户在右手操作时快速到达目标，因为国内使用右手的人数远远大于左手用户，所以我们需要满足大部分的体验，合理利用拇指定律。
相关定律：费兹定律、拇指定律。
对于我们来讲很多东西是简单的，但是不乏会有一些用户是陌生的，对于他们来讲可能会有填写成本。
左图中理论上并不是错，我们经常设计表单时都会用的提示话术，但是我们需要考虑更多维度的东西，对于我们来讲填写这种表单非常简单，例如个别用户，可能会临时忘了邮箱格式，又或者输入手机号时多填了一位数等等情况，用户错误一次操作步骤就会多一步，反之就是降低使用产品时的体验。
如右图中，我们设计时可以更改提示的话术，帮助用户把问题前置，当用户看到提示邮箱时就会按照格式去填写，通过把手机号的位数拆分，让用户更好的记忆数字，这样无论对产品还是用户都没有任何损失，反而能降低错误频率。
无论是页面还是模块，用户在阅读时是已扫读的方式进行浏览，我们需要保证页面的文字元素具备一定的规律，以此来提升阅读效率。
左图中可以看到，文字与输入框放在同一列进行展示，这样一方面不利于后续的文字扩展，通常这种表单填写的页面，在页面中都是具有很大的空间位置，这样排布会造成视觉上的不规律和拥挤，降低了筛选效率，当然如果是模块区域很小的情况下，可以适当的进行使用。
右图中我们把文字与输入区域上下排布，虽然文字长短不一，但依据对齐原则在竖列情况看是具备对齐规律的，有效地提升信息筛选效率。
我们在做系统功能模块时需要注意添加功能点击引导，用户对此类消息模块认知上会默认不可点击，因此需要我们加以引导。
我们常见的消息模块内容为两种，一种是互动类消息即用户与用户，另一种时是系统消息即产品推送的内容。
前者基于用户习惯而言用户已经没有使用成本默认是可以进行点击交互，后者因为部分产品会把系统消息作为展示的形式给用户，但是有些产品的系统消息却是可以点击交互，这就导致了用户认知上出现了混乱，左图中像系统通知功能通知其实从视觉上看，并不具备点击欲望，因此可能会对用户造成错误的理解。
当我们在设计时需要注意，若消息列表中存在系统类消息并且可以进行交互，在设计时可以添加向箭头、红点提示等方式告知用户可以点击，如果该功能有数据指标，这种方式也同样能赋能产品指标。
目前市场上产品几乎都有深色版本，我们在设计时深色版本的颜色时需要注意饱和度的高低，同样的饱和度在黑色背景上会比白色背景上更加亮，这跟人的视觉感官有很大的关系，因此我们在做黑色版本时需要注意是否调整饱和度。
在黑色背景中使用过高的饱和度会刺激眼睛，很多深色版本都是从白色模式通过反向颜色直接调整，而彩色元素会直接运用到深色中，那么就会造成一个问题，因为我们习惯在白色模式下看颜色，忽然切换到黑色中看彩色刺激程度非常高“就像黑夜中忽然打开手电筒”，对眼睛的伤害很高。
我们在设计深色版本时可以根据产品主色降低饱和度，包括图标等元素，以此来缓冲对用户视觉感官的刺激，目前很多大厂的处理方式是直接在彩色元素上添加一层黑色透明遮罩进行处理，这样无需在添加更多的颜色规范。
在设计模块或者页面时不建议使用特殊字体来突出文字层级，这样会导致视觉不统一，以及开发成本增加。
左图中灰色字使用了特殊字体，看起来虽然好看，但在实际开发中会导致开发成本增加，我们产品一般使用的是系统字体，若使用特殊字体需要让开发同学添加对应字体包，这样会导致我们的产品包的内存过大，除非产品中默认一直使用该特殊字体，这样才有使用的价值。
一般系统字体就能够满足我们的设计需求，在UI设计中我们可以通过不同的字体粗细来调整文字层级，这样能够保证视觉更加统一，减少产品包大小。
在设计时需要注意多个入口在同一位置时，需要把它们进行层级划分，避免影响用户决策。
图中可以看到，两个面性按钮非常明显的在模块中，当用户在浏览页面中很容易出现困惑，到底需要点击哪个才能购买预定，因为两个都是面性无法快速进行定位入口，这样不仅影响用户决策效率，还会影响产品点击率。
建议设计类似模块中时，无论是pc还是移动端都需要对入口进行结构划分，这样能够使用户在浏览页面时快速定位到入口，提升决策效率，做体验是解决用户的思考时间。
在UI设计中使用图标时，要保持一致性，确保他们共有相同的视觉风格，相同的重量，填充和描边。不要混搭。
可以看到左图中的图标并不统一，线性里面掺杂着面性点缀，这在UI设计中严重违背了一致性的原则，会导致我们的页面不够严谨专业。
在设计图标时，首先要保证图标风格一致，其次在这个基础上保证图标的描边粗细、视觉占比重量、颜色等，不要出现混搭风格。
在设计页面模块时，可以多利对比度的方式来体现设计的表现力，鲜明直接的色值能够直接表达事物的性质以及特点，通过对比，也能够更加清晰的强调设计中的重点，这样给用户的印象会更深刻，同样会给产品带来一定的趣味性。
左图中单看视觉也没问题，只是在表现上图标与背景融入到一块了，导致视觉表现力较差，在设计中如果符合产品风格的前提下，我们可以避免这种方式，这种方式虽然具有视觉效果但不够强，对用户的记忆点不够深刻。
设计到类似的模块时我们可以利用对比的关系，以此突出视觉元素，通过颜色焦点引导用户关注，强化用户印象同时还能增加页面的视觉表现力和氛围感。
在设计图文叠加的卡片或者页面时，我们需要注意不同明度的图片上，文字识别是否有阻碍，一般情况会通过遮罩方式避免这个情况。
左图中在深色图片下字体的可读性是没有问题的，但当出现文字底部区域的图片相对复杂时便会影响识别，第二种情况当图片明度过高时文字同样无法识别，试想一下，一张白色调性的图片上放文字，那基本无法看清，严重影响阅读体验。
在界面设计时如果遇到类似的卡片，建议在文字区域添加渐变遮罩的方式，以此保证文字的识别度，或者添加纯黑色透明遮罩进行处理，这样可以兼容不同环境的图片与文字的重叠，保证基本的阅读体验。
UI设计中经常会遇到弹窗，弹窗是需要配合页面遮罩来让用户进行专注操作，不同的遮罩透明度所带来的专注度也不同。
左图中我们看到，遮罩的透明度过低，我案例设置的是17%，此时弹窗内容与页面内容结构上区分并不是很明显，一般弹窗是用来让用户跳脱页面内容，从而浏览弹窗内容，转变用户目标，当弹窗无法聚焦时便很难达到目标，并且视觉上层级更加混乱。
右图中案例我把透明度调整到了37%，我们此时再看弹窗很容易就忽略页面内容，因为灰色越高，遮挡度越高，用户跳脱感就越强，这样我们可以让用户专注弹窗内容，同时视觉结构上也区分很明显
作者：爱吃猫的鱼；公众号：防脱发药水
本文由 @爱吃猫的鱼 原创发布于人人都是产品经理。未经许可，禁止转载。
题图来自Pexels，基于CC0协议
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
卡片式设计是产品常用的页面设计手段之一，它自带的分割属性让页面布局更加清晰，也是页面布局的利器。但是，分割也可能会影响用户沉浸式的浏览体验等问题。如何用好卡片式设计？本文作者对此进行了分析，与你分享。
近几年，卡片式设计可以说是移动端产品中极为常见的设计形式了，甚至有很多互联网大厂将卡片式设计纳入设计语言，在各大APP中得到广泛运用。
卡片式设计自带分割属性、让界面更有层次感，能给人一种视觉上的享受，也因此让其成为了页面布局的利器，但它并非万能，因分割的原因可能会影响用户沉浸式的浏览体验、造成横向/纵向空间浪费等问题，需要根据实际场景和内容形式来确定，不要专门为了“卡片式”而设计。
很多设计师对卡片设计习以为常，但对于使用卡片的原因、视觉表现方式、优/缺点等并不是很了解。那么卡片到底该如何设计？需要注意哪些细节？笔者根据经验并结合平时的一些思考，跟大家一起聊聊在设计中极易忽略的细则，希望能帮助大家提升卡片设计的精致感。
早在互联网时代之前，卡片就出现在了我们生活中的方方面面，如名片、不干胶标签、便利贴、会员卡…等，不管是何种类型的卡片，它都将代表着我们现实生活中的某个特定信息。
卡片指的是含有图片或文本信息的容器，它将我们需要的信息归纳在一起、并形成独立的个体，以至于后续被引用到线上界面中，同样具有非常不错的信息归纳效果。
卡片本身就是一个完整的信息区块、并同时承载丰富的互动方式。在UI设计中，个性化和美感兼备的卡片式设计具有很强的易用性，它是一个UI设计组件，将标题、文本内容、图形/图片进行整合并模块化，让信息的表达更加直观、操作也更便捷。
卡片式设计之所以能成为当今比较流行的趋势，是因为它能让界面信息更有层次感，从设计、交互、视觉以及用户体验等各方面来看，都有不错的优点。站在用户角度，即便不太理解卡片的概念（也不需要理解），但能快速知道如何使用它，相对来说，学习成本也是极低的。
卡片在占用屏幕空间较少的情况下能够将不同大小、不同类型的信息内容按逻辑进行分组呈现，使界面结构更加清晰。相比纯粹的留白或分割线，卡片不仅对信息作出了分割，其本身还是一个独立的容器，让归纳组合后的信息能快速突出重点，将复杂内容简单化处理。
卡片式布局整齐简练，清晰的信息结构有助于用户浏览，方便快速找到自己感兴趣的内容，避免用户产生一种费时或感觉内容超长的恐惧感，还能节省更多的时间成本。最常见的就是信息列表、图文混排等，不仅做到了视觉上的美观，也达到了平衡文字及图片强弱的效果。
卡片式设计有利于场景拓展，他能在信息不断增/减的情况下、页面依然能组成一个连贯的整体，在视觉上毫无违和感。例如支付宝在头部插入的广告引流入口、淘宝在节假日增加二层楼…等。
卡片式设计一度打破了移动端多为纵向操作、原有传统的列表式布局，在空间有限的移动端设备中，还能很好的利用横向空间。将横向滑动区域的最后一个卡片漏出一小部分（若隐若现才是诱惑），不仅能给予用户更多选择与期待，其空间利用率也得到了很好的扩展，在展示更多内容的情况下依然能保持模块的整体性。
卡片式设计能很好的通过边界衬托出内容的整体性，特别是在电商类产品中的首页头部、瓷片区、营销引流区将其应用到了极致，即便在卡片数量较多的情况下，用户依然能清晰的感知到内容的归属层级以及重要信息。
卡片作为一个容器，它可以自由无限的等比缩放，非常适合响应式设计。在手机、iPad、电脑等屏幕尺寸复杂的情况下，通过放大缩小或增减纵向排列数量的方式配合响应式的断点设计，让同一界面在不同设备之间轻易的创造出一致性的视觉体验。
卡片给人最直观的感觉就是可以操作，它不用箭头、按钮或超链接等引导性的视觉元素提醒，节省了一定的页面空间，还有着更大的操作热区，无需做到精准点击。卡片式设计很容易融入各种交出手势，如单击、双击、长按、拖动、滑动等，为用户提供更多便捷的操作。
卡片可通过缩放的形式充分利用动画进行页面跳转，例如App Store“Today”频道，点击卡片后直接等比放大至全屏，给用户一种还停留在当前页面的错觉，避免了传统的跳转页面而造成的信息割裂感，流畅丝滑的过渡，给用户更自然的交互体验。
这种类型的卡片在UI设计中最为常见，柔和的圆角、边缘阴影以及四周很自然的留白，让内容模块的存在感更加强烈，整个页面信息的层级也更加清晰。
悬浮型卡片并非模态弹窗，与其相比，悬浮卡片不需要主动操作触发，可作为临时控件或长期固定显示，并且比模态弹窗能承载更多信息内容，可通过伸缩来定义卡片中的信息数量，或多、或少、或展示、或隐藏，在页面中非常灵活。
例如高德地图首页，搜索框及右侧的功能入口长期悬浮在地图之上，而下方卡片中的内容会随着高度的伸缩自动调节可展示的数量，非常实用。
通栏类型的卡片具有更强的视觉阻断，对区分不同的功能模块有不错的效果，不过这种类型只通过页面背景色保留上下边间、且不会过多，不然页面会显得零散、杂乱。
瀑布流主要正针对图片较多、或以图片为主的内容设计，它最大的优点是无需过于在意图片的高度，最大限度的还原原始图片效果。
卡片式设计的瀑布流对信息的组合、包容性更强，不仅能在单屏区域内显示更多内容，同时又将每组信息组合作出了明确的划分，在不破坏页面整体性的基础上也做到了相对独立，如花瓣、Pinterest就是最好的例子。
信息流的展现方式主要以文字、图片或视频内容为主，是一种较长内容的媒介，不管哪种展现方式，其都需要用户耗费较长时间的滑动、浏览来筛查对自己有用的信息。
卡片式设计将信息进行分块处理，通过阻隔的方式快速告知用户每个卡片的核心内容，便于用户在长时间的滑动过程中也能快速识别重要信息。
卡片式左右滑动组合在音乐、视频类产品中用最为广泛，因内容本身就图片居多，也更适合卡片式设计，相比平铺具有更强的层次感，对用户的吸引力较强，尤其最右侧漏出的一小部分内容营造出神秘的感觉，用户会不由自主的想去滑动以求获取更多信息。
卡/券设计实际是把生活中的实物映射到了UI设计中，通过模拟实物造型设计成卡片样式，有效降低用户的理解成本，并对其有了更直观的感知，真实感尤为强烈。
对于用户主动触发或系统临时发起的非固定性内容，利用卡片式设计会让信息布局更灵活、视觉更突出，在不影响用户使用的前提下，可出现在任何位置。
卡片式设计可以将个人中心、个人主页、会员等页面中的关键信息进行概括，并在头部位置进行重点突出，不仅让原本单个的内容形成整体，还能营造出沉浸式的氛围。
为了保持界面设计的一致性，需要将卡片样式纳入设计规范，例如卡片是否通栏、是否需要设定圆角半径、不同场景中卡片大小的划分界限以及圆角数值的确定等，大部分情况下都需要遵循设计规范。
在同一产品中，虽然要遵循设计规范以确保一致性的视觉效果，但并非所有页面都适合卡片式设计。
那么，到底是否需要采用卡片形式、使用哪种卡片类型？这还得根据页面内容属性及目标定位来决定。例如社交产品中的临时会话列表、动态圈子使用卡片形式，很浪费纵向空间、甚至会显得很“鸡肋”，用分隔线或间距留白来区分信息组显然更合适；但对于电商类型的产品，利用卡片将不同的商品分隔后又进行归纳，会更容易识别，信息的可读性也会更强。
卡片式设计本身就包含了容器与背景的层级表现，为了保持内容的正常展示与用户浏览体验，避免在卡片中嵌套多层卡片，以免信息层级杂/乱而增加用户的视觉负担。
如果再同一卡片中需要再次区分多个信息组，可利用间距留白、分割线或浅色背景等元素属性来区分，依然能达到想要的效果。
因为卡片内、外的双向间距留白，在空间有限的移动端设备中，横向空间利用率较低，因此除了合理的减小左右间距外，还可以适当利用左右滑动来扩充横向隐性空间。
例如淘票票首页，在1.5屏的范围内，几乎每个模块都能横向滑动查看更多内容，从用户体验角度出发，这是纵向空间无法比拟的。
卡片式设计不是目的，其主要是用来更好的区分信息层级、提升用户浏览体验，因为卡片要作为独立空间的存在，必定会增加上下间距而导致页面拉长，因此，如无必要，不必盲目采用卡片式设计。
例如美团APP的「首页、电商、购物车、我的」4大主功能页面都使用了卡片形式，而「消息」页则采用分割线进行信息分组，试想一下，如果为了统一规范而使用卡片，不仅造成很强的割裂感、还会极大的浪费纵向空间。
这点不用多说，新闻资讯类产品的内容详情页就是最好的证明，不管其他页面是否采用卡片形式，但详情页并不会跟随形式，一方面可以让同屏展示更多内容、增加空间利用率，另一方面可减少无关元素对用户产生的干扰、给予沉浸式的浏览体验。
很多时候，我们总会听到PM说这个很重要、那个也很重要，都需要突出一点，殊不知当什么都突出了也说明什么都没有突出。在单个卡片中，组始终牢记这个准则：一次只突出一个核心信息，以便于用户快速、精准捕捉，切记不可贪多。
卡片式设计之所有能快速流行起来且经久不衰， 其主要得益于自身的灵活性，尤其是在跨设备、跨屏幕上有着纯天然的优势，能忽略设备的差异给用户提供更好的服务。卡片并不是简单的样式设计，它是一种自由布局的设计语言，通过多种方式的信息组合、结合丰富的交互操作，给用户创造出极致的使用体验。
信息的呈现方式虽有不同，但最终的目的都是为了服务于内容，卡片式设计只是其中的一种形式而已，在设计过程中，我们需要根据内容结合实际情况作出合理的判断，切勿拘泥于形式而忽略内容本身的重要性。
任何设计风格及展现形式都有可能成为历史，卡片式设计也不会例外，但绝对不是这么快就结束，它依然值得我们去深究，力求打造更好的信息布局、更舒适的用户体验。
专栏作家
大漠飞鹰；公众号：能量眼球，人人都是产品经理专栏作家。致力于产品需求的驱动、产品体验的挖掘，利用设计的手段为受众用户带来更好的体验，即好看、好用。
本文原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
底部标签栏的图标风格在一定程度上决定了界面的风格。看起来相对简单，但仍然有很多问题值得注意。作者通过标签栏样式分析、6个导航栏注意事项来总结底部标签栏的设计，希望通过这些内容能帮助你对底部标签栏有进一步的理解。
底部标签栏（也称导航栏）是移动端设计中必备的导航类型之一。底部标签栏上通常会安排最重要且频繁操作的功能，方便用户随时都能快速访问。
虽然底部导航栏看起来相对简单，但要做到精准设计，仍然有很多问题值得注意。
本次通过标签栏样式分析、六个导航栏注意事项来总结底部标签栏的设计～
底部标签栏可以是纯图标样式，或者图标与文本标签搭配的样式。
选中的标签需要有不同的视觉风格，可以使用按钮、文字、圆点等样式来表示选中效果，帮助用户一目了然地定位当前导航。
在Apple iOS底部标签栏中，标签栏的宽为390px，高为49px。
常规标签栏的图标大小为25x25px，紧凑型的标签栏图标为18x18px。
在iOS的底部标签栏中，文字使用的字体为10px，中等粗细。
底部标签栏最适合放置3-5个导航选项。移动端屏幕相对较小，使用五个以上的选项会让导航挤在一起，并影响可用性。
另外导航选项太多，手指的触摸面积(红色圆圈)会比触摸目标(导航选项)的面积大很多，用户有可能会意外触发错误的选项。
设计解析：
①如果选项很少，只有两或三个时，可以考虑使用分段控件的设计样式，将分段控件放在页面上方作为导航。
② 如果选项很多，超过五个时，我们需要评估这些导航的优先级，筛选出最重要的导航。如果必须要保留五个以上的导航选项，可以考虑使用类似汉堡菜单这样的控件。
底部标签栏是用户使用频率非常高的导航之一，这就需要确保目标受众应该对标签栏中的图标非常清晰，避免让用户产生疑惑。
如果在设计的时候，觉得某个图标的含义或者样式对用户来说不是特别明确，那么就需要将图标与文字标签一起使用，方便用户快速准确地理解。
图标的颜色对比度差、导航标签的字体小是在底部标签栏设计中两个最常见问题。
在底部栏设计过程中，我们不仅要区分已选标签和未选标签的状态，保证已选标签更突出，还要注意观察图标与文字之间、图标与背景之间的颜色对比度，确保未选状态的图标和文字也能够清晰易读。
可滑动的标签栏会对导航可见性产生影响，由于并非所有的导航选项都是一次可见，用户可能很容易错过后面的选项。
另外，当用户左右滑动标签栏时，前面已选的标签可能会消失，影响使用体验。
底部标签栏的空间本身就很小，因此在导航中使用文字时，每个字符都显得很重要。
不要截断标签，这样会造成用户不清楚标签的含义，可以尝试使用更简练的文字来清楚地传达选项含义。
花哨复杂的切换动画对于初次使用的用户来说可能看起来很酷，但是一旦用户熟悉了产品并频繁使用导航时，这些复杂的切换动画就会变得很烦人。
这些切换动画虽然看起来很复杂，但却没有为产品或用户带来任何有用的价值或信息，因此这些动画就会变成一种负担，让用户感到沮丧。
底部标签栏的切换动画应该干脆利落，可以使用简单的微动效作为辅助，切莫太复杂。
以上是APP底部标签栏需要注意的6个设计点，希望通过这些内容能帮助你对Bottom Tab Bar有进一步的理解。
慢慢来比较快，希望对你有帮助！
参考：babch.biz/bottom-tab-bar-design
专栏作家
作者：Clippp，微信公众号：Clip设计夹。每周精选设计文章，专注分享关于产品、交互、UI视觉上的设计思考。
本文原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自 Pixabay，基于CC0协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
在交互设计中，字体的呈现方式是提升信息传递效率的重要一环，文字信息层级的处理是否得当，一定程度上会对用户的视觉体验有着重要影响。那么在字体设计上，设计师或者相应的业务人员应该如何做好处理，以提升信息传播的效率和质量？不如来看看作者的总结吧。
文字是设计中的重要组成部分，就像我们平时看到的海报，里面各种被精心设计过的字体经常会成为视觉焦点，以醒目且个性化方式传达出内容的精髓，最后达到的效果事半功倍。
虽然在UI设计中不需要对文字过分设计，但图文作为主要的传播途径，字体的使用是否规范合理将直接影响着信息传播的优先级、重要程度以及用户的接收质量和效率。所以不管是平面设计还是UI设计，字体都是不可忽视的核心元素，做好对文字信息层级的处理，对用户的视觉体验有着至关重要的作用。
互联网经过多年的发展，也积累的很多的专业字体知识，设计师应该去了解字体的性格及特征并将其合理运用，才能将信息更清晰地传达给用户。本文将围绕着字型、字号、字距、字重等几个属性，针对各方面深度解析，希望能够帮到大家。
文字是信息内容的载体，能最直接的将信息清晰地表达出来，字体则表现了文字的外在特征，合理地使用这些属性特征不仅能清晰准确地传递信息、用于特定场景还能赋予情感表达，展现出独特的魅力，例如：健身、器械类的产品使用的字体通常会给人一种力量、刚硬、壮实的感觉，而女性专用产品字体则显的纤细、苗条。
不同类型的字体传达出不同的气质，综合来讲，字体可分为黑体、宋体、圆体、书法体这四类，平时大家看到的各种形形色色的其他字体，基本是通过这几类延伸而来。
在UI设计中，绝大多数的文字排版用的是黑体，诸如思源黑体、阿里巴巴普惠体、苹方（ios）、微软雅黑（PC web）等都是标准的黑体。另外，特定场景如瓷片区、卡片、banner、专题头图、引导页、闪屏等，对于用什么字体不会有太大的限制，在避免商用侵权的前提下符合产品气质即可。
黑体字的笔画横平竖直、粗细均匀且字面呈正方形，一般来说，没有衬线的字体都可以称作黑体。黑体结构清晰、简洁有力，能让界面显得庄重还附有现代感，虽然气质上没有太大的个性化、但可塑性很强，这也是在UI设计中、黑体一直很受青睐的原因，无论是标题、正文、提示等使用场景都可以作为首选，对老设计师能多一个选择、新手设计师也不易犯错。
iOS与Android是移动设备的两大系统，虽然很多设计师用一稿适配两端、遇到特殊页面也只是单独拎出来微调即可，但对于中、大型的互联网公司则很难满足优质用户体验中的部分细微差别，例如：iOS的苹方字体在Android设备中无法高度还原、预留的文字数量上限位置无法显示完整等，都会影响用户体验。
此外，iOS和Android都有自己独立的设计规范，大家有时间的可自行查看，本文只对字体规范作基本了解。
iOS使用的是「苹方」字体，提供了6个字重，英文字体为「San Francisco」；Android使用的是Google联合Adobe发布的「思源黑体」，为充分满足设计要求，提供了7个字重，英文字体为「Roboto」。
此外，如果界面中涉及的数据较多，数字使用DIN字体也是不错的选择，字体外形较长，易用且耐看，很适合数据统计展示，不过这款字体商用的话需要收费的。
字号的大小决定信息的层次和权重，不规律的使用字号会让页面信息杂乱，不利于用户阅读。在设定字号规范时，需特别注意最小值和递增值。
最小值决定信息的可读性，以2倍图为例，iOS11系统将最小字号规范为11pt（22px），但很多产品依然将最小字号设定为20px，甚至部分产品将18px的数字加粗运用在标签中，所以最小字号的设定并没有固定数值，原则上不影响用户的浏览就行。笔者建议最小字号不要低于20px，在设计过程中，可以通过设备实时预览，因为同样的字号在不同的环境、色值、背景下，其视觉效果都有所区别。
其次，递增值决定着信息层级区分的明显程度，遵循字号越大、递增值越大的原则，常用字号数量控制在6种左右。iOS和Android都是采用的2倍数栅格系统，为了让字号的层级区分更明显，字号设定要避开奇数且最小递增值不要低于4px，下面举几个常见的例子：
规范好的字号该如何使用，还得根据界面中的实际场景来决定，如下图：
字间距是指两个字符之间的横向间隔距离，在界面排版中，除了西文的字间距调整需求较大外，中文通常只保持默认，只有少数场景才会手动调整，且没有固定的规律，保持视觉舒适状态即可。例如：banner、界面大标题、重要数字（取件码）显示等。
行高是指包围在字体之外的隐形边框，一个字体元素的的行高等于文字上边框+下边框+字号的高度之和。
西文字体因高度的参差不齐，本身就能制造出视觉上的上下空间，通常行高为字号的1.2倍，而中文字体没有上下间隙的延伸，行高则较大，一般在1.5倍左右，如果字号较小且折行较多，行高甚至能达到字号的2倍。
字重指的是字体的粗细，不同的字重能体现出不同的层级关系，给用户的视觉感受也截然不同。
像苹方、思源、阿里巴巴普惠这些家族字体一般都会有极细体、细体、常规体、黑体、粗体等多个字重，在UI设计中，实用的就常规体、加粗两个字重，再通过色彩、字号使其成为对立关系，明显的拉开文字内容层级后，方能保持良好的浏览体验。
这种主要针对标点符号，以英文字母为标准，半角是指一个符号占用一个标准字符（英文）的位置，全角则是占用两个字符位置。
众所周知，中文使用都是全角、英文使用半角，并且会随着中/英文的切换而自动改变，但有时候难免会操作失误让页面中的某处信息看着怪怪的却不明所以、另外中文信息中的时间/日期也大多会使用半角符号，所以设计师对此有一定了解的时候，在处理这些细枝末节就能做到收放自如。
在色彩规范中，除主/辅助色之外，设计师还会提供3~4个等级的配色，如通用的#333（标题）、#666（正文）、#999（提示）、#ccc（占位符），这也是UI通用的文字色用色规范，不同的字号需用色规律。
如果想进一步延展，可以增加一点品牌色，也可以使用#000（纯黑）调整不透明度来体现文字色彩层级，深色模式中很常见，下面我们一起来了解几个常见的使用场景。
标题的主要作用是让用户以最快的速度了解界面主要信息，需要时刻吸引用户的注意力，例如APP中的导航栏、模块标题、内容标题、数据统计等。需要简单明了且有冲击力，字号一般会控制在30px以上并加粗显示，直接使用一级色值（#333）即可。
在特殊场景下，标题也可以使用主体色值，但一定要注意容器背景与其他信息色彩的协调，不然花里胡哨的还不如用回一级色值。
正文并不需要吸引用户注意力，它主要是提供标题的注释或内容的详细说明。
当白色背景文本内容过多、在需要用户仔细阅读的情况下，一定要注意颜色不能太深，不然显的主次不分，还有些刺眼，这里推荐26~30px字号使用二级文字（#666）色值。
提示类文字使用场景就相对较多，它除了给用户展示当前状态，还能给予合理的引导，促进用户进行下一步操作。常见使用色值为三级（#999）、四级色值（#ccc），例如界面中的操作注意事项、表单占位符等。字号一般为24px，因使用场景不同，也会有特殊的存在，例如表单中占位符的字号会跟随输入后的字号统一。
超链接在字号、色值上没有一定的限制，但需要一个特定的辅助元素/属性来提示用户这是可点击的。
例如APP登录页面，找回密码、注册、获取验证码等，大部分都是用主体色、图标（右箭头）等方式强化可操作入口，而PC端网页中超链接的表现方式，下划线、蓝色字体、>>这三种方式几乎能涵盖所有。
规范并非不可更改，它只能帮助设计师在大部分使用场景中减少设计出入并提高产出效率，但总有一些使用场景需特殊对待，字体也不例外，如以下场景：
虽说黑体（苹方、思源、阿里巴巴普惠）是UI设计中的首选字体，但这也仅仅只是建立在不出错的的情况下、满足基本条件而选择，如果想表达出产品的类型、情感、气质等品牌属性，在不影响用户识别的前提下，可选择一款符合产品气质的字体，打造出差异化的浏览体验，对于追求完美的APP来时是一个不错的解决方案。
例如，部分艺术、女性类的APP会选择使用宋体，整体看起来有一种高端、时尚且优雅的感觉。
整体界面使用特殊字体还是相对较少，为了更好的体现出产品属性/风格，将其融入不同的模块及使用场景，会让产品更有特色，例如banner、瓷片区、大标题、头图等，对用户的视觉吸引力能得到很大提升。
在一个APP中，坚持使用同一个家族的字体，对标题、正文等文字信息有一个统一的视觉规划，这样有助于建立起体系化的设计思路，避免在开发落地时存在一致性问题，减少开发与设计的出入。
笔者曾见过这样的设计师，界面中原本用了「苹方」字体，在一个特殊场景下，「苹方」的粗体字重无法满足大标题的使用需求，于是将大标题单独改为「阿里巴巴普惠体」的最大字重。
从表面上看，上述的设计需求是满足了，但稍有不慎就会成为没有价值的艺术品，首先，单独一处使用不同家族的字体，会影响整体视觉的一致性；其次，若程序没有嵌入另外的字体，产品落地后其视觉效果毫无改观，且更没有必要为了某个场景的使用要单独嵌入几十到几百兆的家族字体，让应用安装包无故加大。在设计中，有时候在解决某个问题时，解决方案并非无可替代，加粗字体亦是如此。
另外，在可用性、实用性强且必要的情况下，并非不能再增加一个家族字体，例如所有标题系列使用「阿里巴巴普惠体」、数字系列都使用「DIN」，前提是一定要形成体系化，并非某一处的使用。
在同一个界面中，字体色值、字号、字重等，都是用于区分信息层级，尽量不要使用过多的层级，避免层级混乱影响信息浏览。
在信息层级处理方式的四个基本原则中，「对比」就是将复杂的信息通过元素的各种属性以不同的视觉效果呈现，来体现信息节奏感，并非是为了好看而随意给文字赋予各种属性及样式效果。
避头尾使用在文字内容较多的折行场景中，主要处理标点符号刚好出现在一行文字的开头或结尾时，通过自动调整单行的字符间距、在视觉上将标点符号前移或后移。
在新闻资讯类应用的详情页中，避头尾使用的较多，用以避免头/尾存在标点符号造成视觉重量不一、信息参差不齐的问题出现。
很多时候，为了区分信息层级，首先想到的是利用不同的字号、字重来体现，这当然没有问题，但如果结合字体的明暗关系（灰度色值等级）则效果更佳。
如下图：标题一级色值（#333）、正文二级色值（#666）、时间日期三级色值（#999）。
备用字体只会运用在web页面中，如果网站需要一款特殊的字体才能彰显其独特的气质、同时又担心用户在某些设备中因为没有这个字体而无法浏览其效果，则会另外再选择一款相近的通用字体作为备选，以弥补视觉体验上的损失。
如果字体包不大，也可以让开发将其放在服务器端，这样能让所有用户都能看到相同的效果，省去了不少麻烦。
可读性应该是选择字体的首要元素，虽说很多文字我们都可以从前后字义、联想词等角度将自己的理解补充完整，但完全没有必要。
UI设计不像海报那样融入较多的艺术成分，更需要的是内容清晰、表意明确、高效率的传达，任何增加用户阅读、理解成本的做法都应该规避掉，例如过于变形的可爱风格、书法手写体等都尽量少用。
文本内容是UI界面中占比较多的元素之一，设计师需要对其基本属性及使用场景有一个清晰的了解，使用的是否恰当取决于我们对字体的选择。虽说在UI领域，字体模块类的文章比较少（更多是文字、字库的设计），但它在设计规范中的地位是举足轻重，选好一款字体对设计来说是锦上添花。
关于UI界面中的字体，其实没有太多的讲究，也没必要整得花里胡哨，重点在于排版过重中注意信息层级的划分以及有足够的视觉舒适度即可。
专栏作家
大漠飞鹰；公众号：能量眼球，人人都是产品经理专栏作家。致力于产品需求的驱动、产品体验的挖掘，利用设计的手段为受众用户带来更好的体验，即好看、好用。
本文原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
大部分产品中都含有一些引导帮助的功能，这些功能有什么作用呢？对于设计者来说，应该秉持怎样的初心来设计呢？目前，引导帮助功能又有哪些常见的分类呢？带着这些问题，我们一起走进这篇文章，看看作者为我们的分享。推荐相关人员阅读与学习。
前几天眼睛不太舒服，去医院做了一个检查（视疲劳导致）。
因为要走商保，所以需要使用社保卡，之前我记得社保结算都需要去人工窗口，我刚过去就被一个穿着红马褂的大妈拦住说自助机也可以用社保，要我扫她胸前挂的码（可以快速到达电子社保二维码界面），扫完她就开始帮我点击操作。
她觉得我应该不会操作，所以让我看一遍，其实这个操作并不难，只是因为我不知道自助机上可以用，自助机周围也没引导操作流程。而且她这种方式让很多年纪大的人和外地过来看病的觉得你是个骗子，后面好几个人都还是去了窗口。
在B端产品中也有很多类似问题，用户不知道有这个功能、也不知道这个功能怎么使用，特别是一些数据类产品，专业性比较强。产品、技术都认为用户和他们一样都懂，实际上并不是，这个时候你需要提供一些邀请，引导用户进行使用。
邀请就是引导用户进行操作前的提醒和暗示，通常包括实时的提示信息和预期功能，以表明在当前界面或下个界面可以做什么，这是成功的交互式界面关键所在。
例如：飞书-我的空间，当鼠标停留在可编辑区域上时，就会实时地显示邀请（复选框），这个例子的缺点是鼠标如果不处于相应区域上，就不会显示邀请。
另一种方案是任何时候都显示邀请，例如：石墨文档-我的桌面，复选框一直显示。
静态邀请就是通过直接在页面上给出交互提示，可以让用户随时看到期望的界面功能。
静态邀请主要有两种模式：引导操作邀请、漫游探索邀请。
01 步骤引导
例如：华为云HECS服务器产品就给出1、2、3操作步骤
引导操作会占据页面较大的空间，同时也会吸引用户的眼球。所以在设计时需要思考一下，你希望引导用户执行什么操作，用户是否可以多次查看，这样有利于设计出明晰的页面和信息层。
02 白板引导
另一种引导操作邀请叫白板式引导。
意思很明确：现在只有一个空白页面，需要引导用户创建内容。
利用空白区域“变废为宝”，如何对该区域应有的功能给出提示，是诱导用户创建内容（填补空白）的有效方式。
与引导操作邀请关系密切的是漫游探索邀请。假设你重新设计了某个页面并添加了一组全新的功能，怎样才能保证用户恰当地使用新页面，同时发现新添加的功能呢？漫游邀请是向用户介绍新功能最好的方法。
最佳实践：
静态邀请适合提示用户当前界面中包含什么功能。然而，许多调查试验表明，用户经常不会阅读指导说明性的文字。而在用户交互过程中，在他们需要的时候提供邀请则是一种不错的方式。动态邀请就是在用户交互过程中的某个点上吸引用户，并引导他们继续下一步操作。
吸引用户的一种方式是通过鼠标悬停来显示邀请
例如：飞书消息列表鼠标移入后， 背景变化的同时会有一个“勾”图标来吸引用户，鼠标移入上去后提示可以点击完成，点击后消息移除列表。
最佳实践
唐纳德·诺曼将这个术语引入到设计领域。最经典的例子是门把手，门把手的预期功能是可以抓握、扭转或按压。屏幕元素可感知的预期功能没有物理属性，不过，由于习惯、术语、图形及一致性等原因，用户能够在某种程度上感觉到他们可以操作这些元素。
例如：第一张图飞书文档sheet页“加号”图标与第二张图“三个点”图标，就是一种预期功能邀请。用户没触发之前就能猜到触发后会是什么效果。
预期功能邀请之所以有效，是因为利用人们已知的习惯与认知引入交互，从而让用户顺利完成一连串操作。
最佳实践
设计邀请时怎么才能猜测用户的想法，也是一项重要挑战。如果用户下一步可能会执行多种操作，而事实上又不可能准确判断用户想法，那么面临的困难就会比想象的大很多。
在google sketchup （ 3D）绘图工具中，当鼠标点击某个点后，进行第二个点连接时，会有多种可能性，这个时候系统也不确定用户会怎样连接，但会给出对应的提示，比如：端点、中点、背面、侧面等点位来辅助用户进行连接。
例如：这种工作流场景个人觉得也算是一种，点击“加号”右侧会滑出面板，给出你可以添加的动作。
这种在交互期间以可见方式向用户表明系统推断出的用户想法被称为推论邀请。
图片类型的更多邀请，例如：站酷相关推荐
文字更多邀请，例如：QQ邮箱右侧最近联系人
精心设计的应用能够通过邀请体现出各自的细微差别，无论是静态还是动态，都是引导用户顺利进入下一个交互层次的有效方法。
谢谢观看！
作者：夜莺YEAH；公众号：夜莺B端UX设计
本文由 @夜莺YEAH 原创发布于人人都是产品经理，未经作者许可，禁止转载
题图来自 Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
在视频播放器中，合理的手势交互设计可以帮助用户提升操作上的便捷性，从而实现更快捷的触达。那么如果想在已有的手势交互上实现设计升级，产品或设计一侧可以怎么做？本篇文章里，作者针对手势交互优化一事进行了解读，一起来看。
视频播放器中承载着极其丰富的内容画面和播控功能，尤其是在寸土寸金的移动端视频播放器中，为使内容更沉浸消费，需尽可能克制界面中的功能元素/入口直接外露。基于此种场景下，合理的手势设计不但可为界面“减负”，还可帮助用户更快捷触达功能、提升操控便捷性。
视频场景中目前已有部分的常规单向手势已被用户广泛接受并形成习惯认知，如「单击 →暂停」、「双击→点赞」、「长按→快进」、「横滑→导航」、「纵滑→切视频」、「双指捏合→缩放视窗」等通用手势。
那么如何在保留用户对于常规通用手势认知的基础上，进一步对视频场景中的手势交互进行扩容升级？这也是我们接下来在手势进阶交互上的重点探索方向。
本次针对百度APP中的视频播放器场景，为提升手势操控效率，我们试图将常规的基础通用手势进行打散重组、并结合实践案例梳理出「组合手势」设计模型，以探索如何在视频场景中构建便捷高效的进阶手势体验设计。
「组合手势」是基于常规手势的组合扩展，其通常由两种或两种以上的常规基础手势所构成，若组合方式及使用场景得当，可助力用户更便捷的触达功能。
以前述的视频场景常规手势为例，其触发机制一般可分为两个阶段：step1交互信号→step2执行任务，即用户通过某一基础手势发出交互信号，系统收到信号确认后便可立即执行任务，但整个过程是线性的，手势扩展性十分有限且难以满足视频场景对于手势扩容的诉求。
于是我们在现有常规手势两阶段触发机制的基础上，尝试引入「意图识别」环节，并梳理出「组合手势」的设计模型，以探索不同基础手势相互组合后的扩展可行性。
「组合手势」触发一般可分为三个阶段：step1交互信号→step2意图识别→step3执行任务，前两阶段均可由对应的基础分支手势构成并进行组合搭配、以寻求最高效的手势组合触发路径。
由于「组合手势」并不像常规手势那样早已被系统定义为可供直接调用的接口，因此，其差异化创新具有较大设计灵活度，尤其需根据具体的使用场景进行综合考量。
百度APP视频场景早期的播控功能较少，如“视频下载”等个别特色功能入口一般都融合于基础菜单之中。
随着后续视频场景的功能建设日渐完善，我们便在基础菜单面板中拓展了一行视频菜单，专门用于承载视频场景特有的播控功能。但当前播控功能已达10余项，菜单面板弹出后还需左滑才可露出后面的功能入口，因此也常收到用户反馈找不到常用功能、菜单面板功能排布无章且触发成本高。
通过对竞品进行调研，我们发现竞品均有使用长按手势作为切入口以触发相关播控功能、并归纳出“视频播控触发”目前主流的三种长按交互选型， 分别为：长按触发独立播控面板、长按触发浮层播控选项、长按触发特定播控功能。
1）长按手势交互扩容
针对目前视频播控菜单存在的问题，经过和业务对上述三种长按交互选型方案进行综合考量，最终决定聚焦于以方案“选型B”的「长按触发浮层播控选项」作为设计切入点。我们意图将部分高频播控功能从基础菜单中拿出进行前置，并探索一套更便捷的触发机制，以此对视频场景中的播控菜单进行设计升级。
但随之而来的难点是我们目前播放器中的长按手势已被“快进”功能占据，用户对此功能的使用频率高、并已形成较深的操控认知，若直接下线“快进”功能则会对用户使用习惯产生较大影响，尤其是视频场景的重度用户。
那么如何在兼容用户已有长按操作习惯的基础上再拓展“快捷菜单”呢？是否有可能将“快进”和“快捷菜单”进行融合？这也是本次项目对于便捷手势体验的重要设计探索点。
基于此，我们决定尝试使用「组合手势」设计模型来对视频播放器中的长按手势进行重新定义，通过「长按+滑选」的机制触发快捷菜单功能项，以缩短视频常用功能路径。对应到设计模型的三个阶段分别为：
2）容错性兼容
在设定「长按+滑选」组合手势的同时，考虑到兼容主流的长按习惯、以及对于滑选手势需要有一定的适应过程，我们同时也支持点选的操作模式，即用户长按后若未产生滑选行为便松手，则松手后依然可通过点选的方式触发对应播控功能项。
3）易用性打磨
差异化的创新设计形式在前期总会面临质疑和挑战，本次项目也不例外。我们担心用户能否接受并认知「长按+滑选」组合手势的操作形式，于是在DEMO开发完成后便进行了一次小范围内的定性可用性测试，以预期在上线前可先收集一波体验问题进行快速打磨优化。
我们根据测试目标、用户类别、测试前序准备及测试步骤等环节提前拟好必要的测试脚本，并邀请了10+名不同年龄段的目标用户进行访谈测试。
测试访谈的过程中，被测用户在进行1至2次尝试操作之后，均可掌握如何使用「长按+滑选」的组合手势，这也为我们增添了不少信心。
同时，我们通过观察用户操作行为及用户主动反馈，发现仍有部分易用性细节可进一步打磨优化。
① 扩展触发热区
考虑到单手握持手机的使用场景，可尽可能扩大定义长按手势的触发热区，屏幕中除顶/底bar框架区以及本身就自带长按事件的按钮入口之外，其它大面积区域热区均可支持长按触发快捷菜单，以降低触发难度、提升易用性。
② 支持跟手触发
长按后浮出的快捷功能项，其浮出位置支持跟随手指的纵向触发位置而浮出，可减少手指在屏幕上的位移距离、操控更便捷。
③ 实时提示及响应反馈
灵活判断当前手势触控状态（如滑入选择 / 松手触发），在界面中即时给出相对应的引导提示或振感反馈，以帮助用户快速适应新的手势触发机制。
以AB实验对本次设计方案进行定量测试验证：
小流量实验上线后，经过近半个月的观察，大盘指标稳定、播放完成率等满意度指标稳步提升。
「实验组」长按快捷菜单中的功能使用率相对「对照组」均有大幅提升，说明用户对部分高频功能的确有很强的快捷触发诉求。
「实验组」的“快进”虽多了一步触发步长，实验前期“快进”使用率不及「对照组」，但随着用户对于「长按+滑选」手势整体的使用占比持续走高，通过滑选触发“快进”的操作习惯也快速被培养起来，对于用户来说，长按快捷菜单带来的整体收益是大于折损的。
随着长按快捷菜单的上线推全，长按手势的渗透率也持续走高，用户逐渐对视频场景更多的播控功能有了长按触发的诉求，于是我们对长按菜单进行了二期的设计升级，在长按浮层最右侧新增“更多”快捷入口以承接视频场景所有的播控功能，用户通过长按后的可选播控项增多，播控功能整体的使用量得到进一步提升。
手势交互是用户在现实世界行为的映射，无论是基础手势还是组合类高级手势，都须符合用户认知习惯、并融入具体的使用场景中进行设计。
以「组合手势」设计模型为指导基础、并结合具体的项目实践，我们进一步对视频播放器中更多功能场景进行了便捷手势的设计扩容探索。
“小窗播放”旨在退出当前视频落地页、并可将当前视频切换成以悬浮视窗的形式进行延续消费。
基于用户的此种操控意图，我们以“右滑返回手势”发出交互信号而触发浮出小窗入口，随后系统根据用户“纵向拖拽手势”的行为来判断其是否有激活小窗的意图，若有短距上滑拖拽行为，松手释放即可快捷激活视频小窗，以提升观看体验的连续性。
“双指拖拽手势”可拖拽并清屏视窗画面，以此手势发出交互信号，若在“双指拖拽手势”基础上有识别到“双指扩张手势”行为，则松手释放即可快捷激活“满屏播放”，以满足更沉浸视频浏览体验。
便捷手势的设计出发点是为提升操控效率、缩减功能触发路径，从而使视频内容更沉浸消费。希望本次基于视频播放器场景的手势体验设计实践能给大家带来帮助和启发，后续我们也将持续深耕视频领域、并进一步探索更贴合用户使用场景的手势交互体验。
作者：百度APP用户体验
来源公众号：百度MEUX（ID：baidumeux），百度移动生态用户体验设计中心，负责百度移动生态体系的用户/商业产品的全链路体验设计。
本文由人人都是产品经理合作媒体 @百度MEUX 授权发布，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
在日常场景中，画面平衡是潜在的一个重要影响因素，合理且有吸引力的视觉平衡设计，可以让用户更加舒心地接受并停留在使用页面或者相应场景中。那么，视觉平衡究竟应该如何做好？本篇文章里，作者针对视觉平衡这件事儿进行了分析总结，一起来看一下。
画面平衡是一个很基本的设计理念，但很多朋友在平时的作品中容易忽视这个点。彩云在星球中帮不少朋友看过作品集，发现最多的问题之一就是画面平衡没做好，我觉得只要把这个基本问题解决了，作品就能提升一个档次。
用户本能地会对不平衡的设计感到厌烦，如何在画面中创造一个有吸引力的平衡？是本篇文章要分享的内容。
Illustration: Outcrowd
平衡是一个作品中最重要的元素之一。平衡中的对称关系能够创造平衡与和谐，这种平衡状态直观上能够让用户感到舒适。
人体是垂直对称的，我们的视觉接收也与之相对应。我们喜欢物体在垂直轴上保持平衡，直觉上总是倾向于平衡一种力量与另一种力量。
Illustration: Outcrowd
在设计环境中，平衡是基于元素的视觉重量，而视觉重量是用户对图像的注意力范围。如果画面是平衡的，用户会下意识地感到舒适。画面平衡被认为是其元素在视觉上的比例安排。
如何让一个页面看起来平衡？
最常见的平衡例子就是使用对称。
在潜意识层面上，对称的视觉能让人愉悦，能让画面看起来和谐有条理。对称的平衡是通过在水平或垂直的中轴两侧均匀放置元素来创造的。也就是说，画面中间假想线的两边实际上是彼此的镜像。有些人认为对称的平衡是无聊和可预测的，但它经受住了时间的考验，到现在仍然是在页面上创造舒适和稳健感觉的最好方法之一。
Illustration: Outcrowd
两侧重量不相同的元素构成具有不对称平衡。
动态平衡通常会比静态平衡更有设计感，让画面不至于呆板。在缺乏平衡的情况下，我们的目光会条件反射性地开始寻找平衡点，这是一个很好的机会，可以将注意力吸引到页面上可能还没被注意到的部分。页面重点就应该放在这里——抓住用户的注意力，就像产品的生命线一样。
Landing page — Asian Cuisine
比如一般这样去“配重”的元素会是一个按钮或者标题。
重要信息（或者是行动按钮）就是我们需要去配重的价值元素。
不对称的现象越严重，用户就越想找出其中的原因（检查配重）。人们本能地比平时更仔细地研究这样的画面。然而，这里需要注意分寸，过于古怪的构图并不总是能被很好的感知。
Illustration: Outcrowd
平衡中的另一种类型，特点是视觉元素从一个共同的中心点放射出来。径向平衡在设计中不常用。它的优点是，注意力很容易找到并保持一个焦点——恰好就在它的中心，这通常是构图中最引人注目的部分。
这是一种平衡中的混乱，就像 Jackson Pollock的画作一样。这样的组成没有突出的焦点，所有的元素都有同样的视觉重量。没有层次，乍一看，画面就像视觉噪音，但所有元素又相互匹配，形成一个连贯的整体。
（彩云注：这是一种比较高阶的设计平衡处理手法，用的好可以让画面非常具有设计感，但把握不好的话，就会非常凌乱。所以，我们平时能看到很多大师的作品看似一些简单图形的使用，但就是好看，轮到自己设计的时候就会发现，越简单的设计似乎越难设计好。）
Illustration: Outcrowd
当谈到构图中的重量平衡时，他们经常将其与物理世界中的重量进行比较：重力、杠杆、重量和支点。我们的大脑和眼睛感知平衡的方式非常类似于力学定律。我们很容易把一幅画想象成一个在某一点上平衡的平面，就像一个天平。如果我们在图像的边缘添加一个元素，它就会失去平衡，有必要修复它。元素是否是一组色调、颜色还是点并不重要，目标是找到图像的视觉“重心”，即图像的重心。
不幸的是，没有精确的方法来确定一个物体的视觉质量。一般来说，设计师依赖于他们的直觉。不过，下面这些有用的观察可能会有所帮助：
1）大小
大的物体总是更重。
2）形状
不规则形状比规则形状的元素轻。
3）颜色
暖色比冷色重。
4）色调
深色物体比浅色物体重。
5）图案
带有图案的元素显得更重。
6）3D
带有纹理贴图的元素显得更重。
7）位置
物体离中心越远，其视觉重量越大。
8）方向
垂直元素比水平元素更重。
9）密度
许多小元素可以抵消一个大元素。
10）内部复杂性
物体内部越复杂，视觉重量更大。
11）填充空间关系
正形空间比负形空间更重。
12）对重量的感知
照片中的哑铃看起来会比一只钢笔更重。
当使用对称时，作品看起来可以更加的专业和有科学性。其中，静态对称的作品显得更加有专业精神和严肃的；而动态对称的设计方法则能吸引用户的兴趣，表达出个性和创造力，能让用户集中注意力。
原文作者：Erik Messaki（本文翻译已获得作者的正式授权）
译者：彩云Sky，人人都是产品经理专栏作家，腾讯高级视觉设计师。
本文由@彩云sky 翻译发布于人人都是产品经理，未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
蓝蓝设计的小编 http://www.lanlanwork.com