网站界面设计应该注意的情况
新闻 2024-9-20编辑：深圳网站建设阅读（）标签：
网站设计
网站界面设计应该注意的情况！
网站【zhàn】用【yòng】户界面（Website User Interface）指【zhǐ】网站用于和【hé】用户交互的外观、元【yuán】素和程序等【děng】等。
如【rú】果你经常上网，就会【huì】看到【dào】很多网【wǎng】站设计很朴素，看【kàn】起来给人非常舒服【fú】的【de】感觉；有的【de】网站【zhàn】很有创意，常常给【gěi】人带来【lái】意外的惊喜【xǐ】和视觉的冲【chōng】击；但相当多的网站页面【miàn】上充斥着怪异的字【zì】体，花哨的色彩【cǎi】和图片【piàn】，给人网页制作粗劣的感觉【jiào】。
网站界面设计，既【jì】要从外观【guān】上【shàng】进行创意以到【dào】达吸引眼【yǎn】球的目的，还要结合【hé】图形和版面【miàn】设计的相关【guān】原理，从而使得网站界面【miàn】设计变【biàn】成了一门【mén】独特【tè】的艺术。通常【cháng】，企业网站用户界面的设【shè】计【jì】一【yī】般应遵循以下几个基本原则：
一．用户导向原则（User oriented）
设【shè】计网【wǎng】页【yè】首先要明确【què】到底谁是这个网页的使用者，要站在用户【hù】的观点和立场上来考虑和【hé】设计网站【zhàn】。要做到【dào】这一点，就必须要【yào】和用户来沟通，了【le】解他们的需求、目【mù】标、期望以及偏好等。网【wǎng】页的【de】设计者要【yào】清楚，用户之间【jiān】的【de】差别是很大的，他【tā】们的【de】能【néng】力也各有不【bú】同。比如【rú】有的用户可能会在视觉方面有所欠缺（如色【sè】盲），对很多【duō】的【de】颜色分辨不清；有【yǒu】的用【yòng】户【hù】的听觉也可能会有些障碍，对于网站的语音提示反【fǎn】应比较【jiào】迟钝；而且【qiě】相【xiàng】当一部分用户的【de】计算机【jī】使用经验【yàn】还很初级，对于复杂一点【diǎn】的操作就【jiù】会【huì】感觉【jiào】到很费力。另外，用户使用的计算机机器配置是千差万别的，如显卡、声【shēng】卡、内存【cún】、网【wǎng】速【sù】、操作系统以【yǐ】及【jí】浏览器等都会【huì】有所不同【tóng】。设计者如果忽【hū】视了这些差【chà】别，设计【jì】出的网页在不同的机【jī】器上显示就【jiù】会造成错乱。
二．简洁和【hé】易于操作原则（Keep It Simple And Stupid - KISS）
KISS原则【zé】就【jiù】是"Keep It Sample And Stupid"的缩【suō】写，简洁和易【yì】于操作是网页设【shè】计的【de】最【zuì】重要的原则。毕【bì】竟，网站建设出来是【shì】用于普【pǔ】通网民来查阅信息和使用网络服务。没【méi】必要在网页上设置过多【duō】的操【cāo】作，堆【duī】积很多【duō】复杂和花哨【shào】的图片。此原则的一般要【yào】求：
1、网页的下【xià】载不要超过6秒钟（普通【tōng】的【de】家庭宽带为2M的，速度【dù】一般【bān】在【zài】220kb/s）；
2、网页尽【jìn】量使用文本链接，而减少【shǎo】大幅图片【piàn】和动画的使【shǐ】用，从而加快【kuài】网【wǎng】页的【de】打开时间；
3、操作设计尽量简单，并且有明确的操作提示；
4、网站【zhàn】所有的内容和服务都尽量在【zài】显眼处【chù】向用户【hù】予以说明【míng】等。
三．布局控制（Layout）
在【zài】网页排版布局方面，很【hěn】多网页设计【jì】者还【hái】不够【gòu】重视，网页界面设计排版过于死板，甚至照抄他【tā】人。如果网页的布局凌【líng】乱【luàn】，仅把大量的信息堆集【jí】在页面上，就【jiù】会干扰浏【liú】览者的【de】阅读。一【yī】般在网【wǎng】页界面的【de】版式设计上【shàng】所要遵【zūn】循的原则有：
1、7±2的Miller公式。
根据【jù】心理学家George A.Miller的研究表明，人一次性【xìng】接受的信息量在7个比特【tè】左右为宜【yí】。总结一个【gè】公式为：一个人一次所接受【shòu】的信息量为【wéi】 7±2 比【bǐ】特。这一原理被【bèi】广泛应用于网站建设【shè】中，一般【bān】网页【yè】上【shàng】面的栏目【mù】选择最佳在5～9个之间，如果网站所提供给【gěi】浏览者选【xuǎn】择【zé】的内【nèi】容链接【jiē】超过这个区间，人在心【xīn】理【lǐ】上【shàng】就会【huì】烦躁【zào】，压抑，会让人感觉到信息太密集，看不过【guò】来，很【hěn】累。然【rán】而很多国内的网站在栏目的设置【zhì】远【yuǎn】远【yuǎn】超【chāo】出这个区间。
2、分组处理。
上面提【tí】到，对于信息或栏【lán】目的分类，不【bú】能超【chāo】过9个。但如果你的内容实在【zài】是太多，超出9个，就需要【yào】进行分组处理。如果，你的【de】网页上有【yǒu】几十篇文章的【de】链接【jiē】，需要【yào】每隔7篇加【jiā】一个空行或平行线做以分【fèn】组。如果【guǒ】你的网站内容栏目超出9个，如腾讯【xùn】公司的网站【zhàn】或其它【tā】几个比较知名的门户，有很多个栏目【mù】，超【chāo】过了9个【gè】。为了不破坏7±2的Miller公【gōng】式，在【zài】设计【jì】时把比较有代表性的分【fèn】类加粗，然后再按性【xìng】质【zhì】分【fèn】组。
四．视觉平衡（Visual balance）
网页设【shè】计时，各种【zhǒng】元素（如图形、文【wén】字、空白）都【dōu】要有视觉【jiào】平衡作用。根据【jù】视【shì】觉原理，图形与一块文【wén】字【zì】相比较，图形【xíng】的视觉【jiào】作用【yòng】要大一些。所以，为【wéi】了达到视【shì】觉平【píng】衡，设【shè】计网页时需要【yào】以【yǐ】更【gèng】多【duō】的文字来平衡一张图片。另外，按照中国【guó】人的【de】阅读习惯是从左【zuǒ】到右，从上到【dào】下，因此视觉平衡也【yě】要遵循【xún】这个这个原则。例如，你的很多【duō】的文字是采用左对齐，需要【yào】在网页的【de】右面加一些图片或一些较【jiào】明亮、较醒目的颜【yán】色。通常情况【kuàng】下，每张网页都【dōu】会设置一个页眉部分和一【yī】个页【yè】脚【jiǎo】部【bù】分【fèn】，页眉部分通常放置一些Banner广告或【huò】导航条【tiáo】及网站【zhàn】LOGO，而页【yè】脚部分通【tōng】常【cháng】放置联【lián】系方式和版权信息等，页眉和页脚在【zài】设计上也要注重视觉平衡。同时，也决不能低估【gū】空白【bái】的价【jià】值；网页上所显示的信息非常密集，这样不【bú】但不【bú】利【lì】于读者阅读，甚至会引起【qǐ】读者【zhě】反感【gǎn】，破坏【huài】该【gāi】网站【zhàn】的【de】形象。在网页设计上，适当的地方增加一些【xiē】留【liú】白，精炼和升华你的网页【yè】的形象及美感，使得页面【miàn】变得简洁。
五．色彩的【de】搭配及文【wén】字【zì】的可阅读【dú】性（Colors and text can be read）
颜色是【shì】影响网页的重要因素【sù】之一，不同的颜色【sè】对人的感觉有不同的影响，比【bǐ】如：红【hóng】色和橙色使【shǐ】人兴奋并使得心跳加【jiā】速【sù】；黄【huáng】色使人【rén】联想到阳光，是一种快活的颜色；黑色显得比较庄重，考虑到你希望【wàng】对浏【liú】览【lǎn】者产生什么影响，为网页设计选择最恰【qià】当的【de】颜色（包【bāo】括背景色、元素颜色、文字【zì】颜【yán】色、链【liàn】节颜【yán】色等【děng】）。
为了方便阅读网站上的【de】信息【xī】资讯，可以【yǐ】借鉴参考报【bào】纸及【jí】杂志的【de】编排【pái】方式将网【wǎng】页【yè】的内容分栏设【shè】计，甚至两栏也要比一【yī】满页【yè】的视觉效果要好。另外【wài】一种能够【gòu】提高文【wén】字可读性的【de】因素【sù】是字【zì】体的选择，通用的字体（Arial，Courier New，Garamond，Times New Roman，中文宋体）最易阅读，特殊字体用于标题效【xiào】果较好，但是【shì】不适【shì】合正文。如果在整个页【yè】面使用一些【xiē】特殊字体（如【rú】Cloister，Gothic，Script，Westminster，华文彩云，华文行楷），这样【yàng】读者阅【yuè】读起来感觉一定很糟糕。这类特殊字体如果在【zài】页面【miàn】上【shàng】大量使用【yòng】，会使得阅读颇【pō】为费力，浏览者的眼【yǎn】睛很快就会【huì】疲劳，不【bú】得不【bú】转移【yí】到【dào】其【qí】他页面。
六．和谐与【yǔ】一【yī】致性【xìng】（Harmony and consistency）
通【tōng】过对网站【zhàn】的【de】各种元素（颜色、字体、图【tú】形、空白【bái】等【děng】）使用一定的规【guī】格，使得设计良【liáng】好的网页【yè】看起来应该是和谐的【de】。或者说【shuō】，网站的众多独立网页【yè】看起【qǐ】来更像一个整体。网站【zhàn】界面【miàn】设【shè】计上【shàng】要保【bǎo】持一致性【xìng】，这是很重要的一点。一【yī】致的网站结构设计【jì】，可以让浏览者【zhě】对【duì】网站的形象有深【shēn】刻的【de】记忆与印【yìn】象；一致的导航设计【jì】，可以让浏览者迅速【sù】而【ér】又有效【xiào】的进入在网【wǎng】站【zhàn】中【zhōng】自己所需要的部分；一致的操【cāo】作设计【jì】，可以让浏览者快速学会在整个网站的各种功能操作。如果破坏【huài】这一原则，就【jiù】会误导浏览者，并【bìng】且让【ràng】整个网站显得【dé】杂乱无章，给人留下【xià】不良的印象。
当然，网站设计的一致性并不意【yì】味着【zhe】刻板【bǎn】和一成不变，有的网站在【zài】不同栏目使【shǐ】用不同的风格【gé】，或者随着时【shí】间的推移不【bú】断【duàn】的改版网站，会给浏览者【zhě】带【dài】来新鲜【xiān】的感觉。
七．个性化（Individualization）
1、符合网络文化
企业网站不同【tóng】于【yú】传【chuán】统的【de】企【qǐ】业商【shāng】务活【huó】动，要符【fú】合Internet网【wǎng】络文化【huà】的要求【qiú】。首先，网络【luò】最早为非正式【shì】性、非【fēi】商业化的，只是【shì】科研人员【yuán】用来【lái】交流信息【xī】的。其次【cì】，网络【luò】信息是只【zhī】在计算机屏幕上显示而没有打印出来阅读【dú】，网络上的交流具备隐蔽性，谁【shuí】都不知道【dào】对方的【de】真实身份【fèn】和信息。此外【wài】，许多人在上网的时【shí】候是在家中或网吧等一些比较休闲，比较随【suí】意【yì】的环境下。此时访客的使用环境所蕴涵【hán】的思【sī】维【wéi】模式【shì】与坐在【zài】办公室里西【xī】装革履的时【shí】候是截然【rán】不同的。因此，整个互联网的文化是一种休闲的【de】、非正式【shì】性的、轻松活泼的文化【huà】。在网站上使【shǐ】用幽默的【de】网络语言【yán】，创造一种休闲的【de】、轻松愉快、非【fēi】正式的氛围就【jiù】会使网站的访问量大增。
2、塑造网站个性
另外，网站的整【zhěng】体【tǐ】风格和【hé】整【zhěng】体气氛表达要同企业形象相【xiàng】符【fú】合并且应该很好的体现企业CI。
八．网页的均衡规【guī】划与选择（Planning and selection）
1、尺寸
•800*600能【néng】照顾【gù】到【dào】所有网友的电脑，但相当是张“小【xiǎo】报”。
•1024*768渐成主【zhǔ】流。1024*768能【néng】比【bǐ】800*600多出一栏的信息。
•正文【wén】页采【cǎi】用自适【shì】应设计，能在正文页做更多相关【guān】内【nèi】容。首页也可以尝试自适应【yīng】的设计。自适应【yīng】设【shè】计的核心是要【yào】留出宽度【dù】伸【shēn】缩自如【rú】的栏。
•在1024*76模式下，页面的长度不易超过10屏。
•随着电脑升级换【huàn】代，分辨率提高【gāo】，电脑【nǎo】屏【píng】幕【mù】能【néng】够【gòu】提供的面积越来【lái】越大，这是一种难得的资源，要充分利用。“小报”改【gǎi】“大报”要【yào】增加一倍【bèi】的纸张成本【běn】，网【wǎng】站改“宽版【bǎn】”，成本的增加却【què】要小得多。
2、字体字号
•目录页用小字号，为的是放更多的标题。
•正文页用大字号。为的是让读者读得舒坦。
•慎【shèn】用不【bú】容易【yì】看清楚的楷体。楷体的作用等于【yú】图【tú】片，主【zhǔ】要起美化版面的作【zuò】用。
•多用对搜索引擎友好的标粗，来表示重点。
3、颜色
•同一个【gè】页【yè】面【miàn】的颜色不要超过4种。眼【yǎn】花缭乱，容易【yì】产生视觉疲劳。
•颜色对【duì】比不要反差【chà】太【tài】大。网页版面不是美术作品，要避免形式对内容的【de】喧宾【bīn】夺主。
•文【wén】字【zì】+底色【sè】能够起到【dào】很【hěn】好的突出作用，在视觉变化上【shàng】相当于【yú】图片的作用。
4、静态化
•访问量大的页【yè】都应【yīng】该【gāi】静态化【huà】，以便减少服务器压【yā】力，增【zēng】强网站【zhàn】稳定性。访问不【bú】到的网页是最差的网页。
•动态化和静态【tài】化在一个页【yè】面中结合使用，能同【tóng】时得到轻负荷和即时交互【hù】性的好处。
•哪些页面的哪些【xiē】地方【fāng】需要【yào】静态化要在一开始就考虑，访问量大了之后【hòu】，再高【gāo】考【kǎo】虑，就【jiù】迟了，由动态化【huà】转为静态【tài】化，会有很多历史【shǐ】问题。
5、分栏
•首页选4栏？还是3栏？
•正文页多用2栏。
•“纵向逻辑”是指将相近的内容【róng】从上【shàng】至下排列，而不是从左向右【yòu】排列。如果读者【zhě】对这方面内【nèi】容感【gǎn】兴【xìng】趣，他会从上【shàng】至下【xià】，逐行阅【yuè】读【dú】。这样可充分力利用首【shǒu】屏，让【ràng】首页增多从上至下阅【yuè】读【dú】的可能。
•避免一栏太强【qiáng】，一栏太弱。通过图【tú】片、套红等手段【duàn】进行调控。平均使用读者【zhě】主意力。使【shǐ】读者不【bú】敢【gǎn】放过左【zuǒ】中右【yòu】任何一栏。
6、图片
•有【yǒu】图【tú】有真相，一图胜千言。十分必要时才【cái】用。因为图片的【de】编【biān】辑【jí】成【chéng】本和带宽成本都比较文字高很多。
•在目录页【yè】的图，小点，再小点【diǎn】，多用特写；小分辨率【lǜ】，能看【kàn】就行。在正文【wén】页的图，保证清晰，美观【guān】。正文【wén】页【yè】有的是版面。
•正文页在5屏之内，尽量不要分页。让读者一次读完。
7、导航条与网站地图
•导航【háng】条是网站【zhàn】的门【mén】牌号码，不能随意【yì】更改。否则，读者会【huì】迷路，找【zhǎo】不到他原【yuán】来看的【de】内容。
•导航条上的分类名的【de】前后次序要【yào】兼顾重点和读者阅读【dú】逻【luó】辑，即归类【lèi】摆【bǎi】放。
•导航条最多三行。最好二行。太多行显重。
•导航的更多【duō】，就是网站地图【tú】。网站地图的摘要版可【kě】以放在【zài】网站底部，成为底部导航【háng】。网站的底【dǐ】部导航，很有必要。其【qí】好处【chù】是：一、可【kě】放【fàng】多行；二、可形成网站底部的【de】阅读重【chóng】点。将【jiāng】读者从【cóng】首屏带到【dào】最后【hòu】一屏【píng】，期间会增加【jiā】很多点击。
•主导航【háng】和频道导航：主【zhǔ】导航每【měi】页都有，频道【dào】导航【háng】只在本频道页面出现。
8、首页更新成本
•首页设【shè】计不【bú】能只考虑美观、协调【diào】，要【yào】考【kǎo】虑24小时更【gèng】新一遍之要求。更【gèng】新是网【wǎng】站【zhàn】的生命，一【yī】定要最大限【xiàn】度地降低首页更新成本。
•交【jiāo】叉自动同步更新的设计【jì】，可有【yǒu】效降【jiàng】低各种首【shǒu】页【yè】更新成本，给读者内容丰富即时【shí】的感觉【jiào】。
•更新【xīn】即时的首【shǒu】页是网站的资源【yuán】，因为是资源，更【gèng】多的标题会拥上【shàng】这个首页。如此，正循环，这个首页也就【jiù】火了。更【gèng】新不【bú】即【jí】时的首页是网站的【de】鸡肋，会越来越寂寞【mò】，最终会被荒废【fèi】。
•每个首页的设计【jì】成至少要有一个读者【zhě】点击进去的理【lǐ】由。即【jí】时更新比独家【jiā】内容【róng】成本低【dī】。
