原文鏈接：Mobile-First Is Just Not Good Enough: Meet Journey-Driven Design
原文作者：Marli Mesibov & Jason Levin
在讀這篇文章的時(shí)候变泄，會(huì)在想通過(guò)experience map尋找設(shè)計(jì)機(jī)會(huì)和journey-driven design有什么不同椅寺，前者可能更多是在一個(gè)應(yīng)用，一款設(shè)備上完成目標(biāo)的系列過(guò)程，后者考慮在了跨設(shè)備的場(chǎng)景剖张，面向未來(lái)的更多類(lèi)型屏幕竟稳，針對(duì)這一點(diǎn)，很多工具性產(chǎn)品會(huì)顯得十分貼合无虚，例如sketch和sketch mirror边涕，會(huì)在mobile和desktop之間切換完成制作；頻繁地切換設(shè)備固然是不好的褂微，就像你要去一個(gè)地方功蜓，坐幾站地鐵，上幾班公交宠蚂，騎一小段路式撼，這太麻煩了，所以尋找接觸點(diǎn)求厕，找出最理想的旅程非常重要著隆。有一些遺憾的就是文章沒(méi)有給出一些辨析的參考案例，何時(shí)選擇何種設(shè)備呀癣，如何去做切換間的設(shè)計(jì)美浦，期待在幾個(gè)月后作者帶來(lái)的實(shí)踐案例吧。
在最近的一次项栏，針對(duì)未來(lái)醫(yī)療客戶的銷(xiāo)售會(huì)上浦辨，我們的團(tuán)隊(duì)在Mad*Pow上聽(tīng)了一個(gè)再熟悉不過(guò)的問(wèn)題的答案。我們?cè)跁?huì)上聽(tīng)完了沼沈，以用戶為中心的設(shè)計(jì)基本方法流酬，通過(guò)調(diào)研和策略引導(dǎo)下一步，一切進(jìn)展都很順利列另。就在要結(jié)束的時(shí)候芽腾，他們團(tuán)隊(duì)的老大頹突然問(wèn)了一句：“你們的設(shè)計(jì)是移動(dòng)優(yōu)先，對(duì)嗎页衙？”
嗯摊滔，這是一個(gè)很難回答的問(wèn)題。
當(dāng)移動(dòng)優(yōu)先的概念拷姿，開(kāi)始作為一種哲學(xué)來(lái)幫助組織積極內(nèi)容惭载，設(shè)備無(wú)差別體驗(yàn)，經(jīng)費(fèi)預(yù)算响巢，日程安排表描滔，移動(dòng)優(yōu)先的結(jié)果就是只有移動(dòng)端。
但是根據(jù)我們醫(yī)療客戶的分析數(shù)據(jù)踪古，他們大多是的用戶仍然在桌面端含长。我們希望為這些用戶提供積極的體驗(yàn)券腔，當(dāng)然也還有移動(dòng)端，平板端拘泞，手機(jī)瀏覽器上-甚至是提供用戶的定制體驗(yàn)纷纫！移動(dòng)端是主要體驗(yàn)的假設(shè)并不準(zhǔn)確。
我們得出了結(jié)論辱魁，移動(dòng)優(yōu)先并不能夠完全的滿足用戶需求。真正的以用戶為中心的設(shè)計(jì)诗鸭，需要從用戶正在開(kāi)始的旅程著手染簇，并跟隨他們?nèi)ネ瓿伤麄兊哪繕?biāo)。換句話說(shuō)强岸，旅程驅(qū)動(dòng)設(shè)計(jì)锻弓。旅程驅(qū)動(dòng)設(shè)計(jì)很自然地體現(xiàn)了用戶為中心的方法-何人，何時(shí)蝌箍，如何做青灼，真正地揭示了復(fù)雜的用戶需求。好的設(shè)計(jì)并不會(huì)強(qiáng)迫用戶去拿起設(shè)計(jì)師想要用戶拿起的設(shè)備妓盲；好的設(shè)計(jì)會(huì)給用戶提供最好的體驗(yàn)杂拨，在用戶自己選擇作為旅程起點(diǎn)的設(shè)備上。
移動(dòng)優(yōu)先有什么問(wèn)題嗎本橙？
在移動(dòng)端發(fā)展的早期扳躬，我們（就設(shè)計(jì)師而言）本質(zhì)上還是在為桌面端設(shè)計(jì)，不過(guò)是一個(gè)小屏的桌面甚亭。UX設(shè)計(jì)師過(guò)去常常思考的事情是用戶如何接入網(wǎng)站贷币，視覺(jué)如何呈現(xiàn)，怎樣的語(yǔ)言和語(yǔ)境幫助用戶完成任務(wù)亏狰，但是我們沒(méi)有想到屏幕的尺寸改變了役纹。在1999年，我們?cè)?00px的畫(huà)布上工作暇唾，然后促脉，擴(kuò)展到了1024px，1200px策州。設(shè)計(jì)師們非常高興瘸味！
隨著移動(dòng)設(shè)計(jì)的發(fā)展，電池壽命的延長(zhǎng)和WiFi變得無(wú)處不在够挂，我們了解到用戶可能接入網(wǎng)站通過(guò)他們的移動(dòng)屏幕旁仿。但是對(duì)桌面端的設(shè)計(jì)思維卻沒(méi)有轉(zhuǎn)變。
移動(dòng)優(yōu)先的想法是對(duì)用戶的勝利枯冈。2009年毅贮，Luke Wroblewski介紹了這個(gè)最佳實(shí)踐。Karen McGrane把她的移動(dòng)內(nèi)容策略加入了大討論尘奏，在2012年滩褥。他們發(fā)現(xiàn)在小屏設(shè)計(jì)的約束下，會(huì)幫助我們優(yōu)化內(nèi)容炫加，給終端用戶帶來(lái)更好的體驗(yàn)瑰煎。此外，移動(dòng)設(shè)備的功能還帶來(lái)了更多參與體驗(yàn)的機(jī)會(huì)俗孝。
到現(xiàn)在丢间，它仍然只專(zhuān)注一個(gè)偉大的體驗(yàn)。一個(gè)變化就是功能弱化的概念驹针，如果我們?cè)O(shè)計(jì)完美的體驗(yàn)（通常為桌面端），那些舊版本的瀏覽器和設(shè)備可能不足以確保功能诀艰，即使我們?cè)O(shè)計(jì)的很棒柬甥。所以，我們嘗試著逐步增加其垄，從小的屏幕（移動(dòng)端）開(kāi)始苛蒲，然后隨著設(shè)備和瀏覽器的更新而逐漸優(yōu)化。而不是從一開(kāi)始就構(gòu)建偉大的設(shè)計(jì)绿满。
更重要的是臂外，沒(méi)人打算將移動(dòng)優(yōu)先做成只有移動(dòng)。
現(xiàn)在是2017年喇颁，我們假設(shè)每個(gè)項(xiàng)目都需要對(duì)移動(dòng)端友好漏健；那么當(dāng)預(yù)算減殺，移動(dòng)優(yōu)先就會(huì)變成只有移動(dòng)橘霎。畢竟蔫浆，34%的用戶通過(guò)他們的智能手機(jī)連接網(wǎng)絡(luò)。在2015年的4月姐叁，Google懲罰了那些移動(dòng)端不適配的網(wǎng)站瓦盛。但這不是簡(jiǎn)單的選擇移動(dòng)端或桌面端。許多用戶在設(shè)備間切換去完成任務(wù)外潜，所以重視內(nèi)容原环，創(chuàng)造一致性的體驗(yàn)就變得更重要。在醫(yī)療領(lǐng)域处窥，有50%的智能手機(jī)用戶下載健康app嘱吗。這也意味著有50%的用戶不去下載。
在最近的一份移動(dòng)市場(chǎng)統(tǒng)計(jì)報(bào)告中碧库，Smart Insights的創(chuàng)始人Dave Chafey分析了報(bào)告并做出總結(jié)：
盡管智能手機(jī)在一些領(lǐng)域勢(shì)不可擋柜与，像社交媒體巧勤，信息，抓住熱點(diǎn)新聞和八卦弄匕。大多數(shù)的西方市場(chǎng)用戶都有桌面端和平板端設(shè)備颅悉，他們會(huì)傾向于用來(lái)更詳細(xì)的查閱和購(gòu)買(mǎi)。
我們有了疑問(wèn)：患者是會(huì)在家打電話診斷然后轉(zhuǎn)向桌面端迁匠，還是會(huì)在醫(yī)生的辦公室里通過(guò)智能手機(jī)搜索剩瓶？買(mǎi)鞋子的用戶是會(huì)在手機(jī)上看幾眼完成低額的交易，還是他們會(huì)回到家里在平板端完成購(gòu)買(mǎi)城丧？
隨著物聯(lián)網(wǎng)的發(fā)展，在線與離線的區(qū)別已經(jīng)逐漸消失亡哄。我們的體驗(yàn)更可能是穿梭在手機(jī)枝缔，筆記本，平板蚊惯，TV愿卸，手表，冰箱截型，汽車(chē)趴荸，甚至是廁所之間。像素和尺寸會(huì)逐漸被弱化宦焦，取代的是響應(yīng)式設(shè)計(jì)发钝，自適應(yīng)內(nèi)容和用戶旅程地圖。一個(gè)旅程之間沒(méi)有一個(gè)明顯的起點(diǎn)波闹，也沒(méi)有模板可以去參照酝豪。為了能夠優(yōu)化移動(dòng)端之外的屏幕內(nèi)容，我們需要將旅程視作一個(gè)整體舔痪。
發(fā)現(xiàn)旅程
旅程優(yōu)先的設(shè)計(jì)比移動(dòng)優(yōu)先更高效寓调，是因?yàn)槲覀冴P(guān)注整個(gè)過(guò)程。這意味著即使是很少的時(shí)間和資金預(yù)算锄码，也會(huì)用來(lái)思考更多的屏幕尺寸夺英。此外，旅程優(yōu)先提供內(nèi)容滋捶，和時(shí)下設(shè)計(jì)的必要元素痛悯，當(dāng)移動(dòng)優(yōu)先設(shè)計(jì)開(kāi)始的時(shí)候這并不是一個(gè)焦點(diǎn)。
在旅程驅(qū)動(dòng)設(shè)計(jì)的第一步就是繪制旅程重窟，焦點(diǎn)集中在某人如何完成他們的目標(biāo)载萌，最佳采訪對(duì)象就是終端用戶。大多數(shù)的以用戶為中心設(shè)計(jì)項(xiàng)目都有調(diào)研這個(gè)階段。這是一個(gè)契機(jī)去聽(tīng)聽(tīng)用戶和潛在用戶的心聲扭仁，了解他們期待的是什么垮衷，他們的痛點(diǎn)在哪。他們會(huì)使用什么設(shè)備乖坠，他們體驗(yàn)的過(guò)程中需要哪些設(shè)備幫助導(dǎo)航搀突。
在調(diào)研的基礎(chǔ)上，我們創(chuàng)建用戶畫(huà)像熊泵，然后繪制出每個(gè)畫(huà)像的理想旅程仰迁。包括標(biāo)記出在完成目標(biāo)上的接觸點(diǎn)。這會(huì)多次的業(yè)務(wù)和畫(huà)像交流顽分，無(wú)論是通過(guò)電子郵件徐许，網(wǎng)站，社交媒體卒蘸，店內(nèi)訪問(wèn)雌隅，電話，郵件或其他方法缸沃，這些接觸點(diǎn)就是我們實(shí)際可以設(shè)計(jì)的澄步，去構(gòu)建完整的體驗(yàn)。換句話說(shuō)和泌，當(dāng)手機(jī)被靜默的時(shí)候，我們不能去控制用戶在戶外散步的時(shí)候做什么祠肥，但是我們可以控制用戶所見(jiàn)的內(nèi)容黨他們受到一封來(lái)自我們的郵件武氓，當(dāng)我們不能連接的時(shí)候這也會(huì)影響到他們的體驗(yàn)。
對(duì)于我們醫(yī)療客戶的一員而言仇箱，在我們考慮終端用戶如何與保險(xiǎn)公司交互的時(shí)候尤其明顯县恕。盡管病人的目標(biāo)是得到體檢結(jié)果，在去醫(yī)生辦公室的路上剂桥，他可能會(huì)想知道自己需要支付的費(fèi)用是多少忠烛。如果他們?cè)谝苿?dòng)網(wǎng)站上去查看，那這就是一個(gè)接觸點(diǎn)权逗。如果他們?cè)趯ふ腋顿M(fèi)窗口美尸，這就是病人的另一個(gè)接觸點(diǎn)。接觸之后斟薇，當(dāng)申請(qǐng)被接受师坎，我們有一個(gè)機(jī)會(huì)去通知用戶更新健康內(nèi)容-這是另一個(gè)機(jī)會(huì)點(diǎn)。
所有的這些接觸點(diǎn)組成了生態(tài)網(wǎng)絡(luò)胯陋，這也是我們著手旅程驅(qū)動(dòng)設(shè)計(jì)的主要工具之一。這個(gè)生態(tài)網(wǎng)絡(luò)會(huì)幫助我們?cè)诰W(wǎng)絡(luò)各個(gè)區(qū)域建立聯(lián)系，各種參與物聯(lián)網(wǎng)的技術(shù)遏乔，和用戶進(jìn)行的動(dòng)作义矛。在生態(tài)網(wǎng)絡(luò)中，我們也可以辨識(shí)用戶在每個(gè)數(shù)字接觸點(diǎn)使用哪種設(shè)備盟萨。我們可以從用戶調(diào)研中獲取這類(lèi)信息凉翻，或者我們可以通過(guò)分析得到，顆粒度可以細(xì)化到告訴我們用戶會(huì)使用何種設(shè)備最可能訪問(wèn)哪個(gè)頁(yè)面鸯旁。
從旅程到設(shè)計(jì)
了解到接觸點(diǎn)和生態(tài)網(wǎng)絡(luò)地圖對(duì)工作是有幫助的噪矛，還需要去設(shè)計(jì)適合的用戶界面和交互方式，去幫助終端用戶完成她們的目標(biāo)铺罢。我們需要建立框架或原型艇挨，最后可以被開(kāi)發(fā)實(shí)現(xiàn)為app或web。
對(duì)一些設(shè)計(jì)師而言韭赘，創(chuàng)建生態(tài)網(wǎng)絡(luò)地圖或遷移到旅程地圖（無(wú)論是現(xiàn)狀或是理想化的）就像旅程驅(qū)動(dòng)設(shè)計(jì)本身一樣遠(yuǎn)缩滨，在移動(dòng)到移動(dòng)優(yōu)先之前。在所有移動(dòng)原型中一致性設(shè)計(jì)是吸引人的泉瞻，用戶會(huì)喜歡這種整體感脉漏。我們?cè)O(shè)計(jì)師的工作間局勢(shì)在多樣屏幕下去滿足用戶的需求。我們需要考慮整套交互的獨(dú)立性袖牙。如果我們有位用戶的旅程是從移動(dòng)端開(kāi)始侧巨，但是經(jīng)過(guò)四屏后切換到了桌面，那么我們需要在移動(dòng)端上設(shè)計(jì)四屏然后切換到桌面鞭达。如果另一個(gè)潛在用戶（可能是高級(jí)用戶）的旅程在同樣的app卻是從平板端開(kāi)始的司忱，那么我們就該為平板端設(shè)計(jì)。我們?nèi)匀粌?yōu)先考慮內(nèi)容畴蹭，也會(huì)考慮一些視覺(jué)框架坦仍。
在設(shè)計(jì)每個(gè)交互之后，問(wèn)問(wèn)下面這些問(wèn)題：
我有為最關(guān)鍵的設(shè)備設(shè)計(jì)嗎叨襟？
其他設(shè)備可能會(huì)發(fā)揮作用嗎繁扎？
交互的場(chǎng)景是什么？用戶的生理狀況如何糊闽？
雖然設(shè)計(jì)不會(huì)在一堆移動(dòng)屏幕上有凝聚力梳玫，但是它會(huì)符合特定的場(chǎng)景和用戶執(zhí)行行為的理由。另一個(gè)好處就是右犹，非線性的思考會(huì)鼓勵(lì)新的設(shè)計(jì)方法汽纠。前端開(kāi)發(fā)者也歡迎在早期的時(shí)候能夠得到多個(gè)屏幕的尺寸框架。這會(huì)幫助他們結(jié)構(gòu)化開(kāi)發(fā)工作傀履。
對(duì)我們的醫(yī)療客戶來(lái)說(shuō)虱朵，我們草擬了一份理想旅程地圖莉炉，在每一個(gè)接觸點(diǎn)上使用便簽，用不同的顏色表示不同的設(shè)備碴犬。當(dāng)我們了解了旅程中的接觸點(diǎn)后絮宁，我們開(kāi)始思考屏幕上的交互方式。我們?yōu)榱N屏幕設(shè)計(jì)服协，更多的可能是在移動(dòng)端和第四步更大的顯示器绍昂。我們使用移動(dòng)優(yōu)先和響應(yīng)式設(shè)計(jì)最佳實(shí)踐，幫助用戶能夠更好的在所有設(shè)備的屏幕上切換偿荷。
當(dāng)時(shí)更為重要的是寺庄，在連接交互和旅程時(shí)艾蓝，我們作為故事講述者來(lái)提升工作。即使是最好的斗塘，最關(guān)注用戶的設(shè)計(jì)師也可能會(huì)專(zhuān)注具體交互方式時(shí)忘記故事赢织。從一個(gè)設(shè)備遷移到另一個(gè)會(huì)幫助你重新定位，提醒你用戶是誰(shuí)馍盟，他們?cè)谀挠谥茫麄優(yōu)槭裁催@么做，他們?cè)谧鍪裁凑炅耄麄冏铌P(guān)心的是什么-他們的重點(diǎn)不是在UI上＞懔健！
添加內(nèi)容
設(shè)計(jì)師與內(nèi)容工作曹步，這是旅程驅(qū)動(dòng)設(shè)計(jì)的另一個(gè)好處。內(nèi)容策略者更傾向于辨別屏幕的目標(biāo)來(lái)確定屏幕內(nèi)容休讳，然后復(fù)制這種實(shí)現(xiàn)目標(biāo)的方式到其他關(guān)聯(lián)用戶上讲婚。在傳統(tǒng)的UX設(shè)計(jì)中，不同內(nèi)容策略者有不同的方法來(lái)確定不同屏幕的目標(biāo)俊柔。但是旅程驅(qū)動(dòng)設(shè)計(jì)筹麸，設(shè)計(jì)師和決策者會(huì)更早的辨別目標(biāo)或每一步動(dòng)作。
設(shè)計(jì)師和內(nèi)容策略者應(yīng)該一同工作雏婶，通過(guò)旅程來(lái)考慮每一個(gè)接觸點(diǎn)物赶。而不是等待在線框圖上復(fù)制，內(nèi)容策略可以在生態(tài)地圖上幫助我們明確目標(biāo)留晚，這給設(shè)計(jì)師帶來(lái)了很大的幫助酵紫，特別是在那些和內(nèi)容緊密聯(lián)系的工作上。
此外，內(nèi)容策略需要去考慮內(nèi)容是靜態(tài)的還是適應(yīng)性的奖地。當(dāng)設(shè)計(jì)師在旅程中的不同步驟設(shè)計(jì)不同屏幕時(shí)橄唬，他們可以提供洞察-內(nèi)容是如何被感知的。用戶是否會(huì)分心参歹，哪種情景提示都是內(nèi)容策略者需要考慮的仰楚。
簡(jiǎn)而言之，旅程驅(qū)動(dòng)設(shè)計(jì)提供了我們一個(gè)更大的視野去減少意外犬庇，不會(huì)讓你脫離項(xiàng)目設(shè)計(jì)僧界。它保持整個(gè)團(tuán)隊(duì)一同工作，所有人都參與生態(tài)的創(chuàng)建臭挽，在設(shè)計(jì)開(kāi)始之前捂襟，決策是被共享的。
發(fā)展和展望
旅程驅(qū)動(dòng)設(shè)計(jì)的核心埋哟，仍然是一種用戶為中心的設(shè)計(jì)笆豁。當(dāng)生態(tài)地圖繪制完成，理想旅程被規(guī)劃后赤赊，旅程設(shè)計(jì)的過(guò)程和其他的UX項(xiàng)目一樣闯狱，設(shè)計(jì)需要為其他的屏幕尺寸設(shè)計(jì)，根據(jù)設(shè)備的邊界場(chǎng)景檢驗(yàn)一致性抛计『骞拢可用性測(cè)試，改進(jìn)迭代吹截，這些都是旅程驅(qū)動(dòng)設(shè)計(jì)的一部分瘦陈。
想要展開(kāi)你記得旅程地圖？嘗試做下面這些工作：
從你的用戶調(diào)研開(kāi)始波俄。
詢(xún)問(wèn)正確的用戶晨逝，他們?nèi)绾瓮瓿赡繕?biāo)-這是很重要的一步，去辨別當(dāng)前用戶的旅程懦铺！
在調(diào)研中捉貌，留意痛點(diǎn)。
當(dāng)你了解了痛點(diǎn)之后冬念，很容易通過(guò)頭腦風(fēng)暴尋找可能的解決方案趁窃。這些可能的方法會(huì)成為理想的旅程地圖。
當(dāng)團(tuán)隊(duì)開(kāi)始進(jìn)行線框圖和視覺(jué)實(shí)際時(shí)急前，在制定設(shè)備上開(kāi)始時(shí)不要忽略基本的遠(yuǎn)離醒陆，注視或數(shù)字化版本的旅程可以幫助將這些記在心上。
測(cè)試旅程裆针。
基于一個(gè)旅程設(shè)計(jì)是很棒的刨摩，但是我們需要去確保它能工作寺晌！跟進(jìn)分析去找到用戶在哪里減少，用戶在旅程上使用哪種設(shè)備码邻。然后返回去優(yōu)化理想的旅程折剃。
我們生活在物聯(lián)網(wǎng)的時(shí)代。不要去假設(shè)手機(jī)像屋，電腦怕犁，平板會(huì)是未來(lái)的設(shè)備。會(huì)有更多的設(shè)備到來(lái)己莺，更多的科技注入我們的房屋奏甫，工作地點(diǎn)和通勤。旅程驅(qū)動(dòng)設(shè)計(jì)允許設(shè)計(jì)去和科技一同發(fā)展凌受。我們開(kāi)始越來(lái)越多的實(shí)踐阵子，我們希望會(huì)在接下來(lái)的幾個(gè)月分享一個(gè)案例。
資源
“New BBC News Website: Your Reaction,” Niko Vijayaratnam
See why the BBC News website changed to responsive in 2015.
“5 UX Demons That Need Exorcising,” Robert Hoekman Jr
The problem with “the fold” and other UX myths.
“Designing Digital Strategies, Part 1: Cartography,” Sofia Hussain
An overview of ecosystem maps.
“Mobile First,” Luke Wroblewski
Luke’s 2009 explanation of mobile-first.
“Adapting Ourselves to Adaptive Content,” Karen McGrane
A presentation that showcases how the web affects our static views of content.
“Desktop-First vs. Mobile-First Web Design: What’s Best for Your Business?,” Splash Omnimedia
The pros and cons of desktop- and mobile-first design.
“Mobile First Design: Why It’s Great and Why It Sucks,” Code My Views
Graceful degradation, progressive enhancement and how mobile-first design works.
“Consumers Take a Multi-Device Path to Purchase,” Steve Olenski
67% of people start shopping on one device and continue on another. See the stats.
“The Data Digest: Our Multi-Device Journey Through the Digital World,” Anjali Lai
A look at popular activities that encourage changing devices midstream.
“Is Mobile Healthcare the Future? [Infographic],” GreatCall Inc.
An infographic of the ways in which mobile devices are used for healthcare.
“30 Amazing Mobile Health Technology Statistics for Today’s Physician,” Jonathan Govette
An article about the ways people interact with healthcare professionals.
“How Successful Companies Design for Users’ Multi-Device Lives,” Marc Abraham
A look at the digital ecosystem and designing across devices.
