1. 真正去做了之后，你才会发现没你想象中那么简单！

我们在听知识点的时候，看别人咔咔几下就把效果做出来了，听着也很简单，感觉很容易嘛。

我们很有可能就陷在这个错误的思维里，知识点听着很容易理解，是因为别人拆解的很透彻，看别人做效果做的很轻松，是因为别人已经私下做了不下于5遍的练习，以上这些和我们是没有任何关系的，真正能和自己产生关系的，只有听了知识点后去上手操作，我们才会发现，原来真的没有那么简单。

所以才会有以下这么多的版本：

所以，做起来的时候发现，挺不容易的。

2. 大氛围海报，主体素材的底子很重要

在做大氛围的时候，背景和元素很重要，需要有一定的空间感，除此之外，其实主体素材也很关键，我们一定要选择一些底子比较好的素材，比如素材本身最好带有一定的明暗关系、暗部最好能看到一些细节，不然全都是死黑死黑的，那就不好了。

所以我们可以看一下，我最开始找的素材和最后的素材：

很明显，后者会更加立体饱满，调整起来会相对容易一些。

3. 画面的光源一定要统一

最开始我找的这张素材，其实光源是在左前方，但是我的背景光源是在后侧偏上的位置，结果就导致画面看起来不是很和谐：

左侧光很大，上面的光也很大，我们虽然可以把两个光源都留下来，但是一定要统一好，分清主次和强弱，比如我定的顶光是主光源，左测是试辅光源，在后面的调整之后：

就可以很明显的分清楚光源主次了，素材光源和背景就很好的统一了。

4. 画面千万别曝光

画面很怕曝光，一旦曝光，就会有很多纯白色，纯白色一多，就看不到细节，细节一旦缺失，画面就不高级了。

我们看前面的版本，很多地方都曝光了：

这也是因为素材的限制，因为对比如果调整的太过，原版素材高亮的地方就会曝光过度。

但我们也有办法弥补，其实很多太白的地方，我们完全可以去填充一些内容，比如我们下面这张图，地方2本来是曝光过度的，后来我用仿制图章工具，把地方1的内容给复制过来了：

这样就好了很多。

切记，画面别曝光过度哦！

5. 选择的字体，一定要符合画面气质

我们不可能所有的画面都去修字体，但即使选择默认字体，也一定要选择符合画面气质的，这个是必须的。

比如我这个画面是相对比较男性的、战斗热血的，所以我们选字体尽量要方正机械一点，千万不能随便整上去一个，比如最开始我选的是这个字体：

最开始没太注意，后来发现还是很违和的，因为这个字体有很多曲线，配合起来有点难受，所以最后我才选了这个字体：

要比那个和谐很多。

这个英文字体叫：Zilap Orion Personal Use Futuristic，文末有获取方式。

总结

好了，以上就是今天分享的内容啦，最后说下，为什么我一个UI设计师，要去练视觉项的东西，其实所有和美术、视觉相关的东西，基础都是一样的，我们很多ui设计师，都很缺少对于视觉基础的理解，透视、空间、配色、构成等等，我只是在不断练习基础，毕竟我的基础太过薄弱了。

不足之处还有很多，继续加油。

转载请注明：学UI网》第一次做这种氛围海报，挺难的！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

色彩趋势 

轻量渐变
首先值得一说的是轻量渐变，轻量渐变属于弱渐变范畴，其特点为渐变色彩邻近，幅度轻柔，节奏缓慢，融合感和细腻感较强。

因为轻量渐变多会选择那些明度高、饱和度低的邻近色，所以能很好地表达出设计中的“呼吸感”。这种呼吸感和通透感给人的感觉非常清新，所以在2022年应该还会持续地流行下去。

高饱和度撞色
高饱和度色系的应用在2020年就已经成为了重要趋势之一，因为高饱和度的色彩更能吸引人的注意力，从而有效的吸引用户的视觉落点。

可尽管“吸睛”对品牌来说非常重要，但我们在使用时仍需克制，因为过高饱和度的搭配，往往会给页面的一体性造成一定程度上的背离，且非常容易带来视觉疲劳。

所以设计师在使用这类颜色时，也通常会对其饱和度和明度进行一定程度的降低，让颜色“丰盈却不拥挤”，从而保证我们视觉上的舒适性。

另外，从高饱和的UI案例中我们也能够看到，在搭配色彩时，选用大量的邻近色营造氛围，再用一两个对比色产生冲突，就会使得整个页面轻重相平衡，带来不错的视觉体验。

糖果色
糖果色以粉色、粉蓝色、粉绿色、粉黄色、明艳紫、柠檬黄、宝石蓝和芥末绿等甜蜜的女性色彩为主色调，它能带来一种纤细,柔软的感觉。所以哪怕一个画面中出现过多的色彩，也不会让人觉得很冲突和背离！

图形趋势 

emoji表情
表情符号在现如今是一个超越文本并且能够得到广泛认知、跨越文化和多领域的一种视觉语言，在文字段落的末尾加上 Emoji 能够更好传达情绪，这使得表情符号不仅在网页、文本甚至在海报中作为主视觉，都能带来非常不错的氛围感。

在2021年，emoji不仅被广泛应用起来，还被广泛3D化。加上阴影效果的emoji，其情绪的传达也变得更加丰富。

2022，emoji的表达依旧会持续进行，只是其形式会更加丰富，例如这种“假3D”效果等

3D化
说到了emoji的3D表达，就不得不说2021最为流行的一个设计趋势，那就是大量的平面内容通过增加了阴影的效果而被立体的表达了出来。

像我们熟悉的苹果应用程序icon等，其设计细节都因此变得更加的丰富而有层次。

而2022，3D设计趋势也会通过不断的发展进一步明确了其自身的地位。它能够为设计师提供无限的可能性，为任何你能想象的东西提供更多可发挥的空间。

2022年我们也会看到更多关于2D和3D之间完美结合的设计，像下图的案例，手绘线条的手指和球体表情之间的互动，不仅让整个页面显得更加有趣生动，还能使2D3D这两种设计方式的优点都能得到更充分的展现。

玻璃拟态
同样，在2021年超级流行的毛玻璃效果，我们也会在2022年看见更加丰富的表达~

比如最近在dribble上很火的这组效果图，就是在平面的基础上，将毛玻璃的效果运用在3D的物体上，让整体的虚实感更加的生动，也会给设计增加一点与众不同的活力。

除此以外，我们还可以看到的，这一趋势已经明显转移到了玻璃和水晶质感上，而且以令人难以置信的用立体拟真度将图形设计提升到了一个全新的高度。所以，2022我们也将看到更多与全息和3D趋势相辅相成的透明质感和逼真的玻璃背景等元素的设计。

几何抽象
完全不同于写实的3D风格，2022年的设计风格可能也会开始往抽象发展。用几何图形来表达意象，用色彩传达情感。少了繁琐的装饰，用更简洁有力的方式去传达设计理念。

当分形形状与色彩完美结合时，就可以创建出极具吸引力的视觉效果。

结语 

的确，每年的设计趋势似乎总有相似的地方，2022年的设计风格也是在2021的基础上进行演变和发展的。所以更重要的是，我们要学会持续地积累这些设计素材，并不断地审视自己的设计作品，学会将他人的设计思路结合在自己的设计灵感上，才能成为一个一直拥有输出能力的设计师~

原文地址：CSDN

作者：摹客

转载请注明：学UI网》2022最新盘点，这些设计趋势今年会怎样？

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

色彩规范 

色彩规范一般包含品牌色、辅助色和中性色，在B端产品中，颜色除了迎来传达品牌调性，更多的用来传达一些提示或警告，通过不同的颜色给予用户信息反馈，不同的状态运用不同的颜色展示，比如：

绿色通常代表成功、已发送、已签到等状态；

红色通常代表失败、未发布、未签到等状态。

另外，通过颜色可以对内容进行分层级展示，提高用户阅读信息的效率。

品牌主色

一套产品只有一个品牌主色，是界面中出现最多的颜色。在需要用色强调而且没有其他要求时，一般都会选择主色。

网络上很多人说B端产品大部分用蓝色或者偏冷色系作为主色，可以带给用户一种严肃冷静的感觉，但在工作日常中，很多企业会要求颜色必须是公司的品牌色。

例如当前任职的公司品牌色是饱和度较高的紫色，那么在定主色时，我们就不能跳脱这个色彩范围，在这样的情况下，我们可以考虑将品牌色饱和度降低或者用其他暗色系的颜色进行搭配，从而在观感上尽量显得不是那么刺眼，降低用户眼睛疲劳度。

辅助色

用于提示其他场景，比如：成功、失败、警告、无效等，辅助色主要是帮助用户高效获得信息。

中性色

常用于文本、背景、边框、分割线等。

字体规范 

在B端的设计上，文字的字体，字重，字号，行号、颜色用来区分界面信息的层级关系。

字体

中文字体一般用苹方体、思源黑体、微软雅黑，英文字体一般为Helvetica Neue、思源黑体、微软雅黑。

字号

系统中字体大小为：12px、14px、16px、18px、20px、24px、26px、28px、30px、36px…

在开发中，浏览器最小字体一般为12px，注意设计中不可以低于最小字体设计。

行高

行高上，可以采用行高=文字大小+8px，例如14px字体，则14px+8px=22px，则行高为22px。

字重

通常采用regular、medium、semibold三个字重。

颜色

目前最常用的字体颜色是#333333、#666666、#999999，区分标题、正文、辅助文字，具体可根据设计进行调节。

图标规范 

在B端设计中，图标要简洁易懂，用来帮助用户更快导航，提高用户使用产品的效率。

在绘制完图标后，可以存储成svg方式上传至Iconfont，这样方便和开发进行对接，也可以打造自己的图标库，在后续的项目中，方便直接运用或修改。

布局栅格 

B端系统的主流分辨率主要为1920、1440和1366，个别系统存在1280的显示设备，通过适配布局来完成在不同分辨率下展示内容。

一般选用24栅格布局，不同栅格结构中栅格区域也会有所不同，固定区域会存在于响应式网格之外，不随着页面的变化而改变大小。

组件规范 

B端组件库的建立，常用的组件包括按钮组件、面包屑、导航菜单、分页、下拉控件、上下左右滑条、日期选择框、单选复选框、树形选择、标签页、输入框、表单、上传样式、气泡卡片、表格列表、警告提示、弹窗等。

按钮

按钮的五种样式：主按钮、默认按钮、虚线按钮、文本按钮、链接按钮。

按钮的四种状态：常规、悬停、选中、禁用。

面包屑

显示当前页面在系统层级结构中的位置，并能向上返回，用于系统拥有超过两层以上的层级结构，同时可以告诉用户当前页面在哪里，并提供导航功能。

导航菜单

导航菜单为页面和功能提供导航的菜单功能，用户依赖导航在各个页面中进行跳转。

分页

采用分页的形式分隔长列表数据，每次只加载一个页面。当加载/渲染所有数据将花费很多时间时可采用分页。

下拉菜单

当选项过多时，使用下拉菜单展示并选择内容。

时间日期选择器

用于选择或输入日期，分为固定时间点&范围、任意时间点&范围、选择日/月/年范围。

选择框

用于在一组备选项中进行选择，包括单选框和多选框。

标签页

通过切换不同的选项标签，查看不同的页面内容。

输入框

需要注意输入框在输入前、输入中、输入后三种不同的状态。

上传

通过点击或拖拽上传文件。

表格

用于展示多条结构类似数据，可对数据进行排序、筛选、对比或其他自定义操作。

警告提示

用于页面中展示重要的提示信息。警告提示一般分为四个状态：成功、信息注释、警告、错误(失败)。

弹窗

用于消息提示、成功提示、错误提示、询问信息、填写表单。

最后 

希望通过这套B端设计规范，能让你对B端系统有一个全面的了解。在之后的文章中，设计夹会持续分享这些设计规范的具体用法。

例如那么多的B端组件，实际上每个组件都值得单独用一篇文章来仔细研究如何使用。

如果你想学习更多关于「B端设计」的知识，记得及时关注文章推送哦~

最后设计夹分享一套简约风格样机模型供大伙包装作品时使用，这套样机包含手机端、Pad端、手表端、PC端等多种尺寸，有PSD、Al、XD三种格式，样机已打包好, 大家后台回复关键词即可领取。

领取方式：关注公众号，后台回复【样机】获取源文件

慢慢来比较快，希望对你有所帮助！

原文地址：Clip设计夹（公众号）

作者：Fix-

转载请注明：学UI网》从设计实战中，总结了这份B端产品设计规范

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

我们为什么要使用GSM模型

常规工作中，需求往往由PM发起，UE团队到底如何跟PM、FE等团队成员协同，达成目标共识，是我们值得讨论的。

因此建立一套科学的模型，通过对目标的设定来倒推过程，结合定性和定量研究，与项目组就目标可以达成共识，并且更加准确的反应出产品目标中的用户体验质量，这套模型就是GSM模型。

GSM模型的简介与定义

“GSM”是Google提出的一种自上而下度量用户行为的方法，通常用于衡量产品/项目目标的实现程度。通过对目标的设定来倒推过程，精准设定指标体系的一种量化研究方法。适用于产品设计中的各个角色。

• 目标：需要解决的问题，通过对产品（项目）目标拆解推导出用户体验目标，体验目标辅助产品目标达成；
• 信号：设计目标实现后所产生出的现象，设计目标是信号的必要条件；
• 指标：是对用户现象的量化，也就是信号所得出的可衡量的数据化现象。

GSM模型的使用场景

GSM模型可适用于产品设计中的各个角色，对交互设计师尤为重要，交互设计师作为连接产品、用户、设计的中间一环，不断在业务和体验之间博弈，寻找平衡点。

通过GSM模型对产品目标进行分析，结合业务目标与用户需求，找到改进机会点，在设计中帮我们斧正设计思路，对方案不断优化，上线后进行方案效果回收。

GSM模型带来的价值

综上所述，GSM模型基于项目目标，找出设计目标。并且可以辨别设计的优良。

GSM模型的具体实施步骤

通过对目标的设定来倒推过程，并精准设定指标体系。

| step 1 识别并明确目标（Goal）

业务目标、用户目标、设计目标是什么？

用户要完成什么任务？我们希望他们按照什么路线走？希望他们执行什么操作？

这里以手机百度APP智能小程序业务端——创建小程序表单项目改版为例，提高表单审核通过率是整个项目目标，通过拆分项目，设计目标为表单填写更快速和表单填写更准确。通过确定设计目标继续推到用户表现。

| step 2 推导目标对应的表现（Signal）

什么用户行为/态度指示了目标达成？什么样的感受与目标失败/成功相关？

从目标——信号可以是一对多的关系，根据用 户行为在不同的行为阶段会有不同的信号表现，以用户不同阶段观测用户的不同行为表现。

• 进入 —— 通过各种途径进入页面
• 发现 —— 在该页面中浏览、查找自己所需要的信息
• 辨别 —— 然后通过图片、标题等内容以及设计形式来识别有效信息
• 行动 —— 找到后用户想了解详情，点击链接进入

这里还以手机百度APP智能小程序业务端——创建小程序表单项目改版为例，将设计目标转化为用户行为。

| step 3 找出关键的数据指标（Metric）

依照用户的行为表现，观测对应的数据指标，通过这些可量化、可衡量的数据指标进行数据分析并指导下一步的优化迭代。

1. 进入 —— 作为用户进入的页面，在这一步经常发生的问题是退出，往往会产生两个对应的指标

• a. 作为用户在网站或APP的着陆页，用户离开为跳出
• b. 非网站或APP的着陆页，用户离开为退出

往往，在这一行为中“跳出”指标可以衡量页面内容传达与用户目的匹配程度，是否符合用户的心理模型，这也是绝大多数网站首页最重要的数据指标之一。

2. 发现 —— 用户来到页面中都要先浏览的过程

在这一步，设计师关注的问题是页面中的用户视觉流，关键信息能否被用户快速锁定。

关于识别性的指标，归纳出3点来进行衡量：

• a.鼠标悬停时间
• b.后台报错率
• c.人均点击次数（适用特殊控件，如筛选器等）

4. 行动 —— 用户在站内内容的点击

在首页的分流数据中，作为设计师主要关注两个指标：

a.不同内容的点击占比

b.其后续路径中的目标转化质量

再次回到我们的工作案例中，根据用户行为表现拆分成数据指标。

综上所示，通过表单可视化、精准引导、组件升级的方式，完成项目与设计目标，最终改版成功。

结语

GSM模型是一种综合数据验证模型，在使用过程中可以结合头脑风暴、市场调研、可行性测试等方式共同使用。

1.我们的思考方式

如果想要快速有效的提升我们的思考能力，那么首先需要了解，我们平时在遇到问题时是如何思考的。

比如，领导叫你去负责一个产品的设计语言定义，这时候，出现最多的可能会有以下两种情况（完全不知道的已经排除）：

第一种情况：脑袋里面有一些不完整的零散知识，也不知道怎么组织运用。

第二种情况：脑袋里面有完整的零散知识，并且能组织成一套完整的方法论，还能很好的推动实现。

这两种最根本的区别是第二种知识结构已经有了明确的解决方案，第一种非常零散的知识。

可能有人说，第二种都是很资深的设计师了，肯定能做出来，其实大部分人都可以，只要你的知识图书馆里面有相关可组织起来的知识。

任何人都是这样的，在我们在遇到问题时，一般都是从知识图书馆中去搜索解决策略。

这时候，假如你搜索范围有限，知识图书馆存量较少，那么此时就会很难继续下去，没有足够的知识来支撑你完成下一步行动。相反，如果你的知识图书馆非常丰富，涉及到多个领域，那么你给出的解决方案就会更系统，更完整，更具创新性。

说到这里，那么要如何才能拥有丰富的知识图书馆，下面我们来看看，如何在日常工作学习中积累，不断壮大我们的知识图书馆。

2.如何丰富知识图书馆

我们解决任何问题时候，其实都在调用我们的知识图书馆里面的知识。有人可能会说是想象力，其实想象力都是基于已有的庞大知识图书馆，然后从里面挑选出来各种排列组合出来的新解决方案。

越是知识图书馆丰富的人，他们给出的解决方案就会越多且丰富，创新度也会很高。

这就是为何，我们身边有些设计师面对一个问题，能有多种解法，甚至有些设计师给出的解法会让你很感叹为何他能这么厉害。

那么如何在短时间丰富强化我们知识图书馆？最有效且最快的方式有以下几种：

1.需要定期，定计划的丰富你专业领域的知识，比如你是一名UI设计师，那么这个领域的知识你都需要了解，并且把最常用的知识多熟练，最好能掌握这个领域的几个牛逼的方法论。

2.找一本书籍，这个书籍能覆盖这个领域知识基本介绍80%以上知识，那么你就知道这个领域知识架构，然后逐步去填充，形成你的知识网络。

3.找个可靠的导师，行业专家，跟着练，提升也最快。

保持学习态度，不断训练和丰富我们知识图书馆，这样我们在遇到问题时候，就可以轻松从里面调取来应用，你的思维也会更开窍。

创新思考怎么来的？就是将你的庞大知识图书馆里面的知识，重新拿出来排列组合，就是创新。

如果想要自己在短时间有明显的提高，那么开始定个目标去逐步实现。

3.写在最后

今天我们说了一个很重要的关键词：“知识图书馆”，我们在生活中解决任何问题都是在不断调用知识图书馆里面存储的知识。

如果你现在还是遇到问题，脑袋一片空白，不知道怎么解决，那并不是因为你笨，而是因为你的 知识图书馆的存量太少。没关系，就现在，下个决心去丰富。

分享一句话给大家：你要相信看似不起波澜的日复一日，会突然在某一天让人看到坚持的意义。

案例一

 

案例二

加上简单的文字编排，一张很有品牌形象的海报就做出来了。

案例三

构成网格的关键要素：版心、页边距、栏和栏间距

页边距与版心

页边距是指版面上下左右留“白”的范围。

版心是指页边距所包裹的区域。目的是为了使内容看上去处于安全范围内，也符合人的视觉习惯

注：所有元素都应该在版心内编排，但并不是绝对不能超出版心，在已有规则下，我们可以将部分重要性低的元素放置到版心之外，从而为画面带来动感与张力

栏和栏间距：

“栏”就是放置文字或图片模块的范围，“栏间距”就是栏与栏之间的距离。

在建立好“栏”的标准范围之后，主观将元素和内容进行占比分配，根据实际需要跨栏应用，让排版更具灵活性。

在PS中绘制

在PS默认的单位为“像素”，而我们做的海报、画册等印刷品使用的单位为“毫米”。所以要先执行【编辑】—【首选项】—【单位与标尺】，把“标尺”单位改为“毫米”。

再执行【视图】—【新建参考线版面】”，分别设置列、行数、装订线（栏间距）、边距。如本次我们要设置的是5X8，栏间距为5毫米、边距为10毫米的网格：

新建好的网格如下：（快捷键Ctrl+；可以显示或隐藏网格）

在AI中绘制

在AI中没有绘制参考线的命令，可以先使用“矩形工具”，绘制矩形边框作为版心。

打开【对象】-【路径】-【分割为网格】。点击“预览”，行的数量选择8，栏的数量选择5，间距选择5，点击确定后按“ctrl+5”,转成参考线。

新建好的网格如下：（快捷键Ctrl+；可以显示或隐藏网格）

在ID中绘制

ID为专业的图文排版软件，在进行书籍画册排版时，一般只设置竖向的分栏。在新建文件时，选择“边距和分栏”。

在对话框中分别设置边距、栏间距和栏数即可：

然后执行【版面】—【创建参考线】，

分别设置行数、栏数、栏间距：

设置好的网格如下：（按W键可以隐藏或显示网格）

设计时设置网格是为了帮助你让页面中元素布局更加规范且统一，易于用户理解，灵活运用网格不仅不会限制编排形式，还会使版面变得更加清晰、生动、统一、有条理。

原文地址：艺海拾贝Design（公众号）

作者：邓海贝

转载请注明：学UI网》如何在PS、AI、ID中快速绘制“网格”

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

漫画作品资源图往往承载了这个故事的内容、情感关系、又或者是人物性格等…，而设计者的任务就是去制造这个画面赋予它意义使用户能够迅速的得到想要传达的信息以及情感。

我们所有行为的背后其实都是情感的驱动，情感塑造了我们的思维感受，以及回应整个世界的方式。所以当我们的设计激发了用户的回忆以及想象力，也就触发了情感链接。

视觉设计师余肉圆围绕【什么是情感的传递者】，【传递情感的4个要点】以及【如何利用情感传递使画面更有故事性】展开了分享。

她认为设计师不单单需要的是设计技能的提升，更重要的是要捕捉事物本身的情感。再去传递给大家，这才是设计师需要做的。

还向我们展示了一个尝试突破的完整案例-猎爱误杀，探索他们是如何主导视觉走向。

漫画logo设计不单单是字体设计，往往还要结合故事剧情去设计，快看设计师宋宇潇从设计背景、设计原则、品类概览、女频品类分析设计思路、男频品类分析设计思路5个方面去分享他做漫画字形设计的思路和经验。

最后MEUX的资深设计师庆爷介绍如何运用环境、信息和行为、三步掌握运营设计理论体系，结合自身参与的设计案例，希望能帮助设计师轻松掌握运营的底层逻辑，彻底解决视觉风格与活动的关系等问题。

快看的交流在2个小时激烈讨论中结束，同学们都意犹未尽，表示开拓了自己的思路。

原文地址：百度MEUX（公众号）

作者：爱分享交流的

转载请注明：学UI网》对话设计圆桌会-快看漫画

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

一、理解品牌对产品的重要性

品牌是运营中非常重要的部分，产品是品牌的生存基础，而品牌是产品的认知升华，它代表了产品在用户心中的形象，同时影响着用户自身认知世界的构建。

好看视频是一个为用户提供海量优质短视频内容的专业聚合平台。我们希望通过好看品牌运营升级强化产品调性，提升产品气质。于是针对“如何找到适合好看视频的品牌道路”进行了全面的思考和分析。

二、好看视频品牌化的目标

通过对好看视频视觉语言的探索与应用，形成统一品牌感知，深化用户与产品的情感链接。向用户传递产品理念，为产品建立优质形象。

三、好看视频品牌设计框架

在设计初期，我们对同类型产品与用户类型进行了分析，现在很多品牌的活动视觉不只是单纯的画面展示，都开始有更加明确的设计背景和理念，但品牌不是千篇一律的，需要突出产品的特色，明确自身定位。

好看视频在升级后主打“知识传播”的内容，我们从这个角度出发，将“轻松有收获”作为贯穿产品的设计理念，思考如何通过设计来传达品牌感知。

品牌不是单一样式的体现，包含了多种表现形式。在这个过程中，需要重点考虑通过哪几个维度来支撑整个品牌体系。我们梳理了以知识传播为中心观点，逻辑统一、情感渗透、个性风格、表现手法和知识内容五维一心的传播框架，运用以超级符号提取、辅助图形重构、字体、色彩、排版、动效等设计手段，将产品理念传递给用户，建立好看视频在用户心中的优质视频聚合平台形象。

四、好看视频品牌升级

1、好看视频品牌升级海报

品牌海报是好看视频品牌升级中最重要的环节之一，我们为好看视频九大垂类设计了九个相对应的概念场景。每个场景的中心主体均与品牌logo形状强关联，强化超级符号在用户群中的记忆度，扩大品牌影响力。

我们对九大垂类进行了发散性思考，确认了“以好看视频logo符号为主体，通过材质、元素的结合表现垂类感受”的设计方向，带着这样的思考收集了每个垂类对应的一些情绪图。

在测试阶段，以美妆为例，可以看出元素的罗列或许更加直接，但缺乏了想象力，形式上偏向“电商”。经过多次的尝试，最终的设计逻辑我们决定以材质为主要突破口，柔软的皮毛、细腻的膏体等具有想象空间的质感会更加触动人的感官。

我们通过质感与元素的组合，形成中心主体画面。在字体设计上，为了适配多垂类海报的应用及后续调整，在版权字库中选择了方正摩登体作为本次设计的通用字体。背景结合趣味贴纸强调轻松有收获的品牌调性。

按照同样的思路完成了9张海报设计，我们以品牌logo作为容器承载不同的真实质感，结合拼贴+故障风的排版，体现品牌调性的同时，打破固有思维，注重细节和质感带来的沉浸式视觉体验。

2、好看视频品牌升级概念片

在完成9张垂类海报的同时，我们还规划为本次品牌升级做了一支品牌概念片，多维度对好看视频品牌扩大影响力。

如何在保持景别不变的前提下，让整条片子富有趣味性，是本次设计的最大难点。我们通过拆解优秀的动态作品，总结出了一个贯穿全片的动态逻辑。通过“元素动势、摄像机动势、太阳光动势”的相互配合，形成强关联且具备故事性的衔接转场。

例如，利用旅游垂类的摄像机旋转，承接美妆场景。用睫毛刷的动势，衔接杠铃动势的同时，在中间直接加入剪辑的气口。

将评测与人文垂类设定为正反桌面，通过翻转进行镜头切换。设定笔筒与咖啡袋同样倒下的动画，加入太阳光方向的延续，同时，将摄像机调配为速率相接。

除了转场，每个场景的细节动画都给予了充分的表达。通过多种动态手法的组合，紧密衔接了每一个场景，保证强化品牌符号感知的同时，提高了视频的动态细节。

本次品牌设计在发布会、万象大会中都得到了很好的反馈，我们的设计影响力在内外都有了非常大的提升，为后续设计树立了标杆。

总结

在品牌运营越来越重要的今天，成体系的设计打法，不仅规范化了设计侧的执行流程，也统一了整体的品牌感知，使得向用户传递产品理念变得更加直观，向外建立优质形象扩大影响力也变得更加简单。

转载请注明：学UI网》好看视频品牌升级运营设计

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

百度文库作为行业内的头部品牌持续多年，把创新和开拓为己任，如今开始在品牌IP的领域上探索。市场上有很多著名的高辨识度IP，比如迪士尼的米老鼠、唐老鸭，即时通讯软件LINE的LINEFRIENDS等等。这些IP帮助品牌提高了知名度，同时也为品牌带来了巨额利润，可以说IP形象是品牌的一种资产。

IP形象作为具象化的产物，能够帮助文库在用户心中建立深刻的品牌形象，扩展文库品牌线上线下多场景的影响力。当IP形象能够做到足够惹人喜爱时，它自身就会有超越品牌的个性魅力，从而反哺品牌，为文库吸引更多用户，驱动营销玩法的升级。

设计目标推演

竞品分析

剖析竞品IP设计底层逻辑，找到切入点成为抓手，建立框架，理清思路后深入设计。

IP形象要与品牌承接，必须契合品牌定位。风格表达要符合时代潮流趋势与消费者的审美视觉契合。

IP形象往往承载着企业对品牌价值观的表达，同时衍生出IP形象本身的性格特点。

好的IP形象本身就带有一定的故事性，这样便于用户了解品牌的价值观。后期还可以进行二次创作，发展IP形象的周边产品，比如手办盲盒等，形成一定的文化氛围。

结论：进一步剖析文库品牌，细化需求。从四点着手支撑设计：

1. 文库价值观：让每个人平等的提升自我;

2. 完善IP形象性格特点；

3. 设定完整的背景故事；

4. 选择适合的风格表达。

四个方面相互呼应，互为支撑。促使IP形象设定有的放矢。

形象概念设定

通过探索各种可能性，进行逐个衡量、推演讨论，初步选方向，主推其一，按照设计思路进行不断调整和优化。

概念阐释：首先利用圆润的造型营造亲和力，用文库拼音首字母”W”的造型结合鬃毛设计，在视觉锤的角度上来说剪影的识别度非常有优势，同时也有山或笔架山的造型，寓意书山有路，勇攀高峰。

产品端渗透

01/会员LOGO

02/会员身份卡、挂件

运营活动应用

01/会员买赠系列活动开屏

02/七夕告白指南系列漫画

03/重点垂类个性化形象

04/表情包

线下推广应用

01/IP周边文具礼盒

02/IP软胶手办、毛绒玩具

总结

各互联网品牌都有各自的成熟IP。百度文库同样重视IP形象的设计和布局，其作为一个重要的品牌概念，是科技和文化的集合体。作为文库的“代言人”，IP形象可以帮助品牌在产品、市场业务链中，发挥其自身独特的商业价值、增强情感归属和拓展应用场景。在用户体验和文化输出方面给予用户更多的温度和关怀。

原文地址：百度MEUX（公众号）

作者：文娱平台用户体验

转载请注明：学UI网》百度文库品牌IP形象设计