移動互聯網的迅速崛起，讓移動網頁，移動客戶端越來越重要，客戶端的頁面設計也是一門很大的學問?？萍佳杆侔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 大促（下圖）” 都是采用了各種優惠券來吸引用戶完成交易的。
促活一般是電商發展的關鍵時期，設計上會呈現出：短期內讓利、時間短促、宣傳、優惠券種類不限等特點。
小結：
其實優惠券的作用還有很多，它還可以解決用戶存留等問題。由于篇幅有限這里就不過多展開，期待小伙伴們一起思考和挖掘。
收益預估：設計前預先判斷本次活動的成交量，計算每單的收益大小以及總收益。
使用范圍：根據活動的目的，確定使用范圍（ “平臺”、“品類”、“品牌”、“店鋪” 等）。
使用門檻：每種優惠券都有相應的使用門檻，這是保證商家不會虧損的重要環節。
領取上限：設置領取上限，一方面根據商品庫存的多少，盡可能照顧到更多有需要的用戶；另一方面也可以表明優惠并不是那么輕易就會得到，增加優惠券的吸引力。
使用有效期：如果優惠券的使用期過長或沒有有效期，那就和降價沒有什么區別了。
通?；顒咏Y束后設計師要對本次設計進行復查，通過調研判斷優惠券對用戶的吸引力。一方面從定量的維度考量，我們要對用戶的瀏覽量、領取量、使用率、實際下單量和用戶參與程度進行觀測；另一方面從定性的維度分析用戶的實際感受，用戶在體驗完成后是否愿意再次光臨或推薦給親友，也是我們需要考查的方面。
文章來源：優設 作者：JellyDesign
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
01 本期講什么？
工作中我們經常會接到一些信息卡片的設計需求，在早期很長一段時間里都困擾著我。和大多數剛入門的小白一樣，當接觸到這類需求的時候，下意識就是打開自己的的Eagle，找合適的參考，去借鑒排版布局。但是其實最后只知道參考這樣做好看，對于作者的設計思路并不清楚。后面我嘗試去總結其中的規律，也得出了自己的一些設計思路。
讓我們先看下各類App中，一些比較不錯的信息卡片長什么樣：
圖片
圖標
文字
標簽
按鈕
布局
圖片理解很簡單，就是該卡片想表達的信息主體，可以是商品、風景、插畫等，PGC內容圖片通常由運營把控，UGC內容為用戶自行上傳。雖然上線后實際上傳的圖片，對于設計來說沒有太多關系，但在設計稿中還是需要嚴格控制圖片質量。（一定程度上也能提高過稿率）
圖片挑選需要注意如下：
高清無碼
主體突出且簡潔
配圖與文字信息相關聯
多圖片情況下，視線保持同一水平線或同一角度
圖標的出現有以下幾類：品牌特定logo、特殊字段圖形化（如性別、定位、點贊、VIP、關閉等等，將字段圖形化后可以減少該組件內的文本信息，方便設計排版的同時提升整體閱讀體驗）、氛圍點綴（主要在于豐富卡片，提升設計感來吸引用戶注意）
圖標設計需要注意如下：
清晰度：品牌圖標避免過小，導致難以分辨。
識別度：字段圖形化后一定需要確保擁有足夠的識別度，盡量在大眾認知范圍內。比如“+”可以代表添加和關注、“x”代表關閉，“大拇指”和“愛心”代表點贊、“皇冠”代表VIP等等。
風格一致：氛圍點綴圖標在配色上，需要保證與產品調性一致，或在色彩情緒上，與該模塊傳遞的感受一致。還有一些細節，比如線性圖標描邊粗細，圓頭還是方頭端點，這類盡量保持一致（當然也可根據情況演變新的風格，但注意風格種類不宜過多）
文字信息處理需要注意如下：
對比：需明確頁面信息權重，突出重點，便于有效傳遞信息。移動端常見對比方式：特殊字體對比、字號差對比、色彩對比、修飾元素（點線面）點綴對比。重點需要注意，避免在一個卡片中，采用過多不同大小字號和顏色去表現信息層級，盡量使層級精簡與規范。
對齊：保證卡片內信息之間存在某種視覺聯系，信息結構清晰。對齊方式分類：左對齊（符合左到右的閱讀習慣，閱讀體驗最佳）、右對齊（閱讀類文本比較少見，一般是為了將分好組的信息填充卡片四角）、居中對齊（居中傳遞嚴肅、正式感，在移動端中較少見，適合信息較少的情況下使用）
親密性：將信息通過留白、分割線、色塊等方式來成組劃分，避免信息散亂。
標簽處理需要注意如下：
視覺層級：一個卡片內可能出現不同類型的標簽，比如同時有活動通知、優惠信息、產品關鍵詞，這個時候就需要了解各類信息重要層級，正確選擇標簽形式（異型、色塊、描邊），幫助用戶快速抓住產品重點。
極限場景：標簽內字段不宜過長，需要考慮最大寬度，進行合理布局。（牽扯到屏效比）
呼吸感：合理定義標簽內部文字與底板的上下左右間距，避免擁擠。
設計感：標簽多數是帶有活動屬性，在設計手法上可以嘗試破型設計，還可以嘗試加入一些小圖標、紋理，一方面營造活動氛圍，提升產品品質感。一方面圖標具有一定語義，可輔助用戶識別。（適合單個特殊標簽添加，而不是一類標簽，因為多個一樣的標簽配上圖標同時展示太亂）
對比度：在色塊標簽中需要重點注意，通常色塊標簽又分以下3類：有彩色底板+白色文字、帶不透明度的有色彩底板+有彩色文字、消色底板+消色文字，在挑選顏色時需注意文字與底板對比足夠清晰，減少閱讀障礙。
按鈕和標簽在處理上很相似，可參照標簽。
信息布局需要注意如下：
拓展性：卡片中字段的長短對布局的影響較大，字段較長且多的情況下需要的占用的空間更多，所以常見是上下布局。
屏效比：上述拓展性與屏效比的關聯緊密，在卡片中，為了保證一行文字最大顯示，通常文字都是單獨一行，避免左右存在元素占用文字橫向空間。但單獨一行就意味著增加了卡片高度，雖然單個卡片內文字顯示多了，但整個一屏中展示內容變少。為了便于理解上面這段話，這里我們可以看到淘寶這個案例，淘寶的推薦卡片中信息很多，在遇到文案很長的情況下，為了平衡上面講的這個問題，使用到了如下較少見的布局方式。
合理性：在列表式左右布局中，是選擇左文右圖，還是左圖右文。這需要看產品類型，在新聞資訊類產品中常見是左文右圖，而在美食、電商類產品中是左圖右文。再有在信息布局上也應符合人眼左到右，上到下的閱讀習慣。
明確產品類型
明確應用場景
了解目標用戶
劃分信息權重
同類信息歸組
增強信息對比
設計細節表現
確定最終布局
1【 明確產品類型 】
產品類型不同主要對布局產生影響。
以文字為主的產品，比如前面講到的新聞資訊類，通常采用左文右圖的布局。
原因：新聞資訊類，吸引用戶產生點擊的并不是因為圖片，而是具體的標題，通過標題用戶才能了解更多關于該卡片的信息。而美食、電商類產品則相反，這類產品圖片比文字更吸引人。
2【 明確應用場景 】
卡片式：在卡片式中圖片是設計的重中之重。這是因為人是視覺動物，在卡片式設計中使用高質量的圖片能瞬間抓住用戶的眼球?？ㄆ皆O計實現了圖文的完美結合，能給用戶呈現良好的視覺效果。
應用場景：
圖片為主，需要利用圖片給用戶帶來良好的視覺沖擊，提升瀏覽過程中的趣味性，從而吸引用戶長時間瀏覽。
適合隨機推薦的內容，不適合進行查找。
豐富內容展示，適合元素較多情況，可以讓各種形式的元素保持井然有序。
列表式：信息集合一般是簡單的圖文組合（小圖+標題）或純文本信息。由于列表垂直排列每一行內容，相對卡片式，在同樣大的屏幕中可以展示更多內容，可供用戶閱讀信息更多，新聞類和數據類應用更青睞于這種設計。
信息直白，用戶無需點擊查看，即能盡可能了解內容信息，適合快速查找。
文本重要程度高于圖片，需要靠標題吸引用戶點擊。
小屏幕應用場景。
目標受眾的屬性，對信息權重的劃分影響很大，比如對價格敏感的用戶，優惠信息的視覺層級就需要抬高。為了便于理解下面的案例，這里我定義的就是對價格敏感性用戶。
4【 劃分信息層級 】
定義了目標用戶后，將卡片內所有元素羅列出來，并借助四象限分析的方法，對各個元素的權重進行劃分。
5【 同類信息分組 】
將同類信息分組，便于后面確定元素之間的親密性關系。
6【 增強信息對比 】
前面我們借助四象限，將信息重要程度進行了劃分。接下來對元素之間親密性和對比進行處理，設計用戶瀏覽視線，在該過程中對案例中的元素進行如下處理：
圖片：這里圖片及比例保持不變
圖標：將原版會員圖標+字段的方式更改為圖標，原因有兩個：1、會員圖標+字段的方式占用了較多的橫向空間，導致標題字段信息展示減少，同時還導致用戶在閱讀完標題后，閱讀下一行內容時視覺錯行嚴重（會員圖標+字段過長導致）。2、由于會員圖標代表會員內容，這是絕大對數產品對用戶有過的教育，所以這里重設了會員圖標并單獨展示。
字體：對標題字體進行加粗，（16pt，Medium），價格字體加大加粗（24pt，Medium），劃線價加粗（12pt，Medium），按鈕文字&活動標簽文字（14pt，Medium）精簡其他輔助信息層級（12pt，Regular）
標簽：優惠信息標簽由0.5pt改為1pt，提升視覺層級?；顒訕撕灋樯珘K降低不透明度+有彩色文字。
按鈕：由于標簽為描邊樣式，為了拉開差異，突出按鈕，所以將按鈕改為實心色塊。
做完上面這些后，可能大部分人覺得到這就可以了，但其實我們還可以再增加設計細節，這也是你與其他設計師拉開差距的地方。
7【 設計細節表現 】
由于案例不同，增加細節的方式不同，所以需要具體案例具體分析。在本次案例中，我通過新增圖標設計以達到豐富卡片細節的作用。在活動標簽中新增小喇叭圖標，來增強活動氛圍、增強信息視覺上的互動性、增強代入感。在按鈕中新增時鐘圖標，配合預約文案，讓用戶預知操作后可能的結果，并且提升按鈕視覺層級、提升點擊欲望。
8【 確定最終布局 】
在布局中主要考慮兩個點：
1、合理性&拓展性
由于該卡片的應用場景為推薦列表，所以這里保持原有的上下布局，遵從人眼閱讀習慣。
2、屏效比
借助這個方式，使圖文內容過渡順暢，閱讀體驗更佳。
盡可能減少了標簽對產品圖的遮擋。
壓縮卡片高度，最終達到提升屏效的目的。
Q1: 3張設計稿中活動標簽為什么進行修改？
答：稿1到稿2，活動標簽樣式修改，位置調整，對應不同的用戶，對于價格敏感性用戶，顯然稿2更能刺激他們點擊。稿2到稿3，對標簽樣式再次進行加強。稿3到稿4，考慮該應用場景是在推薦列表中，為了避免出現多個同類型活動的卡片，導致過亂，所以修改了設計樣式。
Q2:在稿3到稿4中優惠標簽這一排內容，和預約按鈕這一排內容，上下調整的原因是什么？
答：1、將文字區域看做一塊完整的矩形區域，稿3整體看起來更完整，而稿2像是右下缺了一個角。2、在信息閱讀順序設計上，稿3的處理是優先讓用戶看到優惠相關信息，更加迎合價格敏感性用戶的需求。
Q3:你認為最終稿還有優化空間嗎？
答：這個案例，是我截圖與我司相關App的。我認為如果可以，還需要再了解目標用戶畫像，了解用戶真正在意的信息是那些，這些都會對最終方案產生影響，也只有知道這些才能得出最合適的哪個方案。這里我定義的是對價格敏感的用戶，基于這類用戶來說，我認為最終方案是合適的。
文章來源：站酷 作者：幺零三
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近，微信的升級迭代又一次吸引了用戶的目光。蘋果用戶“扔炸彈、放煙花”玩得不亦樂乎，安卓用戶只能默默在一旁等更新。但是也有用戶吐槽，每次更新都上線一些不痛不癢的功能，真正的需求并沒有被滿足。微信走過了十年，伴隨它的爭議只增不減。
互聯網沖浪三件套：蘋果發布會、特斯拉降價、微信版本更新。
微信8.0上線，滿屏的炸彈表情炸了，微信聊天也炸了，還掛上了微博熱搜。身邊的朋友開啟了微信大檢查，在新版微信里探險，就為了找到更新的幾個功能，督促張小龍微信公開課到底交出了多少作業。
歷代微信大版本更新，從來不缺關注。
跳一跳上線時熱情燒了一個月，幾個表情包上線還有人專門發個朋友圈。微信7.0當年的開屏動畫“因你看見，所以存在”，8個字的解讀被抬到哲學高度、人文主義，還有張小龍也沒想到的主義，這次微信8.0開屏動畫一樣不缺解讀。對于視頻號、下拉菜單等功能介紹，也有媒體一本老不正經地整整一篇上手說明書。
放眼國內，大概從來沒有一個APP能夠享受這樣的國民級待遇，網友也越來越懂微信版本更新的節奏：隱秘之中帶著復雜，復雜之中帶著試探。
誰叫它是超10億用戶的國民級APP。
張小龍說過，每天有1億人在教他做微信。
這次微信版本更新同樣不是凱旋。在很多網友在炸彈、禮花中樂此不疲，提前感受過年，另一邊則是質疑和反感。有網友就明顯不為“動態表情”、“狀態”等新功能買單。以“炸彈”表情為例，在捕捉網友情感表達更強烈這點上，微信反射弧太長了，網友們的表情包已經領先好幾年。
即使不說與蘋果的iMessage的表情似曾相識，單單就高度撞臉QQ表情就讓人疑惑：QQ什么時候和微信合并了？在這些網友心中，表情是微信簡潔輕快風格的外皮，表情風格大改意味著微信淪陷。更多用戶則吐槽，微信為什么專門更新這些不痛不癢的更新，超200M文件傳輸限制、朋友圈評論隱私等功能就視而不見？
盡管微信十年之際，微信官方和一些媒體都依然定調：克制，但在網友心中，微信則從“安靜的美男子”變得“油膩”。
不可否認，微信越來越臃腫了，像個300斤的胖子。朋友圈、小程序、視頻號……這些功能先后上線，微信用戶的好感逐漸下線。早在2014年微信揮起分享限制大棒、功能臃腫開始冒頭時，就有用戶嘗試逃離微信，選擇Line等社交工具，然而由于社交關系鏈難以同步遷移，最終不了了之。
“天下苦微信久矣”，但網友們更苦于沒有找到合適的替代品，只能一直將就著用著，不少網友拒絕更新，甚至吹起了懷念老版本微信的風潮，探討回到微信舊版本已經成了一個大類。
對此，微信官方也不是不知道，2015年、2019年就先后強制網友更新版本，否則無法正常使用，其中2019年安卓手機上強制更新的還是微信7.0這樣的大版本，手法上還是從前3Q大戰里的那個少年。
除了自家兄弟QQ外，微信已經成為國內社交軟件的唯一，為何還要頂著被罵，不斷添加功能以及被網友視為無關緊要的更新？
其首要目的在于，防御其他社交平臺的進攻，穩住流量大本營。社交是騰訊的命，而微信的王座并不是鐵鑄的。
一方面，00后橫空出世，獨特的社交習慣已經讓馬化騰陷入深深的擔憂。為了吸引這批新用戶，近年來市場上已經誕生一批社交產品，2019年初三英戰呂布下，更出現了微信被“圍剿”的聲音。應對挑戰，騰訊在2018年-2020年馬不停蹄地上線了10多款社交APP，視頻社交、半熟人社交、興趣社交等等，但在市場少有水花。得不到的永遠在騷動，自然這種焦慮就很大程度轉化成對微信改造。
馬化騰的一段講話就例證，道出了焦慮的同時也說明微信不斷更新、日益臃腫的原因：
“越來越看不懂年輕人的喜好，這是自己最大的擔憂。而且用戶的需求和喜好瞬息萬變，95后、00后人群的需求是什么？我們每天都在研究。包括微信，沒有人保證一個東西是永久不變的，因為人性就是要不斷更新，可能你什么錯都沒有，最后就是錯在自己太老了?！?
另一方面，微信還面臨勁敵抖音的流量爭奪戰。頭條系已經被視為騰訊系最大勁敵，在最核心的用戶時長爭奪上，騰訊系在萎縮，而頭條系不斷增長，其中抖音作為拳頭產品·“殺時間”利器，貢獻最大。據抖音官方數據顯示，目前其國內月活已破5億，增長迅猛。
總共24個小時的用戶時長，使用抖音的時長增長，等于使用騰訊產品減少，更何況抖音上線多閃聊天已經繞開騰訊分享限制大棒，殺入微信的社交腹地。兵臨城下，看著扶不起的微視們，騰訊只能繼續借道微信版本更新，加碼微信視頻號。
物理學有一個觀點：極其巨大的物體會坍塌成黑洞。當下越來越臃腫的微信也正向著巨大超級APP前進，坍塌與否，也須警惕。
2009年，谷歌退出國內大陸市場，至此國內市場僅有搜狗搜索、360搜索，幾乎沒有對手的百度一騎絕塵，市值一路高漲，到2011年超越騰訊成為BAT一哥。但其后是進入長期的業務停滯，甚至錯過移動互聯網浪潮，被解讀為戰略迷失。
目前，微信官宣用戶達12.5億人，國內用戶約10億，占據八成，國內網民滲透率接近100%?？梢哉f，微信獨占國內市場，Facebook、Instagram等全球社交巨頭未進入大陸市場，給了微信得天獨厚的優勢。
然而，也正是這種優勢，或讓微信面臨戰略迷失。
微信改變了國內用戶使用習慣，也被國內用戶使用習慣改變，其結果便是在海外市場水土不服，甚至在文化接近的日韓、東南亞地區都難以取代Line。
微信問世之初，視覺元素、交互設計、表情包功能常常被拿來和Line對比。迭代至今，Line仍然保持的通訊屬性，主打“萌新”和“溝通”功能，而微信在各類功能的疊加后，定位越來越模糊，在拓展海外市場難以給人留下深刻印象，在國內的版本更新也伴隨著不理解和吐槽。
微信的功能更新越來越四平八穩，也越來越沒有記憶點。而在這個時代，對一款產品而言，沒有記憶點是致命的。
文章來源：人人都是產品經理 作者：霧科技
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
