“以目標(biāo)為導(dǎo)向。”信息架構(gòu)師Are Halland在他的演講《核心-路徑法：可尋性設(shè)計》 中這樣建議。他概述了網(wǎng)頁設(shè)計的另一種方法：不要一上來就從主頁和整體導(dǎo)航方案來開始，應(yīng)該從核心內(nèi)容入手，由內(nèi)而外來設(shè)計。就是這么直接。

這個方法基于三個關(guān)鍵要素：

1．核心內(nèi)容

核心內(nèi)容就是吸引用戶來到網(wǎng)站的原因。從開發(fā)商的角度來看，核心即是網(wǎng)站提供的內(nèi)容。 需要注意的是，核心內(nèi)容并不總是一個頁面。 對YouTube而言，核心內(nèi)容是視頻，而不是www.youtube.com上的頁面。這使得YouTube也可能會有在其他網(wǎng)站上能夠找得到的視頻內(nèi)容。

核心內(nèi)容也可能帶有輔助信息。例如，技術(shù)細(xì)節(jié)可以認(rèn)為是核心內(nèi)容的一個擴(kuò)展。 像Flickr這樣的網(wǎng)站，對照片的描述以及用戶給它的標(biāo)簽，都是核心內(nèi)容——照片的輔助信息。

2．向內(nèi)路徑

用戶該如何找到核心內(nèi)容？ 有時，訪客通過主導(dǎo)航或搜索找到核心內(nèi)容。 但他們也可能直接來自谷歌。 或者是其他路徑，例如來自其他網(wǎng)站，廣告，直接在瀏覽器中輸入URL鏈接，甚至通過RSS和時事通訊。進(jìn)入路徑也要考慮搜索引擎優(yōu)化，例如人們搜索的關(guān)鍵詞是什么。

3． 向外路徑

假設(shè)用戶找到了他們要找的內(nèi)容，接下來他們可以做什么、又會做什么呢？從根本上說，后續(xù)的每個交互都會給業(yè)務(wù)帶來某種價值。這就是轉(zhuǎn)變發(fā)生的地方。對外路徑可以是從“把一樣?xùn)|西放進(jìn)‘購物車’”到“推薦一款產(chǎn)品給朋友”這些操作中的任何一個。和向內(nèi)路徑一樣，向外路徑也有很多選項要考慮，包括離開網(wǎng)站的鏈接。

這三要素中的每一個都具有不同的功能。 核心內(nèi)容真正是為用戶和業(yè)務(wù)雙方創(chuàng)造價值的地方。向外路徑的引導(dǎo)在這里起到了很大的作用：網(wǎng)站最終希望用戶產(chǎn)生購買等具體行為。 向內(nèi)路徑保證了可尋性，就是如何讓用戶在網(wǎng)上找到他們想要的產(chǎn)品和服務(wù)。而從商業(yè)的角度來看，向外路徑是為網(wǎng)站帶來投資回報率的東西。

下面是核心-路徑法的圖解，以Amazon為例（圖1）。核心內(nèi)容是一款產(chǎn)品，這里用紅色方框中的內(nèi)容來表現(xiàn)，包括一本書的封面和關(guān)鍵細(xì)節(jié)等。在左邊列出用戶可以找到這本書的多種方法，這些就是向內(nèi)路徑。把Amazon認(rèn)為用戶在核心內(nèi)容上能夠產(chǎn)生投資回報的行為，作為可能的向外路徑列在右邊。

圖1 www.amazon.com的核心-路徑模型

核心-路徑法的運用過程

想象以下場景：你在一個小的設(shè)計公司工作，接到了一個自行車網(wǎng)站改版的單子。這家店現(xiàn)在僅有一個“小冊子”一樣簡陋的網(wǎng)站，上面寫有地址和營業(yè)時間。他們想引入電子商務(wù)，以便能夠在線出售。產(chǎn)品包括高端賽車和山地自行車，以及它們的一些配件。這家店想在線出售的產(chǎn)品總共有1000款左右，主要的目標(biāo)客戶群是職業(yè)自行車選手和業(yè)余發(fā)燒友。已售出的自行車主要來自于優(yōu)質(zhì)品牌，因此，網(wǎng)站的設(shè)計應(yīng)該強(qiáng)調(diào)自行車產(chǎn)品的高品質(zhì)。根據(jù)核心-路徑法，以下是如何設(shè)計這個網(wǎng)站的完整步驟。

第一步：定義核心內(nèi)容

核心產(chǎn)品是什么？首先列一個候選名單：自行車，配件，服務(wù)等等。名單來源于腦暴，沒有對錯的概念。編輯完整的名單之后，確定一個核心內(nèi)容和它的輔助信息。在大的團(tuán)隊里這意味與團(tuán)隊成員和利益相關(guān)者達(dá)成共識。

在上述場景中，核心產(chǎn)品是自行車。自行車照片是展示核心內(nèi)容的關(guān)鍵元素。在這個案例中，自行車的功能、品牌以及產(chǎn)品系列是從屬于核心內(nèi)容的信息。輔助信息包括價格和額外的技術(shù)細(xì)節(jié)。

在優(yōu)先考慮和確定這些細(xì)節(jié)之后，手繪核心內(nèi)容（圖2）。不要繪制包括導(dǎo)航和標(biāo)志的整個頁面，只專注于核心內(nèi)容。

顧客可能希望詳細(xì)的查看產(chǎn)品細(xì)節(jié)，所以在這個階段要考慮兩件事，第一：他們?nèi)绾闻c產(chǎn)品內(nèi)容進(jìn)行交互。第二：要思考一旦用戶找到核心內(nèi)容之后的使用場景。

圖2手繪核心內(nèi)容和輔助信息

請記住，用戶也會從智能手機(jī)和平板電腦來訪問網(wǎng)站。他們也可能會發(fā)圖片到 Facebook或者 Pinterest。這是分布式核心的一個例子。因此我們手繪出如何將核心內(nèi)容放到不同場景中（圖3）。同樣，不要繪制頁面裝飾或者導(dǎo)航，只專注于核心內(nèi)容。

圖3 不同場景中核心內(nèi)容展示的不同版本

從這里你可以看到，核心內(nèi)容和輔助信息在不同場景下的表現(xiàn)形式。你可能不得不來回地通過版本的迭代來更新它們。

第二步：列出所有可能的向內(nèi)路徑

用戶到達(dá)你網(wǎng)站的所有方式是什么？顯然浮現(xiàn)在腦海的第一個是：網(wǎng)站搜索，主導(dǎo)航，谷歌和其他網(wǎng)站的鏈接。但是通過頭腦風(fēng)暴，能夠找到更多的路徑：購物比價網(wǎng)站的鏈接，乃至來自于線下媒體，如印刷產(chǎn)品目錄。

對于列表中的每一個向內(nèi)路徑，都要寫下設(shè)計需求，同時滿足這些需求。例如，對于來自谷歌和其它搜索引擎的訪客來說，搜索引擎優(yōu)化和登錄頁優(yōu)化是必要的（圖4）。

圖4向內(nèi)路徑的列表和對應(yīng)的關(guān)鍵需求

第三步：列出所有可能的向外路徑

從核心內(nèi)容推測出路徑。就像步驟二一樣，向外路徑也要滿足設(shè)計的需求。依據(jù)業(yè)務(wù)的重要性把向外路徑進(jìn)行排序，使得后續(xù)設(shè)計更清晰。由于向外路徑最終會產(chǎn)生商業(yè)價值，對其排序要參照商業(yè)目標(biāo)。在這個例子中，通過一個明確的引導(dǎo)按鈕將顧客帶入結(jié)賬流程。如果顧客不能馬上做決定，那第二個優(yōu)先級是給顧客提供一個鏈接，鏈接到愿望清單，或者向他人推薦產(chǎn)品的鏈接。

圖5向外路徑的先后次序

到現(xiàn)在為止，我們既不用看主頁也沒有想過導(dǎo)航。然而，我們已經(jīng)完成了重要的設(shè)計決策，如核心產(chǎn)品的移動版本長什么樣，以及用戶如何與網(wǎng)站的主要內(nèi)容進(jìn)行交互。當(dāng)做出高保真模型后，這些最初的界面可以進(jìn)行用戶測試。

第四步：將所有內(nèi)容整合在一起

當(dāng)你設(shè)計了核心內(nèi)容，羅列了向內(nèi)路徑和向外路徑之后，再來關(guān)注主頁和導(dǎo)航。這個階段的目標(biāo)是讓用戶以最簡單，最直接的方式找到核心內(nèi)容。

設(shè)計網(wǎng)站的主頁，導(dǎo)視頁面以及搜索結(jié)果頁面。手繪幾個備選方案。在設(shè)計的時候，要記住核心內(nèi)容和路徑的元素：核心內(nèi)容是什么，用戶如何得到它，以及業(yè)務(wù)如何轉(zhuǎn)換？

圖6手繪主頁—第一稿

在這個場景中，為了使顧客從主頁到核心內(nèi)容區(qū)，自行車商店的三大產(chǎn)品系列出現(xiàn)在主導(dǎo)航：職業(yè)賽車，山地車以及配件。對于目標(biāo)客戶來說，品牌也是很重要的考慮因素，因此品牌也包含在內(nèi)。一個明顯的環(huán)節(jié)——購物車和結(jié)賬流程也位于導(dǎo)航區(qū)中。

圖7手繪有過濾和排序選項功能的導(dǎo)視頁面

以下是一個模版，關(guān)于在文章中我們捕捉的所有關(guān)鍵點以及描述的步驟（圖8）。在本文末尾下載模版，嘗試自己的核心-路徑法吧。

圖8核心-路徑法的模版

總結(jié)

以下幾個方面是這種方法對設(shè)計的改善：

識別差距。

在最開始的時候，對主要內(nèi)容的目的進(jìn)行質(zhì)疑可以發(fā)現(xiàn)差距。

設(shè)計元素的優(yōu)先級。

分解關(guān)鍵要素，可以優(yōu)先考慮在整個設(shè)計中如何呈現(xiàn)。

聚焦設(shè)計。

核心-路徑法為整個設(shè)計團(tuán)隊提供了一個明確的方向。

核心-路徑法與其他方法直接的差異在初始階段是很小的。但是這種影響是巨大的：現(xiàn)在，核心內(nèi)容巍然屹立在你的設(shè)計中。網(wǎng)頁設(shè)計中所有的其他元素服務(wù)于一個目標(biāo)，那就是用戶和商業(yè)的完美結(jié)合。

藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)