产品第一课app基础知识及设计趋势.pptxVIP

陆吾产品试讲第一课 APP的基础知识与设计规范 第一课 陆吾网络科技产品部 2015.7.20 认识APP 目 录 / Contents 01 认识APP导航 02 APP交互设计规范 03 01 PART ONE 认识APP 状态栏 导航栏 标签栏 工具栏 内容区 认识APP 状态栏：状态栏展示了关于设备及其周围环境的重要信息。 导航栏：实现在应用不同信息层级结构间的导航； 有时也可用于管理当前屏幕内容。 标签栏：让用户在不同的子任务、视图和模式中进行切换。 工具栏：工具栏上放置着用于操作当前屏幕中各对象的控件。 内容区：实现阅读、功能交互的主要内容； 认识APP 02 PART TWO 认识APP导航 标签式导航 抽屉式导航 列表式导航 平铺式导航 宫格式导航 悬浮式导航 认识APP导航 良好的APP导航设计模式决策对整个app的核心体验起到关键作用 认识APP导航 第1类：标签式导航 底部tab式导航 顶部tab式导航 底部tab式导航的扩展形式 认识APP导航 第3类：列表式导航 作为主导航使用 作为辅助导航来展示二级内容 认识APP导航 第2类：抽屉式导航 认识APP导航 第4类：平铺式导航 轮播式导航比较适用于足够扁平化的内容和随意浏览的阅读模式； 需要注意的是，无法跳转至相邻页面，如果入口间需要反复跳转，则不适合这种模式； 认识APP导航 第5类：宫格式导航 常见但不常用。宫格式导航适合入口相互独立互斥，且不需要交叉使用的信息归类 一旦入口需要有所交集，必然导致更多的操作负累，这个时候只能根据产品特性做出权衡，如果不适合，建议果断拒绝这种方式。 认识APP导航 第6类：悬浮icon导航 悬浮式icon是一个非常便捷的操作入口，也适应大屏幕时代。 悬浮式icon会遮挡某些页面的操作，在设计的时候应该考虑让用户自主决定是否需要调出悬浮式icon。 认识APP导航 标签式导航：最常用、最不易出错，请第一时间考虑它 抽屉式导航：如果你的信息层级繁多，可以考虑将辅助类内容放在抽屉中 列表式导航：作为辅助导航来展示二级甚至更深层级的内容，每个APP必不可少，但请注意数量与分类 平铺式导航：如果你的内容是随意浏览，无需来回跳转的，可以考虑它。 宫格式导航：不建议在APP中作为主导航使用，如果非使用不可，请增加跳转的关联性 悬浮式导航：更适应大屏的导航模式，不妨试一试，但注意不要让它遮挡住某些页面的操作 认识APP导航 认识APP导航 03 PART THREE APP交互设计规范 页面布局 标准色 标准字 界面元素间距 弹出层 加载 图标/按钮 页面加载失败/内容为空 APP交互设计规范 1、页面布局规范 APP交互设计规范 2、标准色规范 APP交互设计规范 3、标准字规范 APP交互设计规范 4、界面元素间距 案例解读 APP交互设计规范 5、弹层规范 APP交互设计规范 6、加载规范 页面loading动画是APP界面必不可少的元素， 增加loading可以给用户明确的反馈功能正在加载，减少用户在等待功能响应引起的烦躁感。 另外loading动画除了常规的菊花还可以考虑使用npc 让APP更生动、活泼 或者使用logo口号加强APP的品牌形象 APP交互设计规范 7、图标/按钮规范 APP交互设计规范 8、页面加载失败、页面为空展示 THANKS