随着科技的进步和互联网的发展，过去机械的单向交互方式逐渐被打破，用户使用移动端的场景越来越丰富，设计师也开始需要通过主动的观察用户所处的不同场景，感受用户情感，预判用户意图，来为用户提供更智能更便捷更贴心更高效的服务，场景化设计已经融入互联网设计的方方面面，下面的文章当中，我将从三个方向去阐述和列举场景化设计。
随着移动端的不断发展，从固定电话到移动电话，移动端的设计渐渐的融入在用户的身边，深度的跟随着用户，陪伴着用户，慢慢的，开始观察用户，感受用户，在这个过程背后当中，场景设计逐渐产生，设计师通过针对用户所在的实际场景来设计，建立用户与场景之间的联系，给用户带来更贴心，更高效的体验设计。
如今各大产品都在上线了“青少年模式”，越来越多的产品关注到了成人与儿童这两个不同的用户群体，腾讯视频在青少年模式中推出的播放器护眼模式，通过摄像头来获取用户当前距离手机屏幕的距离，当用户离屏幕太近会有提醒并停止播放，当用户位置在正常距离以后，提醒消失。帮助青少年养成合理观看手机，爱护视力的好习惯。
滴滴打车新增了“关怀模式”，在关怀模式下，整体的页面字号放大，在功能上，更极简的打车模式，将复杂的任务拆分为拆分为目标清晰的子任务，并提供清晰的反馈，来方便用户的使用，关怀模式更有利于老年用户以及视障用户使用产品。
产品在体验上的提升不应该仅仅是针对主要群体，跟多的是考虑到特殊群里的体验，以上两个案例，根据不同的年龄人群“青少年和老年”，适应了不同的产品体验模式，让更多的用户群体都能够得到更好的产品体验。
当用户在腾讯地图设置中开启左手操作功能，首页地图上的侧方操作控件会移动到屏幕的左侧，方便左手用户点击和操作，人性化的设计容纳了拥有不同使用习惯的用户。
在地图软件当中，我们通常都会用红色表示路段拥堵，绿色表示通畅，在色盲色弱人群当中，红绿色盲也是比较常见的色盲类型，所以在高德地图中，为色盲色弱用户做了专属的路况配色，贴心的考虑到了特殊人群的体验。
优酷视频在更多模式选择中，为用户提供了“色弱模式”，并有不同色弱人群的细分“红色弱”“绿色弱”“蓝黄色弱”
在饿了么送货骑手中，约8%受色盲色弱的困扰（全国男性群体中红绿色盲色弱占比达8%-9%，饿了么骑手男性占比90%），为此饿了么设计团队在2019年对app的进行了重新设计，包括使用WCAG无障碍色彩对比度，以及无障碍色盘，以及调整字阶，使用辅助图形等设计手段来解决部分骑手在送货途中使用APP的痛点问题。
外卖行业本身就具有一定的时间属性细分，用户早中晚点餐上肯定会有不同的诉求，美团外卖在不同的时间顺应用户的不同诉求来推荐不同的内容，帮助用户挑选在该时间段内的用餐。
美团在一些周末和特殊节日上，用户在不同时间的诉求不同的，相关推荐也会有所不同。
QQ音乐会根据不同的时间，给用户推荐不同的个性化push通知，早上是“每天起床气一句”“最气不过起床气” 冬日是“冬夜需要”。结合用户当前时间段下推荐相关的push，不仅增加了用户的点击欲望，也拉近了和用户的距离，让用户时而暖心，时而感到有趣，这么可爱的push通知，也是辛苦QQ音乐的运营小编了～
在iOS12系统当中，新增了地点勿扰模式，长按勿扰模式的按钮，可以选择“直至我离开此位置”，用户在看电影，会议或一些特定的地点可以灵活的使用该功能。
在使用大众点评时，当我的地理位置在我的常驻地北京时和将地理位置切换到“重庆”时，首页展示的信息和内容框架都发生了变化，产品根据我的地理位置推断出我现在搜索的目标地不是我的常驻地，预判到我可能存在即将出游到当前定位的城市，会直接给我推荐一些攻略，和一些“怎么玩”“”订住宿“”游景点“的旅游攻略向内容。
iPhone在用户接电话的场景下，根据用户所处环境不同，适配了不同的方案。不同的当iPhone处于息屏状态接电话时滑动接听，防止误触；当iPhone在使用时接听电话为按键接听。减少用户操作成本。
在支付宝的收款码扫一扫功能中，用户向他人展示收款码时，手机向下倾斜后，扫码的提示文字和用户的头像会发生旋转，其他功能会相应弱化或者直接消失，以便方便付款人阅读，充分考虑到了现实中的操作环境，保证了双方的使用体验。
支付宝等金融类的产品，在用户开启后台后，会对页面进行高斯模糊处理，避免了后台场景下用户无意中泄漏自己的信息，也防止了被偷窥。（支付宝在页面底端还添加了温馨提示：支付宝全力保护你的信息安全）
在输入车牌省份时，会直接弹出各省/直辖市的缩写专用键盘，并且可以直接进行大写字母与城市简称的切换，降低了用户的输入成本，提高了整个功能的使用效率。
百度键盘在游戏模式下，会接入游戏快捷回复语并自动开启和谐模式，增加趣味性的同时方便了我们在游戏进程中的快捷输入，将九宫格按键进行等比缩小展示，方便用户点击。
Pad OS键盘在使用中，可双指捏合可以快速缩小键盘，然后将它移到合适的位置，即能单手打字，又能给你的app留出更多的空间，并且增加了快速输入的功能，只需要在键盘之前轻扫，即可打字。
情景预判的交互设计是建立在整个产品的框架上和对用户深刻理解上的细节迭代。预判设计主要有两类目的：一是在用户初次体验某种功能时引导用户，避免用户陷入困惑；二是提前判断用户行为，缩短行为路径。新功能引导更倾向于产品功能本身的逻辑和价值，这次我们主要主要讲第二点，提前判断用户行为。
预判设计强调主动性和智能性,是决定产品是否体贴、聪明的重要因素，是走向人工智能的基础，对微交互中的预判设计进行分类研究有助于加深对其了解和认识,进而在实践中应用以提升用户体验。预判设计可以很好的在用户的操作过程当中进行简单高效的引导和预判，帮助用户更流畅舒适的使用产品。
在互联网发展中，产品功能的流程越长，操作步骤越多，越要求用户的理解能力和学习成本更大，耗时也会相应增加。因此体验设计师在理解用户行为的交互设计的基础上能够做到减少冗余步骤，简化操作流程。顺应用户行为的预判设计也可总结为四个字：以简驭繁。抛开繁杂的操作过程，运用更少的任务和行为来达成用户目标。简约不仅仅是视觉的形容词，同样适合行为。
聊天页转账：在支付宝聊天页，很多时候我们想给对方转账，会习惯性的在输入框中输入相应的数字，但在操作错误之后，支付宝会在输入框上方弹出相应数字的转账，点击之后会直接进入转账页面进行操作。对我来说，这个功能已经不是简单的帮助用户纠错，现在更像是一个快捷键一样方便着我们的操作。
手机号转账：当我们复制手机号后打开支付宝转账功能，会弹出该号码的转账气泡引导，提前判断了用户通过手机号去转账的路径。用户可以点击气泡一键跳转到转账页面。
消息页 - 找人转账：在消息页面，当用户开始上滑操作时，会出现「找人转账」的气泡提示，点击进入用户列表的简约页面，去掉了一些生活号服务号企业号等无用的对话框，提高了用户寻找的效率。
一个转账的功能，在不同的页面不同的场景下，支付宝在体验上把用户情景预判设计做到了极致，事实上，用户的行为中渗透了意识。从用户的行为推断用户意图，将用户的意图结果化，结合用户的使用场景，顺应用户的行为，缩短用户的路径，才能给用户带来最流畅的交互体验。
正如《一目了然》中所说，“当一个软件设计得很糟的时候，我们往往能立刻指出哪里做的很差；但一个优秀的软件，你却往往难以解释优秀从何而来”，因为沉浸式的流畅体验为你减轻了很多思考的路径与时间。
在新建收货地址的场景下，填写复杂的地址信息的过程往往都是繁琐而费时的，而设计师在此场景下考虑到用户需要地址的多样性，以及用户行为背后的含义，当用户复制了一段收货地址，打开新建地址页面时，App将主动提示弹窗“是否粘贴刚复制的信息”点击“确认粘贴”即可粘贴收货地址到对应列表项，这种预判设计对于用户来说是自然且让人愉悦的。我们不仅顺应了用户的操作行为，还在其中大大的帮助用户减少了很多操作。
预判设计的主体是用户行为，从用户的视角出发，分析用户行为，是设计师建立在整个产品的交互里路程和功能框架上，对用户的行为深刻洞察后进行细节的改进。
当我们使用电脑时，总会发现找不到鼠标位置的情况，iMac设计师在识别到用户开始连续晃动鼠标时，分析到用户当前的状态可能是在寻找鼠标的位置，会对鼠标做一个放大的效果，帮助用户快速定位到鼠标的位置。
在抖音我们刷到一些连载视频后，我们都会去进入作者的个人页去寻找上下集，在作者个人页作品很多的情况下，可能要寻找好久，抖音在个人页的作品卡片上添加“刚刚看过”的提示，方便了用户在浏览中能够更快速的定位到刚才的视频。方便继续衔接观看。虽然一个小小的功能提示，我们从用户行为，预判到用户的需求，带给用户更方便更快捷的体验。
在美团外卖中用户可以在订单页面直接点击「再来一单」按钮选择和上次一模一样的商品加入购物车，如果一家店没有营业的话那么则会显示一个「相似商家」按钮。
结合实际我们操作的场景，外卖产品，我们重复下单的频率会比较高，当我们来到这个订单页面，「再来一单」的按钮可以更方便更快速的帮助我们下单，但当商家休息的时候，这个时候继续展示「再来一单」按钮对用户来说也是无效的，我们往往会回到首页去搜索相关类似的相关产品，然后再重新下单，而这时候「相似商家」按钮直接帮助用户一键定位到后续的一系列操作，真正的做到在分析用户行为中，预判用户操作。
设计师做需求时，往往需要考虑在特定情景下，用户行为背后的思考与需求。因此符合情景的预判，我们也可称其为“符合用户感知的预判”。思考用户使用产品的情景，及时而高效的迎合用户对于当前场景的需求。
墨迹天气的降水雷达走势图，进入之后，放大、缩小屏幕就可以查看全中国的云图了，墨迹天气的云图可以查看到降水情况、闪电、积雪（冬天才有的功能），并且伴有文字提示，在未来两个小时的天气情况，方便了有出门需要的同学实时查看天气。
在微信聊天功能中，我们可以对两分钟以内的消息进行撤回，但相信大家都有跟我一样的尴尬经历，发了错误的内容想要撤回，却一不小心点了删除，再也没有机会撤回了。
微信在这个功能上做了很好的改进，当我们的发出的消息小于两分钟时，该消息只能撤回，去掉了删除功能，在该消息超过两分钟后，则撤回按钮消失，只能进行删除操作，两个功能进行了互斥处理，很好的避免了这个场景下用户会误触。
当我们选择好评的时候，会自动勾选到“公开状态”，当我们勾选差评时，系统会自动取消”公开“状态勾选，默认匿名发送该评价，很好的保障了差评用户的人身安全问题和个人隐私问题。
当我们在淘宝搜索电脑包时，展示的内容下方会自动展示商品的容量标签“可放14寸电脑”，帮助用户在列表页面就能筛选到更合适自己的商品，当搜索玩具时，也会展示当前商品适用的年龄段。产品根据用户搜索的内容，自动匹配能够帮助用户进行筛选的标签。
预判设计当中我们从三个层面进行了分析，从顺应用户行为的预判设计，到分析用户行为的预判设计和符合用户行为的预判设计。一个好的产品，往往会更多的使用用户语言，通俗易懂地让用户可以对整体的使用方式一目了然，而不是产生一系列的问题，迫使用户停下来，进行不必要的思考。用户的每一次停顿对我们来说可能都是一次用户流失。而预判设计要做的，是根据用户的行为/用户所在的场景，让功能主动找到用户，并让用户与之产生自然的交互。
场景化设计中，以情感化为目标的设计同样需要具体场景具体分析，通过细节上的改变使得产品在当前场景下能够与用户产生更多共鸣，主要从细节出发满足用户在当前场景下的情感需求，让用户感动，给用户惊喜。
其实用户在使用产品的过程中，同样渴望在使用产品时能够得到情感上的互动，这反映在设计上即是产品情感化设计。情感化把握得好的产品往往更能抓住用户的心。
躺平是一款阿里旗下的生活方式APP可爱的小人和拟人的语气，设计师让每一个空白枯燥的空页面瞬间变得可爱和有趣起来。
快手在每一个特殊的节日都会给用户送来精美的开屏祝福，让用户在节日当天打开app就能接受感受到产品满满的心意和祝福。
在用户生日的这个特定时间和特定场景下，很多产品都给予了用户不同的生日祝福，B站是一张有关于星座的动漫海报，快手给用户定制了专属生日开屏，网易云音乐的每日推荐为用户献上生日快乐歌，不同的产品结合自身不同的产品属性，给一位用户都带来了不同的生日祝福。
想必大家都有熬夜刷剧的经历，在腾讯视频中，在全屏模式下点击退出清屏模式下，页面上方的时间旁边会显示夜深了，只是简简单单的三个字，这深夜在这个场景下，感觉内心也有一瞬间被人关心的触动，体验了一个产品的人文关怀和对用户的体贴。
QQ音乐的绿钻到期挽留弹窗真的是别出心裁，推荐了4首歌曲，连起来就是VIP我们舍不得重要的你，用歌曲的的名字来表达对用户的诉求，趣味化的设计让这个小小的挽留弹窗不仅没有感觉到打扰，还感觉很有趣。
当有特殊天气时，我们打开美团外卖的配送页面时，页面会在页面中做当前天气的拟实物效果，下雨天整个页面也是下着大雨，下雪天整个页面飘着雪花，甚至雾霾天气整个页面是是伴着黄黄沉沉的云，设计师预判到用户打开该页面是想看外卖到了哪里，看到外面的天气如此糟糕，大家都不忍心催促外卖小哥了，大大减少了特殊天气下配送不及时的投诉率。
在B站输入密码的时候，页面上方的小人会遮住眼睛，潜台词：我不看，你放心输入吧。在输入密码的情景下，设计师用趣味生动的卡通形象给用户带来了更信任更安全的感知。
黄油相机的加载动画，是一个可爱的切黄油的小人，并且加载当中的文案，会告诉用户当去前正在加载的内容是什么，能够让用户对于加载的时间有预期，让等待加载的过程不会枯燥。
苹果新增 13 个与残障人士相关的 emoji，包括导盲犬、轮椅、义肢、戴着助听器的耳朵等。有意思的是，苹果不仅按照以往的做法为涉及人物的 emoji 按照性别和肤色提供多个版本，而且在表示辅助器具的 emoji 中还做了细节上的区分，比如轮椅有手动和自动之分，不同导盲犬的导盲鞍样式也有所不同。
回看历年苹果emoji的更新，从肤色平等，到性别、性向平等，再到为残疾人设计，这让我想起了苹果为残章人士做的广告 - 科技属于任何人
最近，快手B站豆瓣等都陆续上线了“纪念账号”，产品的意义不仅仅是留住生者的精彩瞬间，更多的也是留住逝者的人生印记，对已故用户的账号进行保护，豆瓣在已故账号上做了悼念用户的活动“在他/她的头边放一束山茶花”的方式来纪念已故的用户。
腾讯公益的404页面，这个项目的灵感源于欧洲失踪儿童联合会主导的，名为“NotFound Project”的网络公益工程。就是利用404页面展示那些被拐卖儿童、失踪儿童的信息，帮助那些孩子重新找到家人。
丁香园404页面界面展现了因恶性医患遇害的医生同道，文案是“你所访问的页面就如那些遇害的同道，已离我们远去。”下面还会有这些白衣天使的照片和名字。以这样的方式悼念亡者，也侧面展现了丁香园的社会价值。
在页面走失的这种特殊场景下，404页面视作可被利用的空间，来呈现公益信息，这种方法暂时减弱了用户对产品页面走失的愤怒，将注意力转向对弱势群体或社会问题的关心，侧面感受产品的社会价值，这种方法适用于社会公益性质或相关业务的产品。以上的腾讯公益和丁香园对于这块的设计都是很好的案例参考。
在快手搜索一些负面的情绪词汇时，会提示用户“别怕，我们都在”。并附有24消失免费心理危机咨询热线，从推荐位banner点击后会进入一个群聊，里面都是其他用户留下的暖心话语，这些情感化的设计让那些正在经历困难，或者想要终止生命的人传递以温暖。我们可以帮助你，你并不是孤单一人。微信/知乎等搜索引擎下都有不同的对于该情况的情感化设计。
在京东搜索穿山甲，会直接挑战到保护濒危动物页面，传递出了一个企业对动物的保护意识。页面中的穿山甲≠治病，向全民科普濒危动物的现状和对于人们对于野生动物的错误认知。淘宝更是对野生动物保护启动了绿网计划，搜索穿山甲/象牙等都会进入到该活动页面。
情感化离不开场景化设计，上面四个案例分别是两个404页面以及两个搜索引擎的不同设计，不同的产品赋予了不同的含义。不同的场景下设计师也需要有不同的思考，陪伴产品一同进步。
情感化设计更多的是带给用户瞬间感动，很难形成长期的用户激励或用户增长，因此情感化设计主要目的是通过情感累加，提升产品品牌形象；产品不仅是所有功能的集合，他们真正的价值可以是满足人们的情感需求，而其中最重要的需求就是建立自我形象与社会地位。 反思层是包含并超越前两个层次，我们要经常思考，为什么同类型的产品，我们要选择它，为什么它给我留下了很深刻的印象，这都是反思水平的设计需要做的。
文章来源：站酷 作者：刘狗蛋
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
对第一回还有印象的朋友应该知道，平面设计的定义简单说来就是：“以某种法则，将文字、图案、摄影图片在平面空间中进行编排设计，以达成信息传达或者行为引导等目的的活动”。
△ 图文结合的平面设计作品
这个定义大致在 1970 年代才成熟，但相信随着科技进一步发展，这个定义还会修正变化，但当前可以肯定的是，平面设计中有三个核心元素，分别是文字、图案跟摄影图片。
文字跟图案都已经历史悠久，其中图案最早，文字次之，而摄影则到了 19 世纪中期才被发明，发明之前有着漫长的酝酿演变过程。
△ 图文结合的平面设计作品
我们本次一起来了解一下摄影术的诞生过程，还有其对平面设计发展产生的一些影响。摄影术的发展其实主要分为几个阶段，史太浓把他们总结为三段，分别是：
根据历史记录看来，欧洲在古希腊时期就有人尝试捕捉真实世界的影像，这个人很知名，就是大哲学家亚里士多德（Aristotle）。
亚里士多德发现的其实就是“小孔成像”原理，物理课大家有学过，因为光是成直线射入的，当人站在小孔前，头部挡住上面的光，成影在下边，脚挡住下面的光，成影在上边，所以成像是倒立的。
△ 小孔成像原理
神奇的是，跟亚里士多德接近同期的中国思想家墨子也同时发现了这个情况，并且比亚里士多德还早一些做了这个实验，记录在「墨子·经说下」书中，这种文明发展不约而同的状态非常多，很难解释，似乎冥冥之中自有主宰。
△ 墨子关于小孔成像原理的研究
随后有艺术家基于这个原理制作一种叫“暗箱”的东西来辅助自己进行绘画创作，这样可以高效的画出相当准确的图形来，好比我们设计师有时候也会使用“透写台”辅助临摹一样。
△ 画家制作的暗箱装置
时间一直去到 19 世纪初，有人基于这个“小孔成像”原理完成突破性探索，他就是来自法国的约瑟夫·尼伯斯（Joseph Niepce）。这个突破性发展跟一些现代材料的发展密切相关，就是他尝试将一些感光材料涂在暗箱的平面上，通过曝光的化学变化尝试将影像捕捉下来。
△ 尼伯斯的摄影探索试验
这种方式被认为是最早有记载的摄影技术，尼伯斯将这种方法命名为“阳光腐蚀法”（sun engraving），通过这个方式尼伯斯在 1822 年制作出世界上最早的人物摄影作品，名为《红衣主教》。（Cardinald Ambroise）
1826 年他再如法炮制，完成世界上第一张风景摄影，拍摄的就是其房间窗外的街道，图像朦胧不清，但是完成了历史的突破。
尼伯斯本身是一名印刷家，他这方面的探索动机其实是为了寻求一种替代手工插图的方法，以提升印刷效率，因为手工插图不但时间长，成本也很高，比如要邀请技术精湛的艺术家创作。
不幸的是，尼伯斯的探索还没去到实用性阶段本人就因为心肌梗塞在 1833 年去世了，幸好此时他已经有了一位合伙人，可以继续他的研究，那就是画家出身同为法国人的路易斯·达贵尔（Louis Jacques Daguerre）。
△ 路易斯·达贵尔
达贵尔基于尼伯斯的探索基础进一步深化，首先改善感光材料，比方使用银金属成分的感光版，同时优化制作过程，对感光后的银版再做工艺处理，出来的摄影效果让精确度大幅提高。
1839 年时候，达贵尔采用自己打磨了 7 年的技术对巴黎街景进行拍摄，出来的效果可以说非常好，清晰度很高，让他非常振奋。
获得这样的成果后，在一些经商朋友的建议下，他果断向法国科学院呈报自己与尼伯斯的摄影研究成果，科学院的院士看到作品后大为震惊，一致表示肯定，而且迅速向全世界自豪的宣布法国人发明了摄影术。
与此同时，达贵尔也马上开始努力的推动摄影术商业化，首当其冲的自然就是生产“摄影机“进行销售，因为有法国科学院支持，过程很顺利，第二年就生产并卖出 50 万台，让达贵尔一下子名成利就。
△ 达贵尔相机
△ 达贵尔相机拍摄的作品
这事情让一位叫塔波特（WilliamHenry fox talbot）的英国人气得吐血，因为他早在 1833 年也开始探索摄影技术，并且在 1835 年就设计出一种小型摄影机，可以拍摄到很小的物体。
其原理连暗箱都不需要，属于一种化学反应的直接曝光，产生的图像是黑白负片，但是很精确，他获得这些成就后居然不认为有商业价值，所以丢在一旁好几年。
△ 塔波特相机拍摄的作品
当通过媒介听闻达贵尔的事迹时候，他匆匆将自己的技术向英国皇家学院汇报，英国人也赶忙向世界宣布发明了摄影术，但也只能成为发明者之一，而并非世界第一了。
△ 很不开心的塔波特
但塔波特痛定思痛，发力追赶，1840 年时候更新了感光材料，居然可以将感光之后的底片取出来在暗房冲洗，也发明出负片变成片的方法，虽然多了一道程序，但是得到的效果完胜达贵尔相机，正负片这样的摄影方式一直到 20 世纪 90 年代都还存在着。
△ 塔波特相机完成的作品
正负片的核心竞争力在于可以无限复制，而达贵人尔的银版摄影只有一张图片，所以塔波特相机的商业价值也完胜达贵尔，真正做到后来居上，可见事在人为啊。
上一期说过，当一件事情体现出商业价值，就会吸引到一大堆能人参与，让事情的发展速度快速提升，摄影的发展也不例外。1880 年时候有人发明出干底片，因为之前的感光材料都是湿涂的，很不方便，再后来就是大家感觉相机体积太大，一起去研究怎么变小。1888 年世界第一台小型照相机出现，发明者叫乔治·伊士曼（George Eastman），后来他成立了一间公司，就是大名鼎鼎的“柯达公司“（EastmanKodak Company）。
△ 乔治·伊士曼
△ 柯达公司 EastmanKodak Company
柯达公司同时也主力生产后来风行世界的胶卷，记得小时候我还能在家里找到很多这样的小圆筒包装的胶卷，很后悔没有好好保存一些下来，现今的还能零星找到的卡带在不久的将来也会消失，建议大家可以收藏。
首先将摄影与平面设计结合的是美国人约翰·莫斯（John Calvin Moss），他在 1871 年时候首先尝试将有影像的底片投射到有敏感感光材料的金属版上，通过腐蚀获得正片样式的画面，这个金属板就可以直接用于印刷，从而获得插图。
这种方式比金属雕刻与木刻插图都快很多倍，而且成本低，制作出来的插图非常真实，还有一种特殊的类似钢笔画一般的艺术效果，广受社会大众的欢迎。
△ 莫斯结合摄影技术制作的印刷品
当摄影技术走向成熟的时候，有一些艺术家也开始尝试基于底片为蓝本，将其再创作为版画，这样就获得了准确与艺术化的平衡，而且效率也很高。
世界上现存最早以摄影底片为蓝本创作的木刻版画作品叫《里什蒙运河边的自由人》（Freemen on the Canal Bankat Richmond）,创作时间是 1865 年，主题是一个黑人家庭合照，大家可以看到有很好的艺术韵味。
△ 《里什蒙运河边的自由人》
而大部分印刷厂也在探索怎么直接将摄影图片印刷在纸张上的方法，据闻这种方法其实约翰·莫斯已经掌握，但一直高度保密，没有释放到商业应用中。到了 1880 年时候，美国的《纽约每日图画报》第一次以摄影直接制版方法刊载了一个城镇风景照片，因为地位特殊，这张印刷照片也历史留名，叫《尚地镇的风景》（A scenenin shanty town）。
△ 《尚地镇的风景》
我们从图片细节看来会发现图像好像由一个个小点构成，如果这样就对了，因为这种印刷照片的方法就是大名鼎鼎的“丝网制版”。这种方式是把摄影底片通过丝网照射形成很多细小的格子，格子黑白明暗程度不同，在感光底版上通过曝光就形成金属印刷版，继而就可以将照片印刷出来。
这种方式慢慢被不断优化，越来越多印刷厂都广泛采用。
△ 丝网制版与印刷
当摄影可以顺利变成印刷品后，其媒介地位日益提升，因为采用照片方式做插图有很多好处，其一是节省成本，其二是真实，其三则是效率很高。
所以摄影作品就跟之前任何一种媒介形式的发展路径一样，从追求有到追求好，再由追求好变成追求个性，大家都在努力探索一些新鲜的摄影方法，如今单纯摄影的学问绝对不比平面设计低，而且两者之间的关系非常密切，很多法则也可以相互引用。
世界上第一位探索人造光源摄影的人是来自法国的纳达（F.T.Nadar），他在 1886 年做了世界上第一次摄影采访，对象就是我们在「风格列传」新印象派篇谈到过的化学家谢弗勒尔（Michel Eugene Chevreul）。
△ 纳达采访谢弗勒尔
过程中完成了 21 张由人造灯光配合的现场照片，最后配以文字发表在法国刊物《插图杂志》上，让那一期的刊物销量大增，因为读者可以配合生动的照片更好了解内容，当时而言显得非常有趣。
从此之后，照片与平面设计的关系变得越来越重要，越来越多平面设计师也开始进一步探索照片与排版之间的法则。
前人早已总结了让动画生动的技巧，早在1981年由两位迪士尼动画师所撰写的《The illusion of life:Disney Animation》一书就提到了动画的12项基本法则，该法则也是受用至今。法则虽是针对传统动画而制定，但对于我们日常需求中所接触的动效/动画需求也同样受用。
1）动画原则介绍
2）结合案例应用原则
3）流程方法论沉淀
4）结语
挤压与伸展是我们最常用的运动技巧。使用挤压与拉伸来强调物体的质感、重量、速度。挤压和拉伸会给予物体运动时具备质量感和体积感的错觉。例如当一个皮球正在进行下落运动，在运动过程中让皮球体积产生一定拉伸来表现它的速度感，皮球落地后则因力的作用产生挤压变形。
挤压与伸展的幅度影响着物体的质感、重量。设计师们可根据物体的质感去决定挤压伸展的幅度。动画虽存在夸张性，但对于物体挤压拉伸的体积尽可能保持视觉统一，避免较大的体积误差导致运动的突兀。
预期动作可告知观者物体运动即将发生，增强观者的场景代入感，使运动更加生动真实。如果我们去除前期的预备过程物体所呈现的运动感知像是突然被前方磁铁所吸引。
预期动作可对观者视线进行引导，设计师可以根据预期动作所引导的方向来衔接镜头/场景的转场。反之预期动作也可以用来欺骗观众，当用户预期与画面不符时也可增加动画舞台的趣味性。
每个角色/运动元素在运动过程中都会流露出独特的态度和气质。针对不同的角色/元素的运动特性运用不同的运镜、表演技巧、时间节奏以及舞台的编排技巧，传递贴合角色/元素气质的动态感知。
在现今动画工作流程中，考虑到流程效率及技巧利弊，我们可以使用两者相互结合的方式。关键动作描述的是设计师们熟知的关键帧动画的方式（类似AE）。在动画设计前进行基本运动的关键动作提炼，再进行细化，一层层的递进。底层的关键运动越完善，在后续添加细节时才不会耗费大量时间调整。而对于持续动作（逐帧动画）的技巧，我们可以利用它处理一些复杂效果例如（涉及到运动空间的变化、形状上的灵动变化等）。
逐帧动画。
优点：自由且流畅的动态。
缺点：难以把控时间长短、体积大小。
关键帧动画。
优点：清晰、可靠、规范。
缺点：修改成本略高。
跟随动作指的是元素运动结束后不会立刻停止，会因为质量、惯性等因素，元素会慢慢进行振动减幅的过程。重叠动作则指的是运动不会同一时间发生，主体与附属部分的运动会因质感、外力等因素产生不同的速率。
当一个人跳跃的时候，自身的衣帽等附属物也会随之摆动。跟随&重叠动作反应着运动的力量感和速度感，利用好跟随与重叠动作，可以更好地表现角色/元素主要动作/运动。当主要动作/运动力量大、速度快的时候，跟随与重叠的物体运动幅度大，反之则运动幅度小。
真实世界的运动遵循着缓动运动的规律，而并非匀速运动。根据物体运动情况、动态质感去编排元素合适的运动速率。关于运动的速率编排相关内容，可以看看过往的文章-《动效的质感》。
仔细观察可发现自然界中的运动多为弧形运动的组合，而匀速运动只存在于机械运动中。
在人物运动过程中使用弧形运动增添角色动画表现力。比如当人物抬头或转头时，通过弧度的变化映射人物的情感，是充满好奇心的还是沮丧的。
在交互动效中，弧形运动路径会给予观者运动表现力较年轻活泼的感知隐喻。设计师可根据品牌调性及产品属性去选择运动路径类型。
当主体在运动时，设计师可通过附属物运动来辅助表达主体运动气质。比如人物敲门时，捏紧拳头的敲（代表生气）与翘起兰花指敲的（代表精致）区别。
在上篇文章其实我们有提到影响动效质感的原因之一就是时间，控制好物体的运动时间也是表现良好动画节奏感的关键。
使用「时间偏差」的技巧，可以让你的动画更加生动。因为受力、质感等因素影响，主体运动时附属部分的运动不会同时发生。比如当人物正在打哈欠时，首先是从嘴巴发力，再扩散至五官眉毛。
为保持动效的连续性以及营造自然流畅的交互体验，适当的使用时间偏差，可避免动效元素变化过程出现空档期，提升信息传递效率减少认知负荷。
通过夸张手法增添动画表现张力，加强运动元素的吸引力令动画更有代入感和戏剧性。
动画设计时可通过营造镜头透视感、景深感模拟真实的空间感打破二维扁平视觉效果，提升画面表现力。
一部好的动画作品一定会有令人吸引的人事物，比如动态气质或视觉风格等它们都能很好的吸引观众。除此之外，如何讲好一个故事，通过趣味幽默的故事表达手法也可以增添动画的吸引力。
通过对十二大基本原则的学习，我将技巧分为以下两大类：设计技巧和表演技巧。
设计技巧：动画设计的技法，增添动画细节令动画表现更生动自然。
表演技巧：舞台表演的技巧，提升动画舞台全局的表现力。
接下来我们结合上述所提及的动画原则，根据实际案例进行结合应用。一起来探讨下当接到动效设计需求时，我们需要思考哪些点？才能使我们的动效表现力更上一层楼。
假设在项目中我们需要对设计元素（猪猪存钱罐）添加动效以提示用户已省钱成功的情感氛围。设计前我们先来分析下元素以什么动态/动作表现会更贴合元素性格。考虑到猪猪的可爱属性，采用了跳跃的运动方式。并拟定了跳跃后天上落下金币的动画脚本。
将脚本确定后，我们在脑海里已经有大概的运动画面。但在进入动效设计前，还需要明确在动画中使用哪些动画原则来提升动画生动性。
在添加动画细节前，我分享下在项目中经常用到的两个技巧。
实现挤压与伸展的方式有很多种，最常见的是直接改变物体的缩放比例或形状路径来实现。但在设计项目中我们往往会遇到非矢量的设计元素，利用xxx可实现图层的弯曲扭曲等变形效果。
质地坚硬的物体受外力的影响较小，质地柔软的物体受外力的影响较大。而像猪猪这类柔软的物体在恢复静止吋肉肉会有一个跟随&重叠动作（抖动）。在处理这类抖动的效果除了使用常规的弹性表达式外还可配合使用AE的 CC bend it 效果增加形变细节令物体运动更为生动自然。
当我们去除这些动画原则后，再去作对比明显的感知差异就出来了。
根据过往项目经验，我总结了动效/动画设计的流程思路。从业务目标的分析到动画脚本的确定，层层递进。前期的目标和框架确定后，之后进行动画原则的梳理及最后的动效输出。设计师们不妨在项目中尝试上述的流程思路及原则技巧，将自身动画的表现力提升一个档次。
随着动画/动效的落地方式愈来愈完善，像Lottie、svga等新型的动画落地形式所带来的高品质画面呈现。设计师们不能满足于动画仅仅只是动那么简单，如何去塑造生动的动画形象还有不少我们需要考虑的细节。恰好前人总结了相应的原则技巧，帮助我们站在巨人的肩膀上看得更远。除《The illusion of life:Disney Animation》外，近期也在阅览《动画师的生存手册》里面涵盖了不少关于角色动画的运动技巧及细节。其中部分技巧并不局限于角色动画的设计中，下期文章我将分享关于角色动画的知识沉淀内容。
文章来源：站酷 作者：Fiasc1
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
图标风格汇总
图标设计流程
案例讲解
图标资源输出
线性
面型
线面
单色
双色
渐变
不透明度
一笔成形
断点
该风格设计感和个性都极强，很考验设计师对造型绘制的把控，功底不够就很容易导致设计后出现识别问题。所以设计难度较大，且延展性较弱，难以表达复杂语义，使用需谨慎。
单色
双色
不透明度
晶白
磨砂玻璃
等轴侧（2.5d）
渐变
新拟态
轻质感
明暗质感
写实
抽象
卡通插画
像素风格
面型不透明度风格，通过调节前后不透明度可以带来较强的空间感，使用场景较广泛。
晶白严格来说也算质感图标（白色质感）的一种，常见于品类图标设计，通过透明度、投影、渐变等参数调节，使整体立体感和空间感都很强。
又叫毛玻璃风格，是通过背景模糊，或剪切模糊图层的技法来表达通透、有层次、精致的视觉感受，但由于容易与浅色背景相融，造成对比度不足难以识别的问题，所以在使用中需要注意无障设计。
也叫2.5d，有很强的趣味性，及识别度，适合重要入口或运营设计。但这类风格较为卡通，且表现花哨。使用需要注意应用场景及目标人群年龄段，避免干扰信息阅读和不符和产品风格。
这类风格可以很好的吸引用户注意力，在电商、美食类产品中较常见，主要注意配色干净协调。
新拟态图标色彩相对单一，与背景融合度较高，通过高光、投影表现一定的立体感。通常是整个产品就是新拟态风格时才使用。所以该风格局限性较大，再有这类风格与背景对比较弱，无障设计问题较大。
通过大量渐变、投影来表现立体感，整体风格偏年轻化，常见在教育类产品中，使用注意配色干净和谐。
通过调节同一色相不同明度、饱和度来营造前后空间感，整体风格统一。
这类图标特点很明显，有极高的识别度，目前美团外卖品类区入口就是该风格，整体偏年轻化。主要考验设计师造型绘制、技法表现能力。
通过几何图形组合、色彩使用来表达美的视觉感受。这类图标艺术（装饰）价值更大，不追求识别度，美观即可。
这类风格既可以做图标又可以做空状态插图，设计美观有特色即可。
这类移动端界面较少见，目前只在一个海外电商产品（Jollychic）中看过，还有就是一些像素游戏中，比如「泰拉瑞亚」、「我的世界」。
线面
描边插画
粗线
细线
圆角
直角
力量感、稳重、男性等感受
安全、亲和、年轻
由于图标风格繁多，所以以上列举并不包含所有图标风格。
明确语义
关键词详解发散
确定风格
提取造型
创意输出
图标存在的目的是起引导作用，在丰富页面视觉的同时，帮助用户更快的获取信息（当然图标的使用意义还有很多）。设计师在将文字翻译成图标前，必须先理解其文字含义。因为最终呈现的图标，需要用户一眼能准确反翻译其中含义（艺术抽象、装饰类图标除外）。
在C端设计中，以Tab为例，一些常见文案：首页、分类、发现、我的，这类语义还算比较清晰的。但在B端设计或工具类APP中就会遇到一些复杂语义。以我的工作来说，目前在做一款网站搭建工具，后台常会需要设计组件及对应的图标，比如：滑动商品、多图列表、上拉图文列表这些语义比较复杂的图标，在一定程度上会比较难精准传达文案。
这一步有点类似情绪版使用，但不同的是：我们需要将确定的词（A)进行详细解释，再将解释文案中关键的词语进行发散，得出一系列相关联的词（A1、A2、A3…）。有时间还可以根据这些词找到对应的图片，再看在这些相关联的图片中，有哪些细节可以传递最开始我们确定的那个词（A）的意思。
我们可以借助情绪版，根据产品定位和目标用户描述，再结合应用场景，在目前已有的风格中找到符合产品气质，符合当前模块视觉层级的图标风格。
前面我们已经了解了目前常见的图标风格有三大类：线性、面型、线面，其中还有很多细分，比如在线性中又分粗线（沉稳、力量）、细线（品质）、曲线（女性化），还有圆角、直角，每种类型所传递的感受都不同。在创意前期，我们将每个点合理进行随机组合（如下图）即可创造一种更新颖的风格。
经过关键词详解发散，其实我们已经获得了很细节点，接下来将这些细节点进行合理融合后，就可以得到代表同一语义但形式各异的基础图标样式（此时还只是想法阶段，可以通过手绘方式记录组合形式，不用特别精细化）。
图标设计规范
图标设计注意点
常见图标尺寸
图标盒子使用
在界面图标设计中最常用尺寸：12x12、16×16、24×24、32×32、48×48（其他尺寸：64×64、96×96、128×128、256×256、512×512）
图标盒子即图标约束网格，来源于Material design。使用图标盒子有利于使我们创造的系列图标保持规范与统一。
简洁美观
易于识别
细节统一
像素对齐
视觉大小一致
饱满透气
融入品牌基因
图标是否美观，会受设计师对图标造型把控、图标构成元素比例、配色等设计能力影响。在UI界面功能图标设计中，通常会尽量减少不必要的细节，降低图标复杂度，来帮助用户快速识别。当然图标也有丰富细节的做法，常见在一些重要运营入口上。
识别度的问题，在最前面明确语义中就有提到过，这里就不赘述。
在细节中包含：表现风格、描边粗细、端点类型、圆角大小、斜角角度、配色、投影参数等（不同风格图标的细节不同，这里只是列举部分），上述细节在系列图标中都应保持一致。
在图标绘制中，需尽量避免坐标位置xy或宽高参数出现小数点，以此保证最终导出的图标是清晰的。
由于不同图标外轮廓不同，就会导致哪怕在物理大小上相同的图标（假设都是24x24），但视觉上可能还是会给人大小不一致的感受，因此我们需要借助前面提到的图标盒子进行约束调整。
图标的饱满透气，不一定需要加入很多笔画（描边、装饰等）细节。而是尽可能在形成风格的同时，简化能影响识别度的关键笔画，通过调节笔画大小、长短、位置使图标达到一个最平衡状态。
以如下途牛_我的页面_功能区图标为例：
图中标红图标就存在饱满度不足，及内部较拥挤的情况，第一感受是看起来不舒适，品质感比较低。除此外，还存在如下问题：
图标大小很明显不一致
设计语言不统一，有圆角有直角
图标风格不一致，有透明度+分割形式（我的保单）、有纯透明度形式（专属顾问、我的收藏）、还有其余单色实心形式
在图标中融入品牌基因可以有效的提升产品品牌感，作为高阶设计师必备技能之一，常见提取维度：
颜色
设计语言
以我之前的豆果美食项目为例，提取到如下细节：
根据提取到的基因，最终得到如下两套风格不同，但语言相同且都具备品牌感的图标。
Logo轮廓：在图标中融入品牌logo外轮廓（Google Play），或根据logo轮廓结合应用特性进行延展（Microsoft）。
根据文案进行详细翻译，帮助我们充分理解文案。
释义：有专门的知识或经验，受聘为机关团体或单独个人提供专门咨询的人。
提取释义中关键信息，生成关键词：专业、专人，再根据关键形容词发散一系列具象名词。
根据产品调性和模块视觉层级以及考虑延展性，初步确定如下风格组合起来是比较适合：
在实际查看中，发现Tab的风格为单色+不透明度+断点风格。
为了和Tab拉开差异，最终确定以如下风格进行组合表现比较符合产品调性：
线性：双色
面性：单色、双色、不透明度、轻质感、明暗质感
线面：线面
通过手绘或大脑想象进行造型构思，这里我就不展示手绘过程（行吧，我承认就是画的太丑了不敢放）。
由于不同风格对图标造型构思有所影响，且图标类型很多，不同特点组合起来样式更多。案例精力有限，所以只以线性双色风格做演示，希望大家灵活使用。
这一步就是将手绘图形矢量化，在矢量化创意过程中，我们可能会对手绘的图形进一步简化细节或新增造型，这都很正常。只需注意在整个绘制过程中遵循图标设计规范，以及注意图标设计注意事项即可。
图标盒子使用
创意输出
Tips：
1or2？
最后对专属客服进行多风格尝试，最终效果如下：
附上部分绘制过程中的淘汰稿：
SVG：缩放无损、体积小、支持前端样式修改参数、单色情况下方便前端修改颜色来表达图标状态，减少重复上传。
PNG：支持透明格式
JPG：兼容性强，适合大尺寸高饱和度图像
GIF：动态图标使用，缺点是透明情况下边缘容易出现锯齿。
这里主要介绍静态图标中，svg格式在工作中如何输出给前端同学使用（借助iconfont）。
1、图标资源优化
在iconfont官方绘制指南中有描述，在导出前需要按如下规则优化图标资源：
2、选中图标导出svg格式
以Figma为例，优化图标资源后，选中图标将输出格式选择为导出svg。
3、上传iconfont
在资源管理下，选择需要上传的位置。
去除颜色并提交：适合单色图标，去除颜色提交可以方便前端使用代码修改参数，减少不同状态图标重复上传。
保存颜色并提交：适合多色图标（注意：在单色情况下，选择保留颜色提交，前端则无法通过代码修改图标颜色）。
最后当我们把图标都上传好后，就可以将前端同学拉入团队项目中开心进行玩耍。
文章来源：站酷 作者：幺零三
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
此时下载的文件为完整不压缩的开发版本。如果在开发环境下，推荐使用该版本，因为该版本中包含所有常见错误相关的警告。如果在生产环境下，推荐使用压缩后的生产版本，因为使用生产版本可以带来比开发环境下更快的速度体验。
<script type="text/javascript" src="JS/vue.js"></script>
注意：引入Vue.js的 script 标签,必须放在所有的自定义脚本文件的script 之前，否则在自定义的脚本代码中应用步到Vue.js。
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>
注意：为了防止出现外部CDN文件不可用的情况，还是建议用户将Vue.js下载到本地计算机中。
npm install vue
注意：使用NPM方法安装Vue.js需要在计算机中安装node.js。
node;js官网：https://nodejs.org/en/，通过node.js官网下载之后，傻瓜式安装即可。
利用Vue.js进行前端框架开发的常用工具有如下几个：WebStorm、IDEA、Vscode
前端框架开发常用的工具下载：
（1）WebStorm官网：https://www.jetbrains.com/webstorm/
（2）IDEA官网：https://www.jetbrains.com/idea/
（3）Vscode官网：https://vscode.en.softonic.com/
转自：csdn 作者：小白_xm
移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。
接下来为大家分享六款精美的app UI设计案例：
--手机appUI设计--
更多精彩文章：
关键词在关键词布局中需要出现的位置:外链、内链、页面标题、描述、页面导航栏、首页、栏目页、专题页、详情页、图片ALT。以上主要是针对关键词布局展开的需要优化的细节，其实对于SEO排名因素在明面上至少有一百多条，往往我们只是做了其中的几条，而忽略了很多其它SEO因素。每个关键词的出现位置、出现次数合理，关键字的出现才会让用户体验得到提升，才能锁定精准的流量。
文章来源：北京SEO
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一切都是有一定的规律性。要是你行动太快，只会致使相反的结果。这里分享了SEO优化的原因和解决方案，希望对您有所帮助。
文章来源：北京SEO
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
每天努力的用心的去做设计，挺开心的，其中最开心的细节就是“思考自己的设计如何与别人的不一样”，让你的差异化产出得到认可后，这将是一件非常非常幸福的事情。
今天和大家分享一个前一阵子做的小案例，做的一个直播货币，名字叫星币。
思考过程如下：
其实“星币”可发散的空间很小，因为已经非常具象了，无非就是星星、和钱币。
我们可以看下大概的感觉：
但是如果按照上面的感觉做，那最后出来的效果一定很常规，这也就有了我接下来的思考。
我们仔细观察，一般参考中的星星都是非常规矩的，无非就是尖角圆角的区别：
要么就是胖瘦的区别：
所以这次我打算做一个不那么规矩的，有点跳远的感觉、又有点星火的感觉，所以我把星星的一个脚拉长：
然后再把两个胳膊往上抬一抬：
这样就好像是一个跳跃的小人一样，会相对来说活泼一些。
接下来为了让整体更加和谐，我在钱币周边挖了一个小口：
目的就是配合那只伸出来的脚，让整体感觉更加巧妙一点。
其实星币很容易联想到金黄色，如果按照这个设想来做，那就会比较普通，所以我选择让他和直播、社区的配色一致：
这样在颜色方面也就有点自己的调性了。
刚才不是说让这个星星看起来像个跳跃的小人嘛，那一般人都有表情的，所以我们完全可以再加上一个可爱的表情：
让整体更加生动形象。
当然，如果星币在面积小的场景下是看不清表情的，所以需要做成两种，一种是有表情的， 一种是没有表情的。最后，还可以再做个有质感的：
后来发现质感做的有点脏，于是又优化了一下质感，效果如下：
整个构思和执行的过程还是可以的的，也得到了大家的认可，不过很可惜的是，后来名字改了，改成了能量币，哈哈哈哈，通过能量，我又联想到了太阳，太阳能嘛，执行原理都是一样的，大概效果如下：
文章来源：优设网 作者：菜心设计铺
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
我们今天主要来讲4个主题：
1.颜色使用的误区-红色的警示含义
2.功能即按钮？-两者的区别与设计思路
3.设计中的样式-情理之中，意料之外
4.产品体验案例收集-宁缺毋滥
5.减少步骤就能提高转化？-少即是多，多即是少
所以，这篇文章还挺有意思的，大伙读读看
最近有多个小伙伴来问问题，老师， 我的产品色是红色，那我用红色的按钮会不会给人传达很强烈的警告？还有我们的产品色是冷色，如果不用暖色按钮会不会没有强烈的引导感，我好纠结啊！
大家瞅瞅，他像一个好人还是坏人？
呐，颜色情绪表达不在于本身，而是其使用场景。大家都知道颜色都有其两面性，比如这样，同样是黑色系，但是左边看上去是潮流、硬朗的感觉而右边则有一些忧郁、沉重的感觉。
所以颜色怎么使用要看用在什么场景，特别是主色的使用，如果本身是红色或者暖色的主色，那么可以在以下地方使用：
1.希望引起用户强烈注意的地方（正向/警示）
2.核心转化按钮（几个不同层级）
3.正在激活的板块（标签、分段）
但是暖色为主色的产品核心转化按钮一定不会是冷色调
所以不用在意主色是红色而带来的正负向情绪，因为到了不同场景它的含义自然会变化，如果本身主色为冷色调，那么主色和辅助暖色都可以用在核心转化的按钮上或者用其主色，我见过冷色为主色但是核心转化按钮是辅助色的情况，我总结了一下，大家可以看以下两个产品的截图，如果本身产品的辅助色使用场景和频率很多，那么在核心转化和重要按钮上我们要使用品牌主色，但是如果在工具类型的产品中，辅助色的场景和出现频率很少，那么核心按钮和一些关键引导信息可以用辅助色。
如果让你在原有的界面中设计某个功能，你会如何设计？可能我们第一反应就是先给他设计一个按钮。
按钮很好理解，我们先看看功能在释义上怎么说：事物或方法所发挥的有力作用，
阿哟，这一听，简直太抽象了！这就好比让媒婆描述你的相亲对象长的怎么样：小伙子看起来挺老实的，抽象但又很清晰！大家看下面两个例子：
第一个-刷新，无论是图标还是文字，我们的预期是点击之后就会实现在当前状态/页面的数据重新获取
第二个-支付。支付也是一个功能，相比较刷新而言是一个复杂的系统的功能，但是它无法通过一个按钮来实现功能的全部作用。
很多同学在做信息架构的时候就很懵逼，那我要梳理的是按钮呢还是这样的功能呢？我好乱啊。当然，信息架构肯定不是功能的树状图堆砌那么简单啦，那个顶多叫做功能分类，信息架构需要包含更多的业务逻辑和状态逻辑。
所以在这里就有三个结论：
有简单有复杂，但他们都需要通过外部的、具象的元素来实现其作用。
还有滑动、长按、甚至神经控制等等，如果大家玩过赛博朋克2077这个游戏就知道，义体的控制很多来自于大脑和神经，那么这些功能肯定不需要点击这样的操作行为啦，所以也不存在按钮。
我们在做设计的同时要思考，一个功能可以以什么样的形式存在，要满足高效、简约、符合心智模型等约束条件，比如做一个翻页，没有人会在app界面中设计一个下一页的按钮，抖音切换视频也不会出现一个按钮用来切换到下一个视频，再比如公众号文章收起需要通过滑动到指定位置，而非设置一个按钮。
以后再让你设计一个功能就不要直接做出一个按钮喔
想把设计做的出彩一定要满足两个条件：1.符合常规认知 2.超出常规认知
听起来有点玄乎啊，第一眼看心知肚明，第二眼看我x，这个牛逼啊。
那其实我们在做UI设计的同时也可以多些创意和想法，不要被惯性思维和熟悉的手法所困扰。有时候你想做一些创意设计但总是被“不统一”这样的理由所驳回，麻烦把这篇文章转发给驳回你的人，很多有意思的设计都被淹没在这些“风险”提示里了。
比如网易云音乐这里的tab，大家都知道tab的样式和其交互方式，还有和segment的区别，那么如果既不想用segment样式又不想让用户进行所有滑动怎么办？
没错，他们在这个地方用了竖线隔开了，重新感受一下，是不是可滑动的感觉变弱了呢？
还有卡片设计中如何添加标签可以更顺滑，如何让一个按钮自然的融合到另一个模块里。
排版是否可以用异形设计，例如个人中心
我看到很多同学正在体验各种各样的产品，然后把一些不错的案例摘录下来进行分析，我觉得这是一件很好的事，我在2年前就鼓励大家这么做，因为这个也是作为一个UI设计师的基本功，除了视觉创意的积累以外也要有交互案例的积累。
但是我发现很多同学有点南辕北辙了，我们需要收录的是一些优秀的案例，何谓优秀呢，指的就是令人惊喜的功能，而非本该具有的或者无差别的功能（可以了解一下kano模型，这里不细说）。另外就是需要有分析的能力，不是什么案例都是优秀的，有些可能存在着不好的体验。俞军在其产品方法论中提到：用户价值=新体验-旧体验-切换成本，所以价值大不大取决于新体验是不是足够好。
现在看到的就是可能这个产品把字加粗了，也能写出一大堆分析这个加粗的好处，或者一个卡片设计就能写出非常有亲和力，信息更聚焦这样空洞的词汇，这对于我们积累案例没有任何的帮助。
例如以下的案例，在编辑状态返回系统会提示，从而滑出Actionsheet。如果不做用户体验会很差，但是做了，用户并没有很惊喜，这就是一个必备的功能而已，所以对于一个案例到底是否优秀我们需要尽量客观的看待。
所以很多交互案例并不是不好，而是还没有达到能够被我们收藏的地步，如果没有撩到你的心，那我觉得咱们就矜持一些。
那什么是一个比较好的交互案例呢？好的交互案例一定是更近一步解决问题和深入场景的，比如我们在场景分析过程中对于预判这个概念的理解，例如行动按钮前置、替换、引导等等，例如像电影app在近电影放映前弹出取票码一样，这个功能如果不做，用户体验不会很差，因为依然可以找到这个二维码，只是用户想不到居然还可以这样做，但是一旦研发出来，用户会觉得非常惊喜，这种就是优秀的体验设计。
再比如有些你可能觉得体验好的案例其实还没分析到位，就像高德地图在到达目的地时会给你很多场景的补全和选择，你肯定认为这很人性化啊，但是我在有一次使用“原路返回”功能的时候犹豫了。高德确实在帮助用户解决问题，但是在这里显然细节有待商榷。
很多用过这个功能的同学会发现“原路返回”的文案是有歧义的，功能是好功能，正不正紧就看文案了。来，我们解析一下场景：用户a通过高德地图导航到地点x，路上非常拥堵，好不容易到达目的地后需要返回起始地，这时高德提供了一个“原路返回”的按钮，他要不要点？
为什么说这里有歧义呢？
1.如果用户开始的行驶过程很拥堵，你告诉他原路返回，他的潜意识会觉得原路返回是不是也很拥堵。
2.原路返回到底是不是最佳路线，因为有时候来回路线的最优解并不是同一条马路的左右两侧。
所以，人是好人，正不正紧俺们也不知道。总之，这个文案让我不得不重新导航。
小结一下，优秀与否需要亲自深入的体验，并且结合上下文、用户、业务多角度的考虑，并非自己没见过的就是优秀的设计，咱们宁缺毋滥，提高自己的标准。
很多人一听到转化率就会把它和操作步骤关联起来，只要能减少用户的操作步骤和缩短任务路径就可以提升转化率。这个想法不能说全错，但也不能直接运用减法去当作提高转化的手段。
不用管这人是谁，大家可以理解为能量守恒定律，也就是说在所有内容（功能、信息、元素）不变的情况下，步骤越少，单个步骤所承载的内容也就越多。比如你有100个球，给你5个盒子，平均每个盒子放20个球，但是如果拿走一个盒子，平均每个盒子就要放25个。
表面上盒子少了，但是每个盒子多出了5个球，这就意味着原来简洁的界面包含了更多的信息内容需要用户去理解、操作、判断。那我们可以说减少步骤就是提高转化率吗？显然不行。
比如我们看到马蜂窝和12306在购买车票流程中的表现：
马蜂窝
1.输入起始地目的地
2.选择出发时间
3.查看车次列表并选择
4.查看车次详情
5.选择座位类型、添加乘客信息、选择座位
6.确认订单
7.支付
12306
1.输入起始地目的地
2.选择出发时间
3.查看车次列表并选择
4.查看车次详情、选择座位类型、添加乘客信息、选择座位
5.确认订单
6.支付
大家可以看到马蜂窝比12306多了一个界面，他们把查看车次详情单独用一个界面设计了，而12306则是座位类型、详情、乘客信息、座位选择都放在了一个界面，表面上看好像步骤确实少了，但我们能看到像第三方的购票软件还有其他购票的选项，例如极速订座、车票+酒店等，所以在这个场景中需要展开展示给用户，那么如果把这些都放在12306的确认订单界面就会非常拥挤，而且选中状态也很不直观。所以最好的解决方法就是拆成两步。
再来看个例子，在某个产品的1级界面中，有一个添加训练计划的功能。左边是在1级界面中露出直接添加的按钮，并且添加成功后在1级界面直接展示。右侧则是进入二级界面进行添加。在步骤上来说显然左侧案例的步骤更短，那我们可以说左侧的用户体验、任务效率就更高吗？
对吗？大家可以思考一下。
显然不能直接说正确与否，因为我们缺少评判的标准和案例的背景对吧。首先左侧案例在添加任务流程中确实占优，但是对于需要频繁增删改查的用户而言就很不方便了，而且一直添加就会使首页下方内容推到很底部大大降低了曝光。而右侧的案例则更适合用户进行批量操作。
所以路径的长短并不能直接表示转化率的高低，那么有哪些情况可以缩短路径达到提高任务完成效率的目标呢？
1.减少步骤后不影响用户对界面和内容的理解
2.减少步骤后内容信息依然符合场景，不冲突
3.需要实时检查任务结果
4.有足够的版面可以进行内容合并
5.合并后对任务目标不会造成歧义
比如下面这个案例，一个书籍分类搜索原本的2个步骤是可以合并的，因为在原来的版本中，用户如果想切换更高级别的分类需要退出再选择，而一个界面其实就可以实现3级联动的效果，当然仅限于这个案例，根据业务不同我们需要对这些多层级、多类目的分类做更多的考量。
再来看一个案例，下面是一个预定篮球场地的流程，在这个流程中有几个关键的节点：场地类型、日期和时间，因为篮球场地和老板需求的特殊性，所以我们不横向去比较，我们可以来看看下面这个小程序的流程，预定步骤一共5步
1.时间和场地的选择
2.查看场地详情和说明
3.选择具体时间
4.确认订单详情
5.支付
我们先不讨论里面信息字段是否合理（最后确认订单还要填写性别和名字是什么鬼，打个球还要查家底吗），我们先来看这5个步骤是否可以简化。
一定是可以的，首先，日期和时间是属于同一纬度同一场景的信息，我在几月几号几点预约一个场地，这和看电影就完全不同了，每个电影院排期不同所以不能先把日期和时间都选了，但这里是可以一起选择完成的。那么第三个步骤完全没有必要，直接和第一个界面结合即可。
另外，不要被先入为主的样式给蒙蔽了，场地一定要做成列表吗？除非特殊场地，每一个半场其实都是一样的，可能在光线和设施上有些区别，但是对于经常打球和第一次预约的用户来说其实没有实质的区别，所以这里可以用宫格形式替代。
然后查看详情和说明个人觉得也比较多余，经常预约打球的用户已经非常熟悉场地了，对于新用户来说也只是看一下场地的环境，所以这个页面本身内容就不多，所以可以直接和确认订单详情结合，将确认订单页的内容做减法。这样是不是整个流程减少了两步，大大的提升了任务完成的效率呢？
每个人都有自己的惯性思维和刻板印象，有时候能帮助我们更高效的完成任务，但有时候这些潜意识的反应也会让我们深陷泥潭而不自知。只有当我们深入剖析一个问题时，才能发现其本质，适当让自己保持批判性思维是有帮助的。
文章来源：站酷 作者：应骏
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com