近2000字干货,UI设计师必须掌握的四个设计原则
好的设计作品总有这样那样的设计原则,而优秀的设计师则需要将设计原则根植于心,灵活应运于日常的设计中。通过对大量作品的揣摩和提炼,本文总结了以下四个在UI界面设计中至关重要的设计原则。只要仔细思考,反复推敲,必然会打通任督二脉,设计能力稳步提升!
一、对齐
二、格式塔设计原则
三、呼吸感
四、配图、图标精细化
对齐即秩序、秩序即美
秩序,名词,意思是有条理地、有组织地安排各构成部分以求达到正常的运转或良好的外观的状态。
提取关键词:秩序、有组织、良好的外观状态。
生活中漂亮的建筑、整洁的街道、日常看到的事物无处不透露着因秩序带来的美感,给人以愉悦的感受。
UI界面设计中的秩序即对齐,相关的内容对齐之后,就为整体的设计奠定了一个良好的基础,不会杂乱无章,无从下手。
1、不同内容的对齐需做到:
a、文字与文字,文字与数字对齐
b、文字与图片对齐
c、图片与图片对齐
d、不同内容模块之间相互对齐
图1给人感觉则更加严谨、规律,视觉上也更加美观。
图2中对齐不够严谨,给人感受则完全不同。
2、对齐需保持间距的一致性
UI页面设计中,间距建议以4或者8的倍数为标准(设计图为1倍图),间距=Xa,a=4或者8;
实际案例:
上图中微信左右间距为16pt,京东左右间距为12pt,均为4的倍数。因京东为电商平台,左右间距略小,可以给内容留出更多空间。
远近亲疏关系明确,用户可快速清晰地获取内容
格式塔原理分为以下几个类别: 亲密性,相似性,连续性,封闭性,对称性,主体/背景。
亲密性:接近或邻近的物体会被认为是一个整体,相互靠近的元素比相隔较远的元素则给人感觉会更有联系。
上图中人们会优先的认为方块分为两列,每一列联系则更接近,即使第二列中间图形颜色不一致。
实际案例:
日常工作中,第一种设计就比第二种准确、合理,易于理解。
相似性:物体的形状、大小、颜色、强度等物理属性方面比较相似时,这些物体就容易被组织起来而构成一个整体。
看到上面5个相似的图形,颜色一样的色块则给人传达出他们更接近,功能更相似。
实际案例:
支付宝应用中心不同功能模块中属性类似的功能icon在颜色的选用上也更加接近。
连续性:如果一个图形的某些部分可以被看作是连接在一起的,那么这些部分就相对容易被我们认为是一个整体。
下图中的三角形线条是没有闭合的,浏览者都会倾向于从视觉上封闭那些开放或未完成的轮廓,把他们当作一个整体。
实际案例:
封闭性:一组元素通常被视为一个可识别的形式或图形。当对象不完整或部分对象未封闭时,也会视为封闭。
实际案例:
知名音乐APP中分类专区、精选视频第二个内容在当前页面均没有展示完整,但我们都知道它是完整的。
对称性:对称元素往往被视为属于彼此,会给我们一种稳固和有序的感受。
实际案例:
上图知名应用市场的PC页面,两个红色框的内容在设计上相互对称,又互为整体。
主体/背景:这就是一个主次层级的关系,当一个画面中一个物体很大,或在视觉中心的情况下,我们会不自觉的把它当作主体。
实际案例:
弹窗设计很好的诠释了主体与背景的关系,突出内容的重要性。
呼吸感即间距,间距对则万物适
现代人都在追求远离都市,亲近自然。亲近自然的本质还是人们可以拥有更广阔的视野,更多自由空间,摆脱了城市的局促和拥挤。
实际案例:
上面2张图的呼吸感给人感觉就很舒适。
精美的配图、精细的icon给页面锦上添花
1、配图
设计圈非常流行一句话:设计一小时,找图40分,可见配图的重要性。
好的配图,整体的构图、光、影、层次关系都很优秀,本身就是很有品质的作品,放在我们的设计中,效果自然不言而喻。
2、图标
图标通常都是功能的入口,好的图标设计,功能明确,设计精细,可以在很大程度上引导和吸引用户的点击,促进转化。
而设计意图不明确的图标,会使用户产生疑惑,不利用产品信息的表达,直接造成部分客户的流失。
推荐大家使用图标盒子来规范icon的设计
提供PSD和Sketch两个格式
以上就是UI设计师必须掌握的四个设计原则,希望对大家有帮助,谢谢。
Powered by Froala Editor
- 看板设计,掌握这三步就够了
- 北京幻灯片课件制作|总结汇报PPT|政府汇报PPT设计
- 超实用!B端表格设计技巧大全,果断收藏了!
- 北京招商路演PPT设计|PPT代做美化|工作汇报PPT设计
- 北京党员之家文化墙设计制作
- AE避坑 | AE动效落地时常见问题解析和注意事项
- 摹客RP,上线手势交互!
- B 端系统帮助体系搭建
- 你要悄悄创作,然后惊艳所有人!
- 中秋合成专属贺卡H5,生成“私人订制”式的节日祝福
- 如何避免“慢就业”演变为“懒就业”?Adobe告诉你答案
- B端产品设计——表单设计3大秘籍
- 读书分享丨系统化阅读:把阅读像产品设计一样标准化
- 深圳纸质发 票再见!住宿费发 票全面取代酒店住宿纸质发 票
- 分析Figma界面设计细节,学习交互设计
- 系统设计的匠人精神——一张首页的N张设计尝试
- 什么是全栈设计师?
- 小团队有必要建立完善的设计体系吗?
- 第257期-产品工作的4D法-2022设计之旅23
- 这些UI大技巧你会了吗?