如何設(shè)計(jì)網(wǎng)頁(yè)橫幅

設(shè)計(jì)一個(gè)吸引人的網(wǎng)頁(yè)主橫幅其實(shí)可以很簡(jiǎn)單，我們思考的只是如何分配區(qū)域。

在一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)中，上方的橫幅是最重要的視覺(jué)元素。在很多博客網(wǎng)頁(yè)中，它甚至是唯一的視覺(jué)元素。所以它的作用可以說(shuō)是相當(dāng)大的。它必須能夠與網(wǎng)站的風(fēng)格配合，并能傳達(dá)視覺(jué)上的信息。它必須讓人看上一眼就讓人知道這個(gè)網(wǎng)站是屬于什么類型，風(fēng)格是什么。這個(gè)橫幅還必須能夠提供簡(jiǎn)單明了的導(dǎo)航鏈接。所有這些，我們都可以通過(guò)將橫幅分成三個(gè)區(qū)域而輕松實(shí)現(xiàn)：每一個(gè)區(qū)域都具有自己的功能，而我們還要將這三個(gè)區(qū)域在視覺(jué)上統(tǒng)一，使三者具有相似性及協(xié)調(diào)性。看一下我們?cè)诒疚闹兴榻B的例子。

從劃分空間開(kāi)始：

一個(gè)網(wǎng)頁(yè)橫幅的寬度橫跨整個(gè)網(wǎng)頁(yè)，而高度又相當(dāng)窄。將其分成三個(gè)區(qū)域：名稱，圖片及導(dǎo)航鏈接。然后我們分別對(duì)其進(jìn)行設(shè)計(jì)。

如何分配區(qū)域：一般來(lái)說(shuō)，我們都是將名稱放在左上方，而導(dǎo)航欄目放在下方。其空間的分配應(yīng)該慎重。空間的比例大小是根據(jù)具體的名稱（長(zhǎng)或短）和圖片而定的，很難說(shuō)有什么最佳的比例。但是，應(yīng)該避免將上方空間分成兩等份，因?yàn)榉殖蓛傻确輹?huì)讓人的注意力都放在版式上，而不是放在內(nèi)容上。采用不對(duì)稱的分布效果會(huì)更好。

尋找一張具表現(xiàn)力的圖片：

一張漂亮的圖片是設(shè)計(jì)一個(gè)漂亮橫幅的關(guān)鍵。在找到照片后，我們還要仔細(xì)研究一下截取照片的哪一部分可以最有效傳達(dá)相關(guān)的信息。其實(shí)在實(shí)踐中你會(huì)發(fā)現(xiàn)，要發(fā)掘這一點(diǎn)并不難。

截取照片時(shí)應(yīng)記住一點(diǎn)：盡可能截取能夠傳達(dá)最多信息的那一部分。在上圖這張?zhí)飯@式的風(fēng)景圖片中，有樹(shù)，有草，有山，有陽(yáng)光——看一下我們截取的部分，都將這幾個(gè)主要的圖片元素都包括了，這正是我們所需要的，面積雖比原圖小很多，但截取后的圖片所要傳達(dá)的信息不但沒(méi)有減少，而且在層次感上還加強(qiáng)了。圖片上有豐富的明暗區(qū)域（見(jiàn)黑白圖片），形成近、中、遠(yuǎn)三種視覺(jué)效果。

用顏色分配區(qū)域：

用吸管工具從圖片選取一種較深的顏色，將這種顏色的色階由暗到亮排列，然后我們?cè)賮?lái)決定哪一個(gè)區(qū)域用哪一種顏色。特別要注意的是能產(chǎn)生對(duì)比。

強(qiáng)對(duì)比更具沖擊力：上述所有的顏色都擁有同一種色調(diào)。而且這些顏色理論上都是來(lái)自于圖片，可以說(shuō)，無(wú)論你如何將顏色分配到區(qū)域中，一般來(lái)說(shuō)，都可以形成協(xié)調(diào)的搭配。但對(duì)比度卻會(huì)因你的不同分配而有所區(qū)別。強(qiáng)對(duì)比具有沖擊力，而低對(duì)比顯得更平靜（但也因此給人的印象不深）。

放置名稱及導(dǎo)航文字：

確定顏色后，我們要對(duì)付文字。文字應(yīng)該能夠與圖片產(chǎn)生互補(bǔ)：繁雜的圖片 / 簡(jiǎn)單的字體；優(yōu)雅的圖片 / 優(yōu)雅的字體；平靜的圖片 / 裝飾性強(qiáng)的字體。

首先留意上圖中，文字在顏色使用上的互換。綠色的文字用在金黃色背景上，反之，金黃色的字體用在綠色背景上——這樣的互換使用可以使整個(gè)版面顯得更加統(tǒng)一協(xié)調(diào)。

上圖

1. 一個(gè)非常長(zhǎng)的名稱應(yīng)該分成兩行或多行，行與行之間的字體應(yīng)該是整齊的，避免使用某些高低不平的字體或小字字母，這樣會(huì)在如此狹窄的小空間中造成沖突。大寫(xiě)字母是我們這個(gè)例子中的第一選擇。我們采用一種平靜優(yōu)雅的字體，與這幅漂亮的圖片產(chǎn)生互補(bǔ)。
2. 避免使用這種裝飾性較強(qiáng)的字體，它顯得過(guò)于奇特了，只會(huì)在這里喧賓奪主。
3. 這種字體雖然很漂亮，但與這個(gè)例子中的圖片或網(wǎng)站風(fēng)格不搭配。

采用補(bǔ)色：

在這個(gè)例子中，一張半抽象的圖片傳達(dá)出 D&T 建筑設(shè)計(jì)公司的風(fēng)格，如果我們按上面的那個(gè)例子來(lái)選擇顏色，那藍(lán) / 灰的顏色會(huì)對(duì) LOGO 產(chǎn)生過(guò)于抑制的影響，所以我們使用一種反色。

補(bǔ)色形成強(qiáng)烈的對(duì)比效果：整張圖片都是由冷色構(gòu)成，而對(duì)于一間年輕的建筑設(shè)計(jì)公司來(lái)說(shuō)，藍(lán)色不能傳達(dá)它那種沖勁及活力。解決辦法：我們用藍(lán)色的反色或補(bǔ)色來(lái)安排 LOGO 區(qū)域。我們首先在色輪上確定藍(lán)色的位置，然后選擇與其相對(duì)的另一種顏色（見(jiàn)上方色輪）。互為補(bǔ)色的兩種顏色并不擁有同一種基色（不象其它顏色關(guān)系，比如，綠色及橙色，這兩種顏色都有黃色在里面），這就是為什么互為補(bǔ)色的兩種顏色能夠形成非常強(qiáng)烈的對(duì)比。在上方這個(gè)色輪中，紫色與黃色具有最高的色度對(duì)比。

與 LOGO 配合：

Fairweather Downs 的標(biāo)志已經(jīng)有五十年的使用歷史了，在這么長(zhǎng)的歲月中，這個(gè)標(biāo)志幾乎沒(méi)有改變過(guò)。這就是經(jīng)典！在這種情況下，我們的設(shè)計(jì)重點(diǎn)應(yīng)該是考慮標(biāo)志而不是圖片。

綠色及米色均屬二次色（ secondary colors ，指三原色中任兩色混合而成的中間色——譯注） ，其中一種是冷色，一種是曖色。

我們借用 LOGO 原來(lái)的一些特征——雙線框及圓角等元素，可以讓我們輕易設(shè)計(jì)其它的一些元素，而且使整個(gè)橫幅都同樣顯得經(jīng)典味十足。由于這個(gè) LOGO 是我們最看重的元素，圖片相對(duì)來(lái)說(shuō)則較為次要。留意 LOGO 中， Fairweather 與 Downs 這兩種字體的風(fēng)格相去甚遠(yuǎn)：手寫(xiě)體 / 羅馬體，尺寸小 / 尺寸大，小寫(xiě)字母 / 大寫(xiě)字母，而線條的粗細(xì)則很相似，兩者結(jié)合，形成一種具有手工感的漂亮氣息。

在 Indesign 軟件中，要?jiǎng)?chuàng)作這些圓角邊框可以很容易做到：

1. 畫(huà)一個(gè)矩形，然后將線條尺寸調(diào)整你希望的大小，這里我們是用 2pt ；
2. 打開(kāi)線條（ Stroke ） ＞ 類型（ Type ）的下拉菜單中，我們選擇了一種“ Thin-Thin ”的雙幼細(xì)線條類型，然后將這條單線轉(zhuǎn)換成兩線，
3. 打開(kāi)對(duì)象 (Objict) ＞轉(zhuǎn)角效果（ Corner Effects ）對(duì)話框，選擇反轉(zhuǎn)圓（ Inverse Round ），并確定一個(gè)線條尺寸（我們選擇的是 9pt ），然后按 OK ，一個(gè)雙線圓角的元素就完成了。

本文所用顏色數(shù)值如下：

譯文原文：
http://www.logosky.net/webpage/artreview/design_web_head_20061103.htm