微信当中的10点情感化设计，人性因机制而受限，机制因人性而美好（上）

引言

01：朋友圈的文字机制

很多人都曾经有过发朋友圈的经历，当初的你一定也考虑过一个这样的问题：为什么朋友圈只能发送呢却不能单独发送文字呢？微信为什么要进行这样的一种限制？（QQ的说说却可以单独发送文字）

按照张小龙的解释：人们在单独编辑一段文字的时候，是比较困难的，很少有谁的文字是美的，但是一个应景的，搭配上几句感言，就可以很好的解决掉你当时的一种生活或者说是情感的状态，无论是想要宣泄还是炫耀。

从另外一个角度来讲，对于观看朋友圈的人呢？人们进入朋友圈进行浏览多少也带有一丝八卦的小心思，在这个娱乐至死的年代，谁也不想朋友圈里面呈现出满屏幕的文字，相反，那种图文结合的呈现结构反而看起来更加惬意~

02：为什么要设置共同好友机制

看到心爱的对方发了一条朋友圈，结果没有人点赞？你的内心一定非常充满欣喜，追他（她）的人不多，我的机会是不是更大？

打住打住，以上只是一个引子，我们这里真正想要讨论的是，微信当中只有共同好友才能看到对方的点赞以及评论，那么微信为什么不设置自己可以看到对方所有朋友的点赞以及评论呢？

与QQ不同，QQ里面就有一个功能，叫做可能认识的人，在网络当中，有一种社交理论，叫做六度分割，简单来说，就是两个陌生人之间，通过一系列的中间人关系就可以变成为“认识的人”，这个中间人一般都不会超过六个人。

但是微信并没有这么做，有人说，微信一直都非常克制，但是这并不妨碍微信成为拥有10亿DAU的超级App，为什么微信不通过这种六度分割理论引发用户裂变，反而更加的克制？

还记得微信的启动页面么？一个人，站在地球上。

没错，就是一个人，每一个人都是一个独立的个体，与另一个人建立起来的联系，也应该是点对点之间的联系，如果与一个人建立起了联系还要捎带着认识更多的人，或者给对方点个赞，结果让对方亲近的人看到了，试问还有谁敢发朋友圈呢？这无形当中就会增加发朋友圈人的社交压力，这一点和微博还是有很大不同的。

当然了，从更大的方面去分析，微信是一个生态，要保持整个生态的良好发展，也是需要考虑安全的因素在其中。

03：群聊上限机制

之前，知乎上面有一个非常有意思的问题，如果要是把全中国所有的人都拉进一个群里，不知将要会看到一种怎么样的景象？

单从技术上，是完全可以实现的，但是实际上，无论从信息的发送量、电信运营商还是从自身手机硬件角度以及社交角度来说都是有很多问题的，而设置500人的上限，似乎刚刚好。

为什么一个微信群会设置有上限？而且是500个人，现在明白了么？

然后有些做微商的人就开始吐槽了，我是做生意的，可不可以为我去单独设置一种群聊机制，使得群里面的人数增加到5000人？

呃，给你个眼神寄几体会吧~

04：语音文字机制

之前曾看到过一篇文章，吐槽说给某某人交流，对方总是发语音，而且一发就是两三条，每一条都是50多秒，有些听不明白的地方，还需要听两遍甚至是三遍，我简直是生无可恋啦！

作为一种情感化交流方式，语音在与亲密的人之间进行交流的话，效果会很好，毕竟能够听听对方的声音还是可以聊以相思之苦的，但是在职场当中，我还是建议，算了吧，若可以，也算是一种幸福，小心对方拿着平底锅过来打爆你的小脑袋！

依照上瘾当中提到的福格理论，任何一种产品都是有使用场景的，如果你是处在一个非常嘈杂的环境当中，比如说地铁上或者是商场上，对方给你发了一条，呃，暧昧的信息，然后你又不好意思放大了声音，但是声音小了又听不见，又迫不及待想要知道对方说了什么，这个时候是不是可以使用语音转文字的功能呢？

05：朋友圈三天可见机制的设置

曾看到不少的文章都提到过这样一种现象，现在发朋友圈的人数越来越少了，并且有超过一亿人都设置了三天可见，如果站在人性的角度，这种现象究竟应该如何去进行解释呢？

有人说，朋友圈反应了一个人生活中的反面，其实朋友圈当中发送的内容，一般都是在生活当中不曾拥有的美好事物。

QQ空间里有同学，微信里面有亲人朋友，微博里面则基本都是陌生人，但是中国又是一个非常讲究人情的社会，情理法，情往往是第一要考虑的因素。

所以有的人一般就会将开心的事情留在QQ上，生活中的繁杂琐碎记录至朋友圈，而悲伤难过的事情留在了不为熟人所知的微博里，希望在那个陌生的世界当中，寻至一丝安慰。

朋友圈是了解一个人很好的一种方式，这也是很多人设置成三天可见的原因吧，因为这会减少很多的社交方面的压力，不至于将自己的以往展现在一个刚认识不久的陌生人眼前。

但是很多亲密的好朋友之间就不愿意了，为什么要对自己设置三天可见呢？这不公平！

不过我在这里想要说的是，一个人是否设置三天可见，完全是一个人的自由，我们不必因对方设置三天可见而悔恨，也不必因对方没有设置而心存宽慰。

因为，这，也只是一个人的生活方式而已。

暮光微晓破倾城

北京·百合湾

Procreate教程丨MBE风格插画怎么画最近连着做了4次MBE风格小图标的临摹，有了些新体验，也琢磨出了一些小技巧，做个总结记录。_（20201015图标临摹RoundOne，By@蛋蛋）（20201020图标临摹RoundTwo__y@蛋蛋）（20201021图标临摹RoundThree__y@蛋蛋）本文主要内容如下（文末附思维导图总结，包含视频哦）：01六种常见的插画风格02五个方面总结MBE特点03五个步骤画出MBE插画04五个技巧画得又快又好01六种常见的插画风格什么是MBE风格？百度一下，你就知道。就是这种看起来萌萌哒的风格，非常好辨认。它是源自Dribble的设计师MBE的设计，简约有趣又好看，流行开来后就被称作为「MBE风格」。如果觉得没什么概念的话，把它放在一群当中，就更有印象啦。就像星爷喊美女找秋香的那个办法一样↓在这里也科普下6种常见的插画海报风格，让你一眼认识「MBE风」。（制作By@蛋蛋）细心的朋友可能也会发现，上图用Keynote同样实现了MBE风格唷。02五个方面总结MBE特点在学习怎么画之前，先要清楚这种风格的特点，才能更好下手。仔细观察之后，我从以下5个方面来总结我的感受。①线条：都很简约，而且很粗很鲜明，平滑柔顺。有明显的断点，但也是非常圆润地过度过去的。②形状：基于线条的轮廓也都是圆润的，没有突出的尖角直角，饱满又胖胖的感觉。③_咨荷屎苊髁粒＜瞥壤渡S械咨绯觯矣忻魅返拿靼瞪簿褪歉吖夂鸵跤啊＂鼙砬椋杭虻南咛跫由霞虻サ男α常锾迥馊嘶耍砂热ぁ＂莸阕海褐魈逯芪Щ嵊行切堑愕愕牡阕海旧鲜茄┗ā⑹帧⑷θυ苍仓嗟谋涮濉03五个步骤画出MBE插画具体怎么画？来，五步走。说明一下，因为我的临摹过程都是一次临摹一堆，而且个人绘画习惯肯定不一样，所以步骤也不需要是一样的，怎么方便顺手怎么来。以下是蛋蛋基于4次临摹后，总结的常规步骤，仅供参考。①先画轮廓。·选择「书法」里的「单线」画笔。·_髡胶鲜实拇窒咛酰雎掷！び谩赶鹌げ痢共恋舨糠窒咛酰龀龆舷摺＂诖_矶系恪！ね窒富驶觥冈驳恪梗驳奖徊脸蟮南咛踔卸洗Γ圃煸踩蟆＂厶砑颖砬椤！画上圆溜溜的眼睛和笑笑的嘴巴。④铺上底色，增加阴影。·_仙驳铰掷谋咴荡Γ圃煲绯觥！选择比底色深的颜色，沿轮廓边缘上色，制造阴影。·选择比底色浅的颜色，在底色上画出高光。⑤加上点缀。·主体画的上空周围加上雪花、加号、实心空心圆。就这样，一个简单的MBE风格插画就完成啦。看下具体过程的缩时视频。04五个技巧画得又快又好我习惯完成临摹后都在画布上增加一块区域作为「复盘记录」，从4次的临摹复盘记录里也能回顾到我的整个过程感受。从「觉得难」到「上瘾」到「觉得容易」，中间也琢磨出了一些小方法。①快速画轮廓有些图本身就是对称的，想要画得更快更好就可以使用对称辅助功能。在「绘图指引」功能中，选择「对称」，有「水平」「垂直」「四象限」「径向」选项提供选择，辅助我们更好地画图。②快速处理断点，有4种方法。◆_钩湓驳惴ǎ壕褪乔懊嫣岬降模窒富驶觥冈驳恪梗驳奖徊脸蟮南咛踔卸洗Α！_路径点划法：还原原本划线的路径，从点出发溢出断点。◆像素大挪移：把线条放大，在圆点法或点划法的基础上，通过调整「橡皮擦」或「画笔」的粗细，补充或擦除掉细节的像素格子。◆_奖丛惴ǎ呵懊3个方法其实都有点考验耐心，最快速的方法就是这第4种。直接拷贝线条另一端没被擦掉的端点，再移动到断点处，完美！③快速添加点缀一次性临摹多个图标的时候，一个个画点缀实在很磨时间和耐心，然鹅强迫症又不想只是通过复制图层让每个的点缀看起来都是一样的。该怎么办呢？制作点缀笔刷，这样就可以快速完成，还能变换位置和颜色。④保持临摹大小一致在画之前先画上一个个格子，通过大小一致的格子来规划好布局。⑤保持线条粗细一致踩过坑的都知道，当我们放大画好线条后再缩小，原本的线条也会随之变细，所以为了避免这种情况后续出现，同样需要用上面的格子做好提前布局，就不用后期放大缩小啦。（20201023图标临摹RoundFour，By@蛋蛋）以上就是蛋蛋画MBE插画的一些经验总结，最后，放上第4次临摹图和小小总结思维导图。（小小总结思维导图By@蛋蛋）进步，是在不断练习中产生的。画起来吧。相关文章：总结丨零基础如何通过自学，半个月学会画画？插画在APP设计中的应用现在APP的数量越来越多，制作也越来越精美，各种APP都想在设计上能够与其他APP区别开来，从而更好的吸引用户的注意，将插画运用在APP当中，无疑是一种好的选择，在iOS11的AppStore“Today”中就用了很多的插画，给用户带来了全新的体验。一什么要在APP当中使用插画？增加视觉冲击感，总结为两个字“惊艳”，例如“walkup”APP，当中的每一个页面都运用了插画，而且设计得极其精美。增添趣味性，使页面不显得单调、乏味，一个明显的例子就是APP当中的空页面和错误页面，例如淘宝在无网状态下，显示一幅可爱的插画要比单纯的显示文字要给人的感觉好得多，也可以尽可能的减轻用户的焦虑。承载更多的信息量，更加的直观，这一点在图标上显示的比较明显了，例如百度糯米的分类图标，采用了写实的风格，给人的感觉就更加的直观了。满足用户的情感需求，情感化设计，这一点在keep当中得到了很好的体现，在刚刚过去的七夕节，keep把跑步路线变成了粉红色，还配上了一条狗，七夕节还在跑步的人，很有可能是单身狗啊，意思不言而喻。二目前比较流行的几类插画及其特点扁平插画肌理插画手绘插画MBE插画（dribble一位大神创作了这种风格，因此被称为MBE风格插画）渐变插画（有时也称微光插画）立体插画（也叫25D插画）描边插画下面分别对各种插画进行举例，所有例子均来自dribble。扁平插画：扁平插画的特点是扁平，简洁明了，扁平插画是现在很流行、也是最常用的风格肌理插画：我觉得肌理插画也属于扁平插画的一种，但是在最后要增加颗粒感，肌理插画最明显的特点应该就是有质感，光影关系表现得比较好。手绘插画：我认为这是难度最高的一种，也是对设计师的美术功底要求最高的。手绘风格的应用比较广，可以展现的东西很多。下面这位设计师的作品富有童趣，像梦境一样美好。MBE插画：简洁、圆润、可爱。渐变插画：一种很唯美的风格，在颜色的运用上一般采取近似色，颜色的种类不要过多。立体插画：从名字就可以看出，这类插画最大的特点就是立体了，能够在二维的空间里表现出三维的事物。描边插画：除了运用形状，还要运用描边，可以很好的对事物进行抽象化处理。MBE插画：下厨房当中的图标，MBE风格很适合用来制作icon渐变插画和立体插画：拉勾。把这两种放到一起来讲，是因为很多时候一幅插画是包含这两种风格的。（用在banner、专题）描边插画：拼多多、网易云音乐（用在icon、启动页）总结一下：插画适合用在APP当中的启动页、banner、专题、刷新、icon、弹框、背景图等等。请问插画有多少种风格

请问插画有多少种风格插画的风格众多，大致可分为扁平风格、MBE风格、渐变风格、矢量插画、25D风格、涂鸦白描风格、森系风格、治愈系风格、水彩风格、暗黑风格、绘本风格、噪点肌理风格等。下面只对这些风格的插画进行简单的介绍。

这边也给大家推荐下“轻微课”，这个网站上非常多的绘画教程、绘画素材，也有专业的绘画课程，学绘画的小伙伴可以去上面找到很多有用的绘画学习资源哦！

扁平风格这种插画的风格特点偏简约、轻快、整洁，扁平风格插画主要由色块构成，造型几何化，外轮廓光滑，视觉表现多样化，可亲和，也可严谨。因此，扁平风格插画被广泛应用于各个领域。

渐变风格：渐变风格渐变插画风格最早还是国外的设计师带起来的，这种插画色彩会比较鲜明。

MBE风格：这样风格的插画是在扁平化的潮流中逐渐演变的，比较圆润、可爱、呆萌、简洁，而它标志性的人物就是来自法国巴黎的设计师MBE。

矢量插画：矢量插画是矢量图中的一种，使用直线和曲线来描述图形，给人感觉会比较一种色彩碰撞的潮流感。

25D风格：25D风格插画的立体和空间感都特别强，简单理解就是带有3D效果的二维画面。

森系风格：森系风格的插画有着水彩透叠、唯美、小清晰、淡雅的特点，森系所代表的生活态度便是，崇尚自然、舒适、返璞归真;生活态度随遇而安;热爱流浪;排斥消费主义;追求简单、直接的处世态度。

治愈系风格：治愈系的插画风格整体给人感觉会温暖，画风比较柔和而且氛围感很强。

暗黑风格：插画风格整体偏暗色调，有搏击现实、变形扭曲的意味

以上这些风格都是现在插画比较流行的风格，希望能够帮助到大家。

界面设计中的可延展性

在做项目时,不仅要做出产品需求中相对应的核心页面,也要做出细节的交互页面,同时也要考虑到页面出现极端情况时的展示方式,尤其是B端业务场景多样、逻辑复杂,更是要多方面考虑信息展示的可延展性问题。

列出了几种比较常见的情况,在做页面设计时需要考虑到的:

1、文字内容较多时的考虑

2、无内容时的考虑

3、背景图多样时内容信息凸显的考虑

4、按钮宽度的定义思考

5、按钮多状态的考虑

6、布局上的最大展示考虑

折行、最大限制省略、无相关内容信息时展示无内容相关说明文案等

这是当时做的一个B端页面的列表,进度有色字体部分是可点击进行查看工单处理详情的。

但经过查看后台的线上数据,有些房源地址比较长,而且房源地址对于用户来说在页面列表中是一个重要的区分信息。比较重要。再一个问题描述有的也比较长,对于在页面列表中快速定位筛选有着重要的作用,所以也需要在列表中充分的展示出来。

介于这两个信息较长时的展示,有了以下形式

房源地址和问题描述超过一行时折行,一般情况下两行的内容足以显示全信息,就算特殊较极端的情况下没有展示全,那也足以能展示出关键信息用来区分列表其他信息。为防止极端情况下的信息展示,当超过两行时,内容以省略展示。如果想要查看全部信息进入详情进行具体查看。

因为列表是做快速信息浏览的,着重的是展示出重点信息之间的差异化,用户能快速定位筛选出需要紧急去处理的那个。这就需要最大化精简,次要信息及详细信息不宜在列表做具体展示。

当处理了房源地址和问题描述信息的极端化展示方式后,又有了新的问题,就是工单编号位数不是固定的,有时候会特别长。再一个当处理人已经离职了,会在姓名后面展示该员工工号,这样,两个信息就会重叠到一块

经过跟产品经理沟通,工单编号在此列表中非必要重要信息,因为编号是系统自动给出的,对于用户来说为非重要信息,一般是以自己熟知的房源地址和问题描述为重要区分信息。工单编号对于用户在此列表中来说意义不大,可以考虑去掉。经与后端开发同学确认,工单编号和后面的处理进度是两个字端,可以做隐掉处理。就这样在列表中去掉了工单编号。

由于处理人离职后会展示其员工编号,字段会比较长,但对于用户来说员工的员工编号是没有意义的信息。但经与后端开发同学确认,这是同一个字端后端不好截取。所以就找前端开发同学在页面展示上做了展示限制(处理人与前面进度部分的最小间距为一个固定间距,当小于这个间距时,后面的处理人字段以省略显示。

除此之外还有一种没有获取到进度信息时的情况,这种情况下是没有工单信息的,故也不能点击,所以就给出了一种“暂无处理进度”的文案提示,且文案颜色去掉彩色,隐喻不可点击。

看似简单的一个列表,背后可能隐藏着各种特殊的信息情况,只有在设计时考虑周全,结合用户场景给出限制和可扩展性定义,在上线后极端情况才能被掌控。不至于在遇到特殊情况时页面内容显示的“面目全非”。

页面无内容、搜索无内容、无网络、服务器错误等

在做项目需求的时候少不了一些缺省页的设计,一般有:页面无内容时、搜索无结果时、无网络时、服务器错误时等等。这都是非正常情况下出现的页面,出现的几率可能比较小,但不可避免会出现。缺省页的意义在于当出现非正常的情况时能缓解用户焦急的情绪。

同时要向用户说明当前出现的情况,以及引导用户可进行的操作。这样就不至于让用户陷在问题中,要帮助用户快速的从问题中走出来。故缺省页的设计很有必要,也有必要花一些心思(插图样式、文案内容及形式等)怎么能让用户“愉快”的度过“难关”,同时避免使用一些专业术语,尽量以幽默化、趣味化、委婉的方式来表达。

所以说缺省页在做页面设计时不可被忽略掉,比如每日优鲜的缺省页,插图场景和幽默的文案结合,加以引导按钮。体现出趣味性,更能让用户接受这样的“空白”。

深色背景下、浅色背景下内容的展示效果

在做需求时,经常遇到上需要显示文案的设计,尤其是一些例如产品图上显示信息的设计,这里的图不是固定的,而是拥有着不确定性,显示文案的位置可能是深色,也有可能是浅色。这个时候就需要较全面的考虑了。例如在文案下面加一个黑色渐变透明层,这样既和谐,又能保证不同背景下白色文字的显示效果。

按钮宽度自适应(设置两边最小间距),固定按钮宽度

在做页面的时候经常遇到一些选项标签,如果标签文案长度是已知的,基本上差不多长的文案,一般不超过4个字,这样的标签适合使用相同宽度的,且看起来比较整齐。

但如果标签上的文案是不确定的,文字数量也无法确定,这种情况下,为节省空间和灵活适应不同长度的文案,标签一般设置定义出文案两边的间距值。

是什么性质的标签目前的数据是怎样的未来可能会增加什么样的标签,这些都尽量了解清楚,因为这些因素决定着设计形式,标签的可扩展性。不至于说到线上才发现一些标签文案放不下了,再需要被动的改形式,这显然就是考虑的不够全面。

大多应用一般是筛选按钮标签使用固定宽度的标签,当然文字数量都是经过简化的,大多控制在2-4个字。这样的页面看起来比较整齐,用户在使用的时候比较容易浏览选择。

评价类的标签一般使用设定固定左右间距的方式,这样一是比较灵活,能适应较长的文案。二是比较节省空间,属于非重要模块类型。

在做移动端按钮的设计时,至少至少要考虑到3种状态的显示方式:默认、点击、禁用。这是最基本的3种状态,不可缺少。在做的时候就要考虑到,及给出相应样式。而不是在开发时,开发童鞋再跑过来问你某种状态该怎么展示,或者开发童鞋直接按照自己的想法给出了一种形式,因为开发是具体执行的阶段,涉及的细节比较严谨、具体。

再一个就是业务形态比较复杂的场景下,需要考虑当点击了目前状态的某个操作按钮后,它会演变成什么功能的按钮,这与业务逻辑、任务流程密切相关,需要在做需求时了解清楚,然后给出展示。

尤其是一些列表中,按钮较多时,或者按钮是根据不同业务状态来展示的,这种情况下并不是要把所有的按钮都展示在页面上,而是要有个“度”,根据业务形态和用户使用场景来区分不同按钮的重要等级。

按钮较多时,非重要、使用不频繁的按钮可适当的隐藏起来,加以引导操作的元素来告诉用户。比如设定原则,页面上最多展示3个,超过3个时,某些按钮隐藏起来,用“更多”按钮的形式告诉用户点击可查看更多操作按钮。

再一个当一个模块的内容较多时,用户浏览起来比较累,且对于用户来说可以选择性的进行查看。这些非重要的详细内容可做适当的隐藏,加以“全部”或“更多”类型的按钮引导用户点击可查看更多内容。

我们平时可能用过很多APP,很多时候用也就只是在“用”,只是跟随应用本身的逻辑和引导在完成我们的任务。在找不到某些功能或不清楚该怎么操作时,旁边人会告诉你应该这么做、步骤是怎样的。你不会操作,往往是因为你对应用的不熟悉,甚至自己会怀疑自己“我是不是智商有点问题”。

但你往往忽略了一个重要的点:那就是不会跳出来思考,它为什么这么设计有没有更好的方式引导是不是有问题等等应该常总结、多思考,不同的应用可能有不同的业务模式和不同的展示方式,但设计模式和背后的设计原则是相通的。

最后希望你我都能拥有思考、分析、总结、解决问题的能力。

插画的7种风格

特点-扁平、流行、常用的风格、简洁明了

扁平插画简单来讲就是把复杂的关系简约化,让画面更加清爽整洁,也是现在比较常用的风格了,很多商务工具类的APP会选择使用这种风格。比如说拉勾、钉钉

特点-扁平插画的变种、增加颗粒感、有质感、光影关系好

肌理插画顾名思义就是给插画加上了些肌理质感(比如杂色)和光感,本质也和扁平插画差不多,一些想体现质感的页面会用到这种风格。以下是一些设计师的作品。

特点-美术功底要求最高、应用广、展现内容丰富。手绘风格的插画运用的也比较广,常见的有一些插画绘本,故事场景设计等。下面这些是摘自插画师-顾心的作品。

特点-简洁、圆润、可爱、断点

MBE插画(dribbble的一位设计师创作了这种风格),它主要的特点就是圆润、可爱、呆萌、简洁。在APP中的引导页、启动页和缺省页运用也比较广泛。

特点-唯美、颜色的采取近似色、颜色明亮鲜艳。

渐变插画有点类似日本漫画场景的感觉,风格特别唯美浪漫。光感比较强,所以也称为微光插画。颜色一般采用相近色,颜色种类不要太多。

特点-25d插画、立体感强、视觉冲击强。

立体插画也称为25D插画,也就是在二维的空间里表现三维的事物。所以现在越来越多的设计师去学习C4D这个软件,虽然AI和PS也能做,但会麻烦一些。很多电商类的APP会选择使用这种风格。比如说京东

特点-形状、描边、抽象画处理

描边插画除了运用形状,还在它的外轮廓都运用了描边,可以很清晰的表达抽象事物。经常运用在一些图标icon上,比如闲鱼、转转

移动缺省页设计

什么内容可以被添加进入缺省页面从而使其“丰富友好”呢Nathan_arry__Designing_eb_pplication_刑岢隽恕_WH”的概念来帮助产品设计师解决此类问题。

首先,用户很可能是第一次接触你的产品,他们对于使用还不是很了解,而这正是你可以利用缺省页面向他们提供说明的好机会。设计时可以使用简单明了的文案告诉用户这里将会放置什么样的内容。花点心思在这里,不要让空白的缺省页成为用户最后看到的状态。

下面是一些优秀的范例:

支付宝钱包的电子券和行程单页面通过票据图形+文字清楚地说明该分类下会出现什么内容,并在屏幕下方提供添加票据的按钮。

Dropbox是一款非常流行的网络文件同步工具,产品面临的问题是需要引导用户上传内容。应用在用户首次使用收藏、相册及提醒功能时通过灰阶加线条风格的图示和浅白的文字说明告知用户如何使用这三个功能,画面在保持一贯品牌风格的同时也降低了用户因为列表内空无一物而产生情绪上的挫败感。

除了简单的图标加文字说明之外,一些应用还有一种更为快捷直接的方式:预置内容,即让用户直接体验真实的信息内容,或是一些范例信息,而不需要凭空想象。

Shadow_uppet可以把照片和视频剪辑结合声音、贴纸等制作成动画,制作简单,被誉为视频版的PPT。它的首页预置了展示用的视频样本,用户可以通过观看视频案例对Shadow_uppet的视频制作有感性的认知。

在了解完信息的内容形态以后,就要提供给用户一个提交内容的理由。缺省页的设计应该简单告诉用户建立内容的好处,比如你可以认识更多人,可以更有条理也更高效地管理信息等等,帮助用户产生使用目的。

多看阅读的已购和云空间缺省页面直接告诉用户:快来买书并上传到云空间吧,这样你就能有跨平台同步书籍的体验了。

充满情感的文案和图示也可以激发用户提交内容的兴趣。Headspace是由出品的一款专注于教人们怎么冥想并提供语音引导的应用。它在缺省状态下的朋友页面就提供给了用户这样的理由,通过添加朋友,可以监督和鼓励彼此的冥想过程。看到这样萌萌哒的缺省页面,用户还有什么理由不邀请好友一起来互相监督呢

或者可以像兴趣社交应用Same一样,通过俏皮的文案来激励用户在自己的频道添加内容。

给用户明确的操作指引,在界面中提供明显的按钮、箭头指示用户操作。指示内容最好在一页内显示完毕,如果步骤多,可以拆分到具体使用过程中进行指导。

“乐动力”的好友排行页面,在没有添加过好友的情况下,该页面展示了一些社交网络的图标和大大的添加按钮提示用户可以通过绑定社交账号来找到更多好友一起PK运动量。

Pocket是一个可以让用户把内容(文字、甚至视频)一键保存下来,用于其他时间完成阅读的工具。在初次使用时它的列表页面内没有内容时,会显示一个“了解如何保存”的按钮,点击可以详细了解添加列表的各种方法。

Taasky和Clear作为两款交互优秀的任务应用,都拥有非常丰富手势操作,它们没有像别的软件一样在界面上加遮罩、标注做出冗长的用户教育页,而是直接将操作指引嵌在一条条的任务里,用户只要跟着当前任务的简单描述滑动屏幕就能了解全部手势操作,即充实了原本空白的缺省页面又很自然地指导用户如何使用该软件。

Orgami是一款折纸风格的记事App,在首次打开应用时,笔记页面内并不是空空如也,当然这些预置内容不单纯是为了美观,和应用相关的操作指引也包括在这些便签内。

缺省页面的状态多半是用户刚开始使用应用时才会被看到,这时他们仍然对你的产品有些耐心,设计师应该把握住这个天然的与用户对话的机会,可以从以下几点入手设计出空而不空的缺省页面。

1_hat

明确指出页面内会出现的数据。

可以试着让用户直接体验范例信息。

2_hy

激励用户提交内容。

3How

操作引导。

精简步骤。

——end——

原文来自:_谘_SUX

绘本中的艺术美——8种艺术风格绘本赏析（94）每一本优秀的绘本都是来自世界各地的知名画家精心制作而成的作品。阅读绘本时，可以培养儿童深层次的审美情感和审美创造力。每种艺术风格都有鲜明的特点，绘本也不例外，我们一起来欣赏绘本中的八种艺术风格。1、抽象派抽象派艺术是非具象的，抽象艺术注重物体内在形式和外在品质。抽象派艺术家们不会拘泥直接的艺术表达，往往会夸大或简化事物的形式。强调情绪和感觉的表达，如泰拉·葛拦罕·金恩的《敌人派》。2、卡通风格卡通风格的绘画人物都有些呆呆萌萌的，插画家并不想让他的绘画作品表现得逼真和写实。许多卡通画家都有自己的风格，而且很容易识别出来。比如汤米·狄波拉就喜欢用黑色圆点代表人物的眼睛，人物的身体大多矮小粗短。凯文·亨克斯喜欢在他的卡通画种添加小插图等等。类似卡通风格的图画书还有汤米·狄波拉的《巫婆奶奶》、喜多村惠的《小猫布兹爆笑故事集》等等。3、表现主义表现主义的绘画是由20世纪的艺术家们兴起的，这种绘画的特点是能够很好地表现出图画书故事的主题和情感。表现主义重在表现情感，但绘画的线条和人物面部表情往往被夸大和扭曲，这是画家为了达到烘托情绪的效果。比如克里斯·范·奥尔斯伯格的《勇敢者的游戏2》、保罗·欧·泽林斯基的《风铃草姑娘》。4、印象派印象派的绘画风格是由19世纪的法国画家们兴起的，这种风格特别注重光的运用。印象派的艺术家运用颜料创造出光线支离破碎或反射的效果，力图表现对生活的感受和印象，并不对现实做详尽的描绘。明亮的色彩和温柔的笔触通常是印象主义绘画的显著特点。在《狼婆婆》中，插画家杨志成用光和影的互动创造出画面的平衡感，他把狼画在黑暗的阴影中，而狼的眼睛却闪闪发亮，这一设计暗示出人类对于黑暗的恐惧。5、民俗风格民俗风格所表现的是人类世代传承的信仰，反映出一个民族的信仰、价值观和文化习俗。能给读者强烈的地域感。艺术家们需要花很多时间和精力研究一个地方的民族服装、民族心理和民族精神，之后才能创作出具有地域气息和手工效果的插画。如：保罗·戈布尔的《野马之歌》。6、素朴主义素朴主义风格是充满童趣的，它都是平面的布局和二维的画面、比较容易识别和解读，这类绘画有细节处理，但不会有细致的描绘。采用这种画法的插画家通常没有接受过专业的绘画训练。比如薇拉·B威廉斯的《妈妈的红沙发》。7、浪漫主义浪漫主义并不算是图画书中常见的风格，但插画家有时也会使用。这种风格常用大胆的颜色和梦幻的构图烘托华丽的气氛。在《灰姑娘》中，插画家KY克拉夫特使用了丰富的色彩营造出奢华富贵的效果，体现了灰姑娘从贫穷苦难到奢华美艳的华丽转身。浪漫主义的画风最适合于童话故事和民间传说。还有像KY克拉夫特的《睡美人》。8、超现实主义超现实主义的绘画富有想象力，强调梦幻与现实统一，特点是丰富而细腻的细节、天马行空的构思和离奇荒诞的图像。超现实主义绘画作品中的人物或物体经常是扭曲的，如同梦幻一般。比如安东尼·布朗、大卫·威斯纳都是以超现实主义的画风而蛮生童书出版界，如大卫·威斯纳的《三只小猪》。插画的7种风格特点-扁平、流行、常用的风格、简洁明了扁平插画简单来讲就是把复杂的关系简约化，让画面更加清爽整洁，也是现在比较常用的风格了，很多商务工具类的APP会选择使用这种风格。比如说拉勾、钉钉特点-扁平插画的变种、增加颗粒感、有质感、光影关系好肌理插画顾名思义就是给插画加上了些肌理质感（比如杂色）和光感，本质也和扁平插画差不多，一些想体现质感的页面会用到这种风格。以下是一些设计师的作品。特点-美术功底要求最高、应用广、展现内容丰富。手绘风格的插画运用的也比较广，常见的有一些插画绘本，故事场景设计等。下面这些是摘自插画师-顾心的作品。特点-简洁、圆润、可爱、断点MBE插画（dribbble的一位设计师创作了这种风格），它主要的特点就是圆润、可爱、呆萌、简洁。在APP中的引导页、启动页和缺省页运用也比较广泛。特点-唯美、颜色的采取近似色、颜色明亮鲜艳。渐变插画有点类似日本漫画场景的感觉，风格特别唯美浪漫。光感比较强，所以也称为微光插画。颜色一般采用相近色，颜色种类不要太多。特点-25d插画、立体感强、视觉冲击强。立体插画也称为25D插画，也就是在二维的空间里表现三维的事物。所以现在越来越多的设计师去学习C4D这个软件，虽然AI和PS也能做，但会麻烦一些。很多电商类的APP会选择使用这种风格。比如说京东特点-形状、描边、抽象画处理描边插画除了运用形状，还在它的外轮廓都运用了描边，可以很清晰的表达抽象事物。经常运用在一些图标icon上，比如闲鱼、转转绘本风格有哪几种绘本风格有装饰性，线描，油画型。其中有水粉、水彩、丙烯、蜡笔等多种形式。以线为主，各种绘画笔直接勾线。色彩平涂，生动自然。笔触、色彩都不能少，同时结合肌理，效果惊艳。赏心悦目。“绘本不仅是讲故事，学知识，而且可以全面帮助孩子建构精神，培养多元智能。”一本优秀的绘本对孩子的影响是多方面的。阅读优秀绘本，从中学习书面表达的技巧，是一种非常有趣有效的方式。小学帮经过一年多的调研，集各地一线教师意见，针对小学第一学段推出绘本作文系列课程。课程针对小学一年级和二年级设计，分别选取世界知名的绘本进行学习，并结合相应的作文知识点，合理融入表演、讨论、角色朗读等课堂环节，让孩子在快乐中学习绘本、学习作文的方法与技巧。

这篇文章会跟大家分享情感化设计的思路和方法，并结合丰富的例子，让大家更直观的感受情感化设计，以及情感化设计的妙用。

导语：时至今日，大家都已经深切的明白情感化设计的重要性和必要性。但毫不客气的说，情感化设计依然是很难的一个环节，即使掌握了情感化设计的理论基础和设计思想，却时常还是感觉不知道从何下手。所以就需要结合大量的案例来具体领会。

情感化设计的理论基础已附在文末《情感的艺术—诺曼·情感化设计》

一、案例分享

下面以诺曼·《情感化设计》的三层理论模型为依据，分别介绍每一层级上的设计案例。

诺曼·《情感化设计》的三层理论模型

本能层

1、俏皮的设计

可口可乐的营销案例。字可能看不清，左图写着“你算老几”，当喝完可乐就会看见答案“我的知己”（右图）

2、情景化设计

这是苹果的天气设计，很多天气类软件都有类似的设计。展现的情景跟当前的天气状况是实时对应的，白天云朵会飘，晚上甚至能看见星星。

3、彩蛋给人惊喜

Chrome浏览器搜索“灭霸”，点击右上角的“超能手套”，网页开始消失。真的有一种灭霸打个响指的感觉。如果声音外放，还能听见音效。

4、小变化给人新意

下图分别来自B站、微博和即刻。在点赞后会发生一些与众不同的变化，给人带来新意。

B站会出现B站小电视，微博再给林志玲点赞后会出现vow的表情，即刻更是喂猫前后分别用小鱼和鱼骨代替。不同情境下点赞，还会出现不同的动态效果。

5、别出心裁的设计让人眼前一亮

一加用小人托起卡针，虽然好像并没什么作用，但能感觉到设计师用心了。用心的产品总能让人放心。

一加

6、安全感

readme、Bilibili在输入密码的时候，会遮住眼睛，我试着感受下潜台词：我不看，你放心输入吧。

readme

Bilibili

7、doodle情感化设计

doodle先特指在logo上进行的一些创意表达，Google在这方面玩得最早也最多。

8、拟人化

Bilibili极力地在打造二次元形象，甚至能感觉到两位**姐的身高、体重、性格、心情，在Bilibili中就像有两位**姐一直在陪伴着。

Bilibili

夸克浏览器语音助手界面，两只眼睛忽闪忽闪的，可爱极了，像一只小精灵。

夸克

9、小游戏

Google浏览器在断网的时候会出现小恐龙游戏，也是很有趣。

Google浏览器

10、微动画

以google pay为例，它为每一笔交易奖励一张刮刮卡。这个微动画增强了感知。

google pay

行为层

1、充分考虑用户使用场景

Word模式网络小说，这简直是摸鱼神器啊，我是不会告诉你这是凤凰网书城的。强烈建议知乎加上，这样我摸鱼写文章的时候，就不用先在Word写好再复制过来了。类似的操作还有网易云阅读。

还有酷我音乐的这个“节奏灯光”把我逗笑了。它会根据节奏或者人声来控制闪光的频率，配合DJ食用效果更佳。“如果我是DJ你会爱我吗？”

酷我音乐

2、贴心关怀

腾讯视频在夜深的时候，顶部会出现提示：夜深了，并带上时间。虽然并没有什么卵用，我还是会继续看，但那一秒真的被触动到了。

腾讯视频

我知道美团外卖只是想促进转化，但这样恰逢时宜的提示，就不至于让人非常反感。

美团外卖通知

网易云音乐居然知道我生日，还让我挺意外的，不知道哪里泄露了隐私。不过先不管这么多，听听推荐的生日歌还是挺有感觉的。

网页云音乐生日提醒

3、进度提示

很多产品的成功页都会有个流程展示，流程的展示能给用户以确定的预期，从而消除因不确定而带来的焦虑感。

这里再举个Zenly的例子。

在加载联系人的过程中，会不断地出现新的文案并配合不同的表情。本来枯燥的等待过程，变得有趣起来，不然我可没有耐心等待那么长时间。

4、文案

Medium提醒我登录的文案与众不同。

先是给我道歉：“抱歉打断你了”。非常有礼貌，不过确实是打断我了，因为我当时正打开一篇新的文章。

紧接着灰色小字写着：“我们发现您以前在Medium阅读过，这里有个个性化的体验等着您，只需点击几步即可。现在去创建属于你自己的Medium吗？”

文案写得好才不至于那么令人反感，如果是很生硬的登录提示，当时我就直接点关闭了。

Medium

还有各种各样风骚卖萌的文案：

夸克：网页大师乘坐着404航班去追寻诗和远方了。

夸克：网页大师乘坐着404航班去追寻诗和远方了。

Colorful Pro：梧桐更兼细雨，到黄昏，点点滴滴

Colorful Pro : 梧桐更兼细雨，到黄昏，点点滴滴

webflow：嗯哼……那个蓝色的按钮一定很重要……

webflow：嗯哼……那个蓝色的按钮一定很重要……

5、反馈

这里先举个QQ音乐、网易云音乐和虾米音乐在无音乐版权情况下的反馈。

QQ音乐：我们的目标是星辰大海，哪里不满意的告诉我，我买！——土豪有钱任性

网易云音乐：这事不赖我，合作方要求的，我替你找合作方说理去！

虾米音乐：这事咱低调处理，没版权我也没办法，给您道歉了。

传达出来的态度完全不一样。

这三个反馈都是截止到2019710的最新版，上一版不这样。

QQ音乐：一如既往的壕气十足

网易云音乐：大哥饶命，我们一直在努力

虾米音乐：我们一直在努力，可否先看个MV先

其实我更喜欢网易上一版的文案，语气弱一些并用了个可怜的表情，弱势的语气更能获得谅解。

还有各种各样反馈的例子：

微信转账如果两笔金额一致，会出现确认框。避免误操作。

微信转账

iPhone充电，如果充电口存在液体，会出现安全提示。

iPhone充电提示

QQ音乐会员到期提示，用了我最爱的偶像周杰伦，并改编了周杰伦的歌词作为文案。让我感觉很亲切，虽然依旧是变成花样骗我钱，但这次并没有那么抗拒。

QQ音乐会员到期提示

反思层

1、情怀

张小龙的七星级产品—QQ邮箱，在登录的时候总会随机的出现一句话。有时候是许巍的《蓝莲花》、有时候会是两岁小孩的一幅画、有时候是一句名言……但下面这句话有点风骚，我不敢翻译。“Across the Great Wall we can reach every corner in the world”

QQ邮箱

“Across the Great Wall we can reach every corner in the world”

2、回味

扇贝是我天天用的一款软件，它每天都会带来一幅很精美的和一句让人回味无穷的话。每天打开扇贝，感觉又开启了有逼格的一天。

扇贝启动页

3、价值观和社会价值

Bing搜索和腾讯网404 no found界面用来做走失儿童公益。为了能让大家看得更清晰一些，这两张图我就不缩小了，希望宝贝能尽快回家。

Bing搜索

腾讯网

丁香园404 no found界面展现了因恶性医患遇害的同道，向他们表示哀悼。

丁香园

4、人文关怀

下图分别来自Pinterest和微信，Pin在搜索输入depress、suicide等极度负面情绪词汇的时候，会出现“Can we help”提示，告诉用户这些会让人情绪低落，如果你或别人正在经受困难，甚至想自杀或者伤害自己。我们可以帮助你，你并不是孤单一个人。

这正体现了一个企业的社会价值。

在Facebook修改了自己的感情状态，看到了这样的一则官方帮助贴，有点暖心了。

Facebook

在淘宝搜索穿山甲，心里一惊，居然有搜索结果，然后……给阿里点个赞吧，还是希望全民都能建立起保护意识，也希望尽快研制出新型药物。让我们一起来保护这个可爱的小家伙吧。

在淘宝搜索穿山甲

好例子太多了，以后有遇见好的例子会继续在这里更新。

这里需要说明的是，无论是在哪一层级上的设计，都会对其他两层产生影响。比如一个好看的界面设计，会让用户更能接受并理解他，从而得出这个产品不错的结论。 也就是说，情感化设计是整体性的，设计的时候都是需要综合考虑的，不存在只针对某个层级的设计。 只是说诺曼将“情感化设计”分为三个层级后，让我们找到了设计的侧重点，更加方便我们设计了。比如我们可以从本能层为切入点切入，思考得到一个设计方案后，再通盘考虑对行为层和反思层的影响，最后通过修正得到一个更恰当的解决方案。 下文根据层级对案例进行分类，只是为了更方便的进行阐述。

二、什么是情感化设计？

这是个老生常谈的问题，所谓的情感化设计就是 以用户情感角度为出发点的设计方式，以期让用户和产品发生情感上的连接。

现在流量明星都在努力塑造自己的人设，并主动频繁更新动态，让粉丝能更轻易的与自己互动，并发生情感上的连接。这些明星已经不像老一辈明星那样让人感觉遥不可及高高在上，反而让人感觉亲密无间。这些青春靓丽的小哥哥**姐成为了多少人的云恋爱对象。

产品也一样，早就不应该是冷冰冰的机器。

我们也应该给产品一个性格。逗逼、小可爱、稳重大叔、极客、情怀、可靠……这些有血有肉有温度有感情的产品，更能让用户产生情感上的共鸣。每个人都喜欢跟自己趣味相投的人在一起，对待产品也一样。

三、情感化的设计思路是什么？

我查阅了大量资料，也跟做用户体验的同事交流后发现，确实业内现在并没有一个统一的标准化的设计思路。

但幸运的是，我们浸*情感化设计多年，形成了一套我们觉得切实可行的情感化设计思路，今天就将其倾囊相授。

1、 首先需要明确目标，不是为了情感化而情感化。 作为一个设计团队，我们要先明确当前急需解决的问题，有策略有节奏的进行执行，大家方向统一目标一致，这样才有可能高效产出，并取得高分答卷。

假设：现在的目标是提升产品的品牌认知

2、 提取情感化关键词。 我们需要找到用户情感的诉求点，或者我们想传达的情感价值观。并将这些关键词提取出来，作为设计的核心关键词。

假设：提取的情感化关键词是活力、阳光和亲和

3、 寻找切入点。 切入点有非常多，比如统一的视觉系统、文案语言风格、惊喜感、趣味性、微交互等等

假设：我们以统一的视觉系统入手，可以对logo、色调、视觉元素、、插画等进行整体升级。

4、 具体方案细节设计。 我们对找到的切入点进行全盘的把握，然后再逐个击破，最后形成新版的情感化的设计方案。

以上是情感化设计的思路，总结起来就是如下：

情感化设计思路

四、情感化设计的作用

情感化设计的作用有很多：

1、情感化设计可以缓解用户的负面情绪——比如等待、产品出bug、无内容空白页、断网、服务器失联、错误操作等等

2、情感化设计可以引导用户行为——情绪是可以影响用户的感知、决策甚至是记忆的。我们可以利用这一点，比如当用户完成某项任务时，心理处于愉悦状态，我们就可以引导用户到应用商店给我们五星好评。再比如如果用户要注销账号时，卖个萌，是否可以让用户再考虑一下。

3、情感化设计可以提升品牌认同——持续的正面情感反馈，会让用户欲罢不能，并将这种情感投射到品牌上。这种极强的情感认同，会让用户产生极强的忠诚度。

4、情感化设计可以促进增长——这是一个潜移默化的过程，好口碑自然会有好增长。

有个误区：情感化设计大家似乎都在追求正向的情感，但实际上负面的情感也不是不能用。

比如

紧迫感：红包有时限、下单必须多长时间内支付。

心理学上的解释就是，当人类处于负面情绪时，会更集中注意力去解决当前的困境。当人类处于正面情绪的时候，思维会更开阔更有创造力。这也是人类进化而来的结果，正所谓饱暖思*欲，饥寒起盗心。

这也是为什么常常有产品经理抱怨：明明这个按钮那么明显，用户为什么看不见呢？这就是因为当用户处于困境的时候，真的就是进行重复操作，而让自己处于死循环中，最后无奈退出。退出的时候还要骂一句这产品真傻逼。

还有个使用负面情绪的例子是共享按摩椅。

它的喇叭刚好就放在头枕的位置，喇叭里面循环播放着广告词。正常路过的时候，并不会感觉很刺耳，但只要人往那一坐，是戴上耳机也无济于事。想眯一会儿，被这广告词吵得睡不着，但又不想放弃这么舒服的座椅。最后在几经挣扎下，还是乖乖扫码买单按摩了。仿佛耳边飘来一个声音：这个问题充钱就可以解决了。都是被人算计好了的。

五、情感化设计的风险

情感化设计的好处很多，但它的缺点也会对产品造成很大的伤害，我们不能不了解情感化设计的风险。

1、情感化设计存在时效性，一时新颖的设计，可能很快就会过时。

2、每个人成长环境不同、理解力不一样，这导致情感化设计存在较强的主观性。有人觉得还OK的设计，另外一拨人甚至感觉受到了冒犯。

比如下面优酷赠送会员的浮窗，理性看用户领取会员是最佳选择，优酷也想从文案上让原本二选一的选择题变成唯一答案的必选题。但这一句“不要了，我爱看广告”让我感觉受到了羞辱和嘲笑。我选择都不选，退出并清理后台。

优酷视频

3、情感化设计有时候会影响产品的可用性。因为它在分散用户的注意力，处理不好的话，反而会让用户偏离重心。

4、全球化的产品，一定要考虑到不同国家地区、不同种族和不同文化背景的感受。

5、从小众产品做到大众产品，情感化设计越来越难，因为众口难调。每一次设计，都会有人跳出来反对。甚至同一个人，因为他自己心情的变化，也可能对同一个设计作出相左的评论。

为了让我们更安全的进行情感化设计，我们总结出了一些原则：

1、在不常见的页面做情感化设计，比如登录注册页、退出登录、空白页、断网、弱网、服务器失联等边界场景，还可以在产品引入新功能时，用户完成里程碑式操作或成长时。

2、结合节假日或值得纪念的日子出现情感化设计。

3、尽量采用细微的变化。

4、不要欺骗用户情感。

我收到了即刻的一条通知“你好，我们应该认识很久了。”我一激动，这会是谁呢？慕名而来？

结果打开一看，是即刻的新功能介绍。那一刻我感觉到了欺骗。

即刻

5、不要太刻意，无意间的发现更能让用户惊喜。也可以准备一些彩蛋，给用户不期的惊喜。

6、不要干扰用户主线操作。

7、只做适合自己的情感化设计，不要为了情感化而情感化。情感化设计是饭后甜点，不能当正餐。

以上。

如下是产品经理系列文章：

汤涌：干货 | 产品经理入门完整版—能力模型、常用工具、书单、快速入门法​zhuanlanzhihucom 汤涌：如何进行需求收集？​zhuanlanzhihucom 汤涌：需求分析方法论​zhuanlanzhihucom 汤涌：从需求到落地，产品全链路实现流程​zhuanlanzhihucom 汤涌：从需求到产品，如何做一份无懈可击的产品设计​zhuanlanzhihucom 汤涌：情感的艺术—诺曼·情感化设计​zhuanlanzhihucom 汤涌：情感化设计·实战案例篇​zhuanlanzhihucom