文章描述：本文中，我們將討論怎樣在網(wǎng)頁(yè)中應(yīng)用手繪風(fēng)格，以改善網(wǎng)站的用戶體驗(yàn)。

本文中，我們將討論怎樣在網(wǎng)頁(yè)中應(yīng)用手繪風(fēng)格，以改善網(wǎng)站的用戶體驗(yàn)。

識(shí)別度與真實(shí)感

手繪風(fēng)格特別很是有利于展示人性色彩，形成的識(shí)別度，為用戶帶來(lái)真實(shí)感。當(dāng)你收到好友寄來(lái)的明信片時(shí)，你總是希望看到卡片是手寫的，帶著好友的筆跡，而不是用電腦打印出來(lái)的。一張手寫的便箋也總是比電腦打出來(lái)的紙片更加隨意和親近。

在網(wǎng)頁(yè)設(shè)計(jì)中，道理也是一樣的：手繪和手寫風(fēng)格的應(yīng)用可以讓產(chǎn)品顯得更加、更加真實(shí)、更加值得相信。下面是手繪風(fēng)格帶來(lái)識(shí)別度和真實(shí)感的三個(gè)例證：

的外觀和感受

首先，手繪風(fēng)格帶來(lái)的外觀和感受。的原型圖和線框圖工具 Balsamiq 是典型代表。Balsamiq 的功能壯大而復(fù)雜，其外觀和感受卻是特別很是簡(jiǎn)單明了，手繪風(fēng)格的應(yīng)用使用戶回憶起基本的紙筆勾畫，讓用戶專注于基本的功能呈現(xiàn)，而不是糾結(jié)于產(chǎn)品外觀上的細(xì)節(jié)。同時(shí)，這樣的外觀也形成了 Balsamiq 自己的風(fēng)格。

識(shí)別度與個(gè)性化

手繪風(fēng)格帶來(lái)更高的識(shí)別度，讓用戶記住你的產(chǎn)品。例如 Windows 上的代碼編輯器 Notepad++ 的新 logo：

變色龍主體圖案不僅恰到益處地展示了產(chǎn)品自己的功能（高亮代碼的積累和轉(zhuǎn)變），同時(shí)圖標(biāo)自己也顯得相當(dāng)可愛，抓住了用戶的注重力，幫助用戶把 Notepad++ 和競(jìng)爭(zhēng)對(duì)手的編輯器產(chǎn)品區(qū)分開。

人性化與親近感

手繪風(fēng)格帶來(lái)人性化與親近感。告訴用戶產(chǎn)品呈現(xiàn)的內(nèi)容背后有著活生生的人，并且這些人已經(jīng)細(xì)心地考究了產(chǎn)品的細(xì)節(jié)，讓它看上去更加真實(shí)，更值得相信。

iPad 上的兒童數(shù)學(xué)演習(xí)應(yīng)用 MathBoard 復(fù)刻了黑板的觀感，孩子們甚至可以直接用手在“黑板”上寫出數(shù)字。這樣的設(shè)定讓算術(shù)演習(xí)不那么嚴(yán)寒和枯燥，具有了一絲人性化的色彩，更加易用，更有吸引力。

信息傳達(dá)與內(nèi)容構(gòu)建

信息的傳達(dá)體例決定了用戶是否會(huì)看到和理解這些信息。手繪風(fēng)格可以更有用、更清晰地傳達(dá)信息。下面是三個(gè)例證：

詮釋產(chǎn)品特征

描述一個(gè)產(chǎn)品特征可能需要好幾行字，假如用手繪的話，一張圖就夠了。的應(yīng)用測(cè)試服務(wù) TestFlight 在其網(wǎng)站上介紹特征時(shí)使用了四個(gè)便簽形式的草圖來(lái)配合文字描述。在傳遞產(chǎn)品特征信息的同時(shí)也使網(wǎng)站變得圖文并茂，更加易讀。

展示工作流程

與其用大段文字詮釋產(chǎn)品操作中步做什么第二步做什么，不如給每一步配上一張清晰的手繪圖，增添可讀性，大為削減文字的用量。

指導(dǎo)用戶

使用手繪圖標(biāo)可以有用地指導(dǎo)用戶進(jìn)入產(chǎn)品和網(wǎng)站的各個(gè)部分。例如之前我們介紹過(guò)的 Stamped，其網(wǎng)站上用卡通風(fēng)格圖片來(lái)指導(dǎo)用戶進(jìn)入各個(gè)種類的網(wǎng)頁(yè)。