06月 2008

You are browsing the archive for 06月 2008.

纸面分解任务的一个wap实例

转自奇遇,目标导向设计    原文地址:http://www.ui123.com/blog/?p=62
本文仅提供纸面分解任务的步骤、做法及纸面表现参考。至于怎么思考等其他的疑问,请参考本次话题的其它文章。
首先,做纸面任务前应该准备: 白纸、铅笔(或钢笔、圆珠笔,铅笔更容易修改)、橡皮。
然后,根据需求或场景分解出主要的任务流,此次分解为整体概念,可用纸张绘出屏幕流。 
假设如下需求(仅为了说明而假设):用户sam在网上有一个网盘,网盘里已经存放有图片,sam用手机以WAP页面的形式登录互联网,并访问我在互联网上存储的图片。sam把喜欢的图片直接下载到手机并设置成屏保;sam和朋友moss都在互联网拥有同样的网盘,并且已加为好友,于是sam直接把一张很可爱的图片共享给moss;由于此图太可爱了,sam还想让luse看,可luse没有网盘,sam只好直接发送到luse的email里。(wap支持关键字检索。由于手机浏览器不支持富页面,仅支持超链接和基本表单的交互形式,所以交互风格尽量简洁。)
根据需求在纸面上绘出屏幕流如下: 
再然后,对屏幕流进一步做详细分解,分解出表现任务流的每一个屏幕的详细构成,并绘出纸面图。如下图所示:
最后,根据整体的屏幕流把每个具体屏幕串起来,就形成了任务分解的结果 —  — 最初的产品原型。这里不再提供纸面原型参考,看到此想必大家也知道这个方法大致是怎么回事了,大家也经常用吧?感觉效率挺高。
优点:可以快速的表现出想法、修改方便、成本低。我们在思考时,这种方法可以跟得上思路,迅速把想法表现出来;任务分解的结果不一定一次就能排版,在与同事的沟通过程中,会做有些调整,这时候就可以根据沟通结构迅速的使用橡皮和铅笔修改,立即可以讨论确认新的想法;成本就不用说了,几张白纸,废弃了就扔了!没有什么太可惜的;时间方面,由于表现想法迅速,不会在画图上浪费太多额外的时间,可见效果不错。 这里仅提供此常用方法,仅供参考。当然,大家在工作中选择自己喜欢的方式。
鉴于纸面分解任务的特点,提几个应该注意的建议:1.保证看的清楚,字体和图可画的比实际稍大些。原因很简单,手指头一般比鼠标指针大,让图更适合于用手指头指指点点。2.保证屏幕流可以完整表现任务流,多模拟几遍任务场景,尽量避免遗漏。3.在画具体的表现界面时,把操作场景的各种反馈形式做好备注,以便在演示或讨论时可以很形象的表现。4.引入角色,多倾听、观察角色的感受,保证分解结果的可用性。

用豆瓣的几个问题

不怎么用豆瓣,今天用的时候,处在无聊犯困的状态,然后进入首页,直接就到右侧大大的输入框,准备登陆。结果敲完密码发现,不对,这是快速注册窗口。可能是用习惯了yahoo,所以潜意识把右侧当成登陆窗口了。然后我再往上寻找,找到登陆链接,点击,进入了一个只有登陆页的页面。突然觉得:额。。。为什么和注册的待遇差别这么多。
想要通过这种方式刺激注册的意图是好的,不像其他网站通过一个大大的注册按钮,而是提供直观便捷的输入框是非常便利的一个环节。但是,我觉得,网站的目的必然不仅仅只是吸引新近用户,对于回访用户,特别是诸如我这种不常用的回放用户,我们不应该让他们体验到如此强烈的差别待遇。

第二个问题是,我以前使用的时候,貌似是有我读过,我想读,我在读的点击链接的。但是,上两次上douban的时候,我都没有找着那几个链接,然后试图看看页面其他地方是不是有类似的话,后来仍然失败。今天再上,我就是看着右侧边栏里面有xx读过什么,xx在读什么,我就纳闷,到底该去哪找呢。最后来试探性的按了一下打分的那几个星星,终于找到了。但是觉得很莫名其妙,为什么要在这里出现呢。然后又试着按了一下推荐,也找着那几个链接了。再后来又试着按了一下收藏。恩,同样也有了。
问题就在于,将“在读,想读”放在“打分,推荐,收藏”里面并不符合初级用户对于后者的习惯性的理解。所以会造成用户一定的困惑。应当增加适当的提示信息给初级用户。

 _______________________
个人意见,尚不成熟,仅供参考

交互设计师和用户体验设计师

转载自麦兜的交互设计(Maidow.com) UCD的团队需要什么样的角色?UCD仅仅只是用户体验为主的团队么?最近有很多朋友问过我类似这样的问题,所以我想稍微说说我对于UCD团队的看法。关于用户体验设计在团队的角色,大家可以看看这里,有很多很好的想法,因此就不展开说了。 先引用白鸦同学的UCD团队角色:可用性工程师:产品前期的用户研究、市场调研、竞品分析、环境分析,产品设计过程和后期的用户调研、易用性测试和评估等等; 数据分析师: 统计和调查数据挖掘、可行性及策略分析等;(国内现在这样的人才凤毛麟角,特别是在UED方面深入的就更是少之又少,往往是”可用性工程师”在作着这样的工作) 信息架构:产品架构设计、界面结构设计等;(往往很多地方都是交互设计师和PM分担做这部分工作,在大部分产品设计过程不规范的企业中 PM或开发工程师在作着这样的事情) 交互设计师:流程设计、各类界面交互方式设计及应用展现规范等; 视觉设计:(不只是”美化”那么简单,这里还会包括很多品牌气质塑造已经引导用户使用情感的东西) 内容优化:优化信息传达方式,充分表现给用户完整的品牌气质,准确展现给用户在不同情景中的角色感; 界面制作:制作高保真原型,提供低成本的完整的可演示的成果展示,制作标准化的界面及应用规范等; 以上包括了UCD团队的几个重要角色,我想重点说说其中的两个角色:用户体验设计师(简称:UX)和交互设计师(简称:ID)。 两个角色有部分工作或方法是有一定共通性的。比如UCD的方法;那么UX和ID是如何协同工作呢? 在PD做产品调研的时候,UX和ID共同参与去做一些产品调研中的用户部分,包括用户接受度,在现有产品时的使用状况,习惯等等尽可能的写出一份该产品的用户角色模型提供给PD参考。而后UX再用UCD的方法来细化一些产品细节提供给ID参考,UX在前期主要的工作就是尽可能的把该产品的用户模型创造精细,产出物就是一份用户体验文档(包括:产品背景,用户模型,用户场景等),将文档交付于ID。 ID所要做的工作就是:产品概念图,流程图等。 ID是项目主要的负责人,相对于UX来说更需要了解产品的背景和它的细节。这样才能对产品的质量有所保证。而UX主要是专业性,提供给ID一个专业的分析后的文档。帮助ID来做一些用户的测试和分析。 UX更多的是以专家的身份来进入项目,而ID却是以PD的角色来主要项目。UX提供的文档只是一个建议,而是否认可需要靠ID自身的能力判断来决定。 交互设计师能知道自己需要什么样的数据和用户类型,并能给UX一些方向性的意见。这样才能让UX更了解产品且做好该产品的用户分析。所以ID和UX的关系比较像家长和老师的关系,产品就是孩子,ID将孩子生了下来或许给了他一个大体的方向,但是给到老师以后,老师通过自己的专业能力来看待这个孩子,摸索着孩子的能力和爱好。并将这些告诉家长,两方面一起来努力那么这个孩子就会把自己的所有能力都展现出来。

CSS梯度文本效果(CSS Gradient Text Effect)

本文由Robin翻译自webdesignerwall  原文:http://rlog.cn/193 

你是否想不用photoshop来创建一个带渐变的标题文字吗? 这里用一个简单的css技巧来向你展示如何仅仅使用css和png图片来制造这种效果. 经测试这种方法适合大多数主流浏览器.当然, IE6需要一个支持透明PNG的Hack(值得庆幸的是微软正在极力的将用户的IE6自动升级到IE7^.^, 延伸阅读:Warning: An IE7 Auto-Update Is Coming Soon)
优势

这是纯粹的css技巧,没有使用任何ja脚本或者flash, 并且它可以在大多数浏览器上正常工作(IE6需要支持透明PNG的hack)
这是完美的标题设计,你不必使用photoshop,这将大量节省你的带宽和时间.
你可以对任何网页字体使用这种效果,而且字号大小也是可变的.

他是如何工作的?
这个技巧很简单.我们只是简单的使用了1px宽的透明png覆盖在了文本上.

html
<h1><span></span>CSS Gradient Text</h1>
CSS
关键就在这里:
h1 { position: relative }h1 span { position: absolute } h1 {font: bold 330%/100% “Lucida Grande”;position: relative;color: #464646;}h1 span {background: url(gradient.png) repeat-x;position: absolute;display: block;width: 100%;height: 31px;}
就这样, 你做到了 ^_^ 点击这里查看示例.
使它能够支持IE6
下面这个hack仅仅是让IE6支持透明PNG-24格式的图片.
<! – [if lt IE 7]><style>h1 span {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);}</style><![endif] – >
jQuery生成版本
如果你不想在代码里有空的<span>标记, 那么你可以使用javascript来动态生成它. 这里是一个简单的jquery生产方法.
<script type=”text/javascript” src=”jquery.js”></script><script type=”text/javascript”>$(document).ready(function(){//prepend [...]

《可用性工程》边做边说Thinking Aloud

边做边说的有点在于能从很少量的用户那里收集定性数据。用户的评述中常常含有一些生动和明确的引证,把他们用在报告中,可以使报告更加生动和令人印象深刻。
但与此同时,如果过分重视用户关于什么会造成麻烦、什么有帮助的说法的话,边做边说方法也可能会给可用性问题的原因造成假象。例如,观察中发现,用户在测试的第一部分忽视了对话框中的某个文本框。在他们最终发现该文本框后,可能会说如果它位于对话框的其他什么地方的话,他们就会立即看到。需要注意的是,不能依赖于这样的陈述。在测试进行到这一部分时,如果用户忽视了关键对象,实验人员应该记下此时他们正在做什么。显示用户实际看着什么地方的数据,比有关用户自己声称的如果把文本框放在其他地方就会看到它,要可信的多。边做边说方法的优势在于,它能在用户操作时就显示出用户在做什么和为什么这样做,而不必以后再来推断分析。

RSS訂閱

I am just beginning...

请画出自己的风格地图,自己的成长路线图,不要迷信人手一张的成功观光图,那样你永远看不到与别人不同的未来前景。

test

记一下

1. Information graphics
1. error_messages
2. messagebox设计规范
3. 客户端右键菜单的设计

最新評論