大多數(shù)人都曾經(jīng)通過網(wǎng)站購買過一個(gè)實(shí)物。這種經(jīng)歷幾乎每一次是一樣的--你到達(dá)網(wǎng)站，尋找你想買的東西 (也許使用搜索引擎，也許使用分類目錄)，把你的信用卡號和郵寄地址告訴網(wǎng)站，然后網(wǎng)站則保證這個(gè)產(chǎn)品將遞送到你的手中 。
 
這個(gè)清晰、有條不紊的體驗(yàn)，事實(shí)上是由一系列完整決策(大大小小的決策) 組成的:網(wǎng)站看起來是什么樣、它如何運(yùn)轉(zhuǎn)、它能讓你做什么，這些決策彼此依賴，告知并影響用戶體驗(yàn)的各個(gè)方面。如果我們?nèi)サ暨@些體驗(yàn)的外殼，就可以理解這些決策是如何做出來的了。

表現(xiàn)層

在表現(xiàn)層( surface )，你看到的是一系列的網(wǎng)頁，由圖片和文字組成。一些圖片是可以點(diǎn)擊的，從而執(zhí)行某種功能，例如把你帶到購物車?yán)锶サ馁徫镘噲D標(biāo)。一些圖片就只是圖片，比如一個(gè)促銷產(chǎn)品的照片或網(wǎng)站自己的標(biāo)志。
 
框架層

在表現(xiàn)層之下是網(wǎng)站的框架層( skeleton ): 按鈕，控件、照片和文本區(qū)域的位置、框架層用于優(yōu)化設(shè)計(jì)布局，以達(dá)到這些元素的*大的效果和效率--使你在需要的時(shí)候，能記得標(biāo)識并找到購物車的按鈕。

結(jié)構(gòu)層

與框架層相比更抽象的是結(jié)構(gòu)層( structure )，框架是結(jié)構(gòu)的具體表達(dá)方式?？蚣軐哟_定了在結(jié)賬頁面上交互元素的位置；而結(jié)構(gòu)層則用來設(shè)計(jì)用戶如何到達(dá)某個(gè)頁面，并且在他們做完事情之后能去什么地方。框架層定義了導(dǎo)航條上各要素的排列方式，允許用戶可以瀏覽不同的商品分類: 結(jié)構(gòu)層則確定哪些類別應(yīng)該出現(xiàn)在那里。
 
范圍層

結(jié)構(gòu)層確定網(wǎng)站各種特性和功能*合適的組合方式，而這些特性和功能就構(gòu)成了網(wǎng)站的范圍層( scope )。比如，有些電子商務(wù)網(wǎng)站提供了一個(gè)功能，使用戶可以保存之前的郵寄地址，這樣他們可以再次使用它。這個(gè)功能( 或任何一個(gè)功能) 是否應(yīng)該成為網(wǎng)站的功能之一，就屬于范圍層要解決的問題

戰(zhàn)略層

網(wǎng)站的范圍基本上是由網(wǎng)站戰(zhàn)略層( strategy )所決定的。這些戰(zhàn)略不僅僅包括了網(wǎng)站建設(shè)經(jīng)營者想從網(wǎng)站得到什么，還包括 了用戶想從網(wǎng)站得到什么，就我們的網(wǎng)上商店的例子而言，一些戰(zhàn)略目標(biāo)是顯而易見的:用戶想要買到商品，我們想要賣出它們。另一些目標(biāo)(如促銷信息，或者用戶填寫的內(nèi)容在商務(wù)模型中扮演的角色)可能并不是那么容易說清楚的。