推薦：網頁設計中的版式原理--統一
作者：http://www.seowebcn.cn/網頁頁面構成的要素除抽象形外，還應包含有具象的形(字體、標志、圖形、色彩)。假如在一個網頁中，存在著多種字體、字號；或存

好的設計和不好的設計，就像是一塊硬幣的正反面。之前我們看到的都是硬幣的反面，只要翻轉一下，就可以看到正面了。

上次我評論了上網四大郁悶事，很大原因是導航混亂、位置感不強造成的。有一次參與朋友公司的討論時我說道，網站就像是一個信息群島，島嶼和島嶼間是相連的，差別在于你是用獨木橋還是高速公路，橋邊（路邊）是美女的誘惑還是指示牌。良好位置感的設計，主要解決三個問題：我從哪里來（為什么我在這里）？我在哪里（這里是哪里）？我將去哪里（下一步怎么走）？就像是一個迷宮，你所處位置正面有三條路，背面有三條路，你可能一下子就迷失了，忘了從哪條路來，也不知道下一步該走哪條路。

在不同的情境中，這三個問題的主次不同。但大部分情況下，第二個問題（我在哪里）更重要一些。

一種設計是在國外被叫做 Breadcrumb 的東西（延伸閱讀：Breadcrumb Navigation: Further Investigation of Usage），就是童話里利用面包屑找到回家路的聰明小孩的故事。這個設計不僅僅用在資訊類網站的分類層級導航，也經常被延伸到那些“下一步、下一步”的交互過程中。比如：

假如你對 Breadcrumb 使用率有疑問的話，推薦你閱讀上面給出的延伸閱讀文章。

我曾經想設計一種記錄用戶在站內訪問路徑的 Breadcrumb，這個和一般的“您的位置”有些區別，類似于訪問歷史。后來我發現實際上 Taobao 或者其他購物網站的商品瀏覽歷史（站內訪問歷史）可以算是一種變體。

然后還有一種設計似乎是亞馬遜獨創的動態 Tab 設計（延伸閱讀：亞馬遜網站導航欄的變遷史），即當前所在的分類作為當前的 Tab，突出顯示（動態 Tab 設計的創意應該來自于利用 headings 級別文字表示當前頁面，這一點 Amazon 仍然在使用）：

插一句話，怎么樣設計算是突出呢？W3 有一個對比度標準算法：亮度差異大于125，色彩差異大于500。起碼得做到這一點吧。

利用 Tab 作位置導航有很大的優勢，結合 Breadcrumb 和 Tab 還產生了一種 變體 ，在 Yahoo! 的一些頻道中已有運用：

另一個問題是，對于資訊類網站，用戶（訪客）可能并不是從首頁進入的，可能通過搜索引擎或者外部鏈接。這種情況下如何是好呢？除了以上方式的綜合運用，我曾看到過在頁面上給出搜索框，并給出來路的要害詞，提示用戶可以再次進行站內搜索的。比如：

以上可能更多側重于信息架構方面，舉的例子也估計是見多不怪，但我想說的是創新永遠不會是憑空產生的。所以我們可以通過追根溯源的方式去學習，來增強我們的思考能力。我贊同一個觀點：設計師應該是發明家。在產品設計上，你應該比他人想的更前，也要比他人想的更后。

歡迎針對本話題進行補充，談談你所見過的優秀的導航、信息指引方面的設計 。

分享：網頁設計中的版式原理--分割
作者：http://www.seowebcn.cn/網頁制作中的分割是一種最基本的，隨處可見的版式原理。分割有兩種：1、橫向分耕，2、縱向分割。(網頁設計師聯盟http://68des