推薦：網(wǎng)頁(yè)設(shè)計(jì)中的版式原理--統(tǒng)一
作者：http://www.seowebcn.cn/網(wǎng)頁(yè)頁(yè)面構(gòu)成的要素除抽象形外，還應(yīng)包含有具象的形(字體、標(biāo)志、圖形、色彩)。假如在一個(gè)網(wǎng)頁(yè)中，存在著多種字體、字號(hào)；或存

好的設(shè)計(jì)和不好的設(shè)計(jì)，就像是一塊硬幣的正反面。之前我們看到的都是硬幣的反面，只要翻轉(zhuǎn)一下，就可以看到正面了。

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

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

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

假如你對(duì) Breadcrumb 使用率有疑問(wèn)的話，推薦你閱讀上面給出的延伸閱讀文章。

我曾經(jīng)想設(shè)計(jì)一種記錄用戶在站內(nèi)訪問(wèn)路徑的 Breadcrumb，這個(gè)和一般的“您的位置”有些區(qū)別，類似于訪問(wèn)歷史。后來(lái)我發(fā)現(xiàn)實(shí)際上 Taobao 或者其他購(gòu)物網(wǎng)站的商品瀏覽歷史（站內(nèi)訪問(wèn)歷史）可以算是一種變體。

然后還有一種設(shè)計(jì)似乎是亞馬遜獨(dú)創(chuàng)的動(dòng)態(tài) Tab 設(shè)計(jì)（延伸閱讀：亞馬遜網(wǎng)站導(dǎo)航欄的變遷史），即當(dāng)前所在的分類作為當(dāng)前的 Tab，突出顯示（動(dòng)態(tài) Tab 設(shè)計(jì)的創(chuàng)意應(yīng)該來(lái)自于利用 headings 級(jí)別文字表示當(dāng)前頁(yè)面，這一點(diǎn) Amazon 仍然在使用）：

插一句話，怎么樣設(shè)計(jì)算是突出呢？W3 有一個(gè)對(duì)比度標(biāo)準(zhǔn)算法：亮度差異大于125，色彩差異大于500。起碼得做到這一點(diǎn)吧。

利用 Tab 作位置導(dǎo)航有很大的優(yōu)勢(shì)，結(jié)合 Breadcrumb 和 Tab 還產(chǎn)生了一種 變體 ，在 Yahoo! 的一些頻道中已有運(yùn)用：

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

以上可能更多側(cè)重于信息架構(gòu)方面，舉的例子也估計(jì)是見(jiàn)多不怪，但我想說(shuō)的是創(chuàng)新永遠(yuǎn)不會(huì)是憑空產(chǎn)生的。所以我們可以通過(guò)追根溯源的方式去學(xué)習(xí)，來(lái)增強(qiáng)我們的思考能力。我贊同一個(gè)觀點(diǎn)：設(shè)計(jì)師應(yīng)該是發(fā)明家。在產(chǎn)品設(shè)計(jì)上，你應(yīng)該比他人想的更前，也要比他人想的更后。

歡迎針對(duì)本話題進(jìn)行補(bǔ)充，談?wù)勀闼��?jiàn)過(guò)的優(yōu)秀的導(dǎo)航、信息指引方面的設(shè)計(jì) 。

分享：網(wǎng)頁(yè)設(shè)計(jì)中的版式原理--分割
作者：http://www.seowebcn.cn/網(wǎng)頁(yè)制作中的分割是一種最基本的，隨處可見(jiàn)的版式原理。分割有兩種：1、橫向分耕，2、縱向分割。(網(wǎng)頁(yè)設(shè)計(jì)師聯(lián)盟http://68des