框架模板使用指南


简介

369Cloud IDE为方便开发者学习,提高开发效率,丰富页面框架类型,特新增9套页面框架模板。下面会详细说明使用框架的过程中需要注意的事项。

如何创建框架模版

打开IDE在左上角选择 文件-->新建-->创建页面框架模板,会提示该模板所属的项目、所在目录、类型、新建的页面名称,如图所示:

image

目录

陈列馆式


image

简介

陈列馆式:又名图式,图片+文字
优点:内容可视化增强,另外也可以根据页面的变化随时更新推送内容
适用:文章、视频、菜谱、美图、相册、旅游、设计、分享下载出售云备份类的APP

抽屉式


image

简介

抽屉式:又名侧边栏式,图标
优点:追求核心内容的突出,弱化导航界面,适合单一功能产品或信息流产品
适用:功能类型单一的信息流产品,因为导航默认是被隐藏的,所以设计形式不要太过独特,要尊重用户已有的习惯,进入后要有明确的提示告知用户当前的位置

宫格式


image

简介

宫格式:又名桌面式,图标+文字
优点:APP功能一目了然,扩展新模块方便快捷,且有助于大流量的分发
适用:工具类应用、分类信息导航应用,不适合需要频繁在几个信息入口间切换的情况

标签式


image

简介

标签式:又名选项卡式,图标+文字
优点:功能类型的导航,强调功能,能快速的在多个信息入口之间进行切换
适用:大部分应用,iOS主推模式

列表式


image

简介

列表式:文字、文字+图标
优点:容易扩展和分组,条理清晰,二级列表可以做到展开和隐藏,方便用户查找信息并快速定位
适用:基本上每个APP都包含,常见于设置、消息或者大量同级信息页面

组件

列表式框架应用了(citySelector、barcode)组件,若使用IDE的真机同步功能,需自定义app
(注意:需要在控制台组件设置里选择该组件,否则该应用将无法看到效果

image

页面轮盘式


image

简介

页面转盘式:又名走马灯式,图片
优点:内容聚合程度高,信息干扰少,用户容易聚焦到主题,背景有场景带入效应
适用:卡片类展示应用,如音乐、名片、文章等应用,注意设计上提供视觉

组件

列表式框架应用了(slidingPage)组件,若使用IDE的真机同步功能,需自定义app
(注意:需要在控制台组件设置里选择该组件,否则该应用将无法看到效果

image

点缀式(扇形扩展式1)


image

简介

点聚式:又名扇形扩展式,Path按钮, 图标
优点:空间资源占用较少,操作方便快捷,增加APP趣味性
适用:在一些主要流程界面中作为全局导航使用,不适合频繁切换功能的APP

点缀式(扇形扩展式2)


image

简介

点聚式:又名扇形扩展式,Path按钮, 图标
优点:空间资源占用较少,操作方便快捷,增加APP趣味性
适用:在一些主要流程界面中作为全局导航使用,不适合频繁切换功能的APP

分段菜单式


image

简介

分段菜单式:文字+下拉箭头 Segment control
优点:以内容为主且与界面连贯性较好,展开和收起菜单对当前界面没有影响
适用:有诸多类别的信息流产品,菜单选项较少时使用分段式导航,过多时可以和列表式搭配使用