产品原型2.界面排布设计

界面排布设计

原型页面结构

页面结构指产品原型设计工作界面的目标产品的页面结构，

页面结构由原型说明和产品原型2部分组成

原型说明是辅助说明内容，概括产品的全貌，原型说明包

括：修订记录、版本规划、业务流程、功能模块、交互说

明和参考尺寸等页面

产品原型是产品原型设计的主体部分，各页面依据功能结

构拓扑或者任务关系拓扑组织

常见导航布局及组件

导航设计

导航是把我们产品背后的业务逻辑最直观的展现给用户，好的导航设计在解决用户该去哪的问题的同时，

也很好的去弱化视觉强调行为，让用户培养或利用已有的本能行为操作。

导航设计的作用

结构化产品内容和功能

突出核心功能

扁平化用户任务路径

底部标签式导航

用于一级目录的导航，位于页面底部，能告诉用户当前位置及用户切换统一层级之间的不同模块，

一般最多不超过五个标签。

舵式导航

底部标签式导航的变种。为了突出中间的功能，将中间标签图标设计的比较突出，鼓励用户多使用该功能。

分段控制式导航

通常用于展示同一模块下不同类别的信息或者筛选不用模块的信息。

列表式导航

通常针对具体某个模块内容的信息进行分类，以列表的形式去呈现。

下拉菜单式导航

多用于浏览类的APP的二级导航，用户一般每次只浏览一种类型的内容，像刷微博。

抽屉式导航

对产品偏沉浸式阅读的情况下，其他模块切换频率低，可采用此导航形式。

宫格式导航

类似于手机桌面各个应用入口的导航方式。每个入口往往是比较独立的信息内容，用户进入一个入口后，

只处理与此入口相关的内容，如果要跳转至其他入口，必须要先回到入口总界面。

卡片式导航

一种更加可视化的导航，它能根据页面内容的变化及时更新图片，适合以图片为主的内容，像新闻、美食、旅行、视频图片等经常使用，常作为二级导航。

引导页类型

加载类

网络异常

提示类

单位控件

•搜索

•开关

•页面控制

•图标

•滑块

•进度

•选框