04八种常见的UI布局方式

学习UI设计的时候，经常要接触到页面的布局，布局的方式会直接影响一个APP的视觉效果，好的布局方式，往往能带来舒服的视觉效果，更能得到用户的接受与好评。然而万变不物带离其宗，移动端页面常用的布局，不外乎以下8种。

1.列表式布局

·列表式布局

特点：内容从上向下排列，导航之间的跳转要回到初始点

优点：

1.层次展示清晰明了

2.视线流从上到下，浏览体验快捷

3.可展示内容较长的菜单或拥有次级文字内容的标题

缺点：

1.导航之间的跳转要回到初始点，灵活性不高

2.同级内容过多时，用户浏览容易产生视觉疲劳

3.只能通过排列顺序、颜色来区分各入口重要程度

的很多地方都运用了列表式布局，这种布局方法能够让用户清晰明了地知道页面的内容，简介又大方。

2.陈列馆式布局

支付宝·陈列馆式布局

特点：布局比较灵活，即可以平均分布这些网格，也可以根据内容的重要性做不规则分布

优点：

1.同样的高度下可放置更多的菜单，流动性强

2.直观展现各项内容，方便用户浏览经常更新的内容

缺点：

1.不适合展示顶层入口框架

2.界面内容过多时显得杂乱，让用户眼花缭乱

支付宝的界面相信大家都很熟悉，它的首页就使用了陈列馆式布局，它能直观得展现各项内容，而且首页的内容都是用户经常游览的，不过由于界面过多，视觉体验效果就稍微逊色了一点。

3.九宫格布局

·九宫格布局

特点：相比陈列馆式，九宫格布局比较稳定为一行三列式

优点：清晰展现各入口，方便用户快速查询

缺点：

1.菜单之间的跳转要回到初始点

2.容易形成更深的路径，不能显示太多入口次级内容

很多软件都喜欢运用九宫格布局，的专题管理员这里也使用了这种布局，井然有序且间隔合理，视觉效果挺舒服的。

4.选项卡式布局

·选项卡式布局

特点：导航一直存在，具有选中状态，可快速切换另一个导航

优点：

1.直接展示最重要接口内容信息

2.分类位置固定，清楚当前所在入口位置

3.减少界面跳转的层级，轻松在各入口间频繁跳转

缺点：1.功能入口过多时，该模式显得笨重不实用

的首页也使用了选项卡布局，图中上面的红色框和下面的红色框都是此布局，但是，个人觉得上面的选项卡由于功能入口太多而显得笨重，下面的则恰到好处。

5.旋转木马式布局

一个·旋转木马式布局

特点：重点展示一个对象，通过手势滑动查看更多内容

优点：单页面内容整体性强，聚焦度高

缺点：1.受屏幕宽度限制，可显示的数量较少

2.不能跳跃性地查看间隔的页面

3.各页面内容结构相似，容易忽略后面的内容

阅读软件“一个”的首页则使用了旋转木马式布局，一个的主题是“复杂的世界里，一个就够了”，所以它选用此布局起到了画龙点告蚂运睛的作用，更能提高单页面的聚焦度。

6.行为扩展式布局

QQ好友列表·行为扩展式布局

特点：能在一屏幕内显示更多的细节，无需页面跳转

优点：

1.减少页面跳转的层级

2.对分类有整体性的了解，清楚当前所在的入口位置

缺点：分类位置不固定，当展开的内容较多时，跨分类跳转不方便

腾讯QQ的联系人页面使用了行为扩展式布局，相信大家也不陌生，用起来也很方便。

7.多面板布局

QQ兴趣部落·多面板布局

特点：能同时呈现比较多的分类及内容

优点：1.分类位置固定，清楚当前所在入口位置

2.对分类有整体性的了解，减少界面跳转袜梁的层级

缺点：界面比较拥挤，容易产生视觉疲劳

腾讯QQ的兴趣部落页面使用了多版面布局，能同时呈现出比较多的兴趣分类及内容，这也是一种典型的页面布局方式。

8.图表式布局

支付宝·图表式布局

特点:用图表的方式直接呈现信息

优点：直观，总体性强

缺点：详细信息显示有限

支付宝作为一个与金钱有关的软件，它余额宝页面选择了与自身比较符合的图表式布局，这种布局能直观详细地显示出信息，很适合用于数据、账单有关的APP。

调整QQ空间布局的方法伍衡：

1、登陆QQ空间。

2、鼠标移至“装扮”，点击“装扮商城”腔梁做。

2、页面跳转后，点击“换版式”，再点击左侧的“调整布局渣核”，即可选择自己喜欢的空间布局，点击“保存”即可。

最近，QQ的办公版本——TIM进行了一次更新升级。本次更新升级大幅修改了界面的样式，看起来更加的清爽、简洁和高效了。

这种界面州的先生还是比较喜欢的，没有QQ那么花里胡哨，也比微信那些残缺的功能更加丰富。

并且这次的登录界面还新增了微信登录的选项，看来 TIM 还打算从微信那边争取一部分用户过来。

闲话少说，进入正题。

州的先生看到这个出自大厂的图形界面程序，不由得想用 Python 的图形界面模块来实现一个。在上古时代，前端开发还是被称为“切图仔”的岗位，那时候的一个练手方式就是使用手写 HTML 和 CSS 来模仿各个网站的样式。

同样的，要想把桌面图形程序写得精美、好看，对优秀桌面图形界面程序进行模仿必不可少。今天，咱们就来使用 Python 的图形界面模块 PyQt5 模仿实现最新版本的 TIM 的登录界面。

最终的成果如下图所示：

文章目录

一、画虎先画骨

在动工之前，我们先来分析和设计一下这个登录界面的结构。TIM 原始的界面布局咱们无从得知，但是根据呈现出来的样式，咱们可以确定自己按照什么结构的组织这个登录界面。

首先，整个登录界面，由2块组成：

左侧的宣传图片

右侧的功能按钮

左侧的宣传图片没啥功能点，咱们可以直接用一个背景图片搞定；右侧的功能按钮则分了很多类和层级：

顶部的程序控制按钮组

中部的QQ/微信登录方式图标切换组；

中下部的表单输入框组；

底部的选项控制组；

基于此，咱们综合选择网格布局、垂直布局和水平布局来排列各个控件。

然后，登陆界面的各个子模块和功能按照如下图所示来选择 PyQt5 中的控件：

这样，登录界面的结构就完成了。

二、准备素材

图标在现代软件设计中的作用越来越大，恰当的图标使用可以增强界面的视觉美观和交互友好。在TIM的登录界面中，也是使用的很多的图标来表示各个功能的 *** 作，比如设置按钮、关闭按钮、切换按钮、账号选择按钮、登录按钮等。

在此，我们通过著名的阿里巴巴在老配线矢量图标库——IconFont 来获取所需的图标文件，经过选择，最终下载得到：

准备好图标之后，我们就可以在代码中使用了。对于这些图标文件，有两种使用方式：

直接使用 setIcon() 方法进行图标设置，例如：

self.qq_icon.setIcon(QtGui.QIcon("./qq_hover.svg"嫌宴))

在QSS中编写样式引用图标文件，例如：

QPushButton#setting_icon{

border-image: url("./setting.svg")

}

上述两种方式，我们根据实际的情况，都使用了。

三、完善细节

在界面结构搭建好之后，按钮图标准备和使用上之后，剩下的就是边边角角的细节优化和美化了。

色彩、间距的调整

TIM的登录界面主体上采用了灰色的字体颜色，还有QQ/微信登录切换的图标侍者指颜色、各个组件之间的间距、对齐方式都需要我们进行细致的调整。这些通过 QSS 、控件的 setFixedSize() 方法和布局的 setAlignment() 方法都可以完美实现。

窗口边框的隐藏

将窗口默认的工具栏边框隐藏掉，然后使用自定义的按钮来实现窗口的控制；

self.setWindowFlags(QtCore.Qt.FramelessWindowHint)

窗口阴影的实现

取消掉窗口边框之后，窗口与外界之间就没有的隔离的标志，我们可以重写绘制一个窗口的边框线，但是TIM使用的是窗口阴影的方式来突出和隔离界面，所以咱们也使用阴影的方式来实现：

shadow = QtWidgets.QGraphicsDropShadowEffect(self,

blurRadius=9.0,

color=QtGui.QColor(116, 116, 116),

offset=QtCore.QPointF(0, 0))

window.setGraphicsEffect(shadow)

四、成果展示

最终，使用 Python 模仿TIM编写出来的登录图形界面效果如下图所示：

---