來源： 大數據與人工智慧 微信公眾號

作者：gongyouliu

微信：liuq4360

註：本文較長，一共1.2w字，估計閱讀完要1h

推薦系統是一個偏工程應用的領域，要想在商業產品中引入推薦系統，利用推薦系統來幫助用戶過濾信息，除了構建精準高效的推薦算法外，還需要設計適合特定場景的、具備美感的、易於交互的推薦產品形態。用戶在與推薦產品交互的過程中獲得推薦服務，通過UI交互完成了一次推薦產品的使用體驗，體驗越好的產品用戶更願意繼續使用。推薦產品形態在視覺上是可以被用戶感知的，用戶通過可感知的視覺要素來判斷推薦的標的物是否是自己喜歡的，從而決定要不要進行下一步操作。

上述過程中，涉及到推薦系統的視覺展示、UI設計、用戶交互，這些屬於產品、設計的範疇。從作者多年推薦系統實踐經驗中發現，推薦產品的UI交互與視覺展示在決定用戶是否「消費」推薦的標的物中起著非常關鍵的作用，所起的作用甚至不亞於精準的算法所產生的價值，而推薦算法工程師往往忽略了它們的價值，過度誇大算法所起的作用。作者本身不是做產品和設計的，也不是這方面的專家，但是覺得這些要素對推薦系統最終能否發揮出應有的價值太重要了，因此基於自己的理解和經驗，基於過去幾年對產品與設計相關知識的學習，嘗試寫一篇文章來說明UI交互和視覺展示在推薦系統中的作用與價值。

本文會從信息獲取與推薦系統、互動設計的基本原則、推薦系統的UI交互、推薦系統的視覺展示、UI交互與視覺展示的未來展望等5個部分來介紹相關知識點，期望給從事推薦系統相關工作的讀者提供一些參考和借鑑以及一些新的思考問題的視角，也期望讀者讀完後對推薦產品的UI交互和視覺展示更加重視。

一、信息獲取與推薦系統

人體通過感覺器官來獲得外界的信息，獲取信息最重要的感覺器官是眼睛、耳朵、鼻子、嘴巴、手等。智能設備(電腦、Pad、智慧型手機、智能手錶、智能音箱、智能汽車、機器人等)屬於信息技術發展過程中出現的新產品，在與智能設備交互過程中，人類可以使用的感覺器官有眼睛(看)、耳朵(聽)、手(觸摸)、嘴巴(說)，而鼻子是無法被使用到的，鼻子可以感受的是化學信號，而智能設備屬於物理範疇，不會產生化學分子，同樣道理嘴巴的味覺也是無法發揮作用的。當然，人類與智能設備交互可以藉助其他輔助工具做得更好，滑鼠、觸控板、觸控筆等就是拓展人類交互能力的優秀工具。

好的交互方式讓人們獲取信息更加方便快捷，降低了智能設備的使用門檻，讓用戶更加願意使用，最終成就了智能設備的價值。過去十幾年最偉大的科技發展莫過於移動網際網路了，賈伯斯通過發明iPhone開啟了移動網際網路時代，通過觸屏交互讓使用體驗更好，連三歲小孩都可以輕鬆使用iPhone、iPad。移動網際網路讓我們的生活發生了翻天覆地的變化，對經濟、產業、社會生活、溝通交流、甚至文化等各個方面都產生了深遠的影響。這其中最重要的變革之一要屬交互方式的變革，從傳統的PC網際網路時代的滑鼠交互切換到移動網際網路時代的觸屏交互，讓交互更加直接、高效。下圖展示了當前三大網際網路時代對應的主要產品、可使用的交互器官及交互方式，其中家庭網際網路最近幾年才剛剛興起，隨著小米、華為等科技巨頭進入智能電視行業，家庭網際網路未來幾年一定會有一個大的爆發期。

圖1：網際網路時代的交互方式創新

推薦系統屬於依附於智能設備的眾多信息類產品中的一個非常重要的業務功能模塊，在上述3大網際網路時代中的很多產品上都有廣泛應用。傳統PC網際網路上由於螢幕大，用戶可以藉助鍵盤、滑鼠、輸入法等非常方便地瀏覽、查看、搜素信息，在PC網際網路早期階段，信息量還沒有那麼多，產品也沒有當前這麼豐富，主流的門戶網站通過編輯編排、導航、搜素等就可以很好找到需要的信息，對推薦的訴求沒有那麼強。雖然目前很多PC產品上也有推薦業務存在，但推薦系統在國內的迅猛發展主要發生在移動網際網路上，特別是2012年今日頭條將推薦作為核心業務，讓推薦發揮了極大的商業價值，給整個行業提供了一個使用推薦系統的學習樣本，最終促使推薦系統的應用在各類產品、各個公司遍地開花。由於手機的便攜性，目前大家獲取信息的主要方式是通過移動網際網路，基本所有網際網路公司將資源、精力主要放到開發、維護、運營移動網際網路服務上，而推薦系統在移動網際網路中也是最受重視的、最成熟的。在家庭網際網路中，推薦系統也有用武之地，特別是智能電視目前還是主要靠遙控器操控，操作相當不便，不利於信息(視頻等)查找與搜索，導航也很困難，這時推薦的價值就凸顯出來了，通過精準的推薦系統可以減少用戶的操作成本，大大節省用戶的找尋時間。在國外，Netflix將智能推薦作為用戶獲取內容的重要手段，推薦系統是內容分發的核心技術，這也給國內的家庭網際網路提供了示範，電視貓作為國內最早聚焦家庭大屏的視頻聚合服務商，也早在2012年就開始部署推薦系統，目前有超過15種推薦系統落地在產品中，也是智能推薦系統在家庭網際網路的重度使用者、踐行者。

推薦系統是一種獲取信息的方式，通過推薦算法的過濾作用，輔助用戶決策，減輕用戶的決策負擔，降低用戶的決策成本，不至於讓用戶淹沒在海量信息的洪流中。用戶通過視覺感受到推薦系統的存在，可以直觀看到給自己推薦的標的物，並通過一定的交互方式來與推薦系統互動，篩選標的物，通過互動獲得推薦服務。推薦系統要想發揮作用無法離開具體的網際網路形態，推薦系統與用戶的交互方式也無法擺脫相應網際網路產品所提供的交互能力。

二、互動設計的基本原則

隨著移動網際網路的成熟，人類越來越依賴於從網絡獲取信息，這不可避免地需要跟硬體/軟體互動，本質上就是人與技術之間的互動，於是互動設計這門學科就產生了，互動設計是信息科技發展下的產物。

《設計心理學》(見參考文獻7)中將互動設計定義為：互動設計關注人與技術的互動，目標是增強人們理解可以做什麼，正在發生什麼，以及已經發生了什麼。互動設計借鑑了心理學、設計、藝術和情感等基本原則來保證用戶得到積極的、愉悅的體驗。

為了大家可以更好地理解後面介紹的知識以及對互動設計有一個初步的了解，下面按照《設計心理學》中的歸納簡單介紹一下互動設計的基本原則，第三、第四節中的一些原則和方法也是基於這些基本規則延伸拓展而來，是這些原則在推薦系統UI交互與視覺展示中的具體體現。互動設計的基本原則主要包括如下5個：

1.示能(Affordance)

所謂示能是物品的特性與決定物品預設用途的主體的能力之間的關係，說的簡單一點，就是物品本身就有的、特定的交互方式，不需要過多解釋，直接可以被人們感知到。比如手機螢幕上有一個按鈕形狀的圖標，大家就知道是可以用手指去點擊的。示能可以給用戶提供明確的操作信息，不需要用戶進行複雜的思考，只依賴大腦的「系統1」就可以做出快速決定(諾貝爾經濟學獎得主丹尼爾·卡尼曼（Daniel Kahneman）在《思考，快與慢》中認為人的大腦有快與慢兩種做決策的方式。常用的無意識的「系統1」依賴情感、記憶和經驗迅速作出判斷，它見聞廣博，使我們能夠迅速對眼前的情況作出反應，而「系統2」依賴理性和推理來做決定，是比較慢的。而人類絕大多數決定都是由系統1做出的)。

2.意符(Signifiers)

意符是一種提示，告訴用戶可以採取什麼行動，一般可以採用文字、圖案、顏色等加以說明。意符不光可以用視覺要素來展現，還可以用聲音作為提示。比如洗手間門口用穿裙子和不穿裙子的簡單人物原型來指代男女廁所，就是一種意符，手機上的各種提示音也是意符。

3.約束(Constraint)

約束大家應該很好理解，就是對使用情況加以限制，提供有限的可選擇方案，甚至只提供唯一的選擇。比如手機的耳機孔是圓形的而充電孔是扁平的，這是對外形的約束，這樣大家也不會插錯。

從心理學上看，當人們面對過多的選擇時，往往很難做出決策，對選擇進行約束，可以提升人們決策的效率，更快做出決策。這也是蘋果公司生產的每一代iPhone手機只有有限的幾種型號的原因。

4.映射(Mapping)

映射就是保持對應關係。比如教室里有幾排燈，在門邊有幾個開關，分別控制這幾排燈，開關控制燈的順序跟實際燈的排列順序保持一致就是一種映射。從數學的角度來說，映射希望保持一種一一對應關係，人們根據這種對應關係就可以知道怎麼操作，而這種對應關係是滿足人的直覺或者經驗的，不需要過多思考就可以獲得。

5.反饋(Feedback)

好的設計一定要有反饋，反饋也要及時，這樣用戶就可以快速知道自己操作的結果是對是錯。大家最熟悉的反饋就是進度條了，它告訴我們目前到了什麼階段。今日頭條推薦下拉更新推薦結果，會給我們提示更新了10條資訊也是一種推薦的及時反饋。

對互動設計有興趣的讀者可以好好學習《設計心理學》這本書，對我們思考產品、優化產品是非常有幫助的。另外，建議讀者可以好好看看參考文獻1-6，這6篇文章對Netflix怎麼在智能電視大屏上設計產品、設計交互方式提供了非常深入的介紹，對我們理解互動設計有非常好的指導價值。

上面簡單介紹了好的互動設計的5大基本原則，這些基本原則是非常簡單樸素的，如果在產品中很好地遵循和使用這些原則，整個產品交互會更加簡潔高效。下面一節我們會對推薦系統這種個性化產品來具體說明怎麼使用好這些基本原則。

三、推薦系統的UI交互

人類是社會化動物，人類通過眼神、手勢、音調、面部表情、肢體動作等來傳達信息，輔助與他人進行溝通交流。推薦系統作為一項網際網路服務，也必須提供一些方式來與人互動，這種互動的方式及可能性就是推薦系統的UI交互。好的UI交互可以清晰、明確地給用戶傳達信息，不模稜兩可，讓用戶在極短的時間內就知道該怎麼操作，並且操作也是極為方便的、傻瓜式的。具體交互方式與系統軟硬體都相關，受限於系統提供的交互能力。

下面我們從推薦系統UI交互的基本概念、好的UI交互的原則、UI交互在推薦系統中的價值等3個方面來說明推薦系統的UI交互。

1.什麼是推薦系統的UI交互

網際網路產品上的推薦模塊是用戶的觸點，推薦模塊藉助於一定的交互媒介(滑鼠、觸摸屏、遙控器等)提供交互能力，用戶通過與推薦產品交互來獲得推薦服務。

用戶通過某種交互方式(一般分為滑鼠交互、觸屏交互、按鍵交互、語音交互、手勢交互等)跟推薦產品「互動」獲得推薦服務的整個過程就是推薦系統的UI交互過程。交互過程一般需要眼、手(語音交互需要加上嘴巴和耳朵)緊密配合才能完成。交互過程發生在進入推薦模塊、使用推薦模塊(篩選推薦列表中的標的物)、退出推薦模塊三個階段。

目前在移動網際網路上，所有交互都是通過手指滑動螢幕或者點擊完成的。個性化推薦一般是通過手指滑動螢幕來完成，下面圖2就是快手APP首頁通過下拉刷新推薦結果，或者通過上滑更新推薦結果，這種交互方式是非常直接簡單的。產品提供了下拉、上滑兩種更新推薦結果的策略，這樣不管用戶怎麼交互都不會出錯，都可以獲得新的推薦結果。今日頭條APP也是提供了下拉、上滑兩種更新推薦結果的策略。

圖2：快手APP通過下拉或者上滑實時更新個性化推薦內容

在PC網際網路上一般是通過滑鼠(或者觸控板)的移動點擊進行交互，而在智能電視上主要是通過遙控器提供的按鈕通過上下左右移動和點擊進行交互，這兩類產品的交互方式沒有移動設備那麼直接高效。相對於PC、移動設備來說，目前智能電視上的交互是最原始、最低效的。

2.設計好的UI交互的原則

前面也提到好的UI交互可以節省用戶時間，讓用戶快速獲取感興趣的標的物，提升用戶對產品的好感度。總體來說，好的推薦系統UI交互需要滿足如下一些原則。

(1) 自然流暢、響應速度快

人在使用產品過程中是比較焦慮的，用戶期望獲得快速的反饋，否則現在可替代品這麼多，替換代價非常低，如果你的產品響應太慢，用戶很可能就換用別的競品了。一般人眼能夠感受到的顯示速度是毫秒級，如果響應速度大於200ms，用戶就可以肉眼感受到慢了。

自然流暢、響應快是對系統性能提出的要求，這要求我們開發的推薦接口要性能優良，可以支撐大規模並發訪問，並且能夠保證足夠穩定。這一原則也是互動設計基本原則中反饋原則的自然體現，要求反饋要及時。

(2) 減少用戶操作時間，減少用戶操作成本

用戶在使用推薦產品過程中(如用戶在切換推薦物品過程中)需要藉助交互媒介不斷與推薦系統交互。我們在設計交互方法和策略時要考慮用戶操作的便捷性，儘量減少用戶的操作成本，這樣用戶更願意與推薦產品進行更多、更深入的交互，最終也更有可能獲取到自己喜歡的標的物。這一原則也是互動設計基本原則中反饋原則的自然體現，要求反饋要及時。

下面圖3是電視貓APP(智能電視端的視頻應用)首頁的興趣推薦模塊，其中第一個是一個比較大的換一換按鈕，並且這個按鈕是固定不變的，當用戶通過遙控器移動到最右邊後，需要換一換更新一批推薦結果的話，必須將遙控器左移5次停留在換一換按鈕再更換，整個過程用戶操作成本太大，非常不方便。當然，可行的做法是換一換跟隨焦點位置移動，這樣操作換一換按鈕最多兩次操作(一次移動到換一換上，另一次點擊換一換進行更換)，但是這樣可能會違背整個設計的一致性，但是為了減少用戶操作是值得的(但在電視貓產品上並沒有這麼做)。

圖3：電視貓首頁的興趣推薦

(3) 所見即所得，讓用戶可以儘快「篩選」推薦標的物

這一條是要求用戶在看到推薦產品形態時，就可以直接觀察到給用戶推薦的標的物，而不是隱藏在某個按鈕或者操作之下，點擊後才能展示給用戶。可見即所得相當於減少了訪問路徑，而用戶對推薦列表的點擊率是隨訪問路徑增加指數衰減的，這種方式可以大大提升用戶對候選推薦標的物的觸達率。

網易新聞中當用戶觀看某個視頻超過幾秒時，自動獲得該視頻的相似推薦，推薦結果直接展示在當前觀看視頻的下面(見下面圖4)，讓播放可以持續下去，該視頻播完會接著播放推薦的相似視頻，用戶沒有任何操作成本，整個過程也是所見即所得的。

圖4：網易新聞視頻的相似推薦

所見即所得中展示的一定是視覺元素，這些元素中肯定會包含互動設計基本原則中的示能和意符成分，快速篩選標的物就體現了互動設計中的反饋原則。

(4) 無複雜的學習過程，最好能夠跟日常生活的使用習慣等保持一致

移動網際網路之所以對世界產生這麼大的影響，改變了每個人的生活，除了便攜性外，另外一個重要的原因是觸屏交互的高效、簡單，無任何學習成本，連2-3歲的小孩都知道怎麼用。

移動端APP上的個性化推薦，一般都是採用滑動(上下滑動、左右滑動)的方式進行交互。在智能電視上，為了減少用戶的學習成本，跟傳統電視保持一致，一般遙控器都會設置上下左右4個按鍵，也是通過這4個鍵進行內容篩選切換。提供有限的交互方式，這裡面使用了互動設計基本原則中的約束原則，而智能電視遙控器使用上下左右四個按鍵，跟傳統電視保持一致，這裡面使用了映射的基本原則。

(5) (整體風格)體驗的延續性、一致性

推薦產品的交互形式(如上下滑動)需要跟產品的其他模塊保持一致，這樣用戶就沒有太高的使用成本，可以輕鬆上手。如下圖中微信發送表情從原來的橫向滑動改為了縱向滑動，這是為了跟朋友圈、公眾號文章信息流等操作體驗保持一致。

圖5：微信聊天表情通過上下滑動進行選擇

Netflix在智能電視上的推薦位海報圖是橫圖的，海報長寬比例跟電視螢幕的比例保持一致(見下面圖6)，這樣整體視覺體驗更加一致。

圖6：Netflix推薦位海報跟螢幕比例保持一致

上面所舉例子都使用了互動設計基本原則中的映射原則。通過跟產品中的其他功能保持使用方式的一致或者視覺感知的一致性，提升用戶的操作體驗。

(6) 在用戶對某個推薦內容不感興趣時可以快速進行下一次篩選

當用戶被海報圖等視覺要素吸引進入推薦標的物的詳情頁，最終發現不是自己需要的，這時就需要讓用戶可以儘快退出到推薦列表繼續進行選擇，以減輕用戶未找到想看內容產生的挫敗感。

我們需要關注的並不是那些成功的部分（有效推薦），而應該把重點放在解決「如何在失敗時（推薦失敗或用戶沒找到自己想看的）儘快進入下一次篩選」這一問題。對於移動網際網路採用下拉更新推薦結果這一情況，只要下拉就進入了下一次篩選。對於智能電視，幸運的用戶通過推薦列表頁只需要2次按鍵就找到自己需要的，不幸的用戶則需要切換更多次才能重新確定當前內容是否是自己需要的，挫敗感在每次按鍵操作過程中都被不斷強化。如果用戶在推薦列表中沒有找到任何想看的，選擇挫敗感將會被進一步放大，快速得出 「推薦不准」的結論，因此，推薦系統必須要推薦多樣性的內容，覆蓋用戶儘可能多的興趣點，讓用戶不至於找不到感興趣的內容，或者實時更新推薦結果也可以達到這個目的。

讓用戶可以進行快速篩選下一個內容，也體現了互動設計中反饋的基本原則，我們需要讓用戶得到更快的反饋，讓用戶可以更快地交互。

3.UI交互在推系統中的價值

UI交互是用戶跟產品互動獲取推薦結果的關鍵環節，好的UI交互讓用戶明確該怎麼做、怎麼更快、更流暢地瀏覽推薦標的物，它在推薦系統中的價值主要體現在如下兩個方面。

(1) 好的UI交互可以提升用戶體驗

好的UI交互簡潔流暢，用戶不用尋思怎麼去做，而是非常自然地知道該怎麼操作，這讓用戶將更多的時間放在使用產品上而不「尋找」和「摸索」中，節省了用戶的時間，提升了用戶獲取信息的效率。

(2) 好的UI交互可以提升推薦系統內容的分發效率和效果轉化

好的UI交互所見即所得，用戶可以輕易地進行推薦內容的瀏覽和篩選，讓內容與用戶之間接觸更加緊密，這樣內容有更多的機會暴露給用戶，從而提升內容被點擊的機率，最終提升內容的分發和轉化。毫不誇張地說，好的UI交互有時甚至比好的算法更管用。

下面圖7是電視貓的相似視頻推薦，最早的版本用戶需要下滑2-3次才能獲取得到某個視頻的相似影片，而新的版本中相似視頻就在該節目詳情頁的下面，這樣的改版至少帶來了兩個好處，首頁推薦的內容是所見即所得的，用戶一眼就看到了推薦的節目，其次，用戶通過遙控器滑動到某個他可能感興趣的內容的操作步驟大大減少。通過這兩個版本的點擊率統計，新版本至少提升了20%的相似視頻點擊率，可能遠大於單次算法優化產生的結果。

圖7：電視貓相似影片產品形態：交互方式的調整大大提升了推薦的點擊轉化

四、推薦系統的視覺展示

眼睛是人類獲取信息最主要的器官。根據科學研究，人類獲取的所有信息中至少超過80%的信息是通過眼睛獲得的，眼睛的重要性不言而喻。人類在億萬年的進化過程中，學會了通過視覺來感受、認知、理解、學習周圍的世界，藉助視覺(並配合聲音等其他感覺器官)找到食物、發現配偶、逃避危險，並通過大腦來快速決策、及時響應。人類處理視覺信息也是速度最快的，甚至不需要思考，絕大多數視覺信息靠大腦的「系統1」就可以處理。

對於一個網際網路產品，首先映入我們眼帘的一定是視覺元素，我們看到了什麼形狀、什麼圖案、什麼顏色、什麼文字，以及圖像、文字、形狀之間的位置關係、對比關係，這些對我們獲取信息、做出決策非常關鍵，視覺元素是我們判斷的主要依據，在我們所有的決策證據中占有最大的權重。

對於推薦產品也不例外，推薦的標的物的視覺展示效果對我們是否瀏覽、點擊、購買相關的推薦標的物起著非常重要的作用，好的視覺展示可以提升用戶的使用體驗，並能提升推薦的點擊轉化。在本節我們就來介紹在設計推薦產品中，主要的視覺要素有哪些，視覺展示的一些原則、價值。

1.什麼是推薦系統的視覺要素

在推薦產品中所有一切關於待推薦標的物相關的可視化信息載體都是視覺要素。視覺要素主要包括：文字、圖片、動圖、視頻等。還包括顏色、字體、大小、形狀、背景、相對位置、角度、層次感等輔助信息。廣義的決策要素還可以包括音頻等。

圖8：主流的推薦產品形態中包含的視覺要素

上面圖8是今日頭條新聞推薦、手機淘寶推薦、西瓜視頻推薦等主流推薦產品形態，展示的視覺要素包括文字，圖片等。其中圖片是非常重要的一類信息，所占區域也比較大，對我們做決策非常關鍵。對於視頻來說，海報圖對於用戶決定是否看該視頻起著決定性作用。

2.視覺要素展示的一般原則

從上面的介紹可以知道，視覺要素種類非常多，不同的產品的標的物具備的數據種類、特徵等都不一樣，那麼該怎麼在推薦系統中展示視覺要素才可以達到更好的效果呢？一般需要遵循什麼原則呢？總體來說，遵守下面三個原則是非常有必要的。

(1) 給用戶展現的是關於待推薦標的物的事實情況，不誇大失實

這個原則是非常重要的，要求保證信息的真實性。只有用戶看到的是真實的信息才不會誤導用戶，讓用戶更加信賴產品、信賴推薦服務。

當前有很多文本信息採用過分誇大、甚至是惡俗的標題來吸引用戶點擊，採用這種策略，短期來說，可能確實會提升點擊量，但長遠來看是百害無一利的。用戶每被騙一次，對你產品的信譽度就會打折一點，次數多了用戶就會厭惡、放棄你的產品。(這個過程可以用指數衰減來描述，假設用戶被騙一次對你產品的好感度降低到原來的0.99，如果被騙100次，那麼好感度就為0.99的100次方，值約為0.37，如果被騙300次，好感度基本為零了。實際上被騙一次好感度可能打折的更厲害。)

拿商品推薦來說，商品的購買數量是一個非常重要的參考指標，在電商商品的視覺要素展示中一般要將購買數量真實展示出來，而不應該對具體數值進行修飾誇大，更不應該收商品提供方的利益而故意顛倒黑白。對於任何含有用戶評價維度的信息，如果覺得需要展示給用戶，就一定要真實反饋。這樣也有利於第三方生態(很多產品是提供平台服務的，如淘寶，推薦的商品是第三方提供的商品)的繁榮。

只要展示的信息是真實的，當然我們可以儘量將標的物好的一面展示給用戶。這就像戀愛期的男女，總是將自己的優點展現給對方，以吸引對方的關注和獲得好感。對於電影來說，我們可以選擇漂亮的海報圖，對於商品，我們可以展示價格優勢，特色優點等，這些都是可以的。

(2) 需要儘量包含足夠多的核心決策信息

所有展示的視覺要素的目的是輔助用戶決策，而不是誘導用戶點擊。需要展示儘可能多的核心信息，讓用戶從更多的維度來了解標的物，這樣用戶可以更好地進行決策，快速決定是否需要點擊該標的物進入詳情頁了解更細緻的情況。

由於每個標的物展示區域是有限的(特別是在手機中，由於螢幕較小，可展示的面積更小)，視覺要素不是越多越好，而是要保持足夠的信息，多而不亂、多而不雜，並且需要有主次之分，越重要的信息越容易讓用戶看到。

為了增多可以展示的信息，還有一個策略是當光標(聚焦點)移動到標的物上時，可以觸發相應的事件，藉助一定的動畫效果(現在手機淘寶上很多圖片就是動圖和短視頻，見下面圖9中最上兩個推薦就是展示的動圖和小視頻)進行視覺展示，但是具備動畫效果的標的物不能太集中，不然沒法讓用戶聚焦，用戶會覺得眼花繚亂。也可以讓標的物(海報)所占區域在光標停留在該位置時拓展更大，將更加豐富的視覺信息呈現在標的物上。舉個例子，當用戶進入視頻詳情頁時，開始播放預告片，這樣在短時間內就可以讓用戶對劇情有一個初步了解，幫助用戶判斷是否值得自己看，而不是等用戶看了很長一段時間再退出，這時用戶的挫敗感更強，更容易放棄直接退出APP。

圖9：淘寶首頁猜你喜歡中藉助動圖和小視頻進行視覺展示

前面也提到視覺信息是人類大腦更容易處理的信息，所以高質量的海報圖或者動圖在輔助用戶決策中所起的作用會越來越大。像Netflix會利用計算機視覺技術、深度學習技術自動從視頻流中提取最合適的幀作為海報，減少人工製作海報的資金花費、人力投入和時間成本。

(3) 視覺要素展示互相之間保持協調，並與整體風格背景一致

這一原則是希望視覺要素在展示過程中要有對比度、區分度，有一定的美感，視覺要素的大小、配色、字體等跟整個產品風格保持協調一致，海報圖與背景色需要協調，字體要清晰可見。讓用戶在極短的時間內可以儘量獲取最多的信息，不需要花費太多的思考成本。比如Netflix在智能電視上，所有海報圖都是橫圖，並且長寬比例跟螢幕一致，這樣用戶的視覺感受會更協調、更好。

下面分別對3大類主流的推薦產品，來說明哪些視覺要素是必須展示的，哪些是備選的。具體怎麼選擇需要根據產品形態、業務場景、產品風格、交互方式等各種條件進行有針對性選擇。

視頻類推薦產品：

必須展示的視覺要素：海報圖、標題、是否是付費視頻等

可選擇展示的視覺要素：豆瓣評分、播放次數、時長、標籤等

電商類推薦產品：

必須展示的視覺要素：海報圖、商品名、價格等

可選擇展示的視覺要素：品牌、購買次數、特性介紹等

新聞資訊類推薦產品：

必須展示的視覺要素：標題等

可選擇展示的視覺要素：海報圖、來源、更新時間、評論數等

上面只是列舉了需要展示的視覺要素，具體這些要素怎麼展示、位置關係、大小、顏色等等就是設計師的核心工作了。

3.視覺要素展示的價值

通過在推薦過程中將合適的、有價值的視覺要素展現給用戶，讓用戶對待推薦的標的物有直觀的了解和認識，從而輔助用戶決策，減少用戶決策時間，主要價值體現在如下兩個方面：

(1) 輔助用戶決策

我們藉助視覺要素給用戶展示關於待推薦標的物相關信息，讓用戶在短時間內對標的物有一個整體了解，基於這些提供的信息來輔助用戶決策，減少用戶的決策成本。

(2) 提升用戶滿意度，提升標的物點擊與轉化

好的視覺展現提升了用戶選擇的準確度(看起來喜歡的確實是自己喜歡的)，減少用戶決策成本，節約了用戶的時間，因此可以提升用戶滿意度，最終提升待推薦標的物的點擊與購買轉化。

五、推薦系統UI交互和視覺展示的展望

目前推薦系統的主要應用場景，聚焦在PC、智慧型手機(包括Pad)、智能電視這3類屏中，主流的交互方式是通過鍵盤、滑鼠、觸摸屏、遙控器等幾種媒介實現的。智慧型手機是推薦系統最有價值的落地場景，在智慧型手機上，主流的提供toC服務的產品都提供了個性化推薦的能力。未來推薦系統的應用場景可能會包含物聯網設備(如智能音箱)及可攜式智能設備(如智能VR/AR/MR眼鏡、智能手錶等)，交互方式也可能會有新的變革，語音交互、手勢交互、眼動交互、甚至思維交互都是極有可能應用於推薦系統中的。

隨著深度學習技術在語音識別、語義理解中的大規模應用，目前計算機識別和理解人類語言的精準度越來越接近人類，在某些方面甚至超越了人類。語音交互也越來越受到人們的重視，目前語音交互在手機、智能電視上有所使用，特別是在車載、家庭場景中有比較大的應用場景。前兩年智能音箱市場的火爆，也點燃了語音交互應用的火種。語音交互最大的亮點是快速高效，怎麼將語音交互應用於推薦中，需要找到好的使用場景和切入點，在家庭智能電視、車載軟體系統、智能音箱上是非常好的嘗試方向。在智能電視上，目前小米電視、微鯨電視等網際網路電視都提供語音交互能力，可以利用語音進行播放、搜素等相關操作，語音交互未來有機會拓展到更多的交互場景中，這其中也會包括跟智能推薦服務的交互。

手勢識別已經在微軟Xbox體感遊戲中得到應用，但手勢識別目前還未用作推薦系統的視覺交互工具，在這一塊最有可能的場景應用是在家庭場景中通過手勢來與推薦服務交互，包括進入詳情頁、內容滑動等等。當前遇到的挑戰有對手勢識別的精準度是否可以達到商業應用的要求，手勢交互信號該怎麼定義，是否有統一的標準可言，以及增加攝像頭對個人隱私可能產生的風險。

虛擬現實設備(AR/VR/MR)可以藉助語音、手勢、眼動等方式來交互，隨著未來虛擬現實設備的成熟，特別是邊緣計算能力的突破和5G信息傳輸速度的提升，一定會形成完善的商業生態系統，到那時基於這些設備上的軟體服務一定會提供特有的個性化服務能力，這時這些交互方式就有用武之地了。

而最先進也是技術難度最大的交互方式我個人認為是思維交互，就是直接通過人腦的意念進行控制，目前看起來是不現實的，至少在未來十年內還不可能商用，但是隨著腦機接口等新技術的研究與發展(埃隆馬斯克創立的 Neuralink就是一家研究腦機接口技術的高科技公司)，當這項技術成熟之時，一定會成為AI的下一個風口，也是最優、最有效、最快捷的一種人機互動方式。

當然，新的交互方式的改變，一定會帶來視覺展示方式的變化，具體是什麼的視覺展示形式，是否一定需要進行視覺展示還無法定論，這裡基於作者自己的認知做一些簡單說明。

當採用語音交互式時，視覺展示的形式可能與具體的應用場景有關。當在家庭智能電視場景中用語音進行交互，視覺展示可能跟當前的展示形式保持不變。而在車載場景下，司機主要精力在開車，為了安全性，視覺元素一定會非常簡單(當提供產品和服務的智能設備帶屏時)易懂。而在不包含螢幕的智能設備中(如智能音箱)，甚至沒有視覺要素的展示，這時與推薦系統的交互可能就是一種交互對話式推薦，通過與智能設備的多倫對話，我們獲得產品、信息與服務的推薦。

在虛擬現實設備中，如果是VR設備，我們看到的是360度的環繞視覺，視覺要素的形狀、大小、相對位置肯定是跟平面不一樣的。而對於AR設備，我們可以在螢幕中疊加真實世界的物體，視覺元素及展示方式當然會有調整和變化。

對於腦機接口智能設備，當採用思維方式進行交互時，具體需不需要螢幕，螢幕的樣式及展示方式還無法想像，這些是屬於未來科技的範疇。

總結

本文從產品與設計的角度說明了UI交互與視覺展示在推薦系統中的價值，UI交互與視覺展示屬於用戶可以直接感知的部分，是推薦模塊的門面，是用戶獲取推薦結果的唯一介質與渠道，重要性不言而喻。

鑒於UI交互的重要性，作者強烈建議推薦算法工程師一定要重視UI交互，平時在做推薦系統時，也要往這方面多思考，當前的UI及交互是否合理，是否還有更好的方式，多參考或者諮詢一下設計師的思路想法，多體驗一下競品，往往你會有新的收穫。算法工程師的主要考核指標是提升推薦模塊的點擊率、留存率等，我們不要只拘泥於算法優化產生的結果提升，一切能夠提升推薦模塊效果的方法都值得嘗試，UI交互與視覺展示的優化就是非常重要的一環。

通過優化UI交互和視覺展示提升推薦效果，依賴設計師的專業技能和經驗，除了需要從行為和心裡層面進行思考外，我們還可以藉助科學工具的幫助，AB測試就是一種非常好的工具。當我們有新的視覺展示或者交互想法時，可以將用戶流量切分為A、B兩組，A、B兩組分別用老的和新的方案，通過AB測試來驗證我們的想法。通過這樣不斷地嘗試與疊代，找到改善推薦產品體驗的新方法，讓推薦產品的UI交互與視覺展示越來越好。

參考資料

1. [深度 | Netflix大屏互動設計分析系列（1）：基本原則與設計思路] https://mp.weixin.qq.com/s/W-E-U9RJR_k8QnphY9uDNA
2. [深度 | Netflix大屏互動設計分析系列（2）：遙控器與焦點移動] https://mp.weixin.qq.com/s/sD7exKXB_h-ZDsYUN7xRnA
3. [深度 | Netflix大屏互動設計分析系列（3）：面向內容的互動設計] https://mp.weixin.qq.com/s/e9quBmSOTOPIRGl27Y0bWw
4. [深度 | Netflix大屏互動設計分析系列（4）：以工程手段構建素材庫] https://mp.weixin.qq.com/s/mvSZts72hETAYuEuImot8A
5. [深度 | Netflix大屏互動設計分析系列（5）：構建個性化頁面] https://mp.weixin.qq.com/s/OFzhzu3J1UVyo_6eCEgeqg
6. [深度 | Netflix大屏互動設計分析系列（6）：數據、海報與A/B測試] https://mp.weixin.qq.com/s/nB5IotggNEkxGAp5DpIEBg
7. [唐納德-A-諾曼] 設計心理學