深色系的用戶界面設計,真的只是在耍酷么?

2019-06-18 107 0 編輯:深正互聯 來源:互聯網

在界面中使用深色和陰影一直以來是備受爭議的話題。因為合適的背景色是幫助提高整個產品使用效率的關鍵因素,反之它也可以否定其它圍繞布局和功能的設計方案,這就是為什么這個問題如此重要。今天我們的文章主要討論深色背景在用戶界面設計中的優點和缺點,所以我們一起來看看深色這個話題。

網頁設計

在早期的文章中我們已經分析過影響配色方案的選擇以及基礎背景色的因素并且提及了在此過程中要考慮的一些重點。這一次我們將聚焦更多細節在網頁和移動應用設計中運用深色的優點與缺點。


通過創建和測試不同的用戶界面已經證明了深色背景具有更加強大的吸引力,而且可以帶來積極地用戶體驗。


讓我們先理所當然的認為這個結論是正確的,然后討論一下什么時候、什么地方使用可以讓其發揮最大的作用。


深色的視覺感知

2009年一項發表在ProBlogger中的調查結果已經表達了一些有趣的觀點。詢問被調查的閱讀者更喜歡用哪一種顏色來做博客的背景色。幾乎一半的被測試者更傾向于選擇淺色的背景——這是合理的,因為博客一直是文字驅動的,所以可讀性方面是最重要的。


但是,10%的被調查者回答說他們更傾向于深色背景,并且超過1/3的人還提到這種選擇需要基于博客的性質和內容。


設計師在設計過程中尋找方案時,如此高比例的用戶需求是不能夠被忽略的。此外,在一些不以文字驅動為主的網頁或應用中這個比例將更大。這是一個很好的例子來證明用戶研究和調查是設計過程中很重要的部分。了解用戶想要什么或者至少知道可以改變用戶傳統習慣的極限是什么。


Richard H已經針對這個問題提供了科學的研究。Hall和Patrick已經重點強調了關于背景顏色的視覺感知和表現的觀點。一些科學家在早期通過一些實際的實驗已經從網頁的性能和可讀性作了分析。


作者總結如下:

他們發現兩極的顏色組合有更好的性能(就是深色字放在淺色背景上),以及前面研究中提到的,對比度更大的顏色組合性能更好。


因此,在其它情況下深色背景也可以像淺色背景一樣有效,尤其是布局元素的對比度和易讀性進行了合適的設計和測試。研究包含了很多基于用戶測試得出的有意思且有用的信息,都是從不同顏色組合及其有效性的角度出發。


可讀性方面

用戶體驗設計領域非常有名的專家Jacob Nielsen提到:文字和背景需要使用有很強對比度的顏色。


最理想的易讀性是黑色的字放在白色的背景上(所謂的正文本)。白色的字放在黑色背景上(所謂的負文本)也不錯。


雖然正文本和負文本的對比度是一樣的,反色的配色方案會有一點偏離和降低用戶閱讀速度。易讀性容易受到配色方案的影響,讓文本比純黑更輕一些,尤其是背景色要比純白稍微深一些。事實上,可讀性是非常重要的,它不僅僅在文字方面影響產品的表現。所有的控件、字母、數字、圖形符號和圖標都應該在界面上都應該容易地被注意到和辨認出來。因此,設計師需要準備在不同設備上選擇和測試適合深色背景的字體、圖標和圖片。


例如在Awards上有一些優秀的深色網頁和應用設計的實踐集錦,它們使用深色背景作為基礎配色方案但是并沒有降低可閱讀性。


為了避免降低可用性的問題,在設計過程中一定要記住:深色背景會吸收一些其他元素的光,所以一定要在各個元素之間留出一定的空間或者說要有透氣感。


較長的距離可以讓大量內容的可讀性和易讀性變高。行間距和文本長度的設計問題對可讀性的影響很大,尤其是在深色背景上。所以段落尺寸,字間距和行間距需要謹慎地考慮;


深色不只是意味著黑色,在很多特定的設計案例中會在不同背景色上放置內容,然后進行多次開放性試驗的測試;陰影、漸變和發光都會影響可讀性;無襯線字體會更加清晰,但是襯線字體會看起來更加優雅,將這些嘗試應用在實踐中可以提高內容的可讀性。

對比度方面

另外一個有意思的事情是webdesign.about.com提供的關于視覺方面的思考,詳見下方的表格。這個表格展現了在不同顏色組合中表現出來的不同程度的對比度,可以發現一個有趣的事實:表格中的黑色部分幾乎在所有顏色上都有良好的對比度。在每一個項目的界面設計中進行謹慎的測試,這就是為什么可以試著使用深色背景作為不同的設計方案。


在可讀性方面,對比度對于內容的可識別性和易讀性也是一個很重要的因素。


在早期一個關于對比度方面的研究表明:在深色背景上,要確保你的文字不要過于明亮,把字從白色調整為淺灰色,或者使用暗色降低極端對比度和刺眼的程度。


同樣的這個原則可以用在做幻燈片的時候,需要至少添加5%的灰色來降低白色的明亮度。有意思的是它“讀起來”還是像白色一樣。


此外,還要將字體加粗,這樣字體就不會被深色背景吞沒。這個測試,也包括其它的測試,為網頁和App屏幕上更有效地呈現本質內容提供了新的調色方案。


還有一件需要提醒的事情是,深色背景變得越來越深,通常是為了更好的展示例如圖片、照片、插圖、海報和廣告等圖形內容。良好的構圖以及遵循視覺層級的原則,能夠極大地提高布局元素的視覺感知。當界面比原稿更加圖形化的時候,在一些案例中就可以讓深色背景變得更加有效且更加有吸引力。


情感認知方面

色彩心理學是在選擇背景色時另外一種需要考慮的,設計不僅僅是為了展示外觀還要包括它所承載的內容。深色總是與優雅和神秘相聯系。此外,黑色也常常和正式、威望、權利聯系起來。這也許就是為什么很多大品牌喜歡圍繞黑白主題來建立自己的視覺展示,深色作為主導色,淺色呈現內容給閱讀者。界面設計中使用這些可以為其它設計方案和產品的一般展示方案提供更多的支持。


深色背景的優點

根據以上提到的所有觀點,我們可以總結出深色背景運用在用戶界面中有以下優點:


時尚且優雅

神秘感

奢華且大牌

對比度的有效范圍變廣

支持視覺層級

更好地呈現內容

視覺吸引力


需要考慮的情況

另一方面,在深色背景中如果一些很小的細節在排版中丟失或沒有合適的展示出來,需要特別注意和分析。這種情況下我們需要考慮:


用戶研究。 

實際調查、理論調查和實驗可以從目標受眾那里得到重要的數據反饋,希望根據這些來選擇有效且有吸引力的設計方案。

競品研究。 

調查目前市場上相近的競爭產品可以幫助我們理解哪一種設計解決方案已經被其它競爭對手應用了,并且這些因素可以影響選擇最初的設計方案,有助于做出能夠引起用戶注意的產品。

用戶測試。 

深色背景在可讀性和辨識度方面容易出問題,因此應該在各種設備和各種分辨率上進行嚴格的測試。

環境因素。 

分析產品在被目標受眾者使用時典型的條件,用戶可以提出其它的原因或者反對深色背景的觀點。

大量的內容。 

大量的元素和區塊需要在屏幕或網頁上凸顯出來,可以影響對背景色的決定:更深的背景色在元素之間留了太少的空間導致很難獲取信息。

內容的本質。 

相對于大量的復制文字,深色背景可以更好地凸顯基于圖形元素的設計。


本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾 大家的表情包赚钱了吗 琳琅试用怎么赚钱 捕鱼游戏宣传图 保险赚钱的商业模式 E游彩游戏 微商产品葳fxsh33赚钱 悬疑类小说在哪发表赚钱 麻将的玩法和规则 用微信赚钱的游戏有哪些 赚钱没有今年和明年 亿豪彩票苹果 大丈夫几集你又不赚钱 红鹰彩票网址 在深圳摆地摊赚不赚钱 医生如何在工作时间外赚钱 现在在家养什么赚钱快