网页界面设计

网站用户界面设计的原则网站用户界面设计UI设计包括的三个部分什么是UI，什么是UI设计UI设计的发展阶段近几年，有一个新兴的词在设计领域诞生，这个词就是“UI”。2000年以前国内的UI设计刚开始萌芽，但当时做UI等于做平面设计，后来随着flash的流行，一部分美术设计师开始去思考互动性。到了2002年一些企业开始重视到UI设计的重要性，纷纷把UI部门从软件编码团队里提出来，开始有了专门针对软件产品的图形设计师和交互设计师。2004年以后随着手机，电脑附加软件，MP3等大量产品上市，UI设计也开始被提升到一个新的高度和重视程度。2005年国内的UI设计已经相对成熟了，有了专门的职业分工，也出现了很多不错的UI一线设计师与UI设计交流组织。在短短的几年里UI设计师越来越多，设立UI部门的企业越来越普遍，各大院校也出现了和UI相关的专业，UI设计的组织和网站层出不穷。这一切都预示着一个“UI”大时代已经到来。UI软件编码flash平面UIUI的本意是用户界面(userinterface)，概括成一句话就是——人和机器之间的界面。这个界面实际上是体现在我们生活中的每一个环节的，例如我们常用的手机，按键和屏幕就是这个界面，开车时候方向盘和仪表盘就是这个界面，看电视的时候遥控器和屏幕就是这个界面，用电脑的时候键盘和显示器就是这个界面。UI包括用户研究，交互设计与界面设计三个部分。UI设计在人和机器的互动过程（HumanMachineInteraction）中，有一个层面，即我们所说的界面（interface）。从心理学意义来分，界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性。用户研究交互设计界面设计用户研究包含两个方面：一是可用性工程学（usabilityEngineering），研究如何提高产品的可用性，使得系统的设计更容易被人使用、学习和记忆；二是通过可用性工程学的研究，发掘用户的潜在需求，为技术创新提供另外一条思路和方法（consumerinsight）。所以有：Usabilityisallaboutmakingthingseasiertousesopeoplecanfocusmoreontheworkandlessonthetoolsthathelpthemdothework.用户研究是一个跨学科的专业，涉及可用性工程学、人类功效学、心理学、市场研究学、教育学、设计学等等学科。用户研究技术是站在人文学科的角度来研究产品，站在用户的角度介入到产品的开发和设计中。用户研究通过对于用户的工作环境、产品的使用习惯等研究，使得在产品开发的前期能够把用户对于产品功能的期望、对设计和外观方面的要求融入到产品的开发过程中去，从而帮助企业完善产品设计或者探索一个新产品概念。他是得到用户需求和反馈的途径，也是检验界面与交互设计是否合理的重要标准。这部分指人与机之间的交互工程，在过去交互设计也由程序员来做，其实程序员擅长编码，而不善于与最终用户交互。所以，很多的软件虽然功能比较齐全，但是交互方面设计很粗糙，繁琐难用，学习困难。使用这样的软件后，不是使人聪明与进步而是让人感到愚弄与羞辱。许多人因为不能操作电脑软件而下岗失业，这样的交互使电脑成为让人恐惧的科技怪兽。于是我们把交互设计从程序员的工作中分离出来单独成为一个学科，也就是人机交互设计。他的目的在于加强软件的易用、易学、易理解，使计算机真正成为方便地为人类服务的工具。一直以来界面设计工作没有被重视起来。做界面设计的人也被称为“美工”。其实界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与机器的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。界面设计是人与机器之间传递和交换信息的媒介，包括硬件界面，软件界面和网站界面。近年来，随着信息技术与计算机技术的迅速发展，网络技术的突飞猛进，人机界面设计和开发已成为国际计算机界和设计界最为活跃的研究方向。网站用户界面（WebsiteUserInterface）是指网站用于和用户交流的外观、部件和程序等等。我们经常上网，会看到很多网站设计很朴素，看起来给人一种很舒服的感觉；Apple网站很有现代感，能给人带来意外的惊喜和视觉的冲击；而相当多的网站页面上充斥着怪异的字体，花哨的色彩和图片，给人网站制作粗劣的感觉。网站界面的设计，既要从外观上进行创意以达到吸引眼球的目的，还要结合图形和版面设计的相关原理，从而使得网站设计变成了一门独特的艺术。通常的讲，网站用户界面的设计应遵循以下几个基本原则：1．用户导向（Useroriented）原则设计网页首先要明确到底谁是使用者，要站在用户的观点和立场上来考虑设计网站。要作到这一点，必须要和用户来沟通，了解他们的需求、目标、期望和偏好等。网页的设计者要清楚，用户之间差别很大，他们的能力各有不同。比如有的用户可能会在视觉方面有欠缺（如色盲），对很多的颜色分辨不清；有的用户的听觉也会有障碍，对于软件的语音提示反映迟钝；而且相当一部分用户的计算机使用经验很初级，对于复杂一点的操作会感觉到很费力。另外，用户使用的计算机机器配置也是千差万别，包括显卡、声卡、内存、网速、操作系统以及浏览器等都会有不同。设计者如果忽视了这些差别，设计出的网页在不同的机器上显示就会造成混乱。2．KISS（KeepItSimpleAndStupid）原则KISS原则就是KeepItSampleAndStupid的缩写，简洁和易于操作是网站设计的最重要的原则。毕竟，网站建设出来是用于普通网民来查阅信息和使用网络服务。没有必要在网站上设置过多的操作，堆集上很多复杂和花哨的图片。该原则一般的要求，网站的下载不要超过10秒钟（普通的拨号用户56Kbps网速）；尽量使用文本链接，而减少大幅图片和动画的使用；操作设计尽量简单，并且有明确的操作提示；网站所有的内容和服务都在显眼处向用户予以说明等。3．布局控制关于网站排版布局方面，很多网站设计者重视不够，网站排版设计的过于死板，甚至照抄他人。如果网站的布局凌乱，仅仅把大量的信息堆集在页面上，会干扰浏览者的阅读。一般在网站设计上所要遵循的原理有：（1）Miller公式。根据心理学家GeorgeA.Miller的研究表明，人一次性接受的信息量在7个比特左右为宜。总结一个公式为：一个人一次所接受的信息量为7±2比特。这一原理被广泛应用于网站建设中，一般网站上面的栏目选择最佳在5～9个之间，如果网站所提供给浏览者选择的内容链接超过这个区间，人在心理上就会烦躁，压抑，会让人感觉到信息太密集，看不过来，很累。例如微软公司的网站的栏目设置：Highlights、Latestreleases、Usingyourcomputer、ForBusiness、ForITProfessionals、ForDevelopers共六项。Apple的栏目设置也是六项。然而很多国内的网站在栏目的设置远远超出这个区间。3．布局控制（2）分组处理。上面提到，对于信息的分类，不能超过9个栏目。但如果你的内容实在是多，超出了9个，需要进行分组处理。如果，你的网站上提供几十篇文章的链接，需要每隔7篇加一个空行或平行线做以分组。如果你的网站内容栏目超出9个，可以采用颜色区分或者是框架来区分。如google公司的网站，就是一个分组的很好的框架区分的例子。共有N多个栏目，超过了9个。为了不破坏Miller公式，在设计时就是使用了分组的方式：4．视觉平衡网站设计时，也要各种元素（如图形、文字、空白）都会有视觉作用。根据视觉原理，图形与一块文字相比较，图形的视觉作用要大一些。所以，为了达到视觉平衡，在设计网站时需要以更多的文字来平衡一幅图片。另外，按照中国人的阅读习惯是从左到右，从上到下，因此视觉平衡也要遵循这个道理。例如，你的很多的文字是采用左对齐〈Align=left〉，需要在网站的右面加一些图片或一些较明亮、较醒目的颜色。一般情况下，每个网站都会设置一个页眉部分和一个页脚部分，页眉部分常放置一些Banner广告或导航条，而页脚部分通常放置联系方式和版权信息等，页眉和页脚在设计上也要注重视觉平衡。同时，也决不能低估空白的价值。如果你的网站上所显示的信息非常密集，这样不但不利于读者阅读，甚至会引起读者反感，破坏该网站的形象。在网站设计上，适当增加一些空白，精炼你的网站，使得页面变的简洁。5．色彩的搭配和文字的可阅读性颜色是影响网站的重要因素，不同的颜色对人的感觉有不同的影响，例如：红色和橙色使人兴奋并使得心跳加速；黄色使人联想到阳光，是一种快活的颜色；黑颜色显得比较庄重，考虑到你希望对浏览者产生什么影响，为网站设计选择合适的颜色（包括背景色、元素颜色、文字颜色、链接颜色等）。通常情况下，一个页面内尽量不要使用超过4种色彩，太多的色彩容易让人感觉没有方向、没有侧重。当主题色确定好以后，考虑其他配色时，一定要考虑其他配色与主题色的关系，要体现什么样的效果；另外还要考虑哪种因素可能占主要地位，是明度、纯度还是色相。为方便阅读网站上的信息，可以参考报纸的编排方式将网站的内容分栏设计，甚至两栏也要比一满页的视觉效果要好。另一种能够提高文字可读性的因素是所选择的字体，通用的字体（Arial，Vedana，Garamond，TimesNewRoman，中文宋体）最易阅读，特殊字体用于标题效果较好，但是不适合正文。如果在整个页面使用一些特殊字体（如Cloister，Gothic，Script，Westminster，华文彩云，华文行楷），这样读者阅读起来感觉一定很糟糕。该类特殊字体如果在页面上大量使用，会使得阅读颇为费力，浏览者的眼睛很快就会疲劳，不得不转移到其他页面。6．和谐与一致性通过对网站的各种元素（颜色、字体、图形、空白等）使用一定的规格，使得设计良好的网站看起来应该是和谐的。或者说，网站的众多单独网站应该看起来像一个整体。网站设计上要保持一致性，这又是很重要的一点。一致的结构设计，可以让浏览者对网站的形象有深刻的记忆；一致的导航设计，可以让浏览者迅速而又有效的进入在网站中自己所需要的部分；一致的操作设计，可以让浏览者快速学会在整个网站的各种功能操作。破坏这一原则，会误导浏览者，并且让整个网站显的杂乱无章，给人留下不良的印象。当然，网站设计的一致性并不意味着刻板和一成不变，有的网站在不同栏目使用不同的风格，或者随着时间的推移不断的改版网站，会给浏览者带来新鲜的感觉。7．个性化（1）符合网络文化企业网站不同于传统的企业商务活动，要符合Internet网络文化的要求。首先，网络最早是非正式性、非商业化的，只是科研人员用来交流信息的。其次，网络信息是只在计算机屏幕上显示而没有打印出来阅读，网络上的交流具有隐蔽性，谁也不知道对方的真实身份。另外，许多人在上网的时候是在家中或网吧等一些比较休闲，比较随意的环境下。此时网络用户的使用环境所蕴涵的思维模式与坐在办公室里西装革履的时候大相径庭。因此，整个互联网的文化是一种休闲的、非正式性的、轻松活泼的文化。在网站上使用幽默的网络语言，创造一种休闲的、轻松愉快、非正式的氛围会使网站的访问量大增。7．个性化（2）塑造网站个性（营造统一的独特风格）另外，网站的整体风格和整体气氛表达要同企业形象相符合并应该很好的体现企业CI。在这方面比较经典的案例有：可口可乐个性鲜明的前卫网站LifeTastesGood；工整、全面、细致的通用电气公司网站Webringgoodthingstolife（GE带来美好的生活）