網(wǎng)頁設(shè)計中如何貼近客戶需求這些要素多動動腦筋,網(wǎng)頁設(shè)計可能就會更加優(yōu)秀o如果你把這些原則忘得一千二凈,網(wǎng)頁設(shè)計通常會誤入歧途。回到基本原則的層面,你才可以重新審視并思考如何創(chuàng)作出獨到的網(wǎng)頁設(shè)計。然而,僅僅是遵循某種原則并不能確保成功,也就是說這并不是開啟優(yōu)秀網(wǎng)頁設(shè)計之門的“萬能鑰匙”o可我必須得說,這些原則一次又一次地激發(fā)我優(yōu)化自己的網(wǎng)頁設(shè)計.并且使我了解了網(wǎng)頁設(shè)計成敗的關(guān)鍵。本章特意精選了一些網(wǎng)站范例,以期通過多種方式來說明這些要素。一些范例一看就知道它們使用了哪些網(wǎng)頁設(shè)計原則.但還有一些就很微妙。這就是我喜歡現(xiàn)實范例的原因,通過它們能夠更實際地說明問題,而現(xiàn)實中不存在教科書般完美的網(wǎng)頁設(shè)計D2.1/基本的網(wǎng)頁設(shè)計亮點點.重點(emphasis)突出了非常重要或意義重大的內(nèi)容,從許多方面來看,重點幾乎等同于層級。為了圍繞重點這一原則來網(wǎng)頁設(shè)計,你必須分析網(wǎng)站的內(nèi)容,以確定應(yīng)該采用何種分級方式。確定這一點后,你就可以創(chuàng)作出能夠有效實現(xiàn)層次結(jié)構(gòu)的網(wǎng)頁設(shè)計了。確定重點的一個好方法是列舉頁面所需的全部要素,然后將要素按照重要性來編號;谶@一列表來網(wǎng)頁設(shè)計,從而使頁面的視覺層次結(jié)構(gòu)反映出所確立的重要性。這樣做很重要,原因之一是為了避免突出一切。它還能使你免于陷入不經(jīng)意間的層次陷阱。量好有意識地確定什么應(yīng)該視覺優(yōu)先,而不是聽其自然。如果你試圖強(qiáng)調(diào)一切,那么結(jié)果會是什么都沒強(qiáng)調(diào)。讓我們通過一些示例,看一下創(chuàng)建視覺層次結(jié)構(gòu)需要做些什么。BryanConnor(圈1)BryanConnor的網(wǎng)站是強(qiáng)調(diào)重點的有力范例。頁面中量突出的要素是來自他博客的最新文章。作為唯一的白色區(qū)域,它與頁面的大部分區(qū)域形成鮮明對比。這樣做的意圖很明確,即吸引訪客關(guān)注重點。在這種情況下,人們往往會覺得,作品集或聯(lián)系人信息也同樣應(yīng)該作為重點來突出,但是別忘了.如果事事都強(qiáng)調(diào),量終只會讓一切都混作一團(tuán),Digitalmash(圖2)該網(wǎng)站提供了另一種明確的重點來控制用戶瀏覽頁面的方式。巨大而醒目的文本再次被放置在頁面的頂部.清晰地闡明了網(wǎng)站所有者的意圖:創(chuàng)建這個網(wǎng)站就是為了找工作。它不是用來炫麓他的家人,與朋友分享Flickr照片或宣傳他的最新言論。它僅僅是為了努力贏取工作機(jī)會。思考你網(wǎng)站的目的.以及如何使用重點來突顯它。ColdStoneCreamery(圖3)該網(wǎng)站提供了一個常見的有效利用重點的布局準(zhǔn)則。該頁面的標(biāo)題欄很典型,包含了logo和關(guān)鍵導(dǎo)航項。緊隨其后,有一個很突出的重點。根據(jù)每個條目在頁面中實際占據(jù)的空間大小,可以看出這些條目在頁面中的重要性呈自上而下遞減的趨勢。這里他們用了3個圖層,有的網(wǎng)站用得更多,但那并不是必需的。這里,電影屏幕式的頁面直接抓住了用戶的目光。對比是兩個或更多個元素之間的視覺差異。具有強(qiáng)烈對比的元素是截然不同的、可分的,而具有弱對比的元素是相似的、難區(qū)分的。有大量的網(wǎng)頁設(shè)計元素可供你巧妙地利用來實現(xiàn)對比,包括顏色、尺寸、布局、字體以及字號等。網(wǎng)頁設(shè)計中的對比能夠給網(wǎng)站帶來視覺上的變化,不會讓人感到索然無味。對比還能幫助網(wǎng)站聚集焦點,從而謦決對某些元素作為重點的需求。對比可以對重點、流以及其他網(wǎng)頁設(shè)計原則產(chǎn)生影響,你可以從中看到基本網(wǎng)頁設(shè)計原則是如何相互關(guān)聯(lián)的。由于對比常常被用于加強(qiáng)所期望的重點,它能在頁面的層次結(jié)構(gòu)上產(chǎn)生最大的影響。通過這種方式,對比可以對網(wǎng)頁設(shè)計的視覺秩序產(chǎn)生作用。它能夠迅速引起對關(guān)鍵元素的關(guān)注.例如內(nèi)容、活動項以及目標(biāo)說明。同樣,你需要仔細(xì)考慮網(wǎng)站的種種需求,這樣才能有意識地運(yùn)用對比來吸引用戶關(guān)注某些元素。讓我們通過一些范例來看看其他網(wǎng)頁設(shè)計者是如何運(yùn)用對比的。Twe4kedStudios(圈1)在這個示例中,頁面中兩個巨大的綠色按鈕非常顯眼,很容易辨認(rèn)出對比。這些關(guān)鍵的行為邀請通過尺寸與顏色對比來強(qiáng)調(diào)。顯而易見,這個網(wǎng)站的網(wǎng)頁設(shè)計者力求達(dá)到兩個目的。他希望你要么肷賞他的作品集,要么給他打電話。我們在這個網(wǎng)站的其他地方也發(fā)現(xiàn)了對比。他的介紹信息字體很大,完全占據(jù)了頁面的頂部。這部分不僅與整個頁面同寬,而且也是其中最大的文本。整個頁面的上半部分是白底黑字,而底部正好相反。此種對比使得上部內(nèi)容脫穎而出,而其顯而易見的重要地位又被字體疏密的對比進(jìn)一步烘托出來。底部的內(nèi)容排得比較密集,給人不太重要的感覺。由此可見,對比是多么重要,又是多么地不可或缺。BetheMiddleMan(圖2)該網(wǎng)站再次展示了合理使用對比是如何突出重點并吸引用戶采取行動的。這個網(wǎng)站通過將其搜索工具作為頁面的主宰元素來鼓勵用戶測試這個工具。就這一點而言,他們的目標(biāo)是明確的。該網(wǎng)頁設(shè)計另一個值得關(guān)注的地方在于,頁面的內(nèi)容自上而下越來越緊湊。這種逐漸遞增的差異讓人感覺很順暢,與用戶互動。。