如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

閱讀之前，溫馨提示下，文中提到的 UI設計方式不一定有對錯，如果使用得當，它們都有很大的可能性。

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

表單提供了幾個可以更輕松收集用戶輸入的控件。設計表單時，在正確的位置使用正確的控件是一項挑戰。

復選框控件有三種狀態：unselected（非勾選態）、selected（勾選態）和indeterminate（未確定態）。最后一個狀態代表子選項列表在父選項下分組且子選項處于勾選態和未勾選態之間的情況。

切換開關代表允許用戶打開或關閉物體的物理開關，如燈的開關。

點擊切換開關需要兩個操作步驟：選擇和執行，但復選框只有一個選項，其執行通常需要另一個控件。

在選中復選框和切換開關控件之間時，最好關注使用的環境而不是其功能。

下面是一些在設計表單體驗時決定這兩個控件之間的指導性原則和案例分享。

案例1：即時回復

使用切換開關時，

1. 應用設置的立即響應是無需明確操作的。

2. 設置需要打開/關閉或顯示/隱藏功能才能顯示結果。

3. 用戶需要執行不需要審核或確認的即時操作。

如果需要即時響應的選項最好選擇使用切換開關

案例2：設置確認

使用復選框時，

1. 應用設置需要在提交之前由用戶確認和審核。

2. 在顯示結果前，設置定義需要執行提交、確定、下一步、等應用操作。

3. 用戶必須執行其他步驟才能使更改生效。

如果需要顯式操作來應用設置，則首選復選框

案例3：多項選擇

使用復選框時，

1. 有多個選項可供使用，用戶必須從中選擇一個或多個選項。

2. 逐個單擊多個切換開關，每次單擊后等待查看結果是需要額外的時間。

在列表中選擇多個選項，復選框能提供更好的體驗

案例4：不確定狀態

使用復選框時，

1. 當多個子選項在父選項下分組時，需要中間選擇狀態。中間狀態表示在列表中選擇了多個子選項（但不是全部）。

使用復選框最好地顯示不確定狀態

案例5：清晰的視覺狀態

使用復選框時，

1. 有可能與切換開關的開/關狀態混淆。有時很難理解開關是顯示狀態還是動作。

2. 需要提供明確的勾選狀態或未勾選狀態。

有時切換開關不能清晰地顯示它是狀態還是動作

案例6：相關項目

使用復選框時，

1. 用戶必須從相關項目列表中選擇選項。

用復選框顯示要選擇列表中的相關項

使用時切換開關時，

1. 用戶切換獨立的功能或行為。

獨立項目可使用切換開關進行選擇

案例7：單選項

使用復選框時，

1. 提供單個二進制是/否選擇。

2. 只有選擇或取消選擇一個顯而易見的選項。

單個是/否選項更適用于復選框

使用切換開關時，

1. 需要單一選擇，并且您希望為開/關類型的決策提供兩個選項。

使用切換開關可以最好地理解單個開/關決定

結論

重要的是在表格中的正確位置提供正確的控件使其更加用戶友好。由于表單有很多很長的選項，若用戶必須進行額外點擊才能填寫信息，對用戶來說會變得枯燥乏味。提供的案例和指南會幫助你決定在表單中添加控件時選擇復選框還是切換開關。

參考文獻

1. Control and Patterns《控制和模式》

2. When to Use a Switch or Checkbox《何時使用開關或復選框》

3. Selection Controls《選擇控制》

4. UX Design: Checkbox and Toggle in Forms《UX設計：表單中的復選框和切換》

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

前幾天帶大家學習了《牢記這9個排版設計要點，領導都無話可說了…》，今天給大家帶來排版設計要點第二彈。

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

但是，今天我并不是專門只針對某個店鋪做視覺統一的設計分享，而是想從全局的角度去給大家闡述這個問題，畢竟，你得知道自己為什么需要做視覺統一，你才可能做好視覺統一，所以這個問題就不單單只是指店鋪了，而是關于品牌與用戶之間的問題。

因為不管是店鋪也好，平臺也好，他們其實都是為賣貨服務的，它們與品牌產品之間其實都是合作關系，最終其實都是要鏈接到用戶身上的，而設計師要做的，歸根結底都是處理好它們與用戶之間的關系，幫助達成交易。

所以我將要分享的關于視覺統一的方法，就不單止是適用于店鋪了，而是品牌、平臺、店鋪都適合的。

按照慣例，我還是先給大家列出一個提綱，方便大家理解：

• 為什么需要統一視覺風格？
• 統一視覺風格的方法有哪些？
• 統一視覺風格的注意事項及總結

接下來我就逐條展開給大家說一下這其中的奧秘吧！

一、為什么需要統一視覺風格？

當我們提到統一視覺風格這幾個字，不知道大家能聯想到什么？或者能聯想到什么畫面什么公司什么產品呢？在回答這些問題之前，我還是先給大家舉一些例子也許你就明白了。

比如前幾天我無意中打開了淘寶app，然后剛好看到了2018年淘寶新勢力周的一系列賣場頁面：

大家知道像淘寶天貓京東這樣的平臺，每年各種賣場促銷活動是很多的，而且每一場活動都需要容納成千上萬的商家和數以萬計的商品，但是，所有這些東西都卻只是通過一塊液晶顯示屏展現在消費者面前，那么這時候就是我們設計師發揮作用的時候啦。

這時候設計師需要做的事情就包括以下幾個方面：

• 要保證活動頁面里能把所有東西都容納進去；
• 要保證頁面是方便顧客瀏覽的，所以要有規律可循；
• 要保證頁面是可以吸引顧客一直逛下去的，所以頁面有規律的同時又要有所差異，視覺上不枯燥，不然會視覺疲勞；
• 要在顧客心里和腦袋里建立某種印象，找到存在感，以免被顧客遺忘；
• 既要保證平臺活動整體的調性和諧性，又要為不同的商家提供最恰當的展示機會，所以視覺表現形式要合理；
• ……

總而言之就是要權衡平臺、商家、顧客三者之間的關系和利益：顧客買的爽，商家賣的爽，平臺名利雙收。

那么這時候保持頁面視覺統一就很有必要了，因為視覺統一就有以下非常重要的幾點作用：

1. 強化品牌或事件在用戶心中的印象

因為幾乎所有的品牌都需要做的一件事情就是占領用戶心智，就是要讓用戶在眾多的品牌選擇里有自己的一席之地，不要把自己遺忘了，所以它需要不斷的出現，保持存在感。

一個活動每年去做，一個電影每年都出續集，一個產品每年都會出不同的系列等等，都是同一個道理，都是在強化自己在用戶心目中的印象，保持存在感。

提到這個，我平時每次搞活動都會提醒大家不要經常換頭像或微信昵稱，我讓大家多來留言其實就是這個道理，因為我每天要面對的那么多人的頭像和名字，如果你長期不換頭像并且經常來留言，那我肯定會記得你；但如果你經常換頭像，并且留言次數還少，那我鐵定就不記得你了，因為你沒有強化一個符號在我的腦海里啊，明白了吧。

2. 讓事件變得有序有規律可循

就像我們辦運動會，不同的隊穿不同的衣服、喊不同的口號等等，即便是隊里的人走散了，你看一下隊服或對方喊的口號你就能辨別出是自己人還是別人了是吧。

再比如你去超市貨架上拿飲料，正是因為這種視覺統一的作用，所以你才能很好的辨認出自己要買的品牌產品，而不至于拿錯了，反過來對于品牌也一樣，自己內部的產品之間是有統一的視覺形象的，同時又是跟其他品牌相區分開來的，所以才可以保證顧客不買錯。

這些道理運用到頁面設計上也是一樣的，讓顧客方便逛，同時別逛錯了地方。

3. 提高相關人員的可執行性

因為像這種大型的活動，需要大量的人力投入，就拿設計師來說，一般都是某個主設計師出來一個設計方案，然后這個方案不僅要能達到以上提到的要求，還必須要是能保證其他設計師能夠以這個設計方案的模版，去執行剩余的幾十上百個頁面，工作量非常之大。

二、統一視覺風格的方法有哪些？

前面我們講到了統一視覺風格和形象的必要性和重要性，那么接下來就是大家最關心的如何統一視覺形象的問題了，所以我依舊會從好幾個方面以舉例的方式給大家做講解，你就明白了。

不過在這之前，我還是拿一張圖給大家看，還是淘寶新勢力的這張圖：

你在這個畫面里看到了什么？這個視覺畫面里都包含了哪些東西？

嗯，我看到了模特、文字、圖案、各種顏色，還有布局、排版、以及所有上面的內容匯聚在一起所組成的一種風格。

那所謂統一頁面的視覺風格，也就是說只要保證以上所有提到的這些東西，我在另外的頁面里也至少能找到一項是類似的，那我們就很容易將它們視為是具有共通性的頁面了，也就達到了視覺風格統一的目的。

以下面這幾個淘寶新勢力分會場的頁面為例：

你應該注意到了，這些頁面雖然顏色不一樣，但整體看視覺卻非常統一，同時細看又有些差別，其原因就在于以下幾個方面：

• 不同的頁面對應的色相不同，但是明度和飽和度是近似的；
• 不同的頁面對應的文案不同，但是文案的字體樣式、布局排版是一樣的；
• 不同的頁面對應的氛圍點綴元素不同，但是氛圍元素的風格、質感、手法等等是類似的；
• 不同的頁面對應的點綴元素不同，但是每一個頁面里的點綴元素都是跟相應的主題、模特、文案等等相呼應的。

所以你才會有這些頁面具有統一的視覺風格的印象，包括其他會場的頁面，雖然做了一些小調整，但是依然可以看得出來是統一的視覺風格：

因為這里運用到了跟上面同樣的原理。

不過這種手繪風格與模特相結合的設計形式我以前也給大家分析過，我這里就不深入舉例了，大家可以看看圣保羅藝術家 Ana Strumpf 為很多時尚雜志所做的插畫封面就能有所體會：

這種手法給人俏皮、時尚、新潮的感覺，非常適合追求趣味個性而又不失品味的心態年輕的群體，所以這一次的淘寶新勢力周大概也是出于這種新潮人群定位考量，才會做這種形式的設計吧。

而且這種扁平質感半插畫性質的設計形式幾乎是很難過時的，非常前衛和耐看。

所以到這里你應該就好理解了，一般來說，我們有以下5個途徑可以達到統一視覺風格的途徑。

1. 提煉某種風格，重復使用

比如你看今天淘寶新勢力的一些會場頁面，視覺風格就非常統一，一眼就看出是實體模特＋手繪圖形相結合的風格形式，在模特臉部做一些圖案輪廓線，然后模特周圍點綴一些手繪圖案做氛圍，有點達達主義的感覺。

2. 建立某種品牌色，重復使用

當我們重復看到某種顏色跟某個品牌或產品同時出現，時間久了就會自然而然的把這個顏色和品牌聯系在一起，從而產生條件反射，只要看到某個顏色立馬就會想到這個品牌，只要聽到這個品牌的名字腦海里就會出現某種顏色。

這其實就是通過建立某種品牌色達到視覺風格統一的目的從而讓品牌在用戶心里建立起了這種色彩印象。

比如蒂芙尼藍：

所以，任何頁面，任何場所，任何產品上只要出現了這個蒂芙尼藍色，用戶都會默認他們是相關聯的：

再比如，可口可樂紅：

當然了，色彩種類那么多，有的品牌或店鋪的品牌色并不是單一的，而是多彩的，這都沒有什么限定。

那這個如果是運用到頁面設計或 Banner 設計里的話，這種品牌色是一定都需要出現在畫面里的，至于色彩比例就因需要而定了，而且今后只需要出現這種顏色，就能反過來達到視覺統一的目的。

3. 提煉某種視覺元素，重復使用

所謂視覺元素，其實就是指一切你能看到的想到的元素，所以這里的視覺元素也是指多個方面的，比如某種圖案圖形、某個物件、某個文字、產品、模特、logo 等等其實都算是視覺元素。

那說到視覺元素的運用，我腦海里印象比較深刻的2個品牌就是初語和天貓，前者是店鋪，后者是平臺。

我們可以看看品牌升級以前的初語，它有一個讓人印象非常深刻的視覺元素，就是她的模特和眼部的妝容：

所有的模特都保持了一致的妝容特點，氣質也是類似的，當然你也會看到很多他的設計都是會與藝術名畫相結合，這些都是它的特點，并且加以充實用，就給人建立了很深刻的印象，你只要看到這種模特妝容或者畫面，你就知道：「噢沒錯了，這是初語」。

那天貓也是一樣的，每年雙十一這個天貓頭的元素就會以各種形式露面，而且不止是在雙十一，可以說是相當強大的視覺符號了，你想忘都忘不掉它：

2017年天貓雙十一宣傳海報

△ Budweiser 百威

△ GUERLAIN 嬌蘭

△ Beats

這種通過某種視覺符號來統一視覺形象，重復使用從而加深用戶印象的方式在很多其他地方都有用到，比如每一個蘋果手機，每一次開機，都會出現同樣的開機畫面：白底＋黑色的蘋果 logo。

4. 打造品牌專屬的IP或寵物形象，并重復使用

這就跟品牌給自己找了個的代言人一樣的效果，只要這個形象出現了，你就知道這個是xxx品牌。

比如店鋪，三只松鼠就是這么干的：幾乎所有的頁面里都會出現三只松鼠。

比如平臺，京東有狗，天貓有貓，蘇寧也有獅子等等，電商界儼然是一個動物世界。

再比如珠寶品牌，卡地亞Cartier 有獵豹：

這只獵豹經常出現在各種品牌宣傳廣告里，或者制作成各種首飾，用戶看到獵豹就會想到卡地亞。

5. 提煉某一句口號，重復使用

既然我們前面提到了視覺元素，那么文案或口號其實也是畫面里的其中一種視覺元素，所以我們再以2017年天貓雙十一宣傳海報舉例：

△ Budweiser 百威

△ GUERLAIN 嬌蘭

△ Beats

這里面的「xxx祝你雙11快樂」 「天貓雙11全球購狂歡節」等等口號文案，重復使用，其實就起到了這種畫面視覺統一的作用。

而且這種方式也在很多地方有運用到啦，比如你看的很多動漫、電視劇，總會重復出現一些臺詞，嗯，說到這里，我想到了小時候看的一個動畫片《寵物小精靈》，每集火箭隊出場臺詞都是這幾句：

然后每集結束的時候總會有那么一幕，喵喵被拋到空中然后喊出一句臺詞：「我們還會回來噠～」。

你看這種重復口號的威力多么可怕啊，一二十年了還讓用戶印象深刻呢。

不過，其實最后列舉的這三點其實都可以稱作是視覺元素的重復使用啦，至于原因我也在前面作了解釋，而且以上所有的方式其實都是可以結合運用的，并不是孤立存在的。

還有，大家注意到了嗎？我在每一條后面都加了4個字「重復使用」，因為就算你有了自己特定的視覺元素、有屬于自己的寵物形象、有自己的品牌色、有自己的風格等等，但是你壓根就不露面，你還特別低調藏著掖著不展示自己，那誰還記得你啊。

說到這個，我想到了異地戀之所以容易失敗，不也是差不多道理嗎？你和男/女朋友三五年不見面沒有關系，沒法手拉手親親嘴也沒有關系，但是如果你們壓根就不聯系，不出現在彼此的視線里，那感情自然會淡的呀，等于是白白給了別人可乘之機。

所以我一直都覺得品牌和用戶之間其實也是一樣的道理，就是在「談戀愛」，而不是做生意，至于你們之間是談的什么類型的戀愛，那就看自己本事了。

總結

之所以我們需要做視覺統一，其實就是為了強化我們在用戶心理的印象，讓他們記住我們，記住我們是很有規范的，靠譜的，可信賴的品牌印象等等，并且還要重復的出現在用戶的視野里，那怎么出現呢？方法就在我上面列舉的幾條內容里啦。

當然，你也得控制一個度，不要過份的運用這些方法，不然會招致用戶反感的。

想想有的男孩子可以成功討女孩子歡心，而有的卻被女孩子嫌棄的不行，知道原因了嗎？道理都是一樣的啊。

你看下面這些世界杯期間的廣告，畫面 low，口號 low，重復次數又很多，用戶記住是記住你了，但真的挺煩的。

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

目錄：

• 前言（上癮模型-pick模型）
• QQ空間小游戲為案例（項目介紹&目標人群）
• 觸發用戶＆抓住動機
• 付出行動
• 情感撩動＆情感滿足
• 持續投入
• Pick me

一、前言

尼爾·埃亞爾寫的《上癮》中提出「上癮模型」的概念，其中分為四大步驟：觸發-行動-多變的犒賞-投入。

這四個步驟是一個循環的過程，當用戶越沉迷于這個循環，那說明你的產品對用戶的吸引力越強，反之當用戶中斷了這個循環，作為產品設計師就需要考慮我們在哪一步出現了問題，用戶為何拋棄了你的產品，或者說用戶是怎么「戒掉」你的產品。這其中的原因可能會很多樣，比如用戶找到了更好的撩動自己情感的產品，又或者你沒有達到用戶的預期。

那么怎么樣才能讓用戶在有多個選擇時，選擇 pick 你呢？我試著把「上癮模型」結合認知心理學中的「心智模型」，系統性的提出<鎖定目標用戶-觸發用戶-抓住動機-付出行動-情感撩動-情感滿足-持續投入-pick> pick模型。

二、QQ空間小游戲為案例（項目介紹&目標人群）

空間小游戲平臺是國內領先的 H5 游戲平臺，通過接入外部優質 H5 游戲開發商來提供角色扮演、休閑、策略、劇情、棋牌、雙人pk 等六大類別的輕量小游戲來滿足用戶碎片化時間娛樂的需求。

• 目標人群：手Q所有用戶都是我們既定的目標人群，平臺游戲類型能滿足不同年齡階層的用戶需求。
• 用戶場景：個人碎片化時間， 好友之間有互動娛樂需求時。

平臺分為4個 Tab，每個 Tab 都滿足了用戶相應的需求。

• 首頁：承載所有平臺游戲，有分類讓用戶去找喜歡類型的游戲，也根據智能算法進行游戲推薦。
• 社區：提供一個讓玩家能互相交流的平臺。
• 禮包：給用戶提供游戲福利，加強對平臺依賴性。
• 我的：承載 VIP 體系和積分任務體系。

以下我想通過空間小游戲為案列，講解 pick模型在實際運用中的指導意義。

三、觸發用戶&抓住動機

觸發分為內部觸發和外部觸發，觸發要顯而易見，行為要易于實施。

1. 外部觸發

空間小游戲作為依附于手Q空間的一個入口級平臺，我們可以很好的利用好友關系鏈的傳播性，這也就是觸發模型中的外部觸發——人際型觸發。由于平臺的關系鏈屬性，所以我們會把人際型觸發當做外部觸發的核心觸發方式，因為好友之間的觸發是相對其他觸發方式更加穩固值得信賴的，當然付費推廣型觸發也是在產品冷啟動時期常用的方式。人際型觸發我們細分為自主型和被動型，自主的主要是用戶通過分享游戲或者邀請好友的方式，被動的就是平臺通過用戶在游戲內的信息觸發給他的好友。

人際型觸發（主動型&被動型）是外部觸發的核心觸發方式。

自主型人際觸發-邀請好友來平臺玩游戲，通過展示游戲特點吸引用戶點擊進入，這就是典型的自主型人際觸發方式，也是最容易形成病毒傳播的方式。

被動型人際觸發-在不透露隱私的前提下，通過好友在游戲內的信息吸引用戶的關注進行觸發，這種觸發一般會使用在廣告位和推薦位模塊上，這樣能盡可能的提高用戶的安全感和認可度。

2. 內部觸發

也就是用戶自主的觸發，情緒觸發是主要的內部觸發方式，尤其是負面情緒，當人厭倦，孤獨，沮喪或者游離不定的時候會讓我們體會到輕微的痛楚和憤怒，我們在內部觸發這里需要抓住用戶孤獨，無聊的情緒波動。當用戶無聊的時候，如果產品能快速的出現到用戶眼前，并能消除用戶的負面情緒，那么這就能讓用戶產生記憶點，每當這種情緒襲來的時候，用戶總能想到你。

通過展示游戲的熱度信息來吸引用戶關注，在用戶無目的性刷空間的時候，通過推薦熱門游戲相關數據，然后與用戶的孤獨情緒產生碰撞。

總結：觸發是讓產品賣出去的第一步，而有效的觸發才是成敗的關鍵點。有時候內部觸發和外部觸發并不是獨立存在的，在不同的場景下兩種方式是可以做到相互結合的。觸發方式千萬種，最適合自己產品的觸發方式才是最好的。

四、付出行動

人在做出行為時有兩個基本動因，一個是該行為簡單易行，二是行為主體有這個主觀意愿。

上一步我們已經通過各種方式觸發了用戶，這個時候就需要用戶能做出行動。在我們空間小游戲這個案例里，用戶點擊游戲 logo 時，我們有過一個很大分歧，那就是用戶在平臺或者廣告位上看到游戲 logo 點擊后，是直接進入游戲還是需要一個游戲詳情頁去介紹游戲。

兩種方式都有各自的優勢，即點即玩能快速的讓用戶進入游戲，能提高轉化率，游戲詳情頁能讓用戶更好的了解游戲內容，再進一步確認是否去玩這個游戲。

針對這兩個方案，我們最終選擇前者-即點即玩，因為我們考慮到 H5 游戲都是屬于比較輕量的游戲，所以我們希望用戶能形成一種認知，平臺內所有游戲是輕量的，便捷的。所以在面臨方案選擇時，回頭看看產品的調性與特點，可能能幫助我們做抉擇。

而針對已經玩過平臺內游戲的老用戶，我們必須能讓用戶在下次想開啟游戲時快速的找到玩過的游戲。根據后臺數據我們的用戶平均在玩的游戲數量是2.9個左右。最后我們選擇在小游戲首頁頂部位置設立一個最近在玩模塊，首屏展示三個，可滑動和查看更多，希望能讓用戶快速的找到玩過的游戲。

所以觸發是有分新用戶和老用戶的區別的，針對新用戶我們更多的是需要拿內容去吸引他們，而老用戶則需要能讓他們快速的找到自己已經玩過的游戲。所以觸發要簡單易行，主觀意愿是需要我們去引導和吸引的。

五、情感撩動&情感滿足

優秀的游戲總是能持續的撩動用戶的情感，讓人在游戲中得到滿足感，成就感。我們平臺所有游戲都是第三方公司提供，我們沒有權限對游戲內容進行過度的參與，我們只能盡可能的把最優質的游戲篩選進來，所以在情感撩動和滿足上我們不能完全依賴開發商的游戲質量和設定。所以必須在我們平臺的體驗上給用戶一些噱頭，一些小目標，讓用戶在平臺上也能得到情感滿足。只有這樣，用戶才能對平臺產生記憶點和依賴，這才是我們想要達到的目標。

從平臺的角度我們希望通過<社交屬性，獎勵機制>兩個方向去撩動用戶的情感，用戶可以在社交里面找到榮譽感（曬自己的游戲等級和戰績）,也可以在多變的獎勵機制里面不停的完成一個又一個的任務而獲取相應的獎勵。

1. 社交屬性

游戲社區，讓充值玩家可以有地方炫耀自己獲得成就感（名稱附帶游戲等級和榮譽），讓普通玩家也能通過社區了解更多游戲攻略，甚至可以在這里與陌生人交友（點擊頭像可跳轉手Q資料卡）。

2. 獎勵機制

• 游戲禮包 tab，通過發放平臺特殊禮包福利，讓用戶養成習慣，每日來平臺領取禮包再去玩游戲。
• 平臺任務（簽到，轉發，進入游戲等）可獲取積分，積分可以到兌換商城換取游戲金幣和抽獎，通過積分抽獎能調起用戶的心理起伏，讓用戶樂此不彼的投入到獲取積分當中。
• 首沖優惠，充值抵扣券，通過優惠的方式引導用戶充值，研究表明當用戶首沖后，之后充值的概率會提高很多。

總結：多變的福利獎賞會使大腦中的伏隔核更加活躍，并且會提升神經傳遞多巴胺的含量，促使我們情感產生起伏，然后一旦情感被滿足，我們將會持續的投入下去，比如更多的時間，更多的金錢。

六、持續投入

人為什么會進行投入，投入行為背后的大思路是利用用戶的認知，就是用戶會認為投入越多，服務越好，得到的情感滿足越豐富。當然事實也的確是這樣的，投入的階段我們需要讓用戶對未來的獎賞（心理，福利）抱有強烈的期待，這樣才能讓用戶持續的投入。

比如我們在設計 VIP 體系時，隨著 VIP 等級的提升，用戶所擁有的特權就會不斷增加，通過特權的吸引，當用戶在游戲體驗中發現了比較困難的任務時，我們就會提醒用戶是否去升級 VIP，讓通關更輕松，用戶將很難抵擋這種特權滿足。

又比如我們設定每周三為積分翻倍日，用戶可以得到更多的積分，我們不斷豐富積分商城的兌換物品，持續吸引用戶的注意，讓用戶不斷去期待新獎勵。

七、PICK ME

我理解的 pick 是一種充滿信任感的選擇，這種選擇會讓用戶去把產品分享給自己的好友，會在社交平臺上討論產品。但是能讓用戶 pick 你，并不是一件簡單的事情，就好比你 pick 創造101小姐姐時，你可能會關注小姐姐的樣貌、才藝、背景、人設，這些都是影響你產生認同感重要的因素。

我們做產品何嘗不是這樣呢，如果你的產品沒有解決用戶的痛點，沒有讓他產生愉悅的情緒，你就會被「淘汰」。用戶的投票都是在符合自己心智模型的基礎上做出的選擇，pick 模型的設計目的就是將用戶遇到的問題（情感需求）和我們作為設計者的解決方案頻繁的聯系到一起。

總結

讓用戶對產品產生習慣，是我們的終極目標。而如何讓用戶產生使用習慣，不是一朝一夕能達成的，這需要產品不斷的迭代優化，讓你的產品不斷的解決用戶變化多端的需求，那么忠誠就隨之而來了。我們回顧一下 pick 理論，從更簡單理解的角度來看，可以分為<觸發-持續解決問題-養成習慣>，這里的難點屬于第二步，當你的產品能不斷解決用戶的問題，養成習慣只是水到渠成的結果罷了。

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

一、圖文布局

用戶所關注的內容以及不同的業務訴求決定信息的優先級排布，所以沒有通用的布局，只有適合的布局。

1. 上圖下文

上圖下文更強調了圖片的重要性，以「見」這個屬性為優先，上圖下文需要注意的是圖片高度過高會嚴重影響版面效率，而一個具有商業化目的的產品對首頁的版面效率異?？粗校瑯訉D片的質量要求也甚高。通常這樣的 feed流布局更抓人眼球。

如果確實需要以大圖+文的上下方式來布局，盡量找到版面的平衡點，考慮圖片與文字之間想要給用戶傳達的關系和優先級圖片的使用盡量使用黃金比例做展示，例如4:3，2:1，16:9等。

宮格排列式的上圖下文能夠極大的提升版面效率，一般更多用于電商平臺，在首頁將某個模塊的優質商品進行透出，提高轉化和流量。缺點是缺乏信息完整度，在布局時需要考慮更多因設備、極限值帶來的不同狀況的問題。

可以看出，嚴選將金額跟在標題后面，而非固定位置，這樣做的好處是將標題和金額關聯度更高，形成一致性，缺點是布局上顯得層次不齊影響閱讀效率。通常這樣的排版會根據業務需要來選擇展示一行或多行文字極限。但由于版面效率它不得不只給了兩行的極限高度。

2. 左圖右文

左圖右文形式的排版應該也算是用的非常多了。其實大家會經常把它和左文右邊圖進行對比。但無論是左圖還是右圖，在這樣的布局中我們首先就要做好圖和文的占比。顯示在外面的圖片通常是選取了詳情中的圖片來進行展示，否則就浪費了比較多的人力資源去重新配圖了得不償失。同樣和圖片搭配的信息字段此時就顯得極為重要。

菜鳥裹裹其實將標題的優先級又提升到了和圖片一樣的層次。圖片本身給人的視覺沖擊會更強所以即便圖片放在標題下面，也不會弱。

方形縮略圖是最常用的形式，不至于太窄也不至于太寬，對于右側信息的布局也顯得更游刃有余。橫形的圖片會讓右側的文字顯示空間壓縮的厲害，通常在視頻縮略圖會用到，但圖片對整個頁面的氛圍感會更好。豎形的圖片讓右側信息有更多的發揮空間，同時版面的留白也更大，但是如果右側信息過少，則會讓頁面有些單調和不完整。

左文右圖就不再贅述，現在大多數左文右圖在咨詢和旅游產品中使用的更多，因為用戶在瀏覽這樣的列表信息時圖片無法在第一眼被識別出具體內容，而對于這樣的產品來說無疑是低效的。當然很多時候沒有那么多時間去驗證如此設計對于用戶來說是否真的能提高瀏覽效率，提升了多少滿意度。我們可以簡單的理解，如果說的是一件事，那么文字比圖片更重要。如果說的是一樣物品、人，那么左邊放圖更合適，體會一下。

3. 圖文混排

為了使信息傳達的更一致，通常如果沒有大量的文字信息則我們會選擇文字與圖片混排的形式，為了適應多變的圖片，我們會在文字底部加一層黑色半透明蒙層或者給文字加一些無傷大雅的陰影。前提是文字信息不會太多而干擾到圖片內容的展示和傳達。

二、按鈕解析

其實嚴格意義上來說，能通過點擊觸發交互動作的控件我們都能將它定義為按鈕，但是如果這樣定義那就沒的玩了，所以我們將移動端的按鈕定義為具有引導性并且可點擊的控件。

例如京東金融查看歷史支取利率后的箭頭，其實這才是這一行的引導按鈕，但是為了更好的觸發點擊通常會將整一行都作為點擊熱區。

所以為了區分不同的按鈕的用法，我這邊將按鈕進行了一個分類：主線場景、支線場景、異常場景。

主線場景下的按鈕通常會使用的比較大，為了強化和引導核心的任務流程，所以該按鈕應該是最醒目的。

樣式通常會分為通欄和非通欄，而通欄則是從 MD 設計中衍生出來的一種形式。

1. 主線場景

要注意的是，通欄和非通欄按鈕我們到底該如何選擇，首先我們需要知道這樣的按鈕都是放在頁面的底部固定顯示，不會隨著內容滾動，如果選擇通欄按鈕，則更適合可滾動的頁面容器，也就是說一頁中內容較多在一屏幕中無法顯示全的頁面，優點是按鈕的優先級會很高，但是在 iphone X 這樣的設備中，適配會糾結一些。

而如果選擇不通欄的按鈕，我們要考慮的是頁面內容是否很長，如果很長需要在按鈕底部加一層白色背景，盡量不要讓內容穿過按鈕，因為底部其實并不是內容最好的顯示區域。同樣非通欄的置底按鈕相較于通欄按鈕層級就顯得沒那么高。

所以我們會發現考拉和淘寶雖然有樣式區別，但實際上都相當于在底部有一層內容遮蓋的部分。

2. 支線場景

再來看支線場景的按鈕，支線場景的按鈕一般能夠分為：圖標、文字、圖標+文字、框+圖文字+圖標這樣幾種類型。

圖標就不用說了本身就具有可操作的屬性，也有修飾的屬性，關鍵看他的場景和布局位置。例如淘寶的 tab 標簽上的定位圖標，就是一種修飾型的圖標，為了更好理解這里的定位是一種樓層定位，隨著頁面滑動到不同的業務模塊而會跳動，這里并不是一個 tab 的功能，不能算是切換頁面。

如果把定位按鈕單獨拿出來放在導航欄，或者頁面右側的空白處，我們就會覺得他是一個可點擊并能夠進行跳轉的按鈕。

包括「查看全部」這樣的文字，即便不加箭頭我們也會嘗試去點擊，高亮顯示就更加明顯，用戶已經形成這樣的意識，但是像上面的規格和參數如果不加箭頭會讓用戶覺得這里并沒有可操作的東西就不去點擊了。所以我們總結一下就是支線按鈕的使用場景較為復雜，需要通過參考上下文的情景來做不同樣式的選擇。

不過支線流程畢竟是支線流程，為了不打擾主線流程，盡量不要將支線流程的按鈕做的過分明顯。例如淘寶詳情頁中的進店逛逛，其實這個按鈕用了實心的色塊做了強引導，目的是為了提高客單價，同樣只要是對最終目標有幫助，并不能算是跳失，說不定回來的時候買了更多更貴的東西。

3. 異常場景

異常場景下的按鈕不需要做的過于醒目，一般會采用幽靈按鈕或者和背景近似的顏色。該場景下按鈕大多數情況是希望用戶點擊將頁面恢復正常狀態，并不是一種強烈的引導。

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

作為 UX 或 UI 設計師，初次接觸 VR 可能會有所畏懼，但不要害怕，在本文中，我們將分享一個設計 VR 應用程序的完整過程，我們希望您可以通過這個案例來開始自己的 VR 設計之旅。你不需要成為 VR 的專家；你只需要將你之前的設計技能應用到一個新領域。最終，經過大家的共同努力，我們定可以加速 VR 的發展以發揮它的全部潛力。

一、VR應用程序里有什么？

一般來說，從設計者的角度來看，VR 應用程序由兩種類型的組件組成：環境和交互元素。

環境：您可以將環境視為您戴上 VR 頭盔時所進入的整個世界 ， 比如你身處的虛擬星系或者駕駛過山車飛馳的樂園。

交互元素：界面上影響用戶交互和操控體驗的元素合集。

根據這兩個組件的復雜性，所有 VR 應用程序都可以沿兩個軸定位。

在左上象限中的 VR 應用有類似模擬器的東西，例如過山車的 VR 應用，這種應用具有完全成形的環境，但根本沒有交互。你只是被鎖在了車里。

在右下角的象限中，應用程序具有一個更好的界面，但比較少或沒有3D環境。三星的 Gear VR 主屏就是一個很好的例子。

設計場所和景觀等虛擬環境需要熟練使用3D建模工具，許多設計師平時無法接觸到這些元素。但是，UX 和 UI 設計人員有很大的機會將他們已有的技能應用于設計虛擬現實的用戶界面。

我們所做的第一個完整 VR 的 UI 設計是 The Economist 的應用程序，與 VR 制作工作室 Visualize 合作。我們做設計，Visualize 創建內容并開發應用程序。

我們在之后文章中將此應用作為一個工作示例，現在我們將介紹設計 VR 應用程序的方法，然后再介紹設計 VR 界面的細節。您可以從 Oculus 網站下載Gear VR 的 Economist 應用程序。

二、VR UI設計的第一步-回顧傳統流程

盡管大多數設計師已經熟悉了設計移動應用程序的工作流程，但還不太清楚設計 VR 界面的流程。當面對第一個VR應用程序設計項目時，我們首先要做的是合乎邏輯。

傳統工作流程到全新領域

當我們第一次使用三星的 Gear VR 時，我們注意到它與傳統移動應用有很多相似之處。VR 應用程序與傳統應用程序有著相同的工作流程：幫助用戶與界面進行交互。

現在請記住。鑒于與傳統應用的相似性，設計師花費數年時間改進的久經考驗的移動應用工作流程不會浪費，這些流程仍然可用于制作 VR UI。這讓你比你想象的更接近 VR！

在如何設計 VR 界面之前，讓我們回過頭來看看傳統移動應用的設計過程。

1. 線框

首先，我們將進行快速迭代，定義交互和總體布局。

2. 視覺設計

在此階段，功能和交互已經完成。我們把視覺規范與設計應用于線框圖，并制作出漂亮的界面。

3. 設計文檔

在這里，我們將屏幕組織成流程，繪制屏幕之間的鏈接并描述每個屏幕的交互。我們將此稱為應用程序的設計文檔，它將被用作開發人員的主要參考。

現在，我們如何將此工作流程應用于虛擬現實的設計當中呢？

三、開始VR UI設計

1. 畫布的尺寸

最簡單的問題可能也是最具挑戰性的。面對360度的畫布，人們可能很難知道從哪里開始。事實證明，UX 和 UI 設計者只需要關注整個空間的某個部分即可。

我們花了幾周時間試圖弄清楚什么樣的畫布尺寸適用于 VR 設計。當您使用移動應用程序時，畫布大小取決于設備的大小：iPhone 6為1334×750像素，Android大約1280×720像素。

要將移動應用程序工作流應用于 VR UI，首先必須確定合適的畫布大小。

以下是扁平化時360度環境的樣子。這種視圖叫做等角矩形投影。在3D虛擬環境中，這些投影圍繞球體纏繞，以模仿現實世界。

整個投影的水平寬度是360度，垂直180度。我們可以用它來定義畫布的像素大?。?600×1800。

使用這么大的尺寸可能是一個挑戰。但因為我們主要對 VR 應用程序的界面設計感興趣，所以我們可以專注于這個畫布的一部分。

基于邁克·阿爾格（Mike Alger）對舒適觀察區域的早期研究，我們可以找出一個合適的部分來展示界面。

感興趣的區域占360度環境的九分之一。它位于圖像的中心，大小為1200×600像素。

讓我們總結一下：

「 360度視圖 」：3600×1800像素

「 UI視圖 」：1200×600像素

四、測試原型

「UI視圖」畫布有助于將我們的注意力集中在我們正在制作的界面上，并使設計流程變得更加容易。

同時也必須使用「360度視圖」在 VR 環境中的預覽界面。此外為了獲得真實的比例感，使用 VR 頭盔測試界面也是必要的。

△ 使用Avocode，您可以輕松直觀地比較設計

五、設計工具

在開始之前，我們需要以下工具：

1. sketch

我們將使用 Sketch 來設計我們的界面和用戶流程。如果您沒有，可以下載試用版。Sketch 是我們首選的界面設計軟件，但如果您使用 Photoshop 或其他任何軟件更舒服，也沒問題。

2. GoPro VR Player

GoPro VR Player 是一款360度內容查看器。它由 GoPro 提供，是免費的。我們將使用它來預覽我們的設計。

3. Oculus Rift

Oculus Rift 連接到 GoPro VR 播放器，這將使我們能夠測試我們的設計。

六、VR界面設計流程

在本節中，我們將介紹如何設計 VR 界面。我們將一起設計一個簡單的界面，最多花費5分鐘時間。

下載源文件：https://pan.baidu.com/s/1WUUwNLlTJkG82Hxdofaqzg  密碼：09vt，其中包含預設的 UI 元素和背景圖像。如果你想使用自己的設計文件，那也是可以的。

1. 設置「360度視圖」

首先要做的事情，讓我們創建360度視圖的畫布。在 Sketch 中打開一個新文檔，并創建一個畫板：3600×1800像素。

導入文件 background.jpg，并將其放在畫布的中間。如果您使用自己的背景文件，請確保其比例為2：1，并將其大小調整為3600×1800像素。

2. 設置畫板

如上所述，「UI view」是「360 view」的裁剪版本，我們僅關注 VR 界面。

我們創建一個新畫板：1200×600像素。然后，復制畫板到「360 view」中，并將其放在畫板的中間。不要刪除「360 view」畫板，我們同時保留著兩個畫板，以后會用到它們。

3. 設計界面

我們將在「UI View」畫布上設計我們的界面。我們會盡量簡單一些，首先在視圖上添加一些圖塊。您可以使用 tile.png 文件將其拖到 UI 視圖的中間。

復制它，并創建一行三個圖塊。

使用 kickpush-logo.png 文件，并將其放在圖塊上方。

4. 合并畫板

現在來看看有趣的東西。確?！窾I view」畫板位于左側圖層列表的「360view」畫板上方。

將「UI view」畫板拖動到「360 view」畫板的中間。將「360 View」畫板導出為 PNG；「UI view」將位于其上方。

5. 在VR中測試它

打開 GoPro VR Player，并將剛剛導出的「360 View」PNG 拖到窗口中。使用鼠標拖動圖像以預覽360度環境。

我們完成了！是不是很簡單？

如果您的機器上安裝了 Oculus Rift，則 GoPro VR 播放器應該可以檢測到它并允許您使用 VR 設備預覽圖像。根據您的配置，您可能需要在 MacOS 中做一些顯示設置。

七、VR設計中需要注意的因素

1. 低分辨率

VR 頭盔的分辨率非常糟糕？這不完全正確，其實它相當于手機的分辨率。但是，考慮到設備距離您的眼睛5厘米，顯示器看起來并不清晰。

為了獲得清晰的 VR 體驗，我們需要一個8K的顯示屏，這是一個15,360×7680像素的顯示屏。相信這種設備早晚會普及。

2. 文本可讀性

由于顯示器的分辨率較低，會導致所有精美的 UI 元素都會看起來像素化。這意味著，首先，文字難以閱讀，其次，直線部分會出現鋸齒。所以盡量避免使用大段文字和特別復雜的 UI 元素。

八、收尾工作

1. 設計文檔

還記得我們的移動應用中的流程圖嗎？我們現在將這種做法也應用到 VR 界面。用我們已經做好的界面組織成一個易于理解的流程圖，這非常有益于開發人員理解我們設計的應用程序的整體架構。

2. 動效設計

設計一個漂亮的 UI 是一回事，但讓他動起來又是另外一回事了。我們決定以二維視角來處理它。

基于我們的 Sketch 文件，我們使用 Adobe After Effects 和 Principle 為界面設計動畫。雖然輸出的不是真實的3D體驗，但它足以指導開發團隊了，且能幫助我們的協作者在流程的早期階段了解我們的愿景。

△ 你剛剛設計了第一個 VR UI。真棒！

我們知道你在想什么，「這很酷，但真實的 VR 應用程序會復雜的多。」是的，當然是。但重點在于我們可以在多大程度上將我們當前的 UX 和 UI 的經驗應用于這種新媒介？

九、VR UI可以走多遠？

1. 新的交互體驗

一些 VR 體驗非常依賴虛擬環境，然而傳統界面的確已經不是用戶控制應用程序的最佳方式了。在這種情況下，您可能希望用戶直接與環境本身進行交互。

想象一下，你正在為一家豪華旅行社制作應用程序。您希望以最生動的方式將用戶轉移到潛在的度假目的地。因此，您邀請用戶佩戴耳機并在時髦的切爾西辦公室開始體驗。

要從辦公室轉移至目的地，用戶需要選擇他們想去的地方。他們可以拿起一本旅行雜志，輕輕松松瀏覽它們，直到它們被某一頁吸引。或者，桌面上可能會有一系列有趣的物品，根據用戶選擇的不同，將用戶帶到不同的位置。

這確實很酷，但也有一些缺點。為了達到完美的效果，你需要一個更先進的帶手持控制器的 VR 頭盔。不過，像這樣的應用程序要比傳統的應用程序花費更多的精力來開發。

2. 革命萬歲

現實情況是，對于大多數公司而言，這些沉浸式的體驗在商業上還不可行。除非您擁有幾乎無限的資源，例如 Valve 和 Google，否則創建類似于上述體驗的產品可能成本太高，風險太大且過于耗時。

這種體驗非常出色，可以帶你到媒體和技術的最前沿，但通過新媒體將產品推向市場并不太好。

通常，當一種新形式出現時，它會是一個小眾產品。隨著時間的推移，成本的下降，有足夠的人去學習和市場的資本注入，它就會成為應用廣泛的產品。

隨著 VR 頭盔變得越來越普及，將會有越來越多的公司將 VR 融入他們與用戶的互動當中。

從我們的角度看，相比于手機、平板，VR 用戶界面本質上是更直觀的，并且更接近用戶，隨著科技和市場的發展，VR 將會帶來更大的價值。

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

《名偵探柯南》中總是提到福爾摩斯的一段話：「When you have eliminated the impossible, whatever remains, however improbable, must be the truth.（排除一切不可能的，剩下的即使再不可能，那也是真相。）」這句話用干擾效應來解釋最好不過，本期我們來聊聊。

想看更多設計法則，這個專題里全都有：設計法則專題

一、干擾效應（Interference Effect ）定義

干擾效應：一種現象，同時思考兩件或兩件以上的事情時，思考的過程會變得比較慢，也不準確。

二、干擾效應產生理由

有兩種或兩種以上的知覺或認知過程發生沖突時，就會產生干擾效應。

人們的知覺和認知的不同與心智模型有關，這些模式會獨立分析、處理收到的相關信息，處理后會傳送到工作記憶區，并作出詮釋。當輸出資料一致，詮釋過程會又快又好。當輸出資料不一致，就會產生干擾，需要一些其他的處理，以便更好地解決。解決這些問題需要浪費很多時間，對性能也會產生不好的影響。

三、干擾效應案例

1. 斯特魯普干擾

斯特魯普干擾（Stroop Interference）：刺激物不相干的一面引發了思考過程，因而干擾了刺激物相關方面的思考。

圖標協同文字可以準確的向用戶傳遞所要表達的內容，二手在常用的 App 中截出了一些圖標，卻發現現在很多的圖標在信息傳達方面有所欠缺。

舉四個例子：

下面這組圖標，「地方菜系、美食、晚餐、大牌簡餐」幾個圖標沒有表達出所要傳達的信息，還有幾個圖標要借助文字才能表達出其含義。即使圖標設計的非常精美，但是圖標功能卻存在缺失，而且這幾個圖標不能刺激用戶對信息的理解，反倒是讓用戶更加迷惑。設計師也注意到了這個情況，所以最近改版后，信息傳達變的更加直接，減少了干擾。

接下來的這組圖標也存在同樣的問題，這組圖標想借助圖標上產品本身的含義來傳達給用戶要表達的信息，但是這需要用戶對這些產品本身的定位非常明確，如果不明確的話只能干擾用戶的行為，例如，用戶需要知道「呂」是個韓國洗發水之后才能拐彎抹角的聯想到「全球超市」，再例如：中間「輕奢」圖標，用的是勞力士綠水鬼，一款70000+還要靠等才能買到的奢華手表，二手認為跟輕奢的定義有矛盾，除非這并不是勞力士。

米家這套圖標二手認為可以準確傳達所描述的信息，因為米家有種類繁多的 loT 產品，有時候一款產品更是分為不同的版本，如果用戶只是根據名稱選擇的話不僅繁瑣而且十分耗時，所以在選擇產品時，米家把所有產品外形準確刻畫成圖標，用戶可以先根據自己產品的外形大致選擇型號，再根據文字提示準確的選擇自己產品的版本。

△ 米家App圖標

滴滴這套圖標表達也很準確，不同的服務通過不同的圖標可以準確傳達。

△ 滴滴圖標

2. 加納干擾

加納干擾（Garner Interference）：刺激物一個無關的變化，引發了思考過程，干擾到跟刺激物相關的思考過程。

舉個例子：如下圖，指出單獨一排的形狀，比指出兩排其中一排的形狀要簡單。兩排形狀緊靠在一起，激發了想說出旁邊形狀的思考程序，造成干擾。

根據上面這個案例，二手聯想到了「個人中心」頁面，大部分「個人中心」頁面都選擇了豎排列表布局。列表布局就是以列表的形式展示具體內容，并且能夠根據數據的長度自適應顯示，Material Design 建議列表是「可快速掃描」，適合顯示類似的重復的內容。列表布局也是最快速的 app 布局方式。這種排列在某方面上就是降低了干擾。相比于列表布局，宮格導航是將主要入口全部聚合在頁面，讓用戶做出選擇。這樣的組織方式無法讓用戶在第一時間看到內容，選擇壓力較大，采用這種導航的應用已經越來越少，往往用在二級頁作為內容列表的一種圖形化形式呈現，或是作為一系列工具入口的聚合。

△ 列表布局和宮格導航

3. 前向干擾

前向干擾（Proactive Interference）：現存記憶干擾了學習。

舉個例子：手淘的最近改版中，店鋪首頁頂部導航和底部自定義菜單結構化調整，但是有一個細節的變化讓二手不斷的犯錯——返回按鈕改成了關閉按鈕，二手習慣點擊左上角返回按鈕來返回上一級菜單，改版后依舊習慣點擊左上角，但是打開的是店鋪印象，僅僅是圖標左右位置簡單的調換，已經讓二手在使用的過程中挫敗感強烈。這就是現在的使用記憶已經嚴重干擾了學習。所以產品在改版迭代的時候，盡量不要干擾用戶已經熟悉的路徑或是破壞用戶使用習慣。

△ 手淘的店鋪首頁改版

4. 后向干擾

后向干擾（Retrosctive Interference）：學習干擾了現存記憶。

這個正好跟上面相反，二手不斷培養現在的使用習慣，漸漸的就忘記了上一版的路徑。

四、怎樣預防干擾

要想預防干擾，就要避免輸出思考過程中相互沖突的設計。知覺的干擾效應，通常是因為信息的傳達過程中有歧義，或是因為把互相干擾的元素結合在一起。要把干擾效應降到，首先要求設計師用準確的設計語言傳達信息，如果這樣還是無法讓用戶很好的理解，其次可以考慮利用文字或者引導來告知用戶。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

為了幫助設計師提升基礎審美。每周我們會挑選全球優秀拔尖的設計，幫你解讀每個設計背后的思考！讓基礎審美養成設計好習慣的第一步。

------------------任何設計問題添加微信：uiskyss---------------------------

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