往期回顾：

写给新手的版式设计基础指南（四）：图片跳跃率 上回，咱说完了文字跳跃率，今个儿，咱就来说道说道图片跳跃率。

阅读文章 >

写给新手的版式设计基础指南（三）：文字跳跃率 懂了文字跳跃率！

阅读文章 >

写给新手的版式设计基础指南（二）：图版率 今天又带来一篇十足的干货，安全无毒，放心食用！

阅读文章 >

写给新手的版式设计基础指南（一）：表现力 下面俩啤酒海报，哪个感觉更廉价？

阅读文章 >

今天咱们修炼的神功是「创意分析」，经常有人在往期文章中留言道：「脑子会了，手不会~」「看了这么多文章，做的还是一塌糊涂~」，总而言之是「一看就会，一做就废~」

怎么会这样？真相只有一个！那就是，还没内化，再看亿遍就好啦！没内化是一方面，当然还有一点，就是不会去分析创意，无法得出一个合适的创意！设计创意，必须得合适才行哟！不然设计的再好看，那也是驴唇不对猫嘴~

俗话说的好：先做对，再做好。就是这个意思~

那么，咱照例先来看个问题~

下面俩版面，哪个更符合主题？ 就拿花几分钟，简单做个小案例吧~

主题是奢侈感！不出所料，众爱卿在朕前几篇的调教下，果然都选对啦！奢侈品，自然是感觉让人买不起的「A」才是正解

「C」，这么便宜又不精致，置于奢侈品的高格调于何地？受众人群显然不会买它，因为显得掉价撒！上述案例中，我们单独来看，排版都没啥问题，不管是对比、对齐、亲密性，都做的挺好！

但为啥「C」就是不行呢？必须是因为「C」的气质不对，也就是创意思路不对~不符合产品本身的定位，也不符合受众人群的偏好。所以练设计神功，必须得先把设计做对，再做好~

那么问题来了，怎么才能先把设计思路做对呢？

首先，要像大猫一样帅！开个玩笑，哈哈~其实，所有设计在动手做之前必须先去分析~而且这个分析比实际动手设计重要多啦！流程图在此~

你看，第一条就是分析气质，确定目的！如果第一条就搞错了，那岂不是一步错步步错，层层叠加 debuff，最终简直错到离大谱！

说回正题，咱就先举个 字体设计 的例子~咱就做「铁甲纪元」四个字

第一步嘞，当然是确定设计目的，及分析这个主题应有的气质啦！

目的：能够表现铁甲、机甲的元素。

「铁甲纪元」机甲、铁甲、机器啥的玩意儿，那风格调性必须是得坚硬厚重、棱角分明的吧！看本猫随手用「站酷快乐体」改的这个是不是很 nice~

nice 个腿儿~

你看这玩意儿，坚硬厚重、棱角分明这几条，一条也没占着，所以一点也不 nice~论气质，还不如上面的黑体字契合呢！那有没有比黑体更坚硬、更棱角分明的气质呢？

你看这个就更好，更棱角分明！所以咱的设计，也要这种坚硬的、棱角分明的气质和特征~

分析好气质之后，咱是不是就要去想具体的创意啦！而且创意一定要能够表现这气质，实现目的，不能与这种特征背道而驰。气质对了，怎么去表现铁甲、机甲的创意呢？

最简单的方式：找图片、找参考，找到机甲的特征，归纳运用到你的字体设计上就可以啦！

以上是搜「机甲、机械、机器」等关键词所展现的内容~

咱看他们的特征，是不是棱角分明，而且有机械构造、齿轮连接的那种感觉！知道特征后，咱就进一步的归纳、简化这种特征~

其实这些特征，还真就是从参考中找出来的，转角、机械感、凹凸感、切割感~借用这些特征去塑造笔画，是不是满满的机械感！甚是贴合「铁甲纪元」的主题~

同样的思路，把其他笔画也做出来~

这里我把阿里巴巴普惠体垫到底下，在上面塑造新的笔画。垫字去做，字的结构不会偏的太严重~

当然，就算垫字到底下，毕竟字形风格差别大，结构还是要小小滴调整一下下滴！

结构调一调， 字靠近一点，亲密一点，再在字间填充一些机械造型，让字间笔画有个切割平行的关系。使 4 个字浑然一体，就像是一套完整的机械拼接设备！

这感觉就有了呗~再加上英文，简单做下排版~

完美体现「铁甲纪元」的主题，当然也实现了设计目的~所以从流程来讲，当然是前期分析最重要！分析的都不对，啷个可能做对嘞？

字体设计是这个流程，排版啥的当然也是咯，第一步永远是分析~看一个「西安印象」海报，主标题文案为「西安印象-历史博览会」。

第一步，当然还是分析气质，确定目的咯！

西安印象，又是历史博览会，这海报肯定得表现西安的历史印象吧！这就是最基础的目的~哪么这海报要吸引哪块人群呢？在基本的目的上，再加入人群受众的分析，就是升级型目的，一般商业设计都要有这种思维哒！打个比方，如果说，这个「西安印象-历史博览会」是一个面向儿童的展览，那咱的目的，就变成了，既要表现西安的历史，又要能吸引小朋友~

通过升级型目的，来确定风格~活泼、低龄、五彩斑斓、有趣！

大概就是这种风格啦：

脑补一下，把西安的一些元素用，插画或者活泼的风格表现。同理，如果说，这个「西安印象-历史博览会」是一个面向年轻女性的，那设计风格就要吸引年轻少女啦！可以设计的少女心一点、卡哇伊一点，或者时尚一些，来个粉粉的诱惑~

要是这种感觉还差不多~

再比如，这个展面向的是设计师、艺术家之类的，那你的设计不得跳出传统的感觉，新颖一点嘛！毕竟大家都是搞视觉的，普通的视觉见的太多了，无法触及内心了，得搞点实验设计，搞点新的视觉样式，搞点形式感，才能吸引他们~

比如这几种~

形式感特别多，这里只列举了几种~但也可以看到，这种跟常规意义上的商业海报，有较大区别！一般人不太能接受，Get 不到点~但看够了普通视觉形式的设计师、艺术家们倒觉得很独特，很 NICE~

这也是为什么很多设计展览、培训、讲座海报都做的花里胡哨，仪式感十足~当然还是因为，你们就是喜欢那种嘛，哈哈~

这呢，就叫见人说人话，见鬼说鬼话，这呢，就叫人情世故。所以说白了，不管是花里胡哨的形式，还是正常的形式，其本质都是为商业目的服务哒~

这个海报大家还有印象咩？前两年，北京国际电影节的海报。当时闹得特别火，支持一派和反对一派，闹得不可开交，就差线下约架啦，哈哈哈

为啥会这样？其实从海报美感和排版来讲，没问题对吧~抛开受众人群不谈，这形式感也挺新颖，没啥问题。诶，这就是问题所在了，支持的一派觉得形式独特，很有记忆力！这一波人呢，大多都是设计师、艺术家等相关从业者。反对的一派觉得太独特了，大众接受不了，是你们小圈子的自嗨~

其实站在各自的立场，都有理有据，那么最终的评判标准是什么嘞。当然是看受众呗，受众喜欢的就是对的，反之受众不喜欢，那就是不贴合目标人群。就比如一件商品，目标人群都不喜欢，怎么可能让人家掏钱？电影是大众艺术，受众很广，有艺术家，有电影人，也有各行各业的大众。既有年龄大的，也有年龄小的，可以说，目标人群是多元化的，复合型受众。面对多元化受众，当然要满足多元的人群审美，你不可能满足所有人，但也不要只讨好一类人~

所以这个海报的问题就是，风格气质上只讨好了一类人，完全没考虑其他的受众人群咩~

但设计师就不行啦，你又不是我的谁~大伙都是受众，凭啥你只满足他的喜好？你没满足我，我不爽了，总得说两句表示一下态度吧~所以这个呢，至少要满足大多数受众的喜好，最好呢，是在大众喜好的基础上，又表现了一定的艺术！如果不可兼得，舍鱼儿而取熊掌~选择受众更多的那种风格~

因为，设计师、艺术从业者，普遍接受度比较高，毕竟工作中即见过猪肉，也见过猪跑，啥风格都见过~官方连夜重做了海报，对外宣称原先的海报只是先导海报~

显然官方也是意识到这问题啦，新海报比原先的更贴合多数受众的审美。

10 周年的梦幻风车形成个摄影机~紫色的梦~就是文字排版不太行！

第十一届的风格气质，也是贴合了多数受众，还用了小人物与风车放映机的大小对比~有那味儿了~

虽然原先的海报风格气质有待商榷，但人家有热度呀！省了那么大一笔宣传费用，难道不是好事嘛？走红有热度，当然算好事！但是吧，评判设计的好坏，不能只看火不火~

评判设计的好坏，跟设定的设计目的有关系，如果，这个设计一开始的目的就是追求热度，制造冲突，引爆舆论~设计成品也成功的完成了这个目标，那就是 6 的，没问题的。那这就是一个精心策划的运营型设计咯！但我看过作者对此访谈和回复，他也感到很纳闷，设计个海报而已，咋还吵起来了呢？也就是说，这个设计一开始的设计目标，是完全没有「制造话题，引爆舆论」的营销型目的~

不是故意找骂，那被受众骂，也只能受着了~不过话说回来，通过这个事情，倒是使官方更重视 海报设计 了~

这届之前的海报，那是一个比一个难看~

所以说，意外引爆舆论，对设计行业来讲，还勉强算个好事吧~

再与本王看几张，艺术与多元受众结合的比较好的电影节海报，细细感受，细细品味~

风格虽然各异，但受众基本都能看懂，风格气质上也不会挑战多元受众的审美，属于大家都能够接受的那种。这也更告诫我们，设计目的、风格、气质，还是特别重要的，搞不好可能要挨骂哟~

设计前多去思考甲方为啥要设计，目的是啥、风格是啥、调性气质是啥？多去沟通，多去思考。

说回正题，假定「西安印象」展览的受众，就是普通人~咱就把案例做的普通大众一点！面向普通大众的，那就中规中矩一点，能表现西安的历史印象，根据历史印象，风格上可以普通偏传统一点就好啦！

OK，咱先看个案例！

这个排版中规中矩，还算整齐，但为撒子就是没感觉呢？当然是因为这是个反面案例了，嘿嘿~虽然排版没太大问题，但没有去考虑设计的目的和风格，完全感受不到西安有撒子印象嘛！对西安的印象也就只停留在那 4 个大字上了~

这也是很多人的问题啦，为了排版而排版，忽略掉了目的和气质！如果是这样，那你掌握再多排版原则知识点，也是没有用的。靠运气做设计。

那些版面率、图版率、字体等本神功的其他要素，是根据设计的目的和气质去运用哒，不要瞎用哟！目的和风格确定了，咱就得思考能表现目标的创意啦~

写给新手的版式设计基础指南（二）：图版率 今天又带来一篇十足的干货，安全无毒，放心食用！

阅读文章 >

什么能够表现西安的历史印象？那肯定是能够表现历史的东西，比如文物、老照片、名胜古迹啥的~

简单做个头脑风暴~

西安先后可是 13 个朝代的古都，能表现历史的东西那么多，还愁啥~最简单的一个方式，就是直接拿名胜古迹的照片去设计咯，这是找到的一些免费的照片，

你看，这些图片，不就是能表现西安的历史印象嘛！相比之前只有「西安印象」的四字海报，这些图片更有活力、更有感觉！是不是书法体和宋体字，都能够表现！字体确定后，咱再过关斩将，把留白、构图、版面率、跳跃率啥的都搞搞，确定了一下版式~

这是个压角式构图，整体的居中感觉会显得海报更传统，更有文化和历史味道！留白设的比较小，信息占比大，更能引人注意~

毕竟面向普通大众的展览，你整的高端奢侈高格调，怎么可能跟人民群众打成一片嘞？看这版式，中间要放一张图片~能够表现西安历史的图片都行！

比如说我放上了大雁塔，底色用撞色的形式，在常规的基础上又增加了点设计感~「唐风汉韵、千年古都」加入圆圈，形成传统的对联形式~传统感又增加了几分~

如果觉得撞色太过时髦，也可以更保守一点嘛！

用灰色照片也是可以哒哟！放不同照片，还可以形成系列海报，通过阵列去投放，能达到更好的效果~也可以做成更传统的颜色，这块就全靠大家自己的想法和甲方的要求啦！

底色也可以改，总之，能跟我们得出的目的和气质相匹配的色彩，都木得问题。有人又问，只能用一张照片，一种版式嘛？当然不是的，原则上最终的成品能实现你得出的目的和气质都行！

像这种，同一个主题，甚至可以换着花样来排好几版！最重要的是目标和气质~不管是什么照片，什么构图、什么色彩，设计无定式，能实现设计目的和气质就上可以哒！本猫虽然懒，但还是，勉为其难的花个几秒钟，再搞一版吧~几分钟做的，肯定没啥细节，爱妃们就看个大概，思路懂了就行！嘿嘿~

也可以跟这种海报一样，把各种文物古迹，散放在版面当中，规则无绝对，重点是目的和气质。所以，爱妃们的小脑瓜，要灵活起来转起来~

好啦，今儿个就唠到这儿吧，记住这个流程，下期可是要考的~

各位大佬点赞留言收藏走起，猫会很开心哒~

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

具有未来科技感的设计风格在高新科技、科幻游戏、潮流综艺等领域非常受欢迎，包括前段时间备受瞩目的哈工大录取通知书，也是运用了这种 科技感 的设计风格。与之类似的还有机能风、赛博朋克，特征包括冷色调、光感、机械感的异形边框、HUD（电子游戏领域中的平视显示器）和 FUI（虚构用户界面）元素、几何块面感的字体等。

今天就为大家推荐 5 个 Behance 上的优秀 设计师 ，他们在 FUI、HUD 及未来科技感元素设计上有很多优质作品能作为我们相关设计的灵感参考，并附上相应的搜索关键词，帮助大家之后能更准确搜索相关元素的灵感。同时还会为大家推荐一些免费优质的机甲风、科技感设计教程，一起来看看吧~

（前排提醒：Behance 上的资源需要梯子才能观看~）

920 款游戏、38000多张高清参考图免费提供！游戏灵感神站 GAME UI Databas 在设计类的相关行业中，游戏 UI 设计算是一个比较热门且备受年轻人喜爱的设计行业。

阅读文章 >

Adrein Horan Behance 主页： https://www.behance.net/adreinh1

Adrein Horan 是一位美国的自由设计师，他的作品中很多都是以动漫或者电影为自拟主题，然后围绕这一主题进行字体设计、元素符号设计和图文排版，设计有很强的机能风和酸性风。

关键词：机能风，酸性，专辑封面设计（album design），图文排版，二次元

Andrei Dzemidzenka Behance 主页： https://www.behance.net/ZinetroN

Andrei Dzemidzenka 是一位来自白俄罗斯的图形设计师，他擅长设计具有未来科技感的装饰元素，如边框、箭头、标签等，作品中的元素排版布局也非常值得学习。

关键词：HUD, FUI, Futuristic, Elements, Data visualisation

上亿人在玩的《和平精英》，如何做好机甲主题创意设计？ 导语 通过与重磅 IP 合作，《和平精英》打造出「与高达并肩」、「正义战士和平守护」的赛季主题。

阅读文章 >

Evgeny Rodygin Behance 主页： https://www.behance.net/Erodygin

Evgeny Rodygin 是一位专注于 UI/FUI 设计和电影、游戏中交互动态图形开发的设计师，服务过漫威、索尼、英伟达等多家知名公司，从他的作品中我们可以学习虚拟交互界面的元素设计、层级构成和配色等。

关键词：FUI，UI，Sic-fi，Interface

Shoaib Khan Behance 主页： https://www.behance.net/maxafter

Shoaib Khan 是一位专注 HUD 和 UI 动态图形设计的设计师，他在 Behance 上分享了很多基础的 HUD 模板，并且非常擅长在为图片搭配各种虚拟界面特效。

关键词：HUD, UI, Cyberpunk, Screens

Progon D Behance 主页： https://www.behance.net/progon314

Progon D 的作品很强的实验性，你或许无法第一眼识别其设计主题，但是作品整体呈现出的设计感和未来感足以让人注意，作品中的字形设计和图文排版也有值得学习的地方。

关键词：机能风，酸性设计， 未来感 ，排版

如何设计更有科技感？这份全面总结送给你！ 什么是「科技感」？

阅读文章 >

免费教程推荐 4 种方式 8 组案例，教你学会机甲风字体: https://uiiiuiii.com/other/1212524179.html 教你如何玩转未来感机能风设计: https://uiiiuiii.com/other/1212478540.html AI 教程！教你制作炫酷科技感背景： https://uiiiuiii.com/illustrator/1212337111.html PS 教程！科技感金属字效海报： https://uiiiuiii.com/photoshop/1212530179.html

以上就是今天的灵感推荐，喜欢的小伙伴记得点赞收藏，也可以转发给身边有需要朋友。如果你有关于本文或者其他设计疑问，可以在评论区提出，我会第一时间为大家解答~ 也欢迎大家加入优设官方设计交流群，和优设主编、设计总监及其他热爱设计的小伙伴一起探讨学习（入群二维码见文末 Banner）~

编辑导语：在竞争激烈且产品功能差异化不大的情况下，选择在设计上下功夫往往能让人眼前一亮，而这种巧思，尤其体现在细节上。本文拆解了一些较少被分析的大厂产品设计细节，一起看看优秀的 产品设计 到底好在哪里吧～

今天我们从产品风格、图标、插图、动效几个维度，分析被遗漏的大厂产品的设计亮点。

产品细节 ：

10个产品细节剖析，看看大厂是如何做设计的！ 前言 细节设计作为产品的一个重要环节，也是值得我们去琢磨思考的。

阅读文章 >

10个产品细节剖析，看看大厂是如何做设计的！ 前言 好的产品总会关注细节，将细节做到最好，这篇文章分析了十个产品的使用场景和产品的设计思考，最后总结产品成功的原因，一起学习一下吧。

阅读文章 >

事先声明 /attention。

强烈建议使用电脑查看，用户体验更佳。 Gif 体积较大，请耐心查看。 为了让设计细节更容易被看到，用 Gif 来呈展示。 以下是碳水 Sir 在 App Store 发现的几款“宝贝”，之所以称为“宝贝”是因为产品中可学到的东西太多了，每个产品视觉 UI 以及动效都有其独特风格（当然网上也有别人总结过的产品，我这里就不拿出来重复说了）我仅针对未总结的大厂产品，进行设计细节拆解，看看优秀的产品设计到底好在哪里，请君细细品味。

淘宝 – 屋颜 – 一站式潮流家居平台 字节 – 抖音盒子 – 潮流时尚电商平台 腾讯 – doX多克斯 – 生活碎片视频社交 淘宝 – 吃货笔记 – 记录美食好生活 得物旗下 – 95分 – 奢潮二手平台 腾讯 – PODO漫画 – 独特交互体验漫画阅读平台 荔枝 – 皮玩 – 语音社交平台 陌陌 – 咔咔 – 实拍互动交友平台 排名不分先后，从以上几款产品 logo 中不难看出，图形设计都偏向于具像化，传递出正向的情绪，颜色方面使用荧光黄、青绿、渐变粉等凸显年轻、大胆，富有朝气。

屋颜 1. 前言

第一眼看到这个名就有被惊艳。首先屋颜是屋檐的斜译，檐变成颜，中华文字博大精深，读起来也不违和，同时也直观呈现出产品定位属性。logo 采用字体设计手法，“屋”字经过设计手法使线条呈现出立体空间感，也间接体现出产品是和房屋软装相关，同时为屋内添置“颜色”（软装）相关的产品。一个 logo 两层含义，通过字体设计以及谐音表现，巧妙的融入其中。

2. 品牌元素

直观来看，页面大量留白，图片质量高级且风格统一，均采用素底作为产品首图，很好的提升产品整体调性。

图形方面均采用直角元素，配图、banner、按钮、icon 无一例外；细线风格设计使产品极具品质感，有种无印良品的现代极简主义风潮，

也叫 MUJI 风。

瓷片区的配图采用线性+2.5D 风格，使画面富有空间层次，能撑住页面头部重要位置，且再次突出产品极简主义风格。当然还有空状态、无网络环境下的配图等等都很统一。

3. 动效表达

动效方面最值得关注的是下拉刷新，使用吊灯作为下拉效果，当向下滑动时电线被拉扯长，但断不了，给人以安全可靠的产品透传，也算是通过创意设计助力产品体验的手段之一。释放刷新时，轮播不同的家居 icon 图标，再次强化定位产品属性，且刷新时不至于乏味。

加载状态采用+号线条旋转表现，同时在结尾变成一个方形，这么极简的设计之前其他产品从未出现过，同时它也符合屋颜的产品调性（新家软装要做加法，仅个人理解）也算是一个设计亮点。

4. 3D 实景

最新颖的是产品特有的「3D 实景逛店」功能，进一步强化家具与室内的强相关性，为什么这么说，单从买家具上，线上买前只能靠照片来间接联想买后填入家中的情况，并不能按照自己习惯多角度查看家具。又或者因为忙，没时间去线下家具馆，或者怕白去一趟，通过「3D 实景逛店」快速解决这部分用户需求。同时，也给线下家具馆增加了更多曝光度的可能性。

至此，屋颜的设计细节讲解就结束了，希望产品体验越做越好。

抖音盒子 1. 前言

抖音旗下的电商平台，整体风格清爽直观，绿色与紫色搭配也是一种时尚风。相比其他电商产品，抖音盒子没有金刚区图标设计以及营销类的占位图，相反金刚区仅展示奢侈品实物图，产品图大小做了统一，视觉呈现很高级，同时下列瀑布流商品中首图没有活动促销等信息干扰，只展示商品图，突出其时尚潮牌好物的特性，同时也与当前清爽、高级的设计风格相一致。

2. 品牌元素

几处设计细节值得参考，首先是底部 Tab 栏点击动效，承载抖音 logo 的故障风效果，黑色+紫色故障效果一来告知与抖音具有相关联性，是旗下电商产品；二来黑色 Tab 图标能很好的压住“紫绿主色调”的跳跃感，不至于太过俏皮脱离电商属性。

并且图标的整体性与统一性都做得很好，“小红点”的设计采用品牌色“小紫点”呈现（小小的颜色改变），更加强化了产品风格与调性的统一，（小红点并不是只能用红色）这点值得学习。

最后想告诉大家，产品在每个阶段设计形式都会发生改变，比如 1.0.1-1.0.2 可能是轻微调整，1.0.0-2.0.0 就是大的视觉升级。可能因为产品发展或用户变化，使得产品设计风格发生改变， 但要知道每个上线版本一定是当前方案的最优解。就如你看到的“抖音盒子”现在是 1.9.0 版本号，或许在不久的将来就会全新升级。这就不得而知了。

doX 多克斯 1. 前言

是一款短视频社交平台，与其他社交产品不同，doX 主打短视频内容社交，用户通过拍摄上传有趣的短视频内容，来认识志同道合的朋友。虽然与抖音同为短视频平台，但抖音更侧重视频分发，而 doX 侧重于通过视频与用户建立联系，一个视频下可以跟拍多条，有点像 qq 以前的漂流瓶，只是换种呈现方式。这种陌生人视频交友有一丝“探探”的味道。

2. 设计元素

设计上面单看 logo 以为会沿用手绘线稿类似的风格。整体使用下来，仅在我的页面顶部背景中用到，其余均采用断线像素风 icon 设计，绿+白的设计风格，可能也是为了营造出一种陌生人交友的科幻感觉吧。

发起拍摄页，背景会有噪点动效，也是营造一种拍摄前无镜头的感觉，引导用户随手记录。

最后产品的切入方向很新颖，但是否能在短视频风口分出一杯羹就不知道了，但目前来说整体设计风格框架已搭建起来，剩下的就是不断填补及完善设计，使其更加统一，希望 doX 越来越好。

吃货笔记 1. 前言

第一次接触“吃货笔记”就被页面整体设计风格吸引。粗线图标+拟物图标形式空前新潮，给人眼前一亮的感觉。它类似于“大众点评”，是个宝藏探店美食分享的平台。通过线上探店选择报名-自行到店-发表动态-上传票据-提取饭票，来获得优惠消费的同时提高平台 UGC 内容的产出。可惜的是目前仅支持「广州」店铺（可能是先做小范围本土化尝试然后再逐渐扩大地域），外地用户只能看看界面并不能真实使用，这点很遗憾。

动态布局也很有创意，第一张大图，其他小图呈现，五宫格的样式使布局统一，且更好突出第一张图的主视觉层级。

2. 表情评分

如今本地餐饮服务平台已经做得很好了，“吃货笔记”在尝试从优化福利流程、视觉表现、设计手法等多维度探索新的操作形式，这种身先士卒的精神值得尊敬，单说设计表现的细致，就以超过了大部分产品。当然，每一款好的产品离不开设计，更离不开产品功能是否真实满足用户需求，让用户使用轻松、解决需求后是否带来爽点。

3. 动效表达

图标用色很鲜明，均采用 3D 质感表现形式，能看出设计上面下了很多功夫。底部 Tab 栏选中图标也采用 3D 质感表现，与金刚区和空状态图标形成呼应，增强产品风格记忆点。产品目前的评论和下载量都不像没推过一样，可能产品分享度不高导致很多一部分人不知道，所以增加徽章模块评价打卡获得奖励，并以此成就来满足用户心里预期，从而增加使用黏性和传播分享。

最后这款产品设计表现都特别出众，通过空状态文案等内容也能看出产品的个性特征。例如：“虾米都没有，快看看其他的”，还有很多小的设计细节，这里就不一一说了，大伙儿自行下载体验一下吧。

95 分 1. 前言

95 分是得物旗下的分离出来的全新 App，主打潮流闲置交易平台，而得物定位是新一代潮流网购电商，两者还是有所区别。但从 UI 设计角度，还是能看到得物的影子，潮流前线，并且整体风格时尚统一，很多细节值得在这里展开说说。

2. 动效表达

整个设计清爽直观、没有多余装饰元素，这就要求图标必须做到极致，才能撑住整个页面。我罗列了一下可能出现的图标，轻质感毛玻璃效果，结合统一的渐变元素使得每个图标都精致耐看，值得研究。线性图标也是一样，整体配套，这套图标应该下了不少功夫。

在二手平台存量竞争的时代，能有一款产品尝试新的设计风格，并且把近几年火起来的毛玻璃风格相融合，这种走在设计前线的作风与 95 分产品潮流前线的调性一致，单说设计尝试这种做法就已经超越了大多数产品了。

PODO 漫画 1. 前言

毫不夸张，这款产品打开了我对交互表现与实现的新认知。我看了一下最早发布是去年 9 月 27 日，到目前为止短短 8 个月时间，就能让 PODO 这款产品的交互设计做到如此优秀，背后依靠腾讯，也有游戏元素的影子，这就不足为奇了。

2. 交互效果

使用下来基本没有太多图标元素，更多是把屏幕空间分给了动漫封面，一行三个动漫排列，背景与主体人物分开，滑动时二者在空间层进行错位，营造一种错层的空间感，使原本扁平的图像瞬间立体了许多很是新奇。

3. 交互效果

点开动漫详情，图文信息依次从上到下展开，引导用户视觉享受，并且头图中的动漫人物也做了 动效设计 ，全览下来很是细致。除此之外，还有三个明显的交互细节，分别是：设置页展开交互、阅读页底部导航交互以及目录页的交互样式，都以新的表现形式呈现出来，作为设计师的我们现在不能再说：“设计已经玩不出新的花样”这样的说法了。太多的交互动效就不一一列举了，赶紧收入囊中吧！

皮玩 1. 前言

通过了解得知“皮玩”是荔枝 App 旗下控股产品，同样也在入局陌生人社交领域。但值得注意的是该产品上线 1 个月，内部框架及 UI 界面已相对完整，卡片、插图、动效、图标、以及一些趣味设计都已上线，应该是一个成熟团队孵化的项目，上线前的测试应该没少下功夫，才能在产品初期做的如此完善。logo 采用渐变黄底+吐舌头表情相结合，搞怪趣味要用嘴说话这样的印象。定位：更好玩的语音社交，算说得过去 。

2. 元素拆解

初次体验，第一感受就是采用贴纸风的设计元素，icon 与元素都具有较强的设计感，饱和度较低的配色加上白色描边，就如产品说的“玩一下、皮一下”相呼应，产品的整体颜色采用渐变黄和渐变绿，配色很大胆，同时体现出该产品用户所代表的具有兴趣多元化、喜欢尝鲜这样一个群体。同时产品也是想通过这种设计吸引用户使用。

产品中处处都能看到微动效，使静态的画面变得活泼许多，这种做法也是为了给用户营造一种活跃的氛围，增加平台活跃度。

咔咔 1. 前言

咔咔是陌陌孵化的一款社交产品，最近发现一些大厂旗下产品都在独立运营，目的也是为了和主产品脱离关系，防止激烈竞争导致产品停止运营。年前很火的“啫喱”想必就是吃亏在这方面。回归正题，首页是以视频为主图片为辅的瀑布流形式呈现，停到某一位置则直接循环播放该视频，排版方式极具新颖，当体验下来眼球左右移动总是会打断我信息的获取，有点强制引导用户看大图视频内容的感受。点开则可以与对方进行互动点赞评论。

2. 看看模块

看看模块，采用类似“探探”卡片交互左滑不喜欢右滑喜欢来让用户进行操作，但与“探探”不同的是此互动是开放的，用户选择满意的动态内容添加到卡片后，陌生人可看到展示内容，并且她被多少人喜欢都会展示出来，相当于是个人名片，有种抖音+探探的味道。并不具有一对一的个人隐私性，这是与探探最直接的区别。

3. 打招呼

看看模块中，“打招呼”是与对方建立私聊的唯一方式，如果该用户已关注但未打招呼，把卡片划走，那再也不能与对方建立私聊，除非对方通过“看看”模块与你打招呼。这个产品细节很容易因为用户不理解或者手滑就无法与上个用户进行“打招呼”私信，且私信功能仅在触发“打招呼”后才能交流，入口少、且不易理解，不知道是产品经理的有意为之还是被遗漏掉的地方。

4. 消息模块

消息页的添加入口，用折叠手法展示，降低频繁跳页的割裂感，同时缩起时也不会占用消息列表。

消息列表是通过“打招呼”保存下的私密消息，聊天形式极具特色，黑色背景加上红紫渐变列表有种夜店嗨皮的即视感观，这里就不过多评价，大家领悟吧。

5. 品牌元素

设计中还值得关注一点，就是个人主页中的个性标签，我罗列出 22 个，当用户发表三个同类动态即可点亮一个标签，此标签也会代替文字描述承载动态内容的作用，用户选择已点亮 的 icon 即展示对应标签内容了，相当于动态中的标签分类，但前提发表动态时选择对应你标签，不然发表后的动态不能二次修改。这种通过标签点亮的功能也是为了让用户 UGC 内容更加多元化，同时也想通过标签来吸引用户多多发动态的。创意点是好的，但是否能达到好的效果，还是要拭目以待。相比其他产品，咔咔是我一直关注的产品，同时也是特别喜欢的产品之一，所以我分享给你们。

结语 设计师要有发现美的眼睛。美不仅是视觉，还有好的体验流程。不要让用户思考，这是每个设计师所追求的。认真记录产品细节，了解背后的思考，也是不断提升自己逻辑思维和表达能力的一种方式。本期产品细节分析结束，我们下期再见！

欢迎关注作者微信公众号：草蓉三石

往期回顾：

写给新手的版式设计基础指南（四）：图片跳跃率 上回，咱说完了文字跳跃率，今个儿，咱就来说道说道图片跳跃率。

阅读文章 >

写给新手的版式设计基础指南（三）：文字跳跃率 懂了文字跳跃率！

阅读文章 >

写给新手的版式设计基础指南（二）：图版率 今天又带来一篇十足的干货，安全无毒，放心食用！

阅读文章 >

写给新手的版式设计基础指南（一）：表现力 下面俩啤酒海报，哪个感觉更廉价？

阅读文章 >

今天咱们修炼的神功是「创意分析」，经常有人在往期文章中留言道：「脑子会了，手不会~」「看了这么多文章，做的还是一塌糊涂~」，总而言之是「一看就会，一做就废~」

怎么会这样？真相只有一个！那就是，还没内化，再看亿遍就好啦！没内化是一方面，当然还有一点，就是不会去分析创意，无法得出一个合适的创意！设计创意，必须得合适才行哟！不然设计的再好看，那也是驴唇不对猫嘴~

俗话说的好：先做对，再做好。就是这个意思~

那么，咱照例先来看个问题~

下面俩版面，哪个更符合主题？ 就拿花几分钟，简单做个小案例吧~

主题是奢侈感！不出所料，众爱卿在朕前几篇的调教下，果然都选对啦！奢侈品，自然是感觉让人买不起的「A」才是正解

「C」，这么便宜又不精致，置于奢侈品的高格调于何地？受众人群显然不会买它，因为显得掉价撒！上述案例中，我们单独来看，排版都没啥问题，不管是对比、对齐、亲密性，都做的挺好！

但为啥「C」就是不行呢？必须是因为「C」的气质不对，也就是创意思路不对~不符合产品本身的定位，也不符合受众人群的偏好。所以练设计神功，必须得先把设计做对，再做好~

那么问题来了，怎么才能先把设计思路做对呢？

首先，要像大猫一样帅！开个玩笑，哈哈~其实，所有设计在动手做之前必须先去分析~而且这个分析比实际动手设计重要多啦！流程图在此~

你看，第一条就是分析气质，确定目的！如果第一条就搞错了，那岂不是一步错步步错，层层叠加 debuff，最终简直错到离大谱！

说回正题，咱就先举个 字体设计 的例子~咱就做「铁甲纪元」四个字

第一步嘞，当然是确定设计目的，及分析这个主题应有的气质啦！

目的：能够表现铁甲、机甲的元素。

「铁甲纪元」机甲、铁甲、机器啥的玩意儿，那风格调性必须是得坚硬厚重、棱角分明的吧！看本猫随手用「站酷快乐体」改的这个是不是很 nice~

nice 个腿儿~

你看这玩意儿，坚硬厚重、棱角分明这几条，一条也没占着，所以一点也不 nice~论气质，还不如上面的黑体字契合呢！那有没有比黑体更坚硬、更棱角分明的气质呢？

你看这个就更好，更棱角分明！所以咱的设计，也要这种坚硬的、棱角分明的气质和特征~

分析好气质之后，咱是不是就要去想具体的创意啦！而且创意一定要能够表现这气质，实现目的，不能与这种特征背道而驰。气质对了，怎么去表现铁甲、机甲的创意呢？

最简单的方式：找图片、找参考，找到机甲的特征，归纳运用到你的字体设计上就可以啦！

以上是搜「机甲、机械、机器」等关键词所展现的内容~

咱看他们的特征，是不是棱角分明，而且有机械构造、齿轮连接的那种感觉！知道特征后，咱就进一步的归纳、简化这种特征~

其实这些特征，还真就是从参考中找出来的，转角、机械感、凹凸感、切割感~借用这些特征去塑造笔画，是不是满满的机械感！甚是贴合「铁甲纪元」的主题~

同样的思路，把其他笔画也做出来~

这里我把阿里巴巴普惠体垫到底下，在上面塑造新的笔画。垫字去做，字的结构不会偏的太严重~

当然，就算垫字到底下，毕竟字形风格差别大，结构还是要小小滴调整一下下滴！

结构调一调， 字靠近一点，亲密一点，再在字间填充一些机械造型，让字间笔画有个切割平行的关系。使 4 个字浑然一体，就像是一套完整的机械拼接设备！

这感觉就有了呗~再加上英文，简单做下排版~

完美体现「铁甲纪元」的主题，当然也实现了设计目的~所以从流程来讲，当然是前期分析最重要！分析的都不对，啷个可能做对嘞？

字体设计是这个流程，排版啥的当然也是咯，第一步永远是分析~看一个「西安印象」海报，主标题文案为「西安印象-历史博览会」。

第一步，当然还是分析气质，确定目的咯！

西安印象，又是历史博览会，这海报肯定得表现西安的历史印象吧！这就是最基础的目的~哪么这海报要吸引哪块人群呢？在基本的目的上，再加入人群受众的分析，就是升级型目的，一般商业设计都要有这种思维哒！打个比方，如果说，这个「西安印象-历史博览会」是一个面向儿童的展览，那咱的目的，就变成了，既要表现西安的历史，又要能吸引小朋友~

通过升级型目的，来确定风格~活泼、低龄、五彩斑斓、有趣！

大概就是这种风格啦：

脑补一下，把西安的一些元素用，插画或者活泼的风格表现。同理，如果说，这个「西安印象-历史博览会」是一个面向年轻女性的，那设计风格就要吸引年轻少女啦！可以设计的少女心一点、卡哇伊一点，或者时尚一些，来个粉粉的诱惑~

要是这种感觉还差不多~

再比如，这个展面向的是设计师、艺术家之类的，那你的设计不得跳出传统的感觉，新颖一点嘛！毕竟大家都是搞视觉的，普通的视觉见的太多了，无法触及内心了，得搞点实验设计，搞点新的视觉样式，搞点形式感，才能吸引他们~

比如这几种~

形式感特别多，这里只列举了几种~但也可以看到，这种跟常规意义上的商业海报，有较大区别！一般人不太能接受，Get 不到点~但看够了普通视觉形式的设计师、艺术家们倒觉得很独特，很 NICE~

这也是为什么很多设计展览、培训、讲座海报都做的花里胡哨，仪式感十足~当然还是因为，你们就是喜欢那种嘛，哈哈~

这呢，就叫见人说人话，见鬼说鬼话，这呢，就叫人情世故。所以说白了，不管是花里胡哨的形式，还是正常的形式，其本质都是为商业目的服务哒~

这个海报大家还有印象咩？前两年，北京国际电影节的海报。当时闹得特别火，支持一派和反对一派，闹得不可开交，就差线下约架啦，哈哈哈

为啥会这样？其实从海报美感和排版来讲，没问题对吧~抛开受众人群不谈，这形式感也挺新颖，没啥问题。诶，这就是问题所在了，支持的一派觉得形式独特，很有记忆力！这一波人呢，大多都是设计师、艺术家等相关从业者。反对的一派觉得太独特了，大众接受不了，是你们小圈子的自嗨~

其实站在各自的立场，都有理有据，那么最终的评判标准是什么嘞。当然是看受众呗，受众喜欢的就是对的，反之受众不喜欢，那就是不贴合目标人群。就比如一件商品，目标人群都不喜欢，怎么可能让人家掏钱？电影是大众艺术，受众很广，有艺术家，有电影人，也有各行各业的大众。既有年龄大的，也有年龄小的，可以说，目标人群是多元化的，复合型受众。面对多元化受众，当然要满足多元的人群审美，你不可能满足所有人，但也不要只讨好一类人~

所以这个海报的问题就是，风格气质上只讨好了一类人，完全没考虑其他的受众人群咩~

但设计师就不行啦，你又不是我的谁~大伙都是受众，凭啥你只满足他的喜好？你没满足我，我不爽了，总得说两句表示一下态度吧~所以这个呢，至少要满足大多数受众的喜好，最好呢，是在大众喜好的基础上，又表现了一定的艺术！如果不可兼得，舍鱼儿而取熊掌~选择受众更多的那种风格~

因为，设计师、艺术从业者，普遍接受度比较高，毕竟工作中即见过猪肉，也见过猪跑，啥风格都见过~官方连夜重做了海报，对外宣称原先的海报只是先导海报~

显然官方也是意识到这问题啦，新海报比原先的更贴合多数受众的审美。

10 周年的梦幻风车形成个摄影机~紫色的梦~就是文字排版不太行！

第十一届的风格气质，也是贴合了多数受众，还用了小人物与风车放映机的大小对比~有那味儿了~

虽然原先的海报风格气质有待商榷，但人家有热度呀！省了那么大一笔宣传费用，难道不是好事嘛？走红有热度，当然算好事！但是吧，评判设计的好坏，不能只看火不火~

评判设计的好坏，跟设定的设计目的有关系，如果，这个设计一开始的目的就是追求热度，制造冲突，引爆舆论~设计成品也成功的完成了这个目标，那就是 6 的，没问题的。那这就是一个精心策划的运营型设计咯！但我看过作者对此访谈和回复，他也感到很纳闷，设计个海报而已，咋还吵起来了呢？也就是说，这个设计一开始的设计目标，是完全没有「制造话题，引爆舆论」的营销型目的~

不是故意找骂，那被受众骂，也只能受着了~不过话说回来，通过这个事情，倒是使官方更重视 海报设计 了~

这届之前的海报，那是一个比一个难看~

所以说，意外引爆舆论，对设计行业来讲，还勉强算个好事吧~

再与本王看几张，艺术与多元受众结合的比较好的电影节海报，细细感受，细细品味~

风格虽然各异，但受众基本都能看懂，风格气质上也不会挑战多元受众的审美，属于大家都能够接受的那种。这也更告诫我们，设计目的、风格、气质，还是特别重要的，搞不好可能要挨骂哟~

设计前多去思考甲方为啥要设计，目的是啥、风格是啥、调性气质是啥？多去沟通，多去思考。

说回正题，假定「西安印象」展览的受众，就是普通人~咱就把案例做的普通大众一点！面向普通大众的，那就中规中矩一点，能表现西安的历史印象，根据历史印象，风格上可以普通偏传统一点就好啦！

OK，咱先看个案例！

这个排版中规中矩，还算整齐，但为撒子就是没感觉呢？当然是因为这是个反面案例了，嘿嘿~虽然排版没太大问题，但没有去考虑设计的目的和风格，完全感受不到西安有撒子印象嘛！对西安的印象也就只停留在那 4 个大字上了~

这也是很多人的问题啦，为了排版而排版，忽略掉了目的和气质！如果是这样，那你掌握再多排版原则知识点，也是没有用的。靠运气做设计。

那些版面率、图版率、字体等本神功的其他要素，是根据设计的目的和气质去运用哒，不要瞎用哟！目的和风格确定了，咱就得思考能表现目标的创意啦~

写给新手的版式设计基础指南（二）：图版率 今天又带来一篇十足的干货，安全无毒，放心食用！

阅读文章 >

什么能够表现西安的历史印象？那肯定是能够表现历史的东西，比如文物、老照片、名胜古迹啥的~

简单做个头脑风暴~

西安先后可是 13 个朝代的古都，能表现历史的东西那么多，还愁啥~最简单的一个方式，就是直接拿名胜古迹的照片去设计咯，这是找到的一些免费的照片，

你看，这些图片，不就是能表现西安的历史印象嘛！相比之前只有「西安印象」的四字海报，这些图片更有活力、更有感觉！是不是书法体和宋体字，都能够表现！字体确定后，咱再过关斩将，把留白、构图、版面率、跳跃率啥的都搞搞，确定了一下版式~

这是个压角式构图，整体的居中感觉会显得海报更传统，更有文化和历史味道！留白设的比较小，信息占比大，更能引人注意~

毕竟面向普通大众的展览，你整的高端奢侈高格调，怎么可能跟人民群众打成一片嘞？看这版式，中间要放一张图片~能够表现西安历史的图片都行！

比如说我放上了大雁塔，底色用撞色的形式，在常规的基础上又增加了点设计感~「唐风汉韵、千年古都」加入圆圈，形成传统的对联形式~传统感又增加了几分~

如果觉得撞色太过时髦，也可以更保守一点嘛！

用灰色照片也是可以哒哟！放不同照片，还可以形成系列海报，通过阵列去投放，能达到更好的效果~也可以做成更传统的颜色，这块就全靠大家自己的想法和甲方的要求啦！

底色也可以改，总之，能跟我们得出的目的和气质相匹配的色彩，都木得问题。有人又问，只能用一张照片，一种版式嘛？当然不是的，原则上最终的成品能实现你得出的目的和气质都行！

像这种，同一个主题，甚至可以换着花样来排好几版！最重要的是目标和气质~不管是什么照片，什么构图、什么色彩，设计无定式，能实现设计目的和气质就上可以哒！本猫虽然懒，但还是，勉为其难的花个几秒钟，再搞一版吧~几分钟做的，肯定没啥细节，爱妃们就看个大概，思路懂了就行！嘿嘿~

也可以跟这种海报一样，把各种文物古迹，散放在版面当中，规则无绝对，重点是目的和气质。所以，爱妃们的小脑瓜，要灵活起来转起来~

好啦，今儿个就唠到这儿吧，记住这个流程，下期可是要考的~

各位大佬点赞留言收藏走起，猫会很开心哒~

周二早上好！现在你看到的是这个炎热的 7 月第三波干货，这一波干货和往期的偏向有明显的不同，可能会更加贴合 UI 设计同学的需求，比如可以随意复制粘贴的超大 Figma 组件库，方便备份和恢复的插件，可以联动的超好用管理工具，可以将 Figma 设计稿转化为网站的工具，以及将 Figma 设计稿转化为代码的免费平台。除此之外，还有限时免费的网页项目素材，有免费帮你转换风格的头像生成工具，特别有意思，

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

第一波！2022年7月精选实用设计干货合集 7月第1波设计干货合集来了！

阅读文章 >

第二波！2022年7月精选实用设计干货合集 现在你看到的是7月第2波设计干货合集，不过严格意义上来说，这一波完全是干货合集中的合集。

阅读文章 >

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

可以和 Figma 联动的无代码网站生成器 https://siter.io/

这是一个最近比较受欢迎的无代码网站搭建平台，这个平台可以和目前最主流的 Figma 直接联动，这意味着你可以最大程度地借助这一主流 UI 设计工具来达成目标。虽然 Siter.io 是付费的服务，但是它提供免费的试用，而且内置的功能也最大程度地辅助你完成网站的搭建，比如海量的图标、对各种图片和视频素材的支持、各种域名服务的支持以及设计系统的支持，对表单和第三方程序的支持，如果你会写代码，还能进行更加深入的定制。

限时免费的高素质可商用网页设计素材 https://designboostr.gumroad.com/l/reallygooddesign

这是一套拥有超过 50 个设计项目的完整设计素材的免费大合集，其中涉及到着陆页、社交媒体页面、首页、品牌视觉设计等各种不同的页面设计，这套免费的页面设计素材除了免费获取之外，最重要的是可以直接拿来商用，无需标明归属，不过根据目前了解的信息，这套设计素材是限时免费的，感兴趣的同学请火速下载。

可随意复制粘贴的免费 Figma 组件库 https://figmacomponents.com/

这个网站也绝对可以称得上 UI 设计师的良心素材了！这里汇集了大量现成的各色 UI 组件，而且它们是直接同 Figma 兼容的，从最基础的按钮组件，到花样繁多的可视化组件和超大型控件和模块，这里一应俱全，你可以在这里直接复制你所需要的组件，然后粘贴到你的 Figma 编辑器当中，直接使用！

Figma 设计节点备份和跳转插件 https://www.figma.com/community/plugin/1125156339032115371

虽然大家通常都会单独保存设计文件，但是依然很容易在众多设计版本当中迷失，而这个名为 Jumpback 的 Figma 插件能够更加便捷地帮你解决这个问题，你需要做的就是记得在特定的时候使用 它保存当前的状态，然后在后续设计过程中出了状况，随时可以跳转回这个备份的节点，当然你也可以跳转过去，相当方便。

超多独特的 3D 抽象几何图形素材 https://lostgeometry.xyz/

简单的装饰性几何图形已经不够用了？那么你可以在这个合集当中，找到 91 款截然不同的、风格抽象的 3D 几何元素，这些元素的建模都是在 Blender 当中完成的，这些能够给画面带来更强的视觉表现力。所有的这些元素都有4种截然不同的肌理可供选择，虽然完整版的服务是收费的，但是你可以完全免费获得 PNG 格式的的素材。

一目了然的设计项目管理工具 Taskplane https://taskplane.app/

这个名为 Taskplane 的工具本质上依然是一个管理工具，但是它优秀的地方在于，你可以将你常见的设计项目任务以一目了然的方式集成到其中，一方面直接连通 Github 、Gitlab、Slack、Figma 等你常用的工具和服务，另一方面则可以将日常项目的内容以标签的形式呈现出来，不再被繁琐的条目所束缚，更快进入工作状态，搞定每一个任务。

超多样式的照片转漫画风格服务 https://socialbook.io/cartoonize

这个服务说起来也很简单，它可以借助机器学习，快速地帮你将现实的照片转化成为动画形象，而且这些形象可以是截然不同的漫画风格，从迪士尼式的公主风，到辛普森一家的搞怪漫画风格，不一而足。

将 Figma 文件转化为可用代码的服务 https://www.locofy.ai/

Locofy.ai 是一个正处于公开测试阶段的工具，它可以将你的 Figma 设计文档直接转化为可用的代码，比如 React、React Native、Html-CSS、Next.js、Gatsby 等等等。这种转化并非生硬的转化，它会帮你标记好响应式的断点、制作好组件甚至获取实时的原型，如果你设计的足够规整，甚至可以直接部署使用！

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

今天继续为大家带来 Ai 排版技巧第三期，快来看看这期里有没有让你惊喜的新知识吧~

上期回顾：

掌握这5个Ai小技巧，帮你快速提升文字排版效率（二） 大家好我是和你们聊设计的花生。

阅读文章 >

文本快速拆分为可编辑单字 上一期有小伙伴在评论区问有没有将文本快速拆分为单个文字的方法，我查了一下还真有，具体的操作方法如下：

选中文字后，在字符面板的「 字符旋转 」一栏将数值设置为 0.01°，然后选择「对象-拼合透明度」，在弹出的窗口中将「 栅格/矢量平衡 」调为 100，「 线稿图和文本分辨率 」以及「 渐变网格分辨率 」分别设置为 300 ppi 和 150 ppi，其余不变。确定后会看到文本中文字左下角出现一个小点，即表示拼合成功。单击右键取消编组，文字就是可编辑的单字状态了。

快速插入特殊符号 在 Ai 插入特殊的符号、单位或者字符，有 2 种方式可供选择。一种是 Ai 自带的特殊符号，在「 文字- 插入特殊字符」中可以找到，包含版权符号、注册商标、分节符等，但是内容很有限。

另一种方法就是用输入法自带的符号库，以搜狗输入法为例，其符号大全内包含各种符号标点、序号、单位、注音、英日韩俄语字符，非常方便，在输入法的状态栏显示在桌面的情况下，按快捷键 Ctrl+shift+Z（默认是这个设置）就能调出符号大全面板。

快速出效果！8 个简单易上手的 PS 字效教程 Hello 朋友们，我又来教大家一些非常实用的小技巧啦~ 上期文章： [link https://www.uisdc.com/ps-skill] 上一期我分享了些稀奇古怪（但有用）的小技巧，这次我来分享 8 个字效小技巧，简单易学，每个技巧都能帮你快速做一张字效海报出来，快学起

阅读文章 >

快速输入垂直方向文字 输入垂直方向的文字除了在文字工具里选择直排文字外，还有一种更简单的办法就是在输入前按住 shift 键，光标会由垂直变为水平状态，这时候填充的文字就会是垂直竖排的了。

引号出格悬挂 一段多行段落文本如果被引号括起来，会出现引号占位而文字不对齐的情况，不是很美观。这时候我们打开段落文本，选择隐藏选项里面的「 罗马式悬挂标点」，引号就会悬挂在文本外侧。需要注意这个功能只对段落文本起作用。

我拆解了 Behance 首推作品集，总结出 7 个让作品集更高级的技巧 Hi，我是彩云。

阅读文章 >

OpenType 的分数字功能 OpenType 的分数字功能可以将水平排版的“月/日”排版变成斜角错位的形式，做日期排版非常方便，此外也可以用作分数形式的排版。需要注意的是此功能需要使用具有 OpenType 的字体。

以上就是今天推荐的 5 个文字排版小技巧，喜欢的小伙伴记得点赞收藏，也可以转发给身边有需要朋友。如果你有关于本文或者其他设计疑问，可以在评论区提出，我会第一时间为大家解答~ 也欢迎大家加入优设官方设计交流群，和优设主编、设计总监及其他热爱设计的小伙伴一起探讨学习（入群二维码见文末 Banner）~

如果给你五年的时间，你能走到职场的哪一步呢？今天就和大家简短的聊一下这个话题，希望可以带给大家一些职场反思。

从大学到职场前3年，设计师如何打造一个完美的开局账号？ 大家可能听到完美开局就有点兴奋，小说和游戏里的剧情真的可以在我们设计师的身上重演吗？

阅读文章 >

五年可以沉淀多少套作品 当我们遇到被动的情况时，总会找各种理由为自己的懒惰开脱。失业的时候才发现工作不好找，质疑专业前景不好，行业饱和等；整理作品集的时候才发现自己没有拿得出手的项目，责怪公司不注重设计，没有好的项目发挥等。我们总是有找不完的理由，却重来没有质疑过自己，导致自己越来越被动。

如果让你工作五年，你有计算过五年的时间自己可以沉淀多少套作品吗？估计没有多少 设计师 会去量化过。刚入行时觉得五年还早呢，一晃而过时发现为时已晚。黑马哥就粗略的给大家算一下，如果两天出一个界面，两个月完成一套作品（主要页面和主业务流程等），五年我们可以沉淀 30 套左右作品。如果按照“三天打鱼两天晒网”的态度，我们可以完成五分之三左右的量，也能沉淀 18 套作品。各位工作满五年的同学自己验收一下，看看相差多少。

也有一些同学会质疑，做这些练习作品有啥用？了解一下一万小时定律相信就会明白了，专业能力的提升离不开反复的磨练，没有人可以随随便便成功，都是按部就班的努力换取的。

五年可以阅读多少本书籍 通过阅读提高我们的认知是至关重要的，随着信息节奏的快捷化，很多同学已经难以静心阅读。我们还是要不断的刻意改变，给自己制定阅读计划非常有必要。无论是专业相关的还是生活职场的，我们都可以穿插性的阅读，阅读是培养学习习惯的关键。

每天不需要投入太多时间，哪怕固定半小时到一小时阅读都可以，只要长期坚持下去就能收获很多。就算一天半小时，五年也能投入 912 小时，相信这些时间可以让我们学会很多知识点了。如果可以固定一年阅读几本书，这个自律带来的习惯培养绝对是可以改变自己很多的，我们缺少的就是目标和自律，只要改变这两点，成功只是顺道发生的事情。

五年可以达到的专业等级 俗话说：“三年入行，五年精专，十年称王”，通过五年的经验沉淀和自我学习强化，专业能力达到高级/资深的阶段是没问题的。当然这个时间不是自然流失形成的，不付出行动这个时间对于自己来说只是量的增长而已。

五年的沉淀离不开项目的实战经验、日常的专业磨练、不断更新的知识认知、目标和自律的长期坚持等等。其中作品的输出和方法论的总结能力较为重要，没有千锤百炼肯定是无法探究专业深度的，不去总结方法论，知识框架是零散的。

五年中能积累多少资源 职场中我们除了通过项目积累经验和提升专业能力以外，也是积累资源的过程，如同增加行业背书也是一种资源的积累。

如果在每一个团队都只是过客，积累下来的只有时间的增长。也许现在一起共事的同事，以后就是一起创业的伙伴，也有可能是遇到问题获得解决的途径来源。除了职场中形成资源以外，也要开拓更多资源渠道，比如学习组织、交流社群、知识社群等行业渠道，未来的绽放是需要现在不断铺垫基础的。

五年后想要多少薪资 薪资待遇是最实际的保障，不能连这个底层需求都没有保障。你有思考过自己五年后能拿到多少薪资呢？要以怎样的专业能力和经验才能达到这个目标。

有人工作五年待遇还达不到平均值，也有人两三年已经拿到高出期望值很多的收入，待遇没有固定的数值，都离不开你所提供给公司的价值。在招聘平台很容易算出所在城市的待遇范围，也可以自检一下是否偏离太远。

工作经验在 1-2 年的平均值在 12K 左右，3 年以上达到 15K 比较常见，如果具备五年经验是可以冲击 18K 以上的幅度。当然也会受到工作城市的影响，其它影响的因素有专业能力、行业背书、项目经验和学历等，不过有时候机遇也是一个影响因素。

五年后就职企业的规模 如果学校不错，应届生就进入一线企业也是非常不错的选择，一开始就积累了好的行业背书。如果从小企业起步的同学，就要做好自己的跳槽规划，不能过于安于现状。

刚开始入职小公司没关系，但是要积累经验和作品，规划好跳槽计划。从小企业到中型企业，再到上市企业，最后也是可以过度到一线企业的。要嘛积累出成熟的项目经验，小产品到大产品，再到知名产品，依靠产品的体量敲开大厂的门。

也有一部分设计师靠行业知名度获得机遇，只要专业能力强，通过曝光度获得机遇也是可以逆袭成功的。无心插柳柳成荫是不现实的，有心插柳才有可能改变自己的职场路径。

五年后观念发生的变化 五年的职场磨练可以改变我们的心性，让我们更成熟和理智，就相当于面对反复改稿我们也能一笑置之～哈哈～。工作中我们也在不断的刷新认知，改变我们看待问题的角度，以及解决问题的能力和思路。

为什么企业都希望招聘有经验的设计师，就是因为培养成本是最低的，而且稳定性也能得到保障。五年的经验可以让我们具备独立完成项目的能力，也具备把控整体项目的能力，遇到问题能够展示出解决问题的综合能力。在职场中要有正确的观念，面对非本职工作也要以积累综合能力的角度去衡量，有时候改变我们职场轨迹的因素也许就来源于专业以外的能力。

五年的时间改变我们的不只是专业经验，跟着好的团队和领导，可以改变我们很多观念。有时候思考的角度至关重要，能力不足可以提升，观念性的偏差是最容易我行我素的，旁观者的建议也是很难被采纳的，只有碰壁后才能幡然醒悟。

希望大家都能遇到对的团队和领导，改变自己看待专业、职场和生活的角度，以正确的观念推进自己的职场路径。

小结 本文是以推演的形式和大家一起反思，如果给你五年的时间，你能走到哪一步？对于刚入行的同学来说，可以更好的规划自己的第一个职场五年；对于入行还不足五年的同学，可以以此机会调整，还能及时改变方向；对于五年以上的同学来说，过去式无法改变，只能总结经验教训，规划好下一个职场五年。

本文观点属于个人经验反思和总结，大家结合自己的实际情况选择性吸收，希望可以带给你一些职场反思。

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

互联网企业“出海”浪潮背景下，作为设计师，面对新鲜未知的市场，如何找到适合海外产品的设计方向？ 针对本土化课题，本文将提供一些实用的设计心得。

本地化设计 案例分析：

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

阅读文章 >

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

阅读文章 >

近几年，国内的电商市场增速减缓，而近两年，因为疫情的影响，全世界大部分地区的购物习惯不得不由线下转为线上，巨大的空白电商市场吸引巨头出海发展，海外市场逐渐成为了新的蓝海。

据埃森哲 2021 年中国“独角兽”研究显示，45%的独角兽企业认为海外拓展至关重要，其中 82%的企业计划 24 个月内进军海外市场，从游戏、开发者服务和 SaaS（软件即服务），到硬件设备、电商等行业，越来越多的初创企业从萌芽期就瞄准了全球化；网经社电子商务研究中心发布的《2021 年度中国跨境电商市场数据报告》指出，2021 年全年中国跨境电商市场规模达 14.2 万亿元，相比 2020 年增长了 13.6%，其中出口占比达 77.46%。除此之外，IT 桔子《2022 年中国资本海外投资并购报告》统计，2021 年由中国资本参与的海外投资事件数达 454 起，创下自 2004 年以来的新高，而 2022 年仅前 2 个月，中国资本对海外已有 40 多起、约 50 亿元规模的投资。中国贸促会研究院今年 3 月的报告显示，中国对外直接投资流量和存量连续四年稳居全球前三，近八成中国企业将维持和扩大对外投资意向，看好对外投资前景。

中国经营报 2022.5

不难看出，即使是在疫情肆虐全球的今天，“出海”仍是中国企业发展的重要方向，包括 京东 在内，越来越多的中国企业开始重视海外市场，在跨境电商、游戏及其他独立应用开发、投资等方面全面开花，从出海扎营，逐渐成长为全球化企业。

中国出海领先品牌 50 强

中国 企业出海 成功与否，离不开一个关键点——本土化设计。作为设计师，面对新鲜未知的市场，如何找到适合海外产品的设计方向？ 在服务京东东南亚业务的这几年中，我们也逐步累积了一些本土化设计的方法，这里就给大家分享几个小心得。

京东的国际化布局也已历时多年，2015 年开始正式进军海外电商市场，上线了多个国家馆，并同时开始在海外成立独立站点。2015 年底，京东成立了印尼站 JD.ID，后又于 2018 年成立了泰国站 JD CENTRAL，两大站点立足东南亚市场，逐步形成了全球化的布局，也继续扩张到荷兰等欧美国家。国际化已经成为了京东一个重要的战场。

当一个产品需要进入一个新的国家市场，在初创和快速发展的时期，作为设计师，首先要对这个国家有一些基本认知和了解。

规避风险，确定方向 一千个读者眼中就会有一千个哈姆雷特，人和人的差异尚且如此，国家之间的差异就更大了。由于文化背景、历史渊源、自然条件等多方面的影响，来自不同国家的人会对同一个事物产生不同的感受和反应。面对一个陌生的国家，我们需要打破固有印象，抛弃对用户的先天认知，尽量用客观的眼光去看待他们。

我们可以通过一些通用性的行研，来认识市场，从而规避风险，并得到体验设计的大方向。这里可以引用一些经典的分析模型，来协助我们做全方位的行研分析。

PEST 是一个非常常用的分析模型，一个行业或者公司能够发展得如何，靠的不仅仅是自身实力，外部环境也很重要，PEST 是一个有效判断行业或者公司发展前景的方法。我们可以通过搜集公开资料，来明确目标市场的政治、经济、技术和社会环境。但是这些对设计来说还不够，另一个模型 NESC 则在这个基础上增加了自然环境和人文环境的研究内容，其中包含了对于东南亚国家很重要的宗教习俗等基础信息。

这两个模型里其实包含了一个以国家为单位的群体大部分的特征，可以极大限度的勾勒出一个国家的基本情况，通过这两个维度的分析，我们可以初步推导出一些本土化基本原则。

举个例子，京东的吉祥物 JOY 原本是一只小狗，但在伊斯兰教中不允许狗与人有密切接触，为了规避宗教习俗的禁忌，所以印尼站使用了小马的形象作为吉祥物。在很多重视宗教的国家，充分表达对当地文化的尊重，是非常重要的。

这里介绍一个人文研究的理论工具，霍夫斯泰德（Hofstede）文化维度理论，这套理论问世距今已经有 40 多年历史了，它把文化特征分为 6 个维度，在研究跨文化差异时被广为引用。

荷兰学者 Hofstede（1997）的研究认为，文化对于人就如同计算机程序对于计算机一样；程序限制了我们的思维方式，我们的感知，我们的行动等等，他试图利用主要来自跨国公司 IBM 的数据来建立各种民族文化的特征类型，这些数据来自对 50 多个国家的 10 万人所进行的调查。后续，这套理论被后来者不断完善改进，并逐渐扩张为在全球各个国家定期做大规模调研和信息收集，汇总成国家维度的数值，为文化分析提供了理论支撑。理论中的六个文化维度如下图：

有了这些数据，我们可以更直观的看到各个国家的文化特征和差异点，也可以推导出很多有价值的结论。下图是中国文化和印尼、泰国文化在各个维度的对比：

了解用户，挖掘合作 第二个部分就是用户研究。

用户研究方法：

万字干货！大厂最爱的用户研究方法全方位科普 导读：这篇长文主要讲述了用户画像与用户体验地图在实际应用中的作用、差异、流程、实用技巧和关联。

阅读文章 >

腾讯有一门经典的课程《像蘑菇一样思考》，其中描述了一个小故事：

有一个精神病人，他每天什么事都不做，打着一把伞躲在角落里，所有医生都觉得这个病人没救了。有一天，一个心理专家站在他的身边，什么都不说，拿着一把伞跟他一样蹲在那里。就这样坚持了一个星期后，他终于向专家身边凑了凑，说了句：“难道你也是蘑菇？”

这个故事告诉我们，用用户的方式去思考，才能发现问题的根源所在。需求来源于对用户的了解——对用户的了解，需要感同身受，变成用户，“我，就是用户”。洞察人性，以己推人，并不是一件容易的事。我们需要了解用户，了解市场，从而寻找机会点，那就需要和用户“对话”。

用研是一个很大的课题，去了解用户，光靠空想是不行的，得真刀真枪的去接近他们，深度访谈、问卷调研、意见反馈、走进场景、观察用户行为等。我们和海外用户的距离很远，但也要了解用户的想法，明白他们的关注点、购物倾向、诉求等，当我们需要做一个用户问卷调研，或者访谈座谈会，最佳方案就是和海外的本土团队协作来完成。

印尼用户问卷调研题干 初稿

上图是我们在做印尼站的用户调研时，和印尼本土的 CX 团队共同合作完成的一个调研题干。我们把对用户的疑问和好奇，落实在问卷中，通过 cx 团队的发放、收集和分析，反馈回来，从而获得用户的真实想法。

用户调研：

企业出海产品如何做用户调研？试试这个小成本方法！ 前言 产品出海、特别是教育产品出海，在国内对向教育产品政策收紧这个大趋势下，已经成为部分教育公司必须考虑的命题。

阅读文章 >

除了定向调研，周期性的用户反馈跟踪也很重要。

常用的两个指标就是客户满意度和净推荐值，客户满意度更重视用户的主管感受和态度，净推荐值则倾向于忠诚度和推荐意愿，两个指标通常会用在不同的场景中，我们定期追踪的指标是以 NPS 为主，随时跟踪用户的反馈和数据变化，并定期汇总落实在优化中。

此外，调研一定是颗粒度可细化的，当我们对于一些关键流程节点，已经有了非常明确的调研目的，可以在系统流程中设定一些触发条件，去触发用户对当前操作的反馈，真实的环境场景可以帮助调研者更贴近用户，理解各种用户群的使用场景和需求。

比如搜索列表的点击低于预期，较多用户长时间浏览搜索列表，翻了几屏的商品，却迟迟没有进入商详页，这时就可以触发对应的问卷提示，询问客户，是否遇到了问题，从而去更精准的找到用户痛点。

明确优势，探索创新 搜索列表页浏览到一定深度时，触发的反馈问卷。

新业务、新产品的开拓，离不开宏观层面的竞品分析，简单来说就是：知己知彼，百战不殆。

当我们进入一个海外市场的时候，当地往往已经有了一些成熟的本土同行业产品，或其他国际化公司的本土产品，它们很可能已经给本土用户培养了一定的认知基础和使用习惯。我们对当地市场的理解或许还不那么深入，这时我们如果借助类似的竞品，通过横向对比这些竞品以及它们的上下游，可以触类旁通，可以从更宏观的层面来理解这个市场。通过竞品分析，我们可以更好的了解市场和用户，明确我们与竞品的差异点、优劣势，从而达到知己知彼，并可以进一步寻找创新机会。

举个例子，我们在做泰国站的 O2O 项目时，通过对直接和间接竞品的比较分析，可以明确我们自身产品的能力优势和市场定位。也了解了用户对于这种商业模式的基础认知。

我们提取用户已经形成良性认知的元素和色彩，适度与竞品做差异化，进一步推导得出了 instant joy 的品牌 logo、品牌色和吉祥物。

虽然我们的 O2O 业务在泰国市场还是一个新模式，但是对打车、便利店、外卖等间接竞品的分析，我们还是可以获得很多有价值的信息，也可以勾勒出用户对于不同业务模式、设计风格、元素的接受程度。

所以，做分析不要拘泥于本行业的直接竞品，从其他行业中选择和我们的产品有类似、相通点的产品，更能带来突破性的启发。我们或许都曾遇到过这样的困境，我们在思考一个新业务如何去突破，或者思考某一个功能如何设计的时候，想遍了各种思路、翻遍了已知的竞品，却仍然想不到突破的方式，也就是遇到了瓶颈。这时候就应该去看一些不同行业的竞品，获取更多的思路。

定位问题，推到策略 在做产品的过程中，当我们有明确的目标时，比如需要对一个关键模块做分析推导，就可以通过数据分析去推导策略。

成熟的设计师往往会把自己的设计经验逐渐内化为一种设计直觉，用直觉去做设计，有利有弊，这里不多评判，但是对于一个未知的海外市场来说，直觉就不一定可靠了。

我们来看一组数据：

这是泰国站单日 UV 的来源占比，其实和我们直觉的认知是很不一样的，国内的 APP 流量是绝对王者，PC 和 M 端可能非常少，但在泰国，M 端的流量是最高的。很多人会疑惑，为什么？我们接着看数据：

进一步提取各端的数据来源，可以看到 APP 端的 UV 来源最多的是高清屏手机，也就是苹果的 PLUS 和安卓的 1080 屏幕（进一步看数据就会发现，大部分是安卓手机）。

为什么小屏手机占比这么少？看一下 M 端流量占比，我们的疑惑就解开了。访问 M 端的流量占比最高的是小屏和超小屏手机，这部分手机，可能是比较老的机型，或者中国已经淘汰的型号，他们的系统可能不支持安装 APP，所以只能访问 M 端页面。

我们再进一步看 PC 端，很意外的是，小型平板和超小屏设备占比达到了 35%。我们把 pc 和 M 做一个纵向对比，可以看到，有一部分小屏设备的分辨率是重合的，其实很多山寨平板电脑，因为设备识别的问题，只能浏览 PC 版页面，体验是很差的。

不同分析方法是有相互呼应的，我们再去看之前行研的分析就会更有体会。泰国用户的手机占有率极高，移动互联网接受率很强，但他们平均收入并不高，很多人使用的就是小牌低价手机，甚至中国出口的二手手机。

这部分占比极高的用户，他们使用互联网的诉求很强烈，但碍于设备的限制，只能享受缩水版、阉割版的产品。了解了这一客观情况，产品和设计的迭代策略也需要做相应的调整，比如说对于泰国站，我们需要进一步优化小屏的体验，推进响应式页面的落地，以及优化技术层面对端的识别等。

数据从用户中来，通过一系列的数据沉淀、处理和分析找出机会点做决策再回到用户中去，提升用户体验，带动业务增长，驱动业务。

这里分享几个数据分析的常用概念和方法：

这五个概念，串联起了一个数据分析思维的基础框架，也为业务和产品搭建了一个全面的分析体系。

数据分析能力的核心不在方法理论和工具模型，更多的是建立一种数据意识，要能够敏锐的发现应该去关注的数据、并且能够从这些数据中找出潜在的规律，推理出数据背后的导致原因。

降本增效，优化表现 最后一部分更偏向于表现层的沉淀，通过设计资产和经验的积累和汇总，优化统一产品前台的设计表现。

设计原则就像英语中的语法，只要遵循语法的框架，随意的搭配都可以组成准确的语言。统一的设计语言能够保证平台的一致性，减少沟通的成本，效率也会得到提升，能够使设计师将更多的时间专注于项目上。

京东的东南亚站点从 2015 年开始布局，目前有印尼和泰国两个站点，接下来可能还会拓展更多国家，国家之间的差异也会越来越复杂。举个例子，不同国家的文字文本长度差异是很大的，中文排版中比较容易的左右对齐，对于西文就不太适合，所以西文排版更适合上下排列，需要更灵活，并且预留更多的文本空间。

文字本身的结构，也会导致行高的差异，也会一定程度影响排版。

对于图标的设计，国内产品（例如京东主站）使用的图标，相对比较精简，对于国内用户来说可以理解，但对于海外用户，这种设计语义是不够明确的，考虑到多国家理解的通用性，我们还是需要采用更明确语义的设计。

结合各国设计的差异性和统一性，求同存异，我们也在逐步沉淀东南亚站的设计资产库，帮助视觉设计师建立清晰的设计理念认知，在整体的产品设计风格上保持产品线的一致性。资产库不仅用于优化现有站点的体验，也可以助力未来的新站点快速搭建。

因为篇幅的关系，本文重点介绍了本土化设计的五个方向，其实每个方向每个章节都是可以进一步去研究和分析的。

本文中的工具和方法不单适用于海外市场的本土化设计，对于其他业务模式也是很有价值的。很多内容都来自日常的工作总结，也许会有谬误，欢迎大家指正和补充，希望后续继续和大家一起交流学习。谢谢大家～

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

去年参与了公司设计体系（ 设计原则 、 视觉规范 、 组件库 、全局规则）的整体优化，通过这次优化也领悟到了一些之前一直疑惑的点。尽管经历了大半年的打磨，但到现在还是有很多问题，不过这没关系，任何一个公司的设计体系都需要不断地进行迭代与改进，只要团队善于发现、分析、解决问题就行。

“仰望星空，脚踏实地” ，做设计需要想象空间，也要有反思和总结的能力。

设计体系打造：

京东出品！如何搭建高效的设计体系：利其器 目前设计行业中小到每个团队，大到每个公司都在致力于建设服务于自己的设计体系，毫无疑问在行业背景下，一套有效的设计体系能够帮助团队或公司快速实现设计的产出。

阅读文章 >

什么是设计体系？ 设计体系是为了实现数字产品的目的而组织起来的一套相互关联的模式和共享实践。

让我们来看两个毫无关联的产品的界面。

BI 产品

团队协作产品

这两个案例展现了如何选用不同的模式以实现不同的目的。

对于 BI 产品来说，目的是让数据分析更彻底，提高数据分析效率；更好的整合数据，为企业提供报表，做为企业决策的依据；更好的帮助企业管理者管理企业，提高企业实力。

对于 teambition 来说，目的是轻松记录要做的事，并与伙伴实时同步进展。让彼此清楚地了解项目整体情况及事项优先级，从而完成目标。

基于产品目的我们可以看出 BI 产品重效率；teambition 更看重清晰以及使用是否轻松愉悦。而产品的目的决定了它所采用的设计模式也会不同，下面我们再对照界面看下基于目的在界面设计上有什么不同。

BI 产品

团队协作产品

BI 数据分析类产品的布局多是小部件组成，这样做会方便用户进行多任务处理。界面设计也会相对比较密集，整个界面承载了很多信息。它使用了紧密的间距、紧凑的控件、灵活的布局和排版方式。

1. 设计模式

设计模式的概念最早是建筑师克里斯托弗 • 亚历山大（Christopher Alexander）在他的开创性著作《建筑的永恒之道》和《建筑模式语言》中提出的。

《建筑模式语言》里面包含了 253 个建筑设计模式，大的如城市和道路系统的布局，小的如家庭住宅中的照明和家具。

类似地，我们在创建界面时，也在使用设计模式（组件）来解决常见的问题：使用标签页将内容分成几个部分，并表明哪一个选项对应于当前的页面；使用下拉菜单展示可供用户选择相关选项。

标签页

下拉组件

设计模式分为 2 类：

第一类：功能性模式（组件库）表现为界面上的具体模块，如按钮、标题、表单元素、菜单等。

第二类：感知性模式（视觉规范）则是描述性的样式，以可视化方式表达和呈现产品的个性，如配色、排版、图标、形状、动画等。

功能性模式有点像名词和动词，它们是界面中那些具体的、可操作的部分；而感知性模式则类似于形容词，它们是描述性的。

例如，按钮是具有明确功能的模块，它让用户能够提交某项操作。但按钮上的文字的样式，以及按钮本身的形状、背景色、填充、交互状态和过渡动画不是模块，而是样式，这些样式描述了按钮是什么样的。

2. 共享语言

唐·诺曼在《设计心理学》一书中说过：系统映像（界面）和用户模型（用户通过与界面交互而形成的感知）之间存在着一道鸿沟。

在设计团队内部也是如此，比如“范围输入框”组件，你能想象它是一个什么样的组件吗？相信不同的人肯定有不同的心智模型，因为这个组件不是常用组件，在 ant design、arco.design 组件库中也找不到这个名称组件，因为它是 TDesign 的产物。

大厂出品！腾讯开源企业级设计体系 TDesign TDesign 是来自腾讯内部近 300 名设计师与开发者共同打造，经由 500+ 项目使用、验证和锤炼过的企业级设计体系， 秉承包容、多元、进化、连接的价值观，TDesign 期望与用户、行业及合作伙伴等一起打造具有竞争力的产品体验。

阅读文章 >

而每个公司都会根据自己的产品特性创造一些非常规类组件名称，这个时候就需要在所有参与产品创建的人之间共享。只有产品内部设计语言一致，才能去培养用户的心智模型，这样才能去除系统映像与用户模型之间的这道鸿沟。

例如上面这个组件，每个人都需要知道这个组件叫“范围输入框”，而不是“输入框”或者“数字输入框”。

3. 如何衡量设计体系的有效性

例如，teambition 的目的是“轻松记录要做的事，并与伙伴实时同步进展”。

于是，我们可以去看产品，设计体系在实现这一目标的过程中发挥了多大作用，以及这些设计实践的效果如何。如果视觉、交互混乱，导致无法实现上述目标，那么可以认为这套设计体系是无效的。

上面介绍了设计体系包含的内容，下面我们针对这些内容进行具体的介绍：

设计原则 1. 有效设计原则特征

做 B 端的小伙伴应该都知道 ant design，但不知道有多少小伙伴有认真的看过 ant design 的设计原则。 可能有小伙伴会问这个设计原则有什么用，我最开始也觉得没什么用，后来在参与设计体系优化过程中发现这个原则就是金字塔尖。

Ant Design：

从设计师视角，聊聊 Ant Design 设计体系的建设 Ant Design 设计体系 本文的主题叫做 Invisible Design System，隐形的设计体系，主要是想和大家分享，我们对可见的设计体系背后隐形的设计规则的思考，以及如何通过设计工程化的方式，让这些复杂的规则可用而不可见。

阅读文章 >

例如：用户没有填写完表单，那么表单的提交按钮能不能点？是置灰好，还是按了以后再给弹窗提示。

例如：可编辑表格，是放一个笔状 icon 来提示可编辑，还是采用鼠标触发时出现输入框以及指针变为文本状态。

日常工作中总会在这些细节问题上争论很久，美其名曰“打磨设计”，其实很多时候就是设计原则在团队内部没有达成共识。为了避免出现上述问题，我们要建立一套基本的价值观和原则。在一些公司里，尤其是在处于初创期的公司里，尝试建立一套共同的准则是很难的。设计原则是无法量化的，因此定义这些原则可能需要多次迭代。

对于原则到底是什么，可能存在一些争议。有些公司的设计原则偏重于品牌，有的偏重于团队文化，有的则偏重于设计流程。

例如，Pinterest 的设计原则便偏重于品牌。

Atlassian 公司没有分团队或者产品单独制定原则。

他们的目标是在客户可触及的每一点上都体现一些核心的价值观。比如“大胆”“乐观”“实用但不乏味”作为价值观的体现。不过，尽管各处的价值观是相同的，但体现程度并不一样。

例如，官网就会较多的体现“大胆”，但产品里面就不会，正如 Atlassian 公司的设计经理 Kevin Coffey 所说的“没有人想要一个‘大胆的’服务支持页面”。

Atlassian 官网截图 https://www.atlassian.com/zh

Atlassian 设计体系 https://atlassian.design/

设计原则是真实而贴切的

我们以 TED 为例。TED 的一条设计原则是“追求永恒，而不是追求潮流”。永恒这个词不光体现在 TED 的界面上，还体现在 TED 的整个品牌和设计方法上。

这意味着他们不会为了追逐潮流而采用一项新的技术或引入一个新的设计元素。

设计原则是实用的、可操作的

例如：定义了原则为“简化”（让产品尽可能简单，简单到几乎感觉不到它的存在），这种原则就是不实用也不可操作的。

怎么能让团队所有人都能理解？

消除无用的部分。每一个设计元素无论大小，都必须有一个目的，并遵循它所属元素的目的。如果你无法解释一个元素为什么要在那里，那么它便很可能不应该在那，这样的定义就清晰很多。

再例如：定义了设计原则为“有用”，什么是“有用”？

从需求开始。如果你不知道用户需要什么， 就无法做出正确的事情。去做调研、去分析数据、去与用户交流而不是做假设。

设计原则能帮我们确定优先级

好的设计原则也能帮我们确定优先级和平衡点。

Salesforce 公司的 Lightning 设计体系的原则是“清晰、高效、一致、美观”。

这些原则的优先级必须遵从以上顺序。“美观”不应该高于“高效”和“一致”，而“清晰”应该始终放在第一位。按照这种方式对原则进行排序，可以让团队在做设计决策时明确哪些东西应该优先考虑。

设计原则是能产生共鸣、容易让人记住

Atlassian 和 Airbnb 的团队成员被问及他们的设计原则时，他们都能脱口而出，没有片刻犹豫，没有人表现出迟疑，没有人想要去翻看品牌手册里的原则内容。他们为什么能把原则记得这么牢固呢？因为他们的原则足够简单、实用、易于让人产生共鸣。

Airbnb 公司的四条设计原则（“统一”、“通用”、“风格化的”、“对话式的”）便深深地扎根于其设计过程之中。

每当设计一个新的组件时，我们都会确保它完全满足四条原则。如果我们没有这一套原则，便很难就各种问题达成一致意见。—-Airbnb 首席交互设计师

2. 怎么定义设计原则

每个团队建立其设计原则的方法都不尽相同：有的会召开几轮研讨会，有的可能会征求 CEO 或创意总监的意见。不过，无论采取哪种方式，都离不开下面几点：

从目的开始

TED 网站的主要目的可以用一句话来表述：“尽可能广泛地传播演讲。”因此，TED 网站的精神和价值观便是触及尽可能多的人群，降低使用门槛，让产品具有很高的兼容性和可访问性。这意味着优化性能和提升可访问性比添加华而不实的功能更重要，清晰的文案比大胆的设计更重要。

寻找共识

如果你仍处在定义设计原则的阶段，那么一个有效的方法便是让团队的一些人或所有人（取决于团队规模）各自回答关于设计原则的问题。例如，在他们眼里，什么样的设计对你们产品来说是好的设计？他们将如何用既实用又易于理解的五句话向团队的新成员解释设计原则？

面向正确的受众

如果搞不清楚设计原则是为谁写的，就一定会写出含糊不清的原则。有的小伙伴说我们领导就喜欢“美观”，那我们是不是把“美观”放在第一位？一定要搞清楚为谁而写。

3. 原则到模式

作为一个设计师，定义设计原则可能对你来说也许并不难， 但怎么把原则、品牌价值、组件相结合，怎么体现在设计模型中，这个我觉得是个挑战。

对于 TED 来说，信息的清晰比美观更重要。试图将每个演讲都提炼成一个短句可能很难，所以有时候标题可能很长。对标题进行截断是很容易的，但对他们来说，演讲信息的优先级是最高的。

因此，他们没有选择相对容易的标题截断方案，而是确保他们的设计模式可以容纳长的标题。

功能性模式（组件） 功能性模式是界面中有形的构件（表单）。它们的目的是让用户能够完成某种行为（填写表单），或者激励用户完成某种行为。

功能性模式可以很简单（标签⽂字、输⼊框、按钮 ），也可以组合成更复杂的模式（搜索组件）。

标签⽂字、输⼊框、和按钮

搜索组件由标签⽂字、输⼊框和按钮组成

1. 模式在变，行为不变

随着产品的发展，模式也在不断发展。包括风格，甚至功能和交互方式，都有变化。然而，它们的目的基本保持不变。

我们用顶部导航举例：

顶部导航是由 logo、搜索定位框、文字下拉框、图标功能按钮、通知按钮构成。导航条里的每一个模块都有自身的目的：搜索定位框告诉我们怎么快速找到想要的东西；导航带领我们浏览全局，指引我们到想去的地方；后面的的图标按钮让我们快速触达。

总的来看，这些模块都有一个共同的目的：引导用户快速浏览使用。随着产品的发展，模式也在不断发展。

例如，随着产品功能越来越多，可能会在导航上面新增设置功能，让用户自己去排布常用功能。又如，我们可能会对导航进行重新布局，把导航按模块分类，采用标签按页展示。把模块下面更多功能放到子页面左侧。虽然我们不断的对模式进行迭代，希望它更好的实现各自的目的或者说更有效地激励用户使用。

在设计开始阶段就阐明模式的目的，能避免在产品发展过程中做重复性的工作。

目的决定了其他的一切：模式的结构、内容及呈现。了解模式的目的，可以帮助我们设计和构建更加稳健的模块。如果说功能性模式是界面中的组件，那么感知性模式则更像是样式——描述组件是什么类型的，给人的感受是什么样的。下面，我们将探讨感知性模式。

感知性模式（视觉规范） 设想我们每个人各有一套房子，且每套房子都有以下这些家具：一张桌子、几把椅子、一张床和一个衣柜。不过，虽然都有这些家具，但每套房子给人的感觉截然不同：可能是因为家具的样式、材料、颜色、纹理不同，或者是床罩的布料、装饰品的样式、房间的布局和灯光，甚至是房间里播放的音乐不同。

上述这些属性便称作感知性模式，正是因为它们，可能你的房子就像是一个地中海风格的小窝，而我的房子就像是一个仓库。

而数字产品感知性模式的例子包括语气、排版、配色、布局、插图与图标样式、形状与纹理、间距、意象、交互或动画，以及这些要素在界面中的组合和使用的具体方式。

有时，人们将这样的特性视为产品的样式，或称作皮肤，也就是最外面的一层。但要想取得成效，它们必须不仅存在于表面，还必须存在于品牌的核心，并随着产品的发展而发展。只有这样，感知性模式才会成为让产品脱颖而出的强大力量。

1. 感知性模式的作用

同一领域的产品，哪怕具有相似的模块，它们给人的感觉也是不一样的。感知性模式通过界面传递品牌，并让品牌被人记住。

看下面的图片，你能认出它们是什么产品吗？

这两张图里面并没有太多的信息，你只能看到排版的样式、一些图形和颜色以及一些图标。然而这些视觉上的线索极具辨识度，所以你仍然很有可能看出它们分别属于什么产品（即钉钉和飞书）。

这些视觉元素通过有意识地反复使用，便形成了模式，这就是为什么我们可以在没有上下文的情况下认出它们。

2. 感知性模式让系统更为连贯

在模块化的系统中，想要做到视觉上的连贯统一可能是一件很棘手的事情。模块是由不同的人根据不同的目的创建的。而由于感知性模式是渗透到系统中各个部分的，因此它们可以将系统的不同部分连接起来。如果这种连接是有效的，那么用户就会感受到模块之间的统一性。

例如：飞书和腾讯的相同功能的组件感知模式是不一样的，所以两个公司设计体系不能混用。

3. 探索感知性模式

如果说功能性模块反映的是用户需要且想要的内容，那么感知性模式关注的则是他们直观的感受或行为。

在《网站情感化设计》一书中，作者提出了一个简单的方法，通过创建“设计角色”捕捉产品关键的个性品质。以下是一些有助于探索感知性模式的一些技巧。

情绪板

情绪板是探索不同视觉主题的绝佳工具。可以使用数字化的方式创建情绪版（Pinterest 或花瓣都是一种用于创建数字化情绪板的常用工具）。

如果你目前做的产品是需要体现：科技、质感、智能，那上图应该可以满足这些条件，你可以通过这张图与领导进行沟通达成一致，然后从中提炼出一些颜色、元素、材质，这样大方向就不会有太大问题，只需在细节上进行打磨。

拓展阅读：

情绪板经常被吐槽？简单4步帮你做出用得上的情绪板！ 几乎大部分 UI 设计师在作品集里都会放入“情绪板”这个模块，但是这个模块的利弊其实都很明显，大家都想通过展示情绪板来告诉面试官我是如何定义色彩和产品的视觉风格调性的，但是大部分设计其实在做界面之前都没有做过情绪板，而是反套的。

阅读文章 >

样式叠片

定义好了大致的方向之后，便可以使用样式叠片来更加细致地探究多种可能性。样式叠片的概念由 Samantha Warren 提出，他将其定义为“由字体、颜色等界面元素组成的能传递 Web 视觉品牌精髓的设计交付物。”

和情绪板一样，样式叠片可以为用户和产品团队提供有价值的讨论点，并呈现他们对特定设计方向的初始反应。

arco.design 首页这张图可以理解为就是样式叠片，把不同的组件样式叠片放在一起比较，有助于准确地找到设计方向。

4. 迭代与改进

当功能模式和感知模式建立完成后，我们将它们集成到产品的过程，它们还将进行演变。因为在真实的界面中，模块、交互、样式之间相互影响下会产生新的问题，这都是很正常的，是典型的迭代过程，这个过程会一直持续，直到设计语言最终形成。像 ant design、arco.design 应该都经历过这个过程，只是我们不知道而已，要不然也不需要花费几年的时间打磨后才发布出来。

平衡品牌性与一致性：

过分关注一致性也会扼杀品牌性。矛盾在于，让设计达到完美的一致性无法确保它依然具有很强的品牌性。有时，这样做反而会削弱品牌性——在一致性和统一性之间存在着细微的差别。

《英国公开大学》的创意总监曾说过：“当你专注于产品一致性的时候，打造产品质感的一些重要的细微之处就有可能会丢失。

发展感知性模式需要为设计师赋予打破常规的权力，鼓励设计师积极地探索更多的可能性。好的设计体系能在品牌的一致性和创造性表达之间取得平衡。

小规模试验：

后期如果发现样式无法满足，我们如何将新的样式引入设计体系呢？

可以先进行一些小规模的试验是一种相当有效的做法。如果某些元素的效果很好，我们就逐渐将它们集成到其他界面中去。例如，在学习者完成一个步骤时，纯功能性的切换按钮缺乏庆祝和成就的感觉。于是，我们用带有圆形样式、弹跳 动画以及勾号图标的按钮取代了先前的按钮。

虽然新的按钮样式受到了学习者们的好评，但它与设计体系的其他元素格格不入。后来，我们开始在网站的其他地方应用圆形图案、弹跳动画和勾号图标。如果不这样做，那么整个设计体系给人的感觉就是割裂的。

共享设计语言 数字产品都是由团队打造的。团队里的每个人都有各自的具体目标，都有各自的截止日期。这就意味着难免会出现草率加入的模式、重复或错误的模块。

我们能确保一个产品即便有多人协作，却仍能连贯、统一吗？ 只要我们团队对自己的设计体系及其运转方式有共同的理解，我们就能做到这一点。

这意味着我们遵循相同的指导原则，我们对品牌愿景的理解是一致的，我们在设计和前端架构方面有共享的方法，我们知道什么样的模式是最有效的，也知道它们的工作原理。换句话说，创建统一的设计体系需要共享设计语言。

许多伟大的建筑物（如圣家族大教堂、沙特尔大教堂、阿尔罕布拉宫）并不是由一位主建筑师在绘图板上费力地创造出来的，而是由一群人构建出来的，这群人对能将这些建筑物变为现实的设计模式有着深刻的共识。

“几组人可以通过遵循一个共同的模式语言，当场构思出他 们的大型公共建筑，就好像他们共有一个心灵。”

——克里斯托弗 • 亚历山大，《建筑的永恒之道》

我们可以用类似的想法构建数字产品。设计语言可以让人们创建出具有整体感的产品，哪怕不同的人负责不同的部分也是如此。

1. 为模式命名

如果一个界面上的元素没有恰当的名称、团队里人尽皆知的名。那么该元素就没有在你的设计体系中成为有效的单元。一旦你给一个物件命了名，你就塑造了它的未来。

例如，如果你给的是一个表现型的名称，那么它将来就会受到样式的限制：“蓝色按钮”只能是蓝色。

例如，如果你给的是一个状态属性的名称：“幽灵按钮”，它的特点是：按钮形状的透明按钮，但有细实线的边框，常用在有色背景上。

2. 将团队融入设计语言

仅仅完成命名还不足以建立共享的设计语言。整个团队都应该 沉浸到设计语言中去，让它无所不在。

让设计模式变得可见：

如果有条件，可以在墙上开辟一块专门展示设计体系的空间，将它称作“模式墙”

让你的设计体系更加开放，人们会感觉你欢迎他们的加入，欢迎他们提出问题甚至做出贡献。

引用事物的名称：

所有语言的共同特点是，只有不停地使用才能让它保持活力。

它需要成为日常对话的一部分：

这就是为什么需要有意识地使用约定好的名称去引用这些模式很重要——无论这个名称听起来有多奇怪。将设计体系作为入职培训的一部分将设计体系的内容作为入职培训的一部分，新员工了解设计体系就会更加容易。当新员工入职时，他们将了解到设计指南是如何创建出来的，这样他们就可以理解为什么以及如何做出决策。在 《英国公开大学》 内部，他们创建了一个入门性质的线上课程，其中有一章专门对模式库进行了介绍，并包含了 一些小测验和小课程，这样可以帮助新员工更好的理解设计体系。

定期组织设计体系会议：

每个人都讨厌开会。但是，如果你希望每个人都跟得上设计体系的发展，那么组织召开设计体系的会议就是必要的。这是所有设计师和开发人员共同专注于设计体系的时间。一开始，可以每周举行一次，当团队找到节奏之后，可以每两周举行一 次。团队可以利用例会时间就产品的总体模式（如图标、排版）得出一致意见。同时，这也是分享新模块并讨论其目的、 用途及可能遇到的问题的好机会。

设计体系不是一夜之间构建出来的，而是通过日常的实践逐渐形成的。

谢谢观看！