自由的家园 @ 自由的家 # 自由的 % 自由 & 自 : ㊣设计与无计

GOOLGE 的　网络视频广告

Thu, 20 Mar 2008 02:23:08 GMT

很強 Nokia的概念手机设计Morph

Sat, 01 Mar 2008 04:22:20 GMT

Nokia和Cambridge大学联合展示了一系列叫做Morph的手机概念设计。其展示了未来采用纳米技术和柔性材料的智能手机将具有柔软灵活和可塑等特性，即人们可以随意改变手机的形状样式，同时也具有透明和自我清洁等特性。 Morph采用了显示设备操控设备和通讯模块分离的设计，即那个小圆环为通讯模块，而可以自由弯曲，折叠的显示面板则根据改变后的形状对应不同的功能样式。即弯曲成回圆环后则可以像手表一样戴在后上，而也可以摊平来播放音乐，收发短信等等，而折叠起来后则变成了像普通智能手机一样的拨号面板样式。

纳米级别下的材料能够表现出许多新的特性，其应用有相当非凡和深远的意义。目前世界上最精确的纳米定位和测量设备能够达到10纳米的精度，有效的测量范围为25×25x5mm立方体。而从2002年起，我所在的学校德国TU-Ilmenau正在研发的纳米定位和测量机床支持最小到1.24-0.1的纳米精度，测量有效范围达到350×350x5-50mm，此课题预计2009年结束。届时下面这句便成为继制造MP3音乐格式之后，另一句将Ilmenau记入史则的话：”Der Weltstand auf dem Gebiet der Nanopositionier- und Nanomesstechnik wird von Ilmenau bestimmt.”

双层果盘

Fri, 07 Sep 2007 15:52:00 GMT

转于：　疯狂的设计

双层果盘，一层放花生，栗子，开心果，瓜子之类，另一层可放吃剩的壳，丹麦设计师 Claus Jensen 和 Henrik Holbaek 设计，evasolo 出品：

www网页调色板收集

Thu, 21 Jun 2007 04:28:01 GMT

	color palette creator 通过基本色调生成10种不同灰度的相同色，并且能生成png文件。 visit
	4096 Color Wheel Version 2.1 非常漂亮的自然色抓取工具，用鼠标点取颜色，非常方便。 visit
	technicolor 用鼠标拖动滑杆，再根据基色生成系统推荐的色调，最棒的是还能根据你选择的颜色生成标准的css文件。 visit
	color scheme generator 2 这也许是至今为止最专业的调色板了。不但能根据选择的基色生成相关的配色方案，还有根据颜色的饱和度，明亮度等等只有在photoshop里看见的调节功能，系统还提供推荐方案，有专门为色盲和色弱者推荐的颜色方案。 visit 教程
	colr.org 从网站Url就能看出这也是一个专业的color site。color.org最酷的就是应用了tag，你可以输入forest(森林)这个词，系统自动根据你给出的词生成相关的颜色方案，输入love后我得到的大多是粉红基色调，很准确吧！系统有11000多种颜色tag和20000种颜色方案、7000多个调色板。当然，这个tag。。这个tag不支持中文的... visit
	color blender 这个也是一个很有特色的调色板。输入两种截然不同的颜色，系统根据这两种颜色生成渐变色带。 visit
	color schemer v2 这个是color scheme generator 2的另一个版本 visit
	visibone color lab 这是第一个根据网页安全色制作的调色板，使用简单，鼠标不停的点，直到碰上让你感觉满意的效果。 visit
	RGB color charts 基于RGB原理的，不过系统生成的颜色很舒服。 visit
	full screen uppicker 这是一个基于浏览器的颜色拾取器，想必下，这种工具还是使用客户端的程序比较方便些。 visit
	colormixers 一边拉滑杆，一边看颜色的变化，相当方便。 visit

color palette creator
通过基本色调生成10种不同灰度的相同色，并且能生成png文件。
http://slayeroffice.com/tools/color_palette/

4096 Color Wheel Version 2.1
非常漂亮的自然色抓取工具，用鼠标点取颜色，非常方便。
http://www.ficml.org/jemimap/style/color/wheel.html

technicolor
用鼠标拖动滑杆，再根据基色生成系统推荐的色调，最棒的是还能根据你选择的颜色生成标准的css文件。
http://www.themaninblue.com/experiment/Technicolor/

color scheme generator 2
这也许是至今为止最专业的调色板了。不但能根据选择的基色生成相关的配色方案，还有根据颜色的饱和度，明亮度等等只有在photoshop里看见的调节功能，系统还提供推荐方案，有专门为色盲和色弱者推荐的颜色方案。
http://wellstyled.com/tools/colorscheme/index-en.html

colr.org
从网站Url就能看出这也是一个专业的color site。color.org最酷的就是应用了tag，你可以输入forest(森林)这个词，系统自动根据你给出的词生成相关的颜色方案，输入love后我得到的大多是粉红基色调，很准确吧！系统有11000多种颜色tag和20000种颜色方案、7000多个调色板。当然，这个tag。。这个tag不支持中文的...
http://colr.org/

color blender
这个也是一个很有特色的调色板。输入两种截然不同的颜色，系统根据这两种颜色生成渐变色带。
http://www.meyerweb.com/eric/tools/color-blend/

color schemer v2
这个是color scheme generator 2的另一个版本
http://www.colorschemer.com/online.html

visibone color lab
这是第一个根据网页安全色制作的调色板，使用简单，鼠标不停的点，直到碰上让你感觉满意的效果。
http://www.visibone.com/colorlab/

RGB color charts
基于RGB原理的，不过系统生成的颜色很舒服。
http://lodestone.org/people/maria/design/colors.html

full screen picker
这是一个基于浏览器的颜色拾取器，想必下，这种工具还是使用客户端的程序比较方便些。
http://milov.nl/iambald/24.html

colormixers
一边拉滑杆，一边看颜色的变化，相当方便。
http://colormixers.com/mixers/cmr/

以下也是一些color tools的相关链接：
http://www.colormatch.dk/
http://slayeroffice.com/tools/color_palette/
http://kohaistyle.com/scripts/quickcolor
http://www.easyrgb.com/harmonies.php
http://www.stcsig.org/usability/topics/colorblind.html
http://color.twysted.net
http://www.coolhomepages.com/cda/color
http://www.masternewmedia.org/2003/04/30/

http://dev.sessions.edu/ilu/ilu_1.html http://www.technetguru.com/design
http://www.mundidesign.com/webct
http://graphicdesign.about.com/library/color/blweb2.htm
http://www.pourpre.com/chromograf/en/
http://www.webwhirlers.com/colors/wizard.asp
http://www.colorcoordinator.com/colorCoordinator.php

当前最热门的十种颜色：
Moroccan blue :#081b55
Glazed ginger:#da4912
American beauty:#d31112
Ruby wine:#780e1a
Atmosphere:#c4a47b
Burnt olive:#565d10
Gloxinia:#530752
Rattan:#ffdc28
Moss:#a9a40c
Burnt orange:#fe690d

大飞机的驾驶舱内，四手四脚四眼是否也太少了!!!

Mon, 28 May 2007 08:33:25 GMT

转自Taobao.com UED Team

波音系列：

707：

727：

737：

747：

757：

767：

777：

欧洲客机：

A380：

协和：

军用运输机：

美C130：

再来两张俄罗斯的，对比一下：

An22：

An225：

TU160的坐舱：

PocketMod-自己定制口袋记事本

Tue, 17 Oct 2006 03:59:19 GMT

Martha 转

老外就是喜欢把一些很小的东西弄的显得很正式的样子，就算薄薄的一页A4纸，也可以弄出一个gtd工具来，这就是PocketMod。简单的说，就是把一张纸分成八份，经过简单的折叠之后做成一个八页的小本子。
　　通过Create a PocketMod这个链接，可以打开一个Flash，在这个Flash你可以选择这八页上的内容，比如说日历、代办事项，甚至还可以做出Sudoku游戏。然后打印出来，就可以做成一个小本子了。
　　我倒是打印了几个，觉得没什么特别的地方。只是为了老外这种精神所打动，这么小的一个东西，认真做一个网站，或许真的会对很多人有用不是么？上次falcon说，好像国内还真没有什么好的在线杀人站点

Create a PocketMod

version 0.4 beta

download offline version
(Win) (Mac)

Download the NEW
PDF to PocketMod
Converter!

Got a question?

看看,MICROSOFT的FLASH

Mon, 09 Oct 2006 13:06:32 GMT

Flash 在網上應用，十分實在也有用。而且也有開放源碼的 OsFlash，所以不是限定性。效率高、安全性高、普遍性高。下面是微軟用來介紹產品的網頁，還不錯喔。同時可看 Flash 真的不錯用，大家快來學啊........

点击进入:

http://www.microsoft.com/about/brandcampaigns/innovation/yourpotential/main.html?msr-0

15000个图层的Photoshop作品 ps 狂人一个

Wed, 05 Apr 2006 13:31:22 GMT

ps 狂人一个

http://www.bertmonroy.com/

Damen
This is my latest and most ambitious digital painting of a Chicago scene unveiled at Photoshop World in Miami on March 22, 2006.
It is a panorama of the Damen Station on the Blue Line of the Chicago Transit Authority.
Adobe Illustrator was used for generating the majority of the basic shapes as well as all the buildings in the Chicago skyline.
The rest was created in Photoshop.
• The image size is 40 inches by 120 inches.
• The flattened file weighs in at 1.7 Gigabytes.
• It took eleven months (close to 2,000 hours) to create.
• The painting is comprised of close to fifty individual Photoshop files.
• Taking a cumulative total of all the files, the overall image contains over 15,000 layers.
• Over 500 alpha channels were used for various effects.
• Over 250,000 paths make up the multitude of shapes throughout the scene.

Carloe 新作 "Another Time"

Tue, 04 Apr 2006 12:26:23 GMT

「Another Time」
http://carloe.net/cn/time/

interactive movie
2006.02.01-02.05 京都精华大学毕业制作展（京都市美术馆）
研究生毕业作品。运用Flash影像,表达了我对时间的一些想法。
毕业展览时使用触摸屏发表,手指按下去的地方会留下指纹。
(Many thanks to Hideki Eguchi,Atsushi Okada,Steven Sundstrom )

谈论“沟通—自六十年代起的英国平面设计展”参展作品选_设计_东方视觉iONLY.com.cn

Mon, 06 Feb 2006 02:20:44 GMT

“沟通—自六十年代起的英国平面设计展”参展作品选

英国大使馆文化教育处在2003年成功举办了“新居家时代”（室内设计展）和“设计盛宴”（工业设计展）后，2005年又将带来另一重要的平面设计展览－沟通(Communicate)，一个集自六十年代以来英国独立平面设计代表作品的展览。

　　“沟通”是第一个探索英国平面设计最新发展状况的重要展览，它代表了20世纪60年代以来英国平面设计的最高水平。展览将展示600多件崇尚独立精神的英国平面设计师的作品，包括七个部分组成：出版、标识、艺术、音乐、网页、社会现实和设计师原创。

　　此次展览将展示一个令人激动的、多层面的英国平面设计，同时追溯和阐述平面设计在英国的发展，并聚焦于较小的独立工作室及团队过去四十年里值得称赞的极富于创意、革新和高度关注的设计作品。展览中的作品不但具有艺术原创和审美欣赏价值，而且它们已在实际的商业文化运用中广受大众的欢迎。

　　展览汇聚了超过100位英国平面设计师的作品，其中不少是曾经影响英国平面设计领域发展的著名设计师。展览作品不但以平面海报的形式展出，在网页和音乐等板块的展览还将以多媒体互动的方式进行展示，让观众能更深切的体会平面设计的文化渗透力，并了解“平面设计”的多领域创意。

苹果公司推出基于 Intel 芯片的笔记本电脑 MacBook Pro

Fri, 20 Jan 2006 01:43:30 GMT

http://www.apple.com/macbookpro/intelcoreduo.html

美国工业设计(IDEA)获奖作品

Sun, 15 Jan 2006 14:22:13 GMT

常用的一些javascript小技巧系列二

Mon, 26 Dec 2005 12:54:46 GMT

//不缓存

//正则匹配

匹配中文字符的正则表达式： [\u4e00-\u9fa5]
匹配双字节字符(包括汉字在内)：[^\x00-\xff]
匹配空行的正则表达式：\n[\s| ]*\r
匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/
匹配首尾空格的正则表达式：(^\s*)|(\s*$)（像vbscript那样的trim函数）
匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
匹配网址URL的正则表达式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?

以下是例子：
利用正则表达式限制网页表单里的文本框输入内容：

//消除图像工具栏

[/html]
<IMG SRC="mypicture.jpg" HEIGHT="100px" WIDTH="100px" GALLERYIMG="false">
or
<head>
<meta http-equiv="imagetoolbar" content="no">
</head>
[/html]

//取得控件得绝对位置(1)

//获得控件的绝对位置(2)

oRect = obj.getBoundingClientRect();
oRect.left
oRect.

//打印分页

//设置打印

//自带的打印预览

WebBrowser.ExecWB(1,1) 打开
Web.ExecWB(2,1) 关闭现在所有的IE窗口，并打开一个新窗口
Web.ExecWB(4,1) 保存网页
Web.ExecWB(6,1) 打印
Web.ExecWB(7,1) 打印预览
Web.ExecWB(8,1) 打印页面设置
Web.ExecWB(10,1) 查看页面属性
Web.ExecWB(15,1) 好像是撤销，有待确认
Web.ExecWB(17,1) 全选
Web.ExecWB(22,1) 刷新
Web.ExecWB(45,1) 关闭窗体无提示
<style media=print>
.Noprint{display:none;}
.PageNext{page-break-after: always;}
</style>
<object  id="WebBrowser"  width=0  height=0  classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2">
</object>

<center class="Noprint" >
<input type=button value=打印 onclick=document.all.WebBrowser.ExecWB(6,1)>
<input type=button value=直接打印 onclick=document.all.WebBrowser.ExecWB(6,6)>
<input type=button value=页面设置 onclick=document.all.WebBrowser.ExecWB(8,1)>
</p>
<p> <input type=button value=打印预览 onclick=document.all.WebBrowser.ExecWB(7,1)>
</center>

//去掉打印时的页眉页脚

//无模式的提示框

function modelessAlert(Msg)
{
window.showModelessDialog("javascript:alert(\""+escape(Msg)+"\");window.close();","","status:no;resizable:no;help:no;dialogHeight:height:30px;dialogHeight:40px;");
}

//下载文件

//检验连接是否有效

//检查网页是否存在

//禁止FSO

1.注销组件
regsvr32 /u scrrun.dll
2.修改PROGID
HKEY_CLASSES_ROOT\Scripting.FileSystemObject
Scripting.FileSystemObject
3.对于使用object的用户，修改HKEY_CLASSES_ROOT\Scripting.

常用的一些javascript小技巧系列一

Mon, 26 Dec 2005 12:40:09 GMT

常用的一些javascript小技巧

事件源对象

event.srcElement.tagName
event.srcElement.type

捕获释放

event.srcElement.setCapture();
event.srcElement.releaseCapture();

事件按键

event.keyCode
event.shiftKey
event.altKey
event.ctrlKey

事件返回值

event.returnValue

鼠标位置

event.x
event.y

窗体活动元素

document.activeElement

绑定事件

document.captureEvents(Event.KEYDOWN);

访问窗体元素

document.all("txt").focus();
document.all("txt").select();

窗体命令

document.execCommand

窗体COOKIE

document.cookie

菜单事件

document.oncontextmenu

创建元素

document.createElement("SPAN");

根据鼠标获得元素：

document.elementFromPoint(event.x,event.y).tagName=="TD
document.elementFromPoint(event.x,event.y).appendChild(ms)

窗体图片

document.images[索引]

窗体事件绑定

document.onmousedown=scrollwindow;

元素

document.窗体.elements[索引]

对象绑定事件

插件数目

navigator.plugins

取变量类型

typeof($js_libpath) == "undefined"

下拉框

下拉框.options[索引]
下拉框.options.length

查找对象

document.getElementsByName("r1");
document.getElementById(id);

定时

UNCODE编码

escape() ,unescape

父对象

obj.parentElement(dhtml)
obj.parentNode(dom)

交换表的行

TableID.moveRow(2,1)

替换CSS

document.all.csss.href = "a.css";

并排显示

display:inline

隐藏焦点

hidefocus=true

根据宽度换行

style="word-break:break-all"

自动刷新

简单邮件

快速转到位置

obj.scrollIntoView(true)

锚

<a name="first">
<a href="#first">anchors</a>

网页传递参数

location.search();

可编辑

obj.contenteditable=true

执行菜单命令

obj.execCommand

双字节字符

/[^\x00-\xff]/

汉字

/[\u4e00-\u9fa5]/

让英文字符串超出表格宽度自动换行

word-wrap: break-word; word-break: break-all;

透明背景

获得style内容

obj.style.cssText

HTML标签

document.documentElement.innerHTML

第一个style标签

document.styleSheets[0]

style标签里的第一个样式

document.styleSheets[0].rules[0]

防止点击空链接时，页面往往重置到页首端。

上一网页源

asp:
request.servervariables("HTTP_REFERER")
javascript:
document.referrer

释放内存

CollectGarbage();

禁止右键

document.oncontextmenu = function() { return false;}

禁止保存

禁止选取

禁止粘贴

地址栏图标

查看源码

关闭输入法

自动全选

ENTER键可以让光标移到下一个输入框

文本框的默认值

title换行

obj.title = "123&#13sdfs&#32"

获得时间所代表的微秒

var n1 = new Date("2004-10-10".replace(/-/g, "\/")).getTime()

窗口是否关闭

win.closed

checkbox扁平

获取选中内容

document.selection.createRange().duplicate().text

自动完成功能

<input type=text autocomplete=on>打开该功能
<input type=text autocomplete=off>关闭该功能

窗口最大化

无关闭按钮IE

window.open("aa.htm", "meizz", "fullscreen=7");

统一编码/解码

alert(decodeURIComponent(encodeURIComponent("http://你好.com?as= hehe")))
encodeURIComponent对":"、"/"、";" 和 "?"也编码

表格行指示

//各种尺寸

s  +=  "\r\n网页可见区域宽："+  document.body.clientWidth;
s  +=  "\r\n网页可见区域高："+  document.body.clientHeight;
s  +=  "\r\n网页可见区域高："+  document.body.offsetWeight  +"  (包括边线的宽)";
s  +=  "\r\n网页可见区域高："+  document.body.offsetHeight  +"  (包括边线的宽)";
s  +=  "\r\n网页正文全文宽："+  document.body.scrollWidth;
s  +=  "\r\n网页正文全文高："+  document.body.scrollHeight;
s  +=  "\r\n网页被卷去的高："+  document.body.scrollTop;
s  +=  "\r\n网页被卷去的左："+  document.body.scrollLeft;
s  +=  "\r\n网页正文部分上："+  window.screenTop;
s  +=  "\r\n网页正文部分左："+  window.screenLeft;
s  +=  "\r\n屏幕分辨率的高："+  window.screen.height;
s  +=  "\r\n屏幕分辨率的宽："+  window.screen.width;
s  +=  "\r\n屏幕可用工作区高度："+  window.screen.availHeight;
s  +=  "\r\n屏幕可用工作区宽度："+  window.screen.availWidth;

界面设计具体服务内容

Thu, 01 Dec 2005 09:49:37 GMT

软件人机界面的形式与标准

命令语言界面设计
1 命令语言界面概述
2 命令语言的结构
3 自然语言
菜单界面设计
1 菜单界面概述
2 菜单界面的语义组织
3 菜单界面的式样
数据输入界面设计
1 交互输入的原则和方法
2 填表输入界面设计
直接操纵和WIMP界面设计
2 直接操纵界面的特点
3 图标
4 窗口
交互输入输出界面设备
1 交互输入界面设备
2 交互输出界面设备
响应时间和显示速率
帮助和出错界面设计
1 出错处理分析
2 帮助处理系统的设计
3 出错处理的设计

软件人机界面设计

最小化
系统菜单
苹果菜单
自定义工具栏
Finder
字体
搜索
菜单设计
运行过程显示
滚动条
按钮设计
游戏软件的人机界面设计
工业自动化控制软件的人机界面设计
iFix人机界面操作系统-HMI
SIEMENS人机界面操作系统-HMI
移动工具的人机界面设计
手机界面
PDA界面设计

图标设计

硬件界面中的图标设计
软件界面中的图标设计
1 软件图标的分类
2 图标的设计
网页界面中的图标设计

色彩设计

色彩基础
颜色的产生
色彩的属性
色彩调和与色彩搭配
色调
配色
色调感觉
心理感受
色彩的联想
计算机色彩
硬件界面的色彩设计
软件设计的色彩搭配
软件色彩设计
网页色彩设计

人机界面设计测试

人机界面设计测试的意义
设计准则
人机界面的测试
界面设计测试
1 界面设计测试指标
2 界面设计测试形式
3 设计测试方法
硬件人机界面设计测试
1 简单测试法
2 名次记分法
3 分功能测试法
4 评分法
5 意象尺度法
软件人机界面设计可用性测试
1 观察法
2 原型测试方法
3 咨询法
4 座谈
5 实验法
6 条目测试法

显示界面设计

数量型显示界面设计
性状型显示界面设计
警报与信号显示界面设计
再现型显示界面设计
字母设计
符号设计
指针设计
控制界面设计
编码设计
显控协调性设计
集中控制中的显控界面设计
视野与控制区
人机系统及其界面设计

硬件人机界面设计

硬件界面设计
硬件人机界面设计的人文关怀
1 "座"的界面设计
2 "手"的界面设计
3 接口设计
4 为弱幼病残的设计

多通道用户界面设计

眼动跟踪设计
姿势识别设计
三维输入设计
语音识别设计
表情识别设计
自然语言理解设计
手写识别设计

Internet网页界面设计

基于信息的网络界面设计
网页的界面设计
虚拟展示

界面设计与测试规则

Thu, 01 Dec 2005 09:43:56 GMT

界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。同时界面如同人的面孔，具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉，相反由于界面设计的失败，让用户有挫败感，再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。目前界面的设计引起软件设计人员的重视的程度还远远不够，直到最近网页制作的兴起，才受到专家的青睐。而且设计良好的界面由于需要具有艺术美的天赋而遭拒绝。

目前流行的界面风格有三种方式：多窗体、单窗体以及资源管理器风格，无论那种风格，以下规则是应该被重视的。

1：易用性：
按钮名称应该易懂，用词准确，屏弃没楞两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。

易用性细则：
1):完成相同或相近功能的按钮用Frame框起来，常用按钮要支持快捷方式。
2):完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。
3):按功能将界面划分局域块，用Frame框括起来,并要有功能说明或标题。
4):界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能。
5):界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。
6):同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。
7):分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab
8):默认按钮要支持Enter及选操作，即按Enter后自动执行默认按钮对应操作。
9):可写控件检测到非法输入后应给出说明并能自动获得焦点。
10):Tab键的顺序与控件排列顺序要一直，目前流行总体从上到下，同时行间从左到右的方式。
11):复选框和选项框按选择几率的高底而先后排列。
12):复选框和选项框要有默认选项，并支持Tab选择。
13):选项数相同时多用选项框而不用下拉列表框。
14):界面空间较小时使用下拉框而不用选项框。
15):选项数叫少时使用选项框，相反使用下拉列表框。
16):专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。

2：规范性：
通常界面设计都按Windows界面的规范来设计，即包含“菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单”的标准格式，可以说：界面遵循规范化的程度越高，则易用性相应的就越好。小型软件一般不提供工具厢。

规范性细则：
1):常用菜单要有命令快捷方式。
2):完成相同或相近功能的菜单用横线隔开放在同一位置。
3):菜单前的图标能直观的代表要完成的操作。
4):菜单深度一般要求最多控制在三层以内。
5):工具栏要求可以根据用户的要求自己选择定制。
6):相同或相近功能的工具栏放在一起。
7):工具栏中的每一个按钮要有及时提示信息。
8):一条工具栏的长度最长不能超出屏幕宽度。
9): 工具栏的图标能直观的代表要完成的操作。
10):系统常用的工具栏设置默认放置位置。
11):工具栏太多时可以考虑使用工具厢。
12):工具厢要具有可增减性，由用户自己根据需求定制。
13):工具厢的默认总宽度不要超过屏幕宽度的1/5。
14): 状态条要能显示用户切实需要的信息，常用的有：目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等，如果某一操作需要的时间较长，还应该显示进度条和进程提示。
15)：滚动条的长度要根据显示信息的长度或宽度能及时变换，以利于用户了解显示信息的位置和百分比。
16)：状态条的高度以放置五好字为宜，滚动条的宽度比状态条的略窄。
17)：菜单和工具条要有清楚的界限;菜单要求凸出显示，这样在移走工具条时仍有立体感。
18)：菜单和状态条中通常使用5号字体。工具条一般比菜单要宽，但不要宽的太多，否则看起来很不协调。
19):右键快捷菜单采用与菜单相同的准则。

3：帮助设施：
系统应该提供详尽而可靠的帮助文档，在用户使用产生迷惑时可以自己寻求解决方法。

帮助设施细则：
1)：帮助文档中的性能介绍与说明要与系统性能配套一致。(我们的系统帮助文档都是系统的祖先时期的说明，让人困惑)。
2)：打包新系统时，对作了修改的地方在帮助文档中要做相应的修改。
3)：操作时要提供及时调用系统帮助的功能。常用F1。
4)：在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。也就是说帮助要有即时针对性。
5)：最好提供目前流行的联机帮助格式或HTML帮助格式。
6)：用户可以用关键词在帮助索引中搜索所要的帮助，当然也应该提供帮助主题词。
7)：如果没有提供书面的帮助文档的话，最好有打印帮助的功能。
8 )：在帮助中应该提供我们的技术支持方式，一旦用户难以自己解决可以方便的寻求新的帮助方式。

4：合理性：
屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置，在放置窗体时要注意利用这两个位置。

合理性细则：
1)：父窗体或主窗体的中心位置应该在对角线焦点附近。
2)：子窗体位置应该在主窗体的左上角或正中。
3)：多个子窗体弹出时应该依次向右下方偏移，以显示窗体出标题为宜。
4)：重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。
5)：错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。横排开头或最后与竖排最后为易点位置。
6)：与正在进行的操作无关的按钮应该加以屏蔽(Windows中用灰色显示，没法使用该按钮)。
7)：对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会。
8)：非法的输入或操作应有足够的提示说明。
9): 对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，避免形成无限期的等待。
10):提示、警告、或错误说明应该清楚、明了、恰当。

5：美观与协调性：
界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。

美观与协调性细则：
1): 长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度。
2): 布局要合理,不宜过于密集，也不能过于空旷，合理的利用空间。
3): 按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置。
4): 按钮的大小要与界面的大小和空间要协调。
5): 避免空旷的界面上放置很大的按钮。
6)：放置完控件后界面不应有很大的空缺位置。
7): 字体的大小要与界面的大小比例协调, 通常使用的字体中宋体9-12较为美观，很少使用超过12号的字体。
8): 前景与背景色搭配合理协调，反差不宜太大，最好少用深色，如大红、大绿等。常用色考虑使用Windows界面色调。
9): 如果使用其他颜色，主色要柔和，具有亲和力与磁力，坚决杜绝刺目的颜色。
10): 大型系统常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等。
11): 界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。
12): 如果窗体支持最小化和最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放。
13)：对于含有按钮的界面一般不应该支持缩放，即右上角只有关闭功能。
14): 通常父窗体支持缩放时，子窗体没有必要缩放。
15)：如果能给用户提供自定义界面风格则更好，由用户自己选择颜色、字体等。

6：菜单位置：
菜单是界面上最重要的元素，菜单位置按照按功能来组织。

菜单设测试细则：
1)：菜单通常采用“常用--主要--次要--工具--帮助”的位置排列，符合流行的Windows风格。
2):常用的有“文件”、“编辑”，“查看”等，几乎每个系统都有这些选项，当然要根据不同的系统有所取舍。
3):下拉菜单要根据菜单选项的含义进行分组，并切按照一定的规则进行排列，用横线隔开。
4): 一组菜单的使用有先后要求或有向导作用时，应该按先后次序排列。
5): 没有顺序要求的菜单项按使用频率和重要性排列，常用的放在开头，不常用的靠后放置；重要的放在开头，次要的放在后边。
6): 如果菜单选项较多，应该采用加长菜单的长度而减少深度的原则排列。
7): 菜单深度一般要求最多控制在三层以内。
8): 对常用的菜单要有快捷命令方式，组合原则见8。
9):对与进行的操作无关的菜单要用屏蔽的方式加以处理，如果采用动态加载方式——即只有需要的菜单才显示——最好。
10)：菜单前的图标不宜太大，与字高保持一直最好。
11):主菜单的宽度要接近，字数不应多于四个，每个菜单的字数能相同最好。
12)：主菜单数目不应太多，最好为单排布置。

7：独特性：
如果一味的遵循业界的界面标准，则会丧失自己的个性.在框架符合以上规范的情况下，设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用。

1):安装界面上应有单位介绍或产品介绍，并有自己的图标。
2):主界面，最好是大多数界

界面设计的风格

Thu, 01 Dec 2005 09:39:46 GMT

风格与主题

　　一个设计过程的开始，在于你选定了一个风格或主题，很多产品没有一个特定的主题，但是，只要是一个好的产品，一定都有一个固定的风格。如果你是在公司担任产品开发的工作，你将会有许多机会来发展不同类型的风格。以下我们提供一些常见的类型，可以作为参考，并寻找新的创意。
卡通式的风格﹝Cartoon﹞
传统式的风格﹝Traditional﹞
高科技式的风格﹝High Tech﹞
技术性的风格﹝Technical﹞
自然式的风格﹝Natural﹞
花草式的风格﹝Floral﹞
粉蜡笔式的风格﹝Pastel﹞
油画式的风格﹝Oil paint﹞
彩色铅笔式的风格﹝Colored pencil﹞
水彩式的风格﹝Watercolor﹞

卡通式的风格﹝Cartoon﹞

　　卡通或漫画的风格常用在说故事，因为卡通是有趣而能吸引人的，就因为卡通可以得到最多的注意力，所以在作品呈现时，讯息可以有效地传递。使用卡通人物还有一个好处，就是可以将剧情夸大而不得罪观赏者。
　　决定使用卡通作为主题是件困难的任务，你必须发展许多新的角色、故事剧情，以及定位每个角色的身分、人格、动作，将这些角色一个一个建立在你的剧本当中。同时记住观赏者绝对不能够接受他所不能了解的角色。建立一个观赏者能接受的角色，可以藉由突显这个角色的喜剧特征而达成。
　　如果你幸运地能够使用已存在的角色时﹝例如历史人物、童话角色等﹞，要更加小心一些特别的问题。这些角色的性格特征通常已经被许多观赏者所认定，因此设计师没有太多空间能改变这些角色的个性。所以设计师在使用已存在的角色时，要注意保持角色人格的原有性格。

传统式的风格

　　强调传统的风格，大多针对一些具有明确市场的产品。它是具有知识性的，但是，大部分都不是非常有趣。这些传统的表示方法，通常是忠实的呈现内容的原貌，不添加任何夸张渲染的手法。举例来说，一个传统的计算机产品展示，通常就包括了一张机器的图片，以及功能性的介绍文字，它使用统一的规格，简单的文字，介绍出产品的特质；并且要确定读者一定能读到这些信息。

高科技式的风格

以高科技风格表现主题的方式，它的作品大部份围绕着当代计算机所开发出来的技术，例如使用 3D 的动画、虚拟实境的方式，甚至使用表现高科技工作环境的图像，营造出让人有真实感受的效果。

其它插画式的风格

还有粉蜡笔式、油画式、彩色铅笔式、水彩式的风格等，都属于插画式的风格。如果介绍计算机相关产品以这种风格呈现，应是强调产品本身的原创性。

*自由的家园 @ 自由的家 # 自由的 % 自由 & 自 *: ㊣设计与无计

GOOLGE 的 网络视频广告