5分钟教你快速设计网易云banner

▽

▲往下继续看文章，内含设计实操案例干货！

作为老网抑云的铁粉，最近的2020年度报告刷红了朋友圈，不看不知道，原来这一年小编一共听了954小时3089首歌，如果24小时不间断也要40天才能听完，不知道这算不算老网抑云了，如果有听歌时间比我长的可以留言batter一下！

▲小编的2020歌单

为什么偏偏网易云成为了年轻人和大众的最爱

网易云做对了两件事情

-懂音乐

听着歌曲，看着评论，有无数个故事在治愈和慰藉那些深夜不眠的孤独患者，总能有一句话戳到你早已满目疮痍的内心，吃着火锅眼眶里含着泪水，发送了分手文字的短信，所以在网易云里听的不只是音乐，还有故事。

▲评论来自网易云

-懂设计

打开网易云，我们可以从banner的设计中感受到听取音乐的风格，甚至发行EP所要阐述的理念都能在一张小小的banner设计中有效读取，在小编认为这是与音乐融合出来的设计，而不只是为了设计和推广这首歌曲的目的。

▲图片来自网易云

1、让色彩情绪化

色彩并不只是用来配合文字和图片的工具，而是需要赋予设计灵魂，让色彩变得富有深度和画面感，小编称为色彩属性，每一首歌不管是流行、民谣、摇滚、电子、独立音乐类型，都有着背后的创作故事和曲风类型，从色彩属性最直观的将故事里的情绪化表现出来，让观者看到画面就能知道这首歌大概是什么曲风，是悲伤的还是开心的歌曲。

▲图片来自网易云

图上歌曲想要体现的是一场与自由的角逐，曲风也偏向于Hip-Ho说唱和电音的一种结合，代表着勇敢与激情的红色调铺满了整个画面，结合展露的肌肉身材，从中释放出想要自由和寻找自由的情绪性。当颜色调整为黑白配色后，原本代表着勇敢和自由的感觉突然消失了，从画面中反而获取了一种孤独和悲伤的情绪感。

▲图片来自网易云

再看图上的banner结合歌曲名，我想大部分人都能判断出这首歌是写的对另一伴的不舍和留念，雨天昏暗的深夜加大了对于观者的理解与感受，而如果整个画面的色彩调整为黑白色，只留出灯、红酒、相框的颜色后，那种失去的强烈是不是会更加的明显和深刻。

▲图片来自网易云

2、控制画面留白

留白的目的除了解决画面内容层次的一种梳理以外，还会为设计增加很多艺术美感和想象空间。

▲图片来自网易云

我们可以看到两张图的对比，从本身版式的理解上，文字居左对齐，将文字的大小、粗细通过层次分开得到流畅的阅读感，本身是没有问题，但却失去了音乐特性的本质，而留白就是改变和拆分版式编排的结构，将其原有连串起来的主题文字拆分重组，让版式内部得到一个流通。

▲图片来自网易云

3、让设计变得有趣

设计不是表格也不是冷冰冰的数字，设计是为了让人们感受人和生活的理想化，所以有趣就变成了一种特质化标签，可以提升对于大众的新鲜感。利用字体之间的变化，符合主题的元素图形或者涂描来放大画面设计的趣味性，就像烤羊肉一定要放孜然或者椒盐才算吃的够爽是一个意思。

▲图片来自网易云

实操案例步骤

▲实操案例分享

设计诠释：”破碎的光线在水彩浸润过你的脸，Tsing River，it will wash me” 这是白皮书乐队里关于《清河》歌曲里的一段歌词。从歌词中感受到人浮在水面上，斑斓的色彩光照进全身，又随着余晖渐渐消失殆尽的感受。所以在设计中利用了双色渐变将整体的画面颜色变成了涂抹色彩，扭曲和波澜的水面塑造出与众不同的设计感。

步骤1：

利用参考线找到中心区域，并放置主体图片。

步骤2：

• 【渐变隐射】工具绘制绿色与蓝色的渐变
• 【渐变隐射】工具绘制紫色与蓝色的渐变并选择图层模式中的【饱和度】
• 【色彩平衡】将整体的颜色往青色与蓝色两块区域拉伸参数

步骤3：

使用滤镜>液化工具，选择左侧工具栏的「褶皱」将重心的画面拉出层次距离，在将湖面做变形处理，得到扭曲的画面效果。

步骤4：

将文字的字间距拉松并且放置到中心区域，将英文字母拉出高度形成设计元素与文字融合成整体。

步骤5：

复制画面中的一部分进行变形处理得到一个类似纸张飘散在空间的效果，放置到文字框架的中间，与白皮书乐队得到一个很好的风格统一。

步骤6：

用类似毛笔字笔刷的字体绘制出清河的歌曲名，再分散到左右两侧，形成一个版式上的平衡，否则会显得两侧过于留白过多，当然中心区域与两侧之间形成的留白区域是作为一个空间进行想象。

注意事项

▽

设计版式中的留白和文字段的分拆和组合处理对于banner设计来说非常重要，可以很有效的体现设计感的美观。

原文地址：修先森撩设计

作者：修先森

转载请注明：学UI网》都在听网易云，却不知道banner设计这么好用

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

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

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

教程示范：

1.打草稿

首先，选择一个硬笔刷打一个草稿，花花和叶子注意一下疏密大小关系。

2.草稿基础上再打线稿

这一步依然是选择一个硬笔把藤枝画出来。

3.画花瓣

画花花的部分选择一个勾线笔刷，用打圈的方式先定好花瓣的位置，然后再去一层一层画花瓣。

我这里的话因为笔刷选择的有点大，所以画出来的线条有点粗，大家在画的时候要把笔刷刷头缩小一些。因为这里没有打草稿，所以我画的时候是边画边修线稿。

4.画叶子

叶片也是选择一个硬笔笔刷直接去把大型画出来就可以了。注意叶子形状要好看哦~

5.上色

在花花线稿图层下面新建一个图层填充颜色，然后再整体把线稿的颜色修改一下。

这个地方是我觉得花枝在整个疏密大小上还不够好看，所以在做调整修改。

6.继续上色

接着给叶子上色，选择一个透明笔刷刷一些渐变色在叶子上，花花上面也刷刷渐变色。

7.添加阴影

然后开始细化加花花的阴影，直接在有花瓣遮挡的部分添加阴影之后，选择水彩笔或者涂抹笔刷把刚刚画好的阴影涂抹开（注意不要过度涂抹哦！）

8.勾线

接着把叶子勾一下线，然后稍微细化一下。

最后整体也可以再调一调颜色。

那我们的花花就画好了，希望对大家有所帮助，我们下一期再见，如果有收获记得分享给身边画画的朋友哦！

原文地址：空青肆绘（公众号）

作者：Tcat

转载请注明：学UI网》插画教程 | PS 手绘板~日系蔷薇花

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

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

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

【视频完整版观看可抖音搜索: 野川设计】

今天我们讲讲，好的设计如如何被借鉴出来的！

▽

我们先来这两张电影海报，发现什么端倪没？

尼玛不能说是毫无关系,只能说是一模一样！

不着急，我们再来看这一组！

–

我试着把两张海报的人物扣掉对调一下

竟然还无违和感啊，这亲妈都分不出来吧？

以上几组设计抄袭的例子，很多人问这抄袭它等同于借鉴吗？我想说：肯定不等于。

但就是这么很明确对抄袭与借鉴划分的判断，在度娘上竟然搜出了一千多万条相似信息。代表着大部分设计师还是无法判断抄袭与借鉴具体的界限在哪里，于是作为专注传播设计内容的我来说，促使了做今天文章的原因。

这是A作品，这是B作品，发现相似度基本可以达到90%以上，而抄袭的意思是指窃取他人的作品当作自己的，在相同的使用方式下，完全照抄他人作品和在一定程度上改变其形式或内容的行为。

最直接的案例就是汽车行业里的揽胜极光告陆风X7抄袭，据说当年把揽胜极光的车主气的半死。

但要属抄袭界的最强骚操作，非众泰改装保时捷莫属，当年众泰最辉煌的时候还成为屌丝把妹专用车，甚至连保时捷车主都无法分辨。

这些相似度极高，且没有原创而只是在原有构架上使用相同方式来改成自己设计的都属于抄袭，甚至都可以说原封不动的套娃！

其背后原因仅仅是因为：方便！

这就像X音一个视频火了，接着你会在一周内刷到成千上万条同样的视频，你甚至误以为X音开启了重复模式，其目的也只有一个，方便出效果！

但试问如果都以这样的方式展现给大众，其带来的后果就是以后所有人都缺少原创精神，当你要做一件事情时，不是想如何去创作，做成不一样，而是说：“那么麻烦干嘛，现成的东西直接抄啊！”

这是A作品，这是B作品，以A作为原型做到举一反三，透过别人作品中的某些元素提取灵感进行深度再创作，对作品的创意做了更多延展空间，使之有了自己设计的灵魂。

虽然一切设计的起源本质都来自于模仿与再创造，但是模仿的目的是为了锻炼初期的扎实基础，为了能够让之后的设计可以举一反三。

并且不作为商用途径来源，而抄袭是指不但模仿他人作品还作为商用途径获得利益，甚至在大众不知情的眼下，有了一定行业名声，这才是为什么人人都痛恨抄袭者的原因，是因为他不尊重设计，更不尊重原创者。

这里我一定要点出拼XX，每日烧香拜佛的，谁发砍一刀的立马绝交，于是就这样差点跟我妈绝交了，儿子不孝！

如何做到既能将好的设计借鉴到，又能原创出自己的设计呢？我们可以通过以下4个方向进行借鉴学习。

1、借鉴其设计技法及风格

比如这两张海报中，对其画面上绘制的线条与纹理的刻画是原设计的特点，而技法是一种设计性的能力，可以作为创造的一种条件，以及整个带有偏国风的设计风格都是可以汲取到借鉴上。

2、视觉构图

左边这张海报通过5:5对等构图，在上半部做出了大量留白，而用三角构图的原理将视觉引导至上方焦点，也就是飞出去的猴毛，解决了上半部分大量空白的问题，并且点出了是所要表达的故事剧情。

右边的这张海报通过中心焦点的构图，将视觉牢牢抓住在中心，再通过焦点所体现出的人物形象来传达给观众。这两张海报虽然构图的方式不一样，但是都有着相同之处就是，都不会让主体视觉完整的展现出来，而是让观众通过联想的方式猜测这个形象，以此获取观众对内容或海报的好奇观感。

3、人物刻画

观察两张海报，人物的设计或者绘制是使用水墨和毛笔墨迹等方式的结合融入。

4、画面配色

使用有鲜明对比的配色，比如间隔色，互补色这样的方式会让画面具有视觉穿透力，色彩的冲突可以把故事中的情绪化带给观众。

综合以上几点，流体性的线条、墨态人物笔触、局部性的展示视觉主体、以及强烈的色彩冲突，于是我作为借鉴方式设计出了这张电影海报。

对比之前的几张海报，即从中获取到了不同的借鉴元素，同时又保留了自己设计特色。

比如这张海报在左右对称式的构图基础上，增加三角构图的原理让视觉有一种从上至下的引导阅读，再利用鲜明对比的配色使画面有了冲突感的色彩吸引。

最后说回抄袭问题，毕竟设计行业又不是宫斗剧，既要天天改稿被甲方来回折腾，还要处处防范被同行小人乱蹭，本是同根生，相煎何太急，何必呢！好好吃自己的饭他不香吗！

原文地址：修先生撩设计

作者：修先森

转载请注明：学UI网》借鉴=抄袭？好的设计是怎么借鉴出来的

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

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

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

1.清晰

大家先想想图标在APP里的主要作用是什么呢？可以作为功能和信息的提示标识，引导用户的操作。

而且我们通过看图获取信息的速度要比阅读文字获取快得多，图标作为一种通用化的视觉语言，让页面更容易被阅读。

▲ 图标代表的隐喻越准确，就越容易被用户准确识别。

2.简洁

图标本身的尺寸就特别小，如果在里面掺杂着大量没必要的装饰性元素，会让图标的阅读变得很困难。

可以通过使用尽可能简单的设计元素来创建图标，保证形状的简洁易懂。

▲ 如果在设计过程中发现图标变得很复杂，大胆尝试去做减法，删除不必要的细节，只留下最重要的部分。

3.风格统一

在Dribbble中搜索“icons”，会看到很多不同风格的图标样式，但同一个集合中的图标都会保持统一的设计风格。

▲ 不同风格的图标可以在设计中穿插使用。例如在APP底部导航中，使用线形风格的图标作为基本状态，点击选中时可以变换为面性风格，用来区分不同的状态。

4.基础网格

网格有助于我们建立一个明确的尺寸规范，常见的网格尺寸有16×16、24×24、32×32、48×48、64×64、96×96。

▲ 所有的图标都将建立在基础网格之上，图标的每个部分都应该放在像素网格内。

5.安全区域

图标的主体部分应该保持在安全区域内，这种情况适用于大多数的场景。

安全区域可以作为设计建议，而不是一项必须的规则，如果有需要，我们完全可以在安全区域外扩展图标的形状。

6.关键形状

如果想让一组图标放在一起看起来很和谐，那这些图标的视觉权重应该保持一致。

在设计前首先确定图标的基本形状，例如圆形、正方形、矩形等，能有效帮助我们确定图标的比例关系。

可以用数学面积公式来计算一下不同形状图标的权重，找出近似值。

来吧，先从圆形开始：

▲ 在这个例子中，直径d是20px，半径r是10px，圆的面积约等于314px²。

把圆的面积开个根号√，方形的边长a大约为17.7px，四舍五入到整数，那么边长a为18px，接下来算算方形的面积：

▲ 边长a为18px，方形的面积为324px²。

最后算一下矩形的面积：

▲ 边长b为20px，边长c为16px。

最后我们根据这些科学的尺寸设计一组相对和谐的图标：

7.描边宽度

除了保持相同的视觉权重，图标的描线宽度也应该保持一致，达到像素级统一，这里我建议描边使用整数值，这样更便于设计。

8.圆角

图标的和谐还在于边角的统一。尖角不用说了，保持统一的垂直90度就可以。

这里需要重要说的是圆角，不能所有的形状都使用同一个圆角度数，而是要根据图标形状的不同灵活调节圆角度数。

▲ 例如一个图标有里外两个平行的圆角时，不能里外都使用1px的圆角，这样会让图标看起来不统一。

正确的做法是让外面的圆角更大，设置为3px，里面的圆角为1px，让图标看起来更和谐。

▲ 根据对象大小，设置不同的圆角数，保证视觉统一。

9.角度

转载请注明：学UI网》如何强化图标设计的细节？我总结了12个关键点！

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

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

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

01.图标是什么 

要做好图标，首先我们要知道图标是什么？在一般认知里，图标可以定义为一种图形化的符号或标识，用于帮助我们理解某些复杂功能或操作，尤其在数字化领域里，可视化的图形符号，更利于高效的展示信息和引导人机操作交互。也有人称之为icon或eikan。

a

▍1.图标的发展史

图标的历史可以上溯到人类文明发源伊始，最早的象形文字，岩洞壁画等都可以算作图标的一种，为我们后代研究人类文明产生了珍贵的历史意义。但今天我们研究的图标主要以计算机系统发明为分界线，看看这短短几十年间，图标是如何演化的。

● 80年代的初期图标还是黑白单色

● 90年代慢慢多了些色彩，形状也更丰富

● 到2000年后，随着显示技术的发展，图标也越来越形象

● 图为iOS1-8图标变化

从最早的Xerox Sta系统到最新的Mac os10，再到现在人手一台的移动智能机，每个阶段都拥有其独特的图标风格，2010年已经到了智能移动时代，拿最知名的iOS系统每个阶段升级，图标的变化来看，也历经了初期的拟物-扁平-微质感的好几个阶段。

图标作为UI必不可少的部分，能够使界面更加精致，今天也分享给大家一些大公司的设计规范，其中包括很多系统的图标规范和定义，帮助大家更好地参考和学习。

w

02.  图标的分类 

图标因其良好的辨识性和无障碍沟通特性，在各种场景下被广泛应用，同样，因使用场景的不同，图标所代表的意义也不一样。

▍1.应用图标

● iOS14桌面应用图标

a

应用图标指的是我们设备界面上的应用入口，通常具有较强的品牌特性，可能与logo一致或与其核心功能一致， 如instagram 就是一个简化的相机正视图，亚马逊则是一个购物车形象，国内也有不少产品直接使用了能够代表产品的文字，需要注意的是，界面图标必须遵循对应系统下的尺寸规范。

● 华为EMUI 10应用图标

d

▍2.功能图标

与应用图标不同的是，它主要作为界面中的功能入口，一般为简洁易辨识的符号，根据不同产品调性，图标风格也可以多种多样，并且不强制必须为标准形状，异形图标能让界面更为生动，整体风格的发挥也有了更多空间。

d

▍3.辅助图标

辅助性图标通常存在于有较多长文字时，搭配作为辅助说明，在UI中，可能还具备一定情感化的作用，在提升用户接收信息效率的同时安抚用户情绪；所以整体可能需要具备更多细节，作为画面补充的一部分。

● 如：缺省图标

s

▍4.与logo的区别

虽然这两者特性极为相似，都是图形化的符号，但logo是为整体品牌服务的，具备其独一无二的专利特性，甚至可以是IP形象或文字；两者的关系可以理解为父子。

● 图中的图标就很好继承了logo的特征和风格

● 但有的也只是普通的界面辅助，风格和样式并不一致

a

03. 图标的绘制 

能够绘制出高质量的图标是每个UI设计师必备的能力，本次我们以功能图标为例，为大家展示具体的几个绘制步骤和要点，希望帮大家在细节上避开影响图 标精致度的一些小细节。

d

▍第一步：建立图标网格

功能图标因形态结构各异，难免存在尺寸不一的情况，必须考虑其整体视觉的协调一致，最好的办法就是建立图标网格，也可以称为图标盒子，当图标形态分别为长、方、圆时，有一个合理的比例限制。

● 将常见图标形态约束在图标盒子内

当然，网格不是绝对的，要学会灵活运用，当与个别图标形态无法完美匹配时，也不必拘泥，一切以达到视觉和谐为首要。我通常会在图标网格外围预留一个安全区域，可以规避切图出现不完整的情况。

a

▍第二步：具象功能

有了网格，第二步则需要我们根据功能，找到与之对应的实物形象；如笔记本是记录，电话是通话，时钟代表时间，日历代表日期等等。

这些功能相对比较容易找到现实中的实物，如果是比较抽象的功能呢？就需要我们发散思维，找与之相近含义的事物。如隐私功能，隐私是没有实物的，但是我们可以通过“隐私”这个词延伸：不公开的、隐藏的、锁起来的、被保护的，继续根据这些词延展：就可能是密码、盾、锁、遮眼等等。

时刻记住一点：用大众都能理解的物体形象去表达。如果用户看到某个图标过于复杂，需要反复思考它代表的含义，也无法预测点击后的结果，那这个图标就失去了提效的作用。

d

▍第三步：简化结构

有了功能的具体形象，下一步就是思考如何让图标变得更简洁易辨识。

● 毕加索《公牛》

毕加索创作《公牛》时，从初稿到最终成品历经了11个版本，最后只用寥寥几条线来勾勒，但我们依然能一眼认出牛的形态。绘制图标也一样，需要我们思考如何省略无用细节，化繁为简，提取他们的主要特征。

f

▍第四步：善用布尔运算

有了简化的图标形象，我们接下去应该思考如何让图标变得更为规范耐看。

● 如桃心图标，就是两个简单圆角矩形组合而成

● 桃心图标，也可以做的更圆润

● 不同组合下的布尔运算，图标形态特征也会不一样

这一步的诀窍就是尽可能使用基础图形去组合拼贴，这样做出来的图标，尤其在适配不同尺寸大小切图时不易拉伸变形。

f

▍第五步：处理细节

统一性

● 风格：线性、面性统一

● 断点细节一致：平角、圆角

● 图标气质一致：是圆润还是尖锐硬朗

随着功能界面的不断复杂化，大家早已不满足于同一产品或同个界面中单一的使用面性或线性图标，而是搭配使用便于层级划分，故而这里只考虑在同一层级下图标的统一性。

视觉平衡

如图，三角形置于中间位置时，视觉重量会偏向左边，在这个基础上，我们就需要做出适当调整，以达到视觉重量平衡。

一致的视角

当你想让自己的图标变得更加出彩而采用了区别于正视图的结构，那也一定要确保至少在同等层级下，这些图标视角是一致的。

a

▍第六步：做出差异化

融入品牌DNA

● 韩国购物App 11 street，就很好的融合了品牌logo的箭头符号

功能图标因简洁通俗，比较容易出现市场同质化严重的现象，故而很多App选择在图标中融入品牌基因，不仅做出差异性，还能提升品牌调性。

跟随趋势创新

通过对图标风格质感的创新表达，让人眼前一亮。这种方式更多需要你了解当下的流行趋势和技法，根据产品的风格调性，对图标进行量身打造。

图标微动效

随着5G时代来临，微动效也早就出现在了大众视野，基于图标的微动效表达，能让用户更快注意到某个功能并去点击它，如果你的动效还恰好有趣美观，更能让用户感到愉悦。比较常见的loading和tab切换都让我们有了很充足的发挥空间。

d

▍第七步：完善图标库

通常一个产品的功能图标会多达几十甚至几百个，如何保证这些图标的统一性需要提前去规划。绘制的最后一步，就是在完成一部分图标后，及时排列比对，确保整体视觉效果的统一；有条件的可以生成图标库，便于后续的团队协作。

● Apple发布的SF Symbols中图标，就划分了9种宽度和3个比例尺寸

有了图标库后，协作设计师做到共用功能时可以直接调用；极大提高自己和团队的效率，并保持整体规范的一致。

a

04.最后 

图标绘制看似简单，要做好却并不容易；UI处处充满细节，想要自己的界面更加精致，就不要忽略每一个可以提升的点。希望今天的这篇文章能够帮到你。

最后给大家分享一些大公司的设计规范，其中包括很多系统的图标规范和定义，帮助大家更好地参考和学习，需要的话可以点个“在看”，添加叮当猫回复“图标”领取，已有叮当猫的无需重复添加。

s

作者：sky

转载请注明：学UI网》研究了上百套图标，总监却告诉我图标要这样画！

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

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

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

@CANAAN，作品集封面3D素材

 s

02. 样机素材 

@嗡嗡嗡起，高质量的手持设备样机

f

03. 平面素材 

@南风知我意，潮流高级全息海报模板31款

 g

04. 样机素材 

@是莹莹啊，苹果13样机+高端场景样机合集+iPhone13样机

w

05. 3D素材 

@落微，UI素材丨3d丨手势丨psd

w

06. 3D素材 

@阿轩，11个3D图标+png+3个拍摄角度

01.前言

总有一些人会让你感觉格外亲近，总有一些事会在不经意间打动你，慢慢的深入人心，是什么让你感觉亲近、愉悦、甚至兴奋？今天这篇文章主要从产品设计的视角分享一下深入人心的产品设计方法。

a

02.事势之流 相激使然

“世事的变化趋势或态势是各种因素、力量相互碰撞、激发的结果”。同样想要让你的产品深入人心，本质是我们的产品要给用户提供独特的价值，而价值的产生可以理解为一个形象在用户心智中的建立，这里的形象类似于品牌VI，但绝不止于视觉层面，其实可以由多个维度构成。通过不同的维度影响用户的使用体验，最终形成产品的品牌价值。

我们可以把品牌价值理解为“人物个性”，美国心理协会(APA)将个性定义为“在各种场合、随时间变化，能够影响多种特征行为模式的个体的独特心理特质。”

产品的个性会影响用户的感受、思考、处理以及最终的结果。例如，当用户挑选并投递一个职位时，她希望听你成熟的建议来引导她。将品牌与几种典型的人物个性关联起来，就能创造关联性更强的故事，更容易使用户投入。换言之：人与人更容易亲近。如果你的品牌感觉像“人”，用户就会更亲近。

d

03.找到“人物个性” 明确品牌价值

定义“人物个性”，就是去思考如何面对用户，如何以最好的姿态向用户展示自己，首先要建立有效的价值体系。这里我们通过招聘业务的一个项目逐步讲解一下。

我们知道下沉市场的招聘环境十分恶劣，存在各种虚假信息的问题。结合这个背景我们对蓝领用户的求职现状进行了一系列详细的调研，收集了用户不同层级的需求（如下图）。 

我们可以发现用户最基础的需求只是要求职位信息的内容真实，加分需求则是对职位品质提出了期望，在保障职位信息真实的前提下，需要提供更高质量的职位。结合需求的提及率和需求等级，我们输出了产品的价值体系（如下图）。 

如图所示，产品的价值体系分为三个层级，分别是产品价值、用户价值和品牌价值。

强调产品价值：我们结合用户的基础需求，根据需求内容定义“真实”内容，例如：真实的薪资、真实的工作环境、真实的工作内容等，第二步则是通过产品底层逻辑或用户的评价反馈系统来创建这些“真实”。

提升用户价值：用户价值=产品价值-使用成本，例如：用户要购买苹果，A商店的苹果质量较高，但距离较远。B商店的苹果质量一般，但距离很近。则用户价值=苹果质量-商店距离。通过传递“真实”的方法降低用户选择职位的成本，从而提升用户价值。

形成品牌价值：品牌价值的形成则是通过多个体验维度的同时影响，以及用户不断的使用产品感受用户价值，长期积累形成的。

f

04.发掘用户感知 拆解用户认知

基于前面建立的产品价值体系，我们来试着思考以下几个问题：

1.我们的品牌要说什么，怎么说？

2.在价值形成的不同阶段，我们的品牌分别对用户说什么？

3.用户希望得到什么，用户却只能感受到什么？

4.用户此刻正需要什么，用户此刻最不擅长什么？

创造价值不是目的，只有将价值有效的传递给用户，用户通过感受价值，从而更好的理解和使用产品。我们通过感知+认知的方式重新构建用户体验。

结合用户对直接/间接竞品的场景举例我们可以发现，用户对价值感知可以分为四个维度： 

产品体验：“产品”可以理解为我们售卖给用户的商品，例如：京东的电器、招聘业务中的职位或者企业。

功能体验：“功能”类似于服务，例如：7天无理由、简历优化。

文案体验：“文案”指的是页面中信息字段的表达方式，是否足够详细、精准、及时等。

界面体验：“界面”其实就是页面的UI风格视觉语言。

同时我们发现用户认知的“真实”与以下几个词有很高的相关性 。

接着我们根据价值体系的目标，通过以上四个维度拆解具体的优化内容（如下图） 。

05.体验战略建立有价值的连接

清楚了价值目标，以及用户的认知和感知方式，我们开始将价值与用户做连接，也就是前面提到的价值传递（传递“真实”）。根据下图中的公式举两个例子。

打造产品体验： 

左图是旧版的首页，右图是优化后的页面，我们可以直观的感受到页面两个产品的调性或者说页面的气质截然不同。我们来分析一下两者的区别，优化后的首页，在主视觉的位置，打造了“每日严选”。通过这个模块快速建立用户对产品的初步认知。这个模块的目的是为求职意图强烈但职位选择不明确的用户提供高质量的职位。这类用户在整体用户中的占比最高，同时这类用户的痛点十分明确，他们既希望选择一个高质量的职位，但自身缺乏对职位品质的判断能力。

打造服务体验：

为求职者提供了“安心投”服务，在用户投递前、投递中、投递后三个节点分别展示求职相关的保障，降低用户求职顾虑和心理担忧，提高投递率，服务包括：

A.求职保险：求职过程中被骗造成的经济损失平台会予以适当赔付

B.隐私保护：保护用户的相关信息，并进行加密处理

C.免打扰保护：保障用户的私人空间不被打扰

在职位描述（左图）的模块后面我们加入了“安心投”，用户了解工作内容后的第一时间告知他投递后我们会有哪些保障服务，从而减少他在投递时的心理担忧。

其次是在企业规模（右图）的模块中加入了“用户评价”，露出更多真实性相关的信息辅助用户对职位/企业的品质进行判断。

同样在后续的微聊页面我们也加入了“安全投”的提示，并且在用户投递后会再次与他确认我们为他提供了哪些安全保障服务，进一步延伸用户后续的操作流程。

06.总结

其实品牌形象建立的过程就是我们与用户交朋友的过程，在这个过程中我们的个性（价值）被用户逐渐发掘和欣赏，促使我们的关系越走越近。项目初期我们可以通过一些引导、开屏、二楼等方式对品牌进行宣传和曝光，同时我们不断提升自身的产品品质，提高产品价值。中期我们需要进一步优化用户在多个维度的体验感受，提升用户价值（用户价值=产品价值-使用成本），降低用户使用成本，进而提高用户使用频次，以建立长期有效的价值连接。在这个过程中我们不断优化体验，与用户共同成长，形成牢不可破的信任价值体系，即成功搭建了一款深入人心的产品。

原文地址： 58UXD（公众号）

作者：环铁艺术家

转载请注明：学UI网》体验设计构建品牌价值-打造影响用户心智的价值连接

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

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

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

虽然粗看没多大问题，但确实是一个很常规的设计，没有亮点。

试想，我们是否可以在布局、图标图形、色彩质感等做一些细微的突破，这些地方稍微做些改变都可以使得界面变得更好。

再比如上面这个作品，也是同样的问题，缺乏一丝灵魂。之前看很多设计师作品集里面包装的作品，就是这样设计的。

虽然现在UI趋于模式化设计，但是我们在确保体验最优的同时时，还是可以做一些创新设计。比如布局、图标、色彩、质感、杂志化等方向发力，下面我们来看看如何做一些差异化设计。

差异化圆角层叠布局

俗话说，当然不知道如何去做创新时，可以去找一些好的概念设计，从里面挖掘一些新的设计想法，用在自己项目中。

例如上图，我们将卡片圆角化与底部地图相呼应，整个设计看上去就有了细微纵深感。如果上下滑动时，再配上视差动态效果，那么细节也会更丰富。

上图的设计也是同样的思路，圆角图片作为背景，大圆角卡片在上层叠加布局，增加细节丰富度。

再来看一些优秀案例

半圆角化布局设计的应用案例，只有一个边用圆角来布局设计，另外一边直角布局。

通过上面一些案例，可以提取一些布局方案用在项目上，如下图所示。

打破常规的图标

图标可以说在设计中非常重要，承载着品牌性格传递，表达产品的气质，但也是我们最容易忽略的地方。

如果纤细的图标看腻了，是不是可以尝试下这种粗线性图标。

再或者就是将图标logo化，设计更有趣味性一些。这些图标应用场景可以是功能页面，比如像智能家居、智能镜等场景中。

Naver

弥散光感渐变背景

很多情况下会遇到需要做详情页或者个人页面，这时候就会涉及到头像与背景的关系设计。目前设计较多的方式就是高清大图、品牌图形、渐变色等。那么还可以用下面这种思路。

展开和收起属于比较细节的问题，按照惯性思维，内容多了我就折叠一部分，用户需要看更多内容就点击「展开」，内容展开之后，相应的还应该支持内容的「收起」。

整个流程这样看起来没什么毛病，但是却缺少一个重要的前提，哪些场景或者什么情况下才需要展开或收起呢？

如果只是单纯给出一个流程，显然缺乏对产品逻辑和用户体验上的思考。可能很多设计师之前没怎么注意过这个地方的交互逻辑，或者深入思考需要注意的问题，这次借着答疑的机会咱们一起来深入探讨下。

1、抛开展开和收起

虽然提出的问题是分析展开和收起的运用场景，但是我觉得不应该一上来就陷入到具体的细节里。

这个问题相对来说属于比较小的点，直接钻到细节里会让我们只盯着这一小部分，缺少对全局的思考，因小失大。

盯着已有的设计进行推导，这样多少带有个人主观的臆想。先不要盯着具体的展开和收起功能来想场景，反过来想，在设计过程中有哪些地方需要这样的交互逻辑，为什么需要呢？

无论面对什么样的设计需求，这样的思考过程会一直伴随着我们。

2、先场景后行为

先回到场景上，考虑哪些场景会触发「展开和收起」行为，再具体问题具体分析。

场景一：当某段内容字数太多，占据了大面积的空间，如果用户不想看这些长篇大论，想看下一个内容，要滑动屏幕很久才能略过这些内容，显然我们不想给用户带来这样的操作负担，这时候就可以考虑添加收起功能，把多余的内容收起来。

这里的收起需要注意两点：

• 内容被收起不代表被收起的内容不重要；
• 收起相对节约屏幕空间，用户更方便上下滑动查看内容。

场景二：页面上仍然有很多内容，但是这些内容有主次之分，我们想让用户最先看到前面的内容，后面的内容可以考虑收起来突出重点并节省空间。

这里的收起就和场景一有差异，可能被收起的内容相对没这么重要，只露出重点/热点内容或权益来吸引用户，相对次要的内容被收起，这里的收起会涉及到内容重要程度的排序，这种排序就可以体现在排行榜设计中。

3、展开然后收起

展开和收起属于一组行为，看到展开我们必然会联想到收起。展开是为了看到完整的内容，收起则是内容看完的标志，点击收起可以继续下一个内容。

在知乎问答中，我们首先看到的是标题的问题，这些问题往往言简意赅，通常光看标题我们就能知道这个问题想表达什么意思。

▲ 标题下面的问题简介是对标题的进一步解释和补充，这里的简介作为说明性文字，就支持展开和收起。当简介内容太多时，就要考虑折叠一部分简介，这样能保证在首屏上能同时看到问题和答案。

另外当内容很多，以信息流的形式呈现，并且需要上下滑动来浏览时，就可以考虑使用现展开后收起。

比如在微信朋友圈，如果文字内容较多，就会被收起一部分，想看完整的内容则需要点击「全文」选项，看完后点击「收起」，内容就会被折叠起来，方便我们继续滑动浏览其他朋友圈。

4、展开后不收起

点完展开看到了全部内容，却没有收起选项，但是这样并不影响我们的观看体验，而且展开这个动作给用户和页面带来的反应都很小，不会让用户感到不适。之所以选择「展开」，一个重要的原因是因为我们有想看完整内容的强烈需求。在这种意愿的号召下，我们会毫不犹豫地选择展开功能。

▲ 在豆瓣电影介绍页中，在剧情简介区域会有「展开」提示，如果我们选择展开，说明我们有观看完整简介的意愿，并且是主动选择展开，不添加「收起」选项正好避免了给我们增加操作上的负担。

另外，当内容相对没那么多，能在一屏上显示，不需要用户上下滑动太多时，可以考虑省去收起，比如在QQ群介绍、抖音个人页的简介等。

 

最后

以上是我对展开和收起的运用场景的一些小思考，主要从场景角度来考虑交互逻辑。

授人以鱼不如授人以渔，关于展开和收起的场景还有很多，希望大家能掌握这样的思考逻辑，去发掘更深层的设计内容，当然有问题咱们可以随时沟通～

 

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

作者：Clippp

转载请注明：学UI网》展开全文后需要支持收起吗？从运用场景分析交互逻辑

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

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

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

上图就是这个神器制作出来的一些效果，之前看Dribble上面有很多类似的设计，现在终于知道它们大部分来源于这个神器。

下面我也找了一些案例，大家一起来看看。

这样看，效果还是真的不错，它支持颜色修改、样式修改，目前一共有11种几何样式。

好了，现在下面正式介绍这个传说中的神器，我相信大家一定会喜欢上的。

比如我可以选择8X12列和行的几何布局。

对颜色、列和行、开启阴影调整，得到如上效果。

最终可以导出一张高清大图（3240X4860），尺寸是完全够用的。

随便调整下又是一张不错的几何背景，还可以作为作品集封面。好了，关键时刻来了，神器的网址已经打包好，大家可以拿去使用。

领取方式如下：添加小编微信，备注：神器699，小编会将下载地址发给你（小编不是机器人，回复会慢一些，大家稍等）。

 

原文地址：功夫UX （公众号）

作者： 功夫UX

转载请注明：学UI网》2021 必备的超赞神器，用上它，效率都要提升三倍！！

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

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

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