毅耘資
返回列表
UI設計中妙用無限的深色系背景
UI設計中妙用無限的深色系背景2017-12-27毅耘科技1551

UI設計中妙用無限的深色系背景

【毅耘科技】

又是一篇來自Tubik Studio 的文章,雄厚的設計項目經驗使得這家資深設計機構對于設計的每一個細節都有著獨特而系統的見解。今天的文章聊的就是深色系背景在設計中的運用,這當中有什么門道呢?看下去~

陰郁系背景,或者說深色的背景,在UI設計中的運用至今都是一個相當有爭議的議題。背景選取對于界面的使用效率而言是至關主要的,合理的背景設計讓界面更易用,相反,一個不恰當的背景則可能毀掉你精心設計的UI。今天我們一路來探討一下深色背景在UI設計中的使用技巧和注重事項。

影響配色方案和背景色選取的因素有許多,深色的背景在網頁和APP UI 界面中運用時,優點和瑕玷一樣顯明。Tubik Studio 的諸多設計項目的現實經驗證實,深色背景自己的確可以帶來優秀的用戶體驗,提供極具吸引力的解決方案。所以,我們探討一下如何在UI設計中最大程度地運用深色系背景。

UI設計中妙用無限的深色系背景

深色系視覺感知

早在2009年的時候,ProBlogger 就曾做過響應的調研,當問及用戶他們喜好什么樣的博客背景之時,幾乎有一半的用戶反饋喜好淺色的背景——這很合理,畢竟博客是以文本內容為主,淺色的背景更吻合大家的日常閱讀習慣。不過有意思的地方在于,也許10%的用戶反饋會更喜好暗色背景,也許三分之一的用戶則認為背景的色彩與網站自己的屬性以及內容相關。同時,這也意味著有相當大一部分用戶需求在設計師設計過程中被忽略掉了。然而,對于非文字驅動類的網站和APP當中,用戶對于深色調背景方面的需求可能還要高。用戶調研在現實的設計項目中的主要性,由此可見一斑。

用戶對于背景顏色的感知規律在Richard H.Hall 和 Patrick Hanna 的科學研究項目中得到了證實。早些時候,不同領域的科學家專門針對網頁的可讀性進行了系統化的實驗和分析,他們得出了這樣的結論:背景和內容兩者之間的對比度和可讀性是成正比的,白色背景下的黑色文字擁有最好的可讀性。這個道理同樣適用于黑底白字,控制好對比度和清晰度,兩位科學家又合理的設計整個實驗。這項研究包含了許多不同色彩組合的有用性測試,對于設計師而言有很主要的參考意義。

UI設計中妙用無限的深色系背景

可讀性方面

用戶體驗領域最著名的先驅之一 Jacob Nielsen 曾經說過:“文字和背景應當使用高對比度的配色。白底黑字能將可讀性提拔到最高,黑底白字在可讀性上的效果幾乎是一樣的。雖然兩種配色體例對比度是相同的,但是后者照舊會讓用戶對文字的識別稍慢一些。受限于配色方案,白色的文本內容相比于白底黑字的情況,會顯得更加纖細、模糊,整體的清晰度其實是不如常見的黑字。這種情況在純黑背景和純白字體的搭配下,最為顯明?!?/p>

的確,可讀性是影響產品性能的最主要的影響因素,而可讀性又不僅僅只牽涉到文本,所有有意義的文本、標識、符號、數字、圖案都存在可讀性的問題。因此,當設計師預備使用深色背景的時候,應當在不同的設備上測試字體、圖標和圖像在深色背景下的現實效果,用來支撐整個設計。

UI設計中妙用無限的深色系背景

正如同Awwwards 網站所提供的最佳黑色細網站設計合集中所展示的,這些優異的黑色系網站和APP頁面為了在黑色背景上正常顯示內容,都精心遴選了合理的配色方案。這些優異的案例為我們貢獻出了如下經驗:

·因為深色的背景會“吸收”其他元素的“光芒”,所以元素之內、元素和元素之間要留有足夠的空間,確保識別度;
·較長篇幅的文本具有更好的可讀性,對于用戶更容易消化
·行間距和文本的長度對于可讀性有顯著的影響,尤其是在深色的背景之下,所以篇幅長短、字間距、行間距需要細心考慮
·深色并不意味著是純粹的黑色,不同深淺的背景和文字的搭配帶來的效果也不盡相同,所以應當懷著開放的心態多加試驗
·色度、漸變和光暈對于可讀性有著顯著的影響
·非襯線字體在深色背景下可讀性更強,襯線字體在深色背景下則會顯得更加優雅。在現實設計過程中應當運用好兩者的特征。

對比度方面

Webdesign.about8533 所給出的這個對比度的表單很好的為我們顯現了不同色彩在對比度上的現實效果。這個表格最有意思的地方在于,黑色這一欄證實了黑色幾乎是唯一一個能和其他色彩都構成不錯對比度的色彩。在進行界面設計的時候,盡量細心測試每種色彩,而黑色的這種特征使得深色背景下的色彩搭配擁有更多的可能性。

UI設計中妙用無限的深色系背景

同樣的,對比度也是確??蓜有缘谋孀R度和清晰的主要因素。

有個早期的調查是針對對比度和清晰度的,調查注解:在陰郁的背景下,盡量不要使用純白,應當將白色淡化為淺灰色,防止極端的對比使白色產生炫光,而消弭炫光至少需要5%的灰色來達成效果。有趣的地方在于,這樣的灰色在視覺中依然被識別為白色。此外,將字體加粗也是放置白色被黑色“吃掉”的一種辦法。

另外值得一提的是,深色,尤其是黑色比起其他的色彩來的更加深沉厚重,這也使得它更適宜于展示圖片、插畫、海報等內容。優秀的布局和組織結構下,黑色能夠顯著的提拔其他視覺元素的體現力,讓內容更具有吸引力。

UI設計中妙用無限的深色系背景

情緒感知方面

色彩心理學同樣是需要考慮的因素。背景不僅僅是內容顯現的平臺,同時也想訪客傳遞著信息。深色通常會顯得更加優雅,也會顯現出神秘感。從色彩心理學上來看,黑色傳遞出文雅、正式、名望、權力的感覺,這也許是為什么許多大品牌會圍繞著黑色來做視覺設計,并且使用詬誶來做主要的配色方案。熟知黑色的這一屬性,能夠在UI設計過程中為客戶提供優異、合理的設計方案,并能夠給出清晰的詮釋。

UI設計中妙用無限的深色系背景

深色背景的優勢

綜上所述,我們可以總結出深色背景的優勢:

·風格化,優雅
·給人神秘的感覺
·帶來奢華和高端的氛圍
·擁有廣闊而優秀的對比度
·更容易創造視覺條理感
·創造視覺深度,讓內容更容易被獲取
·視覺吸引力

UI設計中妙用無限的深色系背景

值得思考的問題

UI設計中妙用無限的深色系背景

另外,深色背景也有費神的一面,假如沒有合理規劃細節的話,用戶容易在布局間迷失。所以,我們還有一些問題是值得思考的:

·用戶研究:針對目標用戶進行現實調查、理論研究和試驗,得出來的數據和信息是創造有用和有吸引力的配色方案的基礎。
·竟品研究:對競爭對手、竟品進行是市場調研,調研效果會影響設計方案,讓產品更容易被理解,創造更加矚目的設計。
·用戶測試:深色系背景在不同的設備、不同分辨率下的可讀性、清晰度上的現實效果,通過測試追求影響因素。
·環境因素:分析產品可提供給用戶其他方面的支撐,以及用戶感到反感的原因等外部因素。
·內容量:頁面的內容的覆蓋范圍和背景深淺等典型因素之間的配比,以及它們對于用戶使用體驗、視覺感知的影響。
·內容屬性:深色的背景對于圖形和文本等不同屬性的元素的影響。

原文地址:medium
譯文地址:優設
譯者:@陳子木

本文標題:UI設計中妙用無限的深色系背景

本文網址:http://www.sontosi.com/news_detail/id/685.html

原創網址:小程序開發公司< 毅耘科技 >版權所有,轉載標明出去,并以鏈接形式鏈接網址http://www.sontosi.com/

文章標簽: 合肥小程序開發 合肥小程序

毅耘科技(www.sontosi.com)提供小程序開發,微信開發,商城小程序,小程序定制開發,新零售O2O模式,餐飲,社區,門店,教育,預約,微信小程序微信商城,解決方案,一站式全商業小程序平臺,是專業為企業提升價值的公司

相關文章

友情鏈接: 合肥網站優化  知識付費平臺  合肥網站建設  手機商城系統  合肥app開發 
安徽毅耘科技有限公司 版權所有 Copyright ? 2017 All Rights Reserved 法律聲明 皖ICP備17006053號    XML地圖/ 網站地圖
關閉 内页底部: 五十老熟妇乱子伦免费观看,A片无码免费视频在线观看,日本人成网站18禁止久久影院,国产毛1卡2卡3卡4卡免费观看
<蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>