福州網頁培訓：創意404.html頁面設計教程

404 (404 error) 是WWW網站訪問時出現的錯誤頁面, 表示鏈接指向的頁面不存在。404是HTTP的一種標準回應代碼, 即HTTP狀態碼, 表示網頁服務器的響應狀態。HTTP狀態碼大致被分成5類?！?”開頭的數字表示請求出錯, 影響了服務器處理, 即客戶端錯誤?！?”表示網址錯誤。末尾的“4”表示在以“4”開頭的錯誤代碼中的順序。

404頁面在網站架構中起著非常重要的作用。它體現著一個網站的完整性, 當用戶在頁面訪問錯誤的時候沒有404頁面, 那么操作就沒法繼續進行, 造成網頁的死鏈接, 用戶只能關閉窗口離開。反之, 可以跳轉到其它頁面。404頁面的設計不僅是用戶訪問網站的反饋 , 也是網頁設計中優化用戶體驗的重要工具。

404頁面的表現形式多種多樣, 最基本的功能是體現網頁對用戶的導示性。在操作方式上可以將404頁面分為3類:直接顯示錯誤頁面、自動跳轉到指定頁面、引導用戶選擇其它頁面。404頁面設計有兩種形式:默認的404頁面和自定義404頁面。默認的頁面只是簡單表述錯誤信息, 沒有涉及設計內容, 而自定義頁面則需要設計元素的填充并提供選擇。從情感化表現形式可以將404頁面類型分為文字引導型、色彩引導型、圖形引導型等。

文字在網頁設計中是最不可或缺的元素之一。從功能性角度來說, 文字是最直接、最準確的視覺溝通及認知方式, 是最能充分表達思想的媒介^[2]。它在網站中的主要作用是傳遞網站的內容, 使用戶能夠通過閱讀來獲得信息, 其次是傳遞文字本身的情感意義。文字的版式設計不僅體現了視覺傳達的效果, 同時文字的編排設計也是一種創意思維體現的過程。在404頁面中, 簡單的文字引導是早期網站最常采用的方式, 見圖1?！?04 Not Found”這一文字信息, 不涉及設計內容, 單純告知頁面錯誤, 用戶無選擇, 只能關閉頁面離開, 造成用戶無措感。這種“冷冰冰”的交互形式已被設計師所擯棄。

在傳播一個信息的過程中, 文字的內容往往需要合適的文字外觀來表達^[3], 選用合適的字體、字號、顏色等元素進行設計更能滿足用戶的審美需求, 設計的層次性也更強。另外一種常見的純文字引導頁面, 見圖2, 有文字層級的設計, 通過文字大小和直線區分層次, 使用了大量文字堆積來引導用戶如何進行下一步操作。但在此過程中, 過多的技術術語是不應該出現在404錯誤頁面上的, 因為很多用戶可能無法理解這些術語, 反而會讓用戶感到困惑。

色彩是網頁給人的第一印象, 給予網站以活力。色彩在網頁中除了傳達信息外, 在一定程度上還可以幫助用戶閱讀信息。不同的色彩所代表的性格不同, 給人的感受也不同。色彩本身并沒有情感, 之所以會產生不一樣的情感體驗, 主要是各種色相、明度、純度組合在一起所產生的不同效果^[4]。高飽和度的暖色更能夠吸引用戶的注意, 見圖3。設計師用白色作為底色, 紅、橙、黃組成交集餅圖, 摻加了數學原理, 可以輕易將用戶的視線引導到橙色表現的“404 page”上來, 巧妙地進行了視覺區分;再匹配文字的引導, 整體頁面干凈整潔, 條理清晰、主題突出, 通過色彩表現出的視覺層次效果, 引導用戶在頁面信息中找到有用信息。

圖形在網站信息傳達中可以輔助文字、引導閱讀、增強網頁的可讀性, 利于人們的理解^[5]。圖形相對于文字和色彩更加有生命力和活力。圖形是404頁面中最能表現創意的載體, 是設計師的創意思維表達和情感表達所在。在404頁面中, 可以將圖形分為3類:404圖形創意類、矢量插畫類和攝影圖片類。

404圖形創意類是以“404”文字為創意點所作的抽象或具象的設計。這一類型頁面往往主題突出, 能夠讓用戶快速了解圖片所傳達的信息, 信息更容易獲取, 見圖4。設計師用“404”所作的圖形為主體, 白色為底色, 用飽和度較高的暖色填充色彩, “0”巧妙地轉化設計為融化了的甜甜圈, 并在圖形下配以詼諧的文字, 表示頁面的錯誤, 再加上冷色塊表示的返回按鈕, 有冷暖對比, 使得設計主次分明、更加完整, 用戶馬上就能理解頁面表達的內容, 視覺流程比較流暢。

圖形圖像最能表達設計師的創意, 表現形式更加多元。通常色彩使用較豐富, 對比強烈, 裝飾性比較強, 比較有風格性和層次性。太空主題是這一類的頁面最常用的表現形式, 見圖5。設計師選用深藍色作為背景色, 用明度較弱的藍色表示404的狀態, 是屬于“面”的元素;頁面上方有搜索、菜單欄等元素, 左上方還使用了點裝飾頁面, 達到視覺平衡;頁面下方有返回主頁等操作按鈕, 并用線條進行頁面分割;頁面中央是設計師最想表現的內容, 宇航員和小火箭之間用線連接, 畫面不會松散, 并在左側用文字表示頁面丟失在太空中。通過點、線、面的設計組合表達設計主題, 讓頁面更加完整, 版式也更加平衡, 同時有效地傳達信息, 提升了用戶體驗。

攝影類的圖片直接取材于生活, 能夠更加直觀地表現網頁主題, 能夠真實、細膩、生動地傳遞需要表達的信息。構思新穎獨特的攝影圖像, 能成功吸引用戶的注意力^[6]。一些幽默的攝影圖片通常會被應用在404錯誤頁面中。而一種更值得關注的公益類題材的設計內容在近幾年經常出現在404頁面中。這類頁面往往能夠更加引起用戶的情感共鳴, 直擊用戶內心, 并且在一定程度上有效利用了互聯網資源, 見圖6。騰訊、網易、搜狗等公司都使用了這種公益推廣型的404頁面, 或許相較于那些富有創意、幽默、有趣的錯誤頁面, 這類的404頁面表達方式更能引起用戶的關注, 使得404頁面發揮更多的作用。

情感化設計是設計師表達創意思維和設計表現的創意工具, 是讓用戶獲得更好使用體驗的表達方式。唐納德·諾曼在《情感化設計》一書中指出, 情感化設計的3種水平:本能水平、行為水平和反思水平。本能水平的設計從產品的外形出發, 用戶接受其傳遞的感情信號, 體現最直接真實的想法。行為水平的設計更加注重產品的使用效率和產品功能的提升, 旨在完善用戶體驗的方方面面。反思水平的設計在前兩者的基礎上對產品要求盡善盡美, 提高用戶的愉悅感、滿足感等情感體驗, 培養用戶對產品的忠誠度, 讓產品的存在更加有意義。這三者密不可分, 相輔相成, 其設計的最終目標是在傳遞情感的過程中, 打動用戶, 讓用戶對產品具有正確的認知, 快速獲取所需信息。

本能水平的設計反映了用戶對產品的第一印象, 就是即刻的情感效果^[7], 這是發自用戶的本能感受, 是體現良好用戶體驗的第一步, 也是本能水平設計的基本原理, 遵循這些原理, 簡單或復雜的設計, 都是很吸引人的, 并且這種情感體驗也會讓用戶產生情感記憶。本能水平的設計體現在404頁面中是網頁中的文字、色彩、圖形等視覺元素。文字的多少大小、色彩的對比形式、圖片的大小位置等元素在版式設計中的關系都是需要設計師用情感去設計的, 根據特定的內容和主題, 按照主次順序和形式美法則進行排版布局^[8], 從而向用戶傳達網頁信息。

文字圖形具有很好的指示性, 但是同時也會缺少趣味感^[9]。在404頁面設計中要充分展示頁面設計的獨特性, 抓住創意點去設計, 快速有效地吸引用戶是設計關鍵, 必須考慮到網頁界面擁有足夠的視覺沖擊力以及美感, 才能激發用戶的內在情感^[10]。醒目的標題或文字向用戶說明出現當前頁面的原因是本能水平設計的關鍵點所在, 或許適當的情緒化體現在設計中更能呼應用戶面對錯誤頁面時的無措感或惱怒感, 見圖7。一個小孩因為哭泣冒出的鼻涕泡, 將“0”這個數字圖形化為鼻涕泡, 顯得頁面很有趣, 將用戶的視覺焦點牽引到“404”這一錯誤狀態上來, 并用簡單的文字說明了頁面的錯誤, 在一定程度上弱化了用戶面對錯誤頁面的不悅感。

行為水平的設計中最重要的是體現產品的功能, 強調產品的可用性和性能^[11], 也是實現產品價值的首要任務。然而, 怎樣實現產品功能, 滿足用戶需求, 或許并不容易。產品的個性是情感化體現的平臺, 產品的個性影響感知^[12], 諾曼在書中提到產品開發有改進和創新兩種形式。因此, 抓住404錯誤頁面這一讓用戶感到困惑的痛點, 通過改進和創新設計, 從而使產品本身的功能性得到最大化體現。

為了保證404頁面的有效性和引導性, 從本質上來說設計內容應當簡單, 保持視覺上的簡約, 應當說明用戶當前遇到了錯誤以及如何離開此頁面。在錯誤頁面中, 視覺符號的合理配置是優化用戶體驗的基礎?？梢院喕撁嫘畔? 刪減掉不必要的功能, 只提供幾個簡單能夠導向的選項, 并在設計流程中充分考慮這些選項的功能, 讓頁面既好看又有用, 見圖8。404作為標題, 在深色底色中, 是比較顯眼的視覺元素, 并在其下方說明頁面錯誤, 用帶有箭頭的色塊表示不同的選擇, 引導用戶離開, 視覺流程簡單明了, 直接將404頁面設計的關鍵點體現出來。

反思水平的設計是對本能水平和行為水平設計的進一步完善, 需要考慮到產品本身及其周邊環境的關系, 更加注重產品的自身情感性。優秀的404錯誤頁面應當首要思考和所屬網站的聯系, 保持設計氛圍的一致, 快速有效引導用戶完成操作, 不需要過多的噱頭, 它的傳遞方式應該恰當, 它的風格和結構應該恰當, 最重要的是內容應該恰當^[13], 設計的內容應當是適合用戶的, 符合它存在的情境, 也許“少就是多”的設計反而能使用戶體驗更加良好。有時不恰當的或過度的設計反而會引起用戶對產品的不滿, 見圖9。頁面總體設計比較完整, 設計風格統一, 標題簡明扼要告知用戶頁面的錯誤信息, 為了增加頁面的趣味性添加了吃豆人的小游戲。但是, 在404頁面中, 最重要的功能就是快速引導用戶離開此頁面, 消除用戶的無措感, 而不是讓用戶浪費更多的時間在當前頁面, 添加游戲的設計行為是否是一種過度的設計也有待商榷。

404頁面是網頁設計中的功能性頁面, 它使用的頻率高、指令性強, 容易影響人們在網頁交互中的用戶體驗。當前的網頁設計越來越人性化, 網頁設計符號的表現形式過于冰冷會影響用戶的良好交互;同時, 在網頁設計中過度設計會造成視覺系統的混亂, 而引起信息的誤讀。因此, 建立良好交互的同時, 增加頁面設計的情感化體驗需要遵循適度設計的法則。從用戶的本能水平、行為水平、反思水平3個方面切入404頁面設計, 形成情感化設計的交互框架, 能夠避免設計感官層面和經驗式反饋的局限, 從而進行有序分類研究和針對性設計, 達到提高404圖形識別度, 快速有效確認信息的目的, 同時增進交互體驗和審美趣味, 提高戶體驗水平, 促進良好交互的形成。文字、色彩與圖形等設計元素的編排直接影響著404錯誤頁面功能的實現, 將情感化設計理論應用于404錯誤頁面的設計不僅滿足功能性的需求, 也減緩錯誤鏈接所導致用戶情感上的負面情緒。404頁面的情感化設計, 能夠最大限度地吸引用戶的目光, 提升網頁的實用性, 使用戶獲得良好的交互體驗。