[手机界面设计中12种常用布局广州启微信息科技有限公司.docx

前言总结下手机界面改版要考虑的布局，主要的分为以下2大类主导航列表式陈列馆式九宫馆式选项卡式旋转木马行为扩展式多面板图表式次导航抽屉式超级菜单式弹出式图片轮盘式其中，所有的主要导航都可以做为次级导航，但次级导航不太适合用作主要导航。为什么？因为次导航是隐藏起来，隐而不见、只有触发时才显示。主导航??1、列表式特点：内容从上向下排列，导航之间的跳转要回到初始点，好比一条街上有理发店，饭店，你想从理发店到饭店，得先多理发店出来，才能进入饭店。优点：1、层次展示清晰2、视觉流线从上向下，浏览体验快捷。3、可展示内容较长的菜单或拥有次级文字内容的标题不足：1、导航之间的跳转要回到初始点2、同级内容过多时，用户浏览容易产生疲劳3、排版灵活性不是很高4、只能通过排列顺序、颜色来区分各入口重要程度场景：列表菜单适合用来显示平级菜单，且较长或拥有次级文字内容的标题。?2、陈列馆式特点：布局比较灵活，设计师可以平均分布这些网络，也可根据内容的重要性不规则分布，相对列表式，其优点在于同样的高度下可放置更多的菜单，更具有流动性，曝布流就属于其中一种。优点：1、直观展现各项内容2、方便浏览经常更新的内容不足：1、不适合展现顶层入口框架2、容易形成界面内容过多，显得杂乱3、设计效果容易呆板场景：适合以图片为主的单一内容浏览型的展示?3、九宫格特点：相比陈列馆式，布局比较稳定为一行三列式布局。优点：1、清晰展现各入口2、容易记住各入口位置，方便快速查找不足：1、菜单之间的跳转要回到初始点2、无法向用户介绍大概的功能，只能点击进去才能获知，初始状态不如列表式明朗3、容易形成更深的路径4、不能直接展现入口内容5、不能显示太多入口次级内容场景：适合入口比较多的展示，而且导航之间切换不是很频繁的情况，也就是业务之间相对独立，没有太多的瓜葛。?4、选项卡式特点：导航一直存在，具有选中态，可快速切换到另一个导航。优点：1、减少界面跳转的层级2、分类位置固定3、清楚当前所在的入口位置3、轻松在各入口间频繁跳转且不会迷失方向4、直接展现最重要入口的内容信息不足：功能入口过多时，该模式显得笨重不实用场景：大部分放在底部，方便用户操作，切换的时候，选中状态高亮显示，有少数放在顶部。适合分类少及其内容同时展示，导航菜单项数量为3-5个；各导航菜单项之间内容/功能有显著差异；用户在各个导航选项之间需要非常频繁的切换操作?5、旋转木马特点：重点展示一个对象，通过手势滑动按顺序查看更多优点：1、单页面内容整体性强，聚焦度高2、线性的浏览方式有顺畅感、方向感不足：1、受屏幕宽度限制，它可显示的数量较少，需要用户进行主动探索2、由于各页面内容结构相似，容易忽略后面的内容3、不能跳跃性地查看间隔的页面，只能按顺序查看相邻的页面场景：适合数量少，聚焦度高，视觉冲击力强的图片展示?6、行为扩展式特点：能在一屏内显示更多的细节，无需页面的跳转优点：1、减少界面跳转的层级2、对分类有整体性的了解3、清楚当前所在的入口位置不足：分类位置不固定，当展开的内容比较多时，跨分类跳转不方便场景：适合分类多及其内容同时展示内容展示的信息多?7、多面板特点：能同时呈现比较多的分类及内容。优点：1、减少界面跳转的层级2、对分类有整体性的了解3、分类位置固定4、清楚当前所在的入口位置不足：2、界面比较拥挤场景：适合分类多及其内容同时展示内容展示的信息不多?8、图表式特点：用图表的形式直观的呈现信息优点：1、总体性强2、直观不足：1、详情信息显示的有限场景：适合总-分结构或表现时间段内的趋势走向的展示?次导航1、抽屉式特点：突出核心功能，隐藏其它功能。优点：1、不占用宝贵的屏幕空间，让用户首先能聚焦于内容2、导航的菜单项目不受数量限制，应用的所有信息组织入口都可以加入到抽屉导航中3、扩展性强，配置灵活，一些常用的快捷操作功能和低层级界面入口也能直接放置进抽屉导航中不足：1、隐藏框架中其他入口、用户需要一定记忆成本2、对入口交互的功能可见性要求高3、容易与应用内的其他交互模式冲突，比如侧滑手势操作场景：适合功能较多，信息结构较复杂的产品，用户的注意力聚焦在主信息流的浏览上，不用频繁切换“子产品模块”，且扩展性比较好?2、超级菜单式特点：默认具有选中态，导航/分类比较多，可快速切换到另一个导航/分类。优点：1、层次展示清晰2、浏览时产生流畅体验3、可展示内容较长的标题4、可展示标题的次级内容不足：1、菜单之间的跳转要回到初始点2、同级内容过多时，用户浏览容易产生疲劳3、排版灵活性不是很高4、只能通过排列顺序、颜色来区分各入口重要程度场景：比较复杂的信息架构，导航分类比较多。?3、弹出式特点：没有跳出感，适合内容比较少和简单操作的呈现。优点：1、在原有界面上进行操作，不必跳出界面，体验比较连贯2、在用户需要的时候才显示（