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

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

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

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

　　如何測(cè)試：

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

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

　　其重要性：

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

　　如何測(cè)試：

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

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

　　其重要性：

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

　　如何測(cè)試：

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

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

　　其重要性：

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

　　如何測(cè)試：

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

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

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

　　其重要性：

　　用戶(hù)依賴(lài)于產(chǎn)品的層次結(jié)構(gòu)和線(xiàn)索來(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è)可訪(fǎng)問(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è)試不同種類(lèi)的色盲。你也可以在圖像編輯器上對(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)允許用戶(hù)快速掃描信息，根據(jù)他們的即時(shí)需求優(yōu)先考慮內(nèi)容。在視覺(jué)層次結(jié)構(gòu)頂部附近的項(xiàng)目必須對(duì)業(yè)務(wù)最重要，對(duì)用戶(hù)最重要。

　　如何測(cè)試：

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

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

　　其重要性：

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

　　如何測(cè)試：

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

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

　　其重要性：

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

　　如何測(cè)試：

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

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

　　其重要性：

　　當(dāng)使用新產(chǎn)品時(shí)，用戶(hù)會(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)在相同的位置。

　　其重要性：

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

　　如何測(cè)試：

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

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

　　其重要性：

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

　　如何測(cè)試：

　　在檢查了視覺(jué)差異化之后，看看用戶(hù)如何對(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)航菜單和整體布局需要支持更多的類(lèi)別 / 主題而不破壞。設(shè)計(jì)有增長(zhǎng)空間意味著主要的設(shè)計(jì)和開(kāi)發(fā)工作在界面上很容易擴(kuò)展。

　　如何測(cè)試：

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

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

　　其重要性：

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

　　如何測(cè)試：

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

　　四、排版

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

　　其重要性：

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

　　如何測(cè)試：

　　只需確保你的設(shè)計(jì)不超過(guò)兩種類(lèi)型的字體族。你也應(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)容，什么是控制 —— 即用戶(hù)可以與之交互的內(nèi)容。這些指標(biāo)可以是大小、顏色、定位、字體等。

　　字體很重要：

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

　　如何測(cè)試：

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

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

　　其重要性：

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

　　如何測(cè)試：

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

　　20、字體大小 / 粗細(xì)區(qū)分內(nèi)容類(lè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)題和段落使用不同的字體大小和重量。

　　五、用戶(hù)界面

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

　　其重要性：

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

　　如何測(cè)試：

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

　　22、接近和對(duì)齊

　　其重要性：

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

　　如何測(cè)試：

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

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

　　其重要性：

　　對(duì)視覺(jué)障礙的人很重要。它還提高了用戶(hù)的學(xué)習(xí)曲線(xiàn)和理解能力。清晰的區(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ì)性?xún)?yōu)化，這樣才合適。