网页设计适应性怎么弄？网页设计适应性怎么弄出来

移动设备逐渐成为人们获取信息、进行社交、购物等日常活动的首选工具。网页设计的适应性显得尤为重要。本文将从网页设计适应性的概念、重要性、实现方法以及未来发展趋势等方面进行探讨，以期为我国网页设计行业的发展提供有益的参考。

一、网页设计适应性的概念与重要性

1. 概念

网页设计适应性，即网页在不同设备、不同分辨率、不同网络环境下，能够自动调整布局、字体、图片等元素，以适应用户需求，提升用户体验。具体来说，主要包括以下几个方面：

（1）响应式设计：根据不同设备屏幕尺寸，自动调整网页布局，实现无缝切换。

（2）自适应设计：针对不同分辨率，调整网页元素大小、间距等，保证网页在不同设备上均能正常显示。

（3）兼容性设计：确保网页在各种浏览器、操作系统上均能正常运行。

2. 重要性

（1）提升用户体验：适应性强、界面美观、操作便捷的网页，能够为用户提供良好的使用体验，提高用户满意度。

（2）提高网站流量：适应性强、易于分享的网页，有利于提高网站在搜索引擎中的排名，吸引更多用户访问。

（3）降低维护成本：适应性强、兼容性好的网页，可以减少因设备、浏览器等因素导致的问题，降低网站维护成本。

二、网页设计适应性的实现方法

1. 响应式设计

（1）使用流体布局：通过百分比、em、rem等相对单位，实现网页布局的弹性伸缩。

（2）使用媒体查询：针对不同屏幕尺寸，设置不同的样式规则，实现网页元素的自动调整。

（3）使用弹性图片：通过CSS或JavaScript技术，使图片在不同设备上保持最佳显示效果。

2. 自适应设计

（1）针对不同分辨率，设置不同的样式规则，如使用px、vw、vh等绝对单位。

（2）调整字体大小、间距等元素，保证网页在不同分辨率下均能正常显示。

3. 兼容性设计

（1）遵循W3C标准，确保网页代码的规范性和可维护性。

（2）针对不同浏览器，编写兼容性代码，如使用条件注释、CSS前缀等。

三、网页设计适应性的未来发展趋势

1. 人工智能技术：通过人工智能技术，实现网页设计自动化、智能化，提高设计效率。

2. 虚拟现实技术：结合虚拟现实技术，打造沉浸式网页体验，提升用户体验。

3. 个性化设计：根据用户行为、兴趣等数据，实现个性化网页设计，满足用户个性化需求。

网页设计适应性是未来互联网发展的重要趋势。在当前及未来，网页设计行业应紧跟时代步伐，不断创新，提高网页设计适应能力，为用户提供更好的使用体验。政府、企业、教育机构等各方也应共同努力，推动我国网页设计行业的发展，助力我国互联网事业的繁荣。

怎么设计网页

网页设计——根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。

网页设计一般分为三种大类：功能型网页设计（服务网站&B/S软件用户端）、形象型网页设计（品牌形象站）、信息型网页设计（门户站）。设计网页的目的不同，应选择不同的网页策划与设计方案。

网页设计的工作目标，是通过使用更合理的颜色、字体、图片、样式进行页面设计美化，在功能限定的情况下，尽可能给予用户完美的视觉体验。高级的网页设计甚至会考虑到通过声光、交互等来实现更好的试听感受。

网页设计常用的工具包括AI、PS、FL、FW、DW等。

网页，是网站中的任何一页面，通常是HTML（是标准通用标记语言下的一个应用）格式（文件扩展名为html、或htm、或asp、或aspx、或php、或jsp等）。网页通常用图像档来提供图画，网页要使用网页浏览器来阅读。

在网页设计的认识上，许多人似乎仍停留在网页制作的高度上。认为只要用好了网页制

作软件，就能搞好网页设计了。

其实网页设计是一个感性思考与理性分析相结合的复杂的过程，它的方向取决于设计的

任务，它的实现依赖于网页的制作。正所谓“功夫在诗外”，网页设计中最重要的东西

，并非在软件的应用上，而是在我们对网页设计的理解以及设计制作的水平上，在于我

们自身的美感以及对页面的把握上。

首先，我们要弄清楚网页设计的任务。

一、设计的任务

设计是一种审美活动，成功的设计作品一般都很艺术化。但艺术只是设计的手段，而并

非设计的任务。设计的任务是要实现设计者的意图，而并非创造美。

网页设计的任务，是指设计者要表现的主题和要实现的功能。站点的性质不同，设计的

任务也不同。从形式上，可以将站点分为以下三类。

第一类是资讯类站点，像新浪、网易、搜狐等门户网站。这类站点将为访问者提供大量

的信息，而且访问量较大。因此需注意页面的分割、结构的合理、页面的优化、界面的

亲和等问题。

第二类是资讯和形象相结合的网站，像一些较大的公司、国内的高校等。这类网站在设

计上要求较高，既要保证资讯类网站的上述要求，同时又要突出企业、单位的形象。然

而就现状上来看，这类网站有粗制滥造的嫌疑。

第三类则是形象类网站，比如一些中小型的公司或单位。这类网站一般较小，有的则有

几页，需要实现的功能也较为简单，网页设计的主要任务是突出企业形象。这类网站对

设计者的美工水平要求较高。

当然，这只是从整体上来看，具体情况还要具体分析。不同的站点还要区别对待。别忘

了最重要的一点，那就是客户的要求，它也属于设计的任务。

明确了设计的任务之后，接下来要想的就是如何完成这个任务了。

二、设计的实现

设计的实现可以分为两个部分。第一部分为站点的规划及草图的绘制，这一部分可以在

纸上完成。第二部分为网页的制作，这一过程是在计算机上完成的。

设计首页的第一步是设计版面布局。我们可以将网页看作传统的报刊杂志来编辑，这里

面有文字、图像乃至动画，我们要做的工作就是以最适合的方式将图片和文字排放在页

面的不同位置。

除了要有一台配置不错的计算机外，软件也是必需的。不能简单地说一个软件的好坏，

只要是设计者使用起来觉得方便而且能得心应手的，就可以称为好软件。当然，它应该

能满足设计者的要求。笔者常用的软件是Macromedia的Dreamweaver、Fireworks、

Flash以及Adobe的Photoshop、imageready，这些都是很不错的软件。

接下来我们要做的就是通过软件的使用，将设计的蓝图变为现实，最终的集成一般是在

Dreamweaver里完成的。虽然在草图上，我们定出了页面的大体轮廓，但是灵感一般都

是在制作过程中产生的。设计作品一定要有创意，这是最基本的要求，没有创意的设计

是失败的。在制作的过程中，我们会碰到许多问题，其中最敏感的莫过于页面的颜色

了。

四、造型的组合

在网页设计中，我们主要通过视觉传达来表现主题。在视觉传达中，造型是很重要的一

个元素。抛去是图还是文字的问题，画面上的所有元素可以统一作为画面的基本构成要

素点、线、面来进行处理。在一幅成功的作品里，是需要点、线、面的共同组合与搭配

来构造整个页面的。

通常我们可以使用的组合手法有秩序、比例、均衡、对称、连续、间隔、重叠、反复、

交叉、节奏、韵律、归纳、变异、特写、反射等等，它们都有各自的特点。在设计中应

根据具体情况，选择最适合的表现手法，这样有利于主题的表现。

通过点、线、面的组合，可以突出页面上的重要元素，突出设计的主题，增强美感，让

观者在感受美的过程中领会设计的主题，从而实现设计的任务。

造型的巧妙运用不仅能带来极大的美感，而且能较好地突出企业形象，而且能将网页上

的各种元素有机的组织起来，它甚至还可以引导观者的视线。

三、色彩的运用

色彩是一种奇怪的东西，它是美丽而丰富的，它能唤起人类的心灵感知。一般来说，红

色是火的颜色，热情、奔放；也是血的颜色，可以象征生命。黄色是明度最高的颜色，

显得华丽、高贵、明快。绿色是大自然草木的颜色，意味着纯自然和生长，象征安宁和

平与安全，如绿色食品。紫色是高贵的象征，有庄重感。白色能给人以纯洁与清白的感

觉，表示和平与圣洁。

我们知道，颜色是光的折射产生的，红、黄、蓝是三原色，其它的色彩都可以用这三种

色彩调和而成。换一种思路，我们可以用颜色的变化来表现光影效果，这无疑将使我们

的作品更贴近现实。

色彩代表了不同的情感，有着不同的象征含义。这些象征含义是人们思想交流当中的一

个复杂问题，它因人的年龄、地域、时代、民族、阶层、经济地区、工作能力、教育水

平、风俗习惯、宗教信仰、生活环境、性别差异而有所不同。

单纯的颜色并没有实际的意义，和不同的颜色搭配，它所表现出来的效果也不同。比如

绿色和金黄、淡白搭配，可以产生优雅，舒适的气氛。蓝色和白色混合，能体现柔顺、

淡雅、浪漫的气氛。红色和黄色、金色的搭配能渲染喜庆的气氛。而金色和粟色的搭配

则会给人带来暖意。设计的任务不同，配色方案也随之不同。考虑到网页的适应性，应

尽量使用网页安全色。

但颜色的使用并没有一定的法则，如果一定要用某个法则去套，效果只会适得其反。经

验上我们可先确定一种能表现主题的主体色，然后根据具体的需要，应用颜色的近似和

对比来完成整个页面的配色方案。整个页面在视觉上应是一个整体，以达到和谐、悦目

的视觉效果。

五、设计的原则

设计是有原则的，无论使用何种手法对画面中的元素进行组合，都一定要遵循五个大的

原则：统一、连贯、分割、对比及和谐。

统一，是指设计作品的整体性，一致性。设计作品的整体效果是至关重要的，在设计中

切勿将各组成部分孤立分散，那样会使画面呈现出一种枝蔓纷杂的凌乱效果。

连贯，是指要注意页面的相互关系。设计中应利用各组成部分在内容上的内在联系和表

现形式上的相互呼应，并注意整个页面设计风格的一致性，实现视觉上和心理上的连贯

，使整个页面设计的各个部分极为融洽，犹如一气呵成。

分割，是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了

然。在信息量很多时为使观者能够看清楚，就要注意到将画面进行有效的分割。分割不

仅是表现形式的需要。换个角度来讲，分割也可以被视为对于页面内容的一种分类归

纳。

对比就是通过矛盾和冲突，使设计更加富有生气。对比手法很多，例如：多与少、曲与

直、强与弱、长与短、粗与细、疏与密、虚与实、主与次、黑与白、动与静、美与丑、

聚与散等等。在使用对比的时候应慎重，对比过强容易破坏美感，影响统一。

和谐是指整个页面符合美的法则，浑然一体。如果一件设计作品仅仅是色彩、形状、线

条等的随意混合，那么作品将不但没有“生命感”，而且也根本无法实现视觉设计的传

达功能。和谐不仅要看结构形式，而且要看作品所形成的视觉效果能否与人的视觉感受

形成一种沟通，产生心灵的共鸣。这是设计能否成功的关键。

六、网页的优化

在网页设计中，网页的优化是较为重要的一个环节。它的成功与否会影响页面的浏览速

度和页面的适应性，影响观者对网站的印象。

在资讯类网站中，文字是页面中最大的构成元素，因此字体的优化显得尤为重要。使用

css样式表指定文字的样式是必要的，通常我们将字体指定为宋体，大小指定为12px，

颜色要视背景色而定，原则上以能看清且与整个页面搭配和谐为准。在白色的背景上，

我们一般使用黑色，这样不易产生视觉疲劳，能保证浏览者较长时间地浏览网页。

图片是网页中的重要元素。图片的优化可以在保证浏览质量的前提下将其size降至最低

，这样可以成倍地提高网页的****。利用Photoshop6或Fireworks4可以将图片切

成小块，分别进行优化。输出的格式可以为gif或jpeg，要视具体情况而定。一般我们

把有较为复杂颜色变化的小块优化为jpeg，而把那种只有单纯色块的卡通画式的小块优

化为gif，这是由这两种格式的特点决定的。

表格(table)是页面中的重要元素,是页面排版的主要手段。我们可以设定表格的宽度、

高度、边框、背景色、对齐方式等参数。很多时候，我们将表格的边框设为0，以此来

定位页面中的元素，或者籍此确定页面中各元素的相对位置。我们知道：浏览器在读取

网页html原代码时，是读完整个table才将它显示出来的。如果一个大表格中含有多个

子表格，必须等大表格读完，才能将子表格一起显示出来。我们在访问一些站点时，等

待多时无结果，按"停止"按钮却一下显示出页面就是这个原因。因此，我们在设计页面

表格的时候，应该尽量避免将所有元素嵌套在一个表格里，而且表格嵌套层次尽量要

少。在使用Dreamweaver制作网页时，会自动在每一个td内添加一个空字符“ ”。如果

单元格内没有填充其它元素，这个空字符会保留，在指定td的宽度或高度后，可以在源

代码内将其删去。

网页的适应性是很重要的，在不同的系统上，不同的分辨率下，不同的浏览器上，我们

将会看到不同的结果，因此设计时要统筹考虑。一般我们在800*600下制作网页，最佳

浏览效果也是在800*600分辨率下，在其它情况下只要保证基本一致，不出现较大问题

即可。

说了这么多，只是希望能对做“网页设计”的人有所帮助，希望他们在做网页的时候能

够从整体着眼，无愧于“设计”这两个字。顺便说一下，本文只代表本人个人观点，仅

供参考。

对于网页的框架与定位,这个是很难说得清楚的,这要看你在做网站时,对网站的

规划,并不能一并而论的,如果你没有这方面的经验,就多多在网上看看别人是如何设计

的吧,是非常的用的,可以把他们给抓下来,做个图库,方便自己设计

其实看看一些设计精良的网页，会对自己有很大的作用，

把别人的网页下载下来，再用相关的软件，进行分析，

可以学到许多的东西的，是一种快捷的学习方法，

但决不是COPY

我认为首要的是突出主题

一个好的网站(个人的只能算做网页)最首要的是突出你的主题,在别人搜索或访问时首

先就看有没有自己所需要的内容,要么就直奔主题.然后再在主题鲜明的基础上做好框架

设计.一个好的网站要做到层次分明,结构合理,让人一看就能明白你想要表达的中心思

想是什么,以及怎样才能以以最快的速度找到自己想要的内容.这两个主要问题解决后再

在一些细节上加以润色,就能制作出赏心悦目的网站.

怎么学好网页设计

需要有一个明确的学习路线 也就是类似提纲的东西

很多人都是 这边学一点 那边学习一点 学了很久 都是皮毛上面的毛

首先了解一个 网页设计的几个方向，自己选一个 方向作为自己努力的目标

粗浅说一下个人的看法：前台 设计 目前比较多指的是平面方面的设计，就是页面做的漂不漂亮，然后是符合web标准；

后台 指的是动态网页+数据库方面 的内容 主要实现网页与用户的交互功能；

以前还有一个方向叫做RIA当时主要用Flash来开发 动态效果丰富的交互界面web应用程序；

貌似随着Ajax的出现打破了，RIA 有了新的发展方向。

本人了解的东西比较少，上面这么说可能很不全面，仅供参考吧！

确定一个方向以后开始安排学习！（作为一个全面的web人才，各个方面都可以学一些，但是作为刚开始入门，建议不要贪多，选一个方向深入学习，积累的一定程度以后，可以横向扩展 学习其他方面的一些东西，这样才会可持续发展！）

然后开始 从基础学起，基础中的基础HTML，别小看这个东西，很多做网页的人都没有认真仔细学习过HTML 这个要学仔细。

HTML之后 建议系统的了解一下CSS 这个在目前是前台开发非常重要的一块。 这里是比较权威的网页学习网站，但是.....是英文的，看个人能力了....囧

当然，你还需要一个网页开发工具，这要根据你选择的方向有针对性的挑选，如果是做前台，PS 肯定要学 然后比较大众的是Dreamweaver 和 Flash

如果你是搞web应用程序开发的，根据选择的语言找一款对应的好上手的IDE环境就可以了，高手们经常炫耀说只要"记事本"就足够了，入门级别的人千万别这么玩，人家把知识全装到脑子里面了，你可玩不了这么高级的。

语言的学习就因人而异了，每个人的基础程度不同，各个语言都有经典的教程和书籍。

语言学习的同时要学非常重要的一块：数据库~~~ 这个.......没什么说的了，努力+加油！

很重要的一点就是：加入专业论坛，有问题可以问问网友，同时你也可以，经常浏览论坛看看别人遇到哪些问题，检验检验你自己是否能解决这类问题，对自己的经验积累和提高很有帮助。

简单推荐几个学习的地方：1.蓝色理想(老牌基地了，精华帖子比较多，对初学者绝对是精华了，高手跳过此步) 2.CSND 这里学习氛围挺浓，高手深藏不漏哦 问问题经常能得到很多回复。

如果学前台设计，那就要到专业的 PS 或 AI 论坛学习了，国内著名的几个设计论坛都可以去混混，多看看别人的东西，一定不能手懒，别人写了一个教程，不能只是看看，一定要亲手操作操作，积累再积累，到了一定程度 你就会爆发了 呵呵!

再者就是收集素材，日积月累吧，别小看收集素材，也是提高审美的一种手段；当然你如果是写web程序的，收集别人的经典代码、教程也是自我积累的好方法。

学习到一定程度之后，看看主流的一些开发流程，自己总结一下学习过的软件和知识，形成一套自己的开发流程，这样做事情就不会手忙脚乱了。(以前经常看见有人，开了PS 开了DW 开了Flash 开了数据库管理系统 开了web应用开发环境.........真叫手忙脚乱啊)

也许看过以后感觉很囧，要学这么多东西啊？？目前中国国情就是这样，一个人要身兼数职，那个方面多少都要会一点，这样才能有饭吃。国外都是每个人学一样，有人专门做平面设计 然后有人专门 做成符合标准的DIV+CSS网页 然后有人专门做数据库 再有人专门做web程序............国内这样专业分工的公司可不多。

忘记了一点：另外一类东西叫CMS 就是网站内容管理系统，一套网站管理系统，直接在后台写文章，做一套模板 前台就能生成整套网站，作为应用级别的，这种来得最快。根据你自己的需要去选择 去学习吧。

总之，选择了这条道路 就要有长期抗战的准备，几乎天天都在技术进步和更新。

乱写一气，还是匿了........囧

游戏界面设计怎么弄

用户心理学——认知原则的应用

认知心理学，从广义上来说，就是关于认识的心理学。人类认识客观事物，主要就是通过感觉、知觉、注意、记忆、思维想象等来进行，因此，凡是研究人的认识心理过程的，都属于认识心理学。实际上，我们这里所指的认知心理学是指纯粹采用信息加工观点来研究认知心理学过程的心理学，也就是运用信息论以及计算机的类比、模拟、验证等方法来研究知识是如何获得、存贮、交换、使用的。所以，我们这里所指的现代认知心理学实质是信息加工心理学。一般地，人们将信息加工心理学又称为狭义的认知心理学。

1.认知过程

看和听的过程构成知觉，图像和声音作为**的特征被接收并以抽象的方式被编码，把输入和记忆中的信息进行对比得出对**的解释，这一过程就是认知。人体信息处理器包括感官、短期记忆、长期记忆及与其相联系的动作处理器和认知处理器。每种知觉均有一个对应的短期存储器和处理器，人体信息模型总体框图如左图4.3.1所示。其中认知处理器执行的工作就是我们通常所说的思维。思维的结果或被存储起来，或送至动作处理器控制行动。

2.认知心理学

（1）现代认知心理学的核心：

现代认知心理学的理论实质，就是以计算机信息加工的观点来研究人的心理学活动，把人脑看作是一种如同计算机的信息加工系统。

（2）现代认知心理学两个关键的重要概念：

现代认知心理学的学说内容集中体现在两个关键的重要概念上。现代认知心理学的一个重要的中心概念，就是“信息”。在某种程度上说，抽掉了“信息”的概念，认知心理学的理论也就会散架解体，难以存在。现代认知心理学的另一个重要的中心概念，就是“信息加工系统”。信息加工系统的理论，是现代认知心理学理论的主体。

（3）现代认知心理学的研究方法：现代认知心理学的研究方法有实验法、观察法(包括自我观察法)以及计算机模拟法等。

3.人机交互设计遵循的认知原则

根据用户心理学和认知科学，提出如下基本原则指导人机界面交互设计。

（1）一致性原则。即从任务、信息的表达、界面控制操作等方面与用户理解熟悉的模式尽量保持一致。

（2）兼容性。在用户期望和界面设计的现实之间要兼容，要基于用户以前的经验。

（3）适应性。用户应处于控制地位，因此界面应在多方面适应用户。

（4）指导性。界面设计应通过任务提示和反馈信息来指导用户，做到“以用户为中心”。

（5）结构性。以减少复杂度。

（6）经济性。界面设计要用最少的支持用户所必须的步骤来实现一个操作。

在上述基本原则指导下，提出以下几点针对界面设计与屏幕设计的参考:

（1）由具体到抽象。即首先通过多媒体界面给用户提供具体界面设计应是结构化的的对象。然后从具体对象、内容中让学习者归纳出抽象的概念或原理，或用模拟系统来引导出抽象的原理。

（2）由可视化的内容显示不可见的内容。尽可能利用数字、图解、动画、色彩等清晰爽目的对象显示原理、公式或抽象的概念。

（3）由模拟引导创新。突出人机交互，尽量启发用户的积极思维和参与，并激起用户的学习和创造欲望。

（4）合理运用再认与再忆，减少用户短期记忆的负担。所谓再认就是从系统给定的几个可能答案中要用户选择一个正确的或最好的。再忆即要求用户输入正确的答案或关键字。

（5）考虑用户的个别差异，使用用户语言。

以上5点具体体现了“由易而难，逐步强化。”这一源于认知心理学的原则。

界面设计原则：

（1）用户原则。人机界面设计首先要确立用户类型。划分类型可以从不同的角度，视实际情况而定。确定类型后要针对其特点预测他们对不同界面的反应。这就要从多方面设计分析。

（2）信息最小量原则。人机界面设计要尽量减少用户记忆负担，采用有助于记忆的设计方案。

（3）帮助和提示原则。要对用户的操作命令作出反应，帮助用户处理问题。系统要设计有恢复出错现场的能力，在系统内部处理工作要有提示，尽量把主动权让给用户。

界面设计并无固定规则可以遵循，然而在长期的界面设计的研究与用户的研究调查的过程中，设计师们摸索出了一套界面设计的原则，以下的几条原则是设计师们应该遵循的：

一、人机界面的设计应该简洁易懂：人机界面不应该喧宾夺主。游戏软件与其它类应用软件不同，游戏软件可视化的元素中所有的一切都应该为游戏性与晚间的游戏体验服务如果过分修饰或过于繁琐的话，人机界面反而会干扰玩家的注意力，使他们不能集中精力于游戏世界的体验中。人机界面应该力求简洁，占用的屏幕空间越少越好。矛盾随之应运而生，随着游戏的复杂程度和数据量的增加，需要玩家知道掌握的数据信息越来越多，另一方面人机界面的需求有时追求极度简洁，占用屏幕越少越好。同时人机界面的设计应该具有极强的易懂性，《Age

Empire》的设计者们曾提出“前十五分钟法则”。“前十五分钟”指的是对于一个游戏而言如果入门级玩家不能在前十五分钟顺利的弄明白基本操作和策略并开始游戏，或铁杆级玩家不能在前十五分钟感到有趣和挑战的话，他们就会放弃这个游戏。因此游戏界面应该是极易上手，同时又应该给高级玩家带来挑战的设计。

二、人机界面和游戏世界应该风格统一：从色彩到质感，应该和游戏世界保持一致协调。而且界面与有些应该结合统一不要有过大反差或甚至风马牛不相及。

三、人机界面应该具有一定的自解释性（affordance）与可学习性（learnable）：所谓自解释性，是指一个设计能够通过自己的外表暗示自己的功能。最简单的例子如门把手，其形状本身就暗示了手应该握住它后向下按。在人机界面设计上最典型的例子就是windows的窗口了，在窗口的右下角的三角形三维凹凸不平，就是从音量调节器的设计（音量调节钮上的凹凸不平，暗示了其可旋转性）中引申出来的，它暗示了鼠标可以拉动它从而改变窗口大小。

四、人机界面应该布局平衡：所有文字和图表应该摆放得恰到好处，形成一种平衡感。以往的游戏设计师们毫无平面设计的基础训练，在摆放图表和文字时随心所欲毫无章法，导致明显的布局不平衡和重要信息不突出。

五、应该以一种动态的观点来设计人机界面：这一点也许不太好理解。将人机界面设计与平面设计区分开来的最主要一点便是前者是动态的，而后者则为静态的设计平面设计的最终产品包括广告招贴，书籍封面，宣传册等等，这些都是人们去阅读的静态的页面（就新兴的网页设计而言，其更接近于后者）。二人机界面的最终产品是软件用户界面，其实要用户通过动态的过程来使用的。设计人机界面，并不只是设计一个窗口菜单和控制面板，更重要的是设计一种动态的交互（interaction），在设计时必须将用户种种的行为可能性与动态视效的配合考虑在内。

六、在设计用户界面时应将效率问题考虑在内：玩家在玩游戏时的交互实现是通过以下这一过程实现的，1玩家意识到当前需要——2玩家寻找命令——3玩家输入指令（input，即玩家点击相应按钮或按下手柄按键）——4电脑内部程序进行指令分析——5电脑以可视化的形式进行反馈（output，当前需要得到实现）。所有游戏，包括当前所有软件，都是通过无数次的上述过程来实现交互的，并且这种交互过程模式，将在很长的一段时间内作为交互的主要甚至唯一手段。正因为这种过程的存在，使得我们不得不引入效率的概念。用户界面设计的任务，从最根本的方面来说，就是减少从过成2到过程3这一段用户所需要做的功。玩家在这一过程中所花费的时间与鼠标所经过的距离越长，玩家所消耗掉的功就越多。用户界面设计追求减少甚至消灭掉这一过程，因为这一过程所消耗掉用户的功就其意义来说是无用功，它对整个交互作用没有任何意义，反而这一过程的大量存在会使用户产生疲劳感和排斥感。就即时战略游戏而言，在早期的《Age

Empire》之后，此类游戏的用户界面设计便一直以其为标准，即将游戏画面与用户界面分割开来，前者居上占据屏幕的70-80%，后者居下。一直到后来的许多热门即时战略游戏《Red

Alarm》系列（其用户界面由下面改到了右面）、《StarCraft》系列、《WarCraft》系列这既表示了这一设计为广大界面设计师拥护，说明此一设计有其成熟的一面；同时也表示用户界面设计在长时间内处于无创新状态。因为就此设计而言，其仍有许多缺陷，在效率方面问题最为明显。为了完成游戏，玩家需要不停的将鼠标在游戏画面与用户界面之间移动，以完成指令的下达。现行的这一设计增加了鼠标移动的距离和下达指令需耗费的时间，如此一来，游戏中长时间的大量的无用功会令玩家产生疲劳感。尽管已经有许多方法被尝试来改变这种状况，如热键盘这一设计的引入。然而这一针对高级玩家的设计并没有从根本上改变游戏界面设计的效率问题。许多工具软件在效率这方面的问题解决的要比游戏好得多。其中贡献最为明显的就是右键弹出指令框这一设计，其有效地解决了鼠标移动距离与消耗时间的问题，从而客观地提升了软件操作的效率。然而，如果将这一设计应用于游戏中，就势必增加了界面的复杂性，不如原来的分割式设计一目了然。这有与人机界面设计的第一条原则相矛盾，同时对二三四条产生连带影响，这些都增加了人机界面设计的难度与挑战性。其实人机界面设计原则的第六条在本质上并不与第一条发生矛盾关系，这就为人机界面设计的改进与创新提供了可行性。

七、人机界面设计的最高水平是达到无形入化：所谓人机界面的无形入化，就是说人机界面非常自然，非常好用，玩家用起来得心应手，全身心地投入到游戏世界中，仿佛人机界面是透明的了，似乎感受不到它的存在。这是所有人机界面设计的终极目标，也是所有游戏设计师们努力的方向。

界面设计与评价

评价是人机界面设计的重要组成，应该在系统设计初期就进行，或在原型期就进行，以便及早发现设计缺陷，避免人力、物力浪费。

对界面设计的质量评价通常可用四项基本要求衡量：

（1）界面设计是否有利于用户目标的完成；

（2）界面学习和使用是否容易；

（3）界面使用效率如何；

（4）设计的潜在问题有哪些；

对界面的总体设计和具体功能块设计，可用上面提到的各类界面设计准则就其应用对象进行综合测试。具体要求的界面品质,仅提出如下几项供参考：

（1）实用性。衡量界面在帮助用户完成任务时的满意程度，这点只能从用户调查表中获取数据。

（2）有效性。度量指标有错误率、任务完成时间、系统各设备使用率等。

（3）易学习性。从系统开始使用一段时间后，错误率下降情况、完成任务时间减少的情况、正确调用设备及命令的情况以及用户知识增加的状况来衡量。

（4）系统设备及功能使用面。若有些设备或功能任何用户都未用过，则可能设计有误。

（5）用户满意程度。以用户满意程度，发现问题多少及使用兴趣来衡量。

界面评估采用的方法已由传统的直觉经验的方法，逐渐转为科学的系统的方法进行。传统经验方法有如下几种：

（1）实验方法。在确定了实验总目标及所要验证的假设条件后，设计最可靠的实验方法是随机和重复测试，最后对实验结果分析总结。

（2）监测方法。即观察用户行为。观察方法有多种，如直接监测、录像监测、系统监测等。执行时一般多种方法同时进行。

（3）调查方法。这种方法可为评价提供重要数据，在界面设计的任何阶段均可使用。调查方式可采用调查表(问卷)或面谈方式。但应该指出，这种方法获得数据的可靠性和有效性不如实验法和监测法。

另一种不同于经验方法的是形式化方法。这种方法建立在用户与界面的交互作用模型上。它与经验方法区别在于不需要直接测试或观察用户实际操作，优点是可在界面详细设计实现前就进行评价。但无法完全预知用户所反映的情况，所以目前多用比较简单可靠的经验方法。

（1）布局

屏幕布局因功能不同考虑的侧重点不同。各功能区要重点突出，功能明显。无论哪一种功能设计，其屏幕布局都应遵循如下五项原则：

①平衡原则。注意屏幕上下左右平衡。不要堆挤数据，过分拥挤的显示也会产生视觉疲劳和接收错误。

②预期原则。屏幕上所有对象，如窗口、按钮、菜单等处理应一致化，使对象的动作可预期。

③经济原则。即在提供足够的信息量的同时还要注意简明，清晰。特别是媒体，要运用好媒体选择原则。

④顺序原则。对象显示的顺序应依需要排列。通常应最先出现对话，然后通过对话将系统分段实现。

⑤规则化。画面应对称，显示命令、对话及提示行在一个应用系统的设计中尽量统一规范。

在屏幕布局中，还要注意到一些基本数据的设置。

按照以上原则，进行屏幕设计，应做到：

（1）按功能将屏幕分成几个区域，通常为：标题区，工作区，提示和出错处理区、以及其他。示例一

（2）用户界面应包含所有所必需的信息。示例二

（3）屏幕的使用密度应当适当，防止过稀或过密。示例三

（2）文字与用语

文字和用语除作为正文显示媒体出现外，还在设计题头、标题、提示信息、控制命令，会话等功能时展现。对文字与用语设计格式和内容应注意如下：

①要注意用语简洁性。避免使用计算机专业术语；尽量用肯定句而不要用否定句；用主动语态而不用被动语态；用礼貌而不过分的强调语句进行文字会话；对不同的用户，实施心理学原则使用用语；英文词语尽量避免缩写；在按钮、功能键标示中应尽量使用描述操作的动词；在有关键字的数据输入对话和命令语言对话中采用缩码作为略语形式；在文字较长时，可用压缩法减少字符数或采用一些编码方法。

示例一示例二

②格式。在屏幕显示设计中，一幅画面不要文字太多，若必须有较多文字时，尽量分组分页，在关键词处进行加粗、变字体等处理，但同行文字尽量字型统一。英文词除标语外，尽量采用小写和易认的字体。

③信息内容。信息内容显示不仅采用简洁、清楚的表达，还应采用用户熟悉的简单句子，尽量不用左右滚屏。当内容较多时，应以空白分段或以小窗口分块，以便记忆和理解。重要字段可用粗体和闪烁吸引注意力和强化效果，强化效果有多样，针对实际进行选择。

示例三示例四

（3）颜色的使用

颜色的调配对屏幕显示也是重要的一项设计，颜色除是一种有效的强化技术外，还具有美学价值。使用颜色时应注意如下几点：

①限制同时显示的颜色数。一般同一画面不宜超过4或5种，可用不同层次及形状来配合颜色，增加变化。示例一

②画面中活动对象颜色应鲜明，而非活动对象应暗淡。对象颜色应尽量不同，前景色宜鲜艳一些，背景色则应暗淡。示例二

③尽量避免不兼容的颜色放在一起，如黄与蓝，红与绿等，除非作对比时用。示例三

④若用颜色表示某种信息或对象属性，要使用户懂得这种表示，且尽量用常规准则表示。示例四

总之，屏幕显示设计最终应达到令人愉悦的显示效果，要指导用户注意到最重要的信息，但又不包含过多的相互矛盾的**。

设计流程：

1）调查研究

2）基本概念设计

3）生产界面原型

4）可行性测试

5）反复优化

1）二维操作优先原则

2）鼠标移动最短原则

3）浅层菜单设计原则

4）快捷键放置左侧原则

5）信息最大化原则

6）角色操作分级原则

7）多渠道性

8）可设置性什么游戏一般是在设置里面