网页界面设计原则

新闻 2024-9-22编辑：深圳网站建设阅读（）标签： 界面设计 原则

深圳网站建【jiàn】设公【gōng】司 帮助企业提升网【wǎng】站形象【xiàng】,彰显公司实力,PC+手机+微信+小【xiǎo】程序
【模板网站的价格】国际域名+阿里1G空间+备案 一条龙服务
【定制网站的功能】SEO精准营销系统+城市分站+W3C标准
【营销网站的效果】重长尾，重优化，提权重，扩收录，提排名
【量身订制的设计】据据需求量身定制。设计到满意为止
【专属VIP的服务】24RX365 为您【nín】提供1对1的专【zhuān】属【shǔ】VIP服【fú】务

　　1、为了【le】用户能【néng】够更好的找到自己【jǐ】需要【yào】的内容，在设计的时候应该将任何无用的特质【zhì】都必须移【yí】除，与此【cǐ】同时，网页设【shè】计必【bì】须能【néng】够满足用户需求。下面介绍网页界面【miàn】设计原【yuán】则，希【xī】望【wàng】对您有帮助。

　　1、界面简约并完整

　　为了用户能够【gòu】更【gèng】好【hǎo】的找【zhǎo】到自己需【xū】要的内【nèi】容，在【zài】设计的时候应该将任何无用的特【tè】质【zhì】都【dōu】必【bì】须【xū】移【yí】除;与此【cǐ】同时，网页设计必须能够满足用户需求。一个布局、风格具有【yǒu】简约美，同时又能【néng】提供大量有价值信息的网站才会【huì】受用户欢迎。

　　2、网站层级内容清晰且加载速度快

　　用【yòng】户往往是缺乏耐心【xīn】的，如果你不能【néng】提供便捷的信息，那么他们会【huì】选择离开【kāi】，进而寻找其他网【wǎng】站来【lái】谋求信息。随着互【hù】联网的【de】发展【zhǎn】，信息的更新【xīn】速度是非常快的，如果你的网站加【jiā】载太【tài】慢或者【zhě】层级不清【qīng】晰，那么也就错失了一个机会【huì】，毕【bì】竟每个人【rén】都想通【tōng】过简单的操作便能获取所需信息。

　　3、网页设计必须具备一致性

　　用户【hù】一般在浏览网页【yè】的【de】时候，基【jī】本不【bú】会详细阅读内容【róng】，这【zhè】样会快速滑动页面【miàn】，大致浏览【lǎn】一【yī】遍，如果看到感兴趣【qù】的信息【xī】才会停下，进行仔细阅读。这是一种用户习惯，这样一来，同【tóng】一页面的各个元素以及各个子页【yè】面之间必须【xū】要具备一【yī】致的联系性，

　　4、导航的作用

　　将导航菜单作为交【jiāo】互的”核【hé】心”，因【yīn】为每当用户【hù】有问题时【shí】，他【tā】都会习惯性地翻阅导【dǎo】航菜单

　　5、界面留白的作用

　　留白也是设计【jì】的一【yī】部【bù】分【fèn】，那些不使【shǐ】用的【de】空间也能发挥其【qí】作用。从【cóng】用户的角度来说，留白能够【gòu】让布局更有【yǒu】条理，信息更清晰。

　　6、不要忽略字体

　　内容为【wéi】王，那【nà】么内容是【shì】由【yóu】什【shí】么包装的呢?答【dá】案【àn】是字体，这种小小【xiǎo】的细节能造就大差异【yì】。字体【tǐ】的清晰与否决定了信息呈递的结果。

　　7、尝试展示来自用户的赞扬，而不是自我表扬

　　很多【duō】在设计界面的时候为了【le】展示自己【jǐ】优势【shì】，都是从自身【shēn】出发，其实可以考虑从用户出发。

　　2

　　了解你的用户

　　了解用户，因为【wéi】用户的目标就是【shì】你的目标。试着重述用户【hù】，了解他们【men】的技【jì】能水【shuǐ】平和体验【yàn】，以及什么是【shì】他们需要的【de】。找出用【yòng】户偏好什么样的界面【miàn】，并观察他们在界面中如何操作。不要迷恋于【yú】追【zhuī】逐设计【jì】趋【qū】势的【de】更新【xīn】，或是不断【duàn】添加新的【de】功能。首【shǒu】要【yào】的任务是【shì】关注你的【de】用户，这样才能创【chuàng】造出一个【gè】能让用户达成目标的界面。

　　重视模型

　　用户的大部分时间都消【xiāo】耗在界面中，而不是他们自身上(Facebook，MySpace，Blogger，美国银行【háng】，学校/大学，新闻网站，等等)。我们无【wú】需画蛇添足【zú】，用户在你【nǐ】正【zhèng】在创造的界面【miàn】中看【kàn】到【dào】的正是那些【xiē】(已有的)界面已经解【jiě】决的同样问题。利【lì】用已成【chéng】惯例的UI模型，你【nǐ】将使【shǐ】用【yòng】户感觉像在【zài】家中一样熟悉。

　　保持一致性

　　用【yòng】户需要一致性。他们需要【yào】知【zhī】道一旦他们学会做某【mǒu】项操作，那么下次也同样可行。语言【yán】、布局和设计【jì】是需要保【bǎo】持一【yī】致【zhì】性的【de】几个界面【miàn】元素。一致性的界面可以【yǐ】让用【yòng】户对于如【rú】何操作有【yǒu】更好的【de】理解，从而提升效率。

　　运用视觉等级

　　设计时，要【yào】让用【yòng】户把注意力放在最重要的【de】地方【fāng】。每【měi】一个元素的尺寸、颜色【sè】还有位置，它们为理解【jiě】界【jiè】面共同指明了道路。清晰的层级【jí】关【guān】系将对降低外观【guān】的复【fù】杂性【xìng】起到【dào】重【chóng】要作用(甚至【zhì】当行为本身也同样复杂的时候)。

　　提供反馈

　　界面要始终保【bǎo】持和用户【hù】的沟通【tōng】，不管是当他/她【tā】们的行为对【duì】错与否。随时提示用户的行为：状态【tài】更【gèng】改、出现错误或者异常【cháng】信息。视觉提示或是简单【dān】文字【zì】提【tí】醒都能【néng】告诉【sù】用户，他/她的行【háng】为是【shì】否【fǒu】能【néng】够达【dá】到预期的结果。

　　(对用户)宽容

　　无论你的【de】设计有多么的清晰明了，用户都会犯错【cuò】。你的UI应【yīng】当允【yǔn】许并【bìng】宽容地对待用户【hù】的错【cuò】误。要为用户提供【gòng】可以撤销行【háng】为【wéi】的方【fāng】式，并【bìng】且对五【wǔ】花八门的输【shū】入数据尽量宽【kuān】容【róng】(没人愿意只是因为填错了生日的格式【shì】而重头再来)。同样，如【rú】果【guǒ】用户的行为引起了一个错误，在恰当的时【shí】机运用信【xìn】息显示什么行为是【shì】错误【wù】的，并【bìng】确保他/她明白如何防止【zhǐ】这种错【cuò】误的再次发生。

　　鼓励用户

　　一旦用户对【duì】界【jiè】面有了经验之【zhī】后,要奖励他/她【tā】们，使之【zhī】进【jìn】价。把复杂任【rèn】务分解为若干【gàn】简单步骤将会更显繁复和【hé】让人精力分散。提供更【gèng】多【duō】的抽【chōu】象方【fāng】式——如键盘快捷键——完【wán】成任务，这样会让你的设计【jì】变得简洁易用。

　　融入用户的语言

　　所有的界面【miàn】或多或【huò】少【shǎo】都有文字【zì】在其【qí】上。让文稿尽量口【kǒu】语化，而不是华【huá】美辞【cí】藻的堆砌。为【wéi】行【háng】为提供清晰【xī】、简明【míng】的标签，保【bǎo】持简朴的文【wén】字叙述。用户【hù】对此将【jiāng】会很赞赏，因【yīn】为他们【men】不再是听命于他人的官腔——他们听到的是如朋友般甚至自己说话的表【biǎo】述方式。

　　保持简洁

　　正【zhèng】所谓：大音【yīn】希声【shēng】、大象无形。最上乘【chéng】的设计中，你看不到【dào】华而【ér】不实的UI修【xiū】饰【shì】，或是用不到的设计元素。换【huàn】而是，其【qí】必须的元素一定是【shì】简洁且有意义的。当你想着是否要【yào】在界面上加一【yī】个新功能或【huò】是元素的时候【hòu】，问【wèn】问自己，“用【yòng】户真【zhēn】的需要这些吗?”或者是“为【wéi】什么【me】用户想要这个【gè】小巧的动态图标?”。你【nǐ】是否只是因【yīn】为出于自我喜好而添加这些元素【sù】?记住，永【yǒng】远不要在UI设计【jì】中给【gěi】自己出风【fēng】头。

　　不断向前

　　人们常说，当开发界面【miàn】的时候，你往【wǎng】往【wǎng】需要失败得快一点，这样就能频繁【fán】迭代。当创【chuàng】建UI之时，你【nǐ】总会碰【pèng】到【dào】错误【wù】。没关系，只要不断向前，并【bìng】且要牢记让你的UI简【jiǎn】单易用。

　　3

　　一【yī】个成熟的网【wǎng】站中总是充斥着大量的内容，而如果用户想要在【zài】对短的时间内【nèi】找【zhǎo】到自己想要的内容，那么就免【miǎn】不了对搜索【suǒ】栏的使用，而搜索栏也【yě】顺理成章的成为了一个【gè】网站中最重要【yào】的组成部分【fèn】之一。既然重要，那么就【jiù】需要在【zài】设计的时【shí】候多【duō】费一些心思，如果能让用户在使【shǐ】用搜索栏【lán】时得【dé】到良好的使用体验，那【nà】么【me】无疑是网站的一个加分【fèn】项目，反之用户在使【shǐ】用的过程中【zhōng】可能就会遇到一【yī】些困【kùn】难。那么，在【zài】搜索【suǒ】栏的设【shè】计中，那网站的【de】搜索栏如【rú】何【hé】设计才能让用户的使用【yòng】体验变得更好【hǎo】?

　　一、使用放大镜的图标

　　可【kě】能有一些【xiē】网站在设计时希望能够展现出与众不同的一面，带给用户一些新奇的【de】体验，所以会【huì】在很多元素的设计上做出改进【jìn】。但不得不说的是，一些【xiē】功能最【zuì】好还是按【àn】照用户们最为熟【shú】悉【xī】的方法设计【jì】才能【néng】给【gěi】用【yòng】户【hù】带来良好的使【shǐ】用体验【yàn】。

　　诚然，放大镜的图标绝对算不【bú】上【shàng】新颖，甚至可以说十分【fèn】的【de】老套【tào】，但不得不考虑的【de】是【shì】，这恰恰是【shì】大【dà】部分用户【hù】最能接受的展现方式。放【fàng】大镜图标【biāo】与搜索栏的【de】绑定关系是【shì】在【zài】多【duō】年来的互联网使用过程中养成【chéng】的习惯，以至于用户在希望使用【yòng】搜索栏【lán】的时【shí】候总会下意【yì】识的去【qù】寻【xún】找放大【dà】镜【jìng】的图标。所以，在网【wǎng】站搜索栏的【de】设计【jì】时，也应该尽量的使用放大镜图标，这样可【kě】以让用户轻松地辨认出来【lái】。同时【shí】需要【yào】注意的是，放大镜【jìng】图标在【zài】设计时也应该尽量的简单明了，以此来【lái】提高图标的辨识度。

　　二、保证搜索栏非常显眼

　　无论网站【zhàn】的【de】主体【tǐ】颜色是什么，一个白色【sè】并带有放大镜图标的搜索栏都一【yī】定会显得十【shí】分显然，并且它们经常【cháng】出没于网站【zhàn】顶端【duān】或是右【yòu】侧，这样的设计不是没有意【yì】义【yì】的，而是最大程度的保【bǎo】证了搜【sōu】索【suǒ】栏的显眼【yǎn】。

　　同【tóng】时，占地不【bú】大的搜索栏不会在用户使【shǐ】用不到的【de】时候影【yǐng】响他【tā】们的视【shì】线，却能够在他们【men】需【xū】要使用【yòng】时【shí】第一时间【jiān】发现【xiàn】，这一点也非常重要，搜索栏存【cún】在的目的就是方便用户【hù】的浏览，而如果用户很难看见搜索【suǒ】栏在【zài】哪，那么【me】这一个最大【dà】的特点无疑【yí】就无法发挥其作用。

　　三、保证每个页面都有搜索栏

　　大部分用户【hù】都不会喜【xǐ】欢每【měi】看完一个页【yè】面【miàn】就【jiù】要回到主【zhǔ】页去寻找搜索栏，所以搜索栏应该尽量的充【chōng】斥在网站的每一个页面中【zhōng】。这【zhè】样可以保证用【yòng】户在每【měi】一【yī】个特定页面都可以通过【guò】搜索栏跳到另一【yī】个页面【miàn】，而不是点击后退【tuì】按【àn】钮回到主页。

　　这【zhè】种设【shè】计也是为了方便用户的使用，能够很【hěn】大程【chéng】度的提【tí】升用户对于网站【zhàn】的好【hǎo】感。

　　四、让搜索栏位于用户习惯的位置

　　与【yǔ】搜索栏【lán】的显眼设计同理【lǐ】，搜索栏应该尽量【liàng】的【de】放置于用【yòng】户所习【xí】惯的位置，比如顶端或者【zhě】右侧。这样的设【shè】计能够保证用【yòng】户在需要使用搜索栏【lán】时【shí】可以第一时间发现并【bìng】使【shǐ】用，而不必等到他们【men】需要使【shǐ】用的时候再在页面中寻【xún】找【zhǎo】，这已经违背了搜索栏存【cún】在的初衷。

　　五、注意搜索栏尺寸大小的合理性

　　搜索栏的设计【jì】无论【lùn】太大还【hái】是太小都会影响用户【hù】的使【shǐ】用体验。如果【guǒ】搜索栏的【de】尺寸【cùn】太大的【de】话，就【jiù】会遮挡内容，而如果搜索栏的设计太小，用户输入的内容【róng】很可【kě】能无法【fǎ】完全显【xiǎn】示，这样十分的【de】影【yǐng】响用户的使用体【tǐ】验。

　　目前有【yǒu】很多网【wǎng】站【zhàn】的搜索栏设【shè】计【jì】过小，导致用【yòng】户【hù】在使用时下意识【shí】的缩短自己想要搜索的内容【róng】，这【zhè】样一来就从精确搜【sōu】索变为了大范围的搜【sōu】索，即使你的【de】搜索栏【lán】可以满【mǎn】足用【yòng】户很长的搜索关键词【cí】，但由于视觉效【xiào】果，仍然会有很【hěn】多【duō】用户会自主的缩短【duǎn】在搜索栏输入【rù】的内容【róng】，这样一【yī】来无疑让【ràng】搜索栏的可用性变得很差。

　　搜索栏是网站建设过程中【zhōng】一个看【kàn】似非常简单的事情，但【dàn】其背后仍有很多细节需【xū】要站长仔细考虑【lǜ】。在搜索栏的【de】设【shè】计中，一些小【xiǎo】的改动【dòng】也可以让用户的使【shǐ】用【yòng】体验【yàn】发生很多【duō】的变化，所以在进【jìn】行搜索栏的设计【jì】时，一【yī】定【dìng】要保证小心谨慎。

　　4

　　在一个网站【zhàn】建设中，选择图片【piàn】是【shì】很重【chóng】要的，也是必不可【kě】少的【de】。一个配图糟【zāo】糕的网站足以让浏览者感觉厌烦而关闭【bì】网站【zhàn】页面，而在网【wǎng】站建【jiàn】设【shè】选用合适的图，不仅【jǐn】可以让网站更【gèng】加【jiā】吸引人和网络蜘【zhī】蛛，而且文【wén】字【zì】和图片的适【shì】当【dāng】搭配相当于进行免费的【de】SEO。那么这些LOGO图、banner图、产品图、文章插图该怎【zěn】么【me】选择呢?选择图片要考虑哪些方面?

　　1、图片要符合网站的整体风格

　　每个【gè】网站都【dōu】有【yǒu】其自己的网站主题，使用的图片如果【guǒ】较为符合网站主题，很容易【yì】就可以【yǐ】给人一种代【dài】入感，同时更加吸引人。此外就是图【tú】片色彩也需要配合网站风格。图片【piàn】色彩有很多种，有色彩斑斓的【de】、有【yǒu】庄【zhuāng】重大气的、有亮黑【hēi】炫酷的。但对于一般建站的【de】图【tú】片【piàn】选择【zé】上，还是建议色彩【cǎi】轻快为【wéi】主，给枯【kū】燥【zào】的网页添加【jiā】色彩【cǎi】不【bú】是很好吗?

　　2、图片选择要注意图片质量

　　对显示效果【guǒ】而言，图【tú】片固然是高清的【de】好，但是高清的【de】图片往往很大，这样会【huì】拖累网页的加载速度。因此【cǐ】我们以网页显示效果高【gāo】清为基【jī】准，来【lái】尽量【liàng】压缩【suō】。这样做【zuò】就【jiù】可以【yǐ】提【tí】升用户体验和搜索体验，同时也有【yǒu】效地节约了网页的【de】加载【zǎi】速度。

　　3、图片应该为内容服务

　　网站的图片不能随便【biàn】设【shè】置，应以服务【wù】内【nèi】容为先。谁【shuí】也不喜欢全是干巴巴文字的网页，如果能够使【shǐ】用吸引人眼球的图片，搭配上简练【liàn】的分析说明文【wén】字【zì】，这种图文信息【xī】组合的【de】方式，会提高人【rén】们阅读文字【zì】的兴趣。由于图片本身是【shì】网站内容的一【yī】部【bù】分【fèn】，所以说网【wǎng】站图片都有意义的话，相当于【yú】免费的SEO了。而【ér】那种为了有图片【piàn】而【ér】放图片【piàn】的行【háng】为，则会降低内容质量。

　　4、图片的其他小注意点

　　这些小点【diǎn】看似不起眼【yǎn】，长久积累下来对【duì】网站的益处还是不小的。首先推荐【jiàn】网站【zhàn】使用【yòng】gif和jpg格式【shì】的图像，这种格式【shì】属于交互式的，以分【fèn】级的形式显示【shì】进去。一开始显示的分【fèn】辨【biàn】率【lǜ】非常低，慢【màn】慢提高分辨【biàn】率，对网站【zhàn】打开【kāi】速【sù】度有【yǒu】提【tí】升。另外对图片的alt标签和title标签都可以进行添加。

• 上一章：网页设计师如何掌握色彩的指南
• 下一章：在网站设计中实时功能有什么用？