关于作者

姓名： 性别：男 出生日期:-- 地区:北京 联系电话: QQ:-- 婚否：未婚
用户名：blackjack2
笔名：blackjack
地区： 北京
行业：其他

日历 　年月日

日 一 二 三 四 五 六

快速登录

+ 用户名：
+ 密　码：

在线留言



音乐

访问统计：
文章个数:51
评论个数:17
留言条数:35




Powered by BlogDriver 2.1

BlackJack

　

人的欲望总是无限的 我们要用有限的生命 投入到无限的满足欲望的革命事业中去 欢迎访问BlackJack的博客 http://blackjack2.bokee.com/ 或 http://blackjack2.blogchina.com/

文章

避免表格被撑开变形 用CSS实现的方法
 
文章来源：http://www.webjx.com/htmldata/2006-06-02/1149205091.html
 
　　如何避免表格因为图片尺寸或者过长的英文字符而变形撑开，在CSS加入以下代码就可以防止，同时英文单词也会按单词断行，不是按字母这个。我想说的是这个在CSS2.0是不支持的，但是能解决一些实际问题。

    页面设计不是为了标准检验而设计，还是以用户使用为主，在目前有些WEB标准无法解决的一些问题上，我会采用一些非标准的方法处理，只要主流 BROWSER如IE,Firefox,Netscape,Opera等上能正确显示，我会把通过WEB表准的校验放在次要位置，并且MS已经建议在 CSS3。0中加入这个属性了，也许CSS3。0会支持。WEB标准也是在发展的，也许明天的标准就加入了这个属性，或者出现新的属性来解决。

　　看看这个连接吧

　　http://www.w3.org/TR/2003/CR-css3-text-20030514/#wordbreak-props

常用的CSS代码片段：

<style>
table {
table-layout: fixed;
word-break:break-all;
word-wrap:break-word;
}
div {
word-break:break-all;
word-wrap:break-word;
}
</style>

- 作者： blackjack 2009年01月8日, 星期四 17:38　 回复（1） |　 引用（0） 加入博采

左侧固定宽度右侧自适应宽度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {margin:0; padding:0; list-style:none; }
.wrapper {width: 100%;}
.wrapper div{float:left;}
.left {width:200px; background:#fcc; position:absolute; left:0 ;z-index:1;}
.right {width:100%; background:#ccc; position:absolute; left:0;}
.content {margin-left:200px;background:#ffc;}  
</style>
</head>
<body>
<div class="wrapper">
    <div class="left">左侧固定宽度200px</div>
    <div class="right">
        <div class="content" style="float:none">
            右侧宽度自动适应
        </div>
    </div>
</div>
</body>
</html>

- 作者： blackjack 2009年01月8日, 星期四 16:05　 回复（0） |　 引用（0） 加入博采

td内无内容如何显示边框线 
当td为空时显示td的边线:给table加个border-collapse:collapse;给td加个empty-cells:show;都可以
当td里内容为空时，td的border边框样式将不被执行，于是便出现有的td没有边线的情况，可以通过给空td输出一个
&amp;nbsp;来解决，但是要输出&amp;nbsp;，就得修改程序，还得在程序里判断，。这样做似乎并不是最佳方案，
下面是个相对较好的例子。
下面是test.html源代码：
当td为空时显示td的边线:给table加个border-collapse:collapse;给td加个empty-cells:show;都可以
当td里内容为空时，td的border边框样式将不被执行，于是便出现有的td没有边线的情况，可以通过给空td输出一
个&amp;nbsp;来解决，但是要输出&amp;nbsp;，就得修改程序，还得在程序里判断，。这样做似乎并不是最佳方
案，下面是个相对较好的例子。
<!----------test1------------>
class="test1"
<pre>
.test1{border:1px solid #e1e1e1;<b>border-collapse:collapse;</b>width:60%}
.test1 td{border-bottom:1px solid #e1e1e1; height:28px; padding-left:6px;}
</pre>
<table border="0" cellpadding="0" cellspacing="0" class="test1">
<tr>
<td>class1&nbsp;</td>
<td>这儿有内容</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>这儿有内容</td>
<td></td>
<td></td>
<td></td>
<td>&nbsp;</td>
</tr>
</table>
<br><br>
<!----------test2------------>
class="test2":
<pre>
.test2{border:1px solid black;<b>border-collapse:collapse;</b>width:60%}
.test2 td{border-bottom:1px solid black; height:28px; padding-left:6px;<b>empty-cells:show;</b>}
</pre>
<table border="0" cellpadding="0" cellspacing="0" class="test2">
<tr>
<td>class2&nbsp;</td>
<td>这儿有内容</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>这儿有内容</td>
<td></td>
<td></td>
<td></td>
<td>&nbsp;</td>
</tr>
</table>
<br><br>
<!----------test3------------>
class="test3":普通不加border-collapse:collapse;和empty-cells:show;
<pre>
.test3{border:1px solid #e1e1e1;width:60%}
.test3 td{border-bottom:1px solid #e1e1e1; height:28px; padding-left:6px;}  
</pre>
<table border="0" cellpadding="0" cellspacing="0" class="test3">
<tr>
<td>class3&nbsp;</td>
<td>这儿有内容</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>这儿有内容</td>
<td></td>
<td></td>
<td></td>
<td>&nbsp;</td>
</tr>
</table>
<style>  
.test1{border:1px solid #e1e1e1;border-collapse:collapse;width:60%}
.test1 td{border-bottom:1px solid #e1e1e1; height:28px; padding-left:6px;width:20%}  
.test2{border:1px solid black;border-collapse:collapse;width:60%}
.test2 td{border-bottom:1px solid black; height:28px; padding-left:6px;empty-cells:show;width:20%}  
.test3{border:1px solid #e1e1e1;width:60%}
.test3 td{border-bottom:1px solid #e1e1e1; height:28px; padding-left:6px;width:20%}  
pre{border:1px solid #999; background-color:#FFFFF4;color:#333;padding:10px;margin:10px 0 10px 0px}
pre b{color:blue} 
*{font-family:arial}
</style>


语法：
 
empty-cells : hide | show
 
参数：
 
hide : 　隐藏
show : 　显示
 
说明：
 
设置或检索当表格的单元格无内容时，是否显示该单元格的边框。
只有当表格边框独立（例如当border-collapse属性等于separate时）此属性才起作用。
目前IE5.5尚不支持此属性。(IE5,IE6,Opera,Firefox支持)
对应的脚本特性为emptyCells。
 
示例：
 
table { caption-side: top; width: auto; border-collapse: separate; empty-cells: hide; }
 

- 作者： blackjack 2009年01月8日, 星期四 16:04　 回复（0） |　 引用（0） 加入博采

优质蓝筹
中国远洋：601919。中国最大，世界第二的海洋干散货运输公司，业绩优良，尚有油轮和造船业资产没有注入。
工商银行：601398。世界市值最大的银行，中国银行龙头，收国际金融危机影响较小
中国石化：600028。完整的产油炼油结构链条，大盘蓝筹，具备较强的抗风险能力
中国铝业：601600。中国有色行业龙头，在如今资源稀缺的情况下，该公司已经在世界各地购买储存了大批的有色资源，为其发展奠定了基础
中国平安：601318。中国保险业龙头，业绩优良，成长性优秀。并且正在逐步向海外市场扩张
万科A：000002.地产龙头，业绩优良，超跌严重。
中国船舶：600150.造船行业巨无霸，业绩优良，基本面良好，具有极好的成长性，业务订单已经到了2011年，预计未来3-5年业绩依旧保持高速增长。
招商银行：600036.商业银行龙头，行业扩张迅速，业绩连续增幅

- 作者： blackjack 2008年07月23日, 星期三 11:34　 回复（0） |　 引用（0） 加入博采

读取外部文件\鼠标经过效果

读取外部文件

在第一祯写

_root.createEmptyMovieClip("mc",1);//创建一个元件mc

mc.loadMovie("images/01.jpg");//mc载入图片1.jpg

mc._x = 0;//图片位置 mc._y = 0;//图片位置 ===========================================

鼠标经过效果

创建一个MC在这个MC里创建一个按钮叫biography_btn1,在这个物体的第一祯写下

stop()

biography_btn1.onRollOver=function(){ gotoAndPlay(1) } biography_btn1.onRollOut=function(){ gotoAndPlay(11) }

- 作者： blackjack 2008年04月14日, 星期一 11:20　 回复（0） |　 引用（0） 加入博采

2006德国世界杯赛程表

- 作者： blackjack2 2006年06月7日, 星期三 10:05　 回复（0） |　 引用（0） 加入博采

虽然我们什么都没有 但是我们可以骑着自行车迎着朝阳
虽然我们什么都没有 但是我们可以骑着自行车迎着朝阳；虽然我们什么都有了 但是我们依然可以骑着自行车迎着朝阳

- 作者： blackjack2 2006年05月22日, 星期一 14:56　 回复（1） |　 引用（0） 加入博采

Yes 《Talk》

中文名称：Talk
资源类型：MP3!
发行时间：1994年
专辑歌手：YES
地区：美国
语言：英语
简介：


Yes绝对不仅是一支乐队的称谓，而是一派完整的现代音乐体系。这种夸耀并非仅与Yes将逾30年的历史，30张以上的专辑构成逻辑，更重要的是他们音乐本身的艺术造诣，其坚决的艺术指向，恪守的文化职责，以及自然流动、精益求精的音乐风范。作为与Queen、PinFolyd齐名的三大Arts Rock团体，他们的音乐方向有着清晰的轮廓，用古典音乐的伦理来传达流行的摇滚思维，尝试一种艺术与社会，近代与现代的实验性碰撞。Yes的一句名言这样说："是的，是的，我们在用吉它给柴科夫斯基和勃拉姆斯注册了摇滚商标，我们都有严肃音乐的学习经历……但我们更热爱摇滚乐，我们只是希望通过形式的实验与先锋化使摇滚听起来更加辉煌、壮美、深刻。我们在这方面的音乐尝试里全部发了疯，你可以想象那种感觉：青春、冒险、并且严肃！”


YES乐队绝对不是摇滚乐史上最有名气的乐队，也绝对不是最受欢迎的乐队，但是YES乐队绝对是乐队史上最有贡献的乐队，不论从乐队编制的演奏，还是音乐创作的水准，都可以说YES乐队绝对是一座他人无法超越的巅峰。

　　"YES”乐队是70年代艺术摇滚的领头人物之一，成立于1968年夏天。乐队最早的成员有乔恩·安德森，贝司手克里斯·斯奎尔（Chris Squire；鼓手比尔·布拉福德（Bill Bruford，吉他手皮特·班克斯（Pete Banks，于1947年7月7日出生）以及键盘手托尼·凯（Tony Kaye，1946年1月11日出生）加入，乐队完成组队。他们加入了亚特兰大公司，并于1969年录制了第1张专辑《是》。从专辑中可以看出乐队受基思·埃默森（Keith Emerson）的演奏风格以及"第五维”（Fifth Dimension）乐队的演唱风格的影响很深。在第2张专辑《时间和一个词》（Time and a Word,1970）中，乐队继续了这种风格的发展，特别体现在他们对里奇·黑文斯（Richie Havens）的《没有必须的机会，没有需要的经历》（No opportunity Necessary, No Experience Needed）和斯蒂芬·斯蒂尔斯（STILLS, STEPENEN*）的《每天》（Everydays）这两首歌的处理上。

　

　　不久，班克斯离开了乐队，史蒂夫·豪（Steve Howe，1947年4月8日出生）在"是”中取代了班克斯的位置。他是"明天”（Tomorrow）乐队的吉他手。1971年推出了专辑《是的专辑》（The Yes Album），标志着乐队后期风格的开始。从此，乐队的作品全部由乐队成员自己编写，并且凯开始引进了多种合成器。

　
　　克里·韦克曼（WAKEMAN, RICK*）后来代替了凯，克里·韦克曼是皇家音乐学院正式学员，他的古典键盘风格给乐队1971年的专辑《脆弱》（Fragile）带来了一种突破性的效果。1972年，在精明的经理人布赖恩·莱恩（Brain Lane）引导下，"是”乐队开始尝试一种叙事性的交响乐式的风格，先后于1972年和1974年推出了专辑《靠近边缘》（Close to the Edge）和《从地形海洋来的传说》（Tales from Topographic Oceans）。两张专辑都由艾伦·怀特（Alan White，1949年6月14日出生）出任鼓手。于1972年取代了比尔·布拉福德。虽然安德森的歌词意思变得前后不连贯，两张专辑中也充满了在时间上、音量和音色上前后矛盾的问题，但是这些"缺陷”加在一起却变得很有力量。1973年乐队推出了现场录音专辑《是之歌》（Yes Songs），第2年又出版了专辑《继电器》（Relayer）。当时里克·韦克曼已离开了乐队，开始了他相当成功的个人生涯，瑞士人帕特里克·莫拉斯（Patrick Moraz）代替了韦克曼。

　　1975-1976年间，乐队成员开始了一些个人活动。1977年，他们的专辑《为一个目标奔忙》（Going for the One）出版了，随后莫拉斯由于同乐队在音乐方面不可调和的分歧而离开了，而韦克曼重新加入乐队。他们1977年的专辑表明乐队经过一系列的探索之后，又在一定程度上回到传统的摇滚乐上来了。从专辑中挑出的《神秘故事》（Wonderous Sotrises）录成单曲出版后，于同年成为英国排行榜第7名。

　　乐队1977年 专辑还有一点引人注目的是没有用罗杰·迪安（Roger Dean）设计的封面，前一年开始同乐队关系紧张的制作人埃迪·奥福德（Eddie Offord，）也没有出现。YES乐队的专辑封面从来都是一流的艺术作品，仅仅就这些封面而言就已经值得珍存了。

　　1979年，主唱安德森和韦克曼都离开了乐队，他们的位置由BUGGLES乐队的特雷弗·霍恩（HORN, TREVOR*）和格夫·唐斯（Geff Downes）代替。但是他们1980年出的专辑《戏剧》（Drama）进一步显示了这个新组合的内部矛盾。1980年底，乐队不复存在了。豪和唐斯加入了"亚洲”（ASIA*）乐队，而霍恩把他的全部时间都投入到唱片制作上去了。年底以前，"是”乐队的一张现场录音专辑《是的演出》（Yes Show）问世。

　　直到1981年4月，乐队才对外宣布解散。这期间，"Yes”的成员各自发展。1983年，乐队又重组，特雷弗·霍恩担任主唱/吉他手并负责一部分制作工作。他们录制了一首在排行榜上获得意想不到成功的单曲《孤独之心的主人》（Owner of a Lonely Heart），这首不同于以往艺术摇滚风格的当代硬摇滚的歌曲在1984年1月成为美国榜的冠军。这首歌也促使他们出版了那张摇滚史上最有价值的专辑《90125》。这张取名《90125》的专辑可以说是旷世之作！成为世界上无数乐队的推崇专辑。


　　但乐队却没有抓住这个好时机。一直到1987年，他们才出版新专辑《强力发动机》（The Big Generator），专辑给人的感觉也是一般化。由于在使用乐队名称上的争议，原"是”的4位成员在重组时不能使用"是”这一名称，因此他们只能以"安德森-布拉福德-韦克曼-豪”名义出版专辑。非常幸运的是，他们在1989年出版的这张同名专辑赢得了歌迷的认同，获得了美国榜的第30名、英国榜的第20名，在乐队名称使用权上获得了胜利。因此他们得以在随后的巡回演出时冠以"是音乐之夜”的名称，他们的巡回演出也场场爆满，包括在麦迪逊广场花园的演出。后来出版的专辑《团结》（Union），获英国榜的第7名、美国榜的第15名，90年代出版的《谈话》（TALK）再创佳绩，显示了这支乐队的生命力，而2000年的新专辑《是之屋》也同样保有水准。

　　作为拥有深厚古典音乐素质的YES乐队，以他们天才式的音乐才能为摇滚音乐增添了不可替代的华丽篇章，他们的精湛无比的演奏技术，以及乔恩·安德森天籁一般的嗓音征服了包括明星音乐家在内的无数乐迷，他们繁富华丽的编曲无异于最高等的音乐教程，虽然由于他们同时代的娱乐巨星太多，从而遮蔽了他们的艺术光芒，但是YES乐队的音乐影响之深远，是在很长旧的时期里都不会磨灭的，因为他们是一座无法超越的巅峰。


专辑曲目：
01. Endless Dream
a. silent spring (instrumental)
b. talk
c. endless dream
02. State of Play
03. I Am Waiting
04. The Calling
05. Real Love
06. Walls
07. Where Will You Be


- 作者： blackjack2 2006年05月7日, 星期日 23:06　 回复（2） |　 引用（0） 加入博采

《GUI设计禁忌》一书中提及设计Web项目时尽量参考一下基本原则
《GUI设计禁忌》一书中提及设计Web项目时尽量参考一下基本原则，避免设计禁忌，应该能使Web项目的GUI上一个层次。

基本原则：

1、关注用户及其任务，而不是技术

2、首先考虑功能，然后才是表示

3、从用户的视角看问题，使用用户的词汇进行描述

4、不要向用户暴露实现细节

5、使常用的用户任务简单化，不要让用户解决额外的问题

6、保持一致性，引导用户的使用习惯

7、保持显示惯性，传递信息，而不仅仅是数据

8、设计应满足响应需求

禁忌：

1、同一页面包含重复功能的链接或按钮

2、将复选框用作单选按钮

3、无初始值的多选一设置

4、在非开/关设置中使用复选框

5、用文本框显示只读数据

6、单选按钮之间间隔太大

7、属性标记对齐方式不一致

8、当前无效的控件不充分置灰

9、显示对用户无意义的错误提示

10、不同的类型页面窗口显示相同的标题

11、窗口的标题和调用的命令不一致

12、要求用户输入随机数

13、相似的功能却有不一致的用户操作界面

14、取消按钮无法真正取消操作

15、网站结构反映公司的结构或网站升级的历史

16、返回按钮不能达到预期的目的

17、搜索选项过多，过度复杂

18、使用容易被忽略的隐藏的图片链接

19、需要向下滚动才能看到当前页的重要信息

20、图片按钮对鼠标按下操作没有视觉变化

21、无意义的虚假进度条

22、执行长时间的任务时鼠标指针不显示成忙状态

23、不考虑用户可能的人为的错误输入

24、认为好的UI就是漂亮的UI

25、盲目错误的使用页面模块化设计

- 作者： blackjack2 2006年04月29日, 星期六 13:08　 回复（0） |　 引用（0） 加入博采

一个Web系统的界面设计和开发
早在中国IT业方兴未艾之时，计算机应用系统主要以功能实现为主，几乎没有界面设计这个概念。时至今日，随着计算机和网络的不断普及，社会信息化程度日益加深，用户和市场的不断成熟，人们已经不仅仅满足于“够用”，而是更加强调“好用”“易用”；因此，不论是普通最终用户的个人软件，还是企业应用的大型系统，界面设计在系统构建中都成为了一个非常重要的方面。

       但是，（至少在中国）由于IT业发展滞后、市场还不够成熟等原因，在绝大多数企业中，界面设计在软件系统开发中还没有获得与之重要性相匹配的一席之地，并且在企业运作和协调中也没有形成成熟的模式和解决方案，如何做好界面设计和开发，仍然是大家不断研究探讨的一个问题。

       这篇文章，主要内容是我参加一个面向质检行业的Web系统界面设计和开发工作的过程，包括其间的一些构思和想法；其目的就是希望能和大家一起探讨一下这个问题，希望能供大家参考，起到抛砖引玉的作用。

       另外，我同时承担了系统开发和界面设计工作，所以，虽然这是一篇讨论界面设计的文章，我也尽量把文章限制在界面设计范围内，但也有可能包含一些开发和系统设计的内容，请大家辨析清楚，欢迎指正。

1.工作流程

下图，是整个开发过程中与界面设计相关的主要流程工作。


screen.width-500)this.width=screen.width-500; border=0>此主题相关图片如下：
按此在新窗口浏览图片screen.width-500)this.width=screen.width-500; border=0>

从最初需求分析开始，我就加入项目，自始自终参加整个开发过程。

在需求分析阶段，参与了对客户的访问和调研；
在概要设计阶段，参与了部分系统设计分析工作；
在详细设计阶段，完成了整个系统界面设计和Demo制作，并提交用户反馈；
在代码开发阶段，参与了系统表现层的设计开发。

2.需求分析

在需求分析阶段，主要针对界面交互相关问题，对用户进行若干调研。

主要包括以下内容

·受众用户群调查
·系统使用环境调查
·受众用户使用习惯调查
·用户对旧版本软件使用情况调查

这一阶段，由于成本原因，我并没有直接访问客户进行调查。工作主要是提出某些具体问题，由需求调研人员，以问卷或口头问答方式，对客户进行调研。另外，公司经验丰富的客服人员和市场人员，也是非常重要的需求来源之一。

本系统的客户群主要为国家省市下属质检单位，最终受众年龄从年轻到较高龄都有。对于普通国家机关人员，一般对计算机系统和网络不够熟悉，计算机环境一般，甚至比较差，少有配置优良的环境。在这种环境下，用户对计算机使用一般没有使用倾向，大多更适应手工操作。对本系统的前代使用，最主要意见是使用困难，不方便。

还有其他具体调查反馈，如用户基本不使用鼠标右键，年龄较大的用户难以看清密集的较小文字等等。


3.界面设计原则

在概要设计阶段，根据需求阶段的调研结果，我整理了系统界面设计的基本原则。因为在代码开发阶段，很多时候界面的具体制作是由开发人员直接写代码，因此必须确定一定的原则和规范，以保证系统界面的统一。

一般适用原则

·简单明了原则：用户的操作要尽可能以最直接最形象最易于理解的方式呈现在用户面前。对操作接口，直接点击高于右键操作，文字表示高于图标示意，尽可能的符合用户对类似系统的识别习惯。

·方便使用原则：符合用户习惯为方便使用的第一原则。其它还包括，实现目标功能的最少操作数原则，鼠标最短距离移动原则等。

·用户导向原则：为了方便用户尽快熟悉系统，简化操作，应该尽可能的提供向导性质的操作流程。

·实时帮助原则：用户需要能随时响应问题的用户帮助。

·提供高级自定义功能：为熟悉计算机及软件系统的高级用户设置自定义功能，可以对已经确定的常规操作以及系统的方方面面进行符合自身习惯的自定义设置。包括常规操作、界面排版、界面样式等种种自定义。

·界面色彩要求：计算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种差别作出恰当的色彩搭配。对于需用户长时间使用的系统，应当使用户在较长时间使用后不至于过于感到视觉疲劳为宜。例如轻松的淡彩为主配色，灰色系为主配色等等。切忌色彩过多，花哨艳丽，严重妨碍用户视觉交互。

·界面平面版式要求：系统样式排版整齐划一，尽可能划分不同的功能区域于固定位置，方便用户导航使用；排版不宜过于密集，避免产生疲劳感。

B/S构架适用原则

·页面最小：由于Web的网络特性，尽可能减小单页面加载量，降低图片文件大小和数量，加快加载速度，方便用户体验。

·屏幕适应：Web界面需要适应不同用户屏幕大小。

·浏览器兼容：需要适应不同浏览器浏览效果，虽然目前可不考虑不同浏览器差别，但仍需考虑IE浏览器版本差异带来的客户端不同效果。

·最少垂直滚动：尽可能减少垂直方向滚动，尽可能不超过两屏。

·禁止水平滚动：由于将导致非常恶劣的客户体验，尽可能禁止浏览器水平滚动操作。

·避免隐藏（右键）操作：浏览器的右键操作不符合用户体验习惯，尽可能避免。

本系统应用原则

·瘦客户端要求：由于客户应用环境配置大多较低，除服务器可单独配置较灵活外，应该保证瘦客户端，使用户容易使用。例如尽量不要使用复杂的JS脚本和HTC组件，不要在客户端使用IE整合XML/XSLT等等。

·大数据量表格的水平扩展要求：本系统中存在大数据量的列表，需要较大的交互界面支持，为避免水平滚动，应尽可能获取大的屏幕水平空间。

·桌面面板导航简化操作：为了实现方便简捷的用户操作，应该保证用户绝大多数操作可通过首页桌面面板的导航来实现。

·用户自适应定义：提供较多的可订制功能，尤其对桌面面板提供强大的定制功能；使用户能够将最常用的功能定义到桌面面板，每次登录即可直接使用，简化用户操作。

·用户常用操作记录定义：对某些需定义操作的功能如查询、搜索等，提供系统自动记忆和客户定制功能，系统可自动记忆用户前1~3次操作，或者用户可自定义操作记录，方便以后使用。

·大数据量表格的水平扩展要求：本系统中存在大数据量的列表，需要较大的交互界面支持，为避免水平滚动，应尽可能获取大的屏幕水平空间。

4.系统分析

在概要设计过程中，界面设计人员需要浏览需求分析报告，了解用户的工作流程，和整个系统功能，再根据这些原始需求功能，归纳整理分析，并针对用户交互设计需要，提出意见，参与系统设计。

其中包括对原始功能的分类归纳，提出系统交互需要的新功能，对用户功能实现的优先级进行定义等等。

例如，提出用户自定义快捷面板功能，常用操作自动记录功能等，需要在概要设计时尽早提出，以方便作好系统规划。

另外，需要对整个系统中的常见功能有比较清晰的了解，归纳整个系统界面交互中常见的交互形式，例如在本系统中就包括列表、查询、搜索、填写表单、项目分解、项目选择、审批、报告等等；只有清晰的了解整个系统需求，才能较好的把握整个界面设计的统一性。当然，这也和界面设计人员的经验有很大关系。

4.主界面设计

设计主界面，确定系统基本风格，是概要设计中的工作之一。首页主界面的主要实现功能是导航，它要达到的目的，是尽可能使用户仅通过首页面板就可以完成所有常规任务。

screen.width-500)this.width=screen.width-500; border=0>

该主界面包含以下部分

用户信息区域 显示当前用户信息

screen.width-500)this.width=screen.width-500; border=0>


用户导航区域 用户页面导航，收藏功能可以将当前功能页面收藏到快捷功能面板

screen.width-500)this.width=screen.width-500; border=0>


用户导航功能树 用户页面导航，收藏功能可以将当前功能页面收藏到快捷功能面板

screen.width-500)this.width=screen.width-500; border=0>


功能树隐藏 可水平扩展页面空间

screen.width-500)this.width=screen.width-500; border=0>   screen.width-500)this.width=screen.width-500; border=0>


桌面面板用户帮助导航 用户登录时可根据用户类型，自动加载相关使用帮助或导航。

screen.width-500)this.width=screen.width-500; border=0>


主任务通知区域 通知用户系统业务流程中的待办事宜；通知用户办公系统相关信息。

screen.width-500)this.width=screen.width-500; border=0>


用户快捷面板 为了能方便快捷的访问系统功能，避免每次访问树形菜单较深级次的繁琐操作，用户可将通过导航栏中的收藏按钮，将当前页面收藏到该面板中；该面板出现在所有业务页面，用户可以随时访问自己定义的功能页面。该导航在首页以面板形式出现，在其他页面以下拉菜单形式出现。

screen.width-500)this.width=screen.width-500; border=0>


用户自定义功能区域 用户可将相关查询搜索等功能定义到首页面板，例如：最新完成报告察看、报告搜索、检验流程察看等等

screen.width-500)this.width=screen.width-500; border=0>

5.典型界面

以下是系统中几个比较典型的界面模型。

screen.width-500)this.width=screen.width-500; border=1>screen.width-500)this.width=screen.width-500; border=1>screen.width-500)this.width=screen.width-500; border=1>screen.width-500)this.width=screen.width-500; border=1>

在整个系统界面的设计过程中，需要注意整个系统的统一，设计风格要一致，界面中的交互元素，从色彩、样式到排版方式、具体位置都要具备延续性，这样才能使用户尽快习惯整个系统操作。

6.典型交互模式

界面交互中，根据功能不同，有不同的交互方式。应该尽量提取抽象，尽可能减少交互模式的种类，或者把交互方式尽可能设计的类似，以方便用户快速熟悉系统。

下面列举3个系统中比较典型的交互模式，供大家参考。


单项选择

screen.width-500)this.width=screen.width-500; border=1>


多项选择

screen.width-500)this.width=screen.width-500; border=1>


项目分解（GIF动画 4桢）

screen.width-500)this.width=screen.width-500; border=1>

7.Demo开发

Demo是详细设计阶段的重要成果之一，在对系统进行详细的分析设计之后，开发出界面Demo原型，主要作用是提供给合作客户，在基本功能、系统组成和易用性上进行测试。

本系统的Demo主要包括界面的设计制作，和部分客户端表现层脚本的开发。为了在后面的实际业务开发中尽可能获得重用，Demo的制作在页面规范、CSS样式定义和JS脚本编写方面都严格遵循了系统开发规范，并在以后的代码编写工作中严格执行。

本系统整个Demo包括大约50个页面，耗时月3周。

在后续的开发过程中，仍然要严格控制整个开发过程，保证整个系统界面的统一，并随时维护更新系统界面的设计。

8.结语

文章太长了……需要对以前很多东西进行回顾，实在很困难。很多细节，包括很多设计、技术上的东西，都已经记忆不清了，文章也显得有些紊乱。

因此，如果大家有什么疑问，或有意见、指正，请提出或来信与我交流。

- 作者： blackjack2 2006年04月14日, 星期五 11:16　 回复（0） |　 引用（0） 加入博采