UI UX 設計白皮書 Material Design 導讀 | ui顏色
昨天我們了解到色彩系統分為主要色、次要色、輔助色及替代顏色的基本概念及變體色的選擇,搭配不同的主題運用替代顏色進行色彩創作,在UI元件上建立高對比度的色彩搭配,除了傳達品牌更可以藉此吸引注意、凸顯內容、保持清晰的辨識度、讓內容文字更容易閱讀。今天讓我們繼續完成Color顏色章節中的顏色使用、文字清晰與深色主題,讓我們繼續看下去吧。ColorThecolorsystem色彩系統ApplyingcolortoUI將顏色應用於UIColorusage顏色使用Textlegibility文字清晰Darktheme深色主題[1][2][3][4][5]在顏色章節使用了相當多的範例,看完介紹及...
昨天我們了解到色彩系統分為主要色、次要色、輔助色及替代顏色的基本概念及變體色的選擇,搭配不同的主題運用替代顏色進行色彩創作,在 UI 元件上建立高對比度的色彩搭配,除了傳達品牌更可以藉此吸引注意、凸顯內容、保持清晰的辨識度、讓內容文字更容易閱讀。
今天讓我們繼續完成 Color 顏色章節中的顏色使用、文字清晰與深色主題,讓我們繼續看下去吧。
ColorThe color system 色彩系統Applying color to UI 將顏色應用於 UIColor usage 顏色使用Text legibility 文字清晰Dark theme 深色主題[1][2][3][4][5]
在顏色章節使用了相當多的範例,看完介紹及內容後如果對於使用情況及目標對象還不清楚時,都可以參考官方的圖片或動畫,可以更快的幫助我們理解使用情境。
Color usage 顏色使用顏色有助於展現畫面結構層次,建立品牌形象,賦予含義並表現元素狀態。
顏色可以傳達多種主題風格的感受,例如: 大膽、明亮、簡約和柔和...等等,在某個元素上與周圍顏色形成對比時可以吸引注意力,由不同的方式表現元素的重要性。例如: 明暗對比的黑色與白色,彩度對比的暗紅色與飽和的紅色,多色系配上單色時都會引起注意。通過限制文字、圖像及按鈕的顏色,可以更輕易區別元件區塊,也可以透過顏色及形狀的改變表示已選擇項目或是吸引注意力。
本圖片截取自 Material Design。在關鍵時刻使用品牌色彩,除了與特定行為結合也能強調其存在,品牌色彩可以根據品牌特性與商品走向規劃不同的色彩應用,可以大膽、輕鬆、古怪和復雜或正規。使用大膽的配色能傳達能量和興奮感,保持清楚易用的同時注入了活力和刺激感。大膽的配色可以運用在啟動程式的開啟畫面或是被選取項目的顏色改變和突顯新功能。
使用細微的顏色配色來規劃區塊時,可以在比較複雜項目中強調內容,讓該區快成為頁面上最重要的元素。使用主要色在應用程式尚未完成開啟時顯示進度條或是內容區域,適當的提示及告知進度能避免使用者因等待而關閉應用程式,也在應用...