OK，那简单介绍了系统界面的几个组成部分，那么我们现在就是通过这个部分不同的组合就可以组成各种各样个性化的系统框架样式了。因为主导航栏是最主要的功能模块，所以我又分为两类：左侧导航、顶部导航。

左侧导航：最常见，现在最流行的导航位置设计方案

（1）左侧导航（含标签栏，atv，标签栏同浏览器标签页功能，方便用户打开多个栏目页面进行切换）

（2）左侧导航（主导航整合账号信息）

（3）左侧导航（导航和内容区同步滚动）

（4）左侧导航（右侧全部是内容，适用于导航、工具较少的情况）

顶部导航

顶部导航常用于网站导航的设计，系统中如果主导航的模块较少也可以放在顶部，提高空间利用率。

（1）顶部导航

（2）顶部导航（单独导航栏）

以上是一些系统界面布局样式，但是界面布局不限于这些结构，你可以设计的时候可以模块组件自由搭配，组件间不一定要区分的很明显，组成适合你的项目的系统界面框架。

这次只是介绍了框架的构成和一些简单的案例，教导了大家如何来搭建一个简单的系统界面框架。详细的制作一个首页界面、详细的界面内容区域的功能模块设计还需要更多细节，所以在下一节会介绍各类组件，包括首页的面板和详情页的各类列表、弹窗、内容的各类样式等等，方便大家更好的了解系统原型搭建的方式。

小结

作为一个正式作为交互设计师一年多的菜鸟来说，第一次编辑这种分享类的文档。没接受过系统的专业的学习，所有学到的知识都是来源于各种产品设计类相关的网站分享的文章。所以，第一次分享更多的还是报着学习的目的，逻辑话术上肯定还有很多问题，分析的也很片面，讲的也很啰嗦，所以如果本文有各种问题，请各位童鞋不吝指出，谢谢。

后续还会一直分享自己的设计心得的，会一直坚持写下去的。

作者：Tom王，菜鸟交互设计师一枚，2年未满的产品交互设计经验，2年电商APP运营经验。

本文由 @Tom王 原创发布于人人都是产品经理。未经许可，禁止转载。