随着羊群人数的不断增加，使得大部分同事改成居家办公和线上会议。线上会议的特点不用提前抢会议，不用担心会议时长，顶着 40℃的高烧，听者需求评审会，也不知道烧了多久，睡了多久，会议开了多久....需求评审会经常被大家吐槽时间久，最终问题得不到解决似乎是无法破解的问题。我记录了最近几次 PM 组织的评审会过程，发现一...

随着羊群人数的不断增加，使得大部分同事改成居家办公和线上会议。线上会议的特点不用提前抢会议，不用担心会议时长，顶着 40℃的高烧，听者需求评审会，也不知道烧了多久，睡了多久，会议开了多久....

需求评审 会经常被大家吐槽时间久，最终问题得不到解决似乎是无法破解的问题。我记录了最近几次 PM 组织的 评审会 过程，发现一些问题，并想到一些可以改变的方法。

需求评审干货：

需求太多怎么评审？来看京东内部的实战案例！ 面对功能优化类项目，如何做好需求分析？

阅读文章 >

问题 1：开场一句话背景和模糊的收益 介绍背景和收益必不可少，这是团队成员在初期达成目标一致的必要过程，并且通过说明相关成员能够认同该项目的价值和意义，通常一句话轻描淡写是不够的。

建议：充分做好会前功课和线下沟通，保证会上快速达成一致

老项目要介绍上一个版本历史数据分析结论或者用户反馈问题分析结论。 新项要使用SWOT等分析方法，明确自身的竞争优势，市场规模等核心问题。 竞品分析讲结论。不要挨个讲竞品，也不要讲字号和颜色等细枝末节问题（可以在需求文档中给予参考建议），注重战略层面和功能层面的差异介绍，以及那些适合自身与竞品之间的差异。 本次要解决的问题，也就是具体我们要做什么。不需要复杂的论述，简单列出本次需求点，一目了然。 清晰表述项目价值。讲明白本次优化能给项目带来多大的价值，以及是如何推导出来的，让团队成员信服。价值一定是可以衡量的，我们常听到项目的价值是提升用户体验，但实际既没有用户满意度等用户指标，也没有具体收益等业务指标，那这就是不可衡量，全靠感觉，项目后期对于方案的讨论分歧点会很多。 不要一开始就甩锅给老板。很多PM在开会时功课做得不够，被问到一些无法回答的问题时直接说这是老板让做的，如果觉得需求有问题可以去找老板，这样的结果大家以后对于项目态度都会变成应付了事，PM自己的工作后续也很难推进。 问题 2：上来就讲原型，陷入细节纷争 PM 喜欢画原型喜欢讲原型应该是不争的事实，还有一些 PM 对原型的精美度要求还很高，于是需求确认前就找交互设计师按照自己设想完成交互设计，很多不完善、不合理的地方也很强硬的要按照自己的来。需求评审会上来讲原型很容易让团队成员陷入界面的细节争论不休，开发又会追问每个逻辑，评审会你一句我一句就乱套了，同这时通常设计也会与开发一边，表示出不满。

建议：清晰且详细文字的描述产品逻辑及字段

清晰表述产品中所有的字段、数据格式以及相应的逻辑。让开发能看懂所有功能逻辑、操作逻辑、展示逻辑，设计能看懂产品需要用户如何操作以及限制条件，通过文字能明白整体需求逻辑关系。 尽量使用文字描述。我们发现当图和文字同时出现在文档中时，设计师和前端更偏向于看图，后端会细看文字描述的逻辑，这样到了打法阶段容易形成分歧，导致新的问题产生。 产品画的原型会影响设计师的思考，造成设计师被带跑偏，甚至一些强硬的PM要求设计师按照原型来，这样一来 设计师 不想给自己找不痛快，就按照美工的标准应付完工，并没有发挥真正的价值。 问题 3：需求评审开成技术评审 很多时候在评审会上，开发人员会从能不能实现聊到怎么实现，然后聊到各服务端如何来配合，一聊起来就没完没了，线上会还可能随时就拉个新成员进入参与讨论，需求背景又要被重复。此时的需求还没有定论，占用大量会议时间讨论技术实现明显是不合适的，浪费大家宝贵的时间。

建议：做好会议把控，控制问题讨论边界

PM在会议中要起到把控的作用，会上不讨论技术实现方案，只讨论需求是否合理，技术可否实现，如果当时不能确定能否实现的，需要记录todo在规定的时间内反馈。 对于一些不确定的技术问题，或可能存在争议的难点，最好在开会前就能和技术负责人了解清楚技术背景，做好功课，防止在评审会上被牵着鼻子走。 问题 4：跑题 跑题通常是不知不觉的，甚至全体参会人都享受其中，越聊越嗨，忘记了开会真正的目的。印象比较深的是一个方案要主管确认，主管从这个方案聊到了另一个项目，开发顺着另个项目聊到了项目进度和遇到的问题。整个评审会成为了另一个项目的汇报会，到最后也没确认当前方案。

建议：明确会议目标，时刻关注会议方向

PM会前要和主管确认好方案，以保证内部一致性，会上主管只要回复确认没问题即可。 放下面子敢于说话。很多时候PM不太好意思打断大家的对话，这样就不能把跑题扼杀在摇篮里。 总结一下，就是立足本职做好自己职责范围内的工作，承担好项目角色。

如何组织一场高效的设计评审会？高手总结了这份模板！ 编者按：设计评审的目的和意义是什么？

阅读文章 >

如何顺利通过设计评审会？我总结了3个注意事项！ 编者按：如何通过设计评审？

阅读文章 >

随着羊群人数的不断增加，使得大部分同事改成居家办公和线上会议。线上会议的特点不用提前抢会议，不用担心会议时长，顶着 40℃的高烧，听者需求评审会，也不知道烧了多久，睡了多久，会议开了多久....需求评审会经常被大家吐槽时间久，最终问题得不到解决似乎是无法破解的问题。我记录了最近几次 PM 组织的评审会过程，发现一...

随着羊群人数的不断增加，使得大部分同事改成居家办公和线上会议。线上会议的特点不用提前抢会议，不用担心会议时长，顶着 40℃的高烧，听者需求评审会，也不知道烧了多久，睡了多久，会议开了多久....

需求评审 会经常被大家吐槽时间久，最终问题得不到解决似乎是无法破解的问题。我记录了最近几次 PM 组织的 评审会 过程，发现一些问题，并想到一些可以改变的方法。

需求评审干货：

需求太多怎么评审？来看京东内部的实战案例！ 面对功能优化类项目，如何做好需求分析？

阅读文章 >

问题 1：开场一句话背景和模糊的收益 介绍背景和收益必不可少，这是团队成员在初期达成目标一致的必要过程，并且通过说明相关成员能够认同该项目的价值和意义，通常一句话轻描淡写是不够的。

建议：充分做好会前功课和线下沟通，保证会上快速达成一致

老项目要介绍上一个版本历史数据分析结论或者用户反馈问题分析结论。 新项要使用SWOT等分析方法，明确自身的竞争优势，市场规模等核心问题。 竞品分析讲结论。不要挨个讲竞品，也不要讲字号和颜色等细枝末节问题（可以在需求文档中给予参考建议），注重战略层面和功能层面的差异介绍，以及那些适合自身与竞品之间的差异。 本次要解决的问题，也就是具体我们要做什么。不需要复杂的论述，简单列出本次需求点，一目了然。 清晰表述项目价值。讲明白本次优化能给项目带来多大的价值，以及是如何推导出来的，让团队成员信服。价值一定是可以衡量的，我们常听到项目的价值是提升用户体验，但实际既没有用户满意度等用户指标，也没有具体收益等业务指标，那这就是不可衡量，全靠感觉，项目后期对于方案的讨论分歧点会很多。 不要一开始就甩锅给老板。很多PM在开会时功课做得不够，被问到一些无法回答的问题时直接说这是老板让做的，如果觉得需求有问题可以去找老板，这样的结果大家以后对于项目态度都会变成应付了事，PM自己的工作后续也很难推进。 问题 2：上来就讲原型，陷入细节纷争 PM 喜欢画原型喜欢讲原型应该是不争的事实，还有一些 PM 对原型的精美度要求还很高，于是需求确认前就找交互设计师按照自己设想完成交互设计，很多不完善、不合理的地方也很强硬的要按照自己的来。需求评审会上来讲原型很容易让团队成员陷入界面的细节争论不休，开发又会追问每个逻辑，评审会你一句我一句就乱套了，同这时通常设计也会与开发一边，表示出不满。

建议：清晰且详细文字的描述产品逻辑及字段

清晰表述产品中所有的字段、数据格式以及相应的逻辑。让开发能看懂所有功能逻辑、操作逻辑、展示逻辑，设计能看懂产品需要用户如何操作以及限制条件，通过文字能明白整体需求逻辑关系。 尽量使用文字描述。我们发现当图和文字同时出现在文档中时，设计师和前端更偏向于看图，后端会细看文字描述的逻辑，这样到了打法阶段容易形成分歧，导致新的问题产生。 产品画的原型会影响设计师的思考，造成设计师被带跑偏，甚至一些强硬的PM要求设计师按照原型来，这样一来 设计师 不想给自己找不痛快，就按照美工的标准应付完工，并没有发挥真正的价值。 问题 3：需求评审开成技术评审 很多时候在评审会上，开发人员会从能不能实现聊到怎么实现，然后聊到各服务端如何来配合，一聊起来就没完没了，线上会还可能随时就拉个新成员进入参与讨论，需求背景又要被重复。此时的需求还没有定论，占用大量会议时间讨论技术实现明显是不合适的，浪费大家宝贵的时间。

建议：做好会议把控，控制问题讨论边界

PM在会议中要起到把控的作用，会上不讨论技术实现方案，只讨论需求是否合理，技术可否实现，如果当时不能确定能否实现的，需要记录todo在规定的时间内反馈。 对于一些不确定的技术问题，或可能存在争议的难点，最好在开会前就能和技术负责人了解清楚技术背景，做好功课，防止在评审会上被牵着鼻子走。 问题 4：跑题 跑题通常是不知不觉的，甚至全体参会人都享受其中，越聊越嗨，忘记了开会真正的目的。印象比较深的是一个方案要主管确认，主管从这个方案聊到了另一个项目，开发顺着另个项目聊到了项目进度和遇到的问题。整个评审会成为了另一个项目的汇报会，到最后也没确认当前方案。

建议：明确会议目标，时刻关注会议方向

PM会前要和主管确认好方案，以保证内部一致性，会上主管只要回复确认没问题即可。 放下面子敢于说话。很多时候PM不太好意思打断大家的对话，这样就不能把跑题扼杀在摇篮里。 总结一下，就是立足本职做好自己职责范围内的工作，承担好项目角色。

如何组织一场高效的设计评审会？高手总结了这份模板！ 编者按：设计评审的目的和意义是什么？

阅读文章 >

如何顺利通过设计评审会？我总结了3个注意事项！ 编者按：如何通过设计评审？

阅读文章 >

设计团队如何赋能业务，提升用户体验的同时，助力业务达成目标？接下来通过「PLUS 未开通会员｜首屏｜体验设计升级」项目进行整体复盘。往期案例：京东APP 9.0 是如何改版设计的？

设计团队如何赋能业务，提升用户体验的同时，助力业务达成目标？接下来通过「PLUS 未开通会员｜首屏｜体验设计升级」项目进行整体复盘。

往期案例：

京东APP 9.0 是如何改版设计的？收下这份官方的完整复盘！ 2020 年未过半，我们就看了许多从前从未见过的人和事，体验了许多从前从未想过的经历。

阅读文章 >

一、前期分析 1. 项目背景

PLUS未开通会员项目的背景有以下几个关键点：

未开通会员频道"首屏"做为开卡转化的核心阵地，80%的流量集中在首屏，却没有很好的发挥首屏价值。 PLUS 长期沉淀已有更多卡种，在主频道内没有呈现。 未开通频道长时间未做视觉升级，因此需要进行体验设计优化，从而提升开卡效率。

2. 业务诉求

① 首先明确核心诉求

在于提升频道首屏的开卡率

② 接下来拆解诉求

频道外露多卡种 权益组织形式重构 交互视觉体验升级 优化开卡链路 基于以上这几点去促使用户更快决策，助推到业务核心诉求从而提升首屏开卡率。

3. 现状分析

明确业务诉求后，相应对频道页面的现状进行分析，整合来看有以下 6 点。

卡种选择单一且无核心价值传递 会员权益形式表达不清晰，撩拨感弱 权益露出无权重差异 转化链路层级长 联名卡视觉样式老旧且框架较高 与正式开卡页面视觉风格不统一

二、设计预研 对自身问题有了拆解后，接下来对淘系、零售、O2O 相关竞品进行调研， 提炼竞品的一些相关优势策略点。正所谓“他山之石可以攻玉”。

并且罗列归纳了竞品的几种布局方式

因此，基于对自身现状的分析，和对竞品的分析，我们将本次体验设计升级的策略主要锚定在 权益表达、结算链路、结构布局、卡种展示 四个关键点。

三、设计推演 设计推演拆分为发散和收缩两个部分。

1. 飞机稿发散 发散阶段围绕 结构布局 和 卡种展示 进行发散.

① 结构布局发散了 包裹式布局 和 分段式布局

② 针对卡种展示，分别发散了 传统 tab 切换 和 卡片轮播 以及 卡种场景化探索。

③ 由于有多种卡种，因此在卡种发散的过程中针对于 不同卡种的用户感知，也进行了相应的探索。

比如 强感知 的皮肤颜色切换、卡面图形切换，次强感知 的标签样式区分。

强感知 的皮肤颜色切换

强感知 的卡面图形切换

次强感知 的标签样式区分

2. 收缩-策略推演 最后的方案收缩落地，我们主要围绕前面提及的四个方向进行策略拆解，首先是权益展示。

1）权益展示

分为三个点：

① 是进行主次权益的权重差异，助力用户决策。

② 会员权益显性露出，强化关键信息，以及 sku 的轮播露出，打造强撩拨感。

③ 最后组件化输出模块，后台灵活配置上传，节省开发成本。

2）结算链路

① 摒弃了以往全页面跳转形式，采用浮层收银台的方式，减少用户在页面间跳转带来的迷失感，从而达到简化支付路径的目的。

② 其次视觉整体优化。保证视觉一致性传递。

3）结构布局

① 整体采用分段式布局结构、使模块更聚焦，提升首屏的秩序感

② 分层展示便于开发还原。 「前期 UI 评审阶段和开发做好沟通，便于开发判断使用什么实现方式，从而做到又快又好的还原设计稿（皆大欢喜）」

4）卡种展示

① 多卡种滑动保证卡种外露的同时 引导用户操作。

② 卡面微动效，强化 PLUS 的 品牌心智和用户感知。

③ 卡面氛围，最终采用 3D 打造的效果，彰显 plus 品牌的尊贵感知，助力用户决策。并且拓充氛围坑位的运营属性，可配置氛围延展 plus 会员卡的情感化表达。

④卡面上进行不同卡种 slgan 的透传，进行价值传递，进一步助力决策，比如京典卡：开通享 12 大特权，省钱又省心； 免费试用：开通享 8 大特权，免费试用 30 天；0 元开通：开通享 12 大特权，多用多省少用不亏。

⑤ 联名卡整体视觉减负。

四、数据验证 本次首屏设计体验升级，在组内同学、产品和开发的共同的努力下，最终测试上线，通过测试版本追踪数据，我们也得到了相应正向的反馈（这里就不放数据啦）。

大厂实战！京东内容助手从想法到落地的完整设计复盘 本文主要讲述了作者作为京东内容助手 APP 产品一号位以来，从 0-1 开始做一款 APP 的比较有代表性的经历和总结思考，为读者朋友们提供参考和建议。

阅读文章 >

京东 11.11 的视觉体系是如何建立与推动的？来看完整复盘！ 京东每次集团大促都会有无数的问题等待我们去解决，在此给大家分享一下京东运营设计团队关于双 11 项目的复盘总结，希望共同探讨，一起学习进步 视觉定位 每次遇到集团大促，我们视觉团队都会倍感压力，不仅仅来自于运营团队业务要求的压力，也来自于年轻群体的购物趋势变化非常快，审美要求也越来越

阅读文章 >

欢迎关注「JellyDesign」的小程序：

设计团队如何赋能业务，提升用户体验的同时，助力业务达成目标？接下来通过「PLUS 未开通会员｜首屏｜体验设计升级」项目进行整体复盘。往期案例：京东APP 9.0 是如何改版设计的？

设计团队如何赋能业务，提升用户体验的同时，助力业务达成目标？接下来通过「PLUS 未开通会员｜首屏｜体验设计升级」项目进行整体复盘。

往期案例：

京东APP 9.0 是如何改版设计的？收下这份官方的完整复盘！ 2020 年未过半，我们就看了许多从前从未见过的人和事，体验了许多从前从未想过的经历。

阅读文章 >

一、前期分析 1. 项目背景

PLUS未开通会员项目的背景有以下几个关键点：

未开通会员频道"首屏"做为开卡转化的核心阵地，80%的流量集中在首屏，却没有很好的发挥首屏价值。 PLUS 长期沉淀已有更多卡种，在主频道内没有呈现。 未开通频道长时间未做视觉升级，因此需要进行体验设计优化，从而提升开卡效率。

2. 业务诉求

① 首先明确核心诉求

在于提升频道首屏的开卡率

② 接下来拆解诉求

频道外露多卡种 权益组织形式重构 交互视觉体验升级 优化开卡链路 基于以上这几点去促使用户更快决策，助推到业务核心诉求从而提升首屏开卡率。

3. 现状分析

明确业务诉求后，相应对频道页面的现状进行分析，整合来看有以下 6 点。

卡种选择单一且无核心价值传递 会员权益形式表达不清晰，撩拨感弱 权益露出无权重差异 转化链路层级长 联名卡视觉样式老旧且框架较高 与正式开卡页面视觉风格不统一

二、设计预研 对自身问题有了拆解后，接下来对淘系、零售、O2O 相关竞品进行调研， 提炼竞品的一些相关优势策略点。正所谓“他山之石可以攻玉”。

并且罗列归纳了竞品的几种布局方式

因此，基于对自身现状的分析，和对竞品的分析，我们将本次体验设计升级的策略主要锚定在 权益表达、结算链路、结构布局、卡种展示 四个关键点。

三、设计推演 设计推演拆分为发散和收缩两个部分。

1. 飞机稿发散 发散阶段围绕 结构布局 和 卡种展示 进行发散.

① 结构布局发散了 包裹式布局 和 分段式布局

② 针对卡种展示，分别发散了 传统 tab 切换 和 卡片轮播 以及 卡种场景化探索。

③ 由于有多种卡种，因此在卡种发散的过程中针对于 不同卡种的用户感知，也进行了相应的探索。

比如 强感知 的皮肤颜色切换、卡面图形切换，次强感知 的标签样式区分。

强感知 的皮肤颜色切换

强感知 的卡面图形切换

次强感知 的标签样式区分

2. 收缩-策略推演 最后的方案收缩落地，我们主要围绕前面提及的四个方向进行策略拆解，首先是权益展示。

1）权益展示

分为三个点：

① 是进行主次权益的权重差异，助力用户决策。

② 会员权益显性露出，强化关键信息，以及 sku 的轮播露出，打造强撩拨感。

③ 最后组件化输出模块，后台灵活配置上传，节省开发成本。

2）结算链路

① 摒弃了以往全页面跳转形式，采用浮层收银台的方式，减少用户在页面间跳转带来的迷失感，从而达到简化支付路径的目的。

② 其次视觉整体优化。保证视觉一致性传递。

3）结构布局

① 整体采用分段式布局结构、使模块更聚焦，提升首屏的秩序感

② 分层展示便于开发还原。 「前期 UI 评审阶段和开发做好沟通，便于开发判断使用什么实现方式，从而做到又快又好的还原设计稿（皆大欢喜）」

4）卡种展示

① 多卡种滑动保证卡种外露的同时 引导用户操作。

② 卡面微动效，强化 PLUS 的 品牌心智和用户感知。

③ 卡面氛围，最终采用 3D 打造的效果，彰显 plus 品牌的尊贵感知，助力用户决策。并且拓充氛围坑位的运营属性，可配置氛围延展 plus 会员卡的情感化表达。

④卡面上进行不同卡种 slgan 的透传，进行价值传递，进一步助力决策，比如京典卡：开通享 12 大特权，省钱又省心； 免费试用：开通享 8 大特权，免费试用 30 天；0 元开通：开通享 12 大特权，多用多省少用不亏。

⑤ 联名卡整体视觉减负。

四、数据验证 本次首屏设计体验升级，在组内同学、产品和开发的共同的努力下，最终测试上线，通过测试版本追踪数据，我们也得到了相应正向的反馈（这里就不放数据啦）。

大厂实战！京东内容助手从想法到落地的完整设计复盘 本文主要讲述了作者作为京东内容助手 APP 产品一号位以来，从 0-1 开始做一款 APP 的比较有代表性的经历和总结思考，为读者朋友们提供参考和建议。

阅读文章 >

京东 11.11 的视觉体系是如何建立与推动的？来看完整复盘！ 京东每次集团大促都会有无数的问题等待我们去解决，在此给大家分享一下京东运营设计团队关于双 11 项目的复盘总结，希望共同探讨，一起学习进步 视觉定位 每次遇到集团大促，我们视觉团队都会倍感压力，不仅仅来自于运营团队业务要求的压力，也来自于年轻群体的购物趋势变化非常快，审美要求也越来越

阅读文章 >

欢迎关注「JellyDesign」的小程序：

大家好，这是 2023 年第一期干货素材合集！这期干货合集对于 UI 和 UX 设计师可能会更有吸引力，深色模式网站范例合集、SaaS 着陆页设计合集还有真实产品 UI 界面设计图库，这些都是 UI 和 UX 设计师日常设计的时候会用得上的好东西，另外，这次我还找到了设计工具快捷键合集网站以及一个全新的图片清晰度...

大家好，这是 2023 年第一期干货素材合集！这期 干货合集 对于 UI 和 UX 设计师可能会更有吸引力，深色模式网站范例合集、SaaS 着陆页设计合集还有真实产品 UI 界面设计图库，这些都是 UI 和 UX 设计师日常设计的时候会用得上的好东西，另外，这次我还找到了设计工具快捷键合集网站以及一个全新的图片清晰度提升服务，不过我个人最喜欢的，还是搜索垂直网络社区的搜索引擎和顶尖图库图片搜索引擎。

当然，在此之前记得看看往期干货中有没有你感兴趣的素材：

第四波！2022年12月精选实用设计干货合集 大家好，这有可能是 2022 年最后一期干货素材合集了！

阅读文章 >

下面我们具体看看这一期的干货：

1、基于 AI 的图片清晰度提升服务 https://letsenhance.io/

Let’s Enhance 是一个基于机器学习的照片清晰度提升服务，它可以在不损失照片素质的前提之下，最高将图片放大 16 倍，同时还可以借助算法提升照片的锐度，算法还能够帮你针对效果不好的照片修复细节，处理欠曝和过曝等光线问题。Let's Enhance 提供免费试用，对于高清图片有需求的可以尝试订阅他们的服务。

2、深色模式网站设计范例合集 https://www.darkmodedesign.com/

如今绝大多的 APP 都已经适配了深色模式，很多新的网站也开始有针对性地设计深色模式了。这些深色模式的网站大都在配色和设计上更为克制，并且支持在深色模式和浅色模式之间切换，有很多值得学习的地方。这个名为 Darkmodedesign 的网站是由设计师 Cai Cardenas 所创建，网站也都是由他亲手挑选，有需求的同学可以收藏一下。

3、垂直网络社区搜索引擎 https://thehiveindex.com/

现在很多资源、内容和技巧都需要去网络社区当中寻找，虽然 Reddit 这种百度贴吧式的社区里啥主题都有，但是真正细分而精准的社区相反不是那么容易找到。这个名为 Hive Index 的网站就专门搜集整合了这些垂直的小型社区，其中仅设计社区就搜集了70个。如果你正想寻找某些小型的专业的社区，不妨用这个网站来搜索一下。

4、SaaS 着陆设计大合集 https://saaslandingpage.com/

SaaS 类的产品和服务在页面设计上有很多相通的地方，这个网站汇集了全球范围内最顶级的 SaaS 服务的着陆页设计，给你作为参考。即使你本身所设计的并不是 SaaS 类的网站，也可以从这些素质极高的网站中汲取一些设计灵感。

5、顶尖图库素材搜索引擎 https://www.everypixel.com/

Everypixel 是一个图库聚合搜索引擎，它直接连接了 50 多个目前最顶级的图库，你可以透过它直接搜索搜索这些图库当中的图片，不过，EveryPixel 使用神经网络算法，将过时的图片和优质的图片区分开来，它还支持以图搜图，内置丰富的筛选功能，还支持付费图片在线比价，甚至可以按照作者来搜索。

6、设计工具快捷键合集 https://shortcuts.design/

虽然有的同学可能会直接买个带快捷键列表的鼠标垫来方便查询，但是鼠标垫不可能摆满所有设计工具的快捷键。这个名为 Design Shortcuts 的网站将目前绝大多数的主流设计工具的快捷键都梳理总结了下来，在快捷键这件事情上，可能会比鼠标垫要实用一点。

7、真实产品的 UI 界面设计图库 https://designvault.io/

做 UI 和 UX 的同学对于这类 UI 素材库应该还是有较强需求的，Design Vault 将常见的 APP 全部都截图，然后按照功能和界面属性进行了详细的分类，打开网站首页之后，你可以直接从各个界面控件和功能页面的分类进去查看不同 APP 的设计，也可以直接浏览刚刚被收录的最新 APP 的设计。

大家好，这是 2023 年第一期干货素材合集！这期干货合集对于 UI 和 UX 设计师可能会更有吸引力，深色模式网站范例合集、SaaS 着陆页设计合集还有真实产品 UI 界面设计图库，这些都是 UI 和 UX 设计师日常设计的时候会用得上的好东西，另外，这次我还找到了设计工具快捷键合集网站以及一个全新的图片清晰度...

大家好，这是 2023 年第一期干货素材合集！这期 干货合集 对于 UI 和 UX 设计师可能会更有吸引力，深色模式网站范例合集、SaaS 着陆页设计合集还有真实产品 UI 界面设计图库，这些都是 UI 和 UX 设计师日常设计的时候会用得上的好东西，另外，这次我还找到了设计工具快捷键合集网站以及一个全新的图片清晰度提升服务，不过我个人最喜欢的，还是搜索垂直网络社区的搜索引擎和顶尖图库图片搜索引擎。

当然，在此之前记得看看往期干货中有没有你感兴趣的素材：

第四波！2022年12月精选实用设计干货合集 大家好，这有可能是 2022 年最后一期干货素材合集了！

阅读文章 >

下面我们具体看看这一期的干货：

1、基于 AI 的图片清晰度提升服务 https://letsenhance.io/

Let’s Enhance 是一个基于机器学习的照片清晰度提升服务，它可以在不损失照片素质的前提之下，最高将图片放大 16 倍，同时还可以借助算法提升照片的锐度，算法还能够帮你针对效果不好的照片修复细节，处理欠曝和过曝等光线问题。Let's Enhance 提供免费试用，对于高清图片有需求的可以尝试订阅他们的服务。

2、深色模式网站设计范例合集 https://www.darkmodedesign.com/

如今绝大多的 APP 都已经适配了深色模式，很多新的网站也开始有针对性地设计深色模式了。这些深色模式的网站大都在配色和设计上更为克制，并且支持在深色模式和浅色模式之间切换，有很多值得学习的地方。这个名为 Darkmodedesign 的网站是由设计师 Cai Cardenas 所创建，网站也都是由他亲手挑选，有需求的同学可以收藏一下。

3、垂直网络社区搜索引擎 https://thehiveindex.com/

现在很多资源、内容和技巧都需要去网络社区当中寻找，虽然 Reddit 这种百度贴吧式的社区里啥主题都有，但是真正细分而精准的社区相反不是那么容易找到。这个名为 Hive Index 的网站就专门搜集整合了这些垂直的小型社区，其中仅设计社区就搜集了70个。如果你正想寻找某些小型的专业的社区，不妨用这个网站来搜索一下。

4、SaaS 着陆设计大合集 https://saaslandingpage.com/

SaaS 类的产品和服务在页面设计上有很多相通的地方，这个网站汇集了全球范围内最顶级的 SaaS 服务的着陆页设计，给你作为参考。即使你本身所设计的并不是 SaaS 类的网站，也可以从这些素质极高的网站中汲取一些设计灵感。

5、顶尖图库素材搜索引擎 https://www.everypixel.com/

Everypixel 是一个图库聚合搜索引擎，它直接连接了 50 多个目前最顶级的图库，你可以透过它直接搜索搜索这些图库当中的图片，不过，EveryPixel 使用神经网络算法，将过时的图片和优质的图片区分开来，它还支持以图搜图，内置丰富的筛选功能，还支持付费图片在线比价，甚至可以按照作者来搜索。

6、设计工具快捷键合集 https://shortcuts.design/

虽然有的同学可能会直接买个带快捷键列表的鼠标垫来方便查询，但是鼠标垫不可能摆满所有设计工具的快捷键。这个名为 Design Shortcuts 的网站将目前绝大多数的主流设计工具的快捷键都梳理总结了下来，在快捷键这件事情上，可能会比鼠标垫要实用一点。

7、真实产品的 UI 界面设计图库 https://designvault.io/

做 UI 和 UX 的同学对于这类 UI 素材库应该还是有较强需求的，Design Vault 将常见的 APP 全部都截图，然后按照功能和界面属性进行了详细的分类，打开网站首页之后，你可以直接从各个界面控件和功能页面的分类进去查看不同 APP 的设计，也可以直接浏览刚刚被收录的最新 APP 的设计。

前言表单是我们生活中常见的信息添加、录入的方式之一，如何进行表单的设计也是 B 端设计师的必修课。身边别的部门的同事常常会说：表单不就是几个输入框，几个组件组成的东西么，挺简单的，有什么好设计的。但通常情况下，越是简单的东西，要思考的点却越多，想要把一个表单做好也是一件不容易的事情。

前言

表单是我们生活中常见的信息添加、录入的方式之一，如何进行表单的设计也是 B 端设计师的必修课。身边别的部门的同事常常会说：表单不就是几个输入框，几个组件组成的东西么，挺简单的，有什么好设计的。但通常情况下，越是简单的东西，要思考的点却越多，想要把一个表单做好也是一件不容易的事情。

生活中，大多数人都不喜欢表单，比如前段时间有一些许久没有联系过的朋友让我帮忙填写一下调查问卷，作为一个热心市民的我，自然是选择点开链接帮忙填写；一鼓作气填了一段时间后，看着剩下的问题，我不耐烦的放弃了填写这个调查问卷。所以作为设计师，我们应该“由内而外”而不是“由外而内”的去设计表单，如何让表单变得更容易让人接受也是设计师应该考虑的问题。

更多兆日UCD的干货：

6000字干货！3个优秀交互设计师应该具备的边界感 引言 售卖软件服务的公司，最理想的状态就是开发一套通用的解决方案或产品，而几乎不用接收任何定制化需求（定制化需求大多会被内化成通用产品的新功能）。

阅读文章 >

一、什么是表单 表单是一种用于信息添加、录入的页面类型。是连接用户与数据库的桥梁，通过引导用户进行信息的填写，从而提交数据给后台。在用户填写提交时，还需要对用户输入内容进行校验与反馈，保证用户信息填写的完整度。

填写表单是一件麻烦事，当我们想做的是投票、网上购物或者添加好友之前，总是会有表单防碍着我们。正因为多数人不喜欢填写表单，所以在做 表单设计 时，我们的首要目标是让人们迅速轻松的完成填写，同时获得系统和用户想要的东西。

二、如何进行表单设计 1. 表单拆分

基础表单中会有以下六个元素：

1. 标签：标签文本主要是解释输入项的含义，一般不宜太长，需要简明扼要，快速让用户理解；还有一部分是告知用户哪些是必填项。

2. 占位提示：直接展示在输入项中，采用弱提示文本对所需信息描述，当用户输入信息时即消失。

3. 校验：对输入项进行验证，并给出反馈提示，如：用户未填写，格式错误、内容错误等

4. 基础组件：可交互输入的区域，是构成表单的核心内容，主要有：输入框、单（复）选框、上传、时间选择器、开关……

5. 提示：描述该输入项需要的输入类型，如：上传的文件类型

6. 按钮：用户完成输入后，点击按钮进行提交、进入下一步等，按钮一般是跟随的最后一个输入项后面，若输入项超出一屏显示，建议将按钮悬浮固定在底部。

当我们开始制作某一表单的时候，我们需要强迫自己思考一下每个元素的 UI 问题：

这个元素是什么类型的？ 如何处理其他这类东西？ 元素之间有什么关系？ 通过合并相同类别元素或者扩展该元素和其他元素之间的关系，能否简化设计？ 2. 表单录入模式

表单根据录入模式可以分为：单步表单、分步表单和高级表单

① 单步表单：

单步录入指的是在一个页面即可完成内容输入。使用于内容较少，结构简单的场景，我们常见的登录页就是典型的单步表单。

② 分步表单：

内容较多、录入内容的方式差异较大的情况且业务本身具有流程化特性，一般通过添加分步导航展示内容。常见的例如银行转账，修改密码等等。

③ 高级表单（分组表单）：

高级表单（分组表单）：主要用于需要一次性录入大批量数据的场景。高级表单与分步表单有点类似，都是为了减轻用户填写压力，将填写内容进行分块。不同的点在于，分步表单的流程化明显，后一步填写的内容都是基于前一步来填写、是前一步反馈。

3. 表单的页面框架

表单的页面框架指的是承载着整个表单页的页面框架，即：整页式（新页面）、弹窗式、侧边栏式。因为其页面面积大小不一样，所以使用情境有所不同。

整页式（新页面）：最常用方式，适用于绝大部分的表单，可以支持构建复杂的表单。

弹窗式：通过小面积的弹窗进行轻量化的编辑，方便快速进行增、删、改、查；输入项较少，一般不会有滚动条。

侧边栏式：与弹窗式相似，通过小面积的侧边栏进行编辑；可承载比弹窗更复杂一些的表单内容，可以有滚动条。

我们在选择页面框架时通常需要综合以下三个因素去考虑：

内容数量 ：内容如果较多不适合使用弹窗式 与原页面关联程度 ：需与原页面关联强建议使用弹窗式、侧边栏式 表单的复杂程度： 一般高级表单、分组表单、分步骤表单、有表格聚合的表单、联动表单等都建议采用整页式的框架来展现。 4. 表单的排列方式

① 布局方式

在制作表单的时候分成两种排列方式：单列布局和多列布局。我们可以通过以下几个因素去考虑使用什么布局：

1. 在输入项不多的情况下，建议采用单列布局，因为单列布局，用户填写的路径就是从上至下的一条直线，十分符合用户的视觉动线，能够提高用户浏览与填写的效率。

2. 多列布局的表单会导致用户的视觉路径变长，用户需以 “Z” 字形的视觉动线扫描表单，会提高浏览与填写的效率，并且多列表单容易造成用户填写时的混乱，易填错，体验差。

但是有时部分业务诉求和某些特性的场景要求，会需要在有限的空间上放入更多的控件来收集用户的信息，这时就不得不使用多列布局的样式，因为多列能够省纵向空间。

单列布局

优势：视觉路径清晰，填写效率高，体验好；

劣势：垂直空间占用率高。

建议使用场景：表单内容较少的情况下使用单列布局

多列布局

优势：省空间，能够放置更多的控件；

劣势：视觉路径模糊，填写成本高，填写易出错。

建议使用场景：关联性强的填写项横向排放，且将该列中最重要填写项的放于最左侧。

② 标签对齐方式

标签的对齐方式有：左对齐、右对齐和顶对齐，除了需要考虑单列式布局还是多列式布局，还有我们也需要考虑标签的对齐方式。

马泰奥·彭佐在 2006 年 7 月对表单的每种对齐方式做过眼动测试研究，根据研究结论做出以下分析：

顶对齐标签：

研究中，从标签移动到输入框只需 50 毫秒。比左对齐标签快了 10 倍，后者需要 500 毫秒；比右对齐标签方式快 2 倍，后者高达 240 秒。能迅速填完顶对齐标签表单的原因之一，是因为眼球只需要在标签和输入框之间进行上下单向运动。

优势：眼动测试中移动速度最快，最有利于提高用户填写表单的效率。标签字数相比于左右对齐标签可容纳更多字数。

劣势：纵向空间占用率高，对于小屏用户不太友好（设计前需要考虑用户使用场景以及使用设备）

建议使用场景：希望用户快速完成表单；对标签的扩展性高，有国际化需求（中文转英文，英文会比较长）；更适用于弹窗式、侧边栏式布局。

右对齐标签：

如果要尽量减少表单占用垂直屏幕空间，右对齐能提供快速完成时间。研究中，专家用户和新手用户扫视（眼睛运动）右对齐标签表单的标签和输入框的平均时间分别在 170 毫秒和 240 毫秒，而填写完成时间比左对齐快 2 倍。

优势：标签和输入框位置紧密，更方便填写

劣势：右对齐的布局会造成标签的左侧不齐，影响快速阅读表单的效率问题；如果增加填写项标题字数过多，整体的表单页都需要修改，右对齐灵活性低。 建议使用场景：适用于需要填写效率但受到屏幕垂直面积限制的页面。更适用于整页式布局。

左对齐标签：

在顶、右、左三种方案中，左对齐表单填写速度最慢。因为左对齐表单解析问题时眼球定位次数最多，用户一般情况下都能将左对齐布局中的标签和输入框联系起来，只是花费时间较长。在研究中，典型扫视时间为 500 毫秒，很长说明用户经历了沉重的认知压力。

优势：易浏览标签；占用纵向空间较少

劣势：标签和输入框距离较大，表单填写效率低

建议使用场景：需要让用户认真思考后填写的页面；更适用于整页式布局

输入字段上方的粗体标签

在顶对齐的情况下，设计师可能会想：如果我们将标签进行加重，这增加了它们的视觉重量，并将它们带到了布局的最前面，这样说是不是可以让用户更好的去完成表单的填写呢？但事实却和设想相反：粗体标签反而增加了用户填写的负担。

粗体标签导致从标签移动到输入字段的扫视时间增加了近 60% ，从没有粗体标签的 50 毫秒到有粗体标签的 80 毫秒，更突出的标签没有明显优势。粗体标签更难让用户阅读和感知——可能是因为粗体文本和输入字段的相邻粗边框之间存在更多的视觉混淆。

小结

标签位置：单从效率角度看，顶对齐>右对齐>左对齐，但是根据应用场景，效率快并不是我们选择标签对齐方式的唯一的指标。在大多数情况下，将标签放在输入字段上方效果更好，顶对齐的情况下标签的扩展性更高，且用户不会被迫分开查看标签和输入字段。需要注意在视觉上将下一个输入字段的标签与前一个输入字段分开。

粗体标签：阅读粗体标签对用户来说有点困难，因此最好使用纯文本标签。但是，当使用粗体标签时，可能希望将输入字段设置为没有粗边框。

三、表单校验形式 1. 什么是表单的校验

为了让用户准确的填写表单，在用户填写表单中/填写表单后，常常会增加我们常说的“反馈提示“，针对反馈信息的准确性，我们会采用两种校验形式：前端校验和后端校验。

① 前端校验：

主要负责校验输入的内容格式是否正确；例如常见的手机号格式是否正确、密码格式是否符合要求。

② 后端校验：

与数据库相关，主要负责校验输入内容是否正确；例如常见的手机号是否存在，密码是否正确。

③ 校验触发条件：

用户输入时进行校验（例如：注册输入密码时，实时显示密码强度） 用户输入完成失去焦点时进行校验（例如：注册重复输入密码时，密码与前一次输入的是否一致） 用户输入完成点击操作按钮时进行校验（例如：注册点击提交时进行校验，手机号已被注册所以未通过注册） ④ 报错方式：

即时报错 输入完成后点击 提交/下一步/保存 等操作后报错 2. 校验形式

根据不同的校验触发条件和报错方式，我们可以组合成以下几种校验形式：

① 输入时即时验证，即时报错

用户在输入的过程中进行实时验证，输入框处于聚焦时开始提示，随着输入的过程，符合要求后已与用户通过验证的反馈。例如在注册阿里云账号时，设置密码需要满足三个条件，这里采取了即时验证。

优点：可以实时告知用户表单的填写时候符合规范

缺点：实时验证会使用户分散注意力，也有可能会引起用户的反感

使用场景：注册时需要设置密码，通过密码不同的组成，时判断密码的强度，比如纯数字密码符合最低安全要求密码，但增加大些字母和小写字母后就形成了更安全的密码

② 失去焦点后即时报错

用户在输入完成后进行验证，输入框失去聚焦后（即用户点击输入框以外的位置后）与用户进行反馈。例如在注册网易邮箱时，填写完毕后即时报错。

优点：为用户修改错误节省时间、避免出现很多错误需要改正的情况。

缺点：如果输入有误，用户需要多一步操作，点击会有错误的输入框进行修改。

使用场景：注册用户名时，取消聚焦后会反馈用户名是否可用，不可用的情况下是被注册还是格式有问题。

③ 操作后（保存/提交/下一步）后全部报错

用户完成表单填写后，点击操作按钮（保存/提交/下一步），系统将表单统一上传到后端数据库中进行对比后集中与用户进行反馈。

优点：减少对用户的打扰，减少后端服务器压力，提高效率

缺点：用户只能点击按钮后才可以得到反馈，不能及时修改；若表单过长，用户返回修改的路径也将增加。

使用场景：登录账号是判断密码是否正确

最后说说 表单是后台最常见的场景之一，所以表单设计是 B 端产品最重要的部分之一。表单的设计是需要产品经理和设计师共同解决的难题。表单需要注意的点还有很多，我们在设计表单的同时，不仅要考虑上述的这些问题，还得“由内而外”的考虑表单为什么这么做，在用户录入信息时能降本提效才是我们应该做的。

更多表单设计干货：

想把表单的用户体验做到极致？我总结了这5个细节！ Hi，我是彩云。

阅读文章 >

把表单体验做到极致！11个表单设计的高效技巧 大家好，这里是设计夹，今天为大家分享的是「表单设计」。

阅读文章 >

欢迎关注团队微信公众号：兆日 UCD

​可视化图表是提升信息传递效率的一种有效方法，特别是在B端平台中经常遇到对统计的数据分析总结的呈现。我们设计师在设计图表的过程中，如果没有系统的可视化知识，会出现设计的图表虽然美观但图表不能很好的反应数据的情况。那么，在复杂的数据关系中如何设计和选用图表，如何在好看的同时提升信息传达效率，看完这篇文章希望对你的设...

​

可视化图表 是提升信息传递效率的一种有效方法，特别是在B端平台中经常遇到对统计的数据分析总结的呈现。我们设计师在设计图表的过程中，如果没有系统的可视化知识，会出现设计的图表虽然美观但图表不能很好的反应数据的情况。那么，在复杂的数据关系中如何设计和选用图表，如何在好看的同时提升信息传达效率，看完这篇文章希望对你的设计过程有所帮助。

往期干货：

如何做好视觉可视化设计？我总结了这72种图表类型 视觉学习者（Visual learner）是那些用图像进行思考的人[1]，这些人将脑中的画面转述成词语去与他人进行沟通。

阅读文章 >

一、为什么要数据可视化 数据可视化就是用图表来表示数据信息，它所传达的信息包括你所拿到的数据源和你分析后的结果，再通过图形强化用户的理解和记忆。能让用户简洁明了的获取更多的信息，是我们可视化的最终目的。

举个例子，同样一组数据，用表格的形式呈现是很难有所洞察的；如果将各个地区维度的数据聚合以柱图形式呈现，很容易就能看出各个地区间数据的差异，并从中洞察规律。

关于如何设计好数据可视化图表，这边总结了三个步骤：选择适合的图表，强化视觉层次，图表响应式适配。

1. 选择适合的图表 数据可视化的图表种类繁多，当我们真的开始作图，往往会遇到一个困境：有这么多类型，要如何选择正确的图表呢？首要依据是考虑所要传达的信息意图，即所要制作的图表它的任务是什么，再通过分析数据关系来选择表达方式；第二层意图是图表传达内容，这时候我们就需要根据数据的特征去突出和强化。

① 分析数据关系

根据数据分析的方式来看，每一种图表都对应了一种数据关系。从数据的维度出发弄清呈现结构，再结合数据关系作出选择。了解图表的可能知道，一般图表的数据关系有构成、比较、分布，以商业数据为例，常见的还有流转关系。

构成关系

构成关系的图表表达的是部分和整体的关系，用于分析总体和各部分的占比比例，构成关系一般局部元素加起来为总数。如果只是想对比个别组成部分的大小，也可以使用比较关系的图表。

常用图表：饼/环图、堆叠图、面积图等，如涉及到层级结构，还会用矩形树图或旭日图等特殊结构图表。

关键词：“占比、比例、百分比”

比较关系

比较关系是基础分析中常用的一种图表类型。在一定的取值范围内，通过对两个或两个以上的指标分析，可以直观的看到变化和差距。对比分析包括趋势对比和分类对比两种形式，趋势对比用于表示一段时间内数据的变化，分类对比用于比较数据规模。

常用图表：趋势对比常用图表有折线图、散点图等；分类对比常用条形图、柱状图、气泡图等。

关键词：“增减、升降、涨跌、波动”

分布关系

利用空间分区来展示数据之间的分布关系，常用于体现两个或以上数据的相关性。

常用图表：散点图、热力图、雷达图等

关键词：“随着……而变化、A/B之间的相关性、交/并集”等

关联与流转

流转关系是 B 端数据常用的一种关系，它可以动态的体现相关路径下对象之间的关系、状态、数据量的流转变化等，以面积或颜色深浅展示了多个状态或对象之间的流动量或流动强度。

常用图表：关系图、桑基图、漏斗图、进度图等

关键词：“流程步骤、留存、转化、关系”

② 分析数据特征

按数据关系和分析目的选择好图表类型后，第二步是根据数据特征选择更加适合的展示方式。从数据分析的角度常见数据特征有：变量特征、维度特征、层级特征、流程特征。

变量特征

分辨一个指标通常有两类特征，按变量值是否连续可分为连续数据与离散数据两种。连续数据通常会统计一组数据的变化趋势，离散数据通常统计各分类下数量的变化。

连续型数据：指在一定区间内可以任意取值的数据叫连续数据，其数值是连续不断的。如身高、体重等带有时间因素变量的数据等，通常用折线图体现变化趋势。

离散型数据：指其数值只能用自然数或整数单位计算的数据。如当天销量、进店人数等表示分类类型的数据，用柱图表现更加体现变量的特征。

维度特征

多维度分析需要将多个变量在同一平面上直观的表示，可以选择使用极坐标系去展示多个维度变量。如果希望对比多组数据，可使用不同颜色进行分类

根据分析视角选择图表：对于多维度变量的数据我们需要明确分析的视角，去找准对应的数据映射。如案例中多个班级的科目成绩的这组数据，如需要全局视角查看个班的综合素质，推荐使用雷达图；对比单科成绩的变化分布，则推荐使用堆积图。

层级特征

多层级数据由多个部分构成一个整体，又称树形结构数据。除了用结构树图表表现以外，还可以考虑以下两种图表类型：

矩形树图：突出子层级占比大小。最初是用来显示计算机硬盘驱动器上文件的结构和大小，它以面积的形式突出展现各个子层级节点的占比，可帮助用户看到数据的层次结构以及各层级之间的关系。

例如：上图显示了市场销售额的来源结构。长方形的大小取决于各国家的平均销售额，通过色调来区分不同类型，颜色的深浅代表分类下的子集，面积体现销售占比。对比一般结构树图表，它的优势在于可以有效利用空间。

旭日图：突出细分层级关系。由多个圆环图嵌套而成，也称为径向树图，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。常用于细分分析方法，将事物从大到小进行拆解。每个级别的数据通过 1 个圆环表示，离原点越近代表圆环级别越高。 旭日图在显示一个环如何被划分为多个层级时最有效，而矩形树图适合比较相对大小。

流程特征

流转关系是表达数据转化流程的重要类型，不仅包含统计意义上的数据总和，同时还表达了信息流转的路径；其中桑基图和漏斗图都可以表达路径中流量的变化，不同的是桑基图重点强调流量的强度和走向，漏斗图更加注重突出转化率和效果，根据不同的表达目的选用。

2. 强化视觉层次 选择合适的图表后，在信息传达上也需要正确的表达，展示形式美观的同时能够清晰的体现数据特点。

① 强化数据特性

使用图表正确的表达信息，需要设计师在强化数据特性的同时避免偏差

趋势易感知：折线图数值如过于平均导致趋势平缓，有时候无法体现偏差；在强调数据趋势的场景下，推荐用动态取值范围让波动保持在一定范围内，放大波动占比更突出趋势。

展示更准确：柱状图依靠柱体面积体现最终数值，使用动态范围截断将会导致数据解读不完整；始终将 y 轴从 0 开始，才能更准确的反映柱图中的值。

② 色彩视觉传达

除了在设计构图上优化以外，颜色的选择也是图表重要的的信息表达元素。颜色会影响我们对数据的感知，错误的取色会让信息读取产生误解。我们可以通过不同的分析目的设置意图色板，精确传达信息同时后续的项目在选用时也可以达到用色的统一。

我们在之前的文章里有介绍过图表的取色模型，通过调整颜色 HSL 值的区间，可以得到以下三种意图色板：

定性型-分类色板：用于区分不同的类型，又称为无序色板。适合区分没有内在顺序的类别

定量分歧型-发散色板：通过两边互补色来体现，具有明亮的中间值，然后以不同的色调在刻度的两端变暗。通常用于可视化负值和正值

定量顺序型-顺序色板：从亮到暗或相反的渐变。适合可视化从低到高的数字。

那么我们要怎么样去使用这些色板呢？下面几个案例将带你了解其中的差异。

定性型：使用色调来进行分类

数据内在没有顺序差别时，建议使用色调值（H）进行区分；如定义国家、行业等类型。如果希望图表看起来更加专业，以下有几项分类色板的小建议：

选取尽量少的色调：取色时无需使用整个色环，使用邻近色或互补色的取色方式显得更加专业。

色板适度明暗交替：一些视障人士无法区分色相，主要靠颜色的明暗差异来识别，通过饱和度和暗度的调整，创造明暗交替的色板。

定量型：使用深浅色板强调内在顺序

如果在同一个分类下包含子类别，或者数据本身具有排名属性，那么建议使用连续色板来突出他们内在的顺序，使图表更加易读。

顺序色板-选择合适的插值：根据数据的分布情况选择不同的的插值断点，突出数据的差异。如以下案例中，根据统计学概念设定不同的取值区间，左侧示例使用的是平均线性差值，反映的是数据的集中趋势；右侧示例使用的是中位数插值，能更好的体现数据分布的形态。

发散色板-关注对比色的识别性：尽量避免红绿配色，如需使用绿色，偏黄或偏蓝的绿色更易分辨，对视障人士也更加友好。

3. 图表中的响应式设计 B 端图表可视化的数据一般是在网页或移动端上动态显示。不同于平面展示或汇报，在基础设计完成后还需要考虑到图表展示的环境，根据不同端去适配显示效果，以适应各种复杂情况。而动态显示带来的交互特性也让数据展示有了更多的可能性。

① 布局框架适配

在网页端显示时，有时候同一个图表需要考虑不同容器下的适配方式。根据数据相关性变化元素的适应形态，将非必要的的元素转化或隐藏，保留重要的图形元素去适应当前空间；元素隐藏后使用悬浮交互来保证信息的展示，保持图表的可读性同时也避免产生元素的重叠。

如案例中的图表，在不同尺寸下通过改变和隐藏图表元素，以达到适配当前空间的效果。

② 图表元素适配

要适配移动端，网页端横向延展的显示方式需要适应移动端纵向空间的显示。除了呈现角度的改变外，还需要考虑手机屏幕的尺寸和图表元素的适配性，去兼容相关的交互操作。

信息浮层：在图表中，信息卡元素是传达信息内容的重要组件，在网页端中悬浮展示，通常会占据很大空间；图表适配移动端后，信息浮层改动到图表上方常驻显示，并跟随手指的滑动变化响应数值，完整展示信息的同时也避免了页面抖动。

坐标轴标签：过长的坐标标签在适配过程中会产生重叠，而省略也会造成信息展示的不完整。我们需要针对不同的坐标轴类型给出响应的规范。如文本类轴标签我们可以采用省略、换行、旋转等方式适配，避免信息的缺失。针对有连续型的数据类坐标轴我们可以使用抽样、转化单位等方式适配，精简空间避免堆叠。

③ 极值适配

因 B 端平台的特性，我们无法预知客户传入的数据量，可能会遇到因数据量过多，造成图表显示不佳，数据读取困难等问题。这种情况下，提前考虑数据极限场景，通过交互的形式变化的方式让用户获取完整信息，提升理解同时信息展示更灵活。

缩放和平移：在数据范围过多时增加取值范围的缩略轴组件，通过限制展示范围让数据量显示可控。

互动切换视图：如果折线的类别过多且无法省略的，建议分组查看。默认状态仅当前组折线高亮，其他数据以浅色显示，通过切换的方式查看其他组别的信息。

悬浮鼠标高亮：在分类过多不好分辨时，可使用悬浮高亮的交互方式突出相关联的数据组。

还有悬浮放大、点击下钻、联动图表等交互行为可以组成更加丰富的图表。因篇幅原因，在这篇文章就不做深入讲解了，以后可独立介绍。

结语 数据可视化在 B 端设计场景中发挥着重要作用。设计师在表达数据之美的同时更加准确，才能更直观地向用户传达数据的价值。使业务人员能够从复杂的业务数据中快速、直接地找到重要数据，确保用户能够更好的接收信息，才是可视化的关键。

* 以上图表中均为虚拟数据，仅作为案例参考

8000 字深度长文！B端数据可视化设计指南（信息图表篇） 在如今的工作中（尤其是 B 端）越来越多的会开始出现数据可视化的身影，对于一部分小伙伴来说这个概念是较为陌生的，面对这道无形之中提升的“门槛”我们常常会表现的手足无措。

阅读文章 >

想做好数据可视化？先掌握常见 5 类图表的特点和设计细节 “数据可视化的目的，是要对数据进行可视化处理，以能够明确地、有效地传递信息。

阅读文章 >

欢迎关注作者的微信公众号：「百度MEUX」

前言表单是我们生活中常见的信息添加、录入的方式之一，如何进行表单的设计也是 B 端设计师的必修课。身边别的部门的同事常常会说：表单不就是几个输入框，几个组件组成的东西么，挺简单的，有什么好设计的。但通常情况下，越是简单的东西，要思考的点却越多，想要把一个表单做好也是一件不容易的事情。

前言

表单是我们生活中常见的信息添加、录入的方式之一，如何进行表单的设计也是 B 端设计师的必修课。身边别的部门的同事常常会说：表单不就是几个输入框，几个组件组成的东西么，挺简单的，有什么好设计的。但通常情况下，越是简单的东西，要思考的点却越多，想要把一个表单做好也是一件不容易的事情。

生活中，大多数人都不喜欢表单，比如前段时间有一些许久没有联系过的朋友让我帮忙填写一下调查问卷，作为一个热心市民的我，自然是选择点开链接帮忙填写；一鼓作气填了一段时间后，看着剩下的问题，我不耐烦的放弃了填写这个调查问卷。所以作为设计师，我们应该“由内而外”而不是“由外而内”的去设计表单，如何让表单变得更容易让人接受也是设计师应该考虑的问题。

更多兆日UCD的干货：

6000字干货！3个优秀交互设计师应该具备的边界感 引言 售卖软件服务的公司，最理想的状态就是开发一套通用的解决方案或产品，而几乎不用接收任何定制化需求（定制化需求大多会被内化成通用产品的新功能）。

阅读文章 >

一、什么是表单 表单是一种用于信息添加、录入的页面类型。是连接用户与数据库的桥梁，通过引导用户进行信息的填写，从而提交数据给后台。在用户填写提交时，还需要对用户输入内容进行校验与反馈，保证用户信息填写的完整度。

填写表单是一件麻烦事，当我们想做的是投票、网上购物或者添加好友之前，总是会有表单防碍着我们。正因为多数人不喜欢填写表单，所以在做 表单设计 时，我们的首要目标是让人们迅速轻松的完成填写，同时获得系统和用户想要的东西。

二、如何进行表单设计 1. 表单拆分

基础表单中会有以下六个元素：

1. 标签：标签文本主要是解释输入项的含义，一般不宜太长，需要简明扼要，快速让用户理解；还有一部分是告知用户哪些是必填项。

2. 占位提示：直接展示在输入项中，采用弱提示文本对所需信息描述，当用户输入信息时即消失。

3. 校验：对输入项进行验证，并给出反馈提示，如：用户未填写，格式错误、内容错误等

4. 基础组件：可交互输入的区域，是构成表单的核心内容，主要有：输入框、单（复）选框、上传、时间选择器、开关……

5. 提示：描述该输入项需要的输入类型，如：上传的文件类型

6. 按钮：用户完成输入后，点击按钮进行提交、进入下一步等，按钮一般是跟随的最后一个输入项后面，若输入项超出一屏显示，建议将按钮悬浮固定在底部。

当我们开始制作某一表单的时候，我们需要强迫自己思考一下每个元素的 UI 问题：

这个元素是什么类型的？ 如何处理其他这类东西？ 元素之间有什么关系？ 通过合并相同类别元素或者扩展该元素和其他元素之间的关系，能否简化设计？ 2. 表单录入模式

表单根据录入模式可以分为：单步表单、分步表单和高级表单

① 单步表单：

单步录入指的是在一个页面即可完成内容输入。使用于内容较少，结构简单的场景，我们常见的登录页就是典型的单步表单。

② 分步表单：

内容较多、录入内容的方式差异较大的情况且业务本身具有流程化特性，一般通过添加分步导航展示内容。常见的例如银行转账，修改密码等等。

③ 高级表单（分组表单）：

高级表单（分组表单）：主要用于需要一次性录入大批量数据的场景。高级表单与分步表单有点类似，都是为了减轻用户填写压力，将填写内容进行分块。不同的点在于，分步表单的流程化明显，后一步填写的内容都是基于前一步来填写、是前一步反馈。

3. 表单的页面框架

表单的页面框架指的是承载着整个表单页的页面框架，即：整页式（新页面）、弹窗式、侧边栏式。因为其页面面积大小不一样，所以使用情境有所不同。

整页式（新页面）：最常用方式，适用于绝大部分的表单，可以支持构建复杂的表单。

弹窗式：通过小面积的弹窗进行轻量化的编辑，方便快速进行增、删、改、查；输入项较少，一般不会有滚动条。

侧边栏式：与弹窗式相似，通过小面积的侧边栏进行编辑；可承载比弹窗更复杂一些的表单内容，可以有滚动条。

我们在选择页面框架时通常需要综合以下三个因素去考虑：

内容数量 ：内容如果较多不适合使用弹窗式 与原页面关联程度 ：需与原页面关联强建议使用弹窗式、侧边栏式 表单的复杂程度： 一般高级表单、分组表单、分步骤表单、有表格聚合的表单、联动表单等都建议采用整页式的框架来展现。 4. 表单的排列方式

① 布局方式

在制作表单的时候分成两种排列方式：单列布局和多列布局。我们可以通过以下几个因素去考虑使用什么布局：

1. 在输入项不多的情况下，建议采用单列布局，因为单列布局，用户填写的路径就是从上至下的一条直线，十分符合用户的视觉动线，能够提高用户浏览与填写的效率。

2. 多列布局的表单会导致用户的视觉路径变长，用户需以 “Z” 字形的视觉动线扫描表单，会提高浏览与填写的效率，并且多列表单容易造成用户填写时的混乱，易填错，体验差。

但是有时部分业务诉求和某些特性的场景要求，会需要在有限的空间上放入更多的控件来收集用户的信息，这时就不得不使用多列布局的样式，因为多列能够省纵向空间。

单列布局

优势：视觉路径清晰，填写效率高，体验好；

劣势：垂直空间占用率高。

建议使用场景：表单内容较少的情况下使用单列布局

多列布局

优势：省空间，能够放置更多的控件；

劣势：视觉路径模糊，填写成本高，填写易出错。

建议使用场景：关联性强的填写项横向排放，且将该列中最重要填写项的放于最左侧。

② 标签对齐方式

标签的对齐方式有：左对齐、右对齐和顶对齐，除了需要考虑单列式布局还是多列式布局，还有我们也需要考虑标签的对齐方式。

马泰奥·彭佐在 2006 年 7 月对表单的每种对齐方式做过眼动测试研究，根据研究结论做出以下分析：

顶对齐标签：

研究中，从标签移动到输入框只需 50 毫秒。比左对齐标签快了 10 倍，后者需要 500 毫秒；比右对齐标签方式快 2 倍，后者高达 240 秒。能迅速填完顶对齐标签表单的原因之一，是因为眼球只需要在标签和输入框之间进行上下单向运动。

优势：眼动测试中移动速度最快，最有利于提高用户填写表单的效率。标签字数相比于左右对齐标签可容纳更多字数。

劣势：纵向空间占用率高，对于小屏用户不太友好（设计前需要考虑用户使用场景以及使用设备）

建议使用场景：希望用户快速完成表单；对标签的扩展性高，有国际化需求（中文转英文，英文会比较长）；更适用于弹窗式、侧边栏式布局。

右对齐标签：

如果要尽量减少表单占用垂直屏幕空间，右对齐能提供快速完成时间。研究中，专家用户和新手用户扫视（眼睛运动）右对齐标签表单的标签和输入框的平均时间分别在 170 毫秒和 240 毫秒，而填写完成时间比左对齐快 2 倍。

优势：标签和输入框位置紧密，更方便填写

劣势：右对齐的布局会造成标签的左侧不齐，影响快速阅读表单的效率问题；如果增加填写项标题字数过多，整体的表单页都需要修改，右对齐灵活性低。 建议使用场景：适用于需要填写效率但受到屏幕垂直面积限制的页面。更适用于整页式布局。

左对齐标签：

在顶、右、左三种方案中，左对齐表单填写速度最慢。因为左对齐表单解析问题时眼球定位次数最多，用户一般情况下都能将左对齐布局中的标签和输入框联系起来，只是花费时间较长。在研究中，典型扫视时间为 500 毫秒，很长说明用户经历了沉重的认知压力。

优势：易浏览标签；占用纵向空间较少

劣势：标签和输入框距离较大，表单填写效率低

建议使用场景：需要让用户认真思考后填写的页面；更适用于整页式布局

输入字段上方的粗体标签

在顶对齐的情况下，设计师可能会想：如果我们将标签进行加重，这增加了它们的视觉重量，并将它们带到了布局的最前面，这样说是不是可以让用户更好的去完成表单的填写呢？但事实却和设想相反：粗体标签反而增加了用户填写的负担。

粗体标签导致从标签移动到输入字段的扫视时间增加了近 60% ，从没有粗体标签的 50 毫秒到有粗体标签的 80 毫秒，更突出的标签没有明显优势。粗体标签更难让用户阅读和感知——可能是因为粗体文本和输入字段的相邻粗边框之间存在更多的视觉混淆。

小结

标签位置：单从效率角度看，顶对齐>右对齐>左对齐，但是根据应用场景，效率快并不是我们选择标签对齐方式的唯一的指标。在大多数情况下，将标签放在输入字段上方效果更好，顶对齐的情况下标签的扩展性更高，且用户不会被迫分开查看标签和输入字段。需要注意在视觉上将下一个输入字段的标签与前一个输入字段分开。

粗体标签：阅读粗体标签对用户来说有点困难，因此最好使用纯文本标签。但是，当使用粗体标签时，可能希望将输入字段设置为没有粗边框。

三、表单校验形式 1. 什么是表单的校验

为了让用户准确的填写表单，在用户填写表单中/填写表单后，常常会增加我们常说的“反馈提示“，针对反馈信息的准确性，我们会采用两种校验形式：前端校验和后端校验。

① 前端校验：

主要负责校验输入的内容格式是否正确；例如常见的手机号格式是否正确、密码格式是否符合要求。

② 后端校验：

与数据库相关，主要负责校验输入内容是否正确；例如常见的手机号是否存在，密码是否正确。

③ 校验触发条件：

用户输入时进行校验（例如：注册输入密码时，实时显示密码强度） 用户输入完成失去焦点时进行校验（例如：注册重复输入密码时，密码与前一次输入的是否一致） 用户输入完成点击操作按钮时进行校验（例如：注册点击提交时进行校验，手机号已被注册所以未通过注册） ④ 报错方式：

即时报错 输入完成后点击 提交/下一步/保存 等操作后报错 2. 校验形式

根据不同的校验触发条件和报错方式，我们可以组合成以下几种校验形式：

① 输入时即时验证，即时报错

用户在输入的过程中进行实时验证，输入框处于聚焦时开始提示，随着输入的过程，符合要求后已与用户通过验证的反馈。例如在注册阿里云账号时，设置密码需要满足三个条件，这里采取了即时验证。

优点：可以实时告知用户表单的填写时候符合规范

缺点：实时验证会使用户分散注意力，也有可能会引起用户的反感

使用场景：注册时需要设置密码，通过密码不同的组成，时判断密码的强度，比如纯数字密码符合最低安全要求密码，但增加大些字母和小写字母后就形成了更安全的密码

② 失去焦点后即时报错

用户在输入完成后进行验证，输入框失去聚焦后（即用户点击输入框以外的位置后）与用户进行反馈。例如在注册网易邮箱时，填写完毕后即时报错。

优点：为用户修改错误节省时间、避免出现很多错误需要改正的情况。

缺点：如果输入有误，用户需要多一步操作，点击会有错误的输入框进行修改。

使用场景：注册用户名时，取消聚焦后会反馈用户名是否可用，不可用的情况下是被注册还是格式有问题。

③ 操作后（保存/提交/下一步）后全部报错

用户完成表单填写后，点击操作按钮（保存/提交/下一步），系统将表单统一上传到后端数据库中进行对比后集中与用户进行反馈。

优点：减少对用户的打扰，减少后端服务器压力，提高效率

缺点：用户只能点击按钮后才可以得到反馈，不能及时修改；若表单过长，用户返回修改的路径也将增加。

使用场景：登录账号是判断密码是否正确

最后说说 表单是后台最常见的场景之一，所以表单设计是 B 端产品最重要的部分之一。表单的设计是需要产品经理和设计师共同解决的难题。表单需要注意的点还有很多，我们在设计表单的同时，不仅要考虑上述的这些问题，还得“由内而外”的考虑表单为什么这么做，在用户录入信息时能降本提效才是我们应该做的。

更多表单设计干货：

想把表单的用户体验做到极致？我总结了这5个细节！ Hi，我是彩云。

阅读文章 >

把表单体验做到极致！11个表单设计的高效技巧 大家好，这里是设计夹，今天为大家分享的是「表单设计」。

阅读文章 >

欢迎关注团队微信公众号：兆日 UCD