最近看了很多交互设计前辈的知识总结，非常厉害，但是我发现仅仅是看并不能记住，所以决定自己站在巨人的肩膀上按照自己的想法分类做一个文档整理总结，帮助自己记忆，也帮助大家学习。

    再次感谢各位大佬知识的无私奉献以及 @沐风 老师的启蒙：@沐风 @王M争 @吴轶 @龙爪槐守望者

    由于文章是我学习后按照自己想法的再整理，更加规范专业的内容希望大家移步前辈们的公众号。

    说说我对于规范的一些想法，学习的起初，我是分开按照 MD 与 IOS 自己的规范学习的，但到后来发现，其实很多线上的产品甚至包括龙头大佬都会有两个平台规范交叉的情况，这里我觉得规范要学习，如果按照规范设计是很不错的，但是大环境因素是多变的，还是可以在规范基础上做一些改动，兼顾个性与规范。

    从梳理大结构的骨架开始，再到四肢，到关节。

    *文中部分图片来自Google，仅供学习交流不做商用，由于我自己用的IOS所以部分两个平台混用的控件我会用IOS的图。

    *标红的都是有据可查的专业名词，方便大家拓展学习。

布局

    我见过很多文章都讲布局，说法很多，但是很混乱，所以根据样式我自己总结了以下几种常用布局。布局方式不仅仅会在整个页面内容中体现，还会在导航中体现。

    这里我参考了《移动应用UI设计模式》中的导航分类，在我看来，APP中的各种导航都会和布局互相影响，所以会先总结布局，再总结导航。

• 块面式（我自己瞎取的名字）：

    文字叙述不如图片直观，看过以下参考图打开也都可以理解块面式的具体样式了：在一屏界面里由规则或不规则的多个图形做大块面分布组合。这里的块面不仅充当了内容，还充当了导航。

• 陈列馆式：

    可以通过手势滑动的块面式布局。这里我用了书里的名字，我觉得很合适，这样的布局就像看展一样，每一个单独的内容都被摆放在屏幕里，通过滑动移步选择。

• 列表式：

    如同名字，列表式就是不同内容，不同宽度的列表样式布局。传统列表只有文字大标题，根据情况用途可适当加上图片，副标题，扩展ICON等。注：扩展ICON可以使列表在下部展开隐藏内容，暂时归类在列表内。

• 内容式：

    凡是内容由仅图或者仅文或者图+文，我都统称为内容式布局，有时底部会带一栏页面指示器或是其他功能控件。至于图表式，我个人觉得图表也是图没必要区分开，图文式算是非常常见，基本上面的布局也需要图文来填充。一屏完全图文的布局似乎除了开屏三兄弟很少见，我这里自己搜集了一张，网上找了几张。

• 功能式：

    根据界面需要传达的信息，设计为符合人们对现实认知的样式。我个人认为是对界面的一种拟物表现。

    由于减少认知负担，对于用户来说，这种布局设计会更易上手。

    虽然目前为止，真实风不太流行了，因为拟物风格的界面太过于“重”，普通内容类APP和工具类APP会比较少有，但是市场上仍然会有一些轻拟物的设计存在，有时候打破常规做一些变化可能更适合内容的展示或工具的操作。功能式的布局偶尔也会同时用到前几种布局方式。

    布局目前到此为止，如果以后发现遗漏的布局方式，会添加修改。目前大部分的界面都可以由以上基本布局变形得来。

导航

    导航就好比分叉路口的指标，告诉你顺着每个路口走下去，分别会是什么内容。

    多数情况下导航是不会占取整个首屏内容的（参考上文块面式布局），除非每个导航内容相互独立且同等重要。

    导航一般由icon/文字/icon+文字组合而成。

• 标签导航（Tab导航）

    标签导航因为不同平台不同场景也会分为顶部标签导航，底部标签导航，扩展式标签导航。如果情况需要，不同平台的规范也会混用。

    底部标签导航多用于IOS内，是官方认证的导航类别，由于其位置符合拇指热区，大部分尺寸适合单手操作，所以它也是用户认证体验相对较好的一种导航。底部标签导航一般情况下有3-5个适宜，不能左右滑动，上下滑动浏览内容时，可以根据场景隐藏。

    由于和安卓手机的原生的物理按键上下放在一起很容易误触，所以MD规范除了会用自己独有的抽屉式导航，还会选择顶部标签导航，MD官方认证名为：Tabs，虽然是MD官方认证的，但是也不影响IOS的设计采取这种导航方式，规范是死的，人是活的，好用就是最好的。数量可以超过5个，可以左右滑动，上下滑动浏览内容时，可以根据场景隐藏。

    IOS有一个类似于Tabs的导航叫做分段控件，虽然是官方认证的，但是不少安卓手机也会看到这样的设计，还是那句话：规范是死的，人是活的，好用就是最好的。分段控件样式如图，一般不可滑动，靠点击切换，数量最多5个，目前看到的都是固定的。

• 扩展式标签导航

    扩展式标签导航我有看到过叫舵式导航或者点聚式，但是我个人觉得扩展式这个名字更加符合其功能：标签导航五个位置不够用了所以藏几个在里面，要用的时候扩展出来。一般会对其中一个标签样式特殊化，引导点击后弹出更多的功能入口。

• 抽屉导航

    MD独有，从界面侧边通过手势拉出的导航。IOS可以有，但是程序员大佬们设计起来会比较麻烦，所以很少见，但是！QQ大佬用了。。。摩拜大兄弟也用了。。。更加说明一个问题：好用就行了！如果除了不规范再也从体验上找不到理由反驳那就默默接受吧！射击师们！

• 下拉菜单式导航（注：我并没有将将下拉菜单式和扩展式标签导航统称为扩展式，因为下拉菜单可以独立存在）

    我个人猜想这种导航应该是网站的下拉菜单衍生出来的，可以独立存在，也可以依附在tab导航的其中。

    用这种导航的经验尚浅的我还真没见过几个，，，并且在MD规范中的菜单一页，特别讲到菜单不应该用作应用中主要的导航方法，是作为一个小的控件提供一些操作用的，之后会讲到。

• 点聚式导航

    内容的每个入口会合并成一个按钮，浮动在页面上。点击按钮会展开。

    查询发现很多APP旧版是真的传统意义的点聚式，但是现在很多都改版或者弃用了。大概是因为切换效率太低，但以后难保会遇到合适的APP正好适用这种导航。

• 布局式导航

    依然是我瞎取的名字，为了方便归类，顾名思义，布局式导航即使用布局样式进行导航设计，内容即导航，导航即内容。

    块面式布局导航，即跳板式导航；陈列馆式布局导航即陈列馆式导航；列表式布局导航即列表式导航；内容式布局导航即仪表式导航和页面轮盘式导航（页面轮盘会带页面指示器）；功能式布局导航即隐喻式导航。

    示例图参考布局分类。

    以上为我自己整理总结的常见UI规范设计之布局&导航，经验浅薄，如有遗漏，希望大家可以扫一扫二维码来和我聊一聊。