免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

網(wǎng)站用深色界面該如何設(shè)計(jì)網(wǎng)頁?

2024-03-20    分類: 網(wǎng)站建設(shè)

習(xí)慣了淺色界面的設(shè)計(jì)?本文將帶你了解深色界面的設(shè)計(jì),聊聊深色界面下的設(shè)計(jì)細(xì)節(jié),使你設(shè)計(jì)的深色界面在普遍的淺色系界面下脫穎而出,展現(xiàn)個性。

這也是這次主題的由來,關(guān)于深色界面的設(shè)計(jì),深色界面它有著明顯的優(yōu)缺點(diǎn),不太普適,設(shè)計(jì)合理能彰顯高端、優(yōu)雅、奢華的氛圍。相反,它又可能毀掉頁面中你所有精心設(shè)計(jì)的 UI ,甚至影響使用效率,體驗(yàn)上大打折扣。

以下是我在設(shè)計(jì)網(wǎng)易郵箱大師 Mac 版 Dark模式時,整理的一些視覺上需要注意的小細(xì)節(jié),希望對大家在設(shè)計(jì)深色相關(guān)的界面時有所幫助。

網(wǎng)站文字顏色

在深色界面下,文字顏色盡量不要使用純白。對于黑底白字的形式,白色文字更加容易吸睛,視覺刺激更加強(qiáng)烈,但強(qiáng)烈的同時會帶來視覺疲勞,造成不適的閱讀體驗(yàn),甚至極端情況下的對比會使白色產(chǎn)生眩光,不利于文字的識別。


網(wǎng)站文字間距

大多數(shù)研究表明,在可讀性方面深色界面相比淺色界面略差,所以適當(dāng)?shù)脑黾游淖值亩温溟g距,行高等,是在深色界面下增強(qiáng)文字可讀性的重要途徑。


網(wǎng)站文字字體

在深色界面下,無襯線字體相比襯線字體可讀性更強(qiáng),但是襯線字體相比無襯線字體在深色界面下更顯優(yōu)雅,前提是字體需要放大,留足空白。


網(wǎng)站圖標(biāo)形狀

我們應(yīng)該仔細(xì)地觀察圖標(biāo),做出藝術(shù)性的反轉(zhuǎn),讓它在淺色和深色界面下都能很好的傳達(dá)表意。例如下圖的笑臉圖標(biāo),一般在深色界面下做法可能就只換了顏色。


初看似乎沒有什么大的問題,但是仔細(xì)觀察就會發(fā)現(xiàn),淺色界面下使用邊框形式來設(shè)計(jì)圖標(biāo),中間是空白的,這樣做是因?yàn)榭梢岳冒咨尘皝砀谜宫F(xiàn)它的形狀。但是,如果把它同樣放在深色界面下,它的形狀感和體積感好像都消失了,變得有點(diǎn)奇怪,此時我們要反轉(zhuǎn)下,強(qiáng)化它的形狀和體積。

網(wǎng)站按鈕狀態(tài)

按鈕的點(diǎn)擊狀態(tài),如果在淺色界面下,一般的做法是加深按鈕背景。但是在深色界面下面也采用這種方式,就會發(fā)現(xiàn)點(diǎn)擊狀態(tài)下的按鈕顏色跟背景更加接近,模糊了按鈕的邊界和輪廓。


網(wǎng)站分割線

分割線也是我們設(shè)計(jì)中常用到的元素之一,用來創(chuàng)建內(nèi)容間的視覺分割。然而,在深色界面下如果只是簡單的反轉(zhuǎn),黑底上用白線來做視覺分割,效果并不是那么理想。


那如果我們都用黑線來做分割,這樣又會覺得比較悶,不夠精致。

所以我覺得用于不同區(qū)域之間的分割,可以用黑線,同一區(qū)域之間的區(qū)分可以是比較弱的白線,這樣顯得畫面更加細(xì)膩,而且語意明確,認(rèn)知簡單。

網(wǎng)站色彩

相比淺色界面,深色界面下色彩應(yīng)該更亮,更飽和些。舉個例子,看下圖郵件列表的焦點(diǎn)色,相同的藍(lán)色在深色界面下顯得有點(diǎn)泛白。優(yōu)化后,藍(lán)色更純正,跟深色界面也更加匹配。


網(wǎng)站色彩傾向

在深色背景中加入有彩色點(diǎn)綴,可以是品牌色或者其他顏色,這會使設(shè)計(jì)顯得更加優(yōu)雅、高級。


網(wǎng)站色彩感知

從色彩心理學(xué)上來說黑色會傳遞出高端、正式、名望、權(quán)力的感覺,這也是為什么許多大品牌會圍繞黑色來做視覺設(shè)計(jì),并且使用黑白來做主要的配色方案。


網(wǎng)站用黑色

自然界中沒有百分百的黑色,我們?nèi)粘I钪锌吹胶谏鋵?shí)是深灰色,如果設(shè)計(jì)中使用了純黑色,會顯得不自然。因?yàn)榧兒谏梢詨旱挂磺校w過一切其他元素。


網(wǎng)站視覺層次

在深色界面下更應(yīng)該注重視覺層次,每個版塊之間的對比要清晰明了,層次分明,否則用戶會很容易在布局間迷失,造成不好的體驗(yàn)。


網(wǎng)站留白

深色界面給人沉重的感覺,擁擠的布局會加重這種感受,所以在深色界面下我們更應(yīng)該使用留白,或者說是「留黑」,這樣才能平衡布局,使元素更清晰的呈遞,從而吸引用戶注意。


結(jié)語

以上這些就是我在設(shè)計(jì)深色界面時,對一些小細(xì)節(jié)的梳理。其中有幾點(diǎn)在淺色界面下也同樣適用,只是在設(shè)計(jì)深色界面時更應(yīng)該把握好那個「度」,來彌補(bǔ)深色界面的缺點(diǎn),揚(yáng)長避短,使深色界面在普遍的淺色系界面下脫穎而出,展現(xiàn)個性。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司!

當(dāng)前題目:網(wǎng)站用深色界面該如何設(shè)計(jì)網(wǎng)頁?
標(biāo)題鏈接:http://m.newbst.com/news9/320859.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供響應(yīng)式網(wǎng)站企業(yè)建站營銷型網(wǎng)站建設(shè)用戶體驗(yàn)靜態(tài)網(wǎng)站品牌網(wǎng)站建設(shè)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)