移動互聯網的迅速崛起，讓移動網頁，移動客戶端越來越重要，客戶端的頁面設計也是一門很大的學問。科技迅速發展的今手機屏幕的尺寸越來越放大化，但卻始終 很有限，因此，在APP的界面設計中，精簡是一貫的準則。這里所說的精簡并不是內容上盡可能的少量，而是要注重重點的表達。在視覺上也要遵循用戶的視覺邏 輯，用戶看著順眼了，才會真正的喜歡。
接下來為大家分享精美的app UI設計案例：
藍藍設計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設計公司，公司對UI設計的追求一向很高，致力于為卓越的國內外企業提供卓越的手機 ui設計、軟件界面設計、網站設計，用戶研究、交互設計等服務。
--手機appUI設計--
簡單地講，分類就是按照種類、等級或性質分別歸類。
某種事物無論是按什么分類，只要是屬于同一種分類，就一定有一個共同的屬性，而這個屬性就是分類的依據。
假如手機是指“移動便攜性的通訊設備”，那么小米手機、華為手機、蘋果手機等，雖然系統不同、性能配置不同、外觀設計不同，但是都可以歸類到手機，因為它們都具備“移動便攜性的通訊設備”這一共同屬性。
再舉個很簡單的例子，蘋果、梨子、芒果都可以劃分為水果，因為他們具備“多汁且主要味覺為甜味和酸味，可食用”的屬性（定義來自百度百科），這些屬性是歸屬于這個分類的必要條件。基于這個分類，我們比較容易判斷得出，生菜不是水果，因為雖然具備可食用性，但是不具備“多汁且主要味覺為甜味和酸味”。
分類可以把雜亂的事物變得規整，把凌亂的信息按照某些維度劃分，使事物更加清晰。
前兩年風風火火的垃圾分類，就是一個例子。生活中所有物品廢棄后都可以成為垃圾，如果不進行垃圾分類，處理成本高且污染環境。而垃圾分類，就是將垃圾按一定規定或標準將垃圾分類儲存、投放和搬運。
既然分類是按照某種方式進行組織，那我們需要明確了解，分類方式必須讓用戶易于理解。所以，分類本身是否合理，很大程度上取決于人們能否容易理解分類。
“簡單的組織模式具有清晰的界限——是非分明。這樣，用戶才能明確知道到哪里去找自己想要的東西。因此，要多找一些用戶，詢問他們的分類標準。如果眾口不一，或者根本就難以回答，你就有麻煩了?！?
垃圾分類很火還有一個原因，因為用戶經常不知道什么物品屬于什么垃圾，這就對垃圾分類產生很大的阻力，網上一時間有了很多識別物品垃圾分類的產品功能。
我之前使用三星手機，每次想要在設置里面尋找某功能，都很讓人煩躁，因為手機設置里定義的某功能的分類方式，與我們的認知并不一致，這就會造成尋找時及其低效的情況，同時也會引起強烈不滿，這意味著，如果你忘了某事物的具體名稱，而分類方式與心理模型所認知的分類方式不一致，你就極難找到。（不過三星很有意思的一點是，盡管在設置的分類項里找不到，但是往往能在設置項下方的推薦查找處找到相應功能，這就很魔幻。）
分類本身就是將混亂的事物進行歸類，這帶來一個很明顯優點，就是便于用戶查找，只要用戶明確某事物屬于哪一分類，便能相對輕松地找到。
比如我們想要尋找某款好用的修圖軟件，但是不知道具體名稱，想要在應用商店的眾多應用里，尋找某款應用，比較常用的方式就是搜索或者分類。
分類可以將應用按不同用途進行劃分，比如視頻、拍攝、工具、社交等。通過這些分類，可以很大程度上縮小我們的尋找范圍，這就是分類的高效性。
分類還有隱藏屬性，就是對比性。許多用戶使用分類時，也會喜歡進行對比。
還是以修圖軟件為例子，你想要某款修圖軟件，于是你通過分類，找到了一批修圖軟件，而你本身并不知道什么軟件好。分類將相同屬性的軟件聚合到一起，一定程度上可以幫助你基于某種維度進行對比，正好可以讓你更輕松地對比哪款軟件更適合你。
分類是否合理，還需要看分類本身是否足夠全面。理論上，我們通過分類劃分事物，則分類需要可以將這些食物完全囊括。如果分類本身無法囊括這些事物，就會造成用戶尋找時的盲區，證明這種分類方式本身不合理。
假如用戶去逛淘寶，想要找某物品，但是翻了很多分類，仍然找不到，這時大概率就不會再通過分類進行尋找了，而這種糟糕的體驗，也會讓用戶對這個產品的分類變得很失望。
剛才說到，同一分類是圍繞同一個屬性的。但是，同一個事物，本身可以有很多種分類方式。而我們需要保證的是，事物在同一分類里的具有唯一性。
一首歌，如果按照語言體系維度進行劃分，一般可以劃分為華語、英語、日語等。還可以按照流派維度來劃分，一般可以劃分為電子、輕音樂、搖滾、說唱等。
我們對事物的認識方式是立體的，事物可以被按照不同維度進行不同分類也就不足為怪了。同一個事物，甚至同一個人，是可以有多種分類方式的。
說完分類的許多屬性，我們聊聊在互聯網產品中，用戶會在什么場景下使用分類？我們又該如何設計分類功能？
首先，用戶會在什么場景下使用分類？從產品層面，分類是便于人們查找某事物的一種方式，因為相對比較清晰、高效。
這里有個很關鍵的點，就是“查找”。也就是說，分類的使用場景，偏向于人們有相對明確的目的。用戶的行為路徑是有主動的查找需求。
互聯網產品，查找某事物，最常見的方式是搜索，瀏覽，分類。而這幾種方式都有不同點，分類側重于“屬性”區分。
大部分用戶使用分類時，行為特點是相對主動的。此時用戶未必有十分明確的目標，但大致知道想要什么。比如你想和朋友聚餐，不知道具體吃什么，這時候你打開了大眾點評，你只知道要吃中餐，這時你可以在中餐的分類里去找適合你的店。
用戶的目標如果十分清晰，則更適合直接搜索，因為這比起分類查找的路徑更短也更高效。
總結一下，我們要設計分類功能，需要從用戶的角度來觀察分類這件事情。：
· 用戶主要的行為模式：人找內容。
· 有目標但不夠明確。
我們需要先了解分類的細分層級，分類的層級大部分不超過 4 層，但會因不同產品的定義不同而有所區別。
一般來說，第一層是顆粒度相對較大的，接下來會層層在上一層的基礎上細化。
以京東的分類為例：
第一層：奢侈品，箱包，手機等；
第二層：手機包含：熱門品牌、手機類型、運營商、手機配件；
第三層：熱門品牌包含：蘋果、華為、OPPO、VIVO、小米等；
第四層：蘋果手機包含：iPhone 12、iPhone 11等；
最少的層級是兩層，比如垃圾分類：
第一層：可回收垃圾、干垃圾、濕垃圾、有害垃圾；
第二層：具體的垃圾物品。
就體驗層面而言，建議分類層級避免超過 3、4 層，盡管本身可能會提升細分度，便于用戶查找。但由于分類方式本身必須與用戶的理解相契合，如果太多層分類，用戶需要思考目標內容在哪一分類。經過幾層判斷后，才能找到目標內容，這對于用戶的理解成本是比較高的。
此外，太多層級不利于用戶在不夠熟悉分類方式時快速了解某分類下的具體事物。如果用戶對分類的劃分方式理解錯誤，就需要返回繼續查找，效率低、使用門檻高。
當然也不能盲目追求盡可能短的分類層級。兩個層級可能無法滿足查找需求，因為內容量龐大，所以還需要更多的過濾，需要依據產品類型而定。
由于目前許多產品都發展到相對成熟的狀態，所以設計分類功能時，一般不需要對分類方式再進行劃分，主要原因是相同類型的產品，分類方式大同小異。用戶的理解習慣上，對于某事物的分類也有基本的認知?，F在設計分類功能，主要是對頁面交互及視覺層級進行重新設計和調整。
我們會梳理常見的分類交互框架，從分類入口、頁面布局等層面可以看到產品中分類功能的定位強弱。這里列舉的分類形式，會根據產品的主功能進行闡述。比如電商類就是商品分類、旅游類就是地點分類等。
以京東 App 為例，京東把分類功能作為一個主要的頁面模塊。分類 tab 占據了 App 的第 2 個底部 tab。
使用京東的用戶，購買的目的性相對較強，京東主打的就是自營正品和快遞速度，商品與淘寶相比會少很多，但依然很全。用戶習慣上，“逛”的屬性沒有淘寶那么強。首頁以功能區+信息流為主，偏向于商品分發+逛信息流，而分類功能則主要滿足相對明確目的用戶需求。
京東分類頁左側為一級分類，右側為二、三級分類。側邊導航將分類豎排的最大優點是能夠充分利用屏幕空間，提升分類類型的展示效率。適用于分類類型多、分類層級多的場景。右側頁面信息靈活性較高，可以配置運營位，如放置運營 Banner ，且支持左右滑動 Banner 。下方一般放置二、三級分類。
右側頁面滑動時，頂部有輔助查找二、三級分類的導航分類標簽，便于用戶快速查找：
切換一級分類：這種框架切換分類的方式主要有兩種：1、點擊左側導航欄進行切換；2、向上滑動右側頁面進行切換。用戶習慣上，第 1 種方式會更高效，而第 2 種切換方式會更自然，更符合手勢操作。
以【推薦分類】為例，右側【常用分類、專場推薦、熱門分類】都是歸屬于【推薦分類】的。為了便于用戶更好區分頁面分類層級，頁面向上滑動時，通常會設計繼續上拉切換的提示。目的是提醒用戶，該部分已經滑動到底了，繼續上滑會切換到下一部分，明確區分不同分類。
上滑的另外一種模式，以宜家為例，宜家聚焦于家居用品，分類類目沒有大型電商 App 那么多。左側是一級導航【燈具照明、裝飾品等】，右側分類標題與左側導航一一對應，并且分類之間無明確的頁面分隔區分，所以滑動時無需設計切換到下一部分的提示。
以上講的，右側頁面均是二、三級分類入口，并不是具體的。分類層級或類型少的情況下，右側可以嘗試放置具體內容，比如華為應用市場的處理形式。
需要注意：
1、左側導航占據了屏幕縱向的固定位置，從而縮減了頁面寬度。
2、由于層級多，左右側均是分類入口，用戶無法在頁面直接看到具體商品/內容。在電商產品上，用戶容易區分不同分類類目下是什么商品。但可能在某些 App 上，用戶未必清晰所要尋找的內容在哪一分類類目下，可能造成用戶流失。
3、如果沒有具體的內容呈現，對于內容、商品等分發效率也存在影響。
頂部導航型的優點是將多級分類與具體內容結合在一個頁面，可通過點擊或者滑動切換不同分類，將觸達具體內容的路徑盡可能減少，提升具體內容的曝光。
以掌閱 App 為例：最高層為一級分類，可滑動。第二層是二級分類，更精準分類挑選。第三層導航偏向于篩選。第四層為具體內容，用戶無需通過頁面跳轉就能查看。這種設計特點很明顯：內容曝光 > 分類效率。由于一級分類不多，可以通過左右滑動查看，避免浪費頁面空間。二級分類類型多，采用折疊的形式將分類收起，點擊可以展開更多二級分類。
顯而易見的，多層分類在頂部排列，視覺效果并不佳。默認狀態下，占用頁面頂部的空間。這種結構，在設計時為了能夠節省頁面空間，二、三級導航會伴隨用戶向上滑動的手勢折疊，提升內容的曝光效率。用戶在滑動場景下，會更聚焦于頁面具體內容而非導航，所以折疊的設計比較巧妙。
這種設計由于具體內容曝光的效率高，受到許多產品的青睞，適合于資訊類、內容類等產品。比如微博首頁，微博側重于內容的主動推薦，所以將分類弱化為一行導航欄，頁面主體為具體內容推薦。用戶瀏覽的內容有相對固定的傾向，比如會喜歡看綜藝、社會、美妝等內容，并沒有很強的尋找不同分類的訴求。
若用戶想要設置常用的分類頻道，可點擊【+】展開，查看常用頻道。由于頻道比較多，而橫滑 Tab 左右滑動的效率較低，所以微博選擇了展示部分常用頻道。如果用戶想查看更多頻道，還能在展開的頁面里進行配置。這種設計為分類功能的設計帶來了更多自定義性。
知乎的處理邏輯與微博一致：
淘寶的分類相比于一般電商類的產品，會比較特別，常見的電商類產品的分類模式和上面介紹的京東 App 比較相似。但淘寶已經往全面信息流化的方向發展，為了推動用戶在淘寶中“逛街”，甚至連分類都已經往信息流化的方向發展。
淘寶的分類功能正在弱化，不像京東、蘇寧占據著底部第 2 個 tab 的位置，而是在首屏功能區的最后一位。點擊后，也不再是常規的側邊導航，而是強化商品外顯。
淘寶分類頁除了上方的一、二級分類，下方都是商品推薦，向上滑動就是瀑布流，增強商品而弱化分類效率。
如果用戶想看其他分類，可以通過左右滑動切換。如果希望查看更多分類，需點開旁邊的”更多“按鈕，通過”更多“按鈕進入的頁面，側重于高效展示分類。淘寶有信心這么做，一部分原因可能基于對算法推薦的信心，我發現不同手機看到的分類順序并不一致。
以 B 站為例，B 站的分區頁面的設計形式為展示番劇、國劇、放映等所有一級導航，而將細分層級隱藏到下一級頁面。
這種設計方式適合一級分類類型很多，且重點在于高效呈現這些分類類型的場景。二級頁面聚焦于具體的內容，可以避免將一、二級分類堆疊在一個頁面，滿足用戶對查找分類的效率的要求，避免過載的信息量使頁面變得復雜。但顯而易見的，這種結構不利于用戶在當前頁面直接看到下一層級內容。
App store 整體邏輯與 B 站一致，區別在于排列方式為列表型排列。
vivo 應用商店也是聚焦型分類，但是會把二級分類呈現出來，與側邊導航型分類很相似，區別在于這里是整列表滑動。
前面講到，分類是具有多種維度的。以“好好住”為例，有居室、面積、風格、預算、特色等維度。
上面“好好住”的幾個維度之間，沒有上下層級之分，均屬于同一層級，所以層級是并列而非遞進的，這種情況更適合采用篩選的處理形式。同樣的，由于頂部篩選類型多，占據過多的頁面空間，當頁面上滑后，篩選可折疊以節省頁面空間，同時更聚焦與具體內容。
設計分類功能，要先明確分類的維度，以及用戶是否容易理解，避免造成與用戶認知習慣相沖突從而影響功能使用的情況。
整體上，通過分類功能找目標內容的路徑應該避免太長，因為這會影響到內容曝光效率及用戶對分類之下的具體內容的感知。
分類本身是一種信息組織與呈現方式，設計時需要對產品信息本身有足夠理解，才能有針對性地思考交互框架。分類功能的交互框架多樣，每種都有優點和缺點，需要根據產品定位及訴求（優先展示分類，還是優先展示具體內容）采用適合的交互形式。
需要注意的是，有的產品的主功能甚至沒有很明確的分類，比如淘票票，定位是買電影票，而人們看的電影具有很強的時效性，能不能看到電影幾乎完全取決于電影何時上映，重點更側重于向用戶推薦最近的電影。
以上分析了分類功能、羅列了比較常見的分類功能設計形式，希望能幫助到各位。
文章來源：站酷 作者：熱風_
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
移動互聯網的迅速崛起，讓移動網頁，移動客戶端越來越重要，客戶端的頁面設計也是一門很大的學問?？萍佳杆侔l展的今手機屏幕的尺寸越來越放大化，但卻始終 很有限，因此，在APP的界面設計中，精簡是一貫的準則。這里所說的精簡并不是內容上盡可能的少量，而是要注重重點的表達。在視覺上也要遵循用戶的視覺邏 輯，用戶看著順眼了，才會真正的喜歡。
接下來為大家分享六款精美的app UI設計案例：
藍藍設計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設計公司，公司對UI設計的追求一向很高，致力于為卓越的國內外企業提供卓越的手機 ui設計、軟件界面設計、網站設計，用戶研究、交互設計等服務。
--手機appUI設計--
這一年，更多的是關于交互的思考。如果說界面是外表的話，那么交互就是其靈魂，只有交互合理的產品，才能夠讓用戶更好的使用，而交互細節成熟的產品對體驗上的提升則更巨大。寫這篇的起源是平日在設計評審時或多或少會遇到以下的交互問題：
在思索如何能夠盡量避免遺漏細節的過程中，發現狀態可見性原則對于這些細節有比較重要的指導意義。這一原則想必大家都不陌生，但可能并沒有引起大家的重視，且網上大部分文章對于此原則的解釋都比較簡短。因此在探索過程中產出了這篇比較詳盡的關于狀態可見性原則的深度解讀。目錄如下，重點已圈好～
大家可以根據上述目錄來進行選擇性閱讀，當然全文閱讀也是極好的～
我們在開頭闡述了可能遇到的一些問題。而以上情況的出現，都源自于我們在設計時思考的不夠全面，很多時候都忽略了某些情況下的設計，導致有些關鍵體驗上的問題未被發現。我們可以看下微博和知乎在斷網下點贊的例子。
可以看到，微博在斷網下依然有點贊動作的反饋，且沒有任何異常提示，這樣會導致用戶大多數以為此次操作是成功的。但知乎在斷網情況下，點贊是不能生效的，且有消息提示“異常提醒”。這樣的話其實就能夠讓用戶明白此次操作沒有成功。在這種場景下，微博的點贊就屬于“不恰當的反饋”。而這些設計，都可以歸因于狀態可見性原則的范疇。
讓我們先了解一下狀態可見性原則的定義。這是尼爾森(Jakob Nielsen)-人機交互學博士，于1995年1月1日發表了「十大可用性原則」。而可用性原則位于十大可用性原則之首。
雖然只有這么一句話，但其中包含的意義比較重大。我們現在所使用的系統，都運用了狀態可見性原則，如果沒有，那么系統幾乎會掉入不可用的現象。而系統在使用體驗上的差異性，有很大一部分原因也在于可見性原則運用的好與壞。
我們來舉一個生活中的例子來幫助大家理解。當你手機沒電，你用充電器連接手機時，在連接的一瞬間（恰當時間），手機狀態發生變化（恰當反饋）讓你成功獲取手機正在充電的信息（系統狀態）。如果在某個環節出現問題，比如連接上手機2分鐘后（不恰當時間），手機狀態才發生變化。那么你肯定會認為哪里出現了問題。這就是狀態可見性原則的基礎運用。
那么我們如何能夠深刻理解一個原則呢，最簡單的做法就是將其拆分，并結合實例理解。下面通過原則拆解來進行深刻解讀。
我們將拆解分為以下三個部分，下面的篇幅會更詳盡地進行說明
時間在這里指的就是系統的響應時間，而合理則可以理解為時間的長短。這句話可以理解為從用戶執行操作到反饋出現的間隔時間是否正常，是否有影響到用戶的正常體驗。
當我們在進行打字輸入時，我們敲擊鍵盤的同時，屏幕上就會出現對應的文字。而如果出現文字的反應時間過長，我們就會感覺到明顯的卡頓，此時的響應時間就會變得“不合理”。
根據Robert B. Miller在他的研究《人機對話的響應時間》中以及其它相關資料，制作得出以下結論圖
以上是人機交互響應時間的總覽，接下來細節深化每個時間點對應的操作。
我們先看100ms以內的。我們平時使用的小組件動畫，比如說按鈕反饋，勾選反饋，以及其他需要瞬時反饋的操作，基本都是在100ms內完成的。
在看100ms-1s區間的，在這個期間進行的動畫，用戶能夠很清晰的看見動畫發生的過程，而又不顯得遲鈍。我們普通UI中應用的動畫則大部分在100ms-500ms這個范圍內?！緸楹卧谶@個時間內呢，個人的理解是：對于發生在UI界面內的動畫，100ms內的動畫太快，人只能感受到開始和結束的狀態，不能看見發生過程，因此一般大于100ms，而500ms是用戶即時感知的最長時間，因此小于這個范圍內的動畫較為合理】
最后看下1s-10s這個區間的：在這個階段，最有可能進行的就是相關頁面的加載行為，或者某些小型文件的上傳和預覽。針對于這種情況，我們一般會在加載進行中，添加對應的加載效果，來緩解用戶的焦慮和等待情緒。
最后則是10s以上的，一般用于大型文件的上傳或者弱網環境的加載過久。
大約10秒鐘后，用戶的情緒將達到極限，內心將開始產生疑惑，超過10秒，用戶往往會離開網站，而不是試圖繼續恢復他們一開始想要做的事情。
因此，我們在進行系統設計中，需要對超過這一時間內的行為，進行對應的反饋。比如加載超過10s的時候，我們是不是需要給用戶提供離開的選項，或者提示用戶重新加載這樣一種行為。我們可以看下高德和美團在加載中的例子
我們可以看到，在到達10s后，美團自動給出了一個當前網絡不可用的，請檢查網絡的提示，并終止了加載進程。而高德地圖則是沒有任何提示，自動結束了加載。相比之下，美團能夠讓用戶明白為什么中斷了該進程，也就擁有了更好的用戶體驗。
且對于一般情況下都超過10s以上的形式，我們無須讓用戶停在當前頁面等待。比如微博或者抖音的視頻上傳，一般會消耗比較久的時間，因此當用戶點擊上傳后，都只會留一個小地方來展示上傳進度，用戶隨時可以做其他的事情，這樣有效避免了用戶長時間等待的問題。
以上則是常見的在合理時間內的表現，但目前也存在一些特殊場景：
比如時間延遲，圖蟲和微博會在用戶停留幾秒后增加評論區域的顯示，根據用戶停留時間，判斷用戶對當前內容感興趣，以此來增加用戶的互動。
類似的這種設計還有抖音的評論分享，當超過一定時間后，評論圖標自動變為朋友圈圖標。而在PC端，也有一個很典型的案例，不知道大家注意到沒有，就是關于hover的延遲。我們在使用hover顯示時，一般可能大家認為中的都是鼠標移動上去立刻顯示，但在某些應用場景中，延遲300ms再進行hover顯示，會更合理，舉例如下：
大家可以看到上圖，在你快速移動時，是不會顯示下方的補充說明的。在停留大概300ms后，則會出現提示。其實這里對應了兩種用戶場景。第一種是快速移動的場景，有利于用戶切換不同頁簽時不打擾用戶；而在停留時，用戶則是想要看更詳細的信息。因此在這里使用hvoer延遲既能不打擾用戶，也能滿足用戶的不同需求。
這里是之前做的一個案例，就是由于沒有考慮到hover延遲，從而使得用戶在快速移動時會讓hover的信息產生干擾。
以上的內容都是針對于時間的詳細解釋。只有了解在對應的時間系統處于哪種狀態，我們才能夠滿足狀態可見性原則中“恰當的時間”這一原則。從而更好的對系統進行對應的交互設計，讓用戶在使用產品時獲得優秀的體驗。
按照目錄接下來應該講反饋了，但在反饋之前想先提及一下頁面信息呈現。只有當用戶理解當前頁面所表達的信息后，才能夠進行接下來的操作，從而得到對應的反饋。在這里主要提及兩個點，一是核心信息，二是預期信息。
一個用戶界面如果沒有核心信息的呈現，那么給到用戶的反饋是很弱的，用戶第一眼都不知道從界面中能夠獲取什么內容。尤其是在移動端核心信息的呈現更為重要：
比如上述兩個案例，在界面上只呈現了最重要的內容，移除了其他全部干擾內容，讓用戶更聚焦。當然平時接觸到的不可能全部是這種頁面，我們在頁面信息呈現較多時，也需要進行重點信息的呈現。在這里放一個動態的案例讓大家對比一下重點區分的形式
除了核心信息，還有預期信息的呈現，說白了其實就是元素的可交互性與不可交互性。當事情按照用戶預計的方向運行時，用戶會有強烈的控制感。在PC上，用戶可以使用鼠標懸停來判斷該元素是否可交互，但在移動設備上，用戶只能通過點擊來判斷是否為交互元素。
這就要求我們在移動端設計時需要清晰地考慮到可交互元素與不可交互元素在外觀上的區分。我們先來看一個關于微信的例子：
大家可以看一下微信的數字呈現，除了默認的黑色字體外，是不是還出現了一種淺藍色字體。而你點擊藍色字體，則發現可以調出動作面板。而黑色字體則不會。
這就是利用顏色的區分來引導告知用戶部分信息的可點擊性。而目前關于移動端可交互元素如何設計，如何讓評審時不再聽到“你這個看著像不可點的”這句話。根據相關資料和過往項目，總結出以下幾點：
首先根據目前人們的認知，基礎控件類型的都是可以操作的，比如按鈕，導航欄、底部標簽欄等。下圖為工作中做的一些基礎控件：
拋開基礎控件，剩余重點是文字類。文字類在不加任何提示的情況下，用戶會默認為不可操作的對象。一般我們通過下列幾種方式來體現其可操作性。
介紹了可交互性，那么再來講一下不可交互性的元素。不可交互的部分有一個非常重要的點，就是應該需要讓用戶認識到該元素為什么是不可交互的，不對用戶造成困擾。
不可交互的處理方式一般分為置灰和隱藏兩種方式。我們首先來看看置灰無反饋類別的使用場景：
還會存在一種置灰有反饋類別的使用場景，而對于非按鈕類狀態的置灰，經過資料和相關調研，發現可以根據其使用場景來設置是否給出反饋，比如網易云音樂的音樂列表場景。
除開置灰的另一種場景就是隱藏，工具類應用對于隱藏這個操作使用得較多，比如我們平時使用得sketch和figma也基礎應用了這一操作場景。
好了，說完了用戶界面的相關內容，只有了解上述內容，讓用戶明白界面哪些是可交互，哪些不可交互。才能夠讓用戶進入到下面的“恰當反饋“。
在這里我先講手勢操作，因為手勢操作是前提，然后再講反饋設計。
反饋的前置條件是操作，我們在加餐中已經告知了如何引導用戶操作，但在移動端中可能還包含一些隱藏的手勢操作，利用不同的手勢可以達成不同的操作響應。我們來看一下這個案例：
這是即刻對同一個控件進行了兩種手勢的定義，但大部分用戶可能對于第二種長按手勢的功能其實是不知道的。這樣的功能來說對于新手用戶來說是處于不易發現的“彩蛋“功能。又比如下方的知乎雙擊點贊，以及最近微博更新的連續點擊效果：
如果我在這里不進行事先說明，可能部分用戶還不知道。但好在上述兩種方式的設計前提是建立在不影響主功能使用的，用戶依舊可以通過其他操作來完成。
說這些的是為了表明，我們在設計反饋時，要考慮到手勢操作的用戶認知程度，一些特殊的手勢操作雖然能提高用戶的操作效率，但用戶如果都不能發現，何談提高效率，更多的作為“隱藏彩蛋”功能出現。因此我們在產品設計中要盡量注意去使用常規手勢而不是非常規手勢。下列歸納了部分手勢：
大部分情況下我們其實使用“點擊”和“滑動”就可以完成大部分系統操作。如果我們需要加其他操作最好在用戶第一次進入時加上引導。
當然，在某些情況下，我們是需要將常用的操作，轉化為不常用的操作，來防止用戶發生誤操作，比如下方的keep在運動中停止的按鈕，考慮到運動的場景，單純的點擊很容易被誤觸。因此keep對“結束”這一功能采用“長按+引導”的方式來防止用戶誤操作：
OK，接下來正式進入反饋這個環節。
反饋就是當用戶對于系統進行相關的操作后，系統對應引起的一系列變化。反饋從類型上可以分為視覺反饋、聽覺反饋和觸覺反饋。
聽覺反饋和觸覺反饋在這里簡單講一下，一般在我們的設計中使用的比較少，聽覺反饋目前用的最多的是語音助手和地圖類工具在息屏時后的反饋，比如下方的高德地圖反饋，能夠讓你在進行開車或騎行時，即使關掉屏幕，也能通過語音反饋知道此時正在導航中：
而震動反饋最開始是在蘋果內的應用，包括你在知乎上進行點贊，appstore下載應用，都會進行對應的反饋，讓你的感受“實體化”，提升使用體驗。
而目前在其他app上，也逐漸開始了應用，比如大家熟知的微信“拍一拍”，在拍頭像的同時會伴隨著震動反饋；以及iMessage的反饋，它會在煙花綻放的那一剎那有震動反饋，給用戶更真實和有趣的體驗。
好了，最后來講視覺反饋，視覺反饋是我們目前最常見的反饋，也是平日里接觸最多的交互反饋。視覺反饋可以分為以下三種類型：
控件反饋舉一個最常見的案例，就是我們按鈕的狀態變化，我們通常可以看到狀態有以下幾種變化：
大家對上述按鈕的狀態可能都比較熟悉，但在很多情況下可能會忽略一些其他控件的點擊狀態，比如我們看下方的一個例子：
這是點擊“收藏”按鈕時兩個不同點，一個沒有點擊狀態的感應，一個有。這其實也是之前我比較疑惑的一個點，從功能性上來講，它并不影響后續的使用。但這種點擊狀態在官方文檔上到底有沒有明確說明呢，特意去查了下官方文檔，在IOS中的設計原則中有這么一段描述（黑字加粗部分）
并且在IOS的原生應用中，基本都遵循這一原則：
雖然有這樣一條原則說明，但并沒有特別嚴苛的規定我們必須要這樣做，因為即使沒有這種反饋，也不會特別影響用戶的整體操作，更多的是帶來使用體驗上的提升。因此大家可以在平日的使用中根據產品的設計階段，特別是在優化體驗的時候，可以考慮這一部分。接下來我們看一下頁面反饋
當我們觸發的可交互元素不涉及頁面的跳轉，那么此時的反饋多數用于當前頁面本身的反饋。而一般是由alert、toast、action sheet等來構成的。我們需要利用這些控件來對用戶的相關操作給出反饋，比如下面躺平和夸克的例子，當用戶操作時有對應的后續反饋：
再來看一個有對比性的例子：
上圖是QQ音樂和網易云音樂對于退出賬號這一場景采用的不同控件，那么這兩種控件哪種使用得更為合理。從用法上來說，兩者都沒有錯誤，但目前的移動端設計在這個場景逐漸傾向左側的設計形式。因為從使用程度上來說，左側的Action sheet 的級別會弱于右側的Alert，對用戶的打斷程度會更弱，且Action sheet可以通過點擊空白處來取消，而右側的alert在移動端大部分都是模態的，只能通過操作來取消。
因此對于這兩種需要根據使用場景來進行區分。一般來講，Alert更適合用于對系統操作有一定風險或者很重要的操作【需要引起用戶強烈注意】，Action sheet則相對于Alert更輕量化，對用戶的打斷較弱。
關于頁面反饋這部分還有些控件有比較細致的區分。比如toast提示適用于更輕量化的場景反饋，因為全網彈窗相關的內容也有很多了，在這里不細講。但大家在使用控件時需要注意下列IOS官網上的一個原則規定：
原則上盡量不去打斷用戶，給予輕量化的信息反饋，除非是某些需要引起特別注意的場景。關于這個的舉例，我們可以看下京東和淘寶在加入購物車的例子：
淘寶是使用傳統的toast來進行加入成功的反饋，而京東則是利用一個小動畫來達到告知用戶已加入成功的提示。相比之下京東的提示則更加有趣和輕量。因此我們除開傳統的控件外，也可以利用動效來進行更為恰當的反饋。最后，我們來講一下頁面跳轉反饋：
這可能是大部分設計師都一直忽略的問題。在我們的設計說明中，也一直很少涉及到頁面跳轉的單獨說明。而開發一般會按系統默認的方式去設計。
那么在頁面跳轉中，一般涉及到以下幾種方式，左右切換，上下切換以及聯動性切換。很多設計師其實并沒有太注意左右切換和上下切換的區別方式。那么在這里進行詳細的說明下：
最常見的跳轉就是左右切換。在大多數情況下，我們一般采用的是這類跳轉方式。且該方式應用在大多數應用程序中：
這種方式也跟我們平時的視覺順序有關，我們一般看事物都是從左到右的順序來進行的。這種場景普遍存在于界面中，比如一般性的頁面切換，功能進入等；接下來我們繼續講上下跳轉：
根據資料總結上下跳轉的場景應用有以下：
1.觸發的新頁面相對于當前頁面是臨時性的操作 (微信發紅包，新添加群人員，新建筆記本，新建話題等)，一般用上下的跳轉方式：
2.跳轉前后的頁面存在比較緊密的強關聯性，想讓兩個頁面的聯系更緊密，可以采用這種方式。比如QQ音樂和網易云的歌曲列表和播放頁之間就采用的這種方式。
大家觀察一下，同樣的上下跳轉方式，為什么網易云的整體看上去更加自然柔和呢，除了運動節奏外，還因為在整體的運動過程中，網易云以唱片為聯動點，將兩個頁面聯系起來，從而更加地柔和，這也就是接下來要講的第三個跳轉方式：聯動跳轉。
這種跳轉方式一般會以頁面中的某個控件作為前后頁面的承載點，從而讓兩個頁面的聯系非常緊湊，視覺上更加舒適美觀，但同時開發難度也比較大，適用于比較固定的某些頁面。除了我們熟悉的APP Store外，我們看下面兩個案例：
聯動頁面的好處，就是能整體的頁面銜接的更加柔和自然。我們也可以發現，在很多的概念設計中，用得最多的過渡動效也是這種聯動設計，比如下方來自Sang Nguyen的概念設計
因為要想提升頁面的整體柔順效果，目前來看聯動的方式是最為好的，但同時其實現難度也較大。
這是原則拆解的最后一個小部分，其實就是通過前面兩部分的拆解，原則已經講述得差不多了。而讓用戶了解，在我看來，就是我們給予用戶的反饋能夠讓用戶看懂。
首先看下這個案例：
大家可以看到文案一的整體表述，其實會讓用戶迷茫，到底哪個是撤回的操作，哪個是取消的操作。而文案二整體的文案和按鈕都有非常清晰的指向，能夠讓用戶清晰理解其意圖，達到繼續操作的目的。我們再看一下開頭的知乎反饋的例子，其實設計上還可以更進一步：
通過文案二的進一步設計，能夠讓用戶在知道操作異常的同時知其原因，幫助用戶快速解決當前問題。其實文案這部分的內容，在個人看來，一是盡量少用專業術語或者含糊不清的詞語來反饋給用戶；二是在告知用戶出錯時，盡量附帶簡短的原因說明。這樣用戶更好地去理解想要表述的內容。
OK。寫到最后，你會發現以上所講的內容，其實都是在闡述一個原則——“狀態可見性原則：系統應該在合理的時間內通過適當的反饋，始終讓用戶了解正在發生的事情。”相信大家現在已經知道什么是合理的時間，什么是恰當的反饋，以及如何讓用戶理解。通過這樣的一個原則，我們能夠更好地去考慮到交互上的細節呈現，例如一個可交互元素的不同狀態，點擊后的反饋等。其實原則整體與我們的很多知識相關聯，這也是知識體系的一部分。
最近學到的關于知識體系的認知，就是你在學習一個新的知識的同時，能夠把你的舊知識串聯起來，這樣你的整體知識才不會碎片化，而是體系化。通過這樣的方式，你在透徹認知一個原則的同時，能夠聯想到各種關聯場景，從而能夠把整體的設計及交互做得更完善。
最后想說：經典的原則之所以經典，你會發現雖然它是很早之前提出來的，但具有時代超前性。在面對如今產品應用場景和形態都發生巨大變化的當下，它仍然適用。
文章來源：站酷 作者：進擊的M
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
鳳凰新聞 APP 在 2020 年上半年完成了 Dark Mode 適配，本文主要從規范、設計和實現的角度對整個項目的落地過程進行復盤。
1. 背景色
iOS 平臺在深色模式下的背景色展示是動態的，分為基礎、升起（例如，彈出框或半浮層）。如下圖中 iOS 系統的兩個界面，相同樣式的組件在基礎層與升起層顯示的是不同的兩組顏色。
從 iOS14 的色彩規范中可以發現隨著界面高度的升起，系統定義的三級背景色也同步進行了一級上升。
iOS 通過這種背景色統一升級的處理方式來達到多任務窗口疊加的視覺隔離效果，但相對的開發成本也較高。
再來看看 Android 平臺深色模式下不同層級間背景色的顯示規律。
Android 把頁面分為從“0dp”到“24dp”的 10 個不同高度的顯示層級，通過在同一背景色上疊加不同透明度的白色來區分顯示層級。相對于 iOS 的整體背景色升級，Android 的背景色分級邏輯則更加的簡單易用。
2. 文字色
iOS 的規范中定義了 4 個等級的文字色，一級文字色為黑白純色，二到四級文字色為色相偏藍的半透明色，通過降低同一顏色的不透明度數值來進行分級。
Android 的文字色分為 3 個等級，與 iOS 的共同點是都用了半透明顏色，也都采用了降低不透明度的方式來進行分級。不同點是 Android 文字色使用的黑色與白色，沒有添加色相。
使用帶有透明度的字色能夠避免相同字色與背景色相融的問題。以 Android 為例，三級文字色與 10 種背景色疊加后都具有較高的識別度。
iOS 則通過一套半透明字色可以適應基礎與升起兩種不同背景色的使用場景。
3. WCAG
iOS 人機界面準則和 Material design 在深色模式的建議中，都提到了文字信息需滿足 WCAG 無障礙閱讀的 AA 標準。
WCAG 全稱為 Web 內容無障礙指南，其中包含分為可感知性、可操作性、可理解性、可兼容性四項原則的相關建議，這些建議可使網站內容更容易訪問。WCAG 從高到低分別是 AAA、AA、A 三個等級。其中 AA 要求文字與背景對比度不小于 4.5:1。
感興趣的朋友可以通過下面鏈接進行深入了解： https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
也可以通過下面的色彩對比計算器進行對比度檢驗（下圖為翻譯后展示）https://www.msfw.com/Services/ContrastRatioCalculator
這里我拿 iOS 在深色模式下的主次兩級字色與基礎、升起背景色做了一下對比度檢驗，得到的結果均滿足 WCAG 無障礙閱讀的 AA 標準。這里再給大家推薦一個可以同時對多個顏色進行對比度檢驗的網站 https://hexnaw.com
4. 彩色
iOS 人機界面準則的彩色方案中給出了 9 種顏色。如下圖所示的深淺配色方案以 RGB 與 HSB 兩種屬性進行對比。
https://baike.baidu.com/item/HSB
圖中左側以 RGB 屬性展示的各項參數差值較大，沒有明顯的規律性；右側以 HSB 屬性展示的各項參數差值較小，其中靛青與紫色 HS 數值相同，僅有 B 的數值有所差異，但整體來看依然沒有一個完整的規律。
相較 iOS 系統彩色方案的單獨訂制，Android 系統的配色方案則是一整套漸變梯度由“50-900”的色彩庫。
在 Android 的色彩工具中還可以自定義配色方案，在色板中選取一個主題色，對應梯度值為 500，通過一套算法來自動獲取其他梯度的輔助色。
為了在深色主題中提供更大的靈活性和可用性，Android 官方建議在深色主題中使用較淺的色調（200-50），而不使用默認的主題顏色（飽和色調范圍為 900-500）。
總結來看兩大平臺在深色模式的適配上都各有所長，在整體的視覺體驗上 iOS 更加鮮亮突出，Android 則更加柔和舒適。
iOS 更加注重細節體驗，在整體的色彩規范中的很多顏色都是單獨定義的，這也印證了 iOS 13 發布后蘋果官方向用戶所表達的“屏幕上的每個元素都經過精心設計”這一理念。而 Android 的色彩規范中無論從背景色、文字色還是彩色都遵循著一個梯度規律。
深色模式改版設計的前期工作除了調研兩大平臺的指導規范外，我們還對已上線深色模式的競品 app 進行了調研，調研的主要目標是背景色、文字色的色相與亮度展示效果。（以下截圖時間為 2020 年 2 月份）
騰訊新聞，主背景無色相，次級背景無色相，一級文字無色相亮度較高，次級文字無色相亮度極低。文字與背景對比度高，主要信息比較突出。
網易新聞，主背景色相偏藍，次級背景色相偏藍，一級文字無色相亮度較高，次級文字無色相亮度極低。文字與背景對比度高，主要信息比較突出。
鳳凰新聞，主背景無色相，次級背景無色相，一級文字無色相亮度偏低，次級文字無色相亮度極低。文字與背景對比度低，主要信息不夠突出。
以 3 個 APP 首頁來對比，可以明顯的感覺到鳳凰新聞首頁的信息展示不夠突出，在日間場景下體驗極差。
深色模式并不是簡單的把整個界面反色了那么簡單，還是要考慮到所有用戶的需求。鳳凰新聞作為資訊類 app 用戶在夜間使用的場景也有一定的占比。深色模式的改版不僅要在日間滿足使用需求，還要保證夜間的視覺刺激相對柔和。所以，在設計配色方案時就不能使用對比度極高的純黑色背景與純白色文字，只能在各種灰色中搭配出最優方案。
經過多稿背景色與文字色的搭配嘗試后，最終確定了下圖中所框選的配色方案。這個方案整體背景色與二三四級文字色在色相上略微偏藍，相較于無色相背景更具有活力，在視覺體驗上信息層級的區分也更加明確。
在各種方案嘗試設計的過程中對顏色的色相、飽和度、亮度的選取都是隨機的，目的是在短時間內進行快速試錯來確定配色方向。
本次改版的目標中還需要重新構建色彩規范，所以還需要對這稿配色的選用進行細致的打磨，在色彩對應的 HSB 參數中進行細微的調整使整套配色方案有律可循。
最終方案在四級背景的色相與飽和度方面進行了統一，對亮度的遞增梯度統一為 5。對比初選方案在視覺上變動也很微弱，卻使色彩分級規律一目了然。那么依照此方式也可以對文字色與彩色也進行了一輪打磨。
對于文字色在深色模式優化調整的基礎上也對淺色模式下的文字色進行了調整，使深淺模式下兩套字色更具有規律性。
在文字色的使用上鳳凰新聞沒有參照兩大平臺規則使用帶透明度的顏色，主要原因是從自身實際出發，考慮到端內的文字色使用場景部分是用于半透明背景色上的，如果文字色與背景色均帶有透明度，疊加后的體驗會很差。
鳳凰新聞的功能圖標以線性為主，通常搭配文字一起使用，所以對圖標顏色的定義與文字色是保持一致的。
在彩色的規范梳理中淺色模式下保持不變，僅對深色模式下顏色的亮度進行了調整，使深淺色模式下顏色的亮度對比有了統一的規則。
當然我們還需要對新的背景色與一二級文字色進行檢驗，看看是否滿足 WCAG 無障礙閱讀的 AA 標準，也就是常規尺寸文本對比度高于 4.5 : 1。
下圖就是鳳凰新聞客戶端的新版色彩規范，在規范中除了上述的主要的通用顏色外也有部分是單獨定義的顏色，這些顏色多用于獨立或特定的場景下。
在完成色彩規范的重構后，重新輸出界面樣稿與舊版進行對比。
通過設計稿對比老版夜間模式與新版深色模式，能夠直觀的感受到新版在信息瀏覽上體驗更好。
1. 色值替換
在著手進行色值替換時，iOS 開發小哥反饋給我鳳凰新聞全端跟色值有關的代碼有 2000+條，如下圖中是日夜間對應的這條代碼樣式。
如此多的色值代碼多數是相同色值在不同場景中重復使用，但彼此卻又完全無關聯，還有很多是日積月累的舊色值未被刪除。如逐條替換費時費力效率極低，后期的維護也極其麻煩。
為了提高適配效率以及便于后期維護，使得之后的色值替換可以達到全局響應的目的。由設計師與開發人員共同建立一個色值對照表。
此表中設計命名主要基于色彩規范，用于設計師團隊間的溝通協作。工程命名由開發人員提供，主要用于設計師與開發人員的在設計走查中進行高效的溝通協作。
以鳳凰新聞 iOS 端為例，優化后的色值代碼庫如下圖，由原來的 2000 多條色值代碼變成了 30 多條色值代碼「宏」。
在 iOS 開發工具 Xcode 的可視化文件夾中看起來就更加直觀了。
之后的色值使用開發人員只需要調用代碼庫中相應的「宏」即可，后續版本迭代中如有對通用色值的調整只需修改相應的「宏」代碼即可完成全端替換。
以這種方式快速完成首輪色值替換后很多頁面的色值會出現錯誤，需要 UI 設計師持續的進行走查反饋，再由開發人員根據反饋進行修改校正。
以 iOS 端為例在深色模式色值走查過程中設計師分批次以 PDF 格式反饋給開發人員的，開發人員在修改反饋問題的同時設計師也在進行下一批問題的整理，這樣同步進行的效率會更高。
2. 切圖替換
切圖替換場景相對比較多，同樣延用色值走查的協作方式，設計師分批修改開發同步進行替換。開發小哥提供切圖的方式就是直接扔過來一個全端切圖包，需要設計師修改切圖顏色后以原命名重新發回去。當打開切圖包后頓感一陣頭大，切圖總數有近千張之多。
雖然切圖很多但其中有一部分是已經無用的老切圖，在替換的過程中也對端內切圖重新進行了一輪梳理，刪除了很多無用和重復的切圖，同時也對鳳凰新聞 app 的體積進行了瘦身。
在切圖的替換過程中比較費時的是對同一切圖存在多張的情況進行整理，梳理出該切圖的所有使用場景然后反饋給開發人員進行統一調用，之后如再次修改即可完成全局替換。
除 icon 外還需要對默認圖與缺省圖進行替換。
3. 特殊適配
鳳凰新聞客戶端需要進行特殊適配的場景主要是圖集與小視頻界面，這兩個界面僅有一套色值與 icon，界面中的元素需要單獨處理，在切換深色模式后避免出現錯誤。
4. 界面展示
Dark Mode 適配是一項費時費力的巨大工程，也是探索和優化用戶體驗的全新挑戰。本文主要描述了鳳凰新聞 APP 在 Dark Mode 適配中的一整套心路歷程，從規范、設計以及實現的角度對整個項目進行復盤總結。
文章來源：優設 作者：鳳凰網設計中心
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
優惠券是我們電商中最常見的活躍用戶的一種方式，簡單的設計就能帶來巨大的客流量。雖然小小的一張優惠券并不會占用太多的版面，也不會浪費太多的色彩去裝飾，但想要知道優惠券的種類、特點，還需要我們認真剖析，仔細揣摩。
今天就和大家分享一下關于優惠券設計的那些事兒～
通常在活動、促銷、甩賣等場景中，我們最常用到的手段無疑是優惠券了，為什么被眾多設計師和商家所喜愛，也是源于它的這幾大優點。
1. 提升用戶活躍度：
人們總是對 “降價”、“打折” 這樣的字眼充滿了興趣，用戶也習慣于在了解到商品的價格及優惠力度后再決定購買，所以有優惠的商品才更具有吸引力。
2. 增加產品曝光量：
用戶一券在手，總是讓人忍不住翻看可以使用的商品，這無形中增加了平臺商品的曝光量。同時好的優惠券會在用戶的口口相傳中得到推廣，這對平臺、商家和產品來說，都是一個很好的展現自己口碑的機會。
3. 刺激用戶的潛在購買需求：
當用戶的購買行為背后沒有充分的購買動機，交易就會輕易的受到其他因素的影響而中斷。優惠券的出現滿足了用戶 “賺到” 的心理，用戶就愿意為潛在的購物需求買單。
4. 提升用戶的購買力：
用戶的購買力和收入水平成正比，和商品價格呈反比，當價格受到優惠時，用戶的購買力也可以得到相應改善。
體驗券
一般針對新品或測試產品向用戶免費發放的體驗券，意在吸引用戶的關注，傾聽用戶的意見，有時體驗券也會以邀請碼的形式出現。
△ 體驗券（圖片來源：京東智聯云官網）
代金券（又稱現金券）
一般使用門檻較低，不會有金額、數量等方面的要求，可以直接使用，若購買商品不夠券面金額，通常情況下是不退還差額的，如：新人大禮包、無門檻紅包和員工福利等。
滿減券
通常會有訂購數量、訂單總價、產品種類等方面的要求，滿足條件的訂單才可享受滿減，如：生活繳費商品滿 ￥100 減 ￥2 優惠券。
打折券
打折券是直接對商品進行打折，一般商品較貴，購買的用戶較少，或者用戶訂購量大會采用此類型優惠券，如：8.8 折優惠券等。
單品券為購買單一商品時使用的優惠券；
系列產品券為購買某種特定系列產品時所使用的優惠券，用戶只需要購買指定系列的產品就可以享用這張優惠券，如：購買無線寶 WiFi5 系列產品優惠券等；
品類券為購買某一類商品時使用的優惠券，如：購買清潔類、醫藥類、生鮮類等優惠券；
品牌券為購買某一品牌商品時使用的優惠券，如：購買華為、京東云等品牌產品所用的優惠券。
店鋪優惠券則是店鋪自行發放的，如：關注有禮、抽獎、新老顧客回饋等；
平臺優惠券是由平臺直接發放給用戶的優惠券，針對的目標群體范圍較廣，如：購物津貼、百億補貼等；
政企消費券成本由政府、企業和平臺共同承擔，意在提升某些地區消費者的消費能力和消費水平，如：北京消費券等。
說到拉新，我們總會遇到一些一點誠意都沒有的優惠券，例如：勞斯萊斯 “5 元代金券”。實際上這也是一種吸引用戶關注的方法，成為了人們口口相傳的調侃。
下面是 “京東智聯云官網活動” 拉新引流的新人禮包，我們可以看到 “新人千元大禮包” 字樣，新用戶在完成注冊任務之后就可以領取相應優惠券。
通常情況下，我們使用 “代金券” 進行拉新。代金券的價值相當于同等金額的現金，購物時直接使用，一般不會有過于苛刻的門檻，用戶使用起來方便，所以對新用戶的吸引力極大。在設計時我們需要注意以下幾點：
設計目標 – 吸引新用戶；刺激用戶的購買需求；使其真正成為我們的用戶。
任務模塊 – 除了優惠券本身外，設計時還應該注意各任務模塊的銜接與規劃，如：用戶登錄、注冊、用戶的信息填寫等。
門檻值設定 – 門檻值設置較小的優惠券才具有較強的吸引力。對于新用戶來說，用戶不需要購買太多商品，也不用局限于某個商品的使用。對于設計師而言，需要考慮門檻值和商品成本之間的關系。
面額設定 – 優惠券面額的設定可以很好的反應我們吸引消費者所付出的成本，控制獲客成本也是拉新過程中的重要環節，設計師應該清楚了解用戶喜好，剖析哪種互動方式可以在降低成本的同時擴大優惠券和商品的吸引力。
時間設定 – 這里可以強調優惠券使用時間的展示，方便用戶在有效期內即時使用，避免浪費。
當然，每一種優惠券都有 “促活” 的屬性，不管是優惠還是打折無不吸引著消費者的注意。例如：每年的 “京東 618” 和 “京東智聯云 11.11 大促（下圖）” 都是采用了各種優惠券來吸引用戶完成交易的。
促活一般是電商發展的關鍵時期，設計上會呈現出：短期內讓利、時間短促、宣傳、優惠券種類不限等特點。
小結：
其實優惠券的作用還有很多，它還可以解決用戶存留等問題。由于篇幅有限這里就不過多展開，期待小伙伴們一起思考和挖掘。
收益預估：設計前預先判斷本次活動的成交量，計算每單的收益大小以及總收益。
使用范圍：根據活動的目的，確定使用范圍（ “平臺”、“品類”、“品牌”、“店鋪” 等）。
使用門檻：每種優惠券都有相應的使用門檻，這是保證商家不會虧損的重要環節。
領取上限：設置領取上限，一方面根據商品庫存的多少，盡可能照顧到更多有需要的用戶；另一方面也可以表明優惠并不是那么輕易就會得到，增加優惠券的吸引力。
使用有效期：如果優惠券的使用期過長或沒有有效期，那就和降價沒有什么區別了。
通常活動結束后設計師要對本次設計進行復查，通過調研判斷優惠券對用戶的吸引力。一方面從定量的維度考量，我們要對用戶的瀏覽量、領取量、使用率、實際下單量和用戶參與程度進行觀測；另一方面從定性的維度分析用戶的實際感受，用戶在體驗完成后是否愿意再次光臨或推薦給親友，也是我們需要考查的方面。
文章來源：優設 作者：JellyDesign
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
