UI設計基礎篇-五個關於黑色的大學問(上)

-


UI設計基礎篇-五個關於黑色的大學問(上)

 

黑色在UI設計裡有多重要?他能為你的設計帶來怎樣意想不到的效果?今天要為你揭曉!


色彩的魔力：黑色在UI設計的運用
▲ 黑色的UI設計範例
色彩對人造成的影響是非常強烈的，色彩心理學的開創者 Carl Jung 曾說：「色彩是潛意識的母語。」即使沒有自覺，但是我們的各種選擇其實都受到潛意識左右，而潛意識則很容易被顏色影響。CCI COLOR的研究顯示，消費者在網路上評估一項商品時平均只花費短短90秒，而對於產品的印象，有62%以上都來自於顏色。

因此「色彩心理學」對於 UI 設計 非常重要，無論是要設計軟體產品的介面、品牌形象網頁的整體視覺風格或提升 使用者體驗（UX) ，都不可或缺。但是並不是每個 UI 課程 都有這方面的教學。

今天將探討「黑色」的色彩意義，以及優秀的 UI 設計 師必須掌握的配色技巧，不可錯過的線上UI 課程就在今天！


黑色：最富有多元意義的顏色
▲ 德國的歌德金屬樂團 Lacrimosa 的專輯封面，一率用黑白且富有歌德元素的素描

說到黑色代表的意象，你可能會想到：侵略、權力、優雅、高貴、恐懼、神秘、邪惡……會有這麼多含意，是因為黑色被色彩學定義為「無彩色」，但能帶給人心理上的特殊感受，在許多文化中都賦予了黑色不同的哲學意涵，是一種心理色調。

歐美文化中，黑色經常被賦予死亡、恐懼的意義，如稱呼鼠疫為黑死病；同時也是悲傷的象徵，如參加葬禮會著黑色衣服。

相反地，在中國文化中，黑色在《易經》裡被認為是天的顏色，同時也是眾色之王，是古中國單色崇拜最長的色系。

例如，以黑白表示陰陽合一的「太極圖」，正是中國千百年的哲學思想結成的碩果。

正因黑色在文化意義層面上被賦予多種的寓意，當用於設計作品時，也可以傳達出各種不同的概念：

1. 只使用黑色，能凸顯空間感和構圖

▲ 黑白常用在建築繪圖中，凸顯空間感和構圖（圖片來源：andrewprokos.com)

黑色因沒有色調深淺和亮度，常被認為是嚴肅、正式的顏色；但相對地，黑色當作背景能讓產品凸顯出來，在呈現空間感的同時看起來更具質感。但若是有大量文字的網頁，就不建議以黑色作為背景色了，相信各位都有經驗，黑色的背景會使閱讀變得吃力。

同時，只使用黑色也能凸顯核心重點，避免被過多的顏色分散焦點。

2. 畫面容易達成一致性

▲ 黑色用在 UI 設計，能讓很多畫面達成一致性

因人類的大腦天生就對井井有序、整齊易懂的設計有所偏愛，無色調的黑色方便透過深淺漸層的配色方式，讓視覺保有一致性，自然就能帶給觀者美的感受。

一致性指的是畫面上各個色彩之間的和諧一致。在同一個框架內，配色沒有做到協調一致的話，設計容易變得支離破碎。

本文待續，下集請點此


相關文章：

UI設計基礎篇-五個關於黑色的大學問(下)

想自已設計App程式,來上UI課程教成為UI設計師

透過UI 課程 及Google 衛星圖就能一窺你的社區

美國NASDAQ上市公司、外商IT教育培訓企業

從無到有 挑戰14小時取得Google證照

達內時代科技教育集團簡介

零基礎如何花 14 小時考取 GoogleAds 認證？五種 GoogleAds 廣告不藏私攻略





這個網誌中的熱門文章

Python控制結構一點就通!(5)while迴圈

-
圖片
關於Python的while迴圈,它可以製造出那些效果?一步步跟著這篇走,剩下的你不用怕啦! 關於Python-while 迴圈 Python 的 if 條件判斷式【請參考上篇的 Python教學 ： Python控制結構2.if else條件判斷(1) 】，若評估為 True【請參考： Python控制結構1.布林值Boolean-True or False? 】 的話，就會執行一次；反之則不執行。 Python 的 while 迴圈跟 if 條件判斷式相似，但是不同的是，它不只執行一次。只要條件成立，它就會不斷地重複執行。就算是有其中一段代碼被評估為 False，下一段代碼仍會被執行。 while 迴圈構成，包含了 。 以下範例的 while 迴圈中有一個變數「i」， 初始值 為「1」； 更新值（又稱為調整值） 為「i+1」； 讓迴圈結束的條件 為「i <=5」。 這次 Python教學 給你以下範例，讓 i 的從初始值開始，程式每執行一次，i 就等於上一回合的數值再「+1」一次，直到 i 等於 5 為止停止，寫法如下： i = 1 #初始值 while i <=5: #讓迴圈結束的條件 print(i) i = i + 1 #更新值 (調整) 則結果為： 1 2 3 4 5 >>> while迴圈的「infinite loop(無限循環)」 Python 的 while 迴圈中，有一種被稱作「infinite loop(無限循環)」，當條件（為True）成立時，該程式就會永不停止地重複執行。 「infinite loop(無限循環)」的範例如下： while 7==7: print("這是無限循環迴圈") 結果，「這是無限循環迴圈」這行字就會不斷的重複顯示。 若你真的受不了，你可以 按鍵盤快速鍵「Ctrl-C」以阻止它繼續重複顯示。 以下也是無限循環迴圈的另一個例子，來看看它的結果如何吧！ x=1 >>> while x>0: print(x) x+2 結果馬上會跳出一堆數字，且不斷的在跳出中。後出來的數字，都是
閱讀完整內容

前端工程師絕不能搞錯的CSS中:逗號.空格的差別!

-
圖片
想成為前端工程師?那CSS中最基本的逗號.空格再搞錯,豈不是太不專業了! 有時在 HTML 中， 前端工程師 們會對同一個標籤給予兩個以上的 Class 名稱，如以下所示: < div class = " first second " > </ div > 對於這類有兩個以上的 Class 名稱的 HTML，其 CSS 選擇器可能會用以下的三種情況顯示。而聰明的你，分辨得出這些 CSS 有什麼不同嗎? /*1. 兩個 class 中有空格*/ .first .second /*2. 兩個 class 中沒有空格*/ .first.second /*3. 兩個 class 中出現逗號*/ .first,.second 對於 CSS 及前端工程師的初學者來說，上述三種 CSS 因為長得很像，所以經常傻傻分不清楚。究竟兩個 class 中間空格、沒空格、有逗號，到底差在哪裡? 別擔心，立刻講解給你聽：   1. 兩個 class 中有空格的例子：五個區塊中，階層必須是要在 first 區塊之下的 second 區塊，才會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間有空格的例子 by Tedutw ( @Tedutw ) on CodePen . 2. 兩個 class 中沒有空格的例子：五個區塊中， div class 名稱必須同時出現 first 與 second 才會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間無空格的例子 by Tedutw ( @Tedutw ) on CodePen . 3. 兩個 class 中有逗號的例子：五個區塊中，只要 div class 名稱中有出現 first 或是 second 的區塊，就會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間有逗號的例子 by Tedutw ( @Tedutw ) on CodePen . 註 : 以上三個範例的 HTML 碼都一樣 延伸閱讀： 前端工程師入門款小常識-CSS碼特性一下就上手! 
閱讀完整內容

網頁前端CSS必學兩屬性:display與visible

-
圖片
今天要介紹網頁前端中的兩個CSS屬性:display與visible屬性! 本篇介紹 網頁前端 排版的兩個 CSS 屬性：display 屬性與 visibility 屬性。 CSS ：display 屬性 display:block 對於 CSS 語法來說， 網頁前端 的每個元素都是一個矩形盒（rectangular box）模型。而使用「display」屬性，便可以決定「盒（box）」的呈現方式。 又「區塊元素（block element）」則會佔用可用寬度的最大值，前後有換行符。 以下範例分別顯示了是否有將<span>元素顯示為區塊元素（block element）的結果。 在下方的顯示視窗中，按「CSS」，就可以觀看 CSS 的語法如何設定了！ See the Pen display: block by Tedutw ( @Tedutw ) on CodePen . 上述範例的 網頁前端 CSS 語法設定如下： span.block{ display:block; } display:inline inline 元素只佔用可用寬度的最大值，並不強制換行。 將上一段範例的<span>元素，CSS 換成「display: inline」的結果如下。跟上一個範例一樣，在下方的顯示視窗中，按「CSS」可以觀看 CSS 的語法如何設定。 See the Pen display: block by Tedutw ( @Tedutw ) on CodePen . 上述範例的 CSS 語法設定如下： span{ display:inline; } display:none 「display:none」用來將元素隱藏使用，當元素隱藏後，就不佔用任何空間了，且在 網頁前端 頁面顯示時也不會被展現出來，就好像該元素不存在一樣。 在以下範例中，我們將第 2、4 段設為「display:none」，其他設為「display:block」。 See the Pen display: none by Tedutw ( @Tedutw ) on CodePen . 上述介紹的「block」、「inline」、「none」都是最常碰到的的 d
閱讀完整內容