常见的移动端界面设计布局有哪些，其特点和适用场景如何

智能手机的广泛应用，让移动端的APP设计、界面设计都成为设计者追捧的重点之一。任何内容都是设计的重点，就连界面设计布局有都有很多类型。大家有没有总结一下关于移动端常见的界面设计布局有哪些？各自有什么特点，适用哪些场景呢？今天就让faceui为大家介绍移动端界面设计布局。

　　常见的移动端界面设计布局

　　1、列表式布局

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

　　优点：层次展示清晰；视觉流线从上向下，浏览体验快捷；可展示内容较长的菜单或拥有次级文字内容的标题。

　　不足：导航之间的跳转要回到初始点；同级内容过多时，用户浏览容易产生疲劳；排版灵活性不是很高；只能通过排列顺序、颜色来区分各入口重要程度。

　　场景：列表菜单适合用来显示平级菜单，且较长或拥有次级文字内容的标题。

　　2、陈列式布局

　　特点：布局比较灵活，设计师可以平均分布这些网络，也可根据内容的重要性不规则分布，相对列表式，其优点在于同样的高度下可放置更多的菜单，更具有流动性，曝布流就属于其中一种。

　　优点：直观展现各项内容；方便浏览经常更新的内容。

　　不足：1、不适合展现顶层入口框架；容易形成界面内容过多，显得杂乱；设计效果容易呆板。

　　场景：适合以图片为主的单一内容浏览型的展示

　　3、九宫格式布局

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

　　优点：清晰展现各入口；容易记住各入口位置，方便快速查找。

　　不足：菜单之间的跳转要回到初始点；无法向用户介绍大概的功能，只能点击进去才能获知，初始状态不如列表式明朗；容易形成更深的路径；不能直接展现入口内容；不能显示太多入口次级内容。

　　场景：适合入口比较多的展示，而且导航之间切换不是很频繁的情况，也就是业务之间相对独立，没有太多的瓜葛。

　　4、选项卡式布局

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

　　优点：减少界面跳转的层级；分类位置固定；清楚当前所在的入口位置；轻松在各入口间频繁跳转且不会迷失方向；直接展现最重要入口的内容信息。

　　不足：功能入口过多时，该模式显得笨重不实用。

　　场景：大部分放在底部，方便用户操作，切换的时候，选中状态高亮显示，有少数放在顶部。适合分类少及其内容同时展示，导航菜单项数量为3-5个；各导航菜单项之间内容/功能有显著差异；用户在各个导航选项之间需要非常频繁的切换操作。

移动端界面设计（图片来自网络）

　　5、轮播图式布局

　　特点：重点展示一个对象，通过手势滑动按顺序查看更多。

　　优点：单页面内容整体性强，聚焦度高；线性的浏览方式有顺畅感、方向感。

　　不足：受屏幕宽度限制，它可显示的数量较少，需要用户进行主动探索；由于各页面内容结构相似，容易忽略后面的内容；不能跳跃性地查看间隔的页面，只能按顺序查看相邻的页面。

　　场景：适合数量少，聚焦度高，视觉冲击力强的图片展示。

　　6、伸展式布局

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

　　优点：1、减少界面跳转的层级；对分类有整体性的了解；清楚当前所在的入口位置。

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

　　场景：适合分类多及其内容同时展示；内容展示的信息多。

　　7、抽屉式布局

　　特点：突出核心功能，隐藏其它功能。

　　优点：不占用宝贵的屏幕空间，让用户首先能聚焦于内容；导航的菜单项目不受数量限制，应用的所有信息组织入口都可以加入到抽屉导航中；扩展性强，配置灵活，一些常用的快捷操作功能和低层级界面入口也能直接放置进抽屉导航中。

　　不足：隐藏框架中其他入口、用户需要一定记忆成本；对入口交互的功能可见性要求高；容易与应用内的其他交互模式冲突，比如侧滑手势操作。

　　场景：适合功能较多，信息结构较复杂的产品，用户的注意力聚焦在主信息流的浏览上，不用频繁切换“子产品模块”，且扩展性比较好。

　　8、弹出框式布局

　　特点：没有跳出感，适合内容比较少和简单操作的呈现。

　　优点：在原有界面上进行操作，不必跳出界面，体验比较连贯；在用户需要的时候才显示（重要提示除外），不主动干扰。

　　不足：显示的内容有限。

　　场景：适合内容较少的显示。

　　9、横向拓展式布局

　　特点：节省空间，可使用箭头，圆点或显示不全的图片告诉用户还有更多的内容可查看。

　　优点：查看更多内容不必跳出界面，体验连贯。节省空间。

　　不足：横屏宽度有限，更多的内容有数量上限制。

　　场景：适合图片或信息组块更多的展示方式。

移动端界面设计（图片来自网络）

　　10、多面板式布局

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

　　优点：减少界面跳转的层级；对分类有整体性的了解；分类位置固定；清楚当前所在的入口位置。

　　不足：界面比较拥挤。

　　场景：适合分类多及其内容同时展示；内容展示的信息不多。

　　移动端界面设计原则

　　1、用户原则。

　　人机界面设计首先要确立用户类型。划分类型可以从不同的角度，视实际情况而定。确定类型后要针对其特点预测他们对不同界面的反应。这就要从多方面设计分析。

　　2、信息最小量原则。

　　人机界面设计要尽量减少用户记忆负担，采用有助于记忆的设计方案。

　　3、帮助和提示原则。

　　要对用户的*作命令作出反应，帮助用户处理问题。系统要设计有恢复出错现场的能力，在系统内部处理工作要有提示，尽量把主动权让给用户。

　　4、媒体最佳组合原则。

　　多媒体界面的成功并不在于仅向用户提供丰富的媒体，而应在相关理论指导下，注意处理好各种媒体间的关系，恰当选用。

　　以上就是faceui为大家介绍的关于移动端界面设计的相关内容。虽然上述的移动端界面设计布局类型很多，但是到底哪些才是大家喜欢，容易得到用户认可的，大家在设计前可以做好用户调查。