<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 微信黑暗模式終于來啦!UI設計細節完全分析及體驗

    2020-3-31    鶴鶴

    靜電說:它來啦!前一段時間傳的沸沸揚揚的蘋果與微信黑暗模式的糾葛,終于以微信適配iOS端告終。3月22日靜電一覺醒來,微信已經正式開啟了“暗黑”模式。不過,很多人也許發現不了,因為手機白天還是淺色模式,只有到晚上才會改為黑暗模式。




    如何開啟微信黑暗模式?


    首先,你必須更新到iOS端的微信7.0.12版本。然后,在白天,只有你手工開啟了“設置”>“顯示與亮度” 菜單下的深色模式,它才有效果。至于安卓用戶,截止3月22日文章發布的時間,官網依然沒有更新。安卓的小伙伴就再等等吧。開啟后效果如下:



    這次的改動可以說是很全面的,幾乎所有的界面都進行了調整,包括聊天窗口,朋友圈文章,微信游戲,幫助頁面,看一看等等,但是微信小程序則依賴開發者的適配,目前來看,還都是白色的。


    不少小伙伴對于黑暗模式的設計還不是特別熟悉,接下來咱們通過微信設計細節的分析,來看看小伙伴們都能從微信的改變上學到什么?



    Tab菜單對比及顏色字號分析


    請注意,以上內容為截圖取色,可能存在不準的情況。但是可以看到,微信在Tab背景上并不是使用的純白或者純黑色。 在Tint顏色上,亮色模式和暗色模式的顏色也不一樣,這符合iOS 13 黑暗模式設計的規則定義。一般來說Tint顏色,黑暗模式下更亮一點。(左側色卡為淺色模式,右側為深色模式,下同)


    另外,以上取色均沒有考慮透明度,在實際應用中需要考慮透明度的使用。而對于Tab背景來說,亮色模式和黑暗模式均沿用透明毛玻璃效果。



    聊天列表頁面


    左側色卡為淺色模式,右側為深色模式,均沒有考慮透明度影響。


    圖標顏色分析對比


    在聊天列表,通訊錄列表頁面,系統圖標在兩種模式下的顏色均保持一致,未做改變。


    但在發現頁面中,列表左側的icon顏色則有略微變化。總體來說,黑暗模式下比亮色模式下的圖標顏色更“亮”。是不是這里比較拗口?也就是下圖中,右側比左側的圖標,亮度提升啦!


    支付界面中的圖標,處理方式同上邊一樣,右圖比左圖的圖標亮度要高一些。但是下圖中綠色的大色塊,顏色卻一致。





    公眾號文章頁面對比


     



    而文章背景顏色,亮色模式為#FEFFFF,黑暗模式為#232323,可見也不是完全的純白和純黑色。另外,想在黑暗模式上貼各種表情的作者可要注意了,你的GIF表情可能會變成上圖那樣? 就像在黑色背景下開了個白色天窗!一大波白色不透明GIF圖即將失效!



    朋友圈界面對比


    朋友圈界面的背景色和點睛色均發生了變化,在黑暗模式下,發廣告還是美麗的照片,用戶的關注程度都會提升,當然,不好看的圖片,也會把缺點放更大。所以讓你的照片更吸引人吧。





    聊天頁面


    聊天頁面中相應的Tint色也有變化。另外,請注意,背景色依然不是純白色和純黑色。而微信的設計師傾向于使用#FEFFFF而不是#FFFFFF,雖然這倆顏色相差幾乎為零,肉眼不可分辨。是不是這位設計師有某種潔癖?或者是純粹弄錯了?





    關于聊天時使用的透明動圖,其實仔細看還是有不少毛邊的,之前我們也做過相關的分析文章。因為這種情況單純使用256色的GIF效果已經非常差了。具體實現方式可以看另一篇文章:不要大白邊!聊聊GIF動畫毛邊的處理方法(評論發送)。以免出現像下面的情況:




    彈層及搜索框


    彈層顏色在兩種模式下顏色沒有發生變化,搜索框顏色在針對黑暗模式設計時,可以考慮在白色基礎上進行透明度處理。


     



    最后的總結(黑暗模式設計思路)


    · 一般情況下Tint顏色,在黑暗模式要比淺色模式要亮,請注意,不管是圖標還是點睛的顏色。

    · 蘋果的設計指南中建議背景色為純黑色,但是真正實踐過程中,沒必要完全遵循,可以用一定灰度的顏色替代。

    · 使用具有透明度的圖標和文字,在亮色模式轉黑暗模式的時候會更加輕松

    · 不管你使用怎樣的顏色,請確保黑暗模式下的設計元素具有足夠的可讀性,同時兼顧美觀。

    · 黑暗模式下的層級設計與亮色模式不同,陰影在黑暗模式下沒有太多作用。

    · 當發布一個大版本的APP更新時,可以進行分渠道投放,讓一部分先用上新版本,并測試其反饋結果,進而再進行全渠道的投放,可以最大限度降低被用戶吐槽的風險。

    轉自:站酷-靜design


    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://www.skdbbs.com

    存檔

    主站蜘蛛池模板: 久久成人国产精品一区二区| 欧美日韩国产精品系列| 国产乱码精品一区二区三| 亚洲韩国精品无码一区二区三区 | 亚洲?V无码成人精品区日韩| 好属妞这里只有精品久久| 日产精品一线二线三线芒果| 欧美精品黑人粗大视频| 国产福利电影一区二区三区,亚洲国模精品一区 | 91精品国产高清久久久久久91| 精品久久久久久成人AV| 中文字幕无码精品三级在线电影| 国产欧美精品一区二区色综合| 欧美国产日本精品一区二区三区| 久久精品中文无码资源站| 在线亚洲欧美中文精品| 久久国产精品免费| 国产精品无码专区在线观看| 亚洲综合精品一二三区在线| 国产亚洲精品观看91在线| 岛国精品一区免费视频在线观看| 久久er99热精品一区二区| 日本VA欧美VA精品发布| 亚洲精品无码久久久久| 欧美精品免费专区在线观看| 九九热这里只有国产精品| 国产午夜精品一区二区三区小说 | 久久亚洲私人国产精品vA| 一本色道久久88精品综合| 无码精品第一页| 亚洲国产精品第一区二区三区| 欧美精品人爱a欧美精品| 欧美精品综合视频一区二区| 精品无码人妻久久久久久| 精品人妻少妇嫩草AV无码专区| 国产精品无码久久综合网| 国产欧美一区二区精品性色99 | 亚洲欧洲精品无码AV| 一本色道久久88综合日韩精品| 亚洲精品国产V片在线观看 | 中文字幕日韩精品无码内射|