01.背景

不过，此类供给方式也存在一些不可避免的问题：

· 家政从业人员信息变更很迅速，匹配雇主的时间窗口较短；

· 商家订单在匹配家政从业人员时，匹配成本很高；

· 商家必须手动实时维护大量微信群，以保证获取新鲜资源对接；

· 被动且不受控制，好单有可能被爆单，且无法控制传播路径和时间；

基于这些问题，58家庭服务通过平台策略，力求将线下甩单、合单的合作模式移植线上，以初期实现”家政从业人员 – 商家订单需求”双方供需智能匹配的形式，为以后在线上高效率完成“销售线索-家政员匹配-服务签单-营收分配”的流程打下基础。

02.用户研究与设计策略设定

通常，我们称呼家政从业人员为阿姨，阿姨是58家庭服务平台十分重要的劳动者资源。所以我们也十分看重阿姨们在使用产品时的体验，致力于提高产品的易用性与实用性。

对此我们通过多种途径相结合方式，对58阿姨使用产品的状态进行调研，并得出了一份适用于58阿姨的无障碍设计方案，辅助我们跟紧用户诉求，让设计策略为用户服务。

03.阿姨端，围绕无障碍原则展开的设计

主要秉承三个原则：清晰准确、感知清晰、操作简单

· 浏览型页面

与简历创建流程不同，阿姨在接单大厅寻求工作机会时，其接单的目的属性更强，信息读取的需求更甚于操作，通用规范会让页面拉的很长，所以设计上，在保持同等字号的同时，可以将需求单内各项信息之间的间距按基数缩减，保证页面信息的承载率。

然后针对重点信息增加放大功能，同时强调字重和色彩的对比，让读取更加人性化。

· 操作型页面

并在此基础上放大点触目标，以提升阿姨的点击准确率，避免误触。

同时，在调研的时候我们发现，我们平台的阿姨其实在视觉障碍方面的影响并没有我们想象的那么强烈，只是对信息获取的反馈要求更高。所以在设计时，要降低阿姨对信息理解的障碍，及时就近给出阿姨对操作的明确反馈和提醒

当然反馈也可以结合场景，将功能引导或者信息提示与相关场景相融合，阿姨的感知也更直观，更强烈。

04.商家端，开启人-单智能匹配

将需求单中，C端客户的每一个要求，都定义成一个模块，从视觉表现和层级关系上进行信息的细分分类，丰富每一个内容点。

滚动形式的单选，范围太过笼统且不能跨域，多选虽然能满足大多数情况，但客户的要求千人千面，这种形式依旧不够灵活。

所以设计上增加了附有两个连续滑块的选择器，允许商家根据客户需求设定某个特定的值或者一个范围值。例如身高、体重、年龄、薪资范围等，实现对需求的定义更加自由精准。

05.结语

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

作者：环铁艺术家

关键词排版是很常用的一种排版方式，可以让面试官一下就抓到重点。但是大部分人都是圆圈加文字的表达方式，会显得有些简单、乏味。如果能配上图形或者图标搭配就会丰富、精致很多。

02.模块分离

将页面中部分的内容模块分离出来展示，可以是图形或是卡片等等。不仅可以强调页面的层级展示，还可以让作品集排版更加出彩。

a

03.细节特写

作品集排版页面中可以穿插一些放大的特写，可以展现一些精心制作的小细节，或者项目当中需要强调的内容。不仅可以丰富页面的排版形式，还能一目了然地展示出项目的侧重点。

这个看起来好像是“废话方法”，一个主体图形和文字进行搭配，但是精髓在于文字部分最好是两种粗细或者字体或者大小写的不同对比，让文字内容更有层次。

05.平分画面

将画面一分为二，填充不同的颜色背景。有鲜明的层次感和形式感，可以很好地表达一些需要对比的内容，或者需要进行多维度展示的内容。

原文地址：设计师深海（公众号）

作者：设计师深海

转载请注明：学UI网》作品集这样排版，不进大厂都难！

一、什么是单选框？

顾名思义，单选框表示只能选择一个选项，再具体一点，可以理解为只能从一组相互排斥的选项中选择其中一个选项。

单选框有选中和未选中两种状态，样式上用填充的圆表示选中，描边的圆表示未选中，通过改变状态来给用户反馈。

二、何时使用单选框？

除了单选框，选择类组件还有很多其他形式，比如下拉列表、复选框等，我们首先来对比区分一下这几个易混淆的组件。

单选框VS下拉列表

当用户需要从大量选项中进行选择时，为了节省空间，可以使用下拉列表代替单选按钮。但是下拉列表将内容都隐藏在下一层级中，需要用户多做一次选择，操作成本和认知成本都会变高。

▲ 当选择不多于3项，建议使用单选框，这样选项可以直接展示出来，用户只需要点击选择即可；当选择超过5项时，可以考虑使用下拉列表，确保选项不会占用大量空间。

单选框VS复选框

复选框允许用户一次选择多个选项，选中其中一个选项，不会对其他选项产生影响。对于何时使用单选框还是复选框没有明确的界定，需要具体问题具体分析。

三、单选框设计指南

始终确保良好的可用性

对于这样一个简单的组件，想要做好用好，在设计上有一些不可忽视的细节。

首先要避免在单选框列表中嵌套下一层级的选项，因为使用单选框的目的之一就是为了让所有选项清晰呈现给用户，嵌套过多层级会导致整个结构的混乱。

▲ 另外要明确的是，单选按钮不应该是唯一可点击的热区，而是要将按钮和标签一起作为热区，便于用户准确点击操作。

▲ 这个选择模块由单选按钮、文字标签和图标共同组成，可操作的范围很大，视觉层次也很清晰，设计得既整洁又实用。

保证可读性

单选框列表的布局要有逻辑性，尽量减轻用户的认知负荷。

▲ 用户习惯于上下浏览选项和列表，如果将这些选项水平排布，可能会造成两点问题：一个是浏览时视线移动的不习惯，另一个就是如果选项位置过于紧凑，用户可能不知道每个标签到底对应哪个按钮。

除了列表要垂直布局，标签也需要很简洁。标签越长，用户需要花费更多的时间和精力才能了解整个列表。

提供默认选择

想象这样一个使用场景，我们下载了一个新的设计软件，第一次打开时跳出一个弹窗，提示我们是选择经典布局，还是个性化布局，但是我们对这个软件不是很了解，可能并不清楚这两个布局到底是什么样子。

最后

最后为大家精选了单选框设计样式资源，学习好的单选框设计风格和样式，获取最新的设计灵感！

关注公众号后台回复【单选框】获取设计文件。

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

作者：Clippp

转载请注明：学UI网》好的单选框设计具备哪些特质？把握住这些知识点！

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

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

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

1、中性色色值为什么要使用透明度？ 

有细心的用户发现，在 Ant Design 的设计规范里，中性色色值可以按照透明度来设置，见下图中性色色值表（百分数代表不透明度）：

平时大家似乎更喜欢使用 #333333、#666666 这种色值，那使用透明色有什么优势呢？

我们知道，中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线等场景中也非常常见。产品中性色的定义需要考虑白色背景以及有色背景的差异，同时结合 WCAG 2.0 标准。

现在  Ant Design 的色板中，透明色模式和实色模式都是有的。透明度模式可以做到背景色兼容。

如下图示例，我们以颜色 gray-6 为例，这个颜色在实色模式的色值是 #BFBFBF，透明色模式的色值是 000000-25%。两者在白色背景上的颜色完全相同，但是在灰色或其他颜色的背景上，却有明显差别：

因此在透明色模式下，以中性色为主的前景色，会与背景色有一个更明显的色彩对比，对背景的兼容性也会更好，保证内容的可读性。

Ant Design 提供了透明色和实色两种颜色模式供用户选择，也会使组件更具通用性。

2、组件和设计师之间的关系是？ 

当下很多常见的、优秀的组件库，都为设计和开发的工作提供了便利。

那么使用组件库可以替代设计师么？组件和设计师之间的关系又是什么呢？我个人观点如下：

1 . 组件是「效率」工具

组件是工具，用来为设计师和开发提升工作效率。所有组件库的初衷都不是要替代设计师，而是要提高整个团队的工作效率。使用组件可以从两个方面提效：

（1）工作内容上：可以将不必要的、重复性劳动的时间节省出来

（2）工作流程上：便于设计师与前端开发做交接和协作，节省沟通成本

2 . 组件是「质量」保障

使用组件做设计稿，可以在一定程度上保证工作质量。组件规范了前端和设计师的工作方法，建立相对底层的系统，设定了设计和开发的质量底线。

基于组件规范设计和开发的产品更容易具备：

（1）一致性：具备相对一致的表现样式，设计风格和交互体验上均可保持统一

（2）可用性：对于用户操作，可以保证最基本的可理解性和可操作性

（3）审美性：符合基本审美标准，虽不会很亮眼，但也不会很难看

3 . 设计师要「沉淀」业务组件

设计师可以尝试沉淀有针对性的业务组件。很多业务领域有其独特性，比如金融类组件和政务类的产品页面列表内容就有很大区别。单一的元素组件在应用的过程中可以被再次组合和沉淀。

举个例子，我之前在做业务需求设计时，相比于 AntD，其实更常用的是 TechUI —— 它是建立在 AntD 基础上的、由我们蚂蚁的设计师通过对业务需求的提炼、组合和封装，做成的一套属于蚂蚁自己的【业务组件】。

再总结下二者的区别：

– Ant Design：是所有人的，是通用的，是单一的原子级别的（比如一个输入框）组件。

– TechUI：是蚂蚁自己的，是私有的，是组合的区块级别的（比如一整个表单）组件，更具备蚂蚁集团自己的业务属性。

针对你公司不同业务类型，沉淀出不同种类的区块级别的组件，这类组件使用起来也会更加得心应手、加倍提效。这也是 B 端设计师可以去学习和精进的一点。

4 . 设计师要「洞察」业务诉求

使用组件可以让设计师把节约出来的时间和精力放到更多有价值的工作上去。作为 Ant Design 的设计师之一，坦白的说，即使你的设计稿全部使用了 Ant Design 的组件搭建，最终的页面效果也仍不完善，在用户体验上始终可以更进一步。

设计师应该更多去关注对用户需求和业务逻辑的深入挖掘，不仅仅是在界面细节的表现手法上下功夫，还要学会站在全局，用系统性思维看待每一个项目，为整个产品的系统流程做优化，做更全面的产品体验升级。

原文链接：长弓小子（公众号）

作者：元尧

转载请注明：学UI网》工作经验｜ B 端产品组件设计细节及经验分享（一）

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

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

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

1.明暗是影响质感的最关键因素

我们来看一组对比，左侧是原作，右侧是星友的练习作品：

很明显，练习作品的质感没有原作好，其中最重要的一个原因就是，原作的明暗交接线非常清晰，明暗对比很强烈，而练习作品就会有点平。

很久之前做的这个作品，当时看起来还可以：

但现在一看，也是缺少明暗对比，导致整体质感差了很多，人家下面这种在明暗方面就对比很强烈：

所以，质感看起来就杠杠滴！

再比如下面这组对比，上面的是原做，下面的是临摹：

我觉得临摹的要比原作好，我们看底部对比，下面那个底部暗部足够暗，形成强烈明暗对比，整体质感看起来就很舒服。

兄弟们，这个明暗非常重要，要牢记啊！

2.边缘光的重要性

再来说一个影响质感的因素——边缘光。

我们看下面这个对比，左侧为网上原作，右侧为练习作品：

能看出来什么问题吗？右侧是不是和背景糊在一起了？如果，主体都和背景糊在一起了，那层次肯定就不够，整体效果也就差了很多。而这一切的问题都是因为没有加边缘光导致。

其实以前做项目的时候，我也遇到过这类问题，比如这个页面，最开始也是主体和背景糊在一起：

后来加了一点边缘光，调整一下灯光色调：

效果立马就好多了。

其实很多作品，都是带有边缘光的，这光一加上，立马就感觉高级很多：

是不是，兄弟们！

3.前中后景的三个层次

下面这组设计是十豆三同学做的：

最开始做的更新是比较常规的火箭，后来用品牌形象加飞船元素改了一版，更加有创意和特点了。

但是这里我们来说下后面这张图的不足，我会觉得主体和背景衔接的还不够自然，如果我们把画面分成前中后三个层级，这个画面就缺少了一点中层的内容。

我也经常做这种类似的画面，比如这种：

如果说黑色是背景，白色形象是前景，那么背景上面的这些元素就是中景：

这个中景是提高画面整体质感的关键因素之一，非常重要，不可忽视！

再比如这个画面：

也是在中景加了一些图形和鸡蛋，让整体画面更加丰富，层次更加清晰。

总结

好了，以上就是我经常使用到的提升设计质感的小方法，希望可以帮助到大家，么么扔！

01 对比色配色实操

本次提取上期“对比色配色”理论篇讲解的部分文案，进行配色的实操演示：

方案一

在PS中新建文件，背景选择蓝色。

英文放大铺满背景，并加入边框。颜色选择蓝色的对比色红色。（英文字体：Champion)

新建图层，填充白色，用套索工具画出不规则选区。

点击“添加图层蒙版”按钮，给图层添加蒙版。

选择蒙版，执行“滤镜-滤镜库-喷色描边”，得到不规则的撕纸边缘效果。

复制一个新图层，填充红色，向上错位移动。

在白色图层添加“图层样式-投影”，撕纸效果就制作好了。

复制“文字”和“矩形”图层，移动到红色图层上方，填充蓝色。

按“Ctrl+Alt+g”建立剪切蒙版，让文字只在红色图层范围显示。

把蓝色字改为白色，白色是万能的调和色，可以缓冲蓝红对比色强烈的对抗性，也可以让作品更加透亮。

最后加入文字排版和纸张褶皱效果，设计完成：

方案二

使用AI进行制作，颜色选用对比色紫色和绿色搭配。（英文字体：Current）

给英文创建轮廓，取消群组。

使用直线工具画出一条分割线，使用“路径查找器”中的“分割”功能，把字母切割开

取消群组，右键选择“变换-旋转”180度，调整两个色块重合。

执行“效果-风格化-阴影”加入阴影。这样得到了折纸效果：

使用相同的方法制作出其他字母：

最后加入文字排版和纸张褶皱效果，设计完成：

方案三

继续使用AI进行制作，把所有英文放置在画面中。（英文字体：Current）

颜色选用黄、蓝、红的三色对比色进行搭配。

最后加入文字排版和纸张褶皱效果，设计完成：

可以尝试新的配色方案，

此方案颜色选用橙、绿、紫的三色对比色搭配。

本期使用的字体、样机、源文件，请关注微信公众号：艺海拾贝Design（ID：YHSBds），公众号主页回复“对比色”获取下载链接。

优秀作业展示

01 NoctilucaGladys

02 风少

03 沕风

04 龙娟（2张作品）

05 七陌

06 Joyce

07 蛋蛋DAN

08 珞影随行

09 咪奥mao

10 小孔呀

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

作者：邓海贝

转载请注明：学UI网》用好“对比色”，让你的设计更有吸引力！（实操篇）

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

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

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

什么是《请回答》

项目背景：

如何打造有温情的品牌活动呢？

01品牌的延续

 

02主视觉传达温情与品牌

 

03核心玩法渗透温情设计

  

  

 

04群像故事海报传播，扩大影响力

项目总结

文末点击原文地址 可观看教程视频；

今天用另一种角度

教大家三角构图的实用方法

▽

用三个点所相连成的线称之为三角构图，看似简单，实际该如何运用？

第一眼看好像没什么问题，但是由于文字的分段较多导致内容层级不明显，阅读上会出现断层和不够直观的体验。

三角构图作为层次空间的搭建者，将数字、主题、信息、时间利用三角的结构进行了分层以及信息主次和布局的整理，让大众可以清晰直观的看到想要体现的利益和重要顺序。

两者之间的对比一下，是不是右边的也更有设计感一些。

物体之间的三角构图，一个奥特曼放在画面中，看上去有些孤单，主要是怕万一打不过怪兽。

根据三角的结构和方向性，依次左右放置更多的物体进行组合，再放置主标题，这样是不是既显得有层次又看起来内容丰富一些呢。

可惜80、90年代人最美好的童年回忆也终将逝去，某些家长不相信光，把教育不好的锅丢给了奥特曼，可奥特曼又有什么错了，他只是单纯的想保护地球。

教程步骤

刚才这两个示例都是拆分式的讲解，如何在实际设计时完整的使用？

设计一张海报时，放置物体和文字，这样的结合看起来是不是有点单调且缺设计感。

一、解决层次和空间

根据三角构图，用刚才奥特曼的方式依次将物体有序的以三角构建的方向组合罗列。

将文字做出透视感放置到物体脚下，增加质感让文字贴合到背景中。放置一些城市元素在物体身后，这几步的操作都是增加远景以提升空间感。

二、解决画面的融合和完整度

调整整个画面包括物体的质感。

将主标题放置画面时，主标题区域与下面物体还没能很好的融合在一起，我们可以将主标题以扇形或者同以三角构图的方法展开结合到画面中，这样一来，视觉的完整度就有了很大的提高。

到这很多人可能就做完了，但其实还缺点睛之笔，我们发现人物的视线是直视着画面前方，可以利用这样的引导，增加一个兵乓球在视线前方，让画面具有一定的律动感和视觉的穿透力。

我们再对比下前后的效果。

这就是今天带来的三角构图方法，视频完整版内容都在我最新的直播课程当中。

原文地址：修先森撩设计（公众号）

作者：修先森

转载请注明：学UI网》版式技巧 | 不一样的三角构图技巧

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

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

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

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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务