如何快速搭建系统原型（一）(4)

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

顶部导航

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

（1）顶部导航

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

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

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

小结

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

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

原型演示地址：http://1q779b.axshare.com

备注：

文章是我的不专业总结，如有遗漏和疏忽请在评论区指出；

文章中部分界面截图内容来自网络，如有侵权，请及时联系我进行处理。

下一篇：《如何快速搭建系统原型（二）：内容区（首页）设计》

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

（编辑：ASP站长网）