作爲設計師，在拿到產品需求的時候，所要做的不僅僅是完成產品的設計工作，更重要的是要思考如何通過設計的的手段去推動產品背後的商業價值達到最大化，提升視覺體驗、增強用戶的粘性以達到用戶轉化的目的。不需要我們設計的有多麼複雜，可能是一個步驟的簡化、一句打動人心的文案、貼心的提示、趣味的動效…

「美團外賣」喊你回家喫最便宜的午餐

1. 產品體驗：

打開美團外賣APP，在每個店鋪下方都有突出的滿減提示，進入店鋪詳情頁，在頂部和底部同樣都有，選好商品後，商品的總價達到滿減條件，就可以減掉對應的金額。

2. 設計思考：

滿20減18，後面還有6元無門檻紅包？這已經是免費的午餐了，而且還賺了4塊錢。於是進入商品列表上下齊開「一頓操作猛如虎，定睛一看原地杵」，這裏的商品要麼就是低於20的，要麼就是40左右，免費不存在的，要不就在這家隨便喫點吧。

其實類似於這種滿減提示在外面平臺一點都不稀奇，用戶也都不傻，也許進入店鋪發現不對後轉身就走，可平臺還是會把這種滿減提示作爲最耀眼的存在，屢試不爽。

在用戶完成轉化的三要素中，動機、能力、觸發，缺一不可。店鋪下方的滿減提示則是利用用戶的貪小便宜的心理，優惠的數值越高，越能引起注意力和購買慾望，足以讓用戶產生下單的動機；進入店鋪後，看完所有商品，即使沒有符合用戶心理預期的價格，因滿減產生的動機逐漸降低，但新的購買動機產生了，通過紅包、好評、折扣、美圖…等能力依然在提升用戶的購買慾望，觸發用戶下單，並最終完成轉化。這種選擇「讓利」的方式去吸引用戶，也是短期內也最有效方式。

「淘寶」激發用戶情緒的彈窗設計

1. 產品體驗：

在體驗淘寶簽到功能時，簽到成功會出現彈窗提示「簽到成功」，並告知此時下單紅包即可翻倍，點擊關閉，彈出二層彈窗「紅包未翻倍」及「限頻道內使用」的文字提醒。

2. 設計思考：

淘寶通過二層彈窗提醒用戶退出當前頁面可能帶來的影響、後果，讓用戶判斷當前的退出決策是否正確，畢竟相對於‘收穫’來說，‘損失’更讓人在乎某事物。 同時告知退出會讓下次行動付出更多的金錢成本，這種更多成本的投入會讓用戶產生顧慮，從而激發用戶的情緒並轉化爲行動。

「支付寶」螞蟻莊園-轉化用戶稍縱即逝的消費動機

1. 產品體驗：

在支付寶的螞蟻莊園餵養小雞，通過養雞攢愛心，集滿 5 顆愛心，即可捐贈給公益項目，另外可以完成多種任務來獲得飼料來餵養小雞；

點擊螞蟻莊園左側的果樹去種樹免費領取水果，同樣可以完成各種任務獲得肥料，施肥促使果樹成長，最終果實成熟就可免費領取真實的水果。

2. 設計思考：

支付寶通過公益的方式已經讓用戶對螞蟻莊園產生了很強的粘性。項目的受益對象都是弱勢羣體，比如留守兒童、殘疾幼兒、貧困女性等等，並根據捐贈的愛心進行好友排名。雖然有一部分人做好事不留名，但不排除大部分用戶都喜追求面子心理，總是希望自己最有面子，因爲它可以帶來一種榮耀和心理上的滿足感，如果做好事能讓他人知曉，會激勵更多的人行善，因而用戶排名起到了極大的用戶激勵作用。

最近，螞蟻莊園增加了種果樹功能，選擇自己喜歡的水果種果樹，通過施肥最終讓果樹成熟就可以免費領取真實的水果，在開始出現「免費領水果」的時候就已經激起了用戶的貪婪心理。種植果樹後，需要通過施肥促使果樹成長，在成長的不同階段需要的肥料也會根據基數遞增式的增加，需要用戶完成不同的任務獲得肥料，可以完成的任務雖然很多，但大部分都是九牛一毛。

用戶每天可以通過逛精選商品獲得大量的肥料，進入商品頁面，系統會推薦用戶最近在淘寶瀏覽過相似類型的商品，停留15秒即可領取肥料，同時如果下單更可領取近乎10倍的肥料，促使水果成熟的更快。根據 希克定律：用戶決策所需要花費的時間隨着選擇的數量和複雜性增加而增加。系統通過減少可供用戶選擇的選項以及爲了「免費領水果」獲得肥料而可能下單的潛在動機，推薦最近瀏覽過的類似商品，促使用戶快速做出決策，以到達成交的目的。（PS：本人爲了領取大量的肥料，已經買了好幾次之前想買而沒有買的商品）

「CCtalk」友好的彈窗提示

1. 產品體驗：

進入「cctalk」APP首頁，底部會自動出現最近一次學習記錄的彈窗小提示，點擊即可進入繼續學習，也可手動點擊關閉，在沒有任何操作的情況，時間達到5s也會自動關閉。

2. 設計思考：

cctall是一個重量級的產品，進入此應用的用戶通常帶有目的性，都是以學習爲主，不至於是用戶在漫無目的情況下進來娛樂休閒一番吧。進入首頁的學習記錄彈窗是介於toast與snackbar之間，延長了toast的顯示時間，並加入了一個跳轉鏈接，同時也可以關閉或自動消失，起到提醒用戶作用的同時，又不影響其他的操作。

如果你不知道什麼是toast和snackbar，下面這兩篇文章能幫你快速知曉：

一個好的產品會在恰當的時間給予恰當的反饋，不反饋、反饋不及時、反饋不對都會讓用戶反感你的產品，從而失去用戶。cctalk的彈窗提示正是在用戶恰好可能需要的時間出現，讓用戶快速的達到自己的目的，非常的友好，同時也提升了產品的易用性。

「餓了麼」便捷的購物車入口

1. 產品體驗：

進入餓了麼首頁，點擊右下角的購物車入口，即可看到從所有店鋪添加的商品一覽，可進行一一結算。

2. 設計思考：

相比以前，用過餓了麼的用戶都知道，每個店鋪都是有單獨的購物車，從對應的購物車進去才能完成結算。大部分用戶在買商品之前，都會查看多個店鋪相同商品的價格、評論、綜合評分…等，根據性價比「貨比三家」，但回過頭來，需要來回切換去找到之前添加過商品的店鋪，甚至查詢不到，耗費大量的時間，非常的不便。

餓了麼首頁右下角新增的購物車入口很好的解決了這一問題，進入購物車，能看到之前添加過商品到購物車的所有店鋪，可從列表中選擇進行結算，節省了用戶大量的時間成本，入口很巧妙的解決了用戶在下單流程中可能會遇到的痛點，提升了產品的易用性。

「夸克瀏覽器」洞察人心的地址欄細節

1. 產品體驗：

夸克瀏覽器輸入網址時，點擊下方控制條圖標，會放大左右控制區域，左右移動即可修改光標位置；

地址欄顯示在鍵盤上方（屏幕中間位置），輸入網址時的自動匹配結果由下往上的方式排列。

2. 設計思考：

我們在使用移動端瀏覽器輸入網址時，如果需要修改文本框的地址，需要用手指直接在輸入框定位光標，相對很小的地址文本，要想將光標精準的定位在理想的位置，確實非常難。通過夸克瀏覽器的控制條左右移動定位光標，精準度提升了很多，避免了用戶因光標定位錯誤造成的重複操作，提高了操作效率。

另外所接觸的移動端瀏覽器，大部分的地址欄都設在屏幕的頂部。目前大屏幕尺寸已經是趨勢，單手操作手機的用戶比例佔據最大，頂部和最底部的單手最難操作的區域，而夸克瀏覽器打破常規，將地址欄放在鍵盤上方，即屏幕的中間位置，是用戶單手最容易操作和控制的區域，非常的便捷。網址匹配結果根據精準度由下往上排列也是非常合理。費茨定律告訴我們：需要連續操作的控件儘可能接近， 任意一點移動到目標中心位置所需要的時間，與目標距離正相關， 與目標大小負相關。

什麼是費茨定律：

「微信」朋友圈消息重新編輯

1. 產品體驗：

使用朋友圈發佈消息，發現有錯別字，把信息刪除後，點擊重新編輯即可在回到消息未發佈時的界面修改完成。

2. 設計思考：

微信在最近一段時間真是大招連連，從之前一年一次的暱稱修改到後面的拍一拍，接着又上線了朋友圈消息刪除後重新編輯的功能，讓很多網友直呼真香。

我們在發佈朋友圈消息之後，發現有錯別字或者需要增減內容，可以直接刪除，在規定的時間內重新編輯再次發佈即可。尤其是對於發佈長篇幅消息的用戶，沒有複製消息內容就匆忙刪除，再次從0編輯，心裏的陰影面積不弱於「一萬匹烈馬奔騰」，此時看到重新編輯的入口，可謂是雪中送炭，不僅簡化的交互流程，也省去了用戶重新編輯消息的一系列麻煩操作，深得人心。

「58同城」舉一反三的彈窗Tab欄

1. 產品體驗：

在體驗58同城APP發佈房源信息時，需要錄入多種房屋選項，可以在一個彈窗的多個Tab欄中完成不同的選項。

2. 設計思考：

在我們使用的衆多APP應用中，不少接觸關於信息選擇的頁面，如：填寫地址選擇地區、購物選擇商品類型、退貨選擇原因…等，最爲常見的操作方式就是選擇完當前選項後，需要點擊下一個選項入口，再次進入彈窗選擇，有很多個分級。而58同城發佈房源的選項，在進行設計的時候將多個分級放在同一選項，多個選項放在同一彈窗，有效的避免了選項太多造成的信息混亂，同時也解決了因多次彈窗給用戶帶來操作上的不便。節省時間操作成本的同時，也讓路徑變得更加合理簡單。

「美團」首頁金剛區圖標

1. 產品體驗：

進入美團首頁，金剛區面性類型的抽象圖標給人眼前一亮的感覺；

金剛區多種分類入口可通過左右滑動切換，能快速找到自己想要的功能。

2. 設計思考：

一個產品最具核心功能的就是首頁了， 它承擔了產品最核心的功能，決定了產品的屬性和基調，而首頁的金剛區最能體現產品的「骨骼」（產品架構），以方便用戶快速進入對應的需求模塊。通常我們見得最多的金剛區圖標樣式80%都是「底色塊+圖形元素」組合而成，而美團APP金剛區使用的面性圖標，通過對現實生活中物體縮影的抽象圖形進行色彩填充的圖標樣式， 清晰、簡潔且統一，具有表意能力強、辨識度高的特點，提升易用性。跟其他產品大衆化的圖標樣式相比，做到了差異化。另外通過單色疊加，更改透明度或疊加圖層樣式設計，視覺上非常通透，有空間感，細節豐富，品質感強，具有很強的吸引力，稱得上是首頁的顏值擔當。

針對首頁衆多的功能入口，無法全部展示，大部分移動應用都會在金剛區的最後位置設計一個「更多」的入口。而美團則通過左右滑動的交互方式將功能分類全部展示，在視覺上更加聚焦。因爲很多的圖標具備相似性，使用列表展示容易混淆用戶的視覺，降低圖標的辨識度以及信息的傳遞速度，所以全部展示並左右滑動選擇、分塊瀏覽很好的解決的這一問題，不僅操作快捷，而且視覺傳達的效率也得到了提升。

「iPhone」App Store引人注目的動效引導

1. 產品體驗：

使用iPhone移動端設備進入App store首次下載該應用，頁面底部提示「通過側邊按鈕確認」，屏幕右側按鈕位置備註「按兩下以安裝」，同時右側的模擬按鈕色塊以動效的方式彈動兩次提醒。

2. 設計思考：

對於Apple產品，不管是移動端還是桌面設備，在視覺和體驗上都可稱之爲魔鬼級別。下載應用時，右側的按鈕形狀則是利用視覺線索進行示能，讓用戶通過圖形，預期下一步的行爲或感知圖形的作用。通過動效提示方式更能吸引用戶的眼球，也更能引導用戶進行操作，真正做到的有溫度、有情感的交流。

「騰訊QQ」隱藏在暗處的多窗口消息瀏覽

1. 產品體驗：

點擊QQ消息列表進入聊天框，長按聊天窗口空白處，可以切換多窗口，左右滑動可切換好友/羣聊窗口，上下滑動可查看當前窗口的更多聊天記錄。

2. 設計思考：

雖然現在大部分的用戶都轉戰微信，但QQ作爲社交應用的翹楚，光輝一直都沒有退卻，只不過QQ服務的用戶羣體較年輕，而且社交羣體多樣化，也更符合年輕化的氣質。QQ的信息多窗口切換，看起來也是相當炫酷，切換時只需要在消息列表中，長按消息的空白處就能快速進入切換選項，絲滑般的快感，我們再也不需要使用返回信息列表再重新進入到窗口的多步驟操作了。

爲此，你也可能會聽到：「我趙日天表示不服哇」，已經不用QQ好多年，微信這麼方便，難道它不香嗎？其實對於真正需要的用戶來說，這一功能還是非常的方便。不管是處於學習、工作還是閒聊吹水，QQ的羣聊功能比較多樣化，我們在瀏覽羣聊天記錄、爬樓、查找部分有用信息通過多窗口切換時是非常實用。

「中國工商銀行」趣味的動效視覺引導

1. 產品體驗：

進入中國工商銀行APP首頁，搜索欄裏的語音錄入通過動效的形式在麥克風圖形與音波圖形之間過渡來回切換，提醒用戶可以使用語音錄入搜索。

2. 設計思考：

目前很多移動端應用的搜索都增加了語音錄入功能，爲的是讓用戶更高效、便捷的完成搜索，不過大部分只是增加了一個麥克風圖標作爲提示。工商銀行APP使用動效的形式在麥克風圖形與音波圖形之間過渡來回切換，首先動態的視覺引導，增添了趣味性的微交互更能吸引用戶的眼球，也能夠更好的引導用戶操作。其次使用兩個圖標在識別性上是具有選擇性的，擴大了用戶在識別層範圍的認知程度，也間接提升辨識度，兩個圖標過渡性質的切換，也顯得非常柔和，情感化的設計細節爲產品增添了溫度，提高點擊率。

圖標是一個對象或動作的視覺體現，最重要的意象屬性就是傳達含義功能，另外也是加深用戶形象的最主要影響要素。麥克風圖標是一個設備的抽象圖形，音波圖標則是使用設備時的交互過程，兩個圖標以動效的形式完美過渡結合，給我們的第一印象就是感覺這個功能再在向我們招手，在和我們對話，真正做到了有溫度的交流。

「京東」適時的隱藏營造沉浸體驗

1. 產品體驗：

在京東APP商品列表上滑瀏覽商品時，導航欄和全局篩選欄自動隱藏，存在下滑操作後再次展示。

2. 設計思考：

一般情況下，當一些導航或者操作入口可能會成爲打擾用戶沉浸體驗障礙時，我們就會把它隱藏，因爲部分元素的存在，就會分散用戶的注意力。基於用戶的需求，京東APP的商品列表頂部有導航欄、全局操作欄、垂直內容篩選欄，加上狀態欄，在移動設備中的縱向佔比是相當的大，爲了解決這一問題，京東通過改變交互的方式，當頁面上滑，會隱藏導航欄和全局篩選欄，下滑後則再次顯示。

在交互方面，做了這樣的思考，當出現上滑的操作後，可以理解爲用戶已經開始在挑選商品，這時候搜索與排序的重要級下降了，搜索結果垂直內容篩選的重要級上升了，將等級較低的操作/信息適時的隱藏，可以讓用戶專注於當前信息，避免其他多餘的內容產生干擾，同時也讓內容區域高度增加，一屏展示的商品信息更多，增大商品觸達用戶的可能性以及屏幕的利用率。合理的運用了交互設計四策略-隱藏：儘可能隱藏需要隱藏的功能，其次在合適的時機、位置上顯示相應的功能。

深度瞭解交互設計四策略：

歡迎關注作者微信公衆號：「能量眼球」