提起「日式风格」，大家脑袋里会闪过哪个画面？性冷淡设计？无印良品原木风？樱花配上小清新滤镜？「简素」、「侘寂」、乃至念上它一句「Less is more」？
△ 无印良品艺术总监原研哉作品
总之，按照大众流行的印象来概括，东瀛来的设计应当是性冷淡、实用、柔和克制的色彩、自我克制。
但这样几个印象，足以概括日本设计吗？
咱们先拿一个国产的外包装设计来抛砖引玉——椰树牌椰汁外包装。
如果以大众印象里日本设计的评价标准来说，这个外包装堪称是泥石流一样的存在——只有信息的堆叠，跟当年恒源祥「羊羊羊」的洗脑广告思路如出一辙。
但就在前几年，一位知名的日本设计师却为这样一种设计点了个赞，宣称这是「了不起的设计」，还充满少女心地发了个图，表示就冲这包装，自己每天早上都要干上它一瓶。大有他乡遇知己，相见恨晚之感。
这个设计师名叫高田唯。他的设计，跟椰汁魔性的外包装异曲同工：有如街头牛皮癣小广告一样的画面，江湖人称「新丑风」。
但注意，「新丑」这个词，高田唯自己可不接受，他不认为自己算是「新丑」，应该是「全丑」才对——丑怎么能分新旧呢？丑就应当是纯粹的丑。
△ 高田唯作品
而高田唯，只是日本设计的一个缩影。如果我们把常规印象里，日本设计性冷淡那一面翻过来炒一炒——你会发现那魔性、浮夸、充满脑洞的土味日式风同样在国际舞台上有自己的一席之地。
△ 脑洞设计师 吉田ユニ的海报作品
咱们先讲高田唯那些街头牛皮癣一样的作品。
实际上，他并不是一开始就成为了日本设计界的邪教徒。纵观他的早期作品，虽然不受认可，反倒是一板一眼、规规矩矩的名门正派弟子画风。
△ 高田唯的早期作品：左为 2009 年「印刷のいろは」 海报，右为 「印刷のいろは」 2010 海报
咱们可以在前些年他在上海的个展「潜水平面设计」，感受下啥是「全丑」风。
从展览邀请函开始，画面就已经充斥着火车站旅店小卡片级别的设计和配色。
△ 左图为 2017「游泳 Graphic」海报
高田唯作品：左为 JAGDA2017 年鉴 封面设计，右为「For Stockists Exhibition」2017 海报
比如说，面对代表日本平面设计最高荣誉的 JAGDA（日本平面设计师协会）的约稿，高田唯丝毫不顾甲方的口味，为他们的年鉴封面和主视觉弄出了这样画风的作品。
△ 高田唯 JAGDA 东京新入会员联欢会海报设计（入选东京 TDC）
高田唯当然知道大众能够喜爱、接受的设计长什么样。
他打小就出生自一个设计家庭。他老爸高田修地早年供职于资生堂设计部门，是原研哉在武藏野美术大学时期的恩师。而高田唯本人在 2011 年还获得了JAGDA 新人奖，这可算得上是走向国际设计舞台的门票。
说我当上了营业厅售货员、他考上了北京大学、高田唯获得了新人奖，我们都有个美好的未来——平均一下丝毫不为过。
△ 高田唯作品 FOR STOCKISTS EXHIBITION 2011
转变也在这时发生，用高田唯自己的话讲是：「日本设计有一个感觉就是看腻了」，「单单只把东西做得美观，这样的人实在太多了。所以我要探寻一条如何将设计表现得更生动的路。」
街头上那些日常的、堆叠满信息而完全没有设计感的图像，反倒成为他灵感的新来源。
他说：「设计不仅是追求世界上的美感，一个没经历过正规的设计教育，不熟悉各种设计工具的人做出来的东西有时候会更具有表现力，因为他们为了传达自己的理念而去努力的这件事本身就是美的，我想把这种美融入自己的作品中。」
这倒是可以说，他走向了高度专业化的日本设计反面：一种看山不是山、无招胜有招的状态，他是用 「新丑」来挑战「旧美」的人。
△ 高田唯「Why not live for art II」海报
△ 大街上采风的高田唯
更多高田唯的作品：
除了高田唯，实际上还有很多国际知名的日本艺术家、设计师，也都跟小清新、性冷淡八竿子打不着关系。
就先说日本当代艺术吧，身价最高的几位选手里，像草间弥生、村上隆都有着独特的自我风格，甚至有点精神污染。
△ 草间弥生的装置艺术作品
这画风一眼就能劝退密恐患者，但这些圆点对于草间弥生来说，其实是偏执与童年记忆的产物。
△ 草间弥生的装置作品
10 岁时的她，因为神经性视听障碍伴随着精神分裂，就看到的世界而言，真实反而是仿佛隔着一层斑点状的网。
那些张牙舞爪的植物都是童年时、幻觉中草木开口后的结果。因此，幻觉占据了真实，绘画对于她来说是释放恐惧的途径。
△ 草间弥生标志性的波点南瓜
更多关于草间弥生的作品：
而村上隆的太阳花，虽然五颜六色、永远微笑、永远密密麻麻，但其实是在他一派赤诚的担忧里诞生的。
△ 村上隆在大馆赛马会艺方「村上隆 对战 村上隆」展览现场。摄影：Alex Maeland
村上隆眼中所谓的日本主流文化是由多种多样的亚文化构成，这些战后出现的流行文化一面成为日本的代表，另一面又令人忧心忡忡。
△ 村上隆的标志性作品「超扁平太阳花」
而他的作品，正是在的可爱、扁平、漫画风格中，嘲讽越来越浮于表面的大众文化——整个社会都已经进入超扁平时代。
△ 横尾忠则为实验剧场「天井栈敷」时创作的海报
再走出当代艺术领域，回顾一下日本设计的历史，就会发现浮夸、脑洞大开始终是它的另一面。用所谓性冷淡、简素来概括，其实是一种偏见、一种被加工选择后的刻板印象。
△ 横尾的早期迷幻又魔性的作品
比如日本国宝级设计师、艺术家横尾忠则，有着迥异于常人的脑回路，年轻时曾莫名其妙跑到达利家强行做客。
他的作品同样如此，极其诡异的脑回路、带有冲击力但传统的日本色彩，融合浮世绘的构图、画面，再拼接上彼时流行的波普艺术，「大和波普」可谓极具辨识度。
同时，传闻他还因为自己的创意被甲方拒绝后揍了甲方一顿，最后，甲方（朝日啤酒）欣然接受了他的创意，这张海报也旋即成为横尾忠则的经典之一。
△ 横尾设计的朝日啤酒海报，正是在这张海报上，横尾成功揍了甲方。
光明正大喊出「一日之计毁于晨」、「在设计上我从不追求流行，我就是流行」的仲条正义，其部分作品也跟「日式性冷淡」一毛钱关系都没有。反倒充斥着大脑洞、极富童心，带着返璞归真的顽童之感。
△ 仲条正义「Mother & Other」部分海报节选
而近些年火爆的吉田ユニ，干脆整幅作品都称得上是脑洞的代言人。
△ 电视剧《人100%靠外表》海报
实际上，她的每一张作品都是现场实拍的，并没有任何 3D 或者 CG 技术，因此，为了达到想要的效果，现场的物品、各种元素需要反复地摆放、一遍遍地改良，方才能接近她脑海中的理想状态。
△ 吉田ユニ Yuni Yoshida V.S. Naomi Watanabe·PUNYUS 2017 春夏系列
△ 吉田ユニ 装苑「PLAY A SENSATION」
日本设计以往给人的常规印象，大多和日本特有的美学特质——「禅」、「空无」，「侘寂」、「物哀」、「幽玄」等等关键词有关。
△ 幽玄：长谷川等伯的《松林图》
△ 物哀：京都清水寺
作为传统，与「简素」，「侘寂」这些表面印象相对的，日本文化中还有很多浮夸的、魔性的、乃至金碧辉煌的经典元素——像浮世绘、古代的大和绘、妖魔鬼怪，武士铠甲等等。
△ 日本武士铠甲
△ 浮世绘
而每个设计师对这些传统的文化又有着截然不同的思考与理解，所以才诞生了那么多新奇古怪、纷繁复杂的、脑洞大开的日本设计。
所以说，并不存在一个看起来「性冷淡」的日本传统，更不存在一个由「性冷淡」组成的日本设计。
不止是日本设计，所谓北欧设计、新中式都是一个不够具体的概括，其内涵无法用一两个词定义，但丰富和不同正是这个世界可爱的地方嘛。
文章来源：优设
很多时候，当你的设计遇到了挑战，你无法客观地回答为什么，甚至在和业务方沟通的过程中表现得很被动。
通常根据人们的习惯，我们将核心行动操作都放置在右侧，例如下图核心的行为召唤按钮都放置在右侧，那为什么都要放在右侧呢？
我们可以用古腾堡图表来解释一下。古腾堡——西方活字印刷术的发明人，顺便看一下他发明的图表，啥意思呢？就是当我们在浏览一个不熟悉页面的时候，我们通常浏览的路径是一个对称的，从左上到右下的一个路径，最终的视觉落点通常就会在这条线上。
所以我们很多的信息和操作按钮，都是在右侧。然而我们发现有些对话框却把行动按钮放在左侧，我们来分析一下原因，像下方的对话框：
左侧的是我们常规看到的一个模态弹框，弹框内右侧的行动按钮可以是确定，也是可以删除，但是右侧的弹框基于我们的猜测是希望用户在高风险操作下，再次确认要进行的操作，所以当用户视线移动到右边的行动按钮时发现它并不是想要的操作，这时用户会对左侧信息进行一次再浏览，确认后再选择，很多时候用户在进行操作的时候会下意识地进行右侧点击，所以这样的处理方法可以避免用户对高风险行为的误操作。
但是话又说回来，这样的设计其实违背了用户的习惯和预期，所以还是要慎重考虑。
我们再来看一下高德地图的案例， 点击「退出」后展开两个选项，「退出导航」在左侧高亮，取消放在了右侧。
那这算不算违反用户的习惯和预期呢？我们换一种解释，这里运用到的是「菲兹定律」，目标按钮的大小、和手指间的距离影响用户操作的效率
如果退出导航放在右侧可以吗？在别的场景下没问题，但是在行车驾驶的场景中，任何的操作都需要快速。可以再想一下场景，什么时候会退出导航：1.目的地已到 2.开到一半认识路了 3.导错目的地了 4.要换交通工具了…..所以高德作为一个工具型产品，是一个核心的准则。
菲兹定律深入解读：
现在随着大数据和人工智能的科技进步，人们日常生活也变得越来越便利，或者说人也变得越来越懒。我们不用再费尽心机寻找我们想要的，所有的内容都会跟我们的习惯、行为被智能推送，产品也越来越人性化。所以我们今天的十万个为什么就来聊一聊个性化设计！
1. 内容个性化
个性化内容需要通过发现偏好-帮助过滤-使用 3 个步骤来看。首先内容个性化可以分为用户偏好个性化以及用户设置个性化，比如抖音、淘宝等应用，会根据用户对内容的搜索、浏览等行为习惯的偏好进行不同的算法推送，比如抖音我最近看鉴宝和篮球比较多，所以针对这些视频，我的完播率、播放数、点赞评论数据有变化之后，推送给我视频内容的权重就发生了变化。
其实很多用户不太理解，在电商应用，我已经购买过一件商品后，却依然还是给我推送同样类型的商品。
而用户设置个性化比如在使用 bilibili、漫画等应用时会在正式浏览前让用户设置自己的偏好和基础信息帮助用户进行更精准的推荐。
但这里有一个问题是，我们给用户设置的选项和用户实际本身不符，比如让用户选择他的年龄，很多用户可能觉得自己会更年轻，所以选择年龄和实际不符，那么推送的内容是他需要的吗？所以这里就需要根据用户真实行为数据来进行再次的过滤。
但是如果我们就这样把用户所选的内容都推送给他，那效率一定很低下，所以我们会从时间、热度和用户自身行为权重进行排序计算，当然这些内容也并不是都用 feed 流来承载，形式可以多样化，也包括进行分类，就像微信阅读会推荐 3 本书，你也可以选择点击换一换，甚至还把推荐来源给写出来了。
2. 场景个性化
最近看到两个不同的界面，实属有趣。某天我下了地铁用支付宝扫码出站后，页面提示我是否要进行打车，我觉得还是挺贴心的，虽然我不需要打车但是这个场景让我有了更加方便的选择。
同时发现在群里有另一个小伙伴也截了这个页面，他的界面却是提醒他是否要租一辆共享单车！这简直是赤裸裸的「歧视」呀。当然这个也就是和下面要讲的用户行为有关了，如果你经常骑车，他就会在这里给你推荐共享单车。
还比如高德地图在导航的时候如果即将进入收费站，在页面明显的位置也会出现支付宝入口的图标。（图片找不到了）
3. 行为个性化
这个应该正确的说是行为导致的功能个性化，比如知乎，从之前的上下切换话题到左右切换，再演变成上下切换话题。大家用过知乎的同学知道，现在上下切换话题其实还是有些不方便的，但是知乎为了让更多金主爸爸的广告能露出，不得已出此「下策」。
我们在设计的过程中也有一个原则「避免功能即按钮」的设计，在业务的背景下也被选择性忽略，所以他做了一个悬浮可动的切换按钮，其实在可动之前，他是固定的，是由于用户频繁误操作的行为，让知乎的设计师将它变成了可动吸附的按钮了。这个就是行为导致的功能个性化。
再比如腾讯视频、爱奇艺里的「只看 TA」这个功能。通过数据和用户行为路径的分析，发现很多用户会在一个视频里频繁观看某一个演员的片段，可能是自己喜欢的演员，可能是被其他平台吸引过来看某个片段的用户，这样大量的行为让我们发现用户的这个高频需求。
4. 目标个性化
最近也在体验了一款游戏，完美世界的笑傲江湖。其实现在很多的手游都会有这样的功能，就是会让用户选择如何体验游戏，由于玩游戏用户时间、职业的不同，所需要体验游戏的内容也是有区别的。
时间多的用户更想要体验所有内容，快速提高战力。而女性用户可能更想边看风景边玩，看唯美的画面。如果是时间少的上班族，那么更希望能做一些性价比高的任务，不至于脱离大部队的节奏。所以当用户有不同目标时，产品也有相应的策略让用户更好地体验产品。
很多设计师在进行信息设计的时候，通常靠着感觉和曾经尝试过的经验进行信息美化。但是当我们遇到需要对信息设计进行解释的时候，理由通常很苍白。
你无法说出为什么用户能够快速地浏览信息，只是觉得又大、又粗、又鲜艳的信息能够被识别。所以今天我们就要来聊一聊，为什么。
首先给大家介绍一些经过研究之后的数据结论：
人类视野的空间分辨率从中央向边缘减少。我们人类每只眼睛具有 700 万左右的视锥细胞，它们在人眼中的分布是越靠近中央凹的区域越密集。而另外一个研究表明，边界视觉的信息在被传递到大脑之前是经过压缩的，而中央凹的视觉则不会。大概就是下 2 图这个意思。
然后有同学会问，既然我们的边界视觉那么差，当用户在浏览界面信息的时候，为什么给用户 3 秒钟时间看界面他还是能够记住页面中的一些信息呢，或者会说为什么我们在浏览的时候，它不像下图那样只有一小圈是高清，而边上的文字是模糊的呢。
这其实是因为大脑通过一个比较粗犷的方式，基于我们的预期，给视野进行填充，大脑也会命令你的眼睛对边上的信息进行细节采样。所以这是一个很快速的过程。
为什么有的人能够一目十行就是，他的大脑能帮他补充得更多，或者说他的中央凹面积大。
但是有一个实验是，我们通过眼动测试，当用户的中央凹停留在一篇文章中的一个地方时，这个文字显示的是正确的，但是随着中央凹的移动，他周围的文字会进行随机的变化，他虽然能够成功地完成阅读，但是速度大幅下降。
比如大家看一下这个页面的区域：
当我们扫完这个页面也就 2-3 秒，但是如果你没有把中央凹停留在一个信息上的时候，其实都是靠大脑对我们的预期进行的补充。而真实的情况是，你们并没有发现页面中错误的地方。
言归正传，为什么你的信息用户总是看不见呢。我们又要讲到边界视觉。我们的设计如果不考虑边界视觉，那么就会影响到能够被识别的信息。那么边界视觉到底有什么用呢？
1. 引导中央凹
我们刚才说了中央凹的重要性，那么我们在什么时候会把中央凹放到我们要看的信息上呢？其实就是依靠我们的边界视觉。
边界视觉引导中央凹，它帮助中央凹捕捉关键信息。我举个例子，大家在查看一个食品包装的生产日期的时候是怎么寻找的呢，大家的眼睛不断地在搜索，而边界视觉是提供了低分辨率的线索，帮助大脑，控制眼睛以线索的发现顺序进行移动。
2. 捕捉运动元素
边界视觉可以非常快速的捕捉到运动的物体，所以在界面设计中，无法放置在核心位置的元素但又需要用户去注意到的时候，通常就会使用动效。
1. 将信息尽量放在中央凹或者中央凹边上能够被预期的位置
在小红书很早的一个版本中，当用户进行点赞操作后，反馈消息在顶部显示，让用户无法察觉和关注到。因为边界视觉都无法捕捉。所以当用户在进行操作时，如果需要将状态、文字告知用户，就需要显示在用户能预期以及能被边界视觉捕捉到的位置。
2. 使用图标、图片的形式标记出关键信息
比如在一大段的文本中，用户无法快速的查看内容标题，我们就可以在标题前使用图标、图片的形式进行标记，让边界视觉获取到信息之后在大脑中产生预期模型。
3. 使用动态效果吸引用户注意
动态效果能够快速被捕捉，甚至引导用户的视线。比如马蜂窝在底部进行点赞后通过动效引导用户，告知用户该点赞是为用户而赞，同时让用户的视线又回到了顶部，可能增加用户的停留时间。
4. 使用高亮的颜色来吸引用户的边界视觉进行捕捉
由于边界视觉的搜索是线性的，所以我们必须将重点的信息进行高亮显示，比如警告的红色，可点击的蓝色等。
在这里再补充一个我总结出来的规律，不一定对。
大家可以看到，下方的知乎话题界面，一进入界面我们的边界视觉立马给我们进行信息捕捉，所以首先被关注到的是呈现蓝色的文字、图片、图标等。
这里大家发现一个问题没有
为什么在这个界面中上方的两个按钮不用色块的形式做呢？
例如右边这样，很多同学在这里第一反应是这个按钮太重了！很突兀！为什么很突兀？
既然要引导用户为什么不做得重一点呢？那有同学又会说这样设计会干扰用户对其他信息的浏览，那么为什么会干扰对其他信息的浏览呢？
我猜测人眼的中央凹视锥细胞会根据界面中信息的重要程度进行调整，也就是说不同程度的强化会让边界视觉的捕捉能力下降。
像右侧的色块按钮让中央凹的视觉细胞更加聚集，而导致边界视觉的范围也大幅缩小，所以你们看左边界面觉得信息优先级很清晰，但是右侧的就会觉得我只看到了两个大按钮，而其他的信息都没有被捕捉到。
那继续思考一下，什么时候能用大色块的按钮呢？很多电商平台的购物都是大按钮，这个难道不会让用户的边界视觉受影响吗？
大家发现一个规律没有，有大按钮的页面基本上图片、图标都很多，而一般都是文字的页面，通常都不会出现大按钮，因为出现了就会被喷太突兀了！！
这就是因为大按钮在没有其他更高层级信息的配合下让边界视觉捕捉范围降低了，如果都是高层级的信息，那么边界视觉的捕捉范围就会「一视同仁」。
所以，为了让一个界面的按钮不突兀，一种方法是用和它相似级别的元素进行辅助展示，另一种方法就是降低该按钮的视觉引导层级。
不知道大家是否曾经或者现在使用过某个产品，当我们在完成某一个任务或者在某个场景中时，自己的操作行为特别自然流畅，注意力也非常集中，这种感觉让你非常的愉悦、舒适。
所以契克森米哈提出了心流的概念：个体完全投入某种活动的整体感觉，当个体处于心流体验的过程中，会对周边干扰视而不见，过程非常愉快且会觉得时间过得很快。
所以当我们在做交互设计时，我们追求的就是一种自然、能让用户进入心流的交互体验。但是大家不要误会了心流的概念，有些同学觉得我们在刷抖音、微博、微信就是一种心流的状态，那就错了。
心流并不是一种简单的沉浸的状态，当我们在娱乐时不过是被内容吸引了，让你觉得沉浸只不过是你的行为操作形成了习惯，不是心流状态。
今天我就来和大家分享一下如何通过一些方法，作出让用户进入心流状态的设计，这些都是有迹可循的。
开过车的同学都知道，左侧刹车右侧油门，档在右手边，在国内所有车都是这样，所以我们不会搞错。在经过一段时间的驾驶后我们更能够清楚的了解汽车的动力、刹车等性能，所以我们会觉得这辆车的操控感觉很好。原因是他的设计符合了用户的预期。直觉的预期、位置的预期、功能的预期以及结果的预期。举个例子，当我给你一个任务，希望你能够快速的进入 xxapp 进行个人头像的设置，在这个前提条件下我们来看一下刚才说的几个预期：
直觉预期
每个人的直觉都不同，这来源于他生活中的环境影响和习惯影响所以对于我个人的直觉来说，要完成这个任务首先必须找到最初的入口，我的直觉告诉我这个功能大概率可能出现的位置会在底部标签中的个人中心板块中。
位置预期
个人中心板块的位置可能会根据信息架构而出现变动，比如抽屉导航中会出现个人中心的入口，例如滴滴。当我们进入之后会看到头像、名字、箭头等信息，特别是箭头，这个图标给人的预期是你可以继续进入进行下一步操作，那么用户对下一步操作的预期基本上就是会点击箭头或者头像，这个也是比较明确的。或者直接来一个编辑的按钮也是可行的，这样就不需要用户去猜了，但编辑的功能比较垂直了，所以到底用哪种形式，要根据内容来。
如果没有这个箭头，用户一定会产生试探性的行为操作，此时内心已经有疑惑且不自信了。所以在心流交互中，明确的功能引导非常重要。
功能预期
用户预期通过他的操作能够达成目的，那么最基本的就是在这条路径上的功能不能缺失以及减少其他的干扰。可以发现微信的个人中心最底部板块有两个热区，并不是一块直接进入个人中心的热区，如果点击名字这一整行，则会下拉引导你拍摄一段视频。所以有时候想替换头像以为点击这一块都可以进入二级，却发现这并不是我要的功能。
结果的预期
最后当用户进入编辑头像页面之后，需要关注其场景，这边微信做的就挺好：
很多时候交互流程已经做的非常自然了，但是当用户正在他的心流体验中，突然一个模态弹框跳出打断了用户，令人啼笑皆非的是这个弹窗只是告诉你一个不痛不痒的信息，这就比较难受了。
而我们来看马蜂窝当用户在 app 中完成某些特定任务后，不会出现模态弹窗的强制干扰，而是在顶部出现一个通知 bar，这样原本在进行任务中间阶段的用户不会受太大的干扰，可以继续任务行为。
再例如美团外卖和饿了么，用户在点餐时对优惠优惠的关注是特别强烈的，而是否能够让用户认真的挑选菜品，我们也尽可能做到影响的打扰，就像满减去凑单的交互形式，点击后不跳转，仅在当前页面以文字形式让用户明白并行动，但这里去凑单很容易和去结算有误操作。
例如马蜂窝自定义旅程，进行多标签选项，当用户在当前页面选择完该页面的选项后自动帮助用户定位到选择日期的功能模块中。这样减少了用户不必要的下滑操作，像这样单一场景中对用户的行为预期是比较好判断的。
之前玩过很多款手游，即便是一些常用的套路，每家都能玩的不一样，例如宝石合成、英雄装备获取，有些游戏能够做到让用户在一个场景中不脱离。
比如宝石合成这个功能。宝石从哪里来？是否能在合成合成路径中穿插购买的分支并再链接回合成场景？在包裹中进行合成和在装备界面进行合成是否流程一样；然而有些游戏当用户购买完宝石后需要重新自己再打开合成界面，非常繁琐，同时也导致了用户消费路径的断裂。
再比如装备副本获取这个功能，这里我们看一下权利的游戏这款游戏，当我一件装备的零部件不足需要进行扫荡获取，这里有两种场景，一种是我刚好只需要这 4 个件合成 1 件，另一个是我需要更多的零部件，不仅仅这一个，所以对前者来说我达成了目的就可以返回去合成界面，而后者我可能需要更多数量的零件，但不管如何我一定还是需要返回合成界面的，然而不管是哪个场景，都必须点击两下关闭按钮才能返回合成界面，所以在这个地方缺少了一个快速拉回用户状态的按钮，叫做「去合成」。
当我已经完成了我的需求后，能够让我快速的返回合成界面，因为合成装备才是我的最终目的，而不是刷更多的碎片。
下方的案例再解释一下第 3 点，当用户点击合成之后，不要提示告知用户数量不够，因为你已经显示了数量未达标，用户想点击的目的是让你告诉他未达标改怎么办，所以这里最好的处理方式就是把获取该装备的方法告诉用户。
我们希望一个产品使用起来很自然，除了操作成习惯之后流畅外，一些帮助用户潜意识的连贯的微交互也显得非常重要。不需要有华丽的动画，有时候仅仅只是一个晃动，一个速度曲线就足以合理的表达功能的语言。
文章来源：优设
与其他相对成熟的设计领域（UI、插画等）相比，数据可视化尚显小众，在一个细分、小众、不成熟的领域里做设计，「怎么去找灵感」确实是一些小伙伴经常遇到的问题。本文以本人工作经验为基础，系统性分析了该问题及对应的解决方法，并将其整理成文与大家分享，这在数据可视化行业内尚属首次。当然了，本文虽面向数据可视化设计师群体，但其中的方法是通用的，运用在其他设计领域也完全事半功倍。
本文围绕「搜什么——去哪儿搜——怎么搜——素材的整理——灵感的迭代与更新」 五大板块展开。
灵感库的建立大体上分主动与被动两种。主动，是我们有意识地收集、整理相关作品素材形成灵感库的过程；被动，指通过朋友圈好友分享、同行推荐等获取灵感的方法。因为后者更不可控，影响因素较多，比如你所处的圈子、社交网络使用习惯等都会影响被动获取的质量。所以今天，我跟大家分享的主要是第一种主动建立灵感库的方法，而这个方法的核心我把它归纳为两个字 ：搜索。
搜索是现在这个时代我们主动获取信息的最主要手段，每天我们通过各类关键词在各类 APP 上获取各样的服务、产品和资源。灵感的主动收集就是一个通过关键词搜索，然后分类、整理、研究、再利用的过程。所以影响灵感收集的主要因素其实就是我们能不能用好搜索。不同的搜索方法、渠道、关键词极大地影响着我们获取到的信息质量，这也是本篇文章为何以搜索核心展开的原因。
如下图所示，同样的关键词在不同的搜索渠道，得到的内容质量是不一样的。
互联网很大，如果没有明确的目标，找灵感的过程就跟刷抖音一样，恍恍惚惚几个小时，好像点了不少赞，收藏了不少干货，回头看其实并没有什么特别有价值的东西，所以找灵感要有目标，有 KPI 才行，有目标就有标准，有标准才有方向和效率。
如上图所示，我对数据可视化这个行业术语做了分析和拆解，这样做的目的是为之后搜索关键词的提取做思路的拓展。很多小伙伴在搜索可视化相关内容时，思路总是局限在「可视化」这个关键词上，但是直接使用这个关键词搜索，大多数时候并不能找到我们心理预期的结果，或者搜索多次后，看到的都是之前见过的作品，很难突破边界，获取更多新的灵感。造成的这个结果的原因显而易见，就是关键词的匮乏，不知道搜什么。而对「大屏数据可视化」进行解析之发现，以往的搜索，我们只使用了四个方向里的其中一个，其它三个方向并没有很好的利用。现在，我们以每个方向上的核心关键词为基础，去丰富它的下一级关键词，这样就会像枝芽新生一样，在各个节点延伸出丰富的词汇。
媒介就是指数据可视化设计最终落地在什么平台，一般来讲，大屏数据可视化设计落地的媒介当然就是大屏了，以它为核心做关键词的发散，可以产生其它几个二级关键词。
数据类型是主要数据的特征或来源，不同的数据类型，在可视化设计时有不同的视觉特征。比如地理信息的数据可视化，一般会与道路、河流、人造建筑、某区域内地标等一起出现，会有丰富的 3D 场景、动效，而图表信息相对较少；报表类信息的数据可视化，则主要以更好地展示报表内大量数据为主，所以强调信息的层级、主次，设计的目标是要减少用户认知负担、引起用户阅读兴趣，促进数据内容的有效传达，因而会较少使用动画，其次，因数据较多，也很难对应到某个具体的物理场景，故 3D 模型等也较少使用。
所以以数据类型为核心，拓展的二级关键词会让搜索结果更精准，更有针对性。
设计风格就是视觉设计整体上给人的想象和感受，好的设计就跟一个人一样，一定是有自己鲜明的个性和气质，能够引起人的共鸣和向往，唯有如此，设计才能吸引人，从而影响人，并最终传递自己的观点给观者。所以设计风格的定义是视觉设计中最重要的一环，也是最需要灵感和创造力的部分。
作为数据可视化设计师，我们想要找到的参考是那些具有数据可视化风格的作品，但这些作品本身并不一定是在讲数据可视化的内容，只要作品某部分的设计有我们想要的那种「感觉」，就可以了，而这个作品可能是某段影片、某个动效、某种图形、某个元素或声音。基于这样的思路，我归纳了一些具有数据可视化风格但不一定都是数据可视化作品的关键词。这就是一个特别有意思的点，我们想要找到某个内容，但当我们用最贴切它的那个名字去找时，却不一定能找到最能代表它风格的作品。所以当我们跳出数据可视化这样一个具体的点，而从更抽象的设计风格这个层面去看待它的时候，就能更好地发散思维、拿到了更多好的关键词，找到更多的刺激点。
以设计风格为例，我们从它的节点上找到任意一个关键词：SCI-FI，然后搜索这个关键词，我们看看搜索到的结果。
业务场景简单理解就是在什么情况下要解决什么问题，它是数据可视化的落脚点，也是数据可视化的商业价值所在。每个公司或团队，都会有自己专注的业务方向，所以在工作中找这方面的灵感，从业务场景入手效果最好。
简单回顾下，通过上部分文章的分析，我们从媒介、数据类型、设计风格、业务场景四个方面形成了一个数据可视化的关键词的矩阵。这个矩阵是建立灵感库的基础，之后每当我们有新的关键词要加入，或者有效果不好的关键词需要剔除，只需修改、迭代这个关键词矩阵即可。有了这个关键词矩阵后，我们如何利用它完成一次基于实际需求的灵感搜集？下面给大家举个小例子来看一下怎么用。
首先用尽可能简短的一句话描述业务方诉求。
一句话描述业务诉求后，我们把业务需求带到关键词矩阵中，就会获得如下图的结果：
可以看到，带入需求后，按树状结构去匹配与需求相吻合的关键词，就可拿到明确的搜索指引目录，然后我们按搜索指引，开始灵感收集即可。
这里有个小小的点，就是为什么要尽可能用简短的一句话来描述业务方诉求，
合适的关键词是第一步，它保证了我们搜索结果的有效性，而去哪儿搜决定了我们搜索结果的质量。如下图，针对数据可视化设计师，我对「去哪儿搜」这个问题按我自己的从业经验做了梳理。
从我的归纳里大家可以发现，我把数据可视化设计师的灵感来源分为了四大块（其它行业的设计也大体上就这四块），分别是：设计网站、产品或服务提供方、独立设计师或工作室、视频网站。
第一部分：设计网站
设计网站部分列出的都是设计师们都熟悉的几个站点，在之前，大多数灵感的收集都可在花瓣完成，但花瓣最近几次改版之后，已经没有以前那么好用了。对数据可视化方面的素材搜索，个人经验上，强烈推荐大家去 behance，虽然 behance 访问方面也面临一些困难，但是，但凡你想真的了解一些好的设计，这个网站，是你一定要想办法去经常逛逛的。至于为啥不推荐其它几个网站，倒并不是说其它网站不能用，只是搜索的结果相对局限。针对这块的具体分析，我会在文末的 Q&A 里进行。
第二部分：产品或服务提供方
我们知道，任何商业设计，一定是有一个业务或应用场景来支撑的，一定程度上设计就是在围绕业务场景提供视觉、交互、用户体验、品牌等方面的解决方案，也就是说设计是服务于业务场景的，反过来讲，服务于这个业务场景的就只有设计师么？当然不是。在市场条件下，服务的提供方除了像设计师这样的个体外，更多的是我们熟悉的另一个机构（组织），这个组织的名字叫「公司」。公司把大量专业的人员组织在一起，通过优势互补、强力协作，提供服务、解决需求方问题。对于数据可视化设计来讲，企业当然也参与其中。所以我们找灵感去服务提供方也是一个的方法。企业要证明自己的实力、要让潜在客户了解自己，必然会花大量的资源做营销做推广，而最常见的推广的落脚点就是企业官网。很多做数据可视化的公司，会在官网展示一些能体现自己业务特点、业务实力的案例，而这些案例就是这些企业最好的数据可视化设计作品了，没有人会在自己的脸上放垃圾上去，对不？ 所以但凡有案例展示的官网，案例基本都是最典型最好的设计，所以从这些案例中找灵感，也是一个有意思且有效的方法和途径。
△ 阿里DataV
△ Hightopo
△ Tob.Design
第三部分：独立设计师或工作室
独立设计师一般给人的感觉是什么呢？就是在自己垂直的领域内牛逼，近乎神一样的存在。独立设计师要能顺利「独立」，当然是在设计能力、个人品牌建设、客户维护、运营管理等方面都有比较硬核的水准，所以这部分设计师作品一般不会差。而工作室一般都是一个或者几个知名设计师组成的团队，在管理方面更「公司化」一些，这样的工作产出也会比较稳定，水平较高。就可视化（包括类可视化）领域来讲，个人比较认可和喜欢的工作室有以下几个（欢迎大家评论里补充，或参与文末问卷调查），Ta 们的作品风格鲜明，找灵感也是不错的参考
△ dennisschafer
△ huds+guis
以上对于「去哪儿搜」的分析，我相信可以给大家很好的启发：我们设计师寻找好的作品并不一定要通过设计相关网站进行，你看大家都能看到的东西，即使有突破，那也是大家所熟悉的样子，你只有从圈子里跳出去，看 80% 的人看不到的东西，你的灵感才有机会与众不同，标新立异。
前面两部分，我们介绍了搜什么（关键词的定义），去哪儿搜（合适的素材来源），接下来以 behance 为例跟大家聊聊怎么搜，介绍一些具体的方法。我们的目标是尽可能少的点击搜索按钮，且尽可能多的找到符合自己预期的有质量的作品。要做到这点，首先我改掉自己以往的不好的搜索习惯。
我知道很多小伙伴都是输入一个关键词，然后看结果页，没有满意的就换一个关键词继续，这样做很低效，容易漏掉结果页中符合你预期的好作品，并且也容易造成关键词的浪费，通过第一部分关键词矩阵的介绍，大家都知道，关键词是被定位推导而来的，若不停的换关键词，很快就会出现关键词用完了但是依然没有找到好灵感的囧局，所以榨干每一个关键词是搜索的重要手段，具体怎么做到这一点，我个人有以下思路给大家参考：
快速浏览、标记自己感兴趣的项目，稍后再做整理
通过这个结果页面我们看到，搜索结果包含「所有结果、项目、人物、情绪板」四个选项，默认显示所有结果，但这个意义不大，重点在项目跟情绪板。
项目
切换到项目标签，项目标签下展示的都是完整的项目作品，这是可以快速浏览，看到感兴趣的内容就把它标记到新的页面，等所有浏览查看结束后再细看每个项目，并对项目做进一步的分类和整理。
项目标签下提供的筛选项很实用，分类依据推荐「好评最多+本月」的组合，以月为单位既可选到大家都比较认可的新作品也避免了因数据波动造成部分作品质量差的情况。「已策展」类似站酷或 UI 中国的首页推荐，是被官方编辑认可和推荐的作品，一般都会有很高的质量，但时间上可能会比较久远。
在筛选器里面，有另一个比较实用的功能叫做「按色彩筛选」，如果客户或者业务方对主色调有要求，就可以通过色彩的筛选，找到更符合我们业务需求的相关作品借鉴，或者设计师自己对某类颜色的搭配总是调整不好，也可以通过筛选，看看其它同行是如何处理这类色彩的，这也是一个有针对性训练和学习的方法。
情绪版
情绪版就是花瓣里的画板，它是其 Ta 设计师采集的同类主题的作品合集，用法也跟花瓣一模一样，唯一的不同是花瓣可以采集站外的内容到画板，而behance 只能采集站内的内容，其余两者完全一致。
情绪版默认是按时间的先后顺序排列，所以可以通过筛选项，将排列顺序调整为「关注人数最多」，正常来讲，关注人数越多的情绪版收集的作品质量也越高。
我们知道，像站酷、UI 中国等平台，用户上传作品时，都需要给作品添加一些标签，这些标签的作用就是帮助网站做人工的作品分类，我们点击某一标签就能看到使用了同一标签的所有作品，可以说标签是比搜索关键词的内容检索手段。每一个作品下，都显示了作者上传作品时填写的标签，通过点击这些标签我们将搜索结果引入到了另一个更纯粹有效的内容领域。
更有趣的是，标签同样支持项目、情绪版这两个层面的进一步分类，同时也支持之前介绍过得分类筛选功能。也就是说，在最开始搜索时找准一个关键词，之后通过情绪板、作品标签等方式就能关联起来海量的内容。
通过前两步，我们已找到了一些比较不错的作品，而优秀作品的背后当然是优秀的设计师或团队。所以点进作者的主页看，一般都会有惊喜的。除了能看到作者自己的作品外，我想说的是另一个标签「好评」，好评这个标签其实体现了作者的审美和职业方向，如果作者本人在领域内已经足够专业，那么能被 Ta 欣赏和点赞的作品大概率也不会差，所以好评这个按钮，是借助行业大咖的手帮我们做了一次作品的筛选和收集，点这个标签进去大多数时候是不会让你失望的，一般都惊喜满满。
在今天，每个设计师离自己领域里最顶尖的大咖，只隔着 3.75 个人，通过点击作者的「正在关注」，你可以看到设计师本人还关注了行业里的哪些设计师，通过这样的操作 3 到 4 次，你会发现总有那么几个人，会在这个略显复杂的网络中被不同的大咖同时关注，那么 Ta 就是这个行业里比较顶尖的人才了。
在「正在关注」下面会显示作者所在团队，因为好多项目其实一个人是很难完成的，大都是好几个设计师协作的结果，所以如果你找到的这个设计师作品足够牛逼，那说明他的团队也是很不错的，顺便关注一波就好。
当你习惯这样摸瓜，一段时间后这个行业里几乎的大咖就都在你的关注列表里了，做到这一步后你就会有一个新的收获，这点我们后面再聊。
利用前面的搜索方式，我们已经找到了不少较为满意的作品，接下来我们需要再对这些作品做简单的筛选整理，把真正符合我们需求的作品整理出来。
我习惯用网站自带的收藏功能及部分精品资源本地收藏的方式来整理自己的灵感库。网站的情绪板我把它看作是一个各个终端通用的网盘。behance 提供了两个收藏作品的功能：点赞与保存到情绪版。站酷跟 ui 中国也有同样的功能。
点赞的作品，会统一收集到个人主页「点赞」标签下，所有作品按时间排列，比较乱，所以推荐把喜欢的作品收集到情绪板。建立情绪板可以按类别将作品整理到不同画板，由于情绪板是可以分享和被搜索的，所以使用情绪板整理灵感，不仅方便了自己，也益于同行。目前来看，情绪板在 behance 这个产品中已经跟花瓣中的画板非常像了，不仅可以采集一个完整的作品到情绪板，也可以采集作品中某个单独的图片或视频到情绪板，这样的灵活性跟花瓣完全一致，且 behance 将情绪板被放到了用户非常容易触达的位置，所以在大家的共同努力下，各类情绪板会越来越丰富，这个功能也会更有价值。
1. 资源的自我更新
经常玩抖音的小伙伴都知道，抖音会根据你的点赞、浏览等行为，为你推荐符合个人口味的视频，而这样的推荐功能在 behance 也有，behance 会根据你点赞收藏的作品、你关注的人，给你推荐相应作品，并且推荐作品是直接显示在首页的，每次打开 behance，你都会在网站最直观的位置看到 behance 为你推荐的内容，这里的内容大体上分为两类，一类是你关注的设计师的作品更新，另一部分基于已经关注的作者推荐相似的作品给你，就我个人使用体验来讲，推荐还是相当准确的。
behance 的推荐功能是资源自我更新的一个重要手段，你关注的同一领域作者越多，收藏的作品越多，它的推荐就越准确，这样就节省了一些资源搜索的时间成本。要想获得好的推荐结果，我建议你的 behance 上只关注一个领域的作者和作品，以我自己为例，我只关注数据可视化方向的作者和作品，虽然我也喜欢摄影、插画等，但我主业是数据可视化，所以为了提高首页推荐作品质量，其它两类我会去 500px 等更垂直的网站浏览，而不会在 behance 上关注。当然，网站只是个工具，你也可以有自己的用法，于我而言，我关注的核心是效率。
2. 资源的迭代
如果把我们收藏的内容比作是云盘里的资源，那么资源并不是越多越好，无论哪种类型的内容，当内容很多的时候找起来都会比较麻烦的。我们需要坚持做一些工作来不断减少资源的数量提高资源的质量，少而精是最好的状态，如此我们就不需要花很多时间去找某个内容，而已有的内容又都能很好的满足需求。要做到这点，我们需要给资源做迭代，所谓迭代就是去掉旧的过时的内容，添加新的更好的。每隔一段时间，回来翻一翻自己之前收藏的作品，会发现有些作品自己已经看不上了，因为在做灵感收集的过程中，我们的审美会自然有所提高，当输入的作品样本越来越多，我们对作品评价的维度也会更多，之前那些觉得好的作品，现在看来也就会有缺陷和不满，这是一个很正向的结果，成长就是一个不断剔除的过程。删掉那些自己觉得不满意的作品，添加更符合自己当前审美的作品到各个情绪版。
迭代还意味着我们需要对那些情绪版的标签做维护，对那些命名跟内容不大匹配的情绪板，要及时更新更恰当的命名。同时，也要对情绪板内容的类别做维护，比如动画、视频类素材最好不要跟图片类素材放一起，因为列表的封面图并不能体现作品详情里是否包含视频等内容，所以作品很多时找起来就比较麻烦，按内容的不同类型把内容分别收纳进不同的情绪版可以给我们后续的应用节省不少时间。
1. behance在国内访问受限，为何要以它为例做灵感收集的方法介绍？
首先，Behance 国内访问不畅，并不影响它是世界范围最优秀的设计师聚集平台的事实。对于数据可视化而言，并不是一个新兴的领域，在国外早已有之，并且相对成熟，而国内相关作品、经验尚少，所以从获取知识的角度来看，behance 上你能获取到的数据可视化相关作品或内容，不管是数量还是质量上，都要比国内的好。
其次，正如文章刚开始我说的那样，文中介绍的方法对国内的大部分设计网站同样适用，尤其是关键词的定义、标签的使用、收藏及情绪板（画板）的使用技巧。综上，我当然是要介绍「更好」的灵感获取网站给大家，而不是揪着大家熟悉的聊。
2. 我自己也收集研究了不少优秀作品，为何做的时候还是不知道如何下手？
毋庸置疑，优秀的作品建立在良好的审美基础之上，好的作品看多了审美自然会有提升，但审美有了为啥还是做不出符合自己期望的作品来。这块有两个问题，一个是刻意练习的度没到，另一个是不会分析别人好的作品。刻意练习听名字就知道是什么意思，而作品分析就是我们要知道一个作品之所以让人眼前一亮，它「亮」在什么地方，就是要具体到细节，我们越是能够细致的指出那些让你觉得好的点，就越能模仿和借鉴，之后再辅以大量的刻意练习，才会有效果明显的提升。
文章来源：优设
我们在翻阅杂志的时候，总是会惊叹杂志里的图片怎么会这么好看。其实杂志里的图片一方面是由摄影师专门为杂志的编排而拍摄的，另一方面，也是因为杂志对图片的处理手法十分巧妙，今天这节课我们将给大家讲解一下关于杂志里的图片都是如何处理的。
在课程开始之前，我们先来看一些杂志的图片。这三张是以一张大图片为主体的杂志页面，我们将图片用红色的色块标记，文字则用蓝色的色块标记。我们可以发现，红色部分的面积远大于蓝色部分的面积。
我们换成小图片的页面看看。同样的，图片的面积也远大于文字的部分。我们可以发现，现在杂志的大多数页面其实都是以图片作为画面的主体，或者说图片所占比重会比文字大得多。
为什么会出现这种现象呢？那是因为图片与文字相比，图片的视觉冲击力和对人的吸引力远大于文字。为了能够吸引读者的购买和阅读，所以杂志页面中会加入丰富的图片。
那么我们接着先来了解一下关于图片分类的小知识。
图片可以分为点阵图和矢量图，点阵图就是以像素组成的图，放大之后可能会造成模糊等失真的效果。矢量图则是由线条、几何图形等构成，可以随意放大缩小也不会失真。
也可以分为摄影图片和手绘图片，顾名思义，摄影图片是用照相机拍摄出来的图片，而手绘图片则是通过笔或者手绘板画出来的图片。
矩形图片和去底图，矩形图片是指外轮廓是矩形的图片，而去底图则是把环境都除去，只保留主体的图片。
因为手绘的图片本身就会比实物的摄影图更加具备张力，也更容易给人提供想象，修饰的需求并没有摄影图来的这么高，而且手绘的或是矢量图在杂志中出现的概率相对比较少一些，所以本篇教程所针对的图片是左边的这两种，矩形或者是去底的摄影图片。
这节课我们虽然讲解的是如何去修饰一张图片，可是对于图片的修饰我们应该要把控好一个度，因为如果我们一味的追求效果而对图片进行过度的处理，很可能会削弱了图片想表达的东西，甚至让版面过于繁杂而凌乱不堪。而且在某些情况下，图片不需要进行修饰也能让版面足够有张力和美观，那么在什么情况下我们可以不对图片进行修饰呢？我们来看看吧。
第一种情况是当我们使用的图片本身就足够的好，足够有质感和张力，无需进行修饰便能够撑起整个版面。
第二种情况是我们可以通过两张以上的图片排列，让图片之间产生对比或是关联，从而让画面产生张力。
那么第三种情况就是当我们想要强调文字部分时，并且文字组合做得足够的精致或者有表现力时，那么图片也可以省略掉修饰的环节。
最后一种情况是我们要刻画简约风格的画面时，就要尽量避免对图片进行太多的修饰和刻画，否则图片会使画面产生巨大的违和感。
接下来正式进入本次教程的核心部分，杂志中对图片都是如何刻画的呢？我们第一种要讲解的方法就是前面提到的去底图。
为什么说去底也算是一种修饰图片的手法呢？我们来看看这张图片，这张图片是我从一个电商网站上保存的图片。我们可以看到这张图片虽然十分的美观，但是模特的裙子和背景色调很接近，比较不容易展示裙子的细节。
我们把他做成一页杂志，可以发现这个页面从版式结构上来说并没有什么问题，整体画面也十分美观。
但是如果我们想要做一版能够展示裙子细节的版面，那么我们可以尝试把这个模特抠出来，裙子在纯色的背景上就足够清晰和亮眼了。
把去底的模特放进版面中，这两个版面对比一下，是不是右手边的版面更加简洁有力呢？
另外，去底的图片相比起矩形图片也会显得更加灵活。我们用这样一个多张矩形图片整齐排列的画面来作为例子。这个版面排列十分整洁美观，信息都一目了然。
但是如果我们想要让版面变得更加活泼和有张力一些呢？我们就可以通过去底来实现。利用图片去底之后所形成的负空间进行排列图片，让图片错落有致地排列在版面里，这样灵活处理出来的画面，会更加热闹和有张力。
这些都是杂志中使用去底图片的案例。
刚刚我们讲的只是去底图片的基础玩法，接下来我们要讲解一下去底图的另外两种高阶一些的玩法。首先是粗糙去底。粗糙去底就是大致地沿着主体的轮廓将主体抠下来，并不需要严丝合缝地抠图。
还是用这个模特当做案例，如果我们觉得刚刚做的这个版面有些单调的话，那么我们不妨尝试一下粗糙去底的方法。粗糙去底的方式能让图片的形式感更加强烈。
很多时候粗糙去底还会在图片底下加一个小小的投影，让图片有种不规则的小纸片的感觉。
在杂志中这样的处理方式是非常常见的，它适合用在偏时尚潮流或者是偏文艺的版面中。
第二种进阶玩法是半去底，也可以叫做局部去底，意思就是沿着图片主体的外轮廓将主体的局部抠出来。
在这里给大家介绍两种比较常用的局部去底的小技巧。第一种是主体背后有轮廓明显的物体的话，我们可以将主体沿着主体背后物体的轮廓进行抠图，例如这个模特背后的门。
当主体背后没有什么明显的物体让我们进行局部抠图的时候，那也没关系，我们可以使用第二种小技巧，将主体踩着的地面抠出一部分来，这样也能一定程度上展示主体所在的环境。
我们同样将这两个抠好的模特放进版面里，比起最初的版本，这两稿的形式感会更强一些。
这个杂志作品就用到了我刚刚介绍的小技巧。这样的去底方式能让版面更加活泼有趣。
另外将去底图和矩形图片放在一起，能够产生强烈对比，表现力也会很强。
例如这些杂志页面都存在着矩形图片和去底图片的对比。
我们很多时候都会自嘲自己只是抠图的，可是听了这些之后，有没有发现自己连抠图都不配，抠图远远没有你想得这么简单，去底的图片比矩形图片灵活得多，也更具有活泼热闹的属性，将去底图处理得好，可以给版面带来非常大的气质上的提升。那么我们接着来看，除了去底之外，还有什么别的处理图片的技巧吧！
接下来给大家讲解一下第二种比较常见的图片处理方式——叠加色块。
叠加色块的方式有两种，分别为半叠色块和全叠色块。我们先来讲讲半叠的。
好吧，又是这个模特。我们在他的背后叠加一个色块，一方面可以一定程度上填补留白，另一方面也能让图片更具有形式感。
除了叠加这种矩形色块，还可以尝试叠加不规则的色块，不规则的色块相比矩形色块能更灵活的处理负空间，也可以根据主体的轮廓进行灵活调整。
看看这些案例，通过加入了色块是不是让画面更饱满和有张力了呢？
接下来来讲讲全叠色块，全叠色块的处理手法一般是用在这种多图片并列排列的版面中，因为如果是一张大图片使用全叠的手法就会显得有些呆板了。
我们用个案例来展示一下吧，例如这样一个版面，整齐地排列着九种不同的蔬菜，可是由于这些蔬菜的形状各异，导致了负空间特别的零碎，画面显得有些散。
最快的解决方式就是给他们叠加一些色块，那么版面就变得规整许多了。
如果我们觉得这样有些不够灵活的话，我们可以将个别的蔬菜放大，让蔬菜的局部或者是投影超出色块，这样的版面就会显得灵活而不零碎了。
第三个手法是使用描边或者边框。
刚刚我们用去底的方式来让这个版面更加活泼有张力，其实通过添加边框是一个更加简单快捷的方法。
我们不需要改变版面的结构，只需要在矩形图片的边缘添加一圈描边，或者是将图片的边框处理成拍立得，版面就会立即显得更加活泼有趣了。
边框的形式有很多，例如在图片的内部加边框，两条粗细不同的线组成的边框，或者是手绘的线条作为边框。我们可以通过多看杂志总结出更多的边框形式。
刚刚我们讲的都是矩形图片，其实去底图片也是可以添加描边的。例如这页杂志，通过描边的使用，使得深色的产品在深棕色的背景中能够凸显出来。
字叠图是在杂志中可以说是最常见的修饰手法了，非常的简单粗暴但是超级实用。字叠图的方式大概也有三种，分别为标题叠图，段落文字叠图和手写体叠图。
首先讲讲标题叠图的使用。我们来看看这个版面，他的主体是一个大草原的大场景图片，图片中没有明显主体。那么我们就可以通过将标题叠在图片上的方式，使得图片上产生视觉焦点。
如果将两张图片的位置换一换，上方的大图片变成了这张以蒙古包为主体的草原图片，那么我们叠加文字的时候就需要注意到叠加的位置要与主体相呼应了。
这两个都是将标题组叠压在图片上的例子，将标题组合叠加在图片上，能让标题和图片都得到凸显和强调。
接下来是叠加段落文字，将段落文字叠压在图片上，能让版面更加灵活，也能让大段的段落文字显得没这么枯燥。一般来说，因为识别度的原因，段落文字不会完全叠加在图片上，只会叠压局部。
我们同样用大草原的文案来做一个段落文字的叠压。由于是段落文字，特别需要注意文字的可读性，所以我们将段落文字都叠压在了色调比较浅的天空上，尽可能地保证阅读的流畅。
最后是叠压手写体的处理方式，手写体的叠压与标题一样，同样需要注意叠压的位置。
手写体的叠压能将手写体自带的属性带给图片，例如想让图片更文艺一些可以用细一些的手写体，更潮流一些则可以叠压粗的涂鸦感觉的手写体等等。
我们刚刚讲解的都是在矩形图片上叠加文字，那么在去底图片上能不能叠加文字呢？其实是可以的，像一些装饰的手写体，或者字号比较大的标题，在不影响识别性的情况下进行字叠图的手法都是没有问题的。但是！我们是非常不建议在去底图上叠加段落文字，因为一般去底图可以用来叠压文字的地方不多，如果要大面积的叠压段落文字，必定会产生识别度不足的问题，所以在去底图上叠加段落文字需要非常谨慎。
那么除了字叠图之外，利用文字进行修饰的方式非常的多，我在这里给大家介绍几种比较常用的。
将文字绕着图片主体排列是在杂志中非常常见的一种手法，能让画面变得更加活泼热闹。
我们也可以将文字处理成发射状，模拟出一种喷口而出的感觉，使得图片更具有动感。
添加对话框，能让图片变得十分生动，让静止的图片也有一种会思考或者会说话的感觉。
类似的方式还有非常多，例如文字加指向性的箭头、个性的字体、数字，甚至是竖排的文字等等，都可以变成装饰图片的元素。
还是用一个案例来示范一下吧。这次换一个鞋子的案例，我们看这个版面构图啥的都没什么问题，就是缺乏了一些活泼的氛围，那么我们加入文字的装饰性元素，版面就瞬间变得活跃了。
如果我们想要添加装饰元素又缺少文案的时候，那我们就可以用下一种修饰手法，添加手绘的元素。
装饰性的手绘小元素，能够模拟出人物或者是物体的运动趋势，让图片和版面具备运动感。
同样这双鞋，我们给他添加一些手绘的小元素，也同样能够塑造出活泼生动的画面。
接下来要讲的是添加投影
我们来看看这些添加投影的例子，投影可以让图片变得更加真实，更具备细节，使得画面更加具备质感。
这一个案例添加投影也可以一定程度上解决画面单调的问题，但是他具备的气质并不是添加装饰性元素的活泼热闹，添加投影带来的是使画面更具备质感。
添加投影除了刚才使用的真实投影外，我们还可以用这种假的投影，其实就是一个叠在主体下方的，与主题轮廓相似的几何色块。这种方式更注重的是表达一种形式感，而非真实感。
第8种的修饰手法是倾斜。
倾斜的手法能让图片具有不平衡感，从而产生强烈的动感。关于倾斜我们之前已经有别的教程详细说过了，那我们就直接看看案例吧。
我们将这双鞋子进行倾斜摆放之后，感觉画面就不那么单调了，产生了一定的张力。
最后一种方式是出血和跨页处理的手法。
也许你们会想怎么出血也算是修饰手法呢？不就是放大而已么？没错，放大也能算是一种修饰手法。在图片足够高清的情况下，放大能让读者留意到许多我们平时不注意的细节，增添了版面的细节感。相对于完整的图片，经过出血的处理的图片遭到了裁切，会产生一种陌生感，也能够让读者觉得更新鲜。
最后我们还是用这双鞋子来示范一下，因为鞋子放大出血之后，版式结构会遭到破坏，所以我们得换一个新的构图。由于经过出血处理之后的鞋子并不完整，所以我们在上方加入了一双小的完整的鞋子作为信息的补充。
好啦，我们给大家总结的杂志里处理图片的小技巧已经全部讲完啦，不知道大家都学会了没。虽然说我们是从杂志的设计中总结出来的设计技法，但是并不意味着这些手法就只能应用在杂志设计中，设计其实都是共通的，并没有说某些技法就只能被用在某些领域中。下面我们就给大家带来一个海报的案例，给大家演示一下如何将杂志中的骚操作带到别的设计中。
因为我们使用的是杂志的编排技巧，比较适合时尚、潮流或是文艺的风格，所以我们选择做一个潮牌的宣传海报，这样在气质上会比较相符合。
首先建立一个版面并确定好页边距。接着我们把画面的主体，也就是这个潮牌的创始人陈冠希欧巴放在画面中间。
然后将标题文字放在版面右上角，标题文字我们做了一个投影的效果增强标题的形式感。对应的，我们在版面的左下角编排二级信息的文字，做一个对角线的呼应。
接着将其余的文字安排在左上角和右下角，我们整个版面的大体框架就出来了。我们可以看到现在这个版面的留白太多，形式感不够强烈，缺乏氛围感。接下来我们就要用我们今天教程所讲的手法来一一解决这些问题。
先来一个叠加色块的手法，在欧巴的身后叠一个黄色的圆形色块，那么上半部分负空间零碎的问题就一定程度上得到了解决。接着再来添加一个投影，这个投影我们选用了高明度和高纯度的青蓝色，这样更加有时尚有趣的感觉。
然后使用字叠图，从文案中的slogan里提取出It’s Movement的英文放大叠在人物身上，这里我们选用了一款比较有趣的粗无衬线字体。
剩下的负空间我们用添加文字装饰元素和手绘装饰元素的手法填满。最后的最后，再给版面上加一层点元素背景，增加版面形式感。我们这一张海报就最终成型了。
文章来源：优设
在我们设计UI有所疑惑时，可以参照以下标准做法。
这些做法并非一成不变—我只是列举出这些方法，相信它们可以对你的日常UI设计工作有所帮助。
我们需要记住一点，设计其实就是跳出框框思考，这意味着，有些时候我们要打破陈规。所以，对我的建议也不要全盘接受。
图中的像素值是密度像素值的三四倍
密度像素是屏幕上每一英寸所包含的像素个数，简称PPI（Pixels Per Inch）。dp（density-independent pixel）是密度独立像素，也写作dip（也有device-independent pixel之说，设备独立像素）。
设计界面时，建议大家基于设备的密度像素，而不是像素。这样可以保证我们设计出的图标素材比例适当，适应不同尺寸的设备。
举个例子，假如我们以密度独立像素dp为单位，设计了一个 200 x 50的按键，那么这个按键在160ppi的屏幕上的尺寸是200 x 50像素，在320ppi的屏幕上的尺寸则为400 x 100像素，即原尺寸的两倍。
因为有些屏幕的单位英寸的像素数量要比其他屏幕多，即ppi分辨率大，为了保证设计的图标在不同分辨率的屏幕上都一样大，设计师通常只是设计一个尺寸，导出2x、3x、4x的尺寸。
iPhone XS Max的屏幕尺寸是414 x 896。但这里的单位并不是像素，而是点的个数。论像素，则是1242 x 2688 px。知道了这些，给iPhone XS Max做设计时，我会以414 x 896个点为尺寸做设计，而后导出3x的图标素材。
为什么UI设计的间距都是8的倍数而不是5的倍数呢？这里有一个简单的解释—如果一个设备是1.5x的分辨率，我们就没法导出一个奇数。
另外，现代主流的屏幕尺寸都是以8为单位，以8的倍数做设计可以很好地适应这些屏幕。
以8的倍数设计可以保证设计的一致性。基于这种惯例，大家在进行设计工作时不用再猜测间距的数值，每个图标都可以完美地与其他图标对齐。
有关这个话题的更全面探讨，请参考Bryn Jackson的文章《八像素网格设计》。
我们在设计的过程中应该时常将自己抽离出来，审视界面中这些作为元素“容器”的线和框是否让界面显得过于杂乱，是否应该予以保留。通常这些用以区隔界面内容的线和框可以被边界留白代替。
我们设计的大部分元素都存在于线框里，简单清除掉这些“容器”可以让界面看起来不那么拥挤—给元素更多呼吸的空间。
善用对比度不仅仅是为了让用户的注意力集中于重要的信息，更是为了使产品更容易访问/使用。
设计产品就好比建设像图书馆、学校一类的公共场所，它的适用对象需要涵盖每一个人，包括失明、色盲和视障用户。
Web内容无障碍指南（WCAG）要求文本或文本图像的对比度至少为4.5：1。
为了保证设计达到该标准，我们可以下载Stark这款插件来检查设计是否是无障碍的。
为什么有些图标元素会被公认为标准？原因有多种。
假如你把一个按钮设计成圆形，那么当我们需要一个（字数较多的）“Start Free Trial”按钮时，它就会不必要地占用界面中竖直方向上的空间。
另外，用户期待的是与其他产品相似的体验。如果你设计的网站、APP或软件与用户的既有习惯相悖，那么这样的体验是不直观的，用户很可能会因此受挫。
故而，在我们发挥创造力的时候，最好以现有的设计规范为基准和前提。不要重新设计轮子。
每一种颜色都有自己的视觉重量，我们可以通过借助颜色的视觉重量来建立内容的视觉层次，用颜色的深浅来呈现内容的重要性的层级。
善用颜色视觉重量的秘诀是，一个更为重要的元素，应该有更重的视觉颜色，以便用户快速浏览网页，区分重要和不重要的信息。
大字号、粗体的信息会首先被用户注意到，而后他们会关注其下的辅助性信息。
通常，设计界面会控制使用的字体数目，两种不同的字体就应足够—这不是说你不能使用更多字体，只是你需要充分的理由。通常来讲，仅用两种字体会更好。
设计界面时要善用字体家族。
使用字体家族意味着我们可以使用同一字体的不同变体。字体家族的存在就是为了字体的不同变体可以更和谐地被放在一起，让设计在保持多变性的同时兼顾一致性。
选择字体时，尽量选择那些有多种重量（如标准、适中、粗体、特粗）和样式的（如长体、宽体、斜体）的字体家族（译者注：作者此处所述选字体经验的适用对象主要为英文字体。）。这样既会给设计留出可探索的空间，也不会增加额外的字体种类。
让用户去认知产品是产品设计中所推崇的，因为，我们为什么要让用户在使用的过程中去思考呢？
结账页面、电子邮箱、搜索历史、返回按钮等都是很好的建立了用户认知的例子。
在好的设计中，结账页面是不需要让用户记住他们所要购买的物品的。用户应该可以清楚地从界面中确认他要购买的物品，而非通过回忆来想起。
在Gmail邮箱中，我瞟一眼就可以知道哪些是已读邮件，哪些是未读邮件，这个过程不需要过脑子。同理，我登录到自己的亚马逊账户后，可以迅速地从上次购物时中断的地方继续开始购物—因为它显示了我最近浏览过的物品。
设计时，应让元素、功能、选项明显可见，最小化用户的记忆负荷。用户无需自己在操作的步骤中记住信息。系统的操作说明应该在需要时很容易看到或查到。
—Nielson Norman Group（尼尔森诺曼集团，人机交互和用户体验咨询公司，唐·诺曼是创始人之一）
作为用户，速度和效率是最重要的。用户使用一个应用程序，是为了解决某个特定的问题。
我要速度。
— Ricky Bobby（电影《塔拉迪加之夜：瑞奇鲍比的民谣》主角、赛车手）
如果将一张支票通过手机存入银行账户这个体验是非常让人享受的，那固然很好，但作为设计师，千万不要让你的创造力阻碍用户实现他们的目标。
关于动画和微交互的一条经验就是，如果某个体验只是无谓地增加了时间，那么这不是在改善用户体验。
如果加入的动画带有目的性，则可以改善用户体验；但是如果增加的只是不必要的分散注意力的元素或用户操作，那么用户体验不会变得更好。
Dribble上有很多着陆页的设计—当用户向下滚动鼠标时，动画随之展开。通常，这些设计展现出过火的动画效果，每个元素都在淡入淡出，动来动去，而几乎不关注体验本身。当太多事情同时在界面上发生时，用户很难知道到底哪些信息是应该关注的，这等同于浪费用户宝贵的时间。
这位Dribble用户，非常抱歉把你揪了出来:/
无数研究表明，界面中动画的最佳时间在200到500毫秒之间，这个数字是由大脑的特征决定的。任何短于100毫秒的动画都是一晃而过，人眼根本无法识别；而超过一秒的动画会带给人无聊和延迟的感觉。
—《UX微动画设计指南》
所以，如果你要在界面中使用动画，那么给它一个明确的目的，并且不要让用户等待超过500毫秒。在2019年的今天，惹恼你的用户只需要1毫秒。
每次我们想要增加额外的信息到界面中时，例如按钮、文字、照片、动画、插图等等，它们就会跟相关的信息进行竞争。如果一页上有太多东西，那么某些元素的重要程度就会被削减。
谷歌搜索首页就是典范。这个设计将全部的注意力放在了搜索这个主要功能上，没有把用户淹没在不必要的信息海洋里。
对不起了雅虎，在这必须把你当做不好的案例展示
最后，分享给大家一句我最爱的设计箴言：
臻于完美之时，不是加无可加，而是减无可减。
文章来源：UXRen
年底了，大家有没有在电脑前面忙成狗呢？我身边设计师朋友们可都在冲刺年终 kpi 呢。
但设计需求越着急就越容易出现问题，不少客户爸爸们都抱着一种「没多少时间了，你就这么抄吧」的速成心态，殊不知这样让设计师很为难啊！
粉丝投稿，求问老板让「致敬」时，设计师应该如何应对呢？
当然这种抄袭的事情我们自然不能支持，但从别人的套路中总结出经验还是可以的，为了给大家写出有干货的内容，我收集了喜茶全年的广告海报，做了一个设计风格的总结，方便大家「偷师」（不是抄袭，谢谢）
要说新式茶饮行业最喜欢用的风格之一，莫过于「港式风格」了，毕竟港式奶茶也是新式茶饮行业的扛把子。
港风兼具了：风格强烈/配色醒目等诸多好处，喜茶也在 2019 年多次使用这个风格，例如与阿华田合作的联名款还有后面的阿喜小卖部以及吃瓜公司，还有后续的火锅跨界多肉芒芒甘露等等都采用了港式风格来设计
但其实港风是非常容易操作的，只需要三步就能打造喜茶同款。
下面我们就来看看怎么搞港风设计吧！
谈到配色就逃不出一个核心话题：「港风到底是什么风格？」这就要从香港本土的环境开始说了，香港拥有非常高的人口密度，在闹市区楼宇一栋挨着一栋，店铺的招牌鳞次栉比。
大家日常的生活环境就是每天都被高密度的信息轰炸着，所以店招想要在众多招牌中脱颖而出自然就需要视觉上的冲击，其中便以极其醒目的霓虹灯店招胜出。
但霓虹的制作工艺上，图形与配色都不能太复杂，于是就形成了：手写字体+高饱和配色+简单图形，这样的固定组合形式，港式风格也就此定型。
所以其实只要选择好一个手写字体你就完成了港风的一大半！
然后再选择一个饱和度高的颜色外加基础好看的图形就搞定了，这时你就会拥有一个喜茶同款海报了。
好看的免费字体这里找：
说完了港风之后，第二个经常被 cue 的就是传统古风，而古风中最最最最重要的一点就是定好主基调色，然后选对辅助素材。
而主色调的选择无外乎几种常见的水墨画、工笔画、民国画报等，这些都是古时候我们常用的艺术载体。
而其中工笔画和民国画报因为画面柔美好看、画风具有明显特点成为了现在年轻品牌爱用的设计形式。
当然色调只能展现画面的整体感觉，真正的神韵还是要靠细节来呈现，例如祥云、角饰纹样、圆月玉兔等都是极具特色的。
古风色调+装饰性图案的这种搭配，可以说在产品广告中是非常百搭的，且大部分的产品展示都能应用上，例如喜茶新品的荔枝季还有桂花绿的海报。
△ 喜茶的中国风海报
以及一些节日海报的应用都能很好的体现中国节日的特色
如果你没有太多时间去追求风格创作但是又想要有好的视觉效果，那你也可以学学喜茶的广告，走简约派的路线，简单来说这一风格的要素就是排版要好 + 元素要少。
说白了就是画面保持简洁的同时还要具有设计感，这就全靠排版来撑了，相比其他的风格，简约风的排版更多元化。
常规的排版方式有居中、左右、四边构图。
只要选择合适的构图外加上好看的照片，你就会获得不错的简约风海报了，其实这种风格也不用拘泥于灰白色调，配上其他的颜色或是插画图片时效果也一样很好。
当然，我们在看设计作品时都是只看到了最好的一面，看不到品牌与设计师在背后反复实验与摸索的过程。
△ 喜茶全年海报的一小小小部分…
里面还有一些不错的海报作品却因为不同的原因未能与大家见面。
号称茶饮界「广告公司」的喜茶在这一年除了用心做饮品之外，也为设计圈提供了不少有价值的物料，能够靠设计将产品的价值传递出来对于设计师来说是一个好现象，设计在以后的日子里会被越来越多的品牌重视起来，上面这些「套路」大家可以学起来了~
文章来源：优设
作者通过从会员体系构成的4个核心要素对“京东、亚朵、支付宝、腾讯理财通”的会员体系进行拆解，发现不同类产品中的设计会员体系需要注意的问题。
一款产品要想持续获取用户价值，前端增长和后端活跃、留存与转化缺一不可。随着流量越来越贵拉新成本越来越高，多数互联网公司开始将用户活跃与留存视为产品核心指标，而会员体系一直以来都是最有效的活跃留存与转化的运营手段之一。
本文对比4款目前付费类产品中比较典型的“京东、亚朵、支付宝、腾讯理财通”的等级会员体系，分别代表4种不同的等级会员体系类型。从会员体系构成的4个核心元素：命名、层数、成长值计算、会员权益，来快速了解一款产品的会员体系。
希望通过这篇文章给在做会员体系抓耳挠腮的你一点启发。
会员命名是品牌文化、用户群体特征的体现，而会员层数的多少则反映了产品转化路径的长短。
京东会员分为非付费会员（下称等级会员）和付费会员两个体系。为了凸显付费会员，2019.9.15日起，取消了等级会员原有的铜银金钻制会员体系，以京享值代替。
至此，从会员命名的角度，京东的会员只有付费会员和等级会员两种名称，等级会员会员之间以京享值的大小进行区分，共分为5层。
亚朵会员在命名方面充分体现了“舒心微笑”的品牌特征，等级会员共分为5级，分别为注册会员（初遇）、银会员（识君）、金会员（知己）、铂金会员（执手）、黑金会员（逍遥）。括号内的短称分别来对应着两句诗词，详见官网的会员介绍。
支付宝等级会员共分为4级，分别为大众会员、黄金会员、铂金会员、钻石会员。从级别数量来说，支付宝会员级别相比于前者少了1级，会员升级的难度也加大了。
腾讯理财通等级会员共分为4级，分别为普通会员、白银会员、黄金会员与铂金会员。颜色区分上，级别从低到高颜色分别为蓝灰色、银灰、金色、黑色，通过灰色调营造理财产品的严肃和专业感。
【注：等级会员是指，会员级别不能直接购买得到，而是要通过完成产品任务升级达到。付费会员是指，用户通过付费购买产品会员特权，购买的会员独立于非付费会员，不是非付费会员的某一级】
通常会员命名会以金属作为主线，其中金、银、钻石等最为常见。
这是用户已经熟知的命名方式，遵循以上规则有助于用户更快的接受会员身份。但如果产品有特殊的品牌文化和目标用户，可以考虑在命名上加入品牌元素，如亚朵。
付费会员与等级会员之间具有重叠性。
高阶的等级会员分散了用户对付费会员的注意力，因此京东最终不得不对等级会员体系采取“除名”做法。
付费会员必然会导致原等级会员体系影响力的削弱，在初始设计时需要综合考虑付费会员和等级会员体系在维系用户、营销行为等方面的价值，做好取舍。
此外，还可以参考亚朵酒店的做法，将等级会员的某一级作为付费对象来售卖，如下图，亚朵酒店将会员体系中的第三级【金会员】单独售卖。
不同产品的会员层数不同。
电商等付费类产品会员普遍采用4-5级的分层、资讯类产品的会员体系可多达10级，如趣头条等；社交、游戏类产品更是根据玩法的不同，设置几十级的会员等级。
会员定级层数主要取决于产品的转化路径长短：
付费类产品转化路径短，用户使用产品就一定会付费，因此只需要根据用户实际消费能力进行用户分层，4-5层即可覆盖用户的全部消费能力。
但社交类产品转化路径长，需要用户长期活跃在产品内才有机会转化付费用户，会员级别需要足够多，才能保证用户有动力持续的活跃和留存。
此外，从成本的角度考虑，付费类产品的会员权益通常为商家的折扣和返利，会员级别越高企业付出成本越高，
级别过多会导致企业难以承担成本，而社交、游戏类产品的会员权益通常为虚拟的勋章、身份象征等，即使会员级别高达几十级，也不会产生过多的成本。
下图是趣头条10级会员的权益，可以看到权益大多数为荣誉勋章类虚拟奖励，企业几乎不需要付出成本。
成长值是用于衡量会员级别的刻度，用户通过获取成长值来达到升级、保级的目的。成长值的获取方式体现了产品主要的运营动作，而计算公式也根据业务变动速度和产品特点有所不同。
分析如下：
京东的主要运营动作包括以下几方面：提高用户消费，促进用户活跃、收集用户信息、建立信用评分体系等。
京东成长值的具体计算公式并未明确给出，因此可以推断其业务调整快，变动幅度大。不公布具体计算公式可以灵活的调整成长值计算公式，但也牺牲了用户的确定性体验。
分析如下：
亚朵对用户的主要运营方向为消费和互动，运营动作主要是围绕着订房和相关服务展开。
成长值计算兼容地区差异：酒店业务通常分布在多个城市，每个城市的消费水平差异很大。若仅仅以消费金额来衡量会员级别，会导致大多数的高级会员都集中在高消费城市，无法实现对二三线城市的用户激励。因此，酒店行业会员的成长值通常结合间夜和消费金额综合计算。
酒店预定更加依赖于用户渠道，包括OTA（美团/携程等平台）、自营渠道、分销商等。不同的渠道企业付出的成本不同，会员体系通常只给自营渠道的用户计算成长值。如亚朵。
分析如下：
支付宝主要的运营动作包括促进用户消费购物、完成生活缴费和增加金融理财。生活缴费任务的成长值奖励较高，可以推测占据用户生活支付场景是主要运营方向
支付宝的成长值计算公式为白盒，这与理财类产品性质相关，由于涉及到用户的金钱投入，更需要获取用户的信任，明确的计算方式能够带给用户确定感。
分析如下：
腾讯理财通的主要运营动作包括促进用户购买理财、激励用户完善个人信息。腾讯理财通的会员任务多达27个，收集用户信息的任务占到1/3，可见完善用户画像为产品的主要战略。
理财通会员成长值的计算公式同样为白盒，清晰的展示用户完成任务能获得的成长值。
（注：数字标记表示用户级别，其中高级会员拥有低级会员的全部权益）
腾讯理财通会员等级礼遇如下图所示：
通过分析会员体系的4个核心元素：命名、层数、成长值计算、会员权益，可以迅速读懂一个产品的会员体系。
一个好的会员体系能够通过选择合适的会员命名、设置符合产品转化路径的会员层数、设计涵盖主要运营动作并能灵活调整的成长值计算体系、提供满足用户核心需求的会员权益。最终形成业务闭环，引导用户价值逐步提升，实现用户价值的最大化。
文章来源：人人都是产品经理
本文分享国际化司机端首页改版完整思考过程，化繁为简提升司机使用效率，提升产品用户体验。
随着滴滴国际化业务脚步不断加快，司机端始终是作为承载全球化业务运力的基础保障。
同时，在移动通信技术高速发展的背景下，不同国家间的传输速度与硬件设备差距正在不断缩小，用户对应用产品的期望由基础的可接受、可使用、功能齐全，向更易用、简约、更为专注的产品使用体验上转变。
在新阶段下，「为全球司机用户提供一个「克制」「可依赖」的产品使用体验」、「为业务拓展提供有力的体验支撑」是体验设计团队在新的阶段下提出的目标。
2018 年 9 月我们与产品同学深入拉美当地对司机侧进行为期 2 周的产品体验调研。虽然在当地的时间较为短暂，但是我们依旧感受到了拉美国家的习俗文化和人文特点。
相比中国人的含蓄内敛，巴西与墨西哥人显然更加热情随和。
在巴西，这个世界上假期最多的国家，处处体现着人们对生活的享受才是自始至终的追求。无论是世界杯一个月狂欢长假，还是周末下午两点开门的商区，总会让人羡慕的同时刷新你对享受生活的认知。
而娱乐至上的墨西哥人，热情友好，能歌善舞，我们常说的放飞自我在这里几乎成为墨西哥人每天的生活常态。他们喜欢享受当下，后天下之忧而忧。他们觉得工作赚钱就是为了更好的休息，大多数人每天都是开朗乐观的处世态度。
同样，落后的基础建设、糟糕的交通状况、教育水平低下、价格昂贵的电子产品以及相对不太稳定的社会环境，也是它们共同存在的问题。
在当地，我们通过实地调研与用户访谈等方式，针对产品体验的问题与司机进行面对面沟通。收集了很多宝贵的用研资料与司机诉求，如司机希望平台为他们推荐订单引导，司机希望获得更多的实时动态讯息和司机每天都可以查看自己的收入状况等，集中体现在效率、感知、体验这三大方面。
其次，伴随着业务的不断增长，越来越多的功能使得我们的产品变的更加复杂，旧版的框架布局早已是不堪重负，无论是现存的体验优化问题，还是未来业务功能的拓展问题，旧的框架体系都是难以为继，无法再通过简单的修补来满足用户和业务未来的诉求。
改版升级对产品本身来说是一件非常重要的事情，需要对多方因素进行慎重考虑。经过多次的沟通讨论，权衡改版对产品可能产生的利弊关系，采用小步快跑，快速试错，分阶段分模块的方式进行。
首页既作为承载核心功能（发车）的载体又是其他重要板块的分发的入口，在内容呈现与用户感知上都存在很大的体验提升空间；我们通过拆解业务中长远需求规划得知，大多数重点需求依赖于首页框架布局，而现存首页框架无法满足业务诉求；在竞品的改版中首页的变化最大，并在司机群体中取得比较正向的反馈；通过上述分析，决定率先对首页进行优化改造。
首先我们与产品、运营侧进行深入讨论，结合用户访谈整理的用户诉求，对此次首页改版的目标达成一致。
在旧版的框架体系中，大量信息在首页呈现，功能层级复杂，重点功能难以突破和查找，关联较弱的信息架构严重影响和分散了司机的关注点。随着业务模式不断扩展，首页新需求类型逐渐增多，一套更加具备灵活的拓展能力和管理能力的首页框架尤为重要。
首先我们将旧版的首页布局打破重建，对现有模块进行整理。功能相似、定义模糊、司机操作相对低频的模块进行合并、删减。
对司机高频操作模板进行场景划分，将相关信息进行聚合处理，通过对入口的强化，来明确司机对不同模块的认知。
出车管理
将与出车相关信息进行组织聚合，结合司机不同的使用场景，将功能与模块进行结合，加强认知，减少司机多余的思考与判断，快速响应，提升工作效率，同样也为业务在有关出车功能方面提供灵活可拓展的组件框架。
收入管理
通过显示司机最关注的今日收入信息，为司机提供方便快捷的查看功能，使司机更专注于工作本身。同时对收入管理入口起到了强化认知作用。
信息管理
对关于个人相关的信息通知及功能操作进行聚合，方便司机对个人信息进行快速查看，提高查看效率。
通过对框架模块的标准化定义，后续的业务需求便可以进行归类管理，根据不同需求的不同属性，结合功能使用场景，选择合适的模块进行展示，提高司机使用效率同时增加首页的业务框架扩展能力。
通过对框架的重构，有效的解决了首页信息承载压力过大，功能层级复杂的问题，同时地图的面积相比旧版首页也大幅增加，信息呈现更加简洁、轻量。
出车操作作为首页的核心功能，通过调研得知，司机普遍反映在旧版首页中存在出车操作感知弱、收出车状态区分不明显的问题，对司机的操作体验和感知体验造成了比较大困惑。
在首页改版过程中我们着重对出车操作进行了设计分析，基于对业务的了解和竞品的分析，得出以下三个结论：
通过「两强一弱」，减少司机困惑提升发单效率的同时，间接的延长司机的在线时长。
完成页面设计后我们发现，操作按钮通过静态视觉角度去表达收出车空间位置关系是十分困难的，仅通过 Toast 提示会造成用户理解的断层，于是提出使用动效去进行「搭线」串联，搭线发车前按钮的点击和收纳后的位置提醒进行视觉体验上的串联，从而达成感知增强，解决视觉体验层面不容易解决的问题。
丰富的订单奖励活动是我们与竞品相比重要的竞争优势，司机在完成定量订单的同时提供了更多的额外收入。查看每日奖励活动，已成大多数司机每日上线必做的事情。
与旧版相比，在新版首页中通过提升奖励入口层级，缩短了查看奖励活动操作路径，从而方便司机快速查看。
通过首页透传的奖励卡片，司机在首页即可获取到推送的奖励相关信息，及时获取到奖励预告和进度，提升了司机工作效率的同时加强了司机对奖励活动的感知。
在经历了快速奔跑的粗放阶段，我们也在思考司机端产品究竟以怎样的品牌气质传递给海外的司机群体。
在当地，我们在司机心目中更像是合作伙伴，凭借真诚互利的态度赢得了当地司机的用户。
真诚、热情与融合我想这就是我们想要传达的核心品牌情感，而克制、可依赖将作为产品体验的设计原则贯穿始终。
颜色系统
司机端颜色系统在基于现有品牌色基础上，结合不同国家颜色文化的理解，新增加符合本地化的辅助色系，以提升产品的亲和力，传递品牌情感。
文字系统
针对司机用户的操作使用场景，对文字字号梯度进行提升，通过文字粗细、颜色、大小加强信息对比度，使司机在更多复杂场景下可快速获取重要信息，提升阅读体验。
在此次改版中新引入 Barlow 与 DIN Alternate 字族作为模式数字展示字体，两款字体分别为 Android 及 iOS 系统下默认包含字体，相比 Roboto 与 SF Pro text 两款字族，在数字展示上更为明确、识别性更强，同时因为自身「纤瘦」的特性，在屏幕横向面积上节省更多空间。
业务在不同的阶段有不同的侧重方向及打法，设计侧根据业务所处阶段应及时的调整自身的目标定位，快速响应，积极探索设计的机会和突破点，在不同的阶段发挥自身价值，助力业务达成共同目标，为用户创造更便捷的产品使用体验。
首页改版从立项到设计再到研发，多部门同学紧密配合，在有限的时间内最大化的完成预期上线效果。
全量上线后，通过问卷对首页改版进行满意度收集，司机对新版首页的满意度平均值高达 93%。取得的成绩离不开每一位参与改版的同学支持，也得益于国际化团队自始至终对产品体验的重视与认同。
作为司机端体验升级的第一步，首页改版只是一个开始，希望通过不断的打磨优化，秉持初心，为全球司机提供更克制、可依赖的出行平台。
文章来源：优设
首先来解释一下什么是动态布局：
所谓动态布局就是可以通过修改内容实现关联内容自动改变的布局方式。
在 sketch 45 之后的版本，我们可以通过 resizing 对元素的上下左右边距进行固定，来实现页面布局的动态响应。这种响应是被动的，需要我们拖拽着它，它才能给出反馈。虽然不是多么的聪明，但是这种被动的方式解放了很大一部分生产力，足以让你鄙视一下 Photoshop 的 UI 设计了。
有了被动响应，自然也想要有主动响应，通过改变元素内容去改变布局。之前在 sketch 里面一直有一个功能：文字尾部跟随（间距在 20px 以内，后面可跟文字或图标）。如图：
功能虽单一，但在工作效率上带来了极大的提升。当然我们想要的更多
比如：
一个标签，我希望可以跟随文字长度而自动适应。
△ 不是这样
△ 而是这样
在 Sketch 58 之前，我们可以通过 kitchen 或者 Anima 等外部插件实现这类效果。但是这类插件在创建为组件以后会出现一些莫名的抽搐，可用性不高。在 Sketch 58 之后 Sketch 自身就携带了这些技能，可以实现一些动态布局，不过目前来看它还是存在一定的局限性，它的动态布局是基于 symbol 的。但我们不会为了布局而刻意去做 symbol，这会加重组件库的维护负担，在整体的收益率及效率上不见得能带来多大的提升。组件库应尽可能的保证干净、灵活以及它的实用性。
我们取长补短。所以，这里要讲的不是某一个插件或某一个功能，而是结合插件与自身的布局来达到足够的稳定与，解放双手，释放大脑。
这里主要通过介绍 Kitchen、Anima 和 sketch 的布局部分，整合它们各自的优势来做一系列的动态布局。
对比一下各个插件之间的差异
Kitchen
输入按钮的上下左右边距，让文字与按钮背景的边距固定。改变文字宽度，按钮宽度随之改变。
Anima Padding
Anima 不需要手动输入边距，插件会自动保留文字周围的边距并生成 padding。
Sketch 布局
sketch 也不需要手动输入边距，但是需要将想要实现动态布局的内容创建为组件，在创建组件的过程中可以对它的动态方向进行限定。这里一共七种模式（无、水平「从左往右、居中、从右往左」、垂直「从上往下、居中、从下往上」）。文字的对齐方式最好和布局的动态方向保持一致。
可以看出 Anima 和 Sketch 会更一点
我们可以让按钮再可以复杂一点。
比如加个 icon：
或者换个行：
在一个维度上的动态改变，大家应用得都挺好。但 Sketch 组件在文字换行时并没有在纵向上去改变高度。
解释一下：
按钮、标签等这类元素，我们通常都会创建为组件，方便我们管理及调用。接下来我们把刚才做好的动态按钮组件化，再来看看它们是否能实现动态响应。
Kitchen
Anima
Sketch
在组件化之后，Anima 出现了未知错误，按钮并没有任何变化。在实际使用中，sketch58 之前的版本可以正常变化。58 及其之后的版本暂时会出现问题，把 Anima 更新到 3.2.2 之后，官方更新说修改了 symbol 之后的 padding bug，但是在实际使用中并没有带来改善。
所以在这里不建议用任何第三方插件去做 symbol，即使 Kitchen 在这里没有出现什么大的问题，但在实际操作中的响应速度及稳定性都比较差。此外 sketch 的更新速度很快，大多插件很难即时跟上它的更新速度，从而导致一些不可预知的问题。为了组件的可维护性、自身安全，请尽量用 sketch 的自带技能去搭建组件。
按钮或标签这类组件通常会多个同时出现，比如这样：
这样：
我们可以通过以下几种方式快速实现布局：
Kitchen
Anima
Sketch
其中 Kitchen 和 Anima 可以实现全自动的动态响应，包括复制、删除等操作。而 Sketch 需要手动去维护或者创建为组件后才能实现全自动的动态响应。
这里倾向于直接利用 Kitchen 或 Anima，不会产生不必要的 symbol，但同时也能提升我们的设计效率。对比 Kitchen 和 Anima，Anima 的响应速度更快，功能更丰富，在实现固定间距的同时可以保证对齐方式。具体的应用场景，我们后面会讲到。
动态的组件，结合固定间距可以实现一系列便捷的操作。接下来我们讲一些具体的实现效果。
基于上面的结论，我们在这里的动态组件都会用 sketch 的布局功能来搭建。
label 在之前的版本中不需要特殊处理，因为有尾随功能。59 版本之后这个功能被移除，新的布局可以完全取代它了。这里我们手动配置一下水平方向的布局。
注意文本的对齐方式与布局方向要保持一致。
再利用 「Anima-Padding」/「Kitchen-自动排版」 实现动态布局。
Anima 需要合理编组来实现
图标解释
△ Padding（内边距）
△ Stack（堆载）
导航栏也是常用的组件之一。
首先创建「选中」与「未选中」两种状态组件。也可以用一种状态（选中状态）通过控制元素隐藏/显示、修改文字样式等来实现状态改变。不过操作比较繁琐，这里就不推荐了。
这里的选中状态需要用到 sketch 的水平布局，短横线才可以跟随文字动态改变。
置入建立的组件，确定好间距，再次建立组件，保持水平布局。就可以得到一个动态的导航栏了
也可以用 Anima/Kitchen 的布局去实现这个效果。
再次强调：Anima/Kitchen 的最好不要作为组件使用。
通用性强，复用率高的组件建议用 sketch 的布局去建立组件。
如何把大象放进冰箱
这里要实现的效果是「改变文字宽度，保持文字与右侧的线条间距不变」
方法：
序号、文字、白色背景成组，并水平「从左向右」布局
这样文字可以推动白色背景变宽，与右侧线条始终维持相同间距。
结合 sketch 的调整尺寸（resizing）还可以手动改变步骤条的宽度。
表单也可以通过 anima 或者 kitchen 来布局，实现数据的快速增删。
PS: Anima 的 stack 会默认选一种对齐方式，出现下列这几种布局效果（下方左对齐异常的原因和我组件的搭建方式有关）。
左对齐
居中对齐
两端对齐
右对齐
6. switch / radioButton
同样的，利用 sketch 的布局，还可以创建动态的 switch 和 radiobutton。
方法和之前建立动态按钮类似，不过需要注意的是：这类 tooltip 会存在一个最大宽度，在超出这个宽度后需要换行处理。但是sketch 的动态维度只有一个象限（x或y）。这个时候当超出最大宽度后就需要手动去换行并调节高度（动态高度，手动调节宽度，可以依据文字是否换行来判断边距是否正确）。
建议：这里我们可以建立两个组件，一个动态高度，一个动态宽度，根据文本量的多少去选择合适的动态方向。上面换行的按钮也可以这样处理。
再多说一句：Anima 可以通过拖动宽度来改变文字的对齐方式（自动宽度、自动高度），结合自身的 padding 可以实现两个象限的动态改变。但是出于稳定性的考虑，我们不推荐用它来做 symbol。
模块相对于简单的组件结合了多种布局方法。
以这个留言版为例展开说明：
这个留言版由头像、name、like、dislike、留言内容等 5 个元素组成。从布局上看可以把头像、name、like、dislike四个元素作为一个部分，留言作为一个部分。在整体上形成一个上下动态布局的组件。
头像和 name 固定于左侧；头像锁定宽高，name 文本自动宽度，布局方式从左向右。
like、dislike编组固定于右侧，文本自动宽度，布局方式从右向左。
留言部分固定左右间距，文本自动高度。这样我们可以通过拖动该区域的宽度去实现高度的动态改变。
利用 Anima 的 stack，实现每个留言版之间的固定间距。此外，在 stack 里面我们可以选中两边对齐的方式。
让组内留言版的宽度保持一致。
分别建立「左上、上、右上、左、中、右、左下、下、右下」等 9 个单元格组件。通过（左、上边框+th+td）的方式也可以，这里不细说。
每一列单元格分别打组，用 Anima（stack 左右对齐）或 Kitchen 固定垂直间距（间距为 0），组名 tr。无论是单元格的增减，还是单元格高度的变化，都可以在纵向上动态改变。
对 tr 打组，固定左右间距（间距为 0），实现表格在水平方向上的动态变化。
利用上面的知识我们来做一个相对复杂的卡片
要点
具体步骤
从上图可以看出卡片主要分为三个部分
对图片+标题编组，命名「banner」，确定标题的文本区域及动态方向，这里的标题我希望它在换行时往上走。这样可以把文字定为下方固定。如图：
对头像、名字、标签编组，命名「人物简介」。固定头像大小，固定名字位置。对标签编组，这里标签应该是动态的，从左往右布局。
标签高度固定；人物简介宽高固定；
固定人物介绍文本与卡片左右间距以及上边距
对「海报」「人物简介」「人物介绍」再次编组，确定组内各元素间距。编组和背景确定边距。
这个过程刚开始可能是一个漫长的调试过程，在熟悉后，会让调试有一个明确的方向，从而缩短时间。
不对，工作还没交付给开发就不算完成。工作中我会使用蓝湖把设计资源交付给开发。
结果
Anima 的布局在上传蓝湖后，蓝湖上显示正常，但是 sketch 本地布局统统崩溃了。我不禁长叹一声，啊！
蓝湖官方解释「两个插件在 Sketch 提供的方法调用是有冲突的，建议在上传前关掉 Anima 插件」。
关掉 Anima 需要在插件中关掉后并重启 sketch 才能生效，不然编组的内容依旧会保留 Anima 特性。
接下来重新总结一下：
结合以上内容为开发同事做的一个上线海报，他们可以只关注内容了。
文章来源：优设
一款产品从0到1的设计流程，在进入开发前的所有工作。这篇文章以去年做的一个小项目为例。
1.了解客户需求，根据竞品产生需求
工具：Axure、Mindmanager、Visio、OmniGraffle、PPT
1.1产品初期模型
1.1.1 竞品收集（应用市场、专业网站、行业调查报告、搜索引擎、）
在应用市场、专业网站、行业调查报告、搜索引擎中寻找竞品
输出：
在产品的潜在目标用户寻找竞品
对产品的潜在用户进行挖掘，分析核心功能的其他实现方法，将功能延展扩大可获得不同层面的竞品。
输出：
将过程、操作的碎片化处理来寻找竞品
将产品的结构、使用过程、操作等一步一步的拆开，根据每一个碎片信息来寻找竞品。
输出：
1.2竞品选择
竞品选择中最关键的一步，就是对竞品进行分类。
1. 功能完全相同的竞品：找出当下产品的核心价值，评估与我们设计目的与市场上成型产品的一致性；更快更好地借鉴对方取得成功的地方；有针对性地寻找差异化竞品的方向。
2. 核心功能相似的竞品：通过以点带面地挖掘价值点或者创新点，将我们自己的产品做到。功能完全相同是一个点进行纵向思考，然后寻找竞品；核心功能相似则是多个点，排列组合式地进行纵向思考，找到的竞品更加全面，我们能够借鉴到的价值点更多。
3. 功能本质相同的竞品：加深对待设计产品的需求本质的理解，通过本质相同挖掘需求的核心所在，借此来找到相对应的参照物。该类竞品，往往需要我们进行横向思考，试图从别的方面，方向入手，其思维广度大大增加，有可能从其他领域中得到解决问题的启示。这类竞品是最容易发现亮点和突破的。
输出：1.功能完全相同的竞品
壁纸制作：可以将喜欢的图片制作成精美的壁纸，定制专属于你的高清壁纸。
2.核心功能相似的竞品
座右铭壁纸：可选择背景、输入文字形成自己的锁屏壁纸。
3.功能本质相同的竞品
livefun:将视频转换为壁纸，将多张照片合称为一个live photo。
1.3 竞品拆解
竞品拆解就是用碎片化方法对竞品功能进行拆解，并最终形成竞品的功能列表的过程。
形成功能列表后，对功能进行备注，寻找到竞品使用过程中的不足，从而超越竞品。
输出：
接下来还需要和所有必要的相关人员就产品以及项目的开展方式进行多次头脑风暴。
头脑风暴(Brainstorming)是由美国奥斯提出的，一种激发集体智慧产生和提出创新设想的思维方法。头脑风暴(Brainstorming)指一群人（或小组）围绕一个特定的兴趣或领域，进行创新或改善，产生新点子，提出新办法。
头脑风暴可能带来一套启动计划、一个精简的框架和一系列比较早期的概念图以及模型。
头脑风暴如下图所示：
2.确定需求
2.1产品定位及如何正确描述需求
前面我们已经讲述了怎样搭建初步产品模型，通过梳理产品模型，可以清楚地了解应该如何定位一个产品。产品定位是需求收集的方向。
用户需求主要包含三个要素：目标用户、使用场景、用户目标。
经过对产品定位的梳理，就明确了产品的目标用户群体，接下来就可以进行需求的收集、分析活动了，总体流程包括需求收集、需求分析和筛选，需求优先级排序几部分。
输出：
产品定位：以用户产出内容为主的可个性化推送壁纸应用。
用户场景描述：
陶娟平时喜欢根据心情更换不同风格的壁纸，但是每次找壁纸都让她十分头疼，很难找到有个性又好看的壁纸（都是用户制作上传的壁纸作品）。
陶娟打开8楼壁纸app，登陆后填写了她的个性偏好，系统根据她的喜好个性化推送壁纸。陶娟选了一款壁纸，还可以看到同时和她使用同一款壁纸的网友。
2.2需求收集的途径
1.用户场景画像：根据之前的产品定位和使用场景用户画像文档分析产出需求
2.竞品分析：找到同类竞争产品，深入体验竞品功能
3.头脑风暴：可以集结产品经理、设计师、运营、市场、开发、进行头脑风暴，围绕一个特定的话题进行讨论
4.用户反馈
5.数据分析
输出：
2.3需求分析和筛选
在需求收集过后，已经有很多的被选需求了。
如何分析和筛选需求呢？
1.筛掉明显不合理的需求
哪些是明显不合理的需求？比如当下技术不可能实现的或明显意义不大的，投入产出比低的、无匹配的产品使用场景、明显不合理的需求等
2.做需求分析
把明显不合理的需求排除后，就需要一个一个对剩下的需求进行分析。首先要了解需求的三个分类：用户描述的需求、用户实际想要的需求、用户的潜在需求，这是三件不同的事情，却有着千丝万缕的联系。我们需要通过用户描述的需求，找到用户实际的需求，再挖掘用户潜在的需求。
3.需求做减法
有时候决定不做什么比决定做什么要更重要，产品的需求是无上限的，大量的堆积需求，会使产品非常臃肿，毫无特色，还会导致工期过长，拖慢了产品推出市场的进度，对产品百害而无一益。因此，应该倾向于做“轻产品”，学会做需求的减法。
这就涉及接下来需要讨论的问题，如何判断需求的优先级。
输出：筛选后的需求列表
2.4需求的优先级
需要对所有的需求定义一下优先级，优先级高的需求优先开发，优先级低的需求延迟开发。
输出：
2.5 输出产品功能图和功能需求列表
用户需求列表确定之后，先以产品功能的形式展现出来，产品功能图可以直观的看出产品的初步功能架构。
输出：产品功能图
功能需求列表的价值，一是在于帮助产品经理理清思路，二是在于帮助项目团队的其他成员了解产品功能需求，让他们提前做好相关准备。
输出：功能需求列表
3.产品架构
3.1 产品功能架构
结合之前的市场调研及产品路径规划，梳理了一下产品架构的大模块
输出：产品功能架构
3.2 流程图的规范
流程图有时也称作输入-输出图，某种程度上来说，流程图是一种沟通性质的图形化语言。一般会使用一些标准符号代表某些类型的动作，如判断用菱形框表示，具体的操作行为、活动用方框表示，开始和结束用圆角矩形框表示。
3.3 确定核心功能流程图
首先我们要设计的是产品的核心功能流程，例如登陆的流程就需要前期设计好，绑定手机号登陆还是直接微信登陆。登陆的流程会对后期的功能产生影响。
输出：功能流程图
做好了核心功能的流程图后，我们需要对app主干做一个流程图。保证每一个功能都可以形成闭环。
3.4 评审与确认
评审主要是让业务部门和开发部门参与，好的流程图具备清晰易懂、简单明了、完整准确的特点
4. 原型设计
4.1 什么是产品原型
产品原型是设计方案的表达，是产品经理、交互设计师的重要产出物之一，也是项目团队的其它成员（尤其是设计师、开发人员）的重要参考和评估的依据。
4.2 低保真产品原型
首先我们要根据产品架构画出初步的页面，也就是低保真产品原型。
这样的原型图有几个好处：
可以快速产出：有时候一个需求的开发周期很短，低保真原型可以快速满足同事的时间要求。
修改成本低：一个产品策划很可能会被修改很多次，低保真的原型修改起来很方便。
输出：低保真原型图
4.3 高保真产品交互原型
工具：axure、ai、ps
高保真产品原型，则是高功能性、高互动性的原型设计，是忠实展示产品功能、界面元素、功能流程的一种表现手段。
高保真的好处：
便于梳理产品细节：制作高保真原型的过程中可以让产品经理提前发现产品潜藏的各种问题，提前处理风险。
更容易让其他成员了解产品设计：有时候简单的线框图无法让别人想象出你要做的事情，也不清楚你要放的是哪几个字段，而高保真原型就可以。
相对而言，劣势就是制作周期比较漫长，涉及到产品流程的修改，那基本原型就得回炉重造一遍。所以高保真原型可以做一些核心页面，不重要的页面可以后期慢慢完善。
输出：动态交互稿
5. 视觉设计
工具：Sketch、Ai
在产品0到1时候视觉评审，会花大量时间去讨论产品的设计风格和主配色，在确定视觉稿没有交互问题后，然后就是讨论视觉设计稿的细节。在产品功能迭代的时候，评审的都是整体视觉风格的继承性和视觉稿的细节。例如对交互设计的理解是否到位，逻辑是否正确，视觉层次是否正确等。
5.1 设计组件规范
5.1.1 为什么做组件规范
1.保证产品风格统一
每个设计师都有自己的审美和风格，产品迭代可能是不同的设计师来负责项目，但是产品的风格必须保证是统一的，所以就需要一个规范性的文件来作为设计标准。
2.提升团队效率
在sketch里，有一个好的组件库，设计师就不用重复去改每一个页面上的图标。只需要改动一个就能同步页面上所有的图标。
3.打磨细节体验
在产品长期迭代的过程中，对每一个元素都需要对其场景、状态考虑清楚。所以在整理过程中，经常会发现以前没有注意到的问题并优化。
5.1.2 组件规范内容和分类
不同的项目的规范内容都是不同的，我们需要明确规范内容的分类有哪些。可以先确定大体的规范内容，在页面完善的过程中也不断的完善规范。
iOS的设计尺寸建议使用一倍图375*667的尺寸进行设计。因为这和安卓的常用尺寸360*640的误差很小。安卓和iOS可以共用字体、图标和间距。可以更加方便里做好统一的设计规范。
输出：
文章来源：站酷
蓝蓝设计的小编 http://www.lanlanwork.com