app界面设计常用的布局（安卓UI界面设计,如何布局呢）

本文目录

• 安卓UI界面设计,如何布局呢
• 04八种常见的UI布局方式
• 9种常见的移动端产品信息布局方式
• APP首页常用排版
• 易被忽略的App界面设计细节
• app设计中,常用的界面布局方式有哪些

安卓UI界面设计,如何布局呢

一、界面布局之线性布局（）

这种布局比较常用，也比较简单，就是每个元素占一行，把它按照横向排放，也就是每个元素占一列。在布局中都按照垂直或者水平的顺序依次排列子元素，每一个子元素都位于前一个元素之后。

二、界面布局之相对布局（）

相对布局是android界面设计中比较常用和好用的一个布局方式。

三、界面布局之表格布局（TableLayout）

表格布局采用行、列的形式来管理元素组件。TableLayout的行和列不需要声明，而是采用添加方法控制。

每次在TableLayout中添加一个TableRow，一个TableRow就代表表格中的一行，也同样是容器，往里面添加一个子组件就代表增加一列。在表格布局中，列的宽度由最宽的那个单元格决定，整个表格布局宽度取决于父容器的宽度

四、界面布局之绝对布局（）

特点：以坐标的方式来定位在屏幕上的位置，引起缺乏灵活性，在没有绝对定位的情况下相比其他类型的布局更难维护

五、界面布局之帧布局（FrameLayout）

FrameLayout是五大布局中最简单的一个布局。在帧布局中，整个界面被当成一块空白备用区域，所有的子元素都不能被指定放置的位置，它们统统放于这块区域的左上角，并且后面的子元素直接覆盖在前面的子元素之上，将前面的子元素部分和全部遮挡。

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。

9种常见的移动端产品信息布局方式

某天，经理在工作讨论组发了2张App的界面截图，问：“你们喜欢哪一种布局方式？”这两个界面，一个是九宫格式，一个是普通列表式。

一时间，大家没法快速下定论。视觉设计师发言，“得看具体场景和需求来判定。”

有程序员同事打趣说，“哈哈，说了跟没说一样。”接着，陆续有人发表了自己看法，除了说到这2种方式各自的优劣，总结起来还是那句话——得看设计的目标是什么，综合多方面来考虑，没有绝对的好与坏，只有相对的合适与否。

在看过已有的关于App界面信息布局方式的一些资料后，我自己调整了一下，重新总结一下。从视觉和交互表现来说，常见的移动端产品界面信息布局方式，大致有以下 9 种。

一、列表式

列表式为竖向排列，每个信息单元有相同的结构。

优点：

符合人们从上往下阅读的习惯，顺畅快捷，浏览体验比较好。

因为有统一的信息单元格式，页面整体比较整洁、清晰。

每个信息单元根据需要可放置标题、摘要、图片、标签等元素，供用户预览并预测详细内容。

缺点：

当信息加载多了以后，容易让人出现审美疲劳，降低阅览兴趣。

信息排序越往后，受到的关注度自然会下降。一般采用颜色不同、字号大小、区块划分等来区分重要级别，增强层次感。

类似于列表式，有些演化出像卡片的排版，或者一个区块划分为左右2半（如下例子所示），成为2个入口，都是根据界面面积利用和设计目标等方面来考虑的。

二、横向排列式

与竖向排列相对应，信息单元也可以是横向排列。在交互操作上，这种方式需要左右滑动来切换信息单元，又称“旋转木马式”。

举例：下图中模块的布局方式

优点：

缩小在高度上占据的空间，利于界面其他信息的展示。

当信息单元占据的幅度较大时（例如图片类应用），有利于用户目光聚焦。

缺点：

左右滑动的交互有时候不方便。

当信息单元面积较大时，无法跳跃性定位到想看的信息单元，只能一个一个左右切换，直到切换到想看的那个为止。

因为操作不方便，可能有些内容会被遗漏，或者用户没兴致去翻看。

三、九宫格式

严格意义上的九宫格是3行3列，如果列数或行数增加，我们暂且都泛称为九宫格式（也有人将它们区分开来，称之为“陈列馆式”或“网格式”）

优点：

节省空间，一行可以放置多个入口。

清晰明朗、简洁。一般会突出icon图标，便于记忆和查找。

缺点：

因为空间有限，不能放置太多次级预览内容。

当入口过多时，也不利于辨识和查找。

四、选项卡式

也称为“tab式”，通过对当前界面的信息属性进行划分归类，分为多个选项，用户切换即可。App的主导航一般也是用tab的方式切换。

如下图：消息页面分为4个选项卡

优点：

不用来回跳转页面层级，只需要在当前页面一键切换即可看到不同内容，方便。

用户清楚地知道自己当前所在位置。

缺点：

选项卡数量超过5个就会显得笨重，如果一行放置不下，需要左右滑动才能显示完所有选项卡，会降低操作便捷性。

五、多面板式

对于分类比较多，每个类别囊括的内容也多的情况下，可用多个面板的形式来展示。

优点：

可以清楚地知道当前在哪个位置。

当前界面容纳多个入口，同级别之间切换，不需要在不同层级的页面来回切换，比较方便。

缺点：

面板独占一列空间，整个界面显得比较拥挤。

六、手风琴式

这种方式也有人称为“行为扩展式”。它是在当前界面点击一级信息，展开二级信息的方式，点击时再展开，再点击可缩回，有点类似手风琴缩展的动作。

优点：

只需要在当前页展开二级信息，不需要跳转页面，操作比较方便，也有利于用户认知信息的架构。

缺点：

当信息分类过多且需要手动再点击才能收回二级信息时，全部展开后，不利于跨分类跳转。

七、图表式

通过图表和内容的结合来展示。

优点：

图表比较直观，表现力更强。

缺点：

占据面积较大，整体界面能承载的信息不够多。

如果图形和交互动作结合，大多数用户可能发现不了这些交互。

八、抽屉式

抽屉式适用于隐藏次要功能，让产品突出核心功能。当用户需要查找某个功能入口时，通过点击抽屉，在“抽屉”里面进行查找。

优点：

可帮助隐藏一些功能入口，让产品更简约。

缺点：

用户第一次使用时，因为可见性被减弱，有些功能用户找不到，提高了他们的使用成本。

如果用户常用的功能被放置在抽屉里，则增加了用户操作的步骤。

九、标签式

标签式，顾名思义，就是通过标签设置的方法，把信息进行分类对应为一个个标签，或者标签直接作为功能入口（如“热门搜索”），便于用户操作。

优点：

清晰简洁，占据空间少。

便于切换查看对应的内容，用户清楚自己在哪个分类。

缺点：

标签不宜过多，不利于查找。

小结

移动端的产品形式越来越多样化，人们总是期望随时随地可以在移动端快速获取自己想要的信息，因为硬件规格的限制，如何在有限的空间和用户耐心中争夺用户的注意力，隐含了诸多产品设计的学问。

以上9种常见移动端信息布局方式，只是很浅层的总结，任何一种方式都没有绝对的优劣，不同方式可以互相组合、镶嵌使用，在具体设计时，需要根据实际情况来思考，在不断优化中找到最合适最有效的方案。

APP首页常用排版

在设计APP首页时，产品总希望狂加功能，内容越多越好，而且还必须要简洁。每次到这种时候，设计师的内心都是崩溃的。但是一堆放不下，放那么多东西太乱了，各种反抗无效后，还是得以平静的内心把大量内容都放下，在心理默练1万次：可以的，可以的。

这里分享一些常用在首页的排版方式，让首页在内容很多的情况下，依然能保持界面整体简洁而有层级。也希望能在大家进行首页改版时能提供工作效率。

一、网格布局

网格列表是一个连续元素，该元素由棋盘式、规律性的小格子构成。网格列表最适合用于同类数据，典型的如图片、图标。

a、9宫格入口图标

b、两栏、三栏、四栏

c、不规则网格运营入口广告

二、卡片

卡片式布局经久不衰，在于它能有效的组织不同的内容，使得信息模块化，提升可点击感，很好的利用了页面的空间。

a、简约风卡片

简约风的卡片很适合信息内容单一重复的页面，不会造成页面杂乱

b、大色块或渐变色卡片

带背景色彩的卡片多用于运营广告、活动推广

c、滑动的卡片·

为了提供页面空间的利用率，我们看到越来越多的左右滑动条出现在页面首页。这种滑动操作不单纯作用于banner广告，也出现在产品其他功能模块上。

三、列表

列表是单一的连续元素以垂直排列的方式显示多行信息，有纯文本列表，也有图文结合的列表。首页使用列表布局，多用于推荐热门资讯。

易被忽略的App界面设计细节

谈到App界面设计，很多新手都会过于纠结界面尺寸、图标尺寸，也会在颜色、字体、间距间毫无头绪。本文将按照app界面设计流程来讲解一下，新手需要注意的细节和误区。

产品定义就是产品经理通过市场调研、目标用户模型分析等途径，确定产品的定位、目标人群和功能需求。产品经理在需求文档中务必把产品定位和目标人群清晰传达给设计师。

app界面设计阶段，又可以细分为：整理需求文档、原型设计和视觉设计。

整理需求文档，建议用思维导图整理。思维导图能让我们更为直观的了解整个App的结构，包括分为几大模块，每个模块包括哪些内容，还有他们之间的联系。

没有思维导图，也不用到处找破解版，原型设计工具Mockplus中自带有脑图模式，可以帮你直观了解整个App的结构。

对于界面上要呈现的信息都思考过以后，你就可以在纸上打草图或是使用Axure、Mockplus等原型工具画出原型和交互状态。

注意，评审的时候叫上程序员。不然辛苦了半天，最后程序员说，实现不了，就不止是尴尬了。

设计元素上简约、条理清晰就好，去除过多的动效和交互。

推荐文章：用户最讨厌的3种界面交互设计

标注工具，推荐国产的zeplin。一键标注，点一下就能在PS或sketch里导出整个界面的标注信息到云端服务器，并且支持随时更新。

原型设计工具，也推荐国产的mockplus，简单好用，上手快，也支持切图处理。

视觉设计包括了几大步骤，分别是风格图的确认、设计规范的撰写、以及最后高保真图的输出及切图。

对于界面尺寸和图标尺寸，新手莫过于纠结。建议选择自己的手机尺寸来设计，方便预览效果。或者选择中间尺寸，方便向上、向下适配；

对于颜色、字体、间距都应该先定下最常用的参数（主要参数），再往次级依次展开，会使规范根基更稳，调理清晰。关于配色问题。

好文推荐：如何快速掌握正确的UI配色方案？6种技巧不容错过！

App界面整体基调的确定，要结合app的目标人群

比如腾讯旗下的QQ和微信，QQ口号“乐在沟通”，目标人群定位为年轻用户娱乐化的社交应用。所以QQ默认皮肤是浅蓝、浅灰、白三种主要颜色搭配，灵活的布局交互呈现给用户活泼有趣，甚至个性化的感觉。

微信的口号是“微信，是一个生活方式”，这种大而全的定位，注定设计风格更加谨慎和中性化。所以微信是黑、绿、白三种主要颜色搭配，中规中矩的布局呈现给用户稳重、信赖的感觉。

主流的设计风格勿过度使用。因为用户是多样的，需求是多种的，流行也是会变的。优秀的视觉设计师是有自己的理念。

推荐文章：2018年为什么渐变色重回主流设计趋势？

在视觉风格定位后，就可以开始撰写设计规范。

设计规范看似是在增加设计师工作量，其实是起到了承上启下高效完成工作的作用。设计师根据规范拓展页面，程序员根据规范进行开发。有效提升开发进度。

太全面的规范会影响设计师发挥，应只针对控件、色值、质感、动效、品牌元素等重要界面进行规范设定。20%不重要或者不可复用的控件不做规范，给设计师留20%的灵活空间，发挥自己创意。

注意规范要随着产品改版的节奏而迭代。在产品迭代过程中对不好的、过时的归纳及时同步归纳，并及时通知到项目相关人员。

App界面设计，新手免不了要入坑，也少不了反复修改，要有一个好心态，及时归纳总结，多浏览优秀的app界面设计案例，逐步积累，不积跬步，无以至千里。

Mockplus

作者：jongde

app设计中,常用的界面布局方式有哪些

竖排列表。视觉上整齐美观，常用于并列元素的展示，包括目录、分类、内容等。

横排方块。把并列元素横向显示的一种布局。常见的工具栏，TAB，Coverflow 等都采用这种布局。

九宫格。TAB、多面板、弹出框。

手风琴。用户点击分类可展开显示二级内容，在不用的时候，内容是隐藏的。可承载比较多的信息，同时保持界面简洁。

抽屉/侧边栏。抽屉也是将内容先藏起来，在需要时再展开。

标签。在搜索界面和分类界面时，会采用标签的方式来展现。标签方式比较动感的，增加了应用的趣味性，但使用场景有限。