设计师的知识管理体系怎么建立？只需4个步骤，实现能力价值提升 

在生活中，不管是浏览网页还是使用APP，我们都能看到色彩是其中重要的设计元素。每一年我们都能看到很多“流行趋势预测”之类的文章，而这些流行趋势里无一不包含色彩。

随着时间的推移，设计师们在色彩的使用上更加大胆，更加有策略。有时，色彩用来突出某个元素，有时用来讲好一个故事，有时用来强化品牌的输出。今天我们就来举几个例子。

几年前有一个很流行的趋势是采用大胆的背景，现在还是能看到很多例子。在一个好的设计里，丰富多彩的背景能够让某一区域成功吸引注意力。不管你认为流行趋势是什么，不可否认的是，好的背景色能让一个部分脱颖而出。

下面这个设计来自Root工作室，使用黄色背景来突出切斯特动物园的案例研究。黄色背景设定了这个案例研究的基调。当然了，并不是所有的案例都使用像切斯特动物园黄色这样鲜艳的颜色，因为这个案例的设计是极简风格，并没有需要特别突出的内容，所以鲜艳背景恰到好处。

接下来这个例子是Mambo Mambo，它使用色彩来突出组合的不同部分。有些部分是霓虹黄色，有些是深蓝，有些甚至是黑色。在截图中，我们可以看到，霓虹黄色与绿色搭配，蓝色和肤色搭配，看起来非常和谐。

在整个页面中，正是这些背景色的使用使不同部分都变得独特而有趣。同时呢，也起到了品牌宣传的效果。

颜色运用得当可以更好地突出想要突出的部分。让我们从优步手语登录页面开始，橙色的渐变背景肯定会吸引用户的注意力。这是一个很棒的设计策略，因为这个页面的目的就是教人们基本的手语，很大程度上是依赖视觉线索实现的。

接下来是Kickpush 设计工作室的页面。看图上的文字我们就知道，Kickpush希望展示自己与众不同的个性。这个配色方案的选择就很有目的性，将Kickpush的个性快速直观地表达出来了。

色彩有助于讲好一个故事，Bloom的主页就是个很好的例子。在整个设计中，他们使用的是同样的电子蓝。相同的配色与其他视觉元素一起，帮助用户从页眉滚动到页脚。如果所有不同的部分都有不同的主色，那么故事的完整性就会被打破了。

对于Adobe的营销云登录页面，效果也是差不多的。整个设计是一个很大的版面，每个部分都有自己的配色方案，从最顶部的浅蓝色一直到最底部的深紫色。我们可以看到，整个配色不仅仅是纯的UI颜色，照片选用的色调也与每一种背景色相配。

因为这个设计是一个很长的页面，颜色有助于讲述每个部分的故事。

有时，颜色是专门用来给设计增添趣味性的。为了更有效的使用色彩，有时大胆的颜色并不一定要在设计的前面和中心。

例如，Designmodo自己的Qards着陆页面使用了各种各样的小色块，从而使得登陆页看起来更令人愉快。

强化品牌，我认为这是色彩最有力的作用了，当然了，我不是指上文中Kickpush 或是Bloom那种使用大块背景色的方式，而是批判性的、策略性的使用颜色。

我们很多人都见证了Asana的改版，在新版本中加入了不少颜色。在网站的某些部分，颜色被大量地使用，而在其他部分则不是那么多，这是为了在总体上实现平衡。Asana选用的颜色多变而充满活力，搭配的也非常好。现在，Asana的品牌色彩由亮粉色，橙色和紫色组成，充满活力。可以说，颜色策略似乎是Asana品牌定位的关键。

Stripe公司的策略也差不多，使用相邻颜色之间的渐变，比如蓝色和绿色，这可能是这种颜色使用的一个大趋势。品牌整体上是蓝色，同时也包含绿色、粉色、紫色和橙色。这么多颜色共同配合，增强了Stripe公司的品牌影响力。

最后一个例子是Goulburn山谷的网站。他们的品牌使用了一些不同寻常的颜色，不过整个设计看起来不错。

登录页面中使用的颜色和照片中的截图是一样的：绿色略带橙色。由于照片中色彩的协调，整个着陆页都很流畅。

总结

无论是Asana，用颜色创造更好的品牌；还是Kickpush，使用明亮的红色背景突出内容，让用户意识到它的与众不同，我们看到了颜色在网站中的战略性意义。

最重要的是，颜色有助于塑造个性，尤其是品牌形象。当网页设计趋势发生变化时，网页设计中色彩的使用只会变得越来越好。

作为一名专业的UI设计，其实工作职责无外乎包括界面设计、图标设计、动效设计、切片与标注等。

话说回来，所谓「认真分析」，也是有法可依、有据可循的。今天就给大家复盘下，身为产品经理，最需要掌握的四大分析法，都如何来做。 

一、市场分析

• 从行业角度，要看行业有没有发展，市场规模大不大，政策好不好；
• 从用户角度，要看市场中的用户习惯、用户构成、用户期望；
• 从自身角度，要认清在市场中自己的优势劣势，遇到的挑战等。

• 搜集相关资料，包括宏观经济、行业竞争、技术趋势、市场阶段、市场规模等；
• 分析市场用户基本情况；
• 分析自身基本情况。

二、竞品分析

三、用户分析

• 避免出现诱导用户选择的选项，比如：如果给你提供一个XX功能，你会不会用。
• 避免出现无法理解的专业术语，比如：你是否希望我们的产品采用个性化推荐算法分发内容。
• 避免出现容易引起歧义的模糊词语，比如：你使用社交电商产品频率是多少。
• 避免出现需要让用户思考的问题，比如：你每周共花多少钱买我们的产品。
• 避免直接出现产品名称，比如：你觉得像喜马拉雅、得到这样的知识付费产品能解决你的问题么。

四、需求分析

什么人，在什么场景下，为了达到什么目的，在遇到什么问题的情况下，希望采用什么方法来解决。

通过贴近业务和产品运营团队深入的交流，有助于我们尽快融入一个不熟悉的领域，同时可以阅读一些专业行业网站上关于进口业务的文章，了解大盘的背景。在进口业务中通过背景的挖掘，我们发现在商品和供应链层面上，进口有一些特有的特征与其他业务不同，差异的地方其实往往就是用户的痛点和后面我们发力的机会点。

将会员全链路场景中的服务触点进行统一的感知设计，并在服务中为用户传递一致的体感，此所谓通感。 将升级带来的行为变化用数据反映出来，结合数据去调整设计表现，通过设计迭代再次影响用户的行为，最终与用户在认知方面达成共识。此乃通识。

相信很多体验设计师在与产品需求方进行设计提案的时候会遇到这样的情景：

• 你阐述自己的设计推导过程，从产品目标分析、问题定位、设计目标分析、设计思路阐述这样的推导下来，在场的产品经理们都点头，表达认可。
• 但是！当到了设计方案环节，你把方案放出来，各位就七嘴八舌挑战了：￥#@%&*&*
• 这时候经常会听到这样一句话：“有没有其他更好的方案啊？”
• 这时候你是不是会想，我前面的推导和演绎过程那么完美那么富含逻辑，推导的肯定是最好的方案啦！

但是哦，这个时候，你还是会感觉没底气说出这句话来。

于是你最后说出一句妥协的话“好的好的，我回去改一下。”（各位老板我都听你们的，你们说啥就是啥）

专业度呢？设计价值呢？你的玻璃心要碎了：死了产品经理们会不会觉得自己很水很不专业。

怎么办？这就是今天想聊聊的主题：“思维框架”理论，让我们更好地决策和解决问题。

不知道大家有没有这样的情况发生，自己设计的作品，“乍一看不怎么样，仔细一看，还不如乍一看”！

其实不耐看，或者不敢放大看的原因都是细节做的不到位。

最近在做手机OS的主题图标，对细节的感触很大，今天结合主题图标来和大家聊聊，我们可以从哪些方面注意自己的设计细节，大纲如下：

• 给造型加点细节
• 多加点质感的细节
• 不要让图标看着灰灰的
• 风格特点的运用

1. 给造型加点细节

造型是所有设计执行的第一步，造型做不好，说别的都没用。

那如何能给造型加点细节呢？

打个比方，我们要画一个圆角矩形：

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

很多设计中，我们付出20%的精力就可以应付80%的 Normal Case，而剩下20%的 Special Case 却会花费我们80%的精力。换言之，普通情况谁都会处理，而为了应对一些少数派，我们将要付出更多。

Loading 失败时的错误提醒、搜索无少结果时的空白页面、打了车却没车接单……除了这正常流程下的失败反馈以外，最耗时间的是那些特殊流程或所有情况同时在一个页面堆砌出现的情况。

在设计前期，我们就应该尽可能地罗列特殊情况，即便它们出现的概率很低，也应留足设计时间。而应对非常规 Case 时，有一条原则帮了我很多次：

确保多数人体验的前提下，才去解决少数人的问题。

这不是说要为了多数人放弃少数人，还是造例子来说吧。

案例一：重复利用的物流单号

如果你在天猫有过退货经验就会知道，申请退货并得到商家确认后，需要填写退货的物流单号，当商家收货后才会把钱退给你。这里有个奇妙的问题，设计上是否允许多个用户填写同一个退货单号？

先来看看如果允许，会出现什么非常规情况：消费者AB两人各自在同一个商家C处购买了两台 iPhone，并且商量好分别发起七天无理由退货流程，商家C均同意。然后，消费者A先将手机按要求寄出，获取物流单号一个后填写到退货系统；同时，消费者B直接使用消费者A的退货单号填入系统，但不寄送自己的手机。

极端情况体现在，许多商家的店铺与仓储是分开的，当仓库收到A寄来的手机并确认收货后，店铺工作人员收到系统通知两个退货流程都已收货（其实是同一个单号），若不进行额外确认，就会把钱都退回去了。

再来看不允许重复填写同一个物流单号的情况：很简单，AB两个消费者是好人，但希望节省快递费，就商量好把两个手机放在一个包裹里寄回。此时若规则只允许一个单号只能填写一次，这种做法就无法实现。

错误的设计方法是这样的：用户填写退货单号时，新增一个流程询问用户该单号是否只关联了一个订单，订单号是多少；或者在原有基础上新增一个联合退货的功能，让多个用户合伙拼单退货。

正确的设计方法是这样的：消费者端流程全部不变，允许重复填写物流单号，但必须在后台记录一条单号被使用的次数。对于被多次填写的单号，在商家端告知商家须额外注意，一定与仓库确认好包裹内物品再进行退款操作。

错误方法的错误原因很简单，我们不能为了一些极端情况就去修改主流程，也不能为了少数人的需求就影响所有正常用户。

案例二：互相冲突的 Toast 提醒

天猫客户端的商品详情页中，当点击“收藏”按钮会有一个 Toast 告诉用户“收藏成功”，同样当点击“加入购物车”后，也会有 Toast 告诉用户“加入成功”。这样看好像没什么问题，但若用户点完“收藏”后马上点击“加入购物车”，就会出现两个 Toast 相互冲突的情况——视觉上互相重叠，或后一个 Toast 无法出现。再极端一点，如果出现了一个脑残用户，为了测试反复快速点击两个按钮，甚至会导致代码错误。

为了追求设计和代码逻辑的严密，我和开发同学花费了不少时间讨论对于这种极端情况，要如何设置 Toast 的出现和冲突机制。甚至为了应对极端情况，还需要调整 Toast 出现消失的动画过程与逻辑。但最后，我只设置了2个 Toast 在极短时间内前后触发的交互，也就是新的 Toast 慢慢把旧的推上去，并各自做淡入淡出动画——毕竟两次短促的操作是比较可能会发生的。

什么？你问我那个脑残用户怎么办？不好意思，为了满足所有正常用户的诉求，脑残用户的体验就只好先放一放了……

案例三：神出鬼没的 Loading

我们在客户端上做了一个比较酷的动画，对一个模块长按后可以弹出一张卡片，并在卡片中阅读一些详情（有点像 3D Touch）。问题在于，弹出卡片中的信息是触发卡片后才向服务器请求数据并加载的，正常情况下没有问题，但是弱网条件下，数据加载可能会花费不少时间。为此，第一版我们为这个数据请求设计了一个 Loading 的小动画（好吧，你就当是转菊花）。

这样做的结果是，对于网络非常流畅的用户，他们唤起这张卡片时，会看到一个菊花飞快地闪过，然后才看到数据加载——再流畅的网络下，数据也需要加载时间，哪怕是1ms，都会让菊花快速闪烁。

当然，不要 Loading 也明显不合理。弱网条件下，必须避免用户盯着空白的卡片发呆而不知道系统正在干什么。

所以，合理的做法是，为 Loading 动画的出现时间设置一个延迟：在卡片弹出的200ms内（卡片不可能突然闪烁出现在用户面前，必须有一个进场过程），如果数据加载完毕，则不显示 Loading 动画，直接显示数据。如果卡片进场完毕（200ms后）数据还没回来，则开始显示 Loading 动画。

这样，我们保证了正常用户的正常体验，避免他们每一次操作都为弱网这一极端情况买单。同时，也保障了弱网用户的体验。

最后，再总结一下我们的设计原则：确保多数人体验的前提下，才去解决少数人的问题。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务