中後台系統(這裡的定義比較寬泛,大概可以說非面向C端用戶而是B端專業從業者的中後台系統),UI到處可見設計成深藍色。

如果是為了暗光環境中護眼,為什麼不是黑色、暗綠色?

這和早期科幻電影/諜戰大片里的場景是否有什麼承繼關係?


題主你好,中後台系統,簡單來說就是面對企業平台的管理從而設計出的一種產品系統,絕大多數是為了提高協同工作的效率,比如大家所熟知的企業管理OA系統,淘寶賣家的後台等等。

dribbble.com

中後台系統普遍還具有一些特性:

1. 主要集中於PC端,這是由於當前絕大多數辦公處理仍是在辦公室中,手機辦公相對還是較為稀少。且在交互的方式上,移動端也通常會受到硬體設備的不同而有所區別與限制。因此,屏幕更為廣闊的PC端中後台系統往往更具有優勢,響應式的自動調整和UI的布局更具有設計發揮的空間。

2. 雖然PC端的產品布局更具有設計發揮的空間,但中後台系統有一定的固定布局結構,以左導航右內容顯示的布局式居多。

3. 中後台系統深受企業管理者的喜愛,這是由於產品本身通常具備一定的數據分析,比如,人員的工作量,所售產品的增長或減少率的變化等等,因此在設計上通常具備大量信息可視化以及表格,配色相對簡潔與美觀,給使用者更清晰直觀的視覺使用效果。

從中後台系統所具備的這幾個特性也不難看出,從更好的用戶體驗來考慮,中後台系統需要給使用者營造更為直觀與簡潔的交互菜單,清晰的可視化,安全可靠的使用感官。這就在色彩心理學角度上很大程度決定了中後台系統普遍呈現藍色的原因。

這就說明,一名合格的交互設計師是需要學習一些心理學知識的,顏色是會給予人情緒上影響的,學習色彩心理學將幫助設計者更好地了解用戶的需要,改善用戶的體驗與使用環境。

pinimg.com

舉個色彩心理學在日常生活中應用的例子,比如常見的醫療救護紅十字元號,之所以選取紅色,而不是黃色,藍色等,則是因為紅色使人興奮,刺激感官,且更加抓人眼球,藉此吸引人們的注意力,得以關注的意義。因此,在急救或者救護的領域,沒有什麼比紅色更合適作為醒目標誌的顏色選擇了。

但紅色的缺點是容易給予人刺激,衝突的感覺,因此對於一些心腦病的患者來說,紅色又是禁忌的顏色,因此,在醫院或者病房中,紅色的應用又會盡量減少,這也是為什麼我們在形容病房或者醫院的時候,會使用「潔白的病房」較為固定的搭配來描述。

而藍色在色彩心理學中被認為是相對舒適、安全、可靠、舒緩的顏色。作為原本大自然中最常見的海洋和天空的顏色,藍色經常出現在我們的生活中,因此藍色很容易產生使身體放鬆的化學物質,具有鎮靜作用。

尤其是深藍色,同時具備了嚴肅的色彩,給予人們更強烈的信任感,控制感和責任感。此外,從交互設計師的角度來看,相比較於紅色、橙色和綠色等其他通常具有某種特定含義的顏色來說,藍色是常見顏色中最不具有明確性別指向的顏色,對於男性和女性有同樣的吸引力,這種中立性則使藍色常常被公認為設計界中相對保險的顏色選取。

pinimg.com

這一點從目前用於開發中後台的前端三大UI體系的平台也不難看出,無論是Ant Design (支付寶等)、Element UI(餓了么等)、還是Bootstrap(Twitter等),均使用藍色系來詮釋自己旗下產品的科技創新感與可靠感。

ant.design

希望通過上述對於色彩心理學中藍色的分析,能讓各位設計師對於中後台系統中UI界面普遍藍色的情況有所了解,能夠關注到色彩心理學這一與交互設計師息息相關領域的重要性,通過不斷地實踐來加深對於交互界面設計的理解與造詣。

但需要注意的是,色彩心理學不是絕對的,一些人對於一些特定的顏色,可能會由於成長經歷,環境,性格等等外在因素,與普遍認知的色彩影響產生不同感受,此外,對色彩不敏感的人,也會有一些極為特殊的色彩認知與情感變化。因此,更需要交互設計師格外注意對於用戶群體進行深入調研與思考。

以上,望有幫助。

—————————————————

歡迎關注我的個人公眾號(kang-shishi)

如有藝術留學、保研、院校、專業、作品集方面的問題,可私信康石石諮詢。


豈止B端,C端也是如此。不過咱們國內的互聯網營銷氛圍較重,加之傳統上更喜歡紅色,所以才有那麼多紅色系產品。

藍色是界面設計中最重要的,也是使用最頻繁的。掃一眼的手機上的App圖標,你發現它們中的大部分都是藍色的:知乎、支付寶、餓了么、12306……

為什麼選擇藍色?

理由很多,我這裡羅列一些:

1、人們就是喜歡藍色。問卷調查顯示大部分人把藍色當做它們最喜歡的顏色。因此藍色被認為是全球最安全的顏色。

色彩偏好是視覺體驗中的重要一環:

有人指出上面這張圖有政治問題,大家可以把他理解成「國家與地區圖」。

2、與大自然的關聯。藍色與凈水、晴空等自然景觀能夠產生強烈的關聯,這提高了人們對它的喜好。

3、界面設計的通用顏色。從一個界面設計師的角度來看,藍色絕對是一個有用的顏色。紅色、橙色和綠色通常都是有含義的,例如錯誤、警示和完成。藍色相對來說就成為了非常好的選擇。

4、科技創新感。這也是很多公司使用這個顏色的原因。

5、安全感。在旅遊網站上,藍色是一種非常通用的色彩,因為它可以表達可以依賴的感覺,這對於旅遊來說是件好事。

6、讓產品看起來更加可信。很多情況下,說服用戶使用我們的產品至關重要。這時,藍色就可以表現出信賴感。很多像Dell、IBM、Intel、ATT和支付寶這樣的科技公司利用藍色來傳遞信譽信息,因為他們的產品是人們每天都要依賴的。

7、色弱。很多種色弱患者(如最常見的紅綠色盲)都可以看得到藍色,這一點上藍色明顯優於諸如綠色和紅色等其他顏色(Z Yuhan:幸運的是,色盲雖然在百種男性中的發病率高達10%,在亞洲人里卻十分少見)。

普通人看到的顏色 VS 色弱患者看到的顏色:

Facebook用藍色,因為扎克伯格就是色盲患者,他說:「藍色對我來說是最豐富的顏色,我可以看到所有種類的藍色。」

結論

我希望讀完本文,你能了解為何藍色在設計師中如此流行。然而這並不意味著你應該把你的方案的主色調改成藍色。

藍色也不是最好的萬能色,萬能色並不存在。

在一個網站或App上行得通的顏色,可能在另一個上就不能用了。最安全的方法還是根據目標用戶的喜好來選擇。

所以最終,用在你設計上的最佳色彩應該是你的用戶所認為的最佳色彩

本文譯自:The Most Important Color In UI Design by Nick Babich

產品也不是都使用藍色比較好,需要具體情況具體分析。

——

最後送給大家一個色感測試玩玩:

紅綠藍色感測試?

www.advancedux.club圖標

最高亮度飽和度的藍都和黑白有明晰的對比度
  1. 藍色的「視覺亮度」比所有的顏色的都低,也就是說即使亮度和飽和度數字上已經「亮瞎了」你看起來依然覺得「不是很亮」,這個特性讓藍色和黑色和白色之間都有很好的對比度,這個對追求「清晰,高效率」的應用來說是個很適合的顏色。
  2. 藍色的色彩「寬容度」很高,在不同的屏幕上即使有色偏但是看起來依然很有辨識度,如果用綠色,偏色會很難看;
  3. 大自然當中天空,大海都是藍色調的(包括晚上天空其實是「很深的藍」,而不是純黑色),多年的演化結果就是人類在面對藍色時會有「廣闊,平靜」的感覺,適合嚴肅嚴謹的應用場景;
  4. 藍光是人造光源裡面最遲實現的顏色,經過多年的演變,衍生出「科技,先進」的語義(最近的幾年「科技藍」有向「科技白」演變的趨勢)。


國內目前用於開發中後台的前端三大 UI 體系:

  • Ant Design 是藍色,因為支付寶品牌色是藍色,so...
  • Element UI 是藍色,因為餓了么品牌色是藍色,so...
  • 老牌 Bootstrap 是藍色,因為 Twitter 品牌色是藍色,so...


UI設計中關於顏色的選擇都是應該深思熟慮的!

絕不是出於簡單的護眼等考慮,UI設計顏色的選擇關係到用戶體驗頓、產品調性、用戶留存等等

本回答一起來康康屬於藍色的色彩特性吧

一.藍色的性格

視頻講解可以點擊鏈接

色彩的性格-藍色?

huke88.com圖標

1. 【藍色】是人們最喜愛的顏色,【40%】的男性還有【36%】的女性把藍色評選為最喜歡的顏色,藍色象徵著許多美好的東西,比如:大海、天空。

2. 【藍色】是一望無際的沒有邊界的色彩;在日常生活中我們會無意識的把瓶子里的水或玻璃杯之類的東西表示為藍色,對這科學的解釋是由於水分子中的氫氧鍵對約750%納米的光的吸收,大量的水集中在一起的時候就會呈現藍色,所以【藍色】又是能表達範圍廣闊的顏色。

3. 【藍色】是忠誠的代表色,比如:勿忘我、紫羅蘭的花語都是【忠誠】,在英國的婚禮習俗上要求新娘的嫁妝里要有大量藍色物品,以示忠誠。

4. 【藍色】是一種象徵渴望的顏色,藍色之花又可以是浪漫文學的化身,【藍色】代表著積極的幻想, 象徵著遙不可及的烏托邦式的理想。

5. 【藍色】是代表普通階層的色彩,在日常生活中,人們常常把一些在工廠或流水線上從事體力勞動的工人們稱為【藍領】,因為工人在工作中一般會穿【藍色的工作服】。

6. 【藍色】是冷暖色中最冷的顏色,藍色可以讓人【冷靜】下來,所以醫院裡有很多設施、制服都是淡藍色,這樣能讓病人有一個放鬆的心理,給人安全還有信任感,【深藍色】可以給人一種嚴肅、端莊的感覺,比如:企業的商標、logo。

7. 【深藍色】也能體現一種憂鬱的心理或者是傷感,我們常常可以在描述悲劇的電影的海報或者這類書籍的封面背景等等,看到【深藍色】的應用,【布魯斯藍調】就是一種源於美國南部黑人節奏感強、緩慢憂鬱的音樂,還有在色譜中深藍很靠近黑色,所以在歷史上藍色通常和黑色一起劃分為【深色系】,而深色系在那些死亡的屍體、重病的癥狀等一些負面的現象中常見。

8. 【藍色】的性格特徵和象徵意義,我們可以把它們【讀】一下,在視覺、聽覺上都加深印象。

二.藍色在配色中的使用

配色攻略-藍色篇?

huke88.com圖標

藍色是紅綠藍三原色中的一員,是人們最喜愛的顏色,在最喜愛的顏色民意調查中顯示,大部分人把藍色評選為最喜歡的顏色,能獲得如此高票的喜愛,是由於藍色本身擁有最自由又最保守的雙重性格,能迎合大多數人的口味,藍色還給人美好的聯想,如大海般包容 如天空般廣闊自由和理想等。

藍色卻會隨著明度的差異發生很大的變化,每一種藍色又給人不同的感受,如與白色接近的亮藍色,給人以柔和清爽感,而與黑色接近的藍色卻給人理性和剛毅感。人們對色彩的聯想雖然會因為各種原因而存在差異,但是卻有相當程度的共性,設計師在應用某種色彩之前,要充分理解和掌握這種色彩的情感意象,以及它在特定環境下帶給人們的聯想與象徵。

智慧科技藍色代表知識智慧,因為會讓人聯想到抽象未來,很符合科技 互聯網 教育 汽車 數碼等需要表達技術性的行業。

一般使用飽和度和亮度較高的淺藍色,與亮度較低的深藍色的背景搭配,通過明暗反差來製造光感

就能擁有科技風格的炫酷感。

安全信賴,藍色是永恆的象徵具有沉穩的特性,被譽為最安全的顏色。

大量的公司用藍色作為自己的logo主色,因為藍色會給人很強烈的信賴感。

藍色還可以讓人心情安寧,所以醫院裡的設施醫生的制服都是淡藍色,這樣能讓病人有一個放鬆的心理,給人安全還有信任感。

寧靜純潔,藍色讓人聯想到遼闊的天空和深邃的大海,因此它能最大程度地發揮這類自然元素的視覺特性,讓人感覺純凈和美好 寧靜與廣闊。

清爽寒冷,藍色是最冷的顏色,在心理上產生明朗清爽 冷靜通透的感受,所以夏日涼爽主題和冬日寒冷主題的主色系,都可以藍色為主色調來體現。

嚴謹商務,飽和度較低和亮度較低的藍色,具有沉穩嚴謹的特點,是商務類經常選擇的顏色,因為這代表著自信和穩健。

中國藍,中國之魂在紅,中華之韻在藍,中國紅是如此的正氣凜然,中國藍卻別有一番清新淡雅之美。

藍白相間的青花瓷彷彿是藍天白雲的一個縮影,小小的瓷器也體現著天人合一,藍白相間的顏色是大自然的經典,會讓人由內而外的感到舒適。

青花瓷的美很神奇,只是青白兩色卻讓人覺得絢麗異常,只是簡潔構圖 卻有一種華美端莊,看上去只是隨心作畫 卻有種空靈的悠長。

在色彩審美上民族性格與藍色內在的穩定,寧靜內斂含蓄 恰好相對應形成精神上的共鳴,這種與眾不同的含蓄之美更受中華民族的喜愛。

含蓄是一種深厚的隱傳統文化內涵的體現,在中國藍色彩設計中融入對傳統文化精髓的繼承和發展

這給設計作品增添了文化附加值。

藍加中性色,通過梅賽德斯中國移動應用程序設計可以看到,鮮艷明亮的藍色搭配純粹的白色,傳遞出簡潔大氣明朗純凈的感受。

加上灰色顯得優雅十足,還帶著些文藝格調。

而深藍色加黑色則給人沉穩高端的感覺。

藍加紫 藍色和紫色是鄰近色,明度也很接近 對比比較柔和。

因為藍紫色搭配具有類似電子迷幻音樂風格的夢幻科技感,是蒸汽波 波普藝術 賽博朋克等前衛時尚風格常用的配色。

藍加綠 藍色和綠色相互之間是鄰近色,而藍色明度高,綠色明度低。

所以藍綠配色協調統一 又有很強的對比,讓人聯想到藍天綠水之美感到平靜放鬆。

藍加紅,紅色和藍色屬於對比色,而且紅色是色環上最暖的顏色,藍色是最冷的顏色,紅藍搭配形成了強烈的對比。

紅藍配色具有藍色的沉穩,又有紅色的奔放,具有強烈的視覺衝擊力。

藍加黃,純藍色本身是很低調沉悶的,但是加入明度很高的對比色黃色之後,就可以產生非常強烈的對比,具有很強的視覺衝擊力。

藍加橙,藍色和橙色是互補色,搭配起來會有種很醒目的效果,高亮的橙色可以很好的緩解深藍色的沉悶,增加畫面的愉悅氣氛。

由於色相對比過大 ,配色難度也最大,可以通過懸殊的面積比來達到平衡,還可以降低色彩的明度飽和度,或加入黑白灰來緩解彼此衝突。

接下來通過一則運動鞋廣告的實戰演示,讓大家加深理解 掌握藍色系配色規律,這是一則匹克基德三代運動鞋廣告的原始資料。

首先進行藍色單色配色示範,把球鞋和主要文案放置在畫面中央,將產品特點標註在鞋子右方。

把logo網址等信息放置在畫面四角,並加入一些小細節來豐富畫面,這個方案採取單色配色,藍色的運動鞋 在藍色背景的烘托下,傳達出很強的科技感,突出了三級緩震技術的技術性,因為藍色本身具有嚴謹沉穩的屬性,所以畫面顯得比較安靜,也具有很強的信賴感。

藍黑配色, 第二個方案嘗試在原來的方案基礎上加入黑色,可以看到畫面變得高端大氣還有很酷的感覺。

藍灰配色,藍色和灰色搭配顯得優雅十足,還帶著文藝格調給人大氣國際化的感受。

藍白配色,鮮艷明亮的藍色搭配純粹的白色,傳遞出簡潔大氣明朗純凈的感受。

藍紫配色,藍色和紫色是鄰近色明度也很接近,對比比較柔和 給人夢幻時尚感。

藍綠配色,藍綠配色及協調統一,又有很強的對比,讓人聯想到藍天綠水之美 ,感到平靜放鬆。

藍紅搭配,藍色和紅色屬於對比色,藍色的沉靜穩重 ,搭配紅色的熱情艷麗,形成了強烈的對比,並使各自的色相更為突出更為艷麗,具有強烈的視覺衝擊力。

藍黃搭配,藍色明度低而黃色明度高,所以搭配在一起對比很強烈 ,有很強的促銷感。

藍橙搭配,藍色和橙色是互補色, 對比性最為強烈,高亮的橙色可以很好地緩解深藍色的沉悶,增加畫面的愉悅氣氛。

本期通過藍色系優秀作品分析和案例實操示範,為你深度剖析藍色系配色規律,藍色是最受歡迎的顏色,也被譽為最安全的顏色,所以在設計中經常被使用。

藍色本身擁有最自由又最保守的雙重性格,需要不斷去理解和領悟,在設計中如能恰到好處地運用,對於增強設計衝擊力和表現力,體現設計主題 ,升華設計內涵有很大的幫助。

更多關於藍色/顏色的視頻講解教程

虎課網-原創PS視頻教程自學網站_PS教程_UI教程大全!?

huke88.com圖標
推薦閱讀:
相关文章