网师分层对平台的重要性不言而喻，诸如阿里这类的电商平台都有完善的商家分级体系，明确了不同等级的权益和运营策略。
2019 年底 CCtalk 平台的网师数量达到了一定规模，平台的基础能力建设也相对完善，因此网师分层的事宜被提上日程。此前我们评估网师的方式是按照流水，将网师分为普通网师、中部网师和大 V 网师 3 类，不同网师对产品功能需求及运营要求差别很大。这种粗略的划分方式可以帮助简单评估网师，但并没有产品化，而且只有单一的 GMV 维度，不够全面客观。有些客单价较低的网师也有大量的购课学生，他们对平台的价值也高。因而我们需要推出一套综合网师流水、招生数量、内容质量等多个维度的方法来进行分层运营。
面对以上问题，相应的解决方案是：
既然是涉及全平台网师的重大升级调整，当然要从全局的角度来进行价值分析。我在这个项目中探索了用于多角色价值分析的「三维价值分析法」，从整个关系链的角度来解析网师分层对网师和平台的价值。
Step1.列出相关利益者
分别包括：CCtalk平台、网师、学生。
△ 列出相关利益者
Step2.设定中心点并建立关系
分析连接这3种角色的关键点是什么。我们CCtalk作为一个在线教育平台，最核心的因素是内容，因而将中心点设定为「内容」。（注意，如果此时是做某个具体功能相关的项目，那么中心点可以是这个具体的功能，例如「作业」或「直播」）设定中心点后，建立不同角色和中心点之间的双向关系。
△ 设定中心点并建立关系
Step3.进行全局价值分析
在上一步的关系网的基础上，用圆弧连接相邻角色的价值走向关系，从全局的角度进行不同角色间的价值分析。
△ 进行全局价值分析
从上面的三维图中可以看出网师分层对于平台和网师的价值。
对网师来说，有助于：了解成长路径，获得更多产品运营支持，获取更多功能权益。
对平台来说，可以：筛选网师，激励网师自驱动，增加收入。另外，还有一些间接的价值，包括通过督促网师生产高质量的内容来提升平台的价值，通过督促网师积极招生来扩大用户规模。
△ 网师分层对于平台和网师的价值
刚接到需求时，我内心的 OS 是：大项目！概念大，范围广，都有点不知从哪里入手。
冷静下来分析，网师分层本质是一套针对商户端的激励体系。从下往上拆解：由底层商户活跃度来计算经验值，根据经验值划分商户等级，并赋予不同等级不同的权益，权益包括教学核心功能：直播时长，素材存储空间，课程人数等。再向上衍生到不同权益对应的使用场景，以及权益的扩展方式。
△ 分层拆解
从设计层面，分为信息展示和场景触达两部分。这么一看，其实又挺简单。
由于项目涉及的底层逻辑多，时间周期跨度大，因此拆分成 3个小版本来实现：商户权益改造，经验值等级底层 & 商户等级外显。前期的功能实现后，先预埋在版本中。等到经验等级上线时统一发布。其中经验值等级底层项目是纯技术，不涉及设计。
所以下面将从功能权益分层和等级经验值外显两部分来讲解具体的设计过程。
功能权益分层是权益的使用层面，包括多场景触达和引导购买增量包。设计时分为场景梳理→设计要点→细化直播场景→具体设计这 4 步来实施。
Step A.场景梳理
拆解权益的生命周期，可分为三个阶段：充足可用，即将不足，已用尽。而功能的使用场景——直播，也分为三个阶段：直播前，直播中，直播后。
Step B.设计要点
将权益生命周期和直播场景结合进行交叉分析，列出设计要点和具体的设计拆解。
△ 不同阶段的设计要点及拆解
Step C.细化直播场景
发起直播的入口很多，除了「立即直播」的主场景之外，还有由预告进入直播的 3 种场景，如果在每个入口都做功能禁用判断的话，不仅逻辑会很复杂，开发实现起来成本也比较大。
于是将直播前的流程细化，发现「直播检测」是进入直播间的必经环节，因此将功能禁用的判断节点缩减为 2 处：「立即直播」&「直播检测」。
△ 细化直播场景
Step D.具体设计
有了前期的分析后，具体设计环节就相对容易了。下面以点击「立即直播」时的功能余量判断为例。
点击「立即直播」按钮，在按钮原有的逻辑上加上新的判断逻辑，此处要注意写清楚他们之间的优先级关系。如果在不了解背景的情况下，很可能就直接写点击按钮进行可用直播时长的判断，那需求宣讲的时候开发就会问你，和原来按钮上的逻辑是什么关系呢，此时就会一阵紧张。
△ 立即直播时判断剩余可用直播时长
等级经验值属于展示层。对网师用户来说，最重要的是了解自己当前处于哪个等级以及相应的权益有哪些。对平台来说，除了明确每个等级及相应的权益，重要的是要引导网师升级，以激发他们的自驱力。
由此推导出相应的设计方法：锚定目标、降低门槛和利益点吸引。
△ 设计方法
在设计方法的指导下进行落地，分为网师后台首页的展示，以及等级详情页的设计两部分。
网师后台首页-个人信息模块的展示
由于等级和权益挂钩，涉及网师切身利益，因而在网师后台首页的个人信息模块，增加当前的经验值和相应等级的展示。同时，通过利益点吸引等方式，引导网师向下一个等级努力。
△ 个人信息模块展示
等级详情页的设计
点击等级进入详情页，除了 Lv0 是将所有权益无差别展示，其他等级都是优先展示新增部分，包括新获得的普通权益和附赠的高级功能。另外，用「箭头」和「NEW」的图标帮助用户区分是老权益的内容升级，还是新增的权益。
1. 前期缺乏深入调研
由于涉及网师的切身利益，因而此功能受到了网师们前所未有的关注。上线前一周，运营以邮件、通知等形式向网师预热，3 月 5 日会上线这么一个功能。于是还没上线就有网师来咨询在哪里可以查看。刚上线就收到了大量的用户反馈，网师反馈群里的消息简直是秒速级地在刷屏。
其中，网师对每月直播时长限制的反响最为强烈，部分网师表示平台应该鼓励多直播，不能接受对直播时长的限制。因为直接关系到上课这个核心功能，时长不够课都上不了，网师们的言辞非常激烈。所以我们又重新评估了平台的直播成本，经过深入讨论，全面放开了每月的直播可用时长限制。
带来的反思是，如果前期有通过问卷、访谈等方式进行深入的用户调研，了解他们对核心权益的态度，那么在进行权益设置时就能有更全面的考量。
2. 中高等级跨度太大，缺乏激励效果
游戏任务的上手难度曲线一般是先平缓，再慢慢陡峭，越往上难度越大。我们的等级体系其实也是这个逻辑。初级到中级还较为容易，但再往上要非常难，要经过长时间的积累，一看就无望，难有激励效果。
因而我们之后的优化方向是在相邻等级中间设定一些小目标，达到可以提前赠送下一等级的新权益，以此来提高激励效果。
文章来源：优设 作者：鱼游设计
手把手教你 「如何 7 步从 0 ～ 1 设计一款产品经理一稿过，设计风格明确，用户粘性高的软件！」
据不完全了解，身边大部分的 UI 同事都从 0 到 1 参与过一款或多款软件的设计，设计过程中不知道你是否有过这样的疑惑：
在解决这些困惑之后，我总结了一套自用的，适合从 0 ～ 1 进行软件设计或项目改版的方法 ，并在其他项目上进行了二次验证。
以实践项目 —— 有道少儿词典为例，上线一年期间，用户次日留存峰值 36% 以上，也非常幸运，被 App Store Today 推荐 4 次，App Store 编辑推荐 8 次，被 App Store 纳入 2019 本土优秀 App 盘点中，同时被预装到苹果线下直营店，作为样机体验软件之一。所以，这个方法亲测有效！
这篇文章，通过分析如何解决类似「产品经理不满意、设计关键词不对、设计风格无区别」这些问题，整理出 7 个帮你从 0 ～ 1 设计一款软件的步骤。
文章较长，大概需要花费 15 分钟，建议大家先看大纲，优先阅读符合自身情况的部分。
从 0 ～ 1 进行软件设计，免不了要多出几个设计稿，但做了 100 稿，产品经理对页面设计还是不满意的话，很有可能有 2 点原因：
一拿到需求就开始做，很容易忽略需求背后的目标，从 0 到 1 做一款新软件更是要了解业务目标和用户目标。
在提出解决办法前，我们需要先捋清楚以下 2 个问题：
为什么要了解目标？
公司开发软件是为了达到某些目标或是实现某个目的的，只有了解目标才能更好地为公司创造价值。
什么是业务需求、业务目标和用户目标？
平时产品经理跟我们说，要设计一个页面，设计 一个流程，这就是一个业务需求，而这个需求的背后，能够解释清楚这个需求是为了什么，要做到什么程度，这就是业务目标（通常包括用什么手段，给用户带来什么价值，达到什么目的）。而软件的目标用户，他们在一个具体的时间、地点、环境下做了什么操作，想达到什么程度，满足自己的什么要求，这可以理解为用户目标。
解决办法 ：多使用 「为什么+动词」 的问法，向产品经理了解业务目标、用户目标。
从 0 ～1 做软件需要了解的业务目标和用户目标，我们都可以从产品经理那里得到。
少儿词典的产品经理很早就给出了业务目标和用户目标。但，当我们需要更多细节的时候，可以使用「为什么+动词」这样的问法。例如：
- 「我们要做一个少儿查词软件，定位是一款拥有权威释义背书，在视、听、触方面打造良好体验，紧扣教材和教学大纲的适合少儿和家长使用的伴学词典。你来做吧！」「为什么做这个？」
- 「现在儿童教育KOL越来越多，很多家长都很关心k12教育问题。市面上的很多产品都不太适合孩子使用」
- 「为什么这样的定位可以满足用户需求呢？」「为什么是适合少儿和家长使用呢？」
- 「为什么……」
在少儿词典项目中
我们既了解产品的业务目标，也知道用户目标的情况下，方案还是被 pass 的话，可能是因为你给出的方案和产品经理想要的不是同一个东西。为什么业务目标在这里不起作用了呢？怎么才能弄清楚产品经理想要的是什么？我们可以用产品关键词来回答这个问题。
为什么业务目标在这里不起作用了呢？
我们常见的业务目标的内容是很长的，用户目标的内容也是很长的，在这种所有已知内容都很长的情况下，如果没有准确理解内容，没有对重点内容达成一致，就很容易产生偏差。例如我要向你描述一位美女，她的头发很柔顺，脸蛋很漂亮，身材比例很好，衣品很好等…… 90% 的可能，我们脑海中想的不是同一个美女。但是，如果我跟你说，这是一个跟芭比娃娃很像的美女的时候，我们脑海中的形象会接近很多。
怎么才能弄清楚产品经理想要的是什么？
就像设计师在进行页面设计时，需要设计关键词一样，产品经理在描述自己的业务目标的时候，也需要能概括业务目标重点，突出卖点的产品关键词，这个产品关键词能帮助设计师弄清楚产品经理想要的东西。
部分产品经理为了方便大家达成共识，会早早亮出产品关键词，如果当你们的产品经理没有办法提供产品关键词的时候，我们要学会在讨论中找到。
解决办法 ：从业务目标开始跟产品经理讨论项目信息，直到获得双方达成一致的产品关键词
从业务目标和用户目标开始跟产品经理讨论项目信息，在讨论的过程中，我们可以留意产品多次提到的几个形容词，写下来，然后跟产品反复核对确认，最后双方确认且保留下来的这 3～4 个形容词，就是这个项目的产品关键词。
少儿词典的产品关键词是：权威内容，寓教于乐，适合孩子使用。这些关键词被我贴在屏幕的显眼处，就怕自己哪天忘记了。
寻找设计关键词，是设计师非常熟悉的步骤，但常常也在这里翻车，甚至还会出现，不管做什么软件，反反复复就那几个关键词的情况，我们可以把原因归结为：
为什么不了解用户会导致关键词找不对？
我们的用户在选择软件、使用软件的时候，了解到的是软件的设计、体验和功能。用户下载软件时，他们已有的认知会影响他们对软件的幻想。就像给小男孩的衣服是天蓝色，小女孩的衣服是嫩粉色一样，如果用户想要一件天蓝色的衣服，而我们给他展示的是深蓝色或是嫩粉色的衣服，这都会让用户产生疑惑甚至离开。因此，如果对用户了解不准确，会导致我们输出错误的设计关键词。
而了解目标用户是又一件复杂的事情。
首先，我们的目标用户可能是一类人，如有道词典，下载软件用户和使用用户大概率是同一个人。目标用户也有可能是两类人或是更多，如少儿词典，下载用户是家长，使用用户是家长和孩子，企业协作软件也类似。
从接触软件，下载软件，使用软件，到判断是否继续使用软件，不同的阶段的目标用户是不一样的，目标用户在不同阶段的需求也是不一样的。
其次，开发软件的周期是很长的，在开发软件的过程中，我们的用户在不断地接收新的知识和观点，用户的喜好，认知可能会发生很大的变化。
因此，为了更好地了解用户，我们需要找到用户跟软件之间的交互关系，以及影响用户喜好的因素。一共有 2 个步骤：
步骤 1. 分析不同用户跟软件之间的接触点，从未来趋势和用户当前认知角度收集用户资料
在这一步骤中，我们加入了 2 个概念，接触点和未来趋势。
什么是接触点？
接触点指的是用户与产品发生交互的关键点，用来捋清楚我们刚刚提到 「用户跟软件之间的交互关系」。以少儿词典为例，家长和软件之间的接触点，可以罗列为：家长听说少儿词典 – 到应用中心下载软件 – 打开软件 – 使用软件……可见要想打造一款用户好评度高的好产品，仅仅优化软件的体验是不够的。
为什么要从未来趋势和用户当前认知角度去收集用户资料？
刚刚有提到新软件的周期是较长的，前期定好的风格、关键词等，到了开发上线后却不适用了，既浪费人力，也浪费资源，因此要考虑未来趋势对用户的影响。同时，用户在选择软件的时候，已有的喜好/预期/经验等用户认知会影响用户对软件的判断。就像大家想到夏天的冷饮时，脑海中会浮现冰块、西瓜等元素，因此雪碧、西瓜等符合用户对夏天认知的食品在天气炎热时会热销，但是受到大部分买家越来越注重卡路里这一未来趋势的影响，低卡的西瓜冷饮也可能在未来一段时间大卖。
接触点和未来趋势、用户认知之间有什么关系？
了解用户接触点之后，我们就可以猜测用户在这一接触点的需求和心理，加入未来趋势和用户认知，能让我们做出来的东西更符合用户预期。
寻找接触点。我们了解到，少儿词典的目标用户群体是 1～6 年级的学生和他们的家长，即 6～12 岁孩子，和 30～44 岁家长。然后，我们粗略地将用户的接触点划分为，筛选软件 – 下载软件 – 使用软件 – 判断是否再次使用软件，孩子、家长跟接触点之间的关系就可以展示为：
孩子是软件查询、练习、核心功能体验者，家长是内容审核者、软件筛选者、伴学时软件使用者。
找到接触点之后，我们还需要把影响用户认知的内容具象化。
例如，我们想了解夏天做什么口味的饮品更好，我们可以从夏日饮品口味销量排行榜，夏日新品类型，夏日广告等角度来获得更清晰的用户认知。应用到少儿词典中就是，家长在筛选软件时，老师的要求，未来孩子考试的内容、日常辅导内容、大 V 推荐的内容等会影响家长对下载软件的判断。每个接触点都可以使用这样的方式，来联想更多影响用户认知的内容。然后我们将得到类似下面的表格：
根据表格，我收集了 近 10 页的用户信息
步骤 2. 提取收集到的信息，并放入四象限中，总结出2～4个视觉关键词、体验关键词
杂乱无序的信息只有经过归纳之后才能被大家使用。
怎么归纳总结杂乱的信息呢？
UI 设计师都清楚，在进行界面设计时，大标题、缩进、分层等排版方式能让我们的页面看起来更清晰易读。处理杂乱的信息也同理，要做的是找到信息的重点，然后把信息归类，最后再用一句对内容进行总结，方便大家理解。应用到我们提取关键词的环节中就是，挑选重要信息、放入四象限中、总结出能归纳这些信息的关键词。
挑选重要信息。以家长筛选软件为例，当我们将热门大 V 推荐的教学方法、内容，进行整理的时候，会发现美学、乐感、编程、外文图书、儿童心理教育、英文教学方法（自然拼读）等内容出现的频率很高，在一堆内容中挑选跟少儿词典相关的内容，如美学、外文图书、儿童心理教育等。
放入四象限中。在这一方法中，我们将四象限划分为设计和用户认知 2 个方向，其中设计划分为视觉风格和体验风格，用户认知划分为当前认知和未来趋势 。以刚刚挑选的儿童美学教育为例，这是一个属于未来家长会越来越关注的少儿视觉发展方向，所以我们放在视觉风格、未来趋势这一象限中。其他内容也类似，不断地提取出现频率高、用户热点高的内容，并根据内容类型放入四象限中
总结出能归纳这些信息的关键词。以视觉和未来趋势象限为例，我们收集到大 V 的美学教育，未来的课本发展趋势，小学建筑风格发展趋势，他们都有一个特点，颜色柔和无攻击，色彩丰富，因此，我们总结出一个视觉关键词是柔和多彩。
其他内容也采用相同的方法进行总结，少儿词典的视觉关键词是柔和多彩，轻质感，亲和陪伴，体验关键词是，探索多变，感官刺激和重复熟悉。
视觉关键词出来了，产品的业务目标也出来了，从关键词到页面样式的逻辑也很严谨，但出来的风格却会觉得跟关键词不太搭，或是跟竞品差异不大，在多款 App 实践后，我们发现可能是这样的原因：
引用一句说烂了的名言 「一千个人眼中就有一千个哈姆雷特」。大家在对关键词的理解是有差异的，以「年轻」为例子，一款针对活力的年轻人的衣服和一款针对潮流的年轻人的衣服，设计风格上可能是隔好几条街的。因此，仅仅得到几个视觉关键词和体验关键词还不足以让我们找准方向，我们还需要将关键词组合和具体化。一共有 2 个步骤：
步骤 1. 分别组合产品关键词和视觉关键词，产品关键词和体验关键词，找到同时满足 2 组关键词的规则
为什么将关键词结合能让关键词的作用发挥出来呢？
我们的目的是要做一款满足产品需求，符合用户认知的软件。
从问题 1 和问题 2 中，我们得到了符合产品需求的产品关键词，和符合用户认知的视觉关键词和体验关键词，想要同时满足产品需求和用户认知，我们需要找到他们的重合点。如下图所示，将产品关键词和视觉关键词、体验关键词分别结合，这样的出来的规则就能最大限度地符合我们的要求，既满足产品需求，又符合用户认知。
具体怎么做呢？下面将分别从视觉和体验角度举例子。
视觉角度，以权威内容和柔和多彩结合为例：
「权威内容」 要求我们输出的内容是符合教材，符合老师标准的，内容是准确无误的、来源是可靠的；「柔和多彩」 要求我们在进行页面设计的时候减少大面积颜色的使用，色彩柔和，且颜色多样。
将两者结合，我们得到的规则是：
根据这些内容，我们将得到下面的 4 个颜色和圆形叠加的形式。（ps：通过这样的形式确定的是规则，如：以橙色为主结合另外 3 个颜色，圆形，使用深浅色搭配。具体颜色和叠加形式需要在具体页面中进行调整）
体验角度，以权威内容和探索多变为例：
体验上，「权威内容」要求我们的操作形式是跟老师的教学相似，学习方法需要参考成熟且有效的方法；「探索多变」要求我们在交互形式上可以采用多种形式，给孩子探索未知的机会，交互形式要符合儿童操作习惯，如涂抹、翻转、拖拉等
将两者结合，我们得到的规则是：
其他几个关键词的结合也是使用这样的形式，这里就不一一展开。下图是少儿词典的视觉关键词和产品关键词结合后的样式。
步骤 2. 选择复杂的核心页面，把具象化的体验规则、视觉规则融进页面中，确定设计风格
规则梳理出来后，我们就要挑选一些重要页面进行风格尝试，以结构复杂的中文查词单字结果页为例：
分析小学一年级到六年级的考试内容，我们了解到部首、笔顺笔画、跟写、发音等汉字的基础信息是低年级用户（小学三年级及以下）会使用到，他们要求信息完整且准确；像词组、造句这些信息则是针对高年级学生，要求快速准确定位到具体的内容板块。
分析完内容结构后，我们就需要根据内容布局，加入表格中总结的体验规则：
最后，梳理好页面的体验形式之后，我们开始给页面添加视觉规则：
对比产品原型和市面上的一些竞品，我们可以发现，查词软件在内容布局上相差无几。如果没有找到符合我们产品业务目标，同时符合用户认知的规则，我们将被淹没在一群查词软件中。
步骤 3. 建立一个画板，把用到的颜色、规则、字体、间距等内容罗列出来，并给他们限定使用范围，方便自己查阅和团队合作
最后一步，相信很多设计师都会在设计过程中建立一套方便好用的设计规范库，这里就不展开来说了。
最后，再对上文的所有内容进行概括。从 0 到 1 进行软件设计我们需要用到下面这 7 步:
完成这 7 步，将可以让你从 0 ～ 1 设计一款产品经理一稿过，设计风格明确，用户粘性高的软件。
随着大数据产业的蓬勃发展，很多企业都开始应用数据可视化。所以数据可视化设计，绝对是热门的设计之一。很多 UI 设计师突然会接到公司数据可视化设计的需求，如果不了解数据可视化设计，肯定是一头雾水，不知从何入手。本文结合最近设计案例，分享大屏可视化设计过程中遇到的一些问题以及设计思路，供大家一起交流与学习。
△ 最终动态效果图
首先放的是项目改版前的页面：
1. 需求介绍
某某应用云，分为五大云平台模块：云端综合调度、数据查询通道、数据应用处理、数据存储管理、管理运行维护。每个大模块下⾯有若干个子系统。
可视化⼤屏首页需要展示的内容包括：
2. 需求分析
分析大屏可视化的一些共性：
结合大屏的一些共性特点针对看到的线上旧版本设计，分析存在的问题。
3. 布局
整合数据，分析出主要数据、次要数据、总量数据、细分数据、各数据的维度等等。首先优化页面布局，可以先在纸上画一画，然后脑子里有大概思路以后再用电脑绘制，如下图：
采用栅格化对称布局，让整体视觉左右平衡。
4. 风格
一提到数据可视化大家往往能想到科技、数据、蓝色等一些普遍关键词。
了解到客户是想做一个科技感强、炫酷的视觉效果。可以在网上找一些效果图或是自己曾经做过的案例供客户选择，确定一个大致的风格，然后结合具体的业务场景进行设计。
5. 颜色
颜色上结合产品使用场景，以及整个产品调性还是以蓝色为主，背景选用深色调，让视觉更好聚焦，内容部分采用比较透亮的蓝色系，保证内容与背景有一定的对比关系，便于业务信息传达。
6. 主体地图
地图为大屏的主要展示内容，首先分析展示的目的是为了看清各个城市间的不同分布情况，和城市数据的汇集效果。
如图：
改版前：地图过于单薄，没有立体感，太平缺乏层次，颜色黄色不符合产品调性。
改版后：主色调改为科技蓝，在原有地图上增加外发光和多层阴影叠加，增加地图的立体感，地图上增加科技线条上升的效果代表每个城市数据变化的提升，地图背景采用比较弱化的转动线条圆形，衬托地图主体，使得画面更加丰富。
7. 地图效果的实现方法
首先用 ps 拉框助手新建一个山东的地图（拉框助手的使用获取方法可以参照上篇文章）。
完成后会得到一个叫 map 文件夹的地图分层文件，如图所示。这里需要对每个城市的颜色进行调整，为了区分每个城市之间的数据不同关系。
调整完块之间的颜色后，就需要给地图整体增加立体效果。
首先，是整体给地图加了一个描边和外发光。描边是为了强化地图边缘，外发光是为了地图与背景有一个区分。
其次为了增加地图立体感，需要给地图增加多层阴影叠加的效果。复制现有形状层，拼合成一个山东省的地图，如下图：
最后，把拼合好的图层移动到 map 文件夹下面，阴影可以添加多层，这里针对每一层进行不同颜色大小的调整，就是下面的这种效果了，地图的体积厚度感也就出来了。这里只是提供一个大概的思路，大家可以多去尝试。
整体地图效果调整完成后，就是给地图增加些纹理，和上升线条这些细节上的效果了。纹理可以用图案叠加，或者找一张纹理图剪切蒙版实现，最后再添加上升线条的效果，地图的效果就完成了。
最后加上线条上升的动态效果：
8. 数据图表拆分
在选定数据图表之前，首先要确定图表之间的关系，可以从以下四个维度进行思考分析：
可以参照下面这个图：
△ 图片来自于网络，侵删
当确定好分析维度后，事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。
传统的图表比如 echarts 图表在视觉上展示可能不是很美观好看，可根据选择的图表在其基础之上进行美化设计，总之选定图表最重要的两个点就是：易理解、可实现。
易理解：就是要考虑最终用户，可视化结果应该是一看就懂，不需要思考和过度理解，因而选定图表时要理性，避免为了视觉上的效果而选择一些对用户不太友好的图形及元素。
可实现：主要是跟开发前期沟通好实现方式，一般都采用开源组件库的居多，比如 echarts 组件库，我们设计的图形图表，要开发能够实现。实际工作中，一些可视化效果开发用代码写很容易实现，效果也不错，但这些效果设计师用 Ps/Ai/Ae 这些工具模拟时会发现比较困难。同样的，某些效果设计师用设计工具可以轻易实现，但开发要用代码落地却非常困难，所以大屏设计中跟开发常沟通非常重要，我们需要明确哪些地方设计师可以尽情发挥，哪些地方需要谨慎设计。一个项目总有周期与预算限制，不会无限期的修改迭代，所以设计师在这里需要抓住重点，有取舍，不钻牛角尖、死磕不放。
案例中在图表选择上，强化科技感元素，条形图打破传统条形图的展示形式，采用电池晶格的展示形式，在保持图表功能的同时更加凸显科技感。
从页面的整体看，已经有两处用到了条形图、柱状图，如果这里还是条形图，那么页面看起来会很单调，图表也没有表现出多样性，所以现在设计要体现图表的多样性也能够有排名的直观呈现。以下图表采用科技圆盘的形式，运用科技线条的上升状态代表排名的先后顺序，所有图表都采用数据降序来展示排名更加直观。
改版前的图标样式比较单一，改版后针对每组数据不同的对比形式，采用比较贴合的图表进行展示，篇幅原因就不一一做展示了。
附上最终视觉效果图：
大屏设计需要注意的点：
以上是我对数据可视化大屏的案例总结，希望能帮助到你。除此之外还有很多地方没有涉及到，包括具体设计的操作方式、选取图形元素的具体方法，以及在各种大屏中所需要的相对应的组件等，在庞大的可视化大屏设计系统中，还有很多值得学习参考和优化的知识，欢迎沟通交流，大家一起努力。
文章来源：优设
有句话叫：「设计无小事」，很多看似不起眼的东西却起着至关重要的作用，比如这期要说的线条，很多人对于线条的理解有局限性，比如：线条的形态可以是曲线、直线、折线、粗线、细线、实线、虚线等等。其实已经牵扯到了点、线、面的知识，这也是很多科班生在学校必学的知识点，但是这期所说的线与点线面中的线还是有所不同的，点线面中的线可以是线条、可以是文字或者是看不到的视线，而是今天着重说的是设计中很直观的线条。下面我们还是通过实际的案例逐一分析：
设计类的知识很多都和日常生活息息相关，尝试着把设计类的知识点与日常生活想结合，对于记忆和理解来说会更加得心应手，例如：
图中的闪电可以视作为设计中的线条，给人的视觉感受是通过闪电把天与地连接为一个整体，而闪电在图中的作用就是串联整体，那么回到这里的正题：线条有引导视觉的作用该怎么理解呢？再举一个现实生活中的案例：
我们选择从北京到拉萨开车去，出发之前可能需要在地图上看下路线，知道途径哪些省市，规划好行程路线，这里绿色的虚线就起到了引导视觉的作用。回归设计中道理是一样的，线条可以引导用户把原本杂乱无章的视觉点规整为有次序的视觉元素，例如：
当看到左侧这张海报时我们视觉次序会出现很多变化，比如：1>A>3>B>4>C>2 或者 A>2>C>4>B>3>1 等等 N 多种顺序，这时给人的感觉就是杂乱无章的，毫无视觉次序而言；而看右侧的海报给人的感觉却是条例清晰的，相比而言只是多了两条线，但是却在整个海报中起到了引导视觉的作用，它可以给与用户阅读海报时视觉辅助的作用，让用户以右>左>右的视觉次序欣赏、阅读，看似很不起眼，其作用却至关重要。
前面也说了，线的形态可以有很多种，例如：
这里是以真实的可口可乐吸管作为设计中的线条，同样起到了视觉引导的作用，但是我们不难发现，这里的线条不仅仅只有一个作用，也牵扯到另一个作用：线条有串联整体的作用。
在排版时我们有分组原则，即把互想关联的元素彼此靠近，无关联的相互疏远。在页面中我们会把同一色块上的元素视作为一个整体；下面我们说下线条所带来的串联整体的作用是如何体现的，比如：
△ 图一
△ 图二
图一因为大面积的留白能使得用户很容易分辨出自行车与文案是一个整体，但是相较于图二而言，其整体性略显不足，而且给人的感觉太过单薄、重心不稳；图二的整体性更强，这里的矩形线条就起到了串联主题的作用，类似的还有：
不难看出，这些案例中的线条都有串联主题的作用，线条使得主题元素整体感更强、画面板式更加严谨；对于整体的视觉传达也起到了串联、引导的作用；在文字排版中，也有类似的线条，比如：
同样是通过线条把文案更加整体化，也起到了串联的作用。
突出主题的方式有很多种，像我们之前所说到的留白、对比。接下来继续说下另一个可以突出主题的方式—线条，下面看个案例：
通过对比观察我们发现，右侧海报整体感更强，主题文案信息更加清晰，主体更明确。其中的原理可以理解为：因为线条的存在，使得主题信息有了一定的范围，在视觉上等于是在海报中划定了视觉焦点，从而起到了突出主题的作用。当然还有其他的表现形式，比如：
很好的诠释了线条的作用——突出标题序号。在进行创作时，作品的每个元素都要做到有理有据，否则只是一味的抄袭，到再创作时脑袋里还是一片空白，只有明白了其中的设计原理，才能做到活学活用。再看几个案例：
突出主题也许一个线条就可以表现的淋漓尽致，因设计目的的不同，线条所发挥的作用也不尽相同。下面继续分析：
前面说了线条有串联整体的作用，而这里又说可以分割整体，是否存在矛盾呢？下面举个简单的例子：
在小文案的区域中间我加了两个线条，看似很小的改变，其目的是把文案很准确、严谨地分割为三个小整体，希望能给用户带来识别性更强的阅读性，再举个例子：
这里的线条把月份和日期分割、英文和中文分割开，使得用户对于信息的捕捉能力以及可辨识性都提升了很多，而线条的作用就起到了分割的作用。
线条也能起到修饰、衬托的作用，很多小伙伴会忽视这一点，其实线条也可以成为海报中衬托画面、修饰主题的元素，例如：
海报中的线条起到了衬托、修饰主题的作用，假如把这些线条都删除，画面整体会显得相对单薄。
更多设计中线条的应用：
线条的作用我们分为四个逐一分析，其实它们之间也存在着相辅相成的作用，不能以一概全，线条所起到的作用可以是一种，也可以是多种，比如：我们前面「可口可乐」的案例，即有串联整体的作用，又有引导视觉的作用。只要我们在使用的时候能明确目的，而不是机械式的抄袭，那么最终一定会得心应手。
文章来源：优设 作者：美工美邦
未来荧黑是一个基于思源黑体、Fira Sans和Raleway的开源字体项目，支持简体中文、繁体中文与日文。
思源黑体的7种字重被扩展为9种字重，并增加了5种字体宽度，全家族共包含44款字体。
相比于思源黑体，未来荧黑的造型更加简明现代，版面效果清新轻快。未来荧黑的中宫与字面更加收敛，重心在字重之间经过了重新配置；笔画细节上处理得更加干练，简洁而平直化。
开发者：Celestial Phineas
字体文件以SIL Open Font License 1.1发布，构建字体开发的代码以MIT License发布。
发布地址：github.com/welai/glow-sans
网盘地址：https://pan.baidu.com/s/1f2UuFO8ZxWa8v5XXYUEmig 提取碼 2e8w
备份下载链接：https://pan.baidu.com/s/1E1woRsZX91bCrq5FT1SAzg 提取码: 92t2
文章来源：优设 作者：GrayDesign
微信在3.23号上线了传闻已久的 「暗黑版」，用来适配 iOS 的深色模式，相信不少同学已经安装并体验上了，如果还没安装的可以看看下面图例。
微信每有一次大动作都会引发全网性的讨论，而针对设计上的调整，往往只会迎来一片骂声。比如我们看看知乎中讨论的内容，感觉民愤都快压抑不住了。
但我们先别急着参与网上的声讨，现在站在设计师的角度，来评价一下迟到的微信深色模式。
很多人会把深色模式和夜间模式搞混，这里必须强调这是两种不同的模式，所以我们要对还没搞清楚状况的同学先做一个扫盲（最近扫盲好像搞的比较多…）。
先说夜间模式，是一个专门针对夜晚环境适配的设计版本。腾讯的 ISUX 团队之前做过调研，有 71.1% 的用户习惯在夜间不开灯看手机。
如果在深夜漆黑的房间中看手机屏幕，对我们的健康有非常大的损害，不仅表现在对视力的伤害上面，视网膜和神经元容易受损，同时主流的研究项目还表明会这会抑制我们褪黑素的分泌造成失眠。
所以，夜间模式，是一个用来降低屏幕对用户伤害，提升夜间使用体验的特殊模式。
通常，夜间模式会采取 降低尼特值、减少对比度、降低色彩明度、增加深色遮罩的方法，比如之前 QQ 官方的夜间模式示意图，大家感受一下，是不是有内味儿了？
这里提一下尼特这个概念，尼特是用来说明亮度的术语，1nit=1坎德拉／平方米。是现在各大手机发布会中介绍屏幕的时候都要强调的参数之一，因为尼特值越高，证明在户外大白天的环境中屏幕内容可以越清晰，而夜间模式做的就是用来降低显示亮度尼特值的。
然后再解释一下苹果的深色模式，苹果的 DarkMode，并不是一个专门面向深夜环境的模式。官方对此版本的解释，详见我们翻译的 iOS 官方文档中 112 页。
这是一个面向全天候的视觉风格，同时通过深色背景的对比，来加凸显图片、文字内容。包括上面那种官方的配图，大家应该就能感觉到主体元素比白色模式下更凸出，更激烈。
所以了解了这两个模式的区别，我们才能好好展开对微信深色模式的讨论。
接下来，我们先来总结一遍微信的深色模式。首先是分析一遍它使用的背景色。
背景色纯灰色，有3个等级的灰度。熟悉我的都了解，看色彩的奥秘，靠16进制代码和 RGB 那是分析不出个什么所以然的。如果我们把它们转化成 HSB 一看，规律性就来了。
背景色从深到浅色的灰度值 B 值分为 10、14、18，是不是朗朗上口。应用的层级虽然和官方规范一样使用了三级，但是设置和官方的不同。
然后再看看其中使用的其它配色，其中主色保持了不变，其它应用到图标色彩，都进行了明度的调整，比如下图案例。
再看看文字的用色，也是纯灰色，标题使用 B:85，正文使用 B:65，注释使用 B:35（主要用色）。
而官方使用的文字色彩中，却并不是纯灰色，除了第一级的白色以外，其它灰阶的文字是由带有蓝色色相的色彩通过降低透明度来呈现的。
对中性色增加蓝色色值是一个常规操作，可以让这种灰色看起来有一点活力，不会像纯灰色那么单调，不过这次微信明显在文字的应用上更保守，一点色相也没有给。
这次微信被大面积吐槽的，就是颜色的应用上和官方的规范不一致，作为从业人员直接开喷是相当不专业的（最起码要先走个形式），这就是我要分析的重点了。
要说微信的 UED 团队，专业性肯定是国内最顶尖的，你们网上所有看过有关交互的方法论、可用性测试的分享， 他们肯定都有做过，而且执行得更专业。
直接用官方规范的黑底白字模式，微信团队不可能没有出过这样的方案。但很明显，这个方案最后被毙了，上了我们看见的这个版本，虽然不知道以后会不会变。
再看看下面官方发的一条微博。
其中已经提及了，是和苹果 「共同探索」 出来的方案，这是非常耐人寻味的。也就是说，这个不用官方的模式是苹果团队也通过的。
那么为什么要做的不一样呢？没有内幕消息，就根据自己的经验来判断一下。
我自己认为的一个非常重要的原因，就是对于 「夜间模式「 的兼容。前面不是讲暗黑模式和夜间模式不一样嘛？为什么微信的暗黑模式又去兼容夜间模式了。
这里面有几个小彩蛋，首先就是官方对深色模式的态度，在我看来越来越暧昧了。比如在显示与亮度设置页面里，有一个自动设置外观 —— 日出前保持深色外观的功能。这样，就等于默认将深色模式和夜间模式挂钩。
还有，如果过去我们没有整理 iOS13 的翻译，就不会发现，上面我们展示的那句专注于内容的解释，现在在官网已经被删掉了（你品，你细品）。
再说关于用户认知的问题上面，在 UI 群体中，能了解暗黑模式和夜间模式是不一样的可能就只占 10 分之一，那么对于普通用户来说，这个情况就更不乐观，能有 1% 的用户了解这个概念就不错了。所以，绝大多数用户会直接认为暗黑模式就是夜间模式。
如果暗黑模式直接当成夜间模式用，在深夜的环境里，观感会特别差，因为 —— 明暗对比度过高。
如果在黑底中直接用白字，那么可以说屏幕的文字和背景的对比度就是 100（HSB中 B 的差值），在一个漆黑的环境中会非常应验 「让内容脱颖而出」 的效果，刺激性会非常强烈，文字将变得非常尖锐，比如 QQ 暗黑模式，大家可以在被窝里打开下面这张图感受一下。
新的深色模式版本中，文字和背景的对比度基本控制在 50 左右，降低了一半。
并且，中英文字形在正负形上的差异（简单理解就是中文笔划更复杂），这个感觉会更强烈。比如我们用一个公众号页面举例，使用纯黑底白字，采用相同字号的中英文，看看显示的效果。
还有，纯黑背景色和白色的对比度，会根据屏幕的类型和参数不同而有不一样的感受，比如苹果从 X 后旗舰机型使用 OLED 屏幕，纯黑色区域将不会发光，进一步扩大对比度，使得文字变得更尖锐，更让人难以接受。
如果不是使用 OLED 屏幕的同学光看一个案例可能很难受，所以我们用纯黑的案例来对比一下现在的状态。
是不是发现明显在夜间的情况下黑白模式并不如另一个模式看起来舒适？而这种不舒适的差别并不会随着屏幕亮度降低而变化。
所以色彩并没有符合官方的原因，我的判断就在大环境中无法割裂夜间和深色模式的区别，同时也要让深色模式更适应夜间环境，做出了调整。而又因为它不是真正的夜间模式，所以对比度也不能像 QQ 之前的夜间版本一样将整体环境完全压暗。
你看，真是一个让人矛盾的过程……
最后再简单讨论一个问题，为什么深色模式来得这么晚。很多用户一直嘲讽，不就是换一套皮肤的事嘛，为什么就是不上线。
外行可以看热闹，但是如果是从业人员就应该知道，微信这种体量的应用，上线深色模式绝对不是一个非常容易的事情。
适配黑暗模式首先需要使用苹果新的 iOS 13 SDK（开发者工具）进行编译，等于应用中有大量的代码需要调整，而这种升级调整的结果还会导致沉重的测试压力。有经历过 Darkmode 开发的团队应该都知道这绝对不是改改颜色就能上线的皮肤。
再看到知乎另一个回答中提到的：
另一方面点大家随便听听。使用 iOS 13 SDK 之后，Apple 要求 VoIP 推送必须使用 CallKit，否则应用程序会被终止。而由于众所周知的原因,CallKit 在中国大陆是无法使用的,这样的改动会降低微信语音电话的体验。
原文地址：https://www.zhihu.com/question/378027349/answer/1069072154
再者，抛去大量用户体验调研相关的工作，微信整个生态对于暗黑模式的不友好可以说是无解的。比如说公众号，有大量公众号内部的标题、分割线、引用语句是用图片做上去的，而图片还用的是白底（透明底黑字的也有），于是现在就产生了灾难性的阅读体验。
比如我的公众号：超人的电话亭，其中文章展示的截图。
而且因为公众号发出去是不能修改的，只能删除，那么这部分存量文章将无法更改，体验也无法扭转。而且公众号还支持文字色彩等自定义，那么你在白色背景下添加的颜色，可不会直接适配深色模式，尤其是官方也不可能轻易直接给你们 「适配」 掉。
而在夜间模式，正常访问的文章网页，也和公众号会很像，但是打开以后是白色背景的话，统一的体验在哪里？
再者还有小程序，小程序虽然也可以通过微信官方提供小程序的深色模式适配文档，对应的 SDK，但是小程序不是 APP，其中有大量小程序开发后是缺少维护的。
因为线下门店通过外包方做好一个小程序上线以后，没特殊的原因不会直接去更新它，那么这部分小程序的升级适配无从谈起，会出现打开小程序一个白一个黑的窘境。
最后，再讲一个微信里最高频使用的功能 —— 发表情。深色模式直接造成大量自定义表情报废，无法正常显示的问题，比如看看下面我自己发的表情。
前面提到的，都是不能解决的问题，这就是做深色模式的挑战，因为用户 UGC 内容是不可控的，官方不可能通过算法直接帮用户强行 「适配」。
而这些，就是做深色版的难点。
以上总结内容多数为主观分析，纯粹站在 UI 设计师角度进行专业解读，不带入个人立场。而一定要我自己评价的话，那就是 ：赶紧把这模式给我移除！！
再顺便提一点小感想，一个有数亿用户的产品，每一个小调整分量都不轻，都要慎之又慎。同时，你做的每一个决策，都意味着要站在其中一部分用户的对立面，因为你满足不了所有用户的需求。所以，这就是设计师的压力与挑战。
文章来源：优设 作者：超人的电话亭
各行各业的设计师每天都在和颜色打交道，UI 设计师设计用户界面也不例外。
用户界面是一个设计师用理性思维解决用户感性需求的窗口。如果对色彩的运用不加以克制，界面可能会显得花哨而没有主次；但过于拘谨又容易使界面保守，难以激发用户情绪。所以如何让色彩的搭配平衡，是 UI 设计师需要修炼的一课。
但色彩毕竟是感性的元素，我们总是仰慕一些对色彩天赋异禀的设计师，总能不拘绳墨给作品带来惊艳的视觉效果。我们难以偷习他们的天赋，但或许你有没有想过，干脆我们另辟蹊径，用理性推导来制定一套色彩系统？
那么今天我用我的项目示例，教给大家一个科学推导颜色搭配的方法。也许能够带你发现一些色彩背后的数学秘密。
在此之前我们需要先熟悉一下颜色模式。
在 PS 菜单栏的「图像-模式」下可以看到非常多的颜色模式：RGB、CMYK、Lab 等等。那是因为 PS 是一个需要满足设计行业水平领域的软件，要解决各类设计师需求，所以涵盖的颜色模式非常丰富。
但 UI 大多数时候需要关注的是线上场景，成果的展示渠道一般是自发光设备。所以弄明白垂直领域软件 Sketch 中的几种颜色模式，其实就足够了，分别是 RGB、HSB 和 HSL。
RGB 是指通过 R（Red：红）、G（Green：绿）、B（Blue：蓝）三个颜色通道的变化以及它们相互之间的叠加得到各式各样的颜色。三个通道分别有「0-255」这 256 个值，这些值分别代表着各通道的亮度层级。
虽然 RGB 在机器表现上很友好，但并不够人性化。因为人们判断颜色，往往是通过「这是什么颜色？是不是太鲜艳了？亮了还是暗了？」这样的感官维度，而很难通过红绿蓝的亮度层级去判断。所以人们后来基于 RGB 衍生出了 HSB 模式和 HSL 模式。
HSB 是指通过 H（Hue：色相）、S（Saturation：饱和度）、B（Brightness：明度）来控制颜色。Hue（色相）的取值范围是色环上 0-360° 的圆心角度；而 Saturation（饱和度）与 Brightness（明度）是在 0-100% 的量占比。
HSL 中的 H、S 与 HSB 相同，都是指 Hue（色相）、Saturation（饱和度）。但 L 所指的则是 Lightness（亮度）。
HSL 和 HSB 稍微有一些不同，我们在两个颜色模式下输入相同的数值，会发现颜色实际是不一样的。虽然 H、S 指代的都是色相和饱和度，但 L（Lightness：亮度）与 B（Brightness：明度）分别被认为是「颜色中白色的量」和「颜色中光线的量」。
Lightness 和 Brightness 的概念要深度研究下去的话其实是计算机算法领域的问题了，感兴趣的朋友可以查阅更多资料，但我个人认为对于 UI 来说没有太大必要。
关于 HSB、HSL 的使用场景，记住以下两点即可：
支付宝 Alipay Design 团队提出过一个配色原则：
以同色系配色为主导，多色搭配为辅。
同色系为统一的色相，使用中可以加深品牌色的感知，可以让界面更有层次，同时可以让界面保持色彩上的一致性；由于业务的多样化，我们需要多色搭配为辅；多色的辅助颜色，也可称之为功能色，可设定不同的任务属性和情感表达；再搭配中性色黑白灰，赋予更多的变化和层次。两种配色通过主次、使用比例，可灵活运用在业务的各个场景中，具有非常好的延展性。
那么知道了这个原则，我们又该如何科学、合理地得出产品的色彩系统呢？接下来我就用我的一个项目示例给大家做讲解。
步骤一：找到符合产品调性的品牌色
我负责的该项目主要业务与高校支付、缴费相关，所以希望整个产品视觉风格首先要给用户带来安全感。又因为主要用户群体是高校师生居多，新潮、年轻化是主要用户的一大标签，所以我们选择了用饱和度较高的蓝色来作为品牌色。
最终选择品牌色的 Hex 值为 #1585FF ，HSB = （211,92,100）。
步骤二：提取24色
选定了品牌色之后，以品牌色的 H（色相）为基础，不断地递增、递减 15，在 0-360 之间可以得出 24 个颜色，也就是将 360° 色环分割为 24 份，可以得到 24 色。
为什么要提取 24 色，并且以 15 为公差呢？
我们知道，想得到邻近色、类似色、互补色这一系列的颜色，我们就会使用到色环。
而 24 色色板是帮助我们提取辅助色的便捷工具。
步骤三：找到同色系配色
同色系是指与品牌色 H（色相）一致，通过改变 S（饱和度）与 B（明度）变化产生的色组。同色系色组的推导需要借助拾色板坐标。
我们建立一个基于 S（饱和度）与 B（明度）的平面坐标系，设定当前品牌色为色值为（S₀，B₀），连接品牌色色值点与右上纯白点（0，100）、右下纯黑点（100，0），得到两条线段。
我们各在两条线段上均分取得 5 个点坐标（包含首位两点）。这样两条线段一共就会产生 11 个（S，B）坐标值，对应着 11 个同色系色组。
经过上图的计算，我们可以得到基于品牌色的同色系色阶。
步骤四：多色搭配
用于搭配的辅助色应满足以下两个条件：
于是根据以上条件，基于品牌色可衍生出 3 个辅助色：一个与品牌色传递调性有明显区分的类似色；两个互补色的邻近色。
步骤五：感官明度校准
经过计算后，我们已经得出了品牌色和三个辅助色。
可以看出，虽然我们提取出的辅助色明度色值都一致，但因为颜色本身自带的感官明度属性有所区别。为了让辅助色和品牌色的感官明度尽量一致，我们要对第一次提取出的辅助色进行感官明度校准。
校准方式是：依次在辅助色上叠加一层纯黑图层，将该纯黑图层颜色模式调整为 Hue（色相），就可以通过无彩色系下的明度色值，进行对比。
这样我们终于得到以品牌色为基准的 3 个辅助色了。
步骤六：全色系输出
将得到的辅助色依次进行步骤三的计算，可以得到辅助色的同色系色阶。
但因为明度过低时，颜色已经非常接近于黑色，色相在肉眼上几乎已经趋于一致。所以删除最左边的三种同色系颜色。最后得到基于品牌色推导出的全色系色阶色板。
完成了以上的工作，当然还不算结束。一套标准的色彩系统还会包含中性色规范、颜色的使用规范等等。但相信解决了大部分的需求，剩下的工作也难不倒大家了。毕竟以上的方式只是给大家提供了一个理性科学的方法，色彩的使用最终还是要融合设计师个人的共情能力。
比如许多产品有了一套自己的色彩方案后，设计师还会根据具体的业务场景去赋予 icon、卡片背景等元素不一样的色彩方案。
希望这个方法能够带你发现一些色彩背后的数学秘密。
文章来源：优设 作者：UCD耍家
很多同学投票想看看设计师的草稿本，今天就来满足大家了！我们来看看六位淘宝设计师的草稿本们，有些是纸质派，有些是电子党，Here we go！
草稿本是设计师工作生活必不可少的工具，比起正儿八经的作品集，设计师的草稿本其实也是十分有趣的，它是设计师脑海里千奇百怪想法的随手记录。
Shiyu：本人是被胁迫公开草稿本的卑微设计师
手绘装备：iPad Pro+Procreate
以下是被迫营业现场对话
△ 给「老同学」的公众号形象草稿
老同学：「好久不见~我记得你画画挺好的~帮画个形象呗~我现在在做一个公众号，需要*&%￥#……你明白吧？你就简单画一画就好~谢谢啦」
我：「….」
△ 给「朋友」画的头像草稿
朋友：「好久不见~我记得你之前帮谁谁画的那个头像挺不错的~也帮我画一个呗~我现在在做blablabla，需要*&%￥#……你明白吧？很简单吧~谢谢啦」
我：「….」
Dajing：我的草稿本就是平时画画原型图或者需要做文档整理规范的时候拿出来画画草图，对我来说我的草稿本是帮我理清思路的一个很好的助手。
手绘装备：A4点格草稿本+马克笔
△ 智能配色草稿
△ 中后台加框草稿
Dajing：里面有当时做中后台框架的时候导航的原型，还有之前做智能配色的时候HSB色环推演的草图，还有些文档维度整理草图，画出来方便查看也便于直观梳理自己的逻辑。
Wanru：画画是我记录生活、寻找灵感的一种方式。
手绘装备：MUJI笔记本、水彩、铅笔、马克笔等等…
△ 冲绳旅行水彩
Wanru：水彩是我最喜欢的绘画形式，非常浪漫，食物也是我擅长画的题材。这是在冲绳旅行时的第一顿晚餐，新鲜的海鲜和爽口的啤酒也具有明亮的颜色，让人忍不住想去表达。烧肉店的杯垫被我带了回来，日本的平面设计做得很好，是很好的素材～
△ 电影小漫画
用小漫画记日记的习惯已经很多年了，我是非常喜欢漫威的，这是13年《钢铁侠3》上映和两个朋友看电影的场景。这个场景必须用美漫的风格了！偶尔会尝试各种画画风格。
△ 随手小速写
偶尔会画些小速写，勾一些人物、小物品、小动物，速写可以很好地练习造型能力。
Zoey：作为一个热爱喝奶茶、追番和打手游的肥胖又无助的设计师，感觉累了就在草稿本上放空自己。
手绘装备：iPad Pro+Procreate & Sketches Pro
△ 记录日常生活的草稿
Zoey：我很喜欢用草稿本记录自己的生活（食物为主），喜欢的电影角色也会简单画下来。
△ 二次元小画
作为半个二次元 ，草稿本当然也被满屏的羞耻占领~ 这两张草稿是我画的Persona 5里面的人物，因为我个人真的特别喜欢P5 ，对于自己喜欢的事情即便996也会熬夜画下去~
Dribbble 经历了资本入驻、创始人出走之后，最大的事情应该就是这次改版吧？这个全球最大、最有影响力的设计师社区的每一个动作都必然会牵扯着每个设计从业者的注意力，新版背后到底有哪些变化？这些变化又是出于什么样的想法来修改的？看看 Dribbble 的官博是怎么说的吧：
在过去的10年当中，Dribbble 已经成长成为一个全球性的社区，成千上万的人从这里获得启发和灵感，助力设计，而我们从最初分享设计作品小样的创意社区，逐步成长为一个全球设计师产品和作品集展示和社交的平台。在此，而我们也第一次开始问自己一个简单的问题：【我们到底是在做些什么？】
今天，我们很高兴宣布，我们在过去的10年当中首次进行了彻底的重设计。
在过去十年当中，我们所设计的 Dribbble 页面的特点，是将设计师的作品和内容放在首位，所以叫我们不追随潮流，采用了极简风格的设计，即使潮流来来去去，它们也只是 Dribbble 展示内容的一部分。我们提供了一幅未经修饰的画布，这样就可以和最疯狂最激进的设计探索相辅相成。不过，这么多年来，Dribbble 这种「隐形」的设计，在视觉美学上确实和时代脱节了。这次，我们创建了一套有着一致样式的设计和代码库，用以替代以往不断修改、庞大且不一致的代码。
「我们新的设计系统旨在保持整个视觉和谐的同时，展示你的创造力。」
如今，我们正在改进 Dribbble 的界面，以更加干净的布局、统一的设计系统、更加简化的配色方案、更加轻便的代码库（加载也更加迅速），以及全新配置的文件，来更好地帮你将作品推到最前沿，正确而合理地展示你的创作和个性。
我们新的设计系统旨在保持整个视觉和谐的同时，展示你的创造力。它是你分享设计作品和创造力的理想画布，而新的美学特质也可以更好地反应此刻我们的公司的气质。
在进行重设计的时候，我们明确知道，我们要完全重新思考社交化的设计师作品展示，并且将创意更大化地呈现。对于 Dribbble Pro 用户和 Pro Business 订阅者，你现在拥有一个全新的、经过全面修改的设置和配置页面，可以在 Dribbble 上充分展示自己的个性，
Pro 用户和 Pro Business 用户可以通过上传你自己的首图和定制化的欢迎语，来个性化你的个页面。
你还会注意到，你的个人页面还可以上传更大的照片，这可以让你的作品对于页面的访客、你的客户、招聘设计师的企业人事而言，看起来都是非常出挑的。新的网格布局是可以自定义的，因此你可以充分完美地设置和展示内容。
此外，我们还修改了「关于我们」这个部分，新版当中，这个部分你可以将所有的个人信息汇集到一起，以便完整而充分地展示你的个人经历、展示简历和技能。
如果你正在寻求工作机会，新的信息发送组件，确保了你的客户或者招聘企业可以一键联系到你，他们可以直接从你的个人资料页向你发送信息，非常轻松地和你取得联系。
当然，并非是只有 Pro 和 Pro Business 用户才能拥有高度定制化的个人页面，无论你是普通用户、内容创作者还是内容策划人，Dribbble 上每个普通用户的个人页面也都会升级。尚未订阅 Pro 服务的设计师会注意到，他们的个人页面会更加简洁，而设计作品会以更加聚焦的形式，吸引到每一个访客的目光。
我们将以往的带有分享功能的收藏合集页（之前叫 Buckets）给翻新了，你可以精心策划整页内容和案例，从一个情绪板到完整的项目，这意味着，借助这个收藏页功能，你可以更加轻松地在 Dribbble 上寻找和搜集灵感。
现在，我们可以非常自豪地宣布，即使你并没有将 Dribbble 作品给分享出来，每个人也都会拥有一个策划人页面，你可以在其中搜集和整理自己喜欢的作品，来展示你的个人品味，通过保存别人的作品，来创建新的合集，我们会自动将它添加到你的个人页资料页当中，让全世界的同好因为品位而关注你。
我们在整个改版设计过程中，面临最大的挑战，其实是图片网格，因为这是绝大多数用户每天浏览图片、发现设计灵感的地方，我们有意识地去弱化 Dribbble 本身 UI，避免喧宾夺主，让每个用户的作品成为视觉焦点，减少噪音。
2020 年才刚刚开始，我们迫不及待地想要展示我们计划中的一切。从案例研究到更好的视频支持，再到作品集展示，摆在我们眼前的改版路线图足以证明我们的雄心，所有的这一切都是为了让全球的设计师能够从中获益，走向成功。请期待我们进一步的改版升级吧！
文章来源：优设 作者：Dribbble
快速变化的技术每年都在影响着设计趋势。作为设计师，我们需要时刻保持关注，对设计趋势拥有较高的敏感度，不断学习，扩充自己的设计技能，目的是为了跟上的市场环境。基于我的调研，经验和观察，我甄选了在2020年你将会看到的最为关键的8个UI/UX设计趋势。让我们一起来看看吧。
插图被应用到APP中已经有很长一段时间了，它们在最近几年的演变令人印象深刻。插图作为一种非常流行的设计元素，为我们产品的整体产品增加了情感化体验。插图非常能抓人眼球，尤其是在融入动效后会显得更加的自然，将产品带入生活的气息，使得产品功能更加突出，同时也增添了更多的细节和个性。
△ Welcome to Swiggy by Saptarshi Prakash
△ Onboarding animations — Virgil Pana
另一个好处是使用动效后，能抓住用户的注意力使其能够更加沉浸在你的产品中。动效同样是讲好品牌故事，产品或者服务最有影响力的途径之一。
微交互存在与每一个网页或者app界面中。每当打开你最喜欢的那些应用时，都有机会看到它们，比如像Facebook中就有大量不同的微交互，我认为「Like」功能就是一个完美的例子。有时，我们几乎意识不到它的存在，因为它们非常的不显眼，非常自然地融到界面中去了。但是，如果当你把这些微交互移除掉的话，你又会非常快的注意并能感受到一些非常重要的东西丢失了。
△ Menu toggle close animation — Aaron Iker
△ Tab bar active animation — Aaron Iker
一般来说，在UI/UX中即使非常小和细节处的设计都可能会带来巨大的冲击力。微交互就是完美的证明，细节和对它的关注能极大的改善产品的整体体验，并让产品体验上升一个台阶。每年，新设备的发布伴随着新的机会，能给产品塑造新品牌和创造富有创意的微交互。
3D图形设计几乎无处不在，比如在电影，游戏或者运营广告里等等。3D图形设计早在10年前就出现了然后一直在不断提升和进化。手机和web技术进展迅猛，新的web浏览器能力打开了3D设计新世界的大门，这给了设计师们在web和手机界面中创造炫酷3D设计的机会。
△ 3D flip menu by Minh Pham
△ Car health report UI by Gleb Kuznetsov
创造并整合这些3D创意设计到web和手机界面中需要特殊的技能和花费大量的工作，但这些付出会得到回报。
△ Apple AirPods Pro landing page
3D设计对于产品和服务来说，具有非常大的吸引力，例如在交互上能够支持用户360度查看产品，从而大大提升整个的产品体验。
在2020年会有更多的品牌利用3D渲染模型的产品和服务去模仿线下购物体验。
VR技术在2019年有一个巨大的飞跃。最近的一年我们激动地看到了头戴式设备有了非常大的发展，尤其是在游戏领域。我们需要记住的是，游戏行业经常在引领着新技术的发展并落地到实际的产品设计中。研究表明，VR也不例外，在Oculus Quest于2019年推出后，许多机会为其他行业打开了大门。Facebook CEO 扎克伯格已经测试了激动人心的手部交互功能，并正式宣布将在2020年初为Quest进行更新。
△ Oculus Quest — hand interaction feature
△ PlayStation Virtual Reality Website Design by Kazi Mohammed Erfan
索尼和微软计划在2020年夏季发布他们的新设备，这就给VR技术带来巨大的机会和发展空间。
学习VR 可以阅读优设这个专题：https://www.uisdc.com/zt/vr-design
在最近几年，我们能看到在AR（增强现实）这块有了很大的进步和惊喜。世界引领着科技公司在AR开发方面进行了巨大的投入，所以我们应该期待这项技术在2020年有更大的成长和发展。苹果公司也发布了他们自己的AR套件叫AR KIT3来帮助设计师和开发者在他们的产品中打造AR体验。
△ Apple ARKit 3 by Apple
△ Public transit app by Yi Li
△ House of Plants AR Concept by Nathan Riley
在AR空间里会有无限的机会和创意去打造一个新的品牌和激动人心的体验。为AR做UI设计会在2020年成为一大趋势，这就要求设计师们在面对创造AR产品体验前，应该去准备和抓紧学习新的工具，原型之类的知识。
学习AR 可以阅读优设这个专题：https://www.uisdc.com/zt/ar-design
一般来说，拟物化设计是指以现实风格/方式创造出来与现实中的物体相匹配的设计元素。不断发展的VR/AR技术以及在各大最流行设计平台（Dribbble,Behance等）上展示的设计作品趋势来看，预示着拟物化的回归，但这次换了个更现代，更酷略微高大上的名字叫「新拟物风」（也叫Neumorphism）。
△ Skeuomorph Mobile Banking | Dark Mode by Alexander Plyuto
△ Simple Music Player by Filip Legierski
△ Sleep Cycle App — Neumorphism Redesign by Devanta Ebison
你可能注意到了：Neumorphism代表了丰富细节和明确的一种设计风格。高光，投影，发光，这些细节非常令人印象深刻。Neumorphism风格已经鼓舞了全世界一大批的设计师创作作品，它也会成为2020年最大的设计趋势。
学习新拟物风可以阅读优设这个专题：https://www.uisdc.com/zt/neumorphism
最近一年我们也注意到一种不对称风格正在快速发展。传统基于「模板」的布局肯定会消失。这种设计趋势给2020年的设计带来了更多的差异化。合适的不对称风格将会在我们的作品中增多一大批不同的性格，火力以及个性，所以设计不再单纯的基于模板。
△ Limnia Fine Jewelry Grid — Zhenya Rynzhuk
△ Carine fashion store — selection screen concept — Dawid Tomczyk
当设计这种不对称风格时，设计师拥有非常多的选项以及巨大的发挥空间。但是，想设计好这种不对称风格需要大量的练习，它绝不是将元素随机的摆放在网格中，而应该小心使用和实现它们，时刻需要把用户的诉求考虑到设计中。我们并不想让用户迷失在我们的产品中，对吗？
故事在整个用户体验中扮演着非常重要的角色。你可能经常会在着落页看到它作为品牌介绍，产品或者一个新的服务。讲故事就是利用创意的形式把信息传递给用户。这可以通过强大的视觉元素来呈现（字体，插画，高清图片，颜色，动画，交互元素）。
△ A+WQ / Young Lab Page Story of The Week Animation by Zhenya Rynzhuk
△ Free Sketch Template :: Mimini by Tran Mau Tri Tam
讲故事可以帮助产品创造出品牌和用户之间积极的情感连接。讲故事可以为你的产品创造出非常多的记忆点，让用户感受到自己就是产品或服务的一部分，他们便会更加愿意使用你的产品。话虽如此，讲故事也是一种非常有效的营销手段，它可以极大地提高你的产品/服务的销量。讲故事作为一种非常成功的手段，将在2020年继续发扬光大。
1. 动态插图
通过把动画和插图进行结合，我们可以使得设计变得更加突出，并把它带入用户的日常生活，为产品赋予了的细节和个性化。
2. 微交互
微交互被证明是可以在当用户注意到他们是能够带来非常大的惊喜体验，它能够有效的提升整个产品的用户体验并把产品的品质提升一个等级。
3. 3D图形的应用
新的浏览器技术打开了3D图形应用的大门，能够给设计师带来非常大的创意机会去打造让人惊叹的3D图形设计应用到网页和手机APP中。
4. 虚拟现实
游戏行业将迎来新的变革，新的技术能够应用到产品设计中。
5. 增强现实
在AR空间中拥有无限的机会去创造新的品牌和令人激动的新体验。为AR技术服务的UI设计将在2020年成为主要趋势，设计师需要位为之准备并去学习新的工具，原型，当真的需要你去做一款AR应用时就需要用到。
6. 新拟物风
AR/VR技术不断发展，以及在各大流行设计平台上大量涌现的写实设计作品预示着拟物风的回归，但只是这次换了个新的更加现代化的名字。
7. 不对称布局
运用不对称布局能让设计创意变得拥有更多选项和机会。虽然，设计一个成功的不对称布局需要投入大量的练习和时间。
8. 讲故事
讲故事就是利用创意形式把信息传递给用户。讲故事是一个非常好的营销工具，可能会大大增长产品的销售额或服务。
文章来源：优设 作者：彩云译设计
蓝蓝设计的小编 http://www.lanlanwork.com