解析流程图与线框图的几种分类(2)

5、带网格的网站原型

图8

复杂一点的可以用Axure、Balsamiq等原型工具实现HTML线框图，可以参考《使用线框图来简化你的产品设计流程》一文，如图9：

图9

不要忘记用户界面设计版式--用户界面设计版式对设计用户界面是很有帮助的。版式往往能解决常见问题，合理的版式可以方便用户熟悉界面，尽快阅读应用。因此，要在设计流程的初期阶段就考虑版式，最好在草图(UE)阶段就开始，如图10：

图10

一些基本的页面布局也需要熟悉，或者自己制定一套具有延展性的页面布局标准，如图11：

图11

最后总结一下，流程图分为逻辑流程图和页面流程图，线框图分为纸质线框图和HTML线框图，线框图加上了操作步骤、交互逻辑可以叫做流程线框图。这些在理清产品架构，梳理产品逻辑时至关重要。但是流程图和线框图都是为了辅助产品开发，而不能本末倒置，在流程和原型阶段花费太多的时间和精力，只要能便于沟通，尽量选择最简单最高效的方式。

进入论坛参与讨论和交作业：http://www.missyuan.com/viewthread.php?tid=464120