網(wǎng)頁(yè)界面設(shè)計(jì)原則

新聞 2023-08-05編輯：重慶網(wǎng)站建設(shè)標(biāo)簽： 界面設(shè)計(jì) 原則

重慶網(wǎng)站建設(shè)公司 幫助企業(yè)提升網(wǎng)站形象,彰顯公司實(shí)力,PC+手機(jī)+微信+小程序
【模板網(wǎng)站的價(jià)格】國(guó)際域名+阿里1G空間+備案 一條龍服務(wù)
【定制網(wǎng)站的功能】SEO精準(zhǔn)營(yíng)銷系統(tǒng)+城市分站+W3C標(biāo)準(zhǔn)
【營(yíng)銷網(wǎng)站的效果】重長(zhǎng)尾，重優(yōu)化，提權(quán)重，擴(kuò)收錄，提排名
【量身訂制的設(shè)計(jì)】據(jù)據(jù)需求量身定制。設(shè)計(jì)到滿意為止
【專屬VIP的服務(wù)】24RX365 為您提供1對(duì)1的專屬VIP服務(wù)

　　1、為了用戶能夠更好的找到自己需要的內(nèi)容，在設(shè)計(jì)的時(shí)候應(yīng)該將任何無(wú)用的特質(zhì)都必須移除，與此同時(shí)，網(wǎng)頁(yè)設(shè)計(jì)必須能夠滿足用戶需求。下面介紹網(wǎng)頁(yè)界面設(shè)計(jì)原則，希望對(duì)您有幫助。

　　1、界面簡(jiǎn)約并完整

　　為了用戶能夠更好的找到自己需要的內(nèi)容，在設(shè)計(jì)的時(shí)候應(yīng)該將任何無(wú)用的特質(zhì)都必須移除;與此同時(shí)，網(wǎng)頁(yè)設(shè)計(jì)必須能夠滿足用戶需求。一個(gè)布局、風(fēng)格具有簡(jiǎn)約美，同時(shí)又能提供大量有價(jià)值信息的網(wǎng)站才會(huì)受用戶歡迎。

　　2、網(wǎng)站層級(jí)內(nèi)容清晰且加載速度快

　　用戶往往是缺乏耐心的，如果你不能提供便捷的信息，那么他們會(huì)選擇離開(kāi)，進(jìn)而尋找其他網(wǎng)站來(lái)謀求信息。隨著互聯(lián)網(wǎng)的發(fā)展，信息的更新速度是非?？斓模绻愕木W(wǎng)站加載太慢或者層級(jí)不清晰，那么也就錯(cuò)失了一個(gè)機(jī)會(huì)，畢竟每個(gè)人都想通過(guò)簡(jiǎn)單的操作便能獲取所需信息。

　　3、網(wǎng)頁(yè)設(shè)計(jì)必須具備一致性

　　用戶一般在瀏覽網(wǎng)頁(yè)的時(shí)候，基本不會(huì)詳細(xì)閱讀內(nèi)容，這樣會(huì)快速滑動(dòng)頁(yè)面，大致瀏覽一遍，如果看到感興趣的信息才會(huì)停下，進(jìn)行仔細(xì)閱讀。這是一種用戶習(xí)慣，這樣一來(lái)，同一頁(yè)面的各個(gè)元素以及各個(gè)子頁(yè)面之間必須要具備一致的聯(lián)系性，

　　4、導(dǎo)航的作用

　　將導(dǎo)航菜單作為交互的”核心”，因?yàn)槊慨?dāng)用戶有問(wèn)題時(shí)，他都會(huì)習(xí)慣性地翻閱導(dǎo)航菜單

　　5、界面留白的作用

　　留白也是設(shè)計(jì)的一部分，那些不使用的空間也能發(fā)揮其作用。從用戶的角度來(lái)說(shuō)，留白能夠讓布局更有條理，信息更清晰。

　　6、不要忽略字體

　　內(nèi)容為王，那么內(nèi)容是由什么包裝的呢?答案是字體，這種小小的細(xì)節(jié)能造就大差異。字體的清晰與否決定了信息呈遞的結(jié)果。

　　7、嘗試展示來(lái)自用戶的贊揚(yáng)，而不是自我表?yè)P(yáng)

　　很多在設(shè)計(jì)界面的時(shí)候?yàn)榱苏故咀约簝?yōu)勢(shì)，都是從自身出發(fā)，其實(shí)可以考慮從用戶出發(fā)。

　　2

　　了解你的用戶

　　了解用戶，因?yàn)橛脩舻哪繕?biāo)就是你的目標(biāo)。試著重述用戶，了解他們的技能水平和體驗(yàn)，以及什么是他們需要的。找出用戶偏好什么樣的界面，并觀察他們?cè)诮缑嬷腥绾尾僮?。不要迷戀于追逐設(shè)計(jì)趨勢(shì)的更新，或是不斷添加新的功能。首要的任務(wù)是關(guān)注你的用戶，這樣才能創(chuàng)造出一個(gè)能讓用戶達(dá)成目標(biāo)的界面。

　　重視模型

　　用戶的大部分時(shí)間都消耗在界面中，而不是他們自身上(Facebook，MySpace，Blogger，美國(guó)銀行，學(xué)校/大學(xué)，新聞網(wǎng)站，等等)。我們無(wú)需畫蛇添足，用戶在你正在創(chuàng)造的界面中看到的正是那些(已有的)界面已經(jīng)解決的同樣問(wèn)題。利用已成慣例的UI模型，你將使用戶感覺(jué)像在家中一樣熟悉。

　　保持一致性

　　用戶需要一致性。他們需要知道一旦他們學(xué)會(huì)做某項(xiàng)操作，那么下次也同樣可行。語(yǔ)言、布局和設(shè)計(jì)是需要保持一致性的幾個(gè)界面元素。一致性的界面可以讓用戶對(duì)于如何操作有更好的理解，從而提升效率。

　　運(yùn)用視覺(jué)等級(jí)

　　設(shè)計(jì)時(shí)，要讓用戶把注意力放在最重要的地方。每一個(gè)元素的尺寸、顏色還有位置，它們?yōu)槔斫饨缑婀餐该髁说缆?。清晰的層?jí)關(guān)系將對(duì)降低外觀的復(fù)雜性起到重要作用(甚至當(dāng)行為本身也同樣復(fù)雜的時(shí)候)。

　　提供反饋

　　界面要始終保持和用戶的溝通，不管是當(dāng)他/她們的行為對(duì)錯(cuò)與否。隨時(shí)提示用戶的行為：狀態(tài)更改、出現(xiàn)錯(cuò)誤或者異常信息。視覺(jué)提示或是簡(jiǎn)單文字提醒都能告訴用戶，他/她的行為是否能夠達(dá)到預(yù)期的結(jié)果。

　　(對(duì)用戶)寬容

　　無(wú)論你的設(shè)計(jì)有多么的清晰明了，用戶都會(huì)犯錯(cuò)。你的UI應(yīng)當(dāng)允許并寬容地對(duì)待用戶的錯(cuò)誤。要為用戶提供可以撤銷行為的方式，并且對(duì)五花八門的輸入數(shù)據(jù)盡量寬容(沒(méi)人愿意只是因?yàn)樘铄e(cuò)了生日的格式而重頭再來(lái))。同樣，如果用戶的行為引起了一個(gè)錯(cuò)誤，在恰當(dāng)?shù)臅r(shí)機(jī)運(yùn)用信息顯示什么行為是錯(cuò)誤的，并確保他/她明白如何防止這種錯(cuò)誤的再次發(fā)生。

　　鼓勵(lì)用戶

　　一旦用戶對(duì)界面有了經(jīng)驗(yàn)之后,要獎(jiǎng)勵(lì)他/她們，使之進(jìn)價(jià)。把復(fù)雜任務(wù)分解為若干簡(jiǎn)單步驟將會(huì)更顯繁復(fù)和讓人精力分散。提供更多的抽象方式——如鍵盤快捷鍵——完成任務(wù)，這樣會(huì)讓你的設(shè)計(jì)變得簡(jiǎn)潔易用。

　　融入用戶的語(yǔ)言

　　所有的界面或多或少都有文字在其上。讓文稿盡量口語(yǔ)化，而不是華美辭藻的堆砌。為行為提供清晰、簡(jiǎn)明的標(biāo)簽，保持簡(jiǎn)樸的文字?jǐn)⑹?。用戶?duì)此將會(huì)很贊賞，因?yàn)樗麄儾辉偈锹?tīng)命于他人的官腔——他們聽(tīng)到的是如朋友般甚至自己說(shuō)話的表述方式。

　　保持簡(jiǎn)潔

　　正所謂：大音希聲、大象無(wú)形。最上乘的設(shè)計(jì)中，你看不到華而不實(shí)的UI修飾，或是用不到的設(shè)計(jì)元素。換而是，其必須的元素一定是簡(jiǎn)潔且有意義的。當(dāng)你想著是否要在界面上加一個(gè)新功能或是元素的時(shí)候，問(wèn)問(wèn)自己，“用戶真的需要這些嗎?”或者是“為什么用戶想要這個(gè)小巧的動(dòng)態(tài)圖標(biāo)?”。你是否只是因?yàn)槌鲇谧晕蚁埠枚砑舆@些元素?記住，永遠(yuǎn)不要在UI設(shè)計(jì)中給自己出風(fēng)頭。

　　不斷向前

　　人們常說(shuō)，當(dāng)開(kāi)發(fā)界面的時(shí)候，你往往需要失敗得快一點(diǎn)，這樣就能頻繁迭代。當(dāng)創(chuàng)建UI之時(shí)，你總會(huì)碰到錯(cuò)誤。沒(méi)關(guān)系，只要不斷向前，并且要牢記讓你的UI簡(jiǎn)單易用。

　　3

　　一個(gè)成熟的網(wǎng)站中總是充斥著大量的內(nèi)容，而如果用戶想要在對(duì)短的時(shí)間內(nèi)找到自己想要的內(nèi)容，那么就免不了對(duì)搜索欄的使用，而搜索欄也順理成章的成為了一個(gè)網(wǎng)站中最重要的組成部分之一。既然重要，那么就需要在設(shè)計(jì)的時(shí)候多費(fèi)一些心思，如果能讓用戶在使用搜索欄時(shí)得到良好的使用體驗(yàn)，那么無(wú)疑是網(wǎng)站的一個(gè)加分項(xiàng)目，反之用戶在使用的過(guò)程中可能就會(huì)遇到一些困難。那么，在搜索欄的設(shè)計(jì)中，那網(wǎng)站的搜索欄如何設(shè)計(jì)才能讓用戶的使用體驗(yàn)變得更好?

　　一、使用放大鏡的圖標(biāo)

　　可能有一些網(wǎng)站在設(shè)計(jì)時(shí)希望能夠展現(xiàn)出與眾不同的一面，帶給用戶一些新奇的體驗(yàn)，所以會(huì)在很多元素的設(shè)計(jì)上做出改進(jìn)。但不得不說(shuō)的是，一些功能最好還是按照用戶們最為熟悉的方法設(shè)計(jì)才能給用戶帶來(lái)良好的使用體驗(yàn)。

　　誠(chéng)然，放大鏡的圖標(biāo)絕對(duì)算不上新穎，甚至可以說(shuō)十分的老套，但不得不考慮的是，這恰恰是大部分用戶最能接受的展現(xiàn)方式。放大鏡圖標(biāo)與搜索欄的綁定關(guān)系是在多年來(lái)的互聯(lián)網(wǎng)使用過(guò)程中養(yǎng)成的習(xí)慣，以至于用戶在希望使用搜索欄的時(shí)候總會(huì)下意識(shí)的去尋找放大鏡的圖標(biāo)。所以，在網(wǎng)站搜索欄的設(shè)計(jì)時(shí)，也應(yīng)該盡量的使用放大鏡圖標(biāo)，這樣可以讓用戶輕松地辨認(rèn)出來(lái)。同時(shí)需要注意的是，放大鏡圖標(biāo)在設(shè)計(jì)時(shí)也應(yīng)該盡量的簡(jiǎn)單明了，以此來(lái)提高圖標(biāo)的辨識(shí)度。

　　二、保證搜索欄非常顯眼

　　無(wú)論網(wǎng)站的主體顏色是什么，一個(gè)白色并帶有放大鏡圖標(biāo)的搜索欄都一定會(huì)顯得十分顯然，并且它們經(jīng)常出沒(méi)于網(wǎng)站頂端或是右側(cè)，這樣的設(shè)計(jì)不是沒(méi)有意義的，而是最大程度的保證了搜索欄的顯眼。

　　同時(shí)，占地不大的搜索欄不會(huì)在用戶使用不到的時(shí)候影響他們的視線，卻能夠在他們需要使用時(shí)第一時(shí)間發(fā)現(xiàn)，這一點(diǎn)也非常重要，搜索欄存在的目的就是方便用戶的瀏覽，而如果用戶很難看見(jiàn)搜索欄在哪，那么這一個(gè)最大的特點(diǎn)無(wú)疑就無(wú)法發(fā)揮其作用。

　　三、保證每個(gè)頁(yè)面都有搜索欄

　　大部分用戶都不會(huì)喜歡每看完一個(gè)頁(yè)面就要回到主頁(yè)去尋找搜索欄，所以搜索欄應(yīng)該盡量的充斥在網(wǎng)站的每一個(gè)頁(yè)面中。這樣可以保證用戶在每一個(gè)特定頁(yè)面都可以通過(guò)搜索欄跳到另一個(gè)頁(yè)面，而不是點(diǎn)擊后退按鈕回到主頁(yè)。

　　這種設(shè)計(jì)也是為了方便用戶的使用，能夠很大程度的提升用戶對(duì)于網(wǎng)站的好感。

　　四、讓搜索欄位于用戶習(xí)慣的位置

　　與搜索欄的顯眼設(shè)計(jì)同理，搜索欄應(yīng)該盡量的放置于用戶所習(xí)慣的位置，比如頂端或者右側(cè)。這樣的設(shè)計(jì)能夠保證用戶在需要使用搜索欄時(shí)可以第一時(shí)間發(fā)現(xiàn)并使用，而不必等到他們需要使用的時(shí)候再在頁(yè)面中尋找，這已經(jīng)違背了搜索欄存在的初衷。

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

　　搜索欄的設(shè)計(jì)無(wú)論太大還是太小都會(huì)影響用戶的使用體驗(yàn)。如果搜索欄的尺寸太大的話，就會(huì)遮擋內(nèi)容，而如果搜索欄的設(shè)計(jì)太小，用戶輸入的內(nèi)容很可能無(wú)法完全顯示，這樣十分的影響用戶的使用體驗(yàn)。

　　目前有很多網(wǎng)站的搜索欄設(shè)計(jì)過(guò)小，導(dǎo)致用戶在使用時(shí)下意識(shí)的縮短自己想要搜索的內(nèi)容，這樣一來(lái)就從精確搜索變?yōu)榱舜蠓秶乃阉?，即使你的搜索欄可以滿足用戶很長(zhǎng)的搜索關(guān)鍵詞，但由于視覺(jué)效果，仍然會(huì)有很多用戶會(huì)自主的縮短在搜索欄輸入的內(nèi)容，這樣一來(lái)無(wú)疑讓搜索欄的可用性變得很差。

　　搜索欄是網(wǎng)站建設(shè)過(guò)程中一個(gè)看似非常簡(jiǎn)單的事情，但其背后仍有很多細(xì)節(jié)需要站長(zhǎng)仔細(xì)考慮。在搜索欄的設(shè)計(jì)中，一些小的改動(dòng)也可以讓用戶的使用體驗(yàn)發(fā)生很多的變化，所以在進(jìn)行搜索欄的設(shè)計(jì)時(shí)，一定要保證小心謹(jǐn)慎。

　　4

　　在一個(gè)網(wǎng)站建設(shè)中，選擇圖片是很重要的，也是必不可少的。一個(gè)配圖糟糕的網(wǎng)站足以讓瀏覽者感覺(jué)厭煩而關(guān)閉網(wǎng)站頁(yè)面，而在網(wǎng)站建設(shè)選用合適的圖，不僅可以讓網(wǎng)站更加吸引人和網(wǎng)絡(luò)蜘蛛，而且文字和圖片的適當(dāng)搭配相當(dāng)于進(jìn)行免費(fèi)的SEO。那么這些LOGO圖、banner圖、產(chǎn)品圖、文章插圖該怎么選擇呢?選擇圖片要考慮哪些方面?

　　1、圖片要符合網(wǎng)站的整體風(fēng)格

　　每個(gè)網(wǎng)站都有其自己的網(wǎng)站主題，使用的圖片如果較為符合網(wǎng)站主題，很容易就可以給人一種代入感，同時(shí)更加吸引人。此外就是圖片色彩也需要配合網(wǎng)站風(fēng)格。圖片色彩有很多種，有色彩斑斕的、有莊重大氣的、有亮黑炫酷的。但對(duì)于一般建站的圖片選擇上，還是建議色彩輕快為主，給枯燥的網(wǎng)頁(yè)添加色彩不是很好嗎?

　　2、圖片選擇要注意圖片質(zhì)量

　　對(duì)顯示效果而言，圖片固然是高清的好，但是高清的圖片往往很大，這樣會(huì)拖累網(wǎng)頁(yè)的加載速度。因此我們以網(wǎng)頁(yè)顯示效果高清為基準(zhǔn)，來(lái)盡量壓縮。這樣做就可以提升用戶體驗(yàn)和搜索體驗(yàn)，同時(shí)也有效地節(jié)約了網(wǎng)頁(yè)的加載速度。

　　3、圖片應(yīng)該為內(nèi)容服務(wù)

　　網(wǎng)站的圖片不能隨便設(shè)置，應(yīng)以服務(wù)內(nèi)容為先。誰(shuí)也不喜歡全是干巴巴文字的網(wǎng)頁(yè)，如果能夠使用吸引人眼球的圖片，搭配上簡(jiǎn)練的分析說(shuō)明文字，這種圖文信息組合的方式，會(huì)提高人們閱讀文字的興趣。由于圖片本身是網(wǎng)站內(nèi)容的一部分，所以說(shuō)網(wǎng)站圖片都有意義的話，相當(dāng)于免費(fèi)的SEO了。而那種為了有圖片而放圖片的行為，則會(huì)降低內(nèi)容質(zhì)量。

　　4、圖片的其他小注意點(diǎn)

　　這些小點(diǎn)看似不起眼，長(zhǎng)久積累下來(lái)對(duì)網(wǎng)站的益處還是不小的。首先推薦網(wǎng)站使用gif和jpg格式的圖像，這種格式屬于交互式的，以分級(jí)的形式顯示進(jìn)去。一開(kāi)始顯示的分辨率非常低，慢慢提高分辨率，對(duì)網(wǎng)站打開(kāi)速度有提升。另外對(duì)圖片的alt標(biāo)簽和title標(biāo)簽都可以進(jìn)行添加。

• 上一章：網(wǎng)頁(yè)設(shè)計(jì)師如何掌握色彩的指南
• 下一章：在網(wǎng)站設(shè)計(jì)中實(shí)時(shí)功能有什么用？