一时间，大家没法快速下定论。视觉设计师发言，“得看具体场景和需求来判定。”
有程序员同事打趣说，“哈哈，说了跟没说一样。”接着，陆续有人发表了自己看法，除了说到这2种方式各自的优劣，总结起来还是那句话——得看设计的目标是什么，综合多方面来考虑，没有绝对的好与坏，只有相对的合适与否。
在看过已有的关于App界面信息布局方式的一些资料后，我自己调整了一下，重新总结一下。从视觉和交互表现来说，常见的移动端产品界面信息布局方式，大致有以下 9 种。
一、列表式
列表式为竖向排列，每个信息单元有相同的结构。
优点：
符合人们从上往下阅读的习惯，顺畅快捷，浏览体验比较好。
因为有统一的信息单元格式，页面整体比较整洁、清晰。
每个信息单元根据需要可放置标题、摘要、图片、标签等元素，供用户预览并预测详细内容。
缺点：
当信息加载多了以后，容易让人出现审美疲劳，降低阅览兴趣。
信息排序越往后，受到的关注度自然会下降。一般采用颜色不同、字号大小、毕橘区块划分等来区分重要级别，增强层次感。
类似于列表式，有些演化出像卡片的排版，或者一个区块划分为左右2半（如下例子所示），成为2个入口，都是根据界面面积利用和设计目标等方面来考虑的。
二、横向排列式
与竖向排列相对应，信息单元也可以是横向排列。在交互 *** 作上，这种方式需要左右滑动来切换信息单元，又称“旋转木马式”。
举例：下图中[新书抢鲜]模块的布局方式
优点：
缩小在高度上占据的空间，利于界面其他信息的展示。
当信息单元占据的幅度较大时（例如图片类应用），有利于用户目光聚焦。
缺点：
左右滑动的交互有时候不方便。
当信息单元面积较大时，无法跳跃性定位到想看的信息单元，只能一个一个左右切换，直到切换到想看的那个为止。
因为 *** 作不方便，可能有些内容会被遗漏，或者用户没兴致去翻看。
三、九宫格式
严格意义上的九宫格是3行3列，如果列数或行数增加，我们暂且都泛称为九宫格式（也有人将它们区分开来，称之为“陈列馆式”或“网格式”）
优点：
节省空间，一行可以放置多个入口。
清晰明朗、简洁。一般会突出icon图标，便于记忆和查找。
缺点：
因为空间有限，不能放置太多次级预览内容。
当入口过多时，也不利于辨识和查找。
四、选项卡式
也称为“tab式”，通过对当前界面的信息属性进行划分归类，分为多个选项，用户切换即可。App的主导航一般也是用tab的方式切换。
如下图：消息页面分为4个选项卡
优点：
不用来回跳转档肢页面层级，只需要在当前页面一键切换即可看到不同内容，方便。
用户清楚地知道自己当前所在位置。
缺点：
选项卡数量超过5个就会显得笨重，如果一行放置不下，需要左右滑动才能显示完所有选项卡，会降低 *** 作便捷性。
五、多面板式
对于分类比较多，每个类别囊括的内容也多的情况下，可用多个面板的形式来展示。
优点：
可以清楚地知道当前在哪个位置。
当前界面容纳多个入口，同级别之间切换，不需要在不同层级的页面来回切换，比较方便手蠢团。
缺点：
面板独占一列空间，整个界面显得比较拥挤。
六、手风琴式
这种方式也有人称为“行为扩展式”。它是在当前界面点击一级信息，展开二级信息的方式，点击时再展开，再点击可缩回，有点类似手风琴缩展的动作。
优点：
只需要在当前页展开二级信息，不需要跳转页面， *** 作比较方便，也有利于用户认知信息的架构。
缺点：
当信息分类过多且需要手动再点击才能收回二级信息时，全部展开后，不利于跨分类跳转。
七、图表式
通过图表和内容的结合来展示。
优点：
图表比较直观，表现力更强。
缺点：
占据面积较大，整体界面能承载的信息不够多。
如果图形和交互动作结合，大多数用户可能发现不了这些交互。
八、抽屉式
抽屉式适用于隐藏次要功能，让产品突出核心功能。当用户需要查找某个功能入口时，通过点击抽屉，在“抽屉”里面进行查找。
优点：
可帮助隐藏一些功能入口，让产品更简约。
缺点：
用户第一次使用时，因为可见性被减弱，有些功能用户找不到，提高了他们的使用成本。
如果用户常用的功能被放置在抽屉里，则增加了用户 *** 作的步骤。
九、标签式
标签式，顾名思义，就是通过标签设置的方法，把信息进行分类对应为一个个标签，或者标签直接作为功能入口（如“热门搜索”），便于用户 *** 作。
优点：
清晰简洁，占据空间少。
便于切换查看对应的内容，用户清楚自己在哪个分类。
缺点：
标签不宜过多，不利于查找。
小结
移动端的产品形式越来越多样化，人们总是期望随时随地可以在移动端快速获取自己想要的信息，因为硬件规格的限制，如何在有限的空间和用户耐心中争夺用户的注意力，隐含了诸多产品设计的学问。
以上9种常见移动端信息布局方式，只是很浅层的总结，任何一种方式都没有绝对的优劣，不同方式可以互相组合、镶嵌使用，在具体设计时，需要根据实际情况来思考，在不断优化中找到最合适最有效的方案。
（1）“T”结构布局形式。所谓“T”结构，就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，整体效果类似英文字母“T”，所以称之为“T，形布局。这是网页设计中用得最广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明，是初学者最容易上手的布局方法。缺点是规矩呆板，如果不注意细节色彩，很容易让人”看之无味“（2）”口“型布局。这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情链接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤，不够灵活
（3）对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是很难将两部分有机地结合起来
（4）POP布局。POP引自广告术语，就是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点。优点显而易见：漂亮吸引人。缺点就是速度慢。作为版面布局，誉做神还是值得借鉴的。
（5）国型布局。国型布局也称为同型布局，是一些大型网站喜欢使用的布局类型。最上面是网站的标题以及横胡渗幅广告条，接下来是网站的主要内寄，左右分列一些小条内容，庆亏中问是主要部分，与左右一起罗列到底，最下方是网站的一些基本信息、联系方式、版权声明等。这种布局通常用于主页的设计，其主要优点是页面容纳内容很多，信息量大。
6
（6）标题正文型布局。这种布局的最上方是标题或广告等内容，下面是正文。通常文章页面或注册页面采用此种布局，其特点是简洁明快，干扰信息少，较为正规。
一般是使用键盘加大竖鼠标写的，布局分两大类：
台败键式机为主机加显示器加键鼠；
笔记本如果是苹果则不怎么用鼠标，win本一般带个鼠标。
传说中还有手写代码的，目前没见过，可能是斗帝滚枯大级别的存在。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）