隨著網(wǎng)站建設(shè)技術(shù)的發(fā)展, 用戶的感性需求不斷提升, 對產(chǎn)品的需求體驗也在逐步提高。用戶體驗越來越細(xì)化, 網(wǎng)頁設(shè)計的情感化成為一個突出的現(xiàn)象。一些功能化的網(wǎng)頁越來越人性化, 比如404網(wǎng)頁的形態(tài)發(fā)生了很多的變化。404頁面的作用是告知用戶所請求的頁面不存在或鏈接錯誤, 引導(dǎo)用戶訪問其它頁面, 這在網(wǎng)站建設(shè)中必不可少, 也是最能體現(xiàn)網(wǎng)站優(yōu)化設(shè)計的部分。目前404頁面設(shè)計常常超出其功能性的范疇, 不合理或過度設(shè)計, 會誤導(dǎo)用戶, 進(jìn)而造成用戶滿意度降低, 不能達(dá)到友好交互的目的。本文通過對404頁面的情感化設(shè)計的研究分析, 歸納總結(jié)404頁面設(shè)計應(yīng)遵循的情感化設(shè)計原則, 為404頁面設(shè)計研究提供設(shè)計參考。
1 404錯誤頁面的重要性
404 (404 error) 是WWW網(wǎng)站訪問時出現(xiàn)的錯誤頁面, 表示鏈接指向的頁面不存在。404是HTTP的一種標(biāo)準(zhǔn)回應(yīng)代碼, 即HTTP狀態(tài)碼, 表示網(wǎng)頁服務(wù)器的響應(yīng)狀態(tài)。HTTP狀態(tài)碼大致被分成5類?！?”開頭的數(shù)字表示請求出錯, 影響了服務(wù)器處理, 即客戶端錯誤?！?”表示網(wǎng)址錯誤。末尾的“4”表示在以“4”開頭的錯誤代碼中的順序。
404頁面在網(wǎng)站架構(gòu)中起著非常重要的作用。它體現(xiàn)著一個網(wǎng)站的完整性, 當(dāng)用戶在頁面訪問錯誤的時候沒有404頁面, 那么操作就沒法繼續(xù)進(jìn)行, 造成網(wǎng)頁的死鏈接, 用戶只能關(guān)閉窗口離開。反之, 可以跳轉(zhuǎn)到其它頁面。404頁面的設(shè)計不僅是用戶訪問網(wǎng)站的反饋 , 也是網(wǎng)頁設(shè)計中優(yōu)化用戶體驗的重要工具。
2 404頁面的設(shè)計現(xiàn)狀與問題
404頁面的表現(xiàn)形式多種多樣, 最基本的功能是體現(xiàn)網(wǎng)頁對用戶的導(dǎo)示性。在操作方式上可以將404頁面分為3類:直接顯示錯誤頁面、自動跳轉(zhuǎn)到指定頁面、引導(dǎo)用戶選擇其它頁面。404頁面設(shè)計有兩種形式:默認(rèn)的404頁面和自定義404頁面。默認(rèn)的頁面只是簡單表述錯誤信息, 沒有涉及設(shè)計內(nèi)容, 而自定義頁面則需要設(shè)計元素的填充并提供選擇。從情感化表現(xiàn)形式可以將404頁面類型分為文字引導(dǎo)型、色彩引導(dǎo)型、圖形引導(dǎo)型等。
2.1 文字引導(dǎo)型
文字在網(wǎng)頁設(shè)計中是最不可或缺的元素之一。從功能性角度來說, 文字是最直接、最準(zhǔn)確的視覺溝通及認(rèn)知方式, 是最能充分表達(dá)思想的媒介。它在網(wǎng)站中的主要作用是傳遞網(wǎng)站的內(nèi)容, 使用戶能夠通過閱讀來獲得信息, 其次是傳遞文字本身的情感意義。文字的版式設(shè)計不僅體現(xiàn)了視覺傳達(dá)的效果, 同時文字的編排設(shè)計也是一種創(chuàng)意思維體現(xiàn)的過程。在404頁面中, 簡單的文字引導(dǎo)是早期網(wǎng)站最常采用的方式?！?04 Not Found”這一文字信息, 不涉及設(shè)計內(nèi)容, 單純告知頁面錯誤, 用戶無選擇, 只能關(guān)閉頁面離開, 造成用戶無措感。這種“冷冰冰”的交互形式已被設(shè)計師所擯棄。
在傳播一個信息的過程中, 文字的內(nèi)容往往需要合適的文字外觀來表達(dá), 選用合適的字體、字號、顏色等元素進(jìn)行設(shè)計更能滿足用戶的審美需求, 設(shè)計的層次性也更強。另外一種常見的純文字引導(dǎo)頁面, 見圖2, 有文字層級的設(shè)計, 通過文字大小和直線區(qū)分層次, 使用了大量文字堆積來引導(dǎo)用戶如何進(jìn)行下一步操作。但在此過程中, 過多的技術(shù)術(shù)語是不應(yīng)該出現(xiàn)在404錯誤頁面上的, 因為很多用戶可能無法理解這些術(shù)語, 反而會讓用戶感到困惑。
2.2 色彩引導(dǎo)型
色彩是網(wǎng)頁給人的第一印象, 給予網(wǎng)站以活力。色彩在網(wǎng)頁中除了傳達(dá)信息外, 在一定程度上還可以幫助用戶閱讀信息。不同的色彩所代表的性格不同, 給人的感受也不同。色彩本身并沒有情感, 之所以會產(chǎn)生不一樣的情感體驗, 主要是各種色相、明度、純度組合在一起所產(chǎn)生的不同效果。高飽和度的暖色更能夠吸引用戶的注意, 見圖3。設(shè)計師用白色作為底色, 紅、橙、黃組成交集餅圖, 摻加了數(shù)學(xué)原理, 可以輕易將用戶的視線引導(dǎo)到橙色表現(xiàn)的“404 page”上來, 巧妙地進(jìn)行了視覺區(qū)分;再匹配文字的引導(dǎo), 整體頁面干凈整潔, 條理清晰、主題突出, 通過色彩表現(xiàn)出的視覺層次效果, 引導(dǎo)用戶在頁面信息中找到有用信息。
2.3 圖形引導(dǎo)型
圖形在網(wǎng)站信息傳達(dá)中可以輔助文字、引導(dǎo)閱讀、增強網(wǎng)頁的可讀性, 利于人們的理解。圖形相對于文字和色彩更加有生命力和活力。圖形是404頁面中最能表現(xiàn)創(chuàng)意的載體, 是設(shè)計師的創(chuàng)意思維表達(dá)和情感表達(dá)所在。在404頁面中, 可以將圖形分為3類:404圖形創(chuàng)意類、矢量插畫類和攝影圖片類。
2.3.1 404圖形創(chuàng)意類
404圖形創(chuàng)意類是以“404”文字為創(chuàng)意點所作的抽象或具象的設(shè)計。這一類型頁面往往主題突出, 能夠讓用戶快速了解圖片所傳達(dá)的信息, 信息更容易獲取。設(shè)計師用“404”所作的圖形為主體, 白色為底色, 用飽和度較高的暖色填充色彩, “0”巧妙地轉(zhuǎn)化設(shè)計為融化了的甜甜圈, 并在圖形下配以詼諧的文字, 表示頁面的錯誤, 再加上冷色塊表示的返回按鈕, 有冷暖對比, 使得設(shè)計主次分明、更加完整, 用戶馬上就能理解頁面表達(dá)的內(nèi)容, 視覺流程比較流暢。
2.3.2 矢量插畫類
圖形圖像最能表達(dá)設(shè)計師的創(chuàng)意, 表現(xiàn)形式更加多元。通常色彩使用較豐富, 對比強烈, 裝飾性比較強, 比較有風(fēng)格性和層次性。太空主題是這一類的頁面最常用的表現(xiàn)形式。設(shè)計師選用深藍(lán)色作為背景色, 用明度較弱的藍(lán)色表示404的狀態(tài), 是屬于“面”的元素;頁面上方有搜索、菜單欄等元素, 左上方還使用了點裝飾頁面, 達(dá)到視覺平衡;頁面下方有返回主頁等操作按鈕, 并用線條進(jìn)行頁面分割;頁面中央是設(shè)計師最想表現(xiàn)的內(nèi)容, 宇航員和小火箭之間用線連接, 畫面不會松散, 并在左側(cè)用文字表示頁面丟失在太空中。通過點、線、面的設(shè)計組合表達(dá)設(shè)計主題, 讓頁面更加完整, 版式也更加平衡, 同時有效地傳達(dá)信息, 提升了用戶體驗。
2.3.3 攝影圖片類
攝影類的圖片直接取材于生活, 能夠更加直觀地表現(xiàn)網(wǎng)頁主題, 能夠真實、細(xì)膩、生動地傳遞需要表達(dá)的信息。構(gòu)思新穎獨特的攝影圖像, 能成功吸引用戶的注意力6。一些幽默的攝影圖片通常會被應(yīng)用在404錯誤頁面中。而一種更值得關(guān)注的公益類題材的設(shè)計內(nèi)容在近幾年經(jīng)常出現(xiàn)在404頁面中。這類頁面往往能夠更加引起用戶的情感共鳴, 直擊用戶內(nèi)心, 并且在一定程度上有效利用了互聯(lián)網(wǎng)資源。騰訊、網(wǎng)易、搜狗等公司都使用了這種公益推廣型的404頁面, 或許相較于那些富有創(chuàng)意、幽默、有趣的錯誤頁面, 這類的404頁面表達(dá)方式更能引起用戶的關(guān)注, 使得404頁面發(fā)揮更多的作用。
3 404頁面情感化設(shè)計方法
情感化設(shè)計是設(shè)計師表達(dá)創(chuàng)意思維和設(shè)計表現(xiàn)的創(chuàng)意工具, 是讓用戶獲得更好使用體驗的表達(dá)方式。唐納德·諾曼在《情感化設(shè)計》一書中指出, 情感化設(shè)計的3種水平:本能水平、行為水平和反思水平。本能水平的設(shè)計從產(chǎn)品的外形出發(fā), 用戶接受其傳遞的感情信號, 體現(xiàn)最直接真實的想法。行為水平的設(shè)計更加注重產(chǎn)品的使用效率和產(chǎn)品功能的提升, 旨在完善用戶體驗的方方面面。反思水平的設(shè)計在前兩者的基礎(chǔ)上對產(chǎn)品要求盡善盡美, 提高用戶的愉悅感、滿足感等情感體驗, 培養(yǎng)用戶對產(chǎn)品的忠誠度, 讓產(chǎn)品的存在更加有意義。這三者密不可分, 相輔相成, 其設(shè)計的最終目標(biāo)是在傳遞情感的過程中, 打動用戶, 讓用戶對產(chǎn)品具有正確的認(rèn)知, 快速獲取所需信息。
3.1 本能水平與趣味圖形提煉
本能水平的設(shè)計反映了用戶對產(chǎn)品的第一印象, 就是即刻的情感效果7, 這是發(fā)自用戶的本能感受, 是體現(xiàn)良好用戶體驗的第一步, 也是本能水平設(shè)計的基本原理, 遵循這些原理, 簡單或復(fù)雜的設(shè)計, 都是很吸引人的, 并且這種情感體驗也會讓用戶產(chǎn)生情感記憶。本能水平的設(shè)計體現(xiàn)在404頁面中是網(wǎng)頁中的文字、色彩、圖形等視覺元素。文字的多少大小、色彩的對比形式、圖片的大小位置等元素在版式設(shè)計中的關(guān)系都是需要設(shè)計師用情感去設(shè)計的, 根據(jù)特定的內(nèi)容和主題, 按照主次順序和形式美法則進(jìn)行排版布局, 從而向用戶傳達(dá)網(wǎng)頁信息。
文字圖形具有很好的指示性, 但是同時也會缺少趣味感。在404頁面設(shè)計中要充分展示頁面設(shè)計的獨特性, 抓住創(chuàng)意點去設(shè)計, 快速有效地吸引用戶是設(shè)計關(guān)鍵, 必須考慮到網(wǎng)頁界面擁有足夠的視覺沖擊力以及美感, 才能激發(fā)用戶的內(nèi)在情感。醒目的標(biāo)題或文字向用戶說明出現(xiàn)當(dāng)前頁面的原因是本能水平設(shè)計的關(guān)鍵點所在, 或許適當(dāng)?shù)那榫w化體現(xiàn)在設(shè)計中更能呼應(yīng)用戶面對錯誤頁面時的無措感或惱怒感, 一個小孩因為哭泣冒出的鼻涕泡, 將“0”這個數(shù)字圖形化為鼻涕泡, 顯得頁面很有趣, 將用戶的視覺焦點牽引到“404”這一錯誤狀態(tài)上來, 并用簡單的文字說明了頁面的錯誤, 在一定程度上弱化了用戶面對錯誤頁面的不悅感。
3.2 行為水平與視覺符號的運用
行為水平的設(shè)計中最重要的是體現(xiàn)產(chǎn)品的功能, 強調(diào)產(chǎn)品的可用性和性能, 也是實現(xiàn)產(chǎn)品價值的首要任務(wù)。然而, 怎樣實現(xiàn)產(chǎn)品功能, 滿足用戶需求, 或許并不容易。產(chǎn)品的個性是情感化體現(xiàn)的平臺, 產(chǎn)品的個性影響感知12, 諾曼在書中提到產(chǎn)品開發(fā)有改進(jìn)和創(chuàng)新兩種形式。因此, 抓住404錯誤頁面這一讓用戶感到困惑的痛點, 通過改進(jìn)和創(chuàng)新設(shè)計, 從而使產(chǎn)品本身的功能性得到最大化體現(xiàn)。
為了保證404頁面的有效性和引導(dǎo)性, 從本質(zhì)上來說設(shè)計內(nèi)容應(yīng)當(dāng)簡單, 保持視覺上的簡約, 應(yīng)當(dāng)說明用戶當(dāng)前遇到了錯誤以及如何離開此頁面。在錯誤頁面中, 視覺符號的合理配置是優(yōu)化用戶體驗的基礎(chǔ)?？梢院喕撁嫘畔? 刪減掉不必要的功能, 只提供幾個簡單能夠?qū)虻倪x項, 并在設(shè)計流程中充分考慮這些選項的功能, 讓頁面既好看又有用。404作為標(biāo)題, 在深色底色中, 是比較顯眼的視覺元素, 并在其下方說明頁面錯誤, 用帶有箭頭的色塊表示不同的選擇, 引導(dǎo)用戶離開, 視覺流程簡單明了, 直接將404頁面設(shè)計的關(guān)鍵點體現(xiàn)出來。
3.3 反思水平與關(guān)鍵信息提煉
反思水平的設(shè)計是對本能水平和行為水平設(shè)計的進(jìn)一步完善, 需要考慮到產(chǎn)品本身及其周邊環(huán)境的關(guān)系, 更加注重產(chǎn)品的自身情感性。優(yōu)秀的404錯誤頁面應(yīng)當(dāng)首要思考和所屬網(wǎng)站的聯(lián)系, 保持設(shè)計氛圍的一致, 快速有效引導(dǎo)用戶完成操作, 不需要過多的噱頭, 它的傳遞方式應(yīng)該恰當(dāng), 它的風(fēng)格和結(jié)構(gòu)應(yīng)該恰當(dāng), 最重要的是內(nèi)容應(yīng)該恰當(dāng), 設(shè)計的內(nèi)容應(yīng)當(dāng)是適合用戶的, 符合它存在的情境, 也許“少就是多”的設(shè)計反而能使用戶體驗更加良好。有時不恰當(dāng)?shù)幕蜻^度的設(shè)計反而會引起用戶對產(chǎn)品的不滿, 見圖9。頁面總體設(shè)計比較完整, 設(shè)計風(fēng)格統(tǒng)一, 標(biāo)題簡明扼要告知用戶頁面的錯誤信息, 為了增加頁面的趣味性添加了吃豆人的小游戲。但是, 在404頁面中, 最重要的功能就是快速引導(dǎo)用戶離開此頁面, 消除用戶的無措感, 而不是讓用戶浪費更多的時間在當(dāng)前頁面, 添加游戲的設(shè)計行為是否是一種過度的設(shè)計也有待商榷。
4 結(jié)語
404頁面是網(wǎng)頁設(shè)計中的功能性頁面, 它使用的頻率高、指令性強, 容易影響人們在網(wǎng)頁交互中的用戶體驗。當(dāng)前的網(wǎng)頁設(shè)計越來越人性化, 網(wǎng)頁設(shè)計符號的表現(xiàn)形式過于冰冷會影響用戶的良好交互;同時, 在網(wǎng)頁設(shè)計中過度設(shè)計會造成視覺系統(tǒng)的混亂, 而引起信息的誤讀。因此, 建立良好交互的同時, 增加頁面設(shè)計的情感化體驗需要遵循適度設(shè)計的法則。從用戶的本能水平、行為水平、反思水平3個方面切入404頁面設(shè)計, 形成情感化設(shè)計的交互框架, 能夠避免設(shè)計感官層面和經(jīng)驗式反饋的局限, 從而進(jìn)行有序分類研究和針對性設(shè)計, 達(dá)到提高404圖形識別度, 快速有效確認(rèn)信息的目的, 同時增進(jìn)交互體驗和審美趣味, 提高戶體驗水平, 促進(jìn)良好交互的形成。文字、色彩與圖形等設(shè)計元素的編排直接影響著404錯誤頁面功能的實現(xiàn), 將情感化設(shè)計理論應(yīng)用于404錯誤頁面的設(shè)計不僅滿足功能性的需求, 也減緩錯誤鏈接所導(dǎo)致用戶情感上的負(fù)面情緒。404頁面的情感化設(shè)計, 能夠最大限度地吸引用戶的目光, 提升網(wǎng)頁的實用性, 使用戶獲得良好的交互體驗。
