界面设计方案.doc

界面设计方案.doc

《界面设计方案.doc》由会员分享，可在线阅读，更多相关《界面设计方案.doc（63页珍藏版）》请在冰点文库上搜索。

界面设计方案

目录

一、概述 3

二、用户界面设计原则 3

三、关于软件界面设计 5

1．用户导向（Useroriented）原则 5

2．KISS（KeepItSimpleAndStupid）原则 6

3．布局控制 6

4．视觉平衡 7

5．色彩的搭配和文字的可阅读性 8

6．和谐与一致性 9

7．个性化 9

四、关于网页界面设计 10

五、交互设计 11

六、图标 11

七、界面设计需求分析 11

八、界面参考 12

福隆界面设计 12

其他界面欣赏 15

1.WebQQ 15

2.一个虚拟展会软件的中国官网设计 16

3.香港置地集团 20

4、图标 23

5.景观园林 28

6.一组精美的外国网页 30

7、匈牙利M1LLAH网页界面欣赏 38

8、Webdesign页面设计收集 42

9.色彩与质感并重的国外网页设计欣赏 47

10、漂亮简洁的布局 56

一、概述

界面设计是人与机器之间传递和交换信息的媒介，包括硬件界面和软件界面，是计算机科学与心理学、设计艺术学、认知科学和人机工程学的交叉研究领域。

近年来，随着信息技术与计算机技术的迅速发展，网络技术的突飞猛进，人机界面设计和开发已成为国际计算机界和设计界最为活跃的研究方向。

　　UI即UserInterface（用户界面）的简称。

UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。

好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。

二、用户界面设计原则

　　1.简易性

　　界面的简洁是要让用户便于使用、便于了解、并能减少用户发生错误选择的可能性。

　　2.用户语言

　　界面中要使用能反应用户本身的语言，而不是游戏设计者的语言。

　　3.记忆负担最小化

　　人脑不是电脑，在设计界面时必须要考虑人类大脑处理信息的限度。

人类的短期记忆极不稳定、有限，24小时内存在25%的遗忘率。

所以对用户来说，浏览信息要比记忆更容易。

　　4.一致性

　　是每一个优秀界面都具备的特点。

界面的结构必须清晰且一致，风格必须与游戏内容相一致。

　　5.清楚

　　在视觉效果上便于理解和使用。

　　6.用户的熟悉程度

　　用户可通过已掌握的知识来使用界面，但不应超出一般常识。

　　7.从用户的观点考虑

　　想用户所想，做用户所做。

用户总是按照他们自己的方法理解和使用。

　　通过比较两个不同世界（真实与虚拟）的事物，完成更好的设计。

如：

书籍对比竹简。

　　8.排列

　　一个有序的界面能让用户轻松的使用。

　　9.安全性

　　用户能自由的作出选择，且所有选择都是可逆的。

在用户作出危险的选择时有信息介入系统的提示。

　　10.灵活性

　　简单来说就是要让用户方便的使用，但不同于上述。

即互动多重性，不局限于单一的工具（包括鼠标、键盘或手柄）。

　　11.人性化

　　高效率和用户满意度是人性化的体现。

应具备专家级和初级玩家系统，即用户可依据自己的习惯定制界面，并

　　能保存设置。

三、关于软件界面设计

　　软件用户界面（SoftwareUserInterface）是指软件用于和用户交流的外观、部件和程序等等。

如果你经常上网的话，会看到很多软件设计很朴素，看起来给人一种很舒服的感觉；有点软件很有创意，能给人带来意外的惊喜和视觉的冲击；而相当多的软件页面上充斥着怪异的字体，花哨的色彩和图片，给人网页制作粗劣的感觉。

软件界面的设计，既要从外观上进行创意以到达吸引眼球的目的，还要结合图形和版面设计的相关原理，从而使得软件设计变成了一门独特的艺术。

通常的讲，企业软件用户界面的设计应遵循以下几个基本原则：

1．用户导向（Useroriented）原则

　　设计网页首先要明确到底谁是使用者，要站在用户的观点和立场上来考虑设计软件。

要作到这一点，必须要和用户来沟通，了解他们的需求、目标、期望和偏好等。

网页的设计者要清楚，用户之间差别很大，他们的能力各有不同。

比如有的用户可能会在视觉方面有欠缺（如色盲），对很多的颜色分辨不清；有的用户的听觉也会有障碍，对于软件的语音提示反映迟钝；而且相当一部分用户的计算机使用经验很初级，对于复杂一点的操作会感觉到很费力。

另外，用户使用的计算机机器配置也是千差万别，包括显卡、声卡、内存、网速、操作系统以及浏览器等都会有不同。

设计者如果忽视了这些差别，设计出的网页在不同的机器上显示就会造成混乱。

2．KISS（KeepItSimpleAndStupid）原则

　　KISS原则就是"KeepItSimpleAndStupid"的缩写，简洁和易于操作是网页设计的最重要的原则。

毕竟，软件建设出来是用于普通网民来查阅信息和使用网络服务。

没有必要在网页上设置过多的操作，堆集上很多复杂和花哨的图片。

该原则一般的要求，网页的下载不要超过10秒钟（普通的拨号用户56Kbps网速）；尽量使用文本链接，而减少大幅图片和动画的使用；操作设计尽量简单，并且有明确的操作提示；软件所有的内容和服务都在显眼处向用户予以说明等。

3．布局控制

　　关于网页排版布局方面，很多网页设计者重视不够，网页排版设计的过于死板，甚至照抄他人。

如果网页的布局凌乱，仅仅把大量的信息堆集在页面上，会干扰浏览者的阅读。

一般在网页设计上所要遵循的原理有：

（1）Miller公式。

根据心理学家GeorgeA.Miller的研究表明，人一次性接受的信息量在7个比特左右为宜。

总结一个公式为：

一个人一次所接受的信息量为7±2比特。

这一原理被广泛应用于软件建设中，一般网页上面的栏目选择最佳在5～9个之间，如果软件所提供给浏览者选择的内容链接超过这个区间，人在心理上就会烦躁，压抑，会让人感觉到信息太密集，看不过来，很累。

例如Aol点com的栏目设置：

Main、MyAol、Mail、People、Search、Shop、Channels和Devices共八个分类。

Msn点com的栏目设置：

MSNHome、MyMSN、Hotmail、Search、Shopping、Money和People&Chat共七项。

然而很多国内的软件在栏目的设置远远超出这个区间。

（2）分组处理。

上面提到，对于信息的分类，不能超过9个栏目。

但如果你的内容实在是多，超出了9个，需要进行分组处理。

如果，你的网页上提供几十篇文章的链接，需要每隔7篇加一个空行或平行线做以分组。

如果你的软件内容栏目超出9个，如微软公司的软件，共有11个栏目，超过了9个。

4．视觉平衡

　　网页设计时，也要各种元素（如图形、文字、空白）都会有视觉作用。

根据视觉原理，图形与一块文字相比较，图形的视觉作用要大一些。

所以，为了达到视觉平衡，在设计网页时需要以更多的文字来平衡一幅图片。

另外，按照中国人的阅读习惯是从左到右，从上到下，因此视觉平衡也要遵循这个这个道理。

例如，你的很多的文字是采用左对齐〈Align=left〉，需要在网页的右面加一些图片或一些较明亮、较醒目的颜色。

一般情况下，每张网页都会设置一个页眉部分和一个页脚部分，页眉部分常放置一些Banner广告或导航条，而页脚部分通常放置联系方式和版权信息等，页眉和页脚在设计上也要注重视觉平衡。

同时，也决不能低估空白的价值。

如果你的网页上所显示的信息非常密集，这样不但不利于读者阅读，甚至会引起读者反感，破坏该软件的形象。

在网页设计上，适当增加一些空白，精炼你的网页，使得页面变的简洁。

5．色彩的搭配和文字的可阅读性

　　颜色是影响网页的重要因素，不同的颜色对人的感觉有不同的影响，例如：

红色和橙色使人兴奋并使得心跳加速；黄色使人联想到阳光，是一种快活的颜色；黑颜色显得比较庄重，考虑到你希望对浏览者产生什么影响，为网页设计选择合适的颜色（包括背景色、元素颜色、文字颜色、链节颜色等）。

　　为方便阅读软件上的信息，可以参考报纸的编排方式将网页的内容分栏设计，甚至两栏也要比一满页的视觉效果要好。

另一种能够提高文字可读性的因素是所选择的字体，通用的字体（Arial，CourierNew，Garamond，TimesNewRoman，中文宋体）最易阅读，特殊字体用于标题效果较好，但是不适合正文。

如果在整个页面使用一些特殊字体（如Cloister，Gothic，Script，Westminster，华文彩云，华文行楷），这样读者阅读起来感觉一定很糟糕。

该类特殊字体如果在页面上大量使用，会使得阅读颇为费力，浏览者的眼睛很快就会疲劳，不得不转移到其他页面。

6．和谐与一致性

　　通过对软件的各种元素（颜色、字体、图形、空白等）使用一定的规格，使得设计良好的网页看起来应该是和谐的。

或者说，软件的众多单独网页应该看起来像一个整体。

软件设计上要保持一致性，这又是很重要的一点。

一致的结构设计，可以让浏览者对软件的形象有深刻的记忆；一致的导航设计，可以让浏览者迅速而又有效的进入在软件中自己所需要的部分；一致的操作设计，可以让浏览者快速学会在整个软件的各种功能操作。

破坏这一原则，会误导浏览者，并且让整个软件显的杂乱无章，给人留下不良的印象。

当然，软件设计的一致性并不意味着刻板和一成不变，有的软件在不同栏目使用不同的风格，或者随着时间的推移不断的改版软件，会给浏览者带来新鲜的感觉。

7．个性化

（1）符合网络文化

　　企业软件不同于传统的企业商务活动，要符合Internet网络文化的要求。

首先，网络最早是非正式性、非商业化的，只是科研人员用来交流信息。

其次，网络信息是只在计算机屏幕上显示而没有打印出来阅读，网络上的交流具有隐蔽性，谁也不知道对方的真实身份。

另外，许多人在上网的时候是在家中或网吧等一些比较休闲，比较随意的环境下。

此时网络用户的使用环境所蕴涵的思维模式与坐在办公室里西装革履的时候大相径庭。

因此，整个互联网的文化是一种休闲的、非正式性的、轻松活泼的文化。

在软件上使用幽默的网络语言，创造一种休闲的、轻松愉快、非正式的氛围会使软件的访问量大增。

（2）塑造软件个性

　　另外，软件的整体风格和整体气氛表达要同企业形象相符合并应该很好的体现企业CI。

在这方面比较经典的案例有：

可口可乐个性鲜明的前卫软件"LifeTastesGood"；工整、全面、细致的通用电气公司软件"Webringgoodthingstolife（GE带来美好的生活）"；崇尚科技创新文化的3M公司软件"Creatingsolutionsforbusiness、industryandhome"；刻意扮演一个数字电子娱乐之集大成者的角色，要成为新时代梦想实现者的索尼软件；平易近人、亲情浓郁的通用汽车公司软件体现了"以人为本"的企业定位和营销策略；服务全面、细致、方便，处处体现"宾至如归"服务理念的希尔顿大酒店软件。

四、关于网页界面设计

　　网页界面设计不同于一般的平面设计,拥有自身的设计特征。

网页界面设计应时刻围绕“信息传达”这一主题来进行。

目前网页界面传达的信息主要是视觉信息。

因此从设计类型上来看,网页界面设计属于视觉传达的领域,故而网页界面设计的主要视觉元素和设计指导原则都要遵循视觉传达的一般规律。

网页界面设计师在视觉传达的工作,就是通过有效吸引视线的艺术形式使信息得以清晰、准确、有力地传达。

五、交互设计

　　交互设计是指设计人和产品或服务互动的一种机制,以用户体验为基础进行的人机交互设计是要考虑用户的背景、使用经验以及在操作过程中的感受，从而设计符合最终用户的产品，使得最终用户在使用产品时愉悦、符合自己的...

　　GUI（GraphicalUserInterface）是一种结合计算机科学、美学、心理学、行为学，及各商业领域需求分析的人机系统工程，强调人机环境三者作为一个系统进行总体设计。

这种面向客户的系统工程设计其目的是优化产品的性能...

六、图标

　　图标在人机交互设计中无所不在。

随着人们对审美、时尚、趣味的不断追求，图标设计也不断花样翻新，越来越多精美、新颖、富有创造力和想像力的图标充...

七、界面设计需求分析

任何一个成功的产品都是建立在对需求的准确把握之上的。

需求分析对于新产品的开发或者已有产品的改进升级是不可缺少的早期环节之一。

许多设计项目在还没有很好地理解用户需求甚至几乎对用户需求完全不清..

八、界面参考

福隆界面设计

关注信息：

类似综合首页。

用户可以想把关注的模块信息显示在这里。

模块可拖动可配置。

快捷方式：

用户可以自定义快捷方式的分类。

并可添加、修改、删除快捷方式。

智能报表：

分为全厂报表和车间报表。

其他界面欣赏

1.WebQQ

2.一个虚拟展会软件的中国官网设计

3.香港置地集团

4、图标

5.景观园林

6.一组精美的外国网页

7、匈牙利M1LLAH网页界面欣赏

8、Webdesign页面设计收集

9.色彩与质感并重的国外网页设计欣赏

10、漂亮简洁的布局