小屏幕限制下较常见的版式，适用于较长的文字信息组合界面布局。如：分类信息的展示形式、产品列表和对话列表等。

一、优点：信息直观，节省界面空间，浏览效率高。

二、缺点：单一列表易示人使人疲劳。

卡片式设计采用图像与文字结合的方式将信息传达给受众，在有限的空间建立了无限可能性。

一、优点：信息直观，节省界面空间，浏览效率高。

二、缺点：每一屏呈现的信息量较小。

瀑布流是指在滑动页面的时候，内容会不断的刷新出来。

Feed流在流动时会对内用进行干预，会根据用户喜好来推荐内容。

一、优点：展示具有吸引力，内容易沉浸。

二、缺点：过于依赖图片的质量。

通常承载较为重要功能，一般用于展示较多且重要的快捷入口。标签式布局视觉上会呈现出较为明显的层级。

一、优点：入口展示清晰，查找方便。

二、缺点：扩展性较差，标题不宜过长。

手风琴布局常用于两级结构的界面中，当用户点击分类图标时，可展开二级内容。

一、优点：可以承载较多信息，减少界面跳转率。

二、缺点：同时打开多个菜单时，标题不易被找到。

主要用在一些商务型APP上，多用于数据分析的界面上，方便用户观察查找数据。

一、优点：让数据可视化。

二、缺点：对于界面空间消耗比较大。

布局更常见于平板终端，手机端也会用到。适合在内容和分类较多的情况下使用。

一、优点：减少了界面间的跳转，分类效果直观。

二、缺点：信息过多会较拥挤，不利于单手操作。

一方面是对内容信息的拓展，另一方面又像一个小精灵，灵动的穿梭在界面、版面之间。（不宜过多，多则乱）

保障一些重要信息在固定尺寸下展示不全的问题，保障信息流的顺利展示。（要有主有次，保持轻盈感）

有一个曲度性的隐形路径串联各个卡面，叠加效果大大节省其他卡面内容的刻画。（需要可视化的图作为首图主内容，讲究元素选择和刻画）

和多米诺排列一样，扇形视觉上自带优越感。（中心是表达重点，两侧轻量概括）

将界面一分为二，有利于直观体现信息的广度和层次关系。（需要相对明确的区分度，侧边栏的宽度可以根据内容信息自由控制）

类似卡片延伸，以插图插画形式作为破框元素。（要求一定的绘画水平，选择和主题相契合有代表性的元素插图）

对部分信息的错位或倾斜，打破平衡。（特异也代表突出，选择内容和如何表达很重要）

对界面局部内容进一步说明，体现你的详细思考，突出亮点。（补充卡片不宜过多，最多2个，不能对外界面造成过多干扰）

Banner加轮播点的方式是最常见的。轮播点数量为Banner数量，一般会自动轮播，也可滑动轮播。

分栏Banner两侧展示待播放Banner，暗示用户有多个Banner。轮播动效自然流畅。

通栏和分栏的样式根据产品的内容布局和信息层级区分，做成通栏后Banner页面会更大，尤其上下分栏。

界面头部为用户最先注意位置，背景和Banner融合使得用户更加沉浸于此。背景跟随Banner变化，使用户体验更好。

Banner内部可由设计师随意设计，多年来也对外形有所突破，如胶囊广告、悬浮广告等，增加界面创新和设计感。

对于界面的创新在Banner上可以更为直观的体现，如3D翻转、悬浮动态、元素位移等复杂效果，可偶尔使用增加新鲜感，频繁使用会怎加用户疲劳感。

常规导航样式大部分应用于2级及后续界面，基本由标题和按钮组成。

简约大气感，适用于新闻、社交、杂志等功能单一的类型应用。

多应用于分类多、内容多的产品，便于用户精准搜索查找，若两侧图标多时，搜索框可位于第二行。

搜索框高度一般为56-64px

相对核心功能顶部展示，主要用于目录的导航，用户单手和双手都能轻松点击。

通栏导航栏在视觉层没有容器，可以与背景融为一体，起到渲染气氛的作用。若背景不可控，可以增加黑色透明蒙层，确保信息可识别性。

是整个界面布局的核心功能区域，通常在主页面中间靠上的区域，如果有 Banner，则通常在Banner 下方，如果没有 Banner，则直接置于标题栏下方

根据布局图标数量将界面宽度等分，每一个图标在等分内部居中显示；一般表现为1～3行*4～5列。

一般适合带有左右滑动的情况，固定好图标之间的间距不变，根据图标数量自然显示或者遮挡；最左侧的图标与其余页面元素左对齐。

适用于需要明确的区分入口权重的产品，会采用强弱对比的主副型入口。

即上图标下文字的视觉形式，这种形式具有更普遍的适用性；图标与文字的间距一般设置在8px（4pt）；入口字体大多使用24px，色值使用（#333/#666）

类似瓷片区一样做成卡片拼贴样式；对图形设计能力要求颇高。

一个页面只有一个主按钮。

要和产品调性/内容一致。

避免出现文字识别困难。

颜色要浅也要考虑可读性。

从产品图片中提取颜色。

加深文字颜色。

让用户知道自己错在哪。

使用各平台通用的字体。

让用户阅读更舒适。

头部与下部分的衔接尽量柔和形成整体，主要数据的展示不一定要使用主色，可以加粗加深来区分，减少整体的视觉干扰。

tab选项对选中的选项进项加粗加大，缩短并加粗线条，使得更加突出和干练。

遇到固定文案与图片时，可以与介绍内容融为一体，减少内容之间的割裂。

遇到多行而且长短不一的文案，左对齐往往是最好的选择，能够将杂乱信息整齐、有层次的排列，降低视觉噪音。