“kyo，當(dāng)你拿到一個(gè)需求下隧，都是怎么做交互的吧萑恕？”今天公司一個(gè)開發(fā)跑來(lái)跟我交流技術(shù)淆院，問(wèn)到一個(gè)交互設(shè)計(jì)師都是怎么開展工作何乎。在大部分開發(fā)眼中，交互和UI的區(qū)別是土辩，交互輸出黑白灰線框圖支救，UI輸出七彩視覺(jué)稿（少年，這槽點(diǎn)甚多啊拷淘，就不怕被追著打嗎）各墨。為了團(tuán)隊(duì)和諧，我犧牲了寶貴的午休時(shí)間启涯，向開發(fā)科普了一波交互設(shè)計(jì)贬堵，順便也寫篇文章總結(jié)日常工作中進(jìn)行交互設(shè)計(jì)的主要流程。
提到交互設(shè)計(jì)结洼，不得不提到交互最常見(jiàn)的輸出物——線框圖黎做。然而很多人都有一個(gè)誤解，覺(jué)得交互設(shè)計(jì)的工作就是畫線框圖松忍，但其實(shí)線框圖只是一個(gè)結(jié)果蒸殿，并不是交互設(shè)計(jì)的主要過(guò)程。實(shí)際交互設(shè)計(jì)的主要工作恰恰是思考分析怎么畫線框圖鸣峭，畫一個(gè)框簡(jiǎn)單伟桅，難的是知道為什么要畫這個(gè)框，怎么畫這個(gè)框才是最恰當(dāng)?shù)摹?/p>
1叽掘、目標(biāo)是什么
開始設(shè)計(jì)時(shí)，首先要思考的是玖雁，目標(biāo)是什么更扁。整個(gè)設(shè)計(jì)流程都將圍繞目標(biāo)展開，如果在目標(biāo)不清晰的情況下就埋頭畫交互稿，就可能出現(xiàn)離題萬(wàn)丈的情況浓镜，白白做了苦功卻沒(méi)有得到有益的結(jié)果溃列。
1.1產(chǎn)品目標(biāo)
產(chǎn)品目標(biāo)是做事情的真正動(dòng)機(jī)，是內(nèi)在的一個(gè)驅(qū)動(dòng)膛薛。多數(shù)情況下產(chǎn)品目標(biāo)都是“成為某某行業(yè)領(lǐng)先/第一/最大的xxx企業(yè)”听隐，用更通俗易懂的方式來(lái)說(shuō)，就是——賺錢哄啄。包括B端和C端產(chǎn)品雅任，核心的產(chǎn)品目標(biāo)都是賺錢，或者說(shuō)咨跌，賺更多的錢沪么。
1.2業(yè)務(wù)需求
業(yè)務(wù)需求＝業(yè)務(wù)目標(biāo)＋業(yè)務(wù)目的
業(yè)務(wù)目的——是一個(gè)抽象概念，可以理解為一個(gè)對(duì)產(chǎn)品有益的方向锌半。例如提高用戶粘性禽车，提升企業(yè)工作效率等。
業(yè)務(wù)目標(biāo)——通常是一個(gè)可衡量刊殉、可數(shù)據(jù)化的結(jié)果和指標(biāo)殉摔，通常也是管理層和產(chǎn)品經(jīng)理比較關(guān)注的一個(gè)指標(biāo)。例如增加注冊(cè)用戶數(shù)记焊，縮短審批等待時(shí)間等逸月。
對(duì)于業(yè)務(wù)目標(biāo)，通常用GSM模型將目標(biāo)轉(zhuǎn)化為一個(gè)可見(jiàn)動(dòng)作亚亲，這樣可以將業(yè)務(wù)需求彻采、產(chǎn)品界面、用戶行為聯(lián)系在一起
所以當(dāng)老板或者產(chǎn)品經(jīng)理提出一個(gè)業(yè)務(wù)需求捌归，將需求拆解并且具體到一個(gè)與用戶行為相關(guān)的衡量指標(biāo)上肛响，如果業(yè)務(wù)需求過(guò)于模糊或者不合理，務(wù)必與PM確認(rèn)這個(gè)需求背后的業(yè)務(wù)目標(biāo)惜索，避免做無(wú)用功特笋。
1.3用戶需求
用戶需求=目標(biāo)用戶+情景場(chǎng)景+用戶目標(biāo)+用戶行為。
要了解用戶需求巾兆，首先要進(jìn)行用戶研究猎物，確定產(chǎn)品目標(biāo)用戶。一般使用定性研究了解用戶角塑。特別進(jìn)行新產(chǎn)品開發(fā)前蔫磨，定性研究可以幫助我們了解這個(gè)需求是不是“偽需求”，也可以讓我們了解用戶有什么特征圃伶。
定性研究包含兩個(gè)階段：前期資料收集和用戶訪談堤如。
前期資料搜索主要包括：文獻(xiàn)綜述蒲列、競(jìng)品分析、利益相關(guān)者訪談搀罢、專家訪談蝗岖，通過(guò)這幾個(gè)步驟可以描繪一個(gè)假設(shè)的人物模型，為下一步用戶訪談提供基礎(chǔ)榔至。
用戶訪談：通過(guò)直接與用戶進(jìn)行訪談抵赢，觀察他們的行為，可以從中了解用戶的行為模式以及用戶目標(biāo)唧取，找出不同類型用戶之間的區(qū)別铅鲤，將有著相同行為模式的用戶歸為一類，成為一個(gè)特定的人物模型兵怯。在后續(xù)的設(shè)計(jì)都將圍繞人物模型展開彩匕，人物模型所代表的用戶，就是我們的目標(biāo)用戶媒区。
在這里要說(shuō)一下驼仪，B端的人物模型一般基于角色崗位和工作內(nèi)容，與ta的性格袜漩、愛(ài)好關(guān)系不大绪爸。C端的人物模型更關(guān)注個(gè)人期待和想法。
用戶目標(biāo)在用戶研究的過(guò)程中了解和提煉宙攻。用戶目標(biāo)有三種不同類型：
體驗(yàn)?zāi)繕?biāo)（本能層次）——用戶想要什么樣的感覺(jué)奠货。關(guān)注用戶的感官體驗(yàn)，簡(jiǎn)單來(lái)說(shuō)產(chǎn)品的操作座掘、色彩递惋、音效要令人愉悅，滿足用戶的情感期待溢陪；
最終目標(biāo)（行為層次）——用戶想做什么萍虽。用戶使用產(chǎn)品時(shí)執(zhí)行任務(wù)的動(dòng)機(jī)，關(guān)注具體的用戶行為形真。設(shè)計(jì)具體某個(gè)功能和模塊時(shí)圍繞用戶行為展開杉编。特別在B端產(chǎn)品，要重視最終目標(biāo)咆霜。
人生目標(biāo)（反思層次）——用戶想要成為什么樣的人邓馒。產(chǎn)品整體設(shè)計(jì)、戰(zhàn)略蛾坯、品牌的關(guān)注點(diǎn)光酣。對(duì)于C端產(chǎn)品，致力于幫助用戶實(shí)現(xiàn)人生目標(biāo)脉课。
用戶總是在某個(gè)情景場(chǎng)景下使用產(chǎn)品救军，部分設(shè)計(jì)師會(huì)將情景場(chǎng)景簡(jiǎn)化為空間和時(shí)間改览，實(shí)際上情景場(chǎng)景應(yīng)該是用敘事的方式簡(jiǎn)明的描述運(yùn)用產(chǎn)品或服務(wù)來(lái)實(shí)現(xiàn)具體目標(biāo)的一個(gè)或多個(gè)人物模型。這話有點(diǎn)拗口缤言？簡(jiǎn)單來(lái)說(shuō)，情景場(chǎng)景就是在講故事视事，人物在某個(gè)環(huán)境下胆萧，為了實(shí)現(xiàn)動(dòng)機(jī)/目標(biāo)，使用了某個(gè)產(chǎn)品俐东。在這里跌穗，人物、環(huán)境虏辫、目標(biāo)/動(dòng)機(jī)蚌吸、行為都是建立在前期用戶研究的基礎(chǔ)上，然后將產(chǎn)品加入其中砌庄，組成一個(gè)完整的情景場(chǎng)景羹唠。
1.4明確設(shè)計(jì)需求
當(dāng)確定情景場(chǎng)景后，對(duì)其進(jìn)行分析娄昆，提煉出設(shè)計(jì)需求
舉一個(gè)簡(jiǎn)單的例子:Andy是一個(gè)電影愛(ài)好者佩微，借助一款購(gòu)票app便捷購(gòu)買電影票。
情景場(chǎng)景：某國(guó)外大片即將上映萌焰，Andy購(gòu)買了一張電影票打算周日觀影哺眯。
自此，用戶需求就變得非常明確：
用戶場(chǎng)景（每當(dāng)）：大片上映
用戶目標(biāo)（想要）：觀看電影
用戶行為（就能）：購(gòu)買電影票扒俯。
當(dāng)?shù)玫接脩粜枨竽套浚€需要對(duì)其進(jìn)行提煉，通常圍繞“創(chuàng)造動(dòng)機(jī)撼玄、排除擔(dān)憂夺姑、解決障礙”三個(gè)方面入手。在用戶使用產(chǎn)品前互纯，我們應(yīng)該為用戶創(chuàng)造使用動(dòng)機(jī)瑟幕，排除用戶對(duì)于產(chǎn)品的擔(dān)憂，設(shè)計(jì)師可以回顧用戶訪談內(nèi)容留潦，找出可能存在的動(dòng)機(jī)和擔(dān)憂只盹。為了順暢使用產(chǎn)品，優(yōu)化操作過(guò)程和邏輯兔院，解決障礙殖卑。
還有另外一種方法是分解成數(shù)據(jù)元素、功能元素坊萝。
數(shù)據(jù)元素——必須在系統(tǒng)中呈現(xiàn)的對(duì)象和信息孵稽。常見(jiàn)例子是賬號(hào)许起、人、地址菩鲜、文件等基礎(chǔ)信息园细。從情景場(chǎng)景中可以提取執(zhí)行動(dòng)作需要用到的數(shù)據(jù)元素。
例如一個(gè)B端產(chǎn)品接校，用戶填寫申請(qǐng)表單猛频，需要整理出表單內(nèi)容相關(guān)的數(shù)據(jù)。
功能元素——對(duì)系統(tǒng)對(duì)象執(zhí)行的操作或動(dòng)作蛛勉，通常會(huì)轉(zhuǎn)換為界面控件鹿寻，可以把功能當(dāng)做產(chǎn)品的動(dòng)作。
例如撥打電話功能诽凌，選擇聯(lián)系人毡熏，最近通話，直接撥號(hào)侣诵，語(yǔ)音撥號(hào)這幾個(gè)功能元素都可以滿足撥打電話功能痢法。
2、搭建設(shè)計(jì)框架
當(dāng)目標(biāo)和需求都整理好窝趣，可以開始搭建設(shè)計(jì)框架疯暑。不要一開始就進(jìn)入細(xì)節(jié)設(shè)計(jì)，先從產(chǎn)品信息架構(gòu)和產(chǎn)品使用流程入手哑舒，搭建產(chǎn)品的整體結(jié)構(gòu)妇拯。這個(gè)階段的輸入物都已低保真為主，方便與團(tuán)隊(duì)成員進(jìn)行溝通以及快速修改方案洗鸵。
2.1信息架構(gòu)
用官方的說(shuō)法越锈，信息架構(gòu)是進(jìn)行結(jié)構(gòu)、組織方法及歸類的藝術(shù)膘滨。
用通俗的話說(shuō)甘凭，用符合用戶心理模型的形式，將數(shù)據(jù)元素和功能元素進(jìn)行分組火邓。良好的信息架構(gòu)可以讓用戶更容易理解產(chǎn)品丹弱，并通過(guò)產(chǎn)品完成想達(dá)成的功能。
競(jìng)品分析
在改版或者市面有大量同類產(chǎn)品的情況下铲咨，通過(guò)競(jìng)品分析躲胳，找出不同競(jìng)品信息架構(gòu)的差別，可以幫助快速構(gòu)建產(chǎn)品的信息架構(gòu)纤勒。通常找3-5個(gè)競(jìng)品進(jìn)行坯苹，分析過(guò)程中著重關(guān)注共性和差異。
對(duì)于共性摇天，可以看著用戶使用該類產(chǎn)品的用戶習(xí)慣粹湃，在進(jìn)行設(shè)計(jì)時(shí)恐仑，要尊重用戶習(xí)慣，不要在證據(jù)不充分的情況下違背用戶習(xí)慣为鳄，做出差異過(guò)大的設(shè)計(jì)裳仆。不在不必要的時(shí)候進(jìn)行創(chuàng)新。
對(duì)于差異孤钦，反映不同產(chǎn)品之間產(chǎn)品目標(biāo)和用戶群體的差別鉴逞，需要設(shè)計(jì)師思考造成差異的原因，并結(jié)合實(shí)際情況設(shè)計(jì)信息架構(gòu)司训。
卡片分類
對(duì)于市面上缺少競(jìng)品或者行業(yè)針對(duì)性較強(qiáng)的B端產(chǎn)品，可以使用卡片分類法探索合適的信息架構(gòu)液南。
卡片分類法是設(shè)計(jì)師提供一組產(chǎn)品功能或信息卡片壳猜，用戶對(duì)此進(jìn)行分類』梗卡片分類有助于設(shè)計(jì)師理解用戶心理模型统扳。當(dāng)用戶完成分類，設(shè)計(jì)師與用戶交流為何這樣分組畅姊，背后的原因是什么咒钟。還可以為用戶安排任務(wù)，觀察用戶執(zhí)行過(guò)程中用到哪些卡片若未，以及使用的順序朱嘴。
對(duì)于卡片分類的結(jié)果，統(tǒng)計(jì)結(jié)果后進(jìn)行趨勢(shì)上的解讀粗合，關(guān)注哪些卡片分組結(jié)果比較接近萍嬉，對(duì)于結(jié)果差異比較大的卡片，思考差異的原因隙疚，針對(duì)這部分內(nèi)容再次與用戶進(jìn)行交流壤追。
在信息架構(gòu)層面確保使用流程的通暢
a、盡量保證根據(jù)樹結(jié)構(gòu)進(jìn)行層級(jí)自上而下前進(jìn)供屉。
例如IM類型用行冰，需要找某個(gè)好友聊天，通常的步驟是：好友－某個(gè)聯(lián)系人－聊天頁(yè)面伶丐，從這里也可以感覺(jué)到信息架構(gòu)樹的結(jié)構(gòu)悼做，必須是從上而下。
b撵割、不連通層級(jí)間的跳躍贿堰，盡量發(fā)生在最后一步驟，避免用戶在返回時(shí)產(chǎn)生困惑啡彬。
好友-聯(lián)系人－聊天羹与，聊天頁(yè)面并不在好友這一層故硅，到這里聊天已經(jīng)是這個(gè)流程的結(jié)束了，所以跨層級(jí)也是沒(méi)問(wèn)題的纵搁。
完成信息架構(gòu)的探索后吃衅，需要輸出一份樹狀圖，并且對(duì)功能重要性進(jìn)行一個(gè)分級(jí)腾誉，重要的功能有更高的優(yōu)先級(jí)徘层，分級(jí)不等于排序。分等級(jí)的重要性在于面對(duì)大量信息時(shí)不至于出現(xiàn)信息遺漏的情況利职。
2.2流程設(shè)計(jì)
完成信息架構(gòu)后趣效，產(chǎn)品的主體框架已經(jīng)搭建起，用戶將與組成框架的不同功能和數(shù)據(jù)元素進(jìn)行交互猪贪，形成完整的任務(wù)流程跷敬，通常使用關(guān)鍵路線情景劇本的方法進(jìn)行設(shè)計(jì)。
與目標(biāo)導(dǎo)向情景場(chǎng)景不同热押，關(guān)鍵路線場(chǎng)景以任務(wù)為導(dǎo)向西傀，關(guān)注情景場(chǎng)景中描述和暗含的任務(wù)細(xì)節(jié)。通過(guò)關(guān)鍵路線場(chǎng)景桶癣，可以找到用戶與產(chǎn)品的接觸點(diǎn)拥褂。
梳理接觸點(diǎn)時(shí)，每次用戶狀態(tài)發(fā)生變化時(shí)牙寞，要考慮當(dāng)前這個(gè)狀態(tài)下一步用戶需要做什么饺鹃，想了解什么內(nèi)容，使得交互流程盡量自然順暢
最好的模式是
做事——看信息——做事间雀，一個(gè)頁(yè)面接收一個(gè)或者一類信息尤慰，避免用戶同一時(shí)間接受過(guò)多龐雜的信息，導(dǎo)致用戶不知所措雷蹂，操作過(guò)程產(chǎn)生錯(cuò)誤伟端。
也會(huì)有兩種特殊模式
做事——做事
這類多數(shù)是用戶平時(shí)的經(jīng)驗(yàn)可以支撐，例如注冊(cè)流程中填寫手機(jī)號(hào)-接收驗(yàn)證碼-填寫驗(yàn)證碼匪煌。
看信息——看信息
信息量較多時(shí)责蝠，需要依次理解，例如看活動(dòng)大致流程－看到具體規(guī)則萎庭。
在查找接觸點(diǎn)時(shí)霜医，需要準(zhǔn)確找到開始和結(jié)束接觸點(diǎn)，不要遺漏驳规，特別某些功能需要跳轉(zhuǎn)到不同的app肴敛，需要把其他app的接觸點(diǎn)都標(biāo)示。
分支流程及異常流程
主線流程中的某個(gè)接觸點(diǎn)可能出現(xiàn)替代或者分叉點(diǎn)，屬于分支流程医男。例如發(fā)送郵件時(shí)不是直接發(fā)送砸狞，而是選擇定時(shí)發(fā)送，就會(huì)進(jìn)入一個(gè)新的分支流程镀梭。
異常流程包括錯(cuò)誤操作刀森、輸入內(nèi)容超出限定范圍、用戶網(wǎng)絡(luò)故障/服務(wù)器資源不足等报账。
預(yù)測(cè)用戶可能出現(xiàn)的錯(cuò)誤
最可能出現(xiàn)是——錯(cuò)誤點(diǎn)擊研底，這個(gè)可以通過(guò)二次確認(rèn)進(jìn)行避免。
注意處理的力度
Toast——不需要用戶點(diǎn)擊透罢，兩秒后消息榜晦；適合提示文字較少，用戶可以馬上重試的場(chǎng)景羽圃。大部分的異常都可以通過(guò)toast形式提示
Alert——需要點(diǎn)擊確認(rèn)使彈窗消失芽隆；適合提示文字較多，且需要用戶進(jìn)行再次確認(rèn)的場(chǎng)景统屈。
了解錯(cuò)誤返回碼可以讓錯(cuò)誤考慮更全面
開發(fā)在編寫服務(wù)器時(shí)需要編寫錯(cuò)誤返回碼，為了保證系統(tǒng)運(yùn)行正常牙躺，開發(fā)在這方面會(huì)考慮的比較細(xì)致愁憔，所以交互可以詢問(wèn)開發(fā)拿一套錯(cuò)誤返回碼，對(duì)照自己的交互流程中哪些部分可能出現(xiàn)錯(cuò)誤孽拷，進(jìn)行異常流程的編寫吨掌。
設(shè)計(jì)時(shí)的優(yōu)先級(jí)
正常流程設(shè)計(jì)>核心異常流程設(shè)計(jì)>可以簡(jiǎn)單解決的小異常
把流程梳理完成后，需要輸出一份流程圖脓恕，方便與團(tuán)隊(duì)成員進(jìn)行交流膜宋，特別是開發(fā)和QA會(huì)參照流程圖展開工作。
總結(jié)
在了解產(chǎn)品目標(biāo)和業(yè)務(wù)需求基礎(chǔ)上炼幔，通過(guò)用戶訪談了解到用戶的目標(biāo)以及行為模式秋茫，將業(yè)務(wù)需求和用戶需求統(tǒng)一起來(lái)，提煉出設(shè)計(jì)需求乃秀。并且為產(chǎn)品搭建出設(shè)計(jì)框架肛著，包含信息架構(gòu)和任務(wù)流程，把需求落實(shí)到產(chǎn)品當(dāng)中跺讯。至此枢贿，繪制線框圖的前期準(zhǔn)備工作已經(jīng)完成。
拿到需求就馬上找競(jìng)品刀脏，沉迷模仿和界面細(xì)節(jié)無(wú)法提升交互能力局荚，時(shí)間長(zhǎng)了就變成一個(gè)“畫線框圖”的設(shè)計(jì)師。交互設(shè)計(jì)師需將更多精力放在需求理解和提煉，同時(shí)站在商業(yè)和用戶角度考慮問(wèn)題耀态，得出有效的解決方案轮傍。
與各位共勉。kyocai
