第二章：移动UI的布局原则

这是一篇关于第二章：移动UI的布局原则的思维导图，从初步布局、高级布局、移动UI的布局规则、优化布局几个方面作了介绍。

第二章：移动UI的布局原则

• 初级布局
  • 竖向排列布局
    • 特点：
      • 常用来展示功能目录
    • 优缺点：
      • 屏幕分辨率有限，无法显示电脑中各种软件的工具栏
  • 横向排列布局
    • 特点：
      • 在元素数量较少的移动UI中，横向展示各种并列元素
    • 优缺点：
      • 优点：不限于屏幕分辨率，可完全展示电脑中各种软件的工具栏
      • 缺点：用户需要主动探索并且体验性一般
  • 九宫格排列布局
    • 特点
      • 最基本的表现是一个3行3列的表格
    • 优缺点
      • 很多UI采取了九宫格的变体布局方式
• 高级布局
  • 弹出框式布局
    • 特点
      • 在移动UI中，对话框通常要作为一种次要窗口，可以出现在界面的各种位置，是一种常见的布局方式。
    • 优点与缺点
      • 优点：弹出框可以隐藏很多内容，节省手机的屏幕空间
  • 热门标签布局
    • 特点：
      • ①搜索界面和分类界面通常会采用此布局②此布局可以使界面更语义化，使各种移动设备能够更加完美的展示软件界面。
  • 侧边栏式布局
    • 特点：
      • 通过纵向排列切换项解决栏目个数问题。
    • 优缺点：
      • 缺点："抽屉"中的栏目不能和主体内容同时出现在栏目中。
        • 列表式布局
        • 图标卡片式布局
  • 陈列馆式布局
    • 特点：
      • 主要采用"图片+文字”的形式来排列APP的各种元素。
    • 优缺点：
      • 优点：此布局分为两种模式①网格布局模式②轮盘布局模式
  • 分段菜单式布局
    • 特点：
      • 主要采用"文件+下拉箭头”的方式来排列界面中的各种元素
  • 点聚式布局
    • 特点：
      • 此布局的展示方式比较灵活，带来更加开阔的界面效果。
    • 优缺点：
      • 优点:可以用于设计一些复杂的APP层级框架。
      • 缺点：①一些常用功能可能会被隐藏起来，用户难以发觉。②此布局对人口交互功能的可见性要求较高，增加了设计难度
  • 转盘式布局
    • 特点：
      • 采用图片环绕在界面四周的形式。
    • 优缺点：
      • 优点：便于用户单手操作，比较简便。
  • 导航栏置底式布局
    • 优缺点：
      • 优点：设计简单，适合单手操作，方便用户快捷操作
  • 磁贴状态式布局
    • 特点：
      • 此布局与Windows 8的Metro界面风格相似，界面中的各种元素以磁贴的形式展现
  • 超级菜单式布局
    • 特点：
      • 此布局的导航比较酷炫。
    • 优缺点：
      • 优点：操作连续性强，用户体验感流畅，可查看不同的类别。
  • 导航栏置顶式布局
    • 特点：
      • 与导航拦置底式布局相反。
    • 优缺点：
      • 优点：不同APP有不同的设计规则。
  • 幻灯片式布局
    • 特点：
      • 常被用于并列展示图片或者整块内容，
• 优化布局
  • 图表信息布局
    • 特点
      • 可以使APP显示的更加商务化。
    • 优缺点
      • 优点：图表要素显示完整，标题区比较突出，用户可以从上到下进行阅读，体验感比较流畅
      • 缺点：虽然标题区突出，但由于标题过多，造成单个标题不够突出的现象，并且信息量太多而APP的空间有限，难以显示所有数据。
  • 界面细节的设计方法
    • 关键细节
      • 适当借鉴
      • 界面运作
      • 界面布局
• 移动UI的布局规则
  • 统一的Logo位置
    • 对APP的Logo位置进行规划，最好将所有界面的Logo位置进行统一
  • 合理的内容排列顺序
    • 当界面信息内容展示过多，尽量按照"先后次序"进行合理排序
  • 突出的APP重要条目
    • 很多APP中有一些重要条目，可在布局时尽量放置界面的突出位置。
  • 适当的界面长度
    • APP中的主界面不宜过长，且每个子界面的长度也要适合。