阿里巴巴外部培训--线框图培训正式版.pptx

《阿里巴巴外部培训--线框图培训正式版.pptx》由会员分享，可在线阅读，更多相关《阿里巴巴外部培训--线框图培训正式版.pptx（34页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、线框图入门Wireframes外部分享版Contents1.认知篇：什么是线框图以及为什么要画线框图2.理念篇：必要的理论和前提3.工具篇：为什么要用Axure？4.基础篇：Axure入门5.进阶篇：Axure部分高级技巧6.番外篇：让线框图更有效！Know What&WhyKnow HowDo Better【认知篇】线框图是一个大致的版式来描述用户所看到的骨架图用线框和简单的勾勒来表现内容不要关心品牌和视觉设计表现信息的组织结构和控件位置类别顺序层次什么是线框图?你脑子里一定有一些疑问。包括我在内。？【认知篇】为什么要做线框图？其他人的疑问：项目为什么需要线框图？能不能直接Skip到视觉设计

2、？我们能不能把线框图的时间缩短？交互仅仅在画线框图吗？问题核心：问题核心：不了解线框图的作用以及价值，对线框图的必要性怀疑。在实际的项目里，线框图所处的阶段时长有时是视觉的2倍。【认知篇】为什么要做线框图？设计师的疑问：到底，线框图能帮我解决啥问题？线框图要细致到什么地步？是不是把视觉稿去色就是线框图了？为什么PD也要求画线框？那我们有什么不同？问题核心：问题核心：为了画线框而画线框，忽视线框图的真正价值。【认知篇】为什么要做线框图？【认知篇】为什么要做线框图？线框图产生于项目前期【认知篇】为什么要做线框图？直观呈现需求低成本、快速、易修改不可取代的优势1.快速创建2.帮助聚焦3.方便修改在项

3、目前期，去除视觉和细节干扰，确保评审中大家把注意力集中在什么需求、需要放啥东西、需要放啥功能，优先级如何划分这样的层次上。设计师不需要考虑太多细节。【认知篇】为什么要做线框图？更多的好处：1.快速且低成本地获得反馈(Getfeedbackearlier,cheaper)2.在多种可能中对比试验(Experimentwithalternatives)3.轻松修改或者放弃设计(Easiertochangeorthrowaway)对项目组1.保证产品质量低成本筛选，优化，用户测试2.帮助我们高效工作需求具体化帮助PD整理逻辑。工作量具体化前端、视觉、RA评估资源有据可依。视觉方向指引给视觉设计师以梗

4、概帮助文案工作PD可以更容易整理文案并让COPY理解情境对设计师本人【认知篇】为什么要做线框图？理念篇：必要的理论和前提并不是精美细致的就是好的从最简单的开始最大的价值在于讨论和优化草图信息块状图粗略线框图详细线框图交互说明线框图每个阶段的线框图都有其特定的价值【认知篇】并不是精美细致的就是好的要放什么东西？他们的重要等级如何？我们假设中的用户行为如何？具体内容如何设计？他们分别放到什么位置？如何表现优先级？最终方案【认知篇】从最简单的开始，逐渐添加细节输入：问题：BRD市场预研功能需求优先级用户研究人机交互原则功能描述业务流程用户研究人机交互原则功能描述设计规范人机交互原则用户研究视觉规范线

5、框图是为了“更有效吵架”线框图阶段的时间，有一多半要花在讨论、确认和评审上。PDVS交互 VS 视觉中场讨论PD或者其他角色为什么要画线框图？如何区分定位？PD交互有用易用想用帮助自己撰写需求文档向设计师更好传达需求让老板提前看到产品雏形视觉他们都在画图快速呈现原型，优化设计组织评审、讨论从用户角度提供建议根据目标人群，控制产品风格传达情感化因素粗略线框图精细线框图视觉稿/高保真原型功能点内容块业务流程布局/结构交互细节层次/轻重位置/顺序功能/内容任务流布局/结构位置/顺序层次/轻重颜色质感整体风格/气质颜色质感其他视觉元素排版、图片、icon工具篇：为什么选择Axure工具不是问题给Axu

6、re一个理由【工具篇】工具不是问题，关键是想法你可以用笔和纸，快速开始使用word来画：优点：将线框逻辑化、和交互说明、文案进行文档整合。缺点：word功能和控件有限，受页面长度和宽度限制。适合于粗略版线框图设计。【工具篇】工具不是问题，关键是想法使用visio来画：【工具篇】工具不是问题，关键是想法来自Jimmy使用使用PPT来画：来画：来自杨溢最近设计师们开始研究用keynote来做线框图【工具篇】工具不是问题，关键是想法使用使用EXCEL来画：来画：【工具篇】工具不是问题，关键是想法使用使用Flash来画：来画：优点：便于模拟交互效果、页面链接、控件多可直接用缺点：修改不方便，适用于需求

7、确定基础上的线框图设计。【工具篇】工具不是问题，关键是想法是什么让Axure脱颖而出？ROI最佳工具选择依据1.保证线框图本身优势2.保证产出物的易用性3.想法不受工具束缚最佳工具选用原则：【工具篇】Axure顺利脱颖而出现在，就开始用Axure！Start！通过简单实践学习，你将能够：1.了解到做线框图是很简单也很难2.轻而易举做出完整的线框图3.了解高级技巧4.打开你的探索之门5.爱上它！番外篇：让线框图更有效为你的线框图加注目录号重视不同阶段的评审会撰写交互说明文档【番外篇】为线框图加注目录号帮助后期沟通效率【番外篇】重视不同的评审会一个西方男人一个潇洒、有才能、智慧的西方男人一个男人从最简单的开始，在迭代中逐步增加细节。你一开始做得越详细，参与讨论的人们关注的细节就越多。在这个阶段下，你想让他们关注并确定什么，适可而止。关于线框图评审会，请参见聊聊会议那些事儿【番外篇】评审会主要为了做决定，消除争议，缩小范围最好留下会议纪要，或者修改纪要【番外篇】撰写交互说明文档理解偏差牵制重复劳动 沟通成本大 重要信息遗漏【回顾】For PD:For Designer:什么是线框图线框图的价值自己做线框图的重点会用Axure做简单线框图了解“高级技能”了解UED工作方法线框图的价值重温考虑更换工具？掌握“高级技能”让工作更加有效Questions?Thanks