博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
UI设计的几个基本的设计原则
阅读量:7047 次
发布时间:2019-06-28

本文共 1345 字,大约阅读时间需要 4 分钟。

设计比较有趣的地方在于它的通用性,不论各个行业设计的规则大同小异。这篇文章苏州学码思总结了UI设计的几个基本的设计原则,一起来看下。

  一、轴

  轴在UI设计中是基本的、常见的概念,也是用来组织界面结构的重要核心。简单说来,轴是在设计的时候组织一系列元素的假象线。

  1、对齐

  轴比较常见于对称元素的使用,当元素被布置成轴对称的布局的时候,会给人有序感。就像生活中绝大多数的事情一样,我们更倾向于享受有序的的东西,它们令人感觉平稳、舒适、平易近人。

  2、强化

  虽然轴是一条假想的线,但是如果周围的元素的边缘控制得足够整齐,这跳线会在视觉中变得更加“明显”的。

  3、运动

  当我们碰到某先线条的时候,视觉会很自然地沿着这些方向运动,就如同我们站在街上,会自觉地沿着街道的两头走动。两个端点决定了线,界定了开始和结束的地方,线,或者说轴线的存在会引导和提示运动的方向。

  4、连续性

  如果终点是不确定的,那么你通常会沿着轴线的方向浏览/运动,直到你找到感兴趣的东西,或者感到厌倦并关闭应用。在建筑学中,未清楚界定的终点非常少见,因为建筑的修建通常没法永远持续下去,但是UI设计则不一样,无限地滚动下去是无比受欢迎的设计手法。

  二、对称

  当元素被均匀地放置在轴线的两侧之时,他们构成了对称的关系。当元素被精准地在轴线两侧一一对应之时,它们就形成了完美对称。

  1、平衡

  对称令整个设计更加平衡。当元素与控件在轴线两侧处于相同位置之时,会给人以协调和谐的设计感。

  2、不对称

  如果轴线两侧的控件布置不再是一一对应尺寸相近,那就是不对称的设计。不对称的设计会给人明显的失衡感,可能会令人不舒服,但是也能造就残缺美,当然这要看你具体怎么做。

  三、层级

  当某个元素出现在比其他元素更重要的位置的时候,层级就出现了。

  1、尺寸

  如果一个设计元素在尺寸上比其他的控件更大,就会区分出层级。毫无疑问,我们查看某个设计的时候,通常会被比较大的元素吸引到。

  2、形状

  如果一个控件在形状和形态上同其他的不一样,也可以让它独立出一个层级。不规则的设计同样会令人侧目。建筑物的正面拥有五个相同的窗户和一闪大门,你会立刻注意到门的独特之处。

  3、位置

  位置的存在同样能彰显层级的不一样。在圆圈之内,中心位置的东西比边缘部分的看起来更重要。位于轴线顶端的控件会显得比其他部分的优先级更高。

  四、韵律

  UI设计和建筑设计同样有着韵律之美,重复的模式会营造出独特的节奏之美。

  1、模式

  理解韵律直接的方式就是听歌。音乐拥有节奏感,绝大多数的音乐遵循着相同的节拍,节拍就是音乐模式的一部分。

  APP列表中每一间房子都占据一个模块,模块中有着大小相同的图片,价格、位置和房东信息和图片的相对位置一定,且排版匀称舒服,两个模块之间的间距也相同,当你浏览的时候,熟悉的节奏会让你清楚地知道上哪看关键信息。

  2、间断

当节奏被间隔打断的时候,会形成不同的层级。听歌的时候,均匀的节奏被其他的音乐元素打断的时候,你会意识到这是比较特别的部分。

转载于:https://blog.51cto.com/14296616/2401416

你可能感兴趣的文章
EF架构~数据分批批量提交
查看>>
treap模板
查看>>
vue组件通信之任意级组件之间的通信
查看>>
bootstrap2.02 notice
查看>>
angular 数据内容有重复时不显示问题
查看>>
二叉树的路径和
查看>>
asp.net中JQuery AJAX的解决方案
查看>>
像素与rem转换
查看>>
urlencode遇到中文编码问题
查看>>
MpVue解析
查看>>
AngularJS学习之 ngTable 翻页 功能以及利用angular service准备测试数据
查看>>
Newtonsoft.Json随手记
查看>>
关于“Adobe After Effects 2018安装后没法找到自动跟踪菜单 ”的解决方法
查看>>
go学习笔记(05)-基本语法-常量
查看>>
创建spring自定义注解进行自动装配
查看>>
如何使用DotfuscatorPro_4.9对软件进行加密
查看>>
2018/11/30 一个64位操作系统的实现 第三章 loader程序的导入
查看>>
python wsgi PEP333 中文翻译
查看>>
收费udx
查看>>
构造函数+原型的js混合模式
查看>>