本文邀请了优设的优秀老师哔波、林不慌和香奈，为大家分享他们多年的接私单经验。

上期回顾：

自由职业4年多，我总结了完整的私单合作流程 我是从 2018 年年初开始做自由职业的，到现在已有 4 年半的时间，在做独立插画师、设计师的过程中，合作过很多品牌。

阅读文章 >

@AC炒碗面

接私单通常是朋友介绍或者从发作品的平台找寻过来的，和正常工作一样，需要询问清楚意向风格、工作总量、提交时间，这三点是确认自己是否有排期可以接单；然后提供对标作品给需求方，这点是需求方确认是否合作的常规操作，最后才是谈价格，双方确认价格后，收账方式一般是 50%+50%，或者 30%+30%+40%。

确认合作后第一步就是收取 50% 亦或是 30%的定金，收到定金后再工作，收定金前对任何询问创意思路、或者要求帮助找参考的要求都要婉转拒绝。早期接单我觉得走合同更有保证，但是实际上如果经常是几千块的小活，按照喜欢收款方式分步收款即可，走合同意义不大，因为走法律途径追款的成本明显超过这个单子本身的价值。

50%+50%：一般是设计前收款 50%，设计完成交付源文件前收款 50%，30%+30%+40%：设计前收款 30%，设计中期取一个节点（比如线稿完成）收取 30%，设计完成交付源文件前收款 40%。如何选择可以与需求方商量，一般我觉得几千的小活就分两次收款即可。

如果想学类似的扁平插画，可以看我的录播课程，一顿饭钱掌握 ? https://pro.uisdc.com/detail

@Lady不慌 在商业合作中，我们往往会遇到各种各样的合作对象，希望留意一些小细节，让自己在合作中更加顺畅更加直观。

1. 做好自己的作品展示，确立自己的主要风格和方向。

各个作品流平台和社交媒体依然还是一个非常重要的展示机会，保持各个平台的尽量同步更新，在不同的平台类型之间输出不同的类型作品，比如视频和图文两类，平时整理发表作品时不限于图文内容，也可以注意保存视频类型的作品，绘画过程或设计过程或自己关于专业领域的一些心得，发抖音 B 站等尊重各平台的特色，各个平台之间互相引流。不少商业的合作也许都是从这些平台开始跟我们进行联络和了解。

2. 高效的沟通。

当自己的内容平台吸引了一些合作客户时，我觉得高效率的沟通很重要，首先可以在各个作品平台简介上直接了当的注明自己联系方式和商务合作方式，让人一目了然。然后各个社交流媒体或平台都有自己的消息聊天功能，收到合作邀请或意向时尽量及时留联系方式，转到微信或其他去聊，不要在临时的私信或留言界面聊。

3. 对自己价格的理解。

在私单价格沟通方面可以先对自己的作品和水平有一个定位，不至于太模糊，商业合作比较多时，可以有一个门槛价，过滤不感兴趣价格低的合作，与人沟通聊价格时尽量主动，快速判断合作项目的性价比。有时候会遇到各式各样的合作对象，当对方对价格没有概念时，可以快速解释清楚行业价格，遇到自己没有价格概念的时候可以问问行业朋友再去聊

4. 如何避免被坑

首先先看清合同，合作之前咨询清楚对方合同的主要重要条款之类的，之后细看，注意聊清税前税后价格。

关于价格，快速判断出性价比是第一位的，预算较少没有达到心理价位时，注意维持合作的性价比，消减作品投入精力。

有时合作方找你不直接去和你合作你的主营业务和特长，而只是看你综合能力强与你接触，遇上不熟悉的业务又想合作时，可以多沟通一下，不要急于开始合作，或是不熟悉的风格而需求量大时，可以先主动试稿，确立单张的品质各方面再合作。

可以明确单张合作价格，对方有时会以系列数量多而要求降低价格，可以明确单张价格，不因为系列数量多而降低单张价格，避免整体合作性价比降低。

了解合作方的不同，有时作为直接与某品牌或项目合作，有时合作方作为某品牌的代理宣传再次外包合作，聊清合作形式以及付款的时间次序。

可以适当提出修改次数的规定，避免无限制的修改，在合同中说明，比如确定大的定稿方向后最多两次或三次细节调整修改。

有些时候也会遇到无商业合同的合作，遇到新的需要磨合的合作伙伴时，除了内容上的沟通之外呢，记得多聊一些付款流程，可以在合作之前先要求付一些定金，再开始进行创作，结束后，可以要求付完款后再提供输出图和源文件。

如果你对于这类梦幻风格插画感兴趣， 想系统性的学习，不妨关注一下我的私房课：

这类人气超高的治愈系梦幻插画，有 iPad 就能学！ 对设计师而言，iPad 不仅意味着娱乐、看剧，更是画画的绝佳帮手，设计创作的新核心： 它携带方便，可以随时随地画画，上下班路上也能练手； Procreate 功能强大，几乎能满足一切画画需求。

阅读文章 >

香奈：

1. 确认身份

对于新手小白第一次接单，需要了解对方公司或者个人的真实性，避免被骗或者被坑，可以网上搜查或者天眼查验收。

2. 沟通基本需求

① 画的具体内容

② 要求的风格（最好甲方给到具体的参考风格）

③ 难度

④ 预算

⑤ 时间期限

⑥ 报价

3. 签约

签约是为了保障自己的合法权益，必要的内容包括：

1. 合作内容和附件

2. 交付&验收方式（具体交付时间以及验收的方式）

3. 费用的结算与支付（包含具体时间避免被拖欠）

4. 项目成果归属约定（一般成果交付后成果归甲方所有，甲方可同意乙方拥有成果的署名权，可用于参展、参赛等非商业性活动中标注其自身作品时展示和使用等)

5. 保密协议（保密的内容）

6. 作品修改补充（超过三次修改可适当增加修改费用）

7. 争议解决办法（万一发生争议可双方协商或者通过诉讼等方式解决）

4. 报价

有两种情况：

一是甲方主动报预算 这个时候可以根据自己的实力去定夺，适当报高，不要太离谱就可。

二是甲方让作者先报价，尽量往高了报，高了可以谈，但是低了没法往高了谈。

报价公式：报价=时薪 X 绘画时长 X 2（或者根据绘画的难度适当增加）

报价也会和插画师的知名程度成正比，同一个稿子知名的插画师报价可能会比一般的插画师要高的多。同时也会随着自己的个人画技的不算提升和接稿次数的提升而提升。

有的报价可能会包含税点，或者税点对方支付，具体看双方的协商，然后开等额的发票给到对方。

5. 预付款

预付款，一般是稿费总额的 3~5 成，具体看双方的协商。

预付款是为了防止骗稿或者项目因不可控因素导致无法继续，插画师的劳动成果有一定的保障。同时也能根据预付款看出合作方的真实性以及诚意，没有预付的合作都是耍流氓。

6. 试稿

一般来说试稿都是新手遇到的比较多，试稿时有必要跟对方要求一定比例的试稿费用。

一定要沟通确定好，否则试稿不通过浪费自己的时间和精力。可以要求支付单张稿费的 50%或者在自己能承受的范围内协商具体价格。

7. 创作流程

草图

先画大概的草图跟对方确认沟通，画面是否满足对方的要求。

线稿

草图确定后画线稿再进一步确认线稿，这个时候我们需要跟对方确认这个线稿确定后是不能修改的（这个一般都会提前写到合同里）。

上色

线稿确认无误后开始上色，上色完成后可以适当接受修改的次数不超过三次，超过三次需要对方支付一定的修改费用，具体看自己的情况和对方协商而定。

8. 结尾款

截止到结款的过程中，我们发给对方最好是插画的截图或者小图供对方审核，以免遭遇骗稿的风险，只有在对方确认最终画面时候，收到对方的打款再交货。

如果想学我的中国风插画，可以看我的录播课程，一顿饭钱掌握 ? https://pro.uisdc.com/detail

地图 App 已经不再满足导航工具，通过信息挖掘和拓展，更希望能够成为人们日常生活中重要的信息平台。刚好回老家期间， 高德地图 用得比较多。使用过程中发现了一些比较有意思的细节，觉得有必要总结下分享给大家。

主要包括以下 3 点内容：

1. 信息架构升级，构建清晰的信息边界

2. 信息挖掘，更好的服务用户出行

3. 智能感知，提高用户行为效率

信息架构升级，构建清晰的信息边界 高德 10.0 版本升级了平台的信息架构。原有的版本并没有做信息分层，而是以地图画面为核心，将各类信息分散展示，出行功能路径入口共用“路线”功能，影响了用户的操作效率。

另外为了减少各个功能对地图的遮挡，功能选项只能尽可能的融合、隐藏、精简，造成了部分入口信息层级较深，拉长了用户的行为链路，同时不利于功能和内容的拓展。

在新的版本中，信息架构回归到传统的底部 Tab 导航形式，可以更好的拓展信息承载空间，满足信息平台型产品的设计定位。目前底部导航分为“首页、附近、消息、我的”四个频道，用户可以分类查看内容，信息结构更加清晰。

图片来自 AlibabaDesign

在首页中，高德地图打造了“内容中心”来承载更多信息。将”地图“与”内容“相互独立，构建出了明确的信息边界。

交互设计上，内容中心采用弹性浮层方式，分为了 3 种模式。默认模式下，内容中心展示快捷功能”工具箱“和常用地点，方便用户快捷操作。当“内容中心”下拉收起，可以释放更多的屏幕空间给地图。上滑则进入“更多模式”，为用户提供更丰富的信息。

“内容中心”的信息会根据用户实际位置，搜索地点而变化。例如我在北京时，会显示北京的专享服务。而我搜索上海的地点，首页下方则增加了上海的推荐信息。

信息挖掘，更好的服务用户出行 1. 地图信息颗粒度细化，提高信息承载能力

一个地点除了基础的地理信息外，还需要集合各类相关信息，为用户做好出行服务。如何将复杂多样的信息整合，实现“所见即所得”展示给用户呢？

高德地图采用了“内容分类”的方式来展示地理位置的二级信息，从而提高地图信息的承载量。

当地图定位到景区范围内，会显示厕所、出入口、餐饮、停车场等信息选项，用户点击即可查看相应的内容。

而大型商场聚焦放大时，用户可以查看商场楼层的店铺信息，将细节信息融入在地图中，通过多层级的信息划分，展示不同颗粒度的内容。

2. 实景信息，提高用户决策准确性

当我们进入一个陌生区域，乘坐公交车时，需要准确知道公交车站的位置。而公交车是有方向的，一旦我们进入了错误的方向，可能需要横穿马路或者绕行很远才能抵达正确的公交站点，这会花费用户很大的体力和时间成本。

当用户规划出行路线时，地图路线中通过冒泡提示形式，引导用户查看公交站点的实景地图，方便用户更准确的定位。

3. 场景化信息挖掘，为用户提供更好的服务体验

当用户搜索酒店时，在页面上方会展示“查看附近酒店”的快捷按钮。方便用户快速查看周边的酒店，进行对比选择。

如果用户在非营业时段搜索商业场所，会展示不同的信息状态。例如深夜搜索时，显示“已打烊”状态，而在清晨搜索时，显示”未营业“状态，并告知营业时间，避免用户跑冤枉路。

当用户查询驾车路线时，如果查询的地点不是特别明确，系统会提供多个地点供用户选择，并增加了各个地点的选择比例，降低不熟悉用户的选择成本。另外选项中不仅有停车场景，还考虑到了接送人临时停车的场景，实现了多场景的覆盖。

4. 激活用户群，实现信息共享

当用户计划出行时，希望了解目的地的天气、游玩情况。有些信息平台无法给出明确的答案，于是高德地图将发言权交给了有经验的用户，搭建相互交流的群组，实现了信息的共享交换。

智能感知，提高用户行为效率 1. 用户行为态势感知

当用户打开 App、搜索地点或者行程导航时，高德地图会主动感知用户的导航需求，提供相关的信息引导。例如上下班路线、消费券、团购优惠、停车场建议等等引导信息，引导用户的快捷操作。

另外用户查询地点时，地图还会扩充展示周边地点的卖点信息，希望能够为用户提供更多的参考信息。

2. 行程查询记录的保存

用户在查询打车行程，但未打车时，信息会保存在首页信息中，便于用户随时调用出行。

以上就是我的一些使用心得，欢迎小伙伴们评论区留言交流~

下期再见。

10个产品细节剖析，看看大厂是如何做设计的！ UI/UX 设计能力的提升离不开分析与探索，针对优秀产品的设计进行分析总结，探索设计背后的经验规则。

阅读文章 >

欢迎关注作者 微信 公众号：「子牧UXD」

往期回顾：

企业出海！设计师如何做好产品本地化设计：印尼篇 可以预见的是，企业出海会是未来两年的趋势之一，特别是东南亚国家，这两年经济增速很快，成为了国内诸多公司的出海首选。

阅读文章 >

企业出海！设计师如何做好产品本地化设计：竞品分析印尼篇 上一章，我们宽泛的了解印尼的宏观环境、电商市场、移动市场、支付、物流、税收、汽车及两轮汽车市场、汽车后市场。

阅读文章 >

企业出海如何做好产品本地化设计：C 端实战复盘 2020 年小编及团队成员对 Speedwork Customer App 及 Workshop App 进行了“从 0 到 1”的设计，包括设计理念到视觉语言，界面框架到组件模式，单用户触点到全链路场景。

阅读文章 >

汽车养护服务市场是一个复杂的 F2B2b2C 行业供应链，参与者需要把用户、供给和履约都做好，并不断优化三者的服务能力，从而形成一个完整的闭环服务系统。

作为提供一站式汽车养护服务平台的 Speedwork 连接了用户与商户，平台需要将数字化能力赋能给商户帮助其管理及运营门店，同时还为商户提供汽配供应链，构建商业模式的闭环，打造汽车服务生态系统。

Gtech 佳应科技以技术为驱动，实现价值创造最大化。我们为商家打造了掌上门店管理应用 SpeedBiz，提供线上线下订单的统一管理、商品及库存管理、员工管理、销售报表等功能，同时还能进行一站式的轮胎、汽配件采购。针对平台侧提供了 SpeedShop Enterprice 业务中台，帮助平台运营管理门店、商品、促销、会员及全渠道订单。

B 端设计内核探索 B 端 C 化也是近几年 B 端产品的设计趋势，之所以有这种趋势是因为无论 2B 还是 2C，最终使用者都是人，我们都在为人的使用做设计，因此从以往的 B 端 IT 直接开发交付，到现在要以 C 端产品的用户体验设计标准来交付，企业开始重视整个业务链路上的所有产品体验设计，能够帮助商家数字化运营赋能且提高工作效率，是 B 端产品的核心。站在公司战略侧，SpeedBiz 的交付不是针对 Speedwork 本身定制化的产品开发，我们更希望能做 L 型能力的产品，在此基础上让产品具备商业化能力，复用性以增加其价值，可以使用到其他业务场景，或者赋能给更多企业，在这里埋个伏笔，后续系列文章中，我们会介绍到通用版的门店管理系统的设计，支持多语言多终端，能够灵活适用到汽后市场不同的业务场景。

B 端的用户体验建立在解决客观问题、提高工作效率的基础上，他们相对理性，所有的操作都是在完成某个任务，而不是毫无目的的闲逛或是消磨时间。每个任务都是一个闭环，每一个任务都尽可能降低用户各种操作及学习成本，让用户感觉到“简单”、“稳定”、“高效”。因此 Speedwork Workshop App 的核心设计理念为：简单、稳定、高效。

用户定性研究 明确了解目标用户，并对其进行定性的研究，确定用户画像，根据真实的业务场景进行体验设计。Speedwork workshop App 目标用户是门店老板及维修技师，少数门店还有收银岗位，门店类型分为摩托及汽车维修门店。我们在描绘 B 端用户画像时应注重职位、门店规模、利润水平、业务需求等。不同的职位决定了不同的使用场景，比如老板/经理作为最高权限的用户，他能使用产品内所有功能，查看全部数据，而维修技师往往只需要关注本职工作，完成上级分配的订单，并可进行日常上下班打卡即可。

B 端视觉规范 一期上线的印尼版 Speedwork workshop App，延续了 C 端 视觉规范 设计体系，在商户端同样需要建立平台品牌心智，让商户侧感受到 Speedwork 平台对于 产品设计 的用心以及专业性。

卡片式模块化的布局可以灵活支持功能拓展，界面简洁、布局清晰，注重信息的有效表达和操作的便捷性。

典型场景的交互设计 主要有 3 种典型使用场景：

1. 订单管理

针对全渠道的线上订单跟进处理；针对线下的订单进行录入

2. 商品管理

管理线下销售的商品，主要用于非平台商品的录入

3. 查看销售报表

查看线上线下客流、交易流水、支付方式占比、毛利分析、产品及类目销售排行等经营数据

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

阅读文章 >

欢迎关注作者微信公众号：「Gtech UED」

前言 SVG 格式图标在软件界面中有广泛应用，它与生俱来的矢量属性，使其在高分辨率屏幕上的表现非常完美。 SVG 是一个基于 XML 标记语言的开放网络标准格式，拥有跨设备多平台的兼容效果。前面我们有分享过一篇关于 WPS 图标的文章《探索 WPS 3000 个 图标设计 背后的故事》，得到了很多网友的积极反馈。相信界面设计的小伙伴们都很熟悉 SVG 格式了，这次，我有一个棒的想法想分享给大家：利用 SVG 图标套色，来完成不同界面的适配。

如何重新设计3000个图标？来看金山团队的实战案例！ 项目背景 近些年，WPS 组件页在完善基础功能的同时，增加了许多新功能。

阅读文章 >

什么是 SVG 图标套色？ 图标套色的简单来说就是利用 SVG 格式的文本属性，使用 XML 格式标准，在 SVG 文档中增加 CSS 样式，通过修改 CSS 样式属性，精准控制 SVG 格式图标颜色，通过修改透明度控制图形显示与否，从而变换图标的风格外观。

基本原理：修改 SVG 的样式，生成不同风格的图标

用处一：颜色适配

这里有几个插件，都用到了“保存”、“打印”这些功能。因为主题色不同，即使是同样外形的图标，还是需要根据主题色的不同输出适配各个插件的图标。采用图标套色的方法，就可以避免这类图标资源的重复输出。

相同功能需要两套不同主题色的图标

用处二：皮肤适配

现在多数软件一般都有皮肤功能，不同用户需求，衍生出风格各异的皮肤，各种颜色，深浅不一，一套图标满足不了所有，为了视觉效果需要对每个皮肤输出特定颜色、风格的图标。图标数量如果很多，投入的成本将随皮肤数量呈几何倍增加，图标套色就可以很好的解决这类问题，只需要通过修改图标颜色和风格即可适配。

通过修改映射配置，可以得到不同颜色的图标

套色方法 我们先看看图标套色之后的效果：

修改映射配置，可以得到线、面不同风格的图标

简单来说，实现这种效果有下方五个步骤:

套色方法五个步骤

以下方几个图标来做示例：

SVG 示例图标

第一步，确定图标线、面风格

设计师将图标线、面风格确定下来，并保证两者效果上可以兼容，即轮廓一致。

同时兼容线、面两种风格效果

第二步，定义图标颜色

在确定了图标的风格之后，将图标中用到的 7 种颜色，根据一深一浅再拆分为 14 种（具体几种颜色可根据图标设计需要来定），深色用于填充线性图形，浅色用于填充面性图形。

根据线、面风格需要，定义图标的颜色

第三步，给颜色定义样式名

给 14 种颜色，分别定义好 CSS 样式名（样式名遵循 CSS 规则即可）。

给颜色定义样式名

第四步，给 SVG 图标添加 CSS 内部样式

SVG 格式图标默认是没有 CSS 样式，需要手动将 CSS 内部样式添加到 SVG 文档中，并将 SVG 路径颜色与 CSS 样式名关联起来。

给 SVG 添加 CSS 样式

第五步，样式属性配置机制

添加内部样式之后，需要开发小哥哥在软件中增加对 SVG 图标 CSS 样式属性的映射机制。修改映射机制配置文件中 CSS 样式属性，就可以控制图标风格变化。

修改配置代码即可改变图标颜色

完成了以上五个步骤，通过修改软件中的映射机制配置文件，就可以改变图标风格。

应用案例 了解了步骤方法，我们以 WPS 为例来讲解图标套色在实际案例中的应用：

案例一：前面有提到我们的四大组件，WPS 由文字、表格、演示、PDF 四组件组成。每个组件都有各自的主题色，文字主题色为蓝色，表格绿色，演示橘黄色，PDF 红色。多数图标都含有主题色，但外形是一样的，因各组件主题色不同而导致了很多图标的重复输出。

套色用处之一的颜色适配，可以让图标变色以适应不同的组件色，避免图标的重复。

不同主题色图标的变换效果

案例二：WPS 有推出多个风格各异的皮肤，因为图标数量的关系，无法每个皮肤都输出一套图标，目前只能使用默认的线性图标。也因时间和维护成本而导致图标风格的单一。

套色用处之二的皮肤适配，能使图标改变风格以适应不同的皮肤，既能满足图标风格多样，又能满足时间和维护成本的可控。

不同风格图标的变换效果

案例三：深色模式的配色与浅色模式大相径庭，图标使用的颜色也截然不同，适配需要输出两套图标资源，因不同深浅色模式而导致的图标资源重复输出。WPS 组件功能区的图标有几千个，输出和维护都很费精力。

套色用处之二的皮肤适配，在深浅色模式下也能适用，改变图标颜色以适应不同的深浅色模式，避免图标的重复输出。

深浅色模式下图标的变换效果

总结 通过以上的案例不难发现，SVG 图标套色技术的价值，主要有以下几个方面：

1. 时间和维护成本的降低

利用图标套色方法，设计师只需要输出一套图标资源，就完成了多组件、多风格、深浅色模式适配。开发小哥哥也可以删掉适配用的冗余代码，提升了图标的管理和软件运行效率；

2. 个性化需求的满足

后期可以增加自定义扩展，让用户配置图标风格，更好地满足个性化需求；

3. 服务器资源的节约

更少图标资源，更小压缩包，更少空间和宽带的占用。

采用新技术，帮助设计、开发更好地完成多场景适配，降低了整体流程的执行难度，为项目节省了大量时间，避免过多精力投入在重复工作中，为最终完成目标创造了有利条件。同时也解放了生产力，有了更多的时间可以去关注高价值的项目。

工作中经常能遇到重复的内容，这都有提升和优化的空间，寻找更高效的方法，让工作变得轻松简单。

记得关注我们，下次还有更多好玩、有趣的内容分享给你～

实战案例！WPS 2021 年度设计改版完整复盘 随着用户使用 WPS Office 的场景逐渐多样化、对产品的体验要求也逐渐提高，我们在视觉层面上围绕着「以用户为中心」开始了一次全新的视觉改版：追求简洁、高效、一致的办公环境，精心打造极致的办公体验。

阅读文章 >

欢迎关注作者微信公众号：「CED设计团队」

2020 年小编及团队成员对 Speedwork Customer App 及 Workshop App 进行了“从 0 到 1”的设计，包括设计理念到视觉语言，界面框架到组件模式，单用户触点到全链路场景。

往期回顾：

企业出海！设计师如何做好产品本地化设计：竞品分析印尼篇 上一章，我们宽泛的了解印尼的宏观环境、电商市场、移动市场、支付、物流、税收、汽车及两轮汽车市场、汽车后市场。

阅读文章 >

C 端设计内核探索 回到最基础的 用户体验 设计流程，我们需要对 Speedwork 的商业目的、产品目标及用户需求进行深挖，也就是战略层。 站在 C 端用户的角度上，能想到的关键词为：正品保障、专业服务、价格实惠透明、便捷、选择多等等。我们的任务是打通线上线下体验闭环，关注各个用户触点的产品体验，帮助用户更轻松更高效的完成汽车养护，建立平台品牌心智。

Speedwork Customer App 的目标用户为两轮、四轮汽车车主。通过对目标用户的问卷调研，针对 C 端用户在购买转化阶段的主要决策因素进行分析，对其中的 21 项因素做了基于 KANO 模型的分析，考察不同因素在购买时候的影响程度。

UI 进阶必学系列：需求分析工具 KANO 模型 大家知道，长期以来我们一直在坚持分享一些基础的干货内容，那些看书、看分享很难系统搞得明白的知识点，这和我个人对基本功的执念有密不可分的关系。

阅读文章 >

最终 Speedwork Customer App 的核心理念聚焦在 4 个关键字：简、好、惠、安。

Auto care supplies & services on demand. 品牌触达，情绪共鸣

1. 简单易用

基于养车业务的线上化，更多的内容和服务需要在 Speedwork 上去体现。不论对于内容的认知，还是平台产品功能的操作体验，我们都希望能以简单的方式直接面向用户，让用户能够轻松掌控一切并能感受到细致入微的服务体验。

2. 正品保障、贴心服务、便捷体验

“专业养车”是 Speedwork 需要传递的第一印象。我们希望通过一致性、亲切感、场景化的表达让用户感受到专业信赖、贴心服务的 Speedwork。设计师需要在界面上将正品保障、质保服务、专业度进行透出，将心智传达到用户侧。

3. 产品的价格有竞争力

印尼的人均客单价低：平均网购额为 481000 印尼盾（约合 36 美元），这一数据远低于新加坡（平均 91 美元），印尼在东南亚国家中排名倒数第二。因此有竞争力的价格，一定是初期获客的关键因素。由于人的大脑存在“损失厌恶”等认知的偏差，利用这些认知偏差我们可以给用户适当的紧迫感，例如加一些限时限量的元素，所以如何在用户决策的拐点界面去呈现促销是设计的重点。

4. 数据安全与隐私保护、数字支付安全

第一章提到由于消费者对于在线交易缺乏信任且信用卡普及率低（印尼不到 5%的人拥有信用卡），所以在线支付的时候消费者更倾向于银行卡支付及货到付款。受疫情影响，印尼的消费者大大减少了对现金的使用，电子钱包成为在线支付的最优选择。作为一个汽车养护电商平台，保护用户数据及支付安全，是获得用户信任做出购买决策因素之一。

统一的视觉语言 1. 情绪板

我们使用情绪板确定视觉的方向，明确契合汽车养护场景，探索建立一个专业、信赖的品牌主色，让用户直观的感受到品牌理念。通过对“简、好、惠、安”4 个关键字进行映射衍生（视觉、心境、物化），检索出具有代表性的图片，进行情绪版的制作。

最终我们选用绿色作为产品主色，绿色在印尼本地是非常受欢迎的颜色，绿色是穆斯林的代表色，本土电商 tokopedia 以及生活出行的两大巨头 Grab、Gojiek 的产品色也都选取了绿色。

2. 框架搭建

从 3d 视角去看界面，可将页面水平切片为背景层、内容层、框架层、临时层。从下往上看，背景层是整个页面的全局背景色，内容层是承载着不同页面功能需求、业务诉求；框架层主要是标题导航栏和底部菜单栏，它们是控制全局页面跳转关系的；临时层主要是事件的展示，比如动作面板、选择器、对话框、提示、通告栏等。

3. 建立规范

相信大家对设计规范、设计系统都不陌生，我们基于原子设计理论，分别建立中后台产品、移动端的设计规范，将业务与设计解耦，将组件拆分成原子级，再进行拼装，从最小颗粒度（原子）、简单组件（分子）、复杂组件、模版、再到最后的页面搭建。当业务复杂度高的时候，设计师会根据不同业务进行业务组件的设计。但业务组件的基础其实都是在于原子级设计，只是业务组件不具备通用性。

4. 注入品牌 DNA

我们结合品牌基因，增强识别，并通过网格化规范绘制，使得整体统一有序。

细节的体验设计 1. 字体的选择

设计师要注意产品所使用的字体是否有版权问题，尽量使用开源字体，并且该字体能适配多语言。Speedwork 使用的字体是 Roboto，和 logo 的文字字体一致且能够适配泰语、印尼语、越南语和马来语。Roboto 是随着 Android 4.0 操作系统引入的一种无衬线字体系列，该字体由谷歌的界面及字体设计师 Christian Robertson 设计，并且完全开源使用。

2. 多语言适配（印尼语&英语）

Speedwork 交付的时候不止是在印尼上线，同时会进入马来市场。因此界面设计时需同时考虑到印尼语和英语的字段长度，避免固宽的控件里文字被截断展示或者换行的情况。另外一个问题，我们设计是以英文交付的，印尼运营人员再根据英文翻译印尼语，这个时候翻译者一定要考虑到展示场景，尽可能的准确及简短。

3. 手机号格式

在竞品分析的章节，不知大家是否留意到，Planet Ban 的手机号填写规则是最小 10 位数且需开头加 0，例如 08**********；Bukalapak 和 tokopedia 的注册页也在输入框下面增加了提示“例如：081234567890”；但是 Shopee 是自动根据手机号去识别是那个国家的号段，当小编输入手机号后自动识别为（+62）822-****-****。经过分析对比可看出，印尼本地产品不支持其他国家手机号注册，因此无需选择或展示+62（国家代码），Shopee 和 lazada 都是针对东南亚市场多个国家的，所以会展示国家代码。

印尼手机号为 08 开头，从 10-13 位都有，其中超过 90%的为 12 位，11 位和 13 位约为 4%，10 位的不足 1%，因此手机位数的判断是“10～13 位数字”，如果去 0 输入，则手机号位数判断应该是“9～12 位数字”。为什么可以去 0，因为 0 后面开始的 3 位才是运营商的号段，比如 822 就是 Telkomesl 的手机号，就跟中国移动，联通号段不同一样。

那到底是依照本地产品加 0 的输入格式，还是依据国际化产品国家号+去 0 手机号的格式呢？从用户角度，两种形式都可以，以 Shopee 和 Tokopedia 势均力敌的访问量看，用户都能理解并完成注册。从产品角度，Speedwork 虽然以印尼市场为主，但同时也需要进军马来市场，考虑到数据存储的标准和后续的通用性，最终是选择 Shopee 的形式。

4. 日期格式

众所周知，中国的日期格式是年月日，美国标准日期格式是月日年，英国的日期格式是日月年，如 1987 年 4 月 20 日，美国是 April 20, 1987，英国是 20 April, 1987。Gmail 的日期格式是 Wed, Jul 31, 2019, 7:50 AM；印尼本土电商 Tokopedia 的订单页上的日期格式是 12 Sep 2021; 14:00 WIB，印尼当地新闻网站上的新闻发布日期格式是 22 December 2021 14:46，印度尼西亚的食品生产日期也是按照“日月年”的顺序排列的。由此可见，印尼普遍是使用“日月年”的日期格式。在 Bukalapakd 的 flash deal 页面，展示整点秒杀时间的展示是 10.00 WIB | 13.00 WIB | 16.00 WIB，因此严谨的时间是应该要加上时区的且整点的格式是“.”不是分号，时分秒的表达与国内一致。在促销场景里展示日期范围时，常用的格式是 21-23 December 或是 30 Aug 2021 – 28 Nov 2021。

*注：WIB 是 Waktu 印尼 Barat(西方印尼时区)，印尼跨越 3 个时区，分别是 WIB(GMT+7)、WITA(GMT+8)、WIT（GMT+9）。

5. 地址格式

印尼的地址格式和西方的写法一样，地址从小到大展示：详细地址（街道、建筑、门牌号等）/区/市/省/国家，邮编。例如 Speedwork 在印尼的某门店地址：

Wisma, Jl. Hayam Wuruk Kel No.8, RT.6/RW.2, Kb. Klp.（详细地址）,

Kecamatan Gambir 甘比尔区（District 区）,

Kota Jakarta Pusat 中雅加达（City 市）,

DKI Jakarta 雅加达特区 (Province 省)

10120（邮编）,

Indonesia（国家）

6. 货币单位和价格格式

印尼卢比是东南亚国家印度尼西亚的法定货币，印尼卢比与人民币汇率比大致在 2000:1 左右。卢比的英文是 Rupiah，简写为 Rp。比如人民币的符号是¥，编码是 CNY；卢比是 Rp，编码是 IDR；¥100 相当于 Rp224.240，也可以写成 224.240 IDR。如果是去印尼旅游，简单的换算就是除去三个 0，然后除以 2，例如 10.000 印尼盾折合约人民币 5 元。另外中国标准的数字用法是整数部分每三位一组，以“，”分节，小数不分节。四位以内的整数可以不分节。 例如 624,000、92,300,000、19,351,235.235767 1256。印尼的数字用法常见的是都用“.”分隔。

7. 姓名格式

在做国外项目的时候，填写姓名往往会拆分成 first name 和 last name；印尼人大多数人只有名，没有姓。可是也会遇到的印尼人名不只一个词，也有两个或两个以上部分组成的，有的只是名，有的是连名加姓。因此在做印尼本地产品的姓名录入时，可以不用拆分姓名，就用 full name 字段会更通用更合适。

情感化的设计 第一章节有提到印尼人口结构年轻化，30 岁以下人口占比超过 50.0%；处于热带雨林气候的印尼，年平均温度 25-27℃，通常气温较热且多海岛的国家，民众通常喜好绚丽的颜色；从印尼本土的产品界面配色不难看出，共性就是色彩饱和度高，喜欢用对比色，并且通过插画来表现情绪、描绘场景，让用户产生共情，且更能帮助树立品牌形象，从产品功能到品牌化情感连接，在用户心智中建立一个完整立体的形象，通过品牌力的建设再反向赋能产品。

“情感化设计”是唐纳德·诺曼在《情感化设计》一书中提出的，他从设计的三个层次本能、行为、反思，阐述了情感在设计中所具有的重要地位和作用。诺曼认为：“将情感融入 产品设计 ，将解决设计师们的长期困扰，即产品的实用性和视觉性的主要矛盾。”本能层主要体现的是视觉感受，用户对产品的品牌感知、第一印象等；行为层反应的是用户与产品的交互，也就是我们常说的可用性；反思层是产品触发了用户的主动反思，去探寻使用该产品的目标，是一种深层次的情感共鸣。情感化设计在很多时候可以缓解用户负面情绪，帮助用户快速熟悉产品，拉近与用户的友好度，所以运用好情感化设计可以帮助提升产品体验和留存率。可以通过插画来表现产品主要使用场景，并通过刻画主人物形象（穿着工服的硬朗男性形象），表现专业度和安全感。

汽后市场的产品的难点在于用户的需求大多是低频刚需，所以要提供一些产品

服务或是功能，能够刺激用户频繁打开应用，提升用户粘性；同时规范线下履约流程，标准化服务。满足用户需求的产品+高性价比的商品+运营策略+优质专业的服务+合理的网点布局，几者缺一不可。我们所说的情感化设计也不局限于应用产品本身，整个闭环上所有的触点都应该覆盖到。

数字化运营 建立平台品牌心智不止是在线上，还需考虑线下物料投放。由于 Speedwork 的运营是由印尼本地团队负责，如何标准化进行线上线下全渠道运营推广物料的制作是需要通盘考量的。最终，我们决定通过在线上设计平台上传营销物料模版，不仅能够跨部门跨地域协作提高效能，同时也将本地设计资产数字化实现设计赋能，保证任何人输出的物料设计都能符合平台品牌规范。

数据分析与用户增长 通过数据埋点，我们可以得知产品的活跃状态，比如留存（次日留存率、七日留存率、月留存率）、流失分析、新增变化等；通过漏斗模型分析，可以针对关键流程进行转化率监测，协同产品、运营共同找到用户流失的原因。

站在商业角度，我们可以通过数据客观的了解产品的获客、激活、留存、变现能力，洞察问题并及时的去调整产品功能及链路，使得产品更符合用户的心智认知，使之逐步转化、使用、首单、复购，甚至习惯、分享，形成用户黏性。所以我们想要实现用户增长，需要帮助用户在关键决策点推波助澜，进行精细化设计。

常见的增长手段有优惠券、促销活动、补贴、分享裂变等，通过实际利益去撬动用户增长培养用户习惯。或是通过产品本身提供的服务和功能去满足用户的诉求，来撬动用户增长。无论是通过何种手段，我们都要进行用户的链路设计，一个链路有几个环节几个步骤，如何缩短链路，让用户丝滑且快速的去体验产品核心功能，展现产品的价值，是用户体验设计需要去持续关注的。

想用设计提升转化率？先学会这个超好用的漏斗模型！ 漏斗模型，是一种数据分析方式，是一个线性流程，更是一种普遍适用的方法论，或者说是一种思维方式。

阅读文章 >

本章结尾 数字化时代消费者各种消费行为，都会被以非常微小的颗粒度所记录下来，作为用户体验设计师，需要具备社会学理论知识，通过调研去理解行为背后的情景及动机，更好的设计产品与消费者之间的互动。数据让消费者更加立体化，不仅仅可以告诉我们已经发生的事情，同时也可以预测趋势，进而可以告诉我们处于营销前线的平台，或者商家为什么发生的这些以及可能还会发生什么。

企业出海！设计师如何做好产品本地化设计：印尼篇 可以预见的是，企业出海会是未来两年的趋势之一，特别是东南亚国家，这两年经济增速很快，成为了国内诸多公司的出海首选。

阅读文章 >

欢迎关注作者微信公众号：「Gtech UED」

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

之前和大家分享了纤细的手写 英文字体 在海报中的运用，他们可以丰富画面层次并烘托氛围，让海报不再沉闷呆板。

海报版式太单调？用好这个元素提升99%（附素材下载） 大家好，我是你们聊设计的花生~ 今天我们聊聊海报设计中的一个小技巧。

阅读文章 >

最近在逛设计灵感网站的时候，我又发现了一类很好看的海报。这些 海报设计 并不复杂：用精致的英文衬线字体作为主视觉，配合图片元素进行简单排版，就营造出优雅浪漫的感觉。

仔细观察的话，会发现这类字体虽有衬线体的特征，但是装饰性更强：笔画的粗细对比非常强烈，衬线形状精致，这使字体现代感很强；细如游丝的笔画还会延展连接，或者一些附加的装饰元素，别致优雅。

进一步了解之后，我发现这类装饰字体可以统称为 Display Font，即用于展示的字体。Display Font 适合用大字号展示，如书籍、网页、海报等的大标题。

由字体铸造厂 Nikolas Type 制作的 Grand Slang，就是一款非常经典的 Display Font。

Grand Slang 有 Roman、Itali 和 B-side 三种字形，设计灵感来源于 20 世纪中期美国非常流行的手写字体，经过数字化重塑后，字体线条更加流畅精致，被广泛运用到杂志和产品包装上。

这种 Display Font 气质浪漫优雅，非常适合文艺、典雅或者与女性相关的主题。在设计海报时，无论是作为主视觉使用，还是作为装饰，都能让主题更加突出。

我为大家找了 5 款相关的英文字体，都是免费可商用的，一起来看看吧~

Vensfolk

Emilea

Levaus

Branch

Vindea

5 款字体都打包好了，下载链接开头及文末，需要的小伙伴可以自取~

如果需要更多免费可商用的英文字体，大家上优优教程网的 「免费字体」 里看看，里面收录了很多高质量中英文字体，下载也非常方便。

我就在上面找到了「TheNightWatch」和「Branic」2 款装饰性很强的 Display Font，喜欢的小伙伴可以戳下面的链接去下载哦~

「TheNightWatch」 https://uiiiuiii.com/software/355400.html

「Branic」 https://uiiiuiii.com/software/463870.html

以上就是今天的分享，希望对大家日常进行海报设计与有帮助。如果你有关字体设计或者海报设计的其他问题，欢迎在评论区提出交流~

五一假期结束了，给大家贡献一波设计干货吧！这次的合集几乎每个工具和素材都非常有特色，两款都很「顶级」的配色工具就不说了，独特的字体网站和多达 5.3G 的免费头像素材源文件，无需安装就能使用的3D场景渲染服务，乃至于免费的样机包装网站和在线去除视频背景的服务，里面总会有一两个你能用得上：

1、设计感超强的取色工具 https://www.color-selector.com/

配色似乎并不复杂，但是少有人能够做到完美协调自然。当然，取色工具也不算少，但是用起来足够舒适、又充满设计感的倒是不多，这个名为 Color Selector 的配色工具恰恰能够满足上面的需求。从根本上来说，这是一个配色数据库，它所提供的配色方案大多来自于流行时尚、室内设计、经典建筑、抽象插画等照片、插画，这些配色方案足够经典，但是又足以应对绝大多数的设计需求。

2、独特的免费字体网站 http://velvetyne.fr/

设计师从来都不会嫌弃免费字体的太多。当然，相对而言，免费的英文字体比起免费的中文字体要多不少，但是足够优秀又足够独特的英文字体，想必大家平时也不会屯太多。这个 2010 年所创建的法国字体网站，就是专门干这个的——它专门搜集了各种开源免费但是足够独特的字体。这个网站所提供的字体，应该能够成为你的字体库当中的独特补充。

3、时尚的 UI 样机生成网站 https://cleanmock.com/

和很多同类工具一样，这个样机生成工具能够将你所设计的 APP 页面或者是网页，快速包装成为比较简约时尚的样式，你只需要快速点击几下就能够生成，足够清爽，足够专业。

4、移除视频背景工具 Unscreen https://www.unscreen.com/

图片背景去除的工具如今已经非常之多了，随着短视频内容的爆炸增长，对于视频背景移除的需求也越来越多，这个名为 unscreen 的服务就显得非常具有存在的必要了。全自动处理，完全免费，还有什么比这个更加吸引人的呢？

5、「宇宙最强」取色器ColorSlurp https://colorslurp.com/

虽然这个名为 ColorSlurp 的工具，很大概率是因为没有我国广告法的约束才敢口出狂言号称「宇宙最强」，但是它应该是有足够扎实的功能和特性打底，才能如此宣传。ColorSlurp 内置了高精度的放大镜来帮你读取屏幕上的每一个像素，取色之后，内置的配色方案管理功能、对比度检查等功能确保了色彩的可用性，iOS 平台的客户端还有相机取色、快速导出、iCloud 同步等功能。ColorSlurp 目前只有 Mac 和 iOS 的客户端，感兴趣的同学可以上手体验一下，看看是否当得起「宇宙最强」的称号。

6、免费的 UI/UX 学习平台befront https://befront.io/

学习 UI/UX 的设计平台又多了一个。Befront 会提供真实的设计案例来帮你理解和学习 UI/UX 知识，和以往的很多平台不同的地方在于，它会提供一个基于机器学习的 Figma 插件，来辅助你练习，并且提供及时反馈。值得一提的是，Befront 的课程内容是分免费和收费部分的，可以先看看免费的部分。

7、涂鸦风 SVG 素材合集 https://svgdoodles.com/

很多时候大家看惯了规整的几何图形之后会感到厌倦，充满手绘质感的几何元素相对而言能够让视觉内容更加俏皮、富有生命力。这个 SVG 矢量格式的手绘涂鸦素材合集就能满足这个需求，素材本身可以无损放大，而且也更加便于契合跨平台视觉设计对于精度的要求。

8、3D 场景渲染生成工具 Colorful Studio https://www.colorful.app/

严格意义上来说，它是用来帮你快速搭建场景，渲染生成照片的工具。无需安装客户端，你可以直接在浏览器当中使用，借助大量的预制的 3D 素材，快速搭建场景，然后利用服务器端的算力来渲染，帮你生成最后的照片，对于电商和社交媒体而言，它提供的素材可以说是相当豪华了。最重要的事情是，它还处于公开测试阶段，完全免费，火速申请一波吧！

9、免费立体人物角色素材合集 https://powerpeopleplatform.com/

准确地说，Power People Platform 提供的免费的人物角色设计素材库是 3D 风格而非真的 3D 素材，其中包含 12 个原创角色，3种不同的肤色，6种发色，5种衣服，23 种服饰配色以及无数可选的背景颜色。这套素材库提供高达 2000×2000 px 的 PSD 源文件，你可以按照自己的需求灵活调整。这些素材超级大，你可以在文章开头和结尾的百度云链接中下载。

往期干货：

第一波！2022年4月精选实用设计干货合集 大家好，4月的第1波实用设计干货合集来了！

阅读文章 >

第二波！2022年4月精选实用设计干货合集 大家好，这里是 4月的第2波实用设计干货合集！

阅读文章 >

第三波！2022年4月精选实用设计干货合集 大家好，4月的第3波实用设计干货合集来了！

阅读文章 >

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

之前和大家分享了纤细的手写 英文字体 在海报中的运用，他们可以丰富画面层次并烘托氛围，让海报不再沉闷呆板。

海报版式太单调？用好这个元素提升99%（附素材下载） 大家好，我是你们聊设计的花生~ 今天我们聊聊海报设计中的一个小技巧。

阅读文章 >

最近在逛设计灵感网站的时候，我又发现了一类很好看的海报。这些 海报设计 并不复杂：用精致的英文衬线字体作为主视觉，配合图片元素进行简单排版，就营造出优雅浪漫的感觉。

仔细观察的话，会发现这类字体虽有衬线体的特征，但是装饰性更强：笔画的粗细对比非常强烈，衬线形状精致，这使字体现代感很强；细如游丝的笔画还会延展连接，或者一些附加的装饰元素，别致优雅。

进一步了解之后，我发现这类装饰字体可以统称为 Display Font，即用于展示的字体。Display Font 适合用大字号展示，如书籍、网页、海报等的大标题。

由字体铸造厂 Nikolas Type 制作的 Grand Slang，就是一款非常经典的 Display Font。

Grand Slang 有 Roman、Itali 和 B-side 三种字形，设计灵感来源于 20 世纪中期美国非常流行的手写字体，经过数字化重塑后，字体线条更加流畅精致，被广泛运用到杂志和产品包装上。

这种 Display Font 气质浪漫优雅，非常适合文艺、典雅或者与女性相关的主题。在设计海报时，无论是作为主视觉使用，还是作为装饰，都能让主题更加突出。

我为大家找了 5 款相关的英文字体，都是免费可商用的，一起来看看吧~

Vensfolk

Emilea

Levaus

Branch

Vindea

5 款字体都打包好了，下载链接开头及文末，需要的小伙伴可以自取~

如果需要更多免费可商用的英文字体，大家上优优教程网的 「免费字体」 里看看，里面收录了很多高质量中英文字体，下载也非常方便。

我就在上面找到了「TheNightWatch」和「Branic」2 款装饰性很强的 Display Font，喜欢的小伙伴可以戳下面的链接去下载哦~

「TheNightWatch」 https://uiiiuiii.com/software/355400.html

「Branic」 https://uiiiuiii.com/software/463870.html

以上就是今天的分享，希望对大家日常进行海报设计与有帮助。如果你有关字体设计或者海报设计的其他问题，欢迎在评论区提出交流~

前言 SVG 格式图标在软件界面中有广泛应用，它与生俱来的矢量属性，使其在高分辨率屏幕上的表现非常完美。 SVG 是一个基于 XML 标记语言的开放网络标准格式，拥有跨设备多平台的兼容效果。前面我们有分享过一篇关于 WPS 图标的文章《探索 WPS 3000 个 图标设计 背后的故事》，得到了很多网友的积极反馈。相信界面设计的小伙伴们都很熟悉 SVG 格式了，这次，我有一个棒的想法想分享给大家：利用 SVG 图标套色，来完成不同界面的适配。

如何重新设计3000个图标？来看金山团队的实战案例！ 项目背景 近些年，WPS 组件页在完善基础功能的同时，增加了许多新功能。

阅读文章 >

什么是 SVG 图标套色？ 图标套色的简单来说就是利用 SVG 格式的文本属性，使用 XML 格式标准，在 SVG 文档中增加 CSS 样式，通过修改 CSS 样式属性，精准控制 SVG 格式图标颜色，通过修改透明度控制图形显示与否，从而变换图标的风格外观。

基本原理：修改 SVG 的样式，生成不同风格的图标

用处一：颜色适配

这里有几个插件，都用到了“保存”、“打印”这些功能。因为主题色不同，即使是同样外形的图标，还是需要根据主题色的不同输出适配各个插件的图标。采用图标套色的方法，就可以避免这类图标资源的重复输出。

相同功能需要两套不同主题色的图标

用处二：皮肤适配

现在多数软件一般都有皮肤功能，不同用户需求，衍生出风格各异的皮肤，各种颜色，深浅不一，一套图标满足不了所有，为了视觉效果需要对每个皮肤输出特定颜色、风格的图标。图标数量如果很多，投入的成本将随皮肤数量呈几何倍增加，图标套色就可以很好的解决这类问题，只需要通过修改图标颜色和风格即可适配。

通过修改映射配置，可以得到不同颜色的图标

套色方法 我们先看看图标套色之后的效果：

修改映射配置，可以得到线、面不同风格的图标

简单来说，实现这种效果有下方五个步骤:

套色方法五个步骤

以下方几个图标来做示例：

SVG 示例图标

第一步，确定图标线、面风格

设计师将图标线、面风格确定下来，并保证两者效果上可以兼容，即轮廓一致。

同时兼容线、面两种风格效果

第二步，定义图标颜色

在确定了图标的风格之后，将图标中用到的 7 种颜色，根据一深一浅再拆分为 14 种（具体几种颜色可根据图标设计需要来定），深色用于填充线性图形，浅色用于填充面性图形。

根据线、面风格需要，定义图标的颜色

第三步，给颜色定义样式名

给 14 种颜色，分别定义好 CSS 样式名（样式名遵循 CSS 规则即可）。

给颜色定义样式名

第四步，给 SVG 图标添加 CSS 内部样式

SVG 格式图标默认是没有 CSS 样式，需要手动将 CSS 内部样式添加到 SVG 文档中，并将 SVG 路径颜色与 CSS 样式名关联起来。

给 SVG 添加 CSS 样式

第五步，样式属性配置机制

添加内部样式之后，需要开发小哥哥在软件中增加对 SVG 图标 CSS 样式属性的映射机制。修改映射机制配置文件中 CSS 样式属性，就可以控制图标风格变化。

修改配置代码即可改变图标颜色

完成了以上五个步骤，通过修改软件中的映射机制配置文件，就可以改变图标风格。

应用案例 了解了步骤方法，我们以 WPS 为例来讲解图标套色在实际案例中的应用：

案例一：前面有提到我们的四大组件，WPS 由文字、表格、演示、PDF 四组件组成。每个组件都有各自的主题色，文字主题色为蓝色，表格绿色，演示橘黄色，PDF 红色。多数图标都含有主题色，但外形是一样的，因各组件主题色不同而导致了很多图标的重复输出。

套色用处之一的颜色适配，可以让图标变色以适应不同的组件色，避免图标的重复。

不同主题色图标的变换效果

案例二：WPS 有推出多个风格各异的皮肤，因为图标数量的关系，无法每个皮肤都输出一套图标，目前只能使用默认的线性图标。也因时间和维护成本而导致图标风格的单一。

套色用处之二的皮肤适配，能使图标改变风格以适应不同的皮肤，既能满足图标风格多样，又能满足时间和维护成本的可控。

不同风格图标的变换效果

案例三：深色模式的配色与浅色模式大相径庭，图标使用的颜色也截然不同，适配需要输出两套图标资源，因不同深浅色模式而导致的图标资源重复输出。WPS 组件功能区的图标有几千个，输出和维护都很费精力。

套色用处之二的皮肤适配，在深浅色模式下也能适用，改变图标颜色以适应不同的深浅色模式，避免图标的重复输出。

深浅色模式下图标的变换效果

总结 通过以上的案例不难发现，SVG 图标套色技术的价值，主要有以下几个方面：

1. 时间和维护成本的降低

利用图标套色方法，设计师只需要输出一套图标资源，就完成了多组件、多风格、深浅色模式适配。开发小哥哥也可以删掉适配用的冗余代码，提升了图标的管理和软件运行效率；

2. 个性化需求的满足

后期可以增加自定义扩展，让用户配置图标风格，更好地满足个性化需求；

3. 服务器资源的节约

更少图标资源，更小压缩包，更少空间和宽带的占用。

采用新技术，帮助设计、开发更好地完成多场景适配，降低了整体流程的执行难度，为项目节省了大量时间，避免过多精力投入在重复工作中，为最终完成目标创造了有利条件。同时也解放了生产力，有了更多的时间可以去关注高价值的项目。

工作中经常能遇到重复的内容，这都有提升和优化的空间，寻找更高效的方法，让工作变得轻松简单。

记得关注我们，下次还有更多好玩、有趣的内容分享给你～

实战案例！WPS 2021 年度设计改版完整复盘 随着用户使用 WPS Office 的场景逐渐多样化、对产品的体验要求也逐渐提高，我们在视觉层面上围绕着「以用户为中心」开始了一次全新的视觉改版：追求简洁、高效、一致的办公环境，精心打造极致的办公体验。

阅读文章 >

欢迎关注作者微信公众号：「CED设计团队」