小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

搜索
分享

這一篇UI配色知識，看了就能用

 squareyang 2024-12-06
今天，我們就要對具體的配色實踐過程做出說明和演示了。


配色的流程解釋

一個完整的平面視覺畫面，里面包含的所有元素、色彩都不是孤立的，都會和其它元素形成聯(lián)系，產(chǎn)生整體的影響。
而我們在設(shè)計過程中，如果對元素的設(shè)計、配色是逐一完成的，那就很難控制整體的效果。因為你在做第一個元素的配色時，是很難預估它在最終畫面中的效果是否是合理的。
所以在我的配色建議中，不能一邊設(shè)計框架、交互、布局、樣式時一邊配色，而要把它當成一個獨立的步驟，即 —— 配色階段，在完成界面的基礎(chǔ)的原型或簡單的上色后，再進行統(tǒng)一的配色操作。
圖片
而配色的操作也不是看著元素一個一個填的，而是根據(jù)配色的類型，分層次、分順序逐步完成。前面之所以把 UI 的色彩類型拆解得那么細致，其中一個原因就是為了應(yīng)對當前的情況。
圖片
配色的第一步就是完成中性色的配置，前面我們說過中性色是整個項目色彩的骨骼、基礎(chǔ)框架。在我們完成前期頁面原型設(shè)計的階段，就可以先創(chuàng)建中性色的階梯，來完成對界面層次、信息權(quán)重的表現(xiàn)。
圖片
有了這個基礎(chǔ)，第二步就是填充品牌色，品牌色是整個項目配色中最關(guān)鍵的色彩類型，因為它要建立用戶對品牌的認識，是一個必須使用且要高頻使用的色彩類型。
并且，后續(xù)所有的顏色的制定都會和品牌色發(fā)生聯(lián)系，理論上這些顏色和品牌色產(chǎn)生的聯(lián)系必須是和諧、穩(wěn)固、有效的。所以制定了品牌色，也就對后續(xù)的配色產(chǎn)生的一定的影響和約束。
接著，就是制定功能色。因為產(chǎn)品的基礎(chǔ)原型構(gòu)建完成以后，設(shè)計師對產(chǎn)品使用哪些特殊的字段、信息就會有清晰的認識。那么最好把這些需要特殊表現(xiàn)的內(nèi)容先整理并羅列出來，然后選出合理的功能色進行填充。
再往后就是填充容，根據(jù)相關(guān)的場景、內(nèi)容、風格來選擇合適的配圖，確保配圖的用色不會和前面的色彩產(chǎn)生沖突，且根據(jù)配圖的類型決定它們色彩的突出程度。
最后就是裝飾色的處理，主要針對復雜的組件細節(jié)和圖標等完成配色。之所以放在最后，是因為裝飾色的選擇是最復雜且沒有限制的，但它依舊要確保和畫面其它色彩能建立和諧的聯(lián)系。
所以當其它顏色的配置都已經(jīng)完成以后，裝飾色的配色范圍就被大大限制了，選擇范圍變小，選擇起來自然也就更容易。
應(yīng)用這種配色方法，我們可以非?？斓耐瓿蓪缑娴呐渖?，并且可以在每個階段檢查對應(yīng)配色的效果，并快速做出修改。除了效率外，這么做最大的好處，就是幫助我們更有效地提升對色彩地深入認識，以及積累不同配色組合的方案。
講到這里，分層次和順序按一定的條件選色填充，就是UI配色的全部嗎？
當然不止，還有一個更重要的部分 —— 對設(shè)計風格的構(gòu)建。
即展開正式的配色之前，設(shè)計師還需要對項目采用哪種風格做出定義，后續(xù)的設(shè)計包括版式、圖標、樣式、色彩，都是構(gòu)建這個風格的一部分。比如很多作品集包裝中會展示 “情緒版”，它就是項目前期分析中探索設(shè)計風格的工具之一。
圖片
圖片
理論上配色的前置環(huán)節(jié)，是先探索并確定設(shè)計風格，為配色指明方向。但這個流程對設(shè)計師的職業(yè)水平是有很高要求的，如果本身項目經(jīng)驗少，對設(shè)計風格的積累理解不足，是沒辦法建立風格和色彩的聯(lián)系的。
初級設(shè)計師會認為情緒版、品牌化的分析是種包裝，毫無意義，但專業(yè)的 UI 設(shè)計師和團隊卻對風格定義和分析樂此不彼，這就是經(jīng)驗限制了認知，我們沒辦法想象還沒做好的工作要怎么才能突破瓶頸做的更好！
所以在前期的積累過程中，不用過分關(guān)注品牌、風格化的分析，而是先確保能按照上面的做法輸出有效的配色。只要每個層級的配色不出錯，那么最終結(jié)果也會附帶品牌和風格的附加屬性。
而在適應(yīng)這種操作并越來越熟練以后，你們就會發(fā)現(xiàn)只用這種方法的配色是 —— 莫得靈魂的，它們不能賦予你設(shè)計方案底層的價值和深度，要突破這種瓶頸就要追求更宏觀的思考和分析。
所以先從實踐出發(fā)，用實踐積累經(jīng)驗和有效的問題，然后才能真正理解進階的思維和流程的價值。


配色的實例演示

這次的配色演示我要用一個學員的作品為例，下面是原圖：
圖片
在這套界面中，顏色的整體觀感顯然是很不好的。一方面主色的應(yīng)用和品牌（捷安特）很不符合，另一方面色彩的搭配不和諧，尤其是內(nèi)容色和配色很沖突。
還有一個很重要的因素，就是默認使用的深色配色，這是非常難駕馭的方向，完全不推薦新手在輸出項目作品時使用。
所以在后續(xù)的演示中，我們會分成兩個部分，首先從淺色模式開展了解基本的配色邏輯，然后再在這個基礎(chǔ)上進行深色模式的配色說明，掌握兩種配色模式的實踐路徑。
Step1: 中性色填充
首先從淺色模式開始說起，在進行配色前，先完成基礎(chǔ)的原型框架，為配色做后續(xù)的準備。而完成基礎(chǔ)框架就要順便完成對中性色的定義，選擇合適的中性色數(shù)量和色彩，滿足產(chǎn)品需要。
圖片
原型對原圖做了簡單的修改和調(diào)整，讓布局先更合理一點，才適合配色的發(fā)揮。

圖片

Step2：品牌色填充
因為捷安特是一個成熟品牌，有自己的 VI 系統(tǒng)，所以選色要從官方品牌的色彩出發(fā)，主色是深藍色（RGB 已經(jīng)比印刷色更淺），淺藍是輔助色。
圖片
圖片
然后，開始填充主色和輔助色。主色要填充到頁面最重要的元素和背景色上，比如 LOGO、選中的底部導航圖標、首頁背景色、重要的標簽、按鈕等。輔助色可以添加到相對次要但高頻出現(xiàn)的一些設(shè)計元素上，如次要標簽、按鈕等。

圖片

Step3：功能色填充
接著總結(jié)界面中包含的一些應(yīng)該填充色彩但又不適合用主色、中性色的對象，比如價格元素、評分、收藏、熱門等。
圖片

圖片

Step4：內(nèi)容填充
到這里色彩的主體已經(jīng)有了，就可以先開始往里面填圖片內(nèi)容了。整體的選圖標準用比較“安全”的做法，即大圖有能和主色搭配的背景顏色，小圖則盡量避免有大色塊、復雜的色彩，減少沖突性。

圖片

Step5：裝飾色填充
最后就到了裝飾色的填充上，對于一些特殊組件，以及裝飾圖標，就要在前面的配色基礎(chǔ)上做選擇。得到最終結(jié)果并沒有使用什么理論、規(guī)則，僅僅是從一系列的選擇中找出自己最滿意的結(jié)果而已。
圖片
到這一步基本配色也就完成了，可以再和原來的做法做一次對比。

圖片

這就是我們總結(jié)出來的最簡單的基礎(chǔ)配色方式，而上面的方案也不是唯一的配色方案，你們可以嘗試自己臨摹一遍原型，自己填充一遍色彩，看看能得到什么新的結(jié)果。


結(jié)尾

簡單的配色獲得好的結(jié)果，是建立在扎實的原型結(jié)構(gòu)之上，如果沒有良好的框架設(shè)計，那么不管你怎么配色最后的結(jié)果都不會太好。
所以學習配色的過程中，也要反問一個問題，就是你基本界面的設(shè)計水平是否過關(guān)了，它們足以支撐你展開配色的練習沒有？
對于多數(shù)新人來說，這個答案是否定的~
配色的實際制定包括項目后續(xù)應(yīng)用還有很多小知識點，分享是寫不完的，真想系統(tǒng)提升只能建議你們參加我們的系統(tǒng)課程。

今天的分享就到這里結(jié)束，我們下篇再賤！

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多