設(shè)計(jì)網(wǎng)站時(shí)，設(shè)計(jì)得讓人喜歡看也喜歡用無(wú)疑是較高境界，做起來(lái)當(dāng)然很不容易，不過(guò)看看下面這些“要”與“不要”或許能給你一些啟發(fā)。天津網(wǎng)站建設(shè)、網(wǎng)頁(yè)制作規(guī)劃、天津網(wǎng)站建設(shè)公司逐個(gè)為大家論述。

　　‘要’

　　1.保持界面的統(tǒng)一性

　　UX的一大原則便是維持整個(gè)界面的流暢體驗(yàn)。網(wǎng)站所有頁(yè)面的風(fēng)格和觀感應(yīng)該保持一致：導(dǎo)航條、配色、字體、書(shū)寫(xiě)風(fēng)格都需要考慮到這一點(diǎn)。

　　Tips：一致性是把雙刃劍，如果一開(kāi)始設(shè)計(jì)沒(méi)打下好基礎(chǔ)，之后再想統(tǒng)一反而會(huì)得不償失，因此易用性的優(yōu)先級(jí)要比一致性更高。

　　2.設(shè)計(jì)易用的導(dǎo)航結(jié)構(gòu)

　　導(dǎo)航是用戶易用性的基石，良好的導(dǎo)航結(jié)構(gòu)對(duì)用戶能找到他們需要的內(nèi)容非常關(guān)鍵

　　Tips：

　　克制較高層級(jí)導(dǎo)航的內(nèi)容：首層導(dǎo)航不要超過(guò)7個(gè)菜單，同時(shí)再輔以合理的二級(jí)導(dǎo)航

　　導(dǎo)航菜單需要清晰的命名：使用用戶熟悉的詞匯來(lái)命名U

　　優(yōu)化用戶抵達(dá)目標(biāo)的層級(jí)：用戶較多點(diǎn)三次便能訪問(wèn)到目標(biāo)頁(yè)面

　　網(wǎng)站頁(yè)底也有導(dǎo)航條：用戶習(xí)慣于在頁(yè)底看到導(dǎo)航和聯(lián)系信息

　　3.調(diào)整已訪問(wèn)的鏈接顏色

　　如果用戶點(diǎn)過(guò)的鏈接沒(méi)有變色，也許會(huì)造成重復(fù)訪問(wèn)，因此顏色的變化可以讓用戶意識(shí)到上一步的位置，來(lái)更好決定下一次點(diǎn)擊哪個(gè)鏈接。

　　4.更方便用戶快速瀏覽

　　如今的用戶看網(wǎng)站，快速掃一下是常態(tài)，發(fā)現(xiàn)到感興趣的內(nèi)容才會(huì)停下了細(xì)細(xì)閱讀，因此設(shè)計(jì)好合理的視覺(jué)樣式能讓用戶快速瀏覽起來(lái)更爽，包括幫助用戶設(shè)置好聚焦點(diǎn)。

　　Tips：

　　避免大段文字：對(duì)內(nèi)容合理分割，通過(guò)主標(biāo)題，子標(biāo)題有序分類(lèi)。

　　給予核心要素更多視覺(jué)權(quán)重：例如行動(dòng)召喚按鈕便需要讓用戶一眼便能看到，通過(guò)尺寸和顏色的變化來(lái)實(shí)現(xiàn)這一點(diǎn)。

　　遵循視覺(jué)習(xí)慣：用戶一般是從上到下，從左到右瀏覽，因此F型或者Z型的設(shè)計(jì)更符合用戶的流量習(xí)慣。

　　網(wǎng)格化設(shè)計(jì)：網(wǎng)格化設(shè)計(jì)也能提供用戶更好的瀏覽體驗(yàn)

　　5.用心對(duì)待內(nèi)容

　　內(nèi)容和設(shè)計(jì)一樣重要，因此即使網(wǎng)站設(shè)計(jì)得再華麗精美，如果沒(méi)有優(yōu)質(zhì)內(nèi)容也是金玉其外敗絮其中，設(shè)計(jì)師的目標(biāo)是讓內(nèi)容和設(shè)計(jì)有機(jī)地結(jié)合起來(lái)。

　　Tips：

　　確保網(wǎng)站上的內(nèi)容相關(guān)性

　　避免使用專(zhuān)業(yè)術(shù)語(yǔ).

　　6.檢查網(wǎng)站錯(cuò)誤

　　以下問(wèn)題需要仔細(xì)檢查：

　　檢測(cè)死鏈接.404頁(yè)面會(huì)讓用戶感到困惑

　　檢查錯(cuò)別字

　　檢查多媒體內(nèi)容：確保圖片和視頻能正常加載

　　7.減少選項(xiàng)

　　選擇用戶，用戶反而會(huì)越困惑從而不采取任何行動(dòng)。因此選項(xiàng)越少越好。Facebook采用分步驟的設(shè)計(jì)來(lái)減少選項(xiàng)

　　8.提醒用戶向下翻動(dòng)屏幕

　　用戶往下翻得越多，便會(huì)在網(wǎng)站上停留更久，也便給了網(wǎng)站做內(nèi)容更多呈現(xiàn)給用戶的機(jī)會(huì)。然而，用戶只會(huì)在認(rèn)為內(nèi)容有趣的情況下才會(huì)滾屏。

　　Tip：頁(yè)面上方的內(nèi)容需要給用戶帶來(lái)期待，高質(zhì)量的內(nèi)容自然會(huì)促使用戶繼續(xù)瀏覽。

　　9.按鈕上的標(biāo)簽需要明確告知用戶下一步進(jìn)度

　　按鈕上的提示越明確，用戶會(huì)覺(jué)得越放心。而類(lèi)似“提交”這樣的字眼無(wú)法讓用戶知曉，點(diǎn)擊按鈕之后到底會(huì)發(fā)生什么。下面一個(gè)是反例，第二個(gè)便表達(dá)的很清楚

　　10.設(shè)計(jì)要順其自然

　　如果一個(gè)元素看起來(lái)像鏈接或按鈕，但是卻沒(méi)法點(diǎn)擊，往往也會(huì)迷惑用戶

　　11.響應(yīng)式設(shè)

　　如今用瀏覽器的設(shè)備中有超過(guò)50億臺(tái)移動(dòng)設(shè)備，因此確保用戶用不同大小的屏幕訪問(wèn)頁(yè)面時(shí)都能獲得良好體驗(yàn)至關(guān)重要。

　　Tips：

　　核心信息易被發(fā)現(xiàn)：移動(dòng)端用戶更想獲取具體信息，例如聯(lián)系方式和商品價(jià)格，確保這些信息不會(huì)被忽略

　　根據(jù)屏幕調(diào)整元素尺寸.移動(dòng)端用戶用手指敲擊屏幕，所以類(lèi)似按鈕這些元素需要增加尺寸，更方便被點(diǎn)擊。Sincemobileusersscrollandtapwiththeirfingers，youmayneedtoincreasethesizeofinteractiveelements，suchauttons.

　　12.設(shè)計(jì)測(cè)試

　　再好的設(shè)計(jì)也需要來(lái)自用戶的反饋，如果能找到幾個(gè)客觀用戶，仔細(xì)和他們聊聊，聽(tīng)聽(tīng)他們的反饋，看看他們是怎么用網(wǎng)站的，會(huì)給你不少的啟發(fā)。

　　‘不要’

　　1.別讓用戶等著頁(yè)面加載

　　加載時(shí)間和用戶體驗(yàn)密不可分，根據(jù)數(shù)據(jù)分析，47%的用戶認(rèn)為頁(yè)面需要在兩秒類(lèi)加載完成，時(shí)間越久，用戶流失概率越高，因此不管是頁(yè)面還是APP，速度都是需要仔細(xì)考量的因素。

　　Tips：

　　加載時(shí)避免空白頁(yè)面：用一些有趣的內(nèi)容來(lái)留住用戶，例如加載進(jìn)度提示條

　　優(yōu)化圖片：.圖片尤其是大的背景圖需要更多時(shí)間加載，不妨試試優(yōu)化圖片。

　　評(píng)估當(dāng)前加載速度：Google的工具PageSpeedInsights不僅可以診斷網(wǎng)速，還可以給到合理的優(yōu)化建議

　　2.不用對(duì)內(nèi)部鏈接設(shè)置新窗口打開(kāi)

　　用戶對(duì)內(nèi)鏈和外鏈有著不同的預(yù)期，內(nèi)部鏈接較好在當(dāng)前標(biāo)簽打開(kāi)，用戶可以使用后退按鈕返回。如果一定要打開(kāi)新窗口，也需要在打開(kāi)前預(yù)先給到提示，例如“在新窗口打開(kāi)鏈接”

　　3.字體切勿使用太多

　　的確有著好多好看的字體，但是同一個(gè)網(wǎng)站用了太多字體會(huì)迷惑用戶，甚至?xí)菒烙脩簟?/p>

　　常見(jiàn)的做法是不要使用超過(guò)3種不同字體，也不要超過(guò)3種字體尺寸

　　4.切勿濫用顏色

　　同字體一樣，顏色的使用也要十分克制，要注意顏色互相間的平衡，而顏色過(guò)多，平衡便越難達(dá)到.

　　Tip：想想你打算喚醒用戶哪些情緒，有助于你挑選合適的配色方案。例如如果是銷(xiāo)售，過(guò)于活潑亮麗的色彩便不太合適

　　5.別過(guò)早彈出浮層/彈窗

　　很多網(wǎng)站剛一進(jìn)首頁(yè)，便迫不及待整個(gè)大彈窗，雖然有時(shí)難以避免，但至少請(qǐng)不要在用戶還沒(méi)讀清楚內(nèi)容前便彈好嗎？

　　Tip：控制彈窗的節(jié)奏，在要求用戶做什么之前，得先證明你自己的價(jià)值。

　　6.別使用不可靠的照片

　　使用真人照片更容易吸引用戶，人的大腦更容易注意到人臉，當(dāng)我們看到人臉，下意識(shí)里會(huì)有想和他們交談溝通的愿望。然而很多網(wǎng)站過(guò)度使用了真人照片，反而會(huì)傷害用戶體驗(yàn)

　　7.別讓促銷(xiāo)喧賓奪主

　　頁(yè)面上廣告過(guò)多的話，用戶便不得不看廣告，較終導(dǎo)致跳失率大幅上升。因?yàn)橛脩魸撘庾R(shí)里對(duì)一切像廣告的內(nèi)容都選擇性忽略

　　8.別使用背景音樂(lè)或默認(rèn)播放視頻

　　原因便是突如其來(lái)的音樂(lè)或視頻，往往會(huì)與用戶場(chǎng)景沖突。例如：在工作時(shí)，在公共場(chǎng)合，旁邊有人睡覺(jué)等等。

　　Tip：把控制權(quán)交還給用戶，音樂(lè)默認(rèn)設(shè)置靜音，但是用戶可以自主條件音量，選擇播放或暫停按鈕。

　　9.不要劫持滾屏

　　所謂劫持滾屏，便是和正常瀏覽器的翻頁(yè)滾屏效果不同，用戶會(huì)因?yàn)槭タ刂聘卸X(jué)得惱怒

　　10.別使用水平翻頁(yè)

　　有些設(shè)計(jì)師喜歡標(biāo)新立異，使用水平翻頁(yè)。不幸的是，用戶對(duì)此的評(píng)價(jià)都很差，因?yàn)楹驼５氖褂昧?xí)慣完全不一樣，結(jié)果便是用戶都不會(huì)閱讀水平翻頁(yè)后的內(nèi)容

　　11.不要為了美觀而喪失易用性

　　美觀始終是要讓位于易用的。舉個(gè)例子，用淺色的背景和文字，會(huì)讓用戶讀起來(lái)很費(fèi)勁。Google也犯過(guò)類(lèi)似的錯(cuò)誤

　　Tip：可以用工具檢查對(duì)比度ColorContrastChecker

　　12.使用閃閃發(fā)光的文字

　　在用GIF時(shí)，千萬(wàn)別用下面這種效果，很容易讓用戶厭煩。