設計網(wǎng)站時,設計得讓人喜歡看也喜歡用無疑是較高境界,做起來當然很不容易,不過看看下面這些“要”與“不要”或許能給你一些啟發(fā)。天津網(wǎng)站建設、網(wǎng)頁制作規(guī)劃、天津網(wǎng)站建設公司逐個為大家論述。
‘要’
1.保持界面的統(tǒng)一性
UX的一大原則便是維持整個界面的流暢體驗。網(wǎng)站所有頁面的風格和觀感應該保持一致:導航條、配色、字體、書寫風格都需要考慮到這一點。
Tips:一致性是把雙刃劍,如果一開始設計沒打下好基礎,之后再想統(tǒng)一反而會得不償失,因此易用性的優(yōu)先級要比一致性更高。
2.設計易用的導航結(jié)構(gòu)
導航是用戶易用性的基石,良好的導航結(jié)構(gòu)對用戶能找到他們需要的內(nèi)容非常關鍵
Tips:
克制較高層級導航的內(nèi)容:首層導航不要超過7個菜單,同時再輔以合理的二級導航
導航菜單需要清晰的命名:使用用戶熟悉的詞匯來命名U
優(yōu)化用戶抵達目標的層級:用戶較多點三次便能訪問到目標頁面
網(wǎng)站頁底也有導航條:用戶習慣于在頁底看到導航和聯(lián)系信息
3.調(diào)整已訪問的鏈接顏色
如果用戶點過的鏈接沒有變色,也許會造成重復訪問,因此顏色的變化可以讓用戶意識到上一步的位置,來更好決定下一次點擊哪個鏈接。
4.更方便用戶快速瀏覽
如今的用戶看網(wǎng)站,快速掃一下是常態(tài),發(fā)現(xiàn)到感興趣的內(nèi)容才會停下了細細閱讀,因此設計好合理的視覺樣式能讓用戶快速瀏覽起來更爽,包括幫助用戶設置好聚焦點。
Tips:
避免大段文字:對內(nèi)容合理分割,通過主標題,子標題有序分類。
給予核心要素更多視覺權(quán)重:例如行動召喚按鈕便需要讓用戶一眼便能看到,通過尺寸和顏色的變化來實現(xiàn)這一點。
遵循視覺習慣:用戶一般是從上到下,從左到右瀏覽,因此F型或者Z型的設計更符合用戶的流量習慣。
網(wǎng)格化設計:網(wǎng)格化設計也能提供用戶更好的瀏覽體驗
5.用心對待內(nèi)容
內(nèi)容和設計一樣重要,因此即使網(wǎng)站設計得再華麗精美,如果沒有優(yōu)質(zhì)內(nèi)容也是金玉其外敗絮其中,設計師的目標是讓內(nèi)容和設計有機地結(jié)合起來。
Tips:
確保網(wǎng)站上的內(nèi)容相關性
避免使用專業(yè)術語.
6.檢查網(wǎng)站錯誤
以下問題需要仔細檢查:
檢測死鏈接.404頁面會讓用戶感到困惑
檢查錯別字
檢查多媒體內(nèi)容:確保圖片和視頻能正常加載
7.減少選項
選擇用戶,用戶反而會越困惑從而不采取任何行動。因此選項越少越好。Facebook采用分步驟的設計來減少選項
8.提醒用戶向下翻動屏幕
用戶往下翻得越多,便會在網(wǎng)站上停留更久,也便給了網(wǎng)站做內(nèi)容更多呈現(xiàn)給用戶的機會。然而,用戶只會在認為內(nèi)容有趣的情況下才會滾屏。
Tip:頁面上方的內(nèi)容需要給用戶帶來期待,高質(zhì)量的內(nèi)容自然會促使用戶繼續(xù)瀏覽。
9.按鈕上的標簽需要明確告知用戶下一步進度
按鈕上的提示越明確,用戶會覺得越放心。而類似“提交”這樣的字眼無法讓用戶知曉,點擊按鈕之后到底會發(fā)生什么。下面一個是反例,第二個便表達的很清楚
10.設計要順其自然
如果一個元素看起來像鏈接或按鈕,但是卻沒法點擊,往往也會迷惑用戶
11.響應式設
如今用瀏覽器的設備中有超過50億臺移動設備,因此確保用戶用不同大小的屏幕訪問頁面時都能獲得良好體驗至關重要。
Tips:
核心信息易被發(fā)現(xiàn):移動端用戶更想獲取具體信息,例如聯(lián)系方式和商品價格,確保這些信息不會被忽略
根據(jù)屏幕調(diào)整元素尺寸.移動端用戶用手指敲擊屏幕,所以類似按鈕這些元素需要增加尺寸,更方便被點擊。Sincemobileusersscrollandtapwiththeirfingers,youmayneedtoincreasethesizeofinteractiveelements,suchauttons.
12.設計測試
再好的設計也需要來自用戶的反饋,如果能找到幾個客觀用戶,仔細和他們聊聊,聽聽他們的反饋,看看他們是怎么用網(wǎng)站的,會給你不少的啟發(fā)。
‘不要’
1.別讓用戶等著頁面加載
加載時間和用戶體驗密不可分,根據(jù)數(shù)據(jù)分析,47%的用戶認為頁面需要在兩秒類加載完成,時間越久,用戶流失概率越高,因此不管是頁面還是APP,速度都是需要仔細考量的因素。
Tips:
加載時避免空白頁面:用一些有趣的內(nèi)容來留住用戶,例如加載進度提示條
優(yōu)化圖片:.圖片尤其是大的背景圖需要更多時間加載,不妨試試優(yōu)化圖片。
評估當前加載速度:Google的工具PageSpeedInsights不僅可以診斷網(wǎng)速,還可以給到合理的優(yōu)化建議
2.不用對內(nèi)部鏈接設置新窗口打開
用戶對內(nèi)鏈和外鏈有著不同的預期,內(nèi)部鏈接較好在當前標簽打開,用戶可以使用后退按鈕返回。如果一定要打開新窗口,也需要在打開前預先給到提示,例如“在新窗口打開鏈接”
3.字體切勿使用太多
的確有著好多好看的字體,但是同一個網(wǎng)站用了太多字體會迷惑用戶,甚至會惹惱用戶。
常見的做法是不要使用超過3種不同字體,也不要超過3種字體尺寸
4.切勿濫用顏色
同字體一樣,顏色的使用也要十分克制,要注意顏色互相間的平衡,而顏色過多,平衡便越難達到.
Tip:想想你打算喚醒用戶哪些情緒,有助于你挑選合適的配色方案。例如如果是銷售,過于活潑亮麗的色彩便不太合適
5.別過早彈出浮層/彈窗
很多網(wǎng)站剛一進首頁,便迫不及待整個大彈窗,雖然有時難以避免,但至少請不要在用戶還沒讀清楚內(nèi)容前便彈好嗎?
Tip:控制彈窗的節(jié)奏,在要求用戶做什么之前,得先證明你自己的價值。
6.別使用不可靠的照片
使用真人照片更容易吸引用戶,人的大腦更容易注意到人臉,當我們看到人臉,下意識里會有想和他們交談溝通的愿望。然而很多網(wǎng)站過度使用了真人照片,反而會傷害用戶體驗
7.別讓促銷喧賓奪主
頁面上廣告過多的話,用戶便不得不看廣告,較終導致跳失率大幅上升。因為用戶潛意識里對一切像廣告的內(nèi)容都選擇性忽略
8.別使用背景音樂或默認播放視頻
原因便是突如其來的音樂或視頻,往往會與用戶場景沖突。例如:在工作時,在公共場合,旁邊有人睡覺等等。
Tip:把控制權(quán)交還給用戶,音樂默認設置靜音,但是用戶可以自主條件音量,選擇播放或暫停按鈕。
9.不要劫持滾屏
所謂劫持滾屏,便是和正常瀏覽器的翻頁滾屏效果不同,用戶會因為失去控制感而覺得惱怒
10.別使用水平翻頁
有些設計師喜歡標新立異,使用水平翻頁。不幸的是,用戶對此的評價都很差,因為和正常的使用習慣完全不一樣,結(jié)果便是用戶都不會閱讀水平翻頁后的內(nèi)容
11.不要為了美觀而喪失易用性
美觀始終是要讓位于易用的。舉個例子,用淺色的背景和文字,會讓用戶讀起來很費勁。Google也犯過類似的錯誤
Tip:可以用工具檢查對比度ColorContrastChecker
12.使用閃閃發(fā)光的文字
在用GIF時,千萬別用下面這種效果,很容易讓用戶厭煩。