这是Taobao APP 商详购买页面底部Button。一般情况下，品牌刷新或VI色调整，都会体现在界面的核心功能区域，例如Button或者Icon上。从‘立即购买’Button的色彩变化，便可以判断Taobao经历了3次重要的VI色调整。
下面颜色是我记忆里的淘宝VI色（大致色值），淘宝VI色的调整也是相应了互联网设计的主流色彩表现趋势：
[ 星巴克官网首屏截图 ]
常人看到这样的界面并不会有任何意见。用‘色彩认知’来讲讲我的观察。星巴克的主色是墨绿色，在官网大面积使用，则带来‘视觉压抑’的感觉，我想通过简单地改变，来提升星巴克的品牌气质。
我用Photoshop吸管工具从官网首页上的一张照片中提取颜色：香槟色（Champagne），这样的颜色在墨绿色底色上有较好的辨识度和品质感，适用于标题性文字颜色。
[ 从照片中提取颜色 ]
在前期的训练中，也可将图片马赛克，这会辅助我们挑选颜色，当你足够熟练后，即可直接用吸管在照片上选择更丰富的色彩。
[ 从马赛克照片中提取颜色 ]
香槟灰（Champagne gray），可用作常规阅读段落文字颜色，在墨绿色上面会显得柔和、舒适。
我重新设计了首页的文字与版式：
[ 优化后的效果 ]
下面是之前的效果。对比看看：
[ 官网截图 ]
这是最简单的用户感官上的提升。而更重要的是‘用户心理’上的提升，这将在用户阅读文字内容时发生。我们先看看文字内容（翻译如下）：
标题 | 事情在变，但我们仍然在这里为您服务。
正文 | 我们已暂时关闭店内咖啡厅，但部分杂货店和直通车位仍然开放。某些市场还提供星巴克提供的Uber Eats服务。请访问我们的商店查找器以获取的商店营业时间和营业地点。
按钮 | 寻找门店
这段文字是星巴克官方在疫情期间所写，并不是一段激动人心的品牌宣传文案，所以我们在设计的时候应使用常规的文字颜色，为避免白色在墨绿色下带来的刺眼，我选择白灰色（#e3e3e3）的字体颜色。标题想表达的潜意识文字是：‘虽然我们碰到了困难，但是我们依然坚持为您服务’。我改为香槟色，来体现星巴克积极的态度与服务的品质，会显得更有力度。
在页面中使用这样的颜色，同样可以提升设计的活跃度，为品牌带来更好的品质。例如，将颜色应用到星巴克官网中小图标设计和文字上面，来提升品质感与活跃度：
[ 优化后的设计 ]
[ 官网截图 ]
对我来说，OODA是一种行动思维，它可以改变您在设计工作中的思维方式。可以运用在您的设计执行和管理中，乃至您所在的任何领域、包括您所担任的任何角色。
文章来源：优设 作者：Riixiong
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
1886年，可口可乐在美国乔治亚州亚特兰大市诞生，如今，名列2020年《财富》全球最受赞赏公司榜单第12位。品牌忠诚度，由消费者长期反复地购买使用品牌，并对品牌产生一定的信任、承诺、情感维系，乃至情感依赖而形成。可口可乐的成功离不开品牌忠诚度，那么，品牌忠诚度应该如何塑造呢？
在商业世界里，有这样一条定理：“维系1名老顾客的成本比获得1名新顾客成本要低很多”。
低的这部分成本，来自于老顾客的忠诚。可口可乐，作为史上最伟大的品牌之一，拥有着一群非常忠诚的老用户。他们为什么忠诚？如何塑造他们的忠诚？
1985年，可口可乐宣布更改配方，推出“新可口可乐”。
在正式发布前，进行了19万人次的口味盲测，其中喜欢新口味与喜欢老口味的人数比例是55∶45。
从口味上来说，“新可口可乐”味道更好。但是真正更改为新口味后，却遭到成千上万消费者的反对，每天打到公司的投诉电话超过8000个，后来不得不更换回原有的口味。
对于这次口味的更改，消费者反馈最多的词汇是“背叛”。我们想想，“背叛”这个词一般什么时候会用呢？被爱人背叛、被战友背叛、被伙伴背叛……背叛，来自于极强亲密关系的人。
元气森林推出新口味，会让人觉得“背叛”么？
——不会，就是要不断推出新口味应对消费者口味变化呀！
蒙牛牛奶升级配方，会让人觉得“背叛”么？
——不会，消费者一定非常欢迎把普通牛奶免费升级为“特仑苏”。
一种含水和糖99.5%的糖水为什么会和“背叛”“忠诚”这些词汇搭上边？为了掰扯清楚，我们用不同理论，从不同的侧面来看下这门玄学。
顾客对“可口可乐”忠诚，是因为忠诚的“收益”大于“成本”。
什么是成本？经济学中对成本的定义是放弃了的最大代价。
好衡量的成本是看得见的，比如姜太公公对印象笔记忠诚度极高，因为不想放弃多年的笔记、摘录；不好衡量的成本是看不见的。比如使用习惯、情感依赖、自我表达等。
在看得见的角度，“新可口可乐”味道更好。在看不见的角度，“新可口可乐”破坏了消费者的记忆、使用习惯、自我认同等（后文会详细说明）。
为了避免发生认知失调，消费者会尽量保持自己的行为一致。
“认识失调：当人们有关的认知因素（包括对行为的认知）发生矛盾时，为了保持它们之间的平衡或协调，就会改变自己原有的行为或信念、态度。
人们会尽一切可能减少认知不协调感。不协调是一种“消极驱力状态”（一种令人厌恶的情况）顾客对“可口可乐”忠诚，是因为要避免自己出现言行不一致。
如果我不对可口可乐忠诚，那我为什么不买味道一样的百事可乐？如果这次不买可口可乐，那我上一次为什么要买？
白捡的100元所带来的快乐，难以抵消丢失100元所带来的痛苦。
顾客认为可口可乐推出“新口味”是背叛，是因为产生了损失的感觉。1985年，可口可乐推出“新口味”的同时宣布“老口味”会彻底消失，这激起了消费者的“损失厌恶”。
如果采取其他方案，这个案例也有可能不会成为“历史上最大的营销惨案”。
比如不大肆宣称“新口味”，而是慢慢的更改配方，或者推出的“新口味”是一个单独的子品牌，不影响“老口味”的售卖。
当消费者有多种品牌可以选择，一股股神秘的“向后拉扯的力量”，防止他放弃忠诚，防止他做出改变。对于可口可乐“忠诚用户”来说，这种力量来自看不见的成本、对损失的厌恶、对自己言行一致的期待。
可口可乐如何塑造忠诚？为了简化说明，我们将人的大脑分为3部分：
每一个“大脑”都会产生忠诚，下面介绍可口可乐是如何利用这三个大脑的：
如何利用“反射”大脑塑造忠诚？
利用非条件反射，也就是无需后天建立，先天性的条件反射。天气好，自动就会心情不错；优美的音乐，可以让人放松；一些元素可以激发消费者脑中“思维定式”。
使用这些元素就可以使用其附带的“联想”，让品牌更具有穿透力。
那么回看可口可乐是如何做的呢？
添加咖啡因、可卡因等成分，刺激神经中枢，帮助祛除困意并恢复精力；添加大量的糖分，帮助人体补充能量，元气满满；使用棕色的饮品颜色，即使是炎炎夏日，也让人感觉到清澈和凉爽。
在产品设计上，使用各种味觉和感觉的刺激物，激活既有的非条件反射。
但是这种方式的缺点是，随着时代的变迁，人们的口味、审美等会发生变化。如果不能与时俱进，则会造成大的失误，20世纪60年代初，人们对健康的重视逐渐提高，对糖分的需求降低。
当时的民意调查显示，28%的美国民众在关注着自己的体重。
皇冠可乐公司推出了健怡皇冠可乐，减少了可乐中的糖分。很快成为了健康可乐中的行业第一，而可口可乐则在3年之后才推出产品来应对。
如何利用“理性”大脑塑造忠诚？
创建条件反射——也就是通过后天不断重复、大量曝光。
品牌可以提供溢价、解决信任问题、解决认知问题等……我们常说要建立品牌资产，说到底，就是“品牌联想”——品牌和功能或者情感诉求之间的关联。
那么回看可口可乐是如何做的呢？
——创造的独特的名字、商标、包装等条件反射。
消费者可能记不得可口可乐的宣传语、广告，但是这个商标、这个名字成为了记忆中的一部分。
“我们必须拥有一个强大商标，而要拥有强大的商标，我们自然必须正确地用基本的学术观念来理解这种生意的本质。我们可以从心理学的入门课上学到，本质上，我们要做的生意就是创造和维持条件反射。“可口可乐”的商标名称和商标形象将会扮演刺激因素的角色，购买和喝下我们的饮料则是我们想要的反应。——整理自《穷查理宝典：查理·芒格的智慧箴言录》
大脑如何利用情感大脑塑造“忠诚”？
可口可乐是一个非常好的KOL（意见领袖），它非常擅长于迎合时代的情绪，跟随者大众文化的变迁，针对每个大的历史事件，发出自己的声音。
这些营销策略，和可乐口味无关、和可乐销量无关、和可乐是啥无关，完全从“情感”大脑出发。
可口可乐，作为史上最伟大的品牌之一，拥有着一群非常“忠诚”的老用户。
当消费者面对多种品牌的选择，一股股神秘的“向后拉扯的力量”，防止他放弃忠诚，防止他做出改变。对于可口可乐来说，这种力量来自看不见的成本、对损失的厌恶、对自己言行一致的期望。
利用非条件反射、创建条件反射、制造身份认同和情感共鸣……
文章来源：人人都是产品经理 作者：姜太公公
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
算法分发已经不是一个陌生的词汇了，各大APP都有自己的算法，并且通过这些算法了解用户、推荐内容，从而达到自己的目的。如今，微信也开始拥抱算法分发，并且内容分发逻辑也有所改变。这是为什么呢？本文作者为我们分析了原因，并且概述了张小龙的产品哲学。
如果问过去一两年微信最大的变化是什么，我的答案一定是——微信终于开始拥抱算法分发了！
从执着于「社交分发」到开始拥抱「算法分发」，这是一个惊人的转变，这个是微信在路线上的一个重要迭代和进化，而这个转变背后的逻辑也非常值得每一个互联网人深入思考！
很显然，一开始张小龙并不喜欢算法。
准确地说，在微信这个故事开始的时候，张小龙对算法介入内容分发非常忌惮，这在很多方面可以体现：
然而今天，情况发生了极大的转变，算法分发开始在多个维度渗透到了微信内容生态的方方面面——
△ 公众号信息流推荐的账号
这不得不说这是一次非常有趣而惊人的改变，卫夕想通过这篇文章尝试解释这种转变是如何发生的，着重回答两个问题——
先来看第一个问题——张小龙为什么如此执着于天然的社交分发？
毫无疑问，微信被深深打上了张小龙的个人烙印，他的产品哲学也被深深地注入到了微信的产品逻辑里。那么为什么张小龙在微信诞生之初的相当长一段时间内，都只推崇纯粹的社交分发而丝毫不染指算法分发呢？
这个问题不同人会有不同的答案，我的答案是——这和张小龙信奉「用简单规则构建一个生态」这个理念有非常大的关系。
为什么这么说呢？
我们来看几个事实：
第一：张小龙曾经非常推崇凯文·凯利写的《失控》这本书，他有一次在演讲中说：
「凯文·凯利的《失控》我给很多人推荐，这本书篇幅很长，大部分人没有耐心看完，但是如果有一个大学生来面试，说他看完了这本书，我一定会录用他。」
那么这本书到底讲了什么呢，这本书完整标题是《失控——机器、社会与经济的新生物学》，这本书本质上是关于复杂科学的。
书中一个非常核心的观点就是——从无机物到生物、从社会到机器都在向复杂方向进化，而在这个过程里，大多数时间是没有领导、没有组织、没有中心化布局的，这就是最自然的一个状态。
《失控》本质上讲的并不是说失去控制，更准确地说是——无需控制，因此，很多人建议将这本书翻译成《无为》可能更加合适。
第二：张小龙在早期在腾讯内部有一个著名的长达8小时关于微信产品哲学的演讲，在这个演讲中的PPT，我们可以看到他反复表达了这样一些观点——
第三：张小龙曾经有一个饭否账号，在这个发了2359条消息的饭否账号中，他也说出了很多类似的想法——
第四：张小龙早期是做邮箱的
邮箱作为一个最传统的通讯工具，对「确定性」有着极高的要求，因此即便在QQ邮箱张小龙做的「阅读空间」，本质上也是一个订阅产品，需要用户主动订阅各个频道。
张小龙非常在意给用户确定性，而他本身是一个非常在意掌控感的人，他也要让他的用户能获得对自己看到的内容的一种掌控感。
第五：张小龙在2019的公开课中更加直接地解释了自己为什么对社交分发如此执着——
「我一直很相信通过社交推荐来获取信息是最符合人性的，因为在现实里面，我们其实接纳新的信息，并不是我们主动到图书馆或者到网上去找的信息，大部分情况都是听到周边的人的推荐而获得的。」
好了，通过回顾张小龙这一系列想法和言论，我们可以看到他的一个重要产品理念——「通过设定简单的、确定的规则来构建一个自然的生态，用户在这个去中心化生态里能自然演进。」
因此，微信的分发规则是极其简单的——纯粹靠人来进行天然分发。
任何算法的介入都是对这种简单规则的破坏。
那么这种分发方式有没有什么问题呢？当然有，比如典型的是朋友圈微商泛滥的问题。
为什么说朋友圈微商泛滥会和朋友圈分发机制有关系呢？
微信默认的规则就是你所有的好友发的朋友圈都只按一种简单规则——时间序进行全部展示，这等于微信默认了以下两个前提：
很显然，这并不符合现实，那么微信如何解决这个问题呢？
微信一开始的逻辑是——人们发广告太多，就会有人把他删掉，而为了不被人删掉，人们会自动少发一些广告，多发一些有趣的内容，从而达到一个微妙的平衡！
这个逻辑对吗？看起来没问题，但事实上并不凑效，微妙的平衡其实很难达到，为什么这么说呢？
因为就连微信自己也发现依靠「删掉」这个如此重的功能根本起不到调节的作用，于是微信进行了自我改进——推出了「屏蔽某人朋友圈」这一功能。
这时候逻辑变成——人们发太多广告，就会有人把他屏蔽掉，而为了不被人屏蔽掉，他会选择自动少发一些广告，多发一些有趣的内容。
这回就完美了吗？
答案是——不知道，我们只能说，效果肯定会比删除好一些，但屏蔽一个人这个操作真的就很轻么？
且不说在操作层面我需要点5下才能屏蔽一个人，更重要的是从心理层面，屏蔽一个人意味着他发的一切我都看不到了，不到忍无可忍的某个临界点，很多人不会轻易这么做。
那有木有更完美的解决方案呢？
有人说有，系统自动算出这个人哪些是广告，哪些是有趣内容，只给人展示有趣内容而屏蔽广告！
这个方案怎么样？
看起来很完美，但有一个问题是，如果这个人的广告不会被看见，那他为什么要拼命发有趣内容呢？他闲的蛋疼么？
所以，在产品层面其实没有完美的方案，有的只是不同的取舍。
我们来比较三种取舍——头条把内容展示完全交给算法，微信把内容展示完全交给用户，而Facebook某种意义上综合了二者：Facebook的内容用了一个叫「边际排名算法」（Edge Rank Algorithm）。
这个规则会计算每一个内容的重要性，重要性高则排在前面，而重要性E由三个因素决定，具体公式为——E = u*w*d:
很显然，Facebook会根据算法来计算哪个朋友对你而言更重要，点赞多评论多就是更重要，但这个算法也并不完美——比如我如果暗恋某个女生，我断然是不会给她点赞、评论的，但她的每一条朋友圈我一定要看。
所以Facebook这种算法也剥夺了一种权力，我能看到什么不再由我决定，而由机器决定，我就失去了确定性，很多人会因此恐慌。
而微信的哲学是——它不会替你自己决定谁更重要，张小龙坚信人是有主观能动性的，可以自己屏蔽朋友圈、删除好友、取消关注，微信需要的是确定性。
没错，微信在给内容消费者确定性的同时也就自动赋予了内容生产者的确定性——公众号的运营者们知道，自己的内容哪怕是广告粉丝也一定会看到，这背后是巨大的利益。
巨大的利益就意味着巨大的动力，这也是微信成长为中国内容创业最坚实堡垒的一个最重要的原因。
所以，每一个方案其实都是一种取舍！
只是张小龙选择相信碳基人类，而张一鸣选择相信硅基算法，二者就像华山派的「剑宗」和「气宗」。
本质上这只是一种价值取舍！
好，到此我们就已经回答了这篇文章两个问题中的第一个问题——为什么在微信早期，张小龙如此执着于简单的社交分发？
答案是这和张小龙的「用简单规则构建自然演进的生态」这一产品哲学息息相关。
接下来，我们来讨论本文的第二个问题——微信从社交分发到算法分发的转变是如何发生的？
首先，我们需要明确的一个事实——微信并非完全从社交分发直接全面转变成为了算法分发，准确的说法是微信是在社交分发的基础上引入了算法分发。
社交分发依然是微信最核心的分发方式，而算法分发可以认为是一种补充，我们可以从以下事实看到——
所以我们可以看到——张小龙其实并没有抛弃自己产品哲学，社交分发依然是微信最核心的分发方式，而引入算法某种意义上可以看成是对原有产品哲学的一种修正。
那么，这种修正是如何发生的呢？为什么有产品洁癖的张小龙也会放弃自己多年的「坚持」呢？
卫夕总结了下面四个角度来理解这种转变：
首先：张小龙是一个迭代能力极强的人。
要知道他经历过很多人难以想象的几次跨度极大的转变——从PC软件的Foxmail到QQ邮箱的转变，这是将软件思维切换互联网思维；而从QQ邮箱到微信，这是PC互联网逻辑到移动互联网逻辑的转变；而从微信的早期到微信的后期，他完成了从产品架构师到生态管理者的角色转变。
每一次的逻辑和能力圈都是完全不一样的，普通人能完成一个转变就已经异于常人了，而张小龙经历了三次，每一次都脱胎换骨、刻骨铭心。
所以，这是一个勇于且善于修正自己的男人。
从这个意义上，根据形势和格局的变化改变产品策略其实是顺理成章的事。
其次：我们来看一看冰冷的数据。
这两张图，分别是QuestMobile2018年9月和2020年6月中国互联网各巨头的时间分布：
△ 2018年9月数据
△ 2020年6月数据
我们看到腾讯系产品的用户时长占比从47.3%下降到39.5%，而头条系从9.7%上升到15.3%。尽管腾讯还有其他庞大的产品体系，但头条系在抢微信的用户时长这个大的逻辑无疑是确定的。
微信从0开始到成长为巨无霸，几乎没有遇到什么像样的竞争对手，但头条系在时间战场上的攻城略地的确给了微信极大的压力——这某种意义上代表着算法分发的胜利。
尽管张小龙在很多场合经常强调不关注竞争对手、不关注用户时长，但我们也看到了在2018年的腾讯员工大会上他公开说——
「大部分产品都在欺骗用户，做各种滤镜，喊口号说「记录美好生活」，但生活其实并不总是美好的。」
其中的火药味还是很浓滴。
的确，头条系的崛起让一直扑在第一战线的微信感受到了用户时间被侵占的压力。
第三：公众号的内容生态在变得日益成熟的同时也有一些弊端开始浮现。
具体体现在：
这些问题既制约了公众号内容的生产，也制约了公众号内容的消费，面对这些问题，张小龙在 2018 年微信公开课上开出了自己的药方，他宣称——
「我们只会去改善阅读效率，而不是胡乱变成不受掌控的信息。」
没错，算法介入其实就是改善阅读效率的一个重要举措。
微信事业部的算法工程师招聘岗位越来越多
第四：微信在视频化层面的压力。
如果说在公众号时代微信的内容生态还能和今日头条平分秋色的话，那么抖音快手等短视频内容崛起让微信在视频消费这一领域明显落后。
某种意义上，这其实是腾讯在这一领域的落后。事实上，在美国，Facebook也没有干过以算法见长的Tik Tok。
算法分发再次在短视频领域展现出明显的优势，于是，在微视拼尽全力但依然没有大突破的情况下，微信的视频号肩负了腾讯短视频反击的大旗。
当然，张小龙做短视频依然是有其强烈风格的，三个Tab从左到右分别是「关注」、「朋友」、「热门」，主打社交分发的「朋友」依然是默认选项，优先级高于算法分发的「热门」。
微信其实也做过非常重度的短视频尝试——即刻视频，这个寄予厚望的功能效果并不好，我四个5000好友的的微信号经常发现发即刻视频的数量仅仅为个位数，尽管它在上线开始的时候有8个入口。
张小龙曾经在2019年的微信公开课上花了半个多小时讲即刻视频旨在减小大家发布压力背后的逻辑，而最后他说了一句意味深长的话——
「我觉得一个好的产品不需要费口舌解释，我解释了这么多，说明我们做得不够好。」
没错，正是在以上四个因素的共同作用下，微信修正了自己的产品路线，在社交分发的基础上拥抱了算法分发。
而这时候当我们回顾其他产品，会发现社交分发和算法分发的融合事实上已成为一种标配的趋势——
尽管每一个产品都有自己的侧重点，但修正和进化则是永远的主题，而这也是永远蓬勃向前的互联网最有趣的一面。
文章来源：优设 作者：卫夕指北
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
供应链资源整合是企业发展态势。企业对内部多岗位协作、企业与企业间的协作效率有更多诉求。
企业级服务系统的智能在线处理、数据准确、信息安全等特征，成为企业实际作业的得力助手。（以下简称B端）
系统提供商也便对业务型产品、设计、开发、运营等人才有更多需求。
在C端浪潮中，设计师通过创造用户流畅和惊喜的体验，发挥了显而易见的价值。
然后B端系统的业务复杂特性，普遍认知产品经理、开发会体现更大的价值。
设计师作为中间角色，难免「尴尬」，甚至沦为产品经理原型的高保真绘制人员，缺少发言权，或初次接触对海量信息无从下手。究本质原因：
未直接接触业务方和用户，无法对需求场景有深入的了解，缺少系统性设计分析、设计判断能力
我在几年的实战中，运用辛老师 「交互设计五要素」 基础原理，融合于B端业务体系，形成一套自己的思维图谱。（以下简称五要素）
从「五要素」出发，会更快速地get到关键设计点，抱着开放的态度与产品讨论方案，总会愉快地达成一致，顺利对接开发。
就像我们写小说「讲故事」一样：时间地点人物、有什么目标、使用什么工具，完成什么事情，故事才完整。基于B端实际业务场景的五要素，阿飞解说如下：
角色：
老板、运营、销售、物流、采购、库管、财务等（不同岗位日常事项不同）
权限：
主子账号（涉及到模块间的操作权限、数据权限）
用户目标：
B端一般是具有明确的作业目标，更地完成工作。老板一般希望节约人力成本，且可即时响应客户需求
商业目标：
为客户赋能、提升下单率、支付率、新业务渗透力、裂变等
业务目标：
产品会不断的迭代，了解当下需求中的业务目标
设计目标：
基于以上目标，设计需符合用户思维习惯，提高处理效率，同时避免误操作等
任何场景下，人的行为都是有「目标动机」
当以「目标」为出发点，可以增强设计判断力，输出有效方案。另外真正有价值的商业目标一般都是和用户终极目标所吻合。
时间、地点是场景的必要组成
When：
随时随地在线或工作日期间，如：售后客服需要随时在线；财务人员一般工作日处理任务
Where：
办公室、仓库、户外等。需考虑线上线下结合，系统是为用户的线下作业场景服务
台式电脑、笔记本电脑、手机、平板、扫码枪、PDA、打印机、肢体、智能运输车等
互联网媒介又包含web网页端，web客户端，小程序，H5，App等
系统功能承载在媒介中，媒介承载在实际作业下使用的工具，存在多终端配合使用。比如仓库移动作业时，会使用到平板进行盘查核对等。
需要完成什么事？通过典型的任务流分析是否可达到目标
△ 仓库移动作业场景
B端复杂业务下，设计师主动了解用户实际的场景后，五要素作为必需思考元素，经过实战验证，带给设计师的机遇价值至少有2方面：
1. 对设计师自身：
有利于设计分析、判断思维体系的完善，考虑更全面；所输出的方案符合用户思维和习惯，更容易得到各方的认可
2. 对于业务价值
可作为考量产品方案可行性的判断准则
另外，产品原型一般基于「功能」本身，而设计师从用户实际场景规划用户的任务流，可以优化产品逻辑，补全缺失场景，也会给予创造性解决方案
比如「开发票」功能 ：
在需求评审中，针对于「A向B申请开票，A撤销申请不需要B操作同意」这点，我提出建议：「需要B线上同意」
首先确实是要避免无谓的用户线上流程操作，但针对这点，我分析如下：
所以「A撤销申请B需要线上操作同意或拒绝」
△ 打印发票
以「五要素」的分析思维的表述，最终与产品、技术达成一致。
在设计中，考虑到「A申请撤销」的单据，对于双方都是需要优先确认和处理的。所以除有即时消息通知外，列表中我做了2点设计：
（若不这样，在分页列表中特殊单据很有可能从第二页后才出现，用户都发现不了）
△ 状态操作参考框架示例-原创
回顾下B端交互设计五要素
设计师的分析、判断能力是非常重要，五要素则作为系统性的思维支撑。
B端浪潮中，设计师仍有很大的机遇和价值。基于五要素分析，会对业务有所优化和补充，或提出创造性的解决方案。
设计不仅是一种技能，而是对事物本质的感知和洞察能力
交互设计五要素不仅对设计师有帮助，同时对产品、运营等人员同样具有价值。
文章来源：站酷 作者：Aber UX设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
头脑风暴是一种常用的设计方法，能够帮助设计师开阔思维，快速获取大量灵感与方案，当然，这是在理想的情况下。实际上，很多头脑风暴是漫无目的，效率低下，毫无收获的。而头脑风暴需要很多人参与，如果浪费了大家的时间而一无所获，那发起者简直尴尬到能抠出两室一厅。
那么，设计师如何才能地组织一场头脑风暴呢？下面我将按“开始前”，“进行中”，“结束后”的顺序，介绍整个头脑风暴流程中提率的一些心得体会。
我们一定是为了解决某个问题，而不是为了闲聊组织头脑风暴的。所以我们要先明确问题是什么，才能引导大家帮助我们。
我们可以试着用一句话去概述它，注意必须要具体，不能太含糊。“如何设计一张海报”就是一个很糟糕的描述。试着把目标用户、业务目标、场景加进这句话，比如“如何设计一张能够吸引应届毕业生加入XX设计中心的朋友圈海报”。
明确具体问题后，我们还需要将它进行拆解成一个个关键问题，这样才能有序展开讨论，而不是漫无目标地侃大山。比如刚刚提到的那个问题，就可以拆成“应届生的关键词是什么”、“应届生找工作时最关心什么”、“XX设计中心的关键词是什么”、“什么样的元素能够代表设计师”、“什么样的朋友圈海报形式比较吸引人”等等。
有了明确的问题和关键问题后，我们要做的就是将它们在头脑风暴按步骤上提出来，让大家跟着我们的节奏去展开脑洞，这也就是头脑风暴的流程。一场头脑风暴往往包含背景介绍、多轮脑暴、阐述想法、投票等环节，作为组织者需要详细规划每个环节的顺序、时间，特别是需要控制总时长（尽量别超过一个半小时），预留中场休息的时间，毕竟大家很难长时间集中注意力。
一般来说头脑风暴里有三种角色，主持人、记录员和参与者。参与者的职责不用介绍了。主持人的职责是带着大家按节奏讨论，记录员的职责是记录大家的想法和拍照，缺一不可。
参与人员的数量一般在5-10之间，人数太少收集不到足够的想法，人数太多讨论效率低，耗时长。参与人员的身份需要根据你想解决的问题确定，如果是比较大型的项目，参与的人员需要多元化，把产品经理、程序员都拉进来，方便获得不同视角的观点，也能够提高合作方的参与感。在我们上面举的海报例子中，如果能拉应届设计师加入脑暴，将非常有帮助。
除了笔、便利贴、A4纸，我们还需要准备一份写了每个步骤需要完成任务的PPT，帮大家明确任务。
大家的工作都比较忙碌，所以请至少提前一天邀请大家参与头脑风暴，并且简单交代背景，提供一些资料，方便大家提前消化。
首先要简单跟大家介绍一下背景信息，以及接下来的大概流程，活跃一下气氛，带大家进入状态，讲段子也算是新世纪设计师的必备技能了。
头脑风暴的目的并不是要获得考虑得非常周全、详细，能够直接落地的方案，而是大量的想法和灵感。所以我们需要鼓励大家在短时间（5-10分钟）内输出尽可能多的想法（四五十个不算多），不要太纠结可行性、成本等细枝末节的问题。
作为主持人，切记不要当场对参与者的想法做出负面评论，或者谈论执行细节的事情，以免打击参与者的积极性。如果有领导参与，要注意避免领导的威压影响其他参与者打开脑洞。
互联网从业者大多是思维活跃的可爱人儿，开一个头他们就能唠上一天，所以主持人一定要留意时间，按照既定计划，当大家偏题时引导大家回归到对主题的讨论上。
如果整场头脑风暴的时间超过半个小时，就需要给大家安排中场休息的时间，可以提前准备一些零食和饮料，帮助大家放松，以便接下来能够集中注意力接着讨论。
记录员应该将大家的想法和每轮讨论、投票的结果记录下来，方便后面回溯和汲取灵感。拍照也是很重要的工作，这将为最后的设计提案提供宝贵的图片资料，让整个设计流程展现在决策方面前，提高说服力。
主持人应该将简单总结一下大家讨论、投票的结果，表达对大家百忙之中参与头脑风暴的感谢，为下次拉人做情感铺垫（开玩笑）。
会后需要及时对头脑风暴的结果进行整理和分析，并将结论以邮件的形式同步给参与者（表达对参与者的尊重）和领导（同步工作结果）。整理时可以按可行性和效果两个维度划分idea，找出比较平衡的方向。
头脑风暴是很有效但也很容易浪费时间的一种设计方法，开始前详细规划，进行中稳稳把控，结束后及时总结与同步，能够帮助我们提率。
另外，头脑风暴只是为我们提供了灵感和方向，并不一定要选择获得票数最多的方案执行，还是需要根据实际做判断，不要过于机械。
文章来源：站酷 作者：失灵
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
“个人主页”是一个听起来很熟悉，但又跟“个人中心”傻傻分不清楚的一个模块，一般情况下处于APP底Tab的最右边，通常喊它为“我的”。
这个界面看似没什么挑战可言，给设计师一种“不就是排排版的事儿嘛”的膨胀误解，认为完全在自己射程范围内，整个人都有点飘。
但最近发现，它并不像表面所呈现出的那么简单，其实里面有很多小揪揪需要深挖和思考，所以千万不能小瞧它。
好，废话不多说，上才艺。
个人主页和个人中心的区别是？
讲“个人主页”前，先跟大家捋一下它俩的区别，避免混淆。首先，并没有官方定义它们的名字，只是喊的人多了也就成了它们的名字了。
所以“个人主页”也好、“个人中心”也罢，只是大家习惯性称呼，为了合作过程中大家在同一个话语体系，提效而已。
要说它们俩的区别，其实还是有的。
什么是个人中心？
个人中心，承载着自己账号信息、设置管理、福利信息等功能的聚合地，主要用于个人信息的管理。
它常见于“工具类”产品中，如下：
对于“个人中心”，设计师要考虑的最核心是：如何解决“效率”问题。因此信息布局合理，视觉尽可能减少干扰，变得格外重要。
什么是个人主页？
个人主页，一般承载着用户个人信息、个人影响力、生产的内容等等，以此突显自己魅力或定位。
常出现在内容、社交、社区类产品中，比如以下产品：
当然，还有一些产品，它既包含“个人中心”，也包含“个人主页”，如下：
整体来看，“个人中心”偏向于个人信息的管理，更关注于“效率”；而“个人主页”偏向于展示自我，关注点更“多元”，会复杂一些，下面会细讲。搞明白了它们的区别之后，大家会发现“个人中心”相对更简单一些。
所以，这次我们先聚焦聊聊“个人主页”。
设计“个人主页”前思考什么？
在工作中，做任何需求都应该有其目的或目标，不然所有的忙碌都容易沦为资源的浪费。“个人主页”也应有其价值和使命。
像上一趴所说，“个人主页”是为了让用户突显或塑造自己的魅力，很像是一个人的“个人名片”。那么，用户塑造个人魅力对产品有什么价值和收益呢？目标是什么呢？
拿短视频产品举例：如果用户能够在“个人主页”充分展现自己的才华和魅力，从而带来了更多浏览者的“关注”，那他们就更有动力分享或生产优质内容，进而使产品内容更加丰富；从而吸引更多新用户的浏览、留存。
更多新用户的加入、浏览、留存，让内容生产者有更多的涨粉空间，粉丝规模做起来之后再进行商业化。
这样对消费型用户、内容生产者、平台方都有利，进而处于良性循环。
这就是“个人主页”背后的大概逻辑和目的。
如何进行“个人主页”的设计？
了解完“个人主页”存在的价值和目标之后，那么，作为产品或设计师们需要帮助用户解决几个问题：1.树立人设；2.辅助吸粉; 3.助力变现。
1.树立人设
人为什么需要树立人设？
树立人设，本质上是两种目的：获得认可（提升关注/约X），获得收入（提升变现能力）。
如何帮助用户快速建立人设？
个人主页里有几个区域，影响着用户建立人设：a.头图区；b.个人信息区；c.作品区；
a.头图区
头图，指的是“个人主页”顶部的图片区域。
为了让浏览者进入“个人主页”快速了解作者，头图这种处理手法，是很多社交/社区/内容类产品，“树立人设”的标配。
比如：社交类产品的头图，用户要么放自己照片，要么放风景；
大V、商家等角色的用户，会把头图打造成自己品牌的招牌，辅助浏览者快速了解自己定位。
不过，头图尺寸占比要把控好。
尺寸大小会影响界面的“屏效比”和用户“上传门槛儿”，对产品核心数据也有着千丝万缕的关系。
b.个人信息区
个人信息区，也是作者的基础资料。
一般包含着：用户的昵称、账号、简介、标签、粉丝关注量、关系链等信息。这个区域设计时需要重点考虑“信息亲密度”和“信息优先级”。
信息亲密度：指的是如何将更亲近的信息，以信息组的形式传递，减少用户认知成本。
比如下图，常见的社区或内容类产品针对“个人信息区”的处理方式（同一颜色的色块代表亲密度更强的信息。）
同时，“信息组”与“信息组”之间也需要处理好亲密度，比如“小红书”和“instagram”的“好友关系链”与“关注按钮”是放一起的，方便用户快速作出“关注”决策。
c.作品区
作品区的重要性不用多说了，它是作者“树立人设”的重要组成部分，也直接影响着浏览者是否愿意关注的关键因素。
“作品区”设计时，有2个重要因素需要考虑：“作品尺寸占比”、“作品信息外显”。
1）作品尺寸占比:
比如下图，同样是短视频产品，Before作品区一排仅1个作品，剪映2个作品，而抖音3个作品。
单从排版美丑来评价是不负责的，那么如何决策哪种处理手法“对”的呢？
这需要通过自己产品定位分析，以及通过不同布局方式进行上线测试，重点观测核心数据（用户消费时长/作品消费个数/关注率等）的影响情况来决策。
2）作品信息外显:
除了作品本身，它的“辅助信息”也是帮助用户做决策的重要因素。
比如：“Before”除了对作品热度信息（浏览量、评论量等）外显以外，更强调和引导用户进行互动，如：收藏、分享、评论、充电；“剪映”根据产品属性，更强调“使用数”和“作品的描述文案”；“抖音”作品仅外显“点赞数‘，同时通过“置顶”和“刚刚看过”提升用户决策效率。
以上可以看出，头图区、个人信息区、作品区，是让浏览者快速且准确的了解或关注内容创作者重要组成部分，也是内容创作者“树立人设”的主要手段。
2.辅助吸粉
辅助吸粉，换句话说也是辅助用户提升“关注率”。
不可否认，清晰的编辑个人信息，产出优质的内容，是用户吸粉的根本，我们能做的只是“助攻”。
所以，在做此类“个人主页”时，我们需要通过设计手段做个靠谱“奶妈”，有几个维度可以尝试：a.强化关注；b.沉淀粉丝。
a.强化关注
衡量粉丝多少，是通过用户是否点击“关注”了内容创作者。
因此身为产品工作人员，在个人主页设计时，除了其它信息呈现以外，在不影响页面信息合理性的情况下，尽可能强化“关注”按钮，引导用户操作。
b.沉淀粉丝
有了粉丝之后，提升粉丝忠诚度和粘性，是每一个内容生产者面临的问题，也是工作人员们需要帮内容创作者解决的。
左边是“快手”，在个人主页内有粉丝群入口；右边是“火山”，打造自己的“圈子”，粉丝们可以在里面发自己的动态，或进行互动。
这么做是为了提升内容创作者的粉丝粘性，给他们更大的空间去运营粉丝，培养感情，打造更忠诚的私域流量。
3.助力变现
除了树立人设、辅助吸粉以外，助力他们变现，才能使他们长期扎根于此（留在自己平台）。不然大V们会带着自己圈到的粉丝，去别的地儿赚钱，给你的产品带绿帽子。
拿知乎举例，内容创作者可以在个人主页挂自己的商品橱窗，给符合自己人设的商品带货。
也可以开通付费咨询模块，通过帮助用户解答问题实现变现。
除此之外，还可以做付费Live课程。
再来看下像哔哩哔哩、抖音、火山、QQ音乐等平台，在个人主页都有辅助用户变现的入口。
下面是“声撩”，利用用户声音的优势去变现，比如：陪打游戏（软妹子声音让王者峡谷的汉子们兴奋）、睡前陪聊、睡前连麦等等。
如果你真的很富有，且不想让妹子陪聊陪打游戏，就是单纯的想砸礼物引起注意，右图可以看出，有个入口是直接“送礼”。
这么做满足土豪诉求（博取主播注意），满足主播诉求（变现），满足平台诉求（抽成），何乐而不为。
同时，也越来越多了产品不仅解决C端用户的变现诉求，同时解决B端用户变现诉求。比如，抖音赋能商家，商家号的“个人主页”可以自定义tab，默认展示“商品”tab。
用户不仅能在这里消费作品，还能通过作品建立的信任促进购买行为。
再比如，instagram也提供B端用户开店铺功能。
以上，是关于“个人主页”如何助力用户变现的案例，其实玩法还有很多，这里仅提供一些思路，大家平常玩APP时可以多关注下。
总结
总的来说，“个人中心”与“个人主页”最大的区别在于：“个人中心”主要是“给自己看的”，更注重使用效率。
“个人主页”主要是“给他人看的”，更注重突显自己魅力。在满足使用效率的基础上，需要通过产品设计手段帮助用户“树立人设”、“辅助吸粉”、“助力变现”，从而使用户和平台实现双赢，打造一个更完善的生态。
以上，是“个人主页”设计相关思考，希望对你们有所帮助。
文章来源：UI中国 作者：大牙
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
先来了解一下项目的背景。Conduira online是一个线上的教育平台，为准备考试的用户提供有用的工具和资源。这个平台目前有一个侧边导航栏，上面有11个选项。后来由于平台的变化，将主导航的选项缩减到3个——主页、实习和课程。
导航的数量变少了，团队又迎来了新的问题：是应该继续保留侧边导航的设计样式还是切换成顶部导航的样式呢？
为了做出最合理的选择，我们需要回答三个基本的问题。
在选择导航时回答这个问题很重要。这里介绍一个有趣的的交互概念叫做视觉固定（Visual Fixation）：注意力一直保持在同一个地方。
在顶部导航中，一个视觉固定点通常只适合一个选项。然而，侧边导航上的单一视觉固定点可以同时容纳两个选项。
结果很明确。与顶部导航相比，用户在一次视觉观察中可以在侧边导航上查看和感知更多菜单选项。当然顶部导航也有自己的优势，为每个菜单项赋予各自的权重，而不是让它们的重要性被其他选项分散。
对于具有过滤选项或带有二级菜单的电商网站，视觉固定的概念起到了非常重要的作用。因为在这些情况下，我们希望用户能够在单一的视觉点上尽可能多的选择。
Tips：这里的选择仅仅取决于界面上有多少选项。如果主导航的菜单项不多于5个，只需使用顶部导航，这样能够更好地控制用户在整个平台上的体验旅程。
用户在浏览网页或App时会有各种各样的浏览顺序，其中一种就是「F型模式」。
看起来像这样：
F型布局的特点是将注视力集中在页面的顶部和左侧:
这种模式的含义是同一页面上的第一行文本比后几行文本受到更多的关注；每行文本左边的几个字比后面的文字接受度更多。
因此，在顶部导航中最左边的选项比其他选项具有更多的视觉权重，因为它位于主要视觉区域，优先级更高。
侧边导航采用了垂直移动，这是用户浏览网页的一个自然方向，但是选项优先级的排序是个限制。当选项的优先级相同时，可以使用侧边导航，这样用户就可以完整浏览列表并确定对他们重要的内容。
如果是的话，可以考虑利用以下两种设计样式：
水平导航——在页面顶部设置一个主导航，在主导航下面设置二级导航进一步来区分内容。
侧边栏——在顶部设置一个主导航，然后在侧边设置一个侧边栏菜单来处理其他内容。
顶部导航和侧边导航之间的选择实际上取决于以上三个基本的问题。
另外由于现在的设备有了更大的屏幕尺寸，如今许多设计趋势已转向侧边导航，因为它看起来更干净并优化了更多的屏幕空间。
最后将导航的选择归结为两点：
文章来源：优设 作者：Clip设计夹
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
构图、色彩和光影属于设计中非常重要的3块体系，但构图和色彩大多是偏感性的主观理解，而光影则是理性的客观判断。因为这是自然界中真实存在的物理现象，因此大部分时候画面的「添加光影」都是在还原真实，所以本文的很多知识都偏理论和科普，但理性认知无疑是打牢光影基础的第一步。
如果说「构图」和「色彩」是视觉设计的基础，那光影便是「锦上添花」，当各种视觉元素组合完成后，只有「光影统一」，才能让所有元素真实的融在一起，最终形成真实立体、有层次的画面，而「光影统一」便是这篇文章的核心原则。
其实我们看到的万物色彩，都是物体表面的反射光，是「光」创造了色彩，同时也创造了「影」，只有经过光照才会出现明暗，才有所谓的「光影」，所以我们先来说说一切的源头——光。
发光的地方就是「光源」，当我们对画面「添加光影」时，一定要先留意光源在哪，像我每次画设计草图时，就会先把主光源的位置确定并标示出来，只有清楚位置，「光影统一」才有了依据。
那常用的光源类型都有哪些呢？其实就2大类：照射光和环境光。2类光源往往同时存在，相互影响，塑造场景时必须同时考虑。
照射光就是画面中的主要照明光，这是影响整体光影的核心光源，根据光线照射路径的不同，又分成直射光、散射光和折射光。
直射光
直接照射的光源就是直射光，光线路径呈方向明确的两点一线，整体集中、聚焦。
直射光能在物体表面形成强烈的明暗对比，并且过渡偏硬，形成清晰的轮廓边缘，最常见的直射光就是晴天阳光，它属于自然光。如下图所示，阳光直射形成的明暗强对比能呈现人物及建筑的轮廓，突显立体感。
和自然光相对应的是人造光，在人造光中，例如摄影棚里常用的闪光灯和常亮灯（不带柔光罩）都算直射光，照射效果和晴天阳光类似，仔细观察投影，边缘都很生硬、清晰。
散射光
当光束穿过某一介质（云层、柔光布等），被其表面分散传播的光便是散射光，散射光的光线路径呈多方向发散状，整体分散、无明确方向。
自然光中，阴天、雨天、雾天的光照都属于散射光，当阳光穿过大气时，大气层能让光线朝不同方向发散，发散后的光线柔和，在物体上形成的明暗对比较弱，过渡也柔和。如下图所示，不管人物还是景物，都无明显的阴影轮廓，整体层次丰富而细腻，影调柔和，特别是暗部的细节都能保留完好。
而人造光中，如果给闪光灯和常亮灯装上柔光罩，这时发出的光就会变成散射光。例如下图中，人物和产品都显的特别柔和、舒服。
折射光
当光束从一个介质射入另一介质时，传播方向发生偏折的光就是折射光。常见介质有水、玻璃等，它们的折射角度也各不相同。
日常生活中，像泳池里的水波光影、玻璃杯投射的光线图案都是与折射相关的自然现象。
而我们在设计Banner时，若将这些折射效果表现出来，就会给画面增添很多细节，同时也会增加真实感，像水波光影在电商中用的就很多。
很多新手在做设计时，往往只注意照射光（主光源）对物体的影响，而忽略环境光，导致画面总是不够真实。简单来说，画面中除了主光源外的所有光线都算环境光，环境光的亮度一般很低，且没有明确方向性，常见的环境光有2种：散射光和反射光。
散射光
和照射光一样，环境光中也有散射光，但它们的不同在于：
像自然界中的夕阳西下，当红色的太阳光（照射光）减弱时，建筑的暗部便会显现蓝色的天空光（环境光），这时红光和蓝光会形成鲜明对比，极具冲击和美感，这样的画面在摄影及设计中都非常常见，也是摄影界公认的「黄金一小时」，这时的天空光就属于环境光中的散射光。
生活中还有一个常见现象也能看到散射光影响，当你走在户外，观察自己的影子，特别当影子较长时（清晨或傍晚），这时离自己越远的区域颜色越浅，这是因为越远的影子所处区域就越开阔，受周围散射光的影响就越明显，因而颜色更浅。
反射光
环境光中还有非常重要的一类是反射光，当光束射到介质表面时，有部分自介面射回的光就是反射光。可以毫不夸张的讲，世界万物之所以出现明暗就是因为反射光的存在。反射光一般有2种情形：镜面反射和漫反射。
镜面反射。当反射面非常光滑，这时平行射入的光线仍会向一个方向平行的反射出来，效果如同镜子一样，虽然这样物体本身的明暗就会非常微弱，但人们透过反射面能看到周围的环境信息，这就是镜面反射光。
日常生活中像平静水面、镜子、抛光金属等都会有镜面反射光，例如我们在刻画金属材质的元素时，常常会在表面加些近乎白色的高光，这就是由于镜面反射而进入眼中的刺目强光。
另外晴空万里时，海面也常出现「波光粼粼」的闪光，同样也是阳光射入水面的镜面反射光。
漫反射光。当反射面凹凸不平时，这时平行射入的光线就会向各个方向反射出去，这便是漫反射光（以下简称「漫射光」）。需要说明这里的凹凸不平也包括微观结构，例如有些墙壁看着光滑，但仔细看表面也有粗糙颗粒，这时反射出来的光线也是各个方向的漫射光。
漫反射在这个世界里无处不在，它是我们对物体形态及色彩产生明确认知的基础。
因为有漫反射的存在，物体才会有清晰的明暗关系，我们才能看清这个世界，它赋予了物体纵深感和体积感，不管是产品还是环境皆是如此。
这里列举一个设计中常用的漫反射现象，我们将一个白色茶杯放入一个绿色盒中，打上一束光，这时茶杯整体都带有绿色调，这是因为盒子表面产生了大量绿色的漫射光，这些光束射在茶杯上，进而发生偏色现象，如下图所示。
可见环境色对物体的视觉影响还是相当明显。再如下图中，当模特处于一个红色空间时，受到环境中红色漫射光的影响，模特也明显偏向红色，这时我们就说环境光影响了这位模特的「色彩平衡」，关于「色彩平衡」在后面还会细讲。
当然现实是复杂的，其实还有大量物体会同时存在镜面反射光和漫射光，谁的强度大谁就更突出，例如起风时的水面，就不全是镜面反射，还有漫反射，这里就不再深究。
小结
以上提到的「照射光」和「环境光」便是设计中常用的2大光源类型，这2类往往是同时存在，一般照射光会直接影响物体的明暗结构，而环境光则影响物体的色彩平衡及反光。
只有把这些光影都表现清楚，画面才更有代入感。其中对于照射光的理解，绝不仅仅是考虑直射或散射这么简单，还需分析照射方向、照射角度、照射形状、光源距离、光源强度、光源软硬、光源大小、光源颜色等因素，待会会针对这些因素展开讲解。
前面介绍了光源类型，主要让大家对「光」有个整体认知，内容偏科普，属于「光影」的理论基础，现在开始讲「影」，这块内容更偏实战运用，教大家如何在设计中准确表达光影。本文的「影」涵盖两块内容：物体的明暗和投影，其中物体是泛指，包含电商常用的两大元素：人物和产品。
先说物体明暗，当光源发出的光线射向物体时，由于光反射，物体会有对应的明暗变化，记得在高中学习素描时，老师就曾提过光影的「五大调」，这正是人们对物体明暗关系的理论化总结。
但现实世界却要复杂的多，因为物体光影还与材质密切相关，不同材质的明暗关系截然不同，所以决不能撇开材质谈明暗，而设计中常用材质有三大类：漫反射材质、镜面反射材质和透明/半透明材质。
不管现实世界还是电商视觉，漫反射材质都是最常见的材质，因为这类材质的光影最有规律也最有代表性，明暗关系也简单很多，刚刚说的「素描五大调」就是针对漫反射材质，那我们就从这类材质入手，详细讲讲漫反射的光影到底如何呈现。
「漫反射材质」是指表面产生漫反射光的材质，日常生活中，漫反射材质（以下简称「漫射材质」）的物体占据大多数，像棉布、哑光纸、哑光塑料甚至人类肌肤等等都属于漫射材质。
而我们在刻画漫射材质的物体明暗时，需遵循3点原则：近亮远暗、先整体再局部以及细节刻画。
近亮远暗
对于漫射材质，首先一个大原则就是「近亮远暗」：
以画面的主光源（照射光）为圆心，物体距离光源越近会越亮，越远则越暗。
对单个物体来说，距离近的就是亮面（受光面），而距离远的是暗面（背光面），如下图所示。
在很多摄影或设计作品中，能看到不管人物还是产品，都会遵循这一原则：距离主光源越远则越暗。
先整体再局部
在「近亮远暗」的大原则下，先确定物体的整体光影，表现三大面（亮面、灰面、暗面），其本质就是在固有色（物体在白色光下所呈现的色彩）的基础上进行深浅色调的变化。
然后再添加物体的局部光影，这个局部主要针对有块面的物体（立方体），「局部光影」意味着亮面和灰面也要分别遵循「近亮远暗」原则（由于暗面是背光，不受主光源影响，所以不在遵循范围内），这样光影才会更有层次。而没有明显块面的曲面物体（球体）则把握好整体光影即可，或许听着有些复杂，下面通过图例强化理解。
细节刻画
最后是刻画光影细节，这里列出2个常见细节，这些细节虽不影响整体明暗，但会让物体光影更加细腻和真实，属于「加分项」。
物体表面最亮的地方就是高光，高光其实不是光，而是直接反射主光源的地方，如果要给漫射材质的球体添加高光，那在亮面添加一个羽化的圆斑即可。
往往越光滑的物体高光就越清晰。但对漫射材质而言，高光不会很清晰，不过模糊程度要看物体的固有色以及粗糙度，粗糙度越大的物体高光越模糊。另外高光的外形还和物体的本身结构有关。
在表现高光时，还有一块高光区也经常被刻画出来，那就是块面物体的「倒角高光」。
「倒角」其实是个工业设计术语，三维设计也常提到，一般块面物体的棱角通常会做些圆滑过渡，这种过渡结构就是倒角，有了倒角，转折才不会「锋利」，这时若有光线照射到表面，倒角处便会形成高光线。
一般亮面和灰面转折处的倒角高光最亮，而灰面和暗面的转折处最暗，核心还是遵循「近亮远暗」原则。
电商设计中，若给块面物体加上「倒角高光」，细节无疑更丰富，也更耐看。仔细看下图，在块面转折处都有明显的亮线勾勒，虽然不是很起眼，但这就是常说的「设计细节」。
当2个物体相邻时，它们相邻的那面会有「重合阴影区」，并且物体离的越近，阴影会越深。这是因为相邻空间随着物体间距越小，接受的环境光也会越来越少。
「重合阴影」是一个非常容易被大家忽略的设计细节，但若表现得当，就能提升作品的精细度，如下图所示。
说完漫射物体的明暗刻画原则，接下来讲讲周围环境对物体的影响，还记得刚刚讲过的环境光吗？环境中除了主光源外的一切光线都是环境光。
而「环境色」则是环境光中的一种情形：就是当周围环境有明确色彩时，这时产生的环境光会给物体带来怎样的影响？主要影响其实有2方面：物体的色彩平衡和反光，实际表现时也是从这两点入手。
色彩平衡
「色彩平衡」是PS中的一项调色工具，主要是调节画面的整体色彩。既可校正画面的偏色，使色彩舒适平衡；也可反其道而行之，根据场景和需求让画面有意偏向某种颜色。例如下图中的人物，受环境色影响就明显偏向黄色。
所以当物体处在一个有明确色彩的环境时，受环境四周的漫射光影响，整个物体都会偏向环境色，注意由于暗面受到的影响更大，因此暗面的偏色现象也会更加明显。总之物体偏色程度是和其固有色、材质及漫射光强度都息息相关。
反光
一般物体都是放置在地面上，而地面作为环境的一部分也会出现漫射光，这部分光线射到物体上就会形成一层微弱的亮面，这就是「反光」。
其中物体表面离地面越近的地方反光就越强，一般来说反光最强处就是物体暗面最靠近地面的地方。但不管如何反光都不宜过亮，更不能超过物体亮面。
上图是环境为白色的情形，而当环境有明确色彩时，这时反光面就应呈现环境色，如下图所示，物体的反光都是浅蓝色。
另外能产生「反光」的不单单是地面，其实只要离物体较近且能反射光线的面都能让物体产生「反光」。
例如下图中，就能明显看到白色瓶子的右侧有一层绿色「反光」，这是因为旁边的绿色外盒反射出的绿色光线射在了瓶身表面。
再如户外拍摄人像时，有时为了不让暗部过暗，往往会在旁边添上一块「反光板」，这个反光板所起作用就是让脸部的背光面产生反光，以达到提亮暗部的目的。
小结
综上所述，周围环境的漫射光影响着物体的色彩平衡；而地面（也可是离物体较近的面）的漫射光则为物体暗面添加了反光。
为何要单独讲解环境色影响？因为现在很多Banner都是在一个有色背景中添加人物或产品，其实就可理解成是将物体放入一个环境色中，这时若想和背景自然融合，就需要它们的色彩平衡及反光都偏向背景色，不然整体就会失真。
总之调节「色彩平衡」能让物体融进有色背景中；而添加「反光」可使物体更加通透，体积感也更强，下面展示2个融合不错的案例。
在实战案例中，我们会给2款产品分别添加一个蓝色背景，然后用 「明暗原则」及「环境色影响」中提到的方法给产品加上光影，并将它们融进背景中（由于投影在后面才会提到，所以当前为保画面完整性，关于投影部分只先添加，但不展开细讲）。因为物体的明暗、投影和光源属性密切相关，因此这里先设定主光源来自画面左上方、强度中等、软硬适中、白光，下面看具体如何呈现。
在上述案例中，我们事先给主光源做了一个设定，为何要这么做呢？因为主光源的很多因素都直接决定了物体会呈现怎样的光影，特别当画面有多个物体时，只有确定了光才能使它们「光影统一」。
例如刚刚通过左上角的主光源能判断画面属于侧光，那产品也是对应的侧光影，如果位置改变那光影也将发生改变，那光源的众多因素究竟会让物体产生哪些不同？下面一一细说。
照射方向
先说光源的照射方向，主要会影响物体的「明暗配比」，随着方向不同，物体明暗也在发生微妙的变化，同时还会影响画面的情感表达，所以照射方向是我们首先就要确定的因素，一般方向有7种。
而在实际运用时，常用方向是4种：前侧光、侧光、侧逆光、逆光，这4种我们分成2组来讲。（其他方向由于使用较少，就不展开）
前侧光/侧光。当光源的照射方向和视线方向成30°-60°夹角时称为前侧光；而当夹角成90°时则为侧光。如图所示，前侧光一般明多暗少；侧光则是明暗对半。
下面再看产品在前侧光及侧光下的光影呈现，主要区别在于明暗比例的变化，但变化很微妙，区分没有那么明显。这里我是用PS对产品进行的光影调整，因为日常工作中，PS处理光影才是大家的常用方法。
前侧光及侧光是电商设计中最常用的布光方式，这样不管人物还是产品，明暗比例都比较适中，既能保证物体的亮度，也能很好的凸显物体形态和质感，所以大量Banner的主体展示都会采用这种布光方式，下面看案例。
侧逆光/逆光。当光源的照射方向和视线方向成120°-150°夹角时称为侧逆光；而当夹角成180°时则为逆光。如图所示，侧逆光和前侧光刚好相反，物体是明少暗多；而逆光时的物体则几乎全是暗面。总体来说，不管侧逆光还是逆光，物体都以暗调为主。
再看看产品在侧逆光及逆光下的光影该如何处理，虽然产品看着有些灰暗，但场景却颇有氛围和调性。
这也是一组常见的布光方式，和前测光/侧光主要凸显物体的立体感不同，侧逆光及逆光主要是营造独特的场景氛围。
其中要特别注意物体背光面的暗调程度，根据需求提亮或压暗，但多数时候都不会调的太暗，还是会保留物体该有的一切细节，避免色调过深而丢失了暗部层次，如下图所示，元素的背光面依然都清晰可见。
逆光其实很有趣，当光照强烈、光质偏硬时，物体边缘就会出现一圈非常明显的高光，高光颜色和光源颜色一致，这就是「轮廓光」。光照强度越大、光质越硬，轮廓光就越明显。
轮廓光一直都是摄影师的最爱之一，如图所示，它能勾出人物轮廓，进而分离人物和背景，让影调富有变化，提升画面层次和细节。
在电商设计中也同样常见，例如下图中，仔细观察人物和产品的边缘，有些地方会有一层非常高亮的「轮廓光」，这处光影细节使画面更具形式感和设计感。
还有一种情形也颇有艺术感，如果物体完全背光，这时背景偏亮而物体正面又无光时，就会形成「剪影」效果。在摄影中这是一种很有趣的拍摄方式，如图所示，图中的人物剪影会给观众留下丰富的想象空间。
在电商设计中，剪影同样以表现人物或产品轮廓为主，突出整体造型，「剪影构图」会更强调画面的形式感传达。
光源强度/距离
光源强度和距离会影响物体明暗的反差大小，强度越弱或距离越远则物体明暗反差越小；而强度越强或距离越近则明暗反差越大。
原因很好理解，先说光源强度，当光源增强时，周围环境和物体的受光面会更亮，因此亮面和暗面的反差也会更大。还有距离同样如此，所有人造光源的光照都有衰减性，而光源强度随着距离拉近而升高，因而距离越近的光源，照射强度同样增强。
需要注意，还有一类光源是自然光，自然光比较特殊，如果在室外环境下，任何时候的光照（晴天、阴天等）都不会有衰减现象，因为作为光源的太阳太强，距离太远，衰减可忽略不计。
但若在室内，阴天从窗外射入的自然光则会有衰减性，因为这时的光线以散射光为主，而这类光照要弱的多，再加上窗外射到室内的辐射范围有限，所以衰减性便会显现出来，如下图所示。
光源强度和距离对产品的明暗影响也同样如此：左图设定的光源强度弱、距离远，因而产品的明暗反差小；而右图设定的光源强度强、距离近，因而明暗反差更大。
如果选择明暗弱反差，为避免画面灰暗，我们需要提升画面的曝光值，使整体明亮。
在实际运用时，明暗弱反差降低了明暗对比，人物或产品都没有很深的阴影，整体呈现清晰、柔和，同时也弱化了结构和立体感，如图所示。
而明暗强反差则让人物或产品的明暗对比强烈，阴影明显，质感凸显，更强调整体结构和立体感，如图所示。
光源软硬
喜欢摄影的朋友对这个词应该再熟悉不过，是指光的性质（简称「光质」）变化，分成硬光和软光。
一般直射光属于硬光，而散射光和漫射光则属软光。光源软硬会影响物体的明暗过渡，硬光的光照直接，会让物体的明暗过渡更为生硬，有明显的阴影轮廓，突出表面结构和质感；而软光的光照柔和，能让物体的明暗过渡更为自然，无明显的阴影轮廓，突出表面层次和细节。
另外在同等的光照强度下，由于软光的光线呈分散状，所以相比硬光，明暗反差也相对较小，如下图所示。
下面再展示产品在硬光和软光下的光影刻画，明显左图的影调更为硬朗。
在设计时，硬光常用来表现人物的强劲、硬朗和力量，常用于男性、运动、健身等类目，另外也能凸显产品的结构和造型，提升质感和立体感。
软光则侧重表现人物的柔美、清新和娇嫩，常用于少女、儿童等类目；而用于产品则会让其表面的层次细腻而丰富，更接近生活里的真实呈现。
光源颜色
最后是光的颜色（简称「光色」），光色变化会影响物体的表面颜色，由于人们对色彩的敏感度很高，所以众多因素中，光色带来的影响最为直观。
一般来说，不管物体的固有色如何变化，表面呈现的都是光线颜色，只是明暗程度会有不同。如图所示，当红光照在球体上，亮面会呈现红色；而绿光照射则会是绿色。
若产品被有色光照射时，受光面同样会出现对应的光色，这时画面会更生动，同时也提升了用户的视觉印象。
在日常设计中，使用有色光算是「戏剧化用光」的一种手法，如图所示，当画面出现光色变化和鲜明对比时，画面会更有冲击和氛围，也让场景带有强烈的情绪感。
小结
以上便是影响物体明暗的4个光源因素：照射方向、光源强度/距离、光源软硬以及光源颜色。
通过相关案例，细心的小伙伴该会发现，当照射光的这些因素发生改变时，不单单是物体表面的明暗会有变化，其实投影也有明显不同，确实物体的明暗和投影都是紧密相关，正因为投影太过重要，所以接下来单独介绍。
前面提到本文的「影」会涵盖两块内容：物体的明暗和投影。现在就说说投影，我们还是从最具代表性的漫射材质入手。
何为投影？简单说就是光线照射不到的地方。它是光影表现中非常重要的一环，有了投影，环境中的物体才有真实感，并和环境产生呼应关系，给人带来现实感。
而投影呈现，就属于典型的看着简单其实复杂的细节刻画，新手往往觉得投影不就是添加黑色的模糊椭圆吗，偶尔虽然可行，但这并不适用所有场景。设计师真正要做的，是能根据各类场景准确表现出让人舒服的物体投影。而物体投影，又分为表面投影和地面投影，投在物体表面的是表面投影；而物体投在地面的就是地面投影。
刚刚讲「照射光影响」时提过，当光源强度、软硬等因素改变时，物体的投影也会有明显不同，那接下来我们就看看物体投影到底受哪些因素影响？又会有哪些不同？刻画时考虑的要素都有哪些？相信看完会刷新大家对投影的认知，原来看似简单的投影竟藏有这么多细节！
首先要考虑投影的方向，这是大前提，它和光源位置密切相关，核心原则是投影永远在光源相对的一面，属于光源光线的延伸。如图所示，当画面有多个物体时，要确保所有影子都和光源的光线方向保持一致，若不一致画面就有违和感。
下面看案例，注意有时画面的光源位置并不明显，会在画面外，例如右图，这时就要事先设定一个光源位置，然后确保所有物体的投影都处在光源光线的延伸线上，这样才合情合理。
确认方向后就要开始绘制投影的轮廓，这是投影表现中最难的一步，很多画面的投影看着很假往往就是轮廓出了问题，一个优秀设计师要能准确呈现出物体投在地面的真实形状，而不是所有投影都是一个圆形或矩形。那怎样才能准确的勾出外形呢？我们需从以下3点来考虑：基本外形、发散程度和外形起伏。
基本外形
是指物体在光源照射下投在平面上的基础形状，关于形状绘制有章可循，但需用到我们在高中「立体几何」中所掌握的空间感。
总体来说，是先把光源的「位置点」和物体的各个「顶点」连成直线，再把每条直线延长至所在平面，这样就能得到多个「交点」，最后把平面投影外围的所有「交点」连接起来便会得到准确轮廓，如下图所示。
上方是单个长方体的投影外形，可能这样的简单物体还比较好呈现，那复杂物体呢？其实用同样方法即可，如下图所示，我们先用上述方法将2个长方体的投影轮廓分别呈现，再合并就好。只是这时的空间更复杂，顶点也更多，我们要有足够的眼力和耐心。
需要说明，在单一光源下，当画面有多个物体组合出现时，所有物体的投影都是相加关系。即是说当多个投影有交集时，这些交集区域不会产生更深的叠加投影。
但以上只针对单一光源产生单一投影时的情况，若画面有多个光源并让物体产生了多个方向的投影时，此时投影便成叠加关系。
如下图所示，示意图和案例中都有2个主光源，因此物体产生了2个相交投影，投影的交集区域最深，而非交集区域由于光源的相互影响则会变浅。
最后通过投影基本形的绘制方法我们还能得出一个结论：影子长短和光源光线的入射角有关。入射光线和垂直地面的法线夹角就是入射角，入射角越大投影越长，入射角越小则投影越短。
准确的投影轮廓能让产品呈现更真实，也更有美感，下面展示2个优秀案例，当然这些的前提是要光源为硬光，只有硬光才会有清晰的投影轮廓。
发散程度
接着要考虑投影外形的发散程度，「发散」是说投影轮廓离物体越远则开口越大。所有物体的投影都有发散现象，只是程度不同，这和光源的面积大小及光源距离有关。
先说光源大小，光源面积越大则发散程度越小；而面积越小则发散程度越大。
再说光源距离，距离物体越远则发散程度越小；而距离越近则发散程度越大。
例如太阳距离地球就非常遥远，因此室外物体的影子扩散程度会非常小，像下图中的树木，投影都接近于平行。
其实距离远近是光源非常重要的一个分析维度，它影响的因素有很多，不光是投影发散，还会影响投影的深浅和虚实，后面再细说。
一般在电商设计中，扩散程度较小的投影用的更多，毕竟生活中这类投影更加常见，呈现出来的影子也会比较自然和真实。
扩散程度较大的投影虽然用的不多，但使用恰当则会让画面充满张力和氛围，使人眼前一亮，如下图所示。
外形起伏
投影的轮廓绘制还需考虑外形起伏，「起伏」是说投影不光要有二维平面的形状变化，还要根据地面凹凸进行纵向的起伏调整。
其中地面凸起主要指「墙面」；而地面凹陷则指「阶梯」；最后还有地面凹凸不平的「肌理」呈现。
当地面凸起形成类似「墙面」结构时，如果物体的影子长度大于墙面间距时，就会出现「投影上墙」现象，这是因为墙面也会出现一块光线照射不到的区域，如下图所示。
在设计时，如果投影刚好出现在产品和墙面的中间区域时，最好都设计成「投影上墙」的布光效果，这样两个元素间（产品和墙面）就会产生呼应和联动，整体感更强。
当地面凹陷出现类似「阶梯」结构时，如果物体的影子长度大于阶梯转角的间距时，就会出现「投影下沉」，如图所示。
这里要注意一个关键点，上图中的主光源出现在物体背面，属于侧逆光，这时「阶梯结构」受光照影响也会出现暗面，和投影一样，都属于光线照不到的区域，因此在阶梯转角的背光面，不会出现物体投影，有时设计师会顺手将物体投影叠加在转角暗面，其实是错误呈现。
我们在观察下生活中的真实投影，下方是我随手拍的一张屋顶照片，上午9点，栏杆在屋顶投下了长长的影子，可以清晰看到，圈中挡板的背光面并没有栏杆投影，就像被断开了一样。这是因为该区域都是背光面，不可能出现投影叠加的反常现象。
因此我们在设计时要额外注意，千万不要犯这种「投影叠加」的常识性错误，仔细观察下方作品中方块转角的背光面，都不会出现产品投影的叠加现象。
有时地面还会以「肌理」方式呈现，像常见的草地、水面、沙滩等等，如图所示，它们的表面都是凹凸不平，因此投影外形也要根据肌理起伏进行形态变化，这样才不会显得投影「太假」。
虽然投影的轮廓绘制我是从3小点依次展开，但实际设计时应该一气呵成，根据画面的光源同时确定投影外形、发散程度以及起伏，最终是为营造出物体在环境里的真实存在感。
有了投影的「形」，现在我们要确定投影的「色」。很多新手在添加投影时不管周围的环境色是什么，都会给影子直接填充黑色，最后导致影子在画面中格格不入，像是多余的存在。
其实投影呈黑色的情况非常少见，由于受到周围漫射光的影响，大部分时候都是跟着地面颜色走，这是总体原则。具体是会先给投影填上地面色，并将混合模式设成「正片叠底」，再将透明度调至合适数值即可。
仔细观察下方案例，投影并非「黑色」，都是深色调的地面色，这样投影才不至于突兀。
既然投影都是深色调的地面色，那到底「多深」才合适呢？这就需要我们调整投影的深浅。关于投影深浅，需从2个维度来调整：整体深浅和相对深浅。
整体深浅
整体深浅是指投影的整体明暗，和上节讲的「物体明暗」一样，都是受光源强度和距离的影响。其中「深浅」是说环境明暗的反差大小，因此所谓的「投影深」其实是由于环境的明暗反差很大，反之亦然。
如下图所示，光源强度越强则投影的明暗反差越大（投影深）；而光源强度越弱则投影的明暗反差越小（投影浅），因此投影的整体深浅是相对周围环境而言的。
另外整体深浅还受光源的距离影响，由于光线有衰减性，光源距离越近则投影的明暗反差越大，而距离越远则投影的明暗反差越小。例如下方案例中，明显左图的明暗对比更强，投影更深。
相对深浅
相对深浅是指投影自身的明暗变化，即是说投影本身的明暗分布并不一致，哪怕整体很深的投影，但本身还是会有相对的深浅变化，具体则看投影所处区域的开阔程度：开阔程度越小投影越深；而开阔程度越大则投影越浅。
一般情况下，靠近物体底部的区域开阔程度最小，接受的环境光（散射光/反射光）也最少，所以投影最深；而离物体最远的区域开阔程度最大，能接受的环境光也最多，所以投影最浅。
综上所述，整体是遵循着「近深远浅」的原则，投影靠近物体的区域更深；而远离物体的区域更浅。该理论看似复杂其实简单，下面我再用一张示意图进一步说明。
若要表现投影的「相对深浅」，我们要重点呈现3个区域：
这3个区域会沿着投影轮廓呈直线分布，如下图所示，在实际设计时，投影的暗角区往往是单独的薄薄一层（作为点缀，面积不能太大），而本影区和半影区则会合并成另一层（色调由深到浅的渐变层），这样刻画产品投影时就是用这2个图层来呈现。
再看电商作品中，物体的投影刻画也是分2层呈现，注意物体底部的暗角区色调最深。
投影呈现的最后还要调整「虚实」：「虚」是说投影的边缘模糊；而「实」是说投影的边缘清晰。和深浅一样，虚实也分整体虚实和相对虚实。
整体虚实
投影的整体虚实是和光源软硬及距离有关，先说光源软硬，上节曾说过「光源的软硬会影响物体的明暗过渡」，那现在还可加一点，光源的软硬同时也影响着物体的投影虚实。
当光源为硬光时，光照直接，这时投影整体偏实、边缘清晰、过渡生硬；而当光源为软光时，光照柔和，光线分散，这时投影整体偏虚、边缘模糊、过渡柔和。
除了光源软硬，还有光源距离，光源距离越近则投影越虚；而距离越远则投影越实。
这是因为光源的距离越近，相交的光线就越多，这时光线的相交区域也越大，如下图所示，这样投影便会形成更加柔和的边缘。
从上图能看到，光源的距离变化对物体的光影影响很大，不但影响了投影虚实，同时还决定了投影的扩散程度和整体深浅，这和我们之前讲的一致。
一句话总结：光源的距离越近，投影的扩散程度越大、明暗反差也越大、边缘则越模糊；而光源的距离越远，投影的扩散程度越小、明暗反差也越小、边缘则越清晰。
在实际运用时，「实影」会让产品的明暗过渡生硬，暗部细节缺失，对投影的轮廓要求也高，总体较难掌握，因此使用相对较少。但「实影」却有着更强的表现力和冲击力，形式更加鲜明，富有张力。
而「虚影」则用的更多，它让物体呈现的更加细腻和自然，由于投影的边缘模糊，所以对轮廓要求也低，无需非常精准，哪怕结构复杂的物体，也无需勾勒出具体形状，因此若对投影表现没有把握，可以优先「虚影」，易操作也易出效果。例如下方案例中，不管什么样的物体，在软光的照射下，投影都是「模糊一片」，就算轮廓异常也不易察觉。
相对虚实
投影除了整体的虚实变化，自身也会有相应的虚实过渡，这和「相对深浅」类似，整体遵循着「近实远虚」原则：投影离物体越近，则边缘越清晰；若离物体越远，则边缘越模糊。
注意虚实过渡其实是个非常柔和的变化过程。之所以出现「越远越虚」，是因为越远的区域受到的环境光（散射光/反射光）影响越大。
当然在软光照射下，有些画面也会忽视投影的「近实远虚」，将投影直接处理成整体模糊，其实也不太违和，因为「近实远虚」算是一个非常微妙的细节呈现，不影响全局，但若能做到，画面层次将更加细腻，如下图所示。
小结
以上就是关于投影呈现的5大要素：投影方向、轮廓、颜色、深浅及虚实。但要注意设计不是物理学，设计师也不只是为了还原现实，因此很多时候不用太较真。例如有些画面的光源并没那么明确，这时投影有些地方刻画的差不多即可，出现一点失真也没关系，关键是不要让人觉得画面别扭和违和。
实战案例
还记得前面讲「明暗原则」时画的立方体和球体吗？下面我们用刚刚讲的知识给它们逐步加上投影，物体只有同时加上明暗和投影，才算真正融进了环境里。首先还是先明确光源情况：来自画面的左上方，强度中等，软硬适中，白光。
在刚刚「物体明暗」的实战案例中，我们曾给2款产品添过「物体明暗」和「投影」，但投影并未细讲，现在再逐步剖析一下产品的投影刻画，其实和刚刚讲的立方体如出一辙，同样先设定好光源：来自画面左上方，强度较大，软硬适中，白光。
前面展示的都是相对简单的示意案例，现在将以2款产品作为主视觉，分别用侧光和逆光来设计2张不同风格的Banner，通过完整案例让大家了解两种布光方式的不同以及物体对应的光影刻画。
通过2个综合案例，大家能看到不同光源所带来的感受也会不同：侧光使物体呈现的更加真实和立体；而逆光则营造出一种独特的场景氛围，因此我们要根据需求选择合适布光。
另外刻画投影时需要考虑的因素也有很多，例如影子的轮廓、深浅及虚实等等，但不用生搬硬套，还是前面那句话：核心是不要让人觉得别扭与违和。
又又是一篇很长的文章，信息量很大，我们围绕「光影」依次讲了光源类型、物体明暗以及物体投影，当然都是从漫反射材质入手，相对简单也有代表性，其实常见材质中还有镜面反射材质和透明/半透明材质，而这2类则要复杂很多，也较难呈现，这里就不展开。但不管材质如何变化，正如本文开篇所说，「光影统一」都是核心原则，什么样的光就会得到什么样的影，虽然听着简单，但当中要做的细节其实很多。
可能耐心读完，有些小伙伴会觉得很多内容过于理论和枯燥，好像不用这么麻烦也能做出差不多的「光影」，其实这种想法还是比较浅显的。「光影」和构图、色彩不同，它是现实中客观存在的一种现象，若表现过于感性就会导致画面违和、不真实，所以本文的大量内容都是在理性推导后得出的结论，总之「理性学习」是培养「正确设计感」的必经之路。最后为方便大家梳理逻辑和内容，下面附上本文的内容结构和知识框架。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导语：导出功能我们经常能够使用到，看似一个很简单的功能，实则在设计的过程中需要考虑很多的因素。本文作者对导出功能的全过程进行了思考，为我们分析了两种解决方案，拆解了导出前和导出时的设计，并且进行了总结。
功能（百度释义）：功能是一个汉语词语，拼音为gōng néng，意指事物或方法所发挥的有利作用；效能。
综合以上释义，我们再从产品的角度对其理解：功能的好坏不仅仅关乎其本身，更重要的要看是否为解决实际问题而服务。
那导出功能，解决了什么样的问题？我们先来看一个场景。
小A作为一名销售人员，需要每月向领导汇报一次销售情况，为了更直观的让领导看到销售情况，小A要对销售订单数据进行不同维度展示与分析。而目前系统只能查看订单列表与销售总额，不支持不同维度的数据分析。
从场景中我们可以看到这样一个问题，由于系统只能查看订单列表与销售总额，不支持更全面的数据分析，导致小A每次向领导汇报前，只能人工将一个月近5000笔的订单（此处不考虑后续不断增加的订单量）统计在excel中，从客户维度计算出销售额、销售量，完成客户维的销售情况分析。
从产品SKU维度计算出销售额、销售量，完成产品SKU维销售情况分析，导致小A的工作效率很低，同时人工抄录导致数据错误的的情况也常会出现，最终导致数据分析结果错误。
针对该问题，我们深入思考一下，小A想要进行更全面的数据分析，可以采用以下2种解决方案：
目前我们有两种解决方案可供选择，那我们采用哪一种解决方案会更好呢？
1）采用“新增销售数据分析页面”的解决方案
通过与小A的继续沟通发现数据分析的需求并不稳定，处于变化的状态。当依据小A的需求完成分析页面后，过了一段时间发现产品随着季节变化导致销售额也不稳定，从时间维度的分析数据没有参考价值，可能要舍弃这种分析方式。
此时我们发现，小A的需求可持续的时间极为短暂，不足以支撑一个长期存在的功能，但已经将其实现为功能，则意味着功能白做了或没有产生与成本对应的价值。
2）采用“导出销售数据到excel，通过excel的数据透视功能完成数据分析”解决方案
导出销售数据到excel，可以规避因手动抄录导致的数据分析结果错误问题，同时也会节省抄录数据的时间，提高小A工作效率。
数据导出后，小A可以通过excel的数据透视功能或者其他第三方软件完成定制化的数据分析，即使不开发数据分析功能，也可以满足小A的“更全面的数据分析”需求。
例如，当小A导出如下图所示的数据后：
小A第一步可以先完成不同月份的汇总，在表中添加“月份”字段，添加公式为“=MONTH(A2)”；
第二步：再点击表格中任意单元格–插入–透视表–新建工作表，将省份拖入数据透视表字段的【筛选器】，将月份拖入【行】中，将A、B、C、D产品销售额(元）拖入【值】中；将行标签改为月份，每个字段以求和方法计算并修改字段名称。
第三步：选中透视表中数据，调整格式为加千分位逗号，保留0位小数。
第四步：为了让数据展现可视化，插入透视图。
通过公式筛选、透视表、透视图的使用，小A可以点击查看不同地区、月份、产品的分类汇总数据，可以很直观地反映出时间维度的销售情况、不同地区的销售情况、很好地为产品选择、地域选择做出数据依据支撑。
数据分析功能会从数据源、数据处理、数据的可视化来实现，而Excel的透视表对应了数据明细（数据源），公式能够完成较多的数据计算任务（数据处理）。
透视图可以直观、清晰的展示各类产品在不同月份、不同地区的销售情况及总的销售情况分析，为产品布局提供指导性参考依据（数据可视化）。
另外当小A从数据透视图看到某个月份销售额过高，可以直接点击查看透视表中的数据明细是否存在错误，当小A想查看每个产品销售额的占比，可以新建数据透视表并将透视图切换成饼状图查看。
由此可见，用Excel来做数据分析不仅可以很灵活的满足需求，而且还很实用、很方便，也不会因功能的限制导致对数据无法分析。
通过以上论证，我们发现，既要能够解决问题又要支撑一个长期存在的功能，还要用较低成本以及最快的方式来完成，我们采用最佳的解决方案：“导出”。
既然已经明确最佳解决方案是“导出”，那接下来就从导出的全生命周期看看，如何设计导出功能？
1）明确导出数据限制
无论当前的系统数据量是多少，建议都要做导出条数限制。
因2003版的excel 一个sheet表最多导出65535条数据，2007版的excel是10万4000多条。如果不设限，当用户导出的数据量超过excel单个sheet的数据量时，会出现导出失败的情况，影响用户的正常使用，且产生对系统的不信任情绪。
那应该限制到多少条数据？
我们先来了解一下导出的技术原理，当用户点击导出后，数据会被以excel的形式下载到服务器，服务器再通过网络将文件发送给用户。
在这个过程中，导出条数受限制的原因一个是服务器性能，另一个是用户的电脑性能以及所使用excel版本，在实际产品设计时，根据实际情况，制定一个合理的数据限制即可。
回到开头的场景中，用户不仅要导出数据还要做数据透视表，假设用户使用的03版excel，导出30多个字段，使用大量excel公式，最稳妥的是限制到1万条数据以内。
做了一组极限测试数据供大家参考，使用一台2核4G的服务器、1个用户使用、导出条数是1048576条（导出最大条数）、导出3个字段、使用2010版excel，导出后当使用一个sum公式时，出现了如下图的错误，导致excel异常退出。
2）明确导出格式
数据导出格式有.xls和.csv，.xls是二进制的文件用excel才能打开；.csv是文本文件，用记事本就能打开。而当前用户导出数据后要进行的是数据分析，故只需支持.xls导出。
3）明确导出需求
导出一个excel一个sheet，还是一个excel多个sheet？
考虑到用户导出数据后要对订单数据进行分析，可以与用户明确是否需要按某一维度如客户维度将数据拆分成多个sheet，减少用户操作数据的时间以便能把更多精力放在数据分析。
如果用户不需要按照某一维度拆分数据，则采用导出一个excel一个sheet的方式。
表头是否需要增加序号列？
当用户导出订单数据后，为了让用户准确操作某一行数据，需要有唯一代表一行数据的标记，而在订单导出前是以数据库的主键来标记，对于导出后的订单，则需要自动增加序号列方便用户操作。
是否有内容需要用颜色标注区别？
在导出订单数据中，为了快速掌握销售情况，有些数据是需要特别关注的、而有些不需要。因此，可以使用颜色标注来做区别，让查看人员快速找到自己想要的数据，如可以标注总计快速查看总销售额。
是否需要合并单元格？
对于导出后进行数据分析，不建议使用合并单元格，因excel中合并单元格后仅保留左上角的值如下图所示，这样会使得筛选出现错误，也影响批量的公式使用导致透视表无法分析。
如果导出后只查看数据，可以考虑使用合并单元格。
1）是否需要导出维度
百度释义：维度是事物“有联系”的抽象概念的数量，如时间维度是以时间作为描述、表达变量的度量尺度。
导出维度是指的按照特定场景下，导出以某个字段为主导数据且与该字段相关的其他字段数据。
一般来说，财务和仓库的导出业务场景不同，财务需要以订单维度导出，仓库需要按商品为维度导出，如果无需导出维度，则不需要过度设计。
2）设置表头导出字段
由于订单的一条记录数据字段会很多，包括：订单号、销售类型、客户名称、产品名称、数量、单价、收货人、联系电话、账期、发货时间、预约到仓时间、发货基地名称、发货方式、合同折让率、应收款、已收款、未收款、产季等近30个字段。
而订单分析时，收货人、联系电话、发货时间等字段则无需导出。
因此选择字段导出，可以让客户能够更快速使用并完成分析。导出和查询均要使用筛选，但呈现结果的方式不同，两者的使用场景是可以借鉴的，建议可以放置筛选区。
3）是否需要支持选择行导出
一般来说，导出数据为全量数据，如果用户通过字段选择不出需要的数据，此时要支持用户勾选某些行数据，提示用户当前勾选数据明细及数据条数。
4）其他处理
为了让客户清晰的明白订单是如何导出的，需要在导出时给予导出规则、导出图片、附件形式说明文字提示。
5）根据导出数据量，明确数据处理方式
从技术的角度说，针对较大数据量的导出场景，可以采用异步的处理方式，降低客户的焦急心理。
所谓异步，就是用户点击导出按钮后，后端接收请求并执行读取任务，用户可以不用停留在原处等待，离开当前页面去处理其它工作任务，之后再打开任务页面查看导出结果。
如果有数据可以预先计算，后端可以直接预先计算，同时避免了因采用同步的处理方式导致长时间等待的结果，客户体验会更好，工作效率也会更高。
6）是否需要任务页面
如果用户点击“导出”按钮后，10秒钟内不能完成文件打开，会让用户产生焦虑心理。为了让用户使用体验更佳，需要有一个固定页面即任务页面来承载导出任务列表。
功能，是为解决问题而生，而功能的起源是需求，需求是从场景中找到问题。
由此可见，功能设计流程一定会包含场景选定、问题分析并找准需求、解决方案分析、选定功能、功能设计这5个阶段。
做功能设计时，时刻问自己三个为什么：为什么这是一个问题（问题具备危害性）？为什么要解决这个问题（被解决的价值）？为什么我选定的功能可以解决这个问题（功能的价值）？
导出不仅可以解决文中的“需要更全面的数据分析”的问题，还可以解决“数据离线使用”的问题，导出后，数据以本地文件的形式存在，可离线使用。
另外导出还能解决“数据交付系统外部人员”的问题，导出后，数据以独立文件的形式存在，可以复制，传递。
文章来源：人人都是产品经理 作者：努力的小妖
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
