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

新聞 2023-08-05編輯：深圳網(wǎng)站建設(shè)閱讀（）標簽： 界面設(shè)計 原則

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

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

　　1、界面簡約并完整

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

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

　　用戶往往是缺乏耐心的，如果你不能提供便捷的信息，那么他們會選擇離開，進而尋找其他網(wǎng)站來謀求信息。隨著互聯(lián)網(wǎng)的發(fā)展，信息的更新速度是非常快的，如果你的網(wǎng)站加載太慢或者層級不清晰，那么也就錯失了一個機會，畢竟每個人都想通過簡單的操作便能獲取所需信息。

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

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

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

　　將導(dǎo)航菜單作為交互的”核心”，因為每當用戶有問題時，他都會習慣性地翻閱導(dǎo)航菜單

　　5、界面留白的作用

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

　　6、不要忽略字體

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

　　7、嘗試展示來自用戶的贊揚，而不是自我表揚

　　很多在設(shè)計界面的時候為了展示自己優(yōu)勢，都是從自身出發(fā)，其實可以考慮從用戶出發(fā)。

　　2

　　了解你的用戶

　　了解用戶，因為用戶的目標就是你的目標。試著重述用戶，了解他們的技能水平和體驗，以及什么是他們需要的。找出用戶偏好什么樣的界面，并觀察他們在界面中如何操作。不要迷戀于追逐設(shè)計趨勢的更新，或是不斷添加新的功能。首要的任務(wù)是關(guān)注你的用戶，這樣才能創(chuàng)造出一個能讓用戶達成目標的界面。

　　重視模型

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

　　保持一致性

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

　　運用視覺等級

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

　　提供反饋

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

　　(對用戶)寬容

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

　　鼓勵用戶

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

　　融入用戶的語言

　　所有的界面或多或少都有文字在其上。讓文稿盡量口語化，而不是華美辭藻的堆砌。為行為提供清晰、簡明的標簽，保持簡樸的文字敘述。用戶對此將會很贊賞，因為他們不再是聽命于他人的官腔——他們聽到的是如朋友般甚至自己說話的表述方式。

　　保持簡潔

　　正所謂：大音希聲、大象無形。最上乘的設(shè)計中，你看不到華而不實的UI修飾，或是用不到的設(shè)計元素。換而是，其必須的元素一定是簡潔且有意義的。當你想著是否要在界面上加一個新功能或是元素的時候，問問自己，“用戶真的需要這些嗎?”或者是“為什么用戶想要這個小巧的動態(tài)圖標?”。你是否只是因為出于自我喜好而添加這些元素?記住，永遠不要在UI設(shè)計中給自己出風頭。

　　不斷向前

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

　　3

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

　　一、使用放大鏡的圖標

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

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

　　二、保證搜索欄非常顯眼

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

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

　　三、保證每個頁面都有搜索欄

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

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

　　四、讓搜索欄位于用戶習慣的位置

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

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

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

　　目前有很多網(wǎng)站的搜索欄設(shè)計過小，導(dǎo)致用戶在使用時下意識的縮短自己想要搜索的內(nèi)容，這樣一來就從精確搜索變?yōu)榱舜蠓秶乃阉鳎词鼓愕乃阉鳈诳梢詽M足用戶很長的搜索關(guān)鍵詞，但由于視覺效果，仍然會有很多用戶會自主的縮短在搜索欄輸入的內(nèi)容，這樣一來無疑讓搜索欄的可用性變得很差。

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

　　4

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

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

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

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

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

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

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

　　4、圖片的其他小注意點

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

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