網頁核心內容和網頁色彩方案與網頁布局的關係

文章描述：網頁核心內容對視覺表現的影響.

“對資訊的最佳化和提煉永遠都是設計的第一步。”這是百度同盟使用者體驗中心Banner上的一句話。在自己做網頁設計的過程中，越來越對這樣的概括有了切身的體會和想法。當然，這句精鍊的句子其實包含了非常多的內容，我個人認為，至少包括這四個方面：一、從網站的整個訴求來講，網頁上需要放置哪些資訊才能更好的實現網站的訴求？哪些資訊是需要保留的？而哪些資訊是需要放置在其他頁面甚至乾脆捨棄掉的？二、對於已經確定放置於頁面的資訊，如何更好的撰寫文字、挑選圖片才能達成功能性和視覺上美觀的完美統一？三、區分資訊的重要程度，哪些是重要的，需要著重表現的？而哪些是次要一些的資訊？四、區分出資訊的主次後，在布局、色彩、尺寸上，即在視覺上如何更好的突出和表現？

這四個部分的每一部分幾乎都有討論不完的話題，那麼在這篇文章中我只就第四個方面，也就是網頁上核心內容和視覺表現的關係來梳理和概括一下自己在這方面的一些理解，盡量的將我所考慮到的內容都寫出來，同時舉一些具體的案例來說明我的觀點，便於大家更好地理解。

一、核心內容對於頁面配置的影響

下圖是一個提供WordPress網站建設的公司，在它的首頁上從上到下可以看到這樣幾部分資訊：導航、Logo、口號、作品展示、選擇我們的理由、聯絡表單、日誌列表、郵件訂閱、Twitter資訊以及著作權資訊。其中的第一視覺無疑是公司的口號和作品展示，這就是此網站首頁上的核心內容。因為作為一個網站建設公司來講，直觀的讓客戶知道你是幹什麼的？乾的怎麼樣？應該是客戶最想要瞭解的內容。那麼對於核心內容，在視覺上做了哪些考慮呢？

我們可以看到，在宣傳口號上設計師給”wordpress”這個詞應用了非常大的文字尺寸，並且顏色上和其他文字區別開，使用了較深的灰色，強調本公司是建設專門以wordpress為背景網站。在宣傳口號的下方的作品展示圖的尺寸很大，寬度達到了540像素，而整個的設計寬度是1000像素，在首頁上這樣大尺寸的展示圖能夠非常清晰而直接的讓客戶看到作品的原貌，從而對於公司的製作水準有了一個直觀的印象。而這樣的大尺寸的作品展示其實已經隱約的決定了整個網站的布局。想想看，在螢幕的左上方地區擺放上一個寬540像素，高460像素的矩形之後，接下來的地區該放置哪些資訊，其實就像是擺放積木一樣，按照重要程度挨個放置就行了。當然這並非是唯一的布局方式，但是無論何種布局方式，我們的想法都應該在功能性的考慮的範圍內進行。所以創意我們可以有，但是要明白和天馬行空的純創意的區別。

如果上面的頁面配置仍然讓人覺得中規中矩的話，下面的一個酒店的首頁的布局也許會讓我們感覺有些新意。可以看到，此設計的背景用了大幅的食物圖片，導航和主內容區只佔到整個頁面高度的三分之一，讓背景的圖片大面積的呈現出來，和上面的設計一樣，這樣布局的目的並非單純是為了標新立異或者是為了視覺上的美觀，而是該酒店的特色也許就在於餐飲方面，所以為了對核心內容進行突出，在布局上做了相應的考慮。再下面的一張餐廳也在主視覺部分強調了美味的食物，但兩者採用了完全不同的布局方式，雖然各自有資訊架構方面的獨特考慮，但是也不妨將它們看作同樣一種核心內容的兩種不同的創意方式。

[1] [2]  下一頁