提升網(wǎng)頁設(shè)計(jì)品質(zhì)的7個(gè)技巧-文庫吧資料
2025-01-19 16:30本頁面
【正文】 訪問過的站點(diǎn)，我總是很關(guān)注他們的細(xì)微漸變。量變產(chǎn)生質(zhì)變，過多的“好”也會(huì)帶出不好的結(jié)果。自我克制與精妙細(xì)節(jié) 設(shè)計(jì)師總是在尋找制造沖擊力的方式，總是想做一個(gè)獨(dú)一無二的設(shè)計(jì)，創(chuàng)造些前所未有的效果?！ 〔┛褪且粋€(gè)私人領(lǐng)地，通過不同的途徑告訴讀者你的聯(lián)系方式(Connect)，能幫助他們了解你，也說不定會(huì)帶來意外的好處。鼓勵(lì)你的讀者探索你的內(nèi)容相當(dāng)簡單，只需在邊欄上加一些最新文章或最受歡迎文章的鏈接列表，或者制作一個(gè)下拉菜單，或者組織一個(gè)其他你想要推送的內(nèi)容的高效列表。在這個(gè)例子中，漂亮的RSS訂閱按鈕成為了焦點(diǎn)。這簡直就是我心目“內(nèi)容設(shè)計(jì)”的完美實(shí)例。左側(cè)放了張大小合適的預(yù)覽圖，右邊則是兩三段文章摘要，和一個(gè)“繼續(xù)閱讀”的鏈接。 內(nèi)容(Content)應(yīng)該是博客中出現(xiàn)在讀者眼前的首要部分（之一）。你不用花力氣勸說你的用戶信任你的產(chǎn)品，你的“產(chǎn)品”已經(jīng)展示在他們面前—— 也就是你的博客內(nèi)容。37Signals的網(wǎng)站上有大量行動(dòng)點(diǎn)(action points，即引導(dǎo)用戶進(jìn)行下一步操作的鏈接)貫穿于整個(gè)頁面，由于頁面很長，頁面底部還放置了更多的行動(dòng)點(diǎn)。在這一實(shí)例中，他們是通過幾個(gè)“What our Customers have to say”（我們的客戶如是說）的視頻來實(shí)現(xiàn)的。 接著，他們通過一些漂亮的插畫把你的興趣(Interest)吸引到對(duì)產(chǎn)品優(yōu)點(diǎn)的介紹上?！ ∪鐖D中所示，他們提供了四大理由讓你購買他們的產(chǎn)品。他們的網(wǎng)站讓你盡可能容易地了解了他們的產(chǎn)品，幫你做出最終決定。例如，你是在做賣東西的網(wǎng)站嗎？是要做內(nèi)容展示嗎？或者是在做一個(gè)用戶注冊(cè)頁？推廣頁面？等等…… 靠設(shè)計(jì)做買賣: 37Signals 看看這個(gè)廣受歡迎的37 signals的網(wǎng)站。不過還是有一些技巧可循的。我知道組織內(nèi)容的過程就沒有那么有趣了，不過一旦你養(yǎng)成了組織內(nèi)容的好習(xí)慣，你就會(huì)發(fā)現(xiàn)其實(shí)它也沒有想象中那么枯燥。如果你想在這方面了解更多，強(qiáng)烈建議你看一下來自Smashing Magazine的這篇文章。你可否考慮過間距？間距對(duì)于可讀性有很大決定作用 不過，為什么他們給人的感覺這么好？下一次在你自己的設(shè)計(jì)中，你又該如何運(yùn)用？ 現(xiàn)代感則來自與標(biāo)題完全不同的字體——主內(nèi)容使用的Helvetica字體，一種無襯線的、滑溜的、開放的字體。他成功的關(guān)鍵就在于選擇了能喚起人們相應(yīng)情緒的字體。圖11 Web Design Ledger：配合情緒的字體 要找到完美的字體需要不斷的嘗試和失敗，或者你還可以根據(jù)字體所代表的“情緒”來選擇字體。行間距被設(shè)定得比默認(rèn)值大很多，大大增強(qiáng)了文字可讀性。即使是這種清爽的細(xì)線體，他們也使用了寬闊的空白。圖10 Viget：行間空白和字符間距 Viget的網(wǎng)站是字體究竟對(duì)網(wǎng)頁設(shè)計(jì)有多重要的完美實(shí)例。最近流行在標(biāo)題上使用大而粗的字體。有很多方法能保證你的字體易讀易用，不過我不會(huì)給大家列一些該做什么或者不能做什么的規(guī)矩和條款，我?guī)Ыo大家的是一些聰明運(yùn)用字體的實(shí)例和分析。文字排列與字體選用的訣竅 盡管設(shè)計(jì)師大都不會(huì)親自撰寫網(wǎng)站的實(shí)際內(nèi)容，不過他們對(duì)于內(nèi)容的整體品質(zhì)仍然至關(guān)重要。前后對(duì)比：應(yīng)用效果后注意與沒有這種效果之前進(jìn)行對(duì)比?！ ∪缒?，一條1像素線這么簡單的東西就能給設(shè)計(jì)添加非常酷的深度感。陰影與1像素線的結(jié)合，讓這些區(qū)塊顯得更為精致。不過，即便是骯臟做舊的grunge風(fēng)，利用1像素高光也能創(chuàng)造大不同。圖8完美像素級(jí)細(xì)節(jié)也適用于Grunge風(fēng)格：AvalonStar 譯注：Grunge風(fēng)格有“做舊”、“迷幻搖滾”、“做臟”等幾層意思在里面，算是平面藝術(shù)中的一個(gè)流派。紅色按鈕有1像素的高亮，鏈接之間的分割線也有同等的品質(zhì)與細(xì)節(jié)。相機(jī)圖標(biāo)的投影，下方白色區(qū)域的陰影與高光，以及導(dǎo)航條上的1像素高光。Example 1處你能看到，他是如何僅僅通過添加一條1像素
環(huán)評(píng)公示相關(guān)推薦
鄂ICP備17016276號(hào)-1