今日頭條作為資訊閱讀類產品，Feed流場景是資訊類產品的核心場景之一，關于Feed流的改版嘗試一直在進行，針對本次優化，多次在線上進行驗證后，得到一個滿意的結果，也將我們關于「頭條首頁改版」運用到的設計方法進行分享。
觀點-實驗-規則
項目前期提出設計論點，通過方案和實驗去驗證可行性，最后結合案例形成符合當前場景的設計規則，這也是本次設計探索所運用到的論證方法。
1. 什么是閱讀需求？
一組信息通過不同的字號反差組合來滿足不同場景下的文字閱讀需求，這稱之為閱讀需求，閱讀需求一般可以歸納為以下3種類型：快速定位型、瀏覽型、閱讀型。
△ 三種閱讀需求
2. 今日頭條首頁的閱讀需求是什么？
今日頭條Feed的閱讀需求，我們定義為快速定位型和瀏覽型之間。原因是在閱讀Feed時，用戶有獲取標題關鍵信息的強定位屬性，同時也有瀏覽feed信息的瀏覽訴求；從Feed閱讀習慣的分析，我們提到兩個關鍵詞，信息的定位和瀏覽，后面的探索也會圍繞這兩個關鍵詞展開。
△ 首頁的閱讀需求
1. 信噪比與界面
「信噪比」（Signal-to-Noise Ratio）原本是用在聲音和圖像領域的概念，指在聲音傳播過程中信號和噪音的比例。這個理論也可以運用在頁面中，如果要將訊息完整地傳遞給使用者，可以選擇強化原有的訊息，或是降低多余的雜訊，來提高「信噪比」（Signal-to-Noise Ratio）以增加訊息成功被判讀的機率，也讓使用者能更輕松地閱讀資訊。
一組信息是否更好的兼容定位與瀏覽屬性，在于信息本身是否足夠強調與清晰；「信噪比」理論是幫助我們理解「信息清晰度」的存在。
簡而言之，「信噪比」理論通指有效信息和次級信息的比例，控制平衡這個比例，可以有利于信息完整的傳遞給用戶，也能更輕松的獲取資訊。
通過強化頁面內的有效資訊，降低多余雜訊，從而提升頁面內的「信噪比」，以達到提高有效資訊傳遞，幫助用戶能更輕松獲取資訊的目的。「信噪比」理論是非常通用、使用廣泛的指導理論，對信息流頁面設計有明確的指導作用；
△ 提升「信噪比」的目的
2. 視覺搜尋實驗
△ 視覺搜尋實驗
在視覺搜尋的實驗里，讓受試者從許多個「X」里面挑出1個「O」，然后再讓他們從「┸」里面挑出一個「┼」。我們把所有的視覺元素稱作刺激總量，大部分的元素（「X」和「┸」）稱為干擾物，唯一不一樣的那個元素（上面例子的「O」和「┼」）稱為目標物。而實驗的目的，就是要檢測在干擾物增加和同等情況下，受試者會不會需要花費更多時間才能找到目標物。
當我們的視覺系統在辨識影像時，有一些影像的屬性很容易被大腦處理，我們的視覺系統可以很快過濾辨識這些基礎特征，讓我們的大腦分辨這些影像屬性更容易一些。因此我們涉及到大量信息的設計時，如果能夠善用這些基本特征，便可以提高用戶的閱讀效率。
那么，什么樣的特征能夠幫助訊息更快，更有效的被用戶判讀和接收呢？在視覺搜尋實驗中，有一些基礎特征很容易被我們的視覺系統所辨識出來，其中主要有4種不需注意力介入便能輕易分辨的基本特征：
△ 4種基礎特征
強化信息的基本特征是增強信息被判讀最有效的方式，我們可以根據場景和用戶訴求，選取最合理的方式來對信息進行處理；這4個基礎特征，通過反差來增強核心信息的突出程度，輔助信息更好的傳遞給用戶。
通過「視覺搜尋實驗」，我們可以得到兩點結論：
這兩點結論是對于」信噪比「理論的補充，處理好信息的」信噪比「關系，強化有效資訊，弱化次要雜訊，幫助用戶有效接收資訊，更輕松獲取資訊。
3. 首頁目標的變化
資訊的生命周期中，包括了產生、傳遞、接收這三個重要的階段，而每個階段都有可能造成信息的損耗；
信息產生是源頭，這里的損耗在所難免，我們所要做的，是盡可能控制」傳遞「和」接受「階段的損耗；早期的頭條首頁承載大量信息，目的是為了讓用戶可以接受到更多信息，這時「效率」會是第一位。
但在承載大量信息的同時，頁面信息過多，容易造成信息對比弱、布局密集，從而導致信息 」傳遞「 階段的損耗，同時用戶在」接受「信息時，看到擁擠的信息布局，接受信息的」效率「被降低，被迫造成損耗。
為了更好的提升首頁閱讀效率，我們重新審視當前的設計目標，通過對不同組合的空間調整，平衡展示效率以及閱讀識別性，控制「傳遞」和「接受」中不必要的信息損耗；將設計目標從過去的「效率最大化」，調整為「有效，輕松的閱讀」
對于這個目標，我們結合之前抽離的」信噪比「理論，進行更為細致的拆解，確保能落實到后續的設計方案中。
△ 設計目標轉變
4. 回顧信噪比
「信噪比」理論可以平衡頁面內有效信息和次級信息，在這樣理論的引導下，提供的方案其實更具備說服力。
和圖片噪點一樣，噪點越低，清晰度越高，映射到頁面也是如此，頁面內的雜訊過多，影響到有效訊息的傳遞，我們需要做的，就是給頁面進行「降噪」處理。
1. 文字的反差比
根據前期的」信噪比「論點和」視覺搜尋實驗「，我們得出兩個核心觀點：
兩個論點其實都提到了信息對比強弱對于用戶判讀的影響，由此可見，不同信息的反差關系,是增強信息傳遞，縮短用戶接受信息耗費時間的關鍵指標。
如果說「信噪比」是信息流優化的理論依據，那么「反差比」則是驗證頁面信息反差關系的手段。
調整頁面內文字反差，一般通過三種方式來提升或調整
△ 提升文字反差方式
讓我們來看首頁中Feed流的標題字號，我們通過 iOS 和 Android 的通用文字規范可以發現，最小閱讀文字為12號字（10號字用在標簽，9號字用在數字提醒，都不適合作為閱讀文字），Material design中正文內容默認字號為16px，iOS規范中則定義了7個正文字階（14、15、16、17、19、21、23)，綜合多方因素，我們選取了16號字、17號字為主要驗證目標.最后形成16/12 17/12這兩組組合來驗證線上Feed信息流。
「信噪比」和「視覺搜索」理論中，多次提到增強元素反差比，用戶能越快獲取資訊；所以我們也嘗試了加粗字體和加大文字的實驗嘗試，用于驗證文字反差比的上限。
△ iOS/Android 通用文字
2. 反差比公式
為了更好的驗證和觀察Feed流中的不同文字字號的反差關系范圍，我們提出了一個坐標公式用于驗證，可以直觀的觀察字號，字色，字重三組信息間的關系。
Y軸代表字號，X軸是不同灰階文字顏色，我們可以將Feed信息組合中的字號放入表格中，通過科學方法檢驗反差范圍。
關于這套驗證公式，是我們為了驗證文字反差比所提出的檢驗方法，通過不同實驗組中字號的反差范圍來驗證哪組更適合Feed場景，最后輸出成符合當前場景的通用規則。
△ 文字/灰階反差比推導圖
最后，我們選擇4組方案進行首頁反差比驗證，同時將比字號放入坐標軸中,可以看出以下文字的反差范圍
△ 在反差比范圍內，選取的四種字體組合
上面4個表格分別對應4組反差比驗證的字號組合，不同字號組合的反差比范圍，我們都可視化出來，以便于更好驗證哪個信噪比范圍更合理；每組方案的反差比范圍都不一樣，我們會通過線上實驗，選取最適合當前場景的反差比范圍，并形成適用于Feed的反差比規則。
這里也是驗證首頁Feed反差比的上限和下限范圍，有時主體并不是反差越強越好，反差也是有閾值范圍，超過這個閾值范圍，會導致信息展示比例不協調，用戶側也會起到反作用。
目前對于坐標公式驗證文字反差比的理論還處于實驗理論階段，我們認為對于字號和灰階之間，有合理的規則存在，單獨對于規則的抽離和梳理，還需要大量樣本去實驗論證，后續有新的結論產出和模型迭代。
目前線上首頁存在以下問題：
為了解決這些問題，我們對于首頁的視覺語言進行了優化，通過」信噪比「理論，我們了解到平衡有效信息和雜訊的比例，是保持信息干凈清晰，更好觸達用戶的保證；因此我們重新梳理不同題材的結構，確保核心信息在首頁展示的唯一性，去掉了對于用戶閱讀過程中可能造成阻礙的信息。
△ 首頁前后對比
這樣，首頁上核心信息的展示層級得到統一，保證了信息干凈清晰，能夠更好觸達用戶。
在「信噪比」理論和「反差比」實驗的基礎上，輸出了用于線上測試的設計方案，為了驗證首頁中不同變量的影響，我們把頭部，字號，字重，間距這些可能影響首頁的因素都拆分驗證對于首頁影響；同時，根據前面」反差比「的驗證理論，我們把」字號加大「和」文字加粗「也放進實驗中進行驗證，為后續實驗積累數據樣本。
△ 線上驗證首頁方案
綜合前面的實驗結果，最終我們選擇了兩組這兩組方案，目前線上在進行最后實驗。在實驗中，我們也提取到幾點關鍵指標：
用戶對于灰頭樣式并未特別排斥，這個對于過去頭條頂部必須是紅色的認知有些挑戰；其實當下設計趨勢是在減少用戶閱讀的信息干擾，灰頭更符合這一趨勢，同時使用灰頭也會提升頭條整體計品質感，對于后續設計拓展有很大幫助。
加粗字體上，男性用戶比較偏好加粗字體，但是女性用戶和年輕用戶較為反感。
增大Feed字號，信息展示確實更突出，但是影響到整個首頁的感官，而且違背了我們的設計目標，同時也不利于后續設計拓展。部分用戶手機的展示情況和特殊字體設置都會受到大字體影響，需慎重考慮。
前面有談及18號字的問題，字號增大確實能增強視覺感官，但要考慮到頭條用戶比較喜歡運用特殊字體，特殊字體對比通用字體更加個性化，但是字體大小，展示高度并不可控，當字號比較大的情況下，再加上手寫字體，效果不可控。
△ 線上手寫字體情況
線上實驗后，我們也進行了一次線下用戶調研，用研結果中用戶對新版滿意度高于舊版，其中有一個點多次被用戶提及到，就是調整后的全圓角搜索框。相比過去的方形搜索框，調整后的全圓角搜索框是能給用戶留下深刻印象的視覺記憶。
回顧整個首頁改版過程，我們總結了項目中的流程和思考，希望能幫助大家：
1. 定義當前使用場景的閱讀需求：
閱讀Feed的時候，用戶有獲取關鍵信息的強定位屬性，同時也兼顧feed信息的瀏覽屬性。
2. 通過「信噪比」理論，明確設計方向：
強化頁面內的有效資訊，降低多余雜訊，提升頁面內的」信噪比「，達到用戶有效接受資訊，輕松獲取資訊的目的。
3. 運用「反差比」手段，提升信息反差比，增強信息傳遞：
文字可以通過字號，字色，字重調整反差關系，并且通過「文字反差驗證表」進行反差比范圍驗證，推導出更適合首頁的反差范圍，形成首頁反差比規則。
4. 線上拆分驗證，量化首頁影響指標：
線上驗證方案，把字號、字重、間距疏密，頭部顏色多個維度拆分驗證，觀察不同個指標對首頁影響。
5. 抽離項目中有價值的信息，后續形成統一規則：
間距樣式和信息層級統一的feed模塊；從矩形到全圓角的搜索框這些知識點都可以沉淀成信息流場景的認知規則，并且給予其它業務和項目理論和實踐支持，將理論和線上驗證相結合，形成真正有價值的設計方法。
「信噪比」理論可以廣泛運用到頁面信息設計中，幫助大家合理的梳理核心信息與次要信息關系，并且通過」反差比「手段，增強有效信息或弱化次要信息；保障頁面內層級的合理布局，幫助用戶更有效的判讀信息；這次改版也是對目前認知基礎上進行的一次拆解與構建，過去我們所認知的基礎目前可能處于變化階段，這也為我們后續方向探索提供更多可能性。
希望這些能為后續設計起到幫助，給予大家思路與靈感，更好的服務用戶。
文章來源：優設 作者：今日頭條UED
我最近一直在想自己要寫什么，不如這次就來說說我最近在項目中遇到的問題吧~
再給大家看看我的解決方案，如果大家有更好的方案歡迎留言，我們一起探討啊~
最近一兩年我所涉及的項目都是有關于將網頁的功能系統改成APP，而針對的用戶就是公司的業務經理，是金融公司的業務經理們，我們的甲方爸爸！
當然這就意味著網頁的產品，會有大量的數據，而且由于網頁產品的信息處理還沒有太與時俱進，所以大量的數據都是文字和數字的組合，因此要將這些數據改成APP時，就覺得好難啊。
其實表單在APP上并不好放，最好的解決方法就是設計成圖表，而現在市面上圖標樣式不管是網頁的還是APP一搜一大把，Ant Design有專門的數據網站，如下圖所示：
什么樣的都能找到，那么我為什么會覺得好難呢？因為數據超多der~考慮的內容又有很多，難免憂愁。
一、為什么要設計圖表？
因為數據表單在手機上并不好展示，同時從用戶體驗的角度上來考慮，數據本身都是數據組成，可讀性就不太好，因此如果把這些“數字”從商業目的、用戶動機進行有機組合、關聯或定義就使得數據變得有意義（價值），圖表只是最終的表現形式。
二、圖表由哪些元素構成？
一張標準樣式的圖表基本上是如下圖所標示的幾種元素組成，如下圖所示：
當然這只是最基礎的一種圖標形式，對于別的形式就不多介紹了，大家都有基礎知識，本文將嘗試從圖表設計動機的角度和大家一起探討如何更好的進行圖表設計。
三、圖表設計？
1、明確數據指標
首先，我們得先搞明白這些數據是怎么來的、干嘛的，盡可能要求他們給到你的是盡可能精準的數據，否則會導致接下來的工作前功盡棄。就舉我前幾天的例子來說吧，產品給了我這樣一張圖，如下圖所示：
我沒有仔細的去問一些具體的信息，比如數據最多的時候會是什么樣、業務想在這個表里看到什么信息、想要解決的問題什么？這些我都沒有問！
上來就是一頓設計操作，把表單設計成了這樣，如下圖所示：
結果在走查的時候，業務很明確的指出數據信息不夠多，他們想要在頁面上將所有的數據信息都能看到，而數據最多的情況，數據表單是長這樣的，如下圖所示：
就是因為一開始在拿到表單的時候沒有仔細去分析，才會導致這種情況的發生，因此要如何改進呢？
2、明確設計目的
其實圖表設計跟產品設計的思路有點類似，一開始要先明確的就是設計目標，但這個很容易被設計師所忽略，因此前期在缺少設計目標支撐的情況下，設計師就會像一個沒有指揮的小樂手，閉著眼睛亂彈，沒有方向感。
就像我之前設計方案被推翻，就是因為思考不明確導致的，定義設計目標的過程需要站在業務的角度和數據的角度進行綜合分析從而進行構建，一方面需要考慮業務如何更簡單的分析、理解數據從而提高決策效率；一方面又需要考慮數據本身如何更加精準、一目了然的傳達給用戶。
3、規劃設計方案
我在寫這篇文章的時候，看了很多相關的圖表文章，很多都是分析哪些不同類型的圖表，配色上要怎么處理，或者哪些圖標是用在什么地方的，對我都沒有太大幫助，因為圖表設計并不是普通的只是要好看的圖表而已。
4、解決問題
重新設計之前，我去找業務很詳細的了解了他們對于數據的需求，想要一目了然的看到所有的數據對比信息，數據在表單中要全部展示出來，數據后臺每天都會刷新，針對的場景是來自在去拜訪客戶路途中查看客戶目前的信息，我就將圖表改成了下圖所示：
由于面對的數據信息比較多，條紋圖比較符合多數據的信息，當然這是數據最多的時候出現的情況，每家公司出現的數據是根據業務所提交的信息展現的。
在功能確定了之后，就是我們的細節問題，不是說我們在750*1624的畫布上設計好了圖表就行了，我們還要考慮到適配的問題，如下圖所示：
屏幕較窄的時候，將X軸的標簽文字打斜，保證數據正常閱讀的同時也不影響美觀度。還有一種解決方案就是有連續的數字時，可以有簡寫。
四、如何選深色底和淺色底
我們可以先來一個對比圖，同樣的數據在深色背景和淺色背景下的圖表可讀性做對比，如下圖所示：
很顯然淺色背景下的圖表閱讀效率更高，那么面對復雜數據的時候，情況是否一致呢？如下圖所示：
很顯然，深色更適合展示信息比較多的，突出重點信息的頁面，因此我們在找數據頁面參考，在選擇深色和淺色背景里猶豫的，可以參考一下。
五、劃重點
這里討論的只是我在公司項目中的其中一個圖表設計，不能說做的很多，只是分享一下自己在試錯的過程中的成長，從web端改到APP，都會說減少一些功能，讓產品更好用，但是總有不想砍功能的需求方，如何滿足這些需求，是需要我們一直都在思考的事情。
轉自：ui中國-潘團子
今年已經是 2020 了，各位作為時代的弄潮兒，上網沖浪是生活中的不可或缺，豐富的沖浪生活中必不可少的當然是買買買，面對琳瑯滿目的商品圖與文案，用戶怎樣才能快速抓到重點？或者說，怎么樣才能讓信息出現在合適的位置？
首先我們要了解瀏覽信息這個動作的本質和特征，瀏覽的本質就是大腦通過眼睛去提取信息，是一個傳達→解碼的過程，在這個過程中又存在一些特性，我們可以利用這些特性去進行一些更的信息傳達。
受閱讀習慣影響，人們閱讀的起始端都是在左側，結合依據尼爾森等老前輩發布的眼球軌跡研究報告可知，視覺瀏覽習慣呈「F」型且是不受控的潛意識習慣；同時可以延伸出例如「E」、「Z」等瀏覽模型，我們可以根據這些視覺模型的特性，結合產品的戰略層目標，將信息放置在合適的位置，已達到信息傳達率的最大化。
了解了基本的視覺瀏覽模型，那我們的地基就已經搭建好了，接下來我們來看看地基搞定之后的結構要怎么去布局。
首先我們需要清晰產品的屬性，電商平臺的本質是物品的交易，因為線上的特殊性，產品中圖片與文案對于平臺的 GMV 就存在最直接的關系。這個時候，單元布局的輪廓就出來了，就是「商品圖+關鍵詞文案」。
同時，不同平臺戰略方向、發展階段、團隊規模等因素的不同，所針對的用戶群體、消費階層、心智、審美等各個因素都會大不相同，有時候甚至在同一平臺中針對不同的活動、不同的品類進行細致的場景劃分，產生不同的單元結構以滿足商業目的上的需要。
720° 全方位了解平臺的屬性特征后，我們就可以開始利用這么信息來搭建基本的單元結構了。
例如平臺主攻下沉市場，用戶群體多為三四線，這個時候用戶吸引點在于商品的價格與賣點關鍵詞，這時候我們就可以拉大關鍵詞文案的占比，縮小圖片的占比，讓他們關注的內容盡可能多的進入他們的眼睛，吸引購買意向模糊的用戶點擊，增加購買意向明確的用戶匹配商品的速度，已達到 GMV 的提升。
簡單來說，過程中需要考慮到平臺因素所產出的圖片尺寸/比例/精致度/是否統一等，與文案搭配所呈現的是否適用當前消費場景及用戶心智，是否可以提升用戶的轉化率，是否可以提升平臺的下單率。
單元的架構是多樣且復雜的，就像一塊七巧板。重點就在于對于產品屬性和用戶行為、場景、心理等特征的分析，需要權衡各個關鍵點的重要性，把用戶需要看到的信息、我們想讓用戶看到的信息、用戶希望看到的信息以合適的結構狀態呈現給他。
我們將大體架構搭建好之后，剩下的就是要把細節元素給點亮，讓他們起到一個點睛的效果。
細分一下，其中涉及到的細節元素大致為活動標簽、折扣標簽、跳轉按鈕等常規的分子部件，在結構中，圖片、商品名稱、價格是用戶關注的重點，其他的部件則起到輔助刺激的作用。圖片和商品名稱的大體結構我們在上一步已搭建了，剩下來我們看看這些小部件該如何合理歸置。
先從標簽說起。整體框架出來了，用戶所需要了解的商品信息就已經基本呈現了，這個時候用戶心智上更多的主觀意向，尋找合適的商品，而標簽的出現，更像是一劑興奮劑，強烈告訴用戶：「這個品熱度第一！」、「這個品是款！」等我們刺激用戶的聲音，增強用戶查看的欲望。
這個時候疑問來了，那放哪里合適呢？
活動標簽，多為顯示該商品的熱度、促銷主題、排名等一些大的狀態性的信息，為的是在用戶心理層面給這個商品帶來更多的好感度，放置的位置可以結合具體場景去分析，可以考慮與商品圖進行結合放置。
遵循由上而下滑動的交互原理，我們可知在每個單元的頂部會是滑動瀏覽時第一被眼睛識別的信息，而且可以利用這個心理去給還沒看到具體商品的用戶進行一個心理鋪墊，比如商品的品質、權威性等，先入為主的進行心理建設，再結合視覺瀏覽模型，合適的位置就出來了。
次要信息比如倒計時、商品折扣、商品特點等輔助信息，結合布局場景考慮，有的可與圖片一起放置增強品質感，有的可與文案一起放置增加決策信息，有的可與價格一起放置，刺激用戶進行決策，是很有靈性的一個點睛之筆。
最后是按鈕，在這里的按鈕可以理解為瀏覽過程的一個閉環節點，也是一個操作的終結點，是最后的臨門一腳。位置當然是在右側最為合適，降低操作難度，同時也是整個單元的一個視覺終結點，瀏覽完流程之后決定是否點擊跳轉。當然，你可以利用你的方式去引導或刺激用戶點擊，你可以的。
文章來源：優設 作者：阿類雜碎面
大綱
結語：作為設計師有時會聽到需求方表述“這種極少出現的情況，我們可以暫且不管它?！钡羌毠澮娬嬲拢袃炐愕捏w驗設計都必須照顧到方方面面的缺省情況。讓每個用戶的流量價值發揮到最大，產生相互信任的良好的品牌關系。這樣的平臺生態是良性的，這樣的產品會更有流量轉化的商業化價值。
轉自：ui中國-騰訊動漫TCD
「小宇宙」是即刻團隊開發的播客App，目前已上架各大應用商店，僅能通過邀請碼使用，導致一時間微博上出現「一碼難求」的情況，那它與其他播客App有什么不同?
進入App即展示「信息流」推薦，每日更新3條播客「信息流」推薦，聽的時間越長，會推薦越多更加精準的播客內容。那用戶如何判斷推薦的單集是否有自己想要聽的內容呢？如下圖所示，頁面上單集信息展示條目的空間較大，在首屏約能展示2條的單集內容，除了基礎的節目封面、節目名稱及單集名稱外，小宇宙巧妙地通過將熱門評論外顯，輔以展示播放量及評論數量，引導用戶點擊進入二級頁面，進而形成轉化。
不同于傳統播客App僅能搜節目名稱，小宇宙還支持搜索單集和用戶，甚至是節目內頁的內容也可以搜索到。對于那些「我對欄目本身不感興趣，只想聽其中的某一集」或者「我關注某個人或某個話題，想聽聽看關于他的一切」的節目，使用單集搜索功能可以更簡單地直達所需。
讓人驚喜的是，在節目內頁長按選中任意詞匯可以呼出「智能搜索」功能，這個智能體現在它允許用戶選擇用magi搜索和用互動百科搜索相關內容。這讓我想到了Mac上一款很好用的工具PopClip（通過對文本內容的擴展來提升操作效率），小宇宙的智能搜索對于邊聽節目邊扒關鍵詞的「考據黨」來說，無疑會大幅提升在聽節目時獲取資訊的效率。
在單集播放界面，除了常規的進度條拖拽、快速后退/前進等功能外，還有一個點贊功能，用戶聽到精彩的內容或引起共鳴的部分可以通過點贊進行互動，從點贊功能的反饋到進度條的高度的升起都能夠進行實時的反饋，同時也可以幫助其他聽眾了解單集內容的關注點，以此為??營造出符合他當時?為和感知的情景，可以達到提高用戶的參與度的目的。
評論頁的輸入框常駐于頁面底部，點擊后輸入框高度延伸，引導用戶評論互動，此時用戶如果是通過單集播放界面進入的評論頁面，還會出現標記時點的選項，勾選后評論內容即帶上了單集內容的時點。而時點高亮色+下劃線的表現形式可以引導用戶聚焦注意力和點擊進行內容的收聽，當其他用戶點擊帶評論中的時點即可直接跳轉至對應時間點播放單集內容，為??之間的互動建?起羈絆，方便用戶間的討論交流，進而提升了點擊率和單集的收聽率。
另外，在用戶輸入評論時，輸入框并不是以模態的形式出現，在用戶評論的過程中依然可以滾動頁面進行交互操作，這樣做的好處在于不打斷用戶操作的連續性。以iPhone X的屏幕高度為例，除去標題欄+評論輸入框+鍵盤高度外，留給評論本身的空間僅有大約1/3左右，在空間有限的情況下，用戶滾動屏幕查閱感興趣的評論或針對性進行回復的行為非常連貫，非模態的處理可以進一步降低用戶互動的門檻。
這里有一個改進小建議，輸入框內的預制文案可以換成引導性更強的內容或由系統自動生成一個場景適合的評論，這樣不需要用戶自己思考寫什么內容，降低用戶評論操作的成本，提高用戶參與度。
小宇宙目前在社交上的嘗試處于用戶友好型狀態，用戶可以查看他人的播客訂閱列表，發現同好，即「相近信息的收集愛好者容易獲得共鳴」。如果這個有共同興趣愛好的人剛好是用戶收聽的主播，就可以很容易拉近聽眾和主播的距離，主播對于聽眾來說不再是手機屏幕后面冷冰冰的聲音，他更像你的一個朋友，你可以去了解他的喜好，討論共同話題，更好地跟他進行互動。
不同的主題表達了不同情感，針對不同的社會群體的設計風格也會有所不同。
回到產品本身，小宇宙根據播客節目封面的主題色來適配不同播客信息頁的視覺風格，營造出適合不同播客風格的氛圍，以此來傳達不同播客節目的特點。
若在熱門的單集下評論，且評論點贊數最高，小宇宙領航員（官方賬號）會給你留言，告知「你的評論上首頁啦！」，通過這種與用戶互動的方式激起??的情感認同，提升用戶評論的積極性。
點擊「加入播放列表」，通過動效形式給予用戶反饋，讓信息的展示更生動自然，為產品增添趣味性的同時，給予用戶更美好的操作體驗。
下拉刷新動效中以「宇宙」圖形為載體，將產品的Logo融入了其中，賦予產品獨有的個性和靈氣，讓用戶切身感受到這是一個可以探索的「宇宙」，而不是一個冰冷的工具，在減少用戶等待過程中引發的負面情緒的同時強化了品牌形象。
產品中使用了較多無文字按鈕，對于初次使用的用戶來說存在一定認知負荷，不知道這些都是什么功能。
存在相同樣式的圖標承載不同功能操作的問題：「播放列表」功能在「我的播客」頁中點擊后是加入播放列表操作，而在播放列表模態彈窗中，點擊后進入播放列表的編輯狀態，同個樣式的按鈕承載了不同功能操作，容易引起用戶困惑，帶來冗余的學習成本。
當你收藏了一篇文章，收藏按鈕狀態從「收藏」變為「已收藏」，點擊「已收藏」可以取消收藏狀態，這是用戶對于兩個狀態切換已有的認知。而小宇宙的加入播放列表功能，在點擊加入播放列表后，再次點擊「播放列表」按鈕，會提示「已在播放列表」，而不是通常認知中的「取消加入播放列表」，容易帶來認知錯誤。
列表右側的「已訂閱」按鈕，視覺感知上像是不可點的狀態，點擊后提示「已取消」，再次點擊提示「訂閱成功」。對于有明顯狀態變化的功能性操作可以省去toast，這里通過「已訂閱」和「訂閱」狀態的按鈕樣式變化已經給予用戶清晰的傳達反饋，再次提示反而多余。
小宇宙的體驗分析就到這里，總的來說雖然存在一些需要優化的細節（畢竟還處于邀請碼體驗階段），但是設計師可以學習的設計亮點有很多，感興趣的小伙伴可以下載體驗一番，也歡迎大家一起留言交流。
深色模式該從何處著手設計又要考慮哪些因素？一起來看看~
其實回顧我們常用的APP，有很多都更新了深色模式，而且每個APP對深色的定義和設計都有差異。
實際上深色模式已經來臨，而且在很多產品中都能發現它的身影，之后也會愈加流行。那么設計師面對深色模式，該從何處著手設計又要考慮哪些因素呢？
本文就為大家提供一份全面的總結。文章目錄如下：
1. 需求趨勢
過去一年以來，Android 10和iOS 13上都適配了深色模式，而且Apple和Google也一直致力于將資源和注意力投入到深色模式中，這也讓深色模式備受用戶的關注。
2. 專注內容
深色模式在弱光環境下具有更好的可讀性，讓我們更專注于眼前的屏幕。同時深色的背景會降低內容周圍元素的影響，特別是以圖片和視頻為主的應用，讓用戶更專注于內容。
作為內容消費型應用的Netflix ，把深色背景作為默認設計樣式，深色的設計讓用戶更能集中注意力，延長使用時間。
3. 減輕刺激
相對于其他顏色，深色系的設計在夜晚看著最舒服。可能晚上玩手機不用擔心光線太刺眼，但是深色模式對護眼并沒有什么幫助，只能說可以減少對眼睛的刺激。
4. 提高續航
深色模式更省電只適用于OLED屏幕。OLED面板的每個像素點可以單獨發光，當使用深色模式時，部分像素點被熄滅，只點亮部分像素，屏幕的一部分相當于處在休眠狀態，所以會更加省電。
在深色模式下，Apple重新審視了iOS中UI樣式和顏色的含義，讓我們來看看在iOS上設計深色模式帶來的變化。
語義化顏色（Semantic Colors）
所謂語義化顏色，就是不再通過某一固定的RGB色值來描述顏色，而是根據用途來描述，讓界面元素可以自動適配當前的外觀模式。
淘寶團隊就參考了蘋果官方的適配建議，通過語義化顏色的方式進行適配，使適配成本大幅降低。設計師根據不同UI元素的特性先期制定顏色語義化規則，進而技術在框架層面通過「顏色自動反轉」技術實現顏色反轉。
系統顏色
除了語義化顏色，Apple還提供了9種預定義的系統顏色，在淺色和深色模式中，這些顏色會動態變化，支持整個系統的外觀，同樣也可以自適應選定的界面樣式。
模糊與動態效果
在iOS13上，蘋果引入了4種模糊效果和8種動態效果，它們自動適應iOS界面樣式。這是在淺色和深色模式下不同的模糊效果。
蘋果還在iOS深色模式排版套件中引入4種動態效果，其中3種為疊加效果，1種分隔效果。
谷歌提供了廣泛的文檔支持，幫助設計師了解深色主題如何在Android生態系統中運行。
Elevation（陰影）
UI界面元素間的投影最能讓用戶清晰地感知用戶界面的深度。在設計深色主題時，組件將保留與淺色主題相同的默認陰影組件。Elevation越靠上, 顏色就會越淺。
無障礙性與對比
深色UI設計中的背景應足夠暗以顯示白色文本。設計師要注意背景和文字之間至少使用15.8:1的對比度。這樣可以確保將正文放在最前面時，能通過WCAG（Web內容無障礙指南，使網站內容更容易訪問）的AA標準。
顏色
深色模式必須避免飽和的顏色，以免引起眼睛疲勞。相反，設計師應專注于使用不飽和的顏色，以增加清晰度。主色和輔色的選擇還取決于對淺色和深色UI主題的考慮。
文字不透明度
在深色背景上設計淺色文字時，高度強調的文字不透明度為87％；一般提示文字的不透明度為60％；禁用文字的不透明度為38％。
蘋果和谷歌都利用各自的設計原則，為深色模式設計做準備工作。在實際設計過程中，不單需要這些基本原則，更重要的是要注意設計深色模式的實用要點。
設計深色背景時不是簡單的把白變成黑，而是對背景使用比較暗的色調，以減少眼睛疲勞。
在淺色模式中，我們傾向于用細微的陰影來傳達界面深度，使用起來更加自然。但是在大多數深色模式下，陰影的效果并不明顯，通常用顏色的深淺來傳達界面的層級關系。
關鍵點：注意應用場景
在知乎的深色模式中，背景的設計從深到淺使用了三級灰度，讓頁面的層級更分明。
一級灰度的應用場景主要是大的背景色，使用面積相對比較大顏色最深；二級灰度的應用場景是選項的背景色，根據選項的數量設置使用面積，位置排布比較靈活；三級灰度的顏色最淺，使用面積最小，通常用在分割線中。
白底黑字和黑底白字帶給我們的用眼體驗是不一樣的。設計不當的深色模式常常因為強對比而變得很刺眼，同時為了提高對光線的吸收虹膜會張得更開，更容易造成眼部疲勞。
關鍵點：文字間的對比
深色模式中，文字的用色通常是純灰色，不同位置的文字例如標題、正文和注釋使用深淺不同的顏色作對比。上圖是深色的微信，就利用這種方法來區分不同文字內容，展示文字層次關系。
另外每個應用的定位都不一樣，界面中想傳達的信息也有差異，所以要注意不同的設計思路。
關鍵點：文字與背景的對比
已經更新深色模式的應用主要分為兩大類，一類屬于工具型應用例如QQ、微信、百度網盤等，這類應用追求的是信息的有效傳達，在設計時文字內容和背景色的區分比較明顯。
上圖是百度網盤的深色模式，可以看出來標題文字與背景有很明顯的對比，保障了用戶使用時的可操作性和易讀性。
這樣的設計不需要用戶過于沉浸式的閱讀，只需要幫助用戶快速找到有用的信息并方便使用，這是工具型應用在設計深色模式時必備的原則。
另一類屬于內容型應用例如知乎、簡書等，這些應用更注重沉浸式的閱讀體驗，因為用戶通常會在某個界面中停留很久來查看內容，所以需要文字與背景的低對比度為閱讀營造柔和的氛圍。
簡書的深色模式中，文字與背景的對比關系就設計得很弱，整個界面呈現出灰色調，這樣的設計有助于在弱光環境下的長時間閱讀和瀏覽。
深色模式應該避免使用特別鮮艷的顏色，較高的明度和飽和度會與深色背景形成強烈的對比，讓頁面的可讀性變差并加深刺激。
關鍵點：降低色彩明度
在由淺變深的過程中，知乎對改變了界面中所有圖標的顏色。界面里面的圖標和主題按鈕的色彩，在色相、飽和度上都沒有變化，但是明度被不同程度的降低，保證了在不同光照條件下的內容的可讀性。
這是深色模式中處理色彩的一種方法，雖然在淺色界面中，我們更喜歡鮮艷的顏色，但明度低的顏色更適合深色主題。匹配這兩個模式另一個比較好的方法是創建互補的色板。
無論深色或者淺色，都只是產品向用戶呈現的一種界面狀態，最終的目的是為了更良好的使用體驗。
不管選擇什么樣的模式，都要記得從產品自身出發，并牢記這幾點：
文章來源：優設 作者：Clip設計夾
財務和金融相關的應用是一個相對專業的分支，在這個領域當中創造體驗優異的設計并不是一件簡單的事情。身為資深設計師Taras Bakusevych 在這篇文章當中，分享了10個確保這類產品足夠優秀的核心設計原則。
為何深色模式看起來不自然？它的實用性到底怎么樣？深色模式是不是對眼睛更健康？結合文獻，我們一起來探究深色模式的種種！
在過去的幾年中，深色模式一直是用戶最期待的一個功能。你可以自由切換你喜歡的模式來適應當前的場景，iOS和Android也都在2019年布局了系統級的深色模式，深色模式可獲得出色的視覺體驗，尤其是在弱光環境中……有助于你專注地開展工作，因為內容會較為顯眼，而顏色加深的控制項和窗口則會隱入背景之中。但真是這樣嗎，或者只是一種實際上弊大于利的操作？
雖然各種軟件界面的色調和顏色會有所不同，但是對深色模式的處理方式都是在深色背景上顯示明亮文本和界面元素的配色方案。相比之下，在淺色背景上顯示深色文本和界面元素的配色方案，在這里我們稱之為淺色模式。
而事實上，深色模式比淺色模式早了幾十年。在其最初的階段，深色模式并不是一種有意的解決方案，而僅僅是當時計算顯示設備是陰極射線管（CRT），且只能顯示單色的顯示，屏幕看上去就是黑的，黑底白字或者黑底綠字就是計算機行業的早期狀態。直到1980年代彩色顯示器發明后，微軟視窗系統上線之后，黑底顯示才退出主流。蘋果在1984年推出“麥金塔”個人電腦，第一次發布采用圖形用戶界面，由此開啟了計算機屏幕白底顯示的主流之路。
ibm 5151單色監視器
淺色模式出現的確切時間很難確定，但可以追溯到施樂Parc圖形用戶界面，它也極大地影響了早期蘋果的“麥金塔”和其他操作系統，該界面使用了以白色背景為主的深色文本和界面元素。它與顯示技術的進步和現代圖形用戶界面的出現密切相關。這種能夠顯示色彩的且更先進的RGB CRT顯示器拉開了淺色模式的序幕。
1973年的施樂Alto是最早使用輕型接口模式的計算機之一
深色模式的實用性有多少，每個人看法也不一樣。盡管深色模式的界面可能不像淺色模式那樣觀感清晰，但深色模式的界面卻具有一定的魅力，可以讓你聯想到新穎，高端，精致，神秘，力量，奢華這些詞。但是，黑色也是一種會引起人們強烈的情感一個顏色，并且在過度使用時很容易使人無法承受。
2019年9月，蘋果公司上線深色模式（Dark Model）時，在官網上如是宣傳道。從iPhone到Mac，當庫克決定在蘋果公司幾乎所有產品上線深色模式、甚至要求所有在AppStore上架的應用都必須兼容深色模式時，安卓陣營的谷歌、華為、三星等頭部公司也紛紛在其手機中推出了深色模式，相應地從WhatsApp到微信等全球主流的應用也都推出了深色模式。
但是，想要獲得良好的深色模式是相對比較難的。一方面，深色模式迫使放大瞳孔來捕獲必要的視覺信息，從而導致整體清晰度的降低。而同時界面中高亮的部分又迫使我們的瞳孔縮小去適應亮度，以便提高清晰度。這也就能理解為什么白色背景上的黑色文本在你的眼睛中通常會顯得更清晰的原因。
擴大的瞳孔讓光線更多，但感覺到的銳度受到損害
行業對深色模式追逐的群羊效應，也進一步加劇、放大了一個見解：深色模式對眼睛更友好更健康！
但是，事實并非如此。對于一些有散光的人來說，在某種程度上深色模式對他們的眼睛來說更糟糕，深色模式比淺色模式更友好更健康的科學仍有待討論。斯坦?！ぐ轄査寡劭蒲芯克难劭茖＜覍Υ吮硎荆骸拌b于文獻中的數據，我認為深色模式對眼睛沒有任何的友好和健康。” 這種深色模式對眼睛疲勞和潛在的眼睛健康的影響時，使用時間可能比設備的亮度或亮度更重要。
根據美國驗光協會的說法稱，大多數人的眼睛在某種程度上都患有散光，但通常不會引起注意。據美國眼科學院統計，每三個美國人中就一個存在散光的情況，1.5億美國人需要佩戴眼鏡來矯正視力；香港理工大學針對2700多人的臨床檢測發現，在21歲的30歲的香港人中，近40%以上患有100度以上散光。
一起看下面的說明性圖像。即使你有完美的視覺，你也很可能在黑色背景上看到白色文字周圍的光暈。
淺色模式與深色模式
如果增加文字并降低文字的大小，這種效果可能會更強：
右邊的圖像你應該會看到更多的光暈，如果你有散光癥狀，深色模式可能會讓你看屏幕更費勁。在深色模式下，虹膜打開以接收更多的光，并且瞳孔的變形在眼睛上產生了更加模糊的焦點，因此，當你在深色屏幕上看到淺色文本時，其邊緣似乎滲入黑色背景，也就是所謂的“光暈效果”。雖然深色模式可能更適合夜晚等弱光環境下使用，但不一定能幫助更好地閱讀，對于散光患者來說，可能還會加劇視疲勞。
當然，從實用性上講，深色模式也有它的好處，深色模式利用OLED屏幕在純黑的背景下不發光的特性，確實能有效的省電，讓你的電子設備續航上提升很大，這也是很多人一直在追求深色模式的一個重要原因，只要手機續航強比啥都重要！這也可能是蘋果公司決定在幾乎所有產品上線深色模式的一個原因。
另外深色模式更有利于給用戶營造一種沉浸體驗，對于視覺娛樂應用尤為如此。當你想突出顯示特定類型的內容時，深色模式會特別有用。豆瓣、數字尾巴、網易云音樂是我常用的幾個軟件，它們都已經適配了深色模式。在這種模式下你的目光會更加注意到電影的海報、數碼產品和充滿活力的音樂專輯上。
豆瓣、數字尾巴、網易云音樂的深色模式
一是由于我們人腦的組織結構造成的，從多年來的多項科學研究和調查得出的結論是，從物種進化來看，人類99%的時間都是在白天中活動，人腦更傾向于在淺的背景上顯示深色的圖像。所以無論白天還是黑夜，淺色的背景都可以讓你更快地專注于顯示的元素，而深色的背景則使其難以辨別文字和視覺界面元素，從而影響你的閱讀效果并最終使你的眼睛疲勞。 其實從世界各地多個洞穴中發現的史前壁畫也能說明為什么我們傾向于喜歡淺色模式。
追逐獵物的獅子，法國Chauvet Cave，約公元前30,000-28,000
德國帕紹大學曾經做過一次測試。在該研究要求參與者閱讀屏幕上的正極性（白色背景上的黑色文本）或負極性（黑色背景上的白色文本）的文本。隨后，參與測試的人員會執行基本的校對任務，例如查找拼寫或語法錯誤。研究人員還測量了每種模式下參與者的閱讀速度。結果是所有參與者在正極性條件下的表現都會更好，他們檢查出更多的錯誤以及閱讀的速度更快。
可讀性差異
另一個學習發現正極性對于在顯示器上讀取小文本特別有利。人腦具有更快的可讀性，更喜歡在光線背景下顯示的深色文本和物體。
二是由于含有大量藍光的光源會使我們眼睛不舒服，當我們談論屏幕對眼睛的潛在破壞性影響時，我們通常是在談論“藍光”，這是由短、高能量波長構成的光譜的一部分。研究發現藍光可能是導致眼睛疲勞的一個因素，但指出長時間不眨眼的干眼也是導致眼睛疲勞的一個更嚴重的原因，當然也有是因為字體太小，以及散光這樣的原因。
當我們身處暗室或是在黃昏或夜晚時，眼睛會切換成不同的視覺模式；在弱光環境下，人眼會從對綠色敏感變成對高能量藍光敏感，這代表我們在大量的接收藍光，因此對刺眼強光的敏感度會增強。這類情形對駕駛人而言并不陌生，當他們被來車車頭燈的強光照射時，特別是使用現代化氙氣燈或LED頭燈的車輛，可能會暫時喪失視力。
平板電腦、智能手機和其他電子顯示屏，不僅改變了我們所接觸的光譜，也使我們的視覺行為發生轉變。我們必須意識到，我們現在用于“近距離”視物的時間比以往多得多，這通常是因為背景亮度太暗所致。
在德國光學公司蔡司官方網站上，對于藍光也作一分為二的評價：“好處是當外界環境變亮也就是藍光較多時，身體便釋放出血清素—它是其中一種快樂荷爾蒙以及皮質醇—這是一種壓力荷爾蒙。這兩種荷爾蒙能讓我們保持清醒，富有活力，同時也應用于冬季抑郁和失眠的治療中。但過多的紫外光和藍紫光可能會對肉眼造成損傷，除了可能導致令人難受的結膜和角膜發炎，也可能會破壞眼睛的晶狀體（例如白內障），尤其是傷害我們的視網膜（黃斑病變）?！?
在WWDC 2019大會上，蘋果宣布了iOS13的深色模式功能，在令人興奮之余，作為設計師和開發人員，我們應該考慮的該如何去實現它。蘋果和安卓已經發布了為應用程序設計深色模式的設計指南。當然，沒有硬性規定要求遵循他們提供的設計指南，這些只是指導原則。
由于Material Design設計語言的原因，投影的占比是非常大的。在淺色模式下還好，但這不太適用于深色模式，因為深色背景上的黑色陰影在視覺上不容易察覺，為此安卓還提供了在深色模式下不同層級的卡片與投影上的參考。
根據設計文檔來看，iOS背景為純黑色，色值為＃000000，Google 則更喜歡深灰色，色值為＃121212。
通過提供的設計指南，我們可以輕易上手來設計和開發我們的軟件，但要注意的是深色模式并不是簡單的與淺色模式顏色對調，必須為所有的元素進行單獨配色。
淺色模式下的白色不會在深色模式下轉換成純黑色
這樣也就能理解為什么很多軟件并沒有全部去適配新的深色模式，一方面使用場景決定的，另一方面就是深色模式并不是簡單地換個換個顏色就行，很多元素需要重新設計和開發。
在去年的 WWDC 大會上，蘋果人機交互團隊的設計師曾對 macOS 的深色模式使用場景做了進一步的解釋。
他指出，只有閱讀瀏覽或是內容創作型 App 才需要長期啟用深色模式，比如文字或代碼編輯。它們會借助黑底白字的高對比度特性來讓用戶視線保持集中，其它大部分軟件對于深色模式的需求反而并不強烈。
或則你可以通過使用場景去選擇，在明亮的環境中使用淺色模式，在昏暗的環境中使用深色模式。
但是在大多數情況下，真正幫助你避免眼睛疲勞的是不要整天盯著屏幕，而不是糾結到底用深色還是淺色模式。
轉自：站酷-
微信是一種生活方式。作為月活超 10 億的國民級產品，它有著獨特的設計之道。
同時，微信也是互聯網界的一個異類，張小龍曾在微信公開課上回應道：「我們只是守住了做一個好產品的底線，居然就與眾不同了」。
好產品自然是體驗和價值至上。下面，我就為大家解讀微信的用戶體驗設計。
先從最簡單的二次確認講起。
微信針對首頁消息和收藏列表的刪除操作，做了二次確認的微創新。像同類 IM 聊天工具，如 iOS 短信、Facebook Messenger、飛聊等等，二次確認都是采用底部系統彈窗。這樣做，從程序架構的角度來看兼容性和通用性更強。
而從體驗設計的角度來看，則剛好相反，因為從第一次刪除操作，到第二次確認系統彈窗。之間的目標距離太長，耗時也就變長了。根據菲茨定律（Fitts’ Law），獲取目標的時間取決于目標的距離和大小。這意味著提升交互的效率，不僅需要減少距離，同時還要增加目標大小。
△ 收藏列表
回過頭看來微信，就是這樣設計的。二次確認是在第一次的基礎上延展，距離幾乎為 0，同時，目標按鈕的寬度也增加了幾倍，大大地提升了交互效率。
其實，商業和用戶體驗往往是有沖突的。而微信廣告很好的平衡了這一點。
通過豐富有趣的互動體驗式創意，或畫圓、或畫方、或畫愛心，吸引大家主動參與互動。
1. 開放首條評論
另外，首條評論功能讓品牌像朋友一樣與大家對話，利用明星效應，從而帶動更多人參與評論，有效提升評論區活躍度和廣告點擊率。
△ 朋友圈劉雯廣告
以劉雯發布的朋友圈廣告為例，大表姐把款的 vivo X30 系列手機交到你手中，并在首條評論中邀請你幫她拍照。數十萬用戶積極回復劉雯，評論率高于歷史均值 40 倍+，「你這么漂亮怎么拍都好看」、「天天給你拍」，大表姐的魅力折服了眾多用戶，有效提升了品牌的親和力與好感度。
2. 打開儀式 · 最強震動級別
在交互方面，如果你是 iPhone 用戶，可以體驗到 Taptic Engine 線性震動馬達，通常力度由輕到重分別是 Light、Medium、Heavy。在打開廣告的那一刻，它給你的是最強震動級別，滿滿的儀式感！整個微信應該找不到第二個這樣級別的震動了。
再舉一個震動的例子，當你的好友拍攝了時刻視頻后，可以看到 TA 的頭像右上角多了一個藍色的小圈圈，雙擊它就能看到好友的時刻視頻了。
當然，你雙擊沒有拍攝時刻視頻的好友，TA 的頭像會左右晃動，并且會有 Failure 的震動反饋，動畫和震動節奏完美匹配，這個體驗就像你解鎖 iPhone 輸錯密碼時的震動是一樣的。
△ 沒有時刻視頻時的反饋
我們做產品設計時也一樣，對于用戶的操作，應當給予清晰明了的反饋，幫助用戶更好地理解信息。
微信的起步階段是基于手機來做 App，不基于 PC 來做，PC 端只是輔助，而現在，它的跨平臺能力也逐漸增強。
一周前，微信 PC 版「微信測試版 for Windows」發布了 2.9.0 的內測，同步了移動端的新功能，主要有兩點：
支持打開小程序，也可以玩「貪吃蛇」「跳一跳」等小游戲了。
△ Windows 微信客戶端
另外，此前的微信 PC 端只支持引用文字消息，也沒有達到手機上引用消息的視覺效果。此次更新中，還新增了很多支持的應用類型，包括但不限于圖片/視頻、表情包、公眾號鏈接、小程序、文件等。
如此看來，Mac 端的更新也不遠了，可以期待一下。
最近的微信更新了，除了引入深色模式之外。值得一提的是，語音消息的交互體驗得到了優化，上滑轉文字更方便了。
此前的方式是按住說話，滑到轉文字按鈕，說完松開手指后，才把語音解析成文字。
現在交互則少了一步操作，達到了實時邊說邊轉文字的功能。別小看這一步界面上的優化，它背后代表的是微信語音識別能力上的技術突破。
△ 語音實時轉文字
微信有很多隱性和顯性的錨點，隱性錨點就比如你打開的這篇文章，關閉后，再重新點進來，還是顯示上次閱讀的位置。
△ 訂閱號列表
顯性的錨點就比如上面這個：當你刷公眾號列表時候，如果有新文章更新，標題欄會出現一個錨點按鈕，點擊它讓你快速回到頂部，方便查看文章。
△ 朋友圈「跳到還沒看的位置」
基于此，在新版微信朋友圈中，增加了一個「跳到還沒看的位置」。很多信息流產品是往下刷內容，直到給你一個分界線提示：下面內容已經看過了。而微信這是一個逆向操作，我認為這個功能還是很有必要的，因為經常會有刷朋友圈刷到一半聊天退出去，當回來查看朋友圈時，需要重新拉到底部，費時費力。
《在你身邊，為你設計》一書中有提到語音聽筒播放的優化。大家都知道，手機帶有距離感應器，在感應到耳邊貼近時，屏幕會關閉以節省電力，并且避免由于耳朵與屏幕的觸碰導致的誤操作。
微信在聊天界面中，也啟用了距離感應，以實現手機貼近耳邊時，自動將語音從揚聲器切換到聽筒進行播放，這樣你可以用最自然的姿勢來聽語音，這是一個很好的體驗。
但要完美地實現這個體驗，就需要解決距離感應器的時延問題。播放語音時，如果你非常迅速地將手機移至耳邊，這時候距離感應器并不會同樣迅速地對這個動作產生反饋。大約在延遲了 300 毫秒后，感應器發出信號，微信將 iPhone 的屏幕關閉。而在這個時間內，你的耳廓極有可能已經觸碰到了 iPhone 的屏幕上。觸碰的位置大部分時候是左上角的返回按鈕區域。于是很容易出現手機移至耳邊，語音戛然而止。
△ 延時響應判斷流程圖
為了解決這個問題，微信設計了一個解決辦法：在響應返回操作時，先等待 500 毫秒，這時候如果偵聽到距離感應器有發出信號，則認為是貼耳的動作，此情況下不執行返回操作，如上圖所示。而 500 毫秒的延時大部分時候你是不會感知到的。這一解決辦法極大降低了貼耳時候的誤操作。
在微信的產品設計中，我們看到了交互的細微迭代和背后的技術突破，我們看到了商業創意與用戶體驗的平衡。給用戶帶來希望，讓創造者體現價值，這就是微信的設計之道。
文章來源：優設 作者：洋爺
缺省頁指頁面的信息內容為空或信息響應異常的狀態；設計缺省狀態的作用不僅是引導用戶在異常邊界狀態的操作提示，同時也是安撫用戶體驗情緒的重要場景；更重要的是為邊界場景營造出良好用戶體驗。通過分析缺省狀態產生的原理，從而更為準確地把握交互缺省頁的設計原則。
談到缺省頁面可能是設計師最容易忽略輸出的范圍，可能直到對接的開發同學提出來，「這個頁面，如果沒有數據的時候，該怎么顯示??？」。為了更好地把控設計缺省頁交互狀態，首先要了解缺省頁出現的原理。App 頁面內容（包括圖片、文字、數據字段等等）都是請求服務器數據，順利返回后，正常顯示到客戶端頁面。在了解清楚基礎實現邏輯后，就可以開始梳理、整理缺省狀態的設計思路。
△ 圖1 缺省狀態的場景梳理圖
缺省狀態包括：系統層、信息層、空白層。
系統層：指當用戶請求服務器時，返回提示請求提交失敗，并檢測到失敗原因時呈現的頁面；例如：加載失敗、服務器異常、無網絡等；頁面一般會有重新請求的快捷按鈕。文案上可做失敗原因的細分描述，也可節約成本使用網絡異常的統一文案。
信息層：請求服務器數據成功，但返回的數據異常的頁面；例如：內容已刪除、內容已下架、內容不存在；文案內容以提示數據類型的缺失為主。顯示形式除了常有的全屏缺省圖，還會出現在數據列表下單一內容缺失的缺省模塊化的情況，例如：單一作品在書架上顯示已下架。
空白層：請求服務器數據成功，但顯示無數據；內容頁在無數據時需要缺省狀態進行表達；例如：頁面空數據、搜索無結果等?？瞻醉撁鎸儆谡＞W絡顯示場景，所以一般會在缺省頁附帶有相似屬性模塊的用戶引導，爭取用戶重復消費的目標，滿足用戶的操作的訴求。
最后根據每個不同的缺省狀態，梳理產品相對應的場景。逐一根據場景特點來設計頁面內容。那缺省頁的設計有哪些表現形式呢？
沒有用心設計的缺省頁無法給用戶帶來良好用戶體驗，并可能給用戶帶來困擾，如下圖：某小眾直播平臺的拉新邀請頁面，無邀請記錄狀態下沒有任何有效反饋信息，用戶不能明確得知到底是網絡問題還是賬號同步出錯，亦或者是沒有一次邀請。正確的缺省頁設計內容理應明確表達出符合用戶心理預期的視覺場景表達（圖形）；和使用易理解和語法恰當地表達當前的異常狀態（標題）甚至于引導用戶解決問題的文案描述。
△ 圖5 缺省頁的錯誤示范
1. 視覺圖案+文案
此類缺省設計形式一般應用于表達系統性無響應或初始空白態的缺省場景。視覺圖案一般使用 app 吉祥物或主色調延展出的 icon 或插畫來表示缺省狀態；文字：通常為「標題」或「標題+描述」結構；標題通常是表達出現缺省的原因；描述文案則說明結束缺省狀態的解決辦法，如「請檢查網絡是否順暢」 等等。
2. 視覺圖案+文案+引導
此類缺省設計形式一般運用于需要用戶引導操作來達到業務目標的缺省場景。在視覺圖案+文案的基礎上加入引導模塊，主要作用于避免用戶在數據邊界的狀態下，會因為無法達到操作目的而提高的跳出率。引導模塊的內容包括：相似屬性內容，相似行為目標按鈕或解決缺省狀態操作按鈕，加入引導，用戶進行某項行為或者感知某些信息，對于功能的教學和使用頻率的提升有著重要作用。引導模塊的形式也是日新月異，逐漸變成新用戶業務引導的作用，不僅限于頁面平鋪，也可以做成固定氣泡微動效，例如：抖音的發布缺省頁。
缺省頁除了常規的提示型設計方法，還有許多其他的設計技巧，幫助用戶在遇到困難，更好地安撫用戶的情緒。這些設計技巧有些是替代原來的缺省內容，讓用戶有更多的消費空間與深度。有些是拓展缺省狀態的補充內容，讓用戶不容易跳出頁面，增加用戶的消費時長。具體如下：
1. 使用推薦內容
缺省狀態中的空白層非常影響邊界情況的用戶體驗，提出一種假設，是否可以刻意推薦相同屬性的內容呢？這樣的界面既不會顯得蒼白無力又可以留住用戶的注意力。相似性的內容也可以解決用戶目標的迫切性。所以說，這種方法非常適合內容型產品中使用。例如：新用戶在打開電商產品的購物車時候，理應是空白無消費行為的操作記錄。那么平臺方通過用戶畫像與熱門排行算法推薦了一個商品流。這樣可以解決用戶無目標性挑選的訴求，增加消費時長。至于產品如果確定用戶畫像的推薦算法，可以通過獲取第三方登錄的個人基本數據之后，才給我推薦了數據庫內相對應標簽的熱門商品，這樣推薦的精準度也會高些。
2. 使用緩存
是否使用緩存內容代替缺省狀態？根據產品特性來判斷，工具類、金融類等同類型產品不適合使用緩存；因為用戶交互操作的數據必須保持實時性與真實性。而內容型、電商類等類型產品適合使用緩存來代替缺省狀態；理由：用戶消費內容的轉化路徑是先消費后轉化的行為特點，不存在系統操作門檻，且緩存內容可以代替產品的缺省狀態，安撫用戶操作失敗所帶來跳出率過高的風險。
3. 情感化表達
當缺省頁給到用戶時，通常省時省力的做法就是老老實實告訴用戶當前的狀態，最多配上一個具有通識性的灰色 icon。但是，秉持著以用戶體驗為己任的時代，我們其實可以把缺省內容表達得更加生動形象一些。在這里會加入一些情感化的表達，而不是僅僅只是做到準確的目標而已，比如加上活潑的插圖故事，或者把文案寫得更加擬人化、戲劇化一些。這些配圖在讓用戶明白當前的狀態的同時，往往也能引發用戶會心一笑，從而彌補空白頁面帶來的失落感甚至可以帶給用戶一些正面的情感。如下圖：
4. 提供新任務
通常缺省頁的引導模塊都著眼于解決當前任務。如果碰到沒有解決方案的情況（例如：404，服務器崩潰等）可以提供給用戶具有情感共情的新任務，讓他們暫時忘記無法達到目標的挫敗感，又有體諒的情懷。幫助建立正向積極的品牌價值觀。例如：訪問騰訊網時訪問失敗的時候，網頁除了顯示 404 狀態之外，還會顯示騰訊「寶貝回家」的公益尋人計劃。將缺省頁與公益內容相結合，不僅改善到用戶缺省狀態。也貫徹騰訊價值觀「用戶為本，科技向善」的輸出。一個好的缺省頁也可以承擔社會責任，讓公益傳播到每個角落。
△ 圖10 騰訊網404公益任務缺省頁
結語：作為設計師有時會聽到需求方表述「這種極少出現的情況，我們可以暫且不管它?！沟羌毠澮娬嬲拢袃炐愕捏w驗設計都必須照顧到方方面面的缺省情況。讓每個用戶的流量價值發揮到最大，產生相互信任的良好的品牌關系。這樣的平臺生態是良性的，這樣的產品會更有流量轉化的商業化價值。
文章來源：優設 作者：騰訊動漫TCD
藍藍設計的小編 http://www.syprn.cn