当前位置:文档之家› 软件界面设计

软件界面设计

软件界面设计
软件界面设计

第一章绪论

1.1 课题的研究背景和意义

用户来看一个软件首先是通过界面的,通过界面来感知软件的好坏,界面关乎着一个软件的形象。软件界面设计是产品开发中最重要的方面。界面设计师必须要牢记:界面是面向用户的。开发者开发的软件必须满足用户的需求,并且保证软件易于使用。

重视用户界面设计有重要的意义。用户界面设计得越直观,越易用,越美观,用户就使用得越方便,越舒服,培训用户、维护系统的成本就越低。客户支持成本降低了,系统就会更便宜,同时,也将获得更多的用户好感和订单,企业的效益就会更好。

1.2 软件界面设计的现状和基本对策

尽管软件行业有许多技术出色的软件工程师,但多数工程师开发出来的软件既不好用又不美观。客户对软件界面非常的不满意,经常要修改软件界面,导致极大的生产力浪费。用户满意的好界面都是软件企业想要做的,但是他们却不知道怎么做。

软件界面设计一直以来都是中国软件行业的弱项,这里存在两方面行业共性问题:一是缺乏系统性的软件界面设计方法和相关的教育;这也导致了第二个问题“缺乏优秀的界面设计师和熟练的界面程序员”。

千万不要认为软件开发就是编程,仅懂编程的人,绝不可能做出好的软件系统。要成为优秀的软件人才,仅学会编程语言是远不够的。

系统性的科学技术教育是国内理工科大学的计算机和软件专业偏向的重点。基础课程有物理、数学、电学等,专业课程有数据库、网络管理、编程语言等等。而且每门课程都有很好的教材,有的是国外外文的,而且有很好的老师。所以国内理工科大学要培养出大量技术功底扎实的软硬件研发人才并不难。

相比照之下,软件界面设计专业的教育就差得远了。既缺乏好的教材,又缺乏优秀的教师。

因为计算机软件专业学生接受的教育几乎都是科学技术理论知识,他们对于设计出易用美观的用户界面感到很茫然,许多人甚至不知道还有界面设计这回事。

我们把软件界面开发分为三个环节:交互设计、视觉设计和程序实现。企业希望界面设计师负责“交互设计和视觉设计”,由熟练的程序员实现这个界面,这个要求其实并不高,但现实情况却不理想。

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

大多数人都认为界面设计是美工人员的事情,否则公司招聘美工人员有什么用?编程实现是在美工人员完成界面设计后进行,由程序员负责的,至于界面设计好不好程序员不去管。

美工人员大多是美术相关类专业毕业,他们的优点是擅长于视觉设计,缺点是:不知道待开发软件系统的业务逻辑,不了解用户的特征,难以开展交互设计;不懂得软件技术,他们不了解自己做出来的界面在技术实现方面的难易程度。

千万不要低估界面实现的难度,界面不是想做就能做得出的。有些Web软件界面控件,不仅要功能好、性能好,还要易用,可以说技术难度非常高,这不是一般程序员能做得好的。

可见美工人员并不属于理想的软件界面设计师。就目前情形来看,既能做好交互设计又能做好视觉设计的界面设计师还是比较少见的,能够在做好交互设计、视觉设计的基础上再做好程序实现的人更加罕见。

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

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

本论文总结了软件界面设计应遵循的原则:以目标用户为中心,容易被理解,反馈操作信息,排错性考虑,最少步骤(最高操作效率),合理的布局,色彩的选择与组合。读者(开发者)理解这些设计原则的含义后,要结合准备的开发软件的基本特征,进一步融会和细研究,从而确定开发软件的界面设计原则。

2.1 以用户为中心

以用户为中心,这是第一重要的界面设计原则,关系着软件的好坏。不以目标用户为中心开发出来的界面,用户不会购买,即使买了也不会去用,即使界面美观也没用。

有些通用的软件系统如操作系统、文字处理软件等,面向的用户十分地广泛。可是由于用户群体之间生活的环境不同,从而会存在年龄、性别、语言、教育程度的差异,进而导致使用习惯也有很大差异。在设计软件界面之前,各类用户群体的使用习惯是我们需要迫切了解的,努力使用户在操作软件界面的时侯感觉不到麻烦,一般要为了适应各种类型的用户提供多种操作途径。

举例来说,Windows系统的文件管理器,对于一个初学电脑的人来说,他愿意使用鼠标、菜单一步一步慢慢地操作;但是对于熟练使用电脑的人而言,快捷键也许是他更愿意用的。

不要试图让一款产品在差异很大的用户群体中得到适用,要把广泛的用户划分为多个用户群体,根据自己所在企业的实力,选择一个分市场来开发产品。一款产品最好是只面向一个用户群体,这样容易设计而且质量也可靠。

2.2 容易被理解

在用户使用界面前,一定要确保理解界面的意图。以下措施可以提高用户界面的可理解性:

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

2.图标一定要直观明了,最好让用户看到这个图标就能知道这是什么含义。假如图标比较抽象,则应给图标加上文字说明,不让用户误解。

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

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

5.没有先后逻辑关系的选择项,如姓名、标题等,可以按照字母排序,便于用户选择。但是不要把功能菜单、有严格逻辑关系的状态集按照字母顺序排列。

2.3 排错行考虑

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

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

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

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

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

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

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

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

8.在一个应用系统中,应当避免未经授权的操作,然后没有意义的操作也要避免。

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.为显示而设计

图标应该要在当前的显示器分辨率下,如果看起来比较好才行。因为一个个的像素点在一起就组成了屏幕,水平或垂直的直线以及斜线具有较好的显示效果。曲线的显示效果不太理想,不规则的像素排列会形成锯齿状,影响线条的流畅性。

即使现在许多系统都支持真彩色,对图标尺寸的限制也可以放宽,图标的设计自由度和变化越来越大,但这也并不意味着可以随意设计。一方面,用户的显示器不太一样,即便使用同一操作系统,也要照顾到好坏不一的显示效果。

6.图标示例

操作图标

提示图标

第四章软件界面设计流程

4.1 目标用户研究

在界面产品越来越面对个人用户的今天,以用户为中心的设计方法成为设计人员的第一选择。在这一设计方法体系中,目标用户研究有着非常重要的位置,其工作有可能是在设计之初,也有可能贯穿于整个设计过程中。

在用户研究中,人体工程学、心理工程学、社会学、和组织行为学都会提供有益的指导。用户的背景,如性别、年龄、文化背景、职业、受教育程度、经历、身体条件;用户的工作环境,如周围的物理环境、工作设备、社会和文化的影响;用户的任务组织,如任务种类、工作流程,都是需要深入调查与分析的。

在目标用户研究的第一步,就是定义界面设计面向的用户群体,即如何定义目标用户并找到合适的用户研究对象。一般可以设定一些参数来对目标用户进行定义。例如,要设计一个用于手机无线环境下的银行支付软件界面,可以使用两个参数来定义目标用户:使用手机无线平台的经验;使用银行支付系统的经验。

进行用户定义的目的是为了在进行用户研究时找到正确的用户进行研究,而不会因为找不到恰当的用户导致结果错误。

用户研究的方法有很多,常用的包括间接收集资料、展开问卷调查、实境调查、观察、访谈级焦点小组等。把这些方法进行分类,大致可以分为背景调查、观察、访谈3大类。

1.背景调查

这一方法的核心是输入现有的背景资料,输出对于用户研究有用的信息。具体的方法有:

(1)间接收集资料

在分析类别中,最重要的研究方法是间接分析资料,也就是在图书、报刊、互联网上搜集与设计内容相关的各种背景资料。该方法的优势在于能在很短的时间内获取大量与设计相关,也是非常有价值的。

但是搜集的这些间接资料,有几个问题需要注意:

1)时效性。

2)重复资料。

3)非权威资料

(2)竞争对手分析

无论是成功的产品还是失败的产品,竞争对手的产品都是非常重要的研究对象。对于成功的竞争产品,需要对其设计、商品表现进行分析,获得有益的设计经验;对于失败的竞争产品,则要从失败的原因入手,避免同样的错误发生在自己身上。

2.观察

观察是用户研究方法中最常用到的类型。观察法需要设计人员进入到用户使用同类界面的情境中去,直接接触用户及系统,能够方便地获取大量的第一手资料。但观察法也有其弱点,那就是需要耗费较长的时间和较多的费用。

通过观察,设计人员可以获得一下信息:用户的使用环境;环境对界面的影响;用户完成一个任务的过程、用户是否同时还在使用其他的产品或界面;什么任务占去了用户大量的时间;用户使用产品交互系统的方式;用户在使用什么术语等。

具体方法有以下两种:

(1)跟随影子法。由字面意思可想到,跟随影子法师指用户使用界面系统时设计人员跟随着用户的操作进行观察,就好像是用户的影子。在跟随过程中,设计人员可以了解到用户的使用习惯,体会到用户使用系统的感受,还可以和用户进行交流、沟通。当然,这些都是第一手资料,仅用笔来记录是完全不够的,应当同时进行拍照、录音或摄像,以便于进行整理和总结。

(2)观察视频。观察视频可以分为两种:一种是让用户都在实验室进行,对于环境影响较小的界面系统研究是可以采用这种方式,如网页使用研究。而对于与环境关系密切的界面系统,如家庭娱乐系统,则可以把摄像设备安装在用户熟悉的环境里,如用户的家里。

3.访谈

访谈是一种传统的用户研究方法,由于其实施方便、成本低廉而被大量采用。主要方式如下:

(1)面谈

这种方法能够在面对用户的情况下进行深度的讨论,从而获得有价值的信息。主要缺点是效率低,因为面谈每个用户会花费较多的时间。

面谈对于研究人员的要求较高,一是要求研究人员对相关界面系统了解程度必

须很高,二是提问的方式和内容不能对用户有暗示或不良的引导,三是不能有让用户感到紧张的提问。

不恰当的提问可能有一下几种:

1)带有引导性的问题,例如:“这个产品有多不方便?”

2)不够中立的例子。

3)提问中带有设计人员自己的倾向。

4)不明确的问题,让用户无法回答。

5)过于直白的提问,容易引起用户的自我防备,例如:“你在使用过程中犯了多少次错误?”

设计人员应当尽量精心准备问题,“这个产品有多不方便?”这样的问题可以改成“谈一下使用这个产品的感受”,在放松的状态下,如果有不方便的地方用户自然会提到。“你在使用过程中犯了多少次错误?”这样的问题可以改成“你能谈一下这个产品不能完成某个任务的情况吗?”

(2)问卷调查

随着互联网的渗透,使用互联网进行问卷调查已经变得非常方便和快捷。如果是简单的用户数据收集与研究对象招募,可以使用一些社交网站上的调查工具,。一些专业的问卷调查也可以帮助设计人员轻松地完成调查。

4.2 交互设计

界面中的交互设计是指用户面对界面系统时对信息进行的各种操作以及系统对用户额反馈。交互设计的主要目的是让用户顺利地使用界面,因此,界面设计的易用性因素是交互设计的重点。交互设计主要有一下要点:

1.预设用途

预设用途一次也能翻译成示能性,是指物品被认为具有的性能以及实际上的性能。

在界面设计中,这一概念非常重要。与直接模拟形象的设计方法不同,预设用途主要提供了一种使用界面的线索以及使用界面上某一元素的因果关系,而不仅是形象上的相似。界面中最常见的预设用途是网页中的链接。蓝色的文字会告诉用户此处是一个链接热区,单击就会有新的页面或内容出现,鼠标经过时链接也会显示

系统软件详细设计说明书

系统软件详细设计说明书 1.引言 编写目的 本详细设计说明书是针对网络信息体系结构的课程作业而编写。目的是对该项目进行详细设计,在概要设计的基础上进一步明确系统结构,详细地介绍系统的各个模块,为进行后面的实现和测试作准备。本详细设计说明书的预期读者为本项目小组的成员以及对该系统感兴趣,在以后想对系统进行扩展和维护的人员。 2. 系统的结构 ui client preview search common ui:系统界面部分,负责接受用户输入,显示系统输出,负责其他模块功能的协调调用,并含有站内搜索功能,即在用户指定的已打开的ftp站点中搜索用户需要的资源。ui

部分调用common部分的功能读取xml文件中保存的界面元素属性信息,用户最近访问过的10个ftp信息,用户选择的下载的ftp内容列表及其他需要通过xml文件保存的信息。 client:实现ftp客户端的功能,ftp连接,ftp上传及下载:上传或下载用户指定的资源,并返回相应的信息。 search:资源实时检索部分,根据用户输入的资源名称关键字,资源类型和选择的检索方式检索用户需要的资源,并验证资源的可用性,返回可用资源及其大小,速度等相关信息。 preview:资源预览部分,显示用户选择的资源的部分内容,以使用户决定是否需要该资源。preview部分调用common部分读取属性文件的内容亦显示预览资源内容的显示格式。 3.模块1(ui)设计说明 模块描述 实现用户界面的包,含有11个文件51个类,是本系统中最复杂的代码。 功能 负责接受用户输入,显示系统输出,其他模块功能的协调调用,并含有站内搜索功能,即在用户指定的已打开的ftp站点中搜索用户需要的资源。 交互的模块 client,search,preview,common。 模块设计 该模块中的主要文件,文件中包含的主要类及其功能和与其它包的交互如下::MainFrame是含有主函数的类,也是lyra客户端开始执行的类,它先后进行资源的初始化,显示主界面等工作,根据屏幕大小设置界面大小,设置界面的观感。 :显示关于窗口的类,当用户点击帮助菜单中的关于菜单项时会弹出关于对话框。 :FileTools是文件操作辅助类,可以实现文件的递归删除等。

项目开发详细设计说明书(超好用模板)完整版

详细设计说明书XX有限公司

修订记录

目录 第一章概述........................................................................... 错误!未定义书签。 1.1.应用模块的目的....................................................... 错误!未定义书签。 1.2.应用模块总体描述................................................... 错误!未定义书签。 1.3.应用模块接口描述................................................... 错误!未定义书签。 1.4.假设条件................................................................... 错误!未定义书签。第二章设计模式(Design pattern) ................................... 错误!未定义书签。第三章类设计....................................................................... 错误!未定义书签。 3.1.分块类图................................................................... 错误!未定义书签。 <类图1> ............................................................ 错误!未定义书签。 <类图n> ............................................................ 错误!未定义书签。 3.2.整体继承关系........................................................... 错误!未定义书签。 3.3.类描述....................................................................... 错误!未定义书签。 <类名1> Class Description............................. 错误!未定义书签。 <类名n> Class Description............................. 错误!未定义书签。第四章交互图....................................................................... 错误!未定义书签。 4.1.<情景编号1: 情景名称> ........................................ 错误!未定义书签。 交互图................................................................ 错误!未定义书签。 例外情况及条件................................................ 错误!未定义书签。 4.2.<情景编号n: 情景名称> ........................................ 错误!未定义书签。第五章状态图....................................................................... 错误!未定义书签。 5.1.<状态图编号1:状态图名称> .................................. 错误!未定义书签。 5.2.<状态图编号n:状态图名称> .................................. 错误!未定义书签。第六章时序流程图............................................................... 错误!未定义书签。第七章用户界面设计说明................................................... 错误!未定义书签。 7.1.用户界面关系........................................................... 错误!未定义书签。 7.2.用户界面具体描述................................................... 错误!未定义书签。 <界面编号1:界面名称〉 ................................. 错误!未定义书签。 <界面编号N:界面名称〉 ................................ 错误!未定义书签。

软件界面设计复习题

软件界面设计复习题

————————————————————————————————作者: ————————————————————————————————日期:

一、名词解释 1、人机界面:在人与机器的交互过程中,有一个界面充当信息传递的媒介,即人们所说的人机界面。 2、最大最小原则:即人承担的工作量应尽量少或最少,机器承担的工作量应最大,在最大限度利用机器的同时,充分发挥人的积极因素。 3、认知心理学:就是关于认识的心理学,研究人的认识心理过程,如注意、知觉、表象、记忆、思维和语言等,从心理学的观点研究人体交互的原理。 4、人机工程学:是运用生理学、心理学和医学等有关知识,研究人、机器、环境相互间的合理关系,以保证人民安全、健康、舒适地工作。 5、软件界面:也叫软件人机界面,是人与机器之间的信息界面,用户与机器的交互主要是通过软件界面完成。 6、人机交互(人机对话):是指人与计算机之间使用某种语言、以一定的交互方式,为了完成任务进行的一系列信息交换过程。 7、人机交互系统:是指实际完成人机交互的系统,可以认为它是由参与交互的各方所组成,如包括人和计算机双方的人机交互系统。 8、人机交互方式:是指人机之间交换信息的组织形式或语言方式,又称对话方式、交互技术等。 9、交互介质:是指用户和计算机完成人机交互的媒体。 二、填空题 1、美国人类工程学会(HumanFactors and Ergonomics Society)曾定义可用性的五大属性为:效率、可学习性、可记忆性、容错性、满意程度。 2、目前常用的人机交互方式有:问答式对话; 菜单技术;命令语言;填表技术;查询语言;图形方式及直接操纵;自然语言等。 3、交互介质一般分为:输入介质;输出介质。 4、在进行界面设计时,都要考虑这些人文因素。人文因素主要包括以下内容:人机匹配性;人的固有技能;人的固有弱点;用户的知识经验和受教育程度;用户对系统的期望和态度。5、设计界面是以功能性界面为基础,以环境性界面为前提,以情感性界面为重心而构成的,它们之间形成有机和系统的联系。 6、删除文件的DOS命令语法为:DEL[/P][/F][/S][/Q][/A[[:]attributes]]names。 7、命令语言目标:准确、紧凑、易于读写、加快学习速度、简单、减少差错、易于长期记忆。 8、命令语言的形式有:简单命令表、命令加变量、命令加选项和变量、层次式命令结构。 9、图形用户界面设计的艺术原则:①对比原则;②协调原则;③平衡原则;④趣味性原则。 10、窗口可分为:①滚动式窗口;②开关式窗口;③分裂式窗口;④瓦片式窗口;⑤重叠式窗口; ⑥弹出式窗口。 11、辅助窗口分为:有模式和无模式两种。无模式辅助窗口允许用户与辅助窗口或主窗口进行交互,就像在主窗口之间进行切换;有模式辅助窗口要求用户在该辅助窗口内完成交互,然后,必须关闭辅助窗口才能与其他窗口进行交互。 12、帮助信息可分为概念帮助信息和过程帮助信息。 13、人性化的设计是Web界面设计的核心。 14、网页设计要求主题鲜明、形式和内容相统一,强调整体为设计原则,并具有交互性与持续性、多维性、综合性、版式的不可控性以及艺术与技术结合的紧密性等特点。 15、Web网站设计的3C原则:Concise(简洁)、Consistent(一致性)、Contrast(对

软件界面设计说明书

软件界面设计说明书 篇一:软件系统设计说明书 OA办公平台 软件系统设计说明书 洛阳艾克科技有限公司 CopyRight 20XX-20XX ARC Co.,LTD 版本历史 目录 第一章第二章第三章第四章 系统概述 ................................................ ................................................... ............ 4 设计约束 ................................................ ................................................... ............ 4 开发、测试与运行环境 ................................................ ........................................ 5 数据库设计概述 ................................................ (8)

4.1 数据库环境说明 ................................. ................................................... ........................ 8 4.2 数据库命名规则 ................................................ ................................................... ......... 8 4.3 安全性设计说明 ................................................ ................................................... ......... 8 4.4 表汇总和表设计 ................................................ ................................................... ......... 9 第五章 用户界面设计概述................................................. (11) 5.1 工作流程图 ................................................ ................................................... .............. 11 5.2 主界面 ................................................ ...................................................

软件界面设计要求规范_v0-视觉部分

软件界面设计规范 1概要 界面设计中一定要保持界面的一致性。 一致性既包括使用标准的控件,也指使用相同的信息表现方法,如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。 界面力求简洁明了,保证系统功能设计的合理与明确,布局明确、交互操作合理、协调统一。功能要表现清楚,分类清晰有条理,避免过多的控件嵌套导致的视觉混乱;单一功能的操作目的明确,符合易用性原则,避免不必要的信息显示而对用户造成视觉干扰;力求操作简单,简单的功能一步完成,比较复杂的功能三步之内,复杂的功能操作使用操作向导来辅助客户完成。 2色调风格 2.1色调: 软件界面设计中常用的主色调包括:蓝色、红色、绿色、黑色 蓝色:运用的行业较为广泛,如通讯、电子、房产、钢铁、生产管理等行业大部分以蓝色为主色调来设计软件。 红色:在政府单位运用比较多。 绿色:一般运用于教育、医疗、农林等行业。 黑色:能源、石油、房地产行业有时候会用中性的黑色作为主色调。

表现区:通常用浅色,如:白色、淡灰、或者淡蓝之类,因为大面积的文字信息在浅色上便于长时间阅读,不容易形成视觉疲劳。 2.2风格: 软件界面的风格通常比较简约。不同行业,使用的环境不同稍有差异。 3登录界面 基本元素:logo、系统名称、输入框、提交按钮。如下: 4页面逻辑结构 功能页面功能页面 弹出页面弹出页面弹出页面

软件界面通常是上面这样的逻辑结构 首页:宏观预览各项设备管理数据,快速访问期望的数据功能 功能页面:查看某一功能模块的全部数据,查看某一对象的各类相关数据 弹出页面:填写和提交表单,对功能中的某一单项数据进行增加/删除/查询/修改/审核/打印/导出等功能操作。 5页面的基本属性 页面宽度:属性值为auto,最小值1024像素。默认状况下无横向滚动条。 注意:宽度、位置、边距为不可变数据 背景:页面整体为白色背景#FFFFFF 或者浅灰、浅蓝等,总之是非常接近白色的颜色。 注:白色为常用色值,对于特殊个性化页面可根据特殊要求变更色彩;背景色彩尽量少用饱和度高的颜色, 页面位置:居中 页面边距:上 0px;下 0px;左 0 px;右 0 px; 注意:有时候会专门设置一定数值的边距,这时通常 与模块间的间距相同,如上下左右都是5px。

用户界面设计说明书样本

用户界面设计说明 书

[键入公司名称] [键入文档标题] [键入文档副标题] [键入作者姓名] 2012/11/27

修订历史记录

目录 1 引言................................................... - 3 - 1.1编写目的............................................ - 3 - 1.2项目背景............................................ - 4 - 1.3定义、缩略词........................................ - 4 - 1.4参考资料............................................ - 5 - 2 应当遵循的界面设计规范 ................................. - 5 - 2.1用户界面设计原则.................................... - 5 - 2.2界面一致性.......................................... - 5 - 2.3布局合理化原则.......................... 错误!未定义书签。 3 界面的关系图和工作流程图 ............................... - 7 - 4 主界面................................................ - 10 - 4.1主界面............................................. - 10 - 4.2子界面A ........................................... - 11 - 4.3子界面B ........................................... - 12 - 4.4子界面C ........................................... - 13 - 4.5子界面D ........................................... - 14 - 4.6子界面E ........................................... - 15 - 4.7子界面F ........................................... - 16 - 5 美学设计.............................................. - 17 -

软件用户界面设计规范

软件用户界面设计规范 1.导言 1.1 目的 为开发人员提供界面设计和开发的指南,引导开发人员设计简洁美观的用户界面; 1.2 适用范围 适用于xxxxxx。 2.软件界面设计的重要性 2.1 发展趋势 软件用户界面的发展经历了从简单到复杂、从低级到高级的过程,用户界面在软件系统中的价值比重越来越高。 2.2 开发竞争 得益于互联网的发展和普及,软件开发的技术门槛在不断下降,大部分软件企业的技术手段也趋向于雷同,“软件设计”变得越来越重要。当大家都掌握了相似的技术和需求信息后,企业之间的开发竞争“比的就是设计”。 –软件用户界面设计要综合考虑“易用性设计”、“艺术设计”和“技术实现”,很有挑战性。 2.3 用户挑剔 用户界面在很大程度上影响着软件的命运,因为广大用户对软件的评价主要来源于他们操作用户界面的感受。同类软件越多,选择余地越大,购买者对软件

用户界面就越挑剔。 3.软件界面设计的现状、问题及原因 3.1 不容乐观的现状 尽管国内有很多技术出色、聪明过人的软件工程师,但是不少人开发出来的软件产品却既难用又难看,客户很不满意。导致经常要修改软件的用户界面,造成极大的生产力浪费。 到处是用户界面设计缺陷: –界面措辞含糊,甚至有错别字。连简单的消息框都设计不好,可能存在文不对题的语病。 –界面布局混乱,缺乏逻辑,凡是能放的东西都堆集上去,让用户不知从何下手。–没有防错处理,不对用户输入的数据进行检验,不根据用户的权限自动隐藏或者禁用某些功能。执行破坏性的操作之前,不提醒用户确认。 –不提供进度条、动画来反映正在进行的比较耗时间的过程,对于重要的操作也不返回结果,让用户干着急。 3.2 问题和原因之一 由于国内没有开设软件界面设计的课程,大家对这部分知识没有深刻的意识,只是在工作中凭着个人的经验与感觉设计软件的用户界面,这样产生的界面往往得不到大众用户的认可。 3.3 问题及原因之二 开发人员在设计用户界面方面不仅存在先天的教育缺陷,更加糟糕的是还常常“错位”的毛病。他以为只要自己感觉用户界面漂亮、使用起来方便,那么用户也一定会满意。 3.4 问题及原因之三

软件界面设计规范方案

软件界面设计规 1.界面规 1.1.总体原则以用户为中心。 设计由用户控制的界面,而不是界面控制用户。清楚一致的设计。所有界面的风格保持一致,所有具有相同含义的术语保持一致,且易于理解拥有良好的直觉特征。以用户所熟悉的现实世界事务的抽象来给用户暗示和隐喻,来帮助用户能迅速学会软件的使用。较快的响应速度。简单且美观。 1.2.原则详述 1.2.1.用户控制用户界面设计的一个重要原则是用户应该总是感觉在控制软件而不是感觉被软件所控制。操作上假设是用户--而不是计算机或软件--开始动作。用户扮演主动角色,而不是扮演被动角色。在需要自动执行任务时,要以允许用户进行选择或控制它的方式来实现该自动任务。提供用户自定义设置。因为用户的技能和喜好各不相同,因此他们必须能够个性化界面的某些方面。Windows为用户提供了对许多这方面的访问。您的软件应该反应不同的系统属性--例如颜色、字体或其他选项的用户设置。采取交互式和易于感应的窗口,尽量避免使用模态对话框,而使用"非模式"辅助窗口。"模式"是一种状态,它排除一般的交互,或者限制用户只能进行特定的交互。当最好使用一个模式或该模式只是可替换的设计时--例如,用于在一个绘图程序中选定一个特定感觉--请确保该模式是显然的、可见的,是一个明确的用户选定的结果,并且容易取消。在后台运行长进程时,保持前台式交互。例如,当正在打印一个文档,即使该文档不能被改变,用户也应该可以最小化该窗口。谅解。用户喜欢探索一个界面,并经常从尝试和错误中学习。一个有效的界面允许交互式的发现,它只提供一组合适的选择,并在用户可能破坏系统或数据的情况时发出警告。如果可行,还应提供可逆转或可还原的操作。即使在设计得很好得界面中,用户也可能犯错误。这些错误既可以是物理上得(偶然地指向了错误的命令或数据),也可以是逻辑上的(对选定哪一个命令或哪些数据做出了错误的决定)。有效的设计避免很可能导致错误的情况。它还包容潜在的用户错误,并且使用户易于还原。 1.2.2.清楚一致的设计一致允许用户将已有的知识传递到新的任务中,更快地学习新事物,并将更多的注意力集中在任务上。这是因为他们不必花时间来尝

网页设计说明书范例

宁夏风采展示网站 说明文档 题目:走进宁夏 专业班级: 09级计算机科学与技术1班 姓名:姓名 学号:学号 指导教师:指导教师 成绩:

目录 第一章网页概述 (1) 网页简介 (1) 网页组成 (1) 网页设计思想 (2) 第二章网页设计思路 (3) 网页设计背景 (3) 制作工具选择 (3) 素材收集 (4) 网页设计内容构想 (5) 第三章网页内容简介 (7) 网页功能简介 (7) 网页主要功能描述 (7) 网页的浏览 (8) 第四章网页设计 (9) 网页结构总图 (9) 各网页模块的组成 (10) 网页制作环境 (12) 网页设计思路 (12) 第五章网页制作 (14) 素材的加工制作 (14) 网站的建立 (15) 网页设计 (15) 主页设计 (15)

环境” (18) 历史” (20) 文化” (21) “城市” (24) 其它页面设计 (26) 第六章设计体会 (28) 致谢 (29)

摘要 【摘要】本网页主要用HTML语言编写,利用Macromedia 作为开发工具,介绍了宁夏回族自治区的历史、文化、人口、民族、城市、经济、地理、特产等基本概况,以图片和文字介绍相结合的方式,穿插一些视频媒体,以网站浏览的方式综合展示了宁夏回族自治区的整体面貌,着重介绍了宁夏几大城市和特色文化。 【关键词】网页设计说明书走进宁夏设计思路 Javascript 语言

第一章网页概述 网页简介 网页,是构成网站的基本元素,是承载各种网站应用的平台。通俗的说,网站就是由网页组成的。网页说具体了是一个html文件,浏览器是是用来解读这份文件的。 本次网页设计,主要用HTML语言编写,利用作为开发工具,中间插入了一些Javascript语言用以编制一些特效,如左右移动图片广告、显示当前时间等,主要介绍了宁夏回族自治区的历史、文化、人口、环境、民族、城市、经济、地理、特产等基本概况,以图片和文字介绍相结合的方式,穿插一些视频媒体,以网站浏览的方式综合展示了将宁夏回族自治区的整体面貌展现给大家,着重介绍了宁夏回族自治区几大城市和特色文化。 网页组成 1、主页 (1)宁夏介绍 (2)五大城市 (3)宁夏特色 2、环境 介绍了宁夏回族自治区的自然生态环境。 3、历史 介绍了宁夏的历史(旧石器时期——新中国成立——自治区成立)。 4、文化 (1)九大文化 (2)宁夏花儿 (3)宁夏文学

软件界面设计规范_V1.0 - 视觉部分

软件界面设计规范_V1.0 1概要 界面设计中一定要保持界面的一致性。 一致性既包括使用标准的控件,也指使用相同的信息表现方法,如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。 界面力求简洁明了,保证系统功能设计的合理与明确,布局明确、交互操作合理、协调统一。功能要表现清楚,分类清晰有条理,避免过多的控件嵌套导致的视觉混乱;单一功能的操作目的明确,符合易用性原则,避免不必要的信息显示而对用户造成视觉干扰;力求操作简单,简单的功能一步完成,比较复杂的功能三步之内,复杂的功能操作使用操作向导来辅助客户完成。 2色调风格 2.1色调: 软件界面设计中常用的主色调包括:蓝色、红色、绿色、黑色 蓝色:运用的行业较为广泛,如通讯、电子、房产、钢铁、生产管理等行业大部分以蓝色为主色调来设计软件。 红色:在政府单位运用比较多。 绿色:一般运用于教育、医疗、农林等行业。 黑色:能源、石油、房地产行业有时候会用中性的黑色作为主色调。 表现区:通常用浅色,如:白色、淡灰、或者淡蓝之类,因为大面积的文字信息在浅色上便于长时间阅读,不容易形成视觉疲劳。

2.2风格: 软件界面的风格通常比较简约。不同行业,使用的环境不同稍有差异。 3登录界面 基本元素:logo、系统名称、输入框、提交按钮。如下: 4页面逻辑结构 软件界面通常是上面这样的逻辑结构 首页:宏观预览各项设备管理数据,快速访问期望的数据功能 功能页面:查看某一功能模块的全部数据,查看某一对象的各类相关数据 弹出页面:填写和提交表单,对功能中的某一单项数据进行增加/删除/查询/修改/审核/打印/导出等功能操作。

微软软件界面设计规范

假如你在Windows环境下开发,微软定义了一套称为“用户体验”的参考规范(当然,“用户体验”的内容已经超出了狭义的“用户界面”)。这个规范对菜单、按钮、图标、窗体、快捷键、消息框和文本等界面元素的设计,给出了一整套建议。倘若不是编写游戏之类的东西,就没有理由不参照这个规范。 以下是我见过的一些糟糕的用户界面风格: 过份使用各种奇形怪状、五颜六色的控件。这些界面往往出自充满激情和想法的新手。它很容易使人想起过去农村穿着红褂子、绿裤子的小 媳妇,或者今天城市街头画着大花脸的扭秧歌的大妈。 界面元素比例失调。我见过按钮巨大无比,其尺寸甚至超过显示重要内容的文本框的界面。 界面元素凌乱。比如说,按钮和文本框摆放地点随意,相当于客厅当卧室,卫生间当厨房。 违背使用习惯。你按下F1,它没有弹出帮助,却执行了一件绝对出乎你意料的动作。 消息框信息含糊、混乱。下面是某软件弹出的消息框。把“确定”和“取消”改为“是”和“否”会不会更清晰一些?就事论事,假如干脆自己做个form,改成“想”和“不想”,那更好。 还有一种糟糕的用户界面,乍一看很厉害,实际上完全是缺乏规划的结果。 这种软件本身的确提供了比较复杂的功能,但对于哪些是常用功能,哪些是很少用到的高级功能,缺乏评估。什么功能都往界面上挤,占地方不说,用户会厌烦,弄不好还会被吓跑。 对于这种软件来说,默认界面只应该显示目标用户最常使用的功能,至于不常用到的高级功能,可以“隐藏”起来,比如说,放到菜单里,不要都做成按钮摆到界面上。果真需要需要这些高级功能的话,用户自然会到菜单里去找的。 在这方面,微软Office软件堪称楷模。比如Word,从编写“代办文凭”这样的电线杆上的“狗皮膏”,到排版严肃的长篇巨著,都游刃有余。对于低级用户来说,它简单易用,对于高级用户来说,要的功能都有。这个软件界面做得就非常有水平。就象那些高级数码相机一样,操作之简单可以和“傻瓜”相机媲美。按一个按钮就可以使你心想事成,恰恰说明它聪明得可以。 一句话,你愿意使用界面上摆满了各种让人眼花缭乱的玩意儿,左看右看也不知道从哪儿下手的软件吗? 软件界面设计相关的各项介绍

软件界面设计相关的各项介绍

软件界面设计相关的各项介绍 界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化优化规范化的设计分支。具体包括软件启动封面设计,软 件框架设计,按钮设计,面板设计,菜单设计,标签设计,图标设计,滚动条及状态栏设计,安装过程设计,包装及商品化。 在设计的过程中有较多注意的关键问题,以下列出几点: (1)软件启动封面设计 应使软件启动封面最终为高清晰度的图像,如软件启动封面需在不同的平台、操作系统上使用将考虑转换不同的格式,并且对选用的色彩不 宜超过256 色,最好为216色安全色。软件启动封面大小多为主流显示器分辨率的1/6大。如果是系列软件将考虑整体设计的统一和延续性。在上面应该醒目的标注制作或支持的公司标志、产品商标,软件名称,版本号,网址,版权声明,序列号等信息,以树立软件形象,方便使用者或购买者在软件启动的时候得到提示。插图宜使用具有独立版权的,象征性强的,识别性高的,视觉传达效果好的图形,若使用摄影也应该进行数位处理,以形成该软件的个性化特征。 (2)软件框架设计 软件的框架设计就复杂得多,因为涉及软件的使用功能,应该对该软件产品的程序和使用比较了解,这就需要设计师有一定的软件跟进经验,能够快速的学习软件产品,并且在和软件产品的程序开发员及程序使用对象进行共同沟通,以设计出友好的,独特的,符合程序开发原则的软件框架。软件框架设计应该简洁明快,尽量少用无谓的装饰,应该考虑节省屏幕空间,各种分辨率的大小,缩放时的状态和原则,并且为将来设计的按钮,菜单,标签,滚动条及状态栏预留位置。设计中将整体色彩组合进行合理搭配,将软件商标放在显著位置,主菜单应放在左边或上边,滚动条放在右边,状态栏放在下边,以符合视觉流程和用户使用心理。 (3)软件按钮设计 软件按钮设计应该具有交互性,即应该有3到6种状态效果:点击时状态;鼠标放在上面但未点击的状态;点击前鼠标未放在上面时的状态;点击后鼠标未放在上面时的状态;不能点击时状态;独立自动变化的状态。按钮应具备简洁的图示效果,应能够让使用者产生功能关联反应,群组内按钮应该风格统一,功能差异大的按钮应该有所区别。 (4)软件面板设计

软件界面设计

软件界面设计 界面的说法以往常见的是在人机工程学中。人机界面是指人机间相互施加影响的区域,凡参与人机信息交流的一切领域都属于人机界面。而设计艺术是研究人一物关系的学科,对象物所代表的不是简单的机器与设备,而是有广度与深度的物;这里的人也不是生物人,不能单纯地以人的生理特征进行分析。人的尺度,既应有作为自然人的尺度,还应有作为社会人的尺度;既研究生理、心理、环境等对人的影响和效能,也研究人的文化、审美、价值观念等方面的要求和变化。 设计的界面存在于人一物信息交流,甚至可以说,存在人物信息交流的一切领域都属于设计界面,它的内涵要素是极为广泛的。可将设计界面定义为设计中所面对、所分析的一切信息交互的总和,它反映着人一物之间的关系。 一、设计界面的存在 美国学者赫伯特.A.西蒙提出:设计是人工物的内部环境(人工物自身的物质和组织)和外部环境(人工物的工作或使用环境)的接合。所以设计是把握人工物内部环境与外部环境接合的学科,这种接合是围绕人来进行的。人是设计界面的一个方面,是认识的主体和设计服务的对象,而作为对象的物则是设计界面的另一个方面。它是包含着对象实体、环境及信息的综合体,就如我们看见一件产品、一栋建筑,它带给人的不仅有使用的功能、材料的质地,也包含着对传统思考、文化理喻、科学观念等的认知。任何一件作品的内容,都必须超出作品中所包含的那些个别物体的表象。分析物也就分析了设计界面存在的多样性。 为了便于认识和分析设计界面,可将设计界面分类为: 1)功能性设计界面接受物的功能信息,操纵与控制物,同时也包括与生产的接口,即材料运用、科学技术的应用等等。这一界面反映着设计与人造物的协调作用。 2)情感性设计界面即物要传递感受给人,取得与人的感情共鸣。这种感受的信息传达存在着确定性与不确定性的统一。情感把握在于深入目标对象的使用者的感情,而不是个人的情感抒发。设计?quot;投入热情,不投入感情,避免个人的任何主观臆断与个性的自由发挥。这-界面反映着设计与人的关系。 3)环境性设计界面外部环境因素对人的信息传递。任何一件或一个产品或平面视觉传达作品或室内外环境作品都不能脱离环境而存在,环境的物理条件与精神氛围是不可忽缺的界面因素。 应该说,设计界面是以功能性界面为基础,以环境性界面为前提,以情感性界面为重心而构成的,它们之间形成有机和系统的联系。 二、设计界面存在的方法论意义 当机械大工业发展起来的时候,如何有效操纵和控制产品或机械的问题导致了人机工程人体工学也进一步地扩大到人的思随着体力的简单劳动转向脑力的复杂劳动,二战后,学。. 维能力的设计方面,使设计能够支持、解放、扩展人的脑力劳动。在目前的知识经济时代,在满足了物质需求的情况下,人们追求自身个性的发展和情感诉求,设计必须要着重对人的情感需求进行考虑。设计因素复杂化导致设计评价标准困难化。一个个性化的设计作品能否被消费者所认同?新产品开发能不能被市场所接受?在目前,我国大部分企业实力还并不强大,设计开发失利承受力还不很强的情况下,如何系统地、有根据地认识、评价设计,使其符合市场,就需要对设计因素再认识。利用界面分析法,正是使设计因素条理化,避免将人作为生物人的片面和走出笼统地说设计=科学十艺术的简单误区。 现代的人机工程学和消费心理学为设计提供了科学的依据,它们的成功就在于实验、调查和数理表述,是较为可系的。同样对设计艺术而言,进行设计界面的分析,也要有生理学、心理学、文化学、生物学、技术学学科基础。从理论上来说,它要直接建立在信息论和控制论的基础之上。

详细设计方案 - 界面设计说明

详细设计方案界面设计说明 2016.09

界面设计方案 总述 基本设计思路是所有的查询操作只通过一个文本框进行输入,如果不进行精确类别选择,将提供指定城市内的全局数据的模糊查询。 界面总览 展示的地图为右上城市列表中所选的城市的地图的全市总览。登入时默认城市为上海。 城市列表效果说明 城市列表应该按省份分开显示。 效果示意如下:

内部同时提供搜索框,帮助迅速定位城市。 效果示意如下: 定位完城市后,城市列表则收起。 效果示意如下: 查询框效果说明 查询框分为搜索输入框、类别选择菜单栏、输入提示框、结果展示框4大部分组成。 搜索输入框 用于接收用户输入的查询关键词。该输入框一直处于显示状态。 效果示意: 标注①所示的为关键字输入框。所有需要搜索的内容在此输入。 该文本框主要为接收用户所输入的查询关键字。 当在查询框输入内容后,该文本框末尾处将出现一个“X”的清除按钮控件,点击该按钮可以快速清除文本框中内容。参见示意图。 在输入内容时候,如果匹配到相关结果,将会在该文本框底部弹出输入提示框。效果示意如下:

如果无匹配结果,则不弹出“输入提示框”。 如果用户在该输入框中输入内容后,可以通过点击“回车键”激活查询(相当于点击“搜索按钮”),结果将显示在“结果展示框”内。 标注②为类别菜单通知栏。 该通知栏用于提示用户当前进行的搜索类别为何种类别。同时当用户进行搜索的时候,所要进行的搜索方式也据此决定。 此处的图标由用户在“类别选择菜单”中所点选的决定。用户在“类别选择菜单”中点选菜单后,其对应的图标也会显示在此。 标注③为搜索按钮。 点击该按钮后,如果“关键字输入框”内有输入的内容,则将激活查询,否则将不会做任何动作。 类别选择菜单栏 用于给用户选择所要进行的查询方式。本菜单栏默认为隐藏。 (建议菜单通过数据接口获得) 效果示意:

软件工程用户界面设计报告书

目录0. 文档介绍4 0.1 文档目的4 0.2 文档范围4 0.3 读者对象4 0.4 参考文献4 0.5 术语与缩写解释4 1. 应当遵循的界面设计规范5 2. 界面的关系图和工作流程图 5 3. 主界面5 4. 子界面A 5 5. 子界面B 5 6. 美学设计6 7. 界面资源设计6 8. 其他6

文档介绍 0.1 文档目的 界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化优化规范化的设计分支。界面设计文档能够让用户对软件产品有了更直观的了解,同时了解各个模块的设计及用意。 0.2 文档范围 文档包括公用界面设计,学生用户界面设计,教师用户界面设计,其中各个界面包括框架设计,编程设计,按钮设计,面板设计,菜单设计,标签设计,图标设计,滚动条及状态栏设计。 0.3 读者对象 登陆网站的游客、注册成会员的学生、教师以及治理员。 0.4 参考文献 提示:列出本文档的所有参考文献(能够是非正式出版物),格式如下: [1] 张海藩,《软件工程导论(第5版)》,清华大学出版社,1900年01月 [2] 杨培添,《软件界面设计》,电子工业出版社,2007年02月 [3] 林锐,《Web软件用户界面设计指南》,电子工业出版社,2005

年5月 [4] 吴士力,汪孝宜,胡俦,《网络系统开发实例精粹(JSP 版)》,电子工业出版社,2006年8月 [5] 黄艳群,黎旭,李荣丽,《设计·人机界面》,北京理工大学出版社,2007年5月 https://www.doczj.com/doc/ad10111047.html,/view/43210.html?wtp=tt https://www.doczj.com/doc/ad10111047.html,/view/119481.htm 0.5 术语与缩写解释

用户界面设计风格说明 (参考模版)

用户界面设计风格说明(参考模版) 1引言 1.1设计说明 本文档是对系统界面设计风格进行描述,和用户交互的最终界面在《详细设计说明书》中设计和解释。 1.2概念和定义 用户界面:又称人机界面,实现用户与计算机之间得通信,以控制计算机或进行用户和计算机之间得数据传送得系统部件。 GUI:即图形用户界面,一种可视化得用户界面,它使用图形界面代替正文界面。 1.3用户假定 将使用本系统的用户定义为:对应用程序或计算机的一般用法有一定了解,用户希望界面符合WINDOWS9X特别是OFFICE97风格,对易用性、简洁性有比较高的要求,对界面快速交互没有很强的要求(即不希望通过命令方式快速交互)。 2用户界面设计规范 2.1用户界面设计原则 本系统坚持图形用户界面(GUI)设计原则,界面直观、对用户透明:用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。 界面设计员应该明白软件中用户是所有处理的核心,不应该有应用程序来决定处理过程,所以用户界面应当由用户来控制应用如何工作、如何响应,而不是由开发者按自己的意愿把*作流程强加给用户。 界面设计必须经过确认才能完成。 2.2界面一致性 在界面设计中应该保持界面的一致性。一致性既包括使用标准的控件,也指使用相同的信息表现方法,如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。 1)显示信息一致性标准 (1)标签提示:字体为不加重、宋体、黑色、灰底或透明、无边框、右对齐、不带冒号、一般情况为五号(10号); (2)日期:正常字体、宋体、白底黑字、3-D lowered; (3)对齐方法: l 左对齐:一般文字、单个数字、日期等 l 右对齐:数字、时间、日期加时间。 (4)分辨率为800*600,增强色16色 (5)字体缺省为宋体、五号、黑色 (6)底色缺省采用灰色 这些信息的排列显示风格供参考, 在同一个应用中,这些信息的表现方式不一致,会使得用户分散注意力,影响这一软件的使用,因此开发者应当注意在同一软件中表现形式的一致性。 2)布局合理化原则 应注意在一个窗口内部所有控件的布局和信息组织的艺术性,使得用户界面美观。 在一个窗口中按tab键,移动聚焦的顺序不能杂乱无章,tab 的顺序是先从上至下,再从左至右。一屏中首先应输入的和重要信息的控件在tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。布局力求简洁、

Web界面设计规范

Web应用界面设计规范(Design Spe cification for Web UI) 主讲人:ARay 目录: 一、软件界面规范的重要性及其目的 二、用户体验为何如此重要 三、Web规范体系介绍 四、界面设计开发流程 五、应该遵循的基本原则 六、界面设计规范 一、软件界面规范的重要性及其目的 ①使最终设计出来的界面风格一致化,开发编码人员相互之间开发更轻松,遵循统一的操作规范,以标准化的方式设计界面,提高工作效率。减少和改变责任不明,任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。 ②产品设计通过规范的方式来达到以用户为中心的目的。 二、用户体验为何如此重要 ①日常生活中的遭遇 X员工悲惨的一天: 早晨起来,发现闹钟没有按原先设定响起来。 一边烧水,一边穿衣服,临走前去喝水却发现水还没有烧开。 到了地铁站,发现公交卡没有钱了。 无奈之下只能去排队买票。 排了3趟地铁,终于到公司了,但是你却迟到了。 结果:尽管你已经非常努力,但是你还是迟到了。 那么,让我们看看这一连串 的倒霉事, 是什么让我们如此狼狈? ②什么是用户体验 用户体验(user experience)是以用户为中心的设计中最重要的一个部分,强调的是过程,是软件对用户行为产生的反应与用户期待值要尽可能的一致。 糟糕的用户界面表现: 表现一:过分使用各种奇形怪状、五颜六色的控件。 表现二:界面元素比例失调。比如按钮巨大无比,其尺寸甚至超过显示重要内容的文本框的界面。

表现三:界面元素凌乱。比如说,按钮和文本框摆放地点随意,该对齐的控件对不齐。 表现四:违背使用习惯。你按F1,它没有弹出帮助,却执行了一件绝对出乎你意料的动作。 表现五:消息框信息含糊、混乱。比如软件弹出一个消息框。把原本“确定”和“取消”写成为“是”和“否”,让用户不知道什么意思。 表现六:还有一种糟糕的用户界面,乍一看很厉害,实际上完全是缺乏规划的结果。这种软件本身的确提供了比较复杂的功能,但对于哪些是常用功能,哪些是很少用到的高级功能,缺乏评估。什么功能都往界面上挤,占地方不说,用户会厌烦,弄不好还会被吓跑。

相关主题
文本预览
相关文档 最新文档