婳's profile女画的共享空间PhotosBlogLists Tools Help

Blog


    18/05/2008

    为用户着想的可用性设计

    除去市场战略等因素,产品设计的优先级可以简单表示为: 功能->可用性->美观
    功能是产品的基本,可用性设计则是帮助用户顺利使用产品功能,而美观则可以给用户带来好感.再深入到用户对产品的情感问题,个人觉得有点悬乎,暂且不谈.


    本文的主题是: 为用户着想的可用性设计.
    即可用性设计要基于用户的习惯语言,用户对操作所设想的概念模式以及用户的操作习惯. 暂时不讨论如何获取这些资料.以下重点陈述如何针对用户操作习惯进行可用性设计.
    1 用户喜欢简单,不善于分辨复杂情况
    要减轻用户的分辨负担,首先应保证信息只在需要的时候才提供.然后要对提供的信息进行权重划分,根据权重决定信息呈现时采用的字体,颜色,图案,大小,位置等.
    有趣的是,字体,颜色,图案,大小通常构成某种风格,风格暗示着类别,使用同一种风格的元素会被认为是同类,即使它们出现在不同位置;而位置上排列在一起的元素即使风格有些不同,也暗示着相关.
    可以使用大小和加粗来划分同类间的权重,因为相比于颜色,图案,字体,它们对风格的影响较小. 而不同类别间的权重,可以通过位置,颜色鲜艳度,图案醒目度来区分.

    2 用户经常犯错
    对错误的防范胜于补救.所以要注重对操作的引导,例如在信息输入时提供范例.适当时可使用半自动操作代替全手动操作,例如使用日历控件选择日期代替全手工输入.
    另外,对操作提供适当频度的反馈,对摧毁性操作进行确认,拒绝明显错误的操作等也是防范错误的有力措施.
    除了防范,还需要容忍错误.
    一方面,对于包含小错误的操作,系统应进行自动纠正;另一方面,对于已经发生的错误,系统应提供撤销的功能.

    3 用户需要全程知情权和最终控制权
    产品使用过程中用户是最高控制者.应该通过有意义且有礼貌的反馈让用户时刻了解系统的运行状态,并显著标明操作的退出方式.

    4 用户喜欢自学使用产品多过看帮助文档
    用户学习的基点是经验,这些经验可能是操作其他系统的过程中获得的,也可能是进行本系统的其他操作后获得的.为了让产品更适合于学习,产品的设计需遵循一致性原则.即输入格式,用语,呈现,操作效果都应尽量保持一致.当然,向导和帮助文档也可以帮助学习.不过帮助文档通常只在用户要完成复杂操作时被当作参考书.

    5 用户通常有各自的操作方式
    导致用户间不同操作方式的原因,可能是用户输入设备受损,也可能是高级用户追求操作速度,甚至可能纯粹是因为用户个人习惯.所以请尽量让每个操作都具备多种激活方式


    可点击组件的设计

    可点击组件有两种: 链接和按钮.
    最佳设计要求屏幕组件的可点击性应当一目了然.通过鼠标hover才能确定可点击性的设计是比较愚蠢的.
    接下来将分开讨论链接和按钮的设计.

     

    链接


    链接的寓意是通往另一个地方.但在通往"另一个地方"之前,应该跟用户介绍链接目的地,如果等用户到达了目的地才发现不对劲,那就构成愚弄用户的行为了.怎么介绍这个目的地呢? 最好是在<a>标签的内部文本说明,形如:<a>小樱的blog</a>,倘若内部文本不足以解释清楚链接目的地,则使用<a>标签的title属性说明<a title="专注交互设计的blog">小樱的blog</a>.介绍目的地不只是为了让用户全程知情.搜索引擎也会对链接目的地介绍非常敏感,这一敏感具体带来什么影响,我还没有深究.

    然后,链接应该直接,如果链接目的地介绍的是某产品,而结果链接到相关公司的主页,或者包含该产品的分类页面.那恭喜你,又愚弄了一次用户.

    链接可细分文本链接和图片链接
    >文本链接
    文本链接的最佳象征是下划线和蓝色字体,所以普通文本切忌使用下划线作为强调手段. 但是下划线会轻度干扰链接文本的可读性,折中的方案有:


    (1) 使用蓝色系文本和浅色下划线,hover状态时加深下划线.
    (2) 使用蓝色系文本不加下划线,hover状态时添加下划线. 该方案要求用户对互联网比较熟悉,知道蓝色系颜色的寓意.


    有些web设计希望突破蓝色系文本的限制而采用红色,紫色,这是比较危险的,因为浏览器默认采用紫色标识已访问过的链接.但由于下划线是文本链接的最强特征,即使采用白色文本,只要加条下划线就能让人相信这是个超链接.

    >图片链接
    图片链接的最佳象征是蓝色边框.其默认的蓝色边框可能有失美观,不过可通过进一步设计弥补这点.
    不主张去掉图片链接的蓝色边框的原因还有,通过边框颜色的变化,可以反映图片链接是否被点击过.

     

    按钮


    按钮的寓意是完成某个操作,该操作通常都在本页内完成.
    按钮的最佳象征是三维边框.所以不具按钮功能的图片切忌拥有三维边框.

     

    最后谈谈可点击组件的hover状态的设计指导原则.在不影响布局的情况下,hover动作应该明显些,例如修改背景图片或颜色,修改字体大小,甚至调整元素位置.原因是大部分初级用户不懂得鼠标状态转换的含义.即使知道,该状态也不够明显.

     

    05/05/2008

    我是小狮子^_^

    勇敢,聪明,自信,积极上向,温柔,善良,美丽,富有创造力------哈哈,我是集很多优点于一身的小狮子......
    刚才哭着从实验室走回寝室,发现越有人关心我,我就越脆弱,呵呵,所以一次性爆发了,痛苦了一场.
     
    晚上妈妈电话我,百般关心和温柔,连打个电话都怕打扰我,以至于如此"坚强"的我崩溃了,感觉要好好来报答老妈...
     
    还好我是个积极向上的人,失落或者不开心只是一会会的事情,马上我就阳光灿烂了,哈哈,
    不过刚才很对不起刘橙,小虫师兄,kavin,因为我难过的时候最解压的方式就是电话给我喜欢的朋友,呵呵,真的难为你们听我抱怨了,sorry,争取以后只有快乐的事情告诉他们,呵呵
     
    晚安~~~我去洗澡睡觉了:)