本文列举Jeff Johnson:《GUI设计禁忌》一书中提及的明确针对Web设计和笔者认为对Web设计有参考意义的设计原则和禁忌。设计Web项目时尽量参考一下基本原则，避免设计禁忌，应该能使Web项目的GUI上一个层次。
基本原则
- 关注用户及其任务，而不是技术
- 首先考虑功能，然后才是表示
- 从用户的视角看问题，使用用户的词汇进行描述
- 不要向用户暴露实现细节
- 使常用的用户任务简单化，不要让用户解决额外的问题
- 保持一致性，引导用户的使用习惯
- 保持显示惯性，传递信息，而不仅仅是数据
- 设计应满足响应需求
禁忌
- 同一页面包含重复功能的链接或按钮
- 将复选框用作单选按钮
- 无初始值的多选一设置
- 在非开/关设置中使用复选框
- 用文本框显示只读数据
- 单选按钮之间间隔太大
- 属性标记对齐方式不一致
- 当前无效的控件不充分置灰
- 显示对用户无意义的错误提示
- 不同的类型页面窗口显示相同的标题
- 窗口的标题和调用的命令不一致
- 要求用户输入随机数
- 相似的功能却有不一致的用户操作界面
- 取消按钮无法真正取消操作
- 网站结构反映公司的结构或网站升级的历史
- 返回按钮不能达到预期的目的
- 搜索选项过多，过度复杂
- 使用容易被忽略的隐藏的图片链接
- 需要向下滚动才能看到当前页的重要信息
- 图片按钮对鼠标按下操作没有视觉变化
- 无意义的虚假进度条
- 执行长时间的任务时鼠标指针不显示成忙状态
- 不考虑用户可能的人为的错误输入
- 认为好的UI就是漂亮的UI
- 盲目错误的使用页面模块化设计
来自:隐居者的豆腐店
来自 FAMFAMFAM ,做网页的时候正好可以用上，重要的是它们都是免费的。
silk :下载 MINI :下载 FLAG :下载
不多说，最近在做网页的时候用到了，顺便记录一下。这里可以看效果
<script type="text/javascript">
function changes(obj){
var TextIn=document.getElementById("textin");
if(TextIn.createTextRange){
//ie兼容
TextIn.focus();
document.selection.createRange().duplicate().text=obj;
}else{
//firefox兼容
var iStart = TextIn.selectionStart;
var iEnd = TextIn.selectionEnd;
TextIn.value=TextIn.value.substring(0,iStart)+obj+TextIn.value.substring(iEnd,TextIn.value.length);
endRange=iStart+obj.length;
TextIn.setSelectionRange(endRange,endRange);
}
}
</script>
<textarea cols="40" id="textin">选中这里的文字，然后点change试试看。</textarea><input type="button" onclick="changes('文字被替换了！')" value="change" />
我想prototype.js里的ajax对象肯定吸引了不少人，大量封装好的ajax逻辑的类，对于我们这些初学者使用ajax有很大的帮助。
以下用一个我的具体使用例子来解释：效果看这里
1. Ajax.Request
你可以这样创建它
var url = 'http://yoursever/your/your';
var pars = 'id=xxx';
var myAjax = new Ajax.Request(
url,
{method: 'get', parameters: pars, onComplete: yourfunction}
);
parameters表示你要传递的参数，比如id=xxx这些。XMLHttpRequest在HTTP请求期间的阶段分为：Loading, Loaded, Interactive, Complete。Ajax.Request对象在任何一个阶段都可以调用你自定义的方法，形式如onxxxxxxx:yourfunction,比如我们上面提到的onComplete，是最常用的。
例子中实际使用的代码
function sends(id)
{
c = $('content');
o = $('old-content');
c.innerHTML = "载入中...
";
o.innerHTML = c.innerHTML;
c.style.display = 'none';
o.style.display = 'block';
var myAjax = new Ajax.Request('content_'+ id + '.html', {method: 'get', onComplete:updates});
}
function updates(response)
{
new Effect.Fade($('old-content'));
new Effect.Appear($('content'));
$('content').innerHTML = response.responseText;
}
