超周全!可能是最周全的「深色界面」使用方法+優(yōu)瑕玷分析
@布萊恩臣 (作者):適當(dāng)?shù)氖褂蒙钌缑?,可以使界面在市面中普遍淺色系之中脫穎而出,更顯現(xiàn)個(gè)性。
一. 前言
開始脫手設(shè)計(jì)界面時(shí),必要根據(jù)產(chǎn)品的調(diào)性選擇應(yīng)用的主色以及背景色,而這時(shí)是否選用深色背景彷佛不是首要選擇,許多設(shè)計(jì)師會(huì)默認(rèn)選擇白色作為背景。這篇文章就是來分析一下深色界面,看看深色界面會(huì)有哪些使用方法,有哪些好處以及題目。
早在2009年,國(guó)外博客網(wǎng)站ProBlogger針對(duì)博客使用淺色照舊深色背景進(jìn)行了一次投票。投票效果表現(xiàn),有接近一半的人喜好用淺色,只有10%的人投給了深色,風(fēng)趣的是,有36%的票數(shù)是投給“看現(xiàn)實(shí)情況”,也就是說淺色并不是人們選擇的唯一情況,深色假如使用切當(dāng),照舊有不少人喜好的。
二. 感受
時(shí)尚優(yōu)雅
使用低飽和度背景和高飽和度的內(nèi)容,給人簡(jiǎn)約直白的清爽結(jié)果。
神秘感
通過展示內(nèi)容部分細(xì)節(jié),留給人更多的遐想空間。
奢侈高貴
深色界面加上金燦燦的土豪金,更多的留白,會(huì)有慎重可靠的感覺。
煩悶與恐驚
表達(dá)這種情緒首選深色背景,比淺色更能體現(xiàn)氣氛。
三. 好處
體現(xiàn)光感
行使在深色背景下的強(qiáng)烈對(duì)比上風(fēng),發(fā)光的結(jié)果會(huì)得到最大的發(fā)揮。
視覺條理
增長(zhǎng)深色背景,可以雄厚界面的層級(jí)關(guān)系。
視覺對(duì)比
深色背景與內(nèi)容進(jìn)行強(qiáng)烈對(duì)比,可以更有用的凸起內(nèi)容,緊張內(nèi)容一覽無余。
長(zhǎng)期閱讀
深色界面比淺色更適合長(zhǎng)時(shí)間查看,分外是夜間。許多設(shè)計(jì)類軟件和開發(fā)軟件都會(huì)默認(rèn)使用深色主題皮膚。
四. 技巧
考慮內(nèi)容可讀性
在深色界面中表現(xiàn)筆墨,必要考慮文本與背景的對(duì)比度是否充足大,次要文本是否依然清晰可見。
色彩傾向
不是所有界面都是純黑灰色作為背景,許多看上去接近深灰色的界面,都會(huì)根據(jù)產(chǎn)品或者作品的品牌色方向進(jìn)行調(diào)整。
黑色更省電
屏幕是通過發(fā)光傳導(dǎo)色彩,而深色界面發(fā)光較弱,因此許多小型的電子產(chǎn)品都會(huì)選用純黑色背景,既凸起內(nèi)容,也省電。
五. 總結(jié)
適當(dāng)?shù)氖褂蒙钌缑?,可以使界面在市面中普遍淺色系之中脫穎而出,更顯現(xiàn)個(gè)性。但必要考慮產(chǎn)品要傳達(dá)給用戶的氣氛和品牌形象,合理使用內(nèi)容色彩,不單方面尋求個(gè)性與視覺結(jié)果,避免畫不達(dá)意的情況。在這前提下,大家不防嘗試一下這種小清新以外的風(fēng)格。
本文地址:http://m.likemindfilms.com/tutorial/di4018.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏