【设计基础】点&线&面在设计中的应用案例最全讲解

用户头像
北京/UI设计师/1年前/345浏览
【设计基础】点&线&面在设计中的应用案例最全讲解
【前言】
点、线、面是视觉艺术构图的三要素,分别对应不同层级的视觉元素和功能。
点,作为基础单位,通过微小形态平衡和活跃画面;线,通过动态延伸连接、分割空间;面,以大面积占据形成视觉核心,三者互相配合,共同构建视觉层次与美感。
本文将通过实际的设计案例,正面与反面案例讲述 点、线、面 & 体积 & 材质 如何在视觉设计中发挥作用。
【目录】
1.点在设计中的作用
(1)视觉焦点 (2)信息引导 (3)节奏感
2.线在设计中的作用
(1)分割与组织 (2)方向引导 (3)情感传达
3.面在设计中的作用
(1)内容容器 (2)视觉层次 (3)情感表达
4.体积在设计中的作用
(1)立体感营造 (2)交互暗示 (3)空间层次感
5
.材质在设计中的作用
(1)质感传达 (2)情感共鸣
一.点在设计中的作用
1.视觉焦点:点是设计中最小点元素,能快速吸引注意力,成为视觉中心
【设计基础】点&线&面在设计中的应用案例最全讲解(图ZMTUwODU5MzY=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
(图片来源于网络)
收藏
【设计基础】点&线&面在设计中的应用案例最全讲解(图ZMTUwODU5NjQ=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
(图片来源于网络)
收藏
2.信息引导:通过点的位置和密度,引导用户视线流动
3.节奏感:分散或聚集的点可以形成节奏感,如背景中的装饰性点阵
【UI设计中的 “点" 案例】
【设计基础】点&线&面在设计中的应用案例最全讲解(图ZMTUwODU5ODg=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
【反面案例】京东 淘宝
页面中存在大量色彩鲜明的“点”元素,这些点没有起到聚焦作用,反而成为了视觉噪音,让焦点无法集中,观看杂乱且浮躁
【正面案例】小米有品 宜家家居
对点和色彩的运用是克制而有逻辑的,让“点”元素称为视觉焦点,整个页面显得清爽沉稳
【设计基础】点&线&面在设计中的应用案例最全讲解(图ZMTUwODU5OTI=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
二.线在设计中的作用:
1.分隔与组织:线条可以划分区域,提升内容的可读性
【设计基础】点&线&面在设计中的应用案例最全讲解(图ZMTUwODU5NDA=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
(图片来源于网络)
收藏
2.方向引导:线条的方向暗示视觉动线,引导用户浏览路径
【设计基础】点&线&面在设计中的应用案例最全讲解(图ZMTUwODU5NDQ=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
(图片来源于网络)
收藏
【设计基础】点&线&面在设计中的应用案例最全讲解(图ZMTUwODU5Njg=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
(图片来源于网络)
收藏
【设计基础】点&线&面在设计中的应用案例最全讲解(图ZMTUwODU5NzI=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
(图片来源于网络)
收藏
3.情感传达:曲线柔和,直线硬朗,虚线轻量
【设计基础】点&线&面在设计中的应用案例最全讲解(图ZMTUwODU5NDg=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
(图片来源于网络)
收藏
【UI设计中的 “线”案例】
【设计基础】点&线&面在设计中的应用案例最全讲解(图ZMTUwODU5OTY=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
【反面案例】
页面中存在过多粗细不一,颜色各异的线条,且存在感强,将空间分割得过于细碎,缺乏整体感
【正面案例】
线条粗细有一致性,起到对信息进行分组的作用,又不会显得过于突出
三.面在设计中的作用:
1.内容容器:面是信息的载体,通过形状和面组织内容
【设计基础】点&线&面在设计中的应用案例最全讲解(图ZMTUwODU5NzY=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
(图片来源于网络)
收藏
【设计基础】点&线&面在设计中的应用案例最全讲解(图ZMTUwODU5ODA=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
(图片来源于网络)
收藏
2.视觉层次:不同大小和颜色的面形成对比,建立主次关系
【设计基础】点&线&面在设计中的应用案例最全讲解(图ZMTUwODU5ODQ=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
(图片来源于网络)
收藏
3.情感表达:不同块面的外轮廓,色彩的组织给受众传达柔和或犀利的情绪走向
【设计基础】点&线&面在设计中的应用案例最全讲解(图ZMTUwODU5NTY=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
(图片来源于网络)
收藏
【设计基础】点&线&面在设计中的应用案例最全讲解(图ZMTUwODU5NjA=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
(图片来源于网络)
收藏
【UI设计中的 “面”案例】
【设计基础】点&线&面在设计中的应用案例最全讲解(图ZMTUwODYwMDA=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
【反面案例】
块面的颜色表现手法太多,且卡片数量过多,导致页面缺乏整体性
【正面案例】
块面表现手法一致,通过颜色,尺寸差异突出重点功能,页面井然有序
四.体积在设计中的作用:
1.立体感营造:通过阴影、透视、渐变等手法,在二维平面中模拟三维效果,增强真实感
2.交互暗示:体积感让元素看起来“可点击”或“可操作”
3.空间层次感:利用前后叠加的体块,增强界面深度
【反面案例】
对按钮体积感的塑造手法过于陈旧过时,配色生硬,整个页面风格不统一,拼凑感强
【正面案例】
界面中3D元素的运用和谐统一,体积感和光影感塑造真实,精致,有记忆点
五.材质在设计中的作用:
1.质感传达:材质赋予设计触觉联想,提升视觉丰富度
【设计基础】点&线&面在设计中的应用案例最全讲解(图ZMTUxMjQwMzY=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
毛绒材质按钮
收藏
2.情感共鸣:不同材质传达不同情绪
【反面案例】
过于追求对金属,发光材质的模仿,且手法比较拙劣,导致页面陈旧过时缺乏视觉重点
【正面案例】
界面中的3D元素的运用和谐统一,体积感和光影的塑造真实,精致,能形成记忆点
0
举报
|
1
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
【新年UI图标】银行卡icon
Security Camera UI kit
【新年UI图标】汽车icon
手表表盘UI系列
钱包ui模板
UI界面 组件
【新年UI图标】游戏/娱乐icon
UI 登录界面设计模板包
【新年UI图标】优惠券icon
3D渐变流体抽象矢量UI背景图
拟物风质感写实UI卡片合集源文件
高级感金属拟物 UI设计组件库
科技医疗透明柜UI界面设计
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】30个图标
高级表盘系列UI源文件
新拟态风格 UI设计组件库
【新年UI图标】钱包icon
智能家居中心 简约 UI设计组件库
盲盒APP UI设计
UI应用平面图标
UI通用设计素材1
【新年UI图标】影音icon
你可能喜欢
相关收藏夹
地产VI
地产VI
地产VI
地产VI
大家都在看
登录注册