项目6：绘制茶类APP线框图.pptx

项目6绘制茶APP线框图数字媒体交互设计

目录项目导读学习目务实施思考与练习

项目导读什么是线框图？为什么要绘制线框图？如何绘制线框图？前面我们已经对用户需求进行结构化梳理，绘制了茶APP的信息框架图，并梳理了核心的用户流程，现在进入到数字媒体交互设计过程中非常重要环节，即线框图的绘制。交互设计师通过绘制线框图，快速将APP的主要功能板块、布局、交互行为等与团队成员沟通，明确APP的总体设计方向。01

学习目标掌握线框图绘制的原则02绘制茶产品APP的线框图

任务1：确定茶APP的导航方式01APP的导航承载了用户或许信息/服务的快捷入口和清晰指引，直接影响了用户对APP的使用体验，因此要结合产品的定位、用户群、内容选择合适的导航方式。为什么导航方式这么重要？

常见的导航方式任务1：确定茶APP的导航方式01

标签式导航任务1：确定茶APP的导航方式01以喜马拉雅APP豆瓣APP为例

宫格式导航任务1：确定茶APP的导航方式01以支付宝APP得到APP为例

抽屉式导航任务1：确定茶APP的导航方式01以keep、豆瓣APP为例

抽屉式导航任务1：确定茶APP的导航方式01以微信APP为例

菜单式导航任务1：确定茶APP的导航方式01以微信APP为例

列表式导航任务1：确定茶APP的导航方式01以微博APP、知乎APP为例

任务2：绘制茶产品APP的线框图01重逻辑，轻视觉、轻工具重逻辑：功能板块、内容排序、页面连接等的内容逻辑性，轻视觉：先不过多考虑颜色、按钮形状等元素轻工具：交互设计师可先手绘，再使用原型设计工具（Axure或墨刀等）便能一心寻求最优的产品设计方案，同时加快创作的速度。线框图绘制原则

任务2：绘制茶产品APP的线框图01绘制茶产品APP的主要页面，确定每个页面的功能、元素、顺序等。其中，要反复确认APP的主要导航方式和辅助导航方式尤为重要，直到找到最佳的方案。

思考与练习01分组练习，完成茶类APP线框图绘制核心知识点：线框图绘制的方法与原则。?要求：文案自拟，产品定位明确制作过程完整，手绘线框图，小组内充分讨论、完善提交每个底部标签页面、主要功能页面、内容详情页的草图。熟悉墨刀原型设计工具

感谢聆听！