- APP UI 设计手册
- 孙芳编著
- 1268字
- 2021-03-27 20:56:14
2.2 APP UI设计的布局
布局设计是现代设计艺术的重要组成部分,是视觉传达的重要手段。表面上看,它是一种关于编排的学问;实际上,它不仅是一种技能,更实现了技术与艺术的高度统一,布局设计是现代设计者所必备的基本功之一。
布局设计是指设计人员根据设计主题和视觉需求,在预先设定的有限版面内,运用造型要素和形式原则,根据特定主题与内容的需要,将文字、图片及色彩等视觉传达信息要素,进行有组织、有目的的组合排列的设计行为与过程。常用布局方式有很多,主要包括对称式、曲线式、倾斜式、中轴式、文字式、图片式、自由式、背景式、水平式、引导式。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P24_1.jpg?sign=1739185817-lpeITlfDiLUMswpRia0GLluFGRi8cE2b-0-3c5f65fb2b2d6f5f9fd6ab7d451c6335)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P24_2.jpg?sign=1739185817-m5rrCJPFz7lnBJJZui505g1A32rYMxve-0-121c5dc789f28cf02e5a4ac5fecc5d9b)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P24_3.jpg?sign=1739185817-I7wReUSXi8weRnWlQimVyVfE61pwASmj-0-4bd4a8a8feb9899bf754593d1b8bfe97)
2.2.1 对称式
在UI设计中,可以将页面进行“对称”分割。对称式的布局方式既能给人带来稳定性、安全性,又可给人一种均衡的感觉。这里需要注意,对称式的布局可能会使页面变得古板,因此需要对图案、色彩等进行艺术处理。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P24_5.jpg?sign=1739185817-URtSf5iUwVofLtpGHrOsokDePAsOaJkW-0-f2f1896ee1f50d543fa36da45a611160)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P24_6.jpg?sign=1739185817-6SiEcLBk6YWqtCS26kQyCfsCGFi45Czu-0-f6392acc99501903e1981d0d36089b1f)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P24_7.jpg?sign=1739185817-CyANqLVZFSExtnzAsJoYO3IBmuLs2u7P-0-499dca6bf83a74b0590bd16e0f453bbf)
2.2.2 曲线式
曲线的版式设计可以使界面变得更有活力,使其产生节奏感和韵律感。设计中适当运用曲线,可使整个页面变得圆滑、柔和。相较于其他版式,它给人一种灵活性与生动性,也可以创造出更新奇的形式。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P24_8.jpg?sign=1739185817-9adsaC4GXSDJWntnFIFeIDxQY2UbYRVx-0-5eca1de47b4e1739ba2ba863167f997b)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P24_9.jpg?sign=1739185817-ukoFGO4FoXLphwPZqw5xjyqENNuBuIwC-0-80b23019fb8573fc0e2fd3277d8cb235)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P24_10.jpg?sign=1739185817-1yHcZ2T8Fjsjrs8pxnST5ro38QaPoDWx-0-b8109230c12f12f7514e209475109f6d)
2.2.3 倾斜式
倾斜式的版式可以表现强烈的动态美,吸引用户的注目与阅读。只是倾斜式并不意味着设计时可以随意地倾斜,否则会造成版面的不稳定。可以通过图片文字的排列、颜色的深浅等方式进行有秩序的版式排列。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P25_1.jpg?sign=1739185817-8cOSkibX3TbgEDgZmCqwss2tys6394QU-0-a96d5527eccab6fd7d656b9273a315d1)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P25_2.jpg?sign=1739185817-TJv6hRrpUGniU2VM57sPrhl8zGs7AeZZ-0-c3b3612a5a489a4523ceebb88e8df449)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P25_3.jpg?sign=1739185817-NP9HijJUQBQNWzqHohn7uM5bN5ITRIWq-0-1673faa8a7e3eb8079d00d2dbfcd1a8e)
2.2.4 中轴式
中轴式的布局方式是将主要内容进行集合,采用水平、垂直的方式进行排列。它可以充分地利用手机屏幕的空间,使空间呈现出紧凑感。根据方向不同,可以分为水平方向和垂直方向。水平方向符合人们的常用阅读习惯,给人一种稳定的感觉;垂直方向使人们的目光向下移动,给人一种动态的效果。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P25_4.jpg?sign=1739185817-vJ3QwlVsSPoF0f1tVgK5jJqKB9SIrAkb-0-cc61f71b4bc6128ef3cb2f4f30cde1b7)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P25_5.jpg?sign=1739185817-D8zTyQgWagW18GYbzOBtxsGkHGqYn3sr-0-e0a0d5097e1d080ce009b7fe89a79075)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P25_6.jpg?sign=1739185817-M3qE2ikbpxq8hw1xe1l9oJM0jdnowLye-0-55c3b9734036c8dac7cd4d78c0309ca3)
2.2.5 文字式
文字式的版式设计是以文字为主体,图片为辅助。新闻类、工具类等应用多采用文字式的版式布局。通过图文结合给用户最新的信息,使用户可以生动、详细地了解到最新的新闻。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P26_1.jpg?sign=1739185817-jtDqTo2svFnhVg2q3VQncTjcpyPmIRrc-0-ebb06924c07bab144dcce74e4989e1b8)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P26_2.jpg?sign=1739185817-qCBIlWWXWcWaMFgv99AEqfV8wK6adfOT-0-ae3ad9c6806842524946c7f6ec4041f2)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P26_3.jpg?sign=1739185817-18BIsC4aB5rBZod3RxCRyv3XqSpDuPhp-0-e80e8d7c05d667e2c2f2c8f3d30288ef)
2.2.6 图片式
图片式界面多用于相册界面与新闻应用中的图片新闻等软件。现在的智能手机已经出现背面双摄,尤其是女性用户喜欢拍照,相册应用可以根据时间及特定要求进行排列归纳。而新闻应用中的图片新闻,通过滑动图片可以查看,也可以通过点击下方缩略图查看。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P26_4.jpg?sign=1739185817-7iuAzZeOAlETlRnrhAMgEN5bPHjeyGXf-0-cfdc280f45f7e820f489568bccdef6b7)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P26_5.jpg?sign=1739185817-Q42vx8mhGljEsluVyFA3bEXXo5x8Bsxv-0-2e9accbe1db1acacefd4c05a064e67f6)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P26_6.jpg?sign=1739185817-xKGEdZhkIJdoULAgG7JXCHCIqE7YhwmZ-0-fca26d6344eb61d6152c46c3b1d15572)
2.2.7 自由式
自由的版式设计可以理解为没有限制的设计,将界面中的图文信息以一种自由方式排列,打破了固有的版式模式。自由式排列也可体现出一定的主从关系顺序,给人一种平衡感。浅色的背景可以保证界面的整洁性,而文字、图形则有相应的针对性。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P26_7.jpg?sign=1739185817-EW5QFSLMjC4zDeBFmj30jEeWIcuZMVEL-0-5e767a58c5fdbfba8f5692fc6fb62526)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P26_8.jpg?sign=1739185817-M9Yor2BcNLa6UqQGDzjg3tWx57TFmge9-0-6742a5ea7cdee2d6e59171ce481efeb7)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P26_9.jpg?sign=1739185817-K96VPLLryXFDY192AyHqEu2rGLt8gsZE-0-1bb105f8c38c036f18ece4081a8259ca)
2.2.8 背景式
背景式的版式设计,多以图片作为页面的背景,多应用在欢迎页和与登录界面上。使用贴近应用的图片,可给用户一种身临其境的代入感。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P27_1.jpg?sign=1739185817-71DHEz6wMOemruowxlWwC3f5wJQaSqHh-0-703184cd76132cbf5d6ef0f242a225cf)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P27_2.jpg?sign=1739185817-vIWJ0WtFvj2GEXOlfz72CNOH5v1aOwwz-0-9a30940f17e2d4a84ef5a0b3c0d40088)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P27_3.jpg?sign=1739185817-iKOAfVeVvjIDXPEaso8xEKIqiu20KCmn-0-83a858accf5d0983e4c1ca725f5e25a2)
2.2.9 水平式
水平式可以使杂乱无章的图文变得井然有序,方便用户快捷地看到相应的信息。在APP UI设计中常使用这种版式布局,将页面空间充分利用。文字、图片、标题在相应的位置让用户一目了然,使用户更便捷、高效地浏览界面内容。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P27_4.jpg?sign=1739185817-BPaOl3FuyU2LuNLigWjUMFBI94Apr0g5-0-5e75b10392d798630b42217d9803b33e)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P27_5.jpg?sign=1739185817-qDEVH7Q4f5blRVScptzJjyaZMipkKdVQ-0-f2e6a8284119fff0ae42f31fde526993)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P27_6.jpg?sign=1739185817-hhh6X9VTUgcptQMjDcERdHd7PmnLfVQF-0-72addefeccf14c84bbf7385fd05c6e21)
2.2.10 引导式
引导式的版式是将界面中琐碎的元素进行整合,主要通过图形、文字内容和色彩对用户产生引导作用。引导式具有很强的秩序感、逻辑性和指示性。同时将信息按照关键词进行整理分类,可以使用户很快找到所需的信息。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P27_7.jpg?sign=1739185817-w02H8AL25TvrtOgWRDBuXpXH6e70VUmE-0-2d2b5a6d5b7cac15ee62ea726ec7b725)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P27_8.jpg?sign=1739185817-CzxM5C8cg0mJao6SCfz5jvncj6Jz5TVO-0-3d72fe03c33469d0da14db4d744662ee)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P27_9.jpg?sign=1739185817-IAnNp3doDsmbNrCRkIyfAM8JtR3ym7Xq-0-3b6a449b8b60fabc16faef05e3f1142d)