“kyo，當你拿到一個需求，都是怎么做交互的啊？”今天公司一個開發(fā)跑來跟我交流技術(shù)，問到一個交互設(shè)計師都是怎么開展工作。在大部分開發(fā)眼中，交互和UI的區(qū)別是，交互輸出黑白灰線框圖，UI輸出七彩視覺稿（少年，這槽點甚多啊，就不怕被追著打嗎）。為了團隊和諧，我犧牲了寶貴的午休時間，向開發(fā)科普了一波交互設(shè)計，順便也寫篇文章總結(jié)日常工作中進行交互設(shè)計的主要流程。
提到交互設(shè)計，不得不提到交互最常見的輸出物——線框圖。然而很多人都有一個誤解，覺得交互設(shè)計的工作就是畫線框圖，但其實線框圖只是一個結(jié)果，并不是交互設(shè)計的主要過程。實際交互設(shè)計的主要工作恰恰是思考分析怎么畫線框圖，畫一個框簡單，難的是知道為什么要畫這個框，怎么畫這個框才是最恰當?shù)摹?/p>
1、目標是什么
開始設(shè)計時，首先要思考的是，目標是什么。整個設(shè)計流程都將圍繞目標展開，如果在目標不清晰的情況下就埋頭畫交互稿，就可能出現(xiàn)離題萬丈的情況，白白做了苦功卻沒有得到有益的結(jié)果。
1.1產(chǎn)品目標
產(chǎn)品目標是做事情的真正動機，是內(nèi)在的一個驅(qū)動。多數(shù)情況下產(chǎn)品目標都是“成為某某行業(yè)領(lǐng)先/第一/最大的xxx企業(yè)”，用更通俗易懂的方式來說，就是——賺錢。包括B端和C端產(chǎn)品，核心的產(chǎn)品目標都是賺錢，或者說，賺更多的錢。
1.2業(yè)務(wù)需求
業(yè)務(wù)需求＝業(yè)務(wù)目標＋業(yè)務(wù)目的
業(yè)務(wù)目的——是一個抽象概念，可以理解為一個對產(chǎn)品有益的方向。例如提高用戶粘性，提升企業(yè)工作效率等。
業(yè)務(wù)目標——通常是一個可衡量、可數(shù)據(jù)化的結(jié)果和指標，通常也是管理層和產(chǎn)品經(jīng)理比較關(guān)注的一個指標。例如增加注冊用戶數(shù)，縮短審批等待時間等。
對于業(yè)務(wù)目標，通常用GSM模型將目標轉(zhuǎn)化為一個可見動作，這樣可以將業(yè)務(wù)需求、產(chǎn)品界面、用戶行為聯(lián)系在一起
所以當老板或者產(chǎn)品經(jīng)理提出一個業(yè)務(wù)需求，將需求拆解并且具體到一個與用戶行為相關(guān)的衡量指標上，如果業(yè)務(wù)需求過于模糊或者不合理，務(wù)必與PM確認這個需求背后的業(yè)務(wù)目標，避免做無用功。
1.3用戶需求
用戶需求=目標用戶+情景場景+用戶目標+用戶行為。
要了解用戶需求，首先要進行用戶研究，確定產(chǎn)品目標用戶。一般使用定性研究了解用戶。特別進行新產(chǎn)品開發(fā)前，定性研究可以幫助我們了解這個需求是不是“偽需求”，也可以讓我們了解用戶有什么特征。
定性研究包含兩個階段：前期資料收集和用戶訪談。
前期資料搜索主要包括：文獻綜述、競品分析、利益相關(guān)者訪談、專家訪談，通過這幾個步驟可以描繪一個假設(shè)的人物模型，為下一步用戶訪談提供基礎(chǔ)。
用戶訪談：通過直接與用戶進行訪談，觀察他們的行為，可以從中了解用戶的行為模式以及用戶目標，找出不同類型用戶之間的區(qū)別，將有著相同行為模式的用戶歸為一類，成為一個特定的人物模型。在后續(xù)的設(shè)計都將圍繞人物模型展開，人物模型所代表的用戶，就是我們的目標用戶。
在這里要說一下，B端的人物模型一般基于角色崗位和工作內(nèi)容，與ta的性格、愛好關(guān)系不大。C端的人物模型更關(guān)注個人期待和想法。
用戶目標在用戶研究的過程中了解和提煉。用戶目標有三種不同類型：
體驗?zāi)繕耍ū灸軐哟危脩粝胍裁礃拥母杏X。關(guān)注用戶的感官體驗，簡單來說產(chǎn)品的操作、色彩、音效要令人愉悅，滿足用戶的情感期待；
最終目標（行為層次）——用戶想做什么。用戶使用產(chǎn)品時執(zhí)行任務(wù)的動機，關(guān)注具體的用戶行為。設(shè)計具體某個功能和模塊時圍繞用戶行為展開。特別在B端產(chǎn)品，要重視最終目標。
人生目標（反思層次）——用戶想要成為什么樣的人。產(chǎn)品整體設(shè)計、戰(zhàn)略、品牌的關(guān)注點。對于C端產(chǎn)品，致力于幫助用戶實現(xiàn)人生目標。
用戶總是在某個情景場景下使用產(chǎn)品，部分設(shè)計師會將情景場景簡化為空間和時間，實際上情景場景應(yīng)該是用敘事的方式簡明的描述運用產(chǎn)品或服務(wù)來實現(xiàn)具體目標的一個或多個人物模型。這話有點拗口？簡單來說，情景場景就是在講故事，人物在某個環(huán)境下，為了實現(xiàn)動機/目標，使用了某個產(chǎn)品。在這里，人物、環(huán)境、目標/動機、行為都是建立在前期用戶研究的基礎(chǔ)上，然后將產(chǎn)品加入其中，組成一個完整的情景場景。
1.4明確設(shè)計需求
當確定情景場景后，對其進行分析，提煉出設(shè)計需求
舉一個簡單的例子:Andy是一個電影愛好者，借助一款購票app便捷購買電影票。
情景場景：某國外大片即將上映，Andy購買了一張電影票打算周日觀影。
自此，用戶需求就變得非常明確：
用戶場景（每當）：大片上映
用戶目標（想要）：觀看電影
用戶行為（就能）：購買電影票。
當?shù)玫接脩粜枨螅€需要對其進行提煉，通常圍繞“創(chuàng)造動機、排除擔憂、解決障礙”三個方面入手。在用戶使用產(chǎn)品前，我們應(yīng)該為用戶創(chuàng)造使用動機，排除用戶對于產(chǎn)品的擔憂，設(shè)計師可以回顧用戶訪談內(nèi)容，找出可能存在的動機和擔憂。為了順暢使用產(chǎn)品，優(yōu)化操作過程和邏輯，解決障礙。
還有另外一種方法是分解成數(shù)據(jù)元素、功能元素。
數(shù)據(jù)元素——必須在系統(tǒng)中呈現(xiàn)的對象和信息。常見例子是賬號、人、地址、文件等基礎(chǔ)信息。從情景場景中可以提取執(zhí)行動作需要用到的數(shù)據(jù)元素。
例如一個B端產(chǎn)品，用戶填寫申請表單，需要整理出表單內(nèi)容相關(guān)的數(shù)據(jù)。
功能元素——對系統(tǒng)對象執(zhí)行的操作或動作，通常會轉(zhuǎn)換為界面控件，可以把功能當做產(chǎn)品的動作。
例如撥打電話功能，選擇聯(lián)系人，最近通話，直接撥號，語音撥號這幾個功能元素都可以滿足撥打電話功能。
2、搭建設(shè)計框架
當目標和需求都整理好，可以開始搭建設(shè)計框架。不要一開始就進入細節(jié)設(shè)計，先從產(chǎn)品信息架構(gòu)和產(chǎn)品使用流程入手，搭建產(chǎn)品的整體結(jié)構(gòu)。這個階段的輸入物都已低保真為主，方便與團隊成員進行溝通以及快速修改方案。
2.1信息架構(gòu)
用官方的說法，信息架構(gòu)是進行結(jié)構(gòu)、組織方法及歸類的藝術(shù)。
用通俗的話說，用符合用戶心理模型的形式，將數(shù)據(jù)元素和功能元素進行分組。良好的信息架構(gòu)可以讓用戶更容易理解產(chǎn)品，并通過產(chǎn)品完成想達成的功能。
競品分析
在改版或者市面有大量同類產(chǎn)品的情況下，通過競品分析，找出不同競品信息架構(gòu)的差別，可以幫助快速構(gòu)建產(chǎn)品的信息架構(gòu)。通常找3-5個競品進行，分析過程中著重關(guān)注共性和差異。
對于共性，可以看著用戶使用該類產(chǎn)品的用戶習慣，在進行設(shè)計時，要尊重用戶習慣，不要在證據(jù)不充分的情況下違背用戶習慣，做出差異過大的設(shè)計。不在不必要的時候進行創(chuàng)新。
對于差異，反映不同產(chǎn)品之間產(chǎn)品目標和用戶群體的差別，需要設(shè)計師思考造成差異的原因，并結(jié)合實際情況設(shè)計信息架構(gòu)。
卡片分類
對于市面上缺少競品或者行業(yè)針對性較強的B端產(chǎn)品，可以使用卡片分類法探索合適的信息架構(gòu)。
卡片分類法是設(shè)計師提供一組產(chǎn)品功能或信息卡片，用戶對此進行分類。卡片分類有助于設(shè)計師理解用戶心理模型。當用戶完成分類，設(shè)計師與用戶交流為何這樣分組，背后的原因是什么。還可以為用戶安排任務(wù)，觀察用戶執(zhí)行過程中用到哪些卡片，以及使用的順序。
對于卡片分類的結(jié)果，統(tǒng)計結(jié)果后進行趨勢上的解讀，關(guān)注哪些卡片分組結(jié)果比較接近，對于結(jié)果差異比較大的卡片，思考差異的原因，針對這部分內(nèi)容再次與用戶進行交流。
在信息架構(gòu)層面確保使用流程的通暢
a、盡量保證根據(jù)樹結(jié)構(gòu)進行層級自上而下前進。
例如IM類型用，需要找某個好友聊天，通常的步驟是：好友－某個聯(lián)系人－聊天頁面，從這里也可以感覺到信息架構(gòu)樹的結(jié)構(gòu)，必須是從上而下。
b、不連通層級間的跳躍，盡量發(fā)生在最后一步驟，避免用戶在返回時產(chǎn)生困惑。
好友-聯(lián)系人－聊天，聊天頁面并不在好友這一層，到這里聊天已經(jīng)是這個流程的結(jié)束了，所以跨層級也是沒問題的。
完成信息架構(gòu)的探索后，需要輸出一份樹狀圖，并且對功能重要性進行一個分級，重要的功能有更高的優(yōu)先級，分級不等于排序。分等級的重要性在于面對大量信息時不至于出現(xiàn)信息遺漏的情況。
2.2流程設(shè)計
完成信息架構(gòu)后，產(chǎn)品的主體框架已經(jīng)搭建起，用戶將與組成框架的不同功能和數(shù)據(jù)元素進行交互，形成完整的任務(wù)流程，通常使用關(guān)鍵路線情景劇本的方法進行設(shè)計。
與目標導向情景場景不同，關(guān)鍵路線場景以任務(wù)為導向，關(guān)注情景場景中描述和暗含的任務(wù)細節(jié)。通過關(guān)鍵路線場景，可以找到用戶與產(chǎn)品的接觸點。
梳理接觸點時，每次用戶狀態(tài)發(fā)生變化時，要考慮當前這個狀態(tài)下一步用戶需要做什么，想了解什么內(nèi)容，使得交互流程盡量自然順暢
最好的模式是
做事——看信息——做事，一個頁面接收一個或者一類信息，避免用戶同一時間接受過多龐雜的信息，導致用戶不知所措，操作過程產(chǎn)生錯誤。
也會有兩種特殊模式
做事——做事
這類多數(shù)是用戶平時的經(jīng)驗可以支撐，例如注冊流程中填寫手機號-接收驗證碼-填寫驗證碼。
看信息——看信息
信息量較多時，需要依次理解，例如看活動大致流程－看到具體規(guī)則。
在查找接觸點時，需要準確找到開始和結(jié)束接觸點，不要遺漏，特別某些功能需要跳轉(zhuǎn)到不同的app，需要把其他app的接觸點都標示。
分支流程及異常流程
主線流程中的某個接觸點可能出現(xiàn)替代或者分叉點，屬于分支流程。例如發(fā)送郵件時不是直接發(fā)送，而是選擇定時發(fā)送，就會進入一個新的分支流程。
異常流程包括錯誤操作、輸入內(nèi)容超出限定范圍、用戶網(wǎng)絡(luò)故障/服務(wù)器資源不足等。
預測用戶可能出現(xiàn)的錯誤
最可能出現(xiàn)是——錯誤點擊，這個可以通過二次確認進行避免。
注意處理的力度
Toast——不需要用戶點擊，兩秒后消息；適合提示文字較少，用戶可以馬上重試的場景。大部分的異常都可以通過toast形式提示
Alert——需要點擊確認使彈窗消失；適合提示文字較多，且需要用戶進行再次確認的場景。
了解錯誤返回碼可以讓錯誤考慮更全面
開發(fā)在編寫服務(wù)器時需要編寫錯誤返回碼，為了保證系統(tǒng)運行正常，開發(fā)在這方面會考慮的比較細致，所以交互可以詢問開發(fā)拿一套錯誤返回碼，對照自己的交互流程中哪些部分可能出現(xiàn)錯誤，進行異常流程的編寫。
設(shè)計時的優(yōu)先級
正常流程設(shè)計>核心異常流程設(shè)計>可以簡單解決的小異常
把流程梳理完成后，需要輸出一份流程圖，方便與團隊成員進行交流，特別是開發(fā)和QA會參照流程圖展開工作。
總結(jié)
在了解產(chǎn)品目標和業(yè)務(wù)需求基礎(chǔ)上，通過用戶訪談了解到用戶的目標以及行為模式，將業(yè)務(wù)需求和用戶需求統(tǒng)一起來，提煉出設(shè)計需求。并且為產(chǎn)品搭建出設(shè)計框架，包含信息架構(gòu)和任務(wù)流程，把需求落實到產(chǎn)品當中。至此，繪制線框圖的前期準備工作已經(jīng)完成。
拿到需求就馬上找競品，沉迷模仿和界面細節(jié)無法提升交互能力，時間長了就變成一個“畫線框圖”的設(shè)計師。交互設(shè)計師需將更多精力放在需求理解和提煉，同時站在商業(yè)和用戶角度考慮問題，得出有效的解決方案。
與各位共勉。kyocai
