EEDU Blog: 博客 ·  资讯 ·  论坛 ·  留言
登录 新用户? 注册   |  

ahaoxie's blog

订阅博客:

环境生态网站长

小窍门

制作用户手册的15个窍门

用户手册声称可解决问题,但实际上不仅不能提供帮助,反而让你愈加迷惑,这种情形你多久会遇到一次呢?如果你是一个典型的用户,这种情形可能会经常发生。设计得如此糟糕的内容会让用户产生不满与沮丧情绪,对产品质量留下不良印象;而且还会(对出售产品的公司来说)增加售后服务时间与成本。

于是智能文本管理应运而生。智能文本管理理解终端用户的行为,并在多数可能的实际行为中与用户需求保持一致。在本文中,我将提供一些实际技巧,帮助你建立合适、易懂、可读性强的用户手册。

 了解你的读者 

了解手册的读者是谁,读者需要了解什么内容。这样你就可以决定手册内容的深度与广度,以及编写手册应使用何种语言(例如,针对专家与初学者的语言与内容都有所不同)。关键在于只提供用户需要的信息——不多也不少。

采用面向任务的方法 

多数产品的功能体现在允许用户实现特殊的任务。采取面向任务的方法,根据应用产品能够执行的任务来安排手册内容。例如,如果产品帮助你配置网络,你的手册目录应包含这样的标题,如“建立一个网络”、“配置网络设置”及“删除网络”。

确保信息流程合乎逻辑

仔细研究一下产品,以循序渐进的方式了解先做什么、接着做什么、最后做什么。这样做可以大大改进文件信息的易读性。

应用模块

把信息分解成易于管理的小块,每个部分解释一个特定的用途或主题。这样的小块让读者阅读起来很轻松,各部分的思路也很清晰。模块式的写作方式易于维护,并可通过内部链接实现信息再利用。

应用目录

目录可帮助我们了解手册的整体内容。保证手册内容全面、结构完整、并拥有一个模块化的布局。这种方法可帮助用户方便找到他们所需要的信息。

应用有意义的一致标签

清晰且提供信息的标签可帮助用户快速而正确的找到信息。避免使用一般的标签标题,标签应简明扼要。

以交谈式的语调书写 

采用常见问答(FAQ)的编写方法。这种方法允许你轻而易举地缩短用户与产品之间的差距,并提供许多用户需要的通用信息。

仔细考虑重要信息的位置 

首先查看页面或屏幕的中部,然后是左上角,是人类的本性。尽量将材料的重点内容安排在布局的物理中心附近,并将主标题安排在左上角。

应用适当的插图 

令人惊奇的是,人们往往低估了图片在文本中的作用。外观吸引人的文本总能发挥更大的作用。插图(图例、表格、工艺流程图)是手册内容的主要组成部分,它不但能吸引读者的注意力,还可强化阅读效果。

尽可能将信息制成表格 

表格可改善信息的可读性。在需要根据不同的基础描述对象,或在不同的维度间比较对象时,可应用表格。

提供实例 

用类推、实例或个案研究来证明你的概念与说明。实例有助于用户迅速掌握概念,并更好地理解其内容。

包含解决问题的提示 

在为程序作注解时,分析可能的失败情形并告诉用户如何处理发生的问题。如果你有一本独立的解决问题的手册,指导用户去那里寻找更多的信息。

建立很好的索引 

人们通常认为,如果材料设计很糟糕的话,用户就会在索引中寻找所需的信息。在索引中通过重要的关键词来包含基本信息,以方便信息恢复。

编辑与审核 

对材料进行编辑,保证它遵守完整性、语言、拼写与语法、连贯性与格式方面的规则。

执行“现实检查” 

确保对材料与产品进行协同测试,以揭示书面材料与现实应用之间的差异。对揭示的差异进行纠正,并重复测试过程,保证在纠正过程中不会出现新错误。

 顾客支持

记住,用户手册的主要目的在于提高用户的生产效率,减少顾客支持时间、成本与努力。优质的材料可作为新用户的培训材料,以及返回用户的支持材料。遵守上述指导方针可保证信息的访问性与可用性,减少支持时间,提高顾客满意度。

发表于: 2011-08-16 23:16 | 全文(查看: 42) | 评论(0) | 本文地址 | 收藏 
分类: 小窍门(95)   标签: 用户  新知  

理解网页中的视觉层次

视觉层次是高效率网页设计的重要原则之一。这篇文章将向大家介绍为什么设计一个具有视觉层次的网页是这么重要。在了解这些原则之后,你可以在自己的基础设计练习中运用到这些知识。

作为核心:设计整体就是视觉交流。作为一个高效率的设计师,你必须有这个能力清楚地将你的设计思想传达出来。人是易变的,如果你给了他们巨大的信息量,这有相当高的可能性100个人中99人都会厌倦去看它。为什么呢?因为人们都是天性的视觉欣赏者,而不是数据处理者。

要了解这个,知道一些人们如何看待事物的方法是很重要的。人们并不等于所谓的“平等机会主义者”。他们不仅仅是收集视觉信息和处理数据,于此同时,大脑还会整理他们看到的这些东西的“视觉关系”。

让我们看看下面两个普通的圆:

很大可能上,你并不把它们仅当做“两个圆”看待,而是将他们看做“一个黑色的圆和一个比较小的红色的圆”。

原因是非常简单的:当呈现出某些像这两个圆一样简单的东西的时候,人们往往不仅仅看到两个普通的圆,他们将会搜寻这两个圆之间的不同点。某个圆或许更大,或者更小,或者有颜色,或者其他的不同点。这些不同点给予我们区别物体的信息并且给予图形特定的意义。

 

让我们来看一张更为复杂的图片:

增加的这些复杂成分强迫我们去分析他们之间的关系。相同和不同点变成了我们思考这些问题的思维框架。比例向我们传递了“一个物体相对其他来说离我们更近,或者是,这个物体起到一个相对其他物体而言的支配地位”;颜色的不同告诉我们每一个物体可能有自己独特的特点,这个特点将其与其他物体区分开来。这样一个简单的图片用最基本的方法却向我们传达了如此多的信息。

…Understanding that people will see our designs in terms of relationships is crucial to becoming a more effective designer.

让我们回过头来看网页设计;因为网页设计是有关视觉信息交流,明白“用户们将会自己组织设计内容的关系”成为我们高效设计的核心。一次丢出大量信息的方式看上去已经没意思了,作为网页设计师,我们任务是将这些没有经过处理的信息划分成一块一块切题的美味以供用户们更方便的阅读。更为重要的,我们需要明白:信息的高效交流是网页背后的关键。

初看视觉层次有成千上百的解释说明人们为什么会根据关系来看待问题;如果你要追溯到人类学上去讨论它的话,你可能做出结论:远古时代狩猎为生的人们在思维上引导现在的人类去关注这些事物之间的联系,这是一种生存技巧。

可能一个更便于理解的解释,这就是我们大脑整理信息的方式:将相似的可视元素整理成一个组,将他们放进具有一定意义的类型当中就像人类固有的吃喝等习性一样。换句话说,事实上大脑里的信息都是按照某种层次整理出来的,这样交流起来比没有整理信息要有效率的多。

看看下面的两张图片:


在上面的例子中,我们可以看到最基本的文本层次运用。两张图片当中用到的例子内容上没有任何区别,但是它是如何戏剧化地让人们改变了理解方式并消化这些内容的呢?当我们以文字排版为例讨论视觉层次的时,这就是我们要分析的问题。文字组织的接近性、篇幅比例和相似程度使读者将下级内容自然地归入标题和分段。层次给予标题更多的意义,不仅仅是信息,而且也使内容更容易被接受。

好,这只是一个最基本的例子对吧。让我们更深入的讨论其他的例子,让大家明白如何运用这些最基本的守则,成为一个老练的设计师。

视觉层次非常重要,但是如何准确的创建层次效果?我们寻找的“工具”正如木匠的工具箱——锤子、钉子、锯子等等——你如何运用它们才是最重要的。

1、大小

较大的物体具有更大的吸引力。将尺寸的控制作为制造层次的工具是一个非常高效的方法去引导读者的视线。在设计中将尺寸和重要性结合起来是非常关键的。最大的元素大部分情况都具有最大的重要性,与此同时,最小的元素应该是最不重要的。

2、颜色

颜色是一个很有意思的工具,他可以在组织上和个性两方面起到作用。醒目、对比强烈的颜色在特殊的元素中将会引起更大的关注(例如按钮、错误信息或者超链接)。当作为一个体现个性的工具时,颜色可以延伸到体现更精练的层次感上;用到豪华、舒适的颜色将给页面带来感情上的吸引力。颜色可以影响网页的每一个角落,从商标到形象。色彩应用在视觉层次设计中可以做到信息分类的效果,就像下面的例子:

3、对比

对比体现出相对的重要性。字体大小上戏剧性的变化将传递出某个消息的重要性或者需要某些特别关注。从较亮的背景转换到一个较暗的背景将较快的区分核心内容与页脚内容。

4、对齐

对齐体现出元素们的组织。甚至可以简单到仅仅用“主栏”和“侧栏”区分。但对齐也能够在视觉层次上起到更多更复杂的作用。考虑,举个例子,放在页面左上角的内容的力量。因为用户多半将那个地方的信息与简介、账号、购物车等等相联系。放在那个地方的东西被赋予了某种“官方”性。对齐如果用特定的方式也会激起用户的兴趣,例如下面的例子:

5、反复

重复体现了元素之间的关联性;如果所有段落的文字都是灰色的,当一个用户看到一块新的灰色文字时,他也许认为这是其中的另一段;当同一个用户遇到一个蓝色的链接或者一个黑色的标题时,他可以放心的将它理解成段落以外的东西。

6、亲密性

亲密性将元素彼此分开并且创建下级的层次。在一个页面中可能会看到很多被空白分隔开的小部件;在这些部件中又会有新的层次,标题、副标题和内容。亲密性是最快的方式将关系紧密的内容组织起来。在下面的例子中,很容易通过亲密性将主要内容与其他内容区分开来。

7、紧密与留白

密集的元素给人一种“重”和杂乱的感觉;元素之间距离太大,他们将会失去彼此之间的联系。当一个网页被设计的恰到好处时,眼睛将会准确的将各个元素组织好。

原文来自 Webdesign Tuts+ 

发表于: 2011-08-03 21:34 | 全文(查看: 38) | 评论(0) | 本文地址 | 收藏 
分类: 小窍门(95)   标签: 网页  新知  

Table 'xxx' is marked as crashed and should be repaired 错误解决

MySQL数据库报错:Table 'xxx' is marked as crashed and should be repaired

解决方法:

1、主机上,可以采用
  1. ./myisamchk -c -r 数据库表MYI文件的路径(例如:/home/mysql/var/crawlerfeedsky/aaaa.MYI)
  2. 如果还不行,就-f 强制修复
2、采用PhpMyAdmin中的“修复”功能,如果没有开放修改功能,可以用第3种方法。

3、在PhpMyAdmin中执行SQL,用“REPAIR TABLE `table name`;”命令修复。
发表于: 2011-06-27 16:05 | 全文(查看: 47) | 评论(0) | 本文地址 | 收藏 
分类: 小窍门(95)   标签: mysql  新知  

Drupal附件上传支持中文名

对于Drupal附件上传支持中文名,需要修改一个文件 file.inc(includes\file.inc),需要修改的地方如下:

1、使数据库记录的附件文件名支持中文。

注销语句大概在528行(v6.10):$file->filename = file_munge_filename(trim(basename($_FILES['files']['name'][$source]), '.'), $extensions);

修改为:$file->filename = file_munge_filename(trim($_FILES['files']['name'][$source], '.'), $extensions);

2、使服务器文件夹里显示的附件文件名支持中文,大概在572行。

注销:if (!move_uoloaded_file($_FILES['files']['tmp_name'][$source], $file->filepath))

修改为:if(!move_uploaded_file($_FILES['files']['tmp_name'][$source], iconv("UTF-8","gb2312",$file->filepath)))

3、本修改版本drupal6.10,环境linux和windows xmapp下测试通过。
发表于: 2011-06-16 12:19 | 全文(查看: 780) | 评论(0) | 本文地址 | 收藏 
分类: 小窍门(95)   标签: drupal  新知  

运行Cron 失败的解决方法

1、增加 PHP 内存

2、includes\common.inc :
function drupal_cron_run() {
// If not in 'safe mode', increase the maximum execution time:
if (!ini_get('safe_mode')) {
set_time_limit(240); '将240改为2400
}

发表于: 2011-06-03 12:47 | 全文(查看: 193) | 评论(0) | 本文地址 | 收藏 
分类: 小窍门(95)   标签: drupal  新知  

.htaccess 中 %{REQUEST_FILENAME} 及其参数的意思

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

%{REQUEST_FILENAME}  请求的文件名
!-f  不是文件或不存在
!-d  不是目录或不存在
[L] 这是最后一个匹配项,不再往下匹配
[R]相当与redirect
[NC]不区分大小写
发表于: 2011-06-01 23:14 | 全文(查看: 529) | 评论(0) | 本文地址 | 收藏 
分类: 小窍门(95)   标签: htaccess  新知  

CSS实现段落开头自动空两格

根据中国人的书写习惯,一般开头都是要缩进两格的,既美观又大方。

要使段落前面精确空出两个字的距离,就应该使用首行缩进text-indent属性;text-indent可以使得容器内首行缩进一定单位,比如中文段落 一般每段前空两个汉字。在这里我们需要了解一种长度单位em,em是相对长度单位,你设置的字体大小有多大(px),1em就是多大,所以一直能保持空两 格的状态。

找到内容页中的css文件;

找到p标签

p.posttop {margin:10px 0 0 0;padding:3px 0 2px 0;}

在“{}”里加入

text-indent: 2em;line-height:130%;

即可

其中的“2em”是缩进属性值;“130%”是行距离属性值。

拓展:请看CSS代码

p{text-indent:2em; padding:0px; margin:0px;}

这段代码可以控制整个页面的段落缩进,也可以单独控制某个盒子(div)内的段落缩进。

例如写成:

#blogtext p{text-indent:2em; padding:0px; margin:0px;}

那么只对

<div id=blogtext>文章内容</div>

中的段落首行缩进。

上面代码中padding:0px; margin:0px;是可有可无的,作用是定义段落内边框和外边框厚度为0。正常情况下两段落之间会有一个空白的行。代码加入padding:0px; margin:0px;之后两段之间就不会有空行了。

发表于: 2011-04-27 10:47 | 全文(查看: 861) | 评论(0) | 本文地址 | 收藏 
分类: 小窍门(95)   标签: css  新知  

解决Ecshop中重量单位设置的问题

要解决的两个关于重量单位设置的问题:

1.如何把添加商品时的默认重量单位改为克?
2.如何在Ecshop中自定义添加单位? 比如我想添加 升 或者 毫升 或者克 或者千克…
 

如何把添加商品时的默认重量单位改为克?
须修改2个文件:

文件1: .adminincludeslib_goods.php

//修改改文件是为了调换千克和克的位置;

function get_unit_list()

{

return array(

‘1′     => $GLOBALS['_LANG']['unit_kg'],

‘0.001′ => $GLOBALS['_LANG']['unit_g'],

);

}

改为:

function get_unit_list()

{

return array(

‘0.001′     => $GLOBALS['_LANG']['unit_g'],

‘1′ => $GLOBALS['_LANG']['unit_kg'],

);

}

文件2: .admintemplatesgoods_info.htm

//修改该文件是为了设置默认值为克:

<input type=”text” name=”goods_weight” value=”{$goods.goods_weight/$weight_unit}” size=”20″/> <select name=”weight_unit”>{html_options options=$unit_list selected=$weight_unit}//删除下划线的代码

</select>

改为:

<td><input type=”text” name=”goods_weight” value=”{$goods.goods_weight/$weight_unit}” size=”20″ /> <select name=”weight_unit”>{html_options options=$unit_list }</select>

就可以了.

如何在Ecshop中自定义添加单位?
1.修改common.php(也可在后台的公共语言项编辑里),查找到克或千克,改为升或毫升.这样用户看到的就是升或毫升.

2.给自己看的:在目录languageszh-cnadmin 下找出所有的克或千克,并改之!

发表于: 2011-03-17 13:32 | 全文(查看: 1000) | 评论(0) | 本文地址 | 收藏 
分类: 小窍门(95)   标签: ecshop  新知  

JavaScript类封装对联广告+漂浮广告

<script type="text/javascript">
function $(element){
    if(arguments.length>1){
        for(var i=0,elements=[],length=arguments.length;i<length;i++)
            elements.push($(arguments[i]));
        return elements;
    }
    if(typeof element=="string")
        return document.getElementById(element);
    else
        return element;
}
Function.prototype.bind=function(object){
    var method=this;
    return function(){
        method.apply(object,arguments);
    }
}
var Class={
    create:function(){
        return function(){
            this.initialize.apply(this,arguments);
        }
    }
}
Object.extend=function(destination,resource){
    for(var property in resource){
        destination[property]=resource[property];   
    }
    return destination;
}
//对联广告类
var float_ad=Class.create();
float_ad.prototype={
    initialize:function(id,content,top,left,width){
        document.write('<div id='+id+' style="position:absolute;">'+content+'</div>');
        this.id=$(id);
        this.top=top;
        if(!!left){
            this.id.style.left="8px";   
        }else{
            this.id.style.left=(document.documentElement.clientWidth-width-8)+"px";
            window.onresize=function(){
                this.id.style.left=(document.documentElement.clientWidth-width-8)+"px";
            }.bind(this);
        }
        this.id.style.top=top+"px";
       
        this.interId=setInterval(this.scroll.bind(this),20);
    },
    scroll:function(){
        this.stmnStartPoint = parseInt(this.id.style.top, 10);
        this.stmnEndPoint =document.documentElement.scrollTop+ this.top;
        if(navigator.userAgent.indexOf("Chrome")>0){
            this.stmnEndPoint=document.body.scrollTop+this.top;   
        }
        if ( this.stmnStartPoint != this.stmnEndPoint ) {
                this.stmnScrollAmount = Math.ceil( Math.abs( this.stmnEndPoint - this.stmnStartPoint ) / 15 );
                this.id.style.top = parseInt(this.id.style.top, 10) + ( ( this.stmnEndPoint<this.stmnStartPoint ) ? -this.stmnScrollAmount : this.stmnScrollAmount )+"px";
        }
    }
}
//漂浮广告类
var move_ad=Class.create();
move_ad.prototype={
    initialize:function(imgOption,initPosition,delay){
        this.imgOptions=Object.extend({url:"",link:"http://www.dovapour.com.cn/",width:120,height:120},imgOption||{});
        this.adPosition=Object.extend({left:40,top:120},initPosition||{});
        this.delay =delay;
        this.step = 1;
        this.herizonFlag=true;
        this.verticleFlag=true;
        this.id="ad_move_sg";
        var vHtmlString="<div id='"+this.id+"' style='position:absolute; left:"+this.adPosition.left+"px; top:"+this.adPosition.top+"px; width:"+this.imgOptions.width+"px;";
        vHtmlString+=" height:"+this.imgOptions.height+"px; z-index:10;'><a href='"+this.imgOptions.link+"' target='_blank'><img src='"+this.imgOptions.url+"' width="+this.imgOptions.width+" height="+this.imgOptions.height+" style='border:none;' /></a></div>";
        document.write(vHtmlString);
        this.id=$(this.id);
        this.intervalId=setInterval(this.scroll.bind(this),this.delay);
        this.id.onmouseover=this.stop.bind(this);
        this.id.onmouseout=this.start.bind(this);
    },
    scroll:function(){
        var L=T=0;
        var B=document.documentElement.clientHeight-this.id.offsetHeight;
        var R=document.documentElement.clientWidth-this.id.offsetWidth;
        this.id.style.left=this.adPosition.left+document.documentElement.scrollLeft+"px";
        this.id.style.top=this.adPosition.top+document.documentElement.scrollTop+"px";
        this.adPosition.left =this.adPosition.left + this.step*(this.herizonFlag?1:-1);
        if (this.adPosition.left < L) { this.herizonFlag = true; this.adPosition.left = L;}
        if (this.adPosition.left > R){ this.herizonFlag = false; this.adPosition.left = R;}
        this.adPosition.top =this.adPosition.top + this.step*(this.verticleFlag?1:-1);
        if(this.adPosition.top <= T){ this.verticleFlag=true; this.adPosition.top=T;}
        if(this.adPosition.top >= B){ this.verticleFlag=false; this.adPosition.top=B; }
    },
    stop:function(){
        clearInterval(this.intervalId);   
    },
    start:function(){
        this.intervalId=setInterval(this.scroll.bind(this),this.delay);   
    }
}
/*
对联广告调用
第一个参数为ID,第二个参数图片,第三个参数广告距离顶部的距离,
第四个参数表示左右(true代表左,false代表右),第五个参数对联广告的宽度
*/
new float_ad("ad_l","<img src='/article/testImages/newyear_ad_l.gif' />",50,true,64);
new float_ad("ad_r","<img src='/article/testImages/newyear_ad_r.gif' />",50,false,64);

/*
漂浮广告调用
第一个参数中的url代表漂浮广告的URL地址(必选项),width图片的宽度(可选项,默认120),heihgt图片的高度(可选项,默认120)
第二个参数中的代表漂浮广告的初始位置,由参数left和top指定
*/
new move_ad({url:"/article/testImages/newyear_ad_float.jpg",width:150,height:150},{left:40,top:160},30);
</script>

发表于: 2010-10-09 22:51 | 全文(查看: 104) | 评论(0) | 本文地址 | 收藏 
分类: 小窍门(95)   标签: JavaScript  新知  

图片类固定位置广告链接的javascript实现

<SCRIPT FOR=window EVENT=onload LANGUAGE="javascript">
initAd();
</SCRIPT>
<script language="javascript">
function initAd() {
document.all.AdLayer1.style.posTop = -200;
document.all.AdLayer1.style.visibility = 'visible'
document.all.AdLayer2.style.posTop = -200;
document.all.AdLayer2.style.visibility = 'visible'
MoveLayer('AdLayer1','AdLayer2');
}
function MoveLayer(layerName1,layerName2) {
var x = 8;
var y = 160;
var z = x + 884;
var diff = (document.body.scrollTop + y - document.all.AdLayer1.style.posTop)*.40;
var y = document.body.scrollTop + y - diff;
eval("document.all." + layerName1 + ".style.posTop = y");
eval("document.all." + layerName1 + ".style.posRight = z");
eval("document.all." + layerName2 + ".style.posTop = y");
eval("document.all." + layerName2 + ".style.posRight = x");
setTimeout("MoveLayer('AdLayer1','AdLayer2');", 20);
}
</script>
<div id=AdLayer1 style='position:absolute; width:61px; height:59px; z-index:20; visibility:hidden;; right: 10px; top: 100px'>
<a href=".html"><img border="0" src="/images/01.jpg" ></a></div> 
<div id=AdLayer2 style='position:absolute; width:61px; height:59px; z-index:20; visibility:hidden;; right: 10px; top: 100px'>
<a href=".html"><img border="0" src="/images/01.jpg" ></a></div>
发表于: 2010-10-09 21:58 | 全文(查看: 216) | 评论(0) | 本文地址 | 收藏 
分类: 小窍门(95)   标签: javascript  新知  
Page was generated in 31 milliseconds