前言概述

百度教育“好诗连连”是一款轻松有趣又别具中国古典美韵的学习平台，在2022年先后荣获设计界三项国际知名大奖：德国红点品牌与传达设计奖、美国Muse Creative Awards 金奖、韩国K-design 设计奖。本文分享设计团队是如何通过精湛的多维设计打造诗词视听盛宴，让用户感受到传承千年的诗词魅力，唤起用户对古典文化的热爱。

一、设计主旨：沉浸式国风视听盛宴，传承诗词文化之美一  唯美意境 诗词悟得到 · 打造沉浸式国风视听盛宴

王勃《滕王阁序》中千古名句 “落霞与孤鹜齐飞，秋水共长天一色” ，勾勒出一幅宁静致远的画面让人动容，中华古诗词之美，含蓄而生动。我们在设计上营造唯美意境，体现诗词的韵味之美。通过提取中国传统文化中的古典色彩及传统纹样、琵琶与古筝的音韵，将传统元素与现代审美融合，重组诗词新国风设计语言，还原诗词意境，构建全新【寓教于乐】的游戏化学习体验，赋予诗词新的文化魅力。

1.视觉语言体系

1.1 从东方古典色中提炼色板

我们从壁画丹青、紫禁红墙中汲取色彩灵感，采用低饱和度、柔和而优雅的配色，使东方色彩美学的悠然、自然与诗意自洽融合；同时还采用山水碧绿中的翠涛、醽醁，红墙中的海天霞、十样锦，壁画中的青鸾、檀唇，构成整个画面中的古典色彩秩序。

1.2  提炼中国风视觉语言符号，形意结合，传情达意

通过借形法、取意法、形意结合法提炼国风元素与图腾、传统文化中寓意吉祥的纹样，传达美好寓意；东方古老的凤凰展翅高飞，指代源远流长的中华文化；乌纱帽与宫殿寓意学业精进、金榜题名；寄情山水与出淤泥而不染的荷花，更为文人雅士所钟爱。

1.3  确立绘画手法

运用类工笔的绘画手法，白描勾线，结合笔墨丹青的晕染，来营造诗词如画卷般的唯美意境。

2. 听觉语言

古代诗歌最早是用来吟唱，它注重声律、音韵、平仄、对仗，讲究韵律和谐、抑扬顿挫；白居易《琵琶行》中描写 “转轴拨弦三两声，未成曲调先有情”，沈约《咏筝》“秦筝吐绝调，玉柱扬清曲” 中描写筝曲抑扬自如，清妙悠扬；在音效的选择上，采用古筝、琵琶的音色来营造古风意境，音符配合点击、滑动、任务完成等反馈，让人沉浸于诗词的氛围中。

二  趣味学习 诗词背得快 · 搭建趣味玩法及激励机制

趣味化游戏机制，基于心流理论设计，解决了诗词学习体验中用户常见的枯燥、挫败的负面体验，构成了诗词知识获取、学习和背诵的完整学习机制。设计了诗词连线、诗词对战、成语填空三种多元游戏模式，加强诗词背诵和相关知识的扎实记忆，让学习更快更有趣。

传承古典诗词文化之美

通过百度教育好诗连连，我们让沉睡在纸质典籍中，以诗词为代表的文化遗产焕发时代光彩与蓬勃生机，鼓励用户学习和感受传承千年的诗词魅力，重新唤起当代年轻用户对传统诗词文化的热爱和理解，也使便捷轻松地获得诗词知识乐趣成为可能。

作者：文教互娱用户体验

转载请注明：学UI网》打造诗词视听盛宴，传承古典文化之美 | 百度教育

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

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

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

用户体验设计首先字面意思是用户+体验。

01 座舱内的用户除了驾驶员还要考虑非驾驶员， 非驾驶员也有多种角色：老人/儿童/青年。

02 体验：用户发生使用操作的感受。

但实际用户体验一定是脱离不了场景的，场景是用户发生行为的一个大环境。

03 考虑场景的时候除了考虑的当下现实场景还有未来场景。

场景案例：充电全屏展示充电信息

场景案例：导航交互体验，先展开详细信息，然后再收起信息

场景案例：蔚来的360泊车系统开启时不能唤醒nomi

而且产品的研发和功能创新，用户的体验都是依据场景体系建立的。所以HMI设计过程当中，场景体系化的建立尤为重要。

二、智能座舱的场景体系化搭建

1、搭建流程

01 场景发掘：竞品分析、用户画像定位、产品定位、用户旅程图

场景发掘首先要把场景和使用的用户做定位，结合实际项目进行用户画像定位，确定场景主题，寻找到目标用户进行实车访谈和拍摄。

02 场景数据细化：网络数据、用户访谈、实车测评数据、常见高频数据

这一步主要是把用户访谈收集上来的数据，进行拆分和细化，然后筛选出有价值的数据进行录入。

用户访谈数据录入到数据库里，产品经理和设计师会针对收集上来的用户反馈，进行痛点/和爽点的挖掘。提出需求解决方案。

03 场景应用设计：原型设计、界面设计

基于场景的应用设计会分为两个步骤、一个是原型设计、一个界面设计、原型设计时我们更多是组内评估、找专家来提供指导性意见，到了界面设计时候除了专家评审、可以做出demo给用户进行测试来获得反馈。

04 场景走查：还原场景

在设计方案产出完成之后，给用户还原到我们发掘的场景去进行走查，根据用户旅程图查看有没有遗漏的用户场景和不同的用户反馈。

2、搭建工具

整个智能座舱的场景体系化搭建需要几个工具，竞品分析、用户画像定位、产品定位、用户旅程图。

用户调研方法有很多，我们需要掌握（调查问卷、用户画像、用户体验地图、用户访谈、焦点小组、）

今天核心介绍使用频率最高的三种用研方法。

2.1 用户旅程图

关注用户在驾驶阶段的行为、方式、心情、痛点、期待。

关键步骤：

① 设定场景、目标、期望（用户画像）

② 确定行为路径

③ 建立核心地图

④ 包装地图

⑤ 绘制故事板

2.2 可用性测试

可用性测试已经成为获得用户反馈的流行手段，主要因为他们上手快，能快速反应出问题。

关键步骤：

① 明确测试目的

② 问卷框架的设计

③ 投放调研问卷

④ 组织测试

⑤ 整理输出结论

2.3 5W+1H法则

5W+1H 是选定的项目、工序或操作，可以从原因(Why)、对象(What)、地点(Where)、人员(Who）、时间（When）、方法(How)等六个面进行思考。

① 原因—立项背景？

② 对象—什么功能？

③ 地点— 什么场景下？

④ 人员–驾驶员？/非驾驶员？

⑤ 时间–什么时机？哪个流程之后？

⑥ 如何–什么方式操作？

三、细化座舱用户体验的三阶段

1、用户体验的三阶段

体验的时间性有三个主要组成成分，及熟悉程度、功能依赖和情感依赖。

1.1 初识体验：

我们在产品使用初期的阶段，都会对产品有个使用预期。例如期望产品能提供一个好的体验，或者怕产生不好的体验。

1.2 使用体验：

使用体验分为两个阶段：使用产品初期和使用产品深度期

进入到车内试驾或者试乘，试驾员和销售除了会让用户体验车机的基础功能外，主要介绍的就是和竞品车型的竞争功能。

产品深度体验期的时候，长期的可用性变得更加重要，而不是最初的易学性。从而产品的实用性成为影响我们整体评估判断的主要因素。

1.3 获得体验：

最后，当我们接受了产品，在我们的日程生活中它参与了我们的社交活动。成为了生活当中的固定解决问题的工具，这个阶段产品体验就具有可识别性了。

2、体验的三条路线

2.1 体验线路是感官线

我们现在座舱内的交互感官有、触感、听感、视觉、嗅觉、语音。用户在人机交互的时候第一时间获得直观感受。

2.2 体验线路是情感线

情感线是诺曼强调感情在塑造体验中的重要性。比如灯光秀、宠物模式、和拟人化的汽车助手。带给用户都是情感上的满足。这些情感构成了与汽车的首次互动体验。

2.3 体验线路的流畅

就像C端和B端一样，我们交互体验的线路效率和流畅程度，能给用户增强驾驶乐趣。或者最大限度减少信息元素的干扰，让驾驶员沉浸在当下。

3、把握用户体验的多样性

3.1 个人价值观的差异

首先个人的因素，因为我们成长的环境不同，造成了对价值观的差异，有的人喜欢刺激新颖的产品，有的人喜欢乏善可陈的产品。

3.2 产品属性问题

第二可能是产品属性的问题，游戏产品带给用户就是不断的快感刺激，工具类型的产品用户使用流程流畅会更好。

3.3 跟随时间线的体重心变化

用户的使用体验对于时间的变化，通过用户旅程图，他们对产品的关注点会产生变化，例如用户刚开始对产品互动中更关注新的功能和刺激的体验。但在使用过一段时间后他们可能不会再关注他的新颖程度，更关注产品的实用性和效率。所以需要我们在不同的使用阶段重新帮助用户提升体验。

原文地址：七酱设计笔记

转载请注明：学UI网》基于智能座舱场景的用户体验设计

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

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

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

一、什么是“有驾在现场”

有驾是百度旗下汽车信息与服务平台，累计用户超5.3亿，致力于为用户提供真实、可靠的看选买车服务，以及为车企和经销商提供从品牌到效果的一站式互联网营销解决方案。

车展对有驾来说是一个流量爆发的大事件，2021年广州车展期间有驾品牌全网曝光累计6.3亿次，创历史新高。而【有驾在现场】是百度有驾历年车展系列活动沉淀下来的品牌IP，已经成为活动固定的品牌标识。

二、借势大事件，打造车展品牌全案

借势车展的关注度与影响力，我们想要通过分析调研总结，对本次车展进行视觉定调，建立品牌识别体系，沉淀专属有驾车展活动的品牌符号和印记；进行线上线下联合推广来打造有驾车展品牌全案，提升有驾的品牌影响力；优化活动体验来为平台进行引流，让用户对有驾产品有更明确的认知。

同时由于车展项目涉及跨部门合作，我们希望可以通过车展品牌全案，统一不同分工输出的设计物料视觉一致性，以达到提质增效的目的。

以打造品牌全案为出发点，我们梳理了以下项目计划。

同时，通过有驾用户画像分析，建立用户标签，分析用户属性及偏好，以更好的触达用户。数据显示有驾APP大部分用户为常驻中高线城市的年轻男性，经历着数字化信息时代的便利，同时也受到更好的教育和各界多元的文化影响，更大胆更容易被新的东西所吸引。

三、分析项目现状总结优化点

根据过往车展项目分析，总结发现存在品牌识别度较弱且没有统一规范、品牌统一性较弱导致用户认知成本较高等问题。

四、提炼品牌关键词

根据用户画像及现状分析，明确业务需求，通过脑暴的形式罗列品牌关键词，基于品牌DNA对有驾车展进行视觉升级需挖掘符合核心用户的语境语言和视觉偏好，提炼出品牌关键词，根据关键词规范可延续的品牌元素，打造清晰的品牌全案以更清晰的指导后续视觉设计工作。

五、视觉定调

根据关键词确定了以赛博朋克风格为视觉基调，通过三维建模搭建北京地标建筑场景，搭配大胆的配色和新颖的元素样式打造潮流个性且具有未来感的视觉画面，匹配车展品牌的创新理念。

同时，在活动玩法方面，通过优化活动玩法，多条件激励用户给予用户沉浸式的体验。

六、建立品牌体系

确定基础视觉调性后，我们通过形色质构来规范和输出有驾车展品牌vi规范，建立有驾车展品牌体系，以提升视觉的产出效率，确保线上线下视觉输出的一致性。

七、品牌LOGO

【有驾在现场】是有驾多年延续下来的品牌基因，本次车展也将继续夯实品牌资产，进行优化升级传递品牌调性。

由于旧版的字体圆角等设计样式相对柔和，不能准确表现本次车展视觉调性。为了传递有驾车展的潮酷、未来感，设计上将旧版文字加粗，圆角调整为直角，并进行一定的倾斜处理，使字体展现更加果断硬朗；同时，我们将部分笔画进行连接，让字体充满动感或速度感；最终的字型效果运用有驾品牌蓝绿色光效以更好的与画面结合。

八、色彩尝试

由于整体风格参考赛博朋克，配色方面基于有驾品牌色进行延展，辅助色起到平衡主色的冲击效果、活跃视觉，释放潮流激情，突出重点模块；元素上尝试渐变色丰富元素样式。

九、组件化通用元素

通过组件化通用元素，不同物料可以快速复用，节约设计成本，解决整个活动的视觉一致性，同时可以沉淀设计资产。

十、车展主KV

根据关键词【未来感】【年轻化】分析适合有驾的设计风格和调性，通过三维建模的画面表现形式，构建充满科技感的赛博朋克画面，打造潮流科技的有驾车展基础场景。

主视觉场景设定为高楼耸立的公路上，有驾跑车向“有驾在现场”北京车展活动现场飞驰。充满速度感的跑车、霓虹灯牌、高楼大厦色调和质感的碰撞，传递出一种直观的科技感，引领新时代年轻用户和有驾一起驶向未来。

根据上述的内容进行车展主kv的场景设定，输出了草图方案。

整个场景围绕“有驾在现场”进行设计，融合车展相关元素，渗透品牌标识。

采用3D和2D相结合的形式，用C4D进行场景搭建，OC渲染器进行灯光材质的渲染，反复修改调整场景布局、元素等，最终输出三维设计图后进行PS后期，输出最终的主视觉。

根据以上内容，输出了对应的车展VI规范。

十一、车展专题页

根据主KV及VI规范进行专题页的延展，部分内容复用过往车展框架模块。

新增了导航栏设计，便于用户快速跳转到感兴趣的内容模块，导航图标大胆创新尝试渐变色融合的配色形式，让扁平的图标有更加丰富的呈现。在保证阅读效果的前提下，标题样式、页面元素及配色上更加潮酷。

十二、集卡分百万 引流活动

过往集卡活动不仅与产品、车展契合度高，并且收益明显，因此本次北京车展活动将复用、优化集卡类活动，让用户沉浸式集卡，从而提升用户活跃及量级。

在玩法方面，本次集卡活动延续过往活动做任务得车卡的主玩法，优化活动体验，新增了合成稀有卡可参与大转盘抽奖的玩法以激励用户集卡，同时设立了车展大众日，在当天进入活动的用户可以获得现金红包，以此来激励用户回流，丰富活动玩法。

集车卡活动的主视觉元素及配色是依据vi规范，保证整体品牌调性的统一；普通靓车卡背景延续主视觉背景，稀有卡尝试不同配色和场景凸显其特殊性。

除了专题页和集卡活动，线上还包括端内社区活动设计，整体视觉调性都与我们输出的车展品牌vi保持统一。

十三、倒计时海报

为了给车展开幕造势，我们尝试复用主KV的三维建筑模型，将倒计时1、2、3与不同视角、不同配色的场景相结合，整体风格和车展主视觉保持一致，输出了三张倒计时海报，丰富了整个项目的宣传内容。

整个车展项目除了线上运营活动、造势海报，还有线下展会宣传物料及其他第三方输出的设计物料，整体视觉调性都是基于我们输出的车展品牌VI进行视觉延展，保持统一性的同时，又各自有不同的视觉传播效果。

十四、总结

【有驾在现场】作为百度有驾车展品牌活动，我们通过未来感、年轻化、体验感三个维度来塑造有驾车展系列活动的品牌调性，搭建了基础风格，建设三维赛博朋克高品质主视觉，视觉元素细节惊喜感打磨，通过优化活动玩法进行引流，沉淀出新的大事件视觉设计思路，打造了有驾车展品牌设计全案。

未来我们的思考不仅仅只局限在视觉的表现上，还要继续挖掘品牌系列化活动的延续性与独特性，同时更要通过合理的情感互动建立和用户的链接，为品牌长线发展提供更多价值。

作者：设计中台

转载请注明：学UI网》有驾在现场 车展品牌全案设计【百度】

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

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

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

临摹是新手学习任何技能都需要经历的阶段，学字体设计自然也不例外。即你要去收集一些优秀的字体设计作品，然后照着它们来临摹。

很多人会瞧不上临摹，认为照着参考一模一样做谁都会，事实上真要做起来，很多人都临摹不好，而且临摹的方法也不对。那么，如何正确地临摹呢？

1、不要像抠图一样，用钢笔工具直接沿着参考的外轮廓描摹。

而是要照着参考画出文字中的主要笔画，诸如：横、竖、撇、捺、点、提、勾等，然后，用这些笔画照着参考的样子一笔一笔把文字搭建出来。

2、如果遇到相同的笔划，不要重新画。

而应该把已有的笔画直接复制过去，有时可能需要做一点简单的变化，这么做可以最大程度上保证笔画的统一性。

3、刚开始可以直接在参考的基础上用笔画来搭建文字。

就好似描摹一样，与参考一一对应，等熟练之后可以自行绘制笔画，通过视觉来确定笔画的粗细、长短、结构、摆放的位置等等。

举个例子，如果要临摹下图的字体设计，我们可以先把它的笔划画出来，如果抓不住笔划的特点，或者线条画不流畅，可以在原参考上把笔划描摹出来。

然后，照着参考在字框里用笔画把文字组合出来。

最后，再仔细观察文字笔划的尺寸和位置是否正确，尽量做到与参考一模一样。

经过一段时间的临摹练习，你不仅可以更熟练地使用钢笔工具，同时也能掌握一些字体设计的风格、笔画特征、字体设计的流程等等。

二、通过参考，举一反三

当临摹做得已经很熟练以后，就可以开始第二步的练习了，即遵照参考中字体设计的风格、特点，设计自己想要的其他文字。其实在实际工作中、很多设计师也会用这种方式来设计字体。想要做好这项练习，首先你要做的是对参考作品进行深度的分析。

诸如对字体类型、字形、字体风格、重心位置、中宫松紧、笔画粗细、笔画结构、笔画的对齐关系、有哪些特殊的处理技巧等特点进行分析。

比如我想根据下图的字体来设计文字：起来嗨。那么我就先要对参考中的字体设计进行分析：

该字体为无衬线体，风格简约而现代，笔划并没有讲究严格的对齐，甚至刻意做了错位处理，各文字的字面大小也不统一，呈现出灵活多变的感觉、笔划较粗，横竖笔划的粗细一样、横笔划右端有类似直角三角形的衬线、部分笔划交汇处会把横笔划做断开处理、点笔划和个别捺笔划被设计成圆点、口部首被设计成圆圈等等。

把参考的设计特点分析出来以后，紧接着需要把我们想设计的文字，用一个常规的字体呈现出来，由于参考中的字体设计是无衬线体，所以我们可以选择黑体作为字体设计的观察对象，看看该文字中有哪些笔划可以直接挪用参考中的，有哪些则需要自己来设计。

接下来就要着手画草图了，需要注意的是，参考中的文字做了整体垂直向上倾斜，在设计字体的时候如果直接设计成倾斜状态，那么很多笔划处理起来会不方便，所以最好先设计成水平状态的，等确认无误后再做倾斜扭曲。

另外，在画草图的时候要多做尝试，对于原参考中没有的笔画，我们要从现有的笔画中找到规律，这些部分的设计没有绝对的标准，关键是要好看、要协调、要与整体的风格相符。比如“起”字下边的“人”笔划，可以借鉴参考中“辶”的处理方式。

草图画好后就可以去电脑上做最后的执行了，在执行的过程中需要注意以下几点：

1、草图不是标准，只是执行的思路。

所以在执行的过程中仍可以进行调整、修改。

2、一边设计一边规范。

如果你不是在专业的创作本上绘制的草图，那么你的草图通常是很不严谨的，那么在电脑上操作的时候就要边设计边规范，比如统一笔划的粗细和结构、统一笔划断开部分的间距、注意某些笔划之间的对齐关系等等。

3、与参考对比。

字体初步设计完以后，要把其与参考放在一起进行比较，看看还有没有处理不到位、看起来不够舒服的地方，水平状态调整完以后，再把文字按照参考的样子往右上方做倾斜处理，然后继续观察以及做最后的完善。

三、原创字体设计

如果你能熟练地做到通过参考举一反三，那么你的字体设计能力已经初步形成，接下来就可以做原创了。做原创字体设计时我们要注意以下几点：

1、做原创也可以找参考。

只不过不要完全按着一个参考来做，我们可以结合好几个参考，也可以在参考的基础上加入自己的想法、做出一些改变等等。

2、设计的流程

A.根据要设计的文字、找到符合设计需求的参考。比如我需要设计的文字是：奇遇惊喜，并想设计成有种浪漫、古风的感觉。所以我找了下图的字体来做参考(造字工房逸锋体)，该字体字形修长、结合了宋体和黑体的特性，笔划横细数粗但没有衬线，现代而优雅。

B.加入自己的想法。用常规的的字库字体把要设计的文字呈现出来，与参考放在一起进行构思。参考中的字体虽然现代而优雅、但是作为字库字体，独特性自然会有所欠缺，另外笔画还是略过复杂，没有古风和浪漫的感觉，所以我想把笔画继续做一些简化，并加入祥云图形。

C.画草图。

可以先画文字的骨骼部分，以确定文字的基本架构，文字的骨骼决定了文字的基本气质，比如高矮胖瘦、中宫松紧、重心高低、笔画走势等等，这也是设计师可以大做文章的地方，很多优秀的字体，在骨骼上就与普通字体有着很大的差异。这里我把文字的骨架设计得比参考更为修长。

骨骼画好以后，再添加字体的肉身，即笔形，笔形决定了笔划的粗细、端点、衬线、笔划交汇处的处理等细节效果，这些部分的变化也非常多，设计师可以根据文字本身的特点和参考进行多种尝试。

作为字体设计师，了解一些不同笔形的处理技法也很有必要。

▲ 部分横笔画的笔形表现。

D.把草图导入到设计软件中执行。草图画好以后就可以去电脑上执行了，执行的步骤和注意事项与“举一反三”里提到的差不多。

3、注意文字的统一性。

在设计字体时，要注意整体的统一性，要让人感觉到这是一套字体，所以原则上来说，每个字的字面大小、重心位置、中宫、相同的笔画等等，都要统一起来，当然，不包括某些为了效果灵活而刻意作出的一些特殊处理。

临摹、举一反三、原创，简单的三步就能帮你从一个新手变成一个熟手，其实除了字体设计，很多其他类型的设计同样是这个道理。当然，最重要的是你要能走出第一步，先做起来，然后要坚持下去。

作者：葱爷

转载请注明：学UI网》新手学习字体设计的高效三步法

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

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

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

可以看出来第一版和最终版的效果对比是非常大的，第一版给人感觉如同一个半成品，场景轻飘飘的，颜色上几乎没有什么明暗对比，太过统一没有分清处层次，而且细节不够丰富。

通过第一版我们可以看出可以通过一下几个方面去做层次方面的优化：

一、增加主体细节

1.刻画熊熊主体

2.优化鸭子的造型

二、加强明暗对比

1.加强主体和椅子的明暗对比

2.加强背景和前景的明暗对比

一.增加主体细节

1、刻画熊熊主体

之前的熊熊作为主体本身刻画的细节层次和背景的刻画程度近似，我们要把主体变得有看点才能分清前后的关系，可以在熊的五官和服装上进一步添加一些细节。

例如给熊的五官添加表情，把墨镜添加一些装饰元素，让视觉可以集中在熊的五官上。

同样我们还可以在服装上添加一些花纹的装饰让整个熊熊的主体看起来更加细致。

同时要注意熊的姿势是头部在前，胳膊在后，可以在刻画的时候加入一些投影，加深胳膊的暗部，区分一下头部和胳膊的层级关系。

2、优化鸭子的造型

鸭子的造型我们把游泳圈直接改成了小黄鸭漂浮物，游泳圈中间的镂空让视觉看起来不够紧凑，同时我们也优化了鸭子的眼睛和嘴巴，让鸭子看起来更精致一些。

然后去加强头部和鸭子身体的前后区分，加入投影，让它更加立体。

二.加强明暗对比

我们可以把整个小场景的明暗做一个区分，最亮的是熊，然后是鸭子，然后是地毯，最后是椅子，椅子作为地毯和熊之间的一个暗部，可以让画面有一个明暗的节奏，同时和熊的主体形成对比。

接下来要做的就是加强暗部和亮部之间的一个对比，体现整个空间的前后关系。

1、加强主体和椅子的明暗对比

我们把熊和椅子的明暗区分的更加明确一些，把椅子的饱和度和色相进行紫色调和低饱和度的一个调整，用对比色来拉开两个物体的区别，加深熊的整个暗部，交代熊在床上清晰的投影。

2.加强背景和前景的明暗对比

优化以后发现背景的植物和星星比较跳 我们去进一步加深背景让背景往后退，同时把地毯的颜色提亮一些让整个后景有一个区分。

然后我们去微调一下椅子的颜色让椅子的颜色不要那么脏，把地毯颜色也调的明亮一些，形成对比，就到了咱们的第二版画面：

第二版画面再往后优化就是细节的调整和进一步加强明暗的区分。

我们从以下几个方面再去进一步区分画面：

一、明暗的进一步区分

1.背景区分

2.椅子自身的明暗区分

3.椅子和地毯的区分

二、添加正确的投影

三、添加环境光

一．明暗的进一步区分

1、背景区分

背景明暗的区分需要把植物部分去压暗，同时把比较跳的星星稍微压下去一些，做一个颜色上的过渡，加地毯的反光，让星星的颜色退到后面去，然后给植物加上床的部分投影，空间关系更加明确一些。

2、椅子自身的明暗区分

下一步我们要对椅子进行优化，目前的椅子没有区分开明暗面，反而暗部的反光太强，亮部的颜色饱和度又很低，导致立体度出现了反向效果。

我们要做的是把椅子面向光的面亮起来，背阴面暗下去，而不是亮部暗，暗部亮。

然后我们又发现，现在椅子的颜色对比度不够，并且椅子腿上透视有一些问题。

我们继续去把椅子的颜色调暗，同时要在亮部去加入椅子受光的颜色变化，我们可以加入一些偏亮的纯色，暗部做一些小的反光的变化，让椅子更加有光泽度。

注意这里椅子腿也是有前后关系所以靠后的椅子腿要更加的暗一些，受光也少一些，同时给椅子腿上加入床的一个阴影。

但这还不够我们要进一步去加强整个画面的对比。

3、椅子和地毯的区分

我们接着去把地毯的颜色提亮，同时把亮部光照的地方做一个暖色光照的处理，加深床的投影把投影交代的更加清晰一些，让有颜色对比的同时也要有上下关系的对比。

二、添加明确的投影

在整个过程中投影的进一步明确是增强一个立体和层级关系的关键，我们以鸭子、床、以及熊在床上的投影做一个前后的对比。我们要注意的有三点：

1、统一投影的方向

每个物体上都要有明暗的一个对比，如鸭子之前几乎看不到暗面和投影，我们要去分析事物和鸭子的一个前后关系，再去添加植物后面的投影，让鸭子看起来更加立体。

2、投影落地的形态

注意落地点，不要让影子浮在半空中，就像之前床的影子和星星的影子过于飘，整个物体看起来都没有落地。

三、添加环境光

1、减掉整体的内发光

虽然在这种轻拟物画风上有很多的物体有一些轮廓光和反光，但并不是统一直接去加一个内发光，我们要重点做的是通过环境光来加强对比，整个的内发光会让物体失去明暗。

拿鸭子举例子，过强的光源会让鸭子显得很平。

我们可以加强暗部，在暗部做一些微弱的反光，在亮部加入一点轮廓光。让整体更加的饱满立体。

2、根据不同的物体添加环境光

熊熊主要的环境光是床的紫色反光，我们在添加的时候注意不要把床反光的颜色过于后厚重或者没有颜色倾向。

调整好一个环境光后我们再去整个添加熊环境光。这样整个画面的优化就完成了。

我们来最后看一下第二版和第三版的对比效果

整个画面明暗对比更强，而且颜色上更加通透，光影和谐统一，也具有更好的完整度。

本次文章可以吸收的知识点有很多，希望大家可以和我一起在总结中收获知识，取得进步，一个小场景塑造的立体有层次涉及到的点方方面面都会有，我们要注意绘制时多去做比较，同时保证整体明暗的对比效果和细节的刻画调整。

希望大家以后在绘制轻拟物场景插画上道路不迷茫，一起去打造令人眼前一亮的画面吧！

作者：牙牙

转载请注明：学UI网》好难啊，一遇到场景插画，我就废了！

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

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

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

作者：程鑫

转载请注明：学UI网》中后台产品的产研协同提效调研

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

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

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

这个叫做太阳花的logo，一经面世就引起了社会强烈关注，除了传说中的设计费用打破历史纪录以外，该设计方案也确实让人眼前一亮，完全颠覆了英国石油以往的logo。

该花朵采用对称构图，从里到外一共分三层，颜色从白色到黄色再到绿色，呈现出绽放的姿态，寓意生机勃勃，永不凋落。这个诞生于2000年的logo，至今看来依然时尚、美丽。

二、索爱logo

2001年索尼与爱立信联姻，于是诞生了索尼爱立信这个品牌，新的logo也在这个时候应运而生，该logo一反主流的扁平风，采用了立体的渐变风，在当时可谓是独树一帜，十分惊艳，从logo上我们就能感受到强烈的动感和科技感。当时的设计需求中有两个两个关键点：“流动的形象”和“另一个自我”，流动的形象是指logo本身要具有强烈的动感，让人感觉它是活的；另一个自我指的是要有个性，这两点都在这个logo上得到了体现。

三、墨尔本城市会徽

墨尔本是澳大利亚的第二大城市，该logo以墨尔本的英文Melbourne的首字母“M”为原型，图形内众多几何色块相比穿插，配合从蓝色到绿色的渐变色，展现了该城市活力、新潮、多元、现代化、重视生态的城市形象。

该logo的延展图形也很惊艳，展现了该logo极高的延展性。

四、美国航空logo

该logo更新于2013年，在过往形象的基础上做了重大突破，图形由老鹰、品牌首字母A、飞机尾翼，以及星星组成，颜色来源美国国旗中的红、白、蓝，倾斜的尾翼图形极具动感和速度感，简单而明了，又没有盲目跟风扁平化，渐变以及立体效果并没有让该logo显得老气，反而增添了一份品质感。

▲ 美国航空过往logo形象

五、beats耳机logo

该品牌以售卖耳机为主，所以在logo设计上，设计师采用品牌首字母“b”与红色圆形结合，得到一个类似人在戴着耳机听音乐的图形，简单而直接，让人一看就懂且印象深刻，其中字母b的下半部分被抽象地处理成一个正圆，与外面的大圆形成同心圆关系，所以在视觉上非常和谐、美观。

六、北京申奥标志

该个logo由知名设计师陈绍华设计，图形为采用具有中国特色的书法笔刷组合成打太极的人形，而且笔刷刚好为五笔，分别使用奥运五环的颜色，代表奥运，该logo把动感和中国文化展现得淋漓尽致，且简单、独特，一经面世，好评如潮，最终也为北京成功申奥贡献了一份力量。

七、广州亚运会标志

该logo由设计师张强设计，图形由广州极具代表性的建筑：五羊雕像与火炬结合而成，五羊雕像的灵感则来源于古老的五羊传说，象征着丰收、福瑞，以及广州人民知恩图报、勤俭朴实的品质，火炬象征着奥运以及热情，最下边的四个色块形似跑道，象征着运动和竞技 。

八、杭州G20峰会logo

该logo的图形部分为一座拱桥与水中倒影组合在一起的形态，桥是杭州很有代表性的元素，同时也象征了开放、包容、沟通和连接。桥的图形是由20根同等粗细的线条组成，体现了参会的20个国家地位平等。另外，该logo在形式和排版上也是个性鲜明，logo的轮廓比较狭长，文字叠加在图形上，使其融为一体，而不是像大多数logo那样把文字与图形完全区分开。整个logo从形式到配色都给人一种典雅、现代的感觉，广受大家的喜爱。

九、蔚来汽车logo

蔚来是一家智能电动车企业，该logo的设计理念为：blue  sky coming，图形设计上主要呈现了三个元素：上面的弧形代表天空，象征着未来、开放与目标；下面的箭头图形代表路面，象征着前进与行动，地面与天空的交界处是地平线，象征着无尽的远方。整个logo图形在一个正圆的基础上设计，简单而美观，细节的雕琢也十分到位，个人觉得是国产汽车品牌logo设计中少有的亮眼之作。

十、广州城市会徽

该logo由曹雪设计，logo的外形为广州新时代的标志建筑：广州塔。该图形由左边的弧形色块和右边的弧形线条叠加组合而成，二者刚好又是广州二字，同时我们在该logo中还能看到帆船和飞鸟的影子，寓意广州海纳百川、生机勃勃，整个logo的形态给人一种现代、时尚、优雅的感觉，该logo一经公布，引起了广泛关注，也收获了众多好

评。

当然，21世纪优秀的logo还有非常多，但要说比较知名且好评较多的，我对这10个logo的印象比较深，纵观这些logo设计，我们不难发现，他们几乎都具备这么几个特点：简单、独特、调性与品牌和行业吻合、符合时代审美等。知名品牌的logo设计具有非常的框架，设计师所面临的压力也是巨大的，能够有如此出品和口碑属实不易。

作者：黑马青年

转载请注明：学UI网》2022 UI 设计作品集

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

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

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

像情窦初开的你。

渐变的粉色是成长的开始，

折痕的肌理是爱情到来时内心的波澜。

爱心做出半透明的玻璃模糊质感，

尘封已久的内心已怦然心动。

紫色是浪漫，

像奔赴热恋的你。

当我们一起仰望星空，

不小心碰到你的手时，我感受到你的心跳。

当我们一起仰望星空，这一次我想走进的你的心扉，

建立属于我们的桥梁，在你内心的最深处直到永远。

红色是挚爱，

像真诚而付出的你。

醒目的红色真诚而又直接，

我们的心也将靠的更近。

模糊的爱心肌理是

我们试探彼此距离的那点小心机。

看似朦胧实则清晰的情感在这一刻印记在我们心中。

蓝色是冷静，

像理想到现实的你

红色的爱心旋涡久久不能离去，陷入的太深，

无法自拔，找不到自己的方向。

直到看清现实的你，慢慢的像沙漏一样，

选择和自己过去的他和解。

当这些色彩融合在一起时，就出现了爱情最真实的滋味，

朦胧又梦幻，真实而脆弱。

只有理解色彩给予的感受，

朦胧又梦幻，真实而脆弱。

做出来的设计就才会有真实的情感体会。

作者：修先森

转载请注明：学UI网》色彩的感知

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

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

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

1、CTA按钮

号召性按钮(CTA)是界面中的交互元素，用来执行特定的操作，例如联系我们、订阅信息、购买产品或加入购物车等。

CTA按钮作为执行重要操作的按钮，在设计上应该更醒目，能让用户快速分辨出来。

2、文字按钮

文字按钮是以可点击的文字作为按钮，文字底部没有图形背景。文字按钮的操作面积小，突出程度低，多用于不太重要的操作。

3、下拉按钮

在有的网站导航栏中，单击选项会出现下拉列表，展示更多二级选项，方便用户可以查看并选择更多的操作。

4、描边按钮

描边按钮是背景透明效果的按钮，用于辅助操作。当界面中有多个按钮时，使用描边按钮有助于划分视觉层次结构，高优先级的按钮使用填充效果，辅助按钮使用描边按钮。

5\汉堡按钮

汉堡按钮隐藏在菜单栏中，当我们点击时，菜单将展开并显示所有的选项。汉堡按钮广泛应用于web和移动应用中。

6、悬浮按钮

悬浮按钮(FAB)位于界面的最高层级，优先级高，通常为圆形，在界面中执行最常见的操作。

FAB按钮常用于创建新项目或者发表内容等操作，FAB的位置应确保按钮具有较高的可访问性和可视性。在有的产品中，点击FAB会出现更多的操作，将常用的操作聚集到一个按钮中。

二、有效的按钮设计实践

1、让按钮看起来可点击

当用户与界面交互时，他们应该快速明白什么是可点击，什么是不可点击的。作为设计师，我们不会希望用户花很长的时间来理解他们看到的元素，因为用户花的时间越长，产品的可用性就越差。

为了确保用户能够明确知道按钮是否可点击，我们可以使用用户熟悉的按钮样式，例如方形边框的填充按钮、圆角填充按钮、带有阴影的填充按钮、描边按钮等。

其中最为常见和熟悉的设计是带阴影的彩色填充按钮，当用户看到这样的按钮时，他们会立刻明白这是一个可点击的按钮。

2、考虑按钮在界面中的位置

按钮的位置很重要。作为设计师，我们不希望用户花时间寻找按钮，而是应该将按钮放在用户期望的位置上，方便用户去操作。

对于按钮在界面中的位置，首先要了解F型和Z型的浏览模式。

F型浏览模式

在F型模式中，用户通过水平移动的方式读取界面上方的内容，构成F的顶部栏。然后用户向下移动页面，再次水平移动，再以垂直移动的方式浏览左侧的内容，形成F型的主干。当界面中有大量数据时，通常会遵循这样的浏览模式。

Z型浏览模式

Z型浏览模式模仿了人眼阅读的路径——从左到右，从上到下。

用户首先从左上角到右上角扫描，形成Z的顶部条。然后向左下角扫描，最后再向右看，形成Z型的浏览动线。

3、标注按钮的作用

按钮应该始终有清晰的注释，展示点击时将执行的操作。过于通用或者模糊的注释可能会让用户感到困惑。

4、正确调整按钮大小

按钮的大小代表了元素优先级的高级。尺寸较大的按钮表示更重要的操作。

当在一个界面中存在多个操作按钮时，为了让最重要的按钮看起来更突出，可以考虑让这个按钮比其他按钮的尺寸更大，并且利用颜色和对比，让这个最重要的按钮更吸引视线。

5、始终提供反馈

每当用户点击按钮时，他们期望界面能有提示或者反馈。在激活按钮时，按钮应该改变状态，给用户一个反馈，便于用户知道点击按钮发生了什么。

最后

以上总结了设计中按钮的6种类型以及5种改进按钮设计的方法，希望通过这些内容能让大家对按钮设计更重视，对已了解的按钮设计知识查缺补漏！

慢慢来比较快，如觉得有帮助，

作者： Clippp

转载请注明：学UI网》如何改进UI中的按钮设计，试试这5个方法！

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

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

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