回到设计没思路系列，  今天我们讲四角构图！

▽

1、构图：

首先构图本身是一切图文编排困难的良药，而四角构图是构图技巧中的其中一种。

四角的构图版式最显著的特征就是将标题内容编排到四个角落

诶！这不是四饼吗？

而传统的四角构图原本是将文字信息有主次的编排到四周，而这种也是目前很常见的一种排版手法， 再将主视觉放置到版式中心，以此满足平衡稳固的构图作用。

如果听不懂没关系  我们以天官赐福这四个字为示例，将文字拆分放到版式四角，并改变字体与大小，最后将主视觉图像放到版式中心，就可以得到一个最初的框架形态。

2、排版

当理解了构图的原理，将文字通过信息分层梳理排版

解读主标题的文字沿用到配色上，选出绿色和橙黄色，将绿色填充至底色，再将黄色填充至文字色，这样主题的文字在背景中就会比较醒目。

再放置主视觉图像，这样前期的构图与排版的形态就塑造完成。

3、融合

接下来就是要解决物体融合、塑造质感、视觉分层的后期阶段。

我们来看看最终整个海报的设计全过程

▽

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

作者：修先森

转载请注明：学UI网》排版良药 | 图文不会排？试试四角构图

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

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

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

案例实操

说到设计海报，一般需要明确的就是主体，主标题和文本信息，需要根据重要性依次进行刻画，显然主体→主标题→信息处理按这三个步骤依次处理一个比较常用的思考步骤，如果没有处理好前面的，就开始盲目去优化后面的，可能就会使画面的视觉逻辑出问题。

我们开始实操，这里先将文案整理好，简单的做个层级划分。

接着我们去构思整个版式的布局，将大概的信息位置放好，也就是明确它们的主次位置大小关系。

前面说了是用文字“爆”作为主体，那么我们先来处理它，这里需要用到Ai里的效果→扭曲和变换→收缩和膨胀，选择收缩。

很容易我们就可以做出下面这个效果，而且符合爆的感觉。

然后我们加入英文BOOM，爆的后面放入用粗糙化做的效果，增加叠压关系。

接下来就是刻画小信息啦，信息之间要有对比，加上相应的符号搭配，这里为什么信息下面要加上色块呢，一般这种除了统一之外，如果背景比较复杂的话，加入色块不会影响识别性。

最后把剩余的信息放到画面中相应的位置，大小关系处理好。

或许上面黑白识别性不太好，那么我们来配个颜色，加入样机效果，这个设计就完成啦。

最后总结

本期教程到这里就结束了，做设计需要的三个大步骤记住了吗，赶紧试着去做一下吧，也希望文章给了你亿点点思路，大家一起努力进步！

原文地址：设猎派（公众号）

作者：设猎派

转载请注明：学UI网》这三步来做海报设计，思路才清晰！！！

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

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

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

福特创始人亨利·福特本人也十分喜爱小动物，将公益融入企业发展，践行企业社会责任，这正是一个伟大品牌的开始。

CEGC在中国已经有20年的历史，1983年首次在英国成立，2000年进入中国，而福特汽车进驻中国是在1995年，因此CEGC几乎是和福特品牌一路同行至今，有着久远的历史足迹。

全新标识CEGC分别代表了四个形象象征：

C：陆地 — 雪豹 — 勇敢的精神
E：天空 — 斑头雁 — 自由而博大的胸怀
G：水 — 江豚 — 生命的起源
C：万物的尺度 — 人 — 深邃的爱

新的品牌形象，从定位、结构，以及LOGO的色彩进行了全新的设计，从不同空间构建品牌价值观念。

福特公益多年来为改善地球环境做出努力，保护生态平衡，CEGC的内涵则是代表了区域性的生态、生物多样化繁荣发展。

做任何一个公益项目，不是随着一次评选活动结束而结束，环保项目应当是可持续的走下去，走得更远。这次的品牌升级将助力福特汽车环保奖朝着更崭新的阶段迈进。

CEGC的设计理念，最终可以表达为，信息传达与艺术的完美统一。

让品牌有最清晰的识别力，代表生物多样性。

CEGC不仅是视觉上的感受，希望以此也能带来行动上的力量，让设计的意义变的最大化，最终为品牌带来最优的价值。

新的定位：

支持系统性变革、支持优秀民间环保力量可持续发展、保护生态资源与物种多样性，在新的升级中，重练品牌的核心价值。

为公益品牌服务，贺冰凇团队一直是践行于实际帮助的，通过设计和艺术给这个世界带来更好的一面，希望借此，吸纳更多的力量，为环境保护发挥更大的作用。

©注：设计中使用的人物图片皆来自CEGC官方公益项目资料，均有署名，仅供学术交流和作品呈现，不作任何商业用途。

原文地址：站酷

作者：贺冰凇

转载请注明：学UI网》「福特汽车环保奖」升级LOGO，贺冰凇作品！

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

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

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

准则 1.  Timely —— 找准时机，即时反馈

在用户操作后尽快 / 立即给予反馈是最有效的。即时反馈有助于帮助用户养成正确的操作习惯，或纠正用户的不当操作。

如果反馈内容需要较长时间的加载，也可以给用户设计一些有特点的 / 情感化的加载状态，缓解用户等待的不耐烦，又可以传达一定的品牌调性。

例如：知乎 App 在加载内容的过程中，增加了 IP 形象的动态效果：

准则 2.  Specific —— 具体分析，差异对待

在设计交互反馈时，不仅仅要给出正确或错误的判断结果，同时也应该考虑到用户的个性化需求，针对不同类型、场景、地区的用户提供差异性引导和服务。

例如：大众点评、高德地图可以根据用户的位置，在用户开始使用产品时就推送个性化信息：

准则 3.  Balanced —— 正负反馈，穿插结合

通常来说，正面的反馈会激发用户的自信等积极情绪，因此我们更习惯使用正面反馈。但是一些不得不使用负面反馈的时候，我们可以在其中穿插一些正面的消息，减少或缓解用户的因负面反馈带来的消极情绪。

这就好像是别人跟你说：“ 坏消息是……，但是，这样做的好处是…… ”，坏消息不可避免，但加上一点转折，就会让他人心里稍微舒服一些。

例如：美团单车在你骑完车之后，需要支付费用时提示你可以购买单车套餐，虽然是在劝用户花钱，但看上去依旧很友善，其中的话术包括：“本次骑行免费”，“当前已是最优价格”：

准则 4.  Instructive —— 提示下步，指引行动

有效的反馈会主动多引导一步，对用户的下一步行动给出清晰的、正确的、指导性的意见，有助于驱动用户继续做出有效操作。

很多 App 在截屏之后都会给出下一步分享的路径引导：

准则 5.  Emotional —— 情感属性，引起共鸣

有科学依据证实，人脑会更容易被附带情绪的信息所吸引。用户更有可能会注意那些看上去承载了一些情绪的反馈，从而也更有可能改变其行为方式。

例如：虽然只是一个提醒弹窗，QQ 音乐会员到期的续费提醒文案却经过精心的设计，由各类歌名组成的一句话，每天的到期提醒都不同：

准则 6.  Traceable —— 可被溯源，可供反馈

一些特殊情况下的、有重大意义的反馈可以被追溯到其根本原因，可以提供给用户进行申诉和询问的渠道，供用户进行反馈。

例如：电商平台和外卖平台都会在用户下单或退单之后，提供商品物流的详细信息，在查看购买的商品的当前状态时，并可以追溯到商品所在的各个历史环节：

再比如，高德打车如果发现用户的行程订单金额与预估金额差距较大时，会给用户发短信提示，并给出客服和投诉渠道：

准则 7.  Less is more —— 质量优先，减少数量

在这个信息过载而注意力稀缺的时代，好的反馈在于质量，不在于数量。有时数量越多，反而会对用户造成不必要的负担。用户并不需要给出很多反馈或者记录生活中一切信息的产品，而是需要能够帮他们理出头绪、提出有效解决方案、呈现有用信息的产品。

以上这 7 大准则，来源于我们日常工作中的积累和沉淀，对于设计产品的交互反馈具备较高的指导意义，希望对你有启发。

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

作者：元尧

转载请注明：学UI网》干货｜交互设计中的「有效反馈」7大准则！

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

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

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

01.背景

运营设计主要包括日常运营（以介绍产品为主）和活动运营（通过促销或游戏的形式，拉新促活），其目的都是要吸引用户关注，实现流量的最大化，最终完成商业目标。

那设计出好看的画面吸引用户就是运营设计中的核心了吗？

答案肯定是不确切的。画面的呈现只是吸引关注的第一步，信息的传达才是保证用户驻足的关键。随着获取信息的便捷，人们对信息的关注越来越碎片化，甚至只关注标题，所以标题的呈现无疑是运营设计中的核心关键。

a

02.神器诞生

标题设计有很多具体的方法，但随着用户对信息清晰度的更高要求和审美疲懒，装饰过多或者变化过多的标题已不再流行，取而代之的是言简意赅、辨识度高的，更像是“没有设计”的标题设计。在日常的设计中，设计师通常采用合适的字体再通过变形等设计手段，使标题字更有品质感。如果可以直接使用一款字体，既能够清晰表意且兼具个性，又能够节省设计师创作的成本，这无疑是标题设计的首选方式。

字体作为信息传达的核心因素，能够起到统一品牌理念和精神的作用，正是58设计团队当前探索的领域之一。就此，58UXD设计团队的首选原创字体——微笑体诞生了！这款字体在表达企业精神的同时，兼具清晰且个性的特征，并为设计师减轻了工作中标题字体设计的负担！

微笑体诞生

f

03.品质提升，效率UP

· 微笑体是为标题而生，它可以满足运营设计中的绝大部分场景，应用于不同的表现形式

1）轻量化设计页面中，增加简单效果，就具有一定的设计感

招聘业务线活动banner

58到家-saas系统系列海报

2）需要突出标题品质时，可增加层次感或立体质感

58到家-“城市黑盒”活动画面

3）配合3D设计风格时，亦能发挥其厚重优美的字形

2021春节运营活动-房产/招聘/二手车主会场画面

· 应用广泛，统一集团品牌感

发布近半年，微笑体已应用到58平台各类运营设计中，并在集团各渠道发挥作用，成为58对外展示的品牌特质之一

58到家线下店内海报

58同城招聘业务日常活动

58同城平台日常活动

58同城校园招聘

员工福利-蜂蜜礼盒

自5月8日微笑日发布微笑体字库后，主创团队不断优化微笑体，更新完善了含有3627字的字体包。在UXD自主研发的两款运营页面设计平台——斑马智能物料设计审核平台和灵动编辑器中，微笑体已嵌入使用，为运营设计师提供更加便捷的工作方式，为运营工作提供高效且高质量的输出环境。

灵动编辑器

w

04.持续赋能

微笑体在工作中运用的成功，一定程度上解决了运营设计的核心部分。当然一款字体是无法覆盖所有的应用场景的，运营设计需要丰富多样的视觉呈现，需要标题字和其他文字信息以及画面共同完成。

在设计微笑体之初，58UXD组建了专门字体工作小组——Fontwork造字计划。团队本着提升58企业品牌的初心，为设计工作提效的目的，启动了字体设计的第二波征程。为补充微笑体的使用空缺，同时为满足更多的使用场景，第二款字体的字形确定为有设计感的正文字体。

第二款正文字体已征集完毕，在四十多款参赛作品中确定了一款字形，该字体目前正在如火如荼的设计中，待与大家见面时再解开它神秘的面纱～

字体大赛作品展示

e

05.结语

为了给用户持续不断的新鲜体验，为了适应不断变化的流行趋势，高品质的运营设计目前还是主要依靠人力完成。合适且优秀的字体解决了运营设计工作中的一部分问题，如何在保证设计质量的同时，提高效率，优化工作方法将会是我们不断探索的方向。

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

作者：环铁艺术家

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