實(shí)例與技巧高品質(zhì)的網(wǎng)頁(yè)設(shè)計(jì)-文庫(kù)吧
2024-12-28 04:57 本頁(yè)面
【正文】 vid Leggett 對(duì)于如何制造 單像素頂邊條 有很深的理解。他最近重新設(shè)計(jì)的 tutorial9 集合了很多非常棒的像素化技巧。 Example 1 處你能看到，他是如何僅僅通過(guò)添加一條 1 像素的高光，而將導(dǎo)航標(biāo)簽變得更有質(zhì)感。 Example 2 處使用的技巧則更多了。相機(jī)圖標(biāo)的投影，下方白色區(qū)域的陰影與高光，以及導(dǎo)航條上的 1 像素高光。 RedBrick Health 上 按鈕和分割線上的完美像素級(jí)細(xì)節(jié) 這個(gè)漂亮的導(dǎo)航菜單，由 Ryan Scherf 創(chuàng)造，是使用完美像素級(jí)細(xì)節(jié)提升設(shè)計(jì)品質(zhì)的絕佳實(shí)例。紅色按鈕有 1 像素的高亮，鏈接之間的分割線也有同等的品質(zhì)與細(xì)節(jié)。正如你所看到的，他沒有滿足于只用一條灰色線分割， Ryan 還在下面添加了一條 1 像素寬的高光線，避免了設(shè)計(jì)看起來(lái)過(guò)于平坦。 完美像素級(jí)細(xì)節(jié)也適用于 Grunge 風(fēng)格 : AvalonStar 譯注： Grunge 風(fēng)格有 “ 做舊 ” 、 “ 迷幻搖滾 ” 、 “ 做臟 ” 等幾層意思在里面，算是平面藝術(shù)中的一個(gè)流派。 下面的例子是漂亮的 AvalonStar： Distortion（扭曲）主題博客，有著極贊的grunge 風(fēng)格 。不過(guò)，即便是骯臟做舊的 grunge 風(fēng)，利用 1 像素高光也能創(chuàng)造大不同。下圖的 Example 1 處，上面的棕色區(qū)域有一個(gè)漸變陰影，下面的綠色區(qū)塊的頂部則有著一條 1 像素高亮線。陰影與 1 像素線的結(jié)合，讓這些區(qū)塊顯得更為精致。 完美 細(xì)節(jié)小貼士 要在這一技巧上達(dá)到完美，不斷的實(shí)踐尤為重要。如您所見，一條 1 像素線這么簡(jiǎn)單的東西就能給設(shè)計(jì)添加非?？岬纳疃雀?。你甚至不一定要用到那些倒角或漸變，費(fèi)盡心力做一些實(shí)實(shí)在在的置于某對(duì)象之上的效果。 ? 一定得是細(xì)節(jié) 小細(xì)節(jié)完善內(nèi)容感官是關(guān)鍵。 ? 思考像素級(jí)問題 描邊、漸變、線條、陰影等等，不用太寬大也能有效增強(qiáng)設(shè)計(jì) ? 前后對(duì)比 應(yīng)用效果后注意與沒有這種效果之前進(jìn)行對(duì)比。如此你就能知道這些細(xì)節(jié)到底帶來(lái)了哪些改觀。 03. 文字排列與字體選用的訣竅 盡管設(shè)計(jì)師大都不會(huì)親自撰寫網(wǎng)站的實(shí)際內(nèi)容，不過(guò)他們對(duì)于內(nèi)容 的整體品質(zhì)仍然至關(guān)重要。設(shè)計(jì)師的作用就是要保證內(nèi)容的展現(xiàn)方式足夠易讀。有很多方法 能保證你的字體易讀易用，不過(guò)我不會(huì)給大家列一些該做什么或者不能做什么的規(guī)矩和條款，我?guī)Ыo大家的是一些聰明運(yùn)用字體的實(shí)例和分析。 仔細(xì)考慮了字體的實(shí)例 The Netsetter 上大而漂亮的字體 網(wǎng)頁(yè)設(shè)計(jì)中，標(biāo)題很重要，對(duì)于博客設(shè)計(jì)來(lái)說(shuō)尤為如此。最近流行在標(biāo)題上使用大而粗的字體。這樣做有很多好處，不僅能提高特定內(nèi)容區(qū)塊的可用性，而且有助于組織設(shè)計(jì)中的空間和結(jié)構(gòu)。 Netsetter 在這方面做得非常好，如您所見，標(biāo)題字體很大，周圍有大量留白，十分易讀。 行間空白和字符間距 Viget 的網(wǎng)站是字體究竟對(duì)網(wǎng)頁(yè)設(shè)計(jì)有多重要的完美實(shí)例。下面的截圖來(lái)自他們的作品集展示頁(yè)，再一次展示了大字體是如何幫助創(chuàng)建開放空間的。即使是這種清爽的細(xì)線體，他們也使用了寬闊的空白。另一個(gè)值得稱道的地方是他們對(duì)于 行高 (line height) [行間空白 ]的的絕妙選擇。行間距被設(shè)定得比默認(rèn)值大很多，大大增強(qiáng)了文字可讀性。也許下次你可以在自己的設(shè)計(jì)中也試一試這個(gè)技巧。 Web Design Ledger, 配合情緒的字體 要找到完美的字體需要不斷的嘗試和失敗，或者你還可以根據(jù)字體所代表的 “ 情緒 ” 來(lái)選擇字體。下面的例子， Web Design Ledger， 在給人以復(fù)古和做舊感的同時(shí)，也飽含開放的情緒與現(xiàn)代感。他成功的關(guān)鍵就在于選擇了能喚起人們相應(yīng)情緒的字體。 Henry Jones (該站的設(shè)計(jì)師 ) 為標(biāo)題選擇了一種流行的傳統(tǒng)襯線字體： Geia，為懷舊復(fù)古風(fēng)的實(shí)現(xiàn)提供了很大裨益?，F(xiàn)代感則來(lái)自與標(biāo)題完全不同的字體 —— 主內(nèi)容使用的 Helvetica 字體，一種無(wú)襯線的、滑溜的、開放的字體。 網(wǎng)頁(yè)設(shè)計(jì)中字體選用的快速?zèng)Q斷 看了上面這么多好例子，將來(lái)你選用起字體來(lái)應(yīng)該
環(huán)評(píng)公示相關(guān)推薦
鄂ICP備17016276號(hào)-1