![APP UI 设计手册](https://wfqqreader-1252317822.image.myqcloud.com/cover/571/24172571/b_24172571.jpg)
2.2 APP UI设计的布局
布局设计是现代设计艺术的重要组成部分,是视觉传达的重要手段。表面上看,它是一种关于编排的学问;实际上,它不仅是一种技能,更实现了技术与艺术的高度统一,布局设计是现代设计者所必备的基本功之一。
布局设计是指设计人员根据设计主题和视觉需求,在预先设定的有限版面内,运用造型要素和形式原则,根据特定主题与内容的需要,将文字、图片及色彩等视觉传达信息要素,进行有组织、有目的的组合排列的设计行为与过程。常用布局方式有很多,主要包括对称式、曲线式、倾斜式、中轴式、文字式、图片式、自由式、背景式、水平式、引导式。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P24_1.jpg?sign=1739522051-Z6A8V44k2M8NJHImtlOGPa4DPLdCENvc-0-14a419688febe05437a08d06d62a2a69)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P24_2.jpg?sign=1739522051-4H3tNjmC7BrXDAKdaMuOahMZNnw6ZEqe-0-cf70dab19ac2bc4df23ed212d2d4289a)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P24_3.jpg?sign=1739522051-TiPTguxe1suCSjkXyy1PtgbviMrUhB0W-0-44766fcb4fa12487b6d9525287168f6b)
2.2.1 对称式
在UI设计中,可以将页面进行“对称”分割。对称式的布局方式既能给人带来稳定性、安全性,又可给人一种均衡的感觉。这里需要注意,对称式的布局可能会使页面变得古板,因此需要对图案、色彩等进行艺术处理。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P24_5.jpg?sign=1739522051-9Hi5yJyVKcxI8Sy75w1ObDhhYaD3X3Rp-0-b74a69f157cd72602cf0eae8ec0b67bc)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P24_6.jpg?sign=1739522051-VCi8pvANbwpPBJhjwXD2mSMSuMujgWmL-0-1e69a2d293d634092ed8578c6b510b28)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P24_7.jpg?sign=1739522051-aozFrwVVypUmLKnRIccYjqm282iK0von-0-3b476862226d23c10d227708dbfdbc2d)
2.2.2 曲线式
曲线的版式设计可以使界面变得更有活力,使其产生节奏感和韵律感。设计中适当运用曲线,可使整个页面变得圆滑、柔和。相较于其他版式,它给人一种灵活性与生动性,也可以创造出更新奇的形式。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P24_8.jpg?sign=1739522051-XdjD0P31rHdHQTdeRekdADIaHK2txLju-0-3fc409ec1ccb985be03dda65273ae954)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P24_9.jpg?sign=1739522051-EstxHIOlDoRekfZrXDu4IQsXe4McJm2W-0-d2fca8171f33445faf676efdfb71cd35)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P24_10.jpg?sign=1739522051-wMkA546UMyfYnkSzSLRPJnVdFSyJQPSV-0-9930abbe7f4a5b6f48480dc7bd451679)
2.2.3 倾斜式
倾斜式的版式可以表现强烈的动态美,吸引用户的注目与阅读。只是倾斜式并不意味着设计时可以随意地倾斜,否则会造成版面的不稳定。可以通过图片文字的排列、颜色的深浅等方式进行有秩序的版式排列。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P25_1.jpg?sign=1739522051-FkHSfqK2t0wYLrQsilXyHnYLeymsl7FW-0-eb7c9cae3ad454685f5a08a0a8b364f9)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P25_2.jpg?sign=1739522051-PbdVinKZHYVVLEOMOIiEpFyScockmd31-0-67b2923c92165eb2ea5c12b6ab0008d1)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P25_3.jpg?sign=1739522051-2G8FtfDfvBqwpdd2aNFMs94zt4QEBhXh-0-ca76818622e424195fe165496900ba41)
2.2.4 中轴式
中轴式的布局方式是将主要内容进行集合,采用水平、垂直的方式进行排列。它可以充分地利用手机屏幕的空间,使空间呈现出紧凑感。根据方向不同,可以分为水平方向和垂直方向。水平方向符合人们的常用阅读习惯,给人一种稳定的感觉;垂直方向使人们的目光向下移动,给人一种动态的效果。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P25_4.jpg?sign=1739522051-cdXaTTca6AD42vg4sVx5uq1w0lkZpo68-0-4119df1b7e5998831778726238e053e7)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P25_5.jpg?sign=1739522051-o3dVVkefHJJpG4u53P4NvsAYmmPFGiNn-0-d5b0cff3fb29013bfe6471c8ba7a5018)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P25_6.jpg?sign=1739522051-TGAuuvindMJ66ZoGVoASkcZlFdNPhhVs-0-d2e26ba87b2576d5033808973ea7307d)
2.2.5 文字式
文字式的版式设计是以文字为主体,图片为辅助。新闻类、工具类等应用多采用文字式的版式布局。通过图文结合给用户最新的信息,使用户可以生动、详细地了解到最新的新闻。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P26_1.jpg?sign=1739522051-4W2k2GlMHw0HoQ8OP3CflX1pu4B8vDCE-0-0d56fbbc6abcc7f89641fe571f9fbd20)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P26_2.jpg?sign=1739522051-u0SsKmZjoMY9q99ccnceMlz1dCzEGueK-0-eb6231d4643bfd33488d0e7b0977a728)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P26_3.jpg?sign=1739522051-LrYAjeRd17MRKNRFMB7rIbwJpn6IGKzq-0-c2a288f631a3c8018947ea60d683de92)
2.2.6 图片式
图片式界面多用于相册界面与新闻应用中的图片新闻等软件。现在的智能手机已经出现背面双摄,尤其是女性用户喜欢拍照,相册应用可以根据时间及特定要求进行排列归纳。而新闻应用中的图片新闻,通过滑动图片可以查看,也可以通过点击下方缩略图查看。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P26_4.jpg?sign=1739522051-OAOKRcswTxspZE8e6znKFeraEB0Y2aoB-0-971ebcafa2600a527d414b1625a16030)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P26_5.jpg?sign=1739522051-iCb3KVDk1OQm8rNiAbNyZE36g9BMgPCc-0-c63d6e0343a6e0d8b1c0f9b7cdb8e418)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P26_6.jpg?sign=1739522051-Htl16Ojmt8k8EeEUZ0uDa7WQjF7Esq3t-0-ea9ebb2dd1c0c033fa950ddee1d547db)
2.2.7 自由式
自由的版式设计可以理解为没有限制的设计,将界面中的图文信息以一种自由方式排列,打破了固有的版式模式。自由式排列也可体现出一定的主从关系顺序,给人一种平衡感。浅色的背景可以保证界面的整洁性,而文字、图形则有相应的针对性。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P26_7.jpg?sign=1739522051-EgqfKQUdCBxMnKArNnoSC1RR1NuVwGcY-0-556d8d0b6d57c14e1e177b1ea4722be2)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P26_8.jpg?sign=1739522051-iT29ppAMtbUUjCzznoh5RlEGgZdYPPdS-0-85d34a275b6fa06e9ac05edc8d231507)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P26_9.jpg?sign=1739522051-gzd5HypmklNtFBm9FqEfrA6P83SdVViE-0-463c16267f14fbdc07985efbc10e0a46)
2.2.8 背景式
背景式的版式设计,多以图片作为页面的背景,多应用在欢迎页和与登录界面上。使用贴近应用的图片,可给用户一种身临其境的代入感。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P27_1.jpg?sign=1739522051-TOhYkM33iccuOaHrNH18CfiqCsOixDXo-0-51ce232d69b4575cfdeff5d3f408f479)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P27_2.jpg?sign=1739522051-bwxvsDWqEVOUIoX1jKdERWySK8TxENpx-0-895dae22afff78d6d7474e05f0fcc384)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P27_3.jpg?sign=1739522051-EdeDlyUwlfomp9rEFSqy617HXzxYc2bI-0-f1df66325cce1e37a0693b328acb0e87)
2.2.9 水平式
水平式可以使杂乱无章的图文变得井然有序,方便用户快捷地看到相应的信息。在APP UI设计中常使用这种版式布局,将页面空间充分利用。文字、图片、标题在相应的位置让用户一目了然,使用户更便捷、高效地浏览界面内容。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P27_4.jpg?sign=1739522051-HgbICPMwTwOXpiVwPRMwKaC2Is7oVUNz-0-1a786dc6438ccc7c0188cd033876fa44)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P27_5.jpg?sign=1739522051-mf3cnBiO9WjswXiSsTqJAWHoSMDMPqbf-0-1b92d61b81821ba7a6c27317706b8343)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P27_6.jpg?sign=1739522051-0HfcqtMzH9jN7mDKj1oKJ3HaYoAquIDY-0-3e791de778e7ffd354c5ab0ff00b6656)
2.2.10 引导式
引导式的版式是将界面中琐碎的元素进行整合,主要通过图形、文字内容和色彩对用户产生引导作用。引导式具有很强的秩序感、逻辑性和指示性。同时将信息按照关键词进行整理分类,可以使用户很快找到所需的信息。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P27_7.jpg?sign=1739522051-dVLaToOZIb7WmxT8YufqnKRTKaso7rMF-0-ac09683db4e34fbdb0d4af4331dc338f)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P27_8.jpg?sign=1739522051-ivZhGMXxR91cdljQxdoOPdfMUKveveio-0-7c418ec485a2a33dbf240472629fb53d)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P27_9.jpg?sign=1739522051-ipsujS09jR74fEsCNyfiayDbAT20Z9XP-0-2ede9072eb476b919cfa767fa988e7f7)