用户界面设计

一个制糖企业机器的按键界面

用户界面设计(英語:User interface design,UI),又稱用户界面工程,指的是在用户体验和交互的指导下对计算机、电器、机器、移动通讯设备、软件或应用以及网站进行的设计。[1]

用户界面设计的目标是使得用户在完成自己的任务时与被设计对象之间的交流尽可能地简单和高效。好的用户界面设计能够让用户在完成任务时不必因为设计本身花费不必要的精力。通过图形设计可以提高界面的可用性。

用户界面设计过程必须在技术功能与视觉元素(如心智模型)间找到平衡才能使系统可用、好用并适应用户的需求。

包括计算机系统、汽车、广告牌设计在内的一系列项目都会需要界面的设计。这些项目既有相同的人类基本的交互形式又需要一些特有的技能和知识。因此,设计师通常会着眼于某一特定类型设计的知识和项目,比如软件设计、用户研究、网页设计、多媒体设计等。

过程[编辑]

一个个人主页的“蓝本”文档

施乐阿图是世界第一个使用图形用户界面的计算机。

用户界面设计包括不同的设计阶段和过程。依据项目的不同,这些阶段或过程重要程度也不相同。注意这里所说的系统指的是包括网页、应用或设备设计在内的所有项目。

功能性需求搜集:根据系统所需要完成的项目目标和用户潜在的需求列出其功能。

用户分析:通过与系统潜在用户或与其工作的人进行讨论来分析这些用户。一般的问题包括:

用户想要系统做些什么?

系统如何与用户的工作流程或日常活动相吻合?

用户对技术的悟性怎么样?用户使用过哪些类似的系统?

怎样的界面外观和审美感受比较对用户口味?

信息构建:构建系统的程序或信息流(譬如对电话树系统就是一个选项树形图,对于一个网站就是一个显示页面层级关系的站点导航图)。

原型(Prototyping):通过纸质原型或简单的可互动的屏幕内容(screens)建立系统的蓝本(wireframes)。这些原型没有任何外观审美的元素及具体内容,仅仅针对交互本身。

可用性测试:对一个真实用户测试原型。此过程通常使用出声思维的方式,即让用户把体验过程中的想法说出来。

图形界面设计:对最终图形用户界面(GUI)的界面外观的设计过程。如果系统的可用性难以预测的话,可以将在可用性测试过程中建立的结果作为基础,亦或是将交流目标以及用户喜爱的风格作为依据。在少数情况下,反而可能是由图形来决定原型,这取决于特定情况下视觉形式和功能哪个更重要。如果某些界面需要多种皮肤,同一个控制面板、功能特点或小部件可能就需要多重的界面设计。这个阶段通常就需要图形设计师与界面设计师团结协作,或者某个在两方面都精通的专家。

总之,用户界面设计需要设计师对用户需求了如指掌。

要求[编辑]

系统的动态特征依据人机学标准(ISO 9241)第十部分的七个原理中包含的人机对话要求被描述。标准通过高水准的定义、原理的例证性质的应用和实例为对话技巧建立了一个人机学“原理”的框架。对话的原理代表了界面动态的方面,基本上可以被看作是界面的“感觉”。

这七个人机对话原理是:

对任务合适性:对话形式须要合适于辅助用户有效完成任务。

自叙性:对话须要其每一个步骤在系统反馈时都立即被用户理解,或者通过请求向用户说明清楚,从而达到对话的自叙性。

可控制性:在任务目的达成前,用户能够发起和控制交互的方向和节奏,此为对话的可控性。

与用户期许的一致性:对话须要一以贯之,与包括对任务的认识、学识、经验在内的用户特征保持一致,同时符合广泛接受的习惯,方可做到一致性。

容错性:对话须要在用户输入出现明显错误时不改或少改也能得到符合用户本意的结果,此为容错性。

对个性化的合适性:界面软件应当可以按照任务需求、个人喜好和用户的技能进行修改,从而达到对话对个性化的适应性。

对学习的适应性:对话须要支持和引导用户对系统操作的学习来做到这一点。

ISO 9241国标用有效性(effectiveness),高效性(efficiency)和用户满意度(satisfaction of the user)来定义可用性的概念。标准第十一部分给出的可用性定义如下:[2]

对系统整体的使用达到预定目标的程度(有效性)。

达到预定目标所需耗费的资源(高效性)。

用户对系统整体接受的程度(满意度)。

有效性,高效性和满意度可以被看作是可用性的质量因素。要将这些因素量化,就需要将它们再分解成其它次级因素,从而最终用其衡量可用性。

关于信息组织(布置、排列、分组、标签、定位)、图形对象的显示和信息编码(缩写、颜色、尺寸、形状、视觉线索)等信息呈现问题,国标ISO 9241第十二部分中用七条属性来描述。“呈现信息的属性”代表了界面静态的方面,大致可以被看作是界面的“样子”。在标准的建议中给出了这些属性的详细说明。每个建议都支持着七属性中的一条或多条。

这七条属性是:

清晰度:信息内容被快速准确地传达。

辨识度:显示信息可被准确辨别。

简明度:用户不应承担过多无关信息。

一致性:与用户期许一致的特有设计。

检取性:用户的注意力被引导到需要的信息处。

易读性:信息易读。

可理解性:意思清晰易懂,不含糊,可被判断和认识。

国标ISO 9241第13部分关于用户指南内容描述了用户指南信息应当可以容易地从其他呈现的信息中被分辨出来,同时应当明确为在当前情境下使用。用户指南可通过如下五种方式给出。

清晰(明确提示)或含蓄(普通提示)的提示指示系统目前可以输入。

及时反馈用户的输入,既能被察觉又不至于把用户吓到。

持续反映应用、系统硬件软件和用户活动状况的状态信息。

错误操控,包括错误预防、错误更正、对用户操控错误的支持,以及报错。

对于由系统和用户在特定情境下发出的帮助请求提供在线服务。

研究历史与进展[编辑]

如今用户界面设计已经成为了大量研究的主题,其中包括对其美学的研究[3]。设计的标准在过去已经被建立起来,大概可以追溯到二十世纪八十年代定义软件产品的可用性时[4]。国际信息处理联合会选择了一种结构基础作为参考模型。这个模型建议通过四个维度来构建一个用户界面:

输入输出(外观)

对话(感觉)

技术或功能(工具和服务的接入)

编制(交流与协作支持)

这个模型对描述界面设计可用性要求的国际标准ISO 9241影响重大。早在软件开发时,对于理解实际使用相关的用户界面问题的热情,带来了对可能提供对应用如何在产品使用中表现,进行具有说服力模拟的可靠图形用户界面快速原型工具的研究。[5]一些研究结果显示图形界面基础软件的很多不同的程序设计任务,实际上不一定非要通过写代码来实现。[6]

最近几年的研究由种类不断增加的设备驱动。这些设备因为摩尔定律的优点而具备搭载复杂界面的能力。[7]

另外还有关于自动生成用户界面的研究,这些生成界面可以根据用户能力水平匹配不同的交互方式。[8]

参见[编辑]

多媒体

用户界面

人机学

人机交互

交互设计

设计语言

用户体验

以用户为中心的设计

自然用户界面

李乐山:《设计调查》,中国建筑工业出版社(2007年6月),ISBN 978-7-112-08537-8。

参考资料[编辑]

^ Evaluation of Usability on Mobile User Interface (PDF). University Of Washington, Bothell. [2012-11-26]. (原始内容存档 (PDF)于2013-02-01).

^ 《设计调查》p. 34,李乐山,中国建筑工业出版社(2007年6月),ISBN 978-7-112-08537-8

^ The role of context in perceptions of the aesthetics of web pages over time. International Journal of Human–Computer Studies. 2009-01-05 [2012-11-26].

^ Dr. Reinhard Oppermann. User-interface design (PDF). Institute for Applied Information Technology. 2001 [2010-12-01]. (原始内容 (PDF)存档于2010-12-25).

^ The HUMANOID model of interface design. Proceedings CHI'92. 1992 [2012-11-26]. (原始内容存档于2010-02-02).

^ Creating user interfaces using programming by example, visual programming, and constraints. ACM. 1990-04-11 [2009-04-02].

^ Past, present, and future of user interface software tools. ACM. 2000-03-01 [2009-04-02].

^ SUPPLE: Automatically Generating Personalized User Interfaces. Intelligent Interactive Systems Group (website). Harvard University. 2007-05-07 [2010-07-07]. (原始内容存档于2021-01-30).

查论编設計

设计纲要(英语:Outline of design)

设计主题

設計師

学科传媒设计

廣告

裝幀

企业形象设计

展会设计

电影标题设计(英语:Film title design)

平面设计

运动图形设计(英语:Motion graphic design)

邮票设计(英语:Postage stamp design)

打印设计(英语:Print design)

插畫

信息设计

教学设计

新闻设计(英语:News design)

摄影

零售设计(英语:Retail design)

標示 / 交通标志设计(英语:Traffic sign design)

字体排印学 / 字体设计

视频设计(英语:Video design)

商品展示設計

环境设计

建筑

建筑光学

建筑设计

被动太阳能建筑设计(英语:Passive solar building design)

環境設計

环境影响设计(英语:Environmental impact design)

园林设计

电脑辅助园林设计(英语:Computer-aided garden design)

健康社区设计(英语:Healthy community design)

旅店设计(英语:Hotel design)

室内建筑(英语:Interior architecture)

室内设计

体验室内设计(英语:Experiential interior design)

Keyline设计(英语:Keyline design)

景观建筑

可持续景观建筑(英语:Sustainable landscape architecture)

景观设计(英语:Landscape design)

空间设计(英语:Spatial design)

城市设计

工业设计

汽車設計

汽车悬架设计(英语:Automotive suspension design)

CMF设计(英语:CMF design)

瓦楞纸箱设计(英语:Corrugated box design)

电吉他设计(英语:Electric guitar design)

家具

可持续家具设计(英语:Sustainable furniture design)

硬件接口设计(英语:Hardware interface design)

摩托车设计(英语:Motorcycle design)

包裝

摄影镜头设计(英语:Photographic lens design)

产品设计(英语:Product design)

美術指導

感官设计

服務設計

交互设计

體驗設計

员工体验设计(英语:Employee experience design)

游戏设计

关卡设计(英语:Level design)

电子游戏设计

硬件接口设计(英语:Hardware interface design)

圖標設計

沉浸式设计(英语:Immersive design)

信息设计

声音交互设计

用户体验设计

用户界面设计

网页设计

其他應用藝術

公共藝術

陶艺 / 玻璃设计(英语:Glass art)

時尚設計

劇裝設計

珠寶設計

花卉设计(英语:Floral design)

游戏艺术设计(英语:Game art design)

道具设计师(英语:Property designer)

风景设计(英语:Scenic design)

音效设计(英语:Sound design)

舞台/照明设计(英语:Lighting designer)

纺织设计(英语:Textile design)

其他设计和工程学

算法设计

锅炉设计(英语:Boiler design)

概念設計

数据库设计(英语:Database design)

藥物設計

电动系统设计(英语:Electrical system design)

试验设计

滤波器设计

任务设计(英语:Job design)

集成电路设计

电路设计

物理设计

电力网络设计(英语:Power network design (IC))

核武器设计方案

核酸设计(英语:Nucleic acid design)

组织设计(英语:Organization design)

程序設計 (化工)

处理器设计

蛋白质设计(英语:Protein design)

研究设计(英语:Research design)

社会设计(英语:Social design)

软件设计

宇宙飞船设计(英语:Spacecraft design)

战略设计(英语:Strategic design)

系统设计

途径

以活动为中心设计(英语:Activity-centered design)

自适应网页设计

情感设计(英语:Affective design)

腦力激盪法

按委员会设计(英语:Design by committee)

契约式设计

概念知识理论(英语:C-K theory)

设计收敛

参与式设计

面向概念设计(英语:Concept-oriented design)

配置设计(英语:Configuration design)

语境设计(英语:Contextual design)

持续设计(英语:Continuous design)

從搖籃到搖籃設計

创造性解决问题(英语:Creative problem-solving)

创意技术(英语:Creativity techniques)

关键设计(英语:Critical design)

设计小说(英语:Design fiction)

防御性设计

设计-招标-建造(英语:Design–bid–build)

设计-建造

建筑师主导设计(英语:Architect-led design–build)

領域驅動設計

生态设计

能源中性设计(英语:Energy neutral design)

工程设计流程(英语:Engineering design process)

概率设计(英语:Probabilistic design)

容错设计(英语:Error-tolerant design)

容许故障设计

面向框架设计(英语:Framework-oriented design)

为装配设计

为改变行为设计(英语:Design for behaviour change)

为制造设计

为六西格玛设计(英语:Design for Six Sigma)

可测试性设计

为X设计(英语:Design for X)

实用设计(英语:Functional design)

生成设计(英语:Generative Design)

地理设计(英语:Geodesign)

顶层设计(英语:High-level design)

集成设计(英语:Integrated design)

集成顶层设计(英语:Integrated topside design)

基于智能设计(英语:Intelligence-based design)

迭代设计(英语:Iterative design)

KISS原则

底层设计(英语:Low-level design)

元设计(英语:Metadesign)

心智图

模組化設計

新浪潮(英语:New Wave (design))

面向对象设计

开放设计(英语:Open design)

参数设计(英语:Parametric design)

参与设计(英语:Participatory design)

基于平台设计(英语:Platform-based design)

基於原則設計

流程为中心设计(英语:Process-centered design)

公共利益设计(英语:Public interest design)

理性设计(英语:Rational design)

可再生设计(英语:Regenerative design)

可靠度

基于研究设计(英语:Research-based design)

责任驱动设计(英语:Responsibility-driven design)

响应式网页设计

安全壽命設計

永續設計

系统设计

面向系统设计(英语:Systems Oriented Design)

無表格網頁設計

限制理論

自上而下和自下而上设计

转型设计(英语:Transformation design)

隔代设计(英语:Transgenerational design)

TRIZ

通用設計

为所有人设计(英语:Design for All (in ICT))

色彩通用設計

以使用率为中心设计(英语:Usage-centered design)

以使用为中心设计(英语:Use-centered design)

以用户为中心的设计

感情植入设计(英语:Empathic design)

用户创新

价值驱动设计(英语:Value-driven design)

价值敏感设计(英语:Value sensitive design)

为隐私设计(英语:Privacy by Design)

设计选择(英语:Design choice)

设计计算(英语:Design computing)

设计控制(英语:Design controls)

设计流程(英语:Design flow (EDA))

设计领导(英语:Design leadership)

设计管理(英语:Design management)

设计标记(英语:Design marker)

设计方法(英语:Design methods)

设计模式

設計研究

设计科学(英语:Design science)

设计战略(英语:Design strategy)

设计理论(英语:Design theory)

設計思考

工具知识产权组织奖项设计工具(英语:Design tool)

算法辅助设计(英语:Algorithms-Aided Design (AAD))(AAD)

建筑模型(英语:Architectural model)

藍圖

综合布局(英语:Comprehensive layout)

计算机辅助设计(CAD)

计算机辅助工业设计(英语:Computer-aided industrial design)(CAID)

虚拟家居设计软件(英语:Virtual home design software)

计算机自动设计(CAutoD)

设计质量指标(英语:Design quality indicator)

電子設計自動化

流程图

Mockup

產品設計規格

原型 (工程)

写生

分鏡

工程制图

HTML编辑器

网站线框(英语:Website wireframe)

知识产权

社区设计(英语:Community design)

围绕设计(英语:Design around)

设计专利(英语:Design patent)

Geschmacksmuster(英语:Geschmacksmuster)

工业设计权(英语:Industrial design right)

欧盟工业设计权(英语:Industrial design rights in the European Union)

组织

美國平面設計協會

特许设计师协会(英语:Chartered Society of Designers)

设计与工业协会(英语:Design and Industries Association)

设计委员会(英语:Design Council)

國際論壇設計

设计学会(英语:The Design Society)

设计研究学会(英语:Design Research Society)

奖项

欧洲设计奖(英语:European Design Award)

德国设计奖(英语:German Design Award)

好设计奖 (芝加哥)(英语:Good Design Award (Chicago))

優良設計獎

Graphex(英语:Graphex)

詹姆斯·戴森奖(英语:James Dyson Award)

菲利普親王設計獎

普利兹克建筑奖

iF產品設計獎

紅點設計大獎

菲尔·卡夫曼奖

東京ADC賞

日本新媒體動漫藝術節

時報廣告金像獎

台灣精品獎

相关主题

美学

概念藝術

創意產業

文化图标(英语:Cultural icon)

.design

企业架构

未来学

智能设计

新產品開發

设计哲学

程序模擬

慢设计(英语:Slow design)

STEAM fields(英语:STEAM fields)

非智能设计(英语:Unintelligent design)

可视化

恶性问题(英语:Wicked problem)

設計概要

設計變更(英语:Design change)

经典设计(英语:Design classic)

设计总监(英语:Design director)

設計教育

设计元素和原则(英语:Design elements and principles)

设计工程师(英语:Design engineer)

設計公司

設計史

设计知识(英语:Design knowledge)

设计语言

设计寿命(英语:Design life)

设计负载(英语:Design load)

设计博物馆

设计范例(英语:Design paradigm)

设计导向(英语:Design rationale)

设计审查(英语:Design review)

設計規格

设计工作室(英语:Design studio)

设计技术(英语:Design technology)

维基共享资源

维基教科书

维基新闻

维基语录

维基文库

维基词典

查论编科学、技术、信息的可视化领域划分

生物学数据可视化(英语:Biological data visualization)

化学成像(英语:Chemical imaging)

罪行绘图

数据可视化

教育可视化

流动可视化(英语:Flow visualization)

地理視覺化

信息可视化

数学可视化(英语:Mathematical diagram)

醫學影像

分子图形学(英语:Molecular graphics)

产品可视化

科学可视化

软件可视化(英语:Software visualization)

工程製图

用户界面设计

视觉文化(英语:Visual culture)

立体渲染

图像类型

统计图表

图解

工程图

函数图形

形意文字

地图

相片

象形文字

Plot(英语:Plot (graphics))

示意图

统计图形

表格

工程製图

施工圖

技术插图(英语:Technical illustration)

用户界面

相关人士

雅克·贝尔汀(英语:Jacques Bertin)

辛西娅·布鲁尔(英语:Cynthia Brewer)

斯图加特·卡德(英语:Stuart Card)

托马斯·德凡提(英语:Thomas A. DeFanti)

博尔登·丹特(英语:Borden Dent)

迈克尔·路易斯·弗兰德利

乔治·弗纳斯(英语:George Furnas)

帕特里克·汉拉恩

奈杰尔·福尔摩斯(英语:Nigel Holmes)

克里斯托弗·约翰逊(英语:Christopher R. Johnson)

戈登·金德尔曼(英语:Gordon Kindlmann)

奥古斯特·凯库勒

曼努埃尔·利马(英语:Manuel Lima)

阿伦·马西阿克伦(英语:Alan MacEachren)

乔克·D·麦金莱(英语:Jock D. Mackinlay)

迈克尔·马尔茨(英语:Michael Maltz)

布鲁斯·麦考密克(英语:Bruce H. McCormick)

米里亚·迈耶(英语:Miriah Meyer)

查爾斯·約瑟夫·米納德

鲁道夫·莫德利(英语:Rudolf Modley)

加斯帕尔·蒙日

塔玛拉·蒙兹纳(英语:Tamara Munzner)

奧圖·紐拉特

弗羅倫斯·南丁格爾

汉斯珀特·菲斯特(英语:Hanspeter Pfister)

柯利弗德·皮寇弗

威廉·普莱费尔(英语:William Playfair)

卡尔·威廉·波尔克(英语:Karl Wilhelm Pohlke)

朗伯·阿道夫·雅克·凯特勒

乔治·罗伯逊(英语:George G. Robertson)

亚瑟·H·鲁滨逊(英语:Arthur H. Robinson)

劳伦斯·罗森布鲁姆(英语:Lawrence J. Rosenblum)

本·施耐德曼(英语:Ben Shneiderman)

弗雷澤·斯托達特

爱德华·塔夫特(英语:Edward Tufte)

费尔南达·维加斯(英语:Fernanda Viégas)

阿德·奥卢费科(英语:Ade Olufeko)

霍华德·韦纳(英语:Howard Wainer)

马丁·瓦滕伯格(英语:Martin M. Wattenberg)

黄邦(英语:Bang Wong)

相关软件可视化软件

Protégé

Sirius可视化软件

VisIt

数值分析软件

Scilab

相关主题计算机图形学

位图

视觉化

图像处理

计算机图形

计算机动画

计算机模拟

科學模型

计算机建模导航模板

人机交互

用户界面

图形用户界面

所见即所得

图示

虚拟现实

图像式思考辅助工具

故事板

魚骨圖

導引圖

記憶樹

心智圖

流程圖

欧拉图

地图学(又稱“製图学”)

无效的图表(英语:Chartjunk)

图形绘制(英语:Graph drawing)

平面设计(又稱“图形设计”)

成像科学(英语:Imaging science)

信息科学

信息图形

心像

误导性影像(英语:Misleading graph)

神经成像

专利图(英语:Patent drawing)

空间分析

可视化分析论

视知觉

统计学

圖像學

圖像記譜

參見: 科學

資訊科技

設計

攝影

圖表

圖論

计算机图形学

視覺化程式設計語言

計算機科學主要領域