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

用户头像
北京/UI设计师/1年前/391浏览
【设计基础】点&线&面在设计中的应用案例最全讲解
【前言】
点、线、面是视觉艺术构图的三要素,分别对应不同层级的视觉元素和功能。
点,作为基础单位,通过微小形态平衡和活跃画面;线,通过动态延伸连接、分割空间;面,以大面积占据形成视觉核心,三者互相配合,共同构建视觉层次与美感。
本文将通过实际的设计案例,正面与反面案例讲述 点、线、面 & 体积 & 材质 如何在视觉设计中发挥作用。
【目录】
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
举报
|
2
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】30个图标
新能源APP应用UIKit
高级表盘系列UI源文件
我的钱包-UI界面设计-app
【新年UI图标】游戏/娱乐icon
【新年UI图标】珠宝icon
拟物风质感写实UI卡片合集源文件
UI 登录界面设计模板包
矢量立体简约UI蓝白图标
科技医疗透明柜UI界面设计
【新年UI图标】银行卡icon
盲盒APP UI设计
手表表盘UI系列
【新年UI图标】优惠券icon
UI界面 组件
新拟态风格 UI设计组件库
3D卡通UI界面图标可爱插画免扣素
户外旅行飞机情侣假日出行
Security Camera UI kit
【新年UI图标】钱包icon
UI通用设计素材1
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】影音icon
你可能喜欢
相关收藏夹
大家都在看
登录注册