时时彩五星定位公式:關于APP黑暗模式的設計探索

  • A+
所屬分類:經驗思維

排三复式投注计算公式 www.ygqvkm.com.cn 本文來源: 杜昭(公眾號:設計的威嚴) , 共 1632 字

前不久蘋果發布會IOS13系統和大家見面了,其中的黑暗模式是一項比較大功能性更新,黑暗模式倒也并不是什么新奇的功能,國內的很多APP早就進行了開發,包括一些國產手機廠商也做了類似了夜間模式或是護眼模式。

一、黑暗模式的由來和作用

最早應該是智能手機的普及大大延遲了人們的睡眠時間,大家都習慣晚上躺在被窩里看一會手機才能睡著,但是關了燈之后手機屏幕的亮度就會特別刺眼,由于絕大多數APP頁面背景色都是淺色系,與周圍環境的亮度對比比較大,導致手機屏幕和白天一樣的亮度就會感覺十分刺眼,所以一些產品開始開發了黑暗模式。

關于APP黑暗模式的設計探索

黑暗模式的主要作用就是為了讓用戶在環境亮度比較暗的時候能夠舒適的使用產品,避免由于刺眼、視覺疲勞等問題暫時放棄使用產品,在一定程度上是為了延長用戶使用的時間。這里有一點要注意的是刺眼程度并不是由手機屏幕的亮度決定的,而是由手機屏幕亮度和周圍環境亮度的差值大小決定的。如下圖,你會覺得哪個白光更刺眼?

關于APP黑暗模式的設計探索

 

二、黑暗模式的切換方式

在夜間通常情況下,我們面對屏幕的距離會比白天更近,在長時間近距離的注視,對眼睛傷害比白天更大。所以睡前使用頻率較高的app,會開發夜間模式,如閱讀類、資訊類、音樂類及瀏覽器等

a.列表切換方式

關于APP黑暗模式的設計探索

關于APP黑暗模式的設計探索

b.按鈕切換方式

關于APP黑暗模式的設計探索

關于APP黑暗模式的設計探索

關于APP黑暗模式的設計探索

c.宮格切換方式

關于APP黑暗模式的設計探索

關于APP黑暗模式的設計探索

d.自動切換切換方式

自動切換模式是更加人性化的一種體驗方式,APP會設置一個默認時間段(多為夜間十點到次日早晨六點),在固定時間段內,也可以根據APP的使用場景自定義夜間模式的時間段;開啟后會自動進入夜間模式;

關于APP黑暗模式的設計探索

日間與夜間按鈕切換的趣味化方式欣賞:

關于APP黑暗模式的設計探索

關于APP黑暗模式的設計探索

關于APP黑暗模式的設計探索

關于APP黑暗模式的設計探索

 

三、常見的兩種黑暗模式設計方式

總結了手機上的一些有夜間模式的APP后我發現黑暗模式的設計從簡單到復雜大致有下面幾種:

1)在所有頁面上加一層黑色半透明的蒙版,例如今日頭條、微博、百度、虎嗅、等等;

關于APP黑暗模式的設計探索

這種方式的體驗實在談不上優秀,感覺有一些偷懶的嫌疑。但是這種方式的好處同樣存在,就是實現起來比較簡單,不知道是不是由于產品內容數量太大,圖片展示多的原因導致頭條不得不采用這種方式;

關于APP黑暗模式的設計探索

2)改變背景色色值和文字色值,例如夸克瀏覽器、網易新聞、網易云音樂、糗事百科、QQ等等;

關于APP黑暗模式的設計探索

這種方式一般是把頁面中最大的光源調整成為和環境接近的顏色,通過降低亮度差值的方式降低刺眼度。這種方式的設計成本比第一種要大,需要針對夜間模式的頁面進行顏色、字體、icon等方面的定義,當用戶開啟夜間模式時,調用夜間模式的UI界面;開發和適配的難度增大,實現成本高,并且后期版本迭代的時候都需要進行研發和維護,小型研發團隊負擔很重。

關于APP黑暗模式的設計探索

QQ對于黑暗模式的設計就更加細致一些,除了背景色、文字顏色、圖片之外對底部的標簽欄也有黑暗化設計,并且這種設計也不是簡簡單單的修改顏色,而是做了更加細節的場景化設計。

關于APP黑暗模式的設計探索

 

四、黑暗模式是如何實現的?

原理我們都懂了,那么在具體場景下黑暗模式是如果實現的呢?這里不同的元素實現方式有些區別。

1)文字和背景色只需要設置好兩個不同的色值,通過打開和關閉夜間模式的按鈕進行觸發修改就能實現;

2)復雜一些的按鈕和圖標需要預先設計好兩個場景所需的文件,同樣在打開和關閉夜間模式的按鈕時進行替換按鈕圖片即可;

3)如果使用的是一些特殊格式的圖片(文字圖片)可以通過代碼來控制圖片的顏色達到實現的目的;

4)對正常格式的圖片進行處理是最麻煩的,圖片在黑暗模式下會變暗,這種變暗有兩種實現方法,第一種和今日頭條的實現方法類似,就是在圖片上增加一層黑色半透明的蒙層來實現變暗,如下圖:

關于APP黑暗模式的設計探索

第二種是把圖片置于頂層在底部放一個黑色色塊,通過調整圖片的透明度來實現變暗,兩種方法效果差別大。

關于APP黑暗模式的設計探索

五、對黑暗模式設計要點的總結

最后總結一下設計黑暗模式時的步驟,大致如下圖:

關于APP黑暗模式的設計探索

當然,在具體設計的時候同樣需要考慮你的產品是否需要黑暗模式,需要到什么程度?使用場景是否值得去添加黑暗模式?添加后能為產品的什么指標帶來增長?一個體驗優秀的產品絕不是大而全的功能堆砌,在設計時一定要帶著目標去設計。希望我的分享能對你產生一點點幫助!

?

發表評論

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: