從表現層來看，交互設計師産出的内容，除了流程的設計，就隻有一頁頁黑白稿了。然而，産出稿子的過程真是那麼簡單嗎？本文作者對他在畫設計稿時思考的一些問題進行了分析，一起來看一下吧。

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

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

但那個産出稿子的過程真是這麼簡單嗎？今天就來來聊下，我在畫設計稿的時候會去思考什麼問題，大家看到内容後也可以說說自己畫稿的時候會思考什麼，多讨論多交流~

一、有意識地注重引導設計

交互從本身的名稱而言，就是用戶與産品的互動，隻不過我們日常更多的是放在手機、電腦、ipad這塊屏幕上進行，但是其本質就是人和某個東西的行為互動，人産生行為進行輸入，機器根據人的行為做出反應而已，就是這是一個雙向的過程。

所以這其中便涉及到一個如何讓人産生行為進行互動，以及用什麼樣的方式來互動的問題。所以我們在出設計稿的時候需要有意識地注重引導的設計。

這裡的引導設計不是指我們日常看到最多的新手引導，而是通過我們在頁面上信息、結構、排布、視覺重點及動畫等設計從而對用戶進行引導。不知道你發現沒有，微信上其實很少有新手引導的設計，據說是張小龍覺得需要新手引導的設計就沒做好設計。接下來我們就從行為引導設計的角度來聊聊應該怎麼做。

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

優秀設計的經典要素之一就是形式簡約，以簡馭繁。對于交互設計師而言，就是運用最少的元素控件來完成任務；對于視覺而言，就是用最少的視覺區别明确表達意思。關于這點我想可以好好去體驗下Apple的官網你就可以感受。

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

進步一進入到産品的詳細細節，我以Apple Watch 為例，來看看 Apple的設計師是如何一步步的引導你了解産品，不斷刺激你心坎，最終下單的。

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

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

②随後便是漸隐出主題商品的核心賣點，除了主題商品的高清圖外，包含主體标題“越野心越馳”，這樣的一個标題文案不光與主題視頻緊扣，文案押韻上也是精心設計，野、馳，光是文案都很有吸引力；其次是下面的小黑字都是在突出這款新手表的核心特點。這很重要，通過突出核心特點，吸引用戶，從而産生向下繼續看的行為。

③繼續向下滑動即開始展開産品的詳細說明，先是給的總覽，告知用戶新設計，體現“新”就一行字加産品圖，沒有其餘任何信息，就這麼簡單。果然是有質感的圖片就是會自然而然的吸引你，apple官網上的所有産品圖都是實體拍攝 後期，不是建模，保留了材質應有質感。

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

從上述Apple逛網我們可以看出，設計師們通過以下幾個方式來引導用戶從上至下浏覽産品細節：

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

通過以上這些設計方法，我們在浏覽的時候因為被産品吸引，介紹清晰明了，表現簡潔生動，就會莫名的産生好感，并産生繼續向下滑動查看的動機。

2. 以創意撬動用戶行為

通過建立關聯的方式，打動用戶，讓用戶自己自發産生、停止行為，接下來來看下以下幾個案例：

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

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

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

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

QQ的去紅點的設計算是經典吧，在大衆産品對紅點都不重視的情況下，對紅點做了小的創新設計，我當時第一次用的時候玩這個玩了好久~

所以，通過上面的這些案例發現，有趣、好玩、包含深刻意義的設計能讓用戶非常自發的産生行為，這種自願是發自内心的，且非常能夠調動用戶情緒，做完後還非常有成就感。所以我們在日常設計的時候，也可以考慮是否可以加入一些有趣的元素、制造驚喜，因為人天生喜歡驚喜！

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

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

4. 動效

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

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

例2：對于很多視頻類的産品，在提供封面讓用戶選擇時，都會提供預覽動圖，讓用戶更好的注意并理解其内容，進而促進内容本身的轉化。

最後，放一個微信的頁面，我覺得設計得很好，很容易理解。即：語音、語音轉文字、取消語音。看看微信是如何将這一系列的功能做到這麼優秀的。

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

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

小結：關注注重引導設計我就講這三方面，希望可以讓大家在做設計的時候不要一提到引導就想到新手引導，而是可以先從頁面信息展示、趣味創意、動效、位置、文案等上面優先去思考，不要偷懶，一上來就新手引導，請記住，在引導設計上，新手引導應該是最不應該先考慮的。

二、産品的思考與業務的理解

這點我覺得是很多設計師都欠缺的，計師不理解業務，往往和産品隻能進行“不對等”溝通，隻有真正理解了業務才會正确發現問題，正确發現問題才能正确解決問題。在深入理解業務的基礎上，可以發揮更大的設計價值，挖掘更多的設計機會點，才能站在更高的視角為産品服務，輔助産品決策，幫助産品更快速達成商業目标。特别特别是B端設計師。

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

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

并且還包含着未成年人開戶等合規一系列流程，深入了解後，會發現這真是個龐大的工程！隻有了解了業務，才可以cover到更多場景，把控到更多細節，才能最終達到提升體驗的目的。

例2：我其中的一個案子是關于QQ小遊戲開發者平台優化，接到需求時就被告知需要進行優化，産品有給到需要優化的點。但是如果不和産品細緻的溝通就不知道促成這次優化的背景是因為合規，因為新政策導緻需要對平台進行合規的優化，讓各類信息、審核更加規範化；

其次是内部審核過程中效率不夠高，所以需要對審核流程、模式進行優化，在合規和效率上共同進行改版。

所以在深入溝通後，我了解了大背景就是合規和提效，在了解了這個大背景後，我就開始對整個管理端進行了整個流程的梳理，這個過程很繁雜，因為真的太複雜了，涉及到的角色、流程、模塊太多，以及很多頁面我都咩有權限，所以導緻我到處問，花了很多時間。

但是這樣的一個梳理過程也讓我有個全盤的視角，在做設計的時候，畫着畫着就會自然想到當前這個和另外某個模塊是有關聯的，從而進行聯動優化，這樣就能更加全盤，更閉環地完成這個任務。

最終在充分了解了整個背景及業務後，便可以和産品溝通拟定整體的優化策略，再後面就有序輸出與跟進落地開發便可。

最後，可以多去看下市場上不同的産品，辨析他們為什麼這麼做？舉個例子：為什麼抖快采用了單列模式，而小紅書、B站等還在用雙列模式呢？什麼樣的交互模式适合自己的産品呢？歡迎大家可以留言讨論。

總結：以上兩點就是我近期的一些想法，自己在這兩點中踩了很多坑，希望你們不要踩坑，最後關注一下我呗~

本文由 @小發的設計筆記 原創發布于人人都是産品經理，未經作者許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。

該文觀點僅代表作者本人，人人都是産品經理平台僅提供信息存儲空間服務。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部