网站界面教案

2024-05-14

网站界面教案（精选6篇）

篇1：网站界面教案

网站界面设计方法

软件的整体风格和整体气氛表达要同企业形象相符合并应该很好的体现企业 CI 这方面比较经典的案例有：可口可乐个性鲜明的前卫软件 “Life Tast Good” 工整、全面、细致的通用电气公司软件 “We bring good thing to life GE 带来美好的生活）” 崇尚科技创新文化的 3M 公司软件 “Creat solut for busi industri and home” 刻意扮演一个数字电子娱乐之集大成者的角色，另外。要成为新时代梦想实现者的索尼软件；平易近人、亲情浓郁的通用汽车公司软件体现了 “ 以人为本 ” 企业定位和营销策略；服务全面、细致、方便，处处体现 “ 门庭若市 ” 服务理念的希尔顿大酒店软件。

包括硬件界面和软件界面，界面设计是人与机器之间传送和交换信息的媒介。计算机科学与心理学、设计艺术学、认知科学和人机工程学的交叉研究领域。近年来，随着信息技术与计算机技术的迅速发展，网络技术的突飞猛进，人机界面设计和开发已成为国际计算机界和设计界最为活跃的研究方向。

研究包括：

硬件人机界面的设计风格、人文关怀等；软件人机界面的形式与标准、软件人机界面设计、Internet 网页界面设计、图标设计等；人机界面设计评价与可用性测试；新交互技术及展望，人机界面的定义、起源、发展、研究内容及发展趋势；人机界面设计中认知心理学、人机工程学、人机界面的艺术设计、色彩设计等；人机界面设计。介绍了多通道用户界面、下一代人机界面展望及附录。

关于软件界面设计 : 会看到很多软件设计很朴素，软件用户界面（Softwar User Interfac 指软件用于和用户交流的外观、部件和程序等等。如果你经常上网的话。看起来给人一种很舒服的感觉；有点软件很有创意，能给人带来意外的惊喜和视觉的冲击；而相当多的软件页面上充斥着怪异的字体，花哨的色彩和图片，给人网页制作粗劣的感觉。软件界面的设计，既要从外观上进行创意以到达吸引眼球的目的还要结合图形和版面设计的相关原理，从而使得软件设计变成了一门独特的艺术。通常的讲，企业软件用户界面的设计应遵循以下几个基本原则：．用户导向（User orient 原则

要站在用户的观点和立场上来考虑设计软件。要作到这一点，设计网页首先要明确到底谁是使用者。必需要和用户来沟通，解他需求、目标、期望和偏好等。网页的设计者要清楚，用户之间差别很大，能力各有不同。比如有的用户可能会在视觉方面有欠缺（如色盲）对很多的颜色分辨不清；有的用户的听觉也会有障碍，对于软件的语音提示反映愚钝；而且相当一部分用户的计算机使用经验很初级，对于复杂一点的操作会感觉到很费力。另外，用户使用的计算机机器配置也是千差万别，包括显卡、声卡、内存、网速、操作系统以及浏览器等都会有不同。设计者如果忽视了这些差异，设计出的网页在不同的机器上显示就会造成混乱。． KISS Keep It Simpl And Stupid 原则简洁和易于操作是网页设计的最重要的原则。终究，KISS 原则就是 “Keep It Simpl And Stupid” 缩写。软件建设进去是用于普通网民来查阅信息和使用网络服务。没有必要在网页上设置过多的操作，堆集上很多复杂和花哨的图片。该原则一般的要求，网页的下载不要超越 10 秒钟（普通的拨号用户 56 Kbp 网速）尽量使用文本链接，而减少大幅图片和动画的使用；操作设计尽量简单，并且有明确的操作提示；软件所有的内容和服务都在显眼处向用户予以说明等。．布局控制

很多网页设计者重视不够，关于网页排版布局方面。网页排版设计的过于死板，甚至照抄他人。如果网页的布局凌乱，仅仅把大量的信息堆集在页面上，会干扰浏览者的阅读。一般在网页设计上所要遵循的原理有：

人一次性接受的信息量在 7 个比特左右为宜。总结一个公式为：一个人一次所接受的信息量为 7 ± 2 比特。这一原理被广泛应用于软件建设中，1 Miller 公式。根据心理学家 Georg A.Miller 研究标明。一般网页上面的栏目选择最佳在 5 9 个之间，如果软件所提供给浏览者选择的内容链接超过这个区间，人在心理上就会烦躁，压抑，会让人感觉到信息太密集，看不过来，很累。例如 Aol.com 栏目设置： Main MyA ol Mail Peopl Search Shop Channel 和 Devic 共八个分类。Msn.com 栏目设置： MSN Home My MSN Hotmail Search Shop Monei 和 Peopl & Chat 共七项。然而很多国内的软件在栏目的设置远远超出这个区间。

不能超过 9 个栏目。但如果你内容实在多，2 分组处置。上面提到对于信息的分类。超出了 9 个，需要进行分组处置。如果，网页上提供几十篇文章的链接，需要每隔 7 篇加一个空行或平行线做以分组。如果你软件内容栏目超出 9 个，如微软公司的软件，共有 11 个栏目，超越了 9 个。为了不破坏 Miller 公式，设计时使用蓝黑两种颜色分开，具体可以访问 4 ．视觉平衡

也要各种元素（如图形、文字、空白）都会有视觉作用。根据视觉原理，网页设计时。图形与一块文字相比较，图形的视觉作用要大一些。所以，为了达到视觉平衡，设计网页时需要以更多的文字来平衡一幅图片。另外，依照中国人的阅读习惯是从左到右，从上到下，因此视觉平衡也要遵循这个这个道理。例如，很多的文字是采用左对齐〈 Align=left 需要在网页的右面加一些图片或一些较明亮、较醒目的颜色。一般情况下，每张网页都会设置一个页眉部分和一个页脚部分，页眉部分常放置一些 Banner 广告或导航条，而页脚局部通常放置联系方式和版权信息等，页眉和页脚在设计上也要注重视觉平衡。同时，也决不能低估空白的价值。如果你网页上所显示的信息非常密集，这样不但有利于读者阅读，甚至会引起读者反感，破坏该软件的形象。网页设计上，适当增加一些空白，精炼你网页，使得页面变的简洁。5 ．色彩的搭配和文字的可阅读性

不同的颜色对人的感觉有不同的影响，颜色是影响网页的重要因素。例如：红色和橙色使人兴奋并使得心跳加速；黄色使人联想到阳光，一种快活的颜色；黑颜色显得比较庄重，考虑到希望对浏览者产生什么影响，为网页设计选择合适的颜色（包括背景色、元素颜色、文字颜色、链节颜色等）可以参考报纸的编排方式将网页的内容分栏设计，为方便阅读软件上的信息。甚至两栏也要比一满页的视觉效果要好。另一种能够提高文字可读性的因素是所选择的字体，通用的字体（Arial Courier New Garamond Time New Roman 中文宋体）最易阅读，特殊字体用于标题效果较好，但是不适合正文。如果在整个页面使用一些特殊字体（如 Cloister Gothic Script Westminst 华文彩云，华文行楷）这样读者阅读起来感觉一定很糟糕。该类特殊字体如果在页面上大量使用，会使得阅读颇为费力，浏览者的眼睛很快就会疲劳，不得不转移到其他页面。6 ．和谐与一致性

使得设计良好的网页看起来应该是和谐的或者说，通过对软件的各种元素（颜色、字体、图形、空白等）使用一定的规格。软件的众多单独网页应该看起来像一个整体。软件设计上要保持一致性，这又是很重要的一点。一致的结构设计，可以让浏览者对软件的形象有深刻的记忆；一致的导航设计，可以让浏览者迅速而又有效的进入在软件中自己所需要的局部；一致的操作设计，可以让浏览者快速学会在整个软件的各种功能操作。破坏这一原则，会误导浏览者，并且让整个软件显的杂乱无章，给人留下不良的印象。当然，软件设计的一致性并不意味着刻板和一成不变，有的软件在不同栏目使用不同的风格，或者随着时间的推移不断的改版软件，会给浏览者带来新鲜的感觉。7 ．个性化 1 符合网络文化

要符合 Internet 网络文化的要求。首先，企业软件不同于传统的企业商务活动。网络最早是非正式性、非商业化的只是科研人员用来交流信息。其次，网络信息是只在计算机屏幕上显示而没有打印出来阅读，网络上的交流具有隐蔽性，谁也不知道对方的真实身份。另外，许多人在上网的时候是家中或网吧等一些比较休闲，比较随意的环境下。此时网络用户的使用环境所蕴涵的思维模式与坐在办公室里西装革履的时候大相径庭。因此，整个互联网的文化是一种休闲的非正式性的轻松活泼的文化。软件上使用幽默的网络语言，发明一种休闲的轻松愉快、非正式的氛围会使软件的访问量大增。2 塑造软件个性

篇2：网站界面教案

OPPO全称为广东欧珀移动通信有限公司，成立于2004年，是一家全球性的智能终端和移动互联网公司，致力于为客户提供最先进和最精致的智能手机、高端影音设备和移动互联网产品与服务。

一进入网站，映入眼帘的是一个促销性质的活动页面“4月约惠季，放肆燃情够”，占据了整个屏幕，以黄色，红色为主要色彩，绿色为辅助色，极具吸引力，使人激情澎湃，能够调动我们的购买欲。与此同时，此页面与其它2个页面滚动播出，一个是首发机型，有白黑2款，以米黄色为背景色，2款手机上下倾斜放置，文字以黑体为主，画面给人以简单明了的感觉，价格、首发时间等都表达相当到位；另一个是今期主打机型，以蓝色为背景，白色机身竖放在画面右侧，左侧白色字体，显得清新脱俗，不拘一格。

OPPO网站栏目分为首页、手机、配件、服务、体验店、软件商店、ColorOS和社区八部分。栏目导航位于网站首页最上方，显而易见，并且分类明确，简单明了，使用户可以在最短时间内登陆各个子网页，及时的寻求所需要的信息。在整个界面的左上方，一个不算太大的OPPO商标，可以进行图片保存，满足浏览者在这些方面需要。在LOGO上方，有新浪微博，腾讯微博和客服电话，多种联系渠道。

随着鼠标向下滚动，出现4款主打机型，图片展示，更加直观，OPPO手机的对象主要是学生，女性，产品外观大部分是白色，以浅色作为背景，显得清新脱俗。接下来是手机配件，皆是白色为背景色。图片动画效果，让人不至于浏览疲劳。网站最下边还有一些“关于我们”,“会员中心”等等相关信息。整个首页都是以白色为主色调，象征高级，科技的意象，给人一种高大上的感觉。

在手机的栏目之下，会出现一个主打机型，在之下，会有筛选条件供浏览者选择，以便选出自己中意的机型，每一个机型点击之后都会有一个详细说明，包括产品的价格，高清大图片和硬件参数。OPPO网站在宣传的同时也兼具销售的功能，用户可以直接在官网上进行购买，方便了消费者，也保证了产品的真实性。买到山寨机的可能性几乎为零。我觉得有个不足之处就是有些机型的宣传视频没有放到上面去，我曾经看到过它的一些机型的宣传视频，还是蛮好的，不过在这里我并没有看到。

在社区的栏目之下，有一张近期热播的《奔跑吧，兄弟2》为OPPO做代言的海报，极具吸引力，起到了非常好的宣传效果。

在体验店的栏目下面有五张滚动的大图，都是十分漂亮的OPPO在专卖店的室内图，室内的设计，装饰都非常的前卫，美观，瞬间有一种高大上的感觉，因为手机本身就是科技产品，所以室内非常明亮，大部分都以白色为主色调。之后页面之下有一

个宣传视频，视频做的非常有科技感，中英双字，满足不同人群。唯一的不足是视频的位置放的太不显眼了。

ColorOS是OPPO基于安卓深度定制的系统，已经应用于某些机型，在这个栏目之下，有2个宣传视频（可以叫做微电影），介绍一些此系统的功能，将其融入在一些情节当中，会引起浏览者的一些共鸣，让人印象深刻，不过不好的一点是打开视频的时候还会有广告，这一点有时会令浏览者感到不爽，甚至放弃观看。

总体来说，作为全球知名的大公司，针对中国用户的官方网站还是蛮不错的，不过仍旧需要不断改进。

以上纯属个人观点，如有雷同，不胜荣幸。

篇3：我国政府网站的界面设计

从我国的大多数政府网站的发展情况看,从最初的简单粗陋发展到现在的栏目完善、内容丰富,但是网站的界面设计却从简单到复杂甚至杂乱,造成了政府网站也出现了传统意义上的“门难进、脸难看”的问题。“门难进”对于网站来说指的是版块的分类与导航设计上杂乱无章,让用户在浏览查询时不知所言、无从点击,让用户在不断地尝试中无奈中止;“脸难看”则是指的是在信息内容的页面布局设计上,要么文字排版杂乱,要么堆砌无关内容,让用户在视觉体验上无法集中注意力甚至产生反感。而与国外的政府网站的对比中可以看出,我国政府网站在栏目、屏数、字数上的对比都有相当大的差距[1]。

造成这些情况的原因,一方面的原因在于我国的政府网站建设起步晚,缺少成熟、规范的界面设计模式,在版面设计上受国内大型门户网站尤其是商业性新闻网站的负面影响很大,同时又没有很好地借鉴国外的成功网页设计经验;在另一方面,我国大多数政府网站通过委托或外包给商业公司进行设计与维护,政府部门本身通常只负责上传更新信息内容,很少直接参与页面布局的规划与设计所造成的。

而一个网站的成功与否,不论是商业性网站还是政府网站,虽然其核心功能的定位与取向决定了其成功基础,但是对于简洁大方、直观好用的界面呈现,即决定了用户的第一映像与用户粘度,同时也其功能的最终体现,决定了其能否充分完成功能上的定位。政府网站的核心功能之一就是各类政务信息的发布与检索,因此在版面与界面的设计上更需要加以重视。

一、信息科学分类,克服“门难进”

信息的科学分类,包括两方面的内容,一是对网站需要呈现的信息进行层次性分类,将其划归到不同的版块中;二是合理设计分类后的页面链接深度。对于层次性分类的具体方式,从技术的角度来看,重点是克服冗余,也就是说,同样的信息内容只能出现在一个分类中。这从技术上来看相对来是比较容易实现的。但是从实际使用效果来看,单纯地追求信息分类上的无冗余,对于最终用户甚至信息的发布者来说,都需要一个比较长的熟悉过程,特别是对于政府网站,由于其发布的信息涉及面相当广泛,如果严格按照层次性分类原则进行分类,必然造成分类条目众多,分类的层次也较深。如果不熟悉分类方法,往往会造成有信息而用户却找不到的结果,这与要求我们普通人使用极少接触的中图分类法在图书馆中查找图书的结果很相似。针对这种情况,常见的解决办法是使用较粗的分类粒度,但是这也会带来分类结果粗糙、相似性不高的结果。为解决这个问题,应该考虑在传统的层次性分类方法的基础上,再增加目前Web2.0技术常用的“标签”(Tag)进行分类。标签分类技术目前已经非常成熟,在收藏类网站和博客网站最先得到充分的应用,并且迅速扩展到其它信息分类领域,甚至传统的文件分类归档管理系统中。标签分类是一种“社会化”分类,一方面标签的具体名称由最终用户来决定,另一方面还具有多维度描述信息的核心功能,同一份信息,可以拥有多个不同的标签。通过应用标签分类,可以极大的弥补层次性分类固有的缺陷,给用户带来信息检索与查询上的便利。

链接深度的设计则与信息分类相辅相成。一般来说,信息的层次性分类有多少层的深度,相应的链接就会有多少层页面。而从最终用户的角度来看,如果链接的深度超过三层,一方面容易造成用户的反感,另一方面也不利于用户在信息检索过程的回溯。要做到即保证信息的合理分类,又能够保持合适的链接深度,一方面需要通过前述的选择合适的分类粒度和标签的辅助,在实际运用的技术设计上,还可以采取一些变通的办法,比如将一级分类和二级分类合并在一个页面中,或者全部展示,或者通过类似子菜单的方式显示二级分类,这样即可以减少链接页面,也给用户带来操作上的便利。这些方法在目前的网站设计中都有着普遍的应用,不再赘述。

二、内容大方呈现,解决“脸难看”

造成政府网站“脸难看”的本质原因,是在进行网站设计时错误的理解了信息内容的丰富与界面排版的复杂之间的关系所造成的。作为政府网站,版面布局大方,给用户庄重而大气的视觉感受,才能够真正体现出政府网站作为政府部门的网络窗口作用。如前文所述,我国政府网站受国内大型商业性新闻类门户网站的负面影响过多,其根本原因在于没有把握住政府网站与商业网站在信息发布功能上区别。商业性网站的信息发布,根本目的在于吸引流量和用户的目光,因此在栏目和配色等方面的处理自然是越多越好、越注目越好。但是对于政府网站而言,信息发布的直接目的应该定位于便于用户的查看与检索。因此在版面布局设计上需要注意的内容有[2]:版面布局符合视觉规律,内容块之间的留白处理,使用不超过三种颜色的配色方案等等。这些内容归结起来其实就是:让用户在只看一眼,不翻屏操作的情况下,就能够知道页面的主题是什么、有哪些链接。

在版面布局方面,我国的政府网站设计应该更多地借鉴国外政府网站、博客网站以及一些大型技术性资料网站。比如美国中央政府网站,其首页只有简单的4个版块,仅1屏的高度;相比我国的中央人民政府网站20多个版块,4屏高度等情况,确实令人汗颜。在另一方面,博客系统或技术性资料网站等也值得借鉴。相比商业性新闻网站,博客或知识库网站,更注重于能够让用户清晰直观的把握核心信息,因此它们的版面设计都非常地简单直观而又不失大气。比如常见的博客网站的页面布局通常只有3个部分:一个不超过7个链接的顶部全站导航条;一个按时间归档的索引版块和一个按标签分类的索引版块,这两者通常在视觉效果上合并为一个侧边栏;页面的其它空间全部留给了具体的博文内容。知识库的页面布局也类似,比如微软知识库MSDN[3]、Mozilla知识库MDN[4]和IBM开发者知识库[5]等,通常也只包括全站导航条、目录索引和具体的文档内容三个部分。

不论是博客网站还是知识库网站,它们的核心功能都是展现特定信息,这与政府网站在信息发布上的功能是完全一致的,同时这些布局方式都经受住时间的考验得到了保留,很好地体现了“有容乃大”的思想:大气呈现并不是大量信息的堆砌,相反,大量的信息堆砌,不论信息之间相关与否,都只会使得整个版面看起来变得局促紧张而小气。因此借鉴这些网站,对我国的政府网站的版面布局设计有重要的意义。

关于政府网站的版面设计还需要说明的一点是关于动画效果的使用。动画效果在网站设计中包括了视频呈现、CG动画、文字滚动、内容自动切换等等形式。动画的应用确实能够带来用户在视觉上的注意,将用户引导至重点内容。但是对于政府网站而言,动画效果与其应有的庄重、严肃特点是相背离的。而吸引用户的视觉注意,并不只有动画这一种方式,完全可以通过配色的对比变化、加大的字号、合理配图、使用阴影边框、增加文字块之间的留白等等其它多种形式,利用视觉上的突出效果来实现。如果确实需要表现动态特征,可以考虑使用表现动作的静态图片,如飘扬的国旗等。在这方面应该更多地借鉴传统平面媒体中的广告宣传图册,其动态效果而非动画的应用,一样能够引起用户在视觉上关注。

摘要：政府网站是电子政务的重要组成部分,我国政府网站在界面上同样存在着“门难进,脸难看”的情况。解决方法一是对分类进行科学设置,二是对内容的呈现进行合理编排。

关键词：政府网站,网站设计,分类,界面

参考文献

[1]刘晓春,孙岩松.摒弃政府网站的复杂化页面[J].信息化建设.2012年第5期.

[2]颜海,朱群俊,汲宇华.服务型政府网站设计理念与风格[J].档案学研究.2011年第4期.

[3]http://msdn.microsoft.com.[EB/OL}.

[4]https://developer.mozilla.org.[EB/OL}.

篇4：购物网站的界面设计研究

【关键词】界面设计；互联网；购物

随着互联网的不断普及以及大众消费水平的提高，互联网购物已经成为一种时尚和潮流。购物网站界面的设计对于商品的销售起着非常重要的作用。越来越的商家开始关注购物网站界面设计的艺术性。购物网站界面设计受各方面因素影响较大，当前互联网购物设计优点较多，但同时也存在一些不足，还需要进一步完善购物网站界面设计策略，以提高购物网站销售水平。

一、当前我国购物网站界面设计的影响因素

购物网站界面设计受到诸多因素的影响，归结起来主要可以分为两类：社会因素的影响和经济发展的影响。

（一）购物网站设计受社会因素的影响

随着经济发展、社会进步，艺术创作、哲学发展以及宗教活动等都呈现了活跃、繁荣的局面。随着信息生产与信息传播技术的网络化、移动化，各种意识形态有了新的表达和汇集的平台。中国是一个有着深厚文化积淀的国家，中国人养成了自己独特的审美心理模式。受中国传统社会和文化的影响，在进行网站界面设计时，一定要充分考虑社会意识形态、社会历史背景、网络消费者文化等因素，结合当前的时代特点，创造出适合当前中国人审美心理需求的设计样式。尤其是当前形势下，社会进步、互联网技术都给中国传统文化带来巨大的冲击，传统的审美观念发生了一定的变化，形成了各种各样的审美表现形势，影响了当前中国人的消费观念和行为习惯。

（二）购物网站设计受经济全球化影响较深

中国加入世贸组织，对中国电子商务的发展产生了重大的影响。因为WTO允许银行、保险、运输等领域开放，同时网上支付、网上平台、网上运输等电子商务迅速实现了世界化的标准应用。全球各类在线零售企业加剧了在电子商务领域的竞争，他们也纷纷加入中国进行网络销售。大批具有战略眼光的中国企业也开始大规模进行网上平台的宣传和销售，不断提高自身竞争力。首先，购物网站百花齐放，数量急剧增加，提高网页设计的艺术性，成为应对挑战的重要方式之一。其次，随着经济发展和物质消费水平的提高，进行网络购物的消费者急剧增加。网络需求扩大又进一步刺激了网站购物的发展。消费者根据自己的兴趣、年龄等选择自己喜爱的消费品，网站设计的分类更加精细化，同时界面的风格也更加个性化。再次，网络购物商品资源丰富多样，给消费者提供了更多的选择机会。网络消费功能已经能够满足消费者对于商品的需求，所以越来越多的消费者愿意在网上购物，也希望网站界面的设计能够更加具有艺术性，以满足选购商品时的精神享受。

二、当前购物网站界面设计的现状

以淘宝网为例，简单介绍一下当前购物网站界面设计的优缺点。

（一）界面设计色彩搭配较为合理

作为阿里巴巴旗下的购物网站淘宝网，具有自己独特的风格，其主要是采用了橙色为主的色调，色彩统一、和谐，给了消费者良好的视觉体验。淘宝网不仅在网页上用色统一，而且在企业用色的，也是非常统一地采取了橙色为主的色调，这为企业形象的传播起到了非常积极的作用。同时淘宝网的文字设计也是非常统一的，大部分字体都是以宋体为主。

（二）界面设计视觉流程的编排主次分明

从淘宝网的视觉流程上看，都是根据浏览者的视觉行为习惯进行界面设计的，视觉流程相对比较合理。淘宝网视觉流程编排采取的是从左上到右下顺序进行分布，主栏目导航处于网页上部的中间，标识处在左上角的“网眼”，广告则是分布在右侧和底部。

（三）界面设计导航的交互性与文字化

在淘宝网界面上，导航系统通过各种方式增强人机的交互性。如通过动画效果吸引消费者的注意，通过对鼠标运用的相应增强网页与网络消费者的互动感。淘宝网还有专门的消费者评价板块，这就增强了消费者对于网页的互动，消费者的存在感增强。导航图形化已经成为网页界面的一个趋势，文字导航往往需要网购消费者运用更多的时间和耐心去阅读，不如图形更加形象和直观，通过图形来传达信息，让信息图像化。目前淘宝网的文字导航相对较多，有待于进一步改善。

（四）界面商品信息的大量堆积

网页界面除了具有信息传达功能，还应具有审美功能。在淘宝上界面上，商家为了追求信息的丰富，往往将大量信息都堆积在页面上，网页界面设计非常长，这种做法往往得不到实际的效果，反而会使顾客视觉疲劳，降低购买欲望。

三、采取有效措施，提高购物网站界面设计水平

（一）精简促销信息

购物网站最主要的任务就是将信息准确传达给消费者。购物网站界面只有清晰、易读，才能够让网络消费者准确的接受信息。首先，应该精简促销广告一栏，在购物网站上，如果促销广告过多就会导致消费者的麻木心理，而且全部是促销信息，也会使网页界面杂乱无章，容易使消费者产生抵触的心理。其次，应不断精简同类商品信息。信息过多会直接影响网页的下载速度，过慢的网页速度肯定会导致消费者产生厌倦心理，最终离开页面。所以为了加快下载速度，畅通浏览网页，也应精简同类商品信息，以图形化、直观化的方式展示商品信息，让网络消费者能够快速地浏览页面，选择商品。再次，应该不断精简导航商品分类。购物网站的导航设计是否优秀是评价一个购物网站合理与否的关键。导航分类过多会使消费者不知道该如何搜索信息，导航分类应该尽量精简，但是要具有逻辑性和可操作性，消费者可以通过引擎准确搜索自己的想要的商品。同时导航设计在精简的基础上还应该具有交互性，使消费者在网页中找到存在感。通过浏览记录向消费者提供一些同类商品，对于实现消费者的理性消费具有重要意义。

（二）更加合理地安排视觉流程

首先，视觉流程界面应该具有逻辑性。图像形象与文字的组合具有逻辑性，目的是让消费者更加迅速和准确地接受信息。通过摆正信息的主次关系，可以让网络消费者更快地找到所需信息，将网页最重要的信息放在第一屏，因为网络消费者往往在第一屏停留时间最长。根据人们的浏览习惯，标志应放在左上角。其次，界面设计视觉元素应具有可视性，保证视觉元素是易记的、易读的，具有较强的诉求力，同时不同的视觉氛围里应体现出不同的含义。还可以通过视觉元素之间的距离来控制视觉流程。再次，网络购物视觉策划应该具有战略性。根据网络消费者的心理需求，对整个设计进行整体规划。运用各设计要素进行视觉诱导，按照设计师的构想进行网页界面设计。应用购物网站界面进行评估，评价优缺点，然后再进行修改，提高设计质量。

（三）界面设计应该遵循统一的美学原理

购物网站界面设计要具有美学意义。首先界面要实现整体性与相对性的统一。界面各要素之间要相互协调，具有统一性和整体性，设计要具有整体美感。其次，界面设计要有美的统一。所以购物网站设计应该要处理好图像造型与页面背景的关系、张力与简化的关系、形态与色彩的关系等。

参考文献：

①[美]约翰·安德森著，秦裕林等译.认知心理学及其启示[M].北京：人民邮电出版社，2012

②[美]Jeff Johnson著，张一宁译.认知与设计：理解UI设计准则[M].北京：人民邮电出版社，2011

篇5：网站界面设计应该注意的情况

网站用户界面（Website User Interface）指网站用于和用户交互的外观、元素和程序等等。

如果你经常上网，就会看到很多网站设计很朴素，看起来给人非常舒服的感觉；有的网站很有创意，常常给人带来意外的惊喜和视觉的冲击；但相当多的网站页面上充斥着怪异的字体，花哨的色彩和图片，给人网页制作粗劣的感觉。

网站界面设计，既要从外观上进行创意以到达吸引眼球的目的，还要结合图形和版面设计的相关原理，从而使得网站界面设计变成了一门独特的艺术。通常，企业网站用户界面的设计一般应遵循以下几个基本原则：

一．用户导向原则（User oriented）

设计网页首先要明确到底谁是这个网页的使用者，要站在用户的观点和立场上来考虑和设计网站。要做到这一点，就必须要和用户来沟通，了解他们的需求、目标、期望以及偏好等。网页的设计者要清楚，用户之间的差别是很大的，他们的能力也各有不同。比如有的用户可能会在视觉方面有所欠缺（如色盲），对很多的颜色分辨不清；有的用户的听觉也可能会有些障碍，对于网站的语音提示反应比较迟钝；而且相当一部分用户的计算机使用经验还很初级，对于复杂一点的操作就会感觉到很费力。另外，用户使用的计算机机器配置是千差万别的，如显卡、声卡、内存、网速、操作系统以及浏览器等都会有所不同。设计者如果忽视了这些差别，设计出的网页在不同的机器上显示就会造成错乱。

二．简洁和易于操作原则（Keep It Simple And Stupid-KISS）

KISS原则就是“Keep It Sample And Stupid”的缩写，简洁和易于操作是网页设计的最重要的原则。毕竟，网站建设出来是用于普通网民来查阅信息和使用网络服务。没必要在网页上设置过多的操作，堆积很多复杂和花哨的图片。此原则的一般要求：

1、网页的下载不要超过6秒钟（普通的家庭宽带为2M的，速度一般在220kb/s）；

2、网页尽量使用文本链接，而减少大幅图片和动画的使用，从而加快网页的打开时间；

3、操作设计尽量简单，并且有明确的操作提示；

4、网站所有的内容和服务都尽量在显眼处向用户予以说明等。三．布局控制（Layout）

在网页排版布局方面，很多网页设计者还不够重视，网页界面设计排版过于死板，甚至照抄他人。如果网页的布局凌乱，仅把大量的信息堆集在页面上，就会干扰浏览者的阅读。一般在网页界面的版式设计上所要遵循的原则有： 1、7±2的Miller公式。

根据心理学家George A.Miller的研究表明，人一次性接受的信息量在7个比特左右为宜。总结一个公式为：一个人一次所接受的信息量为 7±2 比特。这一原理被广泛应用于网站建设中，一般网页上面的栏目选择最佳在5～9个之间，如果网站所提供给浏览者选择的内容链接超过这个区间，人在心理上就会烦躁，压抑，会让人感觉到信息太密集，看不过来，很累。然而很多国内的网站在栏目的设置远远超出这个区间。

2、分组处理。

上面提到，对于信息或栏目的分类，不能超过9个。但如果你的内容实在是太多，超出9个，就需要进行分组处理。如果，你的网页上有几十篇文章的链接，需要每隔7篇加一个空行或平行线做以分组。如果你的网站内容栏目超出9个，如腾讯公司的网站或其它几个比较知名的门户，有很多个栏目，超过了9个。为了不破坏7±2的Miller公式，在设计时把比较有代表性的分类加粗，然后再按性质分组。

四．视觉平衡（Visual balance）

网页设计时，各种元素（如图形、文字、空白）都要有视觉平衡作用。根据视觉原理，图形与一块文字相比较，图形的视觉作用要大一些。所以，为了达到视觉平衡，设计网页时需要以更多的文字来平衡一张图片。另外，按照中国人的阅读习惯是从左到右，从上到下，因此视觉平衡也要遵循这个这个原则。例如，你的很多的文字是采用左对齐，需要在网页的右面加一些图片或一些较明亮、较醒目的颜色。通常情况下，每张网页都会设置一个页眉部分和一个页脚部分，页眉部分通常放置一些Banner广告或导航条及网站LOGO，而页脚部分通常放置联系方式和版权信息等，页眉和页脚在设计上也要注重视觉平衡。同时，也决不能低估空白的价值；网页上所显示的信息非常密集，这样不但不利于读者阅读，甚至会引起读者反感，破坏该网站的形象。在网页设计上，适当的地方增加一些留白，精炼和升华你的网页的形象及美感，使得页面变得简洁。

五．色彩的搭配及文字的可阅读性（Colors and text can be read）

颜色是影响网页的重要因素之一，不同的颜色对人的感觉有不同的影响，比如：红色和橙色使人兴奋并使得心跳加速；黄色使人联想到阳光，是一种快活的颜色；黑色显得比较庄重，考虑到你希望对浏览者产生什么影响，为网页设计选择最恰当的颜色（包括背景色、元素颜色、文字颜色、链节颜色等）。

为了方便阅读网站上的信息资讯，可以借鉴参考报纸及杂志的编排方式将网页的内容分栏设计，甚至两栏也要比一满页的视觉效果要好。另外一种能够提高文字可读性的因素是字体的选择，通用的字体（Arial，Courier New，Garamond，Times New Roman，中文宋体）最易阅读，特殊字体用于标题效果较好，但是不适合正文。如果在整个页面使用一些特殊字体（如Cloister，Gothic，Script，Westminster，华文彩云，华文行楷），这样读者阅读起来感觉一定很糟糕。这类特殊字体如果在页面上大量使用，会使得阅读颇为费力，浏览者的眼睛很快就会疲劳，不得不转移到其他页面。

六．和谐与一致性（Harmony and consistency）

通过对网站的各种元素（颜色、字体、图形、空白等）使用一定的规格，使得设计良好的网页看起来应该是和谐的。或者说，网站的众多独立网页看起来更像一个整体。网站界面设计上要保持一致性，这是很重要的一点。一致的网站结构设计，可以让浏览者对网站的形象有深刻的记忆与印象；一致的导航设计，可以让浏览者迅速而又有效的进入在网站中自己所需要的部分；一致的操作设计，可以让浏览者快速学会在整个网站的各种功能操作。如果破坏这一原则，就会误导浏览者，并且让整个网站显得杂乱无章，给人留下不良的印象。

当然，网站设计的一致性并不意味着刻板和一成不变，有的网站在不同栏目使用不同的风格，或者随着时间的推移不断的改版网站，会给浏览者带来新鲜的感觉。

七．个性化（Individualization）

1、符合网络文化

企业网站不同于传统的企业商务活动，要符合Internet网络文化的要求。首先，网络最早为非正式性、非商业化的，只是科研人员用来交流信息的。其次，网络信息是只在计算机屏幕上显示而没有打印出来阅读，网络上的交流具备隐蔽性，谁都不知道对方的真实身份和信息。此外，许多人在上网的时候是在家中或网吧等一些比较休闲，比较随意的环境下。此时访客的使用环境所蕴涵的思维模式与坐在办公室里西装革履的时候是截然不同的。因此，整个互联网的文化是一种休闲的、非正式性的、轻松活泼的文化。在网站上使用幽默的网络语言，创造一种休闲的、轻松愉快、非正式的氛围就会使网站的访问量大增。

2、塑造网站个性

另外，网站的整体风格和整体气氛表达要同企业形象相符合并且应该很好的体现企业CI。

八．网页的均衡规划与选择（Planning and selection）

1、尺寸

·800*600能照顾到所有网友的电脑，但相当是张“小报”。

·1024*768渐成主流。1024*768能比800*600多出一栏的信息。

·正文页采用自适应设计，能在正文页做更多相关内容。首页也可以尝试自适应的设计。自适应设计的核心是要留出宽度伸缩自如的栏。

·在1024*76模式下，页面的长度不易超过10屏。

·随着电脑升级换代，分辨率提高，电脑屏幕能够提供的面积越来越大，这是一种难得的资源，要充分利用。“小报”改“大报”要增加一倍的纸张成本，网站改“宽版”，成本的增加却要小得多。

2、字体字号

·目录页用小字号，为的是放更多的标题。·正文页用大字号。为的是让读者读得舒坦。

·慎用不容易看清楚的楷体。楷体的作用等于图片，主要起美化版面的作用。·多用对搜索引擎友好的标粗，来表示重点。