【UIDX · 笔记】VD-点线面-D2

-回复 -浏览
楼主 2019-01-16 02:42:55
举报 只看此人 收藏本贴 楼主

UIDX · 笔记

VD-点线面-D2

业余讲师Y

本文为2017年5月25日公开课随堂笔记

速记:加菲猫  整理排版:爽Yy

点,线,面

DOT  LINE  EDGE

何时使用

 • 界面有主体框架,但剩余大量空白需要填充时;

 • 海报,宣传图内容过少或单独摆放效果不良时;

 • 海报,宣传图需要强调艺术效果时;

 • 海报,宣传图内容过多导致画面凌乱时;

 • 设计作品展示时。


 • 产品摆放,背景装饰,界面展示排列。

使用的前提是我们学习使用界面效果必要的步骤,每一个效果都不能万用,每一个效果有相应的特征,平面构成在UI设计里并不是随时能用到,如果界面很紧张可能就用不到平面部分。 

使用重点

 • 图文分层清楚。

 • 重点颜色清晰。

 • 视觉引导流畅。

 • 画面布局简单。

图文分层清楚,也就是文字和图片传达的信息要清晰分开,能看清楚哪里是装饰,哪里是内容。 

装饰和文字混在一起,需要很费劲才能找到哪里是他想说的。

而这两个文字则很清楚。 

主要信息明显。
第二条,重点颜色清晰。在界面设计师手里面的平面设计,不能像平面设计师一样滥用颜色,平面设计师可以用很多富有冲击力的颜色效果。

比如这两个电影海报颜色层次非常多,尽管有主色。

或者是这种,追求视觉冲击力,橙黄和蓝绿混合。

更推荐这种颜色差别较小。对颜色搭配的能力要求,UI设计师是不高的。视觉引导流畅,什么是视觉引导。 

用红线串联产品,让你看到整个产品介绍的流向。有一些糟糕的模板图:

这个就是一堆,你没有办法知道先看哪里。

而这个就要好很多,向右指向,从左往右。
视觉引导流畅和三角形构图关系很紧密。

点构成

• 优点:丰富(多)/ 炫目 / 精细 

• 缺陷:画面琐碎,费时 

• 常见用途:装饰画面背景/多产品陈列/形容丰富 

• 常见排列方法: 

• 大小不同混合分布; 

• 排列成线; 

• 渐变成线; 

• 渐变成面; 

• 重影;

优点:丰富,眩目,精细,适合于电子商务,新品推出,活动展示,显示多,强调内
容丰富。
缺点:画面琐碎,格局不大,不够大气,很拘束。

三角形的点,散构,确实让画面很满,热闹。但是同时也让画面变得碎。

这个就没有碎的感觉,没了拘谨的感觉。
做画面的时候要有主意向,也就是看到画面的用户呈现出什么样的感觉。
装饰画面背景,点构成往往有以下几种方式:
点构成排列场景,散点形成阵列:

装饰背景: 

东西很全,气氛渲染的很好:

点构成,画面的灯泡,有机的形成了一个星星的形状,实际苏宁的logo,传达了品牌含意,夜空中彩色灯泡和霓虹,节庆游乐场气氛。三角形构图使得标题很醒目,从上往下看。 

大小不同混合分布: 

1.从远到进:运动感错觉。 

2.聚拢的效果,向中间汇聚。

3.和单纯文字相比美观很多。
排列成线:
往往带有线构成的特征,分割画面

4.渐变成线:

点的颜色或者大小逐渐变化

点渐变往往用于制造这种立体感。当点大小不同渐变变化会产生从小到大的运动感。

PS半吊图案,黑白渐变: 

重影:
电商常用,什么是重影?点重影,或造成强烈的运动感,蓝红,蓝粉重影极为常见。
造成运动错觉。颜色分解。

点远距离看会有很强的晃动感。运动模糊,点重合。点重合有一种特殊用法,不多
见,在做标志的时候特别好用:

混合产生的运动错觉。 

中间的大圆点,周围几个小圆点。点重叠构图。

平板做的像池塘,两个人踩着圆圈过来的。立意明确,而且这是一个典型的点构图。
但是他违反了画面构成简单的原则,看画面的人很有可能忽略小人。

线构成

 • 优点:流畅舒适/强烈动感/视觉引导明确

 • 缺点:画面单薄/不凝重/易扰乱视觉流

 • 常见用途:装饰画面背景/分割画面/连接画面元素使之更整体

 • 常见排列方法

 • 等距排列成面;

 • 不等距/弯曲排列成面;

 • 互相剪切;

 • 放射/汇聚

线构成优点:流畅,动感强烈,视觉引导明确,会让人觉得阅读没有攻击性。

画面简练,颜色鲜明,气氛渲染的很好。如果山和气球连接起来画面能更好,现在上下是割裂状态。
线构成缺点:画面淡薄,没有冲击力,不够凝重,容易扰乱视觉流。会让用户不知道看哪里。

连接画面。
装饰背景,分割画面,或者让画面有一个明确视觉指向的时候使用线构成。

同时顾及画面的平衡,线构成,直角线连接两个字,让字形成主体。如果我们想让他
柔和一些可能就会变成一个圆。

我们在线构成有四种常用的方法,等距排列成面,不等距弯曲排列成面:

形成立体感,但是还不够立体,真正立体的是互相剪切:

互相穿越,叠压。流动感,汇聚感。
最后放射和汇聚:

面构成

• 优点:正式/有重量/主次清晰 

• 缺点:死板/缺少冲击力/不能体现高水平 

• 用途:组成画面主要部分/产品摆放陈列/制造立体感 

• 常见排列方法: 

• 上下叠放; 

• 立体排列;

• 卷曲成形; 

• 阵列或阵列扭曲;

总结

• 点线面的应用应按照设计主题的方向来选择; 

• 应尽量收集和使用成熟手法;

• 构成必须保持一致,页面应统一使用元素和策略。


U I D X · 笔 记

公众号ID:UIdaXue_cn 

初级④群 618155161

每周二、周四晚8:30,免费公开课斗鱼频道:1839034


以上内容为Y总原创如需转载请注明来源

文章用图均为课程示例,无商业用途

欢迎【点赞】【转发】爽Yy在此谢过~


我要推荐
转发到