視覺(jué)設(shè)計(jì)師應(yīng)該修煉的五個(gè)交互設(shè)計(jì)技能

　　2016年，視覺(jué)+交互兼通的設(shè)計(jì)師就業(yè)價(jià)值會(huì)更高，雖然大多數(shù)視覺(jué)設(shè)計(jì)師都沒(méi)有經(jīng)過(guò)正式的交互基礎(chǔ)訓(xùn)練，不過(guò)別急，今天中國(guó)設(shè)計(jì)網(wǎng)的筆者分享了五個(gè)能提高你交互技能的方法，一起來(lái)試試。

　　現(xiàn)在，所有基于Web進(jìn)行設(shè)計(jì)的人都需要對(duì)交互設(shè)計(jì)原則有一個(gè)基本的了解。即使你沒(méi)有在人機(jī)交互、用戶體驗(yàn)設(shè)計(jì)或人性因素等方向的正式學(xué)習(xí)訓(xùn)練，但只要你了解這些學(xué)科的基本原理，依然會(huì)大大提高了你設(shè)計(jì)的成功機(jī)會(huì)。這一點(diǎn)對(duì)視覺(jué)設(shè)計(jì)師尤為明顯。大多數(shù)視覺(jué)設(shè)計(jì)師都在藝術(shù)學(xué)?；蛘咴谂嘤?xùn)機(jī)構(gòu)經(jīng)過(guò)正式或者非正式的訓(xùn)練。

　　雖然這些機(jī)構(gòu)專注于對(duì)溝通進(jìn)行設(shè)計(jì)，但兩類機(jī)構(gòu)通常都無(wú)法提供強(qiáng)大的交互設(shè)計(jì)基礎(chǔ)。對(duì)于你來(lái)說(shuō)，擁有更廣泛的技能集合，不僅使你的設(shè)計(jì)更成功的，而且會(huì)讓你變得更有就業(yè)價(jià)值(即你變成了獨(dú)角獸)。在這里沒(méi)辦法說(shuō)得詳盡，不過(guò)在你開(kāi)始之前，下面有五個(gè)關(guān)鍵的策略，值得你在下一個(gè)項(xiàng)目中去理解和實(shí)現(xiàn)它們。

　　1、主動(dòng)與你的客戶交談

　　在設(shè)計(jì)在線體驗(yàn)的時(shí)候，你要了解的最重要的事情是你的受眾。了解他們是誰(shuí)，他們做什么為生，年紀(jì)多大，如何工作，他們?nèi)绾卫斫饩W(wǎng)絡(luò)，并如何使用它，是在什么樣的設(shè)備上，這些都提供了對(duì)他們的痛點(diǎn)的寶貴觀察，而你需要負(fù)責(zé)解決他們的痛點(diǎn)。

　　對(duì)你的設(shè)計(jì)制定明確的約束也有助于你的設(shè)計(jì)過(guò)程。例如，如果你的受眾在醫(yī)院主要使用移動(dòng)設(shè)備訪問(wèn)網(wǎng)絡(luò)，那么你的設(shè)計(jì)必須能夠響應(yīng)式地兼容這些設(shè)備，以及設(shè)備被使用時(shí)的環(huán)境。此外，你應(yīng)該在構(gòu)建在溝通型設(shè)計(jì)的基礎(chǔ)上了解你的受眾，發(fā)現(xiàn)用戶對(duì)顏色和字體之類元素的敏感性(比如物理上或文化上的)。

　　要了解你的受眾，需要你與目標(biāo)用戶直接對(duì)話。這些對(duì)話可能發(fā)生在不同的論壇里。而最客觀的方法，比如問(wèn)卷調(diào)查是挺好的，但沒(méi)有什么能比面對(duì)面地與你的客戶交談更好。根據(jù)你的工作目標(biāo)，找到目標(biāo)受眾也有可能簡(jiǎn)單到比如，直接去當(dāng)?shù)氐目Х瑞^，花5美元買一把的禮物卡片，然后和咖啡館里的顧客聊天。大多數(shù)人會(huì)很愿意花10到15分鐘的時(shí)間分享他們的意見(jiàn)，來(lái)?yè)Q一張咖啡館的禮物卡片。其他用來(lái)發(fā)現(xiàn)用戶方法還有比如，在Craglists網(wǎng)站上發(fā)布廣告，從你的客戶名單里拉取名字，聯(lián)系貿(mào)易組織(例如對(duì)于像護(hù)士之類的特定用戶類型)，還有花時(shí)間去那些你的用戶也會(huì)花時(shí)間去的地點(diǎn)(例如，音樂(lè)愛(ài)好者會(huì)出現(xiàn)在音樂(lè)會(huì)上)。

　　最初的對(duì)話可能會(huì)是令人尷尬的，但是隨著次數(shù)越來(lái)越多，交談的節(jié)奏會(huì)越來(lái)越接近問(wèn)題。用戶的模式也開(kāi)始出現(xiàn)，從而讓你可以定制每個(gè)訪談的問(wèn)題，使之更為恰當(dāng)。你從這些活動(dòng)里學(xué)到的經(jīng)驗(yàn)，可以用來(lái)幫助你創(chuàng)建用戶角色模型——比如典型用戶對(duì)你的設(shè)計(jì)的表現(xiàn)的集合，可以為你未來(lái)的設(shè)計(jì)決策提供決策的上下文。

　　2、為用戶確定方向

　　現(xiàn)在你已經(jīng)對(duì)你的用戶是誰(shuí)有了理解，當(dāng)他們使用你的設(shè)計(jì)時(shí)為他們確定方向是很重要的。為用戶定向可以為他們提供一個(gè)非靜態(tài)的體驗(yàn)。為了有效地提供這種體驗(yàn)，你的設(shè)計(jì)應(yīng)該告訴用戶三件事：

　　(1)他們現(xiàn)在在哪里

　　在網(wǎng)站的大背景下，任何在線體驗(yàn)的關(guān)鍵都是理解用戶目前在處理什么。如果用戶很明顯地知道他們?cè)谀睦?，他們更有可能明白在?dāng)前的頁(yè)面上你需要他們做。例如，如果用戶知道他們?cè)谝粋€(gè)”產(chǎn)品詳情頁(yè)面“上，他們應(yīng)該會(huì)期待看到購(gòu)買的鏈接，也許還有一些關(guān)于其他產(chǎn)品的選項(xiàng)。

　　(2)他們?nèi)绾问堑竭_(dá)的

　　如果說(shuō)提供給用戶明確的當(dāng)前位置能為你預(yù)期的用戶行為提供環(huán)境，那么你也要向用戶展示他們到達(dá)過(guò)程的路徑，提供了一個(gè)安全網(wǎng)。安全網(wǎng)是指用戶對(duì)自己的行動(dòng)有一個(gè)舒適的認(rèn)知，如果用戶跑到了錯(cuò)誤的地方，他們就會(huì)知道他們可以退到之前的地方再試一次。

　　(3)他們可以到哪里去

　　你已經(jīng)明確了用戶在哪里，以及他們?nèi)绾问堑竭_(dá)的，使得如果他們到了錯(cuò)誤的地方可以回溯并嘗試另一條路徑。但如果他們已經(jīng)準(zhǔn)備好繼續(xù)前進(jìn)，或者他們認(rèn)為回溯的路徑也不會(huì)提供他們想要的內(nèi)容，那么讓用戶知道在這一點(diǎn)有什么選項(xiàng)可用是必要的，不要讓用戶處在一個(gè)死胡同里。

　　永遠(yuǎn)都應(yīng)該有一個(gè)可以繼續(xù)行進(jìn)的選項(xiàng)。有一個(gè)很好的例子是沒(méi)有結(jié)果時(shí)的搜索結(jié)果頁(yè)面。你應(yīng)該讓用戶知道沒(méi)有結(jié)果可以匹配他們的搜索查詢，但同時(shí)應(yīng)該有選項(xiàng)可以幫助他們尋求答案(例如相關(guān)搜索詞)。用戶行進(jìn)的方式可以體現(xiàn)在你網(wǎng)站的導(dǎo)航上，但也可以作為情境支持來(lái)實(shí)現(xiàn)。

　　情境支持是指顯然是可點(diǎn)擊的界面元素，如按鈕和滑塊。

　　(作為情境支持的入門(mén)，我們選取諾曼的《日常生活的設(shè)計(jì)》的例子。雖然有點(diǎn)過(guò)時(shí)，但它為產(chǎn)品設(shè)計(jì)師應(yīng)該如何看待他們的產(chǎn)品奠定了堅(jiān)實(shí)的基礎(chǔ)，)。

　　清晰的網(wǎng)站定向?yàn)橛脩籼峁┦孢m的感受，同時(shí)減少了用戶犯錯(cuò)的機(jī)會(huì)，提高了當(dāng)他們真的犯錯(cuò)時(shí)可以很快恢復(fù)的可能性。

　　3、盡量簡(jiǎn)單

　　視覺(jué)設(shè)計(jì)師有可能是受美學(xué)追求的驅(qū)動(dòng)才把某個(gè)元素添加到布局里，但不一定能夠服務(wù)于交互的目的。雖然說(shuō)美學(xué)元素很可能為體驗(yàn)潤(rùn)色，增加好感，但在設(shè)計(jì)一個(gè)交互體驗(yàn)時(shí)，應(yīng)該考慮選擇更簡(jiǎn)單的設(shè)計(jì)。

　　簡(jiǎn)化則意味著把屏幕上的元素減少到最基本的，能夠促進(jìn)用戶的任務(wù)完成的那部分。以這一部分作為基線來(lái)開(kāi)始，然后再添加少量的裝飾。你要考慮好網(wǎng)站的品牌。品牌不僅審美的反映，更是體驗(yàn)的反映。如果一個(gè)網(wǎng)站做得很漂亮的，但這種漂亮又使得用戶無(wú)法完成事務(wù)，那么這個(gè)網(wǎng)站(或品牌)最終是會(huì)失敗的。

　　美學(xué)元素在任何體驗(yàn)中總有一席之地并且用途強(qiáng)大，但至關(guān)重要的的是你首先要確保體驗(yàn)是可用的。

　　4、設(shè)計(jì)出對(duì)話

　　視覺(jué)設(shè)計(jì)訓(xùn)練主要專注于對(duì)溝通的設(shè)計(jì)，交互設(shè)計(jì)則努力地關(guān)注反饋回路——從本質(zhì)上講也就是用戶與網(wǎng)站之間的對(duì)話。

　　當(dāng)你打磨好網(wǎng)站的體驗(yàn)，便為系統(tǒng)提供了當(dāng)用戶做對(duì)或做錯(cuò)什么時(shí)與用戶溝通的方式，確保你的體驗(yàn)?zāi)苊鞔_顯示出用戶是否成功操作以及用戶要完成事務(wù)必須進(jìn)行的動(dòng)作。

　　你要使用你的視覺(jué)設(shè)計(jì)和溝通技巧為這類反饋式的對(duì)話構(gòu)建視覺(jué)語(yǔ)言，確保無(wú)論用戶在體驗(yàn)的哪一部分，任何來(lái)自網(wǎng)站的信息在設(shè)計(jì)和表示方法上是一致的。不同的信息可能需要不同的對(duì)待方法，用戶會(huì)迅速學(xué)習(xí)整個(gè)系統(tǒng)，然后用戶與該網(wǎng)站的對(duì)話就開(kāi)始出現(xiàn)。從本質(zhì)上講，你是在人性化網(wǎng)站的體驗(yàn)(以及其背后的公司)，主動(dòng)預(yù)測(cè)用戶的需求和提供能減輕用戶受挫的信息和行動(dòng)。

　　5、工作流：理解前提和后繼

　　視覺(jué)設(shè)計(jì)是美麗的，也是靜態(tài)的。交互設(shè)計(jì)則是構(gòu)建多個(gè)頁(yè)面間和多個(gè)狀態(tài)間的一系列工作流。當(dāng)你設(shè)計(jì)每個(gè)單獨(dú)的頁(yè)面時(shí)，要考慮好用戶能在這個(gè)頁(yè)面做什么，以及下一步如何匯入到工作流中。如果你剛剛在頁(yè)面上添加了注冊(cè)表單，就要想想當(dāng)用戶按下“提交”按鈕后會(huì)發(fā)生什么。頁(yè)面會(huì)刷新嗎?會(huì)有一個(gè)確認(rèn)頁(yè)面嗎?如果表單上有錯(cuò)誤呢?如果用戶點(diǎn)擊“返回”按鈕呢?這些體驗(yàn)的工作流中的組件。每個(gè)頁(yè)面或者狀態(tài)都只是用戶的點(diǎn)擊流中的一小部分。你要面臨的挑戰(zhàn)是，每個(gè)用戶可能都有一個(gè)相對(duì)獨(dú)特的點(diǎn)擊流，這取決于他們是如何到達(dá)你的網(wǎng)站的還有他們來(lái)這個(gè)網(wǎng)站的原因。你已經(jīng)使用你對(duì)用戶的理解為用戶導(dǎo)向，你也提供了簡(jiǎn)潔的界面，創(chuàng)建了與用戶間的成功對(duì)話：現(xiàn)在你要確保每次交互都有合乎邏輯的下一步驟。下一步驟應(yīng)該適應(yīng)你已經(jīng)創(chuàng)建的體驗(yàn)和視覺(jué)語(yǔ)言，這樣的體驗(yàn)才會(huì)令人感到完整性和一致性。這些元素都能夠增加品牌的可信度，增加用戶對(duì)你的設(shè)計(jì)的信任。

　　設(shè)計(jì)師Jonathan Ive，作為iPod的設(shè)計(jì)者(同時(shí)還有其他產(chǎn)品)，促進(jìn)了這樣的想法，即所有類型的設(shè)計(jì)師都必須了解他們正在使用的材料。這也適用于交互設(shè)計(jì)。理解組成的Web的“材料”是至關(guān)重要的。粗略地學(xué)習(xí)HMTL、CSS、Javascript和相關(guān)技術(shù)會(huì)增強(qiáng)你對(duì)媒介的理解，并為你提供一個(gè)更現(xiàn)實(shí)看待你的設(shè)計(jì)的角度。你能找到的最好的相關(guān)資源，便是將要實(shí)現(xiàn)你的作品的開(kāi)發(fā)人員。定期地與他們聊你的設(shè)計(jì)，并感受下你的建議在他們使用的技術(shù)下是否是可行的。更好的做法是，自己也開(kāi)始學(xué)習(xí)基礎(chǔ)知識(shí)。你不需要成為一個(gè)明星程序員，但如果你足夠了解你的作品實(shí)現(xiàn)用的媒介是如何工作的，可以極大地幫助你塑造你的交互設(shè)計(jì)。