01.前言

如今，隨著市場競爭日益激烈，“轉化難”也變成大家特別關注的問題，其實需要提升用戶轉化的場景很多，每個場景都有影響用戶心理的關鍵因素，那么設計師如何做，才能助力用戶轉化呢？下面結合省錢會員項目，聊聊如何抓住用戶心理，從而提升用戶轉化。

02.背景分析

最近這段時間，我們引入了很多新的運營玩法，跳出之前單一的營銷方式，將玩法串聯。我們通過省錢會員卡，打造運營體系的玩法矩陣，提升用戶轉化；

省錢會員卡是什么呢？是對0元購、百億補貼以及100+的生活權益進行資源整合；

用戶敏感點：根據以往“免費領”運營活動的數據，了解到用戶對價格很敏感；

03.目標用戶分析

在做用戶轉化之前，我們必須找到精準的目標用戶并對其進行分析，這樣才能精準抓住用戶心理，做到更好的轉化。

下面我們可以從用戶不同階段的轉化進行分析，其中用戶分成三類，分別是強需求用戶、潛在型用戶以及弱需求用戶；階段分為三個節點，分別是激發興趣、視覺感知和觸發行為；

首先是強需求用戶，用戶在視覺感知信息觸達階段，需求已經滿足，完成轉化；其次是弱需求用戶，這一部分用戶，不管如何刺激，都難以滿足，所以這兩類用戶暫時先不考慮；而目前階段最主要考慮的是潛在型用戶，這一類用戶在視覺感知到觸發行為的階段，我們需要抓住用戶心理，從而促成轉化。因此目標用戶是視覺感知到觸發行為這個階段的潛在型用戶；那接下來需要怎么做呢？

04.思考模型

在設計的過程中，我們用到了設計策略模型“CST法則”，什么是CST法則？“CST法則”是以“視覺影響感知，感知影響行為”作為基礎理念，以“抓住感知，強化興趣，觸發行為”作為核心內容的設計方法。下面我們將以這個模型來分析，設計過程中抓住哪些心理因素的點，來促成用戶轉化的。

05.影響用戶心理因素

我們通過“CST法則”得到了促使用戶轉化的三個點：抓住感知、強化興趣、驅動購買。我們在這三個點上設置了多個用戶心理影響因素，從而促使用戶完成轉化。

· 抓住感知=抓住“優惠”感知

首先抓住用戶的權益感知，以省錢卡核心內容的“權益優惠”作為與用戶有共鳴的元素，更容易抓住用戶的感知。我們在這嘗試做了ab版的兩種表達方式。圖中對比之后發現，左圖中將優惠提煉出來，更能突出權益的優惠力度，聚焦用戶注意力，而右圖相對來說，優惠感知更弱一些；

在會員購買頁中權益模塊上，也做了ab版的嘗試，對比一下：清晰度上，左邊的去掉多余的裝飾元素，將權益信息降噪展示，調理清晰，讓用戶有章可循；匹配度上，用色彩來區分權益分類，讓用戶快速瀏覽的時候，更直觀清晰的感知權益的構成，也與用戶使用場景（娛樂、影音、餐飲出行等）多樣性的預期相匹配； 

· 強化興趣點=強化價格敏感點

我們以用戶感興趣的“價格”作為強化的視覺元素，提升用戶的興趣點；其中在會員補貼專區篩選出超值產品，價格補貼前后的對比以曲線來呈現，強化價格的變化；右圖詳情頁中，對會員模塊的價格進行單獨設計，從而來強化會員價格的氛圍感；

· 驅動行為=驅動購買

最后從影響用戶心理的因素：心理賬戶和從眾心理兩點進行分析；

何為“心理賬戶”呢？

“心理賬戶（Mental Accounting）”是芝加哥大學行為科學教授理查德·塞勒（Richard Thaler）提出的概念。心理賬戶也是一種有趣的現象。簡單來說，人們會把對物品分類的習慣，用于錢和資產上，在頭腦中為他們建立各種各樣的賬戶。比如說，我們會把買生活用品的錢放在生活賬戶，買禮物的錢歸到情感開支賬戶，旅游的錢歸到享樂休閑賬戶等等。那么心理賬戶的存在，不僅影響著投資決策，也在日常生活中的各種消費決策產生重要的影響；

比方說打撲克，以5元為賭注，然后手氣爆棚的一路贏了500元，但是最后都輸光了，那么在人們心理是輸了多少錢？這時候在人們心理上只感覺輸了5元錢，但其實應該是505元，因為人們沒有把意外得來的錢歸為自己財產，同時對意外得來的錢敢于去冒風險。

我們要善用“心理賬戶”，創造一筆新的心理賬戶，讓用戶心甘情愿的掏錢。其中在優惠購主頁，用戶進入頁面后會有一筆補貼金彈窗，在這里補貼金彈窗就是我們說的“心理賬戶”。紅包設計了3s自動收下的提示，給用戶營造緊迫感的氛圍，最后收下紅包的動作上增加了小動效，讓用戶有清晰的紅包收下的感知；

我們還要善用用戶的從眾心理。項目中，我們在會員購買頁的主視覺區域，增加了“xx幾分鐘前已成為會員“的氣泡提示，來引導用戶操作，暗示用戶產生購買的行為；最后在頁面底部，增加了大家問的模塊，消除用戶的疑慮，那么在多次刺激后，有利于用戶做最終的決策，引導用戶下單，并達到用戶轉化；

06.結語

做轉化，最重要的就是抓住用戶的心理，深挖影響用戶心理的關鍵因素，才能擁有更高的轉化。

在設計過程中，我們要在不同的使用場景和節點上，通過分析目標用戶以及影響用戶的心理因素，將這些進行設計串聯，讓用戶完成一系列的體驗，從而最終達到設計目的。

參考內容：

理查德·塞勒（Richard Thaler），芝加哥大學行為科學教授提出的“心理賬戶”理念；

https://baike.baidu.com/item/%E5%BF%83%E7%90%86%E8%B4%A6%E6%88%B7/2369306?fr=aladdin

原文地址：58UXD （公眾號）

作者：環鐵藝術家

轉載請注明：學UI網》項目總結｜你知道嗎？用戶轉化是可以被設計的

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

在設計中，最常見的質量保證方式就是在產品驗收環節進行「設計走查」。不過因為是上線前的最后驗收環節之一，經常會出現因臨近上線時間，且交互和UI類的問題在修改優先級中一般都是較低的，最后只能修改部分設計上的「bug」，其他只能舍棄或放入永遠不會開工的下次迭代再改。設計師在各種來回扯皮之間筋疲力盡，看不到設計價值在需求中的體現，各種“這里設計不好”的鍋一不小心也接了一堆。更嚴重的問題在于，用戶得不到更優秀的體驗，輕則耗費更多時間，重則放棄使用功能。不管哪種結果，對于產品整體滿意度都會有不同程度的影響。

由此可見，設計質量保證僅靠最后臨門一腳的設計走查遠遠是不夠的。在需求全周期中各個環節都可以加入對設計質量的把控（Design QA）。Design QA的概念來源于研發流程中測試環節。質量保證縮寫為QA（Quality Assurance），是產品交付流程中非常重要的一環，一般就是大家了解的測試工程師的崗位職責內容。在這個環節中，測試人員需要對產品功能進行仔細認證，確認是否滿足了產品需求并且可以正常使用。但與測試不同，設計QA須加入到產品需求全周期的各個環節中，最終形成與產品設計并行的一個流程，才能有效保證質量。

設計QA實施步驟和方案

步驟1: 需求分級，確定是否需要設計QA

要保證設計質量，在B端設計中不是易事。我們經常會聽到：

· “這個功能能用就行”：公司/團隊不理解或不夠認同設計價值是什么，不明白為什么體驗會在每一處未還原的設計稿上慢慢丟失

· “這還原的不挺好，和你設計稿我看一樣啊”：非專業的同事無法分辨設計稿與研發實現稿的細微差異

· “沒時間改了，下次再說吧”：設計質量保證低于功能質量保證，或者團隊必須在有限的時間交付需求

在接到需求后可以根據以往經驗或與產品經理的溝通，確定本次需求設計等級：

• A：公司級和部門級重點、設計周期長內容多、設計可沉淀輸出的內容多的需求
• B：正常迭代、量級一般的需求
• C：時間緊迫倒逼排期、無前端研發資源、少量調整、評估不需要設計的需求

在確認等級后，作為設計師可以有一定的心理預期。對于A類可能各個環節都需要詳細的進行QA，而對于C類有可能連設計走查都沒有預留時間，只能靠后續線上的直接驗證了。后面的幾個步驟可針對不同的等級選取全部或部分進行實施。

步驟2:交互設計中，考慮極限下的正確展示

B端交互設計中，很重要卻經常制作不到位的就是極限情況。看起來都是各種表格，簡單的給定一個寬度即可，但在上線后經常發現，填充了真實商家數據的表格，總有意想不到的錯位折行和重要信息截斷，用戶的可閱讀性降低。

                                             左：重要信息被截斷；右：折行錯位

步驟3: 設計評審與交付，交互說明與UI標注一體化

在完成制作后一定要進行評審，對功能完整性、頁面流程、頁面文案、組件特殊交互邏輯要求、交互可實現性與開發成本進行評估。項目相關利益人都需要參加，尤其是測試同事需要參與評審，保證后續測試用例編寫質量。在交互與UI全部評審完成并通過后，交付給研發的設計稿最好可以做到交互說明文檔與UI標注一體化，方便研發同事查看。避免在交互說明與UI標注中來回切換，導致交互或UI細節遺漏。這里推薦一個sketch插件：NoteBook Pro （需要付費，lite版大約￥76），方便在sketch中添加交互說明標注，在上傳到可以在線查看UI標注的平臺，比如Zeplin/Relay等。

交互說明+UI標注在一個頁面上同時呈現

步驟4: 參加測試用例評審，確保測試用例涵蓋所有交互細節

一般來說，交互稿與UI稿交付給研發同學后，設計師就要開始忙下一個需求了。直到通知設計走查前，設計師暫時不會再隨時跟進需求進展，而是交接到產品或項目經理手中。而在這個從設計稿到研發實現的過程中，設計師也需要在關鍵節點參與其中，確保設計質量。測試用例是其中一個設計師可以參與的環節。其實有時候很多交互文檔中的內容會被用作測試用例，所以需要再次和研發與測試同學對齊所有交互內容，保證交互設計內容不會在此階段被降級甚至直接去掉。

步驟5:設計走查，輸出并記錄結果

此環節很重要的一點就是走查文檔或記錄。未完成修改的內容，建議研發給出一個解釋，并以文檔的方式記錄下來抄送給相關利益人，標明可能帶來的風險。同時嘗試與產品或項目經理溝通，推動迭代優化的具體時間，避免「下次一定」的無效承諾。

總結

設計QA是貫穿整個產品需求全周期的設計流程，在以往的點狀設計走查之外，需要與團隊上下游通力合作溝通，才能確保優秀的產品呈現在用戶面前。

參考文獻：

https://blog.prototypr.io/the-qa-process-in-ux-design-7cd3ffa771ad

https://www.nngroup.com/articles/quality-assurance-ux/

https://uxdesign.cc/the-importance-of-design-qa-in-digital-product-design-c3f3d128270

https://wearebrain.com/blog/customer-ux-ui/ux-designers-and-qa-engineers-collaboration/

https://owl.tools/notebook-sketch-plugin

原文地址：京東設計中心JDC（公眾號）

作者：唐朋博、李小猛

轉載請注明：學UI網》B端交互設計在產品需求全周期中的質量保證

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

w

01.  先上神器 

▲ 比如我最近在一個網站，想看看一些大背景圖片的靈感圖，那么直接點擊頂部Big Background Image這個按鈕，它就自動幫我把這個風格靈感篩選出來了，是不是很方便。

▲ 最近潘通新發布的2021年配色粉彩，我也想收集一些關于粉彩的設計靈感，那么點擊頂部的按鈕，他會自動的幫你篩選出很多。

▲ 篩選后的靈感都是最新的，而且數量也很多，特別的方便。

▲ 比如我想找一個極簡的設計，一些黑白設計，同樣可以快速篩選出來，是不是很方便高效。

這個網站里有很多高質量的靈感圖片，已經幫大家下載好了，需要的話可以添加叮當貓回復“圖庫”領取，已有叮當貓的無需重復添加。

長按掃碼添加叮當貓回復：圖庫

w

02.  怎么使用 

▲ 這個網站用起來很簡單，首頁進入后，默認是最新的靈感趨勢，不得不說godly這個網站主編審美非常贊，每個設計都是最新的設計方向和靈感。

▲ 包括最近流行的液態水滴效果，都是高清大圖演示，你根本不需要點進去網站，直接這里就可以看見最新的設計。那么我是怎么運用這個網站的？

▍1.根據風格找圖

▲ 這個是最常用的，點進去首頁，下面一行標簽，這里面標簽就是各個設計風格關鍵詞。當然英文不好，你可以用谷歌自帶的翻譯功能，翻譯的明明白白。

▲ 比如我想找暗黑風格的，那么點擊黑暗標簽，就都是黑暗風格的頁面設計。

▲ 比如點擊網格，那么出來的都是非常有設計秩序的，網格感非常強的設計，隨便點擊一個進去看看。

▲ 模塊感非常強，如果你今天想做一個雜志感，這種布局就可以參考。當然最強大的是導航里面有個More。

▍2.根據字體找圖

▲ 這里是全部分類，里面有根據設計風格分類，比如大背景圖、黑白、網格、粉彩等風格。同時也有按照流行字體風格分類，比如Helvetica Neue、Roboto等知名字體。同時分類還有各種數字海洋、亞馬遜等，總之非常豐富。我們來試試。

▲ 我點擊了Helvetica Neue這個分類，那么就看見了全部使用Helvetica Neue字體的網站，每個網站的字體運用細節、排版和版式都可以參考。

▲ 都是特別好的案例，而且你能看見這些字體都是搭配什么樣的字體在使用。

▲ 點擊Netlify就都是非常抽象的圖形風格，總之這個網站有很多點值得我們去探索。

▍3.根據圖片找圖

▲ 比如最近做一個需求，想了解下孟菲斯風格，那么我找到了這張圖，都是視頻錄制好了，非常高清。

▲ 點進去都是高清，并且帶有動態演示，并且每個頁面都是高清大圖。

▲ 頁面的縮略圖非常大，因此你可以很輕松找到你喜歡的圖并且更好的查看很多細節。單擊一個圖片就可以看見更大的尺寸，點進去可以看見這個網站的全部標簽。如上圖，我想看看3D風格網站怎么設計的。

▲ 點進去后，可以看見這個設計的詳細大圖，同時還可以看見很多標簽。這個標簽代表它在的分類，隨便點進去一個分類，就可以看見全部類似這樣的設計。因為這個靈感是3D，因此我點了3D，然后進去都是一些很酷炫的3D靈感。

▲ 質量怎么樣？你們自己說了算，每個靈感都有完整的高清效果，還是動態的。

▲ 比如這個，是一個動態的3D組成的英文單詞。所以這里可以基于一個圖片風格找很多風格。這個網站的魅力能讓我們更加專注于根據主題來看我們想要的東西。

w

轉載請注明：學UI網》這應該是近幾年，見過最牛逼的網站，可以按趨勢風格找圖了！

先來看看下面的海報，給人的感覺就是夢幻高級，滿滿的質感撲面而來。

深色的背景圖配上發光的文字效果，有什么小伙伴會想，為什么我沒有這么用過。

 

  

第一步 >

第二步 >

第三步 >

 

最后再次貼上最后的海報完成圖。

作業問題

第一步

我們先將下方模塊和首屏之間拉開距離，之后填充同色系的藍色作為最下方背景的顏色，之后將圖片上方飽和度提高，再把產品和模塊邊緣處進行摳圖，做出破圖的視覺效果，復制多個泡泡增加畫面的氛圍。

第三步

最后

 

 

鏈接：https://pan.baidu.com/s/12J-Q0Crq3iB5OXDWmfACrw 提取碼：fagy

原文地址：三個小美工（公眾號）

作者：three

轉載請注明：學UI網》干貨素材 | 講真的，這些素材你真的很需要！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

w

02.背景簡述

大型企業由于員工上萬，所以對于人才管理的系統基本都是購買國外垂直類的頂尖系統，而擁有5w+員工的58，則是采購的國外的WORKDAY系統，但是，由于服務器在國外，所以對于好多操作請求都非常的耗時間，最重要的一點是，關于人才數據這么重要的核心內容，也在人家手里，萬一哪天國際形勢非常嚴峻了，呸，希望不會有這么一天，所以我們要像鄧稼先老先生研發原子彈一樣，核心數據我們要掌握在自己手中。

這里通過雙鉆模型來簡單闡述整個項目的流程

f

03.探索階段

如果你想做好一款B端產品，首先要了解他的業務形態，因為b端客戶不像c端用戶那么單一，在整個業務鏈條里，每個角色負責不一樣的模塊，所以我們面臨的問題不是單一的用戶痛點，而是怎么把整個鏈條做的更通順便捷，然而一款強大的b端系統的復雜度遠遠是你不可想象的，畢竟人家國外頂尖系統有上萬人在研究呢。所以我們目前的目標就是先解決58的個性化的人力資源管理。

· 深入業務

首先，我們對業務進行專家訪談，向專家了解業務，對基礎認知進行了桌面調研，對用戶角色進行焦點小組訪談，整理出58內的HR業務形態及分工模型。

· 競品研究

設計師與業務一起使用競品，由于人力資源管理系統是一款專業類的垂直軟件，市場上可參考的競品其實不多，即便是可以找到的資料，也只是寥寥的幾個界面，于是我們充當客戶去找資料，最后搜集了國外3款、國內2款同類可參考的軟件，并通過不停的與業務碰撞，探索適合58的模式。

f

04.定義階段

· 與業務握手

通過前期的調研，我們了解到業務中銷售崗位的入職次數是最高的，所以業務痛點也是最集中的，所以我們在銷售入職日探訪了58北京分公司，實地觀察入職的各個環節，以及每個角色的分工及權限，并在當晚與他們進行了一次深度的訪談，讓我們的設計定義更加聚焦。

· 確定設計目標

通過前期的用戶角色分類調研，以及對痛點的歸類分析，我們得出了兩個關鍵需求：線上化與自動化、操作模式本土化。對于如此龐大的系統，如果按功能去梳理，那是很不現實的，怎么能更快速又能更直觀呢？

轉變思維，從業務角度轉為服務角度。我們服務的是業務，業務服務的是員工，然后系統都是圍繞著員工在職場的各個環節來解決問題的，所以我們圍繞著員工繪制了職業生命周期全景圖。

從圖中可以看出各個角色的工作及配合方式、工作效率及提升空間、各環節各角色的滿意度及可優化的方向，再通過對任務節點、交棒時刻、過程體驗的梳理優化，最后達到一個最終的理想狀態。

w

05.設計階段

整個功能流程梳理下來后，系統頁面已經預估到了400+，而我們的排期倒推下來只有8個月的時間，如果按正常的設計流程“全部模塊業務需求→系統信息架構設計/修正→各模塊交互設計修正”來做的話，黃花菜都涼了，那怎么在緊張的排期內快速輸出還不會出錯呢？

·利用MVP思維，拆解最小業務單元

通過與業務、產品討論，我們選用具有業務閉環屬性，最具業務代表性的最小業務單元，并做快速的驗證，通過不斷探索，實現現實中的設計流程。

再通過對頁面的解離，抽象出三大龍骨頁面類型，再配合規范、控件組成系統的血肉，最后達到了27倍的產出效率，我們讓不可能完成的任務提前完成了。

·情感化探索

B端系統大家統一的認知就是注重功能，不要用花里胡哨的東西來影響操作，但是從競品分析中得知，其實隨著b端c端化，b端的設計師已經在嘗試加入一些插畫元素，所以怎么在不影響操作的前提下，又能讓員工感受到溫暖呢？

服務鏈條上的觸點探索

以我們的服務主體員工為目標，員工與企業的第一個接觸點是在接收offer的時候，這是傳遞企業文化、情感的很好的契機，所以我們優化了在這個觸點下的方式，強化接offer的神圣時刻，并通過游戲化的方式來引導員工填寫資料、查看入職引導。

系統內的情感體系搭建

我們定義了系統的人物角色，讓她更飽滿更有故事性，并以一個專屬客服的角色，落地在系統中的特殊場景下，如個性化首頁、開屏引導、功能引導、空頁面、及身份卡片等模塊中。

w

06.實踐走查階段

為了更好的測試，我們的業務方已經駐扎在了項目組里，采用與舊系統并行的方式，也就是一套數據同時錄入兩個系統，來驗證新系統的穩定性及合理性。與此同時，交互與設計同學也是分批次的提交走查報告，提升整體的設計還原度，終于在整個項目組的不懈努力下，新系統目前已成功上線。

w

原文地址：58UXD（公眾號）

作者：環鐵藝術家

轉載請注明：學UI網》項目總結｜企業級管理系統實戰

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

01、什么是「雅各布定律」

「雅各布定律」是由雅各布·尼爾森（ Jakob Nielsen）提出的一條關于產品可用性的定律。沒錯，這里的雅各布·尼爾森就是那個提出「尼爾森十大原則」的尼爾森，也是我常常在文中提到的UX研究咨詢公司NN/g（尼爾森諾曼集團）的創始人之一。

1999年雅各布·尼爾森發布了一篇名為《界面標準會扼殺設計創造力嗎（Do Interface Standards Stifle Design Creativity）》的文章。在文中，尼爾森講述了他與甲方一同設計某個電商網站的經歷。

在設計該電商網站商品導航方案時，方案一是 采用絕大多數用戶長期在其他網站所接觸的導航方式，方案二是根據甲方對自身產品線的看法構建的一套較為新穎的導航方式（具體方案形式，尼爾森在文中沒有描述）。

尼爾森分別對兩個方案進行了可用性測試，結果是：當用戶使用方案一導航時，導航到目標商品的成功率為80%，而方案二的成功率僅為9%。

雅各布·尼爾森在文中引述這個例子，是為了闡明一則觀點： 用戶將大部分時間花在其他產品上（這里的“其他產品”放在當下這個時代，我認為就是 擁有巨量用戶的頭部產品）。因為用戶花費大量的時間在這些產品上，自然會被這些產品培養出一定的用戶習慣。

如果你想提升產品的可用性，你要做的事情就是與其他產品保持 一致性——這就是 「雅各布定律」。尼爾森認為 一致性是支撐產品可用性的最重要條件之一。并且他將這些應該保持的一致性稱為「 設計標準規則（Rules for Design Standards）」。

那么當下的產品都遵守著哪些「設計標準規則」呢？

02、設計標準規則

實際上，遵循設計標準規則就是遵循用戶的心理模型和行為模型。我依次從宏觀到細節梳理一下，當下的產品設計普遍都存在哪些設計標準規則。

2.1 一致的產品模型

耍家任職于一家電商公司，我司的產品在主業務線（銷售商品線）上，從精準搜索或商品分發，到商品詳情、加購、生成訂單、付款、返回結果，這一套基本的電商模式框架，是一定要符合大部分用戶的行為模型和操作習慣的。

說白了，國內的電商巨頭無非就那幾家，用戶每天花費大量的時間在這些產品上，早已經被培養出了非常深刻的行為習慣，如果我們在主要盈利業務上去進行創新，自然是要承受收益風險的。

這一點不僅是我司會考慮到的問題，國內大部分的電商產品，也都是遵循著這一主流電商產品模型。

而在一些自身產品特有的功能、任務流中，我們就大可以進行產品模型的創新。那是什么讓用戶在不一樣的產品模型中，依然能夠靈活自如地上手操作一些功能呢？

那就要說到交互示能了。

2.2 一致的交互示能

當用戶脫離了熟悉的產品模型，卻依然能夠上手一些功能，是因為他們從其他產品中早已學習到了一些基本的交互示能。

例如文本中高亮帶下劃線的文字或懸浮有陰影的卡片也許可以點擊，帶有紅色徽標的功能也許比較重要或需要用戶查看等等。

當自身的產品交互在示能傳達上和其他產品不一致時，就很容易引起用戶在操作與體驗上的疑惑。

2.3 一致的頁面結構

還是以我比較熟悉的電商行業來舉例。我們可以看到，國內大大小小的電商產品，除去自身功能與GUI的特性，詳情頁頁面結構基本上都是這樣：

因為頁面結構對用戶的影響比交互示能更大，一致的頁面結構、功能排版可以讓用戶極快地熟悉并操作產品。也許你會對此嗤之以鼻？認為這是給不去創新尋找借口？

然而這么做的知名產品卻不在少數。2017年 Youtube 改版，保持了絕大多數頁面結構，對于無法適應的用戶，允許他們切換回舊版；前不久更新的 iOS15，Safari 將地址欄移動至底部，卻也允許用戶自由切換地址欄位置。

保持一致的頁面結構并不是要產品設計完全摒棄功能排版上的創新，而是在創新時也要 考慮到用戶的學習與適應成本。

2.4 一致的圖形認知  

落實到具體的UI上，保持與其他產品一致的圖形認知，會更易于用戶理解。但圖形認知不僅僅只是告訴用戶：三個圓點的icon代表著“更多”、叉代表著“關閉”…更加符合用戶認知的圖形，甚至可以輔助到業務目標。

墨跡天氣之前做過一個A/B測試，希望通過修改分享圖標樣式來刺激用戶分享行為。分別投入了3個試驗版本和1個原始版本。

隨著市場上的產品增多，視覺圖形的使用場景越來越繁雜，當我們無法確定哪一些圖形更加符合自身產品用戶認知的時候，也可以像墨跡天氣這樣進行數據驗證。

雖然墨跡天氣并沒有再進一步分析為何方案3的圖標能夠勝出（我猜測是否與iOS原生應用培養的用戶認知有關？），但我們能夠確定的是，在沒有任何文字提示的前提下，有更多墨跡天氣的用戶能夠理解到方案3中圖形所傳達的“分享”操作的含義。

03、如果再被問到這個問題…

如果再一次被問到「如何看待當下產品設計同質化嚴重」的問題，我想我應該會這么回答。

首先要分析面試官所謂的“同質化”指的是哪一個方面，是大方面的產品、功能、交互同質化，還是具體落實到UI設計師身上的視覺、風格、元素同質化。

如果面試官是詢問對產品、功能同質化的看法，那大可以闡述「雅各布定律」。因為遵循其他絕大多數產品對用戶培養的習慣來進行產品設計，可以顯著提升產品可用性，降低用戶學習成本。

并且很可能你的產品可用性與業務目標、商業價值掛鉤，那更應該保持這種一致性，不應該用商業的風險來為產品的創新買單。

而落實到視覺層面，我認為遵循設計標準規則，實際并不會影響到設計師對GUI的創新。例如我們知道很多競品的案例：MacOS 與 Windows 、 WPS 與 Microsoft Office 、 iOS 與 Android ，為了減輕用戶的學習成本，它們在產品設計、交互設計上存在著許多一致性，然而這并不會干擾產品在GUI層面的表現，用戶依然能夠從視覺層面區分這些產品。

所以作為UI設計師，大可以向面試官表達自己在GUI層面的考慮與創新。一致性不可怕，同質化也不可怕，可怕的是脫離可用性去談創新以及完全為了一致性而失去創新能力的兩個極端。

原文地址：UCD耍家（公眾號）

作者：Howiet

轉載請注明：學UI網》用「雅各布定律」解答一道面試題 | UI&UE實用方法論

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

輕質感在 UI 設計場景中的運用近些年比較明顯，以磨砂效果為代表的無論是在圖標設計還是界面表現上面都較為常見，特別是在金剛區的圖標設計上面。

喜馬拉雅 App 首頁金剛區圖標結合磨砂效果呈現，材質感和舒適度都較為突出。實現難度也比較小，通過 Sketch 軟件的背景模糊很容易實現。突出業務以微動效的形式表達，這也是較為常見的差異化設計解決方案之一。 

02.  多種模式滿足用戶不同喜好 

不同用戶的操作習慣和感官標準各不相同，越來越多的產品為了滿足用戶的不同喜好，設計多種模式進行設置切換。最早的就是主題皮膚，逐步延展到更多的功能模塊中，比如音樂播放頁的布局設置。

MOO 音樂為用戶提供了以專輯封面和背景大圖來進行播放頁的模式設置，用戶可以根據自己的喜好進行設置。在進行 UI 設計的時候無法判斷用戶的唯一喜好，多種模式的自定義設置更能帶給用戶良好的體驗。

03.  獨一無二的個性化首頁定制 

隨著用戶喜好的變化，自定義模式可以滿足各自不同的需求，網易云音樂推出了獨一無二的個性化首頁定制設計。用戶可以通過預設的默認模式、歌單模式、視頻模式進行選擇，為了方便用戶判斷定制后的效果，可以通過“功能說明”觀看預設后的樣式，直觀的展示提高用戶的判斷體驗。

自定義模式打破了千篇一律的設計，根據用戶的喜好呈現內容，提高了用戶粘性和使用體驗。

04.  App Banner 呈現的裸眼 3D 效果 

突然有一天在使用自如 App 的時候發現了這個隱藏的“彩蛋”，模擬裸眼 3D 效果的呈現方式在 Banner 上面，是一次全新的嘗試。通過借助移動設備上的傳感器等將 2D 影像轉化為景深效果，以呈現出不用 3D 眼鏡就可看到的 3D 效果。

自如

05.  簡單的動效不一樣的場景代入感 

微動效在產品設計中的運用已經非常普及，特別是在圖標中的運用，既能提高圖標的關注度，也能體現圖標的差異化。就像一個掃一掃的功能圖標，加上簡單的動效呈現，提高了場景代入感。

將現實中的掃描動作運用到圖標動效的表達上面，既增加了該功能的關注度，也能讓主題表達更清晰。

06.  視頻引導關注度更強 

引導頁是 UI 設計中較為普遍的存在，而動效的引導和視頻形式的引導相較于靜態圖文形式來說，更能吸引用戶的關注度。特別是隨著 C4D 等三維軟件的普及，結合立體感和動效形式形成視頻引導，也是一種全新的體驗。

07.  底部手勢區的充分運用 

對于移動端來說，隨著大屏手機的普及，手勢操作舒適區的研究至關重要。底部操作范圍算是手勢的最佳區域之一，充分的利用好有利的位置進行更多功能的設計，提高功能的曝光度。

將一些重點功能通過懸浮層的形式設計在底部，隨著交互的變化進行隱藏和顯示，也是一種非常不錯的設計解決方案。比如平安口袋銀行將我的余額、積分兌換、簽到、抽獎、領取紅包等設計在底部標簽欄之上，通過懸浮層的形式呈現，讓這些原本隱藏的功能得到了曝光，增加了用戶的關注度。

平安口袋銀行

08.  首頁導航位置的合理運用 

頂部導航欄通常是提示當前頁面的位置，對于首頁來說一般會設計搜索、品牌曝光、功能操作、當前位置提示等內容。也有一些直接展示 Banner 圖，隱藏導航的存在。

一些產品想要弱化活動 Banner 的空間占比，除了縮小 Banner 高度尺寸以外，最近也發現了一種新的設計解決方案。安居客將活動主題設計到導航位置，單擊和下拉刷新到一定程度都會喚起活動詳情。該設計解決方案不僅充分利用了導航位置，在達到曝光度的同時也不會過度占用首頁版面，合理的運用了有限的資源。

09.  背景的變化讓等級區分更直觀 

很多產品都會涉及到會員中心和會員等級區分，不同的等級如何在設計上面體現出差異，除了圖標的區分以外，背景的差異也是一個設計方向。

自如通過不同漸變色的過度來體現會員等級的差異，在滑動預覽的時候 UI 界面也會隨著色彩的過度發生變化，視覺效果非常突出。色彩的變化過度自然，動效的轉場伴隨著內容的更換，直觀的體現了會員等級的權益區分。

自如

10.  個人中心設計的場景變化 

個人中心的設計對于很多產品來說都比較常規，隨著感官體驗的升級，個人中心設計的差異也有待深入思考。而場景化的情感表達是提高個人中心設計差異的方向之一，結合插畫和微動效的表達較為普遍。

自如的個人中心除了以場景插畫的形式來提升情感化體驗以外，晝夜變化采用了不同的插畫場景來表現，代入感非常到位。場景插畫還融合了微動效，微妙的變化提高了產品的精細化設計，增強了產品的體驗感。

自如

小結 

01.  內容與手勢的聯動設計 

交互手勢在移動端設計場景中至關重要，手勢的變化和內容的聯動關系，決定了是否可以獲得更高的用戶體驗。 比如抖音的短視頻播放設計中，進度條拖動過程中除了時間數字變化以外，數字的位置會隨著手勢的方向位移。聯動效果的設計感官體驗明顯，內容傳播的關注度更強。

抖音

02.  內容切換的場景模擬化設計 

以真實場景模擬設計表現，在 UI 設計中比較常用，帶給用戶更強的場景代入感。 比如千聊 App 首頁的免費聽直播欄目，直播預告的時間切換就像頻道調頻一樣，切換到自己感興趣的內容。自然流暢的動效滑動，兩條點綴的紅色線條，把頻道切換的場景代入感體現給用戶，帶來新穎的感官體驗。

千聊

03.  通過文字角標設計表達切換差異 

頂部內容的分類切換較為常見，特別是電商產品中。一般體現點擊和默認通常有字體大小區分、顏色深淺區分、下劃線區分、圖形裝飾區分等。 除此以外也有下劃線的變異用法，通過角標線段來體現差異。通常是右下角位置，伴隨著動效表達。比如京東 App 首頁，聯想到京東吉祥物，也有一種品牌呼應的感覺。

京東

04.  更貼近真實場景的設計引導 

通過設計還原真實場景，帶給用戶更強的代入感，從陌生轉換到熟悉的場景觸感。 高德地圖通過模擬真實的道路狀況，呈現出更加真實的行車引導，就像自己駕駛的車輛行走在手機屏幕上一樣。真實感的路況引導增加了駕駛的代入感，降低了復雜路口選錯方向的可能性，從視覺感上面也提高了感官體驗。

05.  人性化的城市點亮設計 

好的產品體驗，就是在無意間帶給用戶驚喜。在小長假期間，自駕游沿途經過不一樣的城市地點時，會彈出“歡迎到來”的點亮提示，第一次看到還有種驚喜感，算是一種旅行足跡的記錄。 在這個彈窗廣告滿天飛的互聯網環境中，能把這種驚喜帶給用戶才能抓住用戶的黏性，通過情感化的設計提升用戶對于產品的認可度。

06.  被人忽略的上滑交互探索 

大家經常使用下拉刷新這個功能，而且在該功能上的設計探索已經呈現出非常多的案例，而下滑到底部之后的設計探索卻被設計師所忽略。 在支付寶的首頁中，下滑到底部之后進行了新的設計探索。繼續上滑將會解鎖一項新玩法，以游戲化的設計帶給用戶新的探索體驗，也許這一嘗試將會帶來頁面底部新的挖掘點。這個新的挖掘點會像下拉刷新一樣，在底層功能需求的基礎上被深度開發，呈現出更多營銷玩法。

07.  列表式設計中的左右滑動交互 

在列表式設計中，比較隱藏式的交互就是左滑和右滑，通常左滑刪除較為常見。而大部分的列表設計中都沒有探索過右滑交互，除非是右滑返回或者退出等操作。 在小宇宙 App 的訂閱欄目中，對于關注的內容列表左滑為刪除（不喜歡），右滑則是添加到播放列表中。充分運用了左右滑動的手勢交互，不僅操作便利也帶給用戶不一樣的使用體驗。

小宇宙

08.  通過展示形式增加內容的品質感 

同樣的東西放在不同的環境中，通過不一樣的展示形式，帶來的品質感也是相差甚遠。就像放進櫥窗的飾品或者展品，給人的品質感就會更高。 得物（毒）在購買欄目將精選推薦、福利專區、潮流榜單、補貼專區等內容，通過類似于玻璃罩的展示模型來呈現，不僅突出了視覺焦點，也帶給用戶一種品質感的認知。配合動效的運用，增強了該區域的關注度，是一種展示商品或者內容的不錯方式。

得物（毒）

09.  通過AR科技帶你感受虛擬試穿 

網絡購物存在的問題就是質量和匹配度等，得物（毒）通過AR科技帶你感受虛擬試穿，模擬真實場景中的體驗，打破了靜態選擇的弊端。技術的突破將會帶給用戶更便利的生活體驗，打破常規的固有模式才能帶給用戶更好的使用體驗。

10.  更直觀的設計帶來更人性化的體驗 

想要看一場電影，在選擇影片的時候為了讓用戶更直觀的了解影片內容，做出最快捷的選擇。淘票票將精彩片段作為背景層，影片展示作為前景層，點擊不同的影片背景層就會播放對應的精彩片段。直觀的設計帶給用戶更便利的選擇，減少了抵達目標的操作步驟。 從視覺形式感的角度使得畫面更豐富，空間感更強。相較于單調的平鋪式設計，帶給用戶更好的感官體驗和操作便利。

淘票票

小結 

從感官體驗的角度體驗產品，總結了在 UI設計視覺層面的解決方案，有助于提高 UI 設計師的視覺表現能力。對比相同功能的不同視覺表達，總結優秀的設計呈現方案，希望這個欄目可以帶給你更多幫助！