第一站 - 轻松上网从此开始!

上网第一站

当前位置: > 运营 >

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

时间:2012-08-06 16:22来源:网络 作者:yangyang 点击: 我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
举个例子,我曾经帮一家衬衣零售商做网站改版。在着手设计工作之前,我们首先使用旧版网站进行了一次用户测试,结果发现商品详情页当中的演示照片

  举个例子,我曾经帮一家衬衣零售商做网站改版。在着手设计工作之前,我们首先使用旧版网站进行了一次用户测试,结果发现商品详情页当中的演示照片总会使用户产生迷惑。为了使衬衣更好看,他们在拍照的时候刻意搭配上了领带与袖扣,这使得用户认为每件衬衫都是包含领带与袖扣的套装。所以当我进行线框原型设计的时候,特意在商品照片的位置画了一张不包含领带与袖扣的衬衣草图,以确保视觉设计师及后续环节的人员能够理解,并避免在新版网站中重复错误。

  我们不必通过非常精细的绘画来为线框原型中的图片元素增加描述性,通过简单的草图来陈述出用户希望在这里看到的图片类型即可。例如,在提供酒店预定服务的网站中,用户通常希望在详情页里看到怎样的图片?房间?卫生间?景观?这些问题都是值得花时间了解清楚并在线框原型中加以体现的。

  

interactive-design-wireframe-prototype-describe-image-sketc

 

  5.使用色彩时保持谨慎

  在线框原型中,彩色通常被用于注释。在必要的时候,我们也可以用特殊的颜色对那些特别需要用户注意的界面元素进行标注,或是用来表达出错信息一类的状态类内容。不过要记得,在进行原型测试的时候不要使用带有色彩注释的版本,原因是显而易见的,我们不希望被测用户被这些“突出”的元素引导或干扰。

  6.确保交互元素明确易懂

  交互元素的呈现方式应该符合它的用途,例如按钮看上去应该可以被点击。这些细节当中的视觉表现形式的正确与否,会直接影响视觉设计师及开发人员对原型的理解;不具备自解释性的交互元素所带来的潜在体验问题也会暴露在可用性测试当中。

  

interactive-design-wireframe-prototype-interactive-element-affordance

 

  7.以实际像素为单位

  如果你使用HTML配合样式代码来制作原型(使用前端开发框架快速创建页面原型),那么这个问题基本不存在,因为你通常需要以像素为单位为容器设置宽度或高度属性。不过在多数时候,我们创建的是纯粹的线框图。以实际像素为单位对页面布局及元素尺寸进行一定程度的规划和说明,这将帮助我们自己以及视觉设计师在接下来的工作当中省掉很多“猜测”与“估算”的过程。我曾经习惯于使用Powerpoint来制作线框原型,这种方式只能展示元素之间大致的尺寸和位置关系;当项目进入视觉设计流程,它无法有效的帮助我与设计师进行沟通,造成了不少的麻烦。

  8.创建变更日志

  随着迭代的不断进行,每一版线框原型当中的变更通常会越来越细化,从页面结构到模块、控件,这会使跟进后续工作的设计师或开发人员越来越难以发现所有的变化。作为交互设计师,我们有责任创建一份变更日志,并随着项目的发展对其进行持续的更新。日志中的每一条记录都要包含日期、版本号、执行者以及变更说明。这种信息交流的方式不需要花费太多的时间,但结果却是事半功倍的,无论产品人员还是设计师、开发者,大家都可以籍此来一目了然的跟踪原型的版本变化。

  

interactive-design-wireframe-prototype-change-log

 

  9.避免深色线框

  满页面的深色线框会使你的原型看上去缺乏层次、粗糙凌乱。正像我们在第一点当中所说的,试着使用不同明度的灰色作为背景色来界定页面和模块的边缘。这样不仅能表现出界面元素的视觉优先级,而且可以使整个原型看上去更加整洁。如果必须在某些地方使用线条,那么尽量使用纤细的灰色实线或点状线。我们固然不需要让线框原型看上去像视觉稿一样完美,但对这些细节的把握确实可以让它更加简洁精美;在实际工作中,这往往可以提升原型被接纳的程度。

  

interactive-design-wireframe-prototype-border-lines

 

  10.保持跟进

  这一点更加偏向于交付流程,而非设计技巧。完成线框原型后,我们不能只是简单的把它扔给跟进后续工作的同事。花些时间去支援视觉设计师或开发人员的工作,只有他们才能将你的设计概念最终落实到实际当中。通常,交互原型当中所包含的想法、操作逻辑等方面的信息难以即全面又准确的被大家理解,而且其中隐含的问题有可能在后续阶段才能体现出来。我们有必要在交付原型之后保持跟进,与大家协同作战。

  以上就是关于提升线框原型沟通能力的十点建议。可以参考我们之前的文章“线框原型的本质及实践应用概述”,了解更多关于线框原型的基本理念及运用方法。

  本站原创编译文章。如需转载,请注明:本文来自Be For Web

  英文原文:

  译者信息: c7210 - 用户体验设计与代码玩家,现就职于大众点评网产品部UED

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕