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