进阶思维 | UI设计师必须掌握的四个设计原则

Recommand
成都/UX设计师/1年前/486浏览
进阶思维 | UI设计师必须掌握的四个设计原则Recommand
好的设计作品总是需要遵循一定的设计原则,而优秀的设计师则需要将设计原则根植于心,灵活应运于日常的设计中。通过对大量作品的揣摩和提炼,本文总结了以下四个在 UI 界面设计中至关重要的设计原则。只要仔细思考,反复推敲,必然会打通任督二脉,设计能力稳步提升!
一、对齐
二、格式塔设计原则
三、呼吸感
四、配图、图标精细化
进阶思维 | UI设计师必须掌握的四个设计原则
Collect
对齐即秩序、秩序即美
秩序,名词,意思是有条理地、有组织地安排各构成部分以求达到正常的运转或良好的外观的状态。
提取关键词:秩序、有组织、良好的外观状态。
生活中漂亮的建筑、整洁的街道、日常看到的事物无处不透露着因秩序带来的美感,给人以愉悦的感受。
进阶思维 | UI设计师必须掌握的四个设计原则
Collect
进阶思维 | UI设计师必须掌握的四个设计原则
Collect
UI界面设计中的秩序即对齐,相关的内容对齐之后,就为整体的设计奠定了一个良好的基础,不会杂乱无章,无从下手。
1. 不同内容的对齐需做到:
  • 文字与文字,文字与数字对齐
  • 文字与图片对齐
  • 图片与图片对齐
  • 不同内容模块之间相互对齐
进阶思维 | UI设计师必须掌握的四个设计原则
Collect
图 1 给人感觉则更加严谨、规律,视觉上也更加美观。
图 2 中对齐不够严谨,给人感受则完全不同。
2. 对齐需保持间距的一致性
UI 页面设计中,间距建议以 4 或者 8 的倍数为标准(设计图为 1 倍图),间距=Xa,a=4 或者 8;
进阶思维 | UI设计师必须掌握的四个设计原则
Collect
上图中微信左右间距为16pt,京东左右间距为12pt,均为 4 的倍数。因京东为电商平台,左右间距略小,可以给内容留出更多空间。
进阶思维 | UI设计师必须掌握的四个设计原则
Collect
远近亲疏关系明确,用户可快速清晰地获取主要内容。
格式塔设计原则分为以下几个类别:亲密性,相似性,连续性,封闭性,对称性,主体/背景。
亲密性
接近或邻近的物体会被认为是一个整体,相互靠近的元素比相隔较远的元素则给人感觉会更有联系。
进阶思维 | UI设计师必须掌握的四个设计原则
Collect
上图中人们会优先的认为方块分为两列,每一列联系则更接近,即使第二列中间图形颜色不一致。
实际案例:
进阶思维 | UI设计师必须掌握的四个设计原则
Collect
日常工作中,第一种设计就比第二种准确、合理,易于理解。
相似性
物体的形状、大小、颜色、强度等物理属性方面比较相似时,这些物体就容易被组织起来而构成一个整体。
进阶思维 | UI设计师必须掌握的四个设计原则
Collect
看到上面 5 个相似的图形,颜色一样的色块则给人传达出他们更接近,功能更相似。
实际案例:
进阶思维 | UI设计师必须掌握的四个设计原则
Collect
支付宝应用中心不同功能模块中属性类似的功能icon在颜色的选用上也更加接近。
连续性
如果一个图形的某些部分可以被看作是连接在一起的,那么这些部分就相对容易被我们认为是一个整体。
下图中的三角形线条是没有闭合的,浏览者都会倾向于从视觉上封闭那些开放或未完成的轮廓,把他们当作一个整体。
进阶思维 | UI设计师必须掌握的四个设计原则
Collect
实际案例:
进阶思维 | UI设计师必须掌握的四个设计原则
Collect
上图中两个知名的公司 logo 都不是完整的,但人们还是会将他们联想成一个完整的图形。
封闭性
一组元素通常被视为一个可识别的形式或图形。当对象不完整或部分对象未封闭时,也会视为封闭。
进阶思维 | UI设计师必须掌握的四个设计原则
Collect
实际案例:
进阶思维 | UI设计师必须掌握的四个设计原则
Collect
知名音乐 APP 中分类专区、精选视频第二个内容在当前页面均没有展示完整,但我们都知道它是完整的。
对称性
对称元素往往被视为属于彼此,会给我们一种稳固和有序的感受。
进阶思维 | UI设计师必须掌握的四个设计原则
Collect
实际案例:
进阶思维 | UI设计师必须掌握的四个设计原则
Collect
上图知名应用市场的PC页面,两个红色框的内容在设计上相互对称,又互为整体。
主体/背景
这就是一个主次层级的关系,当一个画面中一个物体很大,或在视觉中心的情况下,我们会不自觉的把它当作主体。
进阶思维 | UI设计师必须掌握的四个设计原则
Collect
实际案例:
图片来源于网络
图片来源于网络
Collect
弹窗设计很好的诠释了主体与背景的关系,突出内容的重要性。
进阶思维 | UI设计师必须掌握的四个设计原则
Collect
呼吸感即间距,间距对则万物适
现代人都在追求远离都市,亲近自然。亲近自然的本质还是人们可以拥有更广阔的视野,更自由的空间,摆脱城市的局促和拥挤。
图片来源于网络
图片来源于网络
Collect
上面图2的呼吸感给人感觉就很舒适。
实际案例:
图片来源于网络
图片来源于网络
Collect
进阶思维 | UI设计师必须掌握的四个设计原则
Collect
精美的配图,精细的icon设计会给整体页面设计锦上添花。
1. 配图
设计圈非常流行一句话:设计一小时,找图40分钟,可见配图的重要性。
好的配图,从构图、光、影、层次关系都很优秀,本身就是很有品质的作品,放在设计中,效果事半功倍。
进阶思维 | UI设计师必须掌握的四个设计原则
Collect
相同的商品,配图不同,图2的点击率就比图1高。
2. 图标
图标通常都是功能的入口,好的图标设计,功能明确,设计精细,可以在很大程度上引导和吸引用户的点击,促进转化。
图片来源于网络
图片来源于网络
Collect
而设计意图不明确的图标,会使用户产生疑惑,不利用产品信息的表达,直接造成部分客户的流失。
以上就是 UI 设计师必须掌握的四个设计原则,希望对大家有帮助,谢谢。
5
Report
|
14
Share
相关推荐
手机UI
手机UI
手机UI
手机UI
作品收藏夹
酒动画
Recommand
内容含视频
Flyme AIOS 2.0
Homepage recommendation
内容含视频
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
Heal丨概念网页设计
Homepage recommendation
花茶包装全案设计
Homepage recommendation
相关收藏夹
手机UI
手机UI
手机UI
手机UI
作品收藏夹
设计规范/学习
设计规范/学习
设计规范/学习
设计规范/学习
作品收藏夹
ui素材
ui素材
ui素材
ui素材
作品收藏夹
TOB
TOB
TOB
TOB
作品收藏夹
IP形象设计
IP形象设计
IP形象设计
IP形象设计
精选收藏夹
作品收藏夹
作品集
作品集
作品集
作品集
精选收藏夹
作品收藏夹
大家都在看
Log in