在設計中，運用顏色是傳達視覺層次的最佳方式之一。但在線框圖中，它卻是最糟糕的方式之一。許多設計師認為他們需要在線框圖上使用顏色來傳達層次。如果你用顏色來顯示視覺重量，你的最終設計可能會失去清晰度。
顏色模糊了層次的清晰度
這是因為原型圖上會有許多其他顏色與其競爭。線框上的任何彩色元素都將不再清晰可見。當其他頁面元素也帶有顏色時，你賦予它的視覺重量就會減小。
使用顏色的另一個風險是，許多設計師最終依賴顏色作為展示視覺層次的主要方式。在線框圖上用顏色很容易突出元素。但如果沒有顏色，你的視覺層次結構還能清晰嗎？
當設計師忽略其他層次屬性時，顏色就成了清晰度的拐杖。不要用顏色來彌補設計的不足。你的設計應該沒有顏色，也應該有清晰的層次結構。
由于許多網(wǎng)站都有色盲用戶，因此使用顏色并不總是有效。您的設計需要包含其他屬性，以便所有用戶都能清晰地了解元素的權重。
視覺層次的其他屬性
給線框圖添加顏色會讓人難以判斷視覺層次的強度。這是因為顏色會掩蓋其他層次屬性。避免使用顏色，反而會讓這些屬性更加突出。顏色的視覺重量在模型上會消失，但這些屬性卻會保留下來。
尺寸
并非所有元素都應該具有相同的大小。元素越大，就越能吸引注意力。為了達到合適的尺寸，元素需要看起來比周圍的其他元素更大。
形狀
您可能希望突出顯示頁面上的內(nèi)容。您不僅可以使用顏色和大小，還可以使用形狀。用方框框住內(nèi)容或用線條將其劃分開來，可以表明該區(qū)域很重要。
放置
用戶瀏覽頁面有特定的模式。有些頁面區(qū)域會比其他區(qū)域更受關注。您可以將重要內(nèi)容放在這些高關注度區(qū)域。首屏、頂部和左側是用戶視線最集中的地方。
逆向著色
顏色會模糊層次結構的清晰度，但反色可以增強這種清晰度。大多數(shù)線框圖在淺色背景上使用深色。這是因為大多數(shù)網(wǎng)站通常使用中性背景色。
但是當你反轉顏色時，你就是在深色背景上應用淺色。這是一種有效的傳達顏色的方式，而無需暗示特定顏色。
建議使用某種特定顏色會讓瀏覽者疑惑這種顏色會如何影響設計的其他部分。這并非你在線框圖中想要的效果。你希望他們關注的是結構和布局。
您應該在需要強烈色彩填充的界面元素上使用反色。按鈕、菜單和通知通常需要這種視覺清晰度，因為用戶會與它們交互。但不要過度使用。如果每個元素都采用深色底色上的淺色，就會失去層次感。
線框圖案
有一些線框圖工具包可以幫助您更輕松地傳達視覺層次結構。您可以獲取我們設計的線框圖工具包：
線框圖模式。每個 UI 模式都經(jīng)過精心設計，具有視覺重量和清晰度，并且不使用任何顏色。
無顏色的視覺層次
如果你的視覺層次缺乏色彩，就無法清晰地展現(xiàn)，說明你的設計沒有充分運用色彩元素。不借助色彩，傳達視覺層次不僅是可能的，更是必要的。
這樣做可以讓你評估結構和布局的清晰度。如果沒有顏色，線框就不夠清晰，缺乏強大的層次結構。添加顏色并不能解決這個問題，更好的設計才能。
蘭亭妙微(m.jjddy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
