网页UI设计中的沟通艺术
|
摘要
科学技术的发展突飞猛进,计算机技术也在腾飞,但是,无论怎样发展机器始终被人类所操控。使得人类这样感性个体更好的与无感情的冷机器进行无障碍“沟通”就成了随之而来的问题,由此看来,这个交流无疑需要一个良好的互换“思想”平台。UI(User Interface)既人机交互界面正是用户与计算机之间最直接的互换信息通道,它的重要性日益突出,已经发展成为一项集认知学、设计学、人机工程学、语言学等多学科参与的工程。
现今的互联网世界中,人类表达各种思想情感的媒介多种多样,已经不局限于文字命令语言界面(Command Line Interface),图形用户界面(Graphical User Interface)的发展正符合了这一平台的人性化需求。近年来网站的种类、功能、用户构成等因素趋于复杂化,网页UI界面设计也在不断地更迭换代,超越平面与空间的时空多媒体技术以不可比拟的优势成为现代网页新媒体的主导型式。在愈演愈烈的市场竞争中,网页作为一种经济效益的载体经过多年的发展和完善,其界面设计逐步提高了浏览者的视觉体验水平,增加了网页的附加值。然而,能够使得良好的易用性和精美的视觉设计合理融合于UI界面设计中更是网页产品争夺市场的重量级砝码。本文针对国内网页设计现状,对网页UI界面的感性化设计从概念、发展、设计原则和设计方法等方面,进行了系统深入的研究,同时辩证统一的对网页沟通艺术的发展做出合理预测。全文以网页界面设计开发流程为主导,结合实际开发项目,对网页界面设计提出了交互沟通图像化、人性化、自由化的观念,为界面设计开发提供了相应理论基础和丰富的创作手段。
With the rapid development of science and technology, computer technology is also booming, however, no matter how advanced the computer evoluted, it is still under the control and manipulate of human. So the task of making barrier-free "communication" between human which has emotional feelings and feelingless-cold-machine became a important problems and apparently this exchange will undoubtedly need a good "ideas" exchange platform. UI (User Interface) is a direct man-machine interface between the user and the computer, is also the most direct exchange of information channel, its importance is becoming more and more prominent and has developed into a set of cognitive science, design science, ergonomics, Linguistics and other multi-disciplinary participation.
In Today's Internet world, human can express thoughts and feelings through a variety of media and is no longer limited to the CUI (Command User Interface), so, a GUI (Graphical User Interface) development is in line with the platform of humanity of the demand. In recent years, the web page factors such as the types of sites, functions, composition of user tends to be complicated, meanwhile the web UI interface design is also constantly updating, and multimedia technology becomes the dominant modern type of web page new media, with the advantages of beyond time and space. In the increasingly fierce market competition, as a cost-effective carrier, web page gradually increase the level of the viewer's visual experience, and increase the added value of the web page, after years of development and improvement of its interface design. However, making a good ease of use and elegant visual design and reasonable convergence on the UI web interface design is the key to compete for market heavyweight product weights. Based on the status of domestic web design, this paper conduct a systematic and thorough research of web UI interface design sensibility, including the area of concept, development, design principles and design methods, etc., and make dialectical unity of the website development of the arts of communication finally give a reasonable forecast. Web-interface design and development of process is the main thread of this research, combined with the actual development projects. This paper also address the view of graphical communication, humanity and the concept of liberalization in web interface design interactive in order to provide a corresponding theoretical foundation and rich creative tool for interface design and development.
现今的互联网世界中,人类表达各种思想情感的媒介多种多样,已经不局限于文字命令语言界面(Command Line Interface),图形用户界面(Graphical User Interface)的发展正符合了这一平台的人性化需求。近年来网站的种类、功能、用户构成等因素趋于复杂化,网页UI界面设计也在不断地更迭换代,超越平面与空间的时空多媒体技术以不可比拟的优势成为现代网页新媒体的主导型式。在愈演愈烈的市场竞争中,网页作为一种经济效益的载体经过多年的发展和完善,其界面设计逐步提高了浏览者的视觉体验水平,增加了网页的附加值。然而,能够使得良好的易用性和精美的视觉设计合理融合于UI界面设计中更是网页产品争夺市场的重量级砝码。本文针对国内网页设计现状,对网页UI界面的感性化设计从概念、发展、设计原则和设计方法等方面,进行了系统深入的研究,同时辩证统一的对网页沟通艺术的发展做出合理预测。全文以网页界面设计开发流程为主导,结合实际开发项目,对网页界面设计提出了交互沟通图像化、人性化、自由化的观念,为界面设计开发提供了相应理论基础和丰富的创作手段。
With the rapid development of science and technology, computer technology is also booming, however, no matter how advanced the computer evoluted, it is still under the control and manipulate of human. So the task of making barrier-free "communication" between human which has emotional feelings and feelingless-cold-machine became a important problems and apparently this exchange will undoubtedly need a good "ideas" exchange platform. UI (User Interface) is a direct man-machine interface between the user and the computer, is also the most direct exchange of information channel, its importance is becoming more and more prominent and has developed into a set of cognitive science, design science, ergonomics, Linguistics and other multi-disciplinary participation.
In Today's Internet world, human can express thoughts and feelings through a variety of media and is no longer limited to the CUI (Command User Interface), so, a GUI (Graphical User Interface) development is in line with the platform of humanity of the demand. In recent years, the web page factors such as the types of sites, functions, composition of user tends to be complicated, meanwhile the web UI interface design is also constantly updating, and multimedia technology becomes the dominant modern type of web page new media, with the advantages of beyond time and space. In the increasingly fierce market competition, as a cost-effective carrier, web page gradually increase the level of the viewer's visual experience, and increase the added value of the web page, after years of development and improvement of its interface design. However, making a good ease of use and elegant visual design and reasonable convergence on the UI web interface design is the key to compete for market heavyweight product weights. Based on the status of domestic web design, this paper conduct a systematic and thorough research of web UI interface design sensibility, including the area of concept, development, design principles and design methods, etc., and make dialectical unity of the website development of the arts of communication finally give a reasonable forecast. Web-interface design and development of process is the main thread of this research, combined with the actual development projects. This paper also address the view of graphical communication, humanity and the concept of liberalization in web interface design interactive in order to provide a corresponding theoretical foundation and rich creative tool for interface design and development.
引文
[1]罗仕鉴.人机界面设计[M].北京:机械工业出版社,2002:18-93.
[2] Jef Raskin.人本界面[M].史元春,译.北京:机械工业出版社,2004:13-105.
[3] Jakob Nielsen.可用性工程[M].刘正捷,译.北京:机械工业出版社,2004:27-85.
[4] Jakob Nielsen . Non-command user interfaces[C] Communications of the ACM.1993,4(36):83-99.
[5] Alan Cooper.软件观念革命——交互设计精髓[M].詹剑锋,张知非,译.北京:电子工业出版,2005:3-78.
[6]高峰.同质化背景下的消费类数码产品人机界面研究[D].江南大学,2004
[7]姜蔚.用户界面设计研究[D].浙江大学,2006.
[8]郭翠云.浅谈人机交互风格及其发展趋势[J].管理观察,2009,(28).
[9]尹定邦.设计学概论[M].湖南科学技术出版社,2006:51-178.
[10]赵江洪.设计心理学[M].北京:北京理工大学出版社,2005:47-133.
[11] Alan Cooper.交互设计之路——让高科技产品回归人性(第2版)[M].Chris Ding(丁全钢),译.北京:电子工业出版社,2006:7-25.
[12]徐刚.Windows用户界面设计与优化策略[M].北京:人民邮电出版社,2005:18-109.
[13]方志刚,唐晖,马卫娟.目标驱动的用户界面设计[J].计算机研究与发展,1993,(9).
[14]周斌仲.软件图形用户界面设计[D].武汉理工大学,2005.
[15] B. Sheiderman . Direct manipulations : A step beyond programming languages[J].IEEE Computer,1983,16,(8).
[16]刘景春.自然人机交互技术中的界面设计[J].佳木斯大学学报,2008,(3).
[17]杨帆,魏东.交互设计在人机界面设计中的应用[J].艺术与设计(理论),2007,(04).
[18]俸文.虚拟环境人机交互技术[D].南京理工大学,2004.
[19]吕争.基于语音的人机交互界面的研究与实现[J].荆门职业技术学院学报,2007,(22).
[20] Kleiner Brian M. Macro-ergonomic analysis of formalization in a dynamic work system[J].Applied Ergonomics,1998,29,(1):41-54.
[21]苏焕.新媒体环境下的品牌展示设计研究[D].浙江大学,2005.
[22]杨明朗,王红.人机交互界面设计中的感性分析[J].包装工程,2007,(28).
[23]殷正声,杨文庆.界面交互设计在个人移动通信设备产品中的应用[D].同济大学,2006.
[24]方志刚.三维空间控制器及其在三维空间交互技术中的应用[J].计算机辅助设计与图形学报,1998,(2).
[25]潘长学.感性工学在产品配色设计中的应用研究[J].包装工程,2007,(5).
[26]张晓龙,吴忠海.以儿童为中心的情景式人机交互方法[J].计算机应用,2009,(12).
[27]赵和.移动通讯产品用户界面设计研究[J].装饰,2007,(3).
[28]郭亮,李晗.手指图像识别技术在移动电话人机交互中的应用[J].电脑知识与技术,2009,(5).
[29]陈胜利.非物质展示设计研究[D].武汉理工大学,2004.
[30]方敏.链接技术与文化的人机交互界面[J].苏州大学学报,2008,(28).
[31] Shen S-T., Woolley M. & Prior S.D. Towards culture-centred design[J]. Interacting with Computer,2006,(4):820-852.
[32] Chen K-M., Prior S.D. Using music and motion analysis to construct 3D animations and visualizations[J]. Digital Creativity,2008,(2):91-104.
[33] A. G. Hauptmann , P. McAvinney . Gestures with speech for graphic manipulation[J]. Man-Machine Studies,1993,18,(2).
[34] G. Burdea, P. Coiffet.Virtual reality technology(2nd Edition)[M],Wiley-IEEE Press,2003.
[35] W. W. Garve , Auditory Icons. Using sound in computer interface[J]. Human-Computer Interface,1986,(2).
[36]方志刚.三维空间控制器及其在三维空间交互技术中的应用[J].计算机辅助设计与图形学报,1998,(2).
[37]尹俊.基于互联网的2.5维虚拟场景的研究与现实[D].西安电子科技大学,2006.
[38] Teas Don C. The development of auditory icons for representation of virtual objects in 3-D space[C/OL].(1997),http://handle.dtic.mil/100.2/ADA364329.
[39] Donald. A. Norman.情感化设计付秋芳[M].程进三,译.北京:电子工业出版社,2005.
[40] Patrick J. Lynch, Sarah Horton.Web Style Guide: Basic Design Principles forCreating Web Sites(3rd Edition)[M].Yale University Press,2009.
[41]鲁晓波,詹炳宏.数字图形界面艺术设计[M].北京:清华大学出版社,2006.
[42]刘慎权,王介生.光波场绘制技术的原理及应用[D].国科学院研究生院(博士),1997.
[43]中国人机界面设计门户网站http://www.chinaui.com/.
[44]视觉中国http://www.chinavisual.com/.
[2] Jef Raskin.人本界面[M].史元春,译.北京:机械工业出版社,2004:13-105.
[3] Jakob Nielsen.可用性工程[M].刘正捷,译.北京:机械工业出版社,2004:27-85.
[4] Jakob Nielsen . Non-command user interfaces[C] Communications of the ACM.1993,4(36):83-99.
[5] Alan Cooper.软件观念革命——交互设计精髓[M].詹剑锋,张知非,译.北京:电子工业出版,2005:3-78.
[6]高峰.同质化背景下的消费类数码产品人机界面研究[D].江南大学,2004
[7]姜蔚.用户界面设计研究[D].浙江大学,2006.
[8]郭翠云.浅谈人机交互风格及其发展趋势[J].管理观察,2009,(28).
[9]尹定邦.设计学概论[M].湖南科学技术出版社,2006:51-178.
[10]赵江洪.设计心理学[M].北京:北京理工大学出版社,2005:47-133.
[11] Alan Cooper.交互设计之路——让高科技产品回归人性(第2版)[M].Chris Ding(丁全钢),译.北京:电子工业出版社,2006:7-25.
[12]徐刚.Windows用户界面设计与优化策略[M].北京:人民邮电出版社,2005:18-109.
[13]方志刚,唐晖,马卫娟.目标驱动的用户界面设计[J].计算机研究与发展,1993,(9).
[14]周斌仲.软件图形用户界面设计[D].武汉理工大学,2005.
[15] B. Sheiderman . Direct manipulations : A step beyond programming languages[J].IEEE Computer,1983,16,(8).
[16]刘景春.自然人机交互技术中的界面设计[J].佳木斯大学学报,2008,(3).
[17]杨帆,魏东.交互设计在人机界面设计中的应用[J].艺术与设计(理论),2007,(04).
[18]俸文.虚拟环境人机交互技术[D].南京理工大学,2004.
[19]吕争.基于语音的人机交互界面的研究与实现[J].荆门职业技术学院学报,2007,(22).
[20] Kleiner Brian M. Macro-ergonomic analysis of formalization in a dynamic work system[J].Applied Ergonomics,1998,29,(1):41-54.
[21]苏焕.新媒体环境下的品牌展示设计研究[D].浙江大学,2005.
[22]杨明朗,王红.人机交互界面设计中的感性分析[J].包装工程,2007,(28).
[23]殷正声,杨文庆.界面交互设计在个人移动通信设备产品中的应用[D].同济大学,2006.
[24]方志刚.三维空间控制器及其在三维空间交互技术中的应用[J].计算机辅助设计与图形学报,1998,(2).
[25]潘长学.感性工学在产品配色设计中的应用研究[J].包装工程,2007,(5).
[26]张晓龙,吴忠海.以儿童为中心的情景式人机交互方法[J].计算机应用,2009,(12).
[27]赵和.移动通讯产品用户界面设计研究[J].装饰,2007,(3).
[28]郭亮,李晗.手指图像识别技术在移动电话人机交互中的应用[J].电脑知识与技术,2009,(5).
[29]陈胜利.非物质展示设计研究[D].武汉理工大学,2004.
[30]方敏.链接技术与文化的人机交互界面[J].苏州大学学报,2008,(28).
[31] Shen S-T., Woolley M. & Prior S.D. Towards culture-centred design[J]. Interacting with Computer,2006,(4):820-852.
[32] Chen K-M., Prior S.D. Using music and motion analysis to construct 3D animations and visualizations[J]. Digital Creativity,2008,(2):91-104.
[33] A. G. Hauptmann , P. McAvinney . Gestures with speech for graphic manipulation[J]. Man-Machine Studies,1993,18,(2).
[34] G. Burdea, P. Coiffet.Virtual reality technology(2nd Edition)[M],Wiley-IEEE Press,2003.
[35] W. W. Garve , Auditory Icons. Using sound in computer interface[J]. Human-Computer Interface,1986,(2).
[36]方志刚.三维空间控制器及其在三维空间交互技术中的应用[J].计算机辅助设计与图形学报,1998,(2).
[37]尹俊.基于互联网的2.5维虚拟场景的研究与现实[D].西安电子科技大学,2006.
[38] Teas Don C. The development of auditory icons for representation of virtual objects in 3-D space[C/OL].(1997),http://handle.dtic.mil/100.2/ADA364329.
[39] Donald. A. Norman.情感化设计付秋芳[M].程进三,译.北京:电子工业出版社,2005.
[40] Patrick J. Lynch, Sarah Horton.Web Style Guide: Basic Design Principles forCreating Web Sites(3rd Edition)[M].Yale University Press,2009.
[41]鲁晓波,詹炳宏.数字图形界面艺术设计[M].北京:清华大学出版社,2006.
[42]刘慎权,王介生.光波场绘制技术的原理及应用[D].国科学院研究生院(博士),1997.
[43]中国人机界面设计门户网站http://www.chinaui.com/.
[44]视觉中国http://www.chinavisual.com/.