搜索
免费下载
设计灵感
设计规范
👑
充值会员
流体渐变
渐变配色
色彩搭配
注册
登录
首页
探索
素材分类
AI绘画
AI工具导航
素材专辑
UI设计
APP设计
原型demo
GUI
小程序界面
网页UI
网页设计
原型demo
软件设计
字体下载
衬线字体
非衬线字体
圆角字体
手写字体
网页字体
图标字体
书法字体
交互动效
加载loading
转场动效
ICON图标
面性图标
线性图标
拟物图标
2.5D图标
卡通图标
像素图标
按钮图标
多色图标
活动图标
插图/插画
扁平化插画
多彩渐变插画
2.5D插画
样机贴图
手机样机
名片样机
动画样机
电脑样机
笔记本样机
穿戴设备样机
UI作品样机
设计导航
首页
探索
素材分类
AI绘画
AI工具导航
素材专辑
UI设计
网页UI
字体下载
交互动效
ICON图标
插图/插画
样机贴图
设计导航
想版面统一?用这九种手法盘它!
搜UI
>
文章/作品
>
设计教程
>
设计规范
© 共享素材,请勿商用
举报
[db:内容描述]
电商
版面
画面
手法
统一
UI教学
发布时间:2020-05-26
关注
网站或者淘宝详情页的那种长图怎么设计能好看?我们在之前的分享里是经常强调设计规则的普适性,看似是不同品类的设计作品,其实这里面的绝大多数规则都是在其他的品类中同样适用的。如果说有不同的话,这里面的不同,也只是侧重点有一些不一样而已。
1550481868156229460.jpg
(122.32 KB, 下载次数: 0, 售价: 4 U点)
比如说这个问题里提到的长图,想做好,视觉的统一性在这里起到了主导的作用,不光是长图,其他的海报、画册、DM 甚至空间装饰等都是一样的。统一性能做好,这个设计才能算及格。什么是统一性既然统一性这么重要,那么什么是统一性呢?用一句话来概括,视觉的统一性指的是各个元素之间明显的和谐一致。也就是说,统一意味着协调一致。在同一个框架内,元素之间没有做到这种协调一致的话,设计作品就会变的支离破碎。如果有人说你的设计做的很乱,那90%的问题就是出在统一性上。
1550481869174020614.jpg
(163.91 KB, 下载次数: 0, 售价: 3 U点)
打个比方,在高冷的狼群中,出现了一只哈士奇,就算它长得和狼很像,但是给人的感觉还是怪怪的,这就是不协调的元素乱入,给我们带来的直观印象。包括别人开会穿正装,你穿着拖鞋、大裤衩就去了,效果也是一样的。统一性的作用了解了什么是统一性,下面我们再来看看统一性的作用有哪些,主要的作用有4点。? 1. 规律与秩序带来美感
1550481869143652012.jpg
(105.4 KB, 下载次数: 0, 售价: 3 U点)
由于所处环境的影响,人类天生就对统一、秩序有着很深的偏爱。就像松塔、向日葵、多肉植物,研究过比例的同学应该知道,他们的生长轨迹都是按照黄金比例来走的,这种美学比例带来的统一性就会很自然的给我们带来美的享受。? 2. 通过统一性引导视觉引导视觉和我们人类的视觉习惯有关,通过统一性可以把相似或者处于同一层级的设计元素联系到一起,能够优化信息向外传递的效率与清晰度。
1550481869104791905.jpg
(72.49 KB, 下载次数: 0, 售价: 3 U点)
像书籍杂志的目录,用简单的大小对比,梳理好这里面核心内容的层级关系,就能让读者更快更清晰的了解这些内容。? 3. 加深用户印象
155048187077854369.jpg
(58.63 KB, 下载次数: 0, 售价: 2 U点)
这点是品牌视觉形象的统一性,通过某种视觉元素的不断重复,能够加深受众对品牌的印象,在这里给大家看一套 VI,还是很容易理解的。? 4. 节省时间提高效率
1550481870214403100.jpg
(122.78 KB, 下载次数: 0, 售价: 6 U点)
统一就意味着这里面存在重复。让我们做这种变化很多的设计容易,还是做这种有规律有秩序的形式容易?各种炫酷的效果加进去还是挺累的,右边的这个就简单的多,相信大多数人都会选这种简单的对吧。提升统一性的九种方式构成版式的常见元素:字体、文字组、图形、图片、背景,如果能把这些元素统一性增强,就可以避免大部分版面混乱的问题,那么如何强化这些元素的统一性呢?这九种方式就能帮到你,大小、重量、间距、方向、对齐、色彩、形状、布局、风格。下面我们来了解一下这九种方式在设计中的应用。? 1. 大小在这些方式里,用控制设计元素大小的方式来强化作品的统一性,应该是最简单常见的。
1550481870195373124.jpg
(34.22 KB, 下载次数: 0, 售价: 3 U点)
看这组文字,文字的大小参差不齐,有的人这样做可能是为了强调这里面的关键内容,但是这种形式的变化就会造成文字组参差不齐,产生很多没有必要的负空间,让文字组变碎。把这样一组文字填充到版面中,这种不和谐会更突出。
1550481870212200184.jpg
(43.64 KB, 下载次数: 0, 售价: 6 U点)
如果调整成右边这样,统一性就会好很多了。设计要局部服务于整体,不能每个小局部都做很多变化,变化多了就会难以控制,控制不好整个版面就会混乱。文字以外的元素同理,这是版面中元素大小的统一。? 2. 重量
1550481871165611648.jpg
(53.2 KB, 下载次数: 0, 售价: 1 U点)
注意看这组文字,他们放在一起给我们的感觉是统一的吗?不是,他们的粗细度都是不一致的,如果一个版面中存在着大量的粗细对比,统一性就很差了,这也是很多同学没注意的地方。
1550481871122362158.jpg
(63.95 KB, 下载次数: 0, 售价: 6 U点)
为什么大部分常用的字体都会有字体家族,这些不同粗细的字体就可以帮助我们控制字重。在处理文字组的时候,字重要调整匀称,比如这个文字组,已经出现大小对比了,我们再做字重对比,对比就太多了,对比过多就意味着混乱、难以控制,把它们调整匀称就可以了。? 3. 距离
15504818716652669.jpg
(30.78 KB, 下载次数: 0, 售价: 3 U点)
了解了重量的均衡,再来看看间距统一和没有秩序的有什么区别。
1550481871161856186.jpg
(79.99 KB, 下载次数: 0, 售价: 3 U点)
如果在版面中同时出现了多组文字,有的人就会忽略这个细节了,特别是在这些文字处于同一个层级下的时候,更要注意。
1550481872170616289.jpg
(121.77 KB, 下载次数: 0, 售价: 2 U点)
字与字是这样,同一层级的文字组之间的距离同样是这样,包括图形、图片,道理都是一样的,看似简单的距离统一,同样重要。? 4. 方向
1550481872159279484.jpg
(109.77 KB, 下载次数: 0, 售价: 6 U点)
方向的统一,这个好理解,同一个层级下的几组文字,或者把它想成单独的文字、图形、图片也可以,他们在版式构成中的方向要是统一有规律的。
15504818727769492.jpg
(111.36 KB, 下载次数: 0, 售价: 1 U点)
如果版面中加入这种不稳定的形式,就会变得很难控制。? 5. 对齐
1550481872108965610.jpg
(24.98 KB, 下载次数: 0, 售价: 3 U点)
还是以文字组为例,常见的对齐方式就是左对齐、右对齐、居中对齐,在同一组文字中,相同的对齐方式很自然的会带来统一的感觉。
1550481872135163864.jpg
(40.13 KB, 下载次数: 0, 售价: 6 U点)
就算在这些文字组的基础上,加入其他的图形或者图片,让这些所有的元素进行对齐,整个的结构仍然会很和谐。
15504818729792922.jpg
(79.05 KB, 下载次数: 0, 售价: 6 U点)
反过来,就算是同一层级下的文字组,我们保证了大小、重量、距离和方向的统一,如果对齐的方式不一致,也会破坏版面的统一性。? 6. 色彩色彩的统一性也很好理解,像我们做设计,一般不会把文字弄得五颜六色的对吧?包括版面中背景的颜色,使用单一的颜色或者近似色都是比较好控制的,颜色越多,越难控制,想做出统一的感觉就越难。? 7. 形状
155048187393496140.jpg
(95.12 KB, 下载次数: 0, 售价: 1 U点)
这个形状的统一性我们可以拿图形、图片来做例子。圆形、椭圆、方形、菱形、三角形、多边形很多基础的形状,在这些形状中置入图片,就算图片一样,统一性都不见得有多好。
155048187354824721.jpg
(115.99 KB, 下载次数: 0, 售价: 3 U点)
更何况在多数情况下,这种置入的图片都是不一样的。我们在统一的形状框架内使用图片,就可以有效的避免这个问题,让图片或者图形,形成秩序,保证图形图片元素之间的和谐统一。? 8. 布局布局指的是所有的设计元素在整个版面中的合理布置安排。这种布局和上面提到的设计元素的大小、方向、距离、对齐等等都有关系,是对他们的一种统筹组合。特别是网页长图,布局的统一会节省我们设计师很多的时间,也会让整个作品具有很强的统一性。通常使用网格来约束,控制版面中的这些设计元素会很方便。网格系统的使用可阅读→《高手的平面课堂!网格系统的入门基础知识+案例演示》? 9. 风格最后一点风格的统一,字体、图形、图片、颜色包括布局等等都会影响到风格统一。而且同一种风格,就有着极强的统一性。
简单来说,就像我们想设计类似无印良品的那种大留白的极简风格,就不能把作品做的和电商活动的感觉一样。这完全是两种风格的东西,使用的字体、图形、图片、颜色包括布局都会有很大的差异。至于选择什么样的风格,一般根据项目的主题和客户的要求来选就可以了。案例演示
这个网页作品的设计就遵循了上面提到的那9种方式,包括里面使用的设计元素也都在上面出现过,虽然里面使用的设计元素很多,但是他们看起来还是一个整体。对于这个案例,网格与风格的统一可以拿出来单独看看。
这里截取了案例中的一部分网格,可以研究一下网格与对应元素之间的关系,整个案例都是在这同一种网格框架下进行布局的,这样从布局上就能保证案例整体的统一性。包括这里面出现的图片,风格都基本趋向一致。统一与变化在设计的过程中,能够注意到上面这九点,就能让作品具有统一性,看起来、读起来很舒服。当然这种绝对的统一也会给人带来死板、缺乏变化的感觉,设计作品中是需要变化来调节的,不过这种变化也是在统一的基础上进行的。加入变化可以再得10分,变成70分的作品,但是你加入了变化以后,控制不好,这个分数很可能会变成50分,甚至更低,那可能就不合适了。
这就好比这张人脸,现在的状态很完美很自然,右下角还有一颗美人痣,统一和变化都很好。如果把这张脸变成左右完全对称的,很完美,但是就没有之前那么自然了。完全对称的人脸就是绝对的统一。
如果长成这样的话,就是变化太多的后果。
总结你说你这两张脸都不喜欢,就是想要这样自然完美的状态,其实不容易。长相看命,设计作品就要靠你个人的努力了。做人还是要现实一点,能做好统一,达到及格标准以后,我们有机会再聊聊这个变化的问题。转载于:https://www.uisdc.com/unification-of-layout-design
UI教学作品
想版面统一?用这九种手法盘它!相关作品
收藏
APP设计
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
其他设计规范
最新素材
其他设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
Load More
最新素材
收藏
面性图标
收藏
像素图标
收藏
线性图标
收藏
线性图标
收藏
多色图标
收藏
面性图标
收藏
书法字体
收藏
书法字体
Load More