成都5項(xiàng)交互設(shè)計(jì)中的視覺(jué)指導(dǎo)原則分析

美感是外在，交互是內(nèi)在，內(nèi)外兼修方成氣候。今天十萬(wàn)個(gè)為什麼總結(jié)了交互設(shè)計(jì)中的5個(gè)視覺(jué)原則，幫同學(xué)們掌握視覺(jué)與交互的協(xié)調(diào)方法。
我不想貶低文字的重要性，但也不想忽視視覺(jué)。兩者是同等重要的交互設(shè)計(jì)元素。文字就是交互，但那些視覺(jué)元素(比如圖標(biāo)、菜單、圖像等)才是用戶(hù)實(shí)際上操作的東西。雖然有些可用性專(zhuān)家會(huì)提及Craigslist甚至Amazon，作為丑陋但可用(而且受歡迎)的網(wǎng)站案例。但毫無(wú)疑問(wèn)，美感總會(huì)有所幫助。
情感是用戶(hù)體驗(yàn)的關(guān)鍵：視覺(jué)設(shè)計(jì)優(yōu)秀的網(wǎng)站能使用戶(hù)放松，提升可信度和易用性。考慮到多數(shù)用戶(hù)注意力短暫，認(rèn)知往往成為事實(shí)：如果視覺(jué)做得很糟糕，用戶(hù)不會(huì)費(fèi)神去深入研究你的交互設(shè)計(jì)。
讓我們來(lái)細(xì)說(shuō)視覺(jué)的重要性，因?yàn)樗P(guān)系到交互，保證了清晰的方向指引和一致性。
一、尊重視覺(jué)的主導(dǎo)地位
我們從案例展示開(kāi)始?？纯聪旅娴奈淖郑?/p>

很顯然，我們都知道“黃色”一詞所指的顏色。但當(dāng)多數(shù)人看到它時(shí)，他們理解到的可能只有紅色。文字的外觀(guān)取代了它的真正含義。

信息圖專(zhuān)家David McCandless表明，我們大部分的腦力資源都花在了視覺(jué)上。
作為人類(lèi)，視覺(jué)是我們的主要感觀(guān)。但是其他動(dòng)物更多依賴(lài)聽(tīng)覺(jué)與嗅覺(jué)，我們是視覺(jué)主導(dǎo)的生物。正如數(shù)據(jù)記者兼信息圖專(zhuān)家David McCandless在一場(chǎng)引人入勝的TED演講中提到的，我們會(huì)調(diào)動(dòng)全部感觀(guān)，但多數(shù)的腦力都花在了視覺(jué)上——雖然我們很難察覺(jué)。他用計(jì)算機(jī)進(jìn)行了類(lèi)比……
“視覺(jué)是感觀(guān)中最迅速的。它和計(jì)算機(jī)網(wǎng)絡(luò)的速度相同。之后是觸覺(jué)，相當(dāng)于一個(gè)U盤(pán)的速度。然后才是聽(tīng)覺(jué)與嗅覺(jué)，約等于硬盤(pán)的速度。
“后面才是可憐的味覺(jué)，運(yùn)算速度幾乎近似便攜式計(jì)算器。角落里那個(gè)小方塊，百分之0.7，那就是我們實(shí)際了解的量。所以你的很多感觀(guān)——絕大多數(shù)感觀(guān)都是視覺(jué)上的，它蜂擁而來(lái)——你卻渾然不覺(jué)?！?/p>

視覺(jué)影響行為，也影響體驗(yàn)，Stephen P. Anderson說(shuō)。
但是對(duì)于交互設(shè)計(jì)這意味著什么?它意味著你對(duì)產(chǎn)品做出的每一項(xiàng)視覺(jué)上的決策，都對(duì)交互有極大的影響，即使是在不知不覺(jué)間。
產(chǎn)品設(shè)計(jì)顧問(wèn)Stephen P. Anderson指出，視覺(jué)影響的不只是體驗(yàn)，也會(huì)影響用戶(hù)的行為。
這就是說(shuō)好的視覺(jué)設(shè)計(jì)可以提升銷(xiāo)量，提高注冊(cè)量和轉(zhuǎn)化率，激發(fā)某些特定的用戶(hù)行為。看看下面這兩個(gè)表單：
表單A

表單B

記住，交互設(shè)計(jì)的目標(biāo)之一就是讓用戶(hù)盡可能少地思考。你認(rèn)為哪個(gè)更有利于銷(xiāo)售?哪個(gè)視覺(jué)上看更舒服?
第一例中，那密集恐懼癥般的間距和過(guò)量的文字，讓用戶(hù)望而卻步。第二例則色彩豐富、優(yōu)美，看起來(lái)更簡(jiǎn)潔(盡管用戶(hù)都得輸入這些信息)。
由于交互設(shè)計(jì)就是要?jiǎng)?chuàng)造人們想用的東西，有吸引力的事物更激發(fā)人的渴求，因此更能發(fā)揮作用。

圖片和導(dǎo)航在這個(gè)在線(xiàn)香料商店中相互協(xié)調(diào)。
不過(guò)除了吸引人的交互，優(yōu)美的設(shè)計(jì)也提供了一層額外的理解。看看上面這個(gè)Old Town Spice Shop案例，你會(huì)發(fā)現(xiàn)這個(gè)網(wǎng)站的櫥柜式布局立刻暗示了這家公司的意圖和香料產(chǎn)品。
盡管你可能會(huì)質(zhì)疑，用戶(hù)先看到櫥柜還是“Spices”和“Extracts”這些文字。毫無(wú)疑問(wèn)的是，兩者相互協(xié)調(diào)。
二、提供清晰的方向與指引
用戶(hù)不會(huì)漫無(wú)目的瀏覽網(wǎng)站。人們通常都有個(gè)大體概念他們要去哪，但還需要一些指引和線(xiàn)索。他們會(huì)在腦海中創(chuàng)建地圖，既然我們剛剛提到人是視覺(jué)生物，那么就需要一些視覺(jué)路標(biāo)來(lái)指路。
某種程度而言，你的導(dǎo)航要像GPS那樣。用戶(hù)需要了解他們當(dāng)前位置，哪些路線(xiàn)是可行的，下一步該怎么做。
面包屑導(dǎo)航是滿(mǎn)足上述3項(xiàng)需求的最直接的方式。就像下面的Newegg這種常見(jiàn)的UI模式，這種方式給用戶(hù)留下了清晰的視覺(jué)蹤跡，來(lái)追蹤他們的訪(fǎng)問(wèn)過(guò)程。

但面包屑導(dǎo)航應(yīng)該作為備選方式，因?yàn)閷?duì)于頁(yè)面間的點(diǎn)擊跳轉(zhuǎn)，它們?cè)谝曈X(jué)上并不直觀(guān)。它們多用于層級(jí)復(fù)雜的網(wǎng)站，比如電商網(wǎng)站，簡(jiǎn)單的網(wǎng)站不需要它。如果對(duì)此持疑，回顧你的網(wǎng)站地圖，看看加入面包屑導(dǎo)航能不能提升易用性，或者只是添亂。
面包屑導(dǎo)航、鏈接——還有菜單、搜索框和可點(diǎn)擊的圖標(biāo)——都是基于視覺(jué)的手段，讓你建立方向和指引。談到主導(dǎo)航時(shí)，你需要讓它給人留下強(qiáng)烈的視覺(jué)印象。
三、確保視覺(jué)統(tǒng)一
一致性在交互設(shè)計(jì)的所有方面都非常重要，不只是視覺(jué)。無(wú)論如何，視覺(jué)上的不一致是非常醒目的(看看世上最糟糕的網(wǎng)站)，見(jiàn)證一下設(shè)計(jì)的地獄。
前方高能預(yù)警!!
Theworldsworstwebsiteever

有些事是不該做的。
一致性展現(xiàn)了網(wǎng)站在設(shè)計(jì)和排列方面的邏輯，創(chuàng)造更加令人愉悅的體驗(yàn)(我們都知道，開(kāi)心的用戶(hù)是會(huì)回頭的)。
我們之前提過(guò)，人們更喜歡統(tǒng)一是因?yàn)樗黾恿丝深A(yù)知性(降低學(xué)習(xí)成本)。如果你的界面容易學(xué)習(xí)，它也會(huì)更容易使用。人們不喜歡令人不快的驚喜，正如驚訝最小化原則中所說(shuō)：
不一致引發(fā)的問(wèn)題，是它增加了“認(rèn)知負(fù)荷”。Nielson Norman Group的用戶(hù)體驗(yàn)專(zhuān)家，Kathryn Whitenton，在熱議博文中解釋過(guò)，認(rèn)知負(fù)荷是用戶(hù)在使用產(chǎn)品時(shí)需要思考的量。
一致性展現(xiàn)了網(wǎng)站在設(shè)計(jì)和排列方面的邏輯。
每項(xiàng)不一致都迫使用戶(hù)停下腳步，來(lái)處理此處不同所表達(dá)的含義，它為何不同，又是如何影響他們的行為。因此，不一致的地方越少，交互越順暢，體驗(yàn)越好。
例如，單選按鈕在界面某部分只允許單選，那么它在其他部分就不應(yīng)該多選。文案也該如此，既然在某個(gè)部分用了“保存”作為名稱(chēng)，在其他部分里就不該稱(chēng)作“儲(chǔ)存”。如果某張圖片觸發(fā)了一個(gè)彈窗，那它在別處就不該打開(kāi)新窗口。時(shí)刻要問(wèn)自己，“我希望用戶(hù)如何操作?”
四、將UI設(shè)計(jì)模式作為基準(zhǔn)
UI設(shè)計(jì)模式，可以理解為特定情況的好設(shè)計(jì)實(shí)踐。既然用戶(hù)已經(jīng)熟悉各種設(shè)計(jì)模式，使用它們降低了界面的學(xué)習(xí)曲線(xiàn)。常見(jiàn)的UI模式包括旋轉(zhuǎn)木馬、相關(guān)鏈接、幻燈片……還有更多(可以從這個(gè)網(wǎng)站看到，它致力于給它們分門(mén)別類(lèi))。

Netflix用了相關(guān)內(nèi)容模式，來(lái)幫你找到其他可能感興趣的節(jié)目。
比如，Netflix使用了“相關(guān)內(nèi)容”UI模式，幫助用戶(hù)找到其他可能感興趣的電影或節(jié)目。由于內(nèi)容是智能生成的，用戶(hù)交互感覺(jué)更像是有人在推薦有用的內(nèi)容。這并不是一項(xiàng)開(kāi)創(chuàng)性的設(shè)計(jì)，但它是個(gè)快速有效的解決方案，讓你的界面鮮活起來(lái)。
當(dāng)然，UI模式并非即插即用的模塊，你還是得基于網(wǎng)站的外觀(guān)與感覺(jué)為它們特殊定制。
要為產(chǎn)品尋找正確的模式，你可以查看各種模式庫(kù)，通過(guò)它們的分類(lèi)來(lái)瀏覽各種模式，比如“導(dǎo)航”或“輸入框”。
五、通過(guò)風(fēng)格指南創(chuàng)建一致性
雖然UI模式有助于提升熟悉感，風(fēng)格指南才能確保全站統(tǒng)一。
風(fēng)格指南是一部手冊(cè)，列出了產(chǎn)品的特殊偏好，這些部分很難記憶——比如全站內(nèi)容的尺寸和字體、主導(dǎo)航的主色與輔助色的顏色梯度、按鈕點(diǎn)擊狀態(tài)的表現(xiàn)，等等。

來(lái)這里www.yelp.co.uk/styleguide看看Yelp的風(fēng)格指南。
在UXPin，更新網(wǎng)站時(shí)我們會(huì)創(chuàng)建風(fēng)格指南。這能幫助我們估計(jì)出額外的工作量，因?yàn)槲覀兛梢园褞в屑夹g(shù)細(xì)節(jié)的截圖添加到公司內(nèi)部wiki中。正如我們?cè)趶娘L(fēng)格指南到效果圖中描述的，這種“拼拼湊湊”的方法對(duì)于簡(jiǎn)易的風(fēng)格指南非常有效，可以分享給整個(gè)公司。
我們?cè)诰W(wǎng)頁(yè)UI設(shè)計(jì)好實(shí)踐中充分討論了風(fēng)格指南，包括如何制定、需要包含什么。要了解關(guān)于風(fēng)格指南的更多案例，請(qǐng)看以下幾項(xiàng)好資源：
要深入學(xué)習(xí)交互設(shè)計(jì)中的一致性，請(qǐng)看這篇全領(lǐng)域創(chuàng)建用戶(hù)體驗(yàn)一致性，還有這篇系統(tǒng)、平臺(tái)和現(xiàn)實(shí)世界的統(tǒng)一。
五、精華總結(jié)
人們上網(wǎng)時(shí)，他們說(shuō)自己在“看”網(wǎng)站，而不是與它“互動(dòng)”，盡管后者更準(zhǔn)確。我們嚴(yán)重依賴(lài)視覺(jué)，視覺(jué)引導(dǎo)我們建立觀(guān)念、解決問(wèn)題，我們所相信的會(huì)引導(dǎo)我們的行為。由于交互設(shè)計(jì)如此貼近用戶(hù)體驗(yàn)，通過(guò)視覺(jué)打造好的用戶(hù)體驗(yàn)，雖然間接，但確信無(wú)疑促成了更好的交互。
要深入學(xué)習(xí)，可以下載這本電子書(shū)Interaction Design Best Practices: Words, Visuals, Space。視覺(jué)案例研究包含了30多家公司，其中有Google、AirBnB、Facebook、Yahoo。還有一些專(zhuān)家的建議，比如Stephen P. Anderson、Jared Spool等等。

當(dāng)前文章：成都5項(xiàng)交互設(shè)計(jì)中的視覺(jué)指導(dǎo)原則分析
網(wǎng)頁(yè)URL：http://www.muchs.cn/news42/243042.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、企業(yè)網(wǎng)站制作、品牌網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、軟件開(kāi)發(fā)、Google

廣告

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