業內有很多人覺得手勢交互沒必要拿出來深究，覺得用戶使用產品的過程中，自然而然就會去使用拇指，進行手勢操作。但這種說法，就跟「用戶心理模型」類似。當然，對于用戶來說沒必要深究手勢交互，但作為設計師，如果不了解其背后的邏輯，那么就無法解決產品設計背后的一些問題。
所以我們今天，好好聊一聊手勢交互這件事。你會發現，原來你以往觀察或以為的設計問題，都是手勢交互在作祟。
我們以前經常聽到「以用戶為中心做產品設計」這句話，意思是產品需依附于目標用戶的真實場景來設計。與此同時，其實還有一句話在提醒著交互設計師如何做產品設計，就是「以觸摸屏為中心做產品設計」。
為什么呢？因為用戶從始至終都是在跟觸摸屏做接觸，不管換了什么設備，他們都是要通過屏幕與產品進行交互的。
我們可以在這里思考一下手勢的意義。
手勢的出現改變了什么？可以回想一下 iPhone 4 發布的時候，當看到這樣一臺屏幕上沒有任何按鍵的設備，是不是會覺得不可思議？鍵盤，電話接聽按鍵等都消失不見了。
人們在使用 iPhone 這樣的產品時，不再需要去強行記憶任何固體按鍵。觸摸屏與手勢的結合，幫助我們隱藏不必要的元素，幫助用戶聚焦于內容，在有限的物理空間獲得更多的信息。
所以用戶通過觸摸屏與產品進行交互，跟通過鍵盤按鍵與屏幕進行交互是完全不同的。手勢交互更自然且更。
手勢操作對我們來說如此自然和直觀的主要原因是因為它們類似于與真實對象進行直接交互。譬如你用遙控器控制電視上的按鍵，需要通過上下左右這樣的操作來定位指示器，而觸摸屏直接就可以通過手指點擊內容進行操作。這是完全不同的概念。
綜上所述，我們能知道，手勢的三個要素：簡潔、易用、直觀。
所以我們通過一些常見的手勢行為，就可以在產品界面上很輕松的完成任務。
常見的手勢行為：
當然，我們經常也會遇到一些背離手勢交互的產品設計，雖然也是點擊、拖動等等，但操作起來總是不那么順心。這里面有一個關鍵點就是，手勢直觀性。
有數據表明，蘋果的 3D Touch 使用率非常低，就是因為直觀性太差，用戶不知道通過這個操作能帶來什么結果，且使用它需要長按，經常會同時呼出「卸載」，那么效率也就會降低。久而久之，用戶就不去使用了。
正面例子如下圖，滑動與文案結合。
這樣一看，用戶馬上就能知道這個操作行為如何觸發，緊接著就產生行動，然后會反饋結果。
這也是手勢交互的核心：觸發，行動，反饋。
對比 3D Touch，觸發沒有提示，行動后時常有兩種反饋結果，相比起來就不那么友好了。
除了上面聊的這些，手勢交互還能從另一方面來提升效率，就是拇指操作區域。
我們都知道，現在手機屏幕越來越大，甚至比最早屏幕大了一倍以上。但是很多設計師并沒有轉換思維，跟進這個趨勢的變化。
這里給大家普及一個知識：大部分人誤以為，手指在屏幕上的熱區是永恒不變的，但其實手指熱區會根據設備的變大而縮小。因為手掌支撐設備的重心靠后走了，所以拇指操控屏幕的范圍也就變小了。如下圖。
結果是，手機屏幕變大，雙手持機的用戶變多，但依然還有 75％ 的用戶是使用拇指來觸摸屏幕的。因此，術語「拇指驅動設計」應運而生。
我們上面說到，在使用一些產品的時候，經常會遇到使用起來不順心的情況，然后說了「手勢直觀性」的概念。但這里，還有個更重要的原因，就是「拇指操作區域」。
拇指操作區域被分為三塊內容，分別是：易于觸達，難以觸達，以及介于兩者之間的區域。
看下圖。
所以在設計界面時，要注意界面的主要操作元素是否處于用戶易于觸達的范圍之內。
如果你仔細觀察并思考過，也會發現，iOS 的產品界面中，「返回」按鈕就位于「難以觸達」的區域。原因是產品人員本身也不想用戶返回或退出，而是讓用戶聚焦于當前頁面，想要返回，那就需要付出一點成本，什么成本？操作成本。
有人會說，由于 iOS 可以從手機的左邊緣向右側輕掃以獲得返回效果，因此在大多數 iOS 產品中，返回都不需要太大的操作成本。但是，并不是所有 iPhone 用戶都知道這一點，也不是所有產品都支持這一特性的。而且手勢交互的進化本來也就是為了提升用戶操作的效率，所以本質上他們并不矛盾，只是相比以前，我們現在的操作更快了。并且「右滑」返回，本身在手勢操作中相比「點擊」也是更具操作成本的。
當了解了手勢的一些意義，以及拇指操作區域對于產品設計的重要性之后，我們就可以通過一些案例來做一個全局分析了。
1. 內容在上，操作在下
許多人設計 App，但是沒人研究過 App 為什么要這么設計。
比如，為什么起初要把標簽欄放底下呢？關于這個問題，當初我也是問了許多人，而基本都只是說這是官方設計規范。這相當于是一句廢話。
通過翻閱多方資料，我發現在工業設計領域有一條重要的基本設計原則：內容在上，操作在下。
比如在使用電腦的時候，操作在下意味著使用者在操作過程中，手指始終處于界面下方，而內容在上面，就不會出現手指遮擋內容的情況。
如下圖的鍵盤操作提示：
基于此，相信你也知道為什么標簽欄在下方了吧？
另外，為什么 iOS 設計規范建議將「編輯」按鈕放置在界面右/左上方的位置呢？
界面右/左上角的位置對拇指來說顯然是不友好的。然而，這樣做的原因也是顯而易見的：編輯功能會讓數據發生變化。將這類控件放在難以操作的位置上（與左上角的返回是一個道理），就是一種防御性的設計策略，可以在一定程度上避免因為太容易產生誤操作而導致的破壞性的結果。
通過這一小段之前聊過的內容，你們會發現，手勢與拇指操作其實在驅動著產品設計。下面我們來聊個大的案例。
漢堡包菜單，也就是側邊欄導航，Facebook 早期測試顯示側邊欄導航讓用戶使用率降低了一半。
我們一起來看看市面上給出的三類說法。
1. 可見性太低
默認狀態下，用戶是看不見側邊欄的，除非點擊了側邊欄的彈出按鈕。所以這種情況下，里面的功能都是用戶腦袋里已知的，但很可能都想不起來。比如，現在你回想一下知乎底部 5 個標簽分別是什么？或者微信右上角「+」里面有哪些功能？是不是要想一會兒，才能記起來？甚至還是想不起來。
之前我在文章里寫過，用戶對于功能的使用一定是「所見即所得」，而不是「心向往之」。用戶只會注意自己看到的信息，而不是憑借記憶或想象來使用產品。
底部標簽欄就很好的解決了漢堡包菜單的「可見性」問題。
2. 效率較低
效率較低主要在于操作頻率，大家看下面兩組圖的對比。
第一張圖，當用戶從首頁進入到個人信息頁面，只需要兩步；而第二張圖，則要三步。
這里多一步看起來似乎影響不大，但如果現在要從個人信息頁面到「標簽 3」的話，第一張圖也只需要兩步，第二張圖還是需要三步，當頻繁去使用這樣的產品后，用戶的整體效率就會下降，體驗也會隨之降低。
3. 與平臺模式沖突
大家應該知道，在 iOS 的操作頁面中，通過手勢可對 tab 進行左右切換，而側邊欄除了通過點擊菜單按鈕展開之外，也可以通過右滑彈出。這里面有什么沖突呢？看下圖。
當頁面聚焦在「標簽 2」時，右滑除了能回到「標簽 1」，同樣也很可能會切出側邊導航欄。
這樣的手勢沖突，導致頁面層級與功能導航的優先級混亂了。
無論是導航還是控件，當它們組成一個頁面后，它們的操作就會有優先級。比如下面這個例子。
如果你對標紅的分段控件比較熟悉，就知道，它是可通過屏幕滑動進行切換的。但是在「短信」里，它是不能通過滑動屏幕進行切換的，因為用戶可對單條信息進行左滑做刪除或其他操作。所以當頁面操作模式存在矛盾時，我們會將子層級操作優先于父層級操作。
譬如你進入朋友圈，是不能馬上回到首頁的，這時候頁面層級較深，產品人員要將用戶聚焦于頁面本身，如果直接能返回到首頁，頁面層級和產品架構就會混亂。
類似的例子還有很多，我這里就不繼續列舉了。
所以從「短信」的例子可以看出，當控件與控件之間的手勢發生沖突時，我們要考慮優先級，將內容優先于頁面來處理。那么回到上面的例子，分段控件與漢堡包菜單的手勢發生沖突時，很明顯我們要優先分段控件的操作，而禁止掉漢堡包菜單的右滑手勢。結果就是，效率又低了。
4. 小結
這三類，如果你認真思考里面的關系，其實就會發現，它們的共通點就是與拇指的聯系過于被動或直接被切斷了。
它們的核心點就是拇指與觸摸屏的關系。
如果你現在還不能深刻理解漢堡包菜單的劣勢，那就想一下去看一下現在的產品，其中「我的」、「個人中心」或「更多」其實都是變相的漢堡包菜單。
在「我」這個標簽頁里，這一系列功能列表，無非就是另一種模式的漢堡包菜單，只是這里呈現的都是不重要的功能，并不影響用戶使用這個產品?；叵胍幌?，你是不是很少，甚至從來沒用過這里的某幾個功能？再跟手勢結合，就會發現，「我」所處區域并不是容易點擊的區域，這就是它效率低下的原因了?，F在能懂了么？
當傳統的確認彈窗逐漸被手勢操作取代，大家就應該察覺到：以往從電腦遷移到移動設備上的交互行為已逐漸被改善。
我曾經寫過一篇文章，叫「取消按鈕的設計邏輯」，講了「左取消，右行進」這個原理。意思就是當我們在設計彈框的時候，用戶已經習慣這樣的操作路徑，所以不要輕易更換位置以混淆用戶的認知。再從手勢的角度來說，就是右邊更容易點擊。
后來有同學說到，但是有些特殊場景，譬如刪除資料，而產品人員不希望用戶刪除，于是把刪除放在左邊，取消放在右邊。畢竟右邊更容易點擊，所以位置換了會比較合理。
這是錯的！
我們不能通過改變用戶使用產品的常識來將產品人員的想法置于用戶之上。當用戶已經形成「左取消，右行進」的認知之后，違反這樣的一致性，去換位置是很危險的。所以出現了 action sheet，來解決一些產品關于 alert 無法解決的問題。
如圖。
大家要記住的是，當頁面邏輯與手勢操作產生邏輯沖突時，我們不是去否定以前已經被驗證且正確的內容，而是通過創新，來解決這個沖突。這就是拇指驅動設計的一種方式。
包括我們以前在移動設備上選擇刪除某項數據，都會彈出警告框，詢問我們是否確認刪除。這種方式會打斷我們的操作行為，久而久之，用戶已經對此交互方式習以為常，或者說免疫了，但這種彈框的方式始終被認為是不好的一種交互手段。所以側滑刪除，已經被更多產品功能用來取代沒必要彈框的操作。
也許很多人沒思考過底層原因，或者僅僅只是覺得其相比彈框顯得更友好。其實這個行為是基于手勢交互做了相應的優化，讓用戶操作起來更加方便。
到了這里，我再舉個所有人都熟悉的例子，就是輪播圖了。
輪播圖最早出現于網頁端，后來被大量商家模仿，以至于到移動端還備受各產品設計人員的歡迎。但其實很多人對輪播圖的使用方法都是錯誤的。
下面來看輪播圖與手勢的關系。
試想：你的輪播圖有 6 張 Banner，你要翻到第 4 張，無論是往前翻還是往后翻都要產生 3 次交互行為。而大部分產品的用戶在界面停留的時間不會這么久，更不會看完你 Banner 的內容。以至于有研究表明，大部分產品里，除了第一張 Banner 的點擊率能達到 83% 之外，其余的點擊率都非常低。
有人說可以點擊下面的原點指示器做跳轉，這么小的點，你覺得點擊它現實么？所以手勢交互與輪播圖是相互矛盾的一種設計方式。
所以當運營策劃了一個活動，而你就往頂部的輪播圖里塞，這個行為就已經注定這個活動的用戶參與度是很低的了。除了個別電商產品，他們以賣廣告位給商家作為盈利點，但即便如此，我相信這個廣告位除了第一張圖的點擊量稍高外，其他圖片的點擊量相對于產品本身的用戶體量比較而言還是很低的。這也是為什么部分產品把輪播圖規則改為用戶進入首頁隨機展示輪播圖頁面，而不是強制指定于顯示第一張的原因。
畢竟輪播圖在頂部，用戶需要通過拇指長時間的在「延伸區域」進行操作，那么使用率自然就降低了。
如果你的產品有很多活動是在同時期進行的，那么我給部分產品的建議是放一個活動主題入口，如下圖。（當然，這要視情況而定，并不是通用的。）
我們現在看到的搜索框基本都是放在屏幕頂部。
為什么呢？
市面上對這個問題的解釋是這樣的：用戶已經被現在的產品訓練得在界面的頂部必須看到一個搜索框，設計師打破這個常規就要承擔風險。
看完這篇文章，你就已經知道，對于用戶來說，由于屏幕頂部離拇指很遠，處于難以觸達的區域，在體驗上很不好。所以搜索框成了認知上應該在頂部，但操作體驗上又不應該在頂部的一個設計。
但是回想一下，會發現大多數 App 的主要內容都是位于易于觸達的區域。所以當看到高德地圖把搜索框移動到下面來之后，就能知道，拇指驅動設計的概念被越來越多的人認識到其重要性。
地圖類產品把搜索框移到下面來的首創應用不是高德，應該是 Lyft。
瞧，拇指驅動設計，多酷~
《上癮》里有句話：當人們不由自由地做出下一個舉動時，新的習慣就會成為他們日常生活的一部分。
當手勢充分地發揮了作用，輔助用戶操作或實現功能，它就成了用戶不可分割的一部分。
今天通過對手勢意義的解讀，以及拇指驅動設計的解析，再加上這些案例的拆解，我相信你能更好地理解為什么手勢交互這么重要了。
交互設計師對于「觸摸屏」，必須有深刻的認識，才能理解設計背后的邏輯。
如果這篇文章對你有幫助，記得點個贊，后面我好持續輸出。
文章來源：優設
流利說®少兒英語是流利說®為 3-8 歲兒童定制的一款英語啟蒙類產品，本次邀請到 UI 設計師 kelly，從視覺設計與輸出的角度，詳細地介紹該產品游戲題型的設計過程。
流利說®少兒英語，目標是幫助該年齡段的用戶建立發音自信，并且能對英語學習產生持續的興趣?；趦和澩娴奶煨?，自然而然我們會想到使用游戲化的設計，將枯燥的英語學習過程變得更有趣。
△ 收集糖果
△ 警察抓小偷
△ 切水果
△ 消滅細菌
游戲為輔，教育為主。
對于視覺設計而言，游戲題型設計的主要有以下 2 個難點：
接下來我將從視覺表達、視覺層級、反饋這三點分享我的一些思考和經驗。
在開始設計前，我們對 3-8 歲兒童進行了調研，發現處于該年齡段的用戶，大多有以下特性：
基于以上幾點，我們便總結出以下幾點設計方法。
視覺形式即題型玩法
以拼圖題為例，此題的目標是檢測孩子拼寫單詞的能力。如果僅將單詞挖空再讓用戶選擇，那么孩子會覺得這道題既不會玩，也不好玩。但如果在視覺表現上采用孩子比較熟悉的拼圖，就可以方便孩子更好的理解題目的意思，進而引導孩子的操作。
場景故事要有視覺連貫性
「游戲」（此處的「游戲」代指游戲題型）結束后有一個和故事設定相關的結束畫面，承接前面的操作，讓整個「游戲」過程能呈現出相對比較完整的體驗，以增強小朋友在「游戲」過程中的沉浸感。
△ 游戲操作：切水果
△ 游戲結尾：切水果榨果汁
由于兒童缺乏成年人所具備的視覺篩選能力，他們往往很難分辨出界面中的重要元素和次要元素。尤其是 3-5 歲的孩子，他們會習慣性地去點擊界面上所有吸引他們的東西。因此我們需要為不同層級的元素設置強烈的視覺區分，明確告訴他們哪些元素是可以點擊的，需要被關注的，哪些元素是不可互動的。
提高教學內容易識別性
游戲題型的設計方法通常是使用游戲的形式去包裝常規的教學題型，讓小朋友感覺是在玩游戲，而不是在做題。因此我們需要設計恰到好處的游戲容器去承載教學內容，使其兼具教學內容的識別性又不會影響「游戲」體驗。此處我們嘗試去拉開游戲元素和教學內容的視覺差距──在畫面中的視覺焦點處擺放教學內容，而游戲元素僅作為背景或者容器，用于襯托教學內容，并且盡量選取不易和教學內容發生沖突的形式。此外，為兼顧游戲畫面的豐富性和多樣性，容器的設計需要有一定的適配性。
△ 適配文字
△ 適配圖片
△ 適配文字和圖片
對于看文本讀單詞的題型，游戲容器則以烘托文字為主要目標。在該場景下，游戲容器的視覺設計重點在于外形的刻畫，簡化內部細節，以此將孩子的視覺重點聚焦在文本，而非容器本身。此外，為平衡字符段不同所帶來的顯示差異，我們對文字的大小也進行了適配。
△ 1-12 個字符──文字大小 88
△ 13-25 個字符──文字大小 76
△ 26-45 個字符──文字大小 62
背景畫面的層級感
在游戲題型中，有不少故事性強，空間延續性高的設定。為加強畫面的運動感和空間感，視覺輸出時，我們額外增加了前景層，利用前景圖片打造視差效果，以增強整個背景的層次感。
前景圖片的設置，同時也能解決適配不同屏幕尺寸時，背景區域顯示差異所帶來的視覺問題。
縱向運動的情況下，兩側的圖形如果設置在背景里，當適配到短屏幕的時候就無法呈現出來。
而單獨設置成前景圖，則可以靈活地適配不同屏幕比例的機型。
克制地使用過于明亮的色彩
用研時，我們發現孩子們容易被顏色醒目的東西所吸引，但如果一個頁面上過度使用明亮的色彩，則會大大分散孩子們的注意力，顏色過載所導致的視覺信息復雜性會增加孩子們的使用難度。
合理的反饋包括符合交互邏輯的及時反饋和適當的正負反饋。在游戲設計中，設計師大多會通過酷炫的動效來做重要操作的點擊反饋，以增加游戲爽感。這套法則，在兒童世界也同樣適用。
及時反饋制造小驚喜
我們在產品的反饋設計中適時地增加一些有趣的微動畫，給孩子們制造一些小彩蛋。這些小驚喜，不僅能及時地拉回小朋友的注意力，給他們帶來趣味性的同時，對他們而言也是一種鼓勵。
例如：當用戶點擊拼圖題選項時，會出現 IP 相關的卡通元素，這些元素既能加強趣味性，又能加強用戶對品牌的認知。
適當的正負反饋
大約從 4 歲開始，孩子們就會有輸贏的概念，會因為贏而喜悅，因為輸而感到焦慮。──《數字時代兒童設計》
對孩子的正向反饋宜歡呼、表揚性的動畫為主，整個畫面氛圍可處理得熱鬧一點，這對孩子來說是一個很好的刺激點，能讓孩子有繼續玩下去的欲望。
△ 正向反饋1：IP 形象高興地跳出
△ 正向反饋2：IP 形象高興地跳出 + 打分星星
△ 正向反饋3：IP 形象鼓掌
考慮到孩子們會因為輸而感到焦慮，因而在處理負面反饋的時候，需要考慮他們此刻的心態，動效設計應拉開與正向反饋的差別且不能過于消極，消極的反饋容易打擊孩子的積極性，產生挫敗感，鼓勵性的反饋為宜。
△ 負面反饋：IP 形象配合鼓勵性語音做加油的姿勢
反饋動畫的設置也需要考慮用戶的可接受程度，慎用具有攻擊性動效。如下圖，錯誤反饋時 IP 形象會受到攻擊而感冒，上線后發現孩子們對這種反饋表現出了害怕的心理。
以上 IP 動畫由流利說®少兒英語設計團隊傾情制作。
不會寫代碼的設計也是好開發。
視覺稿如果不能被很好的實現落地，那再好的設計稿也只能是概念，而不是一份有效的方案。在如何更好的把控視覺實現程度這一問題上，我們也走過不少彎路，和開發經過幾輪的探索，最終形成了一份適合我們團隊的輸出模式。
在整個開發環節，設計師主要承擔一部分的動畫開發工作。在和開發對接的過程中，我們主要使用的軟件是：
△ CocosCreator
△ SourceTree
開發搭建完框架后，設計在 CocosCreator上，完成部分元素的動畫，再用 SourceTree 向開發提交動畫代碼。開發最后通過代碼將每個動畫串聯起來形成一個完整的動畫。
△ CocosCreator 動畫編輯器界面截圖
題型動畫連貫且細節多，單靠視頻 demo 是無法協助開發精準實現設計效果的。為了解決這個問題，我們建立了對設計落地具有指導性意義的文檔──適配標注文檔和動畫標注文檔。
1. 適配標注文檔
用戶機型調查結果顯示，使用 0.462、16:9、4:3 這三類屏幕比例的用戶占比最大。為保證不同屏幕比例上的展示效果，我們根據上述三種主流尺寸，分別輸出大小為 780×360，640×360，480×360 的設計稿，并規定以 780×360 為設計基準，對另外兩個尺寸進行適配。
標注內容為三個主屏幕尺寸下的縮放比例、大小位置、特定動畫的起始點或終止點位置等細節調整標注，方便開發在做適配的時候能準確還原設計稿的布局。
2. 動畫標注文檔
該文檔主要是對動畫和音效的詳細說明。每個題型的動畫會被拆分，以最小可拆分動畫為一個標注對象，對其標注時長、具體的動畫效果以及運動曲線數值等，方便開發地還原 demo 的設計效果。詳細的標注文檔不僅方便了開發，更為后續測試和視覺走查降低了不少溝通成本。
游戲化題型的設計，需要更多的從用戶的角度出發去思考和權衡游戲與教學的平衡性。對于兒童產品而言，設計服務于教育，愉悅和多變的體驗是設計的方向，教學才是最根本的設計目標。
文章來源：優設
頁面轉場有哪些類型？該注意什么細節呢？
不知各位產品經理、UE/UI設計師在設計產品時，除了考慮交互說明、功能狀態、頁面邏輯等之外，是否會關注 頁面跳轉間的“轉場效果”？？？
可能有人會覺得：“不就普通的界面左移和右移，需要講這個嗎？” 但是如果我問：“為什么要有頁面轉場？有哪些轉場類型？要注意哪些細節？” 你能一五一十地回答出來么？
畢竟頁面間的轉場過渡，是用戶體驗我們產品最直接的感知形式，也是人機交互中最重要的傳達要素。另外市面上還沒有系統性介紹'頁面轉場'的文章，所以今天就寫下這方面的干貨，希望能給你帶來一些收獲。
Part1：頁面轉場的作用
頁面轉場最基礎的作用，無疑是拉通頁面與頁面間的使用流程，使產品的信息內容、功能交互等有一個承接點。但除了這個打底作用外，頁面轉場還可以體現出多個方面的作用：
1.加深用戶印象
一些新奇獨特、區別于競品的轉場效果，完全可以加深用戶對自己產品的印象，留下特定的產品記憶點。如《紅板報》的‘折頁’效果就很讓人記憶尤新，進一步提升了產品的競爭力。
2.更有儀式感、增加代入感
就如《每日故宮》在查看文物時，會緩慢放大封面、退出局部元素。營造一種‘神秘感、即將探索’的氛圍，很符合該產品獨有的特色。另外一些日志產品，會利用“翻書”的轉場效果來加強用戶的代入感、趣味性。
3.突出重點用戶
產品里的重點用戶（如vip用戶、平臺作家）都是需要特別照顧的對象。界面設計時除了在背景色、視覺元素不同于普通用戶外，特殊的頁面轉場也能給帶來一種‘專門定制’的感知。
像《人人都是產品經理》APP，在打開普通頁面和專欄作家的文章時，前者是普通的‘左移’，后者則‘上下開啟’，給讀者一種‘開啟知識寶庫’的進場感受。
Part2：頁面轉場類型
說完頁面轉場的作用后，下面就是你可能感興趣的內容：頁面轉場到底有哪些類型？（以移動端頁面轉場為例，PC端亦可復用該類型）
1.翻書/頁、折疊
翻書/頁：指模仿現實生活中書本和紙張的切換效果，是一種擬物化的轉場方式。常用于雜志、小說、日記等產品中。
折疊：根據水平或者垂直線為中心點，將頁面的另一部分進行翻折。適合各種帶有“日歷”功能的轉場。
2.3D翻轉、立體旋轉
3D翻轉：將二維的頁面以3D形式（類似魔方）進行切換。適合體現產品功能的“空間感”。
立體旋轉：根據水平或者垂直線為中心點，將整個頁面進行立體旋轉。適合體現另一個“頁面空間”的效果，用于容納更多的信息內容。
3.拉伸、上下合并
拉伸：根據水平或者垂直線為中心點，將頁面進行拉長消失處理，可分為’內拉‘與’外拉‘兩種方式。
上下合并：將即將進場的頁面分為上下兩部分進場，使頁面更有層次感。適合給用戶營造一種“打開新世界/新天地”的交互認知。
4.扭曲、頁面融合
扭曲：根據水平或者垂直線為中心點，將整個頁面進行旋轉、壓縮等處理，適合給用戶傳達一種’異次元、空間傳送‘的效果。
頁面融合：根據頁面的某個視覺元素，通過變形、變色、縮放、位移等方式過渡到另外一個頁面中去。這種轉場是最能體現兩個頁面之間的‘關聯性’，也是過渡效果最和諧的方式之一。
5.彈出、縮放
彈出：根據頁面的某個視覺元素，將其彈入到下一個頁面中去。適合突出某視覺元素，將其重點彈出展示。
縮放：將整個頁面自大而小或者自小而大進行縮放過渡，很適合大封面的轉場。
6.移入、淡化
這是我們最常見、最普通的轉場方式了，大部分的產品使用這兩種轉場方式。移入有’上下左右‘4個進入方向，而一直使用’左移進入、右移退出‘的轉場，最能體現產品功能的使用流程。
Part3：轉場時應該考慮的細節
各種效果只是提供一種選擇而已，根據自己的產品特性、想要傳達的交互理念等選擇合適的方式即可。而在一些轉場過程中的細節點，是交互設計師不能忽略的事項。
1.頁面間的關聯性
頁面之間都是通過’入口信息‘和’頁面標題‘建立關聯的，為了增加用戶轉場后的代入感、避免產生認知錯誤（覺得進錯頁面），可以考慮用相同的背景色、視覺元素等加強頁面間的關聯。
比如之前QQ游戲中心，將前頁的背景圖沿用到后頁中，讓后頁的游戲描述更有代入感，用戶第一時間就覺得'來對地方了～'
2.進退方向
頁面的進入和退出盡量是成反方向的，即頁面從右加載邊移入，退出時則從左邊移出。否則混亂無序地進退方向，會使用戶的操作流和視覺流感到不適。
3.返回邏輯的不同
用戶習以為常的頁面返回習慣，一是點擊左上角‘返回/關閉’圖標、二是屏幕扣邊（叫法不同，即按住屏幕最左邊位置向右滑到，iOS與Android均可實現該方式）。因“返回/關閉”圖標在視覺上帶有明確的指向性，用戶知道點擊后到底是“返回”還是“關閉”。
但不同頁面類型的屏幕摳邊，對應的含義和邏輯卻是各不相同的：
原生頁面：屏幕摳邊是返回上一級頁面
就如朋友朋友圈一樣，原生頁面在屏幕摳邊后是可以回到退出前的頁面位置、狀態，亦可以重新加載頁面。
H5頁面：屏幕摳邊是關閉整個鏈接
無論在H5里操作了多少內容/頁面，屏幕摳邊都會關閉整個H5鏈接，再次進入時只能重新加載頁面，操作記錄都會被清空。
4.更的返回方式
除了點擊“返回/關閉”圖標、屏幕摳邊外，可以根據自己產品的頁面形態，考慮是否有更的退出形式。比如《下廚房》的食物詳情頁里，采取“下滑“的形式返回上級頁面。
原因在于：該詳情頁是以大圖+文字的結構描述食物，而大圖的展示區域很接近于手指的“黃金操作區”。相對于將手指移動到屏幕左上角點擊返回、或者移到最左邊摳邊返回，“下滑”可以在最短距離內、最快速地讓用戶返回首頁瀏覽其他內容。
5.是否保存/清除用戶操作
頁面間的跳轉和退出，勢必會對當前頁面內容和狀態產生影響。當用戶想要離開時，不同的產品都會選擇不同的退出策略。舉個特別典型的例子：微信朋友圈。
當退出朋友圈再重新進入時，是會停留在退出前的頁面位置，方便繼續瀏覽好友內容。
而退出朋友圈后，入口處提示有好友新動態時，再次進入朋友圈則回到頂部初始位置，以保證可以第一時間獲取好友動態，滿足用戶日常的社交需求。
每日故宮在這一方面的處理也很用心：無論用戶在詳情頁里進行了什么操作（屏幕伸縮或滑動位置），退出頁面時都會清除用戶的操作痕跡，還原到文物的初始狀態，給人帶來一種“保護文物、細心嚴謹”的心理感受。
轉自：站酷-和出此嚴
在年復一年的電商促銷節的渲染下，如今618、雙11儼然成為全國最大的線上狂歡節。而在狂歡節中擔任著重要角色的主會場，承擔著為各分會場分發流量的重要使命。與此同時，大促的頁面設計也越來越趨向于同質化，大多基于以往的經驗沉淀，少有突破。在這樣的背景下，設計師不僅需要考慮如何滿足商業需求，更要兼顧用戶的體驗感受。本文將通過多次主會場設計實戰中沉淀下的經驗與教訓，以京東微信手Q購物入口的年貨主會場為例，深入探討如何在成熟產品中做突破設計。
1. 頁面結構與動線逐漸趨于穩定
主會場設計不斷進化和演變，從以往簡單的會場入口展示，到會場+品牌+單品+關鍵詞的綜合內容展示。雖然視覺風格不同，但無論從結構上還是體驗上來看，本質都相差不大。
2. 需要更豐富的詮釋品牌價值與用戶感知
在消費升級的大環境下，消費者的消費能力/品牌/品質在全面升級，此時需要更加注重品牌價值與內涵的塑造，精準化傳遞用戶感知。而主會場現有模式以大促營銷為主，重點突出促銷賣貨氛圍和類目分流，品牌價值與用戶感知的傳遞較為薄弱。
3. 既要效率分流，也要逛起來（成交）
分流坑位與效率的提升，在一定程度上會降低會場的成交轉化，如何平衡二者之間的關系，在設計上需要平衡把握。
在電商設計中，我們需要把握很重要的一點就是：平衡商業目標與用戶體驗之間的關系。設計目標的制定，需要我們對主會場的商業訴求與用戶訴求進行深入了解，才能制定有理有據的設計目標。
因電商環境的特點，主會場設計需要以商業訴求為思考起點，為商業價值賦能，輔助其商業目標的達成。因此，在策劃階段，設計師應該提前加入討論，和業務方一起梳理并明確業務訴求。因京東大促節奏時間長的特點，節奏規劃上會分為預熱、品類、高潮三個時間，而針對不同的時期，主會場的業務訴求也會略有變化，但整體差別不大。
會場分流
大促期間，主會場作為流量矩陣中心，若只通過主會場一個頁面來滿足用戶需求是不太可能的，因此的會場分流是核心的商業訴求目標。
提升成交轉化
雖然主會場的核心目標是分流，但隨著大促策劃的逐漸深化，提升流量成交轉化率，賦能主會場價值最大化也是需要考慮的重要因素。
會場預約
京東大促節奏具有時間長的特點，節奏規劃上會分為預熱、品類、高潮三個時期。如何保障品類日-品類會場的流量曝光，為會場預約也是主會場設計需要考慮的重要因素。
主會場最終面對的還是用戶，服務好用戶才能使其產生價值，并最終實現商業目標。根據對以往大促設計的用戶及數據反饋進行深入剖析，可大致分為新用戶及老用戶兩種類型，并進一步對用戶特征/訴求等方面進分析整理出用戶角色卡。
通過以上分析，總結出以下三大核心用戶訴求。
撿便宜薅羊毛
大促期間，用戶一般通過購物首頁、社交分享、外部投放等入口進入主會場，無目的或半目的型用戶居多。不管新用戶還是老用戶，都是以「閑逛」來尋找折扣，撿便宜薅羊毛心理加重，但也相對理性。
快速篩選
面對越來越復雜的電商大促內容與玩法，用戶需要一個更簡單、更的會場為他們傳達促銷氛圍與優惠。
個性化推薦
個性化算法基礎上，用戶對自己強相關的內容更加感興趣。
通過對商業訴求與用戶目標的充分解讀，在主會場設計中我們需要在兩者之間找到平衡點，來更好的兼顧商業與體驗。最終將今年京東微信手Q購物入口的年貨主會場的核心設計目標設定為：打造極簡用戶體驗，提升用戶專屬感知。
設計策略的制定能夠有效幫助我們始終貫徹核心設計目標來探尋解決方案，根據前面的設計分析，定義出本次年貨節主會場的五大設計策略：用戶專屬感知、化繁為簡，整合、多場景可復用、年味春節、多緯度多場景。
1. 頁面動線設計
主會場作為大促版圖中的流量矩陣中心，堪稱絕對 C 位。在向用戶傳遞大促氛圍及專屬感知的同時，又要滿足效率分流及成交等目標，同時還要引導用戶參與各種互動，這需要構建合理的頁面動線。本次主會場頁面動線設計劃分為三大板塊：頭頸部、中間和尾部，采用總分總的節奏引導用戶瀏覽。
2. 首屏-頭部設計
主會場頭部作為門面擔當，承載著向用戶傳遞主題訴說與促銷氛圍的功能。隨著運營需求的不斷增加，以及頭部資源利用率等問題，頭部設計不在單一的追求氛圍打造，而將更多的承載功能型需求，如：會場推薦、活動推薦、預約時間軸、互動入口、優惠券等。在有限的空間里如何進行內容展現和傳達，本次年貨節將通過內容重組和層級劃分來進行實現。
1. 首屏-頭部設計
精準化營銷下的千人千面，用戶對自己強相關的內容更加感興趣。大促環境下，他們更期望了解自己感興趣的單品、品牌、品類的促銷折扣信息。在首屏如何向用戶傳遞專屬感知的體驗？我們根據用戶屬性進行新老用戶切分，結合日?；顒訑祿炞C整理出：猜你喜歡商品、購物車降價商品、BI 拼購商品、BI 會場等四類內容，打造用戶專屬年貨節模塊。
2. 中間-樓層設計
類型繁雜、內容眾多的中部樓層設計，承擔著 50+ 分會場曝光分流的重要使命。我們把 50+ 分會場劃分為 9 大品類，每個品類一個樓層進行內容組合設計，包括：優惠券、品類主會場、分會場入口、品牌曝光、單品曝光、熱搜詞等內容。樓層順序根據 BI 進行展示，讓用戶即使在內容繁雜的情況下也能快速定位自己感興趣的內容。
3. 尾部-猜你喜歡設計
長尾理論是網絡時代興起的一種新理論，當商品的銷售成本急劇降低時，幾乎任何以前看似需求極低的產品，只要有賣，都會有人買。這些需求和銷量不高的產品所占據的共同市場份額，可以和主流產品的市場份額相比，甚至更大。簡單了解長尾的含義后，可以清晰的知道主會場頁面中加入長尾設計的原因：利用互聯網移動端頁面無限延長的框架，進行更多貨品的曝光，來留住剩余未跳轉流量，進行商品售賣來實現價值最大化。在長尾內容上加入 BI 推薦，深化用戶專屬感知，提升用戶消費轉化。
1. 今日必買模塊設計
因京東大促品類日節奏性曝光的特點，主會場的今日必買模塊作為這一特性的承接模塊，需要滿足不同品類日之間的差異化需求。如何在滿足個體差異化需求的情況下，又能降低設計、開發成本？本次年貨節主會場對今日必買模塊進行了組件化設計。
除了今日必買模塊，品類樓層的設計也遵循了這一設計原則。
1. 輕互動設計
如何讓用戶深度參與會場并形成記憶點？會場的互動設計是很好的方法。通過輕量的互動方式，引導用戶參與并拿到獎勵的同時，滿足商業價值的需要。本次年貨節主會場從用戶角度出發，通過：做任務贏大獎、分享贏京豆、新年紅包、明星拜年等四個互動玩法，有節奏的投放在年貨節的不同時期，形成用戶記憶點。
有些地方雖略有遺憾，但整體反饋不錯。成交、UV 跳轉率、UV 價值等指標顯著提升，其中 UV 跳轉率、UV 價值均為近兩年大促主會場最高值。因涉及敏感數據，這里就不再一一詳述。
通過對 19 年年貨主會場設計的詳細解讀，相信堅持閱讀到這里的小伙伴們對「如何在成熟產品中做突破設計」已經有了深入的了解，希望我的這些思考能夠給你在工作中帶來一些幫助。
在手機app應用中各種格式的彈窗效果相信大家都看過，也可能反感過某些彈窗，本文就來談談關于app彈窗設計以及彈窗的適用情景。
1. 彈窗作用
彈窗是為了讓用戶回應，需要用戶與之交互的窗口。
非模態彈窗一般被設計成用來告訴用戶信息內容，而模態彈窗除了告訴用戶信息內容外還需要用戶進行功能操作。
2. 模態彈窗
會打斷用戶的操作行為，強制用戶必須進行操作，否則不可以進行其他操作。
（Alerts／dialog，Actionbar，Popover）
3. 非模態彈窗
不會影響用戶操作，用戶可以不與回應，通常有時間限制，出現一段時間就會自動消失。
（Toast/HUD，Snackbar）
以下將以各類彈窗的含義、作用、適用來進行淺析。
1. Alerts/Dialog：警告框與對話框
含義：英文意為警告、對話，跟彈窗屬性非常吻合，就是緊急狀況，打擾用戶的行為。
剖析：iOS中警告框稱之為Alerts，作用是用來傳達重要信息，并伴隨著需要用戶進行操作。
iOS規范中，警告框包含的元素如下：標題（必選）、描述信息（可選）、輸入框（可選）、按鈕（必選）。
必須包含標題、包含一個或多個按鈕。
Android規范中，彈窗交互按鈕需結合實際情況，不用「是/否」原則進行設計。
作用：告知用戶當前發生的狀況，讓用戶主動選擇回應。
適用：重要性較高的操作時，如退出、刪除、清空等。
2. Actionbar（Sheets、Acitivity View）：操作欄、操作列表、活動視圖
含義：英譯為工具欄、操作欄。
剖析：當用戶激發一個操作的時候，出現此窗口。
一般會給用戶提供更多的功能選擇，一般可采用官方控件。
一般都設計有一個默認的「取消」按鈕，點擊取消可以關閉彈窗。
Aciton Sheets和Activity Views是iOS上特有的交互形式。
特性是用戶觸發、包含兩個或以上的按鈕。
△ 以上為今日頭條、iOS系統相冊
作用：操作列表提供一系列在當前情景下可以完成當前任務的操作，而這樣的形式不會永久占用頁面UI的空間。
適用：如分享功能。
3. Popover/Popup：浮出框/浮層彈窗
含義：英意為彈出窗口，浮動于頂層窗口，氣泡。
△ 以上為微博、qq、微信
剖析：當用戶點擊某個控件或者某個區域時浮出的半透明或者不透明的彈窗窗口。
不會對用戶所在位置進行跳轉。
作用：可以在當前頁面進行更多的操作行為，顯示/隱藏頁面中的折疊信息。
適用：首頁位置呈現一些常用操作的快捷入口。
4. Toast/HUD：提示框（iOS沒有Toast，只有HUD）
含義：Toast也被稱為吐司提示，Toast是安卓系統的一個控件名詞，現也應用于iOS系統中。
剖析：提示框屬于一種輕量級的彈窗反饋形式，常以小彈框的形式出現，持續1-2秒自動消失，可以出現在屏幕任意位置，但是建議同一款產品盡量使用相同位置，讓用戶產生統一認知，成為習慣。
提示信息能給予用戶及時反饋，確保用戶知曉自己所處的狀態，并可以做出相應的措施。
iOS用戶更習慣于在頂部感知反饋信息，不干擾用戶瀏覽主體內容。Toast出現在屏幕頂部不會遮擋主體內容。（如花瓣、有道云筆記）
Android正統的規范中Toast：
△ 以上為今日頭條、微博、即刻
HUD與Toast的區別：
△ iOS音量調節
優點：
缺點：
適用：提示不需要的反饋信息，如刷新后的成功狀態。
5. Snackbar：底部彈窗
Android特有的交互形式，在Google的MD規范中，將Toast和Snackbars歸為一類。有些時候也有應用在iOS系統中，也可以理解為加強版的Toast。
含義：英譯為快餐、小吃。
剖析：Snackbars與toast一樣是從屏幕底部向上出現，但是Snackbar不同的是可以經過用戶進行其他操作而消失。
適用：較多適用于撤銷操作。
通過分析和了解彈窗的類別、適用范圍，才能更好的在設計中進行優化與改變。用戶體驗設計的重點，是一步步了解用戶，然后設計出適合用戶體驗，滿足用戶心理需求的產品。把握好彈框設計規范，避免彈框設計的誤區，能更好的幫助你完善產品。
但是，沒有十全十美的產品，所以要根據設計趨勢與用戶需求不斷地進行更新迭代，通過用戶反饋，不斷地改良產品體驗，才是做出優秀產品的前提。
從事電商方面的設計師，詳情頁設計可以說是必修課，好的詳情頁會給帶給用戶更流暢的視覺體驗、更直觀的產品信息、亮點等等，也有助于提升交易的達成率。正是因為如此，所以很多商家不惜重金請設計師為其打造爆款產品的詳情頁，由此可見詳情頁在電商設計中的重要程度。本期和大家一起分析總結：如何把詳情頁做的足夠出彩，詳情頁做不好需要從哪些方面進行提升？
目前被認可的一種詳情頁設計形式是分屏式，就是按照手機端設計思維以一屏為單位制作，最后整合成一個完整的詳情頁，這種形式有助于提升視覺流暢度及內容識別度，所以我們可以將每一屏都當作一張海報來制作。而說到海報，就離不開設計構圖。
詳情頁的構圖與傳統的PC端海報有所不同，因為詳情頁設計更注重手機端，所以一屏的內容又可以看做是手機端豎向的海報。而一副出彩的海報，必然需要優質的骨架。那么常見豎向海報構圖形式有哪些？下面為大家總結了幾種在詳情頁設計中比較實用的構圖形式：
如圖所示，這三種構圖形式看似簡單，實則兼顧了手機端的很多必要點，比如：視覺的流暢度、整潔度、辨識度、用戶的接受度等等，詳情頁設計在構圖及板式方面并不需要很復雜，反而干凈整齊的畫面更易于視覺表達，也更利于手機端展示。
這三種構圖形式在詳情頁中使用頻率是非常高的，下面我們看幾組案例：
看似簡單的構圖，反而在詳情頁設計中非常實用，僅靠這三種構圖，完全可以做出很優秀的詳情頁。另外還有一些從這三類衍生的構圖形式，也比較常用：
文案在配圖下半部分的這類構圖相比而言用的少一些、也難把控一些，當然用的好了在版式上會有打破、眼前一亮的視覺感受，只是這類構圖不宜多用，完整的詳情頁中出現1-2次即可。而左右式配圖+文案的形式是比較常用的，下面看組案例：
詳情頁的構圖不易太復雜，這六種構圖形式完全夠日常工作，只需選取其中1-3中構圖形式交替使用即可。以上構圖示例中標識的裝飾元素可以是線條、英文、圖標、數字、實物素材等等，也可以選擇不使用，具體情況根據配圖的留白以及重心靈活使用即可。
所以，詳情頁中每一屏的構圖并不難，完全可以把這六種構圖形式當做公式，需要哪種直接套用其結構就可以（結構類似即可，并非要求1:1）。另外：配圖形式可以分為三種：全屏、半屏、透明圖，具體的構圖形式需要結合畫面整體的重心、留白、美觀度決定。更通俗一些的話，構圖就可以理解為填空，內容就往空的地方填，注意好適量的留白。
補充：當透明圖作為配圖時，不管哪種構圖形式都有可能出現空的現象，這時我們可以用一些具有裝飾性的數字、英文、線條、形狀、文字等等進行填充，舉例說明：
案例中的文字、數字與產品相互結合，既解決了空的問題、提升了整體的飽滿度，又在形式上做到的新穎、有創意。構圖形式與前面所說的皆能吻合。
說到設計素材，浮在腦海中的可能會很多種，而這次要說的主要是三類，即：手勢、植物、肌理（在花瓣搜索關鍵詞“手勢”“植物”“材質”“肌理”就能找到對應素材），這三類素材在詳情頁設計中出現的頻率也是很高的，如果運用得當會將詳情頁的出彩度進一步提升一個檔次，而且對于視覺表達也會更加生動、形象、富有說服力，下面我們逐一來說：
手勢素材
顧名思義，就是各種各樣關于手方面的動作，比如：拿、托、指等等，下面舉個例子來看：
這些手勢在很多詳情頁中都會出現，接下來我們不妨思考這么一個問題：為什么要用這些手勢，只是單純的好看嗎？
其實不然，在視覺上，這些手勢使得畫面更加生動、有立體感、有層次感，讓作品更飽滿、更出彩。而對于用戶而言，能讓其更加深刻的體會到產品是有溫度的、可操作的、更真實、更容易理解，所以對于交易的達成以及加深用戶對產品的了解也更具說服力。
影響詳情頁轉化率的因素有很多種，視覺表達能否真正抓住用戶心理也是很關鍵的一點！
植物素材
這類素材相信大家都不陌生，在很多頁面以及詳情頁出現的頻率都很高，而且裝飾性很強，寓意也很寬泛，比：自然、清新、貼合現實、有生機等等，下面舉個例子：
如圖所示，這里的植物都能很好的與畫面主體形成很好的遮擋關系，在視覺層面顯得更有層次感、畫面也更飽滿；而且植物的運用并不是隨便使用的，而是與海報氛圍、文案都緊密相關，形成了很好的呼應、裝飾作用。
我們常用的植物元素可以是清晰的，也可以模糊處理，只要與畫面整體氣質相符，可以根據實際情況靈活使用。
肌理素材
關于材質、肌理的妙用在前面很多文章中都有提到過，這里簡單的說一下：肌理素材對于提升作品細節感、層次感、出彩度以及飽滿度都有很大的幫助，如果作品碰到上述問題，不妨用肌理素材試試。
單看標題可能很多人不太明白，什么叫做抽象名詞具體化？其實簡單理解就是：將一些比較抽象的名詞通過設計手法表現出來，比如：風、聲音、溫度、輕重、鋒利等等。這樣做的目的不僅可以提升用戶體驗、加快用戶理解，而且在視覺上能生動形象的將抽象化名詞表現出來，對于視覺出彩度的提升也很大。給人留下的印象也更加深刻，間接的提升了視覺傳達的時效性，下面看個例子：
通過案例我們不難發現：將抽象化的名詞通過視覺手法表現出來，對于用戶理解的難易程度以及視覺出彩度而言都有提升。如果一款產品詳情頁中能出現1-2次這樣的處理手法，會使得詳情頁在視覺上更加生動、形象。
補充：在詳情頁設計中，若文案中出現一些LOGO、數字、英文，注意不要放過它，因為它具有裝飾性的特點，對于詳情頁板式的活躍以及設計感提升都有很大的幫助！形式多為：水印、與產品穿插、作為主體信息使用等等！一款詳情頁這種用法可以出現2-3次！
詳情頁設計不可忽視的兩點：視覺的流暢度以及文案辨識度。文章所提到的一些構圖方式、元素使用、視覺表現形式都是為大家提供一個可供參考的方向，落實到工作中要靈活運用、舉一反三。一般情況下，一款詳情頁大概有2-4屏比較出彩的即可，能形成一定的對比，不至于視覺疲勞、千篇一律！
不妨找一些不錯的詳情頁，按照文章中所寫的自己嘗試分析分析，看是否與之吻合。切記詳情頁設計構圖及文字排版不易太過復雜，切記、切記、切記，重要的事情說三遍！
文章來源：站酷
在做設計的過程中，大部分設計師只專注于主操作流程、主頁面、分支流程、小頁面和頁面的不同狀態。卻容易忽略產品中容易出現的各種異常狀態。
當用戶停留任何一個界面，進行任何一個操作都可能發生異常狀態。
如果接到每個需求都去制定一次異常狀態，這樣的后果可能會使得產品的不同模塊、不同流程，異常狀態都不一致。全局規范性被破壞，同時設計師的效率也降低。
因此全局制定異常狀態規范很有必要，后續就不需要再設計，開發直接復用異常狀態的規范。省時省力、提率、設計規范、運行更流暢、減少代碼重復率、安裝包也會更小。
異常狀態一共有以下 10 類：
當移動設備網絡異常時，導致無法上傳和下載數據，從而無法正常的使用產品。
網絡異常存在兩種場景：
1. App主動行為
當無網絡時，用戶打開 App，通常有三種方式提醒用戶當前網絡異常。
tips 提示，通過 tips 提示用戶當前網絡不可用，tips 使用場景一般為用戶打開后，界面停留在首頁，且首頁以列表形式展示，這樣的話， tips 才能合理的融入到界面中，常見使用這種布局方式的有微信、qq等。
使用toast提示用戶網絡異常，同時提示用戶可以去使用非數據影響的操作。例如網易云音樂，當無網絡時候，告知用戶可以去正常聽已下載的音樂。
使用對話框，引導用戶進入設置頁面，關閉飛行模式或者打開 Wi-Fi，例如美團進入首頁后的對話框提示。
2. App被動行為
當前無網絡時，用戶點擊操作，無法正常使用產品，這時候通常有兩種處理方式。
一種是當前界面出現 toast 提示。另一種是進入下一級界面，以缺省頁的形式提醒用戶當前網絡異常。
例如手機淘寶，沒有網絡時，用戶點擊會進入下一頁，出現缺省頁提示，告知用戶網絡異常，同時提供刷新按鈕。
美團在無網絡時，點擊其他 tab bar，出現 toast 提示用戶當前網絡異常，稍后重試。
3. 小結
當涉及需要消耗大量流量數據時，且非 Wi-Fi 情況下，這時候需要告知用戶。常見的例如看視頻，聽/下載歌曲、視頻通話、下載上傳文件等。
例如B站，當使用移動數據看視頻，則通過提示語和對應按鈕上的流量值告知用戶。
網易云音樂在非 Wi-Fi 情況下，下載音樂時，通過對話框，告知用戶當前使用數據流量，同時提供可繼續下載的功能，也提供通過辦理新業務解決數據流量的問題。
空數據一共分為兩種類型，分別為初始狀態和清空狀態。
1. 初始狀態
用戶首次使用，沒有任何內容數據時，需要用戶進行某種操作才能產生內容的界面，這時候需要提示用戶需要進行某種操作。
例如淘寶App，當用戶沒有把商品加入購物車時，進入購物車界面，會給出提示購物車界面為空。給出用戶提示，給出相對應的入口按鈕，引導用戶操作。
如果初始狀態，無任何內容直接給出一個空白界面，用戶可能會以為該界面出 bug 了。
Gmail 直接用一個插畫提示用戶收件箱為空。
一般對于初始狀態的設計，常規做法是簡單的插畫配合簡潔的文案，必要的時候給出引導用戶操作行為的按鈕。
現在流行的設計趨勢是插畫越輕量越簡單越好，以免搶奪了文案信息。
2. 清空狀態
當用戶清空當前的頁面內容，產生了空界面，這時候需要有明確的提示告知用戶出現當前頁面的原因，且告知用戶該如何處理。
清空狀態是對初始狀態的進一步細化。清空狀態的界面和初始狀態設計很相似，唯一不同的是文案的提示。
有的產品直接把清空狀態的界面按照初始狀態來設計，這樣也是可以的，缺點就是沒有告知用戶產生空狀態原因是初始化還是清空所致。
在加載過程中，App 向服務器請求數據，如果是網絡原因導致，則使用網絡異常的設計規范。
如果非網絡異常原因，則可能因為服務器異常導致接口請求不到數據，從而加載失敗。
第一次請求失敗，有些場景可能重試 2 次，例如微信支付寶，這種情況可使用 toast 告知用戶加載失敗的原因。
任何操作行為的交互界面都伴隨著操作失敗的概率。
當用戶操作失敗時，在當前頁面給予一個反饋，告知用戶操作失敗，最好告知用戶操作失敗的原因，讓用戶知道接下來如何避免操作失敗。
因為服務器異常是小概率事件，但是也會發生。
當服務器異常時，且用戶在操作過程中，出現這種情況，一般可設計為對話框提示，明確告知用戶，服務器出現問題，讓用戶稍后重試。
例如下圖的華為云備份恢復界面：
用戶在搜索過程中，除了出現正常的匹配結果，還存在無匹配結果的情況。針對搜索無結果的情況，要給予用戶操作無結果的提示。
幾乎搜索無結果的狀態都是在內容區出現對應提示。例如 iOS 相冊，通過搜索關鍵詞，當沒有匹配照片時，則出現對應的提示，如下圖右側圖：
下圖淘寶買家版后臺，當用戶搜索關鍵詞無結果時，出現對應的提示語和插畫。
無權限的場景，通常適用于 b 端產品，對于不同組織架構的企業員工，會存在不同的權限。
例如部分重要的內容，非同一組織架構的員工無權限查看，這種情況，用戶點擊進入一般給出對應的提示。
當然最好的方案是在 App 上面過濾掉無法查看的內容，但是存在員工間的轉發行為，這時候無權限的員工，點擊進入，則顯示暫無權限查看的提示頁面。
一般 App 功能正在開發中，這種情況不會在 App 界面中展示出來，只有完全開發完畢并上線后才會出現在 App 上。
但是也有一些產品的特殊業務，會將一些未開發的功能展示出來，例如微信公眾號，長按微信文章，即出現對應的提示。
也有一些新聞頻道還沒有開發完畢上線，這時候用戶點擊進入下級界面，則出現對應的提示語/插圖提示，如下圖所示：
有的時候，文件或者頁面內容被刪除，但由于文件或者頁面內容的上一級頁面有緩存，所以當用戶點擊進入時，會出現文章/文件被刪除的情況。
已被刪除的異常狀態，常見的設計是用戶進入新頁面出現對應的插畫和標題提示。
例如下圖微信公眾號文章內容被作者刪除，讀者點擊進入，加載后的界面就出現內容被刪除的提示。
以上就是常見的 10 種異常狀態的簡單介紹和說明。在制定異常狀態的設計規范時，可以參考本篇文章。
當然也有公司特殊的業務導致存在很特殊的異常狀態，針對這種情況，可以適當的增加、刪除或者修改，使其更適用于自己公司的項目。
文章來源：優設
如“黃金分割”之于構圖，“視覺層級”之于頁面節奏，都是基礎且必不可少。本文與你分享如果一步步從原型開始構建APP視覺層級。
工作中，你是否經常聽到“視覺層級”這詞？就猶如“用戶體驗”一樣讓人耳熟能詳。拋開裝逼因素，這兩個詞的多次提及，可見其重要程度。
音樂有節奏，好的音樂能通過音階的高低起伏變化表達音樂情緒。
例如：《Main Title》即使你沒看過《冰與火之歌》，光聽音樂你是否能感覺到音樂給你營造千軍萬馬恢弘之勢?！禤laying Love from The Legend of 1900》你是否想到一個寧靜夜晚，佳人與你傾訴衷腸，柔情似水。
反之，節奏不好，則無法和聽眾達成共鳴。
繪畫有節奏，張馳有度、大小對比、遠近疏密變化，構成了畫面的節奏。反之，沒有節奏，則畫面平淡。
同樣的，APP UI也有節奏。頁面良好的視覺層級，方便用戶在瀏覽的過程中抓取關鍵信息，幫助用戶快速達到目的。
拿到原型，明確頁面目的和需求的1、2、3層級，并理解消化。開啟設計師的隱形技能：根據一句話或者一個詞，在大腦開始構建畫面布局。在構思階段，建議同時瀏覽同類型UI設計以及交互布局，在找參考的過程中，結合自身APP的頁面目的一起構思，并在紙上繪出可行性方案。
由于，APP是為人服務。那么我們需要知道，人眼瀏覽習慣模式的科學依據。
曾有一數據顯示：如果在3S內無法吸引用戶，你將流失這個用戶。如今我們所在的時代快節奏、碎片化，用戶的日常瀏覽是“掃描”而非“閱讀”。所以，了解人眼瀏覽習慣，變得十分重要。
人眼瀏覽習慣有：F型；Z型；其他；
還有，其他瀏覽模式，海哥HMI人機交互在他一篇文中《用戶是怎么閱讀的？尼爾森F模型》提到：
在明白人眼視線流程后，我們開始運用視覺手段，吸引用戶來看我們想給他看的內容，并按照我們的預想順序，依次閱讀。
對比，讓視覺有輕重，用戶看起來不累。需要強調的信息放大，沒那么重要的東西縮小。如果同一層級的模塊，通過顏色或者樣式的變化來表達。如：字體大小對比，顏色對比；模塊大小對比；圖片大小對比等。
字體千千萬形狀各不相同，然而他們都有著相似之處：字重的大與小。在同一字號大小下，字重大的筆畫，以面構成，會比字重小的，更具視覺沖擊力。
需要強調的信息，字號變大，字體加粗，這樣就能區分主與次，建立更易讀的視覺層級。
為了各個模塊間的和諧組合和視覺上的凸顯與美觀，我們需要靈活運用各種樣式表達。卡片投影；形狀；材質等；
同一類別信息，模塊化整合。便于用戶瀏覽操作，視覺上不零散，整體美觀。多模塊化的組合，注意留白以及頁面的節奏輕重。
以上要點，要根據實際情況靈活巧妙運用。在做的過程中，通過Mirror工具實時查看頁面效果，不斷改進，加強表達。
宗白華說過：“一切藝術都趨向音樂”。確切說一切“廣義的”藝術都趨向于音樂狀態。優秀的UI視覺層級表達，就如音樂一樣有節奏變化，波浪起伏，是一種視覺享受。無論是平面還是UI，視覺層級，需要像“黃金分割原理”一樣，是內化進設計師的身體里一個元素。多多實戰練習，不需要死記硬背，就會刻在我們的大腦深處。
文章來源：站酷
每一次學習改版案例，不僅僅只是去看在視覺層面的變化，更多的應該是要學習到作者改版背后的思考。為什么要這么改，原因是什么，目的又是什么，怎么做，有哪些限制等等，有很多東西要去思考。所以，帶著問題并結合自己實際中所做的項目來看案例，應該會是一個很有收獲的過程。
Booking.com繽客 是一家荷蘭初創公司，并已經發展成為全球最大的旅游電子商務公司之一。
在Booking上，旅客可以選擇世界上任何一處的住宿地點，包括公寓，度假酒店，民宿，五星級豪華度假村，樹屋甚至冰屋等等。每天，通過平臺預訂的房間數超過155萬。無論是商務旅行還是休閑旅行，人們都可以快速輕松地預訂到理想的住處。
自從Booking發布以來，許多競爭對手都采用類似的商業模式瘋狂跟進，搶占市場，并且在某些方面比Booking本身做的還好。
在調研的前期階段，我去搜集了一些競爭對手和類似的平臺，分析UI，用戶體驗，用戶地圖，信息架構和關鍵功能。但是我并不會花太多時間過于深入的去分析這些產品，因為我希望將重點放在Booking這個產品本身的訴求上。
在之前的調研過程中，我發現了許多不同的使用場景，經過匯總歸集，我集中關注以下3個場景：
在進一步的研究中，我明確了4位具有不同需求和不同目標的典型用戶，這些數據對于改善不同用戶的體驗非常有用。
這個分析的目的是通過梳理最佳的用戶流程并提升產品體驗，來為不同需求的用戶提供最好的用戶體驗。
△ 數據來源：在線研究和用戶訪談（30個用戶樣本）
收集用戶評論，從中我收到了很多有價值的反饋，這些評論中沒有特別明確指出是可用性或功能性的問題。我將這些反饋分為4類（譯者注：對反饋的問題進行提煉整理）：
毫無疑問，最相關的是預訂被取消的問題。太多用戶會注意到不合理的費用或與房間的主人取得聯系時遇到困難。
基于30個用戶樣本，我試圖獲得進一步的用戶反饋，從中注意到以下的幾點事實：
我想引用一段話，來總結這里面遇到的問題，這段話也蠻有意思的，它說的是：
「與其他應用比較來看，套路顯得有點多，會讓你覺得一切看起來都蠻劃算，總是想多賣一些東西給你。」
總結之前的分析，我提出了以下幾點觀點：
從用戶痛點出發，嘗試找到合適的解決方案，來提升產品體驗。
1. 主頁
總的來說，我對首頁進行了大手術。主頁的搜索功能已經完全重新設計，減少過多的干擾信息。
導航：我設計了一個新的導航欄，剝離出「已保存」功能，這樣用戶就可以快速找到自己所收藏的商品。此外，我也優化了「交易」的模塊，后面我會詳細的說說這塊的改動思路。
其它功能 :至于之前的版本，我保留了搜索和相關推薦的功能，重新設計界面以改善UI的可用性。
2. 社交功能
如今，社交網絡在用戶的生活中扮演重要的角色，那沒理由在booking中做的這么差。我搞了一個新功能，允許用戶關聯自己的好友并查看他們的選擇，包括他們的評價（喜歡/不喜歡）。我已將此功能放置到主頁的下方，因為我希望在將其推廣到其他模塊之前收集更多有關它的數據。
3. 搜索功能
把這個功能分解為多個步驟。在輸入第一個詞后，即使沒有指定日期或其他信息，也能顯示相匹配的酒店。此外，我也加入了語音搜索，使搜索更容易?；谥拔覍Σ煌脩艚巧亩x，搜索的結果將根據最后的信息進行推薦：
4. 列表頁面
列表頁針對易用性方面做了整體的優化：
5. 詳情頁
我列出許多可以在詳情頁面中加入的修改。將總價格突出顯示，以免有些隱形消費用戶可能會被忽略。
增強了一個與評論相關的次要功能，允許用戶通過不同標簽篩選它們。
6. 交易功能
在優化開始時，我確定了操作場景2—— 「用戶還不知道自己的目的地」作為優化方向。為了提供更好的用戶體驗，我增加了一個新的功能，用戶可以在其中找到不同目的地的區間。利用篩選功能，用戶可以選擇最適合其需求的區間（區間 – 大陸 – 國家等…）
最后，我還設計了一個整個項目的動效原型，把之前所有重設計的頁面串聯起來。
由于時間限制，分析和結果是基于我的個人經驗和少量數據，需要進行深入分析和其他測試，以便完善和驗證解決方案。
文章來源：優設網
還在頻繁地使用彈窗對用戶展示重要提示嗎？明知這樣有損體驗卻沒有更好的選擇嗎？那么不妨來試試干擾度更低，卻依然可以用于重要提示的 Sheet 控件吧。
Sheets 控件并非彈窗，通常會被熟稱為「浮層」或「浮窗」。
該控件在 iOS 和 Android 系統規范中都有相關定義，屬于多才多藝的控件，可以用于給予信息提示，也可用于展示更多的拓展信息。
從用于提示的角度來看，Sheets 控件和 Dialogs 控件的相同點和不同點在哪里呢？
模態化
二者都可以設置模態，當模態控件顯示時，頁面背景會顯示深色遮罩，并立即打斷用戶當前操作。
承載操作和信息
二者都可以承載豐富的操作和信息，支持嵌入列表、選擇器等控件及圖片、文本信息。
觸發方式不同
Dialog 可以不通過用戶操作而自動觸發，Sheet 必須通過用戶操作才可以觸發顯示，因此用戶對 Sheet 的顯示會更有預期。
關閉方式不同
Dialog 的關閉方式較少，通常會要求用戶進行選項操作后才可關閉；Sheet 的關閉方式較多，對于用戶而言有更豐富的選擇權。
因此綜上所述，我們可以發現，Sheet 對比 Dialog 的優勢在于，它的顯示會更符合用戶的預期，它的干擾層度也會低于Dialog（因為更易關閉）。
下面就由我來依次詳解其特性和玩法吧。
專屬于 Android 的 Sheets 控件。
用于補充內容相關的更多信息（非模態）、提供可交互的菜單或對話（模態）或其它關鍵功能/任務的拓展。
菜單樣式
可嵌套 Menus，展示多個選項內容。
宮格樣式
可使用宮格布局，展示多個選項內容。
迷你樣式（非模態）
一個非模態底部浮窗可被設置固定展示在頁面底部，用戶可以隨時用它來對其它功能/任務進行快捷操作，如進入購物車、查看所選圖片、查看聊天和查看剛才的視頻等。
非模態浮窗：如左下圖所示，非模態浮窗與內容保持在同一層級，用戶可同時對內容和浮窗進行操作。
模態浮窗：如右下圖所示，模態浮窗層級高于內容，背景深色顯示遮罩，用戶僅能對浮窗進行操作。
顯示
浮窗顯示時從底部向上滑入，非模態浮窗顯示時不會打斷用戶操作，模態浮窗顯示時會顯示深色遮罩以打斷用戶操作。
消失
浮窗消失時會向底部滑出。
模態浮窗在以下情況下會消失：
非模態浮窗在以下情況下會消失：用戶選中浮窗上的對應按鈕（自定義）。
當浮窗底部仍有未顯示的內容時，可設置通過滑動或拖動浮窗來使其變為全屏展示，并在頂部顯示 Toolbar 來展示關閉/收起操作。
模態浮窗中可以展示其它應用的深層鏈接內容或操作，譬如調用 Google 翻譯。
抖音的評論功能使用的是模態 Bottom sheet；百度地圖的路線切換功能使用的是非模態 Bottom sheet。
專屬于 Android 的 Sheets 控件。
用于補充內容相關的更多信息（非模態）或提供可交互的列表信息（模態）。
菜單樣式：可嵌套 Menus，展示多個選項內容。
宮格樣式：可使用宮格布局，展示多個選項內容。
如左下圖所示，非模態浮窗與內容保持在同一層級，用戶可同時對內容和浮窗進行操作（在移動端較少使用，通常用于 PC 端）。
如右下圖所示，模態浮窗層級高于內容，背景深色顯示遮罩，用戶僅能對浮窗進行操作。
顯示
浮窗顯示時從左/右邊緣滑入，非模態浮窗顯示時不會打斷用戶操作，模態浮窗顯示時會顯示深色遮罩以打斷用戶操作。
消失
浮窗消失時會向左/右邊緣滑出。
模態浮窗在以下情況下會消失：
非模態浮窗在以下情況下會消失：用戶選中浮窗上的對應按鈕（自定義）。
支持上下滑動，不支持左右滑動。
淘寶的篩選功能使用的是 Side sheet。
專屬于 iOS 的 Sheets 控件。
用于呈現一組與當前操作相關的選項，如啟動某個任務，或者確認是否開始執行某個可能具有破壞性的操作。
在 Android 中不建議使用 Action sheet，建議使用原生的 Bottom sheet 或 Simple dialog。
如下所示，支持單個或多個操作的展示，以及說明文案的展示：
顯示
浮窗顯示時從底部向上滑入，會顯示深色遮罩以打斷用戶操作。
消失
浮窗消失時會向底部滑出。會在以下情況消失：
豎屏時顯示在頁面底部，橫屏是居中顯示在頁面底部。
微信的選擇朋友圈發布類型及清除聊天記錄的二次確認，都是使用的 Action sheet。
專屬于 iOS 的 Sheets 控件。
用于呈現一組與當前操作相關的選項表，如復制、收藏或分享。
在 Android 中不建議使用 Activity views，建議使用原生的 Bottom sheet。
列表樣式
宮格樣式
混合樣式
顯示
浮窗顯示時從底部向上滑入，會顯示深色遮罩以打斷用戶操作。
消失
浮窗消失時會向底部滑出。會在以下情況消失：
豎屏時顯示在頁面底部，橫屏是居中顯示在頁面底部。
當面板底部仍有未顯示的內容時，可設置通過滑動或拖動面板來使其高度進行延伸，從而展示更多信息。
愛奇藝的分享功能和泡泡圈選擇發布內容類型，都使用的是 Activity view。
建議針對非系統級或業務級的重要提示，使用 Sheets 控件進行提示；Dialogs 控件僅用于最重要的信息提示才算是「好鋼用在了刀刃上」。
另外在調用原生 Sheets 組件時，記得分端的差異性。
文章來源：優設網
藍藍設計的小編 http://www.syprn.cn