從表現(xiàn)層來(lái)看，交互設(shè)計(jì)師產(chǎn)出的內(nèi)容，除了流程的設(shè)計(jì)，就只有一頁(yè)頁(yè)黑白稿了。然而，產(chǎn)出稿子的過(guò)程真是那么簡(jiǎn)單嗎？本文作者對(duì)他在畫(huà)設(shè)計(jì)稿時(shí)思考的一些問(wèn)題進(jìn)行了分析，一起來(lái)看一下吧。

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

每次加班爆肝出的設(shè)計(jì)稿在他人眼中不過(guò)就是拼一拼，似乎對(duì)于交互設(shè)計(jì)師而言，不用完善邊界場(chǎng)景，輸出交互稿好像是放個(gè)屁一樣容易。雖然從表現(xiàn)層來(lái)看，交互設(shè)計(jì)師產(chǎn)出的內(nèi)容除去流程的設(shè)計(jì)，剩下的就是一頁(yè)頁(yè)可能沒(méi)有特別好看的黑白稿了。

但那個(gè)產(chǎn)出稿子的過(guò)程真是這么簡(jiǎn)單嗎？今天就來(lái)來(lái)聊下，我在畫(huà)設(shè)計(jì)稿的時(shí)候會(huì)去思考什么問(wèn)題，大家看到內(nèi)容后也可以說(shuō)說(shuō)自己畫(huà)稿的時(shí)候會(huì)思考什么，多討論多交流~

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

交互從本身的名稱(chēng)而言，就是用戶(hù)與產(chǎn)品的互動(dòng)，只不過(guò)我們?nèi)粘８嗟氖欠旁谑謾C(jī)、電腦、ipad這塊屏幕上進(jìn)行，但是其本質(zhì)就是人和某個(gè)東西的行為互動(dòng)，人產(chǎn)生行為進(jìn)行輸入，機(jī)器根據(jù)人的行為做出反應(yīng)而已，就是這是一個(gè)雙向的過(guò)程。

所以這其中便涉及到一個(gè)如何讓人產(chǎn)生行為進(jìn)行互動(dòng)，以及用什么樣的方式來(lái)互動(dòng)的問(wèn)題。所以我們?cè)诔鲈O(shè)計(jì)稿的時(shí)候需要有意識(shí)地注重引導(dǎo)的設(shè)計(jì)。

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

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

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

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

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

①進(jìn)入詳情直接是視頻自動(dòng)播放，通過(guò)一個(gè)視頻將手表的外觀、結(jié)構(gòu)堅(jiān)硬、耐磨、耐高低溫、續(xù)航、GPS、防水、麥克風(fēng)收音、檢測(cè)等性能賣(mài)點(diǎn)在一個(gè)精美的視頻中完美呈現(xiàn)，并且視頻根據(jù)不同賣(mài)點(diǎn)特性選擇了特定的場(chǎng)景進(jìn)行拍攝，通過(guò)這樣的方式進(jìn)一步凸顯出特點(diǎn)。

ps：值得注意的是，進(jìn)入詳情后，視頻并不是全部播完，因?yàn)橐曨l總共有3分多鐘，所以設(shè)計(jì)師采用的是將不同場(chǎng)景的頁(yè)面切出來(lái)，只展示幾個(gè)特點(diǎn)的畫(huà)面，然后就該視頻就自動(dòng)消失，帶領(lǐng)用戶(hù)進(jìn)入到更加詳細(xì)的內(nèi)容中。

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

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

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

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

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

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

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

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

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

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

繩索唰的一聲斷開(kāi)，那雙稚嫩的手重獲自由。

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

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

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

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

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

4. 動(dòng)效

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

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

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

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

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

當(dāng)然這塊還包括，大小 位置 文案啥的，具體可以看我之前寫(xiě)的一篇：怎樣設(shè)計(jì)轉(zhuǎn)化頁(yè)？重點(diǎn)關(guān)注2個(gè)方面！

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

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

這點(diǎn)我覺(jué)得是很多設(shè)計(jì)師都欠缺的，計(jì)師不理解業(yè)務(wù)，往往和產(chǎn)品只能進(jìn)行“不對(duì)等”溝通，只有真正理解了業(yè)務(wù)才會(huì)正確發(fā)現(xiàn)問(wèn)題，正確發(fā)現(xiàn)問(wèn)題才能正確解決問(wè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)的都親自去走一遍，將流程梳理出來(lái)，并且把各個(gè)場(chǎng)景都梳理出來(lái)（不同場(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ì)師沒(méi)去好好梳理支付相關(guān)的業(yè)務(wù)，可能最后產(chǎn)出就僅僅局限在支付主流程，而忽視了其實(shí)更多影響體驗(yàn)的是一些分支流程細(xì)節(jié)的處理。但實(shí)際上，僅僅是一個(gè)支付頁(yè)面所涉及的場(chǎng)景及流程是非常的龐大的。

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

例2：我其中的一個(gè)案子是關(guān)于QQ小游戲開(kāi)發(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)化，讓各類(lèi)信息、審核更加規(guī)范化；

其次是內(nèi)部審核過(guò)程中效率不夠高，所以需要對(duì)審核流程、模式進(jìn)行優(yōu)化，在合規(guī)和效率上共同進(jìn)行改版。

所以在深入溝通后，我了解了大背景就是合規(guī)和提效，在了解了這個(gè)大背景后，我就開(kāi)始對(duì)整個(gè)管理端進(jìn)行了整個(gè)流程的梳理，這個(gè)過(guò)程很繁雜，因?yàn)檎娴奶珡?fù)雜了，涉及到的角色、流程、模塊太多，以及很多頁(yè)面我都咩有權(quán)限，所以導(dǎo)致我到處問(wèn)，花了很多時(shí)間。

但是這樣的一個(gè)梳理過(guò)程也讓我有個(gè)全盤(pán)的視角，在做設(shè)計(jì)的時(shí)候，畫(huà)著畫(huà)著就會(huì)自然想到當(dāng)前這個(gè)和另外某個(gè)模塊是有關(guān)聯(lián)的，從而進(jìn)行聯(lián)動(dòng)優(yōu)化，這樣就能更加全盤(pán)，更閉環(huán)地完成這個(gè)任務(wù)。

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

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

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