網(wǎng)頁(yè)設(shè)計(jì)的清晰定義
來(lái)自世界各地的設(shè)計(jì)師在看到一個(gè)網(wǎng)頁(yè)設(shè)計(jì)時(shí)大吃一驚,并稱贊“它既漂亮又干凈!”。 有無(wú)數(shù)專門(mén)針對(duì)“干凈”設(shè)計(jì)的網(wǎng)站設(shè)計(jì)評(píng)論,并且該術(shù)語(yǔ)通常在網(wǎng)站設(shè)計(jì)社區(qū)中使用。 可以輕松找到干凈設(shè)計(jì)的一個(gè)很好的例子,因?yàn)樗梢蕴岣咭欢ǖ?*素養(yǎng)和質(zhì)量。 但是經(jīng)常討論構(gòu)成這些“干凈”外觀的基本原理和因素,而這正是打算在此問(wèn)題上做的。
網(wǎng)站上應(yīng)使用簡(jiǎn)潔的設(shè)計(jì),以便使網(wǎng)站的目的顯而易見(jiàn)。 但是在設(shè)計(jì)“干凈”的場(chǎng)所時(shí),必須考慮純粹的美學(xué)元素和創(chuàng)造力。 您應(yīng)該問(wèn)如何改進(jìn)它,而不是詢問(wèn)可以刪除什么(在極簡(jiǎn)設(shè)計(jì)的情況下)。 如果我只用一個(gè)詞來(lái)定義“干凈”的設(shè)計(jì),那將是完美的。 每個(gè)單獨(dú)的元素都應(yīng)該屬于它,并且應(yīng)該從總體設(shè)計(jì)中受益并對(duì)其進(jìn)行補(bǔ)充。 需要平衡總體設(shè)計(jì),以使信息流和易于使用。 在最終設(shè)計(jì)之前,需要仔細(xì)檢查每個(gè)元素。 設(shè)計(jì)人員應(yīng)該花一點(diǎn)時(shí)間考慮每個(gè)元素的目的,并確定它是否可能是最好的,以及是否可以使其更清晰。
1.像素完美的細(xì)節(jié)
注意細(xì)節(jié)對(duì)于產(chǎn)生干凈的網(wǎng)頁(yè)設(shè)計(jì)至關(guān)重要。 真正出色,干凈的設(shè)計(jì)依賴于許多精致設(shè)計(jì)元素的像素的完美執(zhí)行。 看起來(lái)像邊框,高光,陰影,紋理和許多其他細(xì)節(jié)的細(xì)微細(xì)節(jié)都需要仔細(xì)考慮。 在某些主題設(shè)計(jì)可能只實(shí)現(xiàn)大膽的圖像滑塊的地方,Studeo的功能區(qū)是精美設(shè)計(jì)細(xì)節(jié)的天堂。 注意覆蓋圖像的細(xì)微紋理,一個(gè)像素的高光和底部幾乎看不見(jiàn)的淺灰色邊框。 所有這些細(xì)節(jié)似乎微不足道,甚至可能不會(huì)被某些人忽視,但是它們共同創(chuàng)造了品質(zhì)和精致感。 選擇此設(shè)計(jì)時(shí),準(zhǔn)確性是關(guān)鍵。 可能會(huì)破壞干凈場(chǎng)地設(shè)計(jì)的一件事是可怕的半像素。 當(dāng)形狀的線條和邊緣未在像素上精確對(duì)齊時(shí),半像素可能會(huì)出現(xiàn)在Photoshop中。 發(fā)生這種情況時(shí),形狀的邊緣會(huì)變得模糊。 您可以在下面的圖像中看到右側(cè)的正方形稍微模糊了。 在Photoshop中進(jìn)行設(shè)計(jì)時(shí)防止這種情況的一種方法是選擇“對(duì)齊像素”選項(xiàng)。 無(wú)論何時(shí)選擇此選項(xiàng),所有形狀的邊緣都將變得清晰整潔。
2.間距
不用說(shuō),干凈的設(shè)計(jì)不會(huì)以任何方式顯得凌亂。 但是,許多局促在一起的元素會(huì)使網(wǎng)站看起來(lái)凌亂。 不是我們想要的。 這是間隔的來(lái)源。 空白,邊距,填充和行高在實(shí)現(xiàn)干凈的網(wǎng)站設(shè)計(jì)中都起著至關(guān)重要的作用。 為網(wǎng)站的元素提供適當(dāng)?shù)拈g距可以確保它們看起來(lái)和適合整體設(shè)計(jì)。 足夠的間距還將使網(wǎng)站具有透明和優(yōu)雅的感覺(jué)。 除了確保元素間距合理外,還必須與確定的值保持一致。 盡可能在合理的地方重復(fù)邊距和填充值。
3.對(duì)齊
網(wǎng)格系統(tǒng)是可以用來(lái)幫助您創(chuàng)建“干凈”網(wǎng)站設(shè)計(jì)的最佳工具之一。 我們已經(jīng)討論過(guò)它們?cè)陂g距方面如何非常有用,但是它們對(duì)于確保對(duì)齊也非常有價(jià)值。 就像間距一樣,對(duì)齊方式可能會(huì)對(duì)網(wǎng)站的外觀產(chǎn)生重大影響。 正確且連續(xù)的對(duì)齊可以使整個(gè)生產(chǎn)線貫穿您場(chǎng)地設(shè)計(jì)的整個(gè)長(zhǎng)度和寬度。 線條流暢流暢,視覺(jué)上令人愉悅,并且可以將視線引導(dǎo)到頁(yè)面底部。 眼睛對(duì)對(duì)準(zhǔn)的變化非常敏感,可以檢測(cè)到微小的變化和不一致性。 因此,重要的是,不僅要在創(chuàng)建設(shè)計(jì)模型時(shí)實(shí)現(xiàn)像素的完美,而且在隨后的開(kāi)發(fā)階段也不要失去這種準(zhǔn)確性。 理想情況下,在大多數(shù)情況下,大部分文本應(yīng)保持對(duì)齊。 左對(duì)齊的文本會(huì)產(chǎn)生實(shí)線,并創(chuàng)建易于區(qū)分的信息列。 另一方面,居中對(duì)齊的文本將在兩側(cè)形成不平坦的邊緣,并且可能難以在大列中閱讀。 保存中心對(duì)齊以縮短文本行。