这是结合自己经验，写给设计类人员的一些工作建议，对其他行业或许也有通用的地方。仅供参考。

一、多思考少提问

　　如果你接到一项任务，给你任务的人肯定是充分信任你的。
　　要知道，没有什么事情容易做，也没有什么事情做不了，自己多想想，基本上可以解决大部分问题，而基于这个基础，再向客户提出的疑问，这些疑问才是有价值的。
　　通常，交给你任务的人要么是自己没时间做、要么是自己没能力做。他相信你的办事能力和思考能力，才把单子交给你，如果频繁的给你解决一个又一个问题，反而会浪费他的时间，那下次加薪或者下次接单子，难度肯定会有相应的提高。谁愿意把钱交给一个帮倒忙的人？

案例：
　　某天帮哥哥做一个网站，哥哥很忙，就发了一条短信过来“做个中考加分的网站”，这是让我帮忙的，如果我发条短信回去问“啥？”、“咋做？”，势必会浪费他的时间，达到“越帮越忙”的效果。实际工作中，肯定有不少客户没有详细的“需求文档”，如果不停的让他们提供这个提供那个，那谁还愿意再次合作？
　　遇到这种需求不明的问题，不妨自己先写一份需求文档，去网上搜一下别人的网站是怎么做的，结合几套网站的经验，出一份visio并不是难事。把自己的疑问，建立在思考的结果上，让客户去改你写好的visio，肯定比让他自己写，更招人喜欢。

二、满足客户的需求

　　我经常看到一些抱怨的帖子，说“老板没有创意，把自己的图改的难看死了”
　　要知道，老板是给你钱的人，他们自己在这个行业里沉浸这么久，肯定会有自己的一套见解，姑且不谈他们的审美观，如果屡次在接到改版需求的时候，“这么改是不合理的”，那怎么给你加薪？

案例：
　　设计过程中，我遇到过这样一个问题：客户比较喜欢下面这张图，但是显然，我没有这张图的源文件，早些年，我可能会找一些理由推脱。但是如果你真把客户当做上帝，想稳定并留住这个客户，想多赚钱，那请一定不要拒绝他，“我想想办法”，只要用心去想，没有什么事情是做不到的。

首先用“复制图层”的方法，一点点拉伸树与树之间的距离，对于被线条拉模糊的天空背景，可以找一些其他的元素做覆盖的弥补，另外，利用“多边形选择”工具，复制几个元素，填充拉开的距离。

1—logo：
基本logo特征，符合logo设计基础（平面设计通用）显示器效果：清晰度，最小尺寸（因显示器分辨率而带来的，等同线下平面设计的印刷效果）
2—文字：
内容等级决定字体、字号大小、粗细；状态决定颜色（默认或者根据网站特殊统一）
3—广告、内容图片：
尺寸样式的定位，同一页面的和谐性，图片的优化，位置的节奏，大小对比。
4—icon：
品牌性，表达准确合理，设计手法（依据品牌性），一致性，作用：吸引，醒目，方便识别、理解、操作、记忆。
5—可点击（button)：
区别（不可点击），根据人的生活经验：厚度，可按，质感（实体联想），色彩（品牌性、统一性、对比性）；统一的样式大小（依据里面文字的内边距统一）
6—背景图片：
氛围效果营造，同产品的统一性，优化（品质大小，色彩信息，实现方案），
7—图文排版：
主图次文，图文节奏，空隙，模块化。
8—当前状态：
放大（形状），变色（反色、对比色、明度纯度区别色），链进链出后指定内容提示。
9—交互控件：样式合理准确性（人对系统默认的认知和生活常规认知），状态（视觉表现样式和动作过程优化），创意。
10—loading：
内容关联性（loading前后的内容关联），无聊等待的乐趣，体积、面积优化，创意。
11—用户反馈_ 成功、出错、提示、无结果：
文案（明确、合理、人性化、创意），图形（明确、醒目、色彩的心理认知准确度）。
12—动画效果：
过程合理（模拟真实环境的合理化），连续，节奏感，用户日常动作表现，音效配合，创意。
13—首尾设计：
首（品牌宣传、自身特点、明确内容、气氛表达、创意。尾：呼应、节奏（与首），创意。
14—适应屏设计（全屏设计）：
最大最小屏幕的考虑（文字、图片的位置、折行效果）
15—固定尺寸的栅格设计：
合理的单元格（考虑黄金分割），单元格面积节奏，边距统一性
16—demo设计样稿：
对内容最多最少的考虑。
17—页面：
品牌性，基调元素一致性，复用性，节奏感、面积感，视觉第一吸引，引导浏览，点线面关系，素描原理（运用素描的基本规律来做页面）。
18—阅读：
背景对阅读（视力）的舒适度，内容与背景的对比舒适度。

其实还有很多设计的点比如交互设计，比如代码设计，我们可以展示给用户看到的这些综上所述，构成了用户体验设计的一个大过程，自己在做的很多时候其实也不是都能估计到每个点的，总结出来以帮助随时审视！

作者：　时间： 2008-08-22　文档类型：转载　来自：uichannel

老早前收藏的一篇文章了，发出来一起学习下
目前流行的界面风格有三种方式：多窗体、单窗体以及资源管理器风格，无论那种风格，以下规则是应该被重视的。
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. 主界面，最好是大多数界面上要有公司图标。
3. 登录界面上要有本产品的标志，同时包含公司图标。
4. 帮助菜单的”关于”中应有版权和产品信息。
5. 公司的系列产品要保持一直的界面风格，如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。

8．快捷方式的组合
在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户操作得更快一些 在西文Windows及其应用软件中快捷键的使用大多是一致的。
菜单中：
1. 面向事务的组合有:
Ctrl-D 删除 ；Ctrl-F 寻找 ；Ctrl –H替换；Ctrl-I 插入 ；Ctrl-N 新记录 ；Ctrl-S 保存 Ctrl-O 打开。
2. 列表:
Ctrl-R ，Ctrl-G定位；Ctrl-Tab下一分页窗口或反序浏览同一页面控件。
3. 编辑:
Ctrl-A全选；Ctrl-C 拷贝；Ctrl-V 粘贴；Ctrl-X 剪切；Ctrl-Z撤消操作；Ctrl-Y恢复操作。
4. 文件操作:
Ctrl-P 打印；Ctrl-W 关闭。
5. 系统菜单:
Alt-A文件；Alt-E编辑；Alt-T工具；Alt－W窗口；Alt－H帮助。
6. MS Windows保留键:
Ctrl-Esc 任务列表 ；Ctrl-F4 关闭窗口； Alt-F4 结束应用；Alt-Tab 下一应用 ；Enter 缺省按钮/确认操作 ；Esc 取消按钮/取消操作 ；Shift-F1 上下文相关帮助 。
按钮中：
可以根据系统需要而调节，以下只是常用的组合。
Alt-Y确定(是)；Alt-C取消；Alt-N 否；Alt-D删除；Alt-Q退出；Alt-A添加；Alt-E编辑；Alt-B浏览；Alt-R读；Alt-W写。
这些快捷键也可以作为开发中文应用软件的标准,但亦可使用汉语拼音的开头字母。

9．安全性考虑：
在界面上通过下列方式来控制出错几率，会大大减少系统因用户人为的错误引起的破坏。开发者应当尽量周全地考虑到各种可能发生的问题,使出错的可能降至最小。如应用出现保护性错误而退出系统,这种错误最容易使用户对软件失去信心。因为这意味着用户要中断思路,并费时费力地重新登录,而且已进行的操作也会因没有存盘而全部丢失。
安全性细则：
1. 最重要的是排除可能会使应用非正常中止的错误。
2. 应当注意尽可能避免用户无意录入无效的数据。
3. 采用相关控件限制用户输入值的种类。
4. 当用户作出选择的可能性只有两个时,可以采用单选框。
5. 当选择的可能再多一些时,可以采用复选框,每一种选择都是有效的,用户不可能输入任何一种无效的选择。
6. 当选项特别多时，可以采用列表框，下拉式列表框。
7. 在一个应用系统中,开发者应当避免用户作出未经授权或没有意义的操作。
8. 对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。
9. 对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态。
10. 对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符。
11. 对错误操作最好支持可逆性处理，如取消系列操作。
12. 在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作。
13. 对可能造成等待时间较长的操作应该提供取消功能。
14. 特殊字符常有；;’”><,｀’：”［”｛、\|｝］+=)-(_*&&^%$#@!~,.。?/还有空格。
15. 与系统采用的保留字符冲突的要加以限制。
16. 在读入用户所输入的信息时，根据需要选择是否去掉前后空格。
17.有些读入数据库的字段不支持中间有空格，但用户切实需要输入中间空格，这时要在程序中加以处理。

10．多窗口的应用与系统资源：
设计良好的软件不仅要有完备的功能，而且要尽可能的占用最底限度的资源。
1.在多窗口系统中，有些界面要求必须保持在最顶层，避免用户在打开多个窗口时，不停的切换甚至最小化其他窗口来显示该窗口。
2.在主界面载入完毕后自动卸出内存，让出所占用的WINDOWS系统资源。
3.关闭所有窗体，系统退出后要释放所占的所有系统资源 ，除非是需要后台运行的系统。
4.尽量防止对系统的独占使用。

来自www.p.cn的一只熊猫，此熊猫非烧香那只，它是一款工具软件而非病毒，不过这个时候推出，赶上熊猫烧香病毒横行肆虐，不知道是福还是祸

软件还是不错，全部采用浏览器操作界面，很方便。电脑里把杆子打不着的图片也能检索出来，能对图片进行标签归档，能在浏览器里对图片进行编辑，这个 功能很方便，不需要安装或者打开photoshop软件了，还能和网上的相册服务商进行同步，比如yahoo相册和163相册等等。试试吧

使用 line-height 垂直居中

line-height:24px;

使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。

清除容器浮动

#main {
    overflow:hidden;
}

期前也提到过这样的问题，更多信息可以看这里。

不让链接折行

a {
    white-space:nowrap;
}

上面的设定就能避免链接折行，不过个人建议长链接会有相应的这行（有关换行方面的讨论，参看圆心的记录）。

始终让 Firefox 显示滚动条

html {
    overflow:-moz-scrollbars-vertical;
}

更多的 Mozilla/Firefox 私有 CSS 属性可以参考这里。需跨浏览器的支持，也可以使用

body, html {
    min-height:101%;
}

使块元素水平居中

margin:0 auto;

其实就是

margin-left: auto;
margin-right: auto;

这个技巧基本上所有的 CSS 教科书都会有说明，别忘记给它加上个宽度。Exploer 下也可以使用

body{
    text-align: center;
}

然后定义内层容器

text-align: left;

恢复。

隐藏 Exploer textarea 的滚动条

textarea {
    overflow:auto;
}

Exploer 默认情况下 textarea 会有垂直滚动条（不要问我为什么）。

设置打印分页

h2 {
    page-break-before:always;
}

page-break-before 属性能设置打印网页时的分页。

删除链接上的虚线框

a:active, a:focus {
    outline:none;
}

Firefox 默认会在链接获得焦点（或者点击时）加上条虚线框，使用上面的属性可以删除。

最简单的 CSS 重置

* {
   margin: 0; padding: 0
}

业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？

     Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。

     <DIV>Very excellent webmaster club www.caifuw.com </DIV>

     如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使用 <P></P> 是一样的。

     DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码

     CSS是Cascading style Sheets的简称，中文译作“层叠样式表单”，在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。网上冲浪无论你用Internet Explorer还是Netscape Navigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。

    Div+CSS标准的优点:

    1.大大缩减页面代码，提高页面浏览速度,缩减带宽成本;

    2.结构清晰，容易被搜索引擎搜索到，天生优化了seo

    3.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。

    4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题，改变字体颜色，字体样式等等。

    5.CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。

    6.提高易用性。使用CSS可以结构化HTML，例如：<p>标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。

    7.可以一次设计，随处发布。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。

    8.更好的控制页面布局。不用多说。

    9.表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。

    10.更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。

    11.Table 布局灵活性不大，你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 还可以 ul li ……但标准语法最好有序的写。

    12.另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。

    13.Table 中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div 更能体现样式和结构相分离，结构的重构性强。

    14.在几乎所有的浏览器上都可以使用。

    15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

    16.使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。

    17.你可以轻松地控制页面的布局 。

    18.你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

看了这么多优点您是否对这种设计风格感兴趣呢？笔者严格按照Div+CSS设计标准做了一个新闻发布类的网站程序，有兴趣的朋友可以下载详细研究。地址:
http://www.codesfan.com/code/DL/ASP/news/Code_fan_177.asp
http://www.skycn.com/soft/30375.html
http://dow.caifuw.com/new5.10free.rar