Dreamer

web

我们从不阅读

September 14, 2010 by dreamer

界面设计有一条准则:为快速阅读而设计。用户面对web页面上的文字时,往往是一目十行的,就像他们刚刚拿到报纸时所做的一样。一些研究指出,用户通过快速扫描找到感兴趣的内容,再进行细致阅读。 有些时候,用户可能没有耐心读超过10个字的说明! 这是豆瓣的一段说明文字。它很克制地停留在不起眼的右上角,没有太多花哨的文字修饰。我很欣赏豆瓣的界面,然而每当我碰到他们的说明时,几乎在0.01秒的时间内我便会果断关闭或忽略。即使在我将它截屏存储成图片时,我仍然不知道这段文字具体意思是什么。幸运的是,豆瓣是一个友好的网站,它们需要超过20个字说明的地方不多;即使不仔细阅读,它也不会粗暴地警告你:“对不起,你不能xxxx,请阅读我们的说明”。 对于传统的论坛来说,管理员们的管理任务要比web2.0模式下复杂得多。为了维持正常的秩序,论坛中可能会有一套长期积累下来的规则。这些规则并不一定就符合网络上的普遍惯例,所以即使是老网民初次到达论坛,也需要进行一定时间的规则学习。这样的管理模式并不是界面设计开发者能够改变的。我们面临的问题是如何让用户们更自然地注意到这些规则,并且更好的理解其中的重点。 一般来说,界面会面临数百字 数十条的规则,其中有多处需要强调。编辑的习惯往往通过五六种颜色、加粗来表达“强调”,并且可能额外加入符号。面对这样一堆文字,我们要如何入手呢?我像大概可以从下面几步开始 1 自己读懂规则。界面设计师首先要理解界面中要传达的信息。和相关的人员沟通,了解哪些是重点信息,哪些是次要信息。了解用户的需求,这些信息当中,哪些是对他们不可缺少的,哪一些是可以在其他界面表达的。 2 根据理解的语义,为所有的文字分段、分条。沟通后适当的精简、合并文字,调整顺序。可以将一大块的说明分散到实际相关的功能界面中(在需要时显示)。 3 挑出需要强调的信息,同样是沟通后尽量精简。为这些强调信息分类,用一些更规范、更聪明的方式来突出(有限的颜色、文字大小、小图标⋯⋯)。 这是早前做的一个活动的规则说明页面。其实这段规则也是我自己写的⋯⋯尽量每一行短一些,几行就能说完一件事情,从用户可能感兴趣的角度来说⋯⋯ 这是表单页面,上方的说明文字是模仿了淘宝常用的强调方式。 原谅我表单内容比较随意的设计⋯⋯当时还没有太明确的界面设计意识。 插播一个开心网的应用界面: 尽管这些应用我都装了,但我从来没看过它的文字说明。只需要图标+标题我就能决定要不要安装它,至于怎么用,装上试试就知道了。目前为止开心网还没让我觉得自己是个不看说明的傻瓜。 这是会员服务的页面。我觉得最好的方式还是不要看文字说明就能完成任务,用图形来说话。并且避免用户犯错的可能,让用户能够放心尝试学习。

Posted in: Interaction&Front-end, User Interface Tagged: web, 快速阅读, 说明

Kill IE6?

September 10, 2010 by dreamer

昨天一个朋友的QQ被盗用。她说一直改不了QQ密码,在腾讯的提交密码修改页面,始终显示不出验证码,让我用自己的电脑帮她修改。我心想,莫非是高级黑客程序,不允许上腾讯网站修改?介于曾经遇到过国内各种****的只兼容ie6的web服务,我毅然打开了ie6来完成朋友的嘱托。不料同样遇到了验证码无法显示⋯⋯果断换firefox⋯⋯几分钟后完成修改任务。 在2009年的调查中,ie6在中国国内依然占了60%的份额。根据我们网站对访客useragent的统计,ie6的比例也在60%以上。ie7、ie8各自占了11%左右。而在国外(尤其是亚洲以外),ie6的占有率年年下跌,2009年仅有10%。最有中国特色的情况是,各个网银几乎都是只支持ie。而作为互联网企业,相信所有的前端工程师都非常的希望干掉ie6,我们真的可以做到么?从我个人的角度来看,我甚至更想kill ie7! 早些时候,国外就已经有轰轰烈烈的“kill ie6”倡议。不知道腾讯是不是也响应了这个号召,并没有考虑修改密码功能对ie6的兼容。web界面是人与网站的接触面,是一个用来沟通的接口。作为工作的人,我们有很多的抱怨,我们恨不得点一个按钮就能直接从效果图生成页面。然而界面本身应当是能包容很多用户,而不是责怪他们,或者倡导他们去改变什么,不管他们是不是还坚持用着ie6。更何况还有60%的人依然在使用着呢。 Kill IE6?恐怕还要再等些时候了!

Posted in: Interaction&Front-end, User Interface Tagged: ie6, web

心动不如行动——说说Call to Action Button

September 5, 2010 by dreamer

Call to Action Button,即“行动召唤按钮”,指的是界面上那些勾引用户去猛戳它的按钮。它往往代表着这个界面的核心使命——让用户进行某个行动。我们常常能看到Call to Action Button被用来代表注册、下载、购买⋯⋯ 心动不如马上行动,这是电视直销里的广告词。电视直销总是使用各种手段来勾引用户,他们会在屏幕下方用大号字体标注订购电话,用各种视觉语言让你注意到这个电话。我们很难想像会有谁对电视直销产品动了心,却不知道打哪个号码。广告的制作人很明白,一定要突出“行动召唤”!我们的Call to Action Button就像那个订购电话,需要多花点心思。 这是一篇翻译的文章:行动召唤按钮:实例与最佳实践 Call to Action Button在国外的网站中已经很常见,处理的方法也很丰富。中文页面的几大杯具是:中文字体没有起伏,远看就是一大块;信息密度超级大,页面又长又挤;广告多,动画多,喜欢闪⋯⋯这些都非常不利于处理好Call to Action Button。 还是那个鸡冻人心的世界杯活动页面,在首页,它的核心使命是让用户参与竞猜。而在竞猜页面,我们又希望参与的用户顺便也去论坛多聊聊,增加黏度。所以我为两个页面分别设计了Call to Action Button: 这两个按钮的初始设计是照着firefox的下载按钮来的。它的特点是: 1 不规则的形状、高质量图标,吸引用户注意,同时加强品牌印象(主题) 2 明确告诉用户,点了这个按钮会得到什么结果 3 提供了附加说明信息,针对用户可能最想知道的问题,马上提供了解答 不过最后,第一个按钮算是失败了,我很没原则的把这个样式用到了好几个表单里(时间紧张不想再设计新的样式了)⋯⋯果然是无节操党⋯⋯以后会注意的!

Posted in: Interaction&Front-end, User Interface, Visual Design, 工作整理 Tagged: call to action, web

糟糕,我不会买错了吧!——如何避免用户押错队

September 5, 2010 by dreamer

买彩票,最杯具的事情是什么?不,不是中不了大奖,而是明明500万元大奖的号码和昨天打算买的一个不差,你却不小心涂错了号码! 这种错误对于用户是灾难性的。所以为了世界和平,我们应当尽量避免我们的用户遭受这样的打击。 世界杯活动是以竞猜的形式进行的。每一场比赛开赛前48小时,用户需要选择胜负关系和净胜球。一开始,程序给我的原始页面输出是这样的: 11日22:00 南非(A) 墨西哥(B) 净胜球数 胜负关系:A胜, B胜, 平局 净胜球:0个,1-2个, 3-5个, 5个以上 很多用户可能难以在短时间(1-3秒)内做初选择,他们需要记住谁是A谁是B。人脑的短暂记忆容量恐怕只有大约5个单词或者几个字,如果碰上斯洛文尼亚vs阿尔及利亚,用户恐怕还得反复回去对照。而那些过于自信或者抢时间的用户,他们只能凭着感觉走。押错队伍的几率变大了。 让我们做一个简单的调整: 11日22:00 南非(A) 墨西哥(B) 净胜球数 胜负关系:A胜, B胜, 平局 净胜球:0个,1-2个, 3-5个, 5个以上 尽管没有任何排版,似乎不那么容易出错了! 最终这份表单我是这样设计的:用颜色和排版体现队名和字母A B的关系。在竞猜结果那里也用了不同的颜色区分正误(还有图标的大小),这样显得更有感情一些。 正如之前文章提到的,这个专题的时间很紧迫,大概只有2天的时间,其中又有大部分时间用于调整那些静态的企业信息展示的页面。这个真正和用户打交道的页面只留给我2个多小时的时间实现并且与程序对接。确实还有很多地方不够完善。用了一些算不上什么的小技巧。 至于结果,还算欣慰。这次活动或许是我们几年来最成功的一次,有5万多人次参与竞猜,每天都有上千的讨论帖发表,没有人反映他押错了队伍。并且因为明确的颜色区分,表示正确的“绿”和错误的“红”成了论坛中短期的流行词。常常有人抱怨他“全红”,希望能“绿”一下,甚至有人认为是抽多了国内烤烟才导致总是猜错(因为国内烤烟包装大部分是红色的),号召大家抽“小熊猫”(绿色)。还真有人实践了!当然他们不会意识到这和一开始的设计有什么关系,界面设计就是这样,隐形便是成功! ====================== 附上同样是世界杯活动的另一个表单。这是个以下注为形式的活动,需要突出剩余筹码和一些规则、通知。

Posted in: Interaction&Front-end, User Interface, Visual Design, 工作整理 Tagged: web

gallery页面三步走(完成)

July 28, 2010 by dreamer

benny说我写的东西太没条理了,好吧,这次我就尽量一点一点的来说。 gallery是网站中用于显示产品的所有照片的页面。产品照片是通过这样的流程产生的:网友自主提交->管理员人工审核->设计手工加上水印->上传。gallery已经有3个版本,下面会仔细地说说这三个版本,纪录我在做这些工作时候的考虑,从中总结一些可用的方法。 gallery v1.0 启用时间:2006.6-2009.10 页面元数据: – 产品名称 – 当前图片(800px × 600px) – 其他图片的缩略图 2009年bing的图片搜索提供了一种新的界面设计模式——无翻页的缩略图列表(即用一个页面将所有的缩略图列出来,摒弃盛行数年的“分页”模式),分页模式产生于那个屏幕小、用户对信息掌握程度低的年代,它将大量的信息切割成用户容易消化的长度,一段一段的推给用户。时光飞逝,2010年的今天,屏幕变大了,用户页习惯了在屏幕上阅读大量的信息,一个页面呈现所有的信息对他们来说理解起来没有那么困难了。分页反而给他们增加了点击的负担。现在看来我们在4年前就已经有这种理念了嘛⋯⋯Orz⋯⋯ 因为我们并没有一个“缩略图”集合页面,所以“查看大图”的页面也需要至少提供一种提供给用户“浏览全部照片”的可行途径。现在看来,第一版gallery是一个非常“简单”、“实用”的作品,在这个页面能直观地看到所有的缩略图。这个页面并不是我设计的,它工作了相当长的一段时间。 gallery v2.0 启用时间:2009.10-2010.7 页面元数据: – 产品名称 – 当前图片(800px × 600px) – 其他图片的缩略图 v2版本的元数据与v1时并没有变化。改版的起因是我们计划在此页面加入“用户评论”功能。在v1中,每个页面都会在页面下方显示全部图片的缩略图,“用户评论”只能放在这个不定高度的缩略图列表之下,大家感觉这样不太合理。我们同时也希望这个页面“用起来更方便一些”。v2的主要改动在于: 将产品名称单独放在页面顶部中间 将缩略图放入一个固定面积的“窗口”中 将上述窗口放到当前图片(原图)的右侧。 在v3里我又将这个窗口挪回了大图下方⋯⋯ o(>。<)o…… 后来我也扪心自问,为什么要放在右侧……我其实只是参考了无节操百度的图片搜索。更深层的原因是: 大图的宽度仅有800px,小于主流宽度960px,完全有空间在右侧加入缩略图列表;右侧的列表能减少用户浏览图片时垂直方向的滚动;同时,用户在查看大图时就能看到这个列表,他们可能马上就意识到还有其他很多图片可供查看。 带有缩略图的,尺寸很大的“上一张”、“下一张”按钮。这两个按钮是相册潜规则了吧,用户习惯了……所以大大方方show出来吧! gallery v3.0 启用时间:2010.7-? 页面元数据: – 产品名称 – 当前图片(1024px × 768px) – 其他图片的缩略图 任何一次改版都可以看成是要解决某些需求,在v3的设计前,我意识到首先要整理一下我们的需求。 1 gallery页面改版需求分析 1)用户的需求 用户进入这个页面的原因,往往反映了用户的需求。我会经常尝试通过“列出页面入口”的方法来了解用户“为什么而来”。进入gallery页面有三种方法: 点击product页面仅有的一张产品图片(该图片尺寸为240px … [Read more…]

Posted in: Interaction&Front-end, User Interface, 工作整理 Tagged: css, gallery, html, web, 产品, 相册

product页面的Realign

July 24, 2010 by dreamer

早些时候完成了网站中浏览量非常大的product页面的改版。这次改版,在我看来并不属于redesign,应该算是realign。这项工作其实完成有一段时间了,现在看来当时的一些做法还比较幼稚,现在整理一下主要是记录~~当然也还有一些些可以借鉴的经验~ 在此之前,product几乎延用了06年的页面代码,无论从设计还是别的角度看都有很多的不足。4年前的页面是由程序员负责实现(甚至是设计)的,遗留下来的主要问题是: 1 主次不清晰。 2 样式混乱:正文和超链结都是棕色,区分度不大。颜色、字体样式使用的比较随意,和逻辑层次没有必然联系。各个元素的间距有些过紧,也不统一,各个块之间不整齐。 3 大部分元素都是随手写进去的,结构不清晰 4 大面积没有太大作用的flash广告。 5 发表评论部分不明显,看起来不太像能发表什么东西 6 代码比较混乱,基本难以修改⋯⋯所以从06年到现在一直没有改。 当时的版面截图(不过看起来没当时那么难以接受⋯⋯) 由于product页面的浏览量非常的大,几乎是大部分用户接触网站的第一个页面(通过搜索引擎搜产品),需要有一个更为友好的界面,便于用户了解信息,吸引用户评论、驻留、参与到网站的其他活动中。这是第一次进行比较复杂的页面修整,我比较保守滴保留了原来页面中出现的95%的元素,只删除了几个被要求从页面去掉的flash广告。先在ps里弄出预期的效果图~参考了zol、京东商城、豆瓣三个网站(其实对比学习的过程蛮漫长的,但是我真的都忘记了!)。这是v1.0的效果图: 接下来就要下手啦,第一步是便是抛弃原有css,重新整理了一遍html,清理掉所有的<b>、<font>,统一页面的正文和超链结颜色,并使二者有比较明显的区分。按照页面的信息大概分块来重新调整元素和元素间的结构,分配更为合适的id和class。然后样式表~后来还加入了产品相关贴子列表版块,加强产品与论坛内容的联系。我个人认为如果能在论坛的贴子中加入对产品的反向联系效果会更好。这是v2.0版的效果图啦,根据内部反馈,对个别元素的样式进行了改动。 这是最终实现的“产品信息”、“产品评价”部分。相关的贴子部分去掉了图片,改为全文字,这是考虑到筛选出合适图片需要更多的人力~ 在“产品信息”部分,真的有很多很多信息!除了理化数据表格外,还有图片、销售区域、价格、厂家信息、提交报错链接、访问人数和分享按钮(他们在原来的布局中就紧挨着理化信息)。从逻辑分类上看,首先将不属于产品信息的访问人数和分享扔到外边去,他们属于“页面”。再把图片相关的划到一边。销售区域、价格、厂家信息、提交报错链接这几个东西让我有些犯难,各个都需要被强调(他们都是希望被用户注意到的功能),空间却只有2行左右。最后我用了按钮样式来强调他们。这个结果并不太理想,有一个反馈意见认为它们仍然不够“强”,我认为它们能够出现在第一屏就已经有天然的优势了,现在这种情况还能够接受。总之这块暂时就这么地了,是否有更好的改进方法?我还会慢慢想的。 这是产品评价部分: 评价,是产品口碑的指标,更是吸引用户更深入参与网站的活动。因此,它最好是“低门槛”的,只需要点一两下就能完成,不需要被“对不起,您还没注册”之类的失败信息打扰。当然,在指标的计算上,我们实际上是排除了那些“游客”打分和一些被怀疑为是“刷分”的打分,具体是怎样判断的,并没有公开,这样是为了防止有人有针对性地绕开规则刷分。评价部分的交互行为其实是以豆瓣评分为原型设计的,用灰常菜的js搞完了,可喜可贺。一开始打算用ajax的,这样打分体验好一些(感觉门槛更低),不过因为没有时间跟负责后台的程序员好好交流下,作罢。评分条的行为,除了hover状态,有两种unactive状态:1 原先的打分,暗色;2 本次已经评价,但是还未提交的打分,用了比较跳跃的亮色。亮色和右下角的提交按钮颜色近似,这样能在视觉上形成一种联系,暗示用户需要点那个提交,以及两个指标都需要打分。 产品评论的部分模仿了豆瓣的评论,可以原地展开全文。下方留有大大的白色输入框来诱导用户参与评论。察看全部评论的链结被反馈不够明显~~这个页面当中有太多被认为不够强调的地方了~~路曼曼其修远兮 与产品页面配套的还有一些子页面,不一一赘述了。 关于web界面设计,大道理往往很容易懂,可实际做起来很难一蹴而就。一开始往往只是靠自己的感觉和经验,一点一点的改善。自己在一点点进步,整个网站也在一点点进步。可能步伐并不大,还追不上大部队,至少我们正在往前走。

Posted in: Interaction&Front-end, User Interface, 工作整理 Tagged: realign, web, 产品

Categories

  • ACG
  • Flash3D
  • Interaction&Front-end
  • Life
  • Mobile
  • User Interface
  • Visual Design
  • 工作整理
  • 懒人食谱
  • 服务器

Recent Comments

  • dreamer on Kill IE6?
  • 曉行 on Kill IE6?
  • Benny on 互动设计是神马?
  • 人人都爱vancl | Dreamer on 互动设计是神马?
  • dreamer on http协议复习笔记摘要

Tags

3dmax 3Z 403 960 Grid System acg android apache call to action code collada css CSS framework dae Designing Interactions Designing Interfaces diy Don't Make Me Think flash G7 gallery html http httpd.conf ie6 iPad 2 mysql papervision3d php programing PV3D realign shelock holmes wap web window wordpress xhtml xhtml mp 互动设计 产品 便当 凡客 咖喱 手机 手机网站

Copyright © 2025 Dreamer.

Mobile WordPress Theme by themehall.com