在用戶瀏覽網(wǎng)站的不同階段，分別需要不同的信息，根據(jù)用戶瀏覽的時間順序，針對性地展現(xiàn)相關(guān)信息，能夠使內(nèi)容更符合用戶瀏覽習(xí)慣和需求。通常可以簡單地將其分為初選階段、對比選擇階段、抉擇階段。
根據(jù)這三個階段也可以將網(wǎng)頁設(shè)計(jì)為3種不同的信息展示類別，即首頁、列表頁面、詳細(xì)頁面（見圖1）。由于用戶的需求不同，三者在信息內(nèi)容的設(shè)置上各有不同。
圖1 3種不同的信息展示類別
一、首頁信息展示設(shè)計(jì)
首頁是整個網(wǎng)站的全貌圖，一般起到信息展示和分流的作用，是對用戶對信息進(jìn)行初選的第一步。在首頁內(nèi)容設(shè)計(jì)中應(yīng)當(dāng)濃縮網(wǎng)站信息，篩選核心與重點(diǎn)，以易于目標(biāo)用戶瀏覽、理解的方式呈現(xiàn)出來。
按頁面空間劃分，內(nèi)容的呈現(xiàn)方式分為兩種：一種是簡潔型的，首頁只提供入口，起到分流的作用，引導(dǎo)用戶進(jìn)入更深層次的頁面，常用于信息內(nèi)容豐富的電子商務(wù)與教育類型的網(wǎng)站。如中國人民大學(xué)網(wǎng)站（見圖2），它首頁所展示的是所有分類的窗口，而不是單個信息的詳情；另一種是詳細(xì)型，多以圖文鏈接為主，頁面長度往往較長，常用于一些門戶類、新聞類的網(wǎng)站。如時代周刊網(wǎng)站（見圖3），每個欄目都劃分了板塊，頁面較長，感覺上信息量豐富。
圖2 中國人民大學(xué)網(wǎng)站
圖3 時代周刊網(wǎng)站
此外，在首頁中應(yīng)當(dāng)依據(jù)網(wǎng)站性質(zhì)和用戶需求精心選擇信息的表達(dá)方式，如圖形、文字、多媒體等元素。結(jié)合信息所占的比例、位置、標(biāo)題的字體、色彩搭配，體現(xiàn)出首頁信息內(nèi)容的層次感和視覺效果的精致感。
二、列表頁面信息展示設(shè)計(jì)
列表頁面往往是通過首頁中感興趣的分類導(dǎo)航鏈接進(jìn)入的，一個網(wǎng)站的列表頁面有可能不止一個。用戶根據(jù)頁面的標(biāo)題或圖片進(jìn)行瀏覽、對比，進(jìn)而選擇目標(biāo)進(jìn)入。此時的用戶處于初選后進(jìn)一步選擇的階段，雖尚未做最后的抉擇但大致方向更為清楚。因此，列表頁面的內(nèi)容設(shè)計(jì)要更為聚焦，根據(jù)信息量和信息類型需要選擇不同的展現(xiàn)方式。
如果頁面空間有限，文字鏈接足以滿足用戶的判斷，那么用文字鏈接即可；如果標(biāo)題不能幫助用戶很好的選擇，且空間允許，則可以選擇標(biāo)題文字鏈接，展示出少量的關(guān)鍵信息。如優(yōu)設(shè)網(wǎng)的招聘頁面（見圖4)就是典型的列表頁面，它的招聘信息的標(biāo)題字?jǐn)?shù)控制在一行約20字以內(nèi)，單擊標(biāo)題鏈接即可查看全文，在標(biāo)題下方，緊跟著兩行文字摘要，引導(dǎo)用戶單擊查看詳情。
圖4 優(yōu)設(shè)網(wǎng)的招聘頁面
除了文字鏈接外，圖片鏈接也是許多網(wǎng)站列表頁面熱衷的方式，特別是對于電子商務(wù)和藝術(shù)設(shè)計(jì)相關(guān)的網(wǎng)站，用戶更渴望看到產(chǎn)品的圖片。該頁面主要依靠圖片的視覺效果進(jìn)行選擇信息。如ZARA網(wǎng)站的列表頁面（見圖5），基本采用圖文結(jié)合的方式來增強(qiáng)網(wǎng)站的吸引力，除了可以查看小的縮略圖外，還非常人性化地提供了大圖瀏覽模式，即通過更改一行瀏覽2張或6張圖來調(diào)整此頁面內(nèi)圖片展示的大小。該網(wǎng)站這種大圖的直觀展現(xiàn)方式給用戶提升了不少好感。
圖5 ZARA網(wǎng)站的列表頁面
三、詳細(xì)頁面信息展示設(shè)計(jì)
詳細(xì)頁面是用戶瀏覽的最后階段，此時的頁面內(nèi)容通常都聚焦在一個點(diǎn)上。我們設(shè)計(jì)此頁面時，應(yīng)按照用戶的需求和瀏覽習(xí)慣，需要對信息內(nèi)容的重要性和邏輯性進(jìn)行梳理。在布局上，一般將重點(diǎn)信息放置頁面第一屏靠上的區(qū)域，將關(guān)聯(lián)度高的信息放置在一起。如在亞馬遜網(wǎng)站的詳細(xì)頁面（見圖6)中，標(biāo)題信息下方依次為評價信息、價格信息、商品詳情。其中標(biāo)題信息中并列放置如星級評分、商品評論的功能，一方面增強(qiáng)了商品的真實(shí)感，另一方面也迎合了用戶的關(guān)注需求。
圖6 亞馬遜網(wǎng)站的詳細(xì)頁面
此外，在詳細(xì)頁面中，無論用戶是完成目標(biāo)還是選擇離開，都應(yīng)當(dāng)想方設(shè)法誘導(dǎo)用戶進(jìn)行下一步瀏覽。如根據(jù)用戶的喜好推薦相關(guān)信息，熱點(diǎn)內(nèi)容，引導(dǎo)用戶瀏覽更多感興趣的內(nèi)容等。
