前言：一直有在梳理自己的知識結(jié)構(gòu)，也靠這些所謂經(jīng)驗(yàn)做了幾年行業(yè)培訓(xùn)，今年是從業(yè)的第十一年，我覺得差不多是時(shí)候把這些最初來自同行、互聯(lián)網(wǎng)和書籍的知識再還給行業(yè)，我會把所有所得分章節(jié)逐漸整理發(fā)出，希望能對行業(yè)盡一份綿薄之力，同時(shí)也作為一種儀式，好讓自己重新出發(fā)。
[ Danis說體驗(yàn)設(shè)計(jì) 5 ] UCD，概念設(shè)計(jì)
上回說到功能和數(shù)據(jù)都確定下來了，接下來我們就要把功能數(shù)據(jù)給設(shè)計(jì)出來，也就是決定它們長啥樣，怎么操作的。如果說前面的分析研究、需求定義、功能數(shù)據(jù)確定是“做正確的事”，現(xiàn)在開始我們就要“正確地做事”，方向抓準(zhǔn)了，我們就出發(fā)吧。
這里分成概念設(shè)計(jì)和細(xì)節(jié)設(shè)計(jì)兩個(gè)環(huán)節(jié)，概念設(shè)計(jì)是框架的設(shè)計(jì)，比如我們建房子，概念設(shè)計(jì)就是決定房子的架構(gòu)，哪里是廚房，哪里是客廳，門開在哪里可以幾個(gè)房間互通，房子的裝修風(fēng)格是怎樣的。而細(xì)節(jié)設(shè)計(jì)就是細(xì)節(jié)的設(shè)計(jì)（呵呵…），也就是門是自動門還是手動門，門把手是旋轉(zhuǎn)的還是固定的，塑料的還是金屬的，墻紙是幾何圖形的還是花紋的。而設(shè)計(jì)本身又分成交互設(shè)計(jì)和視覺設(shè)計(jì)兩類，交互是行為，視覺是形式，所以也就有了交互概念設(shè)計(jì)、交互細(xì)節(jié)設(shè)計(jì)、視覺概念設(shè)計(jì)、視覺細(xì)節(jié)設(shè)計(jì)。接下來我們先來看交互概念設(shè)計(jì)。
1 什么是交互設(shè)計(jì)？
1.1 就是行為的設(shè)計(jì)
什么是行為？
含羞草，碰它的葉子，它會收縮。狗狗，扔條骨頭，它會叼回來。手機(jī)，點(diǎn)擊屏幕，有東西彈出來。這就是我們跟植物、動物、人工制品交互的過程，我們及對方的所作所為就是行為。行為分3步，1我看到你，2打你一巴掌，3你喊哎呀，也就是獲取線索、操作、反饋。
所以交互設(shè)計(jì)，就是設(shè)計(jì)線索、設(shè)計(jì)操作、設(shè)計(jì)反饋。
舉個(gè)例子，我們發(fā)短信（新建短信那種），入口在哪里，在哪里輸入短信內(nèi)容，輸入時(shí)怎么切換輸入法，除了文本，還能添加其他內(nèi)容比如圖片嗎？怎么添加，添加時(shí)有何限制，添加后怎么增刪改，短信內(nèi)容確定了，要填收件人，怎么填？直接輸入號碼還是輸入名字，有聯(lián)想嗎？或者調(diào)用聯(lián)系人名單，怎么調(diào)用，能多選嗎？怎么增刪改。收件人確定了，怎么發(fā)送？語音口令還是搖一搖發(fā)送，還是按按鈕，按鈕在哪里長啥樣？發(fā)送出去后，怎么告知發(fā)送成功，成功后去哪里？怎么告知失敗及善后？這些問題都需要有人來決定答案，這就是交互設(shè)計(jì)。
1.2 交互的趨勢
首先，個(gè)人覺得從輸入渠道來看，更多元了，而且，多渠道融合交互。
以前主要靠中間設(shè)備，鼠標(biāo)鍵盤遙控器拉桿等，現(xiàn)在多了語音、多了手勢、多了抖動、多了肢體（Kinect）、多了眼球（眼動儀）、多了亮度，等等等等。在同一個(gè)產(chǎn)品里，這些輸入方式又混搭在一起，形成統(tǒng)一的體驗(yàn)，最簡單的例子是nds上的經(jīng)典游戲任天狗，你能呼喚狗狗又能觸碰它。復(fù)雜的？AR和VR！
其次，跨終端。終端之間或?qū)υ捇蜚暯踊蚧パa(bǔ)。
比如在電腦逛街下單，在手機(jī)支付追蹤物流。比如游戲Lifeline在手機(jī)和手表同時(shí)進(jìn)行。
比如房間里用遙控器在戶外用手機(jī)控制空調(diào)。
比如pad和機(jī)器人對接。
再次，匹配更多線下場景。
比如基于交易場景、基于地理位置的各種應(yīng)用，已經(jīng)相當(dāng)普及但還有很多場景可發(fā)掘。更復(fù)雜也更有遠(yuǎn)大前景的運(yùn)用在于服務(wù)流程里，比如醫(yī)院的就醫(yī)流程，預(yù)約、等待、支付、查看報(bào)告等接觸點(diǎn)都是交互，都是機(jī)會。比如銀行業(yè)務(wù)辦理、書店購書、看演唱會前后等等等等。
2 交互概念設(shè)計(jì)
回到主流程啦喂，交互概念設(shè)計(jì)做啥呢？三件事情。
2.1 信息架構(gòu)
大概說一下，以后單獨(dú)開個(gè)章節(jié)細(xì)說，因?yàn)檎f來實(shí)在是話長啊。我們前面已經(jīng)得到了功能和數(shù)據(jù)對吧，在這一步就是把這些功能數(shù)據(jù)裝到不同容器里，而多個(gè)容器的構(gòu)成整體就是產(chǎn)品啦。
容器在表現(xiàn)層看來，就是界面。容器的規(guī)劃、容器之間的邏輯關(guān)系（導(dǎo)航關(guān)系、上下級關(guān)系）就是信息架構(gòu)。信息架構(gòu)設(shè)計(jì)的產(chǎn)出就是信息樹（樹葉即容器），信息樹的畫法怎么樣都可以。
看下圖，左邊的容器（列表頁）放的是各種信息標(biāo)題和圖片（數(shù)據(jù)），同時(shí)它們又是詳情頁的入口（功能），右邊的容器（詳情頁）放的是詳細(xì)內(nèi)容和更多推薦及評論相關(guān)內(nèi)容。是先有信息架構(gòu)再有功能數(shù)據(jù)還是先有功能數(shù)據(jù)再有信息架構(gòu)？答：先有功能數(shù)據(jù)，用戶決定需求，需求決定功能，得先確定這些東東是有價(jià)值的，才能規(guī)劃它們嘛。當(dāng)然隨著產(chǎn)品開始運(yùn)營，數(shù)據(jù)會在原有架構(gòu)上持續(xù)豐富，功能也可能做出調(diào)整，甚至隨著產(chǎn)品發(fā)展，架構(gòu)也可能調(diào)整，這是后話了。
呃…看不懂？沒所謂，在下能力有限沒辦法長話短說，以后再慢慢說。
有個(gè)信息架構(gòu)設(shè)計(jì)的常用方法，叫卡片分類，洋名Card Sorting，過程如同下圖。
研究人員將不同的陳述寫在不同的卡片上，比如一張卡片代表一個(gè)功能，卡片上有功能名字，功能描述，確保用戶理解這些功能，然后讓用戶分別獨(dú)立地將這些卡片分堆，提問他們，然后將所有結(jié)果加以統(tǒng)計(jì)分析，哪個(gè)功能數(shù)據(jù)被最多地裝到一堆里面，就可能是我們產(chǎn)品的最終內(nèi)容分類。其實(shí)就是讓用戶幫我們規(guī)劃容器，裝內(nèi)容進(jìn)容器，甚至幫容器起個(gè)名字（分類名、頻道名、菜單名等）。因?yàn)槭怯脩羝鸬娜萜髅f明這個(gè)容器入口也許最容易被理解。因?yàn)槭怯脩粢?guī)劃的分類，說明產(chǎn)品的架構(gòu)也許最容易被接受。因?yàn)槭怯脩粞b的內(nèi)容，說明內(nèi)容也許最容易被找到。但，信息架構(gòu)是件麻煩事，它蘊(yùn)含了我們的業(yè)務(wù)側(cè)重點(diǎn)，代表了我們對用戶的某種引導(dǎo)，個(gè)人覺得卡片分類只能是一種決策依據(jù)，不能全部依賴，卡片分類用于局部的信息架構(gòu)比如工具欄分類、商品內(nèi)容分類更理想。
2.2 界面框架和關(guān)鍵任務(wù)流
如果說信息架構(gòu)是把內(nèi)容裝到容器（界面）里面，界面框架就是每個(gè)界面上的內(nèi)容排排坐，決定界面的內(nèi)容布局。
因?yàn)槭歉拍钤O(shè)計(jì)，所以不需要考究細(xì)節(jié)，為了呈現(xiàn)效果給相關(guān)方，你可以畫出細(xì)節(jié)，但不需要琢磨，能夠說明這個(gè)界面上有什么內(nèi)容、大致怎么分布的就行。這時(shí)我們會挑出關(guān)鍵界面來進(jìn)行界面框架設(shè)計(jì)，不必設(shè)計(jì)所有界面。
而關(guān)鍵任務(wù)流就是把這些關(guān)鍵界面串聯(lián)起來，讓其走通。關(guān)鍵任務(wù)流是能夠代表產(chǎn)品核心的任務(wù)流，比如購物應(yīng)用的瀏覽商品、下單過程。這時(shí)可以單獨(dú)輸出流程圖，也可以直接把框架設(shè)計(jì)的關(guān)鍵界面加上箭頭聯(lián)通起來，能說明事情就成。
信息架構(gòu)、界面框架、關(guān)鍵任務(wù)流的完成，就意味著交互概念設(shè)計(jì)大致完成啦，在此過程中，你也要思考你的設(shè)計(jì)理念是什么，或者說成設(shè)計(jì)準(zhǔn)則，在你面臨設(shè)計(jì)方案選擇時(shí)，它是統(tǒng)一的標(biāo)尺幫你決定，也讓整個(gè)產(chǎn)品體驗(yàn)更一致，更能體現(xiàn)產(chǎn)品價(jià)值觀。有趣的是，理念也是在設(shè)計(jì)過程中被設(shè)計(jì)出來的，是隨著設(shè)計(jì)進(jìn)程推進(jìn)，經(jīng)驗(yàn)沉淀、碰撞出來的。下面我們來看看視覺概念設(shè)計(jì)。
3 什么是視覺設(shè)計(jì)
概念我就不說了，其實(shí)我也不知道。重要性我就不說了，因?yàn)榈谝徽抡f過。想說的是：視覺設(shè)計(jì)至少做了這四件事情：
傳達(dá)“品牌”。
視覺設(shè)計(jì)形成一種氛圍，與公司品牌建立聯(lián)系。既是一種宣傳，也加深了用戶對品牌的認(rèn)知度。比如蘭芝的產(chǎn)品、界面和包裝都是一致的藍(lán)。
傳達(dá)“美感”。
漂亮的東西總是比丑陋的東西容易被人接受。這里指的“美感”應(yīng)該是“恰當(dāng)?shù)仄?rdquo;，每個(gè)人的審美不一樣，甲之熊掌乙之砒霜，所以所謂的美感因人而異，因目標(biāo)用戶打造。小孩認(rèn)為的美跟大人認(rèn)為的美也許是不一樣的。男人認(rèn)為的美跟女人認(rèn)為的美也許是不一樣的。文藝青年的美跟土老板認(rèn)為的美也許是不一樣的。甚至同一個(gè)人身上，當(dāng)他扮演不同的角色的時(shí)候，也應(yīng)該給他恰當(dāng)?shù)拿馈?/p>
傳達(dá)“信息”。
它將產(chǎn)品上的信息/數(shù)據(jù)視覺化，以容易識別、容易理解的方式表達(dá)出來。
比如對于信息優(yōu)先級的識別，通過視覺對比讓用戶知道我們想給他優(yōu)先看什么。
比如對于信息關(guān)聯(lián)度的識別，哪些內(nèi)容跟哪些內(nèi)容是相關(guān)的，哪些是包含與被包含的。
比如通過樹狀圖、熱點(diǎn)圖等圖形表達(dá)數(shù)據(jù)的統(tǒng)計(jì)，比純粹羅列數(shù)據(jù)更好理解。
傳達(dá)“行為”。
交互的理念通過視覺傳達(dá)，視覺暗示將行為、狀態(tài)傳達(dá)給用戶。操作的線索，操作的過程，操作的結(jié)果都需要視覺來交待。比如憤怒的小鳥，在拉動彈弓，拉到什么程度，彈出小鳥，砸中積木，整個(gè)過程都是豐富的視覺效果在負(fù)責(zé)交待。
最后舉個(gè)例子，在一顆按鈕身上可以也許可以體現(xiàn)出來這四件事情：
這顆麥當(dāng)勞的按鈕，紅色的主色，中間有些許黃色的光暈，透露“品牌”。質(zhì)感、發(fā)光的處理代表“美感”。鼠標(biāo)懸停、按下的時(shí)候，有相應(yīng)的狀態(tài)反饋，傳遞“交互”。按鈕上的字說明“信息”。
4 視覺概念設(shè)計(jì)
這時(shí)我們要定義視覺語言，也就是決定風(fēng)格是怎樣的，是活潑的還是平靜的？主色是藍(lán)的還是綠的？是立體的還是扁平的？而設(shè)計(jì)對象和輸出物就是關(guān)鍵的界面的高保真，如果某些細(xì)節(jié)是亮點(diǎn)，可以輸出能說明風(fēng)格的局部細(xì)節(jié)，如果動效是亮點(diǎn)，可以輸出動效，總之，很靈活，只要最終是能定下來風(fēng)格。
4.1 情緒板
在做概念設(shè)計(jì)的時(shí)候，常用到一個(gè)方法，叫情緒板，洋名moodboard，就是下圖的樣子，一堆素材圖片的組合：
用來干嘛呢？用來更準(zhǔn)確和直觀地了解用戶喜好，以提取設(shè)計(jì)元素，作為設(shè)計(jì)輸入。
4.2 怎么做情緒板？
首先我們要定義體驗(yàn)關(guān)鍵詞，這些關(guān)鍵詞根據(jù)前期的分析研究，大家討論得出。關(guān)鍵詞是能概括產(chǎn)品個(gè)性、指導(dǎo)風(fēng)格的，比如我們做一個(gè)幼兒早教類產(chǎn)品，關(guān)鍵詞就可能是可愛、童真、易學(xué)、溫馨等等。個(gè)人覺得，大概2-5個(gè)關(guān)鍵詞足矣。
關(guān)鍵詞決定后，我們就要根據(jù)關(guān)鍵詞來尋找相關(guān)素材了。比如對于關(guān)鍵詞“萌”，我們選這張喬巴：
可以是設(shè)計(jì)師自己選擇，也可以是找典型用戶來選擇，前者節(jié)約成本后者更能反應(yīng)用戶心智。選擇的素材可以是各種影像載體，數(shù)字圖片、印刷媒體、視頻片段等，最方便的是數(shù)字圖片。素材的來源不限，從執(zhí)行的角度來看，一般我們會圈定一個(gè)素材庫，填入圖片，相當(dāng)于項(xiàng)目組先海選一輪，然后讓大家從中再選。
素材選定后（可能經(jīng)過多輪篩選），拼在一起就是情緒板了，用戶對于產(chǎn)品的風(fēng)格認(rèn)知就通過情緒板表達(dá)出來。接下來我們要從情緒板里頭抽取出視覺元素。看回上面那張喬巴，我們能抽取出什么呢？顏色粉藍(lán)粉紅，細(xì)小的體積，圓滾滾的形狀。那我們之后的界面就可能是粉藍(lán)粉紅主色，各種圓角和小玩意。
下面看一個(gè)完整例子：
4.3 注意什么？
首先，在決定體驗(yàn)關(guān)鍵詞的時(shí)候，關(guān)鍵詞不要南轅北轍，比如“酷”和“萌”同時(shí)出現(xiàn)，之后就難辦了，而產(chǎn)品的定位也應(yīng)該是出了問題。
其次，選擇素材的時(shí)候，憑感覺選，畫面里無論什么都可以，可以是一些細(xì)節(jié)可以是人可以是抽象的眩光可以是已有的產(chǎn)品界面。但是，但是，但是，在篩選的時(shí)候，務(wù)必讓剩下來的幾個(gè)關(guān)鍵詞的相關(guān)素材和，諧，相，處。大家看下面這張圖，有沒有發(fā)現(xiàn)問題？
每個(gè)關(guān)鍵詞對應(yīng)的圖片，看上去都沒有問題，圖片都能代表關(guān)鍵詞，但是，當(dāng)把全部圖片擺在一起，卻顯得特別雜，看不出最終產(chǎn)品的風(fēng)格。問題出在“時(shí)尚”，能代表時(shí)尚的圖片類型是很多的，圖中所用的炫麗前衛(wèi)的風(fēng)格是一種，但它們跟旁邊的“簡潔”“舒服”不相容。如果把時(shí)尚的圖片換成簡約的時(shí)尚，這張情緒板就和諧了。
最后，在抽取視覺元素的時(shí)候，不要只顧顏色。顏色是最重要也是最容易獲取的，但如果想更充分利用好情緒板，還可以從中抽取更多的有用元素，比如前面舉例的，從喬巴的圖片還能抽取出形狀。當(dāng)然仔細(xì)觀察，還有光、動作、文字、質(zhì)感等等。
好了，到目前為止，概念設(shè)計(jì)也完成了。下次為大家介紹細(xì)節(jié)設(shè)計(jì)和測試和總結(jié)。謝謝啦。
