學寫網頁教學-第四單元-架站步驟

一般來說,要建立一個網站或平台,一共有4個步驟。

他們分別是:

用家體驗 (USER EXPERIENCE)
資訊架構 (INFORMATION ARCHITECTURE)
設計 (VISUAL DESIGN)
開發 (DEVELOPMENT)

1. 用家體驗 (USER EXPERIENCE)

建立一個網站的第一步,原來並不是直接坐下來畫layout或是做Programming。反而,你應該要跳出自己是設計師的身份,把自己當作網站的用戶,想想看:

網站的用戶是誰?
他們年紀有多大?是男是女?
他們有什麼特點?興趣?
他們為什麼要上你的網頁?有什麼目標?
有什麼功能是他們喜愛/不喜愛的?
如果可以的話,最好是找出這班目標用戶,和他們聊聊天吧!

和目標用戶聊天,除了可以了解以上問題的答案外,更重要的是,你可以從與他們對話中,了解他們說話的用字,語句,把他們都記下來。

不要小看這些語句!遲一點你在為網頁寫文字內容的時候,這些語句會對你幫助很大。因為他們都是從目標用戶親口說出來的。

2. 資訊架構 (INFORMATION ARCHITECTURE)

第2步,我們叫「資訊架構(INFORMATION ARCHITECTURE)」。這一步有點像一個橋樑,去把你想做的東西,變成編程員會看得懂的東西。

資訊架構(INFORMATION ARCHITECTURE)通常有以下的東西:

Sitemap
WireFrame
Sitemap很容易去理解。你網頁將會有什麼頁,便把它們都列出來。如下圖,網站有Home, Service, Contact等頁:

WireFrame則是用一枝筆,把網頁大概的樣子畫出來:

上圖其實是twitter的wireframe! (來源:
https://www.flickr.com/photos/jackdorsey/182613360)

WireFrame不用畫得漂亮,它只是你網站外觀的大概,初稿。接下來我們還是會把它交給設計師去設計。

3. 設計 (VISUAL DESIGN)

當有了sitemap及wireframe後,我們便會把它交給設計師去做設計。

設計師通常會使用AI,Photoshop,ADOBE XD等軟件去做設計。如下圖:

要注意設計出來的會是一個圖檔。圖檔是靜態的,而網頁則是動態的。因此,設計師在設計時,還應考慮當中的動態元素。

4. 開發 (DEVELOPMENT)

當設計完成後,你便可以把設計交給編程員,去做開發了。

編程員通常會跟著設計,把外觀Frontend做好,然後再做後面的功能Backend或把網頁連上CMS。

此文章轉載自鬍子科技學院http://mtache.com/html

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *