企業(yè)網(wǎng)站信息架構(gòu)設(shè)計(jì) ：首頁元素

時(shí)間：2023-03-16 19:48:01 | 來源：電子商務(wù)

時(shí)間：2023-03-16 19:48:01 來源：電子商務(wù)

這篇文章是對(duì)youtube視頻 “How To Structure A Website Home Page” 的記錄和總結(jié)，適合入門UX行業(yè)的朋友們。博主Ran Segall是一個(gè)高級(jí)用戶體驗(yàn)設(shè)計(jì)師（自由職業(yè)），在youtube平臺(tái)上發(fā)了很多設(shè)計(jì)的視頻，剛?cè)腴T的UX同學(xué)們可以搜索賬號(hào)Flux來關(guān)注他。

本文章原視頻鏈接：



網(wǎng)站的首頁是用戶最先看到的頁面，可以說是企業(yè)宣傳的門戶。比起界面的美觀，更重要其實(shí)是如何向這些用戶，或者說潛在的客戶講述故事。首頁的每一個(gè)環(huán)節(jié)就像一個(gè)故事，引導(dǎo)用戶慢慢下滑，一步步了解更多。在“How To Structure A Website Home Page” 這個(gè)視頻中，設(shè)計(jì)師Segall向我們解剖了商業(yè)網(wǎng)站首頁的結(jié)構(gòu)：

第一部分：企業(yè)的價(jià)值主張（Value Proposition）
首先設(shè)計(jì)師要站在企業(yè)的角度思考一個(gè)問題—— “我們商業(yè)背后的價(jià)值是什么？“。
要知道用戶可能只在你的這個(gè)頁面停留不到10秒鐘，如何在這么短的時(shí)間里抓住你的潛在客戶，讓他們下滑頁面了解更多。 你必須用簡(jiǎn)短的一句話/圖片/動(dòng)畫等方式快速的向他們傳達(dá)你企業(yè)的價(jià)值，讓他們明白你是符合他們需求的對(duì)象。

第二部分：社會(huì)認(rèn)同（Social Proof）
社會(huì)的認(rèn)同簡(jiǎn)單的說就是——“企業(yè)的客戶們說我們做得很不錯(cuò)“ 。
這環(huán)節(jié)可以通過多種方式來表現(xiàn)，比如放我們客戶/合作伙伴公司的LOGO；一些數(shù)字（我們達(dá)成的一些成就）；來自客戶的褒獎(jiǎng)和案例（testimonial）等等。通過這些方式來增加企業(yè)的信任度，證明我們是一家認(rèn)真做事的公司。

第三部分：企業(yè)為你帶來的價(jià)值（Benefits）
這一環(huán)節(jié)要站在客戶的角度來告訴他們——“我們能給你帶來什么“
光顧你網(wǎng)站的這些人他們更關(guān)心的不是這個(gè)企業(yè)有什么能力，而是這個(gè)企業(yè)能夠?yàn)槲規(guī)硎裁?。這點(diǎn)回到來以用戶為中心的設(shè)計(jì)，所以講故事也需要從用戶的角度出發(fā)。告訴用戶如果你用了這個(gè)網(wǎng)站會(huì)對(duì)你有什么幫助（節(jié)省你的時(shí)間，幫助你提高工作效率，讓你的團(tuán)隊(duì)變得更有秩序化等等）

第四部分：功能/特色 （Feature） (technical,product)
這一環(huán)節(jié)是向客戶介紹——“我們是如何為你提供服務(wù)的“
這環(huán)節(jié)是對(duì)企業(yè)本身的能力/技術(shù)介紹/產(chǎn)品功能介紹等。

第五部分：我要怎么獲得幫助？（Call to action）(also show in the header)
在獲取來客戶的信任后，讓顧客立即知道如何獲得包裝，以CTA（call to action)作為故事的結(jié)尾?？梢允且粋€(gè)“立馬購買”的鏈接，或者是聯(lián)系我們的信息獲取表格，也可以是注冊(cè)成為會(huì)員的按鈕等等。（CTA往往也會(huì)現(xiàn)實(shí)在導(dǎo)航欄上，前后呼應(yīng)）

第六部分：頁腳（Footer）

以上就是商業(yè)網(wǎng)站的基本架構(gòu)。設(shè)計(jì)師在設(shè)計(jì)商業(yè)網(wǎng)站時(shí)可以以此作參考，并結(jié)合企業(yè)本身特點(diǎn)進(jìn)行調(diào)整。為了幫助理解，我找了更多的例子，可以很多都是遵循來以上原則（套路）：









其他相關(guān)資料：

另一篇關(guān)于登陸頁結(jié)構(gòu)解剖的文章：

網(wǎng)站首頁設(shè)計(jì)的素材庫：