網(wǎng)頁設(shè)計(jì)中，內(nèi)容有什么規(guī)劃方法嗎？

時(shí)間：2024-02-15 05:55:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-02-15 05:55:01 來源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁設(shè)計(jì)中，內(nèi)容有什么規(guī)劃方法嗎？：一個(gè)成品網(wǎng)頁是由網(wǎng)頁設(shè)計(jì)（Web Design）和網(wǎng)頁工程（Web Engineering）組成，內(nèi)容規(guī)劃即Web Design 的部分，在網(wǎng)頁設(shè)計(jì)的學(xué)習(xí)中，Web Design的流程里有一個(gè)環(huán)節(jié)叫做內(nèi)容構(gòu)建策略（Content Strategy）。

Step1，圖1，內(nèi)容構(gòu)建=Planning，在這個(gè)步驟需要組織該項(xiàng)目的框架內(nèi)容，網(wǎng)頁主旨立意，有一個(gè)清晰的脈絡(luò)與規(guī)劃。圖2，網(wǎng)頁也不僅限于PC端輸出，還可以輸出成手機(jī)端和IPAD端。

Step2，明確網(wǎng)頁設(shè)計(jì)中的利益三方，至少是網(wǎng)站擁有者和網(wǎng)站用戶。網(wǎng)站擁有者需要考慮自己需要傳遞信息給終端用戶，需要考慮到技術(shù)執(zhí)行，信息傳播空間渠道，使其容易出版、容易交互。網(wǎng)站用戶的需求則是找到他們感興趣、有用的信息，需要網(wǎng)站具備消息的準(zhǔn)確性和共享性。

Step3：圖3，建立用戶畫像（Persona），匹配到網(wǎng)站的適用群體，里面會(huì)包含用戶的屬性、目標(biāo)、期待等。往往在建立Persona前會(huì)先通過廣泛性的采訪和問卷來定位到目標(biāo)人群。

Step4：圖4，有了前三個(gè)步驟的基本鋪墊，我們就可以大致對(duì)網(wǎng)頁內(nèi)容有個(gè)方向。這時(shí)候我們可以出一個(gè)頁面功能內(nèi)容初分類。比如說，吃飯類頁面有四個(gè)功能細(xì)分：自助，廚藝課程，到家服務(wù)，餐廳。

Step5：圖5，接下來是網(wǎng)站層級(jí)內(nèi)容規(guī)劃，分為第一層級(jí)，第二層級(jí)和第三層級(jí)；將這四個(gè)功能模塊的內(nèi)容按主次分布在三個(gè)層級(jí)。這里就按chef -at -home service當(dāng)成了主要功能，在1st Tier下列出Service Index。在2nd Tier下，Blog分享是一個(gè)傳播溝通的途徑。3rd Tier則是需要表明合作站點(diǎn)等輔助信息內(nèi)容，來支撐一個(gè)食品消費(fèi)服務(wù)型網(wǎng)站的產(chǎn)出。

Step6：圖6，單個(gè)網(wǎng)頁層級(jí)內(nèi)容規(guī)劃，將Side-wide Hierarchy中的home里面的層級(jí)圖進(jìn)行進(jìn)一步的內(nèi)容填充，home下面有4個(gè)層級(jí)內(nèi)容，每層內(nèi)容依次分層和標(biāo)題。網(wǎng)設(shè)設(shè)計(jì)初學(xué)者很多對(duì)于信息框架圖的推導(dǎo)比較主觀，或者說是缺少細(xì)分，用step5,6將內(nèi)容層級(jí)細(xì)節(jié)化輸出會(huì)使得項(xiàng)目具有更多的邏輯性。

Step7：圖7，網(wǎng)頁內(nèi)容優(yōu)先級(jí)也是需要把層級(jí)優(yōu)先級(jí)提煉出來，以線框圖可視化的形式表現(xiàn)出來，并且有顏色區(qū)分。現(xiàn)在學(xué)習(xí)網(wǎng)頁設(shè)計(jì)很少人使用顏色模塊化主次關(guān)系，建議這樣分區(qū)塊能使得讀者的閱讀更流暢。

Step8：圖8，到達(dá)這個(gè)步驟之后，可以規(guī)劃信息架構(gòu)圖（information structure）了。信息架構(gòu)圖最直觀表現(xiàn)出網(wǎng)站的架構(gòu)，它是上面一系列推導(dǎo)的成果產(chǎn)出。比如這個(gè)信息架構(gòu)圖就能直觀地看出服務(wù)（service）欄目下有Home Chef , Catering, Restaurant。

Step9, 圖9，制作線框圖，線框圖是為了展現(xiàn)網(wǎng)頁頁面之內(nèi)的邏輯順序的一種低保真表現(xiàn)方式。Wireframe線框圖的產(chǎn)出也是網(wǎng)站內(nèi)容生產(chǎn)的一個(gè)重要過程。注釋和修改痕跡也會(huì)在迭代之后進(jìn)行修改，并留下標(biāo)注。我們一般會(huì)推薦自己的學(xué)生邀請(qǐng)1-3個(gè)學(xué)生幫助完成迭代過程。

Step10，圖10，將許多Wireframe線框圖的排布在一起并且加入有方向的連接線。沒有方向的連接線會(huì)讓W(xué)ireframe 看起來缺乏邏輯性，也失去了給別人測(cè)試迭代的意義。

以上十個(gè)步驟來康石石身邊的學(xué)生在學(xué)習(xí)網(wǎng)頁設(shè)計(jì)時(shí)構(gòu)架自己網(wǎng)頁內(nèi)容的步驟，加上用戶反饋的修改意見，就足以應(yīng)付一般的網(wǎng)頁設(shè)計(jì)了。




望有啟發(fā)

—————————————————

歡迎關(guān)注我的個(gè)人公眾號(hào)（kang-shishi）

如有藝術(shù)留學(xué)、保研、院校、專業(yè)、作品集方面的問題，可私信康石石咨詢。