如今我们的生活，到处都是大幅图像广告，纷扰喧闹的各类短视频与直播。这是一个快节奏时代，我们更倾向阅读图像。为什么我们偏爱图像视觉超过文字？从人类进化角度来看，原始时代的祖先通过五感感知着这个世界，其中通过视觉来感知判断生活，其他四感辅助之。即使后面我们发明了文字，但发展至今，对图像的本能吸引力依旧强烈。因为在我们认知的潜意识里图像相较于文字更能让我们快速轻松理解并记忆。
图像如此重要，设计作品中当然也必不可少。因为图片，它能一定程度上决定画面基调；引导视觉流程；调剂平衡多段文字信息的枯燥性，让阅读变得轻松容易。
在UI设计中，我们经常需要把设计输出物拿给产品经理或者其他有设计决断力的人看，UI设计中图片使用的好与坏，能很大程度上影响着决策者的感知，以及你的设计过稿率。
如下左图：商品视角、调性、细节，都没有右图来的统一、有质感。单看这两张图，会让用户有这样的心理感知：左图感觉像山寨盗版商城；右图则会认为是严肃官方认证商城。所以，在同样页面布局下，不同的图片使用与处理，能让UI页面的品质有较大的感知差异。
图片的使用如此重要。那么，我们在正式做UI设计前，首先需要弄清楚图片在页面的占比情况以及后续图片的支撑来源问题。
在构思UI页面阶段，首先需要了解以下两个问题：1.图片区域占比问题；2.图片来源问题。当页面图片占比多，且让用户自定义，那么需要预估到APP上线后设计可控率会降低。换句话说，实际上线效果会不尽人意。如下图：由于淘宝和网易严选平台属性不同，在图片品控上就有着不同的视觉感受。当然，不是说淘宝做的不好，而是当一个平台集纳不同的店铺，不同调性的产品类型，即使有图片规范，也难如统一品类、调性的产品来的统一。
弄清图片内容的可控性问题后，开始进入设计环节，那么我们该如何选择图片？
在不同的场合有恰当合适的场景搭配，是十分基础且重要的事情。在UI设计中，任何一个部分的设计以及元素运用都需要为产品服务。图片也不例外。如果你是厨房类APP，头图选用小清新感的图片，就显得不够合适，带有环境食材元素的图片才更让用户有共鸣。
2.是否能清晰表达产品核心内容？
图片是否主体明确？能一眼正确无误的传达核心内容？会不会因为其他元素元素抢了主体视觉，找不到视觉重点？
3.是否美观、有品质、让人想拥有？
图片是否能表达美好生活以及美好品质的向往？光影关系是否自然？图片是否高清有细节？
当明白图片如何选择后，还想和你分享一些冷门且重要的图片过稿小技巧。记下来，将大大提升你的设计过稿率。
漂亮图片有很多，如果我们都以漂亮为基准，找出来的图片也会形色各异。由于用户的实际使用场景是：浏览一个完整APP，统一风格调性比美更重要。如果商品角度不一样；饱和度高低不同；抽象与具象等，都会形成产品不统一，用户视觉不适应等问题。
有时我们为了赶时间，直接用图片填充插件，让图片区域自动填充。但我还是想要给到你这样一个建议：一个专业且成熟的设计师，即使是设计初稿，也不能随便拿张图，凑合一下。任何时候的汇报，都需要有着处女座对于事物的完美要求，过自己这关。因为任何时候你的表达与表现，都形成了你在别人心目中专不专业的看法，从而影响着后续的设计话语权问题。如下图都是商城陈列页面，右侧的图片给出上线的实际效果，更贴合产品，方便设计决策者给出建议方向，或做出决策。
我们都是视觉动物，不管你是否愿意承认：我们常常通过视觉表象，才决定是否愿意去更深入的了解某个东西。
设计就是在做产品视觉表象的表达，我们需要尽可能使用贴切的，漂亮的图片。让UI视觉看起来更加美观，让用户愿意停留，认可以及信赖平台。
转自：站酷-丘丘的设计笔记
对于以下场景，你是不是有那么一点点熟悉：
视觉A：「视觉 B，把你之前的稿子发我下，我的页面里也有组件 A」
视觉A：「稿子里的组件 A 怎么跟视觉 C 刚刚发群里的不一样啊，我以哪个为主？」
视觉B：「刚刚业务通知组件 A 得修改，这次大促有 30+ 个页面都用到，这修改量这么大咋办？」
交互A：「这个 tab 上的文字看不清」，视觉A：「我觉得挺清晰的了」
开发：「为什么每次给的设计稿，明明长得都差不多，可尺寸就差了几个像素，我又得写新的样式表进去」
以上的对话，在大型且多人合作的项目中尤为常见。
随着大促项目体量越来越大，参与人员越来越多，这些问题越发明显，直接影响了活动的视觉统一性和整体的工作效率。因此我们开展了营销组件库的设计。
组件库就是界面设计常用控件或元件的集合，「组」是设计元素的组合方式，「件」由不同的元件组成。
其工作方式和乐高原理差不多，玩家（设计师）通过小元件（设计元素）或组件（模板）的不同组合形式，层层搭建和嵌套，最终组成建筑（页面）。
△ 乐高W16搭建过程，图片来自「什么值得买」
△ 页面设计过程
1. 保证用户体验的一致性
对于大促这种含有多个子项目，涉及到 30+ 的页面同期输出的复杂项目，每个独立的子项目虽然在需求上有一定区别，但整体的用户体验需要满足基本的一致性，减少用户认知和负担，提高用户的使用效率。组件库的建立，其统一的设计语言能保持设计结果的统一性，避免多人多风格的现象。
2. 提升效率
不同行业、不同产品、不同项目的组件库因其业务特点不同，其差异会非常大。那怎样的组件库才能满足「大促营销类」的项目需求？
分析研究
行业设计：行业优秀的设计系统、组件库搭建思维，以及其源文件，是最宝贵的学习资源。
主站设计：保证全站设计的一致性的同时，也是重要的学习参考；
过往问题：对过去项目的横向和纵向对比和分析，理解业务结构以及特点，从需求出发，拆解页面表达结构和所需组件的特点。
设计方向
通过前期的分析，明确了针对营销大促类组件库的设计方向：
拆分重组的组件化思维，解决模板灵活性和一致性的诉求
在设计方法上，我以 2013 年 Brad Forst 提出的原子设计方法论作为指导。方法的本质其实就是将页面拆解为最小元素（原子），然后原子可以演变成分子，分子通过多维度的组合形式成为组织，再到模板，最终生成页面（原理如下图）。
营销需求的多变性体现在分子的组合方式各不相同，但其共用特征是最小元素（原子）基本相同，因此统一最小元素，定义其组合的规则，即可从源头把控设计的一致性。同时通过特定的组合原则，设计师结合各项目需求根据组合和应用原则（布局、文字等）进行设计，从而实现其灵活性。
原子设计理论延展阅读：
明确了设计方向和设计方法后，结合营销项目自身的特点，开始了组件库的设计实施，整体流程如下：
梳理组件库
将近几期具有典型代表的页面收集整理分析，主要是为了以下 2 个方面的内容
ps：组件库强调的是通用和复用，因此无需把所有模块都纳入整理清单，做「合适」的，而不是大而全但可能臃肿的组件库。关于这个组件库的体量应该如何选择，可以看下文末的参考文献。
设计环节
梳理完组件库，按照原子设计方法论组件嵌套的形式进行组件设计。在 Brad 的概念里，是将系统分为了 5 个层级，但针对营销业务的多变性，要满足复用性和灵活性，越往上的层级复用性越差，因此在现阶段，采用了 3 个层级「原子-分子-组织」构成营销组件库。
「全局考虑」在设计的整个过程中，需考虑每个组件后续的使用场景以及设计师的使用方法，利用 sketch 功能（symbol 嵌套、丰富的配置项、响应式设计等），可以设计出一个高通用性的组件（如下图），以此达到增强每个组件的复用性，以及精简组件库的目的。（因文章篇幅受限，详细内容可见文末参考文献）
下面为每一个层级的详细设计：
第一层：「原子」是最基本和最小颗粒度的单位，工作中常以「元素」命名，例如：颜色、文字、图标、分割线等
布局：系统布局规范，需要通过统一的设计元素和间距规范去引导使用者们使用并且能够适配不同屏幕尺寸，目的是达到一致性，可适配、可控性原则。
「网格系统」通过前期的研究，网格系统采用的是目前最常用的「8点网格」，能更好地适配不同屏幕尺寸，2 倍的变化均能更好地保持偶数，不出现小数点的情况。
「设计原则」遵循格式塔理论：建立良好的信息层级，能让用户快速获取和理解有用、感兴趣的信息，并产生下一步行为。
颜色体系：「色值标准」为保证文本可识别性，结合Web内容无障碍指南（WCAG）2.0标准，做了以下定义：
颜色对比度检测工具：https://contrast-finder.tanaguru.com/
「衍生色设定规则」规律性设定衍生色，更好地打造页面信息层级
根据以上规则设定颜色体系
文字体系：项目中字体根据实现类型分为系统字体以及图片字体
「系统字体」为了较好的用户浏览体验，设计中优先采用开发直接写的系统实现的字体类型，不会因适配而产生文字不清晰或做图时不同系统渲染效果不同导致的不统一。
「图片字体」考虑到版权，以及字体在不同系统下渲染差异化的原因，选择了免费商用的思源黑体。
基础原子：「灵活性设置」充分考虑应用场景，利用 sketch 功能提高其包容性和灵活性。
第二层：「分子」原子排列组合构成了分子，工作中多以「模板」命名，例如：品牌模板、单品模板等
「局部到整体，整体到局部」原子和分子，其实是一个系统中，相互依赖的元素。因此在分子的设计过程中，会遇到原子包容性不足的情况，因此实际设计中，是不断在原子分子之间切换设计，不断完善各自的设计。
第三层：「组织」原子、分子排列组合构成了组织，工作中多以「模块」命名，例如：商品列表、内容卡片、入口模块、瀑布流图等
「保持克制，宁缺毋滥」该层面设计时，「局部影响整体，整体影响局部」的关系体现得更为明显，会在原子/分子/组织三个层面不断切换，进一步完善各个层面的设计。但过程中需保持克制，所有的设计应是围绕「复用性」和「灵活性」进行设计的，而非组合方式越多越好，多即意味着一致性在一定程度会受到影响。因此，应是从过往项目中，预测未来可能出现的情况，穷举后提取通用的组合规则后进行设计。
过程中多尝试不同方案设计，结合实际项目测试，择取最优方案。
整理设计文件，输出设计规范文档和使用说明。除了整理设计文件，梳理设计规范外，组件库相当于一个产品，需要有一份使用说明，为用户提供基础学习，提升团队成员的使用效率。
4. 迭代设计和维护
一个优秀的组件库绝不是 30 天速成班就结束的项目，而是一款产品，需有专人长期的跟进和维护，例：优化组件包容性；补充组织的种类等，从而逐步建立起适用于团队的组件库。
1. 打造组件库的几个关键步骤
2. 项目成果
组件库在 19 年双 11 项目中的应用，统一性显著提升，对比往年节省 76 人/天，平均效率提升 30%，其中主会场提升了 50%。
3. 项目反思
4. 设计小感悟：
这里讨论的是从细节处提升表单的设计
最近一直在做公司的内部办公项目，涉及到了排版和表单的问题最多，而且大部分都是来自于网页端的改版，因此在画界面的时候，关于表单里很多小细节都不太清楚，并且界面十分的冗长，因此就想把这段时间关于表单的设计做一个简单的总结，希望能帮到大家。
我们今天换个角度来说，最近学了原子设计，所以我们从原子的角度上将表单拆开来说，让我们更全面细节的了解表单，分为以下六个模块：结构、标签、操作、帮助、验证、反馈，首先我们先了解一下表单是什么？
表单是我们在网页和APP中使用频率比较高的模块，大多是数据采集的功能，并且都是需要用户自己填写或者编辑的，因此会在很多功能模块中见到，例如12306的信息填写页，个人中心信息、评论和动态发布以及登录页等等。
我从项目当中最深切的感受就是产品太抠了，网页上的信息哪个都舍不得删，整个搬下来，导致页面使用下来用户的体验很差，虽然很多时候表单里的一些内容是无法去掉的，但是还是希望能够简化表单，如下图所示：
用户注册表单时要一并填写姓名和生日，这种与注册无关的信息填写除了增加用户的提高留时间之外，降低对产品的好感度
信息的填写最好是从用户相对无抵触的信息开始逐渐到隐私的信息，而不是一开始就让用户萌生退意，如下图所示：
自如的房东签约里的内容个人觉得门槛还是挺高的，刚选择完自己的行业，就要填写公司的名称和地址，以及学历信息，这种比较隐私的问题一开始就让用户填写，其实会让用户对这个产品萌生退意。
如果实在是信息量很大但一定要在一个界面里展示，那么就将相关的内容进行分类组合，并且通过增加一些额外的空间或者主标题来分类。如下图所示：
12306、爱彼迎以及知乎的个人信息填写都比较多，但是将信息分类以后，就增加了页面呼吸和节奏感，从而帮助用户更加轻松完成表单。
而且这里在设计的时候需要注意的一个是分割形式，上图的三个例子分别使用了背景分割和留白分割，其中留白分割在填写时使用的比较多，因为大家要注意的是在编辑状态是有很多填写提示的下划线，背景分割或者分割线分割势必会造成视觉上分割感更强，因此在编辑状态留白风格是比较好的选择办法。
但是展示的时候分割线确实比较好的选择办法，如下图所示：
在表单中，标签问题比较多的在于标签的位置放在那里，我们经常看到的有左对齐、右对齐、顶部对齐和浮动标签。如下图所示：
浮动标签和顶部对齐目前来说是使用的比较少的情况，这种位置符合自然视线，能够快速帮助用户完成表单，但是却用的不是很多，因为关于表单的填写，产品还是希望用户能够慢下来的，通过左右阅读，让用户仔细阅读标签，如下图所示：
目前手机端使用较多的是右对齐为主，毕竟用户理解和填写速度都属于适中。
在操作的设计问题上，我们一般拿不准的就是不知道按钮要放在界面右上角还是下方，我们先说第一种：
这是目前不管是设计还是使用，都是界面中出现频次比较高的一种方式，如下图所示：
这种形式适用于界面信息内容不多，并且用户的可控性比较强，在UGC的产品中较多出现。
优势：按钮的视觉层级不是很高，方便用户更专注于当前页面的填写
缺点：按钮在右上角，不太方便用户一只手操作。
用主题色作为按钮的主色，并且固定在界面底部位置，如下图所示：
优点：位于屏幕下方，方便用户点击，同时视觉层级高能够吸引用户的注意力
缺点：会遮挡表单，导致用户会错过一些信息，因此这样的按钮大部分都是会放在信息不重要或者不用完全都填写的表单界面上。
这里的底部与第二种不同，第二种是固定在界面的底部，但是这种是固定在表单的底部，如下图所示：
优点：符合用户的阅读习惯，同时能够引导用户将表单信息看完，因此这种比较适合用在表单有必填项目的表单中使用。
缺点：如果表单内容比较少，在视觉上就会显得拥挤
帮助提示大多出现在产品的登录页和隐私信息的填写界面，不同的步骤需要考虑不同的情况。
未填写时给与用户的提示，这种情况是最常见的表单形式，如下图所示：
将需要用户填写的表单信息给予的一定的提示和解释，安抚用户在面对大量需要填写信息时的情绪。
填写验证后出现报错或者不符合要求时，需要作出反馈，可以有下图几种情况：
上图中两种不同的情况，针对性的报错和局部的报错，都分别代表了不同的场景，个人认为针对性的报错在登录页的报错上也能够极大的提高用户的体验。
在用户未对当前页面有操作时，按钮需有不同的表现形式，让用户对操作的行为及结果有预先的心理感知，如下图所示：
很多操作前的按钮都会置灰，显示不可点击的状态，除了给用户提示之外，也是为了避免误操作，当然现在还有一种方法就是如果误触页面会有提示
点击按钮后给页面增加一些微动效，提起用户的兴趣，同时提升表单的转化率。
转自；站酷-潘团子
本文分享国际化司机端首页改版完整思考过程，化繁为简提升司机使用效率，提升产品用户体验。
随着滴滴国际化业务脚步不断加快，司机端始终是作为承载全球化业务运力的基础保障。
同时，在移动通信技术高速发展的背景下，不同国家间的传输速度与硬件设备差距正在不断缩小，用户对应用产品的期望由基础的可接受、可使用、功能齐全，向更易用、简约、更为专注的产品使用体验上转变。
在新阶段下，「为全球司机用户提供一个「克制」「可依赖」的产品使用体验」、「为业务拓展提供有力的体验支撑」是体验设计团队在新的阶段下提出的目标。
2018 年 9 月我们与产品同学深入拉美当地对司机侧进行为期 2 周的产品体验调研。虽然在当地的时间较为短暂，但是我们依旧感受到了拉美国家的习俗文化和人文特点。
相比中国人的含蓄内敛，巴西与墨西哥人显然更加热情随和。
在巴西，这个世界上假期最多的国家，处处体现着人们对生活的享受才是自始至终的追求。无论是世界杯一个月狂欢长假，还是周末下午两点开门的商区，总会让人羡慕的同时刷新你对享受生活的认知。
而娱乐至上的墨西哥人，热情友好，能歌善舞，我们常说的放飞自我在这里几乎成为墨西哥人每天的生活常态。他们喜欢享受当下，后天下之忧而忧。他们觉得工作赚钱就是为了更好的休息，大多数人每天都是开朗乐观的处世态度。
同样，落后的基础建设、糟糕的交通状况、教育水平低下、价格昂贵的电子产品以及相对不太稳定的社会环境，也是它们共同存在的问题。
在当地，我们通过实地调研与用户访谈等方式，针对产品体验的问题与司机进行面对面沟通。收集了很多宝贵的用研资料与司机诉求，如司机希望平台为他们推荐订单引导，司机希望获得更多的实时动态讯息和司机每天都可以查看自己的收入状况等，集中体现在效率、感知、体验这三大方面。
其次，伴随着业务的不断增长，越来越多的功能使得我们的产品变的更加复杂，旧版的框架布局早已是不堪重负，无论是现存的体验优化问题，还是未来业务功能的拓展问题，旧的框架体系都是难以为继，无法再通过简单的修补来满足用户和业务未来的诉求。
改版升级对产品本身来说是一件非常重要的事情，需要对多方因素进行慎重考虑。经过多次的沟通讨论，权衡改版对产品可能产生的利弊关系，采用小步快跑，快速试错，分阶段分模块的方式进行。
首页既作为承载核心功能（发车）的载体又是其他重要板块的分发的入口，在内容呈现与用户感知上都存在很大的体验提升空间；我们通过拆解业务中长远需求规划得知，大多数重点需求依赖于首页框架布局，而现存首页框架无法满足业务诉求；在竞品的改版中首页的变化最大，并在司机群体中取得比较正向的反馈；通过上述分析，决定率先对首页进行优化改造。
首先我们与产品、运营侧进行深入讨论，结合用户访谈整理的用户诉求，对此次首页改版的目标达成一致。
在旧版的框架体系中，大量信息在首页呈现，功能层级复杂，重点功能难以突破和查找，关联较弱的信息架构严重影响和分散了司机的关注点。随着业务模式不断扩展，首页新需求类型逐渐增多，一套更加具备灵活的拓展能力和管理能力的首页框架尤为重要。
首先我们将旧版的首页布局打破重建，对现有模块进行整理。功能相似、定义模糊、司机操作相对低频的模块进行合并、删减。
对司机高频操作模板进行场景划分，将相关信息进行聚合处理，通过对入口的强化，来明确司机对不同模块的认知。
出车管理
将与出车相关信息进行组织聚合，结合司机不同的使用场景，将功能与模块进行结合，加强认知，减少司机多余的思考与判断，快速响应，提升工作效率，同样也为业务在有关出车功能方面提供灵活可拓展的组件框架。
收入管理
通过显示司机最关注的今日收入信息，为司机提供方便快捷的查看功能，使司机更专注于工作本身。同时对收入管理入口起到了强化认知作用。
信息管理
对关于个人相关的信息通知及功能操作进行聚合，方便司机对个人信息进行快速查看，提高查看效率。
通过对框架模块的标准化定义，后续的业务需求便可以进行归类管理，根据不同需求的不同属性，结合功能使用场景，选择合适的模块进行展示，提高司机使用效率同时增加首页的业务框架扩展能力。
通过对框架的重构，有效的解决了首页信息承载压力过大，功能层级复杂的问题，同时地图的面积相比旧版首页也大幅增加，信息呈现更加简洁、轻量。
出车操作作为首页的核心功能，通过调研得知，司机普遍反映在旧版首页中存在出车操作感知弱、收出车状态区分不明显的问题，对司机的操作体验和感知体验造成了比较大困惑。
在首页改版过程中我们着重对出车操作进行了设计分析，基于对业务的了解和竞品的分析，得出以下三个结论：
通过「两强一弱」，减少司机困惑提升发单效率的同时，间接的延长司机的在线时长。
完成页面设计后我们发现，操作按钮通过静态视觉角度去表达收出车空间位置关系是十分困难的，仅通过 Toast 提示会造成用户理解的断层，于是提出使用动效去进行「搭线」串联，搭线发车前按钮的点击和收纳后的位置提醒进行视觉体验上的串联，从而达成感知增强，解决视觉体验层面不容易解决的问题。
丰富的订单奖励活动是我们与竞品相比重要的竞争优势，司机在完成定量订单的同时提供了更多的额外收入。查看每日奖励活动，已成大多数司机每日上线必做的事情。
与旧版相比，在新版首页中通过提升奖励入口层级，缩短了查看奖励活动操作路径，从而方便司机快速查看。
通过首页透传的奖励卡片，司机在首页即可获取到推送的奖励相关信息，及时获取到奖励预告和进度，提升了司机工作效率的同时加强了司机对奖励活动的感知。
在经历了快速奔跑的粗放阶段，我们也在思考司机端产品究竟以怎样的品牌气质传递给海外的司机群体。
在当地，我们在司机心目中更像是合作伙伴，凭借真诚互利的态度赢得了当地司机的用户。
真诚、热情与融合我想这就是我们想要传达的核心品牌情感，而克制、可依赖将作为产品体验的设计原则贯穿始终。
颜色系统
司机端颜色系统在基于现有品牌色基础上，结合不同国家颜色文化的理解，新增加符合本地化的辅助色系，以提升产品的亲和力，传递品牌情感。
文字系统
针对司机用户的操作使用场景，对文字字号梯度进行提升，通过文字粗细、颜色、大小加强信息对比度，使司机在更多复杂场景下可快速获取重要信息，提升阅读体验。
在此次改版中新引入 Barlow 与 DIN Alternate 字族作为模式数字展示字体，两款字体分别为 Android 及 iOS 系统下默认包含字体，相比 Roboto 与 SF Pro text 两款字族，在数字展示上更为明确、识别性更强，同时因为自身「纤瘦」的特性，在屏幕横向面积上节省更多空间。
业务在不同的阶段有不同的侧重方向及打法，设计侧根据业务所处阶段应及时的调整自身的目标定位，快速响应，积极探索设计的机会和突破点，在不同的阶段发挥自身价值，助力业务达成共同目标，为用户创造更便捷的产品使用体验。
首页改版从立项到设计再到研发，多部门同学紧密配合，在有限的时间内最大化的完成预期上线效果。
全量上线后，通过问卷对首页改版进行满意度收集，司机对新版首页的满意度平均值高达 93%。取得的成绩离不开每一位参与改版的同学支持，也得益于国际化团队自始至终对产品体验的重视与认同。
作为司机端体验升级的第一步，首页改版只是一个开始，希望通过不断的打磨优化，秉持初心，为全球司机提供更克制、可依赖的出行平台。
文章来源：优设
运营类活动是在某一段时间内进行的，有明确业务目标（业务转化、品牌传播）及营销群体，依赖游戏化手段带来优秀用户体验，从而获得成功的一类活动。
1. 生命周期短
运营类活动生命周期较短，常在某一段时间（可能是周期性的），一般跟随时节热点或者运营节奏来进行。较短的生命周期给设计、开发、数据等带来较大挑战，设计程式化提供基本设计思路，组件化降低设计成本。
2. 业务目标明确
运营类活动一般以产品营销、品牌运营为目标，发放各类优惠券大众目标用户，从而带来业务转化，或者营销企业品牌，比如常见的年底 h5。
3. 有一定故事场景及氛围
运营类活动需要较强的故事场景。良好的场景设计、氛围营造可以带来沉浸式的用户体验，与用户建立情感共鸣。从而提升用户参与度、带来好的业务转化。
故事场景结合时节热点，同时考虑活动需要营造的体感氛围。
4. 人群细分
运营类活动的特征在发起之初就有特殊的运营目的和特定特征的用户群体。为实现最优的业务转化，需要在设计之初明确活动覆盖的用户人群。同时在各个环节都能考虑到特定用户群体的不同需求，尤其是在业务转化的过程中，好的人群细分往往带来事半功倍的效果。
5. 游戏化
引入游戏机制及游戏元素。
运营类活动结合时节热点，通过富有故事性的视觉传达（插图、动效、声音等设计元素）带给用户沉浸式的体验，与用户建立情感共鸣，从而有效的鼓励用户行为。
沉浸体验的营造对设计师提出了更高要求，可以从活动设计的故事感、用户代入感、产品互动感、主体差异感几个方面来思考入手。
运营类活动中广泛应用了游戏化机制和元素，它们是活动成功的有效保障。设计时综合考虑业务及用户需求，从用户动机激励、行为引导的角度出发，将运营活动游戏化。可以在活动参与深度的各个阶段引导用户操作，从而达成活动目标。以下列举了运营活动中常见的用户动机，后续我会从用户参与路径出发，尽可能详细的描述在用户参与的每一个阶段起作用的为动机，以及实现的手段。
大奖带来的诱因效应
动辄百万的大奖奖励几乎已经成为运营活动的标配，在动机理论中，用户行为的产生来源于需要，需要导致内驱力，引发行为，从而推动用户实现特定的目标。当目标的诱惑力很大时，即使没有内部驱动也能激发行为。这也是众多运营类活动大奖存在的理由。
占便宜的心理
爱占便宜是人的本性，从心理学角度讲，占便宜就像是额外得到的惊喜和奖赏，可以让人产生满足感！用户在这种心理作用下，会为了小利益去做出设计预设的行为，将业务需求设置在‘占便宜’的路径中可有效提高参与、转化率。比如在设计中用中奖动态弹幕来强化用户参与的动机，提高参与率。
有趣和好奇心
人天生具有好奇心，它帮助我们适应不断变化的环境、发现新的资源，是一种「无法抗拒」的行为动机。在运营活动中，用户会被有趣的活动页面，未知的规则设计所吸引，从而开始主动「探索」。这也是用户参与的动机之一，设计中精致的 UI、有效的页面信息传达保证了用户好奇的有效性。
即时反馈及阶段性成就
「即时反馈」是沉迷现象发生的原因。学习之所以痛苦正是因为其反馈链路太长，你只有在考试或者应用到所学知识时才能获得反馈，还有可能是负面的。在活动设计中，每一次用户操作都会有及时、细腻的反应，可以给用户带来精神愉悦，同时设计的阶段性成就又给用户带来成就感，用户会不知不觉中在活动中越走越远。
随机奖励的多巴胺效应
人类的本能热衷于冒险，随机的、不确定的奖励能够刺激大脑分泌多巴胺，带来愉悦感，从而刺激用户行为的重复。在活动设计中，常用到这一理论，比如抽奖机制。
所有权与拥有感
当用户感到他们拥有或控制某样东西时，会自然而然的强化它的属性、发挥其价值。尤其是通过适当的付出和自身努力，用户还可能不合理的高估其价值。在活动设计中，常使用户通过易实现的行为获得权益，通过「幸苦操作」强化了拥有感，提升其心理价值，从而促进用户对权益的使用。
稀缺性与用户渴望
稀缺性的心理学原理在于人们想要获得某样东西的原因仅仅是它太罕见，或者无法立刻获得。它破灭了人们对情况的控制感，人们会为了重获控制而采取行动。设计时，可以利用这种心理鼓励用户做出期望的行为。常见的有时间限制、权利限制等。
使命感/社交影响/损失规避……
运营类活动中数据和策略思维是保证活动效果最大化的有效手段。活动需求提出时，即考虑可能的参与用户细分；活动开始时，考虑引流途径和引流方式、物料的差异化；活动进行时，根据用户细分策略化任务推送，根据埋点数据监测积极调整相关设计元素。事无巨细才能确保活动成功。
文章来源：优设
目录：
一、键盘与命令类型
二、设计要点
三、有意思的键盘交互
毕竟该处是表单输入的交互终点，用‘前往（Go）、登录（Join）’这些命令词是不是更准确些呢？
文章来源：UI中国
设计并不只是为了区分市场定位，在视觉上对产品做一些修修补补。设计需要从品牌自身出发，设计出来的产品才能与用户产生情感交流、为品牌而发声，这样的设计才能真正为品牌创造长尾的价值。
前阵子和朋友去看车，我们去的第一家店是沃尔沃，沃尔沃主打的品牌理念是「安全」「可靠」，当时我在沃尔沃店里看的每一辆车的外形就像从金属盒子进化来的，棱角分明、线条硬朗，同时每个部件都相当厚实，当时我坐在车里的时候，感觉自己像是坐进了一个大保险箱，里三层外三层把我包裹起来，坐在里面特别有安全感。
我们去的另一家店是宝马，宝马的品牌概念主打的是「时尚」「运动」，所以宝马车给人的感觉和沃尔沃又完全不同了。它的流线感非常明显，而且这种流线型设计一直延伸到车内的每一个部件。印象特别深的是，车里座椅的荔枝皮纹和我们常见的品皮质特别相似，让我感觉自己像是坐进一个时尚的爱马仕箱包里。
其实无论是工业设计，还是我们的用户界面设计，好的设计给用户的感受与品牌理念是相契合的。设计中的每一个细节都是围绕品牌自身而展开，设计出来的产品才能够成为品牌的具象化延伸，与用户产生情感交流的同时也会让用户更加忠诚于我们的品牌。具体怎么做？这需要我们运用统一的设计语言来完成。
什么是设计语言？从设计的层面理解，当你看到一组功能与形式相互融合，向你诉说其特色与优点的产品，从而唤起你的情感反应时，你正在体验的就是设计语言。简单讲，当你的品牌运用设计语言的时候，你的产品会跟人说话：会告诉人们它能做什么，怎么做，以及你的品牌是个什么样的品牌。而这个设计语言也将会从前期的风格设定到后期的设计执行，始终贯穿在我们整个产品设计的流程当中。
首先从一开始的风格设定，比如每次我们设计师接到一个 brief 都会先做视觉推导。但是我之前的视觉推导是这样的：比如现在为一个类似拼多多的产品做设计，然后搜集了一圈竞品的界面，发现拼多多、聚划算、淘宝特价都是这种线框的、扁平的设计风格，所以最后推导的结论就是——因为我们拼购面向的用户群体是低消费人群，而竞品的设计风格是 xxxx 的，所以我们的用户偏爱这种 xxxx 设计风格，所以我们需要用这种风格去设计我们的页面。
搜狐总监总结的竞品分析方法：
其实这是一种循环论证，并不能推导出真正有价值的内容。就像你问一个胖子「你为什么这么胖呀」，胖子说「因为我吃得多」，你又问「为什么要吃这么多呀」，胖子又说「因为我胖，所以需要吃多点」。
竞品分析虽说也是一种前期设计调研的方法，但如果我们的设计只依赖于参考其他人怎么做，最后我们设计出来的产品不仅没办法向人们表达一个完整的品牌理念，而且我们的设计跟其他竞品看起来很相似，失去了自己的特点与优势。
所以，在我们设定产品的设计风格的时候就需要运用统一的设计语言，产出能够表达我们品牌特质的设计。那具体怎么做？这里涉及 2 个关键点，一个是如何找到你的品牌特质，另一个是如何针对这个品牌特质找到对应的设计语言。
首先，想要找到我们的品牌特质，我们可以从一个很有意思的原型中得到启发。如果想让我们的品牌真正能够影响用户，让用户为我们的品牌买单，我们的品牌就需要基于用户内心最深层次的需求，明白用户买单的动机在哪里。这时候我们再对应这些深层次的动机和需求做出设计，效果自然会事半功倍。那么如何能把品牌和用户的动机需求连接起来呢？我们可以借助心理学家荣格的原型理论来一一对应。
荣格的原型连接了人们最深层次的动机和感觉体验，表达了人们的基本需求，最重要的是他将这些需求都具像化为一个个角色。所以我们可以从中找到自己品牌的角色，并且在往后的发展中根据这个角色设定我们的品牌特质和设计语言，进而与用户建立根深蒂固的联系（相当于为我们的品牌打造一个「人设」）。我们先看看荣格的原型具体有哪些：
1. 开拓者
我们也有称之为探求者、朝圣者，它是敢于冒险的、首创的、独立的、不墨守成规的，更多的寻求自我实现和改变，拥有自由的价值观、自给自足的。开拓者通常会在未知的领域，开创新的路径。同时是个驱动力很强的非常有个性的人，能够忍受探索新路上形单影只的孤独。属于这种角色设定的品牌比如有星巴克、路虎都是。
2. 守护者
守护者通常是说无私的、有同情心的、仁慈的人，给弱势群体提供帮助和支持的，同时具有慷慨大方、自我奉献的精神。守护者更多立志于他人的安危和福利，像这种角色的品牌稍微少点，通常是一些救济会、慈善组织等等。
3. 爱人
爱人相关的特点像热情的、美丽的、感性的寻求真爱和愉悦，追求爱的价值观和亲密关系。爱人通常是通过给予和获得爱的强烈愿望所驱动的，这个不局限于爱情，友谊也包含在内，主要是意味着情感，所以一般是香水或者化妆品品牌都是运用这个原型角色。就像 dior，当然还有巧克力费列罗等等。
4. 魔术师
我们知道魔术师的形象通常是爱恶作剧的、滑稽的，有时候能够跨界，打破禁忌，并且自身带有乐趣，善于改变的。魔术师通常渴望乐趣，从单调的生活中解脱出来，敢于打破禁忌，质疑不可能的事物。这种角色设定的品牌我们可以很快想到那个爱玩有趣、经常跨界合作的百事可乐。
5. 创造者
创造者更强调艺术感、想象力、创新性，以及自我表现的价值观和美感上的愉悦性。创造者通过精心制作用来表现自我的事物，让人们耳目一新从而得到认可。像这种强调创造力的品牌比如乐高，用有限的积木组合、创造出无限种可能。
6. 反叛者
反叛者也可以说是不法之徒、外来者，这种角色通常是具有变革性的、反常的、打破常规的，表达一种价值观的解放。反叛者通常存在于社会边缘的，被大部分社会群体看成局外人甚至异类的角色，我们也可以看成是亚文化的一种转变。像这种主打标新立异、反常规的品牌，最著名的就是哈雷。
7. 魔法师
前面我们提到了魔术师，那么魔法师相对于魔术师而言，会带有更多的非现实的想象，精神上的超凡魅力，带来转变的、形而上的意识的扩张。通俗地说，是带有更多迷信元素的。但是最重要的是，魔法师趋向于驾驭各种能量和环境，进而给人们带来身体上以及精神上的转变。同样，像这种强调 magic 的品牌我们第一个可以想到迪士尼，典型的魔法世界。
8. 智者
我们也可以称之为「圣人」，智者通常是一种富有哲理性的、知识渊博的形象，忠于追求真理、乐于分享知识，也是智慧的代名词。智者经常被当成真理的捍卫者以及智慧的来源，为人们指明方向，帮助大家前进的代表。这种角色设定适用于一些知识输出的品牌，比如哈佛大学、金融时报等等。
9. 天真
这是 11 个原型中唯一一个形容词而不是角色名词，它代表着信任、纯洁、健康乐观，有希望的、诚实善良并且拥有简单的快乐。天真代表着乐观主义，不管处境如何都能保持希望和信仰，更像是纷杂世俗中的一片净土或者是一个乌托邦世界。而像这种原型设定一样传达乐观、希望、天真的品牌有麦当劳、可口可乐等等。
10. 统治者
统治者象征着权威、控制、至高无上，同时也有承担、效率、和谐的属性。统治者被得到和控制权利的欲望所驱动，通过对事物的掌控来防治混乱发生。同时也是一种责任承担的表现，以有组织的的方式来完成义务。属于这种角色设定的品牌比如有 IBM、花旗银行等等。
11. 英雄
每个人心目中的英雄不尽相似，但是他们的共性都是勇敢的、有原则的，勇于克服障碍，同时敢于接受挑战、伸张正义，面对逆境的时候坚韧不拔。这种角色设定的品牌比如强调挑战、正义、勇敢的耐克、联邦快递等等。
总而言之，原型是将我们用户内心最深层次的需求，具象化成一个角色，我们的品牌对应上这些角色，相当于对应上了我们用户最深层次的需求，为我们品牌和用户产生情感交流打下基础。同时，它可以为我们设计师想为品牌找到对应的设计风格的时候，提供更多维度的灵感。而这之后的过程，就涉及到刚才提到的第二个关键点，如何为我们的品牌找到对应的设计语言？
我们从前面的心理原型中了解到品牌的角色设定之后，围绕这个角色将会有一系列的关键词去描绘这个角色的特质。我们将这些抽象的、描绘品牌特质的关键词具像化，则可以得到描绘品牌自身的设计元素。具体我们可以借助一个图形四象限来完成：
我们将图形的基本构成（点、线、面）作为我们的坐标延伸——宽窄曲直，用这四个属性我们可以组合出非常多不同形态的图形元素。比如说，我们用「宽+曲」组合出来的图形可以是：实心的圆形、波浪曲线等等；再比如说我们用「窄+直」可以组合出：细直线、带有直角边的矩形等等。
同时，在图形属性的坐标上，我们还需要延展出一些带有这种属性的事物或印象。比如，生活中带有曲线的事物，像有花瓣、棉絮等等，这些事物给人的印象是柔和、温暖的表现；而直线的事物，我们联想一下生活中的带有直角的事物，比如像玻璃、霓虹灯管等等，这些表现前卫、锋芒毕露的事物。
像上面绿色部分的认知印象，针对每一个维度可以联想出很多关键词与事物，那么在我们延展出更加详细的四象限之后，这时候可以再次拿出，我们前面说到的，原型角色的关键词，再和刚才的图形四象限进行比对，利用象限中的图形基本属性，来组合出属于我们品牌的设计元素。具体怎么做，我举一个京东直播改版的案例。
首先基于京东品牌特质（原型设定是英雄），围绕英雄这一个原型我们会有很多关键词去形容它，比如敢于挑战、坚韧不拔等等。不过，京东直播作为京东 App 的主要栏目，更希望吸引更多的年轻人以及女性群体的参与，所以在京东直播里，我们表现的是更加年轻、女性向的英雄——惊奇队长，一位自信、勇敢挑战的女英雄形象。因为像人在不同场合下都会有不同的表现，对于品牌来说也是如此，我们设计师也需要根据不同的场景或者子产品的需求，基于原型的核心理念再做出适应性的设计，让我们设计的品牌更像一个生命体，而不是一成不变的事物。
那么我们围绕年轻、女性、自信这个主题再脑暴出更多相关的关键词。比如具象的可以代表女性的事物：口红、高跟鞋；比如一些抽象的内容，我们可以把他们具像化，比如年轻的「活力」，我们可以用泡泡、花朵来表现，女性的「优雅」可以用香水、丝带表现，英雄的「自信勇敢」用笑容表现。
不过，我们知道用户界面设计相对于平面设计的海报、插画而言，更重要的是对产品信息功能的辅助，所以这里的设计元素运用会更加克制，这意味着需要我们回归到更基础的层面。所以我们需要从刚才的具象事物（比如花朵、笑容）中提取出他们的基础属性，比如花瓣是圆弧形的、片状的，笑容是向上的曲线。同时借助图形四象限，用「宽+曲」的手法来表达我们的设计元素（年轻、女性向在第二象限，对应的宽+曲属性）。在后期设计过程中，融入这几个元素再作出界面设计。
当然，在整个设计流程中，设计语言的设定并不单单包含元素这一部分，还包括颜色、框架、布局等，各个方面的考量缺一不可。
为什么是相对统一而非绝对一致？因为人们对大部分颜色的认知其实是来自于自身的行为，受到心理、环境、文化等背景因素的影响，更多是一种个体的主观感受。比如同样的红色，在中国是吉祥喜庆的代表，在国外普遍认为危险警告的颜色。比如黑色，在大部分年轻人眼里会认为是酷的时尚的颜色，而相对年长传统的人则更多会觉得是邪恶、忌讳的颜色。所以我们并不需要过分强调建立绝对一致的色彩规则，这样也能使我们设计的品牌更像是一个有灵性的生物，而不仅仅是一个僵硬的组织。
比如今年的京东 618 项目，时间跨度长达 30 天，活动页面覆盖上千个，设计师不可能一个个去指定颜色规范、或者让同一个颜色适用于所有页面，所以需要设定的只有色彩感觉和表现手法，这种统一的大方向。所以我们可以看到这些在 618 期间的设计，虽然不尽相同但能让人清楚的感知到，这是来自同一个生态下的主题，并不会因为颜色不同就无法识别。
虽然人们对大部分颜色的认知来自于心理的主观感受，但还有对另一部分的颜色的认知是来自于人们的生理反应。而这一部分，才是我们在设计的时候需要注意的，关于造成人们「感知过强」和「感知过弱」的问题。
1. 感知过强 —— 颜色对抗通道
简单讲，就是相当于我们设计常说的——对比色，虽然我们知道对比色可以给用户带来视觉刺激，但是并不建议在设计中大面积的、长期的使用（红绿或黄蓝对比色），为什么呢？
因为我们所说的颜色，其实是人眼对频率、光的波长的感知，就像我们耳朵听的音高或一个音符时所感知的声音的原理一样。下图是人们视网膜三类视锥细胞对光的敏感度，以及人造红、绿、蓝色光感受器对光的敏感度。我们可以看到，低频视锥（红线）信号是红色和黄色，中频视锥信号是绿色，高频则对应蓝色。而我们设计中常说的对比色，其实就是通过这些视锥细胞的低、中、高频信号的极值相减，才得来的颜色对抗组。所以这种通过对视锥细胞两极的强烈刺激才得到的对比色，长期使用下会让人产生疲劳甚至烦躁的情绪，而在这种不稳定的情绪下，用户非常容易产生误操作，甚至最终迁怒于你的产品不再使用。
所以我们作为设计师可以运用一些方法来尽量控制对人眼的最极端的刺激，比如通过减少对抗色的面积，或者通过将对抗色组中的一个颜色用它的近色替换，等等。
2. 感知过弱 —— 色域跨度
除了以上，让我们感知过强的颜色对抗通道，另一个需要注意的颜色问题就是，让人们感知过弱的色域跨度。我们有时候会遇到一个问题就是，按钮上的文字和按钮的颜色融在一起，导致按钮文字看不清。
这个问题其实就是两个颜色的色域跨度过小导致的，首先我们用 H（色相）S（饱和度）B（明度）的数值来划分色域（如下图）。在统一H（色相）值的情况下，规定了 10 个标准的S（饱和度）、B（亮度）值，以 10 为单位作为一个跨度。两种颜色在这个色域中，至少要相差 5个跨度，用户才能有效感知到两种颜色的差异。
比如下图中的蓝色背景色值是 60，那么放置在这个背景中的文字 A，至少要跟这个 60 的位置相差 5 个跨度，也就是 10 这个位置。如果文字A 的色值只有 30，与背景色的 60 跨度小于 5，那么文字 A 在这个背景上会难以识别。以此类推，深色模式中（如下图）这个背景色值 100，那么在这个背景上的文字 A 色值，最多不能超过 50。
以上关于颜色对抗通道和色域跨度的问题，就是我们需要了解的一些颜色运用中的边界，并在这个边界以内让设计保持最大的灵活度。所以对于颜色，我们需要强调的是相对统一的边界极值，而不是绝对一致的色值。
如果我们把前面说的设计元素和颜色看作品牌的皮肤，那么视觉框架则是品牌的骨骼。如果想让我们的品牌成为一个能够真正影响用户的存在，不仅要有好看的皮囊——在设计元素和颜色上延续品牌基因，还要有强大的内心——视觉框架要能足够支撑起我们品牌的身躯。
视觉框架包括了层级和布局，我们需要在设计的过程中，加入对产品阶段和品牌价值的思考。因为就像人一样，处于不同阶段的人追求的东西会有所差异。同样的对于品牌也是如此，处于不同产品阶段会有不同的需求，相应的品牌价值点也会有所差别。所以如果想让设计的视觉框架能够足以撑起品牌，在这其中将会涉及 2 个关键点：如何定位产品阶段和品牌价值，以及如何围绕产品阶段与品牌价值点设计对应的视觉框架。
首先是定位我们的产品阶段和品牌价值，我们可以通过对照经济价值系统（如下图）：产品的阶段分为初级产品、产品、服务和体验这 4 个阶段。
拿京东举个例子，如果我们位于初级产品阶段，我们的平台就是这样的（如下图）：展示出所有商品信息，用户需要根据信息联系商品的供应商，去和供应商进行交易。那么在这个阶段的时候，品牌的核心价值在于对商品信息展现的完整性、全面性，只要这个平台能够覆盖足够多的商品，并展示完整的商品信息，这个阶段的目标就达到了；
如果我们位于产品阶段，我们会对商品进行分类，并在平台上提供统一的购买渠道。相应的，这个是以后的品牌价值在于，平台能够对商品进行精准分类或者实现统一的购买渠道功能，让用户能够在平台上买到商品；
而当我们位于服务阶段，我们的平台不仅可以购买商品，我们还会提供售前售后的服务，对应不同的客户群体推荐不同的商品，或者提供定制化的服务等等。平台除了实现交易功能，需要提高品牌的竞争力，在竞品之间形成差异化，为人们提供一系列附加价值的服务，吸引更多用户在我们平台上下单才是目标；
而如果我们位于体验阶段，我们可以从视、听、味、嗅、触觉给用户带来一系列的情感反应，为每个个体营造不同的回忆与感受。让用户与品牌产生情感上的互动，在更深层次上影响用户认知并形成坚固的情感纽带，让用户忠于我们的品牌才是这个阶段的目标。
正因为不同的产品阶段，对应的品牌价值与目标不同，我们才需要针对产品阶段，为品牌设计合适的视觉框架，到后期设计出来的产品才能更贴合地为品牌发声。像今年京东 app 改版项目，在接到这个 brief 之后，首先当然会先看看当时版本存在的问题，下图为当时京东 7.0 版本。
当时团队逐一列出了 7.0 版本存在的几个主要问题：
1. 品牌识别度低
我们可以发现在这个界面里很难发现京东的品牌元素，就算现在换一个品牌同样这个界面也适用；
2. 业务分发局限
这个版本里的商品坑位是固定的，业务展现的数量和形式是局限的；
3. 运营维护成本高
banner 模块采用通栏而且上下渐变的样式，这需要商家制作运营图片的时候，将主要内容严格控制在我们的限制区域内，这同时也增加了我们运营审核的工作量；
4. 楼层过长、转化率低
在 7.0 版本中，中间的楼层频道长达 7 屏，同质化的内容导致平台商品的转化率不高；
5. 促销信息干扰
界面的促销信息让用户眼花缭乱，难以让用户快速找到自己想要的商品；
6. 个性化感知不足
电商平台内容形式趋向单一化，没有太多创新的表现。
有了这些具体的问题项，设计师们开始进行针对性地视觉框架设计。比如，针对个性化感知不足的问题，我们希望重新设计百宝箱区域，打破常见的圆底 icon 的样式，每个图标的边框都是不规则的，让整个区域更有表现力，同时与其他电商平台的界面形成差异化。再比如，针对促销信息干扰的问题，我们希望简化原本频道入口的信息，将原本好几个 sku 信息对应同 1 个入口，优化为单个 sku 与单个入口一一对应，让用户保持专注力快速找到自己想要的频道入口。
诸如此类，当时我们为这几个问题延展出许多设计上的解决方案，输出了不少有创新性的视觉稿。但是随着设计工作越往后进行，我们发现手中的设计并不能很好地解决，品牌在当前阶段中面临的实际问题。
因为在前期框架设计的整个过程中，我们没有把品牌定位这一因素考虑进去，我们发现旧版本的问题，埋着头只想把这些问题都解决了，却忘记抬起头看看我们的品牌现在在哪。我们前面说过，对照经济价值系统，京东目前主要处于服务阶段，还在逐渐迈向体验阶段的进程中。
而处于这个阶段的京东，外部环境是电商平台的逐渐趋同化；内部环境是业务体量庞大，同时产品仍有上升空间。所以我们的阶段目标就是需要加深用户对品牌的认知，业务内容需要更加具备兼容性、延展性，同时需要提高产品的业务分发能力。
结合这个阶段性目标，我们可以从旧版本存在的问题中，发现这 4 个问题才是当前优先级最高的、需要在当前阶段中解决的内容。所以基于筛选后的 4 个问题，我们开始将设计往回收，从视觉框架上更多聚焦于这 4 个问题的优化。
比如针对业务分发局限性的问题，对首页下拉区域的布局进行优化：下拉刷新除了常规的刷新状态外，在营销活动期间用户可下拉跳转至活动页面。我们将下拉路径缩短 30%，共享元素空间兼容更多的业务内容，充分利用首焦区域丰富业务的展现形式。
比如针对品牌识别度的问题，将首页头部区域的层级进行优化：在京东品牌形象 Joy 中提炼出微笑曲线，将微笑弧度应用在头部的背景轮廓上，并且在整个页面中统一植入品牌色京东红，同时在当前我们的品牌尚未成熟的阶段，直接使用京东 logo 强化用户对品牌的感知度和记忆点。
比如针对运营维护成本高的问题，还记得前面说的我们一开始做的百宝箱的设计么，虽然那种设计是更具有差异化和创新性，但是目前产品量级大、业务入口多，而且这一区域涉及合作商家自己提供的素材露出，如果没有统一的外框与规范的内容，运营维护成本是相当高的。所以我们保留了 icon 外框，同时规范每个框中只居中展示一个对应的图形，不能包含文字等其他元素。
最终我们可以看到，改版后的京东 app 无论是在品牌、业务层面，还是在多种复杂的运营场景中，都能实现作为平台的兼容性和延展性。所以，在视觉框架的时候需要预先考虑产品阶段，针对不同阶段需求作出相应的设计侧重，让设计出来的产品能够更加贴合品牌本身。
经过刚才的推导和框架设定，我们对眼前要做的产品设计风格、视觉框架已经确定的七七八八，界面的形态也初具雏形了。接下来要做的设计执行阶段就是我们设计师的魔法时刻，相信每位设计师都有自己的方式和能力让我们的产品变得更优美，所以关于这部分的内容暂不在此赘述。
通过以上章节我们了解到，只有从品牌自身出发，设计出来的产品才能在每一个方面都延续品牌基因、展现出设计的整体性。一方面满足品牌价值需求为品牌发声，另一方面将用户的所闻、所见、所感打造成一个特别的情感反应，让用户更长久的忠于我们的品牌。
不过，如果我们想要创造出能深化品牌基因的产品，我们在用户方面也要投入和品牌方面同样多的关注。因为不仅要看产品的外观界面，还要看产品给用户的感觉、使用方式和效果。比如用户因为什么才被你的产品吸引，用户会从中得到什么，你的产品能带给用户什么感受，用户如何才能为你的产品发生实际行动，等等。正因为我们所做的一切，都应该对品牌产生支撑作用。所以不仅仅是品牌能够识别和定义我们的产品，用户的认知体验也应该成为我们设计考量的一部分。究竟怎样做，才能让我们的设计能够有效的影响用户、让用户为我们的品牌买单呢？
文章来源：优设
卡片式设计对于我们来说并不陌生，从设计类网站上或市场上的一些 APP 中也会看到很多的卡片式设计的案例，卡片式设计也是 UI 设计中最常用的方式之一。
最近在新项目的设计中也尝试使用了卡片式设计，结合实际项目中的一些思考进行总结并归纳出一些卡片式设计的小知识点。同时希望通过本次的总结进行知识沉淀，以及跟大家一起探讨下卡片式设计。
在现实生活中的卡片式设计可以说是无处不在，例如身份证、交通卡、银行卡、名片、便利贴、扑克牌、游戏卡……诸如此类的生活常见品都是以卡片的方式存在，其共同点都使用一个容器承载着内容，并且具有「便携性、信息简洁和相对独立性」。
在项目设计之初我分析了一些使用卡片设计的 App，并且从中整理总结了几个较为常见的卡片式设计的使用场景。
1. Feed流
卡片式的 feed 流设计是一种非常常见的设计，早在前几年 Facebook、Google+ 等产品就使用了这一方式，Feed 流作为一种长内容的媒介，用户需要长时间的滑动看内容并筛选有效信息，卡片式设计很好的解决了内容与内容的区块分隔，让用户在长屏幕滑动中依旧可以很好的明确识别每一块的内容。
实际案例-淘宝微淘
2. 瀑布流设计
瀑布流的出现让单屏区域内显示更多的内容，而内容较多的情况下，使用卡片式设计可以较好的对内容进行了区域划分，让上下左右的内容从整体中具有相对独立性。
实际案例-Pinterest
3. 左右滑动组合型内容
卡片式设计具有较强的层次感，相比于平铺更能呈现内容可滑动的感受，并且块状化的设计让内容具有较高的区域分割感。
实际案例-QQ音乐
4. Tips提醒
作为非界面固定内容，卡片式设计可以让 tips 提醒设计变得更自由，在符合用户体验的基础上，它可以出现在任何我们想要它出现的位置。
实际案例-淘票票会员提醒
5. 结合手势的单块可互动内容
若页面中有且只有一个主内容，并且需要用户进行快速筛选时，可考虑这种结合卡片式设计与手势设计的方式。大大增强了用户对于设计的体验感知和丰富视觉表现。
实际案例-探探首页
6. 卡券类设计
卡券类的设计实际上是一种物化映射的过程，我们在现实中看到的卡券造型，结合卡片式的拟物化设计，让用户在屏幕上可以更直观的感知，提升了设计的代入感。
实际案例-京东领券中心
7. 集合型功能入口
集合型功能入口往往会有多个入口，使用卡片式设计让入口形成一个区域整体，可以做到既统一又相对独立。
实际案例-淘宝微淘关注账号
8. 个人主页顶部内容卡片
个人主页的设计往往会在氛围上营造沉浸感，卡片式的设计可以把关键信息进行概括收归，让原本单个的内容形成一个整体。
实际案例-美团外卖会员
基础的卡片设计规则，相信大家在一些系统级别的设计指导规范中也或多或少都能了解到，不同平台的规范差异其实不会有太多本质性的区别，更多的是处理技巧或方式的差异，而每个设计师对其理解的角度也会具有一些差异化，这里分享下我对于卡片式设计的一些基础想法。
同样的卡片设计，不同的人做出来的感受可能会有所差别，而表达卡片质感的主要关键点在于：卡片形体、投影深度、卡片颜色对比，我们需要了解这些基础知识点之后，再结合实际的 APP 风格进行设计。
卡片形体
就像图标的图形设计一样，不一样的形体也能表达出不一样的气质，因此在设计的时候我们需要依据整体的风格进行表达。异形卡片的设计，可以让原有方方正正的卡片表达出差异化，从造型上打破一些传统的处理方式，再结合一些 IP 人物元素可以更加直观的表达出具体的内容氛围。
投影深度
投影的视觉效果，会直接影响整体卡片的质感，太深太大的投影会显得整体卡片过于厚重，太浅太小的投影则显得过度生硬，因此合理的数值比例可以让卡片看起来自然有质感。在项目中我常用的一组数值规律是 1:2 或 1:3，例如 Y 轴偏移 10px，模糊度则设定为 20 或 30px，这样成比例的数值出来的效果会较为自然，如下图：
卡片颜色对比
卡片与背景的颜色对比会影响这卡片的整体质感，在设计时我们需要把握好卡片与底色的对比，不同的明暗对比出来的质感也会有差异。这里有两点建议：
在使用卡片式设计时，经常会纠结边距的设定，宽边还是窄边？多少像素更为合适？我经常会带着这种疑问去设计。
基于内容的简单规则
卡片式设计作为设计的表现形式，最终是为了承载内容，因此边距的宽窄也需要依赖于实际内容的判断。结合我在项目中的尝试分享以下几点：
多窄少宽
卡片内容较多是使用窄边距，让卡片具有足够的空间来展现内容，内容较少则可以考虑采用宽边距来打造整体的视觉空间感，如下图 app store 和淘宝的设计对比。当然这只是一个建议，实际还得具体问题具体分析。
再如一些瀑布流、宫格、横滑模块较多的 APP 设计亦是如此，在内容较多的情况下会把边距压缩到最小的合理间距。
内外成比例
以最外边为基础值往里设计，间距以固定比例进行缩减，虽然没有删格来得规范，但也可以让设计变得有迹可循。
基于删格
删格系统解决了一些基础的板式问题，有助于提升设计的规范性，让设计更加有迹可循。在设定卡片式的边距时可以适当应用删格系统，让边距与内容形成固定的关系，这样可以帮助整体的卡片设计更加具有细节和规则。
标题的设定主要考虑以下几点：1.是在卡片内还是卡片外；2.标题的字号设定多少更合适；3.标题是否加粗？
卡片内或外的对比
在项目设计中让我较为纠结的是：标题应该在卡片内还是卡片外？通过了一些案例的尝试之后，我总结了一个规则（需要依据内容的形态而进行设计）：当卡片内容是独立的模块或模块中只有一个大标题时可设定在卡片内；当卡片内容是以组合呈现或者具有延续性内容时设定在卡片外，形成最外层的主标题。
标题的字号设定
标题主要作用为 2 点：1.简短说明每个模块的内容；2.让用户在长页面浏览中起到引导、定位的作用。
通过一些尝试发现：1.当内容较少时，并不需要太大的字号即可起到标题的作用；2.当内容较多时，较小的标题字号则容易被沉入内容中，让用户在浏览的过程中难以发现，而导致信息获取缺失；3.建议标题与正文字号大小差异在 6-10px，这样可以更好的拉开差异，让标题更具有标题感。
字体是否加粗
常规思维下我们都会对标题进行加粗，我在实际中的经验得到的总结是：需要看手机系统或不同厂商的机型。我在项目之初都对标题进行了加粗，但后续在跟进还原时看到的效果并不理想，特别是 Android 的机型上，因为我们使用的是系统默认字体，android 系统很多字体并未对系统进行优化，而是使用微软雅黑，微软雅黑在android 系统上再加粗，就会显得整个系统的外轮廓特别粗糙，最后我们依据不同的机型进行了差异化的选择。
圆角的设定实际上没有太多的原则问题，只要符合整体的风格调性即可。当然不同的圆角也能表达出不同的质感，大圆角表达柔和、小圆角表达硬朗。
圆角的规则设定
以卡片的圆角作为基础的参考值往内推算整体的圆角使用规范，卡片与卡内的元素形成合理的比例规则，而非随意根据「经验」进行设定。
圆角大小差异对比
大小的差异化呈现出不同的视觉感受和风格差异，我们在设计时更多需要考虑我们设计的产品风格或气质是适合大圆角还是小圆角，而非依据一些设计网站上的流行趋势。因此基于不同的风格或者实际内容场景下进行设定才更为合理。
卡片式设计相比拉通式设计更需要考虑设计中的透气感。在常规情况下，对内容边距及四周边距进行调整，让内容之间具有较好的空间呼吸感，从而让设计得到留白的效果。如下图对比案例，在基础删格不变的情况下，每个间距都在原有基础上扩大了12px（接近 1.33 倍），从而让内容具有较为舒适的宽度进行阅读
选择某一种设计方式的重点在于我们了解这种方式的优点，并且可以把这些优点融合到我们的设计当中。在项目设计中，我总结了几点卡片式设计的优点。
1. 优化模块化，提升内容区域感
模块化的设计也是我们日常中会应用到的方法，结合卡片式的设计可以让模块化的规则变得更加简单，增加了模块之间的可复用性和延展性。而当内容较多的情况下，使用卡片式设计可以有效直接的形成区域分隔，从视觉感知上就对内容进行了分隔，提升用户获取信息的效率。
2. 提升内容独立性
在组合型的内容设计上，使用卡片式设计可以让每个小块内容呈现相对独立的展现特性，结合模块化的设计，可以在一大片关联的内容中，做到既统一又相对独立。
3. 增强视觉空间感
卡片式的设计可以提升整体设计层次感，通过投影、前后颜色的设定，让内容与背景之间产生视觉空间感。
4. 增强视觉表现力
在设计中我们可以对卡片进行异形设计，用来达到我们想要的风格表现。当然在一个页面内尽量不要太多，尽量使用页面中的首个卡片进行差异化处理，让整体表现出一点不同即可。
5. 增强可点性
卡片式设计产生的空间感，让每个模块更加突出，相比扁平式的处理方式，卡片式从视觉感官上会较为突出，从感官上更具可点击感知。
任何一种设计方式都会有其利弊，最终选择某一种其实不过就是当下最适合而已，而在尝试中我也总结了几点卡片式设计存在的一些缺点，当然只是个人的思考而已。
1. 横向空间利用率降低
卡片式设计的存在左右边距，因此在有限的屏宽内内容横向区域相比于拉通式设计有所减少，在内容较多的情况下可以适当调小卡片左右边距。
2. 避免过多的层级
从整体来说，卡片式的设计本身就是增加了基础背景的层级表现，其视觉层级相比拉通式更为丰富，因此不建议在卡片上再二次叠加块状式设计，避免造成层级复杂。在项目中也会遇到内容层级需要多层级的表现，从中总结了2种方式：
3. 不适合长文或内容多的表达
若在设计上使用了卡片式的设计风格，但在一些长文表现的界面建议去除卡片。长文章的页面更强调阅读的沉浸感，用户需要更多的专注于文字，这时候无边的体验更适合。
4. 把握好界面的分区，避免过于拥挤的排版
卡片设计具有独特的视觉空间感，但卡片与卡片之间也会有分隔，因此在设计时更应该对内容进行归纳，避免产生过多的小块卡片而导致排版过于拥挤、凌乱或者内容不够宽度展现。
无论是卡片式或者拉通平铺的方式，其最终的目的都是为了服务于内容，我们在做设计的过程中只是选择适合于呈现我们内容的一种方式。根据具体的内容情况给出合理/合适的设计判断才是我们需要不断提升的关键点，切莫流于形式而忽略了内容设计本身的重要性。
文章来源：优设
根据遇到的问题，总结的一些小经验，个人的一点薄见，欢迎大家交流。
最近有小伙伴接到了国外的运营外包项目，发现国外和国内对于运营的需求是有差别的，这篇文章就谈谈国内外：中国、韩国、欧美，它们运营设计的各自特点和里面的门道。
主要从以下三方面来说：
三个地区文化差异大不相同。
中国从古到今讲究遵循传统，过年过节讲究气氛，营造一种氛围。用红包来表达祝福和心意；其次，就是社会环境，中国人喜欢「热闹」，逢年过节，一帮人聚到一起才热闹，别人都买、卖的火的肯定就是好的，所以就「跟风效仿」。
韩国建国很晚，历史相对比较短。所以文化氛围比较年轻，偶像文化在韩国盛行，传统的东西相对较少，都是比较年轻化的：年轻化的偶像，年轻化的文化，年轻化的价值观。
欧美整个文化环境受移民的影响，比较开放国际化，体现的文化也是比较多元的，包容性、简洁、时尚是这些它最直接的特点。
接下来分别谈一下三个地区运营推广的设计特点差异化：
中国
中国的运营突出的是优惠：送红包、满减、优惠券等；必须要喜庆，鲜艳的色彩：以红色、橙色、黄色居多，来刺激消费。就好像进了卖场「瞧一瞧看一看，季末打折满100减99」
韩国
韩国的文化里「社交」这一关键词体现的尤为重要，「Line」这款APP对韩国影响比较大，里面的矢量涂鸦风格的插画深入人心，Line 官方设计可爱且特色鲜明的「馒头人」、「可妮兔」、「布朗熊」和「詹姆士」四个形象也很有特点，所以Line的「IP属性」和「矢量涂鸦」就成为了韩国主流设计风格。
而韩国的偶像明星文化也颇具影响力，在推广时也会用到明星来制造效应。
我们从整体构图解析一下三个地区的设计细节。首先把一个运营 banner 按照组件层级进行拆分，分别来看一下。
分为：文字层、主体物层、装饰层、背景层
文字层
从文字层可以看出中国的文字层级划分更加清晰。运用「格式塔」原理，主文案和副标题的突出，能让用户对信息提取更加准确直观。
中文结构的复杂性，排版上必须严格区分，所以在层级划分上装饰线的运用也是比较常见的。（后面有针对性字体设计形式，详细解读，这里就不细说了）
韩文的本身的图形特质，为保证识别度，文案提炼精简，信息层级相对较少。文字层级一般分为两层。
有意思的是韩文由于字形结构的单一，排版上很多时候会搭配字体形式的变化来增加排版样式的变化，装饰线的运用也比较多变。
英文排版上本质上和韩文相同——符号化，通过字形的特点来特出主要信息。
排版的优势性，让其排版变化上自带韵律感，加上装饰线的运用，本身字形的符号特性视觉呈现很有设计感。
主体物层
为了辅助信息传达，往往采用图文结合，注意主体物的构图布局朝向，主题物对主要文字起到视觉引导作用，用户的聚焦点一定是主文案，而不是主体物。
下图里「手」作为整个画面的「支点」，把模特的脸部向主要文案指引，最终达到活动的最核心。
下图里「眼睛」为整个画面的「支点」，利用眼睛视线，把用户向文案核心指引。
利用周围的物体形成三个「支点」，把视觉中心聚焦到中间主文案。
装饰层
点线面是运用最多的元素，中国把平面设计的三大构成运用到了。
为了营造构图的稳定性，在设计里加入点和线的元素让画面占比更加平衡，同时弥补画面中空白的地方，减少负空间，让构图更加饱满。
同时点和线的元素也是为了辅助衬托主体元素，分布要合理，避免过多，造成使画面的拥挤。
面简单的理解成形状，用形状配合主体物，达到聚焦视觉中心，来突出主题，但是形状不易过于复杂，「格式塔原理」——「简单」原则（我们的眼睛在观看时，眼脑并不是在一开始就区分一个形象的各个单一的组成部分，而是将各个部分组合起来，使之成为一个更易于理解的统一体），用户更容易理解。
三角形——利用稳定的特点来达到视觉的平衡
圆形——最简单直接有效的图形元素，视觉聚焦更明确
多边形——丰富画面，多边形的边角多的特点也多用做突出设计的高逼格
形状流体在营销中突出了活动的促销感和气氛，在重大活动中经常看到，色彩上也比较鲜艳。相较欧美、韩国，中国电商运用比较多，这也侧面反映出出中国运营推广竞争的残酷性映射出来的「浮夸」。
背景层
中国设计里最多变的就属背景了。可以利用多彩渐变、放射的线、还有图案叠加，让画面迎合表达的主体基调
韩国的设计分为涂鸦放射背景和纯色背景简单几何形状
欧美撞色对比和性冷淡纯色底，也会运用视错觉，来吸引用户眼球
文案是营销第一要素，想办法突出运营信息，是所有运营必须要注意的，这就有了根据活动气氛进行字体设计。
中国字体的复杂和文化的久远特殊性，对于字体我们是有很深的研究和造诣，表现空间也很大。另外由于中文字形的复杂，导致字库设计成本比较大，字体种类相对较少，为了避免字体版权问题，多采用一些设计变形来达到营销推广目的。比如针对字形进行改变、针对笔画进行加工、针对体积和质感进行变化等。
层次叠加——提取等比重的笔画，变现字体的体积和空间感
笔画链接——让文字直接更紧凑，空间运用更整体合理
笔画装饰——增加文字设计感，突出表现风格
厚度层次——让字体突出，增加厚重感
字形改变设计——考虑到字体版权，对字体进行再设计，结合主题进行宣传
字体内部装饰——字体呼应主题的一种简单方式
韩国字形相对简单，变化不是很多，运用厚度体积和笔画装饰来表现字体
欧美的西文字体更多的是运用和主体物穿插、和字形搭配的变换，和复古风字体厚度设计
可以看到不同的国家地区根据本国习惯、审美、风格不同，都有各自不同的设计。中国营销快速简单直接出效果；韩国偶像路线，不管是对于模特的选择，还是网红形象的选择，把粉丝效应运用到了；而欧美则简单兼顾设计创意表现。
随着教育在大趋势下崛起，很多学习类产品开始出现。很多在做教育的小伙伴求助，学习类的运营 banner 无从下手，思路不清晰，那么我稍稍的屡了一下思路，浅谈一下学习 banner 的个人薄见。
在很多设计师刚开始缕思路的时候，总因为无从下手而着急盲目，下意识的认为「我不会啊」！那复杂的不会，就从简单的开始缕。从设计开始，我构图都没想好，设计啥设计？那再简单点，从构图开始吧，我思路都没想好，构啥图？继续再简单点，一步一步往前推，直到推到最简单的细节，从最初第一步开始做。你会发现，首先第一步就是先建立一个符合主题的思路。
谈到学习类 banner，光听一听就觉得头大甚至很讨厌的事情。因为本来学习就是让人很拒绝的，如何引导用户主动做一个不想做的事，就得用到一些特殊的手段了。
咱们这次主要从以下方面来多维度探讨：
K12教育
K12 也就是九年义务教育和三年高中，所以人群定位青少年，年龄 7-18 岁。这个年龄段非常单纯。
大家可以回想一下我们小时候，在这个年龄最享受的是什么？那就是「满足感」和「参与感」，我们小时候玩积木、做游戏，最重要的不是赢了能得到什么东西，而是参与到其中享受快乐。所以建立一种参与感，参与进来「一起玩」的感觉，就会得到满足。
我们看到下面这类 APP，为了能够吸引这一部分用户，大多都以有趣好玩为主，「游戏性」是最大的特点，所以情感化设计是非常好的选择，通过丰富的「体积感插画」用游戏的思路激发兴趣，让他们感觉有参与感，从而吸引他们「想看」并「点击」。
知识付费
而对于成年人来说，学习需求变成一种「插件思维」，能够快速学会，或者说是能够收获很多的干货，突出不枯燥、学会、能懂。这类的情感化设计相对于少儿学习插画，更多的突出主题所以，以更极简的设计形式。
有时候文字作为主视觉中心更加直观，整体设计风格可能更加简单，对于成年人来说，这种设计更能直达我们需求本身，更容易理解。
高端知识分享
对于这部分人来说，定位跟上面两类完全不同，从所处层级来说就不同。首先这类人，学习的可能就不只是干货了，更多的需求是职场环境带来的。比如，我怎么跟同事、朋友、下属更好的相处，如何具有更好的说服力，或者是想进修一下，就有了学习需求，基于「马斯洛金字塔」里的，这里学习需求可能也是更高层次的，为了体现自己的价值。
所以更关心的是，这是谁讲的课；通过设计情绪版，映射出当前课程的专业、严谨、课程的价值高，这些关键点。
课程的品质感的体现，颜色不能太多，插画设计元素少，更多的利用文字排版和少量图形来突出主题。
总之，根据所代表的用户来针对性设计。就好像剪头发，Tony 老师肯定不会给一个 20 多岁的年轻人理一个小平头；穿衣服也一样，你上班肯定不会穿个背心裤衩就去了，但在海边放松你也不可能穿个西装、牛仔，我相信大家都能明白这个道理。
良好的构图，目的是能够让用户易懂，首先结构要清晰、简单，主要构图比如：居中、左右。
居中结构
突出活动文案，居中构图是个很好的选择，不足就是体现不了有趣好玩的调性。直白说主要就是明确干什么。所以用户的视觉焦点会聚集在重心区域，忽略掉周围的东西，在设计的时候，周围元素主要是衬托，不能抢主视觉重心。
所以说运用插画风格的话，简单轮廓插画和剪影插画是最适合的。
设计的时候注意几点：一，主体物要突出饱满，太小容易画面太空；二，弱化辅助元素并不是要把它做的粗糙。
左右结构
左右结构分为两种，一种是左图右文，左文右图。两种构图的秘密在于，用户的浏览顺序是「从左至右」，如果图在左边，图在表意性不明显的情况下，我们需要看一遍文字，再看一遍图，这样图相当于重复浏览了两次；文字在左边就减少了重复阅读，提高了阅读效率，在运营推广「3秒原则」里，是首先要考虑的因素。而插画设计本身也是为了烘托气氛，表意性不是很明显，所以突出文案尤为重要。
所以，市面上大部分的学习知识类左右构图的，更倾向第二种左文右图。
左右构图受限于屏幕显示内容，所以，有一个明确的主体物至关重要。比如：像 VIPKID 和哒哒英语，会有一个自己的 IP 主形象，比较生动突出了品牌特征，还能让用户有代入感；还有像一些知识分享的，就会有一个明确的讲师或者人物，体现专业权威性，在设计上一切都以突出主人物来展开，就不要设计太过于复杂。
不同于电商的模特，主人物首先穿着上不能太花哨，要正式；周围装饰上不要太浮夸，要精简，甚至像高端知识分享的，背景就一个简单颜色来衬托。
衍生结构
还有以上面构图衍生的构图形式，比如倾斜构图，受限于 banner 尺寸高度，过大的倾斜角度会让画面失衡，负空间留白不均，会让画面不协调。
构图比例合理
注意画面整体构图比例，文案占比永远都是大的，不要让主要画面辅助元素过大抢了文案的风头，因为即使图形辅助再精彩，用户更关心的是「你能给他看什么」。
文案和辅助元素大概是六四开，黄金分割比例能让焦点更多的关注内容，有些小伙伴可能在做的时候过多的沉浸在放大的画布里，由于没有直观感受，错误的预估当前构图的合理性，所以做图的时候多缩小画布离远看是个非常不错的方法。还有一个就是，做完了 banner 导出图片，双击打开图片，把图拖小到无法拖动为止，再看当前实际尺寸大小，用实际尺寸来检查。
更多构图形式：《文案超多的海报设计该怎么排版？16个实用模板送给你！》
文案选字
文字的选择也是衡量当前产品用户定位的标准，首先文字结构不能太过于复杂，K12 教育因为本身用户年轻化的特点，字形简单而且饱满有趣，所以一些艺术手写可爱字体比较适合。
免费商用可爱字体推荐：沐瑶软笔手写体、站酷快乐体、郑庆科黄油体、站酷小薇 LOGO 体、锐字真言体。
其他可爱字体推荐：汉仪唐美人、汉仪糯米团、汉仪铸字童年体、汉仪小麦体、方正胖娃体、方正字迹新手书、造字工房童心、文悦方糖体。
如果是高端知识分享和知识付费，体现高端。文字就要简单，字形不要那么随意，一些黑体和简单的衬线体就比较合适。
免费商用黑体衬线体推荐：思源黑、思源宋、站酷文艺体、方正书宋简体。
其他黑体衬线体推荐：汉仪瑞意宋、方正清刻本悦宋、方正兰亭、造字工房朗宋、造字工房黄金时代体、造字工房尚雅体。
文案排版
当用户人群比较年轻，意味着所有的呈现方式都要直接，文案精简并且排版直观，提炼关键主标题，信息层级要拉开明显，如果信息层级不清楚，识别性是很差的，先看下面的案例：
看这两个，明显右边的对于我们识别，和对当前功能的认知更清晰，还有一个明显的视觉引导，突出了最主要的交互点；而左边的由于信息比较密集，导致我们无法短时间反应出关键信息是什么，这是比较糟糕的，运营同样如此，而运营比较尴尬的一点是，如果用户看不懂或不感兴趣，是根本不会点击、不予理睬的。那么流量入口的意义就没有了，设计的再精美，都是一个非常差的作品。
提炼文案是很有必要的，下面两个同样的设计，右边对于文案的认知就更明显。
有的时候往往文案的关键信息比较多，我们在排版的时候第一个重要点，就是排版怎么拉开信息对比，同时又让排版紧凑？有时需要增加一些特定图形，或按钮。但是又会考虑，加了这些特殊图形和文案又显得相对独立不整体；还有就是关键点该怎么取舍，强化那些文案、弱化哪些，或是主文案是重要的，同时关键的数字也要突出怎么办？
左图，左边主文案放大了关键点，由于右边文案文字比较粗，所以层级拉开还是不够突出，如果想拉开对比的话那就让他们截然不同。右图，字体选择上拉开强弱，让右边的文字比划选择细一些；左图的关键数字不够突出，通过提亮改变颜色，来强化；按钮在左边画面显得太独立，和文案没有形成统一关系，反而按钮看起来变得要比文案重要，那么把按钮插到里面。
现在所有的信息，一环插一环，并且突出的文案明显，关键数字也明显；最后让他们整体在画面构图中面积比例放大，改版后是不是舒服很多。
还有一些小伙伴可能觉得亲密性原则不就是距离相近么，然后没有把控好各个部分的文字距离，导致反而该拉开的没有拉开，该近的没有近。
上图这个案例里，主文案分为了两行，但左边由于主文案行距比较宽，而跟辅助信息的距离太近，导致亲密性不够，而由于副标题文案又比较孤立，上半部的信息和下半部信息太散，整体统一度不够。
右图改进后，调整合适行距，并且加装饰线，协调一下辅助信息比较短的问题，同时也起到分割的作用让上下文案有关联和统一。
文案排版的其他细节还有错位排版时，注意错位的大小，太大会丢失掉排版的平衡性；注意文案排版对齐，往往有的时候不注意，会让你的作品看起来不够精细；文案做倾斜处理的时候，一般情况都是往右边倾斜，第一，右边都是我们的主要习惯方向；第二，往右可以很好的把用户引导到关键信息上，这些也是做 banner 排版里经常犯的错也是要规避的一些坑。
颜色倾向
如果是代表年轻化，多用绿色和黄色，绿色代表活力、生机、积极向上；黄色系代表温暖、希望、舒服。
这两个颜色由于是临近色的关系所以也会搭配出现在画面中，色环 90° 角的颜色搭配所以是最舒服的配色，还有就是颜色对比非常和谐。
由于蓝色是绿色的邻近色、是黄色的对比色，红色是绿色的互补色、黄色的邻近色，所以绿、黄、蓝、红这些会在画面中组成主色、辅色、点缀色。
注意协调好每部分颜色之间占比，主色 60% 左右、辅色 30% 左右、剩下的辅助色 10% 左右。
如果是代表科技、互联网，就会以蓝色为主，颜色也不会像上面那样丰富，颜色体现的设计也没有那么活泼，代表冷静、自然、科技。
一般画面在2-3种颜色，以蓝色为主，再搭配紫色。因为紫色和蓝色是邻近色，不会像暖色调一样太冲撞，所以我们经常会看到蓝紫这种「好基友」的搭配。
知识分享类，分为普通的讲师分享和高端知识分享。讲师分享颜色要亮一些，颜色搭配大概是 1-2 种。
而高端知识分享，要体现知识的稀缺性和专属感，代表尊贵、品质、价值，颜色大多用暗色或消色（消色就是黑白灰），大概也是 1-2 种。
颜色方面我总结几点坑需要避开的：一，如果用插画表现，一定要避免颜色的灰和脏，因为学习代表着积极向上的，灰色不适合。颜色选取的时候大概要避开「颜色警示区」的位置。
二，插画风格避免选择紫和一些冷色调，以暖色调为主，才能贴合情绪版定位；三，同样的道理，颜色不要过于艳丽、过于刺激，反差明显了，反而阅读体验不好，影响观感；四，所有的颜色最终都要定位到主题上，做完后，反向推倒检查一下，颜色呈现符合当前文案定位吗？符合面向的用户人群吗？根据主题当前配色合适吗？
更多电商配色方法：《这是一篇不看会后悔的配色干货》
最后我想说的是，所做的东西把自己当成模拟用户自检一下，自己如果看到这个 banner 会点击么？会吸引到你么？能直观感受到么？会让你舒服么？如果连自己都无感，那是相当失败的。
运营专题在设计的时候，我们要考虑的是针对运营需求，给特定需求的用户传达零成本阅读体验，很多设计师做的 banner 画面特别乱，原因是画面中没有突出主体元素。
所以在 banner 设计上要考虑贴合当前传达的主题，所谓设计的「言之有物」。下面来详细的谈一下运营设计时如何突出主体元素，其中的言之有物。
运营活动最终想给用户快速传达文案信息，也就是「三秒阅读」体验，配合辅助文案的主体图形更能方便用户去理解。
可以看到下图左为了让画面丰富，设计师往往会加一些辅助元素或图形；而图右糟糕的元素添加反而会过度设计，干扰用户对于运营活动本身的理解和其表意性。
那么，如何突出视觉主体物，而达到最理想的设计作品的表意性呢？
我们从以下五方面细谈：
流畅线条的运用
我们在看音乐类运营 banner 的时候发现线条运用非常普遍，特别是利用 illustrator 里的「混合工具」来实现两条线之间的复制混合。
人物涂鸦剪影
往往为了表现特定的主题：比如年轻化、个性化，通过错位移动，添加亮色来使人物突出，往往更多的表现在：音乐、设计、嘻哈接头文化的电商运营宣传中。
这类设计个性鲜明，所以做之前考虑好，所要传达的特定的人群是不是符合当前的审美认知。
简单几何形状
有时候为了让传达主题更加明确，简洁化设计很有必要「少即是多」，所以比如学习和知识付费类的设计，干脆就用简单的圆形、方形、波浪曲线。
下面这个案例，设计者为了使这几个人物不会太散，用圆形包裹，目的也是为了更加整体，试想一下，如果把圆形去掉，人物不仅会显多，画面也显得既单调又乱。
立体几何载体
让风格调性显得品质高，同样让设计少而精。需要注意的是，品质感高逼格的设计所用的图形相对要规整一些，尽量不要显得太随意，多用方块形状和立体几何载体。
比如网易严选，为了突出「所卖东西都是精挑细选」，会采用立体几何载体衬托的方式，所表现的就是「隆重和百里挑一」，我们不一样~（会唱的朋友们一起唱）
多边图形
运用模特表现的时候，高品质感会用一些规则多边形，比如：四边形、多边形等。多边的形状会给我们带来稳重感，「尊贵感与众不同」往往是这类商品想传达给我们的。
不规则流体
促销类电商营造促销的氛围，激发购买欲，会用到多色彩的不规则流体，目的为了传达「降价、折扣、满减、超值、限时」等 ，往往会为围绕主体物四周，突出主体元素。
小结
图形化元素是最简单也是最实用的一种突出主体元素的表现方式，不管是用哪种，一定要想明白所表现的主题：符不符合当前主题；推广所属对应的用户群体：心理认知上能不能赞同；满足这两点，所加的图形才有意义。任何图形都是为了辅助突出主体元素，记住这一点，你就不会盲目的进行设计。
文字铺底
直接把相关文字铺底是最常见的一种方式，用当前所对应主题的人物名字、相关文案、对应英文等。
文字与主体穿插
利用文字与主体的穿插营造出空间感，也是在平面设计中经常用到的手法，同样也是在保证文字基本的识别度前提下。
注意文字颜色与主体颜色之间要拉开反差，不要糊成一坨，就适得其反了，适当的时候加一点点阴影还是很有必要的。
小结
不管是什么形式，所加的文字要有意义，跟主题相关。任何加的文案一定要能衬托主体物，也要有很强的表意性，毕竟文案才是最重要的。
主体物吸色衬托
从主体物上之间选取，作为背景颜色搭配，来衬托主体物简直不要太完美，前提是主体物的颜色相对够和谐舒服。需要衬托的背景颜色相对要弱一点，以突出主体。
颜色对比
我们一想到颜色对比，马上想到「红配绿赛狗屁」这句话，这句话的意思不是说红配绿不行，而是说错误的红配绿不行，听不懂啊？来，举个栗子…李子…梨子…例子！
左图的红绿颜色占比可以看到是比较平均的，大概1：1的比例，但是红色作为一个比较刺激的颜色，颜色很鲜艳，如果搭配的绿色也一样饱和度很高，两个撞到一起没有一个突出色，画面就不会那么和谐了。
右图如果我们把红色的占比相应的减少，饱和度不变，而绿色降低饱和度，从而面积占比增大，起到衬托的作用，画面之间是不是舒服很多。
下图其他的颜色对比同样如此。
小结
颜色对比的口诀是：主体如果是亮色，背景就用冷色；主体用重色，背景用亮色；主体用纯色，背景用灰色；不管哪种对比，主体物的颜色一定是面积最小的那一个，无论如何拉开颜色对比反差是王道。
人物面部打光
人物面部是最容易辨识，也是视觉焦点部分，所以让面部从画面凸现出来尤为重要，让光源聚焦到脸部，主体人物显得更加有质感和饱满度。
物体亮部打光
物体和人物相比相对简单，亮部高光部分为视觉焦点，让物体显得有质感，只需要给亮部特殊光源即可。
小结
光线能在突出主体物的同时，让构图更加丰富和饱满，切记光线不要过亮，看起来会很不舒服。
人物截取范围
截取摆放人物的时候注意，为了让视觉焦点集中、有辨识度。具有代表性的人物和明星一般截取一半左右，大约胸部以上部位；而电商模特为了展示所卖衣服，一般露出大约三分之二。
万万不要切头部
让人物完美的呈现在画面之中，让画面能够看起来舒服些，构图也相对完整，反之把头部一刀切，会使画面负空间变小，构图拥挤，而观看者对于人物的识别度也随之降低，阅读成本变高。
多人物摆放要求
多人物组合时，整体人物处理要基本保持一致，特别是眼睛视线要尽量保持统一的视觉基准线，不然会显得杂乱不堪。
多物体的摆放
表现美食产品的时候，文字居中构图，物体散点摆放要注意，角度的统一，统一俯视角度，不要有俯视有平视，保证统一度。
案例分析
这是一个小伙伴做的医美类的运营 banner，当看到这个设计的时候我的内心是崩溃的，我们分析一下问题。
问题一，首先主体物没有突出，主体人物偏灰，背景也灰；问题二背景太乱，没有视觉焦点；问题三，文案识别度完全丢失掉了，排版也太乱；好下面我们来改一下。整体看下来，并没有表现出医美要体现的「变美」，用户完全没有视觉感受。
调整改动
前后对比
最后我们来看看对比效果，是不是好很多。
无论什么样的设计，加什么样的元素，目的只有一个就是要有理有据、有道理，所有的运营设计都是为了辅助主体文案。不要让你的设计无用，或者减分，把设计元素最大化发挥它的作用才是设计的最终目的，你就说是不是吧！
业内有很多人觉得手势交互没必要拿出来深究，觉得用户使用产品的过程中，自然而然就会去使用拇指，进行手势操作。但这种说法，就跟「用户心理模型」类似。当然，对于用户来说没必要深究手势交互，但作为设计师，如果不了解其背后的逻辑，那么就无法解决产品设计背后的一些问题。
所以我们今天，好好聊一聊手势交互这件事。你会发现，原来你以往观察或以为的设计问题，都是手势交互在作祟。
我们以前经常听到「以用户为中心做产品设计」这句话，意思是产品需依附于目标用户的真实场景来设计。与此同时，其实还有一句话在提醒着交互设计师如何做产品设计，就是「以触摸屏为中心做产品设计」。
为什么呢？因为用户从始至终都是在跟触摸屏做接触，不管换了什么设备，他们都是要通过屏幕与产品进行交互的。
我们可以在这里思考一下手势的意义。
手势的出现改变了什么？可以回想一下 iPhone 4 发布的时候，当看到这样一台屏幕上没有任何按键的设备，是不是会觉得不可思议？键盘，电话接听按键等都消失不见了。
人们在使用 iPhone 这样的产品时，不再需要去强行记忆任何固体按键。触摸屏与手势的结合，帮助我们隐藏不必要的元素，帮助用户聚焦于内容，在有限的物理空间获得更多的信息。
所以用户通过触摸屏与产品进行交互，跟通过键盘按键与屏幕进行交互是完全不同的。手势交互更自然且更。
手势操作对我们来说如此自然和直观的主要原因是因为它们类似于与真实对象进行直接交互。譬如你用遥控器控制电视上的按键，需要通过上下左右这样的操作来定位指示器，而触摸屏直接就可以通过手指点击内容进行操作。这是完全不同的概念。
综上所述，我们能知道，手势的三个要素：简洁、易用、直观。
所以我们通过一些常见的手势行为，就可以在产品界面上很轻松的完成任务。
常见的手势行为：
当然，我们经常也会遇到一些背离手势交互的产品设计，虽然也是点击、拖动等等，但操作起来总是不那么顺心。这里面有一个关键点就是，手势直观性。
有数据表明，苹果的 3D Touch 使用率非常低，就是因为直观性太差，用户不知道通过这个操作能带来什么结果，且使用它需要长按，经常会同时呼出「卸载」，那么效率也就会降低。久而久之，用户就不去使用了。
正面例子如下图，滑动与文案结合。
这样一看，用户马上就能知道这个操作行为如何触发，紧接着就产生行动，然后会反馈结果。
这也是手势交互的核心：触发，行动，反馈。
对比 3D Touch，触发没有提示，行动后时常有两种反馈结果，相比起来就不那么友好了。
除了上面聊的这些，手势交互还能从另一方面来提升效率，就是拇指操作区域。
我们都知道，现在手机屏幕越来越大，甚至比最早屏幕大了一倍以上。但是很多设计师并没有转换思维，跟进这个趋势的变化。
这里给大家普及一个知识：大部分人误以为，手指在屏幕上的热区是永恒不变的，但其实手指热区会根据设备的变大而缩小。因为手掌支撑设备的重心靠后走了，所以拇指操控屏幕的范围也就变小了。如下图。
结果是，手机屏幕变大，双手持机的用户变多，但依然还有 75％ 的用户是使用拇指来触摸屏幕的。因此，术语「拇指驱动设计」应运而生。
我们上面说到，在使用一些产品的时候，经常会遇到使用起来不顺心的情况，然后说了「手势直观性」的概念。但这里，还有个更重要的原因，就是「拇指操作区域」。
拇指操作区域被分为三块内容，分别是：易于触达，难以触达，以及介于两者之间的区域。
看下图。
所以在设计界面时，要注意界面的主要操作元素是否处于用户易于触达的范围之内。
如果你仔细观察并思考过，也会发现，iOS 的产品界面中，「返回」按钮就位于「难以触达」的区域。原因是产品人员本身也不想用户返回或退出，而是让用户聚焦于当前页面，想要返回，那就需要付出一点成本，什么成本？操作成本。
有人会说，由于 iOS 可以从手机的左边缘向右侧轻扫以获得返回效果，因此在大多数 iOS 产品中，返回都不需要太大的操作成本。但是，并不是所有 iPhone 用户都知道这一点，也不是所有产品都支持这一特性的。而且手势交互的进化本来也就是为了提升用户操作的效率，所以本质上他们并不矛盾，只是相比以前，我们现在的操作更快了。并且「右滑」返回，本身在手势操作中相比「点击」也是更具操作成本的。
当了解了手势的一些意义，以及拇指操作区域对于产品设计的重要性之后，我们就可以通过一些案例来做一个全局分析了。
1. 内容在上，操作在下
许多人设计 App，但是没人研究过 App 为什么要这么设计。
比如，为什么起初要把标签栏放底下呢？关于这个问题，当初我也是问了许多人，而基本都只是说这是官方设计规范。这相当于是一句废话。
通过翻阅多方资料，我发现在工业设计领域有一条重要的基本设计原则：内容在上，操作在下。
比如在使用电脑的时候，操作在下意味着使用者在操作过程中，手指始终处于界面下方，而内容在上面，就不会出现手指遮挡内容的情况。
如下图的键盘操作提示：
基于此，相信你也知道为什么标签栏在下方了吧？
另外，为什么 iOS 设计规范建议将「编辑」按钮放置在界面右/左上方的位置呢？
界面右/左上角的位置对拇指来说显然是不友好的。然而，这样做的原因也是显而易见的：编辑功能会让数据发生变化。将这类控件放在难以操作的位置上（与左上角的返回是一个道理），就是一种防御性的设计策略，可以在一定程度上避免因为太容易产生误操作而导致的破坏性的结果。
通过这一小段之前聊过的内容，你们会发现，手势与拇指操作其实在驱动着产品设计。下面我们来聊个大的案例。
汉堡包菜单，也就是侧边栏导航，Facebook 早期测试显示侧边栏导航让用户使用率降低了一半。
我们一起来看看市面上给出的三类说法。
1. 可见性太低
默认状态下，用户是看不见侧边栏的，除非点击了侧边栏的弹出按钮。所以这种情况下，里面的功能都是用户脑袋里已知的，但很可能都想不起来。比如，现在你回想一下知乎底部 5 个标签分别是什么？或者微信右上角「+」里面有哪些功能？是不是要想一会儿，才能记起来？甚至还是想不起来。
之前我在文章里写过，用户对于功能的使用一定是「所见即所得」，而不是「心向往之」。用户只会注意自己看到的信息，而不是凭借记忆或想象来使用产品。
底部标签栏就很好的解决了汉堡包菜单的「可见性」问题。
2. 效率较低
效率较低主要在于操作频率，大家看下面两组图的对比。
第一张图，当用户从首页进入到个人信息页面，只需要两步；而第二张图，则要三步。
这里多一步看起来似乎影响不大，但如果现在要从个人信息页面到「标签 3」的话，第一张图也只需要两步，第二张图还是需要三步，当频繁去使用这样的产品后，用户的整体效率就会下降，体验也会随之降低。
3. 与平台模式冲突
大家应该知道，在 iOS 的操作页面中，通过手势可对 tab 进行左右切换，而侧边栏除了通过点击菜单按钮展开之外，也可以通过右滑弹出。这里面有什么冲突呢？看下图。
当页面聚焦在「标签 2」时，右滑除了能回到「标签 1」，同样也很可能会切出侧边导航栏。
这样的手势冲突，导致页面层级与功能导航的优先级混乱了。
无论是导航还是控件，当它们组成一个页面后，它们的操作就会有优先级。比如下面这个例子。
如果你对标红的分段控件比较熟悉，就知道，它是可通过屏幕滑动进行切换的。但是在「短信」里，它是不能通过滑动屏幕进行切换的，因为用户可对单条信息进行左滑做删除或其他操作。所以当页面操作模式存在矛盾时，我们会将子层级操作优先于父层级操作。
譬如你进入朋友圈，是不能马上回到首页的，这时候页面层级较深，产品人员要将用户聚焦于页面本身，如果直接能返回到首页，页面层级和产品架构就会混乱。
类似的例子还有很多，我这里就不继续列举了。
所以从「短信」的例子可以看出，当控件与控件之间的手势发生冲突时，我们要考虑优先级，将内容优先于页面来处理。那么回到上面的例子，分段控件与汉堡包菜单的手势发生冲突时，很明显我们要优先分段控件的操作，而禁止掉汉堡包菜单的右滑手势。结果就是，效率又低了。
4. 小结
这三类，如果你认真思考里面的关系，其实就会发现，它们的共通点就是与拇指的联系过于被动或直接被切断了。
它们的核心点就是拇指与触摸屏的关系。
如果你现在还不能深刻理解汉堡包菜单的劣势，那就想一下去看一下现在的产品，其中「我的」、「个人中心」或「更多」其实都是变相的汉堡包菜单。
在「我」这个标签页里，这一系列功能列表，无非就是另一种模式的汉堡包菜单，只是这里呈现的都是不重要的功能，并不影响用户使用这个产品。回想一下，你是不是很少，甚至从来没用过这里的某几个功能？再跟手势结合，就会发现，「我」所处区域并不是容易点击的区域，这就是它效率低下的原因了。现在能懂了么？
当传统的确认弹窗逐渐被手势操作取代，大家就应该察觉到：以往从电脑迁移到移动设备上的交互行为已逐渐被改善。
我曾经写过一篇文章，叫「取消按钮的设计逻辑」，讲了「左取消，右行进」这个原理。意思就是当我们在设计弹框的时候，用户已经习惯这样的操作路径，所以不要轻易更换位置以混淆用户的认知。再从手势的角度来说，就是右边更容易点击。
后来有同学说到，但是有些特殊场景，譬如删除资料，而产品人员不希望用户删除，于是把删除放在左边，取消放在右边。毕竟右边更容易点击，所以位置换了会比较合理。
这是错的！
我们不能通过改变用户使用产品的常识来将产品人员的想法置于用户之上。当用户已经形成「左取消，右行进」的认知之后，违反这样的一致性，去换位置是很危险的。所以出现了 action sheet，来解决一些产品关于 alert 无法解决的问题。
如图。
大家要记住的是，当页面逻辑与手势操作产生逻辑冲突时，我们不是去否定以前已经被验证且正确的内容，而是通过创新，来解决这个冲突。这就是拇指驱动设计的一种方式。
包括我们以前在移动设备上选择删除某项数据，都会弹出警告框，询问我们是否确认删除。这种方式会打断我们的操作行为，久而久之，用户已经对此交互方式习以为常，或者说免疫了，但这种弹框的方式始终被认为是不好的一种交互手段。所以侧滑删除，已经被更多产品功能用来取代没必要弹框的操作。
也许很多人没思考过底层原因，或者仅仅只是觉得其相比弹框显得更友好。其实这个行为是基于手势交互做了相应的优化，让用户操作起来更加方便。
到了这里，我再举个所有人都熟悉的例子，就是轮播图了。
轮播图最早出现于网页端，后来被大量商家模仿，以至于到移动端还备受各产品设计人员的欢迎。但其实很多人对轮播图的使用方法都是错误的。
下面来看轮播图与手势的关系。
试想：你的轮播图有 6 张 Banner，你要翻到第 4 张，无论是往前翻还是往后翻都要产生 3 次交互行为。而大部分产品的用户在界面停留的时间不会这么久，更不会看完你 Banner 的内容。以至于有研究表明，大部分产品里，除了第一张 Banner 的点击率能达到 83% 之外，其余的点击率都非常低。
有人说可以点击下面的原点指示器做跳转，这么小的点，你觉得点击它现实么？所以手势交互与轮播图是相互矛盾的一种设计方式。
所以当运营策划了一个活动，而你就往顶部的轮播图里塞，这个行为就已经注定这个活动的用户参与度是很低的了。除了个别电商产品，他们以卖广告位给商家作为盈利点，但即便如此，我相信这个广告位除了第一张图的点击量稍高外，其他图片的点击量相对于产品本身的用户体量比较而言还是很低的。这也是为什么部分产品把轮播图规则改为用户进入首页随机展示轮播图页面，而不是强制指定于显示第一张的原因。
毕竟轮播图在顶部，用户需要通过拇指长时间的在「延伸区域」进行操作，那么使用率自然就降低了。
如果你的产品有很多活动是在同时期进行的，那么我给部分产品的建议是放一个活动主题入口，如下图。（当然，这要视情况而定，并不是通用的。）
我们现在看到的搜索框基本都是放在屏幕顶部。
为什么呢？
市面上对这个问题的解释是这样的：用户已经被现在的产品训练得在界面的顶部必须看到一个搜索框，设计师打破这个常规就要承担风险。
看完这篇文章，你就已经知道，对于用户来说，由于屏幕顶部离拇指很远，处于难以触达的区域，在体验上很不好。所以搜索框成了认知上应该在顶部，但操作体验上又不应该在顶部的一个设计。
但是回想一下，会发现大多数 App 的主要内容都是位于易于触达的区域。所以当看到高德地图把搜索框移动到下面来之后，就能知道，拇指驱动设计的概念被越来越多的人认识到其重要性。
地图类产品把搜索框移到下面来的首创应用不是高德，应该是 Lyft。
瞧，拇指驱动设计，多酷~
《上瘾》里有句话：当人们不由自由地做出下一个举动时，新的习惯就会成为他们日常生活的一部分。
当手势充分地发挥了作用，辅助用户操作或实现功能，它就成了用户不可分割的一部分。
今天通过对手势意义的解读，以及拇指驱动设计的解析，再加上这些案例的拆解，我相信你能更好地理解为什么手势交互这么重要了。
交互设计师对于「触摸屏」，必须有深刻的认识，才能理解设计背后的逻辑。
如果这篇文章对你有帮助，记得点个赞，后面我好持续输出。
文章来源：优设
蓝蓝设计的小编 http://www.lanlanwork.com