蘋果在2019年6月發布的iOS13中增加了“黑暗模式”,用戶打開“黑暗模式”后,應用界面將會變為深色,隨后Google Android 10的發布同樣搭載“黑暗模式”。為了適配系統,不少APP紛紛推出了深色模式。
使用OLED屏幕的設備,在純黑色下可以有效降低耗能,進一步延長續航時間。除此之外,深色模式還可以有效解決OLED屏燒屏、費眼的問題。小摹對幾款常用APP的深色模式進行了體驗,并為大家分享我的體驗感受。從這些案例中,或許我們可以找到深色模式流行的原因。
微 信
深色模式是一種可以降低視覺疲勞且有助于用戶專注的全新外觀。與傳統夜間模式最大的區別是,深色模式不僅保證了弱光環境下的體驗,在強光下仍具有可讀性。
雖然深色模式也被叫做暗黑模式,但并不代表要將底色變為純黑。如果使用100%的純黑底色,長時間閱讀時,反而會造成眼睛疲勞。微信的深色模式里,聊天背景及主頁面底色采用的就不是純黑,而是深灰色。
此外,純黑和純白的高對比度也會造成視覺疲勞,因此微信的深色模式中,使用了淺灰色作為字體顏色,既能保持清晰顯示,又降低了對比度,減輕了用戶的閱讀負擔。如果設置了聊天背景,聊天背景圖片也會自動調暗,便于閱讀。
雖然整體色彩加深,但微信在設計時仍保持著清晰的層次。比如置頂聊天窗口的灰色會比其他窗口稍淺,聊天消息的標題和摘要也采用了明度不同的淺灰色來區分層級。除此之外,微信的彩色線型圖標在黑色背景上也變得更具科技感,顏值提升了不少。
微信的深色模式除了可以幫助用戶緩解夜間視力疲勞外,在白天使用也幾乎沒有障礙,總體來說,體驗感覺較好。
Q Q
如果說微信的深色模式更加注重顏值,那么騰訊旗下的另一款社交工具QQ則更加注重用戶的深夜閱讀體驗。
首先,微信在切換深色模式時,需要重啟軟件后才能生效。QQ在切換夜間模式時,則采用了一個平滑的漸變過渡,讓用戶可以快速適應場景切換。其次,為了減少夜間光線對人眼的刺激,QQ降低了信息與背景的對比度,對用戶頭像等圖片增加了遮罩,使其在弱光環境中看起來更加柔和。
當用戶開啟夜間模式時,還會有一個設計彩蛋:部分圖標會根據模式切換而改變。如消息圖標會從笑臉切換為休息的狀態,這種具有趣味性的設計,也會拉近用戶與產品之間的距離。
豆 瓣
普通模式下的豆瓣APP背景色為純白色,白天看偶爾都覺得有些刺眼,更不用說睡前必刷豆瓣的用戶有多煎熬。在被用戶罵了一輪又一輪之后,豆瓣APP終于也推出了夜間模式。
豆瓣的夜間模式和微信一樣,同樣保留了五顏六色的圖標。同時,豆瓣在設計時始終保證內容有良好的對比度和清晰的視覺層級,保證了信息結構的準確傳達。
在配色方面,為了避免“死黑”讓整個界面太過死板,豆瓣在黑色中還混入了藍紫色,讓背景色看上去更加通透。底部導航等主要按鈕則使用了豆瓣的主色調綠色,在夜間模式下既能清晰展示,又不會顯得過于刺眼,同時也保證了在強光模式下可以正常瀏覽。
知 乎
另一款社區APP知乎和豆瓣存在同樣的問題。知乎在設計夜間模式時,知乎采用了主色調藍色+深灰色的搭配,深藍和灰色作為背景,展示出的效果既有強烈的對比,又擺脫了深色的壓抑感。
與豆瓣不同,知乎的文本顏色選擇了對比度更低的灰色,通過字重進行區分。雖然這樣會讓整體頁面看起來比較和諧,但內容變得不夠突出,無法在最短時間看清標題,對于一個以內容為主的社區來說,無疑會給用戶帶來不太好的體驗。
知乎在設計夜間模式時目標應該很明確,即只考慮用戶在夜間的使用,因此整體色調都很暗,在強光環境下無法正常瀏覽。
bilibili動畫
B站剛推出深色模式時收到了許多批評,字體和背景色對比不強,視頻封面仿佛蒙了一層霧,一刀切的暗化處理,導致用戶瀏覽體驗極差。
在最近一次更新中,B站終于對深色模式進行了優化,適度提亮了視頻封面和圖標的亮度,將多彩型圖標調整為了單線型圖標,既統一了畫面風格,又提升了界面閱讀體驗。
設計深色模式時,必須注意各頁面的配色及對比度都要盡可能地統一。在深色模式下點開B站創作中心或推薦服務中的版塊時,加載畫面仍然是白色,突然出現的強光無疑會對眼睛造成刺激,對于用戶來說體驗感也極差。
百度網盤
高飽和度的色彩會在深色背景上產生炫光的視覺效果,引發視覺疲勞。百度網盤的深色模式下,背景接近全黑,圖標卻沒有太大的調整,給用戶帶來的閱讀體驗并不好。
同樣,由于背景顏色太深,導致百度網盤的文本和背景對比度太大,也存在難以閱讀的情況,對于誦讀困難癥患者來說,在閱讀時會感覺文字在旋轉、模糊。
在設計深色模式時,除了背景顏色盡量使用深灰色以外,還需要確保絕大部分區域保持深色,盡可能使用數量有限的色彩。把握好對比度和飽和度,才能設計出舒適的深色模式。
綜上所述,合理使用深色模式,可以降低屏幕亮度,不僅可以減少耗電量,還能減小對自己或他人眼睛的刺激。除此之外,深色模式對背景色、文字以及系統圖標的顏色都進行了優化處理,可以提升閱讀舒適度。對于喜歡深色或黑色系的朋友來說,深色模式更是一種不同于普通模式的全新體驗。
除了APP,不少生產力工具也都采用了深色界面,比如PS、摹客等。以摹客為例,用戶在進行設計時,深色界面不僅僅能降低眼睛疲勞度,還能突出你的設計內容,打造沉浸式的設計體驗。
隨著蘋果“黑色模式”的推出,深色模式逐漸成為APP設計的流行趨勢。作為設計師,也一定要掌握APP深色模式的設計技巧。從上述APP設計案例中,我為大家總結了以下幾點建議以作參考:
1.避免使用純黑色;
2.避免使用高飽和度的顏色;
3.文本顏色選用高亮色,但不宜使用純白;
4.做好情感化設計;
5.注意結構和層次感;
6.允許用戶自由切換深色模式和普通模式。
文章來源:UI中國 作者:摹客產品協作設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
所謂的“左右橫滑”交互英文名叫做“Horizontal Scrolling Lists”,最早可能起源于 Windows Phone 的橫向內容滑動設計。用于在同一個頁面的 X 軸方向拓展內容空間,“左右橫滑”的交互方式被廣泛應用于各類 App 中。
橫向滑動作為手勢交互的一個拓展,目的初衷是提升信息“內容和操作”的拓展性。
1. “內容”拓展性:
移動端的任何類型頁面內容都可能無法在一個界面呈現完整,因此滑動去呈現更多的內容,常見的當然是縱向滑動。但它無法承載所有類型內容呈現的問題,這個時候就需要橫向滑動來解決。
2. “操作”拓展性:
當一個頁面的內容已經是固定完整的,這時候需要用戶進行一些行為操作,如常見的下載、刪除、添加、管理…,而這些行為如果直接呈現在界面上必然導致混亂,因此需要配合一些橫向滑動激發這些行為,從而保證界面的流暢體驗。
橫向滑動從移動端手勢出現到現在十幾年的時間已經有了非常典型的使用場景,接下來我們就來列舉一下有哪些常見的類型:以下從「清晰度、效果」兩個緯度進行分解
解決內容拓展問題
這類場景通常是用戶最熟悉的,不論從認知清晰度、效果角度都是不錯的,主要原因是場景曝光度非常高、頻次非常高;比如Android\ios首頁橫滑切換app入口每天上百次的操作頻次;
解決內容拓展問題
這類切換方式適合內容相對聚焦和單一的產品,比如垂直類電商:wish、唯品會,所有內容僅僅是通過類目來區分的產品;微視:內容統一為小視頻…;百度地圖:橫滑查看更大范圍地圖…;由于內容的高度統一和整合,因此切換難度低,但在認知的初期會稍有一定的門檻,原因是大部分app都是縱向滑動feeds流,而且用戶記憶是海馬記憶,不會特別清楚記得app的操作,所以新打開app和新用戶會有一個認知過程,但門檻不高。
解決操作拓展問題(管理列表、IM列表、通訊錄list…)
解決操作問題
在所有類型中的橫滑,只有這種方式不是瀏覽型手勢而是操作型,通常這類功能隱藏在列表中,為了保證列表信息的有效性和美觀度,選擇隱藏操作功能,由于是低頻操作,所以初期需要用戶發現并成功使用該功能;不過目前很多list頁面都采用這種通用的交互手勢,因此用戶并不難發現。
最復雜也是最容易出現問題的
解決內容拓展問題
這是最容易出錯的一種場景,就是在整個界面中只有一個模塊采用橫向滑動,而其它內容又是縱向feeds流滑動;由于移動端內容的路徑多、入口多,因此用戶的核心操作流是:找入口——看信息——做任務;在這個過程中任何一個隱晦的、不常見的交互都很容易被用戶忽略,比如說:餓了么品質優選、唯品會二級類目、去哪兒旅游推薦…,這些案例其實是為了橫向空間拓展更多的內容而做此選擇,但通常情況下隱藏內容點擊率會驟降,很少有用戶耐心的橫滑瀏覽完成,因此設計師要嚴格把控數量以及內容的質量;在這里還有一種情況是很嚴重的,就是模塊級的橫滑內容與縱向列表之間有疊加交互,就會導致用戶反復在2中操作中完成任務,這一點非常不建議使用此手勢,當然以下案例并沒有這種情況。
1. 幾乎能夠100%適配到所有設備,保持了一致性
2. 為二級信息提供了展示空間,并且不占用頁面空間。
比如在圖片畫廊里的圖片,橫向滑動可以讓用戶預覽內容,可以劃過或者點擊查看。
3. 橫向滑動節約了縱向屏幕空間。
而不是將所有內容都展示在一個很長的頁面??v向布局讓所有的信息都成小塊展示。但是橫向滑動更加靈活?,F在,內容可以在橫向和縱向兩個方向同時展示。
4. 橫向滑動可以讓用戶預知分類里的內容,通過往一邊滑、向下滑,差不不同類別的內容。
兩個維度讓用戶可以在同一個界面中看到更多的類別和選擇。
5. 橫向滑動的內容需要保持高質量和持續吸引力才能提升點擊轉化。
1. 挑選合適的使用場景
單頁多維度的信息結構是“左右橫滑”最適合的應用場景。傳統的 List 適合縱向無限呈現單一屬性的內容(比如朋友圈或知乎的回答),而對于 App 首頁等多種信息聚合的頁面,就適合橫向開拓內容維度。
2. 顯眼并適宜的主題展示
3. 引導左右滑動(可見性)
4. 控制數量并避免極限情況
5. 低效率和錯誤的優先級
設計師們都喜歡“左右橫滑”的設計,不僅因為信息密度大,頁面層次好梳理,更多也是因為操作方式“酷”。但有經驗的設計師會盡可能拒絕“左右橫滑”,因為它的效率還是太低。而效率低,體現在兩個方面:
首先,就像上面說過的,更多的小白用戶對左右滑動的預期并不強,還是更加適應縱向滑動的傳統交互方式。違反了“Don’t Make Me Think”的基本原則。
其次,縱向和橫向優先級常常導致預期錯誤。以下圖 App Store 為例,所謂的內容都是 App,泳道只是用不同的維度把 App 組織起來。
如果你要購買其中一個資源位,你要更高優先級“泳道”中的第二屏位置,還是低優先級“泳道”中的第一屏位置呢?
文章來源:優設 作者:Jingwhale Design
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務