在第一篇 Mac 视觉史当中，我梳理过了整个 Mac 系统第一阶段的明线，而这一篇，我们来聊一下它的「暗线」。
这一章所涉及到的项目，几乎可以组成一个 大型的「90年代失败操作系统大赏」，在主要由成功者们所构成的故事、新闻乃至与传说当中，这些失败的故事和项目，被提及的次数很少。
但是对于 Mac OS X 而言，这里的每一次作死和失败都充满了意义。
对于绝大多数的用户而言，Mac OS X 是21世纪初顶尖设计的范式，在今天，它是最优秀操作系统的当中的典型。
但是仔细想想看：从 System 1.0 到 Mac OS 9.2.2，长达15年时间的挤牙膏渐进式升级的Classic Mac OS，怎么可能突然一下子就变成了充满现代感的 Mac OS X？这种翻天覆地式的变化的确充满了戏剧感，但那是在今天的视角之下。
在这场「90年代失败操作系统大赏」当中，无疾而终者多不胜数，你所看到的不仅有粉墨登场，还有各式各样的粉末谢场。在 Mac 的视觉史当中，这一篇应该是一个大型的「处刑现场」。
失败的尝试，同样是 Mac 整个视觉演变史当中，绕不过去的部分——没有这些失败，就没有今天我们所熟知的 macOS 的视觉风格，没有后面 iOS 、iPadOS、watchOS 等等一系列交互界面和视觉。
虽然我们此刻所谈及的是操作系统的视觉史，但是操作系统背后最重要的始终是推动它的「人」。谈 Windows 必然会涉及 比尔·盖茨，而谈到 Mac ，也不得不说乔布斯。
和当年很多操作系统不一样的地方在于，乔布斯一直坚持硬件和软件（操作系统）理应是一体的。这也是为什么在很长的一段时间以内，Macintosh 指的既是硬件（电脑），也是软件（操作系统），而因为这台电脑是更容易被指代的对象，当用户在指代系统的时候，使用的是诸如 System 1 ，System 2 这样的词汇。
原本的 Maciontsh 是有内部竞争对手的——Lisa，这个以乔布斯女儿命名的电脑研发项目被夺走之后，乔布斯在 Macintosh 上投注了300% 的精力，亲手操刀了不少设计。拥有大量资源倾斜的 Lisa 在当时那个阶段，看起来也并不差：
在这个 1983年的 UI 界面上，细节处理其实也算得上非常用心了，比如顶部菜单上的「阴影渐变效果」：
当然，Lisa 的定位也非常明确，它就是一台办公电脑，所以它的系统名称也非常简单直接地使用了 Lisa Office System 这样的名字：
也正是在这样的对比之下，有着丰富字体、多样的媒体功能、能够玩游戏的 Macintosh 在这场内部竞赛中，得以胜出。
当然，如同我们都知道的，乔布斯在发布 Macintosh 的 2年后被迫离开自己创立的公司。当然，更重要的是，硅谷的巨头们更加清楚计算机的发展方向。这使得 Macintosh 面对的外部压力骤增。
图形化界面（GUI）的概念和交互模式——这个点子本身可能比实现技术来得更重要。
在高手云集的硅谷，虽然绝大多数的企业和开发者都是后期入局者，但是他们只要投入足够多的技术人员和时间，类似的图形化交互界面总归是能做出来的。
比如 Visi Corp 给 IBM 提供了 Visi On 这样的图形化程序：
微软也在 1985 年为 IBM 的 PC 提供了 Windows 软件：
Commodore 的图形化界面也差不多同期问世：
而 GEOS 甚至为更老的 Apple ][ 提供了图形化界面的操作系统：
这些系统都是在 Macintosh 发布那一两年内相继问世的。
操作系统领域的竞争，刺激着苹果寻求突破。
多数企业都不会把鸡蛋放在一个篮子里，这样孤注一掷的决策确实有太大的风险。其他的商用操作系统，都开始拥有日渐完善的桌面端图形界面，使得苹果在差异性和独特性上不足。除了在硬件性能和产品线上增加投入，他们也开始尝试开发更优秀的图形化界面和下一代操作系统。
在上一篇当中，我提到过，在 80 年代末所发售的 System 6 是一个集大成的版本，在硬件性能和黑白显示器之下，这个操作系统本身的核心功能已经颇为完善了。这个时候，苹果开始有意识地进行一些探索性的项目。
某种意义上来说，「Blue」 和「Pink」 两个项目几乎是同时开始的。
虽然 1988 年的时候，乔布斯早已离开，但是他所塑造的 Macintosh 是当之无愧的传奇，那种「内部创业」和「改变世界」、「创造传奇」的硅谷精神对于此刻的苹果员工依然有着极大的影响。
当时苹果内部 5 名躁动不安的中层开发工程师想拜托日渐僵化的内部管理，想改变当时 System 6 表现欠佳的局面，想打造一个次世代的旗舰操作系统——某种意义上重现 1984 Macintosh 的传奇。
他们在这次私底下的会议上重新梳理并规划未来的操作系统。他们将System 6 基础上的可以增量更新的特性、可以很快实现的功能，写在蓝色的卡片上，将技术上更加先进、符合长期价值的功能（比如当时 Macintosh 所缺乏的抢先式多任务处理和组件化程序设计）写在粉色的卡片上，将更加激进的特性写在红色的卡片上。
这次会议基本上就塑造了后面的「Blue」和「Pink」两个项目，而红色卡片上的特性由于过于激进，仅仅只是备案而没有成立项目。
数百名工程师继续在 System 6 的基础上按部就班地更新功能、维护代码库，继续「Blue」项目，而它的最终产物，就是后面我们看到的 System 7：
而另外一边的「Pink」项目，一开始并不是公开的。当时 Erich Ringewald 领导这发起这次会议的核心 5人组，想像 Macintosh 项目开始那样，找一个隐秘的房间开始这次「内部创业」。
他们看上了 位于 Bubb Road 的一间仓库，当他们进去的时候，才发现这个仓库已经被另外一个正在秘密进行 Newton 项目的团队给占了。
当然这款同样极为传奇的（失败）掌上设备我们回头再说。
「Pink 」项目开局的时候，有 6个人，但是考虑到要彻底放弃 System 6 的遗产，重新开始全新的操作系统，程序要是面向对象的，要有内存保护，要抢先式多任务处理，要支持多语言足够国际化，还要有全新的图形库，这个团队开始一路膨胀。
先是苹果的先进技术小组（ATG）加入团队，人数变为11人。 2个月后，「Pink」项目增加到 25 人。7个月后，原始的5人组几乎都因为「人员多到失控」而离开「Pink」项目。1年后，「Pink」项目的开发组多达100人。
原本计划在2年后发布的「Pink」操作系统在原计划的2年之期到期之时，拥有了 150 人的超大规模，高级副总裁和市场营销部门的首脑领导着这个庞大的开发团队。
「Pink 什么时候上市？答案永远都是2年后。」
这是当时流传的一个内部笑话。
但是这个笑话只是刚刚开始。因为它才刚刚开始膨胀。
系统开发需要时间，而随着时间推移，市场变化需要「Pink」 更有竞争力，然后原本位于红色卡片上的「激进功能」开始不断的加入到「Pink」当中，然后项目就需要更多时间来开发——恶性循环开始了。
在「Pink」上，苹果投入了太多，放弃是不可能放弃了，唯一的办法就是拉更多人入局。当时的 CEO John Sculley 对外宣称「Pink」操作系统代码已经多达 150 万行，并去 IBM 做了内部演示。
然后，这个看起来像是被移植到 PC 上的 System 7 成功地引起了 IBM 的注意。让比尔·盖茨最不想看到的事情发生了：苹果、IBM 和 摩托罗拉成立 AIM 联盟。
AIM 联盟成立于 1991年10月2日，此时距离「Pink」项目开始已经过去了3年半。半年之后，苹果和 IBM 正式组建了合资公司 Taligent .inc ，而其中苹果占股较小。
原本被拿来吹嘘的「Pink」操作系统，此时也更名为 Taligent 。
Taligent OS 的确有着很多超越 Macintosh 的功能，比如更的程序机制，3D功能等等等等。在整个 UI 界面上，Taligent OS 使用了继承自「Pink」项目的一些设计：等轴测的图标，伪3D风格的图标，还有非矩形的窗口（注意看窗口的顶部菜单栏）。
当然，Taligent OS 从「PInk」项目继承过来的最大特性是：一直在开发，从未正式发布。
1994年，HP 入局，加入 Taligent 公司并且持股 15%，Taligent OS 的一部分技术开始运用到 HP 家的 NewWave 桌面环境中了：
与此同时，Windows 95 的关注度越来越高，而媒体吐槽苹果久未发布的新系统，并嘲讽难产多年的 Taligent OS（还有 Pink），已经成了一件政治正确的事情。
虽然 1994 年的时候，Taligent OS 在 SFA 展会上使用 Macintosh IIcI 展示了运行速度和崩溃速度同样快的 3D 应用，但是它最终还是没有发布。
1995年，苹果出售股权退出 Taligent 公司，「Pink」 项目的最终产品也并非 Taligent OS，而是 IBM 公司的 AIX 系统中的 Common Point 应用。
「Pink」到此终结。失败。
在 Taligent OS 研发期间，苹果将鸡蛋还放到了另外一个篮子里面，这个项目的代号借用了著名的科幻电影《星际迷航》，项目的 Slogan 是「大胆地探索 Mac 之前从未去到过的地方」。
这个地方就是使用英特尔芯片的 X86 架构的电脑上。
「StarTret」项目中，苹果是和当时的服务器供应商 Novell 共同构思的，这个项目最终因为内部斗争、人事纠纷、市场问题而关闭。值得一提的是，同样的尝试在 1985年的时候就有过，不过那次尝试很快就被中止了，以至于至今没有一个正式的代号留下来。
这算是2次失败。
作为 「Blue」项目产物的 System 7 最终并没有彻底解决苹果在操作系统上的困顿处境，系统依然问题很多，内存保护机制、抢先式多任务处理依然还没有。而 1994年3月开始的「Copland」项目，就是为此做准备的，它的代号来源于美国作曲家 Aaron Copland 。
除了在内存分配和多任务处理等核心功能上进行开发提升，它在 GUI 的视觉层面上的优化，也花费了相当多的心思。在视觉层面上，Copland 新设计的一套主题名为 Platinum ，所有的元素都有着颇为细腻的阴影，窗口元素则有着明显的突起，原本「Pink」项目中的等轴测图标也加入了进来。
除了 Platinum 之外，Copland 还加入了面向儿童的主题P，以及更加具有未来派风格的主题Z。
除了主题本身之外，Copland 还支持窗口最小化到底部为标签，多用户登录（Windows 98 之后才有这个功能），这种功能类似于现在的家长管理——管理员帐号可以决定其他用户可以使用哪些应用。可以说，非常超前了。
当你在 Copland 中拖动文件到不同文件夹的时候，这些文件夹可以自动打开，这一功能在当时也是非常先进的。
不过，Copland 极具前瞻性的另外一面，就是它本质上是一个「要你命3000」。各种新的功能和特性出于市场需求和项目需求毫无节制地被加入进来，所有的功能相互之间都存在冲突和影响，所有人都很清晰地知道，Copland 是不可能被作为正式产品所发布出来的。
「它只是一个不同团队开发产品的合集……并且期望它们能够神奇地组合到一起。」
这是当时的 CEO Amelio 自己说的。
当然，Copland 的阵亡不可避免，只不过它的界面管理器和 Platinum 主题最终留到了 Mac OS 8 当中，为苹果公司的自救大业添砖加瓦。
Copland 失败了。自家开发团队搞不定，只能从外部想办法了。
当时，CEO Amelio 个人比较倾向于 Windows NT，并且为此专门同盖茨通了电话，而盖茨也表示如果愿意使用 Windows，他可以组建团队将苹果的拳头产品 QuickDraw 移植过来。此时，WIndows 95 已经发布一年了，而 Windows NT 也刚刚发布，市场反响极好，份额节节攀升。
当然，苹果和微软的命运纠缠并不是此时才开始的。Windows 1.0 时代，图形化界面的专利授权是苹果授权给微软的。
而 Windows 2.0 继续沿用 1.0 时代的设计，但是苹果没有给 2.0 授权，最终引起了纠纷，盖茨借用不维护 Word 和 Excel 软件和当时的 CEO 达成了庭外的和解。这些事情回头有机会细说。
和CEO的想法不同，当时苹果的 CTO Ellen Hancock 其实是想选择 Solaris 来着，不过它还没有一套友好的用户界面，赢面不大。
最终摆在苹果CEO 和董事会桌面上的，就剩下两个备选了，一个是 BeOS，另一个是乔布斯的 NeXTSTEP。
然而这毫无疑问是一次极具戏剧化的选择，因为这两个操作系统背后的两个人，有着极深的纠葛。
Be 公司的 CEO 是法国人 让·路易·加西，他是 1981 年加入苹果公司并负责当时欧洲业务。
1985年，他在得知乔布斯计划在阵亡将士纪念日罢免 CEO 约翰·斯卡利（John Sculley）的计划后，抢先告知董事会，最终导致乔布斯从苹果辞职。
1987年，加西启动了 「Skunkworks」项目，而这个项目的产物就是后来的掌上电脑 Newton MessagePad，而最终这条产品线也是乔布斯关停的。当年的「Pink 」五人组在仓库里撞见的，就是加西的团队。
1990年，加西和CEO交恶，并且董事会对于他所推出的 Macintosh 产品不满意，最终导致他离开了苹果，并于次年创立了自己的 Be 公司。
彼时正在艰难推进 NeXT 电脑业务的乔布斯，在媒体那边的口碑并不好。而加西反而在这个时候，对 NeXT 不吝溢美之词。
当然，最终乔布斯的 NeXT 和 加西的 Be 最终还是摆在了同一张桌子上，被选择。
BeOS 是一个在当时来看极为激进的操作系统。它并不是为当时更为流行的办公场景而构建，而是一款旨在为多媒体处理而生的操作系统。
它并没有采用当时所流行的 Unix 的架构，有着一套相对更加独特的系统逻辑和设计规则。
它同样延续了当时最为流行的等轴测图标设计，在配色上更为鲜亮，在视觉化设计上，一点都不弱于同时期的任何操作系统，包括 Macintosh 和 NeXTSTEP。
在交互逻辑上，BeOS 沿用了当时很多 Unix 操作系统的右侧交互工具工具栏，正在运行的程序可以清晰地在此预览，而右上角的 BeOS LOGO 则类似开始菜单，可以呼出程序列表：
BeOS 的图标设计在统一性和规范性上极高，即使在今天看来，很多设计都不落俗套：
BeOS 能进入苹果的备选，一个很重要原因是这套操作系统兼容当时 Macintosh 所用的 PowerPC 的架构。尽管它一直都未曾推进到 1.0 正式版，但是并不影响它在电脑领域收割一大波粉丝。
但是作为一个操作系统而言，在消费市场上依然是一个失败的产品。
另外一边，乔布斯 的 NeXT 电脑并没有复制 Macintosh 消费市场上的成功。不过，NeXT 作为定位高端的工作站，倒是吸引了不少科学家和计算机领域的研究人员以及顶尖的数字创意从业者的注意。
在接近被收购的当口，NeXTSTEP 系统已经推进到了4.0 的大版本。由于它本身在硬件性能上的突出表现，在操作系统的各种细节上，一点都不吝惜，竭尽全力地刻画细节。而这其中，有很多概念和想法是从 Macintosh 时代继承并发扬出来，并惠及后面的 MacOSX 乃至于 macOS。
精巧的 3D 小插件，全彩高清大尺寸拟物化图标，底部程序坞组件，以及可以购买软件的软件商店，甚至于著名的游戏 Doom 和 Quake 都是在 NeXTSTEP 上首发的。
无论是内部的功能，还是外部的 UI 元素的细节控制，NeXTSTEP 都在当时条件允许的前提下，做到了尽善尽美。比如登录和关闭窗口中的光影细节：
（注：NeXTSTEP 是操作系统，而OpenStep 是一套 API。）
当然，NeXT 本身并不算成功，被苹果收购是最好的结局之一，这不仅是市场的选择，也是苹果的选择，是乔布斯的选择。
终极对决发生在 1996年10月12日，地点是帕罗奥托的花园庭院酒店。
CEO Amelio、CTO Hancock ，以及另外 的 6 位董事会成员是最终决策者。加西志得意满，没有作任何演示，而乔布斯不仅使用了他的天赋技能「现实扭曲力场」，而且如同魔术师一般演示了 NeXTSTEP 的各种功能和特性。
苹果公司，乔布斯，加西 三方的命运在此汇聚碰撞，然后再次扭转。当然，这个扭转的过程并非一帆风顺，此时，距离苹果的命运彻底改变，还有4年时间。
在离开苹果、创立 NeXT 的阶段，乔布斯和苹果曾数度交恶，其中所产生的纠纷与诉讼在此刻依然是障碍。
NeXT公司同意了种种限制条款：其产品将作为高端智能终端直接销售给高校，而且NeXT公司不能在1987年3月之前推出产品。苹果公司还坚持，NeXT的机器「不能使用与Mac兼容的操作系统」。后来的情况表明，如果当时苹果公司的要求刚好相反，会对自身更为有利。
——《史蒂夫·乔布斯传》
看完了这些失败的产品的产品，我们终于要说一下成功的产品了。
下一篇，我们将从「水」聊起。
引用来源：
https://en.wikipedia.org/wiki/Jean-Louis_Gass%C3%A9e
https://guidebookgallery.org/articles/sortingoutfactfromfiction
http://toastytech.com/guis/guitimeline2.html
https://lowendmac.com/2005/apples-copland-project/
https://en.wikipedia.org/wiki/Appearance_Manager
https://en.wikipedia.org/wiki/Star_Trek_project
https://dl.acm.org/doi/book/10.5555/582997
https://en.wikipedia.org/wiki/System_7
https://web.archive.org/web/20070120202050/http://robinnet.net/resume/Robin_portfolio_Taligent.htm
https://web.archive.org/web/20070106224709/http://www.wildcrest.com/Potel/Portfolio/InsideTaligentTechnology/WW87.htm
https://www.operating-system.org/betriebssystem/_english/bs-aix.htm
https://www.wired.com/1993/02/taligent/
文章来源：优设 作者：陈子木
（Onboarding 是指用户第一次使用产品时认识、熟悉产品的过程）
往期回顾：
对设计系统有所认识的话应该会知道原子设计（Atomic Design）的重要性，我们也能将同样的概念应用在 onboarding 上，其构成从宏观到微观分成体验流程、控件形式与界面元素三个层级。
体验流程是一个有时序性的旅程，可以由数个不同的载具表现组合而成；控件则是承载信息而存在的平面，可以放上不同的元素；而界面元素是无法再行分割的对象。
我在每个阶段都举了几个常见的例子，搭配市面上产品的应用方法。
一个产品通常不会只有一种用户——使用健身 app 可能是为了减肥，也可能是为了增重；使用协作产品可能是为了记录工作成果，也可能是为了管理团队。如果能够在 onboarding 阶段了解用户的主要意图、在适量的搜集信息后将用户分流（记得上篇的避免过度吸收法则吗？），就能够打造更切身的体验。
除了用户分流之外，还有一些概括性的分流如下：
真正新的使用者 vs. 回流使用者
某些使用者只是因为一些外部因素（手机掉了、手滑删掉 app、忘记密码）而重新登录/下载产品，他们已经接触过产品的核心价值了，并不需要再次学习，这就是为什么跳过（skip）功能很重要。
邀请人 vs. 受邀人
如果邀请人已经设定好群组，受邀人应该自动被加入，某些信息也该自动填入，而非让用户再填一次，从而导致出错。
新手 vs. 老手
与专业领域高度相关的产品（例如 Adobe 系列、CAD 系列等）还可以将用户区分为已经很熟悉作业流程的老手与初学者等级的新手。老手最重视的是定制化以符合他们习惯的作业流程、作业效率高不高，并且跟其他竞品做比较。新手则不然，初次使用产品时的他们也是初次进入这个领域，如果能帮助他们更加了解这个领域的大致流程的话会很加分。
△ Photoshop 的丰富资源指引（Rich Tooltips）对于新手来说是一大神助
特别点出几个重点 features，简单地告知用户最重要的功能为何、组件在哪里，用户在登录产品之后只要知道这几个主要动作就可以打遍天下无敌手。
△ Slack 指出 channel 和对话框如何使用
当产品较为复杂，难以指出特定 feature 时，也常以影片或图片来展现产品价值——也就是画一张大饼给用户，让他们想象未来的生活在用了这个产品后会有多便利，或是让自我感觉提升。
相对于展示，实际演练更着重用户要亲自执行。许多研究都证实从做中学习的成效，就算只是训练肌肉记忆（muscle memory），也能让用户对界面的物理空间更有概念，像是「噢对刚才有做过，我记得按键在右上角」。
我们也可以设计一套 demo 版的试用，像是将 scenario 抓一个出来让用户试跑，跑过一个假想的故事情节后印象会更为深刻。
在初次展示后将用户引导的数据回收再利用，变成每当用户有问题时都随时可用的资源库。
1. 导览 Guided Tour
可能是影片，也可能是滑动式 slideshow，但总之是向用户介绍产品的主要功能或是传达产品价值，通常是为了展示的体验流程所设置。
2. 指引 Tooltip / Coachmark
用极小的空间指向目标物，既可以集中用户注意力，又不会遮盖住大部分的使用空间，用户可以一边进行正规作业，一边通过指引了解不懂的内容。
△ Dropbox Paper 用诙谐的语气鼓励你开始打字
有一阵子很多产品会将所有指引放在同一张图上，但其实使用不当很容易造成信息过载、注意力分散、之后会很难全数记住的情况，我的建议是一次一个比较好。
3. 秀给我看 Show Me
通常只会出现在教程中，强迫用户一定要亲自去按到按键或执行关键动作，切实练习用户的肌肉记忆。
1. 空白状态的行动呼吁 Empty State CTA
擅用空白状态是 onboarding 重要的一环，毕竟许多产品在用户动作之前可能都没有太多料，这时候就要运用行动呼吁。
例如 Tumblr 在指导使用者选择有兴趣的领域之后就指出如何 po 内容，因为其用户生成平台（UGC，User-generated content）的本质就是要鼓励用户多交流、多产出，平台才有价值。
2. 进度列 Progress Bar
提供进度可视化，让用户有掌控时间的感觉，而不是不知道自己还要再走几个步骤而感到不耐烦。
Basecamp 将进度列摆在上端，让使用者知道已经快做完这些设置了
3. 待办事项 Checklist
人类天生喜欢将事情「全部做完」，欲罢不能：科技如何让我们上瘾？可以协助我们「引诱」用户更愿意完成 onboarding 程序。
Bluma Zeigarnik 让受试者完成某些任务，但在他们完成另一些任务前打断他们，强迫他们开始进行其他的任务。这些受试者会非常不情愿地停下手上正在做的事，有些人会强烈抗议，有些人甚至会生气，这显示出 Zeigarnik 的打断为他们带来多么大的压力。到实验的最后，受试者清楚记得那些未完成的任务。如果是打断后一阵子又让他们完成的话，就没有这种效应。（摘自 欲罢不能）
4. 跳过 Skip
每次有 onboarding 都会选择跳过的人举手！
我喜欢把这称为不喜欢看桌游规则的人们，所以在使用中遇到困难时给予提示，对他们来说才是最实用而且最愉悦的，而不是在使用前的纸上谈兵。
△ Tumblr 在使用者第一次发文时才提示如何装饰文字
设计 onboarding 时并不是只能选择一种方法，我们可以灵活运用各种元素。将 onboarding 视为一个旅程，而不是单一元素的无限重复。我看过大部分最棒的例子都是综合使用上述多种元素，以下以新兴生产力工具 Coda 为例，来看看集上述大成的 onboarding 作品。
在第一次进入产品使用引导时，可以自行选择偏好的学习方式——影片或是交互式教学。
Coda 并没有强制用户立刻进入 onboarding 模式，而是在呈现主画面之余，让我们看到右侧的待办事项，令人产生「想将之完成」的欲望。
点入后，先有个 setup 内容，任务情境是为了项目经理所设计，但随着使用教程的进行，用户也能够联想到自己生活中的其他任务，例如安排家庭旅游、写系列文案、追踪买家信息等。
正式进入学习阶段后，进度条就出现了。
单纯根据文字叙述，用户仍然可能混淆，这时候 Show Me 功能可以减少不必要的误解。
同上，当用专有名词（此处的 section ）介绍某个界面元素时，将其他无关紧要的区域遮盖住，聚焦在重点区域，用户更容易将专有名词跟界面链接在一起。否则单说 section 谁知道是哪一个 section？
结束时记得给辛苦学习的用户一些奖励，并且贴心附上下一步，当然还是要留给使用者最终决定权。
完成一项后，Coda 会帮用户将完成的项目划除，于是得到立即的回馈。
完成所有步骤之后，原先是教程列的右侧区域转变成资源列，每当使用上遇到困难时就可以寻求各种协助。
Onboarding 并不是只会出现一次，推出多年的产品也仍会时常进行。
onboarding 的程序，例如推出新 feature 或有重新设计（redesign）的时候，目的仍然是让用户快速熟悉产品，所以这是身为产品设计师不可忽视的一环。
另外，除了 UI/UX 设计之外，文案写作也极其重要——如何跟用户诉说一个吸引人的故事、描绘出他们想象中的自己，也是成功 onboarding 必要元素。
文章来源：优设 作者：
今日头条作为资讯阅读类产品，Feed流场景是资讯类产品的核心场景之一，关于Feed流的改版尝试一直在进行，针对本次优化，多次在线上进行验证后，得到一个满意的结果，也将我们关于「头条首页改版」运用到的设计方法进行分享。
观点-实验-规则
项目前期提出设计论点，通过方案和实验去验证可行性，最后结合案例形成符合当前场景的设计规则，这也是本次设计探索所运用到的论证方法。
1. 什么是阅读需求？
一组信息通过不同的字号反差组合来满足不同场景下的文字阅读需求，这称之为阅读需求，阅读需求一般可以归纳为以下3种类型：快速定位型、浏览型、阅读型。
△ 三种阅读需求
2. 今日头条首页的阅读需求是什么？
今日头条Feed的阅读需求，我们定义为快速定位型和浏览型之间。原因是在阅读Feed时，用户有获取标题关键信息的强定位属性，同时也有浏览feed信息的浏览诉求；从Feed阅读习惯的分析，我们提到两个关键词，信息的定位和浏览，后面的探索也会围绕这两个关键词展开。
△ 首页的阅读需求
1. 信噪比与界面
「信噪比」（Signal-to-Noise Ratio）原本是用在声音和图像领域的概念，指在声音传播过程中信号和噪音的比例。这个理论也可以运用在页面中，如果要将讯息完整地传递给使用者，可以选择强化原有的讯息，或是降低多余的杂讯，来提高「信噪比」（Signal-to-Noise Ratio）以增加讯息成功被判读的机率，也让使用者能更轻松地阅读资讯。
一组信息是否更好的兼容定位与浏览属性，在于信息本身是否足够强调与清晰；「信噪比」理论是帮助我们理解「信息清晰度」的存在。
简而言之，「信噪比」理论通指有效信息和次级信息的比例，控制平衡这个比例，可以有利于信息完整的传递给用户，也能更轻松的获取资讯。
通过强化页面内的有效资讯，降低多余杂讯，从而提升页面内的「信噪比」，以达到提高有效资讯传递，帮助用户能更轻松获取资讯的目的。「信噪比」理论是非常通用、使用广泛的指导理论，对信息流页面设计有明确的指导作用；
△ 提升「信噪比」的目的
2. 视觉搜寻实验
△ 视觉搜寻实验
在视觉搜寻的实验里，让受试者从许多个「X」里面挑出1个「O」，然后再让他们从「┸」里面挑出一个「┼」。我们把所有的视觉元素称作刺激总量，大部分的元素（「X」和「┸」）称为干扰物，唯一不一样的那个元素（上面例子的「O」和「┼」）称为目标物。而实验的目的，就是要检测在干扰物增加和同等情况下，受试者会不会需要花费更多时间才能找到目标物。
当我们的视觉系统在辨识影像时，有一些影像的属性很容易被大脑处理，我们的视觉系统可以很快过滤辨识这些基础特征，让我们的大脑分辨这些影像属性更容易一些。因此我们涉及到大量信息的设计时，如果能够善用这些基本特征，便可以提高用户的阅读效率。
那么，什么样的特征能够帮助讯息更快，更有效的被用户判读和接收呢？在视觉搜寻实验中，有一些基础特征很容易被我们的视觉系统所辨识出来，其中主要有4种不需注意力介入便能轻易分辨的基本特征：
△ 4种基础特征
强化信息的基本特征是增强信息被判读最有效的方式，我们可以根据场景和用户诉求，选取最合理的方式来对信息进行处理；这4个基础特征，通过反差来增强核心信息的突出程度，辅助信息更好的传递给用户。
通过「视觉搜寻实验」，我们可以得到两点结论：
这两点结论是对于」信噪比「理论的补充，处理好信息的」信噪比「关系，强化有效资讯，弱化次要杂讯，帮助用户有效接收资讯，更轻松获取资讯。
3. 首页目标的变化
资讯的生命周期中，包括了产生、传递、接收这三个重要的阶段，而每个阶段都有可能造成信息的损耗；
信息产生是源头，这里的损耗在所难免，我们所要做的，是尽可能控制」传递「和」接受「阶段的损耗；早期的头条首页承载大量信息，目的是为了让用户可以接受到更多信息，这时「效率」会是第一位。
但在承载大量信息的同时，页面信息过多，容易造成信息对比弱、布局密集，从而导致信息 」传递「 阶段的损耗，同时用户在」接受「信息时，看到拥挤的信息布局，接受信息的」效率「被降低，被迫造成损耗。
为了更好的提升首页阅读效率，我们重新审视当前的设计目标，通过对不同组合的空间调整，平衡展示效率以及阅读识别性，控制「传递」和「接受」中不必要的信息损耗；将设计目标从过去的「效率最大化」，调整为「有效，轻松的阅读」
对于这个目标，我们结合之前抽离的」信噪比「理论，进行更为细致的拆解，确保能落实到后续的设计方案中。
△ 设计目标转变
4. 回顾信噪比
「信噪比」理论可以平衡页面内有效信息和次级信息，在这样理论的引导下，提供的方案其实更具备说服力。
和图片噪点一样，噪点越低，清晰度越高，映射到页面也是如此，页面内的杂讯过多，影响到有效讯息的传递，我们需要做的，就是给页面进行「降噪」处理。
1. 文字的反差比
根据前期的」信噪比「论点和」视觉搜寻实验「，我们得出两个核心观点：
两个论点其实都提到了信息对比强弱对于用户判读的影响，由此可见，不同信息的反差关系,是增强信息传递，缩短用户接受信息耗费时间的关键指标。
如果说「信噪比」是信息流优化的理论依据，那么「反差比」则是验证页面信息反差关系的手段。
调整页面内文字反差，一般通过三种方式来提升或调整
△ 提升文字反差方式
让我们来看首页中Feed流的标题字号，我们通过 iOS 和 Android 的通用文字规范可以发现，最小阅读文字为12号字（10号字用在标签，9号字用在数字提醒，都不适合作为阅读文字），Material design中正文内容默认字号为16px，iOS规范中则定义了7个正文字阶（14、15、16、17、19、21、23)，综合多方因素，我们选取了16号字、17号字为主要验证目标.最后形成16/12 17/12这两组组合来验证线上Feed信息流。
「信噪比」和「视觉搜索」理论中，多次提到增强元素反差比，用户能越快获取资讯；所以我们也尝试了加粗字体和加大文字的实验尝试，用于验证文字反差比的上限。
△ iOS/Android 通用文字
2. 反差比公式
为了更好的验证和观察Feed流中的不同文字字号的反差关系范围，我们提出了一个坐标公式用于验证，可以直观的观察字号，字色，字重三组信息间的关系。
Y轴代表字号，X轴是不同灰阶文字颜色，我们可以将Feed信息组合中的字号放入表格中，通过科学方法检验反差范围。
关于这套验证公式，是我们为了验证文字反差比所提出的检验方法，通过不同实验组中字号的反差范围来验证哪组更适合Feed场景，最后输出成符合当前场景的通用规则。
△ 文字/灰阶反差比推导图
最后，我们选择4组方案进行首页反差比验证，同时将比字号放入坐标轴中,可以看出以下文字的反差范围
△ 在反差比范围内，选取的四种字体组合
上面4个表格分别对应4组反差比验证的字号组合，不同字号组合的反差比范围，我们都可视化出来，以便于更好验证哪个信噪比范围更合理；每组方案的反差比范围都不一样，我们会通过线上实验，选取最适合当前场景的反差比范围，并形成适用于Feed的反差比规则。
这里也是验证首页Feed反差比的上限和下限范围，有时主体并不是反差越强越好，反差也是有阈值范围，超过这个阈值范围，会导致信息展示比例不协调，用户侧也会起到反作用。
目前对于坐标公式验证文字反差比的理论还处于实验理论阶段，我们认为对于字号和灰阶之间，有合理的规则存在，单独对于规则的抽离和梳理，还需要大量样本去实验论证，后续有新的结论产出和模型迭代。
目前线上首页存在以下问题：
为了解决这些问题，我们对于首页的视觉语言进行了优化，通过」信噪比「理论，我们了解到平衡有效信息和杂讯的比例，是保持信息干净清晰，更好触达用户的保证；因此我们重新梳理不同题材的结构，确保核心信息在首页展示的唯一性，去掉了对于用户阅读过程中可能造成阻碍的信息。
△ 首页前后对比
这样，首页上核心信息的展示层级得到统一，保证了信息干净清晰，能够更好触达用户。
在「信噪比」理论和「反差比」实验的基础上，输出了用于线上测试的设计方案，为了验证首页中不同变量的影响，我们把头部，字号，字重，间距这些可能影响首页的因素都拆分验证对于首页影响；同时，根据前面」反差比「的验证理论，我们把」字号加大「和」文字加粗「也放进实验中进行验证，为后续实验积累数据样本。
△ 线上验证首页方案
综合前面的实验结果，最终我们选择了两组这两组方案，目前线上在进行最后实验。在实验中，我们也提取到几点关键指标：
用户对于灰头样式并未特别排斥，这个对于过去头条顶部必须是红色的认知有些挑战；其实当下设计趋势是在减少用户阅读的信息干扰，灰头更符合这一趋势，同时使用灰头也会提升头条整体计品质感，对于后续设计拓展有很大帮助。
加粗字体上，男性用户比较偏好加粗字体，但是女性用户和年轻用户较为反感。
增大Feed字号，信息展示确实更突出，但是影响到整个首页的感官，而且违背了我们的设计目标，同时也不利于后续设计拓展。部分用户手机的展示情况和特殊字体设置都会受到大字体影响，需慎重考虑。
前面有谈及18号字的问题，字号增大确实能增强视觉感官，但要考虑到头条用户比较喜欢运用特殊字体，特殊字体对比通用字体更加个性化，但是字体大小，展示高度并不可控，当字号比较大的情况下，再加上手写字体，效果不可控。
△ 线上手写字体情况
线上实验后，我们也进行了一次线下用户调研，用研结果中用户对新版满意度高于旧版，其中有一个点多次被用户提及到，就是调整后的全圆角搜索框。相比过去的方形搜索框，调整后的全圆角搜索框是能给用户留下深刻印象的视觉记忆。
回顾整个首页改版过程，我们总结了项目中的流程和思考，希望能帮助大家：
1. 定义当前使用场景的阅读需求：
阅读Feed的时候，用户有获取关键信息的强定位属性，同时也兼顾feed信息的浏览属性。
2. 通过「信噪比」理论，明确设计方向：
强化页面内的有效资讯，降低多余杂讯，提升页面内的」信噪比「，达到用户有效接受资讯，轻松获取资讯的目的。
3. 运用「反差比」手段，提升信息反差比，增强信息传递：
文字可以通过字号，字色，字重调整反差关系，并且通过「文字反差验证表」进行反差比范围验证，推导出更适合首页的反差范围，形成首页反差比规则。
4. 线上拆分验证，量化首页影响指标：
线上验证方案，把字号、字重、间距疏密，头部颜色多个维度拆分验证，观察不同个指标对首页影响。
5. 抽离项目中有价值的信息，后续形成统一规则：
间距样式和信息层级统一的feed模块；从矩形到全圆角的搜索框这些知识点都可以沉淀成信息流场景的认知规则，并且给予其它业务和项目理论和实践支持，将理论和线上验证相结合，形成真正有价值的设计方法。
「信噪比」理论可以广泛运用到页面信息设计中，帮助大家合理的梳理核心信息与次要信息关系，并且通过」反差比「手段，增强有效信息或弱化次要信息；保障页面内层级的合理布局，帮助用户更有效的判读信息；这次改版也是对目前认知基础上进行的一次拆解与构建，过去我们所认知的基础目前可能处于变化阶段，这也为我们后续方向探索提供更多可能性。
希望这些能为后续设计起到帮助，给予大家思路与灵感，更好的服务用户。
文章来源：优设 作者：今日头条UED
这周我们进行下一步讨论：如何对分析结果进行选择。
首先我们需要了解互联网产品研发团队的各个角色分工。
对于初期的产品研发，可能公司没有团队概念，所以从想法到设计到开发，都由一个人搞定；
等到公司发展差不多，自己成了领导，就可以对各个角色和分工有所分组，也就是大多数初创公司的分配情况：
随着公司业务的发展，产品经理需要处理越来越多的业务规划任务，所以从业务视角和用户视角将之前的产品经理岗位职责进行划分：
所以最终的角色分配是：
再大一点的公司，会增加项目经理岗，把之前产品经理负责的职责拆出一部分，这部分职责就是项目管理。所以角色分配最终是：
了解了团队角色分工，只是让产品得到了更专业的技术支持，接下来我们需要切入正题：对交互方案进行评价筛选，筛选的标准可以围绕：有用性、易用性和吸引力展开。
1. 有用性：
方案是否同时满足业务目标与用户体验目标，为了更好理解，大家可以看下如下事例：
如果所有的线上商品都发顺丰快递，对于用户来讲，用户体验当然很好：够快。但是从业务目标来讲，这是不可取的，毕竟快递不能独顺丰一揽。所以这个想法没有顾及到业务目标，是不可行的；
很早之前，有过 Open ID 的概念：用一个 ID 就可以登录多个网站。但是接入了 Open ID 的网站，对于自身产品的登录注册就会有一定影响，所以这个想法不了了之。
后来 Facebook 和 Twitter 开放了自己 ID，可用这两个账号进行其他网站登录。于是国内很多网站也开始支持微博、微信、QQ 账号登录。
这样降低了用户注册成本，而且也获得了一定收益。所以这是个不错的想法，但是对于一些需要获得用户信息的产品可能不太适合，所以视情况而定。
总结来说，有用性就是要满足产品利益与用户利益。毕竟如果只是很好看，最多也就只能被称作一个艺术品。
2. 可用性
所谓可用性就是用户容易理解，使用起来没有障碍，并且感受良好。
关于产品可用性，大家可以去了解下鼎鼎有名的尼尔森十大可用性原则。
3. 吸引力
所谓吸引力就是产品有打动人、超越用户期望值的细节。
关于吸引力设计，大家可以了解一下 KANO 模型，KANO 模型定义了三个层次用户需求：
基本型的需求：用户认为产品必须有的功能属性，如果没有，用户会不满意；如果有，用户会觉得理所当然。这个层次的需求，还谈不上用户满意与否；
期望型的需求：不是产品必须的功能属性，可能用户自己也不清楚一些功能，但是又恰恰是用户希望看到的。如果这种需求实现得越多，用户会越满意；如果没有满足用户这种期望值，用户会不满意；
兴奋型的需求：对于一些无关紧要的功能需求，如果产品满足了这些需求，用户会非常满意，从而提高用户忠诚度，最后把它推荐给好友。
通过以上标准对方案进行分析，最后涉及到决策，不管哪种类型的角色分配，都需要进行决策，这里可分为以下两种：
个人决策：对于最后的方案选择，由一个人进行「拍板」，这种决策方式速度快，容易抓到事情本质；但是缺点是缺少了团队氛围，不太建议这种一人说了算的决策方式；
群体决策：这种决策方式团队氛围会好很多，通过发表每个人的看法，最后得到合理的、正确的、富有创造力的解决方案；但是缺点就是因为参与者多，需要比较长的时间进行决策，即使这样，也建议使用这种决策方式，不过前提是需要事先确定一个明确的负责人，这样可以对决策后果进行负责。
从小的方面来讲，决策也可分为：
内部 review：设计的作品先在团队内部进行过稿，然后修改，切忌全部做完才进行 review，需要做完一步就进行内部讨论；
外部评审：以会议的形式展开，召集大家对作品进行讲解。
确定了最终方案后，我们需要把它推销出去，具体有以下几种方法：
将思考过程可视化：可以采取上一篇文章的表格分析方式，让设计更有说服力；
自己人效应：对自己人说的一些建议方法更加信赖；
准备一份PPT：展示设计思路；
讲一个故事：以用户的某个使用场景开头，一步步讲解用户的使用情况，慢慢过渡到产品功能设计；
掌握必要的演讲技巧和表达能力：包括口头和文字表达能力，通过这两种表达理清思路，也更好让别人进行反馈。
最后想说的一些话：
作为交互（设计）专业人士，我们需要把握好一个尺度：什么该坚持，什么不该坚持，对于一些专业方面的东西，我们需要团队内部人员都坚持，这样目标会更清晰；但是对于一些比较小的设计细节，有时候可以适当妥协。
如何对设计需求分析结果进行选择：
文章来源：优设 作者：Pony欧尼的日常
以下是百度网盘UE团队近期对会员中心体验进行优化，希望对大家做商业化产品有所帮助。
会员中心是承载着产品增值权益展示、购买、管理的「集合地」。自2016年起推出会员和超级会员两项增值服务至今已有4年时间，随着时间推移，用户对网盘会员的诉求越来越多样，会员中心也不仅仅承载着支付能力，更多地是获取福利信息和情感上的尊享感知，同时在产品框架上的拓展性和效率也有待提升，因此有了本次会员中心改版项目。
对于设计师而言，我们发起这个项目所面临的挑战，不仅停留在用户体验的优化还需要兼顾商业转化。接下来将从确定目标、会员中心框架重构、视觉语言升级、沉淀通用组件等方面，跟大家分享下改版背后的设计思考。
在着手推进项目设计前，我们通过定性和定量的分析，并组织多角色对本次升级的目标进行确认，本次升级的目标是：提升用户决策效率；提升用户尊享感；沉淀设计组件库。
1. 为什么要提升用户决策效率？
会员中心是价值与信息的洼地，用户需要在众多特权、优惠信息中做出决策。整个框架清晰、直观、易懂，是提升用户决策效率及满意度的关键所在。
我们通过支付转化漏斗分析并结合用户反馈发现，改版前，会员中心信息架构比较扁平和单一，缺乏关键性信息的直观展示，比如：优惠信息、会员服务信息，导致部分用户无法在付费过程中更好地做决策。
此外，在支付流程上，操作链条较长，容易引起用户厌倦，导致用户流失。基于这些考虑，我们将对现有框架进行升级，以提升用户的决策效率。
2. 为什么要提升用户尊享感？
会员中心也是用户感知身份变化、感知会员尊享的第一步。改版前，不同身份用户（未开通/会员/超级会员）看到的会员页面却是相同的，无法直观感受到不同身份的差异。
通过UER的用户访谈我们也发现，很多用户出现以下场景：
购买会员后用户，产生疑惑「是否购买成功了吗？」；身为超级会员用户，「感受不到任何尊享感受」；快过期的会员用户，「对会员/超级会员快过期的也感知不到，导致特权中断，影响使用体验」…
因此，我们需要对整体身份的感知进行升级，让用户更清晰地感知到自己身份的层级。
3. 为什么要沉淀设计组件库？
对于产品而言，会员中心也是会员类活动的主要运营渠道。
在日常「小步快跑」迭代需求中，为了提升项目组的开发效率以及更好地实现产品侧多场景模块灵活调用的诉求，需要对复用率较高且灵活多变的模块（尤其是支付模块、特权模块）进行组件化。因此我们也对多个模块进行组件沉淀，提升产品迭代效率。不仅于此，组件化也能给用户提供更加统一的认知，做到产品体验上的统一和规范化。
明确了目标后，我们从以下维度进行设计升级，解决现存问题：懂你所想，会员中心框架重构；凸显尊享感知，视觉语言升级；提升迭代效率，通用组件沉淀。
我们本次框架重构的关键词就是「懂你所想」，只有更了解用户，才能提供更符合用户的选择，从而提升用户决策效率。因此，我们在交互框架层面上，做了以下几件事：打造分层布局；强化关键信息；缩短支付步长；智能化推荐。
打造分层布局
进入会员中心的用户，根据会员成长周期可被划分为：历史未付费用户、会员开通中用户、会员即将过期用户、会员已过期用户。
因此，在这次框架设计中，我们根据身份、动机、行为的差异进行分层布局。改变以往的「多人一面」的布局架构，打造出新的「多人多面」的灵活分层页面布局。
当用户是历史未付费用户时，我们更加突出用户的特权介绍和商品支付，便于用户了解会员服务和商品信息；当用户是开通中的用户，我们更加突出用户可尊享的福利信息，突出尊享感；当用户为即将过期用户或已过期用户时，我们展示用户常用特权信息，唤醒用户付费意愿，并为用户提供便捷的续费能力。
下面是改版前后效果对比，从单一身份感知到多元分层处理。
强化关键信息
关键信息也是用户更为「关心」的信息，通过调研发现，网盘用户更加关注会员优惠活动信息、服务到期提醒以及会员之间的差异性，因此在本次升级中，我们对用户所关心的决策信息进行强化，恰如其分地展示便于用户决策，同时提升用户的付费意愿。
新增运营渠道
通过用户访谈，了解到很多用户总是错过网盘的福利活动，不知道在哪里能接受到一手信息。
因此，本次升级我们在会员中心中新增了运营位，增加用户关注的优惠活动的曝光。
服务到期提醒
针对即将过期或已过期的用户，我们会展示用户常用特权功能的即将到期的信息，避免用户特权功能到期后，给用户日常使用带来困扰，比如使用视频原画备份等功能，我们也会提前告知给用户：「3天后即将到期，将不再享有视频原画备份和在线解压等11项特权」，让用户提前做决策。
强化特权的差异对比
此外，我们还强化了特权对比的差异，分别展示了普通用户、会员用户、超级会员用户拥有特权功能的差异性，便于用户根据自身需求选择对应更为合适的会员服务，避免买错等一系列不便或者多花冤枉钱的行为。
缩短支付步长
为了更方便用户进行支付，让用户付费行为更加顺畅丝滑，我们摒弃以往全页面跳转形式，采用了浮层收银台的方式，减少用户在页面间的跳转而带来的迷失感，达到简化支付路径的目的。
也在用户即将过期等状态，保留了原有前置展示商品和支付操作的方式，让用户一键完成续费，方便又快捷。同时，也会在用户选择商品支付时，展示用户帐号信息，避免用户买错的问题。
智能化推荐
与以往不同，我们不局限于通过理性的信息展示，让用户自己搜寻信息、被动匹配，同时我们也在不断尝试采用更加拟人化、对话感的方式触达用户，推送给用户更为关注的信息，更加精细化地探索多样的运营场景。
比如：针对已付费用户，结合用户的使用场景，更多展示特权信息，如：「周末看视频，2倍速、2K、极速加载缺一不可」；
当我们上了会员新特权的时候，也会及时告知用户，让他们享受更加丰富的权益。
本次对会员中心的视觉呈现也做了全新升级，不仅凸显会员的尊享感、情感化，同时兼顾用户的识别效率及后续拓展性，针对这一目标，我们做了以下优化：卡面升级，提升身份感；品牌色优化，确保拓展性；icon重塑，强化识别性；惊喜彩蛋，提升情感化。
卡片升级，提升身份感
会员身份卡片是用户直观感受身份变化的第一步。本次卡片设计中，在卡片比例上，尽可能接近于实物卡片，并在卡面肌理表达上，采用磨砂质地，更贴合用户自然认知，卡片颜色结合会员品牌色进行设计。同时结合网盘品牌基因中的logo的「云」，提升品牌差异化。
当用户进入会员中心时，采用光影动效，同时描绘「云」型，提升视觉层次感，同时加深用户认知。
品牌色优化，确保拓展性
我们还重新定义了会员体系的品牌色，超级会员选用黑金配色来突显最高级别身份。
主题色延续了网盘会员色系，超级会员为金色，会员为红色，在此基础上调整色彩明度。新配色在产品界面和运营活动上，能给用户带来更加直观的身份感知。
辅助色为黑白，因为它是色彩世界中的 「 经典 」 ，给人以简洁、纯粹的审美感受和视觉享受。以黑白色作为会员体系的辅助色，可以衬托出黑金配色的尊享感。
icon重塑，强化识别性
在特权icon设计中，强化识别性是本次优化的重点，因为图标的目的是用来辅助用户识别，帮助用户做决策的。
我们在icon表现手法上，从「线性」改成「面性」，增强视觉比重；去除底部圆形衬底，采用异型图标，强化icon之前的差异化，同时异型的icon在占比较小的区域里使用更加节省空间，提升拓展性。
比如，当用户是未付费时，特权icon仅作为辅助图形，因为在这种场景下，icon远没有文案更能帮助用户清晰理解，避免用户买错。
因此异型、面性、无衬底的icon处理手法，也是在拓展方面较优选择。
以下是icon优化后的整体效果。
惊喜彩蛋，提升情感化
尊享感，不仅体现在功能、视觉层面，还体现在情感化关怀，因此我们通过彩蛋式翻卡的触发形式，采用对话的方式，展示互动文案。
当用户首次进行翻卡时，它会贴心问候：「很高兴你与你相遇，愿美好时光与你相伴。」；当用户日常互动时，它风趣幽默：「据说超级会员，法力无边！」「你喜欢的样子超级会员都有~」；当有用户关注的重要消息时，它会及时预告式通知：「4.11日即将有一大波优惠福利袭来，超级会员最高5折哦」，从而营造一个风趣又贴心的小管家，也让我们的网盘会员服务变得更加贴心。
会员中心包括个人信息展示、身份卡片、商品和支付、尊享特权、尊享福利、成长体系、专属内容、积分兑换等模块。
其中有多种模块会在多场景中进行复用，为了节省开发及设计成本，同时保证体验一致性，我们本次也沉淀出能够灵活调整各个模块的位置的组件，来提升产品及运营效率。
比如：支付模块；特权展示模块。
支付模块
支付模块承载了会员类商品信息的展示，会在多个场景出现，比如：浮层收银台、会员中心页面、全端收银台，以及会员类运营活动。为了保证支付体验的一致性，我们优先对支付模块进行统一和规范，包括其中的商品展示、优惠展示、以及支付按钮的规范化。
为了便于用户感知到会员与超级会员之间的差异，避免错误购买带来的困扰，我们通过品牌色（超级会员的金色，会员的红色）进行区分。
支付模块的统一和差异，既能保持支付体验的一致性，也能避免用户对会员权益产生误解，为用户带来了更规范的支付体验。
特权展示模块
对于特权展示模块进行特权展示的优化，针对以往特权数量多占用空间大，以及特权展示信息过少用户看不懂的问题，不再采用平铺的方式，而是采用利用横向空间的侧滑方式展示，节省更多空间；不再采用原有的特权图标+特权名称的方式，而是同时展示辅助特权信息，便于用户更加了解特权内容。
并将特权展示方式进行组件化，当有新特权上线时，可直接通过后台配置进行上线，无需进行开发，提升效率。
同时，我们还完成了运营位、专享内容、专属推荐等多个模块的组件化，也根据会员商业化的设计规范，形成会员中心的组件库，提升合作效率及用户统一的认知体验。
以上就是本次会员中心改版项目的全过程，从前期用户调研、目标确定（1.提升用户决策效率；2.提升用户尊享感；3.提升迭代效率），到通过多维度地将目标落地（1.懂你所想，会员中心框架重构；2.凸显尊享感知，视觉语言升级；3.提升迭代效率，通用组件沉淀），不仅优化了体验、提高了效率，也对付费转化率有所提升。
本次会员中心改版，是网盘所有同学的共同努力，同时也是会员中心提供给用户更多选择、更率、更多服务的第一步，它不再是机械的信息展示和冰冷的支付平台，而是更懂用户、提供给用户更多元服务的聚集地。
目前还有很多不足和待完善的地方，我们也在尽最大努力为用户提供更好更有价值的服务，感谢大家一致以来的支持与陪伴 。
文章来源：优设 作者：百度UE团队
今年已经是 2020 了，各位作为时代的弄潮儿，上网冲浪是生活中的不可或缺，丰富的冲浪生活中必不可少的当然是买买买，面对琳琅满目的商品图与文案，用户怎样才能快速抓到重点？或者说，怎么样才能让信息出现在合适的位置？
首先我们要了解浏览信息这个动作的本质和特征，浏览的本质就是大脑通过眼睛去提取信息，是一个传达→解码的过程，在这个过程中又存在一些特性，我们可以利用这些特性去进行一些更的信息传达。
受阅读习惯影响，人们阅读的起始端都是在左侧，结合依据尼尔森等老前辈发布的眼球轨迹研究报告可知，视觉浏览习惯呈「F」型且是不受控的潜意识习惯；同时可以延伸出例如「E」、「Z」等浏览模型，我们可以根据这些视觉模型的特性，结合产品的战略层目标，将信息放置在合适的位置，已达到信息传达率的最大化。
了解了基本的视觉浏览模型，那我们的地基就已经搭建好了，接下来我们来看看地基搞定之后的结构要怎么去布局。
首先我们需要清晰产品的属性，电商平台的本质是物品的交易，因为线上的特殊性，产品中图片与文案对于平台的 GMV 就存在最直接的关系。这个时候，单元布局的轮廓就出来了，就是「商品图+关键词文案」。
同时，不同平台战略方向、发展阶段、团队规模等因素的不同，所针对的用户群体、消费阶层、心智、审美等各个因素都会大不相同，有时候甚至在同一平台中针对不同的活动、不同的品类进行细致的场景划分，产生不同的单元结构以满足商业目的上的需要。
720° 全方位了解平台的属性特征后，我们就可以开始利用这么信息来搭建基本的单元结构了。
例如平台主攻下沉市场，用户群体多为三四线，这个时候用户吸引点在于商品的价格与卖点关键词，这时候我们就可以拉大关键词文案的占比，缩小图片的占比，让他们关注的内容尽可能多的进入他们的眼睛，吸引购买意向模糊的用户点击，增加购买意向明确的用户匹配商品的速度，已达到 GMV 的提升。
简单来说，过程中需要考虑到平台因素所产出的图片尺寸/比例/精致度/是否统一等，与文案搭配所呈现的是否适用当前消费场景及用户心智，是否可以提升用户的转化率，是否可以提升平台的下单率。
单元的架构是多样且复杂的，就像一块七巧板。重点就在于对于产品属性和用户行为、场景、心理等特征的分析，需要权衡各个关键点的重要性，把用户需要看到的信息、我们想让用户看到的信息、用户希望看到的信息以合适的结构状态呈现给他。
我们将大体架构搭建好之后，剩下的就是要把细节元素给点亮，让他们起到一个点睛的效果。
细分一下，其中涉及到的细节元素大致为活动标签、折扣标签、跳转按钮等常规的分子部件，在结构中，图片、商品名称、价格是用户关注的重点，其他的部件则起到辅助刺激的作用。图片和商品名称的大体结构我们在上一步已搭建了，剩下来我们看看这些小部件该如何合理归置。
先从标签说起。整体框架出来了，用户所需要了解的商品信息就已经基本呈现了，这个时候用户心智上更多的主观意向，寻找合适的商品，而标签的出现，更像是一剂兴奋剂，强烈告诉用户：「这个品热度第一！」、「这个品是款！」等我们刺激用户的声音，增强用户查看的欲望。
这个时候疑问来了，那放哪里合适呢？
活动标签，多为显示该商品的热度、促销主题、排名等一些大的状态性的信息，为的是在用户心理层面给这个商品带来更多的好感度，放置的位置可以结合具体场景去分析，可以考虑与商品图进行结合放置。
遵循由上而下滑动的交互原理，我们可知在每个单元的顶部会是滑动浏览时第一被眼睛识别的信息，而且可以利用这个心理去给还没看到具体商品的用户进行一个心理铺垫，比如商品的品质、权威性等，先入为主的进行心理建设，再结合视觉浏览模型，合适的位置就出来了。
次要信息比如倒计时、商品折扣、商品特点等辅助信息，结合布局场景考虑，有的可与图片一起放置增强品质感，有的可与文案一起放置增加决策信息，有的可与价格一起放置，刺激用户进行决策，是很有灵性的一个点睛之笔。
最后是按钮，在这里的按钮可以理解为浏览过程的一个闭环节点，也是一个操作的终结点，是最后的临门一脚。位置当然是在右侧最为合适，降低操作难度，同时也是整个单元的一个视觉终结点，浏览完流程之后决定是否点击跳转。当然，你可以利用你的方式去引导或刺激用户点击，你可以的。
文章来源：优设 作者：阿类杂碎面
为什么大爷大妈们总对排队情有独钟，为什么平常不想要的东西一打折就买一堆……震惊！原来套路你的竟然都是自己的大脑！
如今想要成为一名合格的用户体验设计师，首要就是对目标用户的理解和把控。而为了实现这一目标，掌握一些心理学知识就显得尤为重要。当我们能在设计中合理利用心理学的时候，就离创造出让用户感慨「深得朕心」的体验不远了。
这次要介绍的是设计心理学中与我们日常生活密切相关的认知偏差 (Cognitive bias) ，了解它的基本定义之后再结合相关案例探讨如何在设计中利用认知偏差来创造更好的用户体验。
网络上的定义是这样的：人们在知觉自身、他人或外部环境时，常因自身或情境的原因使得知觉结果出现失真的现象。
简单来说，就是大脑创造了一些快捷方式，在处理信息时自然地去调用这些快捷方式，只是这种操作在快速的同时，也会对我们的决策过程产生危害，比如我们会选择性忽略一些信息，或是自发地对信息进行脑补。这样的认知模式导致我们产生了非理性的偏差。
△ 图：大脑的操作
认知偏差种类丰富，已经被提出的就有几百种，有很多尚未被完全验证。下图总结了现有的认知偏差，它们大概可以分为四类：信息过载，信息的意义不明确，大脑来不及认真作出反应以及大脑存不下所有的记忆。通过这张图，我们可以更清晰地了解不同认知偏差背后的成因。
△ 图：认知偏差宝典
那我们该怎么在设计中利用认知偏差呢？我根据日常工作中经常接触的消费场景和学习场景总结了以下几个方面：
△ 图：章节概览，也叫懒人速读版
作为体验设计师，我们需要为用户的决策创造合适的环境，来引导其按照我们设计的方向去达成他们的目标。
锚定效应
锚定效应（Anchoring）是比较常见的一个被利用在消费场景中的认知偏差。它指的是人在做决定的时候，会在很大程度上依赖于其接触到的信息。
比如商场里原价 2000 现价 500 的商品，原价的存在会让人觉得这件商品的价值就是 2000，现在 500 简直是捡了大便宜。
在体验设计中可以借鉴这种做法，通过前后对比放大来优惠感知，进而促进用户做出有利于我们的决策。
△ 图：利用锚定效应推荐会员套餐，对比差价确实诱人
从众效应
从众效应（Bandwagon Effect）是另外一个常见的用于消费场景的认知偏差，指的是人们做决定时通常会和他人保持一致。
下图是售前页一般的设计技巧，通过展示购买人数和滚动播放购买信息来体现出该商品的热门，让正在犹豫的用户「随大流」下单购买。
基于此，我们在设计中可以营造出一种群体选择的效果来吸引更多的用户。
△ 图：这么多人选择，跟随大家不会错，买它
内群体偏差
前面提到的认知偏差之外，内群体偏差 (ingroup bias) 也一般被用来引导用户决策，它是指人们会在认知上倾向于自己所属的群体。
比如 Booking 在查看评论的区域加入了筛选评论语言这一按钮，虽然设计的本意可能是为了方便用户更好地理解评论内容，但是在真实的使用过程中可以发现，用户更加信任自己所选标签内的评论内容，因为同语言往往意味着来自相同的国家或者相近的文化背景，用户通过这种方式找到一个小群体，然后被影响进而做出与群体内人们更为相似的决策。
△ 图：同胞的评价更可靠
因此在体验设计中利用内群体偏差的关键点在于打造群体归属感，借由小群体的力量影响用户的决策。
引导用户做出于我们有利的决策之外，同样，我们可以利用认知偏差提高用户粘性，增强用户和产品之间的联系，使他们对产品「爱不释手」。
宜家效应
宜家效应 (The Ikea Effect) 是指消费者对于自己投入劳动、情感而创造的物品的价值产生高估的价值判断偏差的现象，消费者对于一个物品付出的劳动（情感）越多，就越容易高估该物品的价值。利用宜家效应提高用户粘性的核心是创造低投入、高回报、高贡献价值的任务，保证用户能够完成任务的基础上贡献自己的价值。
在学习场景中我们可以利用宜家效应提高用户粘性，将用户留下来坚持学习。
首先需要保证用户能够完成任务。懂你英语 ®A⁺ 产品中，我们会在用户设置目标时描述该目标的表现，用户以此选择自己的目标。这种方式下的用户对于任务结果的预见性提高，能清楚的知道如果完成任务会达到什么效果，更能被促使顺利地完成任务。
△ 图：目标展示与贡献积累
其次，用户对产品粘性增强需要能够感知到自己所做出的投入，学习场景下这种投入感知更多体现在知识的累积上。在懂你英语 ®A⁺ 课程中，我们将用户与目标之间的距离设计为学习路径，用户每完成一个阶段的学习便会在路径上明显前进，日积月累下来用户能看到自己前进的印记，清晰感知到自身知识的累积，也就因此对产品有更高的价值感受。
负向偏见
由于学习的「反人性」，学习场景下的用户在体验流程中产生消极情绪的概率要大于其余场景，比如学习效果不好，难以坚持等。此类消极情绪对于学习产品影响很大，是因为负向偏见 (negativity bias) 的存在，人们对不好的事情的记忆比快乐的记忆更加清晰，更经常回忆。
因此在学习场景下我们需要给用户更多的正面积极的反馈来抵消掉负面体验的影响。在懂你英语 ®A⁺ 课程设计中，我们在学习结果页根据用户不同的学习表现给出不同的反馈，即使是偏低的成绩，也依然会给出一个较为积极的反馈，以期鼓励用户坚持学习。
△ 图：做得不好也不要灰心
除了简单抵消掉用户的负面偏见，我们甚至可以通过设计去完全扭转局面，变困境为有趣的体验。最经典例子便是谷歌断网时的小恐龙游戏，不知道有多少人会故意关掉网络来玩这个游戏。
△ 图：谷歌的断网小恐龙
作为设计师我们可以通过了解和利用认知偏差来创造既让用户满意又平衡商业的双赢体验。但由于设计师本身也是人类，与用户拥有同样的思考机制，因此在日常的调研分析和设计的过程中也要警惕认知偏差的影响，不断深入了解用户以及使用科学的测试方法来完善自己的设计，持续迭代反思，不因为某个方案自己倾注了很多心血，就觉得它是最好的。用户可能并不买账呢。
最近设计项目中涉及到「瓷片区」，于是和一些设计伙伴请教了解了一下，在此记录总结一下，也希望可以对大家有些小小的帮助。
听说：美团内部将首页的运营广告位模块称为瓷片位，其可以根据需求变动灵活调整，就像瓷片一样灵活适用，顾名思义，瓷片区也就被叫开来了。
根据下图我们可以了解到，瓷片区在产品中的应用。
瓷片区作为与 Banner、金刚区并行的三大运营板块，都负责着导流的功能。瓷片区较两者更便于在页面中进行布局，可以灵活复用。
在电商产品中，导流指的是通过某种形式，增加对商品/功能的曝光，使自己的用户群去购买或了解感兴趣的商品/功能。导流简化流程：导流入口 → 落地页 → 转化率，设计师需要通过在这个流程中收集的数据，进行复盘反思优化设计。
瓷片区属于运营区，在页面中通常位于用户容易点击的区域。通常为图文混排，常见的类型有：实物类、插画类。
1. 实物类
应用场景：需要对商品/服务有高曝光度的产品类型，如外卖、电商、旅游类等，通过对自有商品/服务的直观展示，达到吸引用户的目的。
优点：识别度高、适配千人千面、元素更换灵活；
缺点：图片质量要求较高；
2. 插画类
应用场景：常见于金融类、虚拟类产品。
优点：高度概括主题的图形，通过插画增加产品的调性和趣味性；
缺点：针对性比较强，难复用，花费时间；
1. 排版
瓷片区常见排版方式：左右排版、上下排版和对角线排版。设计师可以将三种排版方式组合设计，使页面更具有节奏感；
2. 图片
对于电商或商城类产品来说，配图的好坏是影响用户点击率最直观的元素；设计瓷片区时需要考虑全局配图和局部配图的情况：
3. 文字
4. 背景
瓷片区背景常见类型：白色/浅色背景、渐变色背景；设计师根据产品调性及业务需求对背景进行灵活使用，但要遵守以下原则：
文中从四点对瓷片区进行了一个概括性的了解总结，设计要点的话在排版设计中都是需要注意的基础知识所以未多加赘述，以此为自己在项目中遇到的知识点做一次沉淀。
文章来源：优设 作者：木子的小千世界
一转眼，夏天就来了，设计中需要清新又抓人眼球的图片，老板又要求使用各年龄段都喜欢的插画风格，应用场景要广，但是预算又没有那么多，该怎么办呢？这也不是熬夜就能熬出来的，不要烦恼，下面这个网站立马解决你上面所有需求的同时，还能帮助提升你的工作效率，延缓你秃头的时间。
这个创造性超强的插画制作网站就是 BLUSH ，你可以根据自己的想法进行元素的替换，也可以直接使用 8 位网站合作设计师的现有作品，超清新的颜色和多样的搭配空间，绝对会让你十分满意的，无论是做 Banner、海报还是用作文章中的插图都十分合适。最重要的是，可以免费商用！接下来就跟着我一起，走进这个网站吧。
网站内拥有 12 大种类的插画图库，包含人物、城市风景、植物、甜点、涂鸦等等。选择你喜欢或者需要的一类，就可以开始你的创作。操作类似于换装游戏，在各个你需要改变的地方更换你喜欢的元素就可以。如果你要摸清整个网站可以产生多少种搭配的话，可能需要花上你不止一天的时间哦。
从上图可以看出，单在人物上，网站就提供了不同的风格，有像儿童形象的「Friendly ones」，也有极简线条的「Big Shoes」，还有夸张超炫的「Power Moves」等等。接下来，为了更好的理解网站提供的服务和操作的方式，我选取实用多变的「Croods」来演示。
首先在栏目左侧选择「Croods」，就会看到下面这样的界面。最上面是设计师的作品，下面则是可以由你自由创造作品的入口，造型可以选择站着或者坐着，场景可以选择谈话、聚会、公园等等，整体的背景也有五大类供你选择。
这里我选择点击「Peaceful Place」。网站出现的作品很符合现在多数人在家办公的状态，如果你不想自己动手，那直接选择这张图片或者点击「Randomiza」再随机生成一张图片，自己满意之后，点击「Download」便可以获取 PNG 格式的图片，不过，高品质 PNG 和 SVG 格式则需要付费。
当然，你也可以通过改变图片上的各个元素，生成你所需要的场景插画。例如想要一个盘着腿坐在沙发上发消息，和朋友聊天聊的很开心的一个形象，就可以通过下方给予的元素进行个性化定制，把表情改成开心，电脑换成手机，右上方替换成聊天框，最后导出为下图的样子。如果想要多人的场景，在上一步选择多人的场景进入就可以了。
同时，网站也支持下载插件，方便众位设计师在 Figma 中更好的运用。在首页点击右上角的「Get Plugin」进入页面，注册账号就可以顺利安装插件。大家可以根据自己的需要选择下载插件或者直接在网站上在线制作。
最后，不得不提的一点是，网站图库在兼顾多样性和平等性上做了很大的努力，人物的肤色可以随你改变，残疾人也有一席之地，可以选择为人物匹配轮椅，或者给人物戴上假肢，涵盖尽可能多的人物情况和场景。相信这样的网站一定能满足你丰富的设计需求，快去使用吧！
文字来源：优设 作者：山楂
在教程开始之前，我先说一下今天的教程我们会讲哪些部分。首先我们会分析儿童风格的特点、然后在这些特点之上给大家演示绘制一些插画小元素。
我们先来看一下这些海报里，是不是很容易就能分辨出，哪一个是关于儿童主题的画面？
可能刚刚的会比较明显，那这组是不是也同样可以分辨出哪一个儿童感比较强的画面？儿童感它既然能够在这些风格里凸显，它一定有一些特点。那么接下来我会通过几个方面去分析这些特点。
我们要选用一些符合儿童风格的元素。植物是儿童画里出现最常用的元素，动物作为自然界的一份子，当然也非常适合。一些儿童属性的物品。比如书本、棒棒糖等。还有天空的云朵、房子这些儿童画画的时候经常出现的元素，都非常适合儿童画面。
但是一些明显不属于儿童用品的元素就不合适了。比如说口红，口红不会让人联想到儿童，更多是成年女性。骷髅头这种恐怖的物体也不能出现。
那我问一下，眼镜适合吗？如果是这种尖锐的眼镜的话可能不太适合。
但是一旦它的外形变得圆润可爱，就很合适。很多物品也像眼镜一样，只要把外形改变得更符合儿童的气质，就不会显得突兀。
假如某一些物体儿童化特征不明显，而又想让它有儿童感，那应该怎么做呢？加入表情，表情简单可爱，就能表现儿童感的情绪。
每个物体加上表情就会变得可爱。但也正因为这些表情加在了本身没有表情的物体上，所以风格里有一种搞怪感。
我把随机下载的儿童海报拼接在一起，整体分析它们的特点。
儿童插画的海报元素使用的色相比较多，这里随机抽取的海报里，画面都是使用了比较多的颜色，红、黄、蓝、绿基本都用上了。
在饱和度上都偏高，一般保持在 70% 以上。
明度方面，把画面模糊再变黑白，我们可以看到整体画面给我们的感觉是比较亮的，就连中间用了大色块的海报的明度也在 50% 以上。而存在的一些深色也是作为画面的点缀。
那么总结起来，一般是色相选取的颜色比较多、饱和度比较高、明度比较高。我们以这张图为例。
当它的颜色种类变少的时候，画面的活泼程度就会降低。
而饱和度变低后，不仅活泼度降低，这种颜色的风格会趋向于成人化。
画面的颜色变深之后，画面就没有透气感。有一个很合适的成语形容，叫「老气横秋」。就是缺乏朝气的感觉。
那么儿童插画的形体有什么特点？总结起来有两个特点，简单和随意。首先儿童对世界的理解还不够深，能力也不足，往往画岀来的东西都是以概括的形式。
比如儿童画一颗真实的树的时候，去掉很多细节，把一个物体比较有特征的外形表现出来。比如儿童画一颗树可能是这样画的。
其次儿童的能力和经验不够，画画的时候边缘都是比较不平滑的，看起来比较随意。
而且就算本来在他眼中是对称的物体，因为手绘的感觉而看起来歪歪扭扭。
当一个物体简单成平滑的几何形的时候，它是偏向于设计感和现代感的。当它越来越接近于随意感觉的时候，它的儿童特征会更强，同时更亲切。
就像这些作品，虽然是插画师画的，但是却有很强的儿童感，就是这种简单和随意再加上插画师的审美形成的画面。
要注意的是简单和随意的把握，太过随意，商业化的价值就不高了。
儿童海报里的插画虽然每个元素比较简单随意，但是要保持画面比较完整，是需要很多元素的拼凑的。
就像这个幼儿园品牌的元素都特别随意，但是最后呈现的效果却也不错，除了在延伸上花了很多心思之外，还因为它的元素比较多，看起来不至于太单薄。
而这些元素的摆放可以不遵循严格的透视和逻辑，这种方式体现了儿童绘画和成年人严格的绘画原理的不同。
能满足上面的特点的儿童风格有很多，在这里我打算用一种比较简单的绘制风格，来进行操作的演示。
首先我们画一颗简单的树，来看一下这个风格。外形不会追求非常的对称。
就连树干我也是用「画笔工具」和鼠标画的。营造一种随意感。
在这里调整一下最后整体的外形后，我们会发现它的边缘和线条都太顺了。没有手绘的自然感。
所以我们要用到「变形工具」，对边缘进行推拉，这样它的边缘就不会特别光滑了。
最后调整一下尖锐的锚点，树就这么简单地完成了。
大家可能会觉得这个风格过于简单了，我用画动物，去讲解一下其中的细节。首先还是用「钢笔工具」，把形体轮廓和主要部位画出来。 大家是不是觉得画到这里就完成了？其实这个风格比较简单，如果没有一些装饰感的细节的话就会显得太过随意了。所以在这只鸟里，要去想怎么添加一些细节。
首先可以加个腮红。腮红的颜色不一定是红的。像鸟的身体色块面积太大了，需要有装饰，所以画几条羽毛。羽毛的形状太过规矩了，还是需要转曲用「变形工具」调整。
还有尾巴的部分也是需要用线的形式让整体更有细节感。最后都是要用「变形工具」让它的线条有种随意感。
最后的细节在嘴巴上添加，直接画一条直线。其实添加细节就是不要出现一整大块的纯色色块。
对于物体的简化不用太过于死板，比如我们现在看到的这个植物，它可以直接简化成圆形和密集的点的组合。
一开始我是直接用「剪切蒙板」的，但是这样边缘过于光滑了，而且里面的点也被框住，不够美观。于是就把点的分布超出圆形一点。这样看起来就比较有细节了。
而我们通过改变形体，就可以演变出很多种不一样的形态。比如这个物体，我在做的时候想能不能把中间的圆缩小一点 。黑色的点占比再大一点。这样就产生了另外一种植物。
甚至还可以直接去掉中间的圆，把点再放大作为主体。原本的点放大会变得太过随意。所以只能通过画圆形和「变形工具」调整。
这样又可以得到不一样的一颗植物了。这样的演变可以根据画面的需求选取不一样的植物。
所以在这里我已经画好一套常用元素的素材了。以植物动物为主，基本能满足日常设计中的需求了。这套素材会分享给大家，在我们的订阅号后台回复「儿童节素材」就可以下载。这套素材是允许大家商用的。有了素材后，怎么用呢，接下来我将用这套素材演示它能怎么使用。
这些素材可以在画面作为点缀营造气氛。
直接使用这些素材，堆叠成完整的画面。
也可以和图片中的人物或者产品做穿插。
接下来用一个案例演示一下，我是怎么用素材的。这个是学而思的手机端海报的文案，主要有标题部分、课程内容、和二维码等。
首先建立一个手机端尺寸。设置好版心的大小。在这里我做的是下方卡片式的结构。（白色色块部分是海报）
可以先把文案编排进来。首先安排好大的元素，二维码和活动价格。主讲老师和上课时间的小标题，字号大小要保持一致。卡片里的信息就编排完了。
标题是画面最大的字号放在上方，副标题和补充信息和大标题居中。接下来就是要在画面中添加我们的素材了。那么怎么选择呢？首先要定好你要选择的元素范围，不要同时出现太多种类的元素。以植物为主、再加上几个元素点缀是一般不会出错的选择。
首先添加的是面积比较大、块面化比较明显的元素。这里就加了三棵简单的树。
接下来就是添加一些更有装饰感的花花草草。
在添加元素的时候也要注意画面点、线、面的结合。就比如现在我们添加的元素主要是以面和点为主。
虽然树的树干也有线，但是轮廓的线条太「顺」了。
所以要添加「线」的特征更明显一点的元素。
在画面的上方加上适合存在画面上方的元素、比如长颈鹿因为本身比较高，所以没问题。把标题移到适合的位置，加蒲公英作为点缀。最后只剩下中间的部分怎么做出和主题相关联的画面了。
我们还有一个信息可以放在人物的手上。最后一个元素就从海报的主题出发。既然是学习的内容，可以画一本书，放在背影上。元素的拼凑完成了，最后就是细节的添加。
现在画面下方的信息不够突出，是因为卡片和背景都是白色的，所以下方加上一个深色的色块，让信息更显眼。
突出的信息可以变颜色。
背景变成黄白色，最后加上 logo。现在画面好像完成了，但是我最后还发现了一个问题，画面上的颜色饱和度都很高，各种颜色之间碰撞，看起来有点透不过气的感觉。
是因为画面缺少浅色。所以我选了两个花把它变成白色。
现在这个素材使用的案例就完成了。
最后要说明，这一套素材它只是一种风格，我们教程前面有说到的任何一个因素的改变都可以演变成无数的风格。
比如它的颜色搭配也可以变，变成一种更亮眼的颜色。或者说它变得更随意，有笔触的自然感。甚至还可以是画画技法风格变化。也可以为每一个元素都加上眼睛，一种搞怪感就出现了。所以是有无限的可能性的，最重要的是要学以致用。
做好画面还不够，我们画面选择的字体也是很重要的，那么我觉得这几款字体做得都不错。
文章来源：优设 作者：研习设
蓝蓝设计的小编 http://www.lanlanwork.com