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