Wow4j Wow4j
首页
个人使用说明书
后端开发
前端开发
测试开发
运维开发
大数据开发
产品&UI交互
团队管理
软技能
他山之石
开源产品
敬请期待
GitHub (opens new window)
首页
个人使用说明书
后端开发
前端开发
测试开发
运维开发
大数据开发
产品&UI交互
团队管理
软技能
他山之石
开源产品
敬请期待
GitHub (opens new window)
  • 概要
  • 设计价值观
  • 设计原则 Element
  • 设计的四大原则
    • 亲密性
    • 对齐
    • 对比
    • 重复
  • 色彩的秘密
  • 原型图工具
  • 设计资源
  • 产品&UI交互
timchen525
2023-01-31

设计的四大原则

重要

首先要记住,原则是可以打破的,前提是你知道为什么要打破。

在设计领域有如下四大原则:

  • 亲密性:即相互关联,意思相近的内容应该放在一起。
  • 对齐:保证页面上的某两个元素中间总是围绕一条直线对齐。
  • 对比:有意识地增加不同等级元素中间的差异性,要么相同,要么完全不同。
  • 重复:分析元素等级后,选取相同等级的元素来重复。

# 亲密性

如果信息之间关联性越高,它们之间的距离就应该越接近,也越像一个视觉单元;反之,则它们的距离应该越远,也越像多个视觉单元。亲密性的根本目的是实现组织性,让用户对页面结构和信息层次一目了然。

说明

图A中如果你要找一瓶可乐,那是不是要从头到尾找一次?很浪费时间对不对?经过亲密性原则调整后,在图B你就可以很快找到饮料区,从中找到可乐。

# 对齐

正如「格式塔学派」中的连续律(Law of Community)所描述的,在知觉过程中人们往往倾向于知觉对象的直线继续称为直线,使曲线继续成为曲线。在界面设计中, 将元素进行对齐,既符合用户的认知特性,也能引导视觉流向,让用户更流畅地接收信息。

说明

图C这个排版是想说明你的信息是乱"拍"上去的吧,信息量再大一点整个页面就崩了。经过对齐调整后,图D马上简洁大气上档次了。

# 对比

对比是增加视觉效果最有效方法之一,同时也能在不同元素之间建立一种有组织的层次结构,让用户快速识别关键信息。

说明

图E这个排版是简洁大气,但是略显平淡,没有层次。看下图F,先不论这样的调整是否合适,但是是不是马上就刺激吸引眼球了,更有主次了。

# 重复

相同的元素在整个界面中不断重复,不仅可以有效降低用户的学习成本,也可以帮助识别出这些元素之间的关联性。

说明

上面个板块,从单个页面来说,"解释说明"部分的字体、大小都体现出了重复原则,保证了单个页面的稳定性。

从多个页面来说,转场也属于同一级别,所以他们应该具有重复的特征,上述这三幅例子,除了颜色之外,其他特征都是相同的,而颜色的不同让PPT更有味道。

上次更新: 2023/01/31, 17:37:12
设计原则 Element
色彩的秘密

← 设计原则 Element 色彩的秘密→

Theme by Vdoing | Copyright © 2022-2023 timchen525 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×