UI设计中的排版方法
最近在设计一些APP界面,也在看一些关于排版方面的问题,下面是一些关于排版这方面的一些关键点~
留白
“留白”这个词出现在各种行业里,是个又高级又时长被滥用的词汇,大家都明白它的含义却总是在设计中忽视,做着做着就把界面填满了。
留白是指保证界面中的某一个区域没有多余的元素、装饰、文字、图片。它有助于分割各个板块,为你设计的作品增加更多的层次感。同时它可以有效地引导用户视线,减轻浏览过程的压力。有效的留白可以让你的产品重点更突出,更美观。
分组
分组就是将相近类别的几项信息聚合在一起,形成一个组,这是个很直观又好用的办法。可以很快地把信息呈现在用户面前,减少了用户信息接收时候的负荷。比如QQ音乐的推荐歌单,其实并没有真正框起来某一块告诉你这是什么。只是通过一些分组、聚合就会让用户有一个特别直观的感受。
对齐
任何元素都不能被随意地安放在界面中,每个元素都应当与页面上的某些元素有视觉联系。对齐是界面排版设计中最基础、最常用的方法之一,会带来非常强的视觉统一感,但是一定要基于上一篇所说的阅读习惯。对齐可以是左对齐、右对齐、居中对齐,但是左边的元素一定要向左边对齐,右边的则要向右边对齐,同一个水平面的元素居中对齐。具体操作还是要依据具体的情况了。
对比
对比是指避免页面上的元素看起来太过相似,这样会造成用户理解上有困难。如果内容有明确的区别那就通过改变元素颜色、大小、线宽、形状、空间等产生一种强有力的视觉对比,让它们变得截然不同,让主题更引人注目。
亲密
根据亲密性来组织复杂的信息是相当好用的,彼此有关联的元素应当靠近,形成某种关系。如果多个相互之间存在关联的项离得非常近,它们就组成一个视觉单元,而不是多个单独的元素。有助于组织复杂、多元的信息,减少混乱对读者造成的干扰。可以清晰地通过这个界面中的亲密性一眼分辨出主次关系,例如:头像、标签以及内容。每张图片下面的文字内容都形成了一个视觉单元,图片与文字很好的配合。用户在很快的时间内就可以阅读到有效讯息并决定要不要点开看看详细内容。
平衡
平衡可以避免人的视线偏向某一侧,保证界面的视觉平衡也会给人一种非常稳定的感受。在排版的时候依照左上到右下的原则很容易把界面的左半部分变得非常拥挤。简书的阅读界面,顶部导航栏和底部栏的内容分配非常均匀,中间部分读者姓名和文章信息在左侧,为了避免左侧过重关注与发布时间被安排在了右侧。支付宝和淘宝的界面从头到脚贯彻了平衡的方法,全部都是对称的排列。这样做可以给用户一种非常舒适的稳定感和安全感。
不对称
不对称元素破坏了对称的平衡感,但是会增加很多的趣味性,能快速吸引用户的注意力。平衡的界面中,每一个元素给人的感觉是平等的没有主次之分,而不对称的功能也在这,它可以构建出不平等和不稳定的感觉,一下子把重点突出出来。元素破坏了对称的平衡感,但是会增加很多的趣味性,能快速吸引用户的注意力。平衡的界面中,每一个元素给人的感觉是平等的没有主次之分,而不对称的功能也在这,它可以构建出不平等和不稳定的感觉,一下子把重点突出出来。
PS:以上是对排版方法的一些总结,最近也在设计APP界面,要加油鸭!!!
UI设计中的排版方法相关推荐
- UI设计中的排版设计技巧
不知道大家有没有遇到过这样的情况,在排版的时候咔咔一顿操作,图形字母四处飞,试了一遍又一遍,但最后却发现效果并不咋地!反正我是经常遇到这种情况,其实原因就在于我并没有理清思路,如果我能把排版的思路想清 ...
- 中剪取一种颜色的板块_不知道UI设计中APP界面版式如何排版?来看这个!
UI设计中APP的界面看似只有几个简单的元素组合起来, 所有元素的绘制可以说比较简单: 然而,当一个产品原型出来后,设计师如果单纯按原型来进行设计而不考虑信息化规则, 那么很多时候就会出现不协调的效果 ...
- 在网页设计中如何排版,教你一些有效的方法,足够让你的排版变好看
可以说,排版是UI设计中最难的部分.在这篇文章中,我会教你一些实用的技巧,你可以在你的项目中使用. 一.考虑用户 我们应该记住,除了美学,我们还有用户. 你需要使用的字体要灵活.你的字体应该提供粗细不 ...
- UI设计中的情感化设计,视觉层级的情感化设计方法
视觉层级的设计是-种遵循自然的设计,即表达了人们对美的事物的追求的一种设计.以注视.感受和声音等生理特征起主导作用.因此,我们可以用直观可见的方式,唤起人们的情感反应,建立情感链接.具体可以从以下三个 ...
- UI设计中ID软件书籍排版时目录的制作你会吗?【太原UI设计师】分享
UI设计中ID软件书籍排版时目录的制作你会吗?[太原UI设计师]郭文军分享 1,新建段落样式(F11):目的为了得到目录中文字的样式 ①,新建段落样式,双击打开名称"章",更改字符 ...
- ui设计中的版式设计_设计中的版式-第3部分
ui设计中的版式设计 and how not to suck at it 以及如何不吸吮它 This is the 3rd and last part of the series. Here we t ...
- UI设计中的一致性原则
为什么一致性在UI设计中很重要,我们平常挂嘴边的一致性原则到底是什么?一致性原则如何影响用户行为?价值在哪里? 今天我就带大家探讨我们在处理界面的时候,如何遵循一致性原则,该如何去做? 一致性原则的优 ...
- UI设计中网页的设计规范总结
很多刚入行的UI设计师开始接触网页端UI设计的时候,对于基础的界面尺寸规范可能会有一定的模糊认知,导致做出来的页面往往会感觉不是那么和谐,却也不知道怎么去完善和改进. 对于大多数的刚入行者来说,如果不 ...
- UI设计中字体使用小窍门
在选择字体时,需要考虑很多因素.最重要的是,品牌的个性,所提供的产品或服务以及受众.提供无限不同的字体设计,每种字体都有自己的风格和风格,选择合适的字体不是一个草率的决定.下面胡老师悄悄给大家说说UI ...
最新文章
- 基于CNN目标检测方法(RCNN,Fast-RCNN,Faster-RCNN,Mask-RCNN,YOLO,SSD)行人检测,目标追踪,卷积神经网络
- Ext Scheduler Web资源甘特图控件
- Luogu4606 SDOI2018 战略游戏 圆方树、虚树、链并
- 电子科大电气工程导师介绍绍_预告|卓越讲堂第二期——电气工程及其自动化专业介绍...
- BASIC-1 闰年判断
- 抽签小程序(C语言随机数),C# 抽签小程序
- GM6 PageSet request didn't have target application url
- 什么是二叉树?以及二叉树如何遍历?
- 清除默认的内边距与外边距
- Android 6.0 设备强制要求开启全盘加密
- SAP License:”事后借记”与第三方外币支付处理
- 阅读《梦断代码》计划
- 20211109:DC综合的一些简单概念理解记录
- php导入csv文件,PHP实现CSV文件的导入和导出类
- 设计模式 ( 二 ) 简单工厂模式
- 循环冗余校验码(CRC码)
- 微信客户端电话人工服务器,微信客服电话多少 微信客服电话人工服务怎么接通...
- python爬房源信息_Python爬取链家二手房源信息
- python中回车用什么表示_解释stdscr中的“ENTER”键(Python中的curses模块)
- 部署N9e-v3运维监控平台
热门文章
- Ubuntu(Linux)新系统分区
- Linux驱动开发(十八)---网络(网卡)驱动学习
- 论黄金分割的设计使用
- 今天是我第一次开通本博客 自己爱好学习破解软件,OEM软件。易语言做软件等等,
- 最新养鱼源码-支持商城抽奖,余额宝等,支持中英文,带安装教程
- 机器学习是什么?我对机器学习的理解
- 蜂巢输入法android,讯飞输入法Android新版 蜂巢输入模型智能进化
- Unknown host 'maven.google.com'
- 紫林U盘解锁精灵V1.0.1
- encodeURI、encodeURIComponent和 escape的区别