阿里巴巴外部培训--线框图培训课件.ppt

《阿里巴巴外部培训--线框图培训课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、线框图入门Wireframes外部分享版2010-9-20Contents认知篇：什么是线框图以及为什么要画线框图理念篇：必要的理论和前提工具篇：为什么要用Axure？基础篇：Axure入门进阶篇：Axure部分高级技巧番外篇：让线框图更有效！KnowWhat&WhyKnowHowDoBetter【认知篇】线框图是一个大致的版式来描述用户所看到的——骨架图用线框和简单的勾勒来表现内容不要关心品牌和视觉设计表现信息的组织结构和控件位置类别顺序层次什么是线框图?你脑子里一定有一些疑问。包括我在内。？【认

2、知篇】为什么要做线框图？其他人的疑问：项目为什么需要线框图？能不能直接Skip到视觉设计？我们能不能把线框图的时间缩短？交互仅仅在画线框图吗？问题核心：不了解线框图的作用以及价值，对线框图的必要性怀疑。在实际的项目里，线框图所处的阶段时长有时是视觉的2倍。【认知篇】为什么要做线框图？设计师的疑问：到底，线框图能帮我解决啥问题？线框图要细致到什么地步？是不是把视觉稿去色就是线框图了？为什么PD也要求画线框？那我们有什么不同？问题核心：为了画线框而画线框，忽视线框图的真正价值。【认知篇】为什么要做线框图

3、？【认知篇】为什么要做线框图？线框图产生于项目前期【认知篇】为什么要做线框图？直观呈现需求低成本、快速、易修改不可取代的优势1.快速创建2.帮助聚焦3.方便修改在项目前期，去除视觉和细节干扰，确保评审中大家把注意力集中在——什么需求、需要放啥东西、需要放啥功能，优先级如何划分这样的层次上。设计师不需要考虑太多细节。【认知篇】为什么要做线框图？更多的好处：快速且低成本地获得反馈(Getfeedbackearlier,cheaper)在多种可能中对比试验(Experimentwithalternativ

4、es)轻松修改或者放弃设计(Easiertochangeorthrowaway)对项目组保证产品质量——低成本筛选，优化，用户测试帮助我们高效工作需求具体化——帮助PD整理逻辑。工作量具体化——前端、视觉、RA评估资源有据可依。视觉方向指引——给视觉设计师以梗概帮助文案工作——PD可以更容易整理文案并让COPY理解情境对设计师本人【认知篇】为什么要做线框图？理念篇：必要的理论和前提——并不是精美细致的就是好的——从最简单的开始——最大的价值在于讨论和优化草图信息块状图粗略线框图详细线框图交互说明线框

5、图每个阶段的线框图都有其特定的价值【认知篇】并不是精美细致的就是好的要放什么东西？他们的重要等级如何？我们假设中的用户行为如何？具体内容如何设计？他们分别放到什么位置？如何表现优先级？最终方案【认知篇】从最简单的开始，逐渐添加细节输入：问题：BRD市场预研功能需求优先级用户研究人机交互原则功能描述业务流程用户研究人机交互原则功能描述设计规范人机交互原则用户研究视觉规范线框图是为了“更有效吵架”线框图阶段的时间，有一多半要花在讨论、确认和评审上。PDVS交互VS视觉中场讨论PD或者其他角色为什么要画线

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

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

8、多可直接用缺点：修改不方便，适用于需求确定基础上的线框图设计。【工具篇】工具不是问题，关键是想法是什么让Axure脱颖而出？ROI最佳工具选择依据保证线框图本身优势保证产出物的易用性想法不受工具束缚最佳工具选用原则：【工具篇】Axure顺利脱颖而出现在，就开始用Axure！Start！通过简单实践学习，你将能够：了解到做线框图是很简单也很难轻而易举做出完整的线框图了解高级技巧打开你的探索之门爱上它！番外篇：让线框图更有效——为你的线框图加注目录号——重视不同阶段的评审