伴随着3G技术和3G设备的成熟, 一种被称为UI风格的设计形势日趋主流, 这种风格最初是用于移动界面或者电脑软件, 后来被迁移到了Web端。网页作为一种新的视觉表现形式, 不仅有传统平面设计的特征, 又有现代计算机时代的交互, 是将技术性与艺术性完美结合的创造性活动。由于社会经济的快速发展以及电子产品行业的繁荣, 社会对UI设计的要求标准也愈加高级, 增加了设计流程的新观点。电脑拥有的UI设计搭建了人机交互的平台, 提高了用户体验。在设计中应当对其中的艺术元素进行明确分析, 设计出更优化的、更人性的网站界面。在网站UI设计中构成美感元素的主要包括文字、图形、版式三个方面, 这三个方面既独立存在, 又相辅相成。
一、文字
网页设计从最早的纯文字内容发展为图文并茂, 仍然是无法被取代的重要设计元素。文字是人类文明传承的载体, 符合人类的阅读习惯, 并且在网页设计中, 一个以文字为主的网站比图文并茂的网站加载速度更快、更流畅, 节省了用户的下载时间和等待时间[1]。
至今, 已经有大量商业网站使用多图少文字的网页设计方式。基于用户体验的网站设计, 了解用户使用习惯, 一般使用大量图片进行瀑布式排版设计。以少量文字作为辅助, 且多作为超链接跳转使用。如果在网站设计中, 文字占有较大比重时, 应当对颜色、行间距、字间距字号、字体、排列方式、重点强调以及风格统一进行设计规划。并且要鼠标未点击文字时、鼠标点击时、鼠标点击后三种状态进行不同设计[2]。
文字除了传达网站信息内容外, 还是增强网站视觉美感的介质。文字在整个网站页面设计中的好坏直接影响到网站风格以及美观程度, 应精心处理好文字与版式的关系[3]。
二、图形
图形的发展可以说与人类社会的历史发展息息相关。图形以其独特的想象力、创造力以及超现实的自由创造, 在网页设计中展现着独特的视觉魅力。图形较于文字而言, 它拥有直接有力的传播信息能力、传递信息生动准确、易识别和记忆、可以超越国家民族间的语言障碍。而优秀的图形设计要能准确传达信息、具有视觉冲击力、表现独特、富有个性且艺术性强等。
在如今的网页设计中, 图形占用了大量比重, 甚至是占据了网页的整个版面。需要注意的是背景与内容图形的关系, 背景图形作为衬托主题的元素, 在点缀装饰画面的同时, 绝不能喧宾夺主。内容图形在网页中所占的地位应是主体, 而文字和背景作为装饰, 可以为整个页面增添活力, 给人视觉冲击, 进而产生点击跳转行为, 增加网站浏览量, 使用户产生购买行为。
图形包含图片。在网站设计中图片常用PNG、JPG、GIF三种格式, 值得注意的是:图片大小以及清晰度的把控。如果图片太小, 在网站设计时经设计师放大后, 会出现图片模糊不清和马赛克的情况;如果图片太大, 并且清晰度很高, 会使网站访问者打开图片的速度变慢, 影响用户体验。
三、版式
版式是整个网站页面的主体, 也是面积最大的部分。版式不仅包括页面布局、内容层次, 还包括整体色调、创意内容。它将文字、图形等元素进行归纳组合, 使整个页面美观和谐统一, 提高用户使用体验, 实现信息传达的最理想效果, 实现网站设计的最终目的。如平面设计一样, 网站设计也同样需要遵循一些基本原则, 如对齐性、密集性、对比性、重复性。但网站设计要在此基础上更加注重以下形式法则:
1、层次感
层次画面的层次感, 画面的内容有主次之分, 有空间感和距离感、虚实之分、光影层次清晰, 这样的画面才起来才真实、丰富, 而且通过一些特殊的处理手法, 可以进一步拉开画面中不同元素的层次, 使得主体更加突出。远近层次清晰的画面, 搭配网页中的内容, 不仅可以使页面视觉效果上更加透气, 并且也能使用户产生很强的代入感。画面主体到次要内容以及背景依次由实到虚变化, 在满足正常情况的近实远虚下, 对内容进行人为的主次排列并进行虚实处理。把握好版式中的虚实层次, 结合网页的内容, 可以使页面看起来更加接近真实场景, 提高视觉体验效果。合理运用一些氛围元素的渲染, 不仅可以起到烘托页面的作用, 而且可以突出整体, 弱化主体外的其他元素, 拉开主次关系。
2、色调运用
画面的整体色调是传达画面所要表达情感的有效途径。不同的色调可以带给人不同的体验, 正因为色彩的丰富, 才使得网站设计更加精彩。暖色调彰显出画面的热情奔放, 冷色调则表现出画面的冷酷和高级感, 运用在网页设计中时都要对画面中所有元素进行统一的环境色处理。在色调处理上用到冷暖对比的形式可以使画面细节更加丰富。
3、创意发挥
创意丰富的海报创意不仅可以抓人眼球, 而且可以很巧妙地表达出主题。大到整体的形式, 小到文字或素材的细节处理, 都可以运用到网页设计中。从素材处理、文字烘托等方面进行创意发挥, 让网站设计更具新意。
四、结语
网页设计作为一个新兴的设计行业, 它既有平面设计的特性, 又与计算机技术完美结合, 具有平面广告没有的优势。在这个网络技术发达的时代, UI设计显得愈加重要。如何提高网站UI设计的审美水平, 让网站不仅作为一个传播信息的方式, 更是一个视觉与功能并重的平台, 是值得我们深思的问题。
摘要：随着科技日新月异的发展, 电子科技产品越来越多, 随之而来的界面设计也被加以重视。针对WEB前端显示界面的设计是不可或缺的, 界面风格从刚开始的单一风格发展为日渐多样化的界面风格, 更加注重用户体验。UI设计包含前端界面设计、交互设计两大范畴, 而视觉美感元素对整个网站页面占有很大比重。对于此, 要解析网站UI视觉设计元素的内容, 探索其美感元素的构成方式。
关键词：网站UI设计,视觉,美感元素
参考文献
[1] 罗宾·威廉姆斯, 写给大家看的设计书[M], 人民邮电出版社, 2009.
[2] 马东, 网页与网站设计[M], 东方出版社, 2008.
[3] Robert Hoekman.Jr, 瞬间之美:Web界面设计如何让用户心动[M], 人民邮电出版社, 2009.