開(kāi)發(fā)人員應(yīng)該知道5個(gè)設(shè)計(jì)技巧發(fā)布者：本站     時(shí)間：2022-02-18 09:02:44

優(yōu)秀的編碼和優(yōu)秀的設(shè)計(jì)之間是相輔相成的。不幸的是，視覺(jué)設(shè)計(jì)能力偏弱的人通常會(huì)覺(jué)得自己缺乏天賦，換句話說(shuō)，就是人們要么覺(jué)得自己具有出眾的美學(xué)天賦，要么就是這方面的白癡。對(duì)這個(gè)說(shuō)法，我可不敢茍同。

你只要稍微思考一下就會(huì)發(fā)現(xiàn)：如果你5歲的時(shí)候就停止寫(xiě)作，那么你對(duì)寫(xiě)作可能就是一團(tuán)糟，對(duì)于藝術(shù)設(shè)計(jì)，道理是一樣的。大多數(shù)人都是在他們開(kāi)始掌握畫(huà)畫(huà)的時(shí)候就停止創(chuàng)作藝術(shù)了。

幸運(yùn)的是，學(xué)習(xí)永遠(yuǎn)都不晚。并且從事實(shí)來(lái)講，日漸成熟的你將更容易從主觀觀點(diǎn)中學(xué)習(xí)到客觀的知識(shí)。

如果你在一個(gè)小團(tuán)隊(duì)里面身兼數(shù)職，卻又沒(méi)有多少美學(xué)基礎(chǔ)。又或者你覺(jué)得你們的項(xiàng)目在視覺(jué)上還有更多發(fā)揮的空間，那么這篇文章就是寫(xiě)給你的。我們將談到傳統(tǒng)的5個(gè)消除丑陋藝術(shù)設(shè)計(jì)的元素和原則(或者至少能夠進(jìn)行一定程度的掩蓋)

1.來(lái)點(diǎn)留白

大多數(shù)的開(kāi)發(fā)者并不在意添加空白的像頁(yè)邊距，填充，行高，或者其他任何增加空白的CSS屬性。識(shí)別出開(kāi)發(fā)者設(shè)計(jì)的界面是很容易的：文本都是緊緊地挨著邊緣的，沒(méi)有任何留白，而且屏幕元素之間是通過(guò)直線來(lái)實(shí)現(xiàn)分割的，而不是空白。

每個(gè)開(kāi)發(fā)人員應(yīng)該知道5個(gè)設(shè)計(jì)技巧,PS教程,

可以看到，在上面的盒子中，文本緊緊地?cái)D向了盒子的邊緣，每一行之間也沒(méi)有空白。相比之下，第二個(gè)就要易讀多了，而且能夠看得出是經(jīng)過(guò)精心規(guī)劃的。

在藝術(shù)領(lǐng)域，元素之間的這個(gè)區(qū)域就被稱之為負(fù)空間，盡管在設(shè)計(jì)的其他領(lǐng)域，通常被稱作“空白空間”。負(fù)空間能夠使得瀏覽者迅速地識(shí)別設(shè)計(jì)的不同部分。同時(shí)也讓文字更易讀。

下面是幾點(diǎn)小建議：

確保文本有足夠的“呼吸”空間。在區(qū)域的四邊上都應(yīng)該有合適的填充。文本不應(yīng)該碰到元素的邊緣。

注意“盒中盒”。當(dāng)頁(yè)面的元素之間是使用邊框而不是頁(yè)邊距時(shí)，你得到的就是矩形的嵌套。下一次給元素添加邊框的時(shí)候，試著添加邊距來(lái)進(jìn)行替代。

額外建議：給元素的下邊緣添加一點(diǎn)點(diǎn)額外的空白。通常這樣可以制造一些視覺(jué)上的抬升，使得這些元素在頁(yè)面上看起來(lái)更輕。當(dāng)藝術(shù)家在制作襯邊時(shí)，他們通常會(huì)采用這一招來(lái)進(jìn)行襯邊以使底邊看起來(lái)比其他邊更大。僅僅合理地使用留白這一個(gè)方法，就已經(jīng)能夠讓你比其他嘗試做視覺(jué)設(shè)計(jì)的開(kāi)發(fā)者做得好出100%了。

2.設(shè)置明暗以增加對(duì)比

在音樂(lè)中，有一個(gè)概念，叫做力度(Dynamics,指隨音樂(lè)強(qiáng)弱變化而變化的舞蹈動(dòng)作或情態(tài))。通過(guò)播放低聲播放輕柔的部分，這樣使得高音部分聽(tīng)起來(lái)更高亢，這樣來(lái)增加情感，反之依然。在設(shè)計(jì)中的道理是一樣的。當(dāng)所有的東西都是重點(diǎn)的時(shí)候，就沒(méi)有重點(diǎn)了。

每個(gè)開(kāi)發(fā)人員應(yīng)該知道5個(gè)設(shè)計(jì)技巧,PS教程,

這些字符是表示不同音樂(lè)力度的符號(hào)，從輕柔到高亢：弱，中弱，中強(qiáng)，強(qiáng)。在設(shè)計(jì)中，你可以通過(guò)顏色的明暗來(lái)調(diào)整視覺(jué)比重。圖片下方的漸變被稱之為價(jià)值量表。

明暗配合，一個(gè)用以描述顏色明暗的術(shù)語(yǔ)。把明調(diào)和暗調(diào)放到一起的時(shí)候，就形成了對(duì)比。比如說(shuō)，一個(gè)表單中的指示文本可能沒(méi)有表單的標(biāo)簽?zāi)敲粗匾?，因此，你就?yīng)該使用更小的字號(hào)或者灰色來(lái)顯示相關(guān)的文本，而不是搶眼的黑色。如果表單用黑色加粗顯示Email標(biāo)簽欄，你可能需要在底部添加一些補(bǔ)充說(shuō)明，以讓用戶相信不會(huì)使用被提供的地址來(lái)干一些非法的事情。這一段提示性文字相對(duì)沒(méi)有那么重要，因此要設(shè)置得比其他的稍“輕”一些。

每個(gè)開(kāi)發(fā)人員應(yīng)該知道5個(gè)設(shè)計(jì)技巧,PS教程,

當(dāng)你在Treehouse編輯你的個(gè)人資料時(shí)，你可以為自己添加一個(gè)個(gè)性域名。深色的文本顯示了你獨(dú)特的名稱，淺色的文字是URL的其他部分。

視覺(jué)上的重量感不是你要注意的唯一一件事。你還得確保明暗的正確搭配，這樣的話屏幕上的元素就可以很容易地被區(qū)分開(kāi)來(lái)。這是一種很常見(jiàn)的設(shè)計(jì)思路，因?yàn)檩^之色彩來(lái)說(shuō)，人類(lèi)的眼睛實(shí)際上對(duì)色彩的明暗更為敏感。

幾點(diǎn)建議：

與編寫(xiě)代碼要先進(jìn)行測(cè)試一樣，你也應(yīng)該先對(duì)你的設(shè)計(jì)進(jìn)行測(cè)試。在放出你的新設(shè)計(jì)版本以前，試著先用灰度模式來(lái)瀏覽你的網(wǎng)頁(yè)。這樣你就可以立馬看出顏色最深和最淺的區(qū)域是哪兒了。如果每一樣?xùn)|西看起來(lái)都是一樣的的話，那就該添加更多的明暗來(lái)增加對(duì)比了。單純的色彩是不足以把不同的設(shè)計(jì)元素區(qū)分開(kāi)來(lái)的;明暗配合更重要。

把你的網(wǎng)頁(yè)截屏下來(lái)，然后使用像photoshop這樣的圖片編輯工具調(diào)整曲線，色階(level)，看一下不同的效果。有時(shí)候，你會(huì)發(fā)現(xiàn)使用CSS進(jìn)行一些細(xì)微的調(diào)整便能夠讓設(shè)計(jì)看起來(lái)更賞心悅目。幾乎在每一種設(shè)計(jì)形式中，初學(xué)者都會(huì)禁不住誘惑而去調(diào)高明暗對(duì)比。將明暗調(diào)低是成熟的標(biāo)志，同時(shí)也有助于突出設(shè)計(jì)中的重要部分。