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

家里小猫生病,从周二开始一直折腾到现在,仍在治疗与观察中。几年来经历过几次这样的状况,虽然每次都会恢复健康平安,但一旦再次置身这样的过程里,怎样也无法停止焦虑与担心。除了尽心尽力以外,能做的只有不断祈祷,期盼着一切安好平安的状态早日回来。

篇幅不长的一篇文章,也因为这样的状况而拖沓了多日;一方面没时间,一方面没有任何心力的感觉。不多说了,我们来看今次的译文。

如今的设计圈子里,线框原型(线框图)这个词正在越来越多的被提起。过去几年中,在软件和Web设计等相关行业里,线框原型得到了迅速的普及,同时也带来了很多的误解。它的概念甚至在慢慢的被扭曲,使新手在入行时往往不能正确的理解它的用途。

问题出在哪里呢?最近,我(原文作者)与一些设计专业的学生进行了交流,他们问到不少关于线框原型的问题。通过这些问题,我发现他们对于“线框原型”这个概念的心智模型与其本质相去甚远——在他们的理解中,这个概念包括很多涉及视觉设计方面的因素。更糟的是,他们甚至不愿意去做线框原型方面的事情,他们只知道这是流程中的一个需要执行环节,却不明白它的重要性。这事弄的我相当郁闷,最初,我觉得这搞不好只是个例而已,但通过对行业内的现状进行观察,我逐渐发现,线框原型在很多项目流程中的执行情况真是够惨不忍睹的;原因来自很多方面,包括客户、设计新手、产品决策者等等。

实际上,线框原型的规划是Web设计中必不可少的重要步骤,设计师们应该真正了解它,并学会正确的运用它。

线框原型就是蓝图(blueprints)

设计师们通常都会明白,对于那些结构复杂的东西——比如建筑或是汽车——计划与架构设计工作是必不可少的;而涉及到互联网工业时,这些工作的重要性仿佛降低了。网站虽然不是汽车,但它本质上仍是一种复杂的综合项目。如果忽视了良好的蓝图规划,那么整个项目将会对时间、人力和金钱造成巨大的浪费。

在进一步了解线框原型的正确的实际应用方式之前,我们有必要首先了解一下它本质上究竟是什么,它的存在有哪些目的。

我个人认为,蓝图是对线框原型最恰当的比喻。人们不会将蓝图看作建筑物实际效果的渲染图,也不会通过它来制定视觉风格方面的决策。线框原型是纯粹的功能与信息的示意图。

对线框原型概念的误解

在实际应用中,我们还需要明白线框原型在概念上不是什么,并且最好可以对需求方、团队成员及相关合作部门进行解释说明。

线框原型不是设计

线框图应该彻底与字体字号、配色、图片等无关。多数人习惯进行形象思维,他们很容易将线框原型理解为在一定程度上表达了设计方案的设计稿。在线框图中过多的使用视觉化的元素,会干扰其对功能的呈现。始终要记住,线框图的作用是组织并呈现信息,要避免在视觉上过度的保真。

线框原型不代表最终布局结构

另外一个误解,就是人们时常觉得,10243.html">视觉设计师要做的只是在线框图提供的布局结构的基础上进行美化工作;甚至在多数视觉设计师的观念中也是这样。从语义上讲,线框图所展示的布局,最主要的作用应该是描述功能与内容的逻辑关系,视觉设计师并不需要在所有的细节中受其制约。

线框原型不是交互原型

这两个概念之间的区别和联系确实容易让人混淆,从项目流程角度说,它们甚至是完全不同的两种工具。简单的说,线框图用来组织及呈现信息,而交互原型,顾名思义,用来展示及评估交互方式。多数时候,它们在形式上很相似,并且都应该避免使用那些容易造成干扰的高保真视觉元素。

线框原型的实际应用

正如在前文中提到的,很多设计师并不了解制作线框原型这个步骤在项目流程中的重要性,因为他们不清楚线框原型的本质和制作它的目的是什么。实际上,线框原型在项目流程中的目的性是很强的。下面,我们来看看线框原型在实际中的几个重要应用方面。

可用性测试

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

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

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

实践技巧对功能细节进行详细的描绘:不要只使用一个方框来表示某个组件,比如相册或地图等;要描绘出所有相关的元素,并且在必要的时候对功能逻辑进行文字注释。细节做的越到位,沟通效果越好。

预估相关内容的数量限制:很多设计师会
忽略页面中的极端内容情况。诚然,在项目初期,我们很难对页面内容做确切的预估,
但是在线框原型中做一些必要的范围限制还是可行的。与项目相关人员进行交流,讨论的要点包括某些标题的大致长度范围、内容中图片的数量、内容文字区域是否需要根据文字数量进行适应调整等。通过线框原型将这些细节问题确定下来,可以有效降低视觉设计及开发过程中返工的可能性。

将网站架构形象化

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

实践技巧描绘导航元素:将架构信息形象化的起点,是将能够反映出架构的导航结构形象化。在线框原型中展示全局导航、次级导航及局部导航的结构,并描述他们之间的联系。

将操作步骤及出口形象化:要确保网站在结构上不会对用户造成死路或陷阱。我们可以使用线框原型与网站地图架构做对比,保证用户在执行操作的过程中的每一步都有前进、后退和退出的方式。我个人推荐使用Freemind一类的脑图工具。

总结

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

源地址:http://beforweb.com/node/20

时间: 2024-09-02 03:27:53

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

线框原型的概念和本质:将网站架构形象化

文章描述:线框原型(线框图)的本质及实践应用概述. 家里小猫生病,从周二开始一直折腾到现在,仍在治疗与观察中.几年来经历过几次这样的状况,虽然每次都会恢复健康平安,但一旦再次置身这样的过程里,怎样也无法停止焦虑与担心.除了尽心尽力以外,能做的只有不断祈祷,期盼着一切安好平安的状态早日回来. 篇幅不长的一篇文章,也因为这样的状况而拖沓了多日:一方面没时间,一方面没有任何心力的感觉.不多说了,我们来看今次的译文. 如今的设计圈子里,线框原型(线框图)这个词正在越来越多的被提起.过去几年中,在软件和W

让你的线框原型更具沟通能力的十个方法

虽说是每周一篇译文,不过这事儿确实不能算是非常容易.从阅读,到筛选,到试译,到最终确定本周的文章并完成译文,主要还是依靠每天抽些时间来做.还好,毕竟是自主行为,爱过,也仍在爱着,这就是UX从业者兼翻译票友的节操有木有.默,我们进入今次的正文. 我(英文原文作者)参与过很多产品的线框原型设计,包括我自己独立完成的,还有与其他设计师.产品经理甚至是业务分析人员一起合作的.这很棒,因为在这个过程中我见识到了很多优秀的项目.不过慢慢的我也发现了一些问题,一些大家时常会在原型制作过程当中忽略掉的要素;如果

十个方法 让你的线框原型更具沟通能力

中介交易 SEO诊断 淘宝客 云主机 技术大厅 虽说是每周一篇译文,不过这事儿确实不能算是非常容易.从阅读,到筛选,到试译,到最终确定本周的文章并完成译文,主要还是依靠每天抽些时间来做.还好,毕竟是自主行为,爱过,也仍在爱着,这就是UX从业者兼翻译票友的节操有木有.默,我们进入今次的正文. 我(英文原文作者)参与过很多产品的线框原型设计,包括我自己独立完成的,还有与其他设计师.产品经理甚至是业务分析人员一起合作的.这很棒,因为在这个过程中我见识到了很多优秀的项目.不过慢慢的我也发现了一些问题,一

《编译与反编译技术实战》——第1章 实践的环境与工具 1.1 实践环境概述

第1章 实践的环境与工具 本书致力于通过实践及案例,从正反向两个角度介绍编译系统的一般构造原理和基本实现技术,本章首先对书中内容涉及的环境与工具进行简单介绍,这些工具都是编译与反编译过程中常用的工具. 1.1 实践环境概述 在编译过程中所涉及的环境主要是编译环境及工具链,常用的工具有词法分析生成器.语法分析生成器.编译器.汇编器.链接器等.在反编译过程中主要涉及反汇编器.静态或动态的调试与分析工具.下面对近年来流行的编译与反编译工具逐一进行简单介绍.

《编译与反编译技术实战》——1.1节实践环境概述

1.1 实践环境概述在编译过程中所涉及的环境主要是编译环境及工具链,常用的工具有词法分析生成器.语法分析生成器.编译器.汇编器.链接器等.在反编译过程中主要涉及反汇编器.静态或动态的调试与分析工具.下面对近年来流行的编译与反编译工具逐一进行简单介绍.

TechCrunch200美元上网本可工作原型曝光(图)

TechCrunch 200美元上网本可工作原型 北京时间6月5日早间消息,据国外媒体报道,科技博客网站TechCrunch创始人迈克尔·阿灵顿(Michael Arrington)公布了第一款可工作的CrunchPad上网本原型,预计将对传闻中的苹果新产品构成威胁. 阿灵顿去年7月宣布,由于对当前的上网本不太满意,TechCrunch准备自己开发一款既简单又廉价的上网本CrunchPad.CrunchPad的设计初衷是:用于浏览互联网,产品设计要简单.采用触摸,价格保持在200美元以内. 本周

大型分布式网站架构设计与实践《概述与大纲》

大型分布式网站架构设计与实践 在大型网站架构的演变过程中,集中式的架构设计出于对系统的可扩展性,可维护性,成本等多方面因素的考虑,逐渐被放弃. 分布式架构的核心思想是采用大量廉价的PC Server ,构建一个低成本,高可用,高可扩展,高吞吐的集群系统,以支撑海量用户的访问和数据存储,理论上具备无限的扩展能力. 分布式系统的设计,是一门复杂的学问,它设计通讯协议,远程调用,服务治理,系统安全,存储,搜索,监控,稳定性保障,性能优化,数据分析,数据挖掘等各个领域. 对任何一个领域的深入挖掘,都能写

IBM Cognos Insight最佳实践:概述和用例

本文档将概述如何将桌面工具作为独立应用程序来运用,以及如何集成 IBM Cognos TM1 和商业智能,通过这些来展示 IBM Cognos Insight 的强大功能和灵活性.文中将通过一个销售计划用例展示如何在计划的创建.发布和参与过程中使用 IBM Cognos Insight 来分配详细叙述了计划结果的专业报告.该用例将举例说明整个协作生命周期,对一年的业务进行预算和报告 适用范围 本文档使用 IBM Cognos Insight v10.1.1.IBM Cognos TM1 v10.

响应式Web设计:通过响应式的设计开发方式

文章描述:案例学习 响应式网站的产品需求和设计流程详解. 今次的译文中,我们继续响应式Web设计方面的话题.前面的几篇相关文章以概念诠释.方法说明为主,本篇则围绕一个实际网站案例展开,从需求.流程.步骤细节等方面描述了响应式设计在项目中的实践方式. 本篇的部分内容要点会与之前几篇产生交集:我们会在这些地方提供相应文章的入口,便于深入参考阅读.接下来进入正文. 根据DailyTech的统计,到2015年,移动互联网的用户数量将会超过桌面用户.除了智能手机之外,使用平板电脑甚至是电视机进行上网的用户