手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2024年11月的文章

增强网站易用性的10个设计技巧

这是一篇来自博客园的文章,感觉里面的一些知识点不错。最后那张图是我一直想要找没有找到的。好像记得每年都会有这种用户行为征测的报告出来,但,因为不知道术语是什么,也就没有找到过。做商业网站的时候,了解这种行为非常重要,只有这样才能知道把重点放在什么位置。

原文:http://www.cnblogs.com/cocowool/archive/2009/05/01/1447466.html

作者:小狼的世界

易用性是什么?

易用性就是是你的网站对用户来说使用更简单,能够让用户在他需要的地方很快找到需要的信息。类比于Google所提倡的”让用户呆在Google的时间不短缩短“,对于网站来说,我们不是减少用户在网站的停留时间,而是缩短用户寻找关键信息和向导的时间。

很多人认为要实现网站的易用性需要耗费大量的人力、财力和物力,确实有很多的大网站他们投入了很多的钱和设备去做网站的易用性的研究和测试,但是对于我们日常的小网站来说,我们仍有方法在没有专家和专业设备的基础上改进网站的易用性。

一、包含宣传词(Tagline)。

宣传词是一个用来表明公司理念、目标或者网站愿景的地方。这一部分应该是网站最引人瞩目的部分,应该用简短的语言概括站点。统计结果表明,一个页面只有8秒钟的时间来吸引一个用户继续他的浏览,所以如果不能用醒目的焦点吸引用户,那这个页面就是失败的。

国外的站点很多使用Tagline或者醒目的Flash,国内的站点也可以 这么用,有的时候内容多的时候,还可以是Banner+焦点图,这个要区分不同的网站类型来对待。例如对于产品型的网站,完全可以只使用一个焦点图或者醒 目的有特色的Flash来吸引注意,如果是资讯类的或者专题类的页面,则可能既要有Banner,来突出这个页面的主题,也要有焦点图,来显示最近的一些 动态。这个需要在制作的过程中不断地体会积累。
大小: 29.91 K
尺寸: 500 x 204
浏览: 1633 次
点击打开新窗口浏览全图
大小: 36.74 K
尺寸: 500 x 204
浏览: 1710 次
点击打开新窗口浏览全图

大小: 342.25 K
尺寸: 500 x 172
浏览: 1827 次
点击打开新窗口浏览全图

二、提供站内搜索。

站内搜索对于用户来说也是非常重要的,特别是当站点的内容量开始逐渐增多以至于用户不能很轻易的找到他想要的东西时,用户往往会想到搜索。 你能想象到,要在博客园里通过连接一个一个查找你之前看到过的某一篇文章的痛苦吧。

搜索框的长度和位置也需要加一点注意,不能太小,位置最好放在右上区域,因为根据用户的浏览习惯呈现出”F“的趋势(F Pattern),提交按钮的文字最好能够明确的告诉用户,接下来将要发生的动作是搜索。
大小: 20.78 K
尺寸: 500 x 135
浏览: 1708 次
点击打开新窗口浏览全图

三、不能滥用图片。

 从易用性的角度来看,Less Is Always More。

四、使用站点地图。

站点地图是一项能够改进站内导航和搜索引擎优化(SEO)的特性。典型的站点地图提供了站点的结构和各个页面的导航。站点地图可以是任何形式的,可以是一个网页、一些页面的列表,只要他们是按照层级关系组织起来的就行。

最近,Google、Yahoo、MSN开始提供Sitemap Protocol的服务,同站点地图非常相近,但是数据是以XML的形式组织的。

 

五、不要破坏工作流。

工作流是指用户在网站上所进行的操作,比如填写表单、注册用户、浏览目录、档案等,要允许用户撤销操作,如果没有提供后退或者返回的选项,用户就被逼着做他们不想做的动作,或者他们会干脆关掉浏览器来图个清净。

有些站点上的操作顺序并不是那么的明显,这个时候就需要有提示来指导用户。比如Yahoo Music当第一次进入的时候,会有一个向导来指导你一步一步的熟悉页面上各个功能区。玩游戏的时候也会有游戏教学这个环节,如果网站上也提供了,会带来很好的用户体验。

还有一个误区是改变超链接的样式。传统的门户往往让超链接停留在他原始的样子,这样能够给用户明确的指示,这是一个超链接,通过点击,我可以进入一 个新的页面。当然,我并不赞成超链接的样式一定不能改变,但是如果发生了改变,我们一定需要通过图示或者文字来表明,用户可以通过点击这个链接到达另外一 个页面。

六、让网站更容易被”扫描“。

内容的可读性能够提高用户的忠诚度,让用户停留在站点上获得他们需要的内容。但是研究表明,很多用户并不是在读页面,而是在”扫描“,通过扫描标题、着重文字、强调的列表来获得信息。

Jacbo Nilsen通过视觉追踪发现用户的浏览很像一个F型,他们从左到用从上到下的”扫描“页面。

大小: 46.47 K
尺寸: 500 x 222
浏览: 1782 次
点击打开新窗口浏览全图

他的实验同时也得出了一下结论:

用户不是一个字一个字的去阅读,而是从段落、着重文字中提取信息。

 文章的前两段非常的重要,这两段必须包括这篇文章的大部分内容。

副标题和列表能够重新引起用户的注意,注意用这些元素来强调重要的内容。

从传统的纸质媒体上得来的经验也告诉我们,将内容组织成一个倒金字塔型。关键问题是,我们如何才能知道什么信息对用户来说是重要的,那些信息对用户来说又是不重要的,作者推荐了一个工具:News Values。

七、不要设计容易误导的界面元素。

千万不要设计那种看上去像是一个按钮实际上不是的内容,我们也经常被那些带下划线的文字误导,当我们点击时,发现他们根本不是链接!

Yahoo是一个很好的正面的例子。

八、给出用户有意义的提示。

这一点大家应该都有共识了,不要将出错信息直接输出到页面上,要给出用户经过处理的、用户能够理解的信息。

九、不要过度使用Javascript。

过度的使用Javascript和Ajax技术,我们需要小心的避免出现浏览器兼容性问题,我们要很好的衡量这个代价。

十、避免验证符。

验证符的使用在必须的地方添加,如果不是那么必要,还是要符合人类懒惰的本性,去掉那些验证符吧。

 

总结:提升网站的易用性并不一定需要墨守成规,但是在没有足够的功力之前,这些规则能够为我们提供一个很好的方向指向。对于这些规则的争论也很多, 比如避免验证符的使用,在很多情况下,我们必须使用验证符来避免垃圾信息的产生,就像坐飞机时的安检,虽然是一件让人不舒服的事情,可是他有他的目的。

 网站的易用性也不是网站的全部,我们必须在易用性、页面设计、站点的可维护性和安全性之间权衡,对不同类型的项目采取不同的处理策略。

参考资料:

[1]、http://www.webdesignerdepot.com/2008/12/10-usability-tips-for-web-designers/

[2]、http://www.useit.com/

[3]、News Values。http://mtsu32.mtsu.edu:11178/171/newsvals.htm#top

Tags: 网站设计, 易用性

学习笔记2进制与其他进制互转

最近的课程是MIS,可是课上的内容与MIS相差甚远,居然在做进制转换。。
以前学的早就忘光了。于是在网上找了找资料。
说实话,不忘光也用不到啊。PHP里面有很多现成函数binhex,decbin等等,相信,其他语言也会有相应的math函数吧?

以上是网上找来的笔记内容。看了一下,完全可以做出作业了。

一.在计算机应用中,二进制使用后缀b表示;十进制使用后缀d表示,十六制使用后缀H表示。

二.二进制,十六进制与十进制的计算转换
1.二进制转换为十进制
计算公式:二进制数据X位数字乘以2的X-1次方的积的总和
例:10101011b=(     )d
数据
 1 0 1 0 1 0 1 1
X-1位
 7 6 5 4 3 2 1 0 相应的十进制值即为:27 +25+23+21+20=128+32+8+2+1=171
2.十六进制转换十进制
计算公式:二进制数据X位数字乘以16的X-1次方的积的总和(与二进制转换十制进同理的,将底数换为16)
注意:在十六进制中,10-15依次用A,B,C,D,E,F表示
例:1F3E   H=(   )d
计算:1*16的3次方+15*16的2次方+3*16的1次方+14*16的0次方=1*4096+15*256+3*16+14=7998
三.十进制与二进制,十六制的计算转换
1.十进制转换为二进制
十进制数据数字除以2的余数的逆序组合
例:404d=(   )b
2|404 余0
2|202 余0
2|101 余0
2|50  余1
2|25  余0
2|12  余1
2|6   余0
2|3   余1
2|1
计算结果便是:110101000
2.十进制转换十六进制。。。与上面同理,注意的是10以上的数字用字母表示,除数是16
十六进制与二进制的转换,建议通过十进制来进行中转。
带小数点的十进制转换为二进制时同理,小数店后的数位指数为负指数


关于“进制之间的转换”问题的分析指导
在 计算机文化一书中,在其中一个章节里面详细介绍了进制之间的转换,而且在考试中进制转换也占了一定的比例,虽然分数不是很多,但是因为平时大家接触的不 多,并且有点繁复,所以很多学员在做这种题目,要么选择猜答案,要么选择放弃。笔者觉得只要掌握了方法,其实这些题目也很简单的,下面我就对进制的转换进 行具体的分析和讲解,以供大家参考。
在书主中一共提到了四种进制,分别是二进制、八进制、十进制、十六进制,而八进制和十六进制是从二进制衍生而来的,八进制和十六进制类似。因此,我们可以将进制分成三大部分,即十进制、二进制、八和十六进制之间相互换算,如图。
一、 十进制与二进制之间的转换
(1) 十进制转换为二进制,分为整数部分和小数部分
① 整数部分
方法:除2取余法,即每次将整数部分除以2,余数为该位权上的数,而商继续除以2,余数又为上一个位权上的数,这个步骤一直持续下去,直到商为0为止,最后读数时候,从最后一个余数读起,一直到最前面的一个余数。下面举例:
例:将十进制的168转换为二进制
得出结果 将十进制的168转换为二进制,(10101000)2
分析:第一步,将168除以2,商84,余数为0。
第二步,将商84除以2,商42余数为0。
第三步,将商42除以2,商21余数为0。
第四步,将商21除以2,商10余数为1。
第五步,将商10除以2,商5余数为0。
第六步,将商5除以2,商2余数为1。
第七步,将商2除以2,商1余数为0。
第八步,将商1除以2,商0余数为1。
第九步,读数,因为最后一位是经过多次除以2才得到的,因此它是最高位,读数字从最后的余数向前读,即10101000
(2) 小数部分
方法:乘2取整法,即将小数部分乘以2,然后取整数部分,剩下的小数部分继续乘以2,然后取整数部分,剩下的小数部分又乘以2,一直取到小数部分
为零为止。如果永远不能为零,就同十进制数的四舍五入一样,按照要求保留多少位小数时,就根据后面一位是0还是1,取舍,如果是零,舍掉,如果是1,向入一位。换句话说就是0舍1入。读数要从前面的整数读到后面的整数,下面举例:
例1:将0.125换算为二进制
得出结果:将0.125换算为二进制(0.001)2
分析:第一步,将0.125乘以2,得0.25,则整数部分为0,小数部分为0.25;
第二步, 将小数部分0.25乘以2,得0.5,则整数部分为0,小数部分为0.5;
第三步, 将小数部分0.5乘以2,得1.0,则整数部分为1,小数部分为0.0;
第四步,读数,从第一位读起,读到最后一位,即为0.001。
例2,将0.45转换为二进制(保留到小数点第四位)
大 家从上面步骤可以看出,当第五次做乘法时候,得到的结果是0.4,那么小数部分继续乘以2,得0.8,0.8又乘以2的,到1.6这样一直乘下去,最后不 可能得到小数部分为零,因此,这个时候只好学习十进制的方法进行四舍五入了,但是二进制只有0和1两个,于是就出现0舍1入。这个也是计算机在转换中会产 生误差,但是由于保留位数很多,精度很高,所以可以忽略不计。
那么,我们可以得出结果将0.45转换为二进制约等于0.0111
上面介绍的方法是十进制转换为为二进制的方法,需要大家注意的是:
1) 十进制转换为二进制,需要分成整数和小数两个部分分别转换
2) 当转换整数时,用的除2取余法,而转换小数时候,用的是乘2取整法
3) 注意他们的读数方向
因此,我们从上面的方法,我们可以得出十进制数168.125转换为二进制为10101000.001,或者十进制数转换为二进制数约等于10101000.0111。
(3) 二进制转换为十进制 不分整数和小数部分
方法:按权相加法,即将二进制每位上的数乘以权,然后相加之和即是十进制数。例
将二进制数101.101转换为十进制数。
得出结果:(101.101)2=(5.625)10
大家在做二进制转换成十进制需要注意的是
1) 要知道二进制每位的权值
2) 要能求出每位的值
二、 二进制与八进制之间的转换
首先,我们需要了解一个数学关系,即23=8,24=16,而八进制和十六进制是用这
关系衍生而来的,即用三位二进制表示一位八进制,用四位二进制表示一位十六进制数。
接着,记住4个数字8、4、2、1(23=8、22=4、21=2、20=1)。现在我们来练习二进制与八进制之间的转换。
(1) 二进制转换为八进制
方 法:取三合一法,即从二进制的小数点为分界点,向左(向右)每三位取成一位,接着将这三位二进制按权相加,得到的数就是一位八位二进制数,然后,按顺序进 行排列,小数点的位置不变,得到的数字就是我们所求的八进制数。如果向左(向右)取三位后,取到最高(最低)位时候,如果无法凑足三位,可以在小数点最左 边(最右边),即整数的最高位(最低位)添0,凑足三位。例
①将二进制数101110.101转换为八进制
得到结果:将101110.101转换为八进制为56.5
② 将二进制数1101.1转换为八进制
得到结果:将1101.1转换为八进制为15.4
(2) 将八进制转换为二进制
方法:取一分三法,即将一位八进制数分解成三位二进制数,用三位二进制按权相加去凑这位八进制数,小数点位置照旧。例:
① 将八进制数67.54转换为二进制
因此,将八进制数67.54转换为二进制数为110111.101100,即110111.1011
大家从上面这道题可以看出,计算八进制转换为二进制
首先,将八进制按照从左到右,每位展开为三位,小数点位置不变
然后,按每位展开为22,21,20(即4、2、1)三位去做凑数,即a×22+ b×21 +c×20=该位上的数(a=1或者a=0,b=1或者b=0,c=1或者c=0),将abc排列就是该位的二进制数
接着,将每位上转换成二进制数按顺序排列
最后,就得到了八进制转换成二进制的数字。
以上的方法就是二进制与八进制的互换,大家在做题的时候需要注意的是
1) 他们之间的互换是以一位与三位转换,这个有别于二进制与十进制转换
2) 大家在做添0和去0的时候要注意,是在小数点最左边或者小数点的最右边(即整数的最高位和小数的最低位)才能添0或者去0,否则将产生错误
三、 二进制与十六进制的转换
方法:与二进制与八进制转换相似,只不过是一位(十六)与四位(二进制)的转换,下面具体讲解
(1) 二进制转换为十六进制
方 法:取四合一法,即从二进制的小数点为分界点,向左(向右)每四位取成一位,接着将这四位二进制按权相加,得到的数就是一位十六位二进制数,然后,按顺序 进行排列,小数点的位置不变,得到的数字就是我们所求的十六进制数。如果向左(向右)取四位后,取到最高(最低)位时候,如果无法凑足四位,可以在小数点 最左边(最右边),即整数的最高位(最低位)添0,凑足四位。
①例:将二进制11101001.1011转换为十六进制
得到结果:将二进制11101001.1011转换为十六进制为E9.B
② 例:将101011.101转换为十六进制
因此得到结果:将二进制101011.101转换为十六进制为2B.A
(2)将十六进制转换为二进制
方法:取一分四法,即将一位十六进制数分解成四位二进制数,用四位二进制按权相加去凑这位十六进制数,小数点位置照旧。
①将十六进制6E.2转换为二进制数
因此得到结果:将十六进制6E.2转换为二进制为01101110.0010即110110.001
四、八进制与十六进制的转换
方法:一般不能互相直接转换,一般是将八进制(或十六进制)转换为二进制,然后再将二进制转换为十六进制(或八进制),小数点位置不变。那么相应的转换请参照上面二进制与八进制的转换和二进制与十六进制的转
五、八进制与十进制的转换
(1)八进制转换为十进制
方法:按权相加法,即将八进制每位上的数乘以位权,然后相加之和即是十进制数。
例:①将八进制数67.35转换为十进制
(2)十进制转换为八进制
十进制转换成八进制有两种方法:
1)间接法:先将十进制转换成二进制,然后将二进制又转换成八进制
2)直接法:前面我们讲过,八进制是由二进制衍生而来的,因此我们可以采用与十进制转换为二进制相类似的方法,还是整数部分的转换和小数部分的转换,下面来具体讲解一下:
①整数部分
方法:除8取余法,即每次将整数部分除以8,余数为该位权上的数,而商继续除以8,余数又为上一个位权上的数,这个步骤一直持续下去,直到商为0为止,最后读数时候,从最后一个余数起,一直到最前面的一个余数。
②小数部分
方法:乘8取整法,即将小数部分乘以8,然后取整数部分,剩下的小数部分继续乘以8,然后取整数部分,剩下的小数部分又乘以8,一直取到小数部分为零为止。如果永远不能为零,就同十进制数的四舍五入一样,暂取个名字叫3舍4入。
例:将十进制数796.703125转换为八进制数
解:先将这个数字分为整数部分796和小数部分0.703125
整数部分
小数部分
因此,得到结果十进制796.703125转换八进制为1434.55
上面的方法大家可以验证一下,你可以先将十进制转换,然后在转换为八进制,这样看得到的结果是否一样
六、十六进制与十进制的转换
十六进制与八进制有很多相似之处,大家可以参照上面八进制与十进制的转换自己试试这两个进制之间的转换。
通过上面对各种进制之间的转换,我们可以将前面的转换图重新完善一下:
本 文介绍了二进制、十进制、八进制、十六进制四种进制之间相互的转换,大家在转换的时候要注意转换的方法,以及步骤,特别是十进制转换为期于三种进制之间, 要分为整数部分和小数部分,最后就是小数点的位置。但是要保证考试中不出现错误还是需要大家经常练习,这样才能熟能生巧。

Tags: 笔记

《街头霸王4》PC版7月2日发售

曾经最爱的游戏啊。。期待

新闻来源:L.G.Y Blog
来自Capcom官方消息,经典格斗游戏《街头霸王4》(Street Fighter IV)PC版将于今年7月2日登陆日本市场,本作将加入Games For Windows LIVE,允许玩家们进行在线比赛,好友配对比赛、游戏成就等。

大小: 84.77 K
尺寸: 268 x 376
浏览: 1654 次
点击打开新窗口浏览全图
早前Capcom业务发展及战略规划副总Christian Svensson告诉媒体,PC版其实并没有取消,只是推迟到今年夏天发售。他还谈到XBOX360/PS3版销售超出预期,也许PC版延期是市场需求而作出的变动。

《街头霸王4》将承袭系列作传统2D玩法,并采用最新的3D绘图技术,以更华丽的方式重现原作独特的2D绘图风格。XBOX360/PS3已于2月17日发售。

Tags: 街头霸王

扩展JQuery Ajax请求错误机制

如何对ajax的错误进行更好的处理?本文给出了一个简单的解决方案。想当于类的扩展和继承一样。有新意,一直以来,对于框架我们要么是扩展,要么是写新方法,就从来没有想过要继承这些方法。所以,作者这个给了我很多启发。

原文:http://www.cnblogs.com/lyk831216/archive/2009/04/24/1442791.html

JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,但时间久了,也让我们离不开他。比如简单的Jquery Ajax请求的封装让我们忘却了最原始的XmlHttpRequest对象和他的属性,方法,也让我们远离事情的真相。

在Ajax项目中,经常遇到需要服务器端返回错误的消息提示,或者消息码之类的数据。查过一些帮助,解决方案,很多网站是返回错误的消息JSON数据或者 脚本,这种方式当我们用JQuery.ajax()的时候出现了问题,jquery.ajax()回调函数success(data)的data参数可能 是 xmlDoc, jsonObj, html, text, 等等...这取决于我们dataType设置和MIME.很多时候我们的错误处理都是统一的处理,不管你请求的是XML,JSON...。不光不好统一, 还容易出现解析错误等等情况。

参考了Prototyp框架的做法,做了一个Jquery的错误扩展。

原理:Prototype思路是把服务器处理结果状态信息写在Header里面,这种方式既保证了reponse body的干净,同时适应XML,JSON,HTML,Text的返回情况。

   服务器端只需要 Response.AddHeader("Error-Json""{code:2001,msg:'User settings is null!',script:''}");

实现:为了不影响原有的Jquery.ajax方法,同时不破坏jquery库源文件,做了如下扩展,代码很简单都能看懂:

JavaScript代码
  1. ;(function($){  
  2.     var ajax=$.ajax;  
  3.     $.ajax=function(s){  
  4.         var old=s.error;  
  5.         var errHeader=s.errorHeader||"Error-Json";  
  6.         s.error=function(xhr,status,err){  
  7.             var errMsg = window["eval"]("(" + xhr.getResponseHeader(errHeader) + ")");  
  8.             old(xhr,status,errMsg||err);  
  9.         }  
  10.         ajax(s);  
  11.     }  
  12.   
  13. })(jQuery);   

使用方法:

  服务器端:我们是对错误进行扩展,如果要让jquery.ajax破获[膘叔:应该为捕获]错误,必须要服务器端返回非200的错误码,由于Opera浏览器下面对 400以上的错误码,都无法获得请求的Header,建议如果要支持Opera,最好返回30*错误,这是Opera能接受Header的错误范围。没有 做包装,可以再单独把Catch内容出来。

C#代码
  1. try {  
  2.     context.Response.Write(GetJson(context));  
  3.     throw new Exception("msg");  
  4. }  
  5. catch {  
  6.     context.Response.ClearContent();  
  7.     context.Response.StatusCode = 300;  
  8.     context.Response.AddHeader("Error-Json""{code:2001,msg:'User settings is null!',script:''}");  
  9.     context.Response.End();  
  10. }  

 客户端:

JavaScript代码
  1. $.ajax({  
  2.     url: this.ajaxUrl,  
  3.     type: "POST",  
  4.     success: callback,  
  5.     error: function(xhr,status,errMsg){  
  6.     alert(errMsg.code+"<br/>"+errMsg.msg);  
  7.     }  
  8. });  

也许不是最好的,但觉得用起来很方便,忘了个写新增参数errorHeader:"Error-Json",这个header头key根据你后台设定配置。

 

 

 

Tags: jquery, 扩展

phpoo.com实验中

phpoo.com目前已经用supesite架设起来了。原来的uchome功能迁移到了home.phpoo.com
资料我也在逐步转移,然后仍然会收集一些相关的资料
同时也欢迎大家去投稿,只是我会审核一下,因为这样才能保证文章的质量。

希望phpoo.com能够走的更远吧。
如果你有什么新的想法,也可以告诉我。我目前已经有一些小的想法,正在想办法实现和尝试

Tags: phpoo.com