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