
2.2 APP UI设计的布局
布局设计是现代设计艺术的重要组成部分,是视觉传达的重要手段。表面上看,它是一种关于编排的学问;实际上,它不仅是一种技能,更实现了技术与艺术的高度统一,布局设计是现代设计者所必备的基本功之一。
布局设计是指设计人员根据设计主题和视觉需求,在预先设定的有限版面内,运用造型要素和形式原则,根据特定主题与内容的需要,将文字、图片及色彩等视觉传达信息要素,进行有组织、有目的的组合排列的设计行为与过程。常用布局方式有很多,主要包括对称式、曲线式、倾斜式、中轴式、文字式、图片式、自由式、背景式、水平式、引导式。



2.2.1 对称式
在UI设计中,可以将页面进行“对称”分割。对称式的布局方式既能给人带来稳定性、安全性,又可给人一种均衡的感觉。这里需要注意,对称式的布局可能会使页面变得古板,因此需要对图案、色彩等进行艺术处理。



2.2.2 曲线式
曲线的版式设计可以使界面变得更有活力,使其产生节奏感和韵律感。设计中适当运用曲线,可使整个页面变得圆滑、柔和。相较于其他版式,它给人一种灵活性与生动性,也可以创造出更新奇的形式。



2.2.3 倾斜式
倾斜式的版式可以表现强烈的动态美,吸引用户的注目与阅读。只是倾斜式并不意味着设计时可以随意地倾斜,否则会造成版面的不稳定。可以通过图片文字的排列、颜色的深浅等方式进行有秩序的版式排列。



2.2.4 中轴式
中轴式的布局方式是将主要内容进行集合,采用水平、垂直的方式进行排列。它可以充分地利用手机屏幕的空间,使空间呈现出紧凑感。根据方向不同,可以分为水平方向和垂直方向。水平方向符合人们的常用阅读习惯,给人一种稳定的感觉;垂直方向使人们的目光向下移动,给人一种动态的效果。



2.2.5 文字式
文字式的版式设计是以文字为主体,图片为辅助。新闻类、工具类等应用多采用文字式的版式布局。通过图文结合给用户最新的信息,使用户可以生动、详细地了解到最新的新闻。



2.2.6 图片式
图片式界面多用于相册界面与新闻应用中的图片新闻等软件。现在的智能手机已经出现背面双摄,尤其是女性用户喜欢拍照,相册应用可以根据时间及特定要求进行排列归纳。而新闻应用中的图片新闻,通过滑动图片可以查看,也可以通过点击下方缩略图查看。



2.2.7 自由式
自由的版式设计可以理解为没有限制的设计,将界面中的图文信息以一种自由方式排列,打破了固有的版式模式。自由式排列也可体现出一定的主从关系顺序,给人一种平衡感。浅色的背景可以保证界面的整洁性,而文字、图形则有相应的针对性。



2.2.8 背景式
背景式的版式设计,多以图片作为页面的背景,多应用在欢迎页和与登录界面上。使用贴近应用的图片,可给用户一种身临其境的代入感。



2.2.9 水平式
水平式可以使杂乱无章的图文变得井然有序,方便用户快捷地看到相应的信息。在APP UI设计中常使用这种版式布局,将页面空间充分利用。文字、图片、标题在相应的位置让用户一目了然,使用户更便捷、高效地浏览界面内容。



2.2.10 引导式
引导式的版式是将界面中琐碎的元素进行整合,主要通过图形、文字内容和色彩对用户产生引导作用。引导式具有很强的秩序感、逻辑性和指示性。同时将信息按照关键词进行整理分类,可以使用户很快找到所需的信息。


