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

有驾是百度旗下汽车信息与服务平台，累计用户超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咨询、用户体验公司、软件界面设计公司

虽然作品集包装也很重要，可以对我们的作品输出进行扬长避短，起到非常好的衬托作用。但是面试官考核的不只是包装而已，作品本身的能力至关重要，喧宾夺主也容易适得其反。

我们不能过度局限于作品包装，而忽略作品自身的修炼，需要投入时间精力细化每一个界面，确保它们都是自己正常专业水平之上的输出。所以说提到作品集很多设计师总是纠结于不知道怎么开始，以为难倒自己的是包装，其实先把单个的界面优化好就是第一步。要让自己的每一个界面都经得起考验，而不是凑数量，这样包装才能锦上添花。

二、老作品新用场过于偷懒

遇到过很多设计师在制作作品集时，往年的作品直接拿来凑数，导致作品呈现质量参差不齐。在职场 1-3 年的时间段，项目作品数量有限实属正常，往年的作品包装到作品集中也是没问题的，只是老作品新用场不能过于偷懒。

设计趋势和大众的审美观念都是在发生变化的，前几年的作品也许在当时觉得还不错，但是时过境迁之后不一定入得了当下的审美标准。针对老作品我们需要结合当下的设计趋势和审美标准进行评估，如果这个作品连自己都打动不了，想要打动面试官那是很难的。我们要结合新的趋势和规范进行二次梳理，重新优化调整每一个界面，确保它们都是符合当下设计标准的，然后再结合作品集新的规范重新包装，这样才能保持整体作品集的质量。

想要更好的结果就不要偷懒，此时的应付换来的就是行业的抛弃，多一点行动多一分设想。

三、追赶样机趋势却忽略规范

在包装作品集的过程中，相信大家都会经常使用样机模型，以此来真实的还原作品呈现。随着样机设备的不断更新交替，样机模型也是经常变化，保持最新样机模型也能提高作品集的趋势感。

大家都知道追赶样机趋势，但是却不调整作品的规范，导致作品的组件规范和样机的不匹配。看似觉得无伤大雅，实则对于讲究细节的面试官来说，会认为这是你的专业态度问题。如果连设计规范都不能把控好，也不注重设计细节，那么如何相信你的专业能力呢！

追赶样机趋势是毋庸置疑的，不过也要结合样机模型的组件趋势，老作品要结合新趋势重新调整，不要忽略这些细节的表现。

四、作品不可缺少反复自查

在优化单个界面的时候，不要忽略细节的校对，特别是不要出现低级错误。比如图文不搭、错别字、信息表达出错、元素替代遗漏、流程不通、信息逻辑不对等等，不要在看似简单的细节上面出错，反复自查是不可缺少的环节。

特别是对于自己 0-1 参与的项目，一定要对每个环节都比较熟悉，不能只是停留在视觉表层。检查自己设计上面的问题，也要复盘全案设计的思路，这样面试官在考核的时候才会应对自如。如果细节都容易被忽略，设计态度的体现将会大打折扣，也容易让人觉得你做事比较马虎。

五、工作输出单一而不去改变

如果在规模比较小的企业，我们的项目容易比较单一，就会导致作品输出也比较单一。如果公司对于设计质量的要求比较低，我们也沉淀不出什么像样的作品，求职就会变得非常被动。工作输出单一如果还不去改变，久而久之便会影响专业能力，职场路径也会变得局限性很大。

对于 UI 设计师来说，无论是 C 端还是 Ｂ 端都属于我们技能掌握的范围，而不能根据短期内的行业走势锁定自己的职场路径。在工作中没有机会发挥多维度设计时，我们要在日常强化中去弥补，不能让自己的技能变得越来越收缩。不要为自己作品输出单一而找借口，结合公司业务转化、前公司业务优化、熟悉产品改版设计等，都可以以此来强化缺失的技能。

机遇是自己去创造的，只有能做好了才能抓住机会，没有机会去发挥专业能力，就要主动去挖掘。

六、信息重复导致样式化

项目界面作为技术对接和作品展示输出，这两种情况下我们不能偷懒的采用一个态度。站在项目对接的角度来说，信息图文都可以只是占位符，交代清楚样式特征即可。哪怕全部采用一样的文案信息和配图都没关系，甚至配图用色块来替代都可以，只要下游对接的同事能判断出来就好。

站在作品集输出的角度来说，不能以此形式来表达，这样带来的感官体验肯定是有所欠缺的。样式化的表达不能体现出作品的真实感，包装出来的效果也会大打折扣，我们要真实还原每一个界面中的信息表达。无论是文案还是配图来说，都要选择更加真实的内容，不能以占位符的心态去输出作品。

不同的版块信息要以不同的文案和配图来填充，就算是数据和日期等内容也不要都一模一样，做好细节才能带来更多机遇。

七、人靠衣装配图是金装

作品展示的角度来说，一些设计师容易忽略界面中的配图，随便找一些图片填充设计，导致自己的作品总是少了一些质量。配图就如同人的衣着打扮，人靠衣装配图就是作品的金装。如果配图自身不够高端大气，作品自然也是高端不起来的。

在保障配图与信息表达真实性的前提下，我们要尽量选择质量更高的配图，以此来带动作品的格调。不过我们也要养成版权意识，尽量去免费可商用的图库网站筛选图片，可以找黑马哥领取网站合集。既然耗费了时间输出作品，就不要在配图这个环节马虎，高质量的配图也能带动作品的质量，带给面试官更好的感官体验。

八、作品输出缺少视觉感营造

随着行业发展的成熟，各阶段的人才储备也会变得更多，求职的时候面试官的选择性就会更多了。当面试官收到的作品集很多的时候，就需要经过多次筛选来提高选择效率。通过学历、工作经验、岗位匹配度、作品集和面试发挥等来筛选，而作品集也会经历海选、初选、精选等。

影响作品集筛选的因素很多，在海选和初选的时候，如果作品集很多的情况下，作品带来的视觉第一眼就变得很重要了。如果单个界面本身只是简单的布局层面表达，缺少一些视觉感的营造，极容易在海选的时候被忽略掉。这样就算你设计说明描述的很好，产品思维也比较成熟，但是面试官没有看到或者没有仔细阅读那些长篇大论，也是徒劳无功。

提高作品的视觉表现力可以从配色开始，色感的表达可以让作品充满视觉亮点；也可以精致化图标设计，质感图标的表达可以带动界面的视觉感；还可以从 IP 设计或者品牌基因等元素的融入入手，以此丰富界面设计的视觉表现力。营造视觉感的方向很多，不能局限于常规的布局，摆脱同质化需要从差异化的视觉表现力开始。

九、作品本身的差异化不可缺

同类型的设计看久了终归还是会麻木的，在相似功能的设计表达上面，如果同质化比较严重，面试官也会觉得你缺少创新能力。不要只是把焦点放在作品集包装层面，作品本身的差异化也是至关重要的。

差异化的体现可以是交互形式上面的创新，摆脱常规的功能表达，破局才能打破固化思维。也可以是立足于品牌的基础上进行设计，提取品牌元素运用到产品设计的场景中，这是拉开差异化较为明显的方向。还可以运用一些新的技术或者趋势化表达，比如三维设计运用到 UI 场景中，插画风格衍生到图标和视觉区域等场景中，交互动效带来界面动态化表达等等。

在设计每一个界面的时候，如果都只是普通的展示功能而已，这样的设计是打动不了面试官的，因为随便来个设计师都可以做出来。每个设计作品都是体现自己专业能力的表达，我们需要的不是完成需求，而是如何突破常规，做出不一样的设计。

十、不局限于界面而是思路

工作项目中我们需要完成所有的状态表达，但是作为面试作品来说，不需要展示全部内容，重要的是整个项目设计的思路。就展示界面来说选择主界面、重要业务流程界面、强视觉感界面、创新交互表达界面等。作品集是众多项目的缩影呈现，都去展示不但篇幅不够，也容易让有亮点的设计被埋没。

在设计作品集的时候首先要明确项目展示的流程和思路，比如项目背景、用户调研、交互设计、品牌设计、UI 设计等等（仅作为大概示意）。把这个流程里面需要重点展示的界面设计好，这样才能快速的优化项目。也不需要把一个界面的所有内容都呈现出来，输出一条特别长的界面，到时候包装的时候不利于展示发挥。

整个作品集呈现出来的思路比较重要，通过作品集要体现出你所具备的能力，如果你会插画但是没有在项目设计中体现出来也是无效的。通过作品集告诉面试官你具备哪些解决问题的能力，而不是单纯的界面设计而已，我们在职场中存在的价值就是辅助团队解决设计问题。

小结

在这个形势严峻的招聘环境中，作品集无疑是我们最有利的能力保障，无论你面试技巧再完美，作品不行也是徒有其表。作品集的好坏不限于作品包装本身，作品自身的设计表现力也是至关重要的，不要偷懒也不要滥竽充数，你付出了多少努力面试官一眼就判断出来了。

希望本文的梳理可以带给大家一点经验，多花时间在作品上面，用心打磨每一个元素和深思每一个设计表现场景。

作者：黑马青年

转载请注明：学UI网》作品本身不足，与包装无关

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

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

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

第一组：以手机或手机组合为主的样机素材。

第二组：相对来说组合形式更多样化，视觉感受上更有张力一些。

很明显这两组样机的形式更加新颖，结合之前发的样机素材，用来包装、展示作品完全足够了。

不过需要强调一下，我们能用到的样机素材大致分为两类，即：平面样机和3D样机。 

这篇文章中的样机属于平面类的，所以使用起来很方便：打开素材后找到需要替换的屏幕内容智能对象图层，双击点进去替换图片保存即可。

但今天分享的这些样机属于3D样机素材，其使用方法略有不同：

1、打开样机源文件后，找到需要替换贴图的3D图层：

2、双击纹理下的Chante This 或 Click This图层，打开新窗口

3、在打开的新窗口中置入自己需要的图片，调整好尺寸保存，返回到源文件窗口即可看到替换后的效果。

比如像我这样简单的使用就可以：

另外还有一点，PS版本太低或者电脑配置过低可能无法使用，比如我常用的2015版PS就不能使用，打开后就是这样的：

好了，关于使用方法和注意事项就说这么多了，其他的大家下载之后多摸索摸索，最起码需要用的时候知道怎么用。

作者：老张

转载请注明：学UI网》哇，这些样机素材太好用了！！

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

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

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