網(wǎng)頁(yè)設(shè)計(jì)中手繪風(fēng)格的運(yùn)用

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

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

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

獨(dú)特的外觀和感受

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

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

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

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

人性化與親近感

手繪風(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ù)刻了黑板的觀感，孩子們甚至可以直接用手在“黑板”上寫(xiě)出數(shù)字。這樣的設(shè)定讓算術(shù)練習(xí)不那么冰冷和枯燥，具有了一絲人性化的色彩，更加易用，更有吸引力。

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

信息的傳達(dá)方式?jīng)Q定了用戶是否會(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è)。

團(tuán)隊(duì)展示

用戶總是會(huì)很想知道網(wǎng)站、產(chǎn)品或者服務(wù)背后的人，因此一個(gè)有愛(ài)的團(tuán)隊(duì)展示頁(yè)面上顯得尤為重要。僅僅提供聯(lián)系方式是遠(yuǎn)遠(yuǎn)不夠的，還需要向用戶展示他們要聯(lián)系的這群人有著怎樣的個(gè)性和氣質(zhì)，要讓團(tuán)隊(duì)顯得平易近人而又值得信賴。要達(dá)到這樣的目的，使用手繪圖片是一種很好的做法。例如——

The Knock Knock Factory 的團(tuán)隊(duì)成員展示方式：

Polecat 的整體展示方式：

以及 Grove 的真實(shí)照片配手寫(xiě)字體的展示方式：

故事講述

手繪圖最早和最常用的功能就是用來(lái)講述一個(gè)故事了～ 不管是為了解釋產(chǎn)品的功能，還是為了加深用戶對(duì)產(chǎn)品的印象，使用手繪圖進(jìn)行故事講述都是有效的方式。

比如，著名原型圖工具 Axure 首頁(yè)掛著這樣一幅用戶體驗(yàn)人員和產(chǎn)品經(jīng)理工作自我吐槽的簡(jiǎn)筆畫(huà)。很好地引起用戶的共鳴，增強(qiáng)用戶對(duì)產(chǎn)品的好感。

Tourist Eye 用三幅連環(huán)畫(huà)解釋自己的產(chǎn)品功能。

引起用戶注意

如果要吸引用戶點(diǎn)擊某個(gè)地方，那么手繪的圈點(diǎn)和箭頭會(huì)是很好的選擇。比如說(shuō)這樣：

有的時(shí)候，使用多個(gè)箭頭也是可以的：

當(dāng)然，要注意適可而止，濫用手繪箭頭的話，效果適得其反——

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

當(dāng)前名稱：網(wǎng)頁(yè)設(shè)計(jì)中手繪風(fēng)格的運(yùn)用
分享鏈接：http://www.muchs.cn/news18/325918.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、企業(yè)網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)