Research on Visual Elements of Web UI Design
Heshan Liu
Department of Mechanical Engineering Shandong University, SDU
Jinan, China
Abstract-With the rising of peoples aesthetic requirements, visual design is becoming the important factor of Web page user interface to success. Starting from the visual elements of Web VI design, this paper analyzes the function of component elements of webpage interface, and investigates the positioning
and application of three essentials of vision design rules: visual focus, visual processes and visual space, in web page interface design, which provide useful reference for designers.
Keywords- webpage interface ; visual elements; interactive function
I.
Till June 2010, the number of Chinese netizen has reached 4 billion and still increased sharply. Network media has become one of the main ways for information exchange, under this situation, webpage interface design has also become a significant research field. According to the research, with the rising of peoples aesthetic requirements, the main point of Webpage UI design has become the visual design of the interface instead of the interactive function design, which generally meets the requirements well with the developed technology. In this paper, visual elements design has be given the new features.
- ABOUY WEBP AGE USER IN TERFACE
UI is the abbreviation of the Interface. Web Interface refers to the visual media through which the user could communicate with the computer software on the network. Essentially, the Web interface design is the extension of graphic format design in digital ages.
According to users requirements, the users experience on webpage interface could happen on three levels: Visceral, Behavioral and Reflective. Among these, the Visceral level means that the user get the first impression of the web interface by vision and auditory sense. In this process, the direct impression is mainly determined by esthetic factors. Furthermore, according to the 7 Seconds Law, users make the decision whether they like the interface within the first seven seconds on seeing it. In other words, the visual elements design of webpage interface determines the users preference. Therefore, the visual design is a very important influencing factor in webpage interface design. Visual design should not only have affection on the first level but also play a catalytic role on the other two levels, promoting the interactive function at the same time.
978-1-4244-7974-0110/$26.00 copy;2010 IEEE
FujunMa
Department of Mechanical Engineering Shandong University, SDU
Jinan, China
- VIS UAL ELEMENTS OF WEB UI
Vision elements of webpage include size, shape, color as well as the way of format etc. The word 'vision' comes from the physiological field, it refers to the process that when the lighting reaches the eye, stimulates the photoreceptor cells to generate signal, which, after being processed by the visual system in the brain, for m the visual image. Sometimes vision would produce illusion, which can be used by communication studies, arranging visual elements to create a lot of 'camouflage', bringing different visual effects.
- Visual Elements of Webpage
Webpage elements include text, graph, video, audio etc. while the plane vision consists of elements such as spots, lines and surfaces. As to interface of the web, the designer should consider both of the two aspects above. The visual elements of the web interface can be put into categories according to the way of information exchange and browsing.
-
- Icon or title. The title is usually the combination of text while the symbol is composed by different colors, shapes and textures. Icon and title are usually located at upper part or the position of visual focus.
- Navigation bar. Navigation bar is usually located at the position of second visual focus and is composed by text and background. Because of the content and layout of the text, its background should be distinguished from that of the web to reflect features of the design.
- Video or Flash. Video and flash are usually on the position that is lower than the navigation bar. Their sizes, positions, features are influenced by the properties of the website. For example, their sizes are bigger and located in more striking position in video website while smaller and secondary in retail website.
- Navigation bar of columns. It functions as the newspaper headline of different forum, providing users with guidance note. The appearance of it should be accordance with the background of the current part and be slightly different.
- The content. Content is the main part for users. The text should be clear, with nice looking font, being distinguished from the color of the background.
128
- the New Positioning of Visual Elements of Web UI
Through the arrangement of colors, shapes, textures and format, designers could bring new functions to the web interface besides aesthetic appearance. For instance, to divide different functional forum, interior designers make a distinction between kitchen and dining area through different colors of floor tiles. Similarly, the different parts of the web interface can be distinguished from others by various colors, shapes and textures, making a clear division of different forums to guide visual processes; allow users quickly finding the information; enhance the users psychological satisfaction and to emphasize the features of the website.
- THE APPLICATION OF VIS UAL ELEMENTS DESIGN OF
WEB UI
The three factors, vis
剩余内容已隐藏，支付完成后下载完整资料
Web UI设计的视觉元素研究
摘要：
随着人们审美要求的提高，视觉设计成为网页用户界面成功的重要因素。本文从Web UI设计的视觉元素出发，分析了网页界面组成元素的功能，研究了网页界面设计中视觉设计规则的三个要点：视觉焦点，视觉过程和视觉空间的定位和应用。 本文旨在为设计师提供有用的参考。
关键词:网页界面 视觉元素 交互功能
第一节
引言
截至2010年6月，中国网民人数已达40亿，并且仍然急剧增加。网络媒体已成为信息交换的主要方式之一，在这种情况下，网页界面设计也成为一个重要的研究领域。研究表明，随着人们审美要求的提高，网页UI设计的重点已经成为界面的视觉设计而不是交互式功能设计，这些设计通常与开发的技术相适应。在本文中，视觉元素设计被赋予了新的特征。
第二节
关于网页用户界面
UI是用户界面的缩写。Web用户界面是指用户可以通过其与网络上的计算机软件通信的可视媒体。从本质上讲，Web界面设计是数字时代图形格式设计的延伸。
根据用户的要求，用户在网页界面上的体验可以分为三个层次：本能，行为和反思。其中，出于本能级别意味着用户通过视觉和听觉获得对Web界面的第一印象。在这个过程中，直接印象主要取决于审美因素。此外，根据7秒法则，用户在看到界面的前7秒钟内决定是否喜欢界面。换句话说，网页界面的视觉元素设计决定了用户的偏好。因此，视觉设计影响是网页界面设计的一个非常重要的因素。并且视觉设计不仅应该对第一层有影响，还要在其他两个层面起催化作用。
第三节
Web UI的可视元素
网页的视觉元素包括大小，形状，颜色以及格式等方式。“视觉”一词来自生理领域，它指的是当光线到达眼睛时，刺激感光细胞产生信号的过程。在由大脑中的视觉系统处理后，形成视觉图像。有时视觉会产生幻觉，可以通过传播研究，安排视觉元素来创造大量的“伪装”，带来不同的视觉效果。
A.网页的视觉元素
网页元素包括文本，图形，视频，音频等，而平面视觉由诸如斑点，线条和表面之类的元素组成。至于网络的界面，设计者应该考虑上述两个方面。可以根据信息交换和浏览的方式将Web界面的可视元素分类。
● 图标或标题。标题通常是文本的组合，而符号由不同的颜色，形状和纹理组成。图标和标题通常位于视觉焦点的上部或位置。
● 导航栏。导航栏通常位于第二视觉焦点的位置，由文本和背景组成。由于文本的内容和布局，应将其背景与网络的背景区分开以反映设计的特征。
● 视频或Flash。视频和闪光灯通常位于低于导航栏的位置。它们的大小，位置，功能受到网站属性的影响。例如，它们的尺寸更大，位于视频网站中更显着的位置，而零售网站则更小。
● colunms导航栏。它作为不同论坛的报纸标题，为用户提供指导说明。它的外观应该与当前部分的背景一致，并且略有不同。
● 内容。内容是用户的主要部分。文字应清晰，字体外观漂亮，与背景颜色区分开来。
B. Web UI视觉元素的新定位
通过颜色，形状，纹理和格式的排列，设计师除了美观外，还可以为网络界面带来新的功能。例如，为了划分不同的功能论坛，室内设计师通过不同颜色的地砖区分厨房和用餐区。类似地，网络界面的不同部分可以通过各种颜色，形状和纹理与其他部分区分开来，明确划分不同的论坛以指导视觉过程; 允许用户快速查找信息; 提高用户的心理满意度，强调网站的功能。
第四节
Web UI视觉元素设计的应用
视觉焦点，视觉过程，视觉分割三个因素是图形视觉设计的框架。设计师应根据视觉美学原则以合理的顺序排列视觉元素。通过对世界网站界面设计优秀案例的研究，总结了一些可以参考的问题。
A.视觉焦点和张力的应用
英国画家兼雕塑家威廉·霍加斯曾表示，视觉中心区域有限，视网膜中心是唯一一个分辨率很高的地方，但它只覆盖了一小块区域。这表明网络界面虽然由用户首先看到，但由于其局限性，需要合理的安排和使用。
当用户浏览网站时，视觉焦点是第一个具有强烈视觉感受的地方。与平面视觉设计不同，信息沟通是网页界面设计最重要的目的。由于屏幕的限制，视觉中心通常与网站的符号组合，或位于标题或视频和闪光的位置，代表网站的主题。视觉焦点的特征应该通过与周围视觉元素的对比来强调。一个很好的例子是网站的红色符号显示更大的绿色背景区域。
“紧张”是视觉焦点的重要属性，具有不同视觉元素对比产生的心理刺激和审美吸引力。有各种方法来增强视觉焦点，例如色调的对比度，颜色的值和强度; 图的大小; 格式位置; 纹理的字符。图1是消费者行为的网站界面。如图所示，网页界面上的浅灰色背景，视觉焦点位于左上角，购物符号位于其中，它直接表明网站的主题与消费有关。视觉焦点的张力对视觉过程有影响，使得用户随后注意标题以获得关于网络迭代的属性的信息。
图1。 网页UI的视觉焦点
B.视觉过程研究
视觉过程是视觉流动的路径。受大众媒体的限制和用户的习惯的影响，视觉过程可以指示多样性趋势。如何评估良好的视觉过程设计是一个问题尽管用户的视觉过程有各种途径，但它们可以通过合理的Web UI设计进行调节，甚至完全遵循设计者的意图。否则，视觉过程将处于混乱状态，这会降低用户阅读的有效性。例如，图2显示了三种不同类型的视觉流动路径，即平滑，规则和有序曲线。
图2。 Web UI视觉图表的三个主要途径
C.固空视觉空间组合的应用
从网页UI设计的角度来看，基本目标是通过空间布局实现信息的精确过渡。因此，在两个“维度设计中，书写和图形的区域是“坚固的空间”，文本和图像之间的区域属于背景的范畴。它包括“空间”“受限空间”，受到周围空间的其他要素的限制; “副空间”，这是十字形行之间的空间; “实际空间”，构成空间的功能; “不必要的空间”，等待重建和设计。如何合理使用空位是重要的设计技巧之一。
空白空间和坚固空间是相对的概念，没有明确的定义。根据视觉物理美学规则，空间占据一定位置后，空间将成为产品。空白空间可能会影响Web UI的视觉效果，这使得界面能够释放并增强视觉张力和力量。根据视觉物理美学，定义了空间，相应地形成了空白空间，通过智能排列，可以为网络界面带来更好的视觉效果; 加强视觉张力，定义其他空间元素的排列。因此，空白空间比坚固空间更重要。上述方法也体现在中国传统书法和绘画技法上，通过“为某人留下一个分开的笔记”创造“理想的条件”。总之，设计师应该更加注重如何灵活地使用坚固的空间来满足用户在传统绘画或民俗的设计网页界面中的审美需求。
第五节
结论
在现在这个时代，通过对图形，文本和颜色等视觉元素的创造性排列的想法，使得网页界面能够满足用户需求的大趋势。设计师应该符合网站的属性，充分利用视觉艺术的原则，合理安排视觉焦点，队伍和部门合理地实现信息的交流。
剩余内容已隐藏，支付完成后下载完整资料
资料编号：[18732]，资料为PDF文档或Word文档，PDF文档可免费转换为Word
以上是毕业论文外文翻译，课题毕业论文、任务书、文献综述、开题报告、程序设计、图纸设计等资料可联系客服协助查找。
