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