資深交互設(shè)計(jì)師是如何出稿的？來看實(shí)戰(zhàn)案例分析！

編者按：交互設(shè)計(jì)師是如何產(chǎn)出稿子的？本文總結(jié)了4個(gè)引導(dǎo)設(shè)計(jì)的技巧和3個(gè)業(yè)務(wù)的理解。

更多作者干貨：

不知道你在工作中有沒有遇到這樣的場(chǎng)景：“哎呀，你畫下交互稿更快的呀，就不同東西拼一拼下就好啦”、“一個(gè)星期就只有這幾個(gè)黑白的頁面？效率會(huì)不會(huì)太低了？”、“這個(gè)需求很簡單，類似這樣畫出來就行”、“只要這幾個(gè)頁面，下午可以給到吧”......

每次加班爆肝出的設(shè)計(jì)稿在他人眼中不過就是拼一拼，似乎對(duì)于交互設(shè)計(jì)師而言，不用完善邊界場(chǎng)景，輸出交互稿好像是放個(gè)屁一樣容易。雖然從表現(xiàn)層來看，交互設(shè)計(jì)師產(chǎn)出的內(nèi)容除去流程的設(shè)計(jì)，剩下的就是一頁頁可能沒有特別好看的黑白稿了。但那個(gè)產(chǎn)出稿子的過程真是這么簡單嗎？今天就來來聊下，我在畫設(shè)計(jì)稿的時(shí)候會(huì)去思考什么問題，大家看到內(nèi)容后也可以說說自己畫稿的時(shí)候會(huì)思考什么，多討論多交流~

一、有意識(shí)的注重引導(dǎo)設(shè)計(jì)

交互從本身的名稱而言，就是用戶與產(chǎn)品的互動(dòng)，只不過我們?nèi)粘８嗟氖欠旁谑謾C(jī)、電腦、iPad 這塊屏幕上進(jìn)行，但是其本質(zhì)就是人和某個(gè)東西的行為互動(dòng)，人產(chǎn)生行為進(jìn)行輸入，機(jī)器根據(jù)人的行為做出反應(yīng)而已，就是這是一個(gè)雙向的過程，所以這其中便涉及到一個(gè)如何讓人產(chǎn)生行為進(jìn)行互動(dòng)，以及用什么樣的方式來互動(dòng)的問題。所以我們?cè)诔鲈O(shè)計(jì)稿的時(shí)候需要注重引導(dǎo)的設(shè)計(jì)。

這里的引導(dǎo)設(shè)計(jì)不是指我們?nèi)粘？吹阶疃嗟男率忠龑?dǎo)，而是通過我們?cè)陧撁嫔闲畔ⅰ⒔Y(jié)構(gòu)、排布、視覺重點(diǎn)及動(dòng)畫等設(shè)計(jì)從而對(duì)用戶進(jìn)行引導(dǎo)。不知道你發(fā)現(xiàn)沒有，微信上其實(shí)很少有新手引導(dǎo)的設(shè)計(jì)，據(jù)說是張小龍覺得需要新手引導(dǎo)的設(shè)計(jì)就沒做好設(shè)計(jì)。接下來我們就從行為引導(dǎo)設(shè)計(jì)的角度來聊聊應(yīng)該怎么做。

1. 一個(gè)頁面只展示一個(gè)重點(diǎn)，并盡量只保留一個(gè)操作項(xiàng)

優(yōu)秀設(shè)計(jì)的經(jīng)典要素之一就是形式簡約，以簡馭繁。對(duì)于交互設(shè)計(jì)師而言，就是運(yùn)用最少的元素控件來完成任務(wù)；對(duì)于視覺而言，就是用最少的視覺區(qū)別明確表達(dá)意思。關(guān)于這點(diǎn)我想可以好好去體驗(yàn)下 Apple 的官網(wǎng)你就可以感受：

官網(wǎng)上全是自家產(chǎn)品的高清大圖，文字寥寥無幾，通過精美的高清大圖及主要的功能入口，簡約大氣的展示了自己賣點(diǎn)，且因?yàn)闆]有其他元素的干擾，用戶很容易可以看到“進(jìn)一步了解”、“購買”的操作入口，即使 Apple 并沒有用大按鈕，用了很弱的文字按鈕，我們依舊可以看到。

進(jìn)步一進(jìn)入到產(chǎn)品的詳細(xì)細(xì)節(jié)，我以 Apple Watch 為例，來看看 Apple 的設(shè)計(jì)師是如何一步步的引導(dǎo)你了解產(chǎn)品，不斷刺激你心坎，最終下單的。

① 進(jìn)入詳情直接是視頻自動(dòng)播放，通過一個(gè)視頻將手表的外觀、結(jié)構(gòu)堅(jiān)硬、耐磨、耐高低溫、續(xù)航、GPS、防水、麥克風(fēng)收音、檢測(cè)等性能賣點(diǎn)在一個(gè)精美的視頻中完美呈現(xiàn)，并且視頻根據(jù)不同賣點(diǎn)特性選擇了特定的場(chǎng)景進(jìn)行拍攝，通過這樣的方式進(jìn)一步凸顯出特點(diǎn)。值得注意的是，進(jìn)入詳情后，視頻并不是全部播完，因?yàn)橐曨l總共有3分多鐘，所以設(shè)計(jì)師采用的是將不同場(chǎng)景的頁面切出來，只展示幾個(gè)特點(diǎn)的畫面，然后就該視頻就自動(dòng)消失，帶領(lǐng)用戶進(jìn)入到更加詳細(xì)的內(nèi)容中。

② 隨后便是漸隱出主題商品的核心賣點(diǎn)，除了主題商品的高清圖外，包含主體標(biāo)題“越野心越馳”，這樣的一個(gè)標(biāo)題文案不光與主題視頻緊扣，文案押韻上也是精心設(shè)計(jì)，野、馳，光是文案都很有吸引力；其次是下面的小黑字都是在突出這款新手表的核心特點(diǎn)。這很重要，通過突出核心特點(diǎn)，吸引用戶，從而產(chǎn)生向下繼續(xù)看的行為。

③ 繼續(xù)向下滑動(dòng)即開始展開產(chǎn)品的詳細(xì)說明，先是給的總覽，告知用戶新設(shè)計(jì)，體現(xiàn)“新”就一行字加產(chǎn)品圖，沒有其余任何信息，就這么簡單。果然是有質(zhì)感的圖片就是會(huì)自然而然的吸引你，apple官網(wǎng)上的所有產(chǎn)品圖都是實(shí)體拍攝+后期，不是建模，保留了材質(zhì)應(yīng)有質(zhì)感。

④ 而后開始對(duì)各個(gè)特征進(jìn)行詳細(xì)說明，在這些詳細(xì)說明中，可以看到運(yùn)用了大量的流暢動(dòng)畫進(jìn)行點(diǎn)對(duì)點(diǎn)的詳細(xì)展示，根據(jù)用戶下滑的行為，每次都僅展示一行關(guān)鍵字，讓用戶的視覺焦點(diǎn)始終跟著他們的設(shè)計(jì)走，更加專注，一步步強(qiáng)化核心特點(diǎn)，同時(shí)這樣的描述也能讓用戶更容易理解。

從上述 Apple 逛網(wǎng)我們可以看出，設(shè)計(jì)師們通過以下幾個(gè)方式來引導(dǎo)用戶從上至下瀏覽產(chǎn)品細(xì)節(jié)：

1. 視頻展示，通過視頻代替文字直接展示核心賣點(diǎn)，場(chǎng)景更具代入感，用戶更好理解
2. 標(biāo)題+高清圖，排除其他雜亂信息干擾，專注圖和文案
3. 大量的動(dòng)圖，根據(jù)文案搭配動(dòng)圖展示，使其介紹的點(diǎn)與動(dòng)圖緊密結(jié)合，非常容易理解

通過以上這些設(shè)計(jì)方法，我們?cè)跒g覽的時(shí)候因?yàn)楸划a(chǎn)品吸引，介紹清晰明了，表現(xiàn)簡潔生動(dòng)，就會(huì)莫名的產(chǎn)生好感，并產(chǎn)生繼續(xù)向下滑動(dòng)查看的動(dòng)機(jī)。

2. 以創(chuàng)意撬動(dòng)用戶行為

通過建立關(guān)聯(lián)的方式，打動(dòng)用戶，讓用戶自己自發(fā)產(chǎn)生、停止行為，接下來來看下以下幾個(gè)案例：

通過煙霧、視頻等傳感器，有人在廣告牌前抽煙時(shí)，畫面中的人物就會(huì)咳嗽，通過這樣的方式引起他人注意，從而影響他人行為，即掐斷煙

厚實(shí)的面包片被切下它將被一只略顯粗糙的手拿走，你恍然大悟，露出笑容，原來你輕輕一刷的 2 歐元，代表了給第三世界的孩子食糧與自由。

繩索唰的一聲斷開，那雙稚嫩的手重獲自由。

鋼琴樓梯。通過增加走樓梯的趣味度，改善人們的行為方式

QQ 的去紅點(diǎn)的設(shè)計(jì)算是經(jīng)典吧，在大眾產(chǎn)品對(duì)紅點(diǎn)都不重視的情況下，對(duì)紅點(diǎn)做了小的創(chuàng)新設(shè)計(jì)，我當(dāng)時(shí)第一次用的時(shí)候玩這個(gè)玩了好久~

所以，通過上面的這些案例發(fā)現(xiàn)，有趣、好玩、包含深刻意義的設(shè)計(jì)能讓用戶非常自發(fā)的產(chǎn)生行為，這種自愿是發(fā)自內(nèi)心的，且非常能夠調(diào)動(dòng)用戶情緒，做完后還非常有成就感。所以我們?cè)谌粘ＴO(shè)計(jì)的時(shí)候，也可以考慮是否可以加入一些有趣的元素、制造驚喜，因?yàn)槿颂焐矚g驚喜！

3. 人臉是一種被驗(yàn)證過有效引導(dǎo)用戶的方式

喜歡看臉是人的天性，人喜歡看有明顯面部特征的東西，以及會(huì)受到人的視線的引導(dǎo)。

4. 動(dòng)效

人眼對(duì)動(dòng)的東西都非常敏感，即使這個(gè)東西在我們以為的視覺邊緣，也能成功吸引用戶的注意。最常見的就是網(wǎng)頁的左下角、右下角有動(dòng)態(tài)的廣告，即使角落只有一小塊的空間，但是一旦動(dòng)起來，用戶便可第一時(shí)間注意到。

例 1：一些常用 APP 的主要轉(zhuǎn)化按鈕都加入一些動(dòng)效，以及手指點(diǎn)擊的效果，引導(dǎo)你點(diǎn)擊按鈕從而實(shí)現(xiàn)轉(zhuǎn)化

例 2：對(duì)于很多視頻類的產(chǎn)品，在提供封面讓用戶選擇時(shí)，都會(huì)提供預(yù)覽動(dòng)圖，讓用戶更好的注意并理解其內(nèi)容，進(jìn)而促進(jìn)內(nèi)容本身的轉(zhuǎn)化。

最后，放一個(gè)微信的頁面，我覺得設(shè)計(jì)得很好，很容易理解。即:語音、語音轉(zhuǎn)文字、取消語音。看看微信是如何將這一系列的功能做到這么優(yōu)秀的。

不知道到大家注意到?jīng)]有，設(shè)計(jì)師將文案中間都是空格隔開的，先按住 再說話 松開后就會(huì)發(fā)送，所以就有 “按住 講話” “松開 發(fā)送”，行為的先后在文案上就給到你感知；其次是在語音錄入界面的反饋?zhàn)龅恼娴姆浅２欢啵种敢苿?dòng)到取消、轉(zhuǎn)文本上對(duì)應(yīng)的頁面反饋、文案反饋，讓人真的非常容易理解。

當(dāng)然這塊還包括，大小 位置 文案啥的，具體可以看我之前寫的一篇：

小結(jié)：關(guān)注注重引導(dǎo)設(shè)計(jì)我就講這三方面，希望可以讓大家在做設(shè)計(jì)的時(shí)候不要一提到引導(dǎo)就想到新手引導(dǎo)，而是可以先從頁面信息展示、趣味創(chuàng)意、動(dòng)效、位置、文案等上面優(yōu)先去思考，不要偷懶，一上來就新手引導(dǎo)，請(qǐng)記住，在引導(dǎo)設(shè)計(jì)上，新手引導(dǎo)應(yīng)該是最不應(yīng)該先考慮的。

二、產(chǎn)品的思考與業(yè)務(wù)的理解

這點(diǎn)我覺得是很多設(shè)計(jì)師都欠缺的，設(shè)計(jì)師不理解業(yè)務(wù)，往往和產(chǎn)品只能進(jìn)行“不對(duì)等”溝通，只有真正理解了業(yè)務(wù)才會(huì)正確發(fā)現(xiàn)問題，正確發(fā)現(xiàn)問題才能正確解決問題。在深入理解業(yè)務(wù)的基礎(chǔ)上，可以發(fā)揮更大的設(shè)計(jì)價(jià)值，挖掘更多的設(shè)計(jì)機(jī)會(huì)點(diǎn)，才能站在更高的視角為產(chǎn)品服務(wù)，輔助產(chǎn)品決策，幫助產(chǎn)品更快速達(dá)成商業(yè)目標(biāo)。特別特別是 B 端設(shè)計(jì)師。

具體如何快速了解業(yè)務(wù)，我自身的建議是：

親自去嘗試，將有關(guān)模塊所有可以點(diǎn)的都親自去走一遍，將流程梳理出來，并且把各個(gè)場(chǎng)景都梳理出來（不同場(chǎng)景、不同角色），只有這樣我們才能在最快的時(shí)間內(nèi)對(duì)自己所做的事情有個(gè)整體的認(rèn)知。

例 1：QQ 支付的一個(gè)優(yōu)化案，希望對(duì)支付進(jìn)行體驗(yàn)優(yōu)化。這是產(chǎn)品提出的訴求，如果設(shè)計(jì)師沒去好好梳理支付相關(guān)的業(yè)務(wù)，可能最后產(chǎn)出就僅僅局限在支付主流程，而忽視了其實(shí)更多影響體驗(yàn)的是一些分支流程細(xì)節(jié)的處理。但實(shí)際上，僅僅是一個(gè)支付頁面所涉及的場(chǎng)景及流程是非常的龐大的。

并且還包含著未成年人開戶等合規(guī)一系列流程，深入了解后，會(huì)發(fā)現(xiàn)這真是個(gè)龐大的工程！只有了解了業(yè)務(wù)，才可以 cover 到更多場(chǎng)景，把控到更多細(xì)節(jié)，才能最終達(dá)到提升體驗(yàn)的目的。

例 2：我其中的一個(gè)案子是關(guān)于 QQ 小游戲開發(fā)者平臺(tái)優(yōu)化，接到需求時(shí)就被告知需要進(jìn)行優(yōu)化，產(chǎn)品有給到需要優(yōu)化的點(diǎn)。但是如果不和產(chǎn)品細(xì)致的溝通就不知道促成這次優(yōu)化的背景是因?yàn)楹弦?guī)，因?yàn)樾抡邔?dǎo)致需要對(duì)平臺(tái)進(jìn)行合規(guī)的優(yōu)化，讓各類信息、審核更加規(guī)范化；其次是內(nèi)部審核過程中效率不夠高，所以需要對(duì)審核流程、模式進(jìn)行優(yōu)化，在合規(guī)和效率上共同進(jìn)行改版。

所以在深入溝通后，我了解了大背景就是合規(guī)和提效，在了解了這個(gè)大背景后，我就開始對(duì)整個(gè)管理端進(jìn)行了整個(gè)流程的梳理，這個(gè)過程很繁雜，因?yàn)檎娴奶珡?fù)雜了，涉及到的角色、流程、模塊太多，以及很多頁面我都咩有權(quán)限，所以導(dǎo)致我到處問，花了很多時(shí)間，但是這樣的一個(gè)梳理過程也讓我有個(gè)全盤的視角，在做設(shè)計(jì)的時(shí)候，畫著畫著就會(huì)自然想到當(dāng)前這個(gè)和另外某個(gè)模塊是有關(guān)聯(lián)的，從而進(jìn)行聯(lián)動(dòng)優(yōu)化，這樣就能更加全盤，更閉環(huán)的完成這個(gè)任務(wù)。

最終在充分了解了整個(gè)背景及業(yè)務(wù)后，便可以和產(chǎn)品溝通擬定整體的優(yōu)化策略，再后面就有序輸出與跟進(jìn)落地開發(fā)便可。

最后，可以多去看下市場(chǎng)上不同的產(chǎn)品，辨析他們?yōu)槭裁催@么做？舉個(gè)例子：為什么抖快采用了單列模式，而小紅書、B 站等還在用雙列模式呢？什么樣的交互模式適合自己的產(chǎn)品呢？歡迎大家可以留言討論

總結(jié)：以上兩點(diǎn)就是我近期的一些想法，自己在這兩點(diǎn)中踩了很多坑，希望你們不要踩坑，最后關(guān)注一下我唄~

歡迎關(guān)注作者微信公眾號(hào)：「小發(fā)的設(shè)計(jì)筆記」