有哪些適合應(yīng)用在SEO網(wǎng)站設(shè)計(jì)的技巧?用戶體驗(yàn)在SEO方面也是占據(jù)一部分內(nèi)容的，如果用戶對(duì)你的網(wǎng)站不滿意，那么，你的網(wǎng)站也無(wú)法得到好的效果。下面看看哪些設(shè)計(jì)技巧我們可以參考。

　　一、交互設(shè)計(jì)

　　01、重復(fù)的動(dòng)作或頻繁的活動(dòng)讓人感到輕松

　　其重要性：相同輸出的重復(fù)動(dòng)作(例如，用相同的信息填充不同的表單)是一項(xiàng)艱巨的任務(wù)，不能幫助用戶更快或更好地實(shí)現(xiàn)目標(biāo)。用戶可能也會(huì)嘗試找到一種方法：例如，尋找可以幫助他/她更快/更好的競(jìng)爭(zhēng)對(duì)手。

　　如何測(cè)試：

　　您應(yīng)該首先分析您所有的產(chǎn)品流程并觀察用戶的行為。您需要確保，如果存在重復(fù)的操作，則有一種方法可以幫助它們：例如，可以使用以前輸入的信息。

　　02、用戶可以很容易地從錯(cuò)誤中恢復(fù)

　　其重要性：

　　通常用戶會(huì)做一些意想不到的意外動(dòng)作，并讓他們返回去嘗試，這意味著他們不會(huì)感到沮喪，并且能夠很容易地恢復(fù)并繼續(xù)前進(jìn)。

　　如何測(cè)試：

　　首先，要確保你的導(dǎo)航系統(tǒng)允許返回，并且可以取消操作。然后，在進(jìn)行可用性測(cè)試時(shí)，創(chuàng)建用戶最可能執(zhí)行錯(cuò)誤操作的場(chǎng)景，并檢查是否可以輕松恢復(fù)。

　　03、用戶根據(jù)他們的專業(yè)水平得到充分的支持

　　其重要性：

　　確保你產(chǎn)品中的新手用戶有流暢的學(xué)習(xí)經(jīng)驗(yàn)是很重要的。然而，一旦他們已經(jīng)熟悉了產(chǎn)品，那就應(yīng)該給幫助他/她更快地通過(guò)流動(dòng)的工具。兩種方案都提高了可用性和保留性。例如，專家用戶的快捷方式、對(duì)新手用戶的工具提示等。

　　如何測(cè)試：

　　首先，檢查你是否有兩個(gè)受眾的工具。然后，與新手和專家用戶進(jìn)行可用性測(cè)試，看看這些工具是否被正確使用。

　　04、訪問(wèn)幫助并不妨礙用戶的進(jìn)步

　　其重要性：

　　當(dāng)用戶被困在產(chǎn)品的某一部分時(shí)，他們會(huì)尋求幫助。在線或離線幫助是很重要的，允許用戶在他們離開(kāi)的地方恢復(fù)工作。

　　如何測(cè)試：

　　創(chuàng)建測(cè)試場(chǎng)景，用戶將請(qǐng)求幫助，并查看他們的工作流程和進(jìn)度是否被中斷。

　　二、視覺(jué)設(shè)計(jì)

　　05、可視化層次結(jié)構(gòu)指導(dǎo)用戶執(zhí)行所需的操作

　　其重要性：

　　用戶依賴于產(chǎn)品的層次結(jié)構(gòu)和線索來(lái)知道該做什么，該去哪里 —— 理解這一點(diǎn)很重要，并正確地指導(dǎo)他們使用這個(gè)層次結(jié)構(gòu)。

　　如何測(cè)試：

　　了解你的產(chǎn)品工作流程，以及它的關(guān)鍵動(dòng)作是否被視覺(jué)層次結(jié)構(gòu)所激勵(lì)。

　　06、僅顏色本身不用于傳達(dá)層次、內(nèi)容或功能

　　其重要性：

　　擁有一個(gè)可訪問(wèn)的產(chǎn)品不是一個(gè)plus —— 這是必須的。對(duì)于視覺(jué)障礙的人，比如色盲，僅僅依靠顏色來(lái)傳達(dá)等級(jí)、內(nèi)容或功能意味著他們將無(wú)法使用你的產(chǎn)品，并且將成為被排除的人群。

　　如何測(cè)試：

　　會(huì)讓你在網(wǎng)頁(yè)的頂部放一個(gè)顏色過(guò)濾器，并測(cè)試不同種類的色盲。你也可以在圖像編輯器上對(duì)你的產(chǎn)品進(jìn)行屏幕截圖，然后將其轉(zhuǎn)換成灰度，看看你是否能輕松分辨出顏色。

　　07、不超過(guò)三種原色

　　其重要性：

　　這不是一個(gè)固定的規(guī)則 —— 有時(shí)，對(duì)于特定的情況，可以使用超過(guò)三種主要顏色。然而，要記住，組合三種顏色已經(jīng)很困難了，所以大多數(shù)情況下都應(yīng)該避免。

　　如何測(cè)試：

　　確保你在設(shè)計(jì)產(chǎn)品時(shí)使用的調(diào)色板沒(méi)有超過(guò)三種顏色。

　　08、在視覺(jué)層次上的項(xiàng)目是最重要的

　　其重要性：

　　視覺(jué)層次結(jié)構(gòu)允許用戶快速掃描信息，根據(jù)他們的即時(shí)需求優(yōu)先考慮內(nèi)容。在視覺(jué)層次結(jié)構(gòu)頂部附近的項(xiàng)目必須對(duì)業(yè)務(wù)最重要，對(duì)用戶最重要。

　　如何測(cè)試：

　　屏幕捕捉你的數(shù)字產(chǎn)品，然后高斯模糊的屏幕截圖半徑在 5px 左右。在查看結(jié)果時(shí)，你將立即可視化層次結(jié)構(gòu)，并注意哪些元素脫穎而出。這些對(duì)企業(yè)和用戶來(lái)說(shuō)是最重要的嗎?

　　09、主動(dòng)作與次要?jiǎng)幼饕曈X(jué)上截然不同

　　其重要性：

　　有不同的主次操作意味著用戶在與您的產(chǎn)品交互時(shí)不會(huì)感到困惑，并且不會(huì)犯錯(cuò)誤。例如，“Submit”和“Cancel”必須明顯不同。

　　如何測(cè)試：

　　在進(jìn)行可用性測(cè)試時(shí)，要注意常見(jiàn)的錯(cuò)誤，這些錯(cuò)誤不是來(lái)自于用戶的意圖，而是來(lái)自于不同的主要和次要的操作。此外，在審查設(shè)計(jì)時(shí)，要確保顏色、大小、位置和其他元素對(duì)動(dòng)作進(jìn)行區(qū)分。

　　10、表單提交以直觀的方式確認(rèn)

　　其重要性：

　　必須讓用戶確認(rèn)是否成功執(zhí)行了操作。例如，在提交表單之后，一個(gè) banner 顏色的明確確認(rèn)消息將意味著用戶可以轉(zhuǎn)到下一個(gè)任務(wù)。

　　如何測(cè)試：

　　檢查你的產(chǎn)品的所有區(qū)域，用戶輸入信息。在用戶輸入完成后，觸發(fā)確認(rèn)該操作是否成功的確認(rèn)。確保反饋對(duì)于最終狀態(tài)非常清楚。

　　11、互動(dòng)元素不是抽象的

　　其重要性：

　　當(dāng)使用新產(chǎn)品時(shí)，用戶會(huì)得到一套基于他/她以前使用其他數(shù)字產(chǎn)品的經(jīng)驗(yàn) —— 例如，按鈕應(yīng)該是什么樣子，以及他們應(yīng)該如何工作。實(shí)現(xiàn)這些期望意味著你不會(huì)制造不必要的摩擦。

　　如何測(cè)試：

　　首先，檢查你的產(chǎn)品，尋找沒(méi)有使用公共模式的區(qū)域。例如，鏈接看起來(lái)不像鏈接。

　　12、警告信息是一致的

　　它是什么：

　　警告消息具有相同的視覺(jué)樣式，并以相同的方式出現(xiàn)在相同的位置。

　　其重要性：

　　保持一致的警告信息意味著用戶總是能夠理解什么是立即值得注意的。與警報(bào)不一致意味著每當(dāng)一個(gè)新的警報(bào)出現(xiàn)時(shí)，它就意味著額外的精神負(fù)荷。

　　如何測(cè)試：

　　確保警告消息具有相同的視覺(jué)風(fēng)格，它們的定位相似或相同。

　　13、警告信息在視覺(jué)上是不同的

　　其重要性：

　　通過(guò)確保警報(bào)消息與其他屏幕元素明顯不同，用戶實(shí)際上可以注意 / 采取行動(dòng)。

　　如何測(cè)試：

　　在檢查了視覺(jué)差異化之后，看看用戶如何對(duì)可用性測(cè)試中的警告信息做出反應(yīng)。

　　三、信息架構(gòu)

　　14、增長(zhǎng)空間

　　其重要性：

　　每當(dāng)出現(xiàn)新功能或內(nèi)容時(shí)，你就不能重新設(shè)計(jì)產(chǎn)品的導(dǎo)航和信息系統(tǒng)。導(dǎo)航菜單和整體布局需要支持更多的類別 / 主題而不破壞。設(shè)計(jì)有增長(zhǎng)空間意味著主要的設(shè)計(jì)和開(kāi)發(fā)工作在界面上很容易擴(kuò)展。

　　如何測(cè)試：

　　詢問(wèn)所有的利益相關(guān)者，在產(chǎn)品中，內(nèi)容如何隨著時(shí)間的推移而增長(zhǎng)。你會(huì)支持更多的靜態(tài)內(nèi)容嗎?架構(gòu)需要支持視頻嗎?

　　15、導(dǎo)航是一致的

　　其重要性：

　　用戶在你的產(chǎn)品中定位和導(dǎo)航的方式直接影響他們是否能夠完成他/她的目標(biāo)，不管他們的當(dāng)前頁(yè)面是什么。

　　如何測(cè)試：

　　檢查你的信息架構(gòu)文檔，并確保導(dǎo)航在每個(gè)頁(yè)面都可訪問(wèn)，并且它不會(huì)改變或消失。在進(jìn)入視覺(jué)設(shè)計(jì)之前，嘗試卡片分類或樹(shù)測(cè)試，以確保你的信息架構(gòu)路徑盡可能直觀。

　　四、排版

　　16、使用不超過(guò)兩種不同類型的字體族

　　其重要性：

　　這不是一個(gè)固定的規(guī)則：有時(shí)可能會(huì)超過(guò)兩個(gè)。但一般來(lái)說(shuō)，匹配兩個(gè)以上并不是一件容易的事。對(duì)于可用性和視覺(jué)目的，堅(jiān)持兩個(gè)可以簡(jiǎn)化你的排版層次，從而提高你的理解能力。

　　如何測(cè)試：

　　只需確保你的設(shè)計(jì)不超過(guò)兩種類型的字體族。你也應(yīng)該確保你選擇的字體是正確匹配的。

　　17、用于文本內(nèi)容的字體大小至少為 12px

　　其重要性：

　　同樣，這并不是一個(gè)固定的規(guī)則 —— 理論上你可以用更小的尺寸來(lái)做非常具體的用途——但一般來(lái)說(shuō)，在 12 px以下的尺寸下，可讀性會(huì)大大降低。

　　如何測(cè)試：

　　檢查你所有的內(nèi)容，并確保它們的字體大小至少為 12 個(gè)像素。

　　18、不同的字體樣式或組合用來(lái)分隔內(nèi)容和控制

　　其重要性：

　　需要有明確的指標(biāo)來(lái)說(shuō)明什么是內(nèi)容，什么是控制 —— 即用戶可以與之交互的內(nèi)容。這些指標(biāo)可以是大小、顏色、定位、字體等。

　　字體很重要：

　　使用不同的風(fēng)格或字體組合，意味著用戶不會(huì)感到困惑，很容易識(shí)別出哪些是可以交互的。

　　如何測(cè)試：

　　識(shí)別產(chǎn)品中的所有控件，并確保它們從內(nèi)容中脫穎而出。在運(yùn)行可用性測(cè)試時(shí)，請(qǐng)注意用戶在與控件交互時(shí)是否存在困難。

　　19、用大寫(xiě)字母表示標(biāo)簽、標(biāo)題或首字母縮略詞

　　其重要性：

　　限制使用大寫(xiě)字母可以促進(jìn)理解 —— 對(duì)用戶來(lái)說(shuō)，更不容易理解。它應(yīng)該專門用于強(qiáng)調(diào)或非常受限制的情況 —— 例如，首字母縮略詞。

　　如何測(cè)試：

　　運(yùn)行一個(gè)徹底的內(nèi)容檢查，并確保大寫(xiě)的單詞僅限于標(biāo)題、標(biāo)簽或首字母縮略詞。

　　20、字體大小 / 粗細(xì)區(qū)分內(nèi)容類型

　　其重要性：

　　它嚴(yán)重影響可讀性和理解能力。在標(biāo)題、副標(biāo)題和段落之間明確區(qū)分，減少了消化內(nèi)容的精神負(fù)擔(dān)。它也有視覺(jué)上的好處 —— 它看起來(lái)和感覺(jué)更好。

　　如何測(cè)試：

　　當(dāng)你在檢查你的產(chǎn)品的內(nèi)容時(shí)，確保標(biāo)題，副標(biāo)題和段落使用不同的字體大小和重量。

　　五、用戶界面

　　21、多步工作流程的進(jìn)度指示

　　其重要性：

　　特別對(duì)于多步驟的工作流程，用戶很容易感到不知所措或不知道它要多久才能完成。一個(gè)進(jìn)度指標(biāo)幫助他/她找到他/她的位置，但更重要的是它創(chuàng)造了成就感并降低了跳出率。

　　如何測(cè)試：

　　檢查你產(chǎn)品內(nèi)的所有流量，在那里有不同的步驟來(lái)完成某件事，然后確保通過(guò)一個(gè)指示器來(lái)顯示進(jìn)度。

　　22、接近和對(duì)齊

　　其重要性：

　　用戶有一種傾向于群體 —— 功能或上下文 —— 它們彼此接近。導(dǎo)航欄就是一個(gè)很好的例子。遵循此模式并將連接的項(xiàng)分組，意味著用戶立即了解你的接口。

　　如何測(cè)試：

　　查找功能上類似的項(xiàng)，并檢查它們(何時(shí)可能)組合在一起。

　　23、前景元素(如內(nèi)容和控件)很容易與背景區(qū)分開(kāi)來(lái)

　　其重要性：

　　對(duì)視覺(jué)障礙的人很重要。它還提高了用戶的學(xué)習(xí)曲線和理解能力。清晰的區(qū)分促進(jìn)了導(dǎo)航，給按鈕帶來(lái)了更多的關(guān)注，增加了一般的可用性。

　　如何測(cè)試：

　　屏幕截圖你的產(chǎn)品和高斯模糊，屏幕截圖半徑在 3px 到 5px。當(dāng)看到結(jié)果時(shí)，你能很容易地分辨出前景和背景中是什么嗎?

　　當(dāng)然了，并不是說(shuō)每個(gè)網(wǎng)站都需要將沒(méi)一點(diǎn)落實(shí)好，我們需要根據(jù)自己的網(wǎng)站來(lái)進(jìn)行針對(duì)性優(yōu)化，這樣才合適。