产品设计与生活 江洋's blog

关于网页设计中的留白6

先是看了笨活儿的这篇文章:高品质的网页设计: 实例与技巧
我突然意识到,我之所以崇尚的一些网页设计风格是什么原因了,原来其关键是恰到好处的留白。
比如douban,比如yahoo.com,比如microsoft,等等

(图1)
上面图1是douban首页的截图,我们看到在右下角有大胆的留白,而页面整体非常协调,给用户的眼睛留下一个休息的地方,而不是像很多国内的运营页面,恨不得页面上只要有个地方都要放点东西,放个链接。
再比如,看一下yahoo首页的下面,图2

(图2)
依然是留白,但页面整体看上去非常和谐。
再看一下我一直认为产品做的很细致的alibaba,淘宝网的首页,继承了国内网站运营页面的一贯传统,全部布局丰满,不给用户的视觉一点喘息的机会,鼠标随便点一下,可能都会产生一个PV。
再说门户网站及一些资讯频道的运营页面也如此。除了合理的间距外,几乎没有留白。
但我想,国内网页这种信息元素很满的风格,可能与国内的互联网环境有很大关系,比如广告的需求,运营PV的压力等。
我们目标就是不求合理,但求最满,万一页面留白了,那就是“开了天窗”,问题相当严重,一定要放点东西补上去。

嗯,就在我写这篇日志的前15分钟,老板找我,说网站的报价中心页面右下角有留白……
嗯,我还是坚信,国内网站的网页设计会趋势于一些新的标准和潮流,比如网页中的留白

低成本提高web可用性的几个细节(二)6

低成本提高web可用性的几个细节(一)
5、注释性文案要尽量简短
注释性或是情景提示的文案一定要在表达准确意思的前提下简短,不需要修饰性的形容词,建议大家仔细学习好中文,很多朋友知道要简短,但为了简短,把要传达的意思破坏了,甚至有了歧义。
举例,见图1
修改之前,文字冗余。  

修改之后,清晰明确。

 (图1)
K3定律之一:把页面中的文字去掉一半,把剩下的文字再去掉一半。

6、用好alt和title
简单直白的说:
alt适用于图片,当图片因无法读取而不显示时依然有文字注释或说明,用在img标签中
例如:把鼠标悬停在图片上
这是江洋

title适用于带有链接的文字,在浏览器中鼠标悬停在链接文字时有文字注释或说明
例如:把鼠标悬停在链接上
www.jiangyang.org

其实这两个html语法中的属性,大多数人都知道,但很多网站没有把这两个属性用好。
例如一些按钮,为了设计美观,在按钮的图片中只会写上一个关键的动词,例如:Search或Go
但在一些场景中,可能这个按钮不足以十分清楚告知用户它的作用,所以使用alt值做为注释就可以提高可访问性。另外,在网络不好或是服务器问题而导致图片无法打开时,alt值也起到的非常关键的作用。如下图2

(图2)
再例如一些文章标题因为页面设计整齐的限制,而仅显示了短标题或是做了截取,但这样的标题往往不能很准确的表达意思甚至让人看不懂,这时候如果用了title属性就可以很好的解决这个问题,见图3

(图3)
关于alt和title的更多技巧,请参阅千鸟的两篇文章:《使用Alt提升可访问性 》《使用Title提升可访问性

7、超过1秒钟的等待要有进度显示
在现实中,我们都有过体验,如果去银行排队,漫长的时间中,如果玩儿着手机,或是看等候区提供的杂志可能会好过一些。
在web中用的比较早比较普遍的等待进度状态是上传,比如我们用web中的邮箱上传附件或是在视频分享网站上传视频,这些进度条往往都是由程序判断,可以给出预测性的完成时间或是完成的百分比,让用户有一种“期待感”,见图4,这些已经成为“web产品标准”的地方,大多数网站做的已经都不错。

(图4)
但存在一些页面中的交互,需要等待的时间远远没有上传一个文件那么长时间,但这种等待又不能控制在非常短的时间内(通常在1秒以内用户可以忍受)。即便这种“不长不短”的时间,如果完全让页面处于空白的等待状态,哪怕只是2秒钟,对用户来讲,可能会以为网站出了问题页离开。
比如一些标签页的切换会向服务器提交请求,比如一些检索器的查询结果需要查询数据库
而这些看似很短暂的等待,如果没有任何提示,会让很多用户离开。
例如,在新版的首页中有一个切换各地报价的模块,网速好的情况下,切换城市只需要1秒钟左右的时间。如果没有加任何切换时的等待提示,切换城市时,这个模块就会空白一片,带给用户的体验就非常不好。
如果我们加上一个gif动画和一行文案描述,用户从心理上在这1秒钟里就不会有一种“空白”的等待感,而且会很有耐心。如图5

(图5)
而且这种等待进度提示的成本非常低,只需要一个gif动画图片就可以解决。

低成本提高web可用性的几个细节(一)7

可用性(Usebility),ISO 9241-11国际标准对可用性作了如下定义:产品在特定使用环境下为特定用户用于特定用途时所具有的有效性(effectiveness)、效率(efficiency)和用户主观满意度(satisfaction)。更多内容请猛击这里>
在实际的产品设计中,有很多标准的方法和技巧可以提高web页面的可用性,但往往很多方法成本较高,耗时较长。如何快速度低成本的提高可用性呢?我总结了几个细节给大家分享一下。

1、在传达信息的页面尽量少用红色
我们在很多时候有一个误区,错误的认为红色醒目,可以吸引人,从而可以转化更多的PV,特别是一些运营编辑同学们,爱用标红这样的形式,而且为了达到“目的”,把标题搞的一大片红。(图1)
来自网上车市首页的截图:

 (图1)
我们可以看到,这样的体验非常糟糕,因为红色是一种起到警示作用的颜色,往往只有出现系统级错误,不可恢复操作提示或是严重警告性错误时才会使用这种颜色,包括日常生活中,红色代表禁止(图2),这种颜色会给用户很紧张焦虑的感觉,而且滥用会使页面很不和谐。
        
(图2)                                                                                         (图3)
当然,如果红色处理的得当,还是可以在页面中可以很好的达到突出显示的效果,例如上面的图3。

2、最醒目的颜色是链接默认蓝色
更详细的,按最醒目最容易让人点击的顺序排列如下
1)文字是默认链接蓝色和下划线的。蓝色一般为#0000ff或#0000cc,但在运营页面这种蓝色不适合聚集在一起,可以跟据整体风格做色值上的调整。
2)文字是默认链接蓝色的。(蓝色应用方案同上)见图4

(图4)
插入千鸟的文章《用户喜欢点什么》
3)文字是反白或是高对比度的文字或是按钮,一定要符合W3C关于对比度的规范,如图5就有很好的效果。
来自amazon.com导航中的截图

(图5)

插入Ami Zhang的文章《不要忽略了颜色的可用性》

3、网页中的英文不要全用大写
这点主要是说出现在标题,或是说明性文案中的英文单词,或是主域名超过5个字母的域名,最好不要全用大写。
举例:Advanced Search
如果写成:ADVANCED SEARCH
虽然很简单的一个词组,但如果全大写,会不会读起来更“累”一些呢?我想对于中国用户普遍英文水平不高的情况下,这种“累”会更突出。
再比如:www.soufun.com,这个网址,如果我们在一些宣传性的广告中用小写,可能更容易让人记住。
如果改成:WWW.SOUFUN.COM是不是感觉有一点点不舒服呢?
其实这与人们对缩写名词的潜意识有关,比如我们说CCTV,可能比看到cctv反应起来会快那么一点点。
所以在页面中的信息文案,最好还是遵循一般规律,如果是专有名词或是品牌,可以用首字母大写的方式,比如:BlackBerry

4、网页中的数字尽量使用阿拉伯数字
这一点与上面类似,也是为了给用户带来更直观的效果。特别是用于说明日期,条目数量等用于数字的地方,一定要使用阿拉伯数字。见图6
比如:


(图6)
可以想象,如果我们改为:
名博排行前五十
不超过四十个字符
这样看起来会很累,而且不够直观。当然,对于电话号码就更不用说了。 
  

(未完…)

祝老杨发展顺利3

说是老杨,其实一点都不老。
小我两岁,是我一个很好的哥们儿
健康活力,酷爱旅游,善谈,讲义气。
第一次见到他是在天商北门,记得那天是我刚刚拿到毕业证和学位证,我和同学吃完饭从北门进学校,他从北门出,开始我并没注意他,因为我并不认识他。
是他喊了我的名字,然后开始自我介绍。
后来就是在网上聊着越来越熟识。

后来我在ZDNet工作,那时候搞社区,他帮我做社区兼职,也是顺便挣一些零花钱。
关于他对互联网的理解和认识,我一直很认同,包括他自己的网站,也搞的头头是道。
后来,他毕业了,我把他推荐到ZDNet工作,但和他共事的时间不长,他调部门了,我离职了……
其实现在我在想,不知道当时把他推荐到ZDNet是对是错,但我相信即便他觉得这是一段错误的工作经历,也应该不会怨我。
是的,老杨身上的很多优点是我要学习的,透着与实际年龄不一样的成熟和老练。以及对理想的执着和追求。
2007年6月至2009年6月,两年时间,对刚毕业的年轻人来讲,两年有些长,但对于人生来讲,两年很短暂。
我对身边很多认识老杨的朋友都说过,我很看好老杨。现在的不如意是一时,但迟早有一天会改变现状。
寄语老杨:这是一个新的起点,要振作,每个人都有缺点,但要去努力改变,不要让儿女情长的东西过多的干扰自己,事业是眼下,有理想才能实现人生的梦想,但理想是需要以事业为基础的。
我相信你会成功。
无论何时,兄弟我会支持你。

点评表单也不需要标题1

最近在赶一个点评产品,对具体产品的用户点评是一种web2.0形式,靠用户贡献的内容来引导产品口碑,从而使读者用户看到对该产品更真实更有效的评价
就发表点评表单的交互细节,看了一下其它网站的点评产品,基本都包括以下几个方面:
1、综合评分,一般是按5档的星级来进行评分,鼠标操作。
2、文字点评,一般是写下对该款产品的点评内容,键盘操作,有些网站还将点评内容分为了“优点”和“缺点”两个textarea。
3、点评标题,很多网站认为点评还要有个标题。
一起看一下几个典型产品

A、大众点评网

大众点评网

图小?猛击这里

B、douban对书的点评

图小?猛击这里

C、ZOL的产品点评

图小,猛击这里

D、易车网的点评

图小?猛击这里

综合以上4个点评类产品,我认为A,B两个在交互细节上做的比较好,大众点评网,这是一个比较早的专业的点评网站,结合了餐馆自己的特点,打分时分为“口味,环境和服务”
douban的整体设计,包括界面设计很干净纯粹,但觉得点评是不是没有不需要必填标题?

第三个ZOL的点评结合了3C产品的特点,分为了优点和缺点(必填其一),同时还有总结和标题,而且这些内容都是必填项。这一点的设计很复杂,总结和标题有些重复,个人觉得没有必要。就像手机短信,需要写标题吗?另见,千鸟早期的文章:站内信不需要标题
关于“优点和缺点”的问题一直比较纠结,一方面有利于后期数据的整理和提练,同时对读者也很清晰的看到点评两方面,但另一方面,是否给贡献内容的用户造成成本过大?因为一般点评会有综合评分,如果综合评分是好评,那一般情况下点评的内容也就是优点了。
第4个,易车的点评也是同样的问题,标题为必填,但他有一点智能分词技术提取tag,这一点非常好,通过技术手段可以把点评内容进行tag分类,以后可以进行一些数据整理衍生出一些新的产品形态,例如tag云图,例如点评搜索等

最后,关于表单提交的交互细节,我做了如下的产品原型:

 
图小?猛击这里
其中,分类内容为:

1、去掉点评的标题
2、优缺点分开,在我没有找到答案之前,认为是有用的,在与千鸟沟通后,觉得优点和缺点利于传达内容,而且也会很隐性的告诉贡献内容的用户这里是分开的,不会给用户带来什么成本。同时还有就是我前文中提到的利于以后的数据提练。
3、必填的只有两个地方,是综合评分和优点或缺点必填其一。
4、增加点评的分类,符合了汽车类产品的特点,实际也是为了把点评内容进行规类,方便衍生一些其它产品形态。

当然,这是我认为最理想的一种点评表单设计,现实不是这样的,因为有各种各样的人,各种各样的压力。
所以上线后的点评表单可能不是这样子。
嗯,那不是我做的。
另外,如果仅为了一些数据合作,必须有标题数据这种情况,我们可以用提取点评内容前N个字符的方式来实现。

第 5 页,共 6 页« 最新...23456