RSS
people

【转】提高网站可用性的10个小技巧

可用性是用户体验的一种度量,它可以用访问者完成网站功能的方便程度来描述——无论是通过自身知识还是通过学习新方式来完成这种功能。我认为Jakob Nielson的解释非常到位,他说:
可用性是评估网站易用程度的一种属性。同时“可用性”这个词也指在设计过程中提高易用性的方法。
在本文中我希望能够提供一个可用性清单,内容覆盖了从视觉设计,到可以用在任何项目中的简单导航提示等多个方面。

1. 当前位置导航

要让用户在任何时候都知道自己身处哪个模块,或者在浏览那个分类。对任何网站来说,这都可以极大提升可用性。在这一点上,创建当前位置导航可以算是最有效的提升可用性方式。
当前位置导航的理想方式是在服务端创建,这样可以大量节省HTML和CSS代码。如果不方便在服务端创建导航,那么使用CSS操纵你的body元素 从而直接定义每个导航标签也是一个不错的方法。
另外,你可以方便的 使用JavaScript创建当前位置导航菜单。
要注意,你的当前位置导航最好和鼠标滑过样式保持不同,这是很多网站缩不注意的。 read more »

No Comments |

【转】李开复:给创新工场求职者的一封信

创办创新工场的两个月里,我每天都在不同场合感受到国内创业者及有志于创业的大学生的热情与朝气。我们发出了大约三十封邀请,大多数也决定加入创新 工场。这多多少少证明了我当初的想法:中国有着足够多的和我们志同道合的、人品好、有创业精神、扎实的计算机基础和团队合作精神的青年人。不过,在我和很多青年朋友交谈时,我也看到很多人的疑惑——特别是那些尚未毕业但怀揣梦想的大学生。一些非常聪明的学生朋友也会有一些极为朴素的好奇:

如果我可以加入一家已经成功的公司,直接过上很舒适的生活,为什么要创业?大学毕业后,是不是只有大公司才能帮助我成为一个卓越的技术人员?如果创业 失败了,而我在这几年里又做出了很大的个人收入及私人时间的牺牲,是不是很亏? read more »

No Comments |

EDM设计制作规范

设计时要考虑图片无法显示的情况

很多的客户端邮件程序和网站邮箱并不能看到你发送的邮件中的图片,在默认的设置下。有些用户可能知道原因所在,经过正确的设置,能够看到正常的效果,但并不是所有的用户都会这样做,你发送的邮件可能马上被删除。

当邮件中的图片不能显示时,你发送的邮件可能不能完整地传达你的信息。因此我们不能忽视这个问题,首先需要注意以下几点:

1.不要用图片来显示重要地内容,像按钮、链接、标题等。
2.有可能地话,让你地用户把你地邮件地址加进联系人名单,这能让大部分邮件程序的默认状态正常显示图片。
3.在邮件中添加一个文本链接,连到邮件的网页版本。
4.给图片添加alt属性说明。
5.设定每张图片的宽和高,以保证页面排版设计的正常。 read more »

No Comments | Tags: ,

css布局小结

css布局一般来说有两张方法,一种是浮动(float),一种是定位(position);根据填充的内容又可以分为固定宽度和自适应宽度,自适应宽度又被称作为“液态布局”。如果考虑到页面元素的加载的先后顺序的话(因为考虑到用户体验和带宽的问题,我们会把页面的主要内容先加载出来),那可能就会稍微复杂一点。

一、一列布局比较简单相信大家都会操作,我就在这里不做论述了

二、两列布局这个是重点,也是我们日常工作最容易遇到的情况;两列布局大致可以分为以下几种

1)两列都固定宽度;采用浮动和定位的方法均可以实现,不过浮动应该会更灵活一下;

Html代码:<div id=”container”>

<div id=”left”></div>

<div id=”right”></div>

</div>

Css代码:#left{float:left; width:300px;}

#right{float:left; width:300px;} read more »

No Comments | Tags:

【转】网站可用性设计 – 6个最普遍的可用性设计错误

我厌恶Web站点的理由

人们使用web来与其他人进行交互,查找信息,在线购物,以及下载软件程序等。要容易的实现这些事情,当他们浏览一个新的网页的时候,他们要么熟悉 这些网站,要么是以直觉判断来确定正确的行动。一个良好的网站可用性设计,能够有效的帮助你的新访客找到他们真正需要的信息,作为一名访客而言,每到一个 新的网站总得上下翻转整个页面去寻找下载链接,那实在是一件让人烦心的事情(对于国内的部分下载站点,甚至以广告链接来冒充下载资源,那更是让人深恶痛 绝!)。

在下面的内容中,我将向大家展示一些我在去年的工作中总结出来的6个最普遍的网站可用性错误,大多数的网站站长和网页设计师都倾向于犯类似的错误。如果你对站点可用性工具感兴趣,可以参考:10个免费的web分析工具 – 网站访客分析及可用性研究

1. 让人困惑的网站结构和内容

对用户而言,没有什么东西比一个让人困惑的站点更让人气愤了,它们没有任何方位说明,混乱的站点导航,甚至没有站点导航,你根本没有办法在该站找到 下一个对你有用的信息,除了当前你正在浏览的页面,你最想做的事情就是立刻离开这个网站,并且永远不再回来!研究人员指出,网络用户应该能够在不超过3次 点击的情况下,在一个网站上的每一个页面去到任何一个他们想去的精确页面。

当然,我们说的3次点击肯定应该理解为同一个站点的任何两个不同网页之间。如果不能通过3次点击到达他们所需要的目标页面,你很可能会失去他们。检 查你的web站点,如果超过3次点击,web设计师会告诉你,如果你想重新设计或者定义网站结构,那将是一个非常耗费时间的活计! read more »

No Comments | Tags: ,

jQuery对象与dom对象

1、关于页面元素的引用

通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换

只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如:$(document.getElementById(“msg”))则为jquery对象,可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。
如:$(“#msg”)[0],$(“div”).eq(1)[0],$(“div”).get()[1],$(“td”)[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。
以下几种写法都是正确的:
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
read more »

No Comments | Tags: ,