在日常工作中，我們或許會(huì)遇到這樣的情景：

說(shuō)不清楚交互設(shè)計(jì)師和 UI 設(shè)計(jì)師的區(qū)別，被人覺(jué)得交互設(shè)計(jì)師就只有審稿或在產(chǎn)品經(jīng)理出的原型基礎(chǔ)上完善優(yōu)化的份了；面對(duì)很多成熟的交互組件庫(kù)和界面框架，覺(jué)得交互設(shè)計(jì)師難有用武之地；設(shè)計(jì)評(píng)審理不清思路和理由說(shuō)服對(duì)方，甚至當(dāng)有人問(wèn)我們交互設(shè)計(jì)師究竟是做什么的時(shí)候，卻說(shuō)不太清楚......

大家對(duì)交互設(shè)計(jì)還是會(huì)存在認(rèn)知上的誤區(qū)，本文會(huì)對(duì)以上種種問(wèn)題作出的回應(yīng)。小編將從認(rèn)知、思維、方法和工具四個(gè)方面詳細(xì)闡述交互設(shè)計(jì)，幫助大家更深刻地理解什么是交互設(shè)計(jì)，意識(shí)到交互設(shè)計(jì)的價(jià)值與重要性；同時(shí)，掌握一套通用的設(shè)計(jì)思維和方法，適應(yīng) C 端和 B 端數(shù)字產(chǎn)品的交互工作。

交互設(shè)計(jì)的認(rèn)知

1. 什么是交互設(shè)計(jì)

簡(jiǎn)而言之，使產(chǎn)品的原型設(shè)計(jì)無(wú)限接近用戶(hù)的心理模型，讓用戶(hù)更加有效地完成操作目的，通過(guò)改善用戶(hù)體驗(yàn)的方式提升產(chǎn)品價(jià)值，這便是交互設(shè)計(jì)。

交互設(shè)計(jì)是一門(mén)把抽象需求轉(zhuǎn)換為具象界面的交叉學(xué)科，重點(diǎn)是用戶(hù)行為設(shè)計(jì)，要實(shí)現(xiàn)恰當(dāng)?shù)挠脩?hù)體驗(yàn)，需要具備設(shè)計(jì)學(xué)、邏輯學(xué)、人機(jī)工程學(xué)、心理學(xué)、社會(huì)學(xué)等多門(mén)學(xué)科知識(shí)。

大家看到的用戶(hù)界面，往往只看到了設(shè)計(jì)的最終結(jié)果，但那只是設(shè)計(jì)的冰山一角，界面設(shè)計(jì)背后的思考和設(shè)計(jì)過(guò)程是我們看不見(jiàn)的，在后文小編會(huì)詳細(xì)闡述設(shè)計(jì)思維、設(shè)計(jì)方法等看不見(jiàn)的設(shè)計(jì)。

△ 看得見(jiàn)的設(shè)計(jì) & 看不見(jiàn)的設(shè)計(jì)

目前，交互設(shè)計(jì)師和產(chǎn)品經(jīng)理的工作變得有所重疊，不再區(qū)分得那么明顯，有的公司并沒(méi)有交互設(shè)計(jì)師崗位，而是由產(chǎn)品經(jīng)理兼任。

其實(shí)，交互設(shè)計(jì)師算得上是半個(gè)產(chǎn)品經(jīng)理，好的交互設(shè)計(jì)一定是具備產(chǎn)品思維的。當(dāng)界面設(shè)計(jì)總是爭(zhēng)論不休、沒(méi)有定論時(shí)，問(wèn)題在于缺乏明確的設(shè)計(jì)目標(biāo)，設(shè)計(jì)師要明確自己在為哪群用戶(hù)于什么場(chǎng)景下解決什么問(wèn)題。

2. 交互設(shè)計(jì)做什么

交互設(shè)計(jì)師在工作中接到的設(shè)計(jì)項(xiàng)目通?？煞譃閮深?lèi)。一類(lèi)是體驗(yàn)優(yōu)化類(lèi)項(xiàng)目，另一類(lèi)則是新產(chǎn)品或改版項(xiàng)目。體驗(yàn)優(yōu)化型的項(xiàng)目，一般是產(chǎn)品日常版本迭代，屬于常規(guī)項(xiàng)目。新產(chǎn)品或改版項(xiàng)目出現(xiàn)的頻率比較低，但非常重要，往往需要一定的競(jìng)品分析或調(diào)研工作。

交互設(shè)計(jì)師在對(duì)接這兩類(lèi)項(xiàng)目時(shí)，主要關(guān)注需求分析、用戶(hù)研究、信息架構(gòu)、流程設(shè)計(jì)、信息設(shè)計(jì)、原型設(shè)計(jì)、文案、數(shù)據(jù)分析、競(jìng)品分析 9 個(gè)方面。其中，需求分析最為重要，它包括用戶(hù)需求和產(chǎn)品需求的分析，需求分析是從用戶(hù)提出的需求出發(fā)，找到用戶(hù)內(nèi)心的真實(shí)需求，進(jìn)而轉(zhuǎn)化為產(chǎn)品需求的過(guò)程。用戶(hù)需求是用戶(hù)自己以為的需求或需要，產(chǎn)品需求是經(jīng)過(guò)我們分析后挖掘到的用戶(hù)的真實(shí)需求，并轉(zhuǎn)化為產(chǎn)品解決方案。此外，一般需要從商業(yè)、用戶(hù)、技術(shù)三個(gè)方面考慮，洞察需求的合理性。

△?交互設(shè)計(jì)研究方向

3. 產(chǎn)品、交互和 UI 的區(qū)別

用戶(hù)體驗(yàn)五要素是入門(mén)交互設(shè)計(jì)必備的基礎(chǔ)模型，通過(guò)用戶(hù)體驗(yàn)五要素可以直觀(guān)清晰地知道產(chǎn)品經(jīng)理、交互設(shè)計(jì)師和 UI 設(shè)計(jì)師工作的側(cè)重點(diǎn)和區(qū)別。

△?用戶(hù)體驗(yàn)五要素

首先，產(chǎn)品經(jīng)理主要側(cè)重于戰(zhàn)略層和范圍層。

具體思考產(chǎn)品目標(biāo)和用戶(hù)需求，通過(guò)對(duì)用戶(hù)需求的洞察，提出產(chǎn)品解決方案，將用戶(hù)需求轉(zhuǎn)化為產(chǎn)品需求，即功能規(guī)格和內(nèi)容需求，產(chǎn)品經(jīng)理更多思考產(chǎn)品的商業(yè)價(jià)值和滿(mǎn)足業(yè)務(wù)需求。

其次，交互設(shè)計(jì)師主要側(cè)重于產(chǎn)品的結(jié)構(gòu)層和框架層。

重點(diǎn)是行為設(shè)計(jì)和邏輯層面，權(quán)衡用戶(hù)價(jià)值和商業(yè)價(jià)值，側(cè)重產(chǎn)品用戶(hù)體驗(yàn)，提出更有效的設(shè)計(jì)解決方案。

根據(jù)用戶(hù)體驗(yàn)五要素模型可知，產(chǎn)品主要分為功能型產(chǎn)品和信息型產(chǎn)品，不同類(lèi)型的產(chǎn)品，交互設(shè)計(jì)的側(cè)重點(diǎn)也不同。對(duì)于功能類(lèi)型產(chǎn)品，側(cè)重功能交互設(shè)計(jì)和界面設(shè)計(jì)，而對(duì)于信息類(lèi)型產(chǎn)品，則側(cè)重信息架構(gòu)和導(dǎo)航設(shè)計(jì)。

最后，UI 設(shè)計(jì)師主要負(fù)責(zé)產(chǎn)品表現(xiàn)層，以用戶(hù)為中心，圍繞產(chǎn)品和交互設(shè)計(jì)的目標(biāo)展開(kāi)視覺(jué)設(shè)計(jì)。

UI 設(shè)計(jì)師偏向于感知設(shè)計(jì)，通過(guò)對(duì)比、視覺(jué)一致性、配色、排版、字體、字號(hào)、圖形符號(hào)等設(shè)計(jì)手法賦予產(chǎn)品良好的外觀(guān)體驗(yàn)和視覺(jué)感知，提升產(chǎn)品的視覺(jué)體驗(yàn)。
簡(jiǎn)而言之，設(shè)計(jì)師更注重創(chuàng)意及邏輯，設(shè)計(jì)目標(biāo)更加純粹，能夠更多地考慮用戶(hù)，設(shè)計(jì)方法更專(zhuān)業(yè)。產(chǎn)品經(jīng)理會(huì)站在產(chǎn)品全局視角考慮問(wèn)題，側(cè)重商業(yè)目標(biāo)。

△?設(shè)計(jì)師和產(chǎn)品經(jīng)理的區(qū)別

4. 交互設(shè)計(jì)的價(jià)值

產(chǎn)品從抽象到具象的設(shè)計(jì)過(guò)程中，交互設(shè)計(jì)起到了至關(guān)重要的作用。

交互設(shè)計(jì)是提升用戶(hù)體驗(yàn)的關(guān)鍵，設(shè)計(jì)師往往會(huì)兼顧用戶(hù)價(jià)值、商業(yè)價(jià)值和品牌價(jià)值等，根據(jù)用戶(hù)反饋和商業(yè)目標(biāo)不斷改善用戶(hù)體驗(yàn)，從而獲取用戶(hù)、增加用戶(hù)留存，提高市場(chǎng)占有份額。

交互設(shè)計(jì)師會(huì)分析并重塑需求，分析用戶(hù)行為特征，設(shè)計(jì)結(jié)構(gòu)、流程、界面、動(dòng)態(tài)效果并跟進(jìn)視覺(jué)、前端，及時(shí)整理線(xiàn)上問(wèn)題，準(zhǔn)備下一次產(chǎn)品版本迭代。

交互設(shè)計(jì)師可以將產(chǎn)品經(jīng)理從原型設(shè)計(jì)的工作中釋放出來(lái)，讓其有更多的時(shí)間思考產(chǎn)品，這樣可提升產(chǎn)品的研發(fā)效率，減少不必要的返工、理解成本和溝通成本，保證項(xiàng)目順利進(jìn)行。

設(shè)計(jì)思維

在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)和用戶(hù)體驗(yàn)設(shè)計(jì)中，除了動(dòng)手設(shè)計(jì)之外，學(xué)會(huì)如何思考非常重要。

互聯(lián)網(wǎng)進(jìn)入下半場(chǎng)，人口紅利消退，資本紅利和流量紅利逐漸萎縮，互聯(lián)網(wǎng)大環(huán)境的變化給互聯(lián)網(wǎng)企業(yè)和設(shè)計(jì)從業(yè)人員帶來(lái)了全新挑戰(zhàn)，業(yè)務(wù)增長(zhǎng)乏力成為當(dāng)下互聯(lián)網(wǎng)企業(yè)首要解決的問(wèn)題。隨著云計(jì)算快速發(fā)展，數(shù)據(jù)存儲(chǔ)成本變得越來(lái)越低，數(shù)據(jù)獲取也變得更加容易，大數(shù)據(jù)時(shí)代的來(lái)臨讓增長(zhǎng)更容易實(shí)現(xiàn)。

由于以上原因，設(shè)計(jì)思維也發(fā)生了變化。

過(guò)去，我們做設(shè)計(jì)往往注重用戶(hù)體驗(yàn)，強(qiáng)調(diào)用戶(hù)思維，遵循以用戶(hù)為中心的設(shè)計(jì)原則，以問(wèn)題為導(dǎo)向進(jìn)行設(shè)計(jì)。（以用戶(hù)為中心的設(shè)計(jì)思維最早是美國(guó)著名工業(yè)設(shè)計(jì)師亨利·德萊福斯提出，在他的著作《為人的設(shè)計(jì)》非常詳細(xì)地闡述了這一設(shè)計(jì)哲學(xué)）然而，現(xiàn)在我們做設(shè)計(jì)不再只強(qiáng)調(diào)用戶(hù)思維，而是以增長(zhǎng)為導(dǎo)向，圍繞產(chǎn)品增長(zhǎng)，以產(chǎn)品價(jià)值為中心進(jìn)行設(shè)計(jì)，并盡可能減少成本。

△?設(shè)計(jì)思維的轉(zhuǎn)變

綜上所述，本文闡述的是以用戶(hù)為中心，以增長(zhǎng)為導(dǎo)向，提升產(chǎn)品價(jià)值的用戶(hù)思維和增長(zhǎng)思維。其中，產(chǎn)品價(jià)值包括用戶(hù)價(jià)值、商業(yè)價(jià)值、品牌價(jià)值以及產(chǎn)品核心競(jìng)爭(zhēng)力等。用戶(hù)思維主要總結(jié)為 6 個(gè)方面，分別是用戶(hù)動(dòng)線(xiàn)、距離、用戶(hù)習(xí)慣、防呆、優(yōu)先級(jí)和場(chǎng)景。

1. 用戶(hù)思維

Part 1. 用戶(hù)動(dòng)線(xiàn)

用戶(hù)動(dòng)線(xiàn)，指用戶(hù)使用互聯(lián)網(wǎng)產(chǎn)品的行為軌跡，即用戶(hù)行為路徑設(shè)計(jì)。常見(jiàn)的用戶(hù)動(dòng)線(xiàn)設(shè)計(jì)方法有視覺(jué)引導(dǎo)用戶(hù)注意力、小紅點(diǎn)消息提示引導(dǎo)用戶(hù)、頁(yè)面切換動(dòng)效、暗示更多內(nèi)容、留白、F 型視線(xiàn)運(yùn)動(dòng)等。

首先，通過(guò)視覺(jué)色彩和區(qū)塊大小對(duì)比引導(dǎo)用戶(hù)注意力。

例如，美圖秀秀首頁(yè)底部導(dǎo)航設(shè)計(jì)，中間的加號(hào)按鈕使用紅色色塊體現(xiàn)，放在底部導(dǎo)航中間位置，并增大了展示和點(diǎn)擊區(qū)域。當(dāng)用戶(hù)關(guān)注導(dǎo)航區(qū)域時(shí)，會(huì)優(yōu)先被引導(dǎo)至加號(hào)入口。

小編認(rèn)為這樣設(shè)計(jì)的目的是體現(xiàn)此入口的重要性，具體跟美圖秀秀的產(chǎn)品定位有很大關(guān)系。美圖秀秀前期的產(chǎn)品定位是做一款免費(fèi)使用的拍照工具，用戶(hù)用完即走，但它目前在進(jìn)行產(chǎn)品商業(yè)化轉(zhuǎn)型，所以產(chǎn)品重新定位為以工具為基礎(chǔ)，做圖片社區(qū)，目的是希望增加用戶(hù)留存，便于產(chǎn)品商業(yè)化。

△?美圖秀秀首頁(yè)-底部全局導(dǎo)航

京東、天貓、淘寶 APP 商品詳情頁(yè)底部加入購(gòu)物車(chē)和立即購(gòu)買(mǎi)按鈕，同樣通過(guò)視覺(jué)手段引導(dǎo)用戶(hù)瀏覽商品詳情后快速找到購(gòu)買(mǎi)入口。

△?京東、天貓、淘寶 APP 商品詳情頁(yè)

其次，小紅點(diǎn)消息提示引導(dǎo)。

下圖所示分別是微信朋友圈有新動(dòng)態(tài)和新互動(dòng)消息時(shí)出現(xiàn)的提示引導(dǎo)，當(dāng)進(jìn)入朋友圈主頁(yè)時(shí)，界面會(huì)出現(xiàn)好友互動(dòng)提示，點(diǎn)擊后直接定位互動(dòng)動(dòng)態(tài)。這是通過(guò)小紅點(diǎn)的方式引導(dǎo)用戶(hù)進(jìn)入朋友圈查看動(dòng)態(tài)消息，其設(shè)計(jì)目的是提升朋友圈活躍度。

△?微信-發(fā)現(xiàn)界面

其三，頁(yè)面切換動(dòng)效設(shè)計(jì)。

動(dòng)效在頁(yè)面跳轉(zhuǎn)中起到路徑引導(dǎo)、幫助用戶(hù)理解頁(yè)面邏輯的作用，讓用戶(hù)在使用產(chǎn)品的過(guò)程中不會(huì)迷失，頁(yè)面切換動(dòng)效在移動(dòng) APP 中被廣泛應(yīng)用，它也被列入 iOS 和 Android 平臺(tái)設(shè)計(jì)規(guī)范中。

例如，用戶(hù)通過(guò)右滑界面，當(dāng)前界面會(huì)向右滑出屏幕，清晰地展示界面與界面之間的關(guān)系。抑或查看某商品促銷(xiāo)信息時(shí)，從界面底部彈出對(duì)話(huà)框，關(guān)閉會(huì)原路返回。類(lèi)似這樣的頁(yè)面切換動(dòng)效能幫助用戶(hù)更好地使用產(chǎn)品，提升產(chǎn)品使用體驗(yàn)。

△?天貓(左)、京東(右)切換動(dòng)效

其四，暗示更多內(nèi)容。

當(dāng)某個(gè)板塊超出屏幕可視區(qū)域時(shí)，需露出部分內(nèi)容，以暗示用戶(hù)還有更多內(nèi)容。

在移動(dòng)端界面設(shè)計(jì)中，由于界面可視區(qū)域有限，所以需要拓展可視界面區(qū)域，通常水平展示更多內(nèi)容時(shí)使用左滑查看更多，默認(rèn)展示 2 個(gè)半或 3 個(gè)半的內(nèi)容，暗示用戶(hù)界面右側(cè)有更多信息。

由于界面首屏內(nèi)容一般會(huì)有更多的曝光機(jī)會(huì)，頁(yè)面越長(zhǎng)，用戶(hù)沒(méi)耐心繼續(xù)向下訪(fǎng)問(wèn)，因此為了暗示用戶(hù)向下繼續(xù)瀏覽，通常將首屏底部?jī)?nèi)容展示一半。

△?京東(左)、京東家電(右)

其五，留白。

留白的界面處理方式，會(huì)暗示用戶(hù)瀏覽信息的順序。
例如，下圖所示的 B 端表單采用兩列布局。水平方向和垂直方向表單間距一致時(shí)，用戶(hù)會(huì)不知道該按行瀏覽還是按列瀏覽。當(dāng)把兩列表單的行間距留白調(diào)大，用戶(hù)默認(rèn)會(huì)按行瀏覽表單填寫(xiě)。

△?兩列表單布局

其六，F(xiàn) 型視線(xiàn)運(yùn)動(dòng)。

符合用戶(hù)視線(xiàn)的設(shè)計(jì)更容易獲得用戶(hù)的點(diǎn)擊。有研究表明，用戶(hù)瀏覽信息停留時(shí)間最長(zhǎng)的布局方式是「F」型。

例如，Google 搜索結(jié)果頁(yè)面的信息布局方式就是采用了「F」型結(jié)構(gòu)。

△?Google 搜索結(jié)果頁(yè)

了解用戶(hù)行為軌跡，可以為界面優(yōu)化提供科學(xué)依據(jù)。對(duì)于電商產(chǎn)品而言，通過(guò)科學(xué)分析用戶(hù)視線(xiàn)停留時(shí)間及次數(shù)，可以精準(zhǔn)把握商品的市場(chǎng)反饋。

下圖是通過(guò)眼球追蹤儀了解到用戶(hù)瀏覽信息的軌跡。

△?眼球追蹤儀研究用戶(hù)瀏覽軌跡

Part 2. 距離

距離，是指界面元素離用戶(hù)手指或鼠標(biāo)的距離遠(yuǎn)近。費(fèi)茨定律指出目標(biāo)越大，指向越快；目標(biāo)越近，指向也越快。

還是以美圖秀秀首頁(yè)為例，界面上半部分的相機(jī)、拼圖、美化圖片等工具入口設(shè)計(jì)的點(diǎn)擊區(qū)域足夠大，且入口之間保留足夠的間距，用戶(hù)點(diǎn)擊工具入口更快更精準(zhǔn)。一般移動(dòng)端距離用戶(hù)手指最近且容易操作的區(qū)域是界面底部區(qū)域，所以使用頻率高的全局導(dǎo)航會(huì)優(yōu)先考慮放在界面底部。

△?美圖秀秀首頁(yè)

Part 3. 用戶(hù)習(xí)慣

在界面設(shè)計(jì)中，保留用戶(hù)已有的產(chǎn)品使用習(xí)慣，可以有效降低用戶(hù)的學(xué)習(xí)成本。一般成長(zhǎng)期或成熟期的產(chǎn)品在規(guī)劃改版時(shí)，會(huì)衡量新老用戶(hù)的比重以及改版的價(jià)值，不會(huì)頻繁輕易改版，頻繁改版會(huì)影響老用戶(hù)使用習(xí)慣，導(dǎo)致用戶(hù)流失。如果改版的價(jià)值高于用戶(hù)使用習(xí)慣，而用戶(hù)不想嘗試改變已有的使用習(xí)慣，可以通過(guò)激勵(lì)措施引導(dǎo)用戶(hù)。

例如，通訊社交產(chǎn)品微信，已經(jīng)培養(yǎng)了用戶(hù)使用通訊社交產(chǎn)品的習(xí)慣，所以后來(lái)支付寶新增的通訊產(chǎn)品-朋友，其界面設(shè)計(jì)和交互操作方式基本和微信的聊天界面一致，這一設(shè)計(jì)決策是考慮到大量用戶(hù)在使用微信時(shí)形成了用戶(hù)習(xí)慣。

△?微信(左)、支付寶(右)聊天界面

Part 4. 防呆

防止用戶(hù)誤操作并可快速恢復(fù)，避免用戶(hù)在操作界面時(shí)出錯(cuò)，這是一種防呆設(shè)計(jì)。常見(jiàn)的防呆設(shè)計(jì)方法有增加必要的限制、操作流程優(yōu)化、及時(shí)反饋、容錯(cuò)設(shè)計(jì)。

首先，設(shè)計(jì)必要的限制。

當(dāng)用戶(hù)填寫(xiě)表單信息時(shí)，增加必要的設(shè)計(jì)限制，可以有效減少用戶(hù)填寫(xiě)表單的出錯(cuò)情況，減少用戶(hù)成功填寫(xiě)表單的時(shí)間，提升效率。

下圖分別是 PC 端攜程旅游和同程旅游添加乘客信息的交互設(shè)計(jì)，攜程旅游添加身份證信息時(shí)允許用戶(hù)輸入中文字符，但身份證只能是數(shù)字或字母組成，所以允許用戶(hù)輸入中文字符是無(wú)效的。而同程旅游考慮到了身份證號(hào)碼的特殊性，限制不可輸入中文字符，同時(shí)放大展示已輸入證件號(hào)碼，視覺(jué)上六個(gè)數(shù)字為一組，保留間距，方便用戶(hù)邊輸入邊核對(duì)，用戶(hù)體驗(yàn)更好，更多地考慮了用戶(hù)操作場(chǎng)景。

△?攜程旅游(左)、同程旅游(右)添加身份證號(hào)碼交互

其二，操作邏輯。

通過(guò)改變操作流程，可以有效解決因流程設(shè)計(jì)導(dǎo)致的用戶(hù)痛點(diǎn)。

比如，在使用 ATM 機(jī)取錢(qián)時(shí)，經(jīng)常取完錢(qián)后直接離開(kāi)，忘記取卡，導(dǎo)致銀行卡被鎖定，找回銀行卡比較麻煩。針對(duì)這個(gè)問(wèn)題，中國(guó)光大銀行和平安銀行改變了 ATM 機(jī)取錢(qián)流程，先退卡再取錢(qián)，通過(guò)優(yōu)化流程，解決用戶(hù)銀行卡被鎖定的痛點(diǎn)。

△?中國(guó)光大銀行 ATM 機(jī)(左)、平安銀行 ATM 機(jī)(右)取錢(qián)場(chǎng)景

其三，及時(shí)反饋。

界面要及時(shí)響應(yīng)用戶(hù)的操作并提供反饋。

同程旅游 PC 端添加身份證件號(hào)碼時(shí)，當(dāng)用戶(hù)輸入字符，光標(biāo)離開(kāi)文本框后即刻校驗(yàn)該字段，及時(shí)告知用戶(hù)當(dāng)前所填信息是否正確。

△?同程旅游添加證件號(hào)碼

移動(dòng)端場(chǎng)景比較復(fù)雜，如斷網(wǎng)時(shí)，不僅要給出反饋，還應(yīng)提供解決方案。

例如網(wǎng)易云音樂(lè)無(wú)網(wǎng)絡(luò)場(chǎng)景設(shè)計(jì)，首先會(huì)提示用戶(hù)無(wú)網(wǎng)絡(luò)，將部分功能置灰，同時(shí)展示已緩存的數(shù)據(jù)和界面框架，滿(mǎn)足用戶(hù)的核心需求——聽(tīng)歌。

無(wú)網(wǎng)絡(luò)或網(wǎng)絡(luò)弱時(shí)，提供給用戶(hù)可行的解決方案可以有效幫助用戶(hù)重新連接網(wǎng)絡(luò)，保證用戶(hù)體驗(yàn)流暢。

△?網(wǎng)易云音樂(lè)無(wú)網(wǎng)絡(luò)狀態(tài)

再比如，網(wǎng)易新聞、今日頭條、騰訊新聞等內(nèi)容型產(chǎn)品的設(shè)計(jì)，用戶(hù)點(diǎn)擊過(guò)的內(nèi)容入口會(huì)置灰，把已讀和未讀內(nèi)容區(qū)分開(kāi)，避免用戶(hù)查看重復(fù)信息，這是通過(guò)視覺(jué)方式處理的及時(shí)反饋。

△?內(nèi)容型產(chǎn)品

其四，容錯(cuò)設(shè)計(jì)。

主要目的是防止用戶(hù)誤操作而導(dǎo)致用戶(hù)數(shù)據(jù)丟失。刪除重要數(shù)據(jù)信息時(shí)，需提供二次確認(rèn)。

同樣是同程旅游訂單填寫(xiě)頁(yè)面，未填寫(xiě)信息時(shí)，點(diǎn)擊返回則直接返回，若已填寫(xiě)訂單信息，離開(kāi)頁(yè)面時(shí)會(huì)提供二次確認(rèn)，一旦離開(kāi)，則當(dāng)前頁(yè)面的數(shù)據(jù)信息不會(huì)保留，給用戶(hù)一次確認(rèn)離開(kāi)的機(jī)會(huì)。這樣做一是促進(jìn)完成訂單增加訂單轉(zhuǎn)化率，二是考慮到誤操作的可能。

△?同程旅游-訂單填寫(xiě)

Part 5. 優(yōu)先級(jí)

優(yōu)先級(jí)，又稱(chēng)之為「層次或?qū)蛹?jí)」。層次分明的產(chǎn)品界面可以幫助用戶(hù)一眼抓住最關(guān)注和最重要的信息，并快速?zèng)Q策。

產(chǎn)品、交互和視覺(jué)都有優(yōu)先級(jí)之分。

產(chǎn)品和交互所謂的優(yōu)先級(jí)分為內(nèi)容、功能、流程、場(chǎng)景和用戶(hù)。內(nèi)容上區(qū)分主要信息和次要信息，功能上區(qū)分主要功能、次要功能、基礎(chǔ)功能，考慮功能價(jià)值和使用頻率，流程上分產(chǎn)品主流程和分支流程，場(chǎng)景則考慮用戶(hù)主要的使用場(chǎng)景，而用戶(hù)方面則需考慮產(chǎn)品的目標(biāo)用戶(hù)、目標(biāo)用戶(hù)中的核心用戶(hù)（能帶來(lái)收入的目標(biāo)用戶(hù)群體），產(chǎn)品是為大多數(shù)目標(biāo)用戶(hù)設(shè)計(jì)的。

△?交互優(yōu)先級(jí)

視覺(jué)的優(yōu)先級(jí)分為對(duì)比、顏色、區(qū)塊大小、文字大小等，優(yōu)先級(jí)明確的視覺(jué)設(shè)計(jì)可以讓整體排版布局更加富有層次，讓內(nèi)容的可讀性得到明顯的提升。

舉個(gè)例子，支付寶中的余額寶主頁(yè)和京東金融主頁(yè)設(shè)計(jì)思路都是先給出結(jié)論，幫助用戶(hù)快速?zèng)Q策，因此重要的信息都是收益信息，這是用戶(hù)最關(guān)注的信息，所以視覺(jué)上采用大色塊的高優(yōu)先級(jí)方式展示，且位置放在首屏第一個(gè)板塊，用戶(hù)一眼可以看到與自己利益強(qiáng)相關(guān)的信息。

△?余額寶(左)、京東金融(右)

Part 6. 場(chǎng)景

場(chǎng)景是設(shè)計(jì)思維中很重要的一部分。設(shè)計(jì)是解決用戶(hù)在具體不同場(chǎng)景下遇到的問(wèn)題，這里的「場(chǎng)景」有兩層指向，一是用戶(hù)在現(xiàn)實(shí)生活中的真實(shí)場(chǎng)景，二是用戶(hù)使用某產(chǎn)品時(shí)的場(chǎng)景。

首先，用戶(hù)在真實(shí)場(chǎng)景下的設(shè)計(jì)思考。

比如用戶(hù)在昏暗環(huán)境下使用摩拜掃碼用車(chē)，摩拜提供的手電筒功能會(huì)根據(jù)環(huán)境光線(xiàn)強(qiáng)弱自動(dòng)開(kāi)啟手電筒，考慮了用戶(hù)真實(shí)使用場(chǎng)景。

△?在灰暗環(huán)境下使用摩拜掃碼用車(chē)

再看蘋(píng)果手機(jī)來(lái)電顯示界面設(shè)計(jì)，用戶(hù)未使用手機(jī)時(shí)和使用中的電話(huà)接聽(tīng)界面設(shè)計(jì)不同。

用戶(hù)未使用手機(jī)時(shí)，接聽(tīng)界面交互是通過(guò)滑動(dòng)接聽(tīng)，增加接聽(tīng)電話(huà)操作成本，防止用戶(hù)誤操作拒接電話(huà)或接聽(tīng)電話(huà)，因?yàn)橛脩?hù)未使用手機(jī)的場(chǎng)景很多，手機(jī)放在口袋或包里，可能會(huì)因?yàn)檫\(yùn)動(dòng)等因素誤操作。

而用戶(hù)正在使用手機(jī)中則是直接展示拒絕和接聽(tīng)按鈕，如果用戶(hù)未使用手機(jī)時(shí)的界面也是這樣，誤操作的幾率會(huì)非常大，當(dāng)有重要人士或親密朋友來(lái)電話(huà)，誤操作拒接會(huì)引起不必要的麻煩。

這是基于用戶(hù)在不同場(chǎng)景下需求不同而做的設(shè)計(jì)。

△ 在不同場(chǎng)景下用蘋(píng)果手機(jī)接聽(tīng)電話(huà)的界面

第二，基于用戶(hù)使用產(chǎn)品時(shí)的場(chǎng)景設(shè)計(jì)。

美團(tuán)外賣(mài)首頁(yè)根據(jù)用戶(hù)每天吃飯的時(shí)間點(diǎn)，分早晨、中午、晚上、夜宵共四個(gè)時(shí)間段，基于 LBS 地理位置在不同的時(shí)間段分別為用戶(hù)提供不同好店，精準(zhǔn)為用戶(hù)推薦好店，解決用戶(hù)吃的問(wèn)題。

這是基于場(chǎng)景考慮的設(shè)計(jì)。

△?美團(tuán)外賣(mài)首頁(yè)不同時(shí)間段的界面設(shè)計(jì)

2. 增長(zhǎng)思維

用戶(hù)思維是交互設(shè)計(jì)最基礎(chǔ)的設(shè)計(jì)思維，此外，增長(zhǎng)思維也同樣重要。

混沌大學(xué)李善友教授曾說(shuō)過(guò)「作為一個(gè)企業(yè)，第一重要的事情是增長(zhǎng)?！箤?duì)于互聯(lián)網(wǎng)上市公司而言，業(yè)務(wù)營(yíng)收的高速增長(zhǎng)可以提高公司估值，對(duì)于企業(yè)投資者而言，則可以提高投資回報(bào)率。

從 2018 年以來(lái)，比較有影響力的設(shè)計(jì)大會(huì)，比如產(chǎn)品經(jīng)理大會(huì)，有一半的演講者都在講增長(zhǎng)，可見(jiàn)，增長(zhǎng)已是必然趨勢(shì)。既然大家都在講增長(zhǎng)，增長(zhǎng)是 KPI 指標(biāo)嗎？作為設(shè)計(jì)師，該如何助力業(yè)務(wù)和產(chǎn)品增長(zhǎng)呢？

據(jù)小編了解，國(guó)內(nèi)最早的增長(zhǎng)概念來(lái)自于范冰的《增長(zhǎng)黑客》這本書(shū)，而增長(zhǎng)概念起初來(lái)源于美國(guó)硅谷。

增長(zhǎng)并不是 KPI 指標(biāo)，KPI 只是短期階段性指標(biāo)，且更多的可能是一些虛榮指標(biāo)，產(chǎn)品經(jīng)理為了達(dá)到 KPI 指標(biāo)而犧牲用戶(hù)體驗(yàn)是常有的事情，那么什么是增長(zhǎng)呢？

Part 1. 什么是增長(zhǎng)

傳統(tǒng)的產(chǎn)品生命周期分探索期、成長(zhǎng)期、成熟期和衰退期這四個(gè)時(shí)期，不同階段的產(chǎn)品目標(biāo)是不同的，對(duì)應(yīng)的產(chǎn)品增長(zhǎng)指標(biāo)（指本階段最能體現(xiàn)產(chǎn)品價(jià)值和企業(yè)價(jià)值的指標(biāo)）也會(huì)不同。

在探索期，主要會(huì)采用 MVP 的方法（MVP 全稱(chēng) MinimumViableProduct，最小可行性產(chǎn)品）以最小成本和最快的研發(fā)速度上線(xiàn)產(chǎn)品，快速驗(yàn)證產(chǎn)品方向是否正確，如果方向不正確可迅速調(diào)整產(chǎn)品方向；

△?MVP

產(chǎn)品進(jìn)入成長(zhǎng)期階段，產(chǎn)品主要的目標(biāo)是確定產(chǎn)品差異化定位，搶占市場(chǎng)并迅速占領(lǐng)用戶(hù)心智；

在成熟期階段，需重點(diǎn)考慮產(chǎn)品如何進(jìn)行商業(yè)化變現(xiàn)，以及如何提升商業(yè)價(jià)值。上面介紹過(guò)的美圖秀秀 APP 已經(jīng)是成熟期的產(chǎn)品了，所以產(chǎn)品也在進(jìn)行商業(yè)化轉(zhuǎn)型。從企業(yè)戰(zhàn)略層的視角看，有了增長(zhǎng)意識(shí)后，我們需要盡早在產(chǎn)品成熟期階段思考如何提升產(chǎn)品增長(zhǎng)，否則當(dāng)產(chǎn)品進(jìn)入衰退期再考慮產(chǎn)品增長(zhǎng)是比較困難的事情，市場(chǎng)競(jìng)爭(zhēng)激烈。

比如美團(tuán)，最早持續(xù)給企業(yè)帶來(lái)高速營(yíng)收增長(zhǎng)的業(yè)務(wù)線(xiàn)是美食，在產(chǎn)品成長(zhǎng)期階段對(duì)標(biāo)的是大眾點(diǎn)評(píng)，解決的是用戶(hù)本地生活吃飯的需求。后來(lái)在原有業(yè)務(wù)線(xiàn)基礎(chǔ)上不斷探索，逐漸分化出來(lái)多條新的業(yè)務(wù)助力企業(yè)增長(zhǎng)，比如電影演出、酒店旅游、美團(tuán)外賣(mài)、出行（打車(chē)、摩拜單車(chē)、火車(chē)票、機(jī)票）、美容美發(fā)生活服務(wù)等等。

現(xiàn)在發(fā)展比較成熟的業(yè)務(wù)線(xiàn)是美團(tuán)外賣(mài)，已成為美團(tuán)第二條成功助力企業(yè)營(yíng)收增長(zhǎng)的重要業(yè)務(wù)線(xiàn)，為什么美團(tuán)會(huì)有多條成功的能帶來(lái)增長(zhǎng)的業(yè)務(wù)，這和企業(yè)的創(chuàng)新分不開(kāi)。

所以，產(chǎn)品增長(zhǎng)如何實(shí)現(xiàn)呢？

Part 2. 如何實(shí)現(xiàn)增長(zhǎng)

從業(yè)務(wù)角度看，需要業(yè)務(wù)創(chuàng)新實(shí)現(xiàn)營(yíng)收增長(zhǎng)，就要深入洞察用戶(hù)并挖掘還沒(méi)被滿(mǎn)足的需求。

從產(chǎn)品角度看，需要通過(guò)數(shù)據(jù)體現(xiàn)增長(zhǎng)，前面提到了云計(jì)算的快速發(fā)展使得產(chǎn)品獲取數(shù)據(jù)非常地容易，所以通過(guò)數(shù)據(jù)分析可以由數(shù)據(jù)驅(qū)動(dòng)業(yè)務(wù)增長(zhǎng)，找到能提升業(yè)務(wù)目標(biāo)的解決方案，不斷優(yōu)化產(chǎn)品體驗(yàn)。

常用的增長(zhǎng)方法是 AARRR 用戶(hù)轉(zhuǎn)化漏斗增長(zhǎng)模型，具體先后順序分別是獲客、激活、留存、增加收入、推薦傳播。但是，AARRR 用戶(hù)轉(zhuǎn)化漏斗增長(zhǎng)模型更適用于成長(zhǎng)期和成熟期的產(chǎn)品，并不適合用于探索期產(chǎn)品。探索期產(chǎn)品最重要的是用戶(hù)留存，是要驗(yàn)證產(chǎn)品方向，是不太需要花巨大成本推廣產(chǎn)品先獲取客戶(hù)的，而是要先考慮用戶(hù)留存、后激活沉睡用戶(hù)，再考慮產(chǎn)品獲客的事情，用戶(hù)留存可以體現(xiàn)產(chǎn)品的價(jià)值，驗(yàn)證用戶(hù)需求。

△?AARRR模型

從設(shè)計(jì)角度看，在做具體設(shè)計(jì)時(shí)，需要具備增長(zhǎng)思維，以用戶(hù)為中心，以增長(zhǎng)為導(dǎo)向，不斷提升產(chǎn)品價(jià)值?？紤]產(chǎn)品不同生命周期最重要的核心指標(biāo)，這個(gè)指標(biāo)需要能代表產(chǎn)品長(zhǎng)期價(jià)值和企業(yè)價(jià)值，是項(xiàng)目團(tuán)隊(duì)都認(rèn)可的一項(xiàng)指標(biāo)，大家圍繞共同的目標(biāo)挖掘提升增長(zhǎng)的爆破點(diǎn)。

具體可通過(guò)用戶(hù)調(diào)研，深挖用戶(hù)差異化的需求，圍繞產(chǎn)品階段性的目標(biāo)，結(jié)合用戶(hù)畫(huà)像和用戶(hù)體驗(yàn)地圖找到設(shè)計(jì)機(jī)會(huì)點(diǎn)來(lái)提升增長(zhǎng)指標(biāo)。用戶(hù)調(diào)研分析可以是定性分析或定量分析或者兩者結(jié)合，對(duì)于探索期新產(chǎn)品最好是定性分析，畢竟沒(méi)有足夠多的數(shù)據(jù)，樣本量少也不一定有說(shuō)服力。此外，提升產(chǎn)品增長(zhǎng)還可以使用 A/B 測(cè)試。

設(shè)計(jì)方法

用戶(hù)體驗(yàn)五要素是學(xué)習(xí)交互設(shè)計(jì)的基礎(chǔ)，以用戶(hù)為中心，以問(wèn)題和增長(zhǎng)為導(dǎo)向提升產(chǎn)品價(jià)值是重要的設(shè)計(jì)思維。

目前，具體的設(shè)計(jì)方法很多，比如構(gòu)建人物模型（用戶(hù)畫(huà)像）、用戶(hù)體驗(yàn)（旅程）地圖、設(shè)計(jì)沖刺法、上癮模型、海盜模型（AARRR 模型）、卡諾模型、福格行為模型（Fogg’s behavior model）、服務(wù)藍(lán)圖（峰終定律 Peak-End Rule）等等，但是小編認(rèn)為最基礎(chǔ)的也是最通用的還是基于用戶(hù)場(chǎng)景的目標(biāo)導(dǎo)向設(shè)計(jì)法。

沒(méi)有目標(biāo)的設(shè)計(jì)都是在耍流氓！

1. 基于場(chǎng)景目標(biāo)導(dǎo)向設(shè)計(jì)法

基于場(chǎng)景的目標(biāo)導(dǎo)向設(shè)計(jì)法是指：特定類(lèi)型用戶(hù)（who）在某時(shí)間（when）某地點(diǎn)（where）、遇到什么（what）時(shí)，有怎樣的訴求（want），會(huì)通過(guò)什么手段（how）來(lái)滿(mǎn)足其訴求，簡(jiǎn)稱(chēng) 5W1H 法則。

△?5W1H法則

舉個(gè)例子，現(xiàn)在有這樣的需求：假設(shè)我們?cè)?APP 首頁(yè)首屏里，要插入登錄領(lǐng)新人禮包的卡片。

用戶(hù)的場(chǎng)景可以描述為：在用戶(hù)進(jìn)入首頁(yè)瀏覽模塊信息（地點(diǎn)）的時(shí)候（時(shí)間），看到了「新人禮包 - 188 元新人專(zhuān)享權(quán)益」的卡片（出現(xiàn)某物），未注冊(cè)的新用戶(hù)（特定類(lèi)型用戶(hù)）萌發(fā)了領(lǐng)取禮包的想法（訴求），會(huì)點(diǎn)擊卡片（手段）通過(guò)注冊(cè)來(lái)領(lǐng)取新人禮包。

可以確定設(shè)計(jì)的目標(biāo)是引導(dǎo)未注冊(cè)的用戶(hù)領(lǐng)取新人紅包。

△?左:京東首頁(yè)-用戶(hù)已登錄;右:京東首頁(yè)-用戶(hù)未登錄

交互設(shè)計(jì)流程一般有六個(gè)步驟。分別是需求分析、確定設(shè)計(jì)目標(biāo)、競(jìng)品分析、任務(wù)流程設(shè)計(jì)、信息架構(gòu) & 功能交互設(shè)計(jì)和原型設(shè)計(jì)。原型設(shè)計(jì)只占整個(gè)交互設(shè)計(jì)過(guò)程的 1/3，更多的是設(shè)計(jì)思考與分析。

△?交互設(shè)計(jì)流程

在需求分析階段，我們需要考慮需求來(lái)源、明晰需求類(lèi)型、深入了解需求的背景和目的，理性評(píng)估需求合理性與價(jià)值，清楚目標(biāo)用戶(hù)、洞察用戶(hù)心理和用戶(hù)需求目的。

通過(guò)需求分析的結(jié)果，提煉出產(chǎn)品目標(biāo)和用戶(hù)目標(biāo)，以確定設(shè)計(jì)目標(biāo)并指導(dǎo)交互界面設(shè)計(jì)。

如果是新產(chǎn)品或改版項(xiàng)目，在進(jìn)入設(shè)計(jì)之前，有必要做競(jìng)品分析，競(jìng)品分析的目的是吸取競(jìng)品優(yōu)點(diǎn)并發(fā)現(xiàn)不足，根據(jù)競(jìng)品分析的結(jié)論優(yōu)化設(shè)計(jì)，而不是照抄競(jìng)品。

當(dāng)然，不是所有的項(xiàng)目都必須要做競(jìng)品分析。

確定設(shè)計(jì)目標(biāo)之后，開(kāi)始任務(wù)流程設(shè)計(jì)，分解用戶(hù)使用產(chǎn)品的主要任務(wù)和分支任務(wù)，設(shè)計(jì)滿(mǎn)足需求的用戶(hù)路徑和操作流程。

信息架構(gòu)和功能設(shè)計(jì)分信息型和功能型產(chǎn)品，思考產(chǎn)品結(jié)構(gòu)和信息組織。

原型階段主要是導(dǎo)航設(shè)計(jì)、信息設(shè)計(jì)、框架設(shè)計(jì)和文案等。

設(shè)計(jì)工具

工欲善其事，必先利其器。

交互設(shè)計(jì)師常用的設(shè)計(jì)工具有 Axure、Sketch、墨刀等。Axure 適應(yīng) Mac OS 系統(tǒng)和 Windows 系統(tǒng)，支持協(xié)同辦公，通常用來(lái)制作的是低保真原型，原型無(wú)法導(dǎo)出切圖標(biāo)注，效率一般。如果電腦是 Mac OS 系統(tǒng)，可以使用 Sketch，使用 marketch 或 Sketch Measure 插件導(dǎo)出切圖標(biāo)注，再結(jié)合 Sketch 組件的運(yùn)用，可以直接輸出高保真原型了，能提高設(shè)計(jì)的效率，現(xiàn)在很多公司設(shè)計(jì)團(tuán)隊(duì)采用 Sketch 進(jìn)行設(shè)計(jì)。

△?設(shè)計(jì)工具

最后，推薦一款 web 端輕量化的設(shè)計(jì)工具 Figma，這是一款在云端制作原型的工具，基本上是 Sketch 的 web 版本，可以多人同時(shí)在線(xiàn)協(xié)同工作，但需要連網(wǎng)使用，當(dāng)需要將原型傳給項(xiàng)目成員時(shí)，文件無(wú)需保存到本地，在線(xiàn)分享即可，團(tuán)隊(duì)成員也無(wú)需下載本地文件，直接在線(xiàn)瀏覽原型還可以在線(xiàn)評(píng)論，大大提高了設(shè)計(jì)和溝通效率。

總結(jié)

本篇文章主要從認(rèn)知、思維、方法和工具四個(gè)方面講述了交互設(shè)計(jì)。

交互設(shè)計(jì)的認(rèn)知篇章主要介紹了交互設(shè)計(jì)是使產(chǎn)品的原型設(shè)計(jì)更接近用戶(hù)心理模型，讓用戶(hù)更有效地達(dá)到操作目的，通過(guò)提升用戶(hù)體驗(yàn)的方式提升產(chǎn)品價(jià)值。

設(shè)計(jì)思維模塊介紹了以用戶(hù)為中心、以問(wèn)題和增長(zhǎng)為導(dǎo)向、提升產(chǎn)品價(jià)值的設(shè)計(jì)思維，包括用戶(hù)思維和增長(zhǎng)思維。用戶(hù)思維介紹了用戶(hù)動(dòng)線(xiàn)、距離、用戶(hù)習(xí)慣、防呆、優(yōu)先級(jí)、場(chǎng)景六個(gè)思考要素。

設(shè)計(jì)方法介紹了基于場(chǎng)景的目標(biāo)導(dǎo)向設(shè)計(jì)法和交互設(shè)計(jì)一般流程。

最后一部分則簡(jiǎn)單介紹了交互設(shè)計(jì)師常用的幾款設(shè)計(jì)工具。

設(shè)計(jì)無(wú)邊界。近兩年，交互設(shè)計(jì)師和產(chǎn)品經(jīng)理、視覺(jué)設(shè)計(jì)師的邊界越來(lái)越模糊，因此，每位設(shè)計(jì)師都不要給自己設(shè)限制，局限自己只做交互或只做視覺(jué)，可以嘗試站在業(yè)務(wù)、產(chǎn)品和用戶(hù)的更高視角思考交互設(shè)計(jì)，提升設(shè)計(jì)的價(jià)值。

交互設(shè)計(jì)師不是技能合成設(shè)計(jì)師，需要運(yùn)用綜合能力或合作能力為更高的目標(biāo)服務(wù)。

以上僅代表小編個(gè)人觀(guān)點(diǎn)，僅供參考，感謝閱讀！
（部分配圖來(lái)源于網(wǎng)絡(luò)，侵刪）

更多交互設(shè)計(jì)知識(shí)點(diǎn)：

參考資料：

• 范冰，《增長(zhǎng)黑客》
• 劉津，《破繭成蝶1》《破繭成蝶2》
• 亨利 · 德雷夫斯，《為人的設(shè)計(jì)》

歡迎關(guān)注作者微信公眾號(hào)：「Design with CloudAI」