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

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

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

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

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

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

所以這其中便涉及到一個如何讓人產(chǎn)生行為進行互動，以及用什么樣的方式來互動的問題。所以我們在出設(shè)計稿的時候需要有意識地注重引導(dǎo)的設(shè)計。

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

1. 一個頁面只展示一個重點，并盡量只保留一個操作項

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

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

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

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

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

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

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

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

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

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

通過以上這些設(shè)計方法，我們在瀏覽的時候因為被產(chǎn)品吸引，介紹清晰明了，表現(xiàn)簡潔生動，就會莫名的產(chǎn)生好感，并產(chǎn)生繼續(xù)向下滑動查看的動機。

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

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

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

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

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

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

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

所以，通過上面的這些案例發(fā)現(xiàn)，有趣、好玩、包含深刻意義的設(shè)計能讓用戶非常自發(fā)的產(chǎn)生行為，這種自愿是發(fā)自內(nèi)心的，且非常能夠調(diào)動用戶情緒，做完后還非常有成就感。所以我們在日常設(shè)計的時候，也可以考慮是否可以加入一些有趣的元素、制造驚喜，因為人天生喜歡驚喜！

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

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

4. 動效

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

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

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

最后，放一個微信的頁面，我覺得設(shè)計得很好，很容易理解。即：語音、語音轉(zhuǎn)文字、取消語音?？纯次⑿攀侨绾螌⑦@一系列的功能做到這么優(yōu)秀的。

不知道到大家注意到?jīng)]有，設(shè)計師將文案中間都是空格隔開的，先按住 再說話 松開后就會發(fā)送，所以就有 “按住 講話” “松開 發(fā)送”，行為的先后在文案上就給到你感知；其次是在語音錄入界面的反饋做得真的非常不多，手指移動到取消、轉(zhuǎn)文本上對應(yīng)的頁面反饋、文案反饋，讓人真的非常容易理解。

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

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

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

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

具體如何快速了解業(yè)務(wù)，我自身的建議是：親自去嘗試，將有關(guān)模塊所有可以點的都親自去走一遍，將流程梳理出來，并且把各個場景都梳理出來（不同場景、不同角色），只有這樣我們才能在最快的時間內(nèi)對自己所做的事情有個整體的認知。

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

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

例2：我其中的一個案子是關(guān)于QQ小游戲開發(fā)者平臺優(yōu)化，接到需求時就被告知需要進行優(yōu)化，產(chǎn)品有給到需要優(yōu)化的點。但是如果不和產(chǎn)品細致的溝通就不知道促成這次優(yōu)化的背景是因為合規(guī)，因為新政策導(dǎo)致需要對平臺進行合規(guī)的優(yōu)化，讓各類信息、審核更加規(guī)范化；

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

所以在深入溝通后，我了解了大背景就是合規(guī)和提效，在了解了這個大背景后，我就開始對整個管理端進行了整個流程的梳理，這個過程很繁雜，因為真的太復(fù)雜了，涉及到的角色、流程、模塊太多，以及很多頁面我都咩有權(quán)限，所以導(dǎo)致我到處問，花了很多時間。

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

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

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

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