BeFor Web
为网而生 - 关注互联网及移动端产品的用户体验设计 - Since 2011

线框原型(线框图)的本质及实践应用概述: Page 2 of 2

线框原型(线框图)的本质及实践应用概述

可用性测试

线框原型是进行早期可用性测试的最有效的方法之一。注意,我们在说的是可用性,而非用户体验;这两者之间是有区别的。可用性确实可以反映产品对于用户的友好程度,但它侧重于功能的使用方面,而不是指设计的角度。相应的,在进行可用性测试的过程中,应该尽量将注意力放在功能方面,不要被其他方面的因素干扰。

实践技巧

  • 用户目标:使用线框原型模拟用户在完成使用目标的过程中可能执行的所有步骤。这种方式可以尽早发现网站功能架构方面的设计缺陷。
  • 出错情景:线框原型可以帮助设计和开发人员更全面的预计到潜在的出错情景,并准备好相应的出错提示页面。

展示细节

对于设计和开发人员来说,有一个比较常见的困扰——很多时候,客户或需求决策者对产品的关注角度过于宏观,他们会对产品的功能进行非常空泛的描述,而对细节方面并没有明确的概念。这种情况下,线框原型能帮助我们有效的解决沟通方面的问题;大家可以通过这种可以看的到的方式,对产品的功能细节进行快速的勾勒,有效的传达信息

实践技巧

  • 对功能细节进行详细的描绘:不要只使用一个方框来表示某个组件,比如相册或地图等;要描绘出所有相关的元素,并且在必要的时候对功能逻辑进行文字注释。细节做的越到位,沟通效果越好。
    wireframes-prototype-features-detail
  • 预估相关内容的数量限制:很多设计师会忽略页面中的极端内容情况。诚然,在项目初期,我们很难对页面内容做确切的预估,但是在线框原型中做一些必要的范围限制还是可行的。与项目相关人员进行交流,讨论的要点包括某些标题的大致长度范围、内容中图片的数量、内容文字区域是否需要根据文字数量进行适应调整等。通过线框原型将这些细节问题确定下来,可以有效降低视觉设计及开发过程中返工的可能性。
    wireframes-prototype-content-limitations

将网站架构形象化

通常,除了架构师之外,团队中的多数成员会被网站架构方面的文档搞迷糊,尤其对于企业级的、或是信息结构逐步复杂化的大项目来说。架构方面的信息过于概念化,而线框原型正是将这些概念与有形的产品进行连接的第一步。

实践技巧

  • 描绘导航元素:将架构信息形象化的起点,是将能够反映出架构的导航结构形象化。在线框原型中展示全局导航、次级导航及局部导航的结构,并描述他们之间的联系。
    wireframes-prototype-navigation-stucture
  • 将操作步骤及出口形象化:要确保网站在结构上不会对用户造成死路或陷阱。我们可以使用线框原型与网站地图架构做对比,保证用户在执行操作的过程中的每一步都有前进、后退和退出的方式。我个人推荐使用Freemind一类的脑图工具。
    wireframes-prototype-mind-map

总结

实际上,本文只是一篇概述;我们大致了解了线框原型的概念和本质、以及它在实际项目中的重要作用。文中提到的实践技巧只是在项目中创建有效的线框原型的一些基本要点。很多设计师在项目流程中都倾向于直接进入视觉设计的环节;出于对网站或软件项目的综合性与复杂性的考虑,不妨将这一步推后,首先通过线框原型做好计划与沟通的工作;实践成果会证明这是一种事半功倍的有效方式。

译文代表原作者观点。欢迎发表评论,或到译者微博进一步交流探讨。

本站原创编译文章。如需转载,请注明:本文来自Be For Web
译者信息: C7210 - 设计布道师,设计开发者,译者,音乐玩家。
评论 (13)
因为一直在学习用户体验设计,所以特别关注你的译文和经验之谈,觉得很易懂条理很清晰能真正学到东西! 针对这篇博文在线框原型不是交互原型这章节有点小问题想请教一下. 1)线框原型与交互原型最大的区别是否是(线框里交互是文字描述), 而(交互原型里的交互是用户真正可以点击得到反馈,例如Axure生成的HTML,用户可点击按钮到相关页面) 另外,博主认为交互设计师和用户体验设计师之间有区别吗? 有时候看企业招聘,工作描述都是非常相似的,但有的招聘UX Design,有的招聘Interarction Design. 谢谢!
hi,1)我自己也是同样的理解;交互原型当中同样可以包括以线框图为蓝本的“可点击”原型。也许使用“线框稿”和“高保真原型”一类的词条描述出来会更加清楚些叭。2)我自己的译文中时常会出现“用户体验设计师”这种说法,在实际当中应该可以涵盖交互、视觉、用研这三个职能领域(其中交互设计处于相对核心的位置)。我见过的不少招聘信息其实在用流行的说法做包装而已,本质还是在招交互设计师或UI设计师。
1) 感谢清晰的回复。我现在对这个流程比较了解了:) 2) 这么看来,如果在一个架构并不清晰或规模不够大的公司。用户体验设计师有可能还需要做UI视觉的设计? Anyway,谢谢!解开了我两个疑问。
客气了,多多交流的=)
为啥,图片我就没打开过,弹开好慢 = =!
貌似还好呢...是否和网络或者线路一类有关联...
功能模块图->线框图(手绘,涂鸦,草稿)->线框图(低保真,灰模图)->线框图(功能注释版)->线框图(交互UE说明)-高保真原型(UI原型,PS or 其他) 如果你的公司有足够的时间进行产品原型雕琢,请按上面这个顺序来,如果没有,按下面这个 功能模块图->线框图(低保真+功能注释+UI/UE简单说明)->开发!!!
线框图是产品流程中的一个重要环节,尤其是在大公司或分工协作的环境中,这是必须有的。不过,我过去10年的个人站长经历中,所有现在已经变得非常庞大的互联网产品流程,实际上全部都是在脑袋中构思的。 我讲讲我的流程:产品流程,全部大脑构思 -> 构思产品过程中,后端开发零星展开 -> 部分功能模块出来雏形后,前端开始零星开发 -> 产品设计,后端,前端三者同时进行,寻求平衡与协调 。 最后是测试和完工。最最后,正式运营。
赞! 文章毕竟是教科书或者乐谱性质的东西,以最理想化的情景为依托,个人以为。学习了;多多交流=)
有必要分的那么清楚吗。只要能够实现原型的功能就可以了。
仁者见仁了我以为;理论上琢磨细腻些,实际执行中就未必了。欢迎多交流!
在我看来,线框图、低保真原型和高保真原型图,需要严格区分。文章里所述的「线框原型」作为最初级的蓝图样本,确实不与视觉和交互设计关联不大。
平时工作里能接触到的实际情况来看,线框图和低保真原型的区分确实太模糊了。