實(shí)例與技巧高品質(zhì)的網(wǎng)頁(yè)設(shè)計(jì)-在線瀏覽
2025-03-01 04:57本頁(yè)面
【正文】 留空，只保留至關(guān)重要的信息就好。有時(shí)候創(chuàng)造奇跡的就是一些小細(xì)節(jié)，一些別人幾乎無(wú)法察覺的細(xì)節(jié)。與其就用一條單一的線，不如多加一些細(xì)節(jié)。有了這些細(xì)節(jié)， 你的設(shè)計(jì)會(huì)大不一樣。而Example 2 處， 區(qū)塊內(nèi)邊緣有柔和的漸變陰影，而邊緣之上還有一 像素的白色描邊。后面的綠色區(qū)域有非常柔和細(xì)微的光影效果，有助于將注 意力吸引到下面的白色區(qū)塊中那清新脆爽的細(xì)節(jié)上去。于是設(shè)計(jì)元素就成了鑲嵌在頁(yè)面上的寶石，而不是平鋪在上面的 一張毫無(wú)動(dòng)感的紙。他最近重新設(shè)計(jì)的 tutorial9 集合了很多非常棒的像素化技巧。 Example 2 處使用的技巧則更多了。 RedBrick Health 上 按鈕和分割線上的完美像素級(jí)細(xì)節(jié) 這個(gè)漂亮的導(dǎo)航菜單，由 Ryan Scherf 創(chuàng)造，是使用完美像素級(jí)細(xì)節(jié)提升設(shè)計(jì)品質(zhì)的絕佳實(shí)例。正如你所看到的，他沒有滿足于只用一條灰色線分割， Ryan 還在下面添加了一條 1 像素寬的高光線，避免了設(shè)計(jì)看起來過于平坦。 下面的例子是漂亮的 AvalonStar： Distortion（扭曲）主題博客，有著極贊的grunge 風(fēng)格 。下圖的 Example 1 處，上面的棕色區(qū)域有一個(gè)漸變陰影，下面的綠色區(qū)塊的頂部則有著一條 1 像素高亮線。 完美 細(xì)節(jié)小貼士 要在這一技巧上達(dá)到完美，不斷的實(shí)踐尤為重要。你甚至不一定要用到那些倒角或漸變，費(fèi)盡心力做一些實(shí)實(shí)在在的置于某對(duì)象之上的效果。 ? 思考像素級(jí)問題 描邊、漸變、線條、陰影等等，不用太寬大也能有效增強(qiáng)設(shè)計(jì) ? 前后對(duì)比 應(yīng)用效果后注意與沒有這種效果之前進(jìn)行對(duì)比。 03. 文字排列與字體選用的訣竅 盡管設(shè)計(jì)師大都不會(huì)親自撰寫網(wǎng)站的實(shí)際內(nèi)容，不過他們對(duì)于內(nèi)容 的整體品質(zhì)仍然至關(guān)重要。有很多方法 能保證你的字體易讀易用，不過我不會(huì)給大家列一些該做什么或者不能做什么的規(guī)矩和條款，我?guī)Ыo大家的是一些聰明運(yùn)用字體的實(shí)例和分析。最近流行在標(biāo)題上使用大而粗的字體。 Netsetter 在這方面做得非常好，如您所見，標(biāo)題字體很大，周圍有大量留白，十分易讀。下面的截圖來自他們的作品集展示頁(yè)，再一次展示了大字體是如何幫助創(chuàng)建開放空間的。另一個(gè)值得稱道的地方是他們對(duì)于 行高 (line height) [行間空白 ]的的絕妙選擇。也許下次你可以在自己的設(shè)計(jì)中也試一試這個(gè)技巧。下面的例子， Web Design Ledger， 在給人以復(fù)古和做舊感的同時(shí)，也飽含開放的情緒與現(xiàn)代感。 Henry Jones (該站的設(shè)計(jì)師 ) 為標(biāo)題選擇了一種流行的傳統(tǒng)襯線字體： Geia，為懷舊復(fù)古風(fēng)的實(shí)現(xiàn)提供了很大裨益。 網(wǎng)頁(yè)設(shè)計(jì)中字體選用的快速?zèng)Q斷 看了上面這么多好例子，將來你選用起字體來應(yīng)該會(huì)更加得心應(yīng)手。如果你想在這方面了解更多，強(qiáng)烈建議你看一下來自 Smashing Magazine 的 這篇文章 。我知道組織內(nèi)容的過程就沒有那么有趣了，不過一旦你養(yǎng)成了組織內(nèi)容的 好習(xí)慣，你就會(huì)發(fā)現(xiàn)其實(shí)它也沒有想象中那么枯燥。不過還是有一些技巧可循的。例如，你是在做 賣東西 的網(wǎng)站嗎？是要做內(nèi)容展示嗎？或者是在做一個(gè)用戶注冊(cè)頁(yè)？推廣頁(yè)面？等等 ?? 靠設(shè)計(jì)做買賣 : 37Signals 看看這個(gè)廣受歡迎的 37 signals 的網(wǎng)站。他們的網(wǎng)站讓你盡可能容易地了解了他們的產(chǎn)品， 幫你做出最終決定。 如圖中所示，他們提供了四大理由讓你購(gòu)買他們的產(chǎn)品。 接著，他們通過一些漂亮的插畫把你的 興趣 (Interest)吸引到對(duì)產(chǎn)品優(yōu)點(diǎn)的介紹上。在這一實(shí)例中，他們是通過幾個(gè) “What our Customers have to say” （我們的客戶如是說）的視頻來實(shí)現(xiàn)的。 為內(nèi) 容 (Blog)而設(shè)計(jì) : Well Medicated 設(shè)計(jì)博客頁(yè)面時(shí)的情況則大不一樣了。你要做的就是確保用戶能輕松閱讀你的文章，探索內(nèi)容，與你和你的博客產(chǎn)生聯(lián)系。在下面的例子中，一個(gè)粉紅色粗體字的 標(biāo)題，很好地吸引了你的注意力，引導(dǎo)你直接關(guān)注文章內(nèi)容。當(dāng)然，也有標(biāo) 準(zhǔn) 的日期和作者信息。 注意力 (Attention) 可以被引導(dǎo)到任何
環(huán)評(píng)公示相關(guān)推薦
鄂ICP備17016276號(hào)-1