很多时候，设计师需要在公开场合借用幻灯片演示设计作品，或者给客户展示的设计方案，又或者是需要在文章当中，展示作品，选取配图。如果你希望你的展示和演讲更加具有吸引力，那么可能需要针对这些视觉素材进行处理，让你的观众或者读者，被内容吸引，被信息打动，能够 Get 到你所要表达的东西。
今天这篇文章，梳理了 20 个对关于幻灯片/演示文稿的处理技巧和经验总结，希望能够帮到你。
在创建任何用来展示的幻灯片之时， 你首先要搞清楚一个问题——你的目标或者目的是什么。明确了这一点，才能做好下一步的设计。
除了了解自己的目标，你还要搞清楚你的观众或者你的受众是做什么，有什么特征，对什么感兴趣，会具备什么样的动机，这样你在设计的时候，才能够更加具有针对性。如果是甲方，那么甲方是什么样的人？你是否要提供一个具有代入感的故事，在最后再进行报价是否合适？搞清楚观众，后面的问题你就有答案了。
如果你的幻灯片准备得过长，那么最好大概每20分钟就需要中断，适当休息一下，或者调整演示内容的媒体形态，让你的听众可以借此修整，并重新集中注意力。
讲故事能够更好地同用户建立联系，保持用户的参与感，集中注意力。如果用户无法集中注意力，那么你的展示和设计做得再好都没有用。你可以参考一些常见的、有效的叙事框架，拿捏好关键的因素：
关键角色：客户、用户、组织、团队等；
核心问题：挑战、痛点、风险等；
框架指南：产品、公司、服务等；
完整历程：解决问题的愿景、具体执行计划等；
抵达成功：光明的未来、最终的成就等；
这意味着，如果你的幻灯片当中的内容，下面的观看者无法在 8 秒内消化，那么它可能就失去效果，并且用户会快速分心。
幻灯片要简短，不要让它像书本一样堆满信息，你应该提供最快速有效的简短展示，减少文字，增加辅助的视觉效果，帮助用户集中注意力。
如果你的文本内容无法进一步增减，那么你需要做的就是梳理出它的层级关系，让字体的层级来辅助观看者更快 Get 到其中的信息。我们习惯于快速扫视，而不是逐字阅读。
凸显重要内容，控制好字号大小，排版结构，让观看者能够清晰阅读内容。过于鲜艳的色彩会产生视觉频闪，对比度过低会让可读性极差。
在实际的展示的过程中，展示者在电脑上看到的，和最终在大屏幕上演示的内容是不一样。演示给下面观众的内容一定要简约直观，而更多的辅助信息只需要显示在展示者自己的电脑上，作为提示即可。
提取最重要的信息点，使用更大的展示性的字体来呈现，这是有助于让这些信息脱颖而出的，而不是简单地、没有筛选地铺陈出来。
信息图和简单的数据展示有着极大的差别，信息图所展示的信息更易于被观看者理解和吸收，使用信息图还能让整个展示过程更加视觉化、富有创意。
我经常会听到这样的要求：「这套幻灯片只能有7个页面，同时我们不能删除任何内容。」
千万不要将内容塞到固定数量的幻灯片当中，那是没有任何意义的。一套用来演示的幻灯片的数量应该是可以增删的，它们的数量取决于你所要展示内容的多少，以及呈现的方式。对于绝大多数的展示和演讲而言，20~30 张幻灯片是一个合理的数量。
留白是制作幻灯片时最容易被忽略的元素，通常而言，我在修改幻灯片的时候，将留白的空间放大三倍，视觉上的呼吸感就正正好好。
好的图片素材，通常会有着相对充沛的感情和自然的叙事。在你的幻灯片当中，需要采用更加富有真实感的照片，以营造真实的叙事感。不幸的是，这种设计知易行难，绝大多数的图库所提供的照片都缺乏这种应有的真实感。当然， Unsplash.com 所提供的照片，相对而言会好一些，而且是免费的。
影响幻灯片视觉样式的因素有很多，主题、受众、品牌等等等等，都会有影响。但是不论情况如何，你都应该让整个幻灯片所采用的字体、图标、配色、插画的样式始终保持一致。其中，最常用的方法是定义整个幻灯片的模板，来协助你保持一致性。
不要把幻灯片用信息全部填满，可以在其中插入一些可以帮助观看者「中场休息」的幻灯片，它可以起到过渡作用，也可以帮助观看者不用一直紧绷着情绪。
转场动效和动画可能会成就你的整场演示，也可能让它沦为一场灾难。我的建议是，尽量让动画和动效微妙一点，让它们紧贴内容，对信息提供支撑，而不是喧宾夺主。
对于较长且复杂的演示，让观众看到进度条，了解整个演示的进程是非常有必要的，当他们感受到演示的进程，就能体会到掌控感和安全感。
做好幻灯片之后，一定要自己排练一下整个过程，走一遍之后会让你对于整个演示过程中，哪里有问题，哪里要改进有更清晰的认知。借助排练来排查问题，迭代展示，非常有必要。
当然，设计幻灯片和设计 APP、网页是截然不同的，但是设计思维层面上，这几个领域确实完全相通的。你可以借用各种设计规则和方法来将幻灯片设计得更加合理优秀。
文章来源：优设 作者：Taras Bakusevych
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
你平时填写过的最复杂的表单是什么？调查问卷还是文档信息录入？如果一个表单字段内容巨多，结构多变，填写耗时耗力，那你将如何设计你的表单，使之体验更佳？
1. 业务复杂，功能较多；
不知道大家是否看过法律合同之类的文件，多则好几箩筐，少也有厚厚一叠，类似的文档如果进行线上结构化，势必要同样要花费巨大的人力去填写表单，完成基础信息的录入工作，同时，由于录入的时间不确定，流程不明确等问题，也制约着表单的填写。
2. 流程较长，操作繁琐；
多个不同表单之间的互有关联又相互区别，填写的时候需要来回查看以确认信息，查阅和填写相互并行，操作繁琐。
3. 字段较多，关联项较多；
几乎每一个字段都有对应的关联项，每个单选字段的不同项决定不同的内容，同时，由于字段数量，层级划分不明确，会使填写的人失去定位，产生迷惑。
1. 内容分组，分步填写；
根据业务内容分级，合理运用颜色、间距、字体大小、卡片层级等进行信息分级
2. 实时保存，避免数据丢失，提供草稿功能，避免任务中断；
3. 字段分组，示意结构，联动项隐喻；
4. 信息自动带入，节省时间；
一般表单是与某项功能挂钩的，信息会在多个入口录入，因此在填写长表单的时候，如果能从系统中自动获取到数据，就可以自动为其填充，可根据业务场景，判断是否让其修改和更新。
5. 提供二次编辑功能，防止信息输入有误；
一般的长表单在涉及非审批流的时候，可以让其无限二次编辑，如果是处于审批流，则需要根据业务场景限制其编辑次数或者限定其编辑规则（草稿可编辑，一旦提交则不可编辑）。
6. 提供多人协作编辑功能；
如果一个长表单，需要多个不同的业务域的人来填写，那么需要协同编辑，并实时显示编辑的人员信息，同时，为了避免信息丢失和编辑错乱，在同一个表单下，同一时间应该限制只允许一个人进行编辑，等其提交完后，可允许其他人进行编辑。
7. 实时检验；
前端实时校验字段输入规则，后端统一校验信息交换规则。
比如对于数字输入框的校验、电话号码的校验、身份证号的校验，应该在前端实时完成，在鼠标离开焦点区域或定位到下一个字段的时候，提示其填写有误，这样做的目的是减少后续修改的次数，在长表单下，统一提示其填写错误会是一场灾难。
在点击保存并填写下一步或点击提交信息的时候，就需要跟后端交换数据，验证录入的信息，如果不匹配，则提示错误，并从上至下定位至相应的错误字段。
8. 做好填写引导功能；
要通过多种方式，引导表单的填写，
在开始填写之前，简要说明该表单的业务目标，大概需要花费的时间等；
开始填写后，关于每个字段的特殊说明，都需要标注出来，重要的要显示在页面上，不重要的就收起在注释符号中；
填写的过程中，切记不要到最后才告诉用户哪里出错了，重要的信息一定要提示到位，否则一旦出错，前功尽弃；
填写完成后，引导其下一步的操作，或者返回至列表。
9. 详情页也需要注意信息分级
表单填写完毕后的产出物就是详情页，详情页是需要浏览的，因此在设计详情页的时候，应该本着让用户浏览方便的原则去设计，需要注意以下几个点：
结构清晰。是指不要将内容一股脑的全堆在页面上，要做好信息的分类，同时，注意规划页面的层级。
设置快捷导航。如果一个表单是长且复杂的，那么其对应的详情页也会变得复杂和冗长，因此在页面的右侧或者顶部设置合理的快捷导航是很有必要的。
1. 提供快速返回顶部的按钮；
快速返回顶部按钮的使用要注意场景，如果你的页面比较长，且没有分组浏览的导航，那就需要设置快速返回顶部的按钮，但是在存在分组浏览导航和顶部悬浮标签的情况下，不建议使用快速返回顶部的按钮，因为在填写表单的时候，使用快速置顶的场景比较少。
2. 提供分组模块收起展开功能；
当一个模块混杂着各种信息的时候，单纯的模块分组已经无法处理它的复杂度了，因此需要收起高频且信息量大的模块，可以合理的减少页面的复杂度。
3. 步骤提供信息填写完成度提示；
步骤条可以单纯的作为步骤指示器使用，也可以作为一个表单完成度的提示区域。
4. 重要说明性文字尽量显示而非收起；
在填写大量字段的表单时，阅读表单内容和填写表单同样耗时耗力，如果我们将所有的提示信息隐藏在提示符中，一般情况下，用户不会去查看，但是如果去挨个查看提示信息，则会多花费一个步骤去点击或者悬停来查看提示信息，浪费了大量的时间，因此如果涉及到重要的提示信息，请直接展示在字段的后面，不要隐藏起来。
5. 产品内组件应该规范统一；
在后台产品上，关于组件的规范统一，想必是人尽皆知的设计原则，无论是各类平台型设计组件，还是各个公司自造的设计组件，保持统一和规范对产品设计有着重要的作用，在这里不赘述组件应该怎样规范统一，因为无论是Ant Design还是其他设计语言，都有详尽的关于组件的定义方法，我在这里讲述一个产品设计更高层面或者更深层面的原因：
组件的规范统一并不仅仅是为了省时省力，而是为了使用户在使用的过程中达到认知上的统一和行为上的统一，在进行高频次的操作后，界面的流程或者组件样式已大致在用户脑海中形成固定印象，因此在操作相同类的流程时，用户会有更多的掌控感，试想一下，如果你在操作人事相关的流程后，去填写绩效部分的内容时，发现一个迥异的界面或者弹窗，你肯定觉得这是不是哪里出错了，甚至会怀疑这是否是同一个系统，目前大多数公司的管理系统经过多次缝缝补补，内部的跳转逻辑已经异常感人，界面风格也大放异彩，但是使用起来却无从下手，深感迷茫。
因此大到界面样式，小到间距大小，产品设计的规范和统一应该是最基础又不可缺少的原则。
6. 庞大的信息录入，表单内部要分步填写，外部可拆分成不同的表单分别填写；
对付复杂的表单，你需要解决的主要问题并不是填写方式或者页面设计，而是信息分级和结构拆分，解决了这个问题，基本上就解决了业务问题，其余部分就跟我们常用的表单一致。
将复杂度降低并不意味着减少页面的信息，而是通过设计师合理的信息划分，降低视觉上的复杂度和流程上的复杂度，这样才会达到当前场景下的「最佳解决方案」。
随着互联网信息化的深入发展，复杂是避免不了的，我知道大家都推崇简洁的设计，但那只是对视觉和样式的定义，而非对信息的定义，我们所处的世界是复杂的，行业更是复杂的，信息的复杂度与日俱增，想要处理复杂的信息，就需要从复杂中寻求规律，这规律与业务息息相关，
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
按钮在界面设计中，属于最基础的元素部分组成，按钮设计的精致，整个页面的品质也会上升不少的档次。今天给大家分享这篇文章，主要讲解在设计按钮时我们应该考虑哪些因素，包括视觉上，有哪些万能的方法及公式，能够正确的制定按钮的设计标准，来提升整个设计的系统性。
在设计按钮之前，需要先理解按钮起到的代表含义。什么地方该加按钮，什么地方不加按钮，在系统化设计思路中需要非常有讲究。通常按钮在页面，主要起到以下三点作用：
1. 某一类型的功能操作
这种比较常见，如一些控件形态的按钮，比如加减、折叠、展开，下拉等。这类按钮会起到一些功能形态的作用，常用于交互场景。所以在这类按钮设计中，应当弱化按钮形式，重点强调功能，突出主体信息。
2. 下一步的明确指引
当页面内容信息过多后，用户容易失去信息焦点，从而忘记下一步操作。信息种类越多，用户权衡的时间就会越久，用户选择罢手及跳出的几率也会越大。所以这个时候，在合适的地方增添按钮，能够很好的引导用户进行下一步操作，提升整体操作的成功率。其次从体验层面，也一定程度能起到页面动线的引导作用，比如下方的一组卡片，在增添了按钮后行动点很明确，非常有点击欲望~
3. 固定习惯，明确心理预期
当用户知悉某个按钮能指向某个操作，或者获取某类信息后，长期以往用户就会形成使用这个按钮的习惯，这样对提升复访及固定心智是非常有效果。
所以如果你认为你负责的产品或者是内容，能持续为用户带来价值，那么在页面的关键节点，不如将按钮设计的更醒目。这样用户下次再看到这个按钮时，固定习惯会引导他持续的点击。
这里我不以按钮的长相来区分按钮的类型，如汉堡按钮或者别的什么的，意义不大。我主要还是想通过以按钮的功能区分，来划分类型，这样大家理解起来更为清晰。
1. 功能性质按钮
这类按钮见到的最多，我们常用的APP里，大量都充斥了这类按钮，这类按钮会起到重点的功能交互，帮助用户得到TA想要的信息。其次样式上面，其实圆形的点击欲，会更强一些，看起来也更利于点击。而方型的按钮，则显得更为正式、严谨。
公式：如果是圆形按钮，圆角的半径=高度的50%比较合适，而如果是方按钮，边角的小圆角半径控制在15%以下比较合适，我个人喜好用10%。
2. 聚焦大按钮
这类按钮通常见于一些核心页面的强指引，比如登录、注册、提交表单、或者是保存，等对页面全局进行操作的一些按钮。需要注意的是，这类按钮只适合对页面全局进行操作，而且页面中大按钮的数量不宜超过2个，信息尽量需要保持聚焦。
公式：基于@2x，这类大按钮的高度≥72px是比较合适的，通常的尺寸有 80px、88px、96px，大家可以根据产品面向的人群来定高度，如果页面面向的人群较为广泛，我建议采用 88px 或者是 96px 的这种大号版本，毕竟操作起来更为方便。
3. 吸底按钮
这类按钮的优先级，在整个页面属于最高，页面的所有信息，都将聚焦在这个按钮中。由于按钮是吸底的，所以会一直浮在页面上，不受页面篇幅影响控制。
需要注意的是，吸底按钮一定是页面最重要的功能，或者是整个页面的下一步指引，比如淘宝的立即购买，或者是饿了么、美团的立即下单，又或者是常见的充值界面。
公式：基于@2x，吸底的高度≥80px是比较合适，常见的尺寸有88px、100px、112px ，按钮的大小可以根据内容来定，建议高度保持在72px以上比较合适。这里需要注意的是，吸底的按钮，需要产出两套设计稿，一套为常规稿，一套为iPhoneX的适配稿。iPhoneX底部控件的区域高度为68px，所以iPhoneX设计稿的吸底高度=常规设计稿吸底高度+68px
另外在设计按钮的时候，也别忘了补充按钮的多个状态的设计稿。常见的状态，有以下四种：
1. Normal-正常态
这个为按钮的正常显示态，就是正常页面中的显示效果。
2. Hover-悬浮态
这个为按钮的悬浮态，一般只会出现在使用鼠标的时候。当鼠标指针停留在按钮时，按钮发出的特殊反馈，则为悬浮态。这类形式在移动端交互中无作用，所以移动界面设计中不需要考虑这个状态。
公式：正常情况 Hover 态增加 10% 黑色就可以，原理如下
3. Pressed-点击态
这个为按钮的按压态，就是按钮在被点击或者是按压后的效果。
公式：在APP设计中，点击后的效果我们设一个标准值让开发实现就好了。常用的值有按钮减少20%的透明度，或者增添20%的暗度，这两个都可以。通常我建议在亮色上的按钮，使用暗度叠加（增添20%的黑色），在暗色上的按钮，则使用透明度减少（透明度改为80%），实现效果原理参考 Hover 态那张配图
4. Disable-禁用态
当信息未填充完整，或者是某类条件未到，按钮会出现不可点击的状态，处于禁用形式，这个时候，按钮就会呈现禁用态。这个禁用态无论是web还是app，很多场景都会用到，所以建议设定一套标准的设计规范，避免重复定义这个效果。
公式：禁用态尺寸及大小不变，仅使用色值做区分。建议使用灰色或者是不透明色，常用的禁用色有#CCC或者#999，需要尽可能把样式做弱，避免用户做无效的点击。
在目前移动互联网设计中，虽然按钮的种类很多，但风格变的逐渐统一，更多都是色值及细节上的差异。从大的风格来看，按钮还是分为这这几种类型：扁平化、轻拟物、重拟物及游戏按钮。
1. 扁平化按钮
这类按钮我们设计用的最多，信息简洁，操作方便，形式追随功能。这里也给大家分享一下我在设计扁平化按钮的一些经验，比如高度宽度，以及阴影的色值。
公式：按钮高度，这个通常是文字字号的2.4倍然后取4的倍数整数，比如字号是24，那么按钮的高度=57.6，离4倍数最近的是56，所以高度=56，圆角=10%的高度，取整后是6px。
另外如果觉得不合适，也可以单位往8递增或者是递减即可，例如 56、64、72、80、88 px
按钮宽度：如果不是那种全局按钮，通常按钮的宽度=最多容纳字数的宽度+按钮高度，就好啦。还是以上面那个例子为例，按钮高度=56，文字宽度=96，那么按钮的宽度=56+96=152
2. 轻拟物按钮
这类按钮近几年变的非常流行，甚至QQ、淘宝，都开始大面积使用，因为这类按钮在保持信息简洁的同时，仍然有较强的点击欲，视觉上面也能够增添页面的品质感。
公式：渐变方向，建议采用水平渐变，重色在右侧，轻色在左侧更为合适。阴影色值我之前就写过，不知道大家还记得么，阴影颜色=按钮颜色的 Alpha50%，x=0，y=按钮高度的20%，模糊值=按钮高度的50%，扩展=按钮高度的 -15%，高级又简单，完美！
如果觉得这个弥散阴影太大的同学，也可以自己手动简单调整下，不碍事。（这个公式仅适用于Sketch，用PS的同学，也可以按照这个逻辑自行研究一下）
另外说一句，实际上这个阴影公式并没有什么很多的依据，大多数都是我个人原创总结出来的，简单好用。比如下面的这些按钮的样式，用了公式后的效果大家可以自行感受~
3. 重拟物及游戏按钮
在一些营销页面中，按钮的样式通常需要做的比较游戏化。游戏化的按钮，大部分会采取游戏场景中的元素，再采用拟物的手法，来进行打造。
通常游戏化的按钮，需要重点几个部分组成，学过素描的同学应该会知道，立体的物体，通常会有几大特征，分别为高光，亮部，暗部，投影及反光。那么如果我们需要绘制一个在营销或者游戏场景中使用的按钮，只需要保证这个按钮有高光，亮部，暗部，投影及反光的这些特征，然后饱满一点就，立马就可以出效果啦。
当然，我举的这几个例子都是最基础版本，如果你想做的更丰富一些，那也是没问题的，这个可以case by case 来定。
这个没有太多的公式可以总结，更多的是看设计师的基础美术水平啦~~
在写这篇文章的时候，突然刷到了一套新拟态的控件设计风格，有种眼前一亮的感觉。虽然这套设计视觉上很有层次很好看，不过感觉短时间之内，比较难大面积推广，因为开发实现起来还是会比较耗费成本。
我把源文件保存下来了，对这个感兴趣或者好奇这种效果如何实现的同学，可以下载源文件研究~~ sketch、psd、Figma 格式都有。
文章来源：优设 作者：UX小学
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
还记得2019年4月上映的复仇者联盟4么，漫威电影宇宙的第三阶段结束了，电影很精彩，但最令人震撼的是先导版的电影海报！就是那个「五彩斑斓」的黑～
从设计上看，海报的设计师是把光运用到极限了，通过逆光和环境塑造出了酷+神秘的视觉感受。光是一切视觉表现的基础，是构图和传递调性的关键，也是视觉表现重要的组成部分。所以今天就和大家聊聊啥样的光是一个牛X的光以及如何塑造一个合格的光影？
常见形式1-聚光
△ 图片来源：小米米家台灯1S
聚光是最常见光，也是在设计中用到最多的光，通常在塑造一个物体的时候就会用的到。
因为聚光的原因，场景更像个舞台，凸显「主角」的存在。具体的原理可以根据下图去理解。
常见形式2-自然光
自然光其实就是阳光，理论上讲其实光源是太阳也是聚光，但由于光源太过于庞大，无法真正的聚焦，所以就把这种光当成一种泛光源就好。在产品设计中也会经常看到类似的光源出现，比如行为召唤按钮：
因为不需要强有力的表现和氛围的营造，所以通常产品设计中更需要自然光来作为核心光源，通过泛光源去统一控制产品的光影体系就好（发布的 Mac OS – big Sur 的整体光源同样是自然光，下文会讲到）。
常见形式3-逆光
坦诚的讲逆光也是聚光的一种，只不过由于角度特殊，呈现的视觉效果也非常不一样，所以就单独把逆光拿出来说一说。当画面需要逆光来营造氛围的时候，只需要在固有色上加上黑色蒙板和边缘的高光就可以大概塑造出一个处于逆光的物体了。
小米是典型的逆光氛围营造高手，但万变不离其宗，依旧可以从海报里看到相同的方法。
△ 图片来源：小米传播物料
通常现实中的光源并非那么理想，光线的复杂超出肉眼所见。所以我们在绘制的过程需要注意到，可以适当的抽象。举个例子，自然光是普照的，所以我们抽象为四个小光源平均分布，依次打到物体上：
在他们叠加的部分可以清晰的看到，1是最重的，2其次，3再次。按照这个办法就可以获得光影的层级关系，在绘制轻拟态的图标或者运营活动中更加细腻。
△ 图片来源：09UI设计工作室-陌陌直播礼物设计
所有的光影其实都是帮助主体塑造体积感，一个合格的立体图形必须具备：高光/过度色/明暗交界线和反光这四个基本属性。
然后需要一点超现实主义的手法，把太阳光过滤下，从「赤橙黄绿青蓝紫」的色调里提取跟主体和谐的颜色（通常是补色），营造出介于真实与玄幻之间的美妙效果hiahia～
然后再在投影上加一点点色彩倾向，一个完美的黑八就出现啦～按照这种方法，你可以试着去尝试更多的物体/场景。（下图是笔者作品「插着红旗的地球」hiahia）
影响主体的除了光影之外就是材质了，近年来的三大巨头apple/Microsoft/Google的设计都在材质上下足了功夫，苹果的毛玻璃，微软的亚克力和谷歌的「纸」。
从趋势上看，材质的引入对产品中拉开层级关系上有巨大意义，以往的设计仅仅是通过光影和焦距来拉开关系，这两个维度在少量的叠加界面中还能有效果，但到了复杂的多窗口互压互叠里就不是那么奏效了，所以铁子们要善于运用材质区分产品显示的优先级。
△ 图片来源：Eric Hoffman – Big Sur Mac Icons
△ 图片来源：JIAJIE – WeSing Live gift
图标好坏除了造型之外最重要的就是质感了，通常图标也就是4种形式（如下图），类似苹果的系统图标和抖音直播间礼物的图标都是最后一种形式。
但如果仅仅是这样就太水了，既然都说了是干货预警，那就要拿出哥们看家的本领～此图是大家关注公号后就会收到的推图，主体就是一个POI的图标加上微信的对话框和代表干货的小星星营造出的氛围。
刨析下这个图，三个发光体和底下的投影，通过上文的讲解依次绘制完成～
之后就到了amazing的时刻了，打开photoshop找到「滤镜-模糊画廊-场景模糊」设置几个key-point，调试模糊值和透明度/亮度，最终完成对光影的塑造。
空气中的灰尘相信大家都不陌生，这种情况多数是一束光影从窗户里射入后，在光的折射下把平时看不到的灰尘统统照了个遍。
如果你是mac用户一定熟知keynote里的动画效果「轰然坠落」，这个效果是在模拟物体振动后弹开周围灰尘，非常震撼。在PPT的设计中你也可以同样借助光和雾来营造你想要的效果，下图是我在做工作总结的时候为了凸显Q4工作采用的办法。
光影轻拟物在产品设计中的应用面还是很广的，比如：图标、数据可视化、插图等等。而在大量扁平设计时代适量使用会显得很出彩，当然再好的教程也比不上大家多动手试试练练，所以铁汁们行动起来咯~
文章来源：优设 作者：Nana的设计锦囊
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
配色，设计师的世纪难题。从平面到屏幕，CMYK 到 RGB，墨点到像素，色彩越来越丰富，形式越来越复杂。UI 的发展从拟物的繁琐细节中挣脱出来，却在色彩的展现中放飞了自我。
零售业有个有趣的研究成果 —— 「七秒钟定律」：人们在挑选商品和服务时 ，只需要 7 秒钟就可以确定是否感兴趣，而在这短暂的 7 秒钟内，色彩的作用占到了 67%。
要在小小的手机屏幕中加入这么多颜色，并保持其中的联系和逻辑，着实不易。如果你还对配色一无所知，完全不知道配色应该怎么入手，那么你需要了解一下，我几年经验总结的配色思路。
无论我们用 PS、AI，还是 Sketch、XD、Figma，和色彩打交道最多的地方就是拾色器窗口，我们来看看这些案例：
虽然是不同的应用，但是这个拾色器的用法大同小异，但是，很多新人并没有搞懂拾色器的正确应用逻辑。
很多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的选色原理遵循的是 HSB 模式的逻辑，也就是色相（H）、饱和度（S）、明度（B）。
HSB 是色彩科学中对所有颜色属性的理论划分，是种概念上的定义，可以用来解释任何色彩，也就是说可以和 RGB 和 CMYK 相互转化，且 HSB 的选色逻辑更清晰、简洁、干练。
因为一个正确的选色过程，是先确定出色相，然后再在这个色相维度下选出明度和饱和度，所以我们首先要关注色相选择条。
细心的同学应该已经发现了，它们的首尾都是红色，那是因为色相的序列是一个首尾相接的环形模式，所以它实际上就是色环的柱状展示图，应用起来和色环没有实际区别。
接下来就要说到重点，饱和度和明度选择区，我自己使用的习惯，是将这个选择区通过黄金三分法的方式切割成等比的 9 个区域，然后明确它们在 UI 中的对应情绪和应用场景。
在过去的大量分析中，互联网产品的主色和重要辅助色都会往右上角聚集，一些次要、不可点的色彩聚集在中上方，而文字背景色则聚集在左侧，无人区则是我们重点避开的对象。
下面我们分析几个案例，看看它们在这个选择区中的色彩分布情况：
大家也可以自己拿一些主流的应用做截图，然后把它们的 UI 元素色彩排列到拾色面板中，就会得到基本一致的结果。牢记这9个区域的场景划分，可以帮助我们非常、安全地完成 UI 配色。
在众多的 UI 设计规范中，色彩部分的介绍，都必然包含三种类型，分别是：
1. 主色的选择
主色是一个应用的最核心的色彩，品牌的象征色，比如想到饿了么的蓝色、微信的绿色、京东的红色、淘宝的橙色。
确定主色，并没有大家想象的那么复杂，它的要点在于——你想让用户感受到哪种情绪，然后通过情绪关联一个大致的色彩范围，再进行微调。
在今天的互联网产品中，主色的应用选择范围在拾色器区域的右上角，前面已经有解释了。这和平面设计中的用色有非常大的不同。
移动端产品要在一个方寸大的空间中争夺用户的注意力，引起用户的兴趣，那么低饱和清淡的色调是无法实现这个目标的，所以今天主色饱和度越来越，比如我们之前整理的一篇总结：
为什么支付宝要换 Logo 颜色？分析下目前 Logo 的主色趋势
再加上屏幕的 RGB 显示特性，高对比度，高动态范围的特质能给用户提供更好的观感。所以选择主色最安全的做法，就是在确定色相类型后，在右上方区域选出合适的色值。
2. 辅助色的选择
辅助色是丰富应用中的次要色彩，它会包含一到若干个和主色不同的色彩，除了品牌传达外，具有更强的实用性。
前面我们提到过色环，这里就要派上用场了。我们知道色环是个色彩序列首尾相连的环形模型，它蕴含一个最朴素的原则，即两个颜色在这个环形中角度越大，那么视觉差异性越大，对比越强，比如下图的展示：
这些配色的模式是不能闭着眼随便挑的，它们仅仅作为一个色彩对比度的判断标准。而真正辅助色的选择，是根据实际场景的功能决定的。
比如通知、提醒、取消用大红色，确认、同意用绿色或者蓝色，收藏、打分、评价用橙黄色。都是已经在用户心智中建立了标准的用色类型，跟着常规方法来做，是没有其它思路的情况下最简单、最安全的辅助色选择方式。
没有标准元素用色的情况下，再考虑应用色环的 「角度原则」，越需要被突出的颜色，可以在色环中离主色越远，越不需要被突出的则越近。
比如下方携程的案例，主色在蓝色的情况下，支付、保险金标签这些需要被重点突出的色彩，使用了主色的互补色， 让我们一眼就能看见并产生强烈的操作欲望。
3. 中性色的选择
中性色，是页面中文字、背景用到的颜色，它们承担起最基本的层次表现、便于阅读的重任。多数新手觉得中性色无关紧要，实际情况恰恰相反。
主色辅助色决定了界面视觉是否出彩，而中性色的应用直接决定了页面能不能正常使用。如果看过比较多的原型案例，就应该明白，即使只有黑白灰的状态下，我们理解这些页面和进行使用也不会有丝毫的障碍。
中性色的配置，就是制定一个由深到浅的灰度阶梯，应用在对应权重的元素上，色彩轻重的主要判断依据是 HSB 中的 B（明度） 值。
中性色虽然指的是无个性，但并不是只能用纯灰色，常见的一种做法，就是为中性色添加适量的蓝色饱和度，提升观看体验（满足RGB的某种特性）。
这种做法，颜色越浅的时候饱和度应用色值就越低，将这个规律在拾色器中进行表现，那么我们就可以得到一个 L 型曲线，我称它为 「中性曲线」。
掌握对于主色、辅助色、中性色的选择方法，那么对于UI配色的奥义来说，你已经掌握了一半，接下来就要了解更具体的实践思路了。
配色并不是只有色彩的色值本身，大家一直在研究各种色彩心理学和理论，却很少关心它们如何应用，如何配置。
所以，我根据主色和辅助色应用总结了一个配色的四象限表格，再分别看看它们对应的案例：
1. 主色占比大，色彩丰富度高
主色会作为顶部标题栏或其它重要模块中的背景色，进行大面积应用，加深用户对品牌的认知和辨识度。而产品中又包含了大量功能和服务，需要用丰富的色彩来进行暗示，吸引用户关注。
2. 主色占比大，色彩丰富度低
这类配色中，主色的应用占比也大，出现频率高，鲜有其它颜色出现。比较适用于图片内容丰富的题材中，或者是相对正式、品牌感强的应用。
3. 主色占比小，色彩丰富度高
这是多数主流应用的趋势，降低主色占比，留出更多的空间给内容模块的展示上，突出自身带有的服务和功能。
4. 主色占比小，色彩丰富度低
通常，会应用这种方式是因为产品的服务是相对单一，但也需要用户投入注意力的应用，设计师就会尽力避免给予用户过多的干扰。
每次在进行配色的时候，我们都需要对自己要应用哪种配色应用方式做出规划，然后再动手执行。有了这个目标，后面在整个项目的设计中的配色步骤就是水到渠成的事情了。
在实践前，我们要简单讲讲一个应用或者界面的标准配色的流程了，流程顺序如下：
具体应该怎么使用这套流程，我们用一个图虫APP改版的案例来做演示，首先从四象限中的第一个主色占比高、色彩丰富度高的类型做起。
1. 配色流程演示
原型是 UI 设计的基本艺能了，在开始具体设计、配色前，搭建页面的框架原型是一个必备的条件，下面，是我们已经准备好的原型案例。
然后，我们确定以橙色作为应用主色，并在拾色器中进行确认。
有了主色，就可以对页面进行色彩填充和图片填充了。既然我们主色是占比大的，那么首先可以用到的就是顶部标题栏的背景色了，以及底部 Tabbar 中的选中色，大按钮色等。
接着，我们开始整理中性色的使用，选择新的颜色来填充文字和背景，清晰的表现模块层级，文字信息的权重。
最后，就是添加辅助色和其它色彩的元素了，这个步骤建议都是放在最后一步操作。因为色彩越丰富，越难控制，容易让整个画面显得杂乱无序，所以先完成基础搭建，可以更好的帮助我们判断彩色的使用是否合理。
下面，我们使用彩色的金刚区图标，然后将用户关注、认证用户、标签等元素使用其它色彩，来丰富页面的色彩内容。
2. 其他配色类型应用
根据第一个方案，我们可以再用这个原型来实现其余的三个方案的配色。
比如下面的主色占比大，但是色彩丰富度低的。因为已经不太适用其它辅助色，所以主色填充上我们不再填充顶部导航栏的背景，而是将更多元素应用主色，减少辅助色数量。
然后是主色占比小，色彩丰富度高的方案，进一步降低主色应用的比例，然后在金刚区、标签等处使用较为丰富的配色。
最后，就是主色占比小，色彩丰富性也低的方案，那么使用中性色的元素就开始增多，只保留最核心的一些元素使用主色，和极少的辅助色。
根据四种不同的配色方案，我们就可以得到四种不同的配色结果和风格，在每次设计开始实施前，我们都可以根据这种做法来做尝试，并选出自己满意的方案。
要再次强调，UI 配色是极其强调形式的应用科学，最后做的往往会和一开始想的效果有极大出入，所以需要我们有几个备选方案，可以随时进行调整，并选出合理的那个。
以上是我们关于配色有关知识点的分享，希望可以帮助大家提升对 UI 配色的认识。
文章来源：优设 作者：超人的电话亭
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导读：随着医疗行业与互联网的联系日益紧密，医疗行业对产品经理的需求也越来越迫切。在这个特殊行业中，医疗产品经理需要具备哪些能力，应该如何工作，创造哪些价值？本文围绕医疗产品经理展开，从七个方面展开介绍分析，希望对你有帮助。
越来越多的医疗机构开始考虑设置医疗产品经理这个岗位，但是对于产品经理具体应该做什么工作，可能产生何等价值，以及如何招聘到合适的人才，和这个角色在组织内部如何开展工作，都有很多的困惑。今天我们就简单聊聊这个话题。
总的来说医疗产品经理还是个非常新，甚至可以说有一些超前的职能，传统FMCG和互联网行业的产品经理对应的工作内容和思考方式并不能简单照搬过来使用。我们需要清空过去在这些行业积累的认知，从医疗经营的原点出发，从下面7个方面思考：
产品经理就是足球场上的中场大将，起到承上启下，功放转换的枢纽，具体说有三大作用：
什么是进攻？进攻就是尝试主动去占据一块领地。
对营利性医疗机构来说最常见的情况有4种：
那么，又何谓防守呢？简单来说，就是对应上述各种进攻的应对。
十年前私立医院还不算很多，也还没有那么多连锁诊所品牌的时候，事实上大家主要都在忙着跑马圈地，短兵相接的攻防其实并不多。现在随着市场参与者的倍增，慢慢开始出现了小区域内的半正面PK，并且我预计在未来两年内可能会出现直接内部指名道姓对标的战斗。
足球场上的三条线是进攻、防守和中场，这里我们所说的三条线，大体对应的是：市场营销、医疗质量和行政职能三大板块。产品经理的重要价值就是能够打通这三条线的隔阂，把整个医院的资源凝结成有效的市场成果。
医疗产品不等于，不等于，不等于“打包套餐”！这个概念请务必建立起来。
首先要厘定什么是医疗产品。
可以用“三个明确”来界定之：
医疗产品开发的逻辑的源头就在于评估一种医疗服务是否吻合这三个明确，因此不是所有的医疗服务都可能变成“产品”。
比如我们医院口腔科有一个非常棒的医生，专注于牙齿美容，我们称之为“微笑设计”。这种设计是完全量体裁衣的，我们市场团队对他的关注点就主要在故事性的传播，而不是试图将这种高度个性化、动态化的医疗行为产品化。
简单来说，对于符合三个明确的医疗服务，我们对其进行产品化的“化”，是一系列有序的动作：
囿于篇幅，这里我们就不展开详述了。
理想中的医疗产品经理对下面4件事情负责：
很容易看出来，这4种不同的职责恰好也就对应了攻防转换的价值所在。其中促销是一个容易被忽视和轻视的事情，“不就是打折然后发个微信（十年前是发短信）推文嘛”——绝对不是这样，促销是一门大学问，打折、捆绑、买赠、兑奖、积分凡此种种。不仅花样很多，更重要的是背后的深层次的思考，是“为什么”。
另外，目前的医疗机构基本上也没有人比较认真、成体系地做竞品追踪。这样会失去潜在市场机会，非常可惜。
我认为一名出色的医疗产品经理应该在下面四个方面都具备一定的能力，没有特别的短板：
特别就同理心和表达能力简单阐述。同理心，即换位思考，用现在更流行的话说，是场景意识。能否准确地设置出用户的场景，体会到用户的感受，会直接决定产品带给客户的体验，进而一系列结果：定价、毛利、传播ROI、客户口碑，口碑带来的新客增长，等等不一而足。
而表达能力则是决定这个产品经理是否能实现“串联三条线”价值的决定性因素。医院是一个观念高度保守，流程高度复杂的行业，很多人雄心勃勃地进来，最终死在“搞不定那些人”上。因此，优秀的表达能力，包括书面和口头表达能力，是遴选医疗产品经理必须考量的重要因素之一。
我不是危言耸听：产品经理几乎要和医院里所有部门打交道。
常见的如下面这些：
医疗、护理和财务对于产品工作的重要性相信无需赘言。后面几个呢？
试想，你精心设计的卖点，是你自己拉着每一个潜在客户去吆喝么？当然不是，客服要帮你介绍，新媒体要帮你写文章、画插图。他们是不是要吃透你的意思？如果涉及填表、兑奖，要不要和客服商量流程？遇到产品的技术较为复杂，需要不需要策划一些活动帮助客户直观理解其价值？最后，当潜在用户感兴趣而打电话给呼叫中心的时候，接线员是否已经被你提前武装好，能充分回答各种提问了？
至于独立的数据部门，是我的一个强力推荐。传统上由财务和病案提供的数据，更多聚焦于“既往”而很少关注“开来”。如果不由同时懂得医疗业务和有商业经验的数据部门处理，很难直接推动运营的改善和提升。
很多人问我，产品经理属于市场营销部门吗？难道不是属于运营部，或者医疗企划之类的部门吗？
别忘了，市场营销最基本的范式——4P中第一个P就是产品，Product。只要你所在的医疗机构设置有相对完整的市场部门，就应该在其中设置产品经理岗位。或者反过来说，如果你准备建制产品经理岗位，从一开始就应该将其设置在市场部内，并从头开始考虑这个职位所需要的上下游角色和他们之间的衔接。
如前面所分析的，产品经理的后端，一定要有提供数据支持的部门，前端一定要有专业的传播团队，这样才能实现产品的潜力。横向上，产品经理和他的上级，一定要高度重视与客户服务团队的紧密合作。
老实说，现在几乎没有多少现成的、成熟的医疗产品经理。因为营利性医疗行业太新了，而产品经理这个岗位在这个行业又是近一两年刚刚兴起的角色。
从招聘角度来说，我建议不要拘泥于候选人必须有医疗背景。我就没念过医学院，十一年前入行，就这样摸着石头过河，也多多少少做过一些还不错的产品，有过几个“爆款”的心得。相对来说，我更看重候选人是否有完整的商业思考逻辑能力。
换一个角度来说，还可以在医院内部挖掘有潜力的人才，从临床部门转型为产品经理。最关键的环节在于这个人是否有足够强烈的兴趣。世上无难事只怕有心人，有医学院背景的人才，只要对产品工作发自内心感兴趣，就有很大的转型成功概率。
文章来源：人人都是产品经理 作者：易亮
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
「空间陈列法」是说先构建一个空间，然后将主体元素用合适的形式陈列出来。
这是随着手机兴起而真正流行起来的一招，因为PC时代都是宽大的横屏设计，适合展现视野开阔的大场面，像大漠、海边等等，而「空间陈列」作为小场景，在PC端就显得不大气，因此使用较少；而手机端却刚好相反，瘦长竖屏就适合表现长焦特写的小场景，像微距下的花鸟鱼虫等等，这时「空间陈列」就用的恰到好处。
如图所示，同样的产品展示图，在PC端就显得单薄，版面空缺，整体不饱满；而在手机端则用的刚刚好，确实这种长焦特写、微距放大的陈列小场景就是手机屏的最爱，所以在手机时代，空间陈列图才会呈现井喷式增长。
其实合成、三维和摄影都可以实现「空间陈列」，但本书还是以合成为主，而合成的难点就在于如何将产品和空间进行自然融合，不能有违和感。
若想合的天衣无缝，第一步就是要做到「透视准确」，而透视作为构图中的重要知识点，可以说是无处不在，在前面的章节里也多次提及。我们只有掌握透视的变化规律，才能准确表现出元素的空间关系，如果透视不对，那空间将会失真，下面就来详细讲讲这个理性知识点——透视。
日常生活中，当我们看周围事物时，会有远近、高低、长短、宽窄等不同，这是由于距离、方位等差异在视觉中呈现的不同反映，这种现象就是透视。透视学的出现可以帮我们非常科学的表现各种空间感和立体感，它广泛用于绘画、建筑、环艺、设计等诸多领域，而常见的透视共3类：空气透视、散点透视和焦点透视，这3类的侧重点各有不同。
空气透视又称「色彩透视」，由于空气介质的存在（雨、雪、雾、烟等），使人们看到近处景物比远处的轮廓更清晰、色彩更饱满的视觉现象，例如下方海报中的「烟雨蒙蒙」，这种近实远虚感就是典型的空气透视，随着镜头拉远，山川也变得越来越模糊。
散点透视则是中国画特有的一种透视类型，例如下方的《清明上河图》就是这类透视的代表作，在这五米长的画卷中，很难找出画家的具体观察位置，好似在移动中作画，每到一处画一部分，最后拼接起来，这种视点不断移动的画法就是散点透视，散点透视适合表现景色的波澜壮阔，重在写意，体现一种气势和意境。
而焦点透视才是本文重点，它是透视学中的核心理论，也是西方绘画所遵循的透视原则，最早研究透视就是从这里开始，如果散点透视是「写意」，那焦点透视则「写实」，一切都以客观还原为准。
例如名画《最后的晚餐》，所有视线都汇聚一点（称为灭点），营造出一种立体空间感，这些就像自己身处画面中央所看到的逼真景象。
而我们在设计中常说的透视也都指「焦点透视」，这是我们需要掌握的重中之重。记得高中学习素描时，老师就说画静物要「近大远小」，其实就是对焦点透视最为形象的描述，例如草地上的奶牛，离我们越近就越大，越远则越小，正是这种近大远小的透视变化才使场景有了空间和层次。
在介绍焦点透视前，我们先说说透视中一个很重要的影响因素——观察视角。视角即指人眼（称为视点）在观察事物时视线之间所形成的角度。
如下图所示，其实就是人眼观看角度的变化，常见有3种：当我们平视前方时就是「平视视角」；仰头看时则是「仰视视角」；低头看时便是「俯视视角」。
其中平视时人眼和物体形成的假想连线称为「水平视线」，这是判断视角高低的参考线。
当我们将产品放入空间时，就要根据陈列形式选择合适视角，从下方的示意图中能看到，三种视角给人的感受都不相同：
而上图的仰视和俯视都属于小视角，即产品视线和水平视线的夹角较小，这是设计中的常见视角，大概就是把头微微抬起或低下时看到的场景，这时画面最自然也最舒服。反之若视角过大，即头抬的很高或压的很低时，这时产品的形变就很夸张，显得刻意、不舒服。
说完3种视角，现在正式讲解焦点透视，一般根据物体灭点的数量不同，焦点透视又分3种：平行透视（一点透视）、成角透视（两点透视）和斜角透视（三点透视），它们都有各自的透视效果和适用范围，但若铺开讲会很复杂，因此下面就结合「空间陈列」进行介绍。
用立方体简单说明，就是有一面与画面平行，这时物体的厚度边线若向内延伸，最后都会汇聚到1个点上，因此又称「一点透视」。这是最简单也最易掌握的一种透视形式，其中汇聚点称为「灭点」，而灭点所在的那条线则是「视平线」，即与人眼等高的一条水平线。
再来看看平行透视在生活中的场景呈现，如图所示，将各种景物进行前后连线并延伸，最后都是汇到一点才消失。平行透视适合表现场景纵深，给人一种正式感和平和感。
电商中的产品展示也一样，例如下方示意图中，不管哪种视角，产品和立方体都是正对观众，让人觉得摆放角度正正好。
总体来说平行透视只有1个灭点，变化并不多，视觉表现单一，没有太多的空间变化，基本就是从正面来表现整个场景，因此上手简单，只要确保前后连线都汇聚一点即可，这样画面各元素也会显得整齐。但有时这种正视会让画面缺少层次感，显得很平，此时可尝试俯视视角或者强化背景的空间纵深。
下面展示平行透视在3种视角下的应用案例，注意观察不同视角下的产品呈现和透视变化，虽然微妙，但每种视角确实给人不一样的视觉感受。
平行平视
当画面为平行透视和平视视角时，这时的观察位置很正。如下图所示，空间和产品都显得有些平整，虽然场景的立体感较弱，但视觉舒服协调，表现起来也相对简单。注意平视的「视平线」基本位于主体元素的中心处，即是说人眼此时正对前方物体的中心，这样才会有平视效果。
平行仰视
当画面为仰视时，一般视角都不会太大，微微仰视即可，这样视觉才舒服。如下图所示，其实和平视比起来，小角度仰视的透视变化并不明显，没有夸张形变，但依然能体现空间和产品的高大。此时「视平线」位于主体中心靠下的位置，这时人眼明显是从下往上看。
平行俯视
如果觉得画面的层次感和立体感不够，那就尝试下俯视视角，如下图所示，由于俯视时我们能同时看到物体的顶面和正面，这样就能表现物体的厚度，立体感也明显增强。而画面的「视平线」则位于主体中心靠上的位置，这时人眼就是从上往下看，但同样属于小角度俯视。
平行透视的俯视还有一种特殊情形——正俯视，即视角为90°的俯视，这时我们是从物体的正上方低头往下看，如下图所示，当产品平放桌面时，正俯视能清晰看到产品的全貌。
在空间陈列中这是一种常见视角，上手简单，展现清晰。例如下方案例中，俯视下的产品摆放非常灵活，根据构图需求可以工整 ① 也可以随意 ② ，并且产品多以正面展现为主，整体直观、舒服。
以上都是产品的陈列案例，其实正俯视有时也会用于场景呈现中，如下图所示，视点位于场景的正上方，有点类似无人机的俯瞰拍摄，这种看似「刁钻」的视角能给画面带来独特的戏剧效果，令人印象深刻。
空间平行透视
除了3种视角，这里还要介绍一种平行透视的常见形式——空间平行透视，这种形式即画面的正前方有个类似方盒的纵深空间，而人物或产品就放置在空间里。
如图所示，该形式也有视角的3种变化，但为了确保视觉的自然舒服，仰视和俯视也都是小角度的上下摆动，所以产品的透视变化并不明显，场景呈现也没有很夸张。
为何要将该形式单独列出？因为它非常适合手机端的竖屏构图。
手机不像PC，无法通过宽屏来表现视野开阔的大场面，手机屏更适合长焦特写的小场景，但这样有时就会显得左右拥挤不透气，这时「空间平行透视」就刚好取长补短，通过「深度」刻画将狭窄空间的纵深感体现出来，最终使观者视线在前后维度上有了延伸和舒展。
该形式正是利用平行透视的纵深性，才缓解了手机屏的拥挤感。下面分视角列举案例，要注意不管平视、仰视还是俯视，空间里的所有元素最后都要汇聚一点，这样透视才合理，纵深效果也最好。
3种视角中，空间平视最常见，因为这种方方正正的空间展示最适合手机的竖屏构图，看着最舒服，上手也简单，易于搭建。在平视下，由于没有视角的高低变化，空间基本位于人眼的正前方，无任何偏移，摆放角度非常正，构图给人一种稳定感，元素也没有夸张形变，组合方便，真实自然。
对于「空间平行透视」，「深度」刻画很关键，我们要根据版面构图选择合适的深浅。例如下方案例中：① ② 的深度浅，空间相对封闭，适合展现小空间，给人温馨感和趣味性；而 ③ 的深度深，空间开阔，适合展现大空间，这样能让视线更舒展，画面更透气。
在仰视下，我们是抬头向上看，这时空间显得高大，给人强烈的气势感。如下图所示，视平线贴近地面，像是我们蹲着向上看，这种仰望视角，建筑和人物都很高大，再加上强烈的纵深感，虽然空间左右依然狭窄，但上下和前后维度却变的非常开阔，画面通透。
空间仰视能渲染氛围，提升场景的戏剧效果，突出视觉冲击力，但要注意仰视视角不能太大，否则夸张的仰视效果反而给人一种压抑感。
在俯视下，视平线处于空间中心的上方，类似我们站在高处往下看，如下图所示，这时空间显得立体，远近的各类元素也能得到清晰展现，层次分明。
俯视适合展现空间的全局观，也让各物体有着丰富的体积感。除非有特殊的构图需求，不然和仰视一样，俯视视角不能过大，否则俯视就变成俯瞰，会产生遥远的距离感，空间也压缩的厉害，进而导致形变和失真。
还是拿立方体举例，就是物体与画面形成一定夹角，这时物体的所有边线分别向各自方向进行延伸，最后会在视平线上形成一左一右2个灭点，因此又称「两点透视」。这类透视最接近我们日常的观察角度，即是说大部分时候，我们看到的物体都属于成角透视。
虽然成角透视只比平行透视多了1个灭点，但2个灭点的位置却很灵活，这样空间的透视变化也更加丰富。
例如下方是我们经常看到的景象，虽然都是典型的成角透视，但 ① 是2个灭点都在画面外，这时建筑给人的感觉结构平稳，立体感强，侧重写实；而 ② 则是1个灭点在画面内，另1个在画面外，这时空间右侧的透视形变较大，产生纵深感，整个场景更有张力和冲击。
其实还有第3种情形是2个灭点都在画面内，但由于空间会产生夸张形变和失真，因此总体少见，不再举例说明。
再看看成角透视下的产品展示效果，如下图所示，不同于单面展示为主的平行透视，成角透视则以展示物体的两面为主，这样立体感更强，构图也更稳定。注意在成角透视中，画面所有的竖向边线都是平行，不会产生灭点。
相比平行透视，成角透视在表现上更复杂一些，一般都以2灭点在画面外的情形为主，这时透视最舒服。注意要想画面只产生2个灭点，那当中的所有元素都需排列整齐，这也是成角透视的常用做法，此时画面会显得整齐统一。下面列举3种视角下的电商案例，其中以仰视和俯视最为常见。
平视下的成角透视相对少见，因为使用成角透视就是为了凸显物体的立体感，但平视由于视角很正，恰恰就会显得立体感较弱，这时2种效果会有矛盾，影响场景的协调性。例如下方的2个案例中，产品看着就有些平整，和方形盒子以及立方体稍显冲突，但整体视觉真实平和，没有形变。
仰视下的成角透视就显得刚刚好，如下图所示，所有元素均用2个立面展示，加上透视形变，这时空间的立体感强，产品和立方体也都有明显的体积感，视觉平稳、饱满，而且还能体现产品形象的高大，凸显价值感。
注意2个案例中，视平线上都只有2个灭点，这是因为产品和立方体的排列都很整齐，反之若无序排列，就会产生多个灭点，这样画面会显凌乱，视觉不舒服，所以在表现成角透视时，尽量确保所有元素都能整齐排列。
在成角透视中，俯视视角最常见。因为该视角下的物体可以展现3个面，能进一步强化元素的立体感和方位感，如图所示，物体的空间关系明显，层次分明，构图也平稳。
一般成角俯视适合小场景陈列（若是大场景则垂直方向会发生严重形变，这就是后面要讲的「斜角透视」），刚好这是手机屏的擅长，小空间配上小角度俯视会给人一种亲切感，类似长焦镜头的特写画面，很好的拉近了观者的心理距离，因此属于手机端的常用构图。
空间成角透视
成角透视的优势在于画面立体、稳定和写实，这些优势刚好适合空间的立体呈现，如下图所示，成角透视即可用于室内塑造 ① 也可用于外形搭建 ② ，类似我们站在空间侧面看整体，此时空间立体、饱满，结构有张力。
但由于成角透视都是在画面两端形成灭点，所以该透视下的空间更适合横构图，但手机屏却是竖构图，对于横向拥挤的竖长屏，成角透视就会有些施展不开，左右狭窄，无法像横版那样开阔的展现空间，也没有平行透视那样看着规整，因此使用较少。
物体与画面存在一定夹角，并且在2点透视的基础上，再加入了高度变化，这样垂直方向的连线会向上或者向下汇聚，最终画面形成3个灭点，又称「三点透视」。相比成角透视，斜角透视其实就是让本没有交集的竖线有了交集，这样垂直方向就有了强烈的汇聚感。
斜角透视的形变夸张，常用于大型物体的仰视或高处俯瞰，类似广角拍摄。
如下图所示，该透视能表现出建筑或空间的宏大感，并且越宏大透视就越强烈。这时画面的夸张构图会显得观者渺小，给人一种压迫感，也让场景有着极强冲击力，同时带来了更加刺激的视觉感受。
其实只要观者在场景中显得很小，这时看到的画面就会产生斜角透视，例如当我们仰望高楼时，相对高楼而言，渺小的我们就会看到斜角透视。
但如果产品展示采用斜角透视时，就会有一种强烈的不真实感，因为相对产品来说，我们并不渺小，所以日常是不会看到这样的场景，这种场景更像是「昆虫视角」，如图所示，斜角透视下，虽然画面不真实，但会有种特别的戏剧效果。
另外斜角透视没有平视视角，因为平视物体的竖向边线依然平行，不会在垂直方向产生第3个灭点，因此仍属于成角透视。总之只有在大角度仰视或俯视大型物体时，才会看到斜角透视。
这种形变强烈的夸张透视虽然生活中相对少见，但电商中用的还真不少。还记得我们在第2章讲创意方法时提过的「独特视角」吗？其中一个方向就是使用斜角透视。
这种透视可以体现物体的巨大（仰视）或者场景的宏大（俯视），正是这样一种不真实也不自然的视觉感受，反倒给人一种强烈的气势和冲击，画面极具张力的构图往往能脱颖而出，并在第一时间抓人眼球，吸引注意，所以成角透视特别适合大促主题的场景搭建和氛围营造，下面分视角举例。
斜角仰视
视能让物体显得高大，而斜角仰视则让物体显得「巨大」。如图所示，2个案例中的产品都十分「巨大」，通过这样一种「刁钻」视角和夸张手法渲染出了产品气势，使产品显得分量十足，同时也提升了视觉冲击力，整个场景都变的大气。其中 ① 由于版面有限，有个灭点没有标示出来。
斜角俯视
当我们站在一个很高的地方俯瞰周围，或者用无人机在高空航拍，这时看到的景象就是斜角俯视。如图所示，尽管竖构图并不适合展现辽阔的大场面，但在斜角俯视的帮助下，2个案例依然体现了场景的宏大，视觉冲击强，这种居高临下感使人视野开阔。
平行斜角透视
斜角透视中还有一种特殊情形——平行斜角透视，就是当空间或产品的一面与画面平行时，此时不管透视多强烈，画面也只有2个灭点。
如图所示，当立方体的一面正对视点时，侧面便从2个主立面减为了1个，这时除了垂直方向的1个灭点外，原本视平线上的2个也就成了1个，虽然只剩2灭点，但本质仍属于透视强烈的斜角透视。
既然是与画面平行，那和平行透视有何区别？
下面看张空间对比图，能看到2者的形变差异还是相当大：左图为平行透视，像是我们在看一个小方盒，亲切、自然、真实；而右图则是平行斜角透视，更像是我们在仰望一个巨大空间的入口，充满戏剧性，并有压迫感。
其实对于手机端，「平行斜角透视」才是斜角透视中的常用形式，因为它的摆放角度很正，这种正面观察很适合手机端的竖屏构图，而且前后的纵深刻画也能缓解版面的左右拥挤，另外画面纵向的汇聚感还能迅速吸引注意，给人一种巨大冲击力和强烈氛围感，其中仰视比俯视更加常见。
平行斜角仰视
近几年这类透视越来越多见，因为它既适合竖构图，也能提升画面的形式感和表现力，非常利于促销主题的氛围打造。
如图所示，整个画面就像是我们站在宏大场景的正中央仰望时看到的景象，各元素摆放很正，虽有压迫感，但空间和产品都显得非常高大，张力十足，能让用户牢牢聚焦，同时也产生了强烈冲击力，更易在用户脑海中形成记忆。
平行斜角俯视
在这类透视下我们会感觉自己拥有高高在上的「上帝视角」，元素摆放同样很正，视野辽阔，场景宏大。但过大的俯视视角会对场景进行一定压缩，再加上俯瞰产生的遥远距离感，这样就显得元素有些「小气」，无法体现仰视下的高大，因此画面的刺激感没那么强烈，总体相对少见。
以上便是焦点透视的3种类型，我们再来回顾下各自的使用情形，如下图所示，这是一张3种透视的转换示意图，都是仰视视角，旁边小人则是观察者的大小示意：
希望通过这张示意图能帮大家更好理解什么时候该用哪种透视，总之小场景搭建一般以「平行透视」和「成角透视」为主，而恢弘的大场景则以「斜角透视」为主。
当然现实里的透视远不会这么单一，根据物体不同的摆放位置以及不同的观测距离，很多时候同一画面也会存在多种透视，例如平行透视和成角透视就经常组合出现。
电商设计也一样，例如下方案例中，整个空间是平行透视，而里面的盒子则是成角透视，这时视平线上会有3个灭点，其实若产品的摆放再凌乱些，还会出现更多灭点，但这种无序组合会让空间塑造变的复杂，看着也不规整，因此并不推荐。
但要注意不管画面的透视多复杂，当中的视平线却只能有1条，并且无论水平方向有多少个灭点，最后也都会落在视平线上。
除了以上3种透视外，其实还有4点透视（超广角透视）、5点透视（鱼眼透视）等等，但都过于复杂，用的也很少，这里就不做展开。对于电商里的「空间陈列」，3种透视已够用，它是我们塑造空间的基础，如果一开始的透视错了，即便配色、光影做的再出彩那也无用。
总有人说透视难掌握，其实只要我们在生活中多观察、多留意身边物体的透视变化和规律，及时总结，那这种理性还原就不难做到。当然设计终归还是理性与感性的双重表达，所以透视虽要遵循，但切忌生搬硬套，视觉协调即可。
讲完了焦点透视，我们知道了空间塑造的基本原则，下面就来说说都有哪些陈列场景。
相对PC来说，手机端受屏幕所限，陈列场景其实没那么复杂，核心是要先构建一个空间，然后让产品以合适的视角及透视在空间里呈现出来，而这个空间场景则要和主题氛围、产品气质都高度匹配。
一般来说，手机端常用的陈列场景有4类：盒子陈列、台面陈列、自然陈列以及舞台陈列，选择哪类则要看哪个场景对产品的烘托效果最好。
在介绍每个场景前，我先说说关于产品组合的2原则，因为很多时候在空间摆放的产品数量较多，这时它们的组合形式就变的尤其重要，稍不注意就会显得画面杂乱无章，不够协调，而且凌乱的摆放也会降低产品的品质感，缺少吸引力。关于组合原则，核心有2点：大小合理以及三角构图。
大小合理
如果将多个产品摆一起，则要确保它们之间的相对大小符合现实中的真实差异，现实中尺寸大的产品就要相对大些，而尺寸小的产品就要相对小一点，这样才会真实并经得起推敲。
而有些设计师在组合产品时，也不管大小的真实差异，放进版面后就很随意的放大或缩小，最后出来的组合要不就大小一样，要不就比例失真，这些都会给用户一种强烈的不协调感和不真实感。
下面再看一组对比图，明显大小一样的左图会有不适感，也缺少层次；而大小合理的右图则更有美感也更舒服。
其实大小合理的最终目的是希望整体结构错落有致，就像右图一样，这种有高有低的组合才能体现韵律感和结构美。所以如果可以选择，那我们就选择一些尺寸差异较大的产品，尽量避免出现大小差不多的情况。
当然如果必须陈列大小一样的产品，那也可以通过透视或者辅助元素来改善，例如空间里的近大远小、立方体加高都能改变高度一样的情形。
三角构图
当我们选好不同大小的产品后，就要注意它们的组合形式，千万不能乱堆一气，不同的摆放会形成不同结构，而每种结构又会给人不同感受。我们在「图形分割」中讲过「正三角」具有很强的稳定性，因此当产品采用正三角构图时，会让人觉得版面平稳、视觉舒服。
如图所示，所谓三角构图，其实就是将尺寸大的产品放中间，而尺寸小的产品放两边，这样不但构图稳定，而且画面也有节奏和变化。可以说「三角构图」就是空间陈列里最常用的构图方式，而本节展示的所有案例中，大部分也都是三角构图。
明确了产品的组合原则，知道了如何陈列才舒服，下面就正式讲讲空间陈列的4类场景。
盒子陈列
「盒子陈列」就是在盒子里面放产品，而盒子多以礼盒为主，使用场景和主题相对单一，基本用于送礼之意的专题页。创意虽然普通，但却不易出错，是种相对安全的表现方式。当然若能在盒里加些小心思，画面也会很出彩，像我之前看过一个新年Banner，就是礼盒里装着一个大家庭在吃年夜饭的温馨场景，这样的新组合便让人眼前一亮。
另外若能提升礼盒刻画的精致度，那画面也会有不错的设计感。而盒子外形也不只有方形，常用的还有圆形和异形。观察视角则以小角度俯视居多，因为这个视角最接近我们日常看礼盒的真实情形，盒内产品在俯视下能看的一清二楚，展现也立体。
盒子陈列的难点在于当盒内要摆放很多产品时，如何能让产品真实、自然的呈现，这需要我们既注意摆放的合理性，也能准确表现透视，还要刻画出产品的明暗变化，总之只有把握好产品的空间感、立体感以及光影感，画面才会舒服协调。
方形盒是最常用的盒子类型，毕竟也是生活中最常用的礼盒外形，结构感强而且易表现。如下图所示，礼盒都是成角透视，且左右灭点都在画面之外，这样结构最稳定，立体感也强。注意盒里的产品呈现，特别是俯视视角下，产品越多越要注意它们是否协调统一，透视、光影等细节一个都不能少，把控不到位就会显得凌乱，画面别扭。
圆形盒比较少见，因为和立方体比起来，圆柱体的透视没那么强烈，结构感偏弱，但圆润的外形能使画面变的柔和，给人一种亲和力和温馨感，如图所示，由于圆形盒没有明显块面，所以不管透视还是光影，刻画起来都相对简单。
异形盒是指外形为不规则形状的盒子，总体也很少见，但易出彩。形状用的好便能打破「盒子陈列」的常规感，使画面变的新颖有创意。
例如下方案例中，不管是心形、猫头轮廓还是圣诞树，都能成为画面焦点并引人注意。另外盒子呈现均用了「正俯视」视角，其实除了小角度俯视外，这种视角也很常见，因为该视角下的产品陈列清晰完整，盒子外形也能直观显示，的展现了其外形的特别之处。
台面陈列
在空间陈列的4类场景中，「台面陈列」用的最多，适用范围也最广，可以说电商中的大部分主题和产品都能使用，算是一种真正白搭的表现方式。
「台面陈列」就是在空间里搭建一个「台面」，然后在上面放置相关产品。由于该手法还是以放大特写的小场景为主，元素形变不能太大，因此画面常用平行透视和成角透视，视角则很灵活，跟着构图走，3种（平视、俯视、仰视）都有。「台面陈列」上手简单，场景多变，其中的关键元素——台面需要根据主题、场景进行灵活变化，常见有2类：桌面和几何体。
桌面很好理解，就是桌子顶部的陈列面，所有产品都放置其上。由于桌子是家里常见家具之一，因此桌面陈列往往能传递一种「家」的温暖和温馨。
可能有人觉得「桌面」形式有些单一，其实远没那么简单，我们不要固化思维，要能灵活变化桌子的样式和装饰，例如方桌还是圆桌？木桌还是大理石桌？光面还是铺桌布？这些都是可变量，再加上视角和周围环境的变化，总之形式可以很丰富。
如图所示，桌面陈列尤其适合各类美食的组合呈现，这时整个场景贴近生活，颇有带入感。
就是将各种几何形体作为陈列产品的台面，几何体相对抽象，表现场景更多元，因此比具象「桌面」更加常用。
如图所示，几何体一般都是组合出现，特别适合多产品陈列，简约大方，能烘托出产品的品质感。同时通过高高低低的大小排列也能表现出画面的结构美以及层次感，总之是一种 「上手简单、易出效果」的表现方式。
常用几何体有「立方体」和「圆柱体」，它们适合陈列，高度调节方便，使用灵活。
如下图所示，整体表现并不复杂，就是将各种产品放在几何体上。但作为画面的核心元素，这时几何体的形态、排列、视角和透视就变的非常重要，我们要根据创意需求和产品气质选择最合适的展现方式，而这些展现本身就有不错的形式感。
几何体陈列既能营造空间关系和简约气质，也能让用户聚焦产品本身，因为它的外形简单，不抢产品，不像一些复杂元素或场景，虽然视觉丰富但最后却让产品淹没其中，这样就本末倒置。
自然陈列
「自然陈列」需要先创建一个合适的自然环境，然后再将产品以合适方式融入其中。相对其他场景，自然环境显然复杂一些，呈现手法常以「合成」和「插画」为主。因为产品都是实物拍摄，为了风格统一，自然环境会偏向写实风格，这样2者结合才协调。
从下方案例能看到，「自然陈列」常用于季节感受或者产地溯源等主题，画面通过「自然场景」营造出天然健康的绿色氛围。而场景中的元素繁多，呈现复杂，这就需要我们具备优秀的整合能力。
对于「自然」塑造，视角以平视和小角度俯视居多，但画面由于没有太多的几何型物体，所以透视没那么严谨，核心是注意近、中、远景的层次区分，还有光影的合理添加。如果这些把控不到位，就很可能出现场景杂乱、缺少层次、没有带入感的粗糙画面，最终沦为各种素材的乱堆一气。
以上列举的都是以花草树木为主的自然环境，确实绿色场景在「自然陈列」中用的也是最多，但除了绿色场景外，有时也会用到其他环境。如下图所示，像海底 ① 、沙滩 ② 、海面 ③ 、冰山 ④ 也是适合陈列的自然场景，特别是夏季主题会经常用到。
舞台陈列
最后一类「舞台陈列」常用于大促主题的气氛营造，这类场景不挑类目，任何产品放在「舞台」上，灯光一打，色彩再斑斓些，都能营造出热闹的促销氛围。
如图所示，舞台外形以圆形居多，因为圆形的透视感较弱，构图灵活，而且也符合大家对舞台的第一印象。舞台视角则很灵活，3种均很常见，核心是和产品视角保持一致。
关于「舞台」塑造，还有2处需要注意的地方：
舞台外形除了最常用的「圆形」外，还有半圆形、方形和六边形等等；舞台造型也可以很丰富，并不局限于常规的表演舞台，各种造型都可尝试，例如上方左四图就是现代感十足的三维舞台，总之我们要根据创意和风格塑造相匹配的陈列舞台。
另外就是灯光运用，可以说这是「舞台陈列」和其他场景的最大区别，但灯光也不是越多越好，太多反而显得眼花缭乱，其实能渲染出绚烂气氛即可。而有光就有影，在灯光照射下，产品一定要有准确的光影呼应，这样才不会显得突兀。例如上方案例中，仔细观察灯光下的产品呈现，能看到产品表面都产生了被灯光照射后的色彩、明暗等变化，这些细节刻画才让画面更真实，融合更自然。
本次案例会用胶原蛋白口服液作主体元素，然后用这4类场景（盒子、台面、自然、舞台）来设计4张不同视角、不同风格的Banner，让大家看看在不同场景下，如何将产品融入其中。先展示案例会用到的3种产品视角， 下方案例会根据不同的场景视角选择对应素材。
「空间陈列法」的内容量挺大，主要分成了「焦点透视」和「陈列场景」2大部分来介绍，其中焦点透视是立体「空间」的塑造基础；而陈列场景则是产品「陈列」的具体环境。
常用场景有4类：盒子陈列、台面陈列、自然陈列和舞台陈列，每种陈列都有各自适用的主题和氛围：「盒子」常用于温馨的送礼主题；「台面」则能根据不同主题灵活应变，属于百搭场景；而「自然」则适合季节或者溯源主题，体现天然清新感；最后的「舞台」则用于氛围浓烈的大促主题。不管哪种场景，都要确保产品和空间的视角、透视相一致，这样场景才会真实协调。另外多产品陈列时，还要注意它们之间的大小比例以及摆放结构，其中三角结构最常用。总之在手机时代，「空间陈列」是一种真正适合小屏竖构图的表现方式。
文章来源：优设 作者：贤辈
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在多方合作的项目中，我们需要规划项目的合理落地方案，并在执行过程中和各方有效沟通。结合近期羚珑商家合作测试项目的实践经历，聊聊我在项目中的心得体会。
我们想了解京东首焦banner中，设计因素对点击效果的影响情况。做这件事最大的限制在于投放数据会受多种因素影响，不仅是一个设计因素的选择，还有比如人群、出价、品牌、类目等因素的不同，都能影响到最终的投放结果。因此，从总体样本中取样进行分析的意义不大。为了解决上述问题，我们招募了一些能控制其他因素的品牌广告主，与有能力支持投放的测试投放系统合作，共同完成A/B测试。
不难发现这个需求会涉及到多个项目角色，意味着将有复杂的推进流程，需要提前拆解与规划，才能保证项目进度可控。
△ 测试项目流程与分工
我们可以分三步来进行：
1. 找到项目关键步骤
关键步骤是将一个项目的推进拆解成多个阶段，找到关键步骤，也就知道了每个阶段的主要任务，可以进一步分工来推进项目。
如何找到关键步骤？我们可以从项目目标中提取。测试项目的目标是找到设计因素与投放点击效果的影响关系。这个目标里提取重要的关键词为：设计因素、投放点击效果、影响关系。面对这些关键词我们会有疑问产生如「测试设计因素是什么？有哪些？」、「如何投放」、「如何判断影响关系」，再进行串联梳理，得到完整步骤流程。
2. 明确角色任务与产出
每个阶段的主要任务，可以拆解分工给项目角色，项目角色也就有了各自的任务，角色产出物则是任务执行的结果，将直接推动项目进入下一环节。所以为了顺利推进项目，我们需要根据项目实际情况评估角色任务分工是否合理，产出是否满足项目要求。
比如在「设计测试图片」这个步骤中，有两个分工方案，让广告主或我们自己设计图片。我们从项目时长、沟通成本、潜在风险等维度进行评估，判断广告主把控变量不严谨会导致测试数据无效，且外部合作沟通成本较高时间不够，所以最后将设计图片的任务分给了内部。
3. 预判项目风险
对流程规划得越详细，在后续合作过程中越容易把控项目的节奏，项目风险越低。
再如「设计测试图片」这个关键步骤，详细展开执行流程会发现涉及到交互设计师、两方视觉设计师、广告主四个角色。对于项目执行角色，产出物的质量及按时交付尤为重要，所以重点把控输出准确性与完成时间。对于项目决策角色，也就是决策最终投放哪些图片的广告主，沟通配合尤为重要。所以基于规避风险也对项目流程进行了优化，前置在项目之初，要求广告主提前准备交付内容，规定交付时间及格式，以及充分沟通说明图片设计产出之后不能进行较大改动。
1. 保证数据有效
测试结论来源于测试数据，我们首先应该保证回收数据的有效性。测试项目的关键指标是点击率，即点击量与曝光量的比值。当图片本身曝光量低时，我们认为随着曝光量增加，点击率比值波动范围仍然较大，数据还未稳定在某个区间段，会影响结论准确性，判定为无效数据。发现类似这种问题，我们会和广告主商量继续投放，延长测试时间来增加曝光。
2. 充分测试
要想得到可靠普适的结论，需要对比多组样本的测试结果。对于某个设计因素，我们先进行了单一广告主的投放数据对比，可以找到投放效果最优和最差的设计水平。然后又将多个广告主的结果进行对比，会发现存在不一致的情况，验证了单组样本结论不能作为类目结论输出。如果多个广告主结果一致，或呈现某一趋势，则结论在该类目可以认为较为普适。
3. 差异分析
对于多组样本结果不一致的情况，可以从组间因素差异着手分析。
△ 背景设计因素测试结果
上图是两个广告主分别测试背景设计因素得到的结果。第一组的投放结果为实景设计效果更好，第二组则为普通平面设计效果更好。产生这样差异的原因是什么呢？我们先找出组间可能导致这一结果的因素，分别是颜色和产品。从颜色上看，是否平面+黑色效果更好呢？我们看了其他广告主结果，否定了这一猜想。再从产品图来看，两个产品的识别度是不同的，我们将其他广告主该因素测试图按产品是否容易识别分组，最终得出两组不同的结论：当产品图易识别时，背景设计对效果影响不大；当产品图不易识别时，实景图效果更好。这也就解释了上图结果不一致的原因。
回顾整个项目，我个人认为项目中最重要的工作是沟通。下面我来分别谈谈内外部沟通的经验。
与外部团队、广告主合作推进项目，需要及时有效的沟通，什么是有效的沟通呢？
1. 围绕对方利益谈配合
广告主只看转化结果，我们如果只谈设计不谈转化，广告主是不会想要出钱参与项目的，那么项目也将停滞不前。所以在合作前，我们做了项目及团队包装，用真实的案例让广告主快速理解参与项目所能带来的价值，并用团队以往的作品、能力展示让广告主了解与我们合作的优势。广告主越认同项目价值及我们的专业度，配合度就会越高。
△ 招募PPT中的真实案例介绍
2. 围绕对方目标来「推销」方案
在推进项目这一点上，找到目标一致的点更容易促成各方意见达成一致。
我们合作的广告主很多会选择外包banner设计，所以广告主们习惯了做传说中的「甲方爸爸」，难免会对视觉设计方案有各种主观意见。比如，某电视广告主不喜欢红色图片设计，想要蓝色。对于这样的分歧，我个人喜欢用引导式的沟通方法。首先，不要急于表达自己或否定对方的意见，可以以疑问句式来猜测对方的目的。「喜欢蓝色是希望用沉稳的颜色来表现产品的高级感吗？」，如果猜测正确，对方会因自己的需求被理解而更容易沟通，这时再继续阐述用红色如何表达高级感；如果猜测不正确，对方会顺势说出原因，我们再围绕对方的目标进一步沟通。如果对方毫无理由「不喜欢这个设计」，而设计师并不觉得有设计问题，那么我们需要停止专业角度的沟通，从设计是否满足当前阶段项目需求的角度来沟通，方案则更容易被接受。
内部合作分交互、视觉、用研三种不同的岗位角色，在项目中都发挥着自己重要的作用。
交互擅长统筹与拆解问题，团队的内部沟通能产生多种解题思路，对项目的推进至关重要；在遇到如需要统计学分析、样本设置等专业问题时，用研可以提供更专业的分析方法与帮助，为我们实现科学分析提供有力支持；视觉设计师对banner设计有丰富的经验，可以在各个环节中发挥优势。从项目之初就参与设计因素拆解、测试方案设置，可以补充视觉相关的设计因素，在优化测试方案、风险预期方面都可以提供重要的建议。在结论推导中，对图中的因素差异敏感度高，可以根据数据提出关键猜想。
文章来源：优设 作者：京东设计中心JDC
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
色彩在UI设计中的作用：加深品牌印象与品牌感、引导用户视觉凹增加易读性、区分信息交互的状态、营造氛围传递热度……
不管是做 UI 设计还是画插画，有很多同学觉得自己是因为天赋不够所以对色彩的敏感度不够，其实不然。一个可能是大家总结的太少，从来都是凭感觉和运气去配色，但配色都是有讲究的。
一个设计作品呈现到用户面前，第一眼进入眼帘的就是产品的视觉表现，而产品的色彩在其中起到了举足轻重的作用，毫无疑问色彩搭配对于设计师来说是非常重要的。那么具体到实际项目中该使用什么怎样的色彩，需要怎么做呢？
用户界面是一个设计师用理性思维解决用户感性需求的窗口。如果对色彩的运用不加以克制，界面可能会显得花哨而没有主次；但过于拘谨又容易使界面保守，难以激发用户情绪，下面以Bee express项目的实例来理性推导制定一套色彩系统。
做过设计的同学应该都知道颜色模式：RGB、CMYK、Lab 等等，这里不做过多的解释了。另外每个颜色具有一定的性格特征和表达方式，而且都会有正反两面。虽然每种色彩都有正向性格特征，但是我们在定位主体色之前一定要知道所选择色彩的负面特征对企业是否会带来负面的影响，
开始之前我们需要了解在配色过程中需要避免出现的问题，如果你经常出现下列的问题，保证你在试用期内一次性就能拿到全部薪资，emmm……
虽然设计是相通的，但是在不同的设计领域进行配色时，依然会存在巨大的区别。更换品牌的主体色，都不会是因为设计师自己的决定，而是公司在商业策略上优先做出了调整，然后通过品牌视觉上的变更将这个信息传递给消费者。
Bee Express快递、速递柜业务为主，前期的主色及视觉形象以橙黄色为主，为了避免视觉跳跃性太大，以及后期IP形象（蜜蜂吉祥物）打造，本次品牌色彩升级在原有基础上优化了色调，以保证后期产品的易用性和延展性，并利用最科学、最适用的方式推导出辅助色，以提升应用视觉的丰富性和感官体验。
express原主色：
为了不影响原有色调前期的视觉传播，即在原有主体色的基础上调整SHB的数值，让色彩更具视觉冲击力，在色彩衬托（字体、图标）更清晰。
通过调整后的主体色也能看出，明亮清晰的主体色（品牌色）也更适合在界面中的运用，为信息传递、引导操作、品牌价值带来更大的提升。
同色系为统一的色相，使用中可以加深品牌色的感知，可以让界面更有层次，同时可以让界面保持色彩上的一致性，整体感较强，产生低对比度的和谐美感，给人协调统一的感觉。
具体是指与品牌色 H（色相）一致，通过改变 S（饱和度）与 B（明度）变化产生的色组。分别往浅色/深色方向按均匀数据增减，各产生5个坐标值。
综上能看出，使用同一色系即可完成一个项目，但是对于中大型项目来说实在是过于单调，没有太多的层次感，因此我们需要多色搭配为辅。多色的辅助颜色可设定不同的任务属性和情感表达，再搭配中性色黑白灰，能赋予更多的变化和层次。
根据主体色 H（色相）为基础，不断地递增、递减 15，在 0-360 之间可以得出 24 个颜色，也就是将 360° 色环分割为 24 份，（24份在360°色环上，每一个色相的角度为15°），最终得到下图24色。
辅助色需要满足的两个条件：
和品牌色有明显区分：避免所选辅助色感官上给用户视觉区别与品牌色差距不大，传递的调性太过一致；
不能过于突兀：根据色彩原理，互补色是最能与品牌色本色产生视觉感官对比的颜色，但可能会有些突兀。为了让颜色的辅助起到丰富画面的作用，而不是反而让整个版面显得不和谐，所以选择互补色的邻近色作为辅助色，避免直接使用互补色。
基于品牌色可衍生出 3 个辅助色：一个与品牌色传递调性有明显区分的类似色；两个互补色的邻近色。
类似色搭配：使用色相相近的颜色，页面元素不会相互冲突，更加协调有质感。
互补色搭配：选择使用互补色，最佳搭配是一种作为主色，另一种用于强调。它们有着非常强烈的对比度，用在需要特别强调某个元素时会非常有效。
每一种颜色都有自己的「感官明度」，也就是发光度。根据现有的使用场景，类似色和互补色大都用在同层级的信息展示上，而当我们将最终得到的辅助色摆放在一起之后发现，虽然我们提取出的辅助色明度色值都一致，因为颜色本身自带的感官明度属性有所区别，导致视觉上会有明显的明暗差别。需要通过发光度来进行最终的颜色校正。
校准方式：依次在辅助色上叠加一层纯黑图层，将该纯黑图层颜色模式调整为 Hue（色相），就可以通过无彩色系下的明度色值，进行对比，使色彩视觉感官保持一致（青色和蓝色属冷色调，固需加深）。
根据上面同色系的明度、纯度对比规则，对所有定义的辅助色进行明度和纯度的辅助色彩输出，最终得到辅助色色板。H（色相）一致，通过改变 S（饱和度）与 B（明度）变化产生色组。分别往浅色/深色方向按均匀数据增减，各产生5个坐标值
删除最左侧的3种同色系，因明度过低时，颜色已经非常接近于黑色，色相在肉眼上几乎已经趋于一致。最后得到基于品牌色推导出的全色系色阶色板。
配色常常从确定主色开始，根据行业类型和视觉诉求的需要，选择一种居于支配的色彩作为主调色彩，构成画面的整体色彩倾向。然后选择辅色，添加点缀色，最后按照色彩组合的原则完成设计中的需求。
虽然有了以上的配色方式，但一套标准的色彩系统还会包含中性色规范、颜色的使用规范等等。相信解决了大部分的需求，剩下的工作也难不倒大家了。毕竟以上的方式只是给大家提供了一个理性科学的方法，如果想更加优秀，还需要进一步深入地去学习色彩理论知识，多看优秀的配色作品提升审美，总之要多看、多实践和多思考。
文章来源：优设 作者：能量眼球
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一套 UI 界面当中，核心的 APP 图标是用户每天都要接触、经常使用的视觉组件和交互对象。设计图标的时候，要用到大家最熟悉的元素才能贴合用户认知，要醒目、统一，也要足够「隐形」，避免喧宾夺主。今天这篇文章，来自著名的 Tubik Studio 团队，他们为华为旗下的 EMUI 10 系统设计了核心的图标系统，来看看他们的设计过程吧。
我们总不会低估一个操作系统基础图标，对于产品的可用性和合意性的影响。基础图标虽然小巧，但是对于整个操作系统而言，总是极具影响力的，因为他们是用户界面的核心元素，帮助用户快速直观地在系统中定位、浏览、导航。但是，对于设计师而言，图标的设计始终是挑战，它看起来最为简单，但实则为最为艰难的工作。
图标需要，让人一目了然，但是也要具备良好的可识别性，在传统和创新之间达到平衡。这一次，Tubik Studio 设计团队将要给华为的 EMUI 10 来设计图标，而这篇文章将会为你揭示背后的设计过程。
这次的项目主要是由 Sergii Valiukh 、Arthur Avakyan 和 Polina Taran 来负责。这次的设计项目从最初的探索构思入手，逐渐开始绘制草图，探索样式，一直到最后打磨，完成设计。
为华为 EMUI 10 系统的用户界面设计基础的图标
我们在 2019 年夏季，收到了来自华为的邀约，这次的项目要重新设计 EMUI 这套基于 Android 系统的用户界面基础图标，这套图标会用来适配华为旗下的旗舰手机，这些图标将会随着新版的系统部署到这些手机产品当中。我们的任务，是创建总计 54 款符合当下潮流趋势的图标，这些图标要能够贴合品牌和已有用户的偏好，并且能够吸引新的用户。
这个图标设计项目如今已经在当下的华为旗下手机产品中应用且部署好了，最早使用这套图标的智能手机型号为 Mate 30 ，紧接其后的是 P40。
在整个操作系统中，这些图标是始终位于用户视野以内、最基础的最核心的交互元素，通常用户每天都会同这些核心的基础 APP 进行交互，有时候一天多达几十次，因此它们应当具备良好的功能性，还应该足够美观，给用户带来满足感。同时，这套图标的设计，也应当足够统一，以协调的体验切入到整个 EMUI 的设计系统当中，贴合整体的样式特征。
所以，我们使用了一整套图标网格系统，应对不同需求，在设计的过程中，这套网格有助于确保所有图标外部尺寸的一致性，也保证了内部元素的统一性。
为了发掘全新的视角，我们决定从传统的手绘图标开始，寻找重新塑造图标设计的方法。这些图标所涉及到的元素，早已为全球数百万用户所熟知，要重新设计图标外观，并且还要成套且统一，这本身就是一个巨大的挑战。
比如「电话」图标所对应的听筒元素、「信息」图标所对应的气泡对话框这样的元素，是不可能完全抛弃重新创造的，所以我们的真正的切入点是在形态和色彩上寻求解决方案。
越是简单的东西，重塑起来就越难。
在实际的设计过程中，我们尝试了数以百计的造型变体，从完全放飞、非常规的的外部造型，到极其常规，大家熟知的造型解决方案，我们都逐一试过。而在色彩上的尝试相对会显得更加具有实验性：我们尝试使用明亮的紫罗兰色、栗色和浅绿色来进行混搭。
当然，我们很清楚，这样的实验性的工作是探索过程中的一小步，但是它是必须的，是创造新设计的种子，是寻求正确答案的必经之路。
在设计过程在，有一件有趣的事情发生在设计「相机」图标的过程中。我们尝试过很多不同的图标造型，不同的元素，不同的样式，但是其中始终有一个细节是不变的，那就是右上角的小红点。这是为了暗示用户，华为的摄像头模组来自徕卡，这个红色的小点就是向其致敬的标识。
而下面的概念设计，则是强化了图标之间的几何轮廓的差异，从而提升图标在智能手机屏幕上的对比度和识别度。
下一步，我们基于几何图形外观差异性，设计了多种造型不同但同样优雅的图标。在基于这种风格概念进行延伸的过程中，我们会优先考虑圆形的元素。而「天气」图标明显既不适合圆形也不适合方形来呈现，所以我们使用的是云和太阳两种元素的组合。「钱包」图标使用的是矩形，然后搭配卡片的组合。尽管造型整体上是相对自由的，但是所有的图标都是遵循图标网格，并且在视觉权重上尽可能统一。
在色彩和样式上，我们则更加倾向于渐变。没有色彩渐变，纯扁平的图标显得过于幼稚和「古早」，没有足够的品质感，所以，我们在新的图标设计上，开始加入渐变色彩，提升质感。
不过，在最终版本当中，我们还是保留了图标外部的圆角矩形的外轮廓，然后将图标元素的内径进行了适当地缩减，渐变和核心的简约几何特征依然是整套设计的最高优先级。
这套设计方案展现了在整套 UI 界面中，图标这个小元素的设计上所需要投入的精力和潜在的难度。想要图标足够协调、美观、易用还要贴合品牌特征、还要区别于以往，是一件相当不容易的事情。
细节里藏着魔鬼，任何细小的元素、线条轮廓、色彩的变化都可能会在屏幕上放大、被感知到。
文章来源：优设 作者：Tubik Studio蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com