AAA教育论坛

 找回密码
 立即注册
查看: 15023|回复: 1
打印 上一主题 下一主题

[PC端UI] 五大UI设计中的布局编排原理和设计技巧!

[复制链接]

34

主题

34

帖子

47

积分

贵宾

Rank: 7Rank: 7Rank: 7

积分
47
跳转到指定楼层
楼主
发表于 2019-5-22 11:39:36 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
如果说色彩和图片是人的外在,那么版式编排就是人的骨骼,从基础上决定了一个人的内在。今天就带着大家一起从以下5个方面来探究下UI设计中的版式编排。


信息的排布

UI界面设计中,信息能被有效的传达,离不开良好的组织和布局,信息之间层级关系的表达非常重要。

恰当的视觉设计,能够通过对界面UI设计元素的展现来暗喻信息之间的层级关系,能够减少用户在使用过程中产生的困惑和理解上的障碍,我们可以通过以下两点进行尝试:

1. 明确信息的层级关系,重要的突出显示
2. 合适的间距和留白,给界面呼吸感
二文字的排版
在设计工作中,大家喜欢把重点放在色彩,图像的处理上。但其实文字阅读的处理与前两者相同,甚至更重要。
1. 字号:在一篇文章里,为了区分出信息的重要级。会通过不同的字号来区分。正文作为文章的主题,我们可以先把他的字号确定下来,根据需要来调节大标题,小标题以及注释的字号。

2. 留白:把留白按照一定的规律来排列,也会增加易读性。遵循“字间距>行间距>段落间距”的排布方式。

3. 行高,行间距:行与行之间的间距如果太宽,会使视线移动过长,给用户造成负担。一般行高会给字体大小的1.6-2倍,因为不同字体的固有高度不同,所以这个数值需要自己调节。


图片的使用

图片是构成界面的重要元素之一,它可以帮住我们更好的丰富界面。那么如何选着符合我们产品调性的图片呢?如何在缺少图片的情况下让我们的界面更加有意思呢?我们可以从以下几点入手。

举个例子,如果需要做一款旅游类的App,我们通过一些竞品以及自身的经验旅游类App的配图一般都是明快的,色彩丰富的,景色优美才能引起人们去旅行的兴趣,所以找图的时候,我们就往明快,色彩丰富这个方向找图。

1. 结合产品自身的个性选图
2. 当没有图片的时候,创造图形来丰富界面

图标通常是有效且直接表现方式,简单明确的图形,可以让用户通过对图标的认识快速找到想要的功能和需求点,同时也让界面更加的具有趣味性。
回复

使用道具 举报

0

主题

3

帖子

253

积分

中级会员

Rank: 3Rank: 3

积分
253
沙发
发表于 2019-5-22 11:46:20 | 只看该作者
这个还行,有点道理
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|  

©2019|www.aaa-cg.com.cn 北京漫动者教育科技有限公司|备案号:京ICP备12034770号|监督电话:400-0100-444

快速回复 返回顶部 返回列表