软件界面设计Word文件下载.docx

软件界面设计Word文件下载.docx

《软件界面设计Word文件下载.docx》由会员分享，可在线阅读，更多相关《软件界面设计Word文件下载.docx（25页珍藏版）》请在冰豆网上搜索。

不少软件企业不但有程序员，还有美工人员，但遗憾的是这两类人不会配合着工作。

大多数人都认为界面设计是美工人员的事情，否则公司招聘美工人员有什么用？

编程实现是在美工人员完成界面设计后进行，由程序员负责的，至于界面设计好不好程序员不去管。

美工人员大多是美术相关类专业毕业，他们的优点是擅长于视觉设计，缺点是：

不知道待开发软件系统的业务逻辑，不了解用户的特征，难以开展交互设计；

不懂得软件技术，他们不了解自己做出来的界面在技术实现方面的难易程度。

千万不要低估界面实现的难度，界面不是想做就能做得出的。

有些Web软件界面控件，不仅要功能好、性能好，还要易用，可以说技术难度非常高，这不是一般程序员能做得好的。

可见美工人员并不属于理想的软件界面设计师。

就目前情形来看，既能做好交互设计又能做好视觉设计的界面设计师还是比较少见的，能够在做好交互设计、视觉设计的基础上再做好程序实现的人更加罕见。

我作为一名学生，肯定不可能去改变中国的教育方法和体系，能做的只有总结一些软件界面设计的规范来供读者（开发人员）参考。

第二章软件界面设计应遵循的原则

本论文总结了软件界面设计应遵循的原则：

以目标用户为中心，容易被理解，反馈操作信息，排错性考虑，最少步骤（最高操作效率），合理的布局，色彩的选择与组合。

读者（开发者）理解这些设计原则的含义后，要结合准备的开发软件的基本特征，进一步融会和细研究，从而确定开发软件的界面设计原则。

2.1以用户为中心

以用户为中心，这是第一重要的界面设计原则，关系着软件的好坏。

不以目标用户为中心开发出来的界面，用户不会购买，即使买了也不会去用，即使界面美观也没用。

有些通用的软件系统如操作系统、文字处理软件等，面向的用户十分地广泛。

可是由于用户群体之间生活的环境不同，从而会存在年龄、性别、语言、教育程度的差异，进而导致使用习惯也有很大差异。

在设计软件界面之前，各类用户群体的使用习惯是我们需要迫切了解的，努力使用户在操作软件界面的时侯感觉不到麻烦，一般要为了适应各种类型的用户提供多种操作途径。

举例来说，Windows系统的文件管理器，对于一个初学电脑的人来说，他愿意使用鼠标、菜单一步一步慢慢地操作；

但是对于熟练使用电脑的人而言，快捷键也许是他更愿意用的。

不要试图让一款产品在差异很大的用户群体中得到适用，要把广泛的用户划分为多个用户群体，根据自己所在企业的实力，选择一个分市场来开发产品。

一款产品最好是只面向一个用户群体，这样容易设计而且质量也可靠。

2.2容易被理解

在用户使用界面前，一定要确保理解界面的意图。

以下措施可以提高用户界面的可理解性：

1.用户界面中的所有元素都不能有错误文字，也不能出现让人费解的文字。

2.图标一定要直观明了，最好让用户看到这个图标就能知道这是什么含义。

假如图标比较抽象，则应给图标加上文字说明，不让用户误解。

3.所有的界面元素应当给予有必要的提示。

4.界面结构要能够清晰地反映软件工作流程，这样用户就能有条不紊地操作。

5.没有先后逻辑关系的选择项，如姓名、标题等，可以按照字母排序，便于用户选择。

但是不要把功能菜单、有严格逻辑关系的状态集按照字母顺序排列。

2.3排错行考虑

用户在使用软件时，一些错误是时有发生的，当然也有一些是用户人为造成的，那么有什么方法来降低出错几率呢。

　　　1.排错应该遵循的细则。

　　　2.非正常中止的错误是最重要的，也最应该排除。

　　　3.应当尽可能防止用户无意输入无效的数据。

　　　4.采用一些控件限制用户输入数据的类型。

　　　5.如果可能作出的选择只有两个，可以采用单选框来减少用户输入的麻烦。

　　　6.当选择再多一些时，可以采用复选框。

　　　7.当选项很多时，可以采用列表框。

　　　8.在一个应用系统中，应当避免XX的操作，然后没有意义的操作也要避免。

　　　9.对于某些输入字符，可能会引起严重错误甚至会让系统出错，应该要加以限制或屏蔽。

　　　10.对于特殊符号，输入会与系统使用的符号产生冲突，该字符应该被阻止输入的。

　　　11.当用户产生错误的操作时，软件最好能够提供取消系列操作。

　　　12.对有些等待时间可能较长的操作软件最好能够提供取消功能。

　　　13.与系统正在使用的保留字符可能会产生冲突的一定要加以限制。

　　　14.在用户已输入的信息被系统读入时，可以根据需要选择来判断要不要去掉前后空格。

2.4最少操作步骤

　在设计用户界面的过程中，软件设计师应当尽可能多地为用户着想，让用户用最少的操作步骤完成某项任务，保证使用效率达到最高，最大程度地让用户满意。

　　尽管减少一个操作步骤所节约下来的时间很短，似乎可以忽略不计，但是让用户感觉起来，反差却很强烈。

而且如果每个环节都能节约一点，整个工程下来，节约的时间就很长了，所谓聚少成多。

　　界面设计师一定要在深入地分析熟悉软件的业务流程和用户使用习惯的基础上，才能设计出最少的操作步骤，使效率最大化。

2.5合理的布局

首先，一定的逻辑性要在界面的总体布局中体现出来，总体布局最好能够与工作流程吻合。

界面设计人员要在全面地了解软件需求的前提下，才能找到对界面布局有一定帮助的信息。

其次，对于窗口上的界面元素的布局有整齐清爽的要求。

界面元素要在水平方向对齐，或者在垂直方向上使界面元素对齐，还要保证一样的行、列间距。

要保证合适的窗体尺寸，界面元素不要放得太拥挤，在边界的地方要留有一定的空间，但是也不能太宽松，那样会显得零乱。

界面元素要保证一致对齐，以避免产生不齐整的视觉效果。

同类型界面元素要尽量在大小上保持一致，最起码在高度或宽度上一定要保证一样。

与逻辑有关系的元素应就近放置，这样用户方便操作一些。

另外要善于利用窗体的空白，还有分割用的线条。

2.6一致性

界面一致性的体现包含了诸多方面，其中最需要注意的是一下几点：

1.界面设计与企业营销的策略风格一致。

2.与不同产品操作界面的使用方法一致。

3.与同一产品不同版本的界面保持一致。

4.与用户的预期一起。

5.与页面元素一致。

6.产品在隐喻上的设计一致。

每件产品的用户族群都相当广泛，要与所有用户预期一致其实是很困难的。

但至少在评估这个话题时，可以首先界定目标用户群，分析用户需求，随之有效地探究界面一致性如何与用户预期吻合。

2.7色彩的选择与组合

在界面设计中，色彩的色调和组合关系会短时间起到“凝聚”用户视觉的作用，同时也会使用户产生心理的变化。

2.7.1色彩的联想

虽然色彩的联想作用在心理学范畴内，但是它的适用性却体现在了艺术设计中。

若不能够预测人是如何感知色彩的、如何发生作用的，也就不可能有效地应用色彩。

色彩的象征意义和心理暗示从人类的高级情感来分析，具体如下：

1.红色

红色是一种令人激奋的色彩。

它能使人产生冲动、愤怒、热情、活力的感觉。

这种色彩在女性和男性之间、衰老和年轻之间、内向和外向之间、意志薄弱和坚强之间，均倾向于后者。

红色最能引起人的视觉注意，因此，红色常被作为心理上的警示。

在逐渐变暗时，红色变得深沉而庄重；

反之则变得有激情而欢快。

在色环上，当红色变向紫色时，红色就逐渐由兴奋变为安静，变得浪漫、豪华、严肃、富裕、强大和优雅。

当红色在色环上偏近黄色时，红色就变得更加具有爆发力、煽动力和暴力倾向。

2.黄色

黄色能体现出快乐、希望和轻快的个性，它的明度是最高的，是一种自我膨胀和寻求幸运的颜色。

黄色还具有警示作用。

可能是对于马峰或黄蜂身上的黄黑条纹的恐惧联想，一般能马上注意到这种颜色搭配所暗示的危险的存在，这就是在现实生活中一些危险的地方，如变压器、停车位、放射性工作间等处，常能看见黄黑色设计的条纹和图表的原因。

3.蓝色

蓝色具有凉爽、清新、专业的个性。

在视觉上往往给人一种被动、静谧、深邃、潮湿、谨慎、忧郁、科技和理智的感觉。

他颇受成年人的喜爱，因为它表现得更加理智、更加成熟。

蓝色越深，就越显得深邃、遥远；

反之，便会引起人梦幻、童话、清凉的感受。

4.绿色

绿色具有黄色和蓝色的某些特征，使人联想到和睦、宁静、健康、坚定。

在色环上绿色偏近黄色时，就变得温暖、活泼、健康而无危害。

它加进一点白色，就可以产生一种女性的优雅和轻盈的感觉。

当在色环上偏近蓝色时，绿色就变得更加坚定、顽强和持久，这种颜色很能吸引那些能抵挡得住各种诱惑、有信念、办事稳妥并具有强烈自尊心的人。

绿色已得到了广泛的运用，它已被人们理解为安全、正常和成功的象征。

在街道上，绿色的灯表示可以安全通过。

绿色的区域是安全的，绿色的逃生标志引导人们在紧急情况下的逃生路线；

绿色的图标提示意味着一切正常等。

5.橙色

橙色也像绿色一样具有其他两种颜色的特征。

橙色是一种激奋的色彩，具有轻快、欢欣、开放、温馨、时尚、有活力、无拘束和感情洋溢的感觉。

据研究，在橙色的氛围里时人的活动没有任何拘束，因此橙色在很大程度上代表了温暖和真挚的感情。

6.紫色

紫色令人联想到昏暗、深刻、高贵、奢华、阴暗、悲哀、不可靠。

紫色越深，严格和呆板的效果就反映得越明显；

反之，明亮的紫色会比较容易显得没有主见、脆弱、易受刺激、温柔、寂寞。

值得注意的是，紫色特有的暧昧性、神秘性、不确定，在一些知识分子和社会文明程度较高的、想把处事和感情理性化的人群中受到普片的排斥。

7.白色

白色具有纯洁、完美、纯真、不可触及、不可接近、神圣的、空洞的、无限的感受。

白色常给人以光的联想，现在很多界面设计中具有透明质感的反光设计，实际上都是因为考虑到白色的特性。

它可以让画面有一种透气感，使得界面不但有清新明亮的感觉，而且没有压迫感，也没有沉闷感。

8.黑色

黑色具有深沉、神秘、寂静、压抑、高贵、消极、邪恶、坚定的感觉。

任何颜色和它放置在一起都会显得醒目而又有活力。

9.灰色

灰色具有中庸、平凡、温和、中立、单调、矛盾、厌世、高雅的感觉。

灰色越深，就越给人一种安定、沉稳、和谐的心理暗示。

它本身是一种缺乏活力的颜色，在视觉上具有次要地位。

综合灰色的特性，很多软件的界面设计都将不可执行的命令设计为灰色。

有些色彩给人的感觉是两极的，比如黑色有时给人沉默、空虚的感觉，但有时也感觉庄严、肃穆。

白色有时让人感觉到恐惧和悲哀，但有时却给人以无限的希望。

每种色彩在纯度透明上略微变化，就会使人产生不同的感觉。

2.7.2色彩的心里感受

色彩本是不带任何任何含义的，只是人的心里感觉把它们分成了不同的类别。

例如，在夏天挂上深绿色窗帘，不见一丝阳光，就会在心理上感到非常凉快。

这并不是现实中的温度产生了某些变化，而是因为色彩影响到了人的内心。

数字媒体界面的色彩是用户使用界面过程中引导用户行为和影响用户心里的重要因素。

1.冷暖

暖色能使人感受到温暖，而冷色则使人感到寒冷。

给人热情、刺激、前进、喜庆等感觉的是暖色；

给人寒冷、收缩、后退等感觉的是冷色。

在运用中常会见到色彩的冷暖对比，所以它非常重要。

2.轻重

中性色有黑色和白色，但它们不容易分别出冷暖，轻重之分却很明显，给人厚重感觉的是黑色，给人轻快感觉的是白色。

一般来说，重色彩明度不强，轻色彩明度强。

3.软硬

色彩的软硬感主要由明度和纯度来衡量，一般来说有软感得色彩明度高、纯度低；

有硬感的色彩明度低、纯度低。

4.进退

色彩的进退感是色彩对比中“显”和“隐”现象使人产生距离上差异造成的。

使人感到近的有红、黄、橙等暖色，使人感到远的有蓝、青、紫等冷色；

让人感到远的那些是明度低和纯度低的色彩，让人感到近的是那些明度高和纯度高的色彩。

5.强弱

与色彩的强弱感相关的有色相、纯度,还有配色对比。

在色相中，最强感的是红色；

有强感的色纯度高，而且对比度大；

有弱感的色纯度低，而且对比度小。

在无彩色系中，最具强感的是黑色，最具弱感的是白色。

6.膨胀收缩

暖色有膨大感，明度高；

冷色有收缩感，明度低。

在无彩色系中，有收缩感得是黑色，有膨大感的是白色。

7.明快忧郁

色彩的明快忧郁感与明度、纯度、色相、配色对比均有关系。

暖色、鲜艳色有明快感，明度高，纯度高；

冷色、阴晦色有忧郁感，明度低，纯度低。

有明快感的配色对比大，有忧郁感的配色对比小。

8.兴奋沉静

给人以兴奋感的有暖色和明度高的色以及纯度高的色；

给人以沉静感的有冷色和明度以及纯度低的色。

9.华丽朴素

给人以华丽感的色彩鲜艳、明度高；

具有朴素感的色彩晦涩、深谙。

有华丽感的色彩配色对比大、有色彩系；

有沉静感的色彩配色对比小；

有朴素感的色彩无彩色系。

2.7.3色彩组合

色彩组合原理基本上是从色彩的鲜明性、色彩的独特性、色彩的合适性、色彩的联想性4个方面来考虑的。

而色彩组合的总体原则也是界面设计的主要原则，即一致性。

为达到色彩对界面的易用和舒适的心里影响这一目的，在对色彩进行组合的过程中，有以下几种方法可以采用借鉴：

1.用一种色彩。

界面的色彩变化均基于该颜色进行透明度或饱和度的调节。

2.用两种颜色。

先选定一种颜色，然后选择其对比色，当然，这中间应考虑色饱和度的对比关系。

3.用一个色系里的颜色进行组合。

4.用黑色和一种彩色搭配。

针对界面设计，需要注意的是以下几点：

1.一个页面不要将所有颜色都用到，尽量控制在3中颜色以内。

2.背景和前文的对比差异尽量要大，花纹繁复的图案绝对不能用来作为背景，以免影响那些主要文字信息的读取。

3.避免不兼容得颜色大面积地放置在一起，如高饱和度的黄与蓝、红与绿等。

普遍的理论还有：

一致的色彩被用来构建整个色彩环境，冲突的色彩被用来显示变化和提示，柔和的色彩用来增强用户的舒适度和减少疲劳，跳跃的色彩用来彰显个性，合适的对比度用来增强文字或图形的可读性等。

2.7.4色彩分析实例（音乐播放软件千千静听）

从外观上上看，千千静听有多重配色方案。

高贵的黑色，淡雅的蔚蓝色，幽深的紫色，高贵的红色和银色，使每一个用户都能从中找到适合自己的、自己喜欢的外观。

紫色与黑色整体颜色的搭配，看起来非常的典雅。

中间又镶嵌点点蓝色，使得整个界面看起来富于变化,如图2.1。

图2.1紫色与黑色搭配

橘黄色和黑色的搭配，很具有跳跃性，很活泼，如图2.2.

图2.2橘黄色和黑色搭配

浅蓝和深蓝的搭配，清新自然，如图2.3。

图2.3浅蓝和深蓝搭配

银色，深灰和蓝色的搭配，看起来很干净，简单，如图2.4。

图2.4银色、深灰和蓝色搭配

第三章界面元素的设计

本文总结了常见界面元素的设计：

字体编排与设计，动态元素设计，声音的设计与运用，图标设计。

3.1文字编排与设计

文字是信息传递的主体。

从最初的纯文字界面发展至今，文字仍是其他任何元素无法取代的重要构件。

文字作为重要的界面构成元素，同时又是信息的重要载体，选用何种字体、何种大小、何种颜色、怎样与底色搭配、怎样排版，都深深影响着界面的视觉和运行效果。

设计人员应当为用户设置一些舒适又易读的文字方案，同时也可以用户自定义文字的字体、大小和颜色，让应用程序自适应用户的设定以保证文字的正常显示。

系统还应保证在不同的平台、屏幕分辨率下字体的正常显示。

界面设计中，文字除了注意显示问题，还应关注文字的表述方式需符合目标用户的语言认知习惯，这是实现界面易用性的一个方面。

界面的类型和用途千差万别，针对不同的界面应该有不同的文字设计方案，因此，具体的设计思路和技巧需要放置在不同的界面类型和界面设计目的中区考虑。

3.2动态元素设计

动态元素设计指的是界面中动与静的对比关系。

一般情况下动态的图像是直接地呈现在页面中，而出现的时候伴随着交互则是另一种情况。

画面也可以分两种情况呈现在画面中：

第一种不改变动态元素本身的位置，在页面中利用适当的面积和节奏来做动态效果，这样信息识别不会被扰乱。

据研究，图形变化节奏越快，就越能吸引人的视线。

所以，动态人员应保证动态的节奏以适应内容和信息传达的需要，比如可以让热点重要信息快节奏地闪烁来快速抓住用户的视线。

剩下一种情况是也可以让变化的单位产生位移，这种效果能让页面气氛变得活跃，但是在用的时候要谨慎，因为它经常干扰人的注意力，有时甚至会使用户的心情变得糟糕。

第二种情况指的是在交互设计过程中存在的动态效果，也就是切换页面和功能信息模块是产生的动态效果。

其所需要支持的技术也很多。

它可以通过变形、加入情景等方式新奇、有趣地过渡到下一页面。

在交互的过程中，鼠标滑过图标上方和点击产生的效果也可以有不同的动态效果设计，以增加交互过程中的趣味性和艺术行。

3.3声音的设计与运用

声音一直是界面中非常重要的信息表达方式。

虽然没有视觉信息那么强烈，但是恰当的声音设计可以让信息的隐喻更加丰富。

声音信息的解读比视觉信息的解读更加容易，这主要依靠用户的直觉感受与生活经验。

例如，警告音往往是对现实生活中警告的模拟。

声音信息和视觉信息的配合也是常见的信息传递模式。

在某些情境中，单有声音信息或视觉信息都无法准确表达出信息的含义，这时候两者的配合就显得很重要。

界面中的声音设计主要分为指令音的趣味性设计和结合主题的背景音乐的愉悦感和想象性设计。

1.背景音乐

不同的音乐有不同的感染力。

正如电影配乐一样，选用什么样的界面背景音乐也是非常重要的，好的界面背景音乐能给人带来美的享受，减轻操作上带来的疲劳和乏味，还可以烘托主题，让人产生丰富的联想，从而产生积极的互动行为和消极欲望。

2.指令音

指令音虽然短暂，但它可以通过设计来烘托内容，提前给用户以心理的暗示。

结合界面类型和风格而设计的指令音，不但可以体现界面使用的整体性和一致性，还因为反馈功能成为界面易用性实现的一个参考指标。

在现实的界面设计中，并非是把界面的总体规划与界面元素设计分割开来进行，这两者虽然在考虑的顺序上存在很小的差异，但更加重要的是，作为一个界面系统整体的设计，任何割裂开来分析设计问题都是不允许和不明智的做法，因此，对界面各个方面的设计其实是互相穿插存在的，任何一方面的设计都带有其他方面的元素思考。

3.4图标设计

图标设计是界面设计中非常重要的部分，但很多书籍把太多的注意力投入到设计的过程和手段方面，对它的科学性关注不够。

仔细研究当今的图标设计，可以发现有以下不足之处：

常以美为导向，图标的外观效果被给予了太多的关注，却很少去关注内容的选择；

常把设计当作导向，以设计师的爱好为图标内容的选择标准，不管用户的感受；

图标的设计没有规则，即使同一系统的图标之间也没有任何关联性和相似性。

以下是应该引起注意的一些地方：

1.识别图标区别于一般的图形，很好的视觉识别功能是他必须具备的。

图标的出现和存在价值就是为了让人们识别，所以在图标设计中，形式美并不是关键，能不能准确地被识别才是设计师的首要目标。

好的图标有两个优点，一是功能一目了然，二是用户在明白图标的意思，可以引领所有相似的工具都使用和它一样的绘图语言。

图标在变成范例后，它就不可动摇。

有的软件开发者想试图改变范例，但这要承担令部分用户没有办法理解的风险。

太简洁的符号会影响用户理解。

即使用户以前知道意思，长时间后，也不可能留下很多印象。

假如图标中没有唤起记忆的要素，那么要想靠表面视觉来理解图标的意思就会比较困难，这个有时会让用户放弃使用。

因此在选择隐喻对象的时候一定要慎重。

容易被识别的图标可以帮助用户使用某些功能，容易产生歧义的图标，尽管有好看的外表，甚至于具有一定的可比性，但那也是不可用的。

2.一致

就图标设计来言，一致性主要表现在3个方面。

（1）同一图标家族。

从前面的介绍来看，同一图标需要根据具体的应用环境，来设计出不同尺寸和色深度的图标家族成员。

但是尺寸和色深度的变动，使得设计师要保持图标外观上的一致成了一项困难的工作。

但是不管怎样，大图标与小图标相比要相似，彩色的图标与黑白图标也要感觉不出差别，这样子用户在不同的显示环境下才能正常地使用软件。

具体的来说，应该要从色深度较高的大图标展开设计，然后再根据具体要求，弱化那些不重要的内容，删除那些无法保留的内容，最后强化在图形中一些结构上的因素，这样各种版本感觉差不多就行了。

（2）应用程序和操作系统的图标要尽可能一致。

每一次操作系统的更新也到了应用软件更新的时候，软件开发商不仅仅要升级功能，还要在图形界面的风格上尽全力地追求与操作系统的一致性，这样做也是为了让用户能够在完美和谐的环境下工作。

3.兼容

图标的兼容指的是图标在不同的文化语义下都能被识别为同样的内容和意义。

文件夹、画笔等等都是广泛隐喻的经典范烈。

在一种文化语义下理解的事物到了另一种文化语义下就可能不被理解，或者会被理解为其他意义。

例如，用圆形、点和短线构成的图形，在大多数地方都能被理解为船舵，而在非洲某些没有船舵的部族则可能理解不了，他们可能觉得是太阳。

在中国文化背景下，鱼可以理解为年年有余，是富裕的期望，在其他文化中，就会觉得中国人的这种联系很奇怪。

即使在同一大文化背景下，也会因为次级的语义环境而产生不同的理解。

所以在设计图标时要充分考虑到各种用户在理解上的差异，确保不会发生理解上困难和偏差。

4.避免文字

尽量不要在图标中运用文字。

图标中的文字可能会让人感到不知该怎么办，导致阻碍跨文化上的交流。

图形的特点主要在于它的直观性，可以通过模拟已有的东西，让用户凭借简单的视觉对比和经验就能知道图形代表的内容及含义。

语言则不是这样的，世界各地甚至于同一国家里人们使用的语言都是不太一样的，因此在母语国家看起来容易被理解的文字，对其他国家及地区的人来说那就是天书。

5.为显示而设计

图标应该要在当前的显示器分辨率下，如果看起来比较好才行。

因为一个个的像素点在一起就组成了屏幕，水平或垂直的直线以及斜线具有较好的显示效果。

曲线的显示效果