随着 UI 设计对情感化和差异化的追逐， 插画 已经逐步影响了 UI 设计趋势 。插画已经不局限于运营视觉范围的运用，在 UI 场景中也逐渐普及，作为背景视觉感强化、图标风格差异体现、功能或者业务配图强化等等。

黑马哥结合常用的热门产品，梳理了一些插画在 UI 场景中的案例，希望可以让大家对插画影响 UI 趋势有一定的感知。

不会插画的试试这个：

不会插画没关系，用这个免费插件帮你快速搞定！ Hi，我是彩云。

阅读文章 >

呈现独具一格的 Banner 设计 插画运用到 Banner 设计中非常普及，不仅可以带来个性化的视觉风格，也可以避免运用图片带来的版权风险。因为插画有着丰富多样的风格，运用到设计中也会呈现风格多样的效果，插画也比较容易统一视觉规范，很多成熟的设计团队都会制定插画规范系统，满足项目各类场景的运用。

作为视觉设计师来说掌握插画的能力已经成为基本岗位需求，很多公司对于 UI 设计师也有同样要求，这也是提高产品设计视觉感的一个方向。

突出图标设计的风格差异 随着用户对于感官体验的升级，图标风格特征的差异化体验至关重要，而插画风格的融入可以提升图标设计的特征感。

插画风格运用到图标设计中，需要做简化处理，可以是插画的局部元素或者简化后的小场景插画。风格多样的插画风格也会延续到图标中，不仅可以使得图标具备差异化的视觉效果，也能烘托出整体设计的质量。

强化区域背景的风格感 插画可以作为栏目区域背景来使用，以此增加该栏目的风格感和视觉感。相较于摄影图片来说，插画具备风格特征，可控性较强，能够满足更多氛围感的营造。

突出个人中心的情感化 个人中心的设计之前大部分采用单调的白色或者品牌色作为背景，近些年一些产品开始使用插画背景来增强情感化设计。有的产品还根据天气变化、节日主题、白天/夜间等场景设计不同的插画风格，带来的视觉感较强，也能吸引用户的关注度，提高用户对产品的感官体验。

强化空状态的情感化设计 空状态由单纯的文字提示演变到图文结合，感官层面越来越被重视。利用图形结合、IP 形象结合、小场景插画结合等，还有结合动效设计的案例，带来的设计体验感也是非常不错的。

瓷片区的视觉感强化 插画风格被运用到视觉表现层面案例较多，特别是在瓷片区的发挥，呈现出了风格多样的优秀案例。可以使用全场景插画作为背景设计，也可以使用小场景插画作为局部强化，还有使用部分插画元素作为点缀设计，视觉表现力丰富多样。

活动封面设计体现统一感 将插画形式作为活动或者服务栏目的封面设计，相较于其他形式来说风格统一性更强，也能更好的进行设计延展。就算使用不同风格的插画来进行封面设计，只要在配色风格上面把控好，也能做到有效的视觉感统一，对于设计师来说把控性很强。

增强专题活动头部视觉感 插画形式运用到专题页设计中案例非常多，相较于合成图片来说，插画的风格感和驾驭度更灵活。插画形式带来的情感化体验更佳，通常被运用到专题页头部区域来增强视觉感，也有延伸到整个背景层设计中的案例。

根据特定活动主题创作插画对于设计师来说更容易，找到符合主题的摄影图片是很难的，自己拍摄成本又会比较大，插画形式是最经济实用的设计解决方案。

插画形式提高栏目品质感 插画形式可以作为一些代表成就感的配图设计，以此来提高该栏目的品质感。比如在打卡点亮城市成就的设计中，不同城市的邮票采用插画形式来表达，不仅可以展示出各城市的风格，也能做到视觉风格的统一。精美的插画提高了品质感，吸引了用户的参与度，带来的感官体验也是非常棒的。

体现主题化的风格感 在主界面的设计中，不仅要体现出功能的操作体验，也要通过视觉的强化来吸引用户的关注度。一些产品在主界面设计中以插画作为背景来强化，结合动态的表达趣味性更佳，带来的关注度也是不错的。插画形式结合到功能模块中，带给用户情感共鸣和操作的体验度。

插画形式的引导页设计 插画被运用到引导页设计中是相当普及的，也是非常有利于进行设计发挥的。插画元素表达的可控性可以满足引导页主题创意的需求，通常以轮廓束缚为主，满屏插画较少。基于焦点和轮廓造型进行插画元素装饰，对于插画基础薄弱的设计师更易上手。

插画形式的闪屏设计 闪屏和启动页采用插画的形式也是可取的，启动页设计通常和引导页表现类似，不过运用品牌展示的相对多一些。

闪屏分为广告形式和主题展示形式，闪屏广告形式比较多，一些节庆主题和特殊纪念日活动，也会以精美插画的形式表达，更容易表达主题和与用户产生共鸣感。

小结 插画作为设计师需要掌握的基础技能，被逐步运用到各类设计场景中，也影响了 UI 设计的趋势走向。随着产品设计感官体验的不断升级，风格化和差异化的设计才能满足更多用户的感官需求，而风格多样的插画形式首当其冲。

希望这些插画结合 UI 场景的案例可以作为抛砖引玉，让大家重视插画在 UI 设计中的表现力，不断加强并掌握插画设计的能力。

10个理由告诉你，为什么插画在UI设计中这么火 在过去几年当中，插画开始以一种坚挺的姿势，站在设计趋势的最前列。

阅读文章 >

欢迎关注作者的微信公众号：「黑马家族」

需求分析原则 设计本质上是我们看待世界的一种思维方法，其目的是为了解决问题。在实践中，我们总要知道，我们要为谁，在什么环境或条件下，解决什么问题，如何解决？其分析的结果，直接影响到解决方案的好与坏，成或败。

司空图有言：“超以象外，得其圜中”。

意思大概是说，要「越过事物表象，得其核心要义」，即透过现象看本质。亦正如柳冠中老师在演讲中所说：“现象之外才是核心，设计真正的功夫是在设计之外。”

在实际工作中，我们能接触到的只是事物所呈现出来的表面特征，而触发这一结果的原因，或事物背后所隐藏的目的却不那么显而易见，这就需要我们从现象出发，从结果出发，一步步地分析现象，探寻现象背后的原因。

5000字超干货！写给设计师的需求沟通完全指南 设计师真实 emo 事件 帅帅是毕业没多久的设计师，做设计总是充满激情与冲劲儿，这天他将反复修改的稿子终于交付出去了，想着终于结束了，但是没过一会，群里的产品在“内部讨论”后直接@他，要求他修改设计稿，竟然改回到了先前的稿子，他直接 emo~ 帅帅：啊，我他*不做了，一直

阅读文章 >

例如：用户要一个杯子，我们就要知道用户想要造杯子背后的目的、原因，是蓄水？饮水？还是送礼？

先谋事，再造物。先确定目标，再寻找路径和方法。

需求分析方法 那么如何得知用户在谋什么事？如何探知现象背后的原因？现象背后潜藏的目的或动机？

这就需要我们结合用户当时的处境（什么地点？什么时间？），其所扮演的角色，所表现出的行为出发，一步步探寻。

同样拿“我想要一个杯子”举例，在接到这个需求之后，应结合用户当时的处境，分析用户所处的场景、所扮演的角色，所表现出的行为，由此探知到用户需求背后的目的/动机。

1. 角色

即用户的身份、角色，可以是个体用户，也可以是一个组织团体，如学校、企业、政府部门。

2. 场景

包含具体的时间、地点。

3. 行为

即用户具体做了什么事情，比如：

个体用户

所做的事情可通过具体的行为、语言表现出来，在前期调研访谈的时候，我们要重点关注用户的行为动作，这是因为个体用户不总是言行一致，有时候其口中所说的可能跟真实情况会有偏差，这并不是用户可以说谎，而是有些时候，用户对自己可能并非十分了解。

组织团体，比如企业用户

我们要观察的就应该是群体的行为，他们所做的事情通过具体的业务流程表现出来，为这类用户服务，我们就要与其内部的关键角色多做接触，对企业内部组织架构、业务情况有所了解。

同样拿“我想要一个杯子”举例，在接到这个需求之后，应结合用户当时的处境，分析用户所处的场景、所扮演的角色，所表现出的行为，由此探知到用户需求背后的目的/动机。

方案设计 经过对特定的角色、场景、行为进行分析后，了解到事情的本质，有了目标，有了动机，我们再进行具体的方案设计。

在“我想要一个杯子”的案例中，基于用户目标的不同，我们的解决方案不尽相同，可以是茶壶、水塘，可以是吸管、勺子…

很多时候，我们接到一个需求之后，浪费了大量时间进行方案设计，忽略了事情背后的目的、原因，导致最终设计结果并不理想。

方案评估 前面我们发散了那么多方案，最后，要建立合适的分析维度，比如方案的新颖度，产品目标的契合度…，筛选出最佳方案，评估维度太少其结果有失精准，太多则消耗时间，尽可能控制在3～5个。

但无论这个评估维度如何，方案的评估本着一个原则：投入成本要与所产生的收益成正比。毕竟，企业不是福利院，获取商业利益才是其目的，每个老板都希望用最小的投入成本实现最大化效益。

需求案例分析 我想要一匹更快的马。

比如，用户会告诉我们：我想要一批更快的马。这时候，如果我们直接给用户一匹马，不见得能达到用户预期。这是因为我们忽略用户需求背后的动机，即他为什么“需要一匹更快的马”？他是要达成什么样的目标？是出于什么原因？

在不同场景下、由不同身份角色的人提出，因目标不同，解决方案亦大有不同。

场景一

赛马场，决赛前，赛马选手：我想要一匹更快的马。

目的

赢得比赛

制约因素

比赛规则（是否可更换比赛工具） 路面情况 双方马速 双方驭马技术 双方比赛策略 解决方案

从比赛规则出发：是否可更换比赛工具，如羚羊、猎豹、汽车… 从路面情况出发：清理自己的路面，给对方跑道设置障碍… 从双方的马出发：偷走对方的好马，断对方马腿… 从双方驭马技术出发：害对方迟到，下蒙汗药… 从双方比赛策略出发：田忌赛马 以上仅是思考问题的角度，在现实竞技中，我们还是要遵循相应的道德规则。

经典案例

“田忌赛马”，孙膑即是从比赛策略出发，通过：

田忌：差马→对方：好马 田忌：中马→对方：差马 田忌：差马→对方：中马 在双方马力对比不大的情况下，三局两胜，来帮田忌赢得比赛的。

这个方案，对时间、精力、资金的消耗都最少，效益还是很可观的，不得不佩服我们孙同学的脑袋瓜啊！

场景二

偏远地区，通讯员：我想要一匹更快的马。

目的

更快地传递信息

分析

只要信息能过去，其目的就达到了

解决方案

更快的传输工具，或者通讯设备：

根据距离远近、地理环境等情况的情况，提供传输工具：飞鸽、风筝、弓箭、船只、汽车… 改善当地的通讯环境，提供更好的通信设备：电话、电子邮件、邮箱… 方案评估

最后，经过评估，结合技术、人力投入成本与最终所产生的效益，若距离较近，我们的选择可以是弓箭…

场景三

草原等偏远地区，普通人，日常出行：我想要一匹更快的马。

目的

节约出行时间

解决方案

更快的交通工具、让他人代劳

更快的交通工具，如：汽车、高铁、飞机… 他人代劳，如：仆从、外卖、物流、快递… 方案评估

略

总结 需求分析的过程，实质上是透过现象看本质，再进行方案设计得出最佳设计方案的过程。很多时候，我们接到一个需求之后，浪费了大量时间进行方案设计，忽略了事情背后的目的、原因，导致最终设计结果并不理想。

其完整的 需求分析 过程如下图所示：

8000字干货！写给设计师的需求分析指南 在工作中，我们会经常与产品经理对接需求、理解需求，站在交互设计师角度，我想分享如何分析需求，如何解决正确的问题。

阅读文章 >

欢迎关注作者微信公众号：「小观者大设计」

最近在帮小姐妹看房子的装修设计风格，其中关于厨房开放式与封闭式的风格衍生出了一些跨文化产品的设计思考。

小姐姐家是小户型，若选择开放式厨房能使空间最大化，扩大视觉空间，但同时又将面临客厅中的油烟问题。开放式厨房在西方的使用率更高，这是因为中国传统的烹饪操作产生的油烟远高于西方的烹饪操作，即使有油烟机，但面对明火下的煎炒烹炸，不可避免还是会有油烟的困扰，在油烟机没有根本性解决问题时，开放式厨房对中国的大多数家庭来说还不是最好的选择。

这里涉及到一个因素，中西方饮食的差异。而中西饮食文化的差异对厨具也必然产生影响，例如洗碗机，西方人洗碗机的使用频率普遍高于中国人，且是每家必备的产品。但在八九十年代传入中国的时候却出现了“水土不服”，给大家留下了洗碗机洗不干净的印象。其实是因为中西方烹饪的方式不同，所用的餐具也不一样。西方的餐具大多是扁平的盘和碟，而中国人习惯用碗盘，碗口深，对于碗中凹槽内的油腻食物残渣，很可能水流冲洗不干净。但经过数十年的产品迭代，已经有了中式的洗碗机，问题得以解决。

从文化的角度上去看这些工业产品的设计，其实是很有意思的，不同文化之间的碰撞与交融赋予了产品设计的独特性。不管是实物类产品的设计，还是服务类产品的设计，只有以人为中心，以文化为核心，理解目标地区的文化作出针对性的设计，才能使自己的产品更容易被目标用户所接受，我认为这是跨文化设计的重要意义。

所以，跨文化产品的设计，了解他国文化是第一要素。因地域文化的不同，有些看起来逻辑性非常强的 产品设计 并不能满足其他地区的用户需求，也不存在囊括所有问题的单一解决方案，大多数公司采取的是“国际化”+“本地化”的战略方案，保证多元文化下的统一，单一文化下的个性。

接下来我会分三步分享 跨文化设计 的思路：

了解文化因素下的差异有哪些？ 如何去寻找和分析这些差异？ 跨文化的设计原则和设计系统？ 往期文章回顾：

7000字干货！东南亚本地化产品设计差异：泰国篇 泰国是东南亚的第二大经济体，仅次于印尼。

阅读文章 >

7000字干货！东南亚本地化产品设计差异：印尼篇 印尼是东南亚人口最多的一个国家，人口超过 2.65 亿（还是 2019 年末的数据，现在应该近 3 亿），其中 30 岁以下人口占比超过 50%。

阅读文章 >

如何做东南亚的本地化产品设计？来看阿里设计师的系统总结 这几年，出海东南亚一直是热门话题，不少国内企业斥巨资出海东南亚。

阅读文章 >

文化因素下的差异 这里引入 Leong 和 Clark 的文化理论，他们针对文化对象的研究制订了一个简单的框架，认为文化产品的层次应分为三个级别，由浅入深即为：外在层次“有形的、物质的”，中间层次“行为的、习俗的”，内在层次“无形的、精神的”。

后经文献研究，徐启贤老师对文化空间层次进行详细区分和讲解，增加了文化产品属性列表。

林荣泰老师又在此基础上进行完善，将文化层次从形态、行为、精神 三个角度出发，提出文化产品的具体属性。

我按照自己的理解，对以上进行总结和思考。从文化层面上看，可分为文化理念、用户行为、视觉偏好的差异；若由文化层面转换成产品设计层面，对应的是价值观、功能与交互和界面外观的偏好。

1. 文化理念（价值观）差异

文化受到多方因素的影响，例如地理、经济、社会政治等因素，不同文化背景下成长的人，必然形成价值观的差异。例如中国的集体主义文化和西方的个人主义文化，中国人更注重关系的维系，强调以群体为中心；西方则是个人本位原则，提倡“自我依赖”的观念。

2. 用户行为（功能与交互）差异

不同的文化背景下，用户的生活习惯、行为模式也各不相同。例如我们中国独有的春节红包文化，演变成现在的电子红包。在我们传统的春节习俗中，人们收红包和发红包都是为了讨个吉利，意在祈福。现在发红包已然成为烘托气氛、强化关系的一种仪式，但不管是在什么场景，以什么形式，红包在我们中国人心中都代表着祝福和好运，它是我们中国独有的一种文化，所以在中国的社交 APP 上能看到发红包的这个功能，而西方国家没有。

3. 视觉偏好（用户界面）差异

同样，不同颜色在不同国家所代表的意义也完全不同，在中国的文化背景里，红色代表着吉祥喜庆。例如活动页面要突出热闹，通常都会使用大面积的红色来营造活动氛围；又如画红包元素时，大家都会使用红色，而不是蓝色，绿色。

分析文化差异的方法 通过建立文化地图，分析和提炼出不同国家之间的差异与共性，为后续的设计提供方向。

第一步：建立文化地图

这里可以借助 hofstede 的文化维度理论，先建立起一个宏观的文化框架，按照里面的 6 个维度把目标用户的文化与我们国家的文化放一起对比，再通过一些文献和资料去补充里面的细节，从整体观到细节观，分析他国文化与我国文化的差异和共性。

hofstede 的文化维度理论是当今文化差异研究领域最具影响力的理论之一，有六个维度：权利距离、个人主义/集体主义、男性化与女性化、不确定性的规避、长期取向与短期取向、自身放纵与克制。

比如，中国和美国在权利与距离维度中的差异。中国 80 分，属于高权利距离国家，美国 40 分，属于低权力距离国家。儒家思想是我们中国传统的道德观念，我们从小被教育要听从父母和老师的话，尊重父母、长辈是家庭中的基本美德。在美国，大部分人都信奉基督教，《圣经》中传达的思想是人人生而平等，家长会要求孩子尽早独立，家庭成员之间的相处方式不必取决于年龄。

通过这些维度的对比，我们能将抽象的文化形象化，有一个全局的文化视角。

（说明：这里的分数高低并不是指好坏，而是指文化的差异）

第二步：分析文化差异与文化特色，提取设计要素

当建立起文化框架后，再从宗教、历史、地理、风土人情、生活方式等方面，分析其他国家与我们国家的具体差异之处，再提取出对应的视觉要素。比如印尼，在宗教上信仰的是伊斯兰教，有 87%的人是穆斯林，伊斯兰教规定禁止把狗当作宠物养在家中，也不允许把狗当做儿童的玩伴，因为会对儿童的健康不利，所以在做印尼的设计时，要避免使用狗的元素。

再如印尼当地的斋月节，斋月是印尼最最重要的节日，在这个期间做活动海报时，可以多运用伊斯兰教的一些元素，例如：斋月的斋灯，月亮，以及伊斯兰教寺庙的尖塔、穹顶和几何纹理的装饰等等，都可以融入到设计中，贴近本土文化，更容易获得当地人的喜爱和认可。

值得注意的是，建立文化地图不仅仅是研究文化差异，更多的要思考的是从文化与设计相关联的角度上去看文化差异和文化冲突给设计所带来的影响。

3. 跨文化设计原则

在跨文化设计中，又可分为面向单一文化的设计和面向多元文化的设计，不同场景的侧重点也不一样。如果是面向单一文化的设计，比如只做印尼的本地化设计，那么只需研究当地的文化特色，避开文化禁忌，产品设计符合当地的文化偏好即可。如果是面向多元文化，就需要对多种文化进行分析和总结，寻找文化共同点进行设计的突破，使产品能被不同文化圈的用户群体所接受。

这里分享两个设计原则，文化包容性设计与文化规避设计。

A. 文化包容性设计

英国标准协会(2005)将包容性设计定义为: 主流产品或服务的设计能为尽可能多的人群所方便使用，无需特别的适应或特殊的设计。它通常是通过满足一般排除在产品使用范围之外的群体的特殊需求，从而增加更好的用户使用体验。

当把它引入到跨文化产品设计中时，我们可以转换为：最大化的满足目标群体的需求，当出现多个文化元素时，需要充分考虑到文化的差异并寻找共性，分析并提取最合适最有价值的设计元素，进行更深层次的综合性设计。

例如，代表“奶制品”的图标，中国常见的是牛奶，西方常见的是牛奶和奶酪。在设计时，要尽量使用通用的设计元素，保证不同国家的用户都能理解图标的含义。

B. 文化规避性设计

不管是面向单一文化还是多元文化，都需要对目标群体做文化规避方面的研究，避免出现文化禁忌。比如印尼是穆斯林国家，我们就要避免使用猪和狗的图像，以免引起用户的不适。又如，“点赞”的图标，在中国和西方国家，竖大拇指是表示正向的评价，表示好的意思。但在伊朗、阿富汗地区，是一种挑衅的行为。

了解并掌握目标群体的偏好和禁忌，可以避免因文化认知差异而带来的设计误差。

跨文化设计系统 再分条细说，关于文化差异和文化冲突下，设计系统需要注意的事情。如果从设计形式层面上看，可分为文字、图像、颜色、版式四部分。

A. 文字

在进行语言本地化时，需要注意以下几点。

语言翻译

很多时候为了省时省力，会直接采用机译，但是在一些重要场景的页面，建议还是找 local 进行翻译和做后期的项目文案检查，避免机译后出现用户看不懂的迷之场景。

语言适配

在国际化设计中，要确保语言本地化后依然有舒适的阅读体验和页面展示效果。比如英文翻译成泰文后，原先是一行的英文，翻译成泰语后可能会需要换行。同时也要注意换行后的行间距，泰语的书写方式比较特殊，如果行距太近，可能会掩盖上下行的元音字符，因此，需要留出足够的空间来提高可读性。

区域格式

区域设置中，需要注意不同地区的日期/时间格式、数字格式、货币格式、名字格式和地址格式。

文字字体

避免使用没有开源和系统不匹配的字体，比如有些字体适用于泰语、印尼语和马来语，但是不适用于越南语。

B. 图像

图片和图标的应用中，要注意到不同地区的文化和宗教差异。

图标隐喻

国际化设计，尽量采用各大平台通用的图标设计，避免小众文化的设计元素。

本地化设计，可以在设计元素中融入当地的文化特色，更容易获得当地人的喜爱。

图标或图片的文化禁忌

避免使用和当地文化不匹配的元素，以免引起人们的不适。面向多元文化时，避免使用宗教和谨慎使用手势相关的内容、标志、符号等。

图文分离

建议不要将文字直接嵌入图片或视频媒体中，需要分别以较小的个体进行存储，便于多语言场景下的替换。

C. 颜色

不同国家的人有不同的色彩偏好，文化倾向与喜好也会影响到对界面设计的接受程度。

色彩偏好

如果是面向单一国家，可以考虑使用当地人喜爱的颜色作产品主色。

如果是面向多国家，尽量采用各个国家都容易接受的色彩。

色彩隐喻

对于指数的上升和下降，红色和绿色在不同国家所代表的意义也不一样。例如中国的股票市场，红色代表升，是利好的。绿色代表跌；在美国，红色代表下降，绿色代表升。

色彩禁忌

不同颜色在不同的文化背景下所代表的意义完全不同，需要避免在某些场景使用当地人的禁忌颜色。

例如泰国人在日常生活中忌讳使用红笔签名, 只有人去世后才可以用红笔在死者的棺材上写上其姓氏，因此，不要在海报中出现名字用红色的字体。

D. 版式

不同国家的语言差异，也会造成版式上的设计差异。

排版布局

在空间上，中文的展示效率要高于英文。例如下图中的 filter 页面，中文的页面使用宫格形式，内容能够在第一屏全部展示出来，操作也无须跳转页面，直接就能在当前的弹窗内进行操作；英文的页面则采用 list 形式，可能要 2 屏才能展示完全部的信息，操作需要跳转页面。

把右图的中文翻译成英文，字数可能会变长，如果仍然使用宫格排版，页面会比较拥挤，而且有的文字是一行，有的是两行，排版上会显得不整齐；如果把左图的英文翻译成中文，使用列表布局，又会显得比较空，空间使用率不高且操作不高效。因此，语言的差异也会引起设计样式和交互的差异。

排版顺序

中文和英文的语言环境中，我们的阅读方式都是从左到右的顺序，所有的排版顺序也是从左往右。但是在中东地区有一些国家与我们的阅读习惯是相反的，例如使用阿拉伯语和希伯来语的国家，他们的阅读习惯是从右到左，内容排版顺序也是从右往左。

阅读习惯的差异同样也会造成交互上的差异，例如，阿拉伯语的信息布局中，就不适合从左到右的 Z 型浏览模式，因为在他们的语言环境中，重要的内容基本放在右侧。又如，在箭头的交互上，左箭头是代表进行下一步，右箭头代表回退。

那么，我们在做信息框架的设计时，要思考的是在不同的语言环境中，我们的普适性的设计法则是否还奏效？是否应该有一些相对应的调整以适配当地的语言环境和文化？这些都是在设计前期需要深思的事情。

对了，说到这里。补充一个有趣的小知识：阿拉伯文字是从右往左写，但是阿拉伯数字为什么是从左往右呢？我找了一些资料，感兴趣的同学可查看下方的链接。

阿拉伯文字从右往左写，但是阿拉伯数字为什么从左到右写？ https://en.wikipedia.org/wiki/Hindu%E2%80%93Arabic_numeral_system 好了，以上就是我这次的分享~ 希望对做出海设计的同学能有一些帮助 ?

欢迎关注作者 微信 公众号：「8点的四月」

随着 UI 设计对情感化和差异化的追逐， 插画 已经逐步影响了 UI 设计趋势 。插画已经不局限于运营视觉范围的运用，在 UI 场景中也逐渐普及，作为背景视觉感强化、图标风格差异体现、功能或者业务配图强化等等。

黑马哥结合常用的热门产品，梳理了一些插画在 UI 场景中的案例，希望可以让大家对插画影响 UI 趋势有一定的感知。

不会插画的试试这个：

不会插画没关系，用这个免费插件帮你快速搞定！ Hi，我是彩云。

阅读文章 >

呈现独具一格的 Banner 设计 插画运用到 Banner 设计中非常普及，不仅可以带来个性化的视觉风格，也可以避免运用图片带来的版权风险。因为插画有着丰富多样的风格，运用到设计中也会呈现风格多样的效果，插画也比较容易统一视觉规范，很多成熟的设计团队都会制定插画规范系统，满足项目各类场景的运用。

作为视觉设计师来说掌握插画的能力已经成为基本岗位需求，很多公司对于 UI 设计师也有同样要求，这也是提高产品设计视觉感的一个方向。

突出图标设计的风格差异 随着用户对于感官体验的升级，图标风格特征的差异化体验至关重要，而插画风格的融入可以提升图标设计的特征感。

插画风格运用到图标设计中，需要做简化处理，可以是插画的局部元素或者简化后的小场景插画。风格多样的插画风格也会延续到图标中，不仅可以使得图标具备差异化的视觉效果，也能烘托出整体设计的质量。

强化区域背景的风格感 插画可以作为栏目区域背景来使用，以此增加该栏目的风格感和视觉感。相较于摄影图片来说，插画具备风格特征，可控性较强，能够满足更多氛围感的营造。

突出个人中心的情感化 个人中心的设计之前大部分采用单调的白色或者品牌色作为背景，近些年一些产品开始使用插画背景来增强情感化设计。有的产品还根据天气变化、节日主题、白天/夜间等场景设计不同的插画风格，带来的视觉感较强，也能吸引用户的关注度，提高用户对产品的感官体验。

强化空状态的情感化设计 空状态由单纯的文字提示演变到图文结合，感官层面越来越被重视。利用图形结合、IP 形象结合、小场景插画结合等，还有结合动效设计的案例，带来的设计体验感也是非常不错的。

瓷片区的视觉感强化 插画风格被运用到视觉表现层面案例较多，特别是在瓷片区的发挥，呈现出了风格多样的优秀案例。可以使用全场景插画作为背景设计，也可以使用小场景插画作为局部强化，还有使用部分插画元素作为点缀设计，视觉表现力丰富多样。

活动封面设计体现统一感 将插画形式作为活动或者服务栏目的封面设计，相较于其他形式来说风格统一性更强，也能更好的进行设计延展。就算使用不同风格的插画来进行封面设计，只要在配色风格上面把控好，也能做到有效的视觉感统一，对于设计师来说把控性很强。

增强专题活动头部视觉感 插画形式运用到专题页设计中案例非常多，相较于合成图片来说，插画的风格感和驾驭度更灵活。插画形式带来的情感化体验更佳，通常被运用到专题页头部区域来增强视觉感，也有延伸到整个背景层设计中的案例。

根据特定活动主题创作插画对于设计师来说更容易，找到符合主题的摄影图片是很难的，自己拍摄成本又会比较大，插画形式是最经济实用的设计解决方案。

插画形式提高栏目品质感 插画形式可以作为一些代表成就感的配图设计，以此来提高该栏目的品质感。比如在打卡点亮城市成就的设计中，不同城市的邮票采用插画形式来表达，不仅可以展示出各城市的风格，也能做到视觉风格的统一。精美的插画提高了品质感，吸引了用户的参与度，带来的感官体验也是非常棒的。

体现主题化的风格感 在主界面的设计中，不仅要体现出功能的操作体验，也要通过视觉的强化来吸引用户的关注度。一些产品在主界面设计中以插画作为背景来强化，结合动态的表达趣味性更佳，带来的关注度也是不错的。插画形式结合到功能模块中，带给用户情感共鸣和操作的体验度。

插画形式的引导页设计 插画被运用到引导页设计中是相当普及的，也是非常有利于进行设计发挥的。插画元素表达的可控性可以满足引导页主题创意的需求，通常以轮廓束缚为主，满屏插画较少。基于焦点和轮廓造型进行插画元素装饰，对于插画基础薄弱的设计师更易上手。

插画形式的闪屏设计 闪屏和启动页采用插画的形式也是可取的，启动页设计通常和引导页表现类似，不过运用品牌展示的相对多一些。

闪屏分为广告形式和主题展示形式，闪屏广告形式比较多，一些节庆主题和特殊纪念日活动，也会以精美插画的形式表达，更容易表达主题和与用户产生共鸣感。

小结 插画作为设计师需要掌握的基础技能，被逐步运用到各类设计场景中，也影响了 UI 设计的趋势走向。随着产品设计感官体验的不断升级，风格化和差异化的设计才能满足更多用户的感官需求，而风格多样的插画形式首当其冲。

希望这些插画结合 UI 场景的案例可以作为抛砖引玉，让大家重视插画在 UI 设计中的表现力，不断加强并掌握插画设计的能力。

10个理由告诉你，为什么插画在UI设计中这么火 在过去几年当中，插画开始以一种坚挺的姿势，站在设计趋势的最前列。

阅读文章 >

欢迎关注作者的微信公众号：「黑马家族」

产品文档/交互方案里往往需要对某个功能的产生逻辑、交互方式等进行说明。比如一个 Loading：加载前/中/后的状态该如何显示？展示范围是多少？先出文字还是图片?

不写明白、有忽略的话，开发就会按照自己的想法去做、甚至不做（谁让你没写）。因此趁此盘点一些常见的 交互机制 ，算是一个小总结吧。包括：删除、中断、显示、加载、排序、刷新、缓存、推送（push）

开发相关的干货看这里 ?

6000 字干货！写给设计师的开发沟通指南 前言 “这个做不了、很难做的啊、我没时间啊、改这个有什么意义吗？

阅读文章 >

删除机制 删除逻辑是怎样的？

无法找回：是否需要二次确认设计、以及展示删除后的结果

可以找回：是否需要展示如何找回的说明？

删除对象：

是单个、批量还是全部？

删除方式：

手动删除：点击删除还是滑动删除？

自动删除：何时开始？是否展示剩余的时间

删除状态：

包删除成功提示、删除失败提示、删除过久的提示

中断机制 数据的处理是怎样的？

信息/逻辑是否会发什么变化、是否自动保存进度/记录、是否影响后续链路里的逻辑处理

中断方式： 有意、无意中断的处理都是怎样的？

中断程度： 后台继续运行还是彻底退出后台？

软/硬件变化时的处理： 包括耳机的连接与切断、电话的来电与挂断、网络的中断与恢复

显示机制 显示是否有边界值？

包括最小值、最大值、到达特定阈值

显示是否有时效性？

内容过期时怎么显示？到达某个阈值时怎么显示？内容不存在的显示？

其他考虑点：

显示格式：如日期时间的数据格式：2022.05.01 2022-05-01

显示分辨率：各种分辨率下如何显示，最大，最小考虑极致情况

显示样式：是否对齐组件？需要统一？是否有差异化设计

加载机制 加载前中后该如何显示？

包括默认状态的显示、初始状态的显示、加载中的显示、加载过长的显示、加载成功的显示、加载失败的显示、加载为空的显示等等。

加载方式：

手动加载还是自动加载？优先加载哪些内容（文本或图片）？

加载范围：

展示数量是多少？一次性全量展示还是分页加载展示？

推送（push）机制 push 机制：

推送内容说明、全量用户还是局部用户、推送的时间/周期/次数等都是怎样的？

push 交互：

跳转：原页面删除、无法进入、push 过期时该如何处理？

返回：返回到哪里？

退出机制 当期操作进度、记录是否保存？

是否需要展示退出说明、原因？

退出程度：是当前页面、某段流程、退出后台运行、杀死后台、还是手机关机？

排序机制 默认排序是怎样的？正序还是倒序？哪个选项优先

排序维度是怎样的？按时间/销量/质量/数量/评分/信用等等排序

刷新机制 是手动刷新：如下拉刷新、点击刷新

还是自动刷新：何时开始刷新？是否提前告知用户？是否提前自动保存操作记录

缓存机制 缓存机制是怎样的？包括缓存对象、数量、范围

缓存位置是哪？手机本地、服务端

缓存的清理是怎样的？自动清除还是手动清除

好了，以上就是一些常见的交互机制，希望在你输出交互方案、产品为文档时有所帮助，避免漏掉一些内容，减少和开发的相爱相杀。

欢迎关注作者的微信公众号：「和出此严」

产品文档/交互方案里往往需要对某个功能的产生逻辑、交互方式等进行说明。比如一个 Loading：加载前/中/后的状态该如何显示？展示范围是多少？先出文字还是图片?

不写明白、有忽略的话，开发就会按照自己的想法去做、甚至不做（谁让你没写）。因此趁此盘点一些常见的 交互机制 ，算是一个小总结吧。包括：删除、中断、显示、加载、排序、刷新、缓存、推送（push）

开发相关的干货看这里 ?

6000 字干货！写给设计师的开发沟通指南 前言 “这个做不了、很难做的啊、我没时间啊、改这个有什么意义吗？

阅读文章 >

删除机制 删除逻辑是怎样的？

无法找回：是否需要二次确认设计、以及展示删除后的结果

可以找回：是否需要展示如何找回的说明？

删除对象：

是单个、批量还是全部？

删除方式：

手动删除：点击删除还是滑动删除？

自动删除：何时开始？是否展示剩余的时间

删除状态：

包删除成功提示、删除失败提示、删除过久的提示

中断机制 数据的处理是怎样的？

信息/逻辑是否会发什么变化、是否自动保存进度/记录、是否影响后续链路里的逻辑处理

中断方式： 有意、无意中断的处理都是怎样的？

中断程度： 后台继续运行还是彻底退出后台？

软/硬件变化时的处理： 包括耳机的连接与切断、电话的来电与挂断、网络的中断与恢复

显示机制 显示是否有边界值？

包括最小值、最大值、到达特定阈值

显示是否有时效性？

内容过期时怎么显示？到达某个阈值时怎么显示？内容不存在的显示？

其他考虑点：

显示格式：如日期时间的数据格式：2022.05.01 2022-05-01

显示分辨率：各种分辨率下如何显示，最大，最小考虑极致情况

显示样式：是否对齐组件？需要统一？是否有差异化设计

加载机制 加载前中后该如何显示？

包括默认状态的显示、初始状态的显示、加载中的显示、加载过长的显示、加载成功的显示、加载失败的显示、加载为空的显示等等。

加载方式：

手动加载还是自动加载？优先加载哪些内容（文本或图片）？

加载范围：

展示数量是多少？一次性全量展示还是分页加载展示？

推送（push）机制 push 机制：

推送内容说明、全量用户还是局部用户、推送的时间/周期/次数等都是怎样的？

push 交互：

跳转：原页面删除、无法进入、push 过期时该如何处理？

返回：返回到哪里？

退出机制 当期操作进度、记录是否保存？

是否需要展示退出说明、原因？

退出程度：是当前页面、某段流程、退出后台运行、杀死后台、还是手机关机？

排序机制 默认排序是怎样的？正序还是倒序？哪个选项优先

排序维度是怎样的？按时间/销量/质量/数量/评分/信用等等排序

刷新机制 是手动刷新：如下拉刷新、点击刷新

还是自动刷新：何时开始刷新？是否提前告知用户？是否提前自动保存操作记录

缓存机制 缓存机制是怎样的？包括缓存对象、数量、范围

缓存位置是哪？手机本地、服务端

缓存的清理是怎样的？自动清除还是手动清除

好了，以上就是一些常见的交互机制，希望在你输出交互方案、产品为文档时有所帮助，避免漏掉一些内容，减少和开发的相爱相杀。

欢迎关注作者的微信公众号：「和出此严」

大家好，我是和你们聊设计的花生~

地图是平面设计中常会运用到的一种元素，但之前有小伙伴在社群中反应，找到的地图素材都是花花绿绿的图片，不符合自己的设计风格。那今天就为大家推荐几个超实用的地图资源下载网站，可以免费下载可编辑的矢量 地图素材 ，还会向大家推荐一些优化地图呈现方式的思路，一起来看看吧~

更多可视化设计资源：

想快速搞定可视化设计？这20个精选神器收好了！ 大家好，我是小六。

阅读文章 >

可视化设计神器第二弹！15个精选神器都在这！ 大家好，我是小六。

阅读文章 >

5 个实用地图资源网站 1. 标准地图服务

「网站直达」 http://bzdt.ch.mnr.gov.cn/

标准地图网站由自然资源部地图技术审查中心承办的，上面的地图文件绝对正确精准。除了我们最熟悉的中国地图和世界地图，网站还提供各省（市、区）的标准地图。下载的地图提供 EPS 格式，这意味着我们可以对于进行后期编辑，比如提取矢量轮廓文件、修改颜色等。

标准地图网站还有国家版图知识，里面对如何识别「问题地图」有详细说明，非常实用。

2. 百度/高德个性化地图编辑服务

「百度地图开放平台」 https://lbsyun.baidu.com/index.php?title=open/custom

「高德开放平台」 https://geohub.amap.com/mapstyle/index

在平面设计中运用地图的时候，一个常见的问题就是地图的颜色与设计风格不匹配，以及地图上的标注信息过多，没有办法突出重点。这个时候用百度地图开放平台或高德开放平台能很好的帮助我们解决这些问题。

在开放平台内，我们可以对区域内的地图元素、文字标注的颜色/样式进行修改，并选择是否显示某种地图元素和文字标注。

百度地图的个性化编辑界面

开放平台上提供预设的地图模板，具有多种不同提供风格的配色。并可以提取上图片配色，对地图进行重新上色。

高德开放平台的地图模板与根据图片提取配色功能

使用这类开放平台需要一个简单的个人身份认证，通过后就能正常使用了。

3. DataV.GeoAtlas（ 阿里云 可视化地图 平台）

「网站直达」 http://datav.aliyun.com/portal/school/atlas/area_selector

「使用指南」 https://www.yuque.com/datav/datav-cool/ssq6nk?spm=a2crr.b71357980

DataV.GeoAtlas 是一款专业的地理工具，能进行范围选择、便捷生成、层级生成，并进行相应的范围框选和标注。对平面设计师来说很好用的一点就是可以快速选择某区域的轮廓地图并下载 SVG 格式，再自己进行后期编辑。

4. 地图便民查询服务

「网站直达」 https://map.bmcx.com/hubeisheng__map/

提供带详细标注的卫星地图，可以作为标注地图信息的参考。

5. 城市道路线性地图 Anvaka(需梯子)

「网站直达」 https://anvaka.github.io/city-roads/

Anvaka 是一个免费开源的线性道路提取网站，地图资源取自 Openstreet。输入你想要的地区，网站就能呈现其线性地图的样式。可以对地图进行颜色编辑，并提供高分辨的 PNG 和 SVG 的下载格式。

更多使用可视化工具↓

可视化设计神器第二弹！15个精选神器都在这！ 大家好，我是小六。

阅读文章 >

想快速搞定可视化设计？这20个精选神器收好了！ 大家好，我是小六。

阅读文章 >

可视化地图工具/教程 1. 三维地图免费工具 NB Maps

「工具直达」 https://nbcharts.com/map/map.php

NB Map 是大神灰色执照开发的一款三维地图的工具，可以随意调节地图颜色、板块高度、旋转不同的角度等。调整完成后，可以下载透明背景的 PNG 格式，也可以点击动画按钮后录制成视频，而且这一切都是免费的。

NB Maps 工具详细介绍↓

数据可视化神器！帮你一秒生成三维地图的免费工具NB Maps 大家好，我是灰色执照。

阅读文章 >

2. 免费教程

教程一：设计思路教程！手把手教你打造酷炫的可视化地图

「直达」 https://uiiiuiii.com/other/1212493172.html

「内容重点」列举了 7 种地图可视化的常见表现形式，以及制作可视化地图的注意事项。

教程二：大厂的设计师怎么做可视化地图？

「直达」 https://uiiiuiii.com/illustrator/1212434300.html

「内容重点」详细展示了如何在 Ai 中对矢量地图素材进行特殊效果处理。

插画类地图 插画类地图也是一种常见的地图呈现模式，在与旅游、展览类相关的设计中运用极广。插画类地图可以大致分为两类，一类是手绘地图插画，另一种则是矢量插画地图。

相比来说，矢量插画地图上手难度低很多。我们可以将真实地图垫底作为参考，用矢量线条和形状确定道路样式，建筑、植被、人物等地图元素可以利用一些免费的图标/插画资源，加上配色就能形成一副完整的地图了。

比如之前像大家推荐过的 Openmoji 免费图标网站，上面人物、植物、建筑、动物、交通工具元素一应俱全，且风格一致，可以直接用来搭配一副完整的地图插画。

关于 emoji，你必须知道这个全能网站 Hello Everyone~ 我是花生。

阅读文章 >

更多插画类地图免费可用资源：

任天堂设计师出品！700+免费可商用的粗点像素风素材打包下载！ 《超级玛丽》《魂斗罗》《坦克大战》《吃豆人》，还记得这些在那个时代给我们带来无限欢乐的像素风电子游戏吗？

阅读文章 >

免费可商用！图标、插画和图库应有尽有的素材站「Reshot」 本文要推荐的「Reshot」是一个整合、收录三大类型素材免费图库，网站提供超过 40000 个 SVG 免费图标、超过 1500 个插图素材和超过 25000 张相片，这个网站最大特色是素材都能实时下载并适用于商业用途，无需付费，使用时也不用标记出处来源。

阅读文章 >

以上就是今天的分享，希望对大家的设计有帮助。如果你还有关于设计的疑问，欢迎加入优设官方设计交流群（入群二维码见下方 Banner），与优设设计总监和其他热爱设计的小伙伴一起交流学习。我是花生，我们下期见~

设计 活动主视觉 时，设计师最在意的往往是视觉表现力，花费大量的精力在需求背景、创意思路、风格定位，视觉探索上，力求让设计更有张力，更惊艳。

但是，超大型活动的品牌传播往往涉及到多渠道、多团队、多业务的联动和协同。因此除了视觉表现力之外，设计师更需要考虑 主视觉设计 延展性和可复用性，才能够让不同团队在不同的业务场景下，保持品牌的一致性。

往期复盘：

效果好一倍！如何做好营销物料设计的优化复盘？ 被窝家装是贝壳找房旗下的家装品牌。

阅读文章 >

以 99 公益日为例，在为期 10 天的活动中，CDC 和腾讯公益联动数十个腾讯内部产品（王者荣耀， 腾讯 新闻等），7 千多家公益机构，1 万多家爱心企业，在线上和线下进行联合传播。我们基于这几年的学习，总结出活动主视觉制作的 4 个步骤，希望可以帮助大家更好地完成大型活动设计和落地。

Step 1 梳理场景：盘点和提取核心场景 一个好的主视觉，需要能够广泛地应用在各场景，持续地强化用户的品牌感知，打造视觉记忆统一性。一个各场景都高度可用的主视觉，能为活动全链路带来一致的视觉表现，场景切换时不会有视觉跳跃感。

而提高主视觉可用性最好的方法就是在设计主 KV 时就确保关键场景的可用性。因此，需要全面且细致的盘点应用场景，并选出关键的场景。

首先，依照活动的需求，仔细且全面地盘点全景图，包含核心产品全链路和合作伙伴的所有传播场景。

99 公益日品牌露出的场景盘点

盘点完所有的场景后，进一步提取 5-10 个核心场景。在设计主视觉时，同步输出核心场景的设计效果，保证核心场景的视觉呈现。这一步虽然加大了主视觉的设计难度和工作量，但为后续的延展落地以及各方合作，提供了有力的保障。

Step 2 定义主视觉：基于品牌的变与不变，打造场景化主视觉 设计师往往会因为“需要更多发挥空间”，“用户会看腻”为由，去颠覆以往的设计，力求让人耳目一新。

但是，打造一个可持续的品牌，需要长期的、持续的完善可记忆的经典元素，并和核心理念关联，建立用户对品牌的感知，如 Tiffany 蓝，Just do it 等。因此，每个的活动都需要确保经典元素保持不变，确保品牌气质的延续，并在此基础上，持续的完善品牌表现力，定义并传承其“变与不变”。

我们在历年的探索中，逐渐完善 99 公益日的变与不变：

99 公益日的视觉传承

历年 99 公益日主视觉

定义出变与不变后，设计师依此原则制作“场景化主视觉探索”，即探索主视觉时同步输出关键场景，模拟实际落地效果。场景化主视觉除了保障后续的延展之外，也可以帮助团队做出更好的决策。

带关键场景的主视觉探索方案

有关品牌关键词的提炼和探索的方法，请参考 CDC 著作的书籍 “在你身边为你设计 3 ”的“3-3 制定视觉方案”篇。

小 TIPS： 关键场景必须使用往年的“真实”场景和文案。

Step 3 制定规范：基于品牌声量传播图制定全场景模板库 活动落地时，常因为合作伙伴自由发挥，导致最后效果没有设计师想象的那么好。以 2018 年 99 公益日为例，合作伙伴们的输出效果和设计师的预期有着不小的落差。

2018 年 99 公益日效果

但是，落地效果不佳的最大原因，往往是因为规范和模板没有充分考虑合作伙伴的业务目标、使用场景、和执行能力。以下为常见的情况：

业务目标不匹配：合作伙伴作为主导品牌，被迫从规范中提取部分元素使用； 使用场景不匹配：特殊载体没有相应的尺寸，合作伙伴被迫自行裁切或是重做（例如：地标）； 执行能力不匹配：合作伙伴可能有设计团队，可能有临时外包，也可能是一个不具备设计能力的员工临时支持。 因此，设计师需要制定品牌声量传播图，确保不同的品牌声量的诉求都有相应的规范和模板支持：我们能做主角，也能做配角。

99 公益日品牌声量图

设计规范，为团队内的专业视觉设计提供场景延展的依据。但是大型活动往往牵涉到大量的外部团队，设计能力参差不齐，因此除了设计规范外，我们还需要提供跨场景、跨声量、开箱即用的模板库，供外部团队使用，尽量降低外部团队修改和重做素材的需求。我们可以使用在第一步盘点的所有的场景，基于使用频次和品牌传播价值，逐年完善模板。

逐年完善的 99 公益日模板库

小 TIPS

矢量文件最佳，如果是图像元素需要提供最大场景的所需尺寸，保证大幅面效果； 对文件进行简化分层，并对图层进行清晰命名和指引； 对注释文字层进行锁定，减少使用者的误选； 对 RGB 和 CMYK 颜色模式文件分别进行提供，减少颜色误差； 对不可更改的文字，可以使用转曲或者智能对象，避免文案被修改； 源文件需与字体包一同提供，避免字体丢失； 一个模板就提供一个源文件，避免多个模板在一个源文件中。使用者容易忘记，是否修改过源文件中的其他模板，增大使用出错率； 控制文件大小在 200MB 以内，避免文件太大下载失败和软件崩溃；  简化图层层级，降低延展难度：可拆分为背景层和核心元素层，背景层制作成可放大缩小的超大尺寸，通过缩放即可实现主视觉效果的 60%。 Step 4 提供下载：方便的、可预览的、一站式下载渠道 如何让合作伙伴更好地获取规范，是一个设计师经常忽略的重要步骤。我们一开始使用云盘和微信进行分享，但经调研发现有以下问题：

文件多达上百个，整体体积多达 1G – 10G，如果使用各类云盘，合作伙伴下载就需要充值云盘会员以保证下载速度； 文件名类似，而源文件无法预览，容易下载错误； 云盘假如不是按顶层文件进行分享，分享的类目将不全； 通过微信传输文件给合作伙伴，导致合作伙伴不知道还有其他规范可以使用，而没有按规范进行设计。 基于以上问题，我们提供两种解决方案的思路：

方法一：建立在线文档表格

通过在线表格建立起一个小型导览“网站”。通过内嵌图片和超链接的形式，将所有的设计规范进行汇总，低成本且便于分享。

方法二：建立一个品牌规范网站

需要长期品牌沉淀的产品，以及对接伙伴数量非常多的活动，则可以考虑建设品牌规范官网。

官网能解决查找、预览和下载问题，分类更清晰，下载更方便，下载速度也更稳定。网站承载品牌体系的介绍和内容沉淀，让合作伙伴快速了解品牌含义和设计案例，并且还可以针对不同的用户定义不同的阅读权限。

腾讯公益设计官网： https://designforgood.qq.com

最终落地效果 以下为 2021 年 99 公益日期间，合作伙伴制作的各种物料。

各合作伙伴输出的物料

各公益机构输出的物料

写在最后 活动主视觉的设计不仅仅是一个画面的设计和视觉规范制定，而是对活动的全局思考。设计师除了追求视觉表现外，需要考虑品牌的延续性和各个场景，站在他人的角度思考。通过更好的服务合作伙伴，体现用户为本，才能真正连接所有人，打造有影响力的大型活动。

欢迎关注作者「腾讯CDC体验设计」的微信公众号：

在我们日常的沟通当中，很多时候大家都会将自己的产品，以“B 端产品” 这样宽泛、含糊的方式进行阐述。但是 B 端产品由于服务对象不同、发展方向差异，也就导致产品本身就会有很多不同的分类。

今天就和大家分享 B 端 产品 的四种分类，以及对于 设计师 而言，这些分类会给我们设计落地、职业选择造成哪些影响？

往期回顾：

B端设计指南：从 4 个方面帮你掌握「审批」的知识点 一直以来，业务都是 B 端逃不开的话题，你可以在许多文章当中看到我们的改版方向是因为业务需求、设计的思路是因为业务需求。

阅读文章 >

B端设计指南：网页布局方式科普 栅格一直都是很多同学非常疑惑的地方，无论是栅格的日常使用，又或者是栅格在整个产品当中的作用，一直以来都有非常多的疑惑，今天就来聊聊栅格在实际工作如何使用，以及产品之间究竟有何区别。

阅读文章 >

B端设计指南：栅格的定义和使用方法 在一个 B 端页面当中，关于栅格的使用方法，你或多或少都会有所疑惑。

阅读文章 >

B端设计指南：6800字干货帮你掌握快捷键设计 前言 键盘，在很多人的眼中，就是一个信息录入的硬件设备。

阅读文章 >

垂直业务型产品 垂直业务型产品是针对企业垂直独立的业务需求所设计出来的 B 端产品。这类产品的出现，主要是围绕某一个复杂业务场景，去解决这个场景当中企业经营、管理的实际问题。

比如以 CRM 为例：CRM 的全称客户关系管理系统

因为它是客户关系管理系统，而使用这类产品的主要角色就是销售员工，他们在进行商品售卖（特别是交易周期较长的商品时）需要销售人员通过 CRM 进行管理客户。

而作为企业为什么要使用 CRM 产品？

其实是因为企业本身会有较强的管理需求，我希望能够通过 CRM 去监督每一个销售人员究竟是否认真完成工作，是否合理合规高效的与客户进行跟进沟通，因此可以通过 CRM 满足企业的管理需求。

但“销售”这类角色往往非常特殊，它存在于各行各业，比如楼下提供保险业务的销售人员、楼上在线培训的销售人员、自己公司 B 端产品本身的业务销售人员。

而大多数 CRM 产品考虑的不是针对每一个行业单独去制作一款 CRM，因为销售团队在使用的过程当中，就会存在很多共性，产品便可以通过共性去抽象一个针对多行业的客户关系管理系统。

垂直业务型通常属于 B 端产品当中难度较高的产品类型，因为不同的业务，往往作为设计师需要了解的不是简单的这个页面长什么样，而是这个业务下，员工应该怎么用，怎么用才是更为合理的，而在很多招聘信息当中，就会发现企业更喜欢去招聘有过类似经验的设计师。

当然作为设计师，如果选择进入一家垂直业务性产品的企业，应该更多的去阅读行业相关的书籍，比如想要做好 CRM 产品，你必须了解什么样的销售人员，具备什么能力，才是一名资深的销售。通过了解行业人员的具体使用细则才能更好落地设计。

行业属性型产品 行业属性型产品是针对某个行业定制的一系列，从上至下、从内到外的产品功能。这类产品主要是围绕一个具体的行业去构建整个产品的解决方案，目的是这个行业的商家，在使用了这款产品过后，就能够解决它目前经营过程当中的问题。

比如以在线教育行业为例，小鹅通应该就是在线教育行业的头部产品，去观察它的产品功能模块你会发现它会涵盖课程详情的内容管理、学员知识付费的交易管理、对产品进行营销的 Marketing、成功付费学员的客户关系管理，而这些功能模块在其他产品当中都可以单独拿出来，当做一个大型的 B 端系统的功能。

行业属性型产品更多是以这个行业当中需要用到的产品出发，考虑就不再是单一的老师角色，而是一个课程培训行业所涉及到的所有工具，都希望能够通过行业属性型产品去解决。

在设计上，行业属性型产品不会过于复杂，功能都会相对比较简单，因为对于这些商家而言，不需要过于复杂的系统，只要你能够满足它的日常工作即可。

比如小鹅通，就是属于在线教育行业的产品，它与纷享销客当中的客户管理就会存在明显差异，无论是从功能还是界面的复杂程度来说，都完全不一样。可以看到筛选、视图、表格操作，等多方面的交互、产品规划，都会有明显的差异。

协同办公型产品 协同办公型产品是通过软件实现工作协同、办公自动化，让企业高效运转的产品。

大多数情况下，企业内部的办公管理没有太多个性化诉求，因此会购买成熟的办公协同产品：比如飞书、企微、钉钉、泛微

目前较为常见的协同办公产品包含：在线文档、OA 办公自动化、IM、在线会议、项目管理、研发管理等产品。

协同办公产品，在企业当中通常只会有一款软件。比如在一家企业 使用了企业微信，就等于它会去使用腾讯会议、腾讯文档、tapd 等多款关联性的产品。

在设计层面上，协同办公型产品是最接近 C 端产品的特性，因为他的使用人群很多，并且使用的角色也复杂多样，因此在产品设计上，对于 视觉交互往往有着更高的要求。

运营管理型产品 运营管理主要分为运营与管理两个系统。

运营是针对自己本身就有 一款产品 A（不限于 C 端 B 端） ，为了满足产品 A日常界面的展示与维护，需要专业的运营类后台系统所支撑。比如淘宝、抖音、小红书，这些产品，他们都会有自己的内容审核 、广告投放等多个后台系统。

运营的主要目的就是审核，日常的数据资料维护，比如以 sspai 为例，在少数派的网站当中，有作者进行投稿，因此必然会存在对应的运营人员进行内容审核，同时少数派还会有会员、商品购买，因此能够推断出少数派的运营后台一定会包含类似成员管理、会员管理，订单管理等前台系统已经拥有的功能，来执行网站后续的运营工作。而管理则是针对系统当中的商户、用户、租户的“信息资料”进行管理。

主要会涉及到：

商户的门店信息：

饿了么的商家服务后台，商家可以进入到系统里面去配置门店的具体信息、售卖的菜品、对应的活动等等，而饿了么就是通过这样一个平台能够规范商家在系统当中的行为，能够对他们进行有效的监管。

租户功能的开通：

租户主要针对的是 SaaS 产品，也就是购买 SaaS 产品的客户，而我作为产品提供方，想要对每一个客户进行管理，就会有一个租户平台进行管理。比如在我们一个租户管理系统当中，为了让客户成功对每位租户的信息进行快速操作，在设计上并没有优先去考虑设计原则，而更多是将操作外置，让信息快速传递的同时，能够快速操作。同时使用的客户因为都需要进行上岗培训，这样简单的操作也能让他们更容易理解。

用户信息的分析：

对所有在平台的数据进行分析管理。比如在 B 站当中，就会存在大量的用户，一旦有人发言出现问题，或者言语行为过于暴力，那一定会有系统来管理这样的特殊情况。而用户给到的数据我们还能够对其进行更为细致的分析。

最后 其实一款 B 端产品并不是固定在某一个类型当中，更多是随着市场的不断发展进行变化，因此要去理解的是这个软件背后的业务诉求、推导他们的功能模块，盯着一款产品“发呆”（其实就是去想想，多理解），当然这对于 B 端产品的类型，有什么自己的想法也可以在评论区发表自己的看法～

全面了解 B 端产品设计：如何理解需求？ 在上一篇《全面了解 B 端产品设计：基础扫盲篇》内容中，我们已经知道，B 端的设计难点不在于精美的外观和复杂的设计，而是要符合产品的实际需求，并有效提升业务运营的效率。

阅读文章 >

欢迎关注作者的微信公众号： CE青年Youthce