網站設計流程

導論
現在時間是2007年,網路發展已經超過10年.2000年網路泡沫化之後,網路並未衰退,而是去蕪存菁的繼續成長,不斷的強化各項傳統產業功能.吸收傳統媒體的市場,在這個Web2.0的時代,要求互動,重視消費者,的趨勢中.網頁設計師該如何培養專業技能?網站應如何服務客戶和使用者?網頁應呈現如何的風格為產業加分?這篇文章融合各樣思想,盼望能簡潔且全面的做為網頁設計師的供作參考.

第一步
準備與策劃

首先，與客戶討論，確認客戶真正的需求，是否真正需要一個網站，了解客戶對網站的行銷企劃方向，了解客戶做網站的目的--是形象宣傳?是創造商機?是溝通管道?客戶期望建構網站能達到的成果，在沒有網站的階段下是如何解決的?藉由這個網站客戶希望得到什麼?問清楚客戶對網站的個人癖好或要求，客戶是否已經有自己的網址，空間，郵件.報價的部分可以先給一個可能的範圍.合約範本可以先給客戶看過並視雙方實際狀況做初步的修改.設計是為客戶解決問題，如果發現自己與客戶的需求差異太大.可以介紹他適合的同業.選擇一個很容易建立品牌的域名，域名應該是如Google.com，而不是關鍵詞.com。充斥關鍵詞的域名應該被丟棄，易於建立品牌的和容易辯識的域名才是最好的。為了了解客戶心中的網站雛型,可以詢問以下問題.網站完成後如果沒辦法真正的傳達客戶的意念,客戶會喪失對設計師的信心,更喪失了下一次的合作機會.

1、客戶架設網站的目的?
2、網站的規模?
3、網站的目標對象?
4、網站的收入來源?
5、網站的宣傳方式?
6、網站完成後如何營運,誰負責更新?
7、客戶希望用上哪些製作網站的技術?
8、客戶有什麼特別的要求或喜愛?


第二步
資料的取得與整理

網站是設計師與客戶雙方一同完成的工作,當設計師在設計編排的時候,客戶也應該在做打字'蒐集資料的工作.以下列出可能需要的資料,準備齊全才能節省雙方的時間,避免進度的延誤.而且當日後維護網站的時候,客戶也會了解該如何做.

1、名片，越多越好.未來方便找
2、經濟部商業司(查統編、公司登記基本資料)
3、ISO 認證，可以從中了解公司簡介、發展沿革、組織圖、使命及願景
4、公司照片.也是越多越好
5、產品型錄'說明書 通常上面有一些設計好的圖表'人物'圖示,也可以從這些已成型的設計中了解客戶習慣的風格
6、服務簡報 有些客戶的產品是服務，看看客戶介紹自己業務內容的簡報
7、面試員工的公司介紹文件
8、機器設備的DM.上面有設備型號.設備廠商
9、員工照片，大合照
10、客戶喜歡的網站 客戶同業的競爭網站
11、有登記註冊的商標(經濟部智慧財產局發的商標登記證書)
12、分店'加盟店'分公司連絡資料(地址'電話'簡易地圖'店長'分公司連絡人)
13、已有的網路地圖，或客戶希望的呈現方式
14、客戶的特殊要求，特定的企業顏色，特定的字型，網站無障礙程度


第三步
簽約

[進度及付款條件對照表]:
簡單的寫法就是分成三階段付款，每個階段的認定標準則雙方敲定即可。另外一種寫法就是以你自己的進度為進度.可能從草稿、校稿、定稿、設計稿轉網頁、資料模擬、上線測試，修改網頁等等.設計師要界定「必要與不必要之修改」，溝通並說服你的客戶接受你的界定標準，如果客戶不接受你的界定，而希望你作修正時，你應當作配合的動作，請記得一件事，合約一定是對雙方有利的，你怕客戶亂改你的設計，客戶更怕設計不好會影響他的銷路，這個條文其實是保障客戶的權利。如果使用資料庫維護、資料庫建構等網際網路技術，建議另外訂立合約書保障雙方權益。


第四步
網頁版型與功能企劃

網頁設計不外乎是排版和互動，讓使用者輕易的操作，得到自己要的資料.解決使用者的問題.減少客戶的資源消耗及時間浪費.所以，在設計版面時，要創造出高可用性的介面，並且讓使用者有良好的體驗.讓使用者在使用過程產生愉悅感'成就感，並且被尊重.通過排版，設計師向使用者說明網站內容的邏輯關係，讓用戶清楚了解文章重點.省略過度的美化，不要讓計數器...之類的東西干擾使用者.創造出令人感覺舒適，自由瀏覽的資訊內容.有效的傳達客戶目標.所以需要注意以下幾點.

1、盡量符合客戶'用戶習慣的設計.讓人接受陌生的東西需要代價.
2、在頁面把重要的東西突出，建立清楚的視覺層次，告訴客戶他所想知道的。
3、可以點擊的地方必須明顯，讓人明顯知道可以點擊。
4、把頁面劃分成明確定義的區域
5、省略多餘的文字
6、讓使用者清楚這是什麼網站，有些什麼，他可以得到什麼
7、減少使用者思考的次數
8、減少操作的步驟次數
9、容易從錯誤中恢復
10、為用戶準備好他可能需要的協助
11、如果有錯誤或缺失，向用戶解釋並致歉
12、導航列：網站LOGO、網站欄目、返回主頁、搜尋、實用工具或幫助
13、搜尋按鈕名稱就叫搜尋.不要特立獨行
14、靠近logo的地方，以一條精簡的口號傳達網站的內容
15、每一頁都要有導航名稱，明確的告訴用戶現在的位置
16、應該遠離那些太重的因素:flash, dom, java script等,避免干擾最重要的傳達內容
17、站內高質量的內容之間應該互相鏈接
18、你要的不是使其他網頁黯然失色的一個全明星網頁，你需要的是50個每天吸引一個訪客的網頁
19、所有的網頁距離主頁都不應該超過兩次點擊。所有內容頁也都應該鏈接回主頁
20、製作網站地圖，單頁面中不要超過100個鏈接
21、網頁尺寸以1024*768尺寸為基準-並在800*600和1280*1024上仍有良好表現


設計完成後，將設計稿製作成DEMO網頁先掛在自己的網路空間給客戶檢查.
工作中每日約下午三點回報進度及溝通資料.儘可能提到完整的人'事'時'地'物，並且使用E-mail之類等留下完整紀錄的工具.
在這個階段完成後,應該收取第二階段的費用.

第五步
網頁架構，無障礙與親合力

在製作編碼上，編寫符合W3C的網頁標準，建立合理的條例分類.符合規格的編碼內容可以讓搜尋引擎蜘蛛輕鬆的判別分數，也可以讓聲音瀏覽器等清晰的解譯網站內容.在PDA或智慧型手機上也能讓瀏覽者快速的使用網站.花心思通過無障礙和親合力的部分，並且跨IE和FireFox兩種瀏覽器,可以達到最高的到達率.符合網頁標準製作精簡的原始碼降低檔案大小,速度不是最重要的因素之一，而是唯一的重要因素。你的網頁應該非常快速，如果你的網頁會延時3，4秒鐘，你就完蛋了。每多一秒鐘，你就會喪失10%的流量。而這10%的流量可能正是成功與失敗的分野。

1、logo應製作連結回到首頁
2、確保每個鏈結是有用的.不要讓使用者感覺被欺騙
3、設定圖片和連結的alt以及title屬性
4、影片加上字幕
5、圖片內有文字取代標題.則圖片需以h1標籤包圍圖片.
6、body背景圖片不必定義alt屬性
7、無義意圖片應設alt="";不做說明.使流覽器忽略.
8、將css移除仍能閱讀
9、將JS移除仍能鏈結
10、盡可能避用影像地圖
11、不要使用閃爍的元素
12、設定TEB鍵順序
13、製作跳過導覽列的鏈結
14、標題關鍵字[title]重要度>meta關鍵字
15、網站結構目錄扁平化.越高級分數越高
16、將CSS和JS自網頁分離
17、不要在首頁[跳轉頁]用純粹用flash或圖片進入主站

更多內容請參照無障礙網頁規範中的14條及90條相關的檢測要點.


第六步-結論
架構完成-真正的努力才正要開始

把主頁提交到Google等搜索引擎，然後接下來六個月就忘了這件事.如果客戶有預算的話，也申請提交到雅虎和其他付費分類目錄.

網站建好上線後，必須注意目標用戶是否能夠找到客戶的網站.用戶一般通過搜尋或行業分類網站.定期查看網站的統計系統,了解網站的瀏覽者來源,強化吸引瀏覽者的部分,並刪去無意義的.研究用戶在網站上停留的時間'網站信息的點擊次數'網站欄目的點擊次數,分析出網站的規劃是否合理,網站對用戶是否有吸引力'網站是否吸引到目標族群?進而增加對於用戶的「黏著力」。

SEO方面,真正的SEO是從概念發想階段就應該加入考量的,每個步驟都附加上SEO的觀念,逐步注意關於SEO的各項細節.而非網站完成後才去補強的.,過程中指導客戶SEO在文案編排的重點,如關鍵字重複次數'網頁更新頻率'內容走向搭上時事關鍵字'每一天與一個新的網站交換鏈接.而當你收到交換鏈接請求的時候，要仔細查看對方的網站，不要輕易就鏈接回去。通過Google查看他們的網站，並看他們的PR值。不要鏈接到有問題的網站和質量不高的網站。確保對方網站和客戶的類似，是同一個行業的。

一個網站運作後就自成一個生態系統.不論好用難用，不論好看難看.用戶的閱讀傾向'閱讀習慣'閱讀走向便會產生一種動態平衡.如果想要調整，將編輯的意識強加在讀者身上.想改變使用者的習慣.必然是失敗的.如果有必要做改變,應以循序漸進和引導學習的方式,維持用戶的熟悉感,將轉變的衝突降至最低.

通過對於客戶的詢盤量是否有所增加、企業的美譽度是否提升、客戶關係是否改善、銷售額是否增加等等一系列綜合指標的考量，判斷企業網站是否真正給企業帶來了實效，從而指引企業對於網站、或者是對於自己的產品服務等，客戶會回來找你做售後調整,進行相應的改進。在這些網站完成的後續作業方向,設計師應以專業的知識引導客戶'給客戶關於管理網站的建議,建立在信任及誠實的基礎上,可以紮實的延續雙方合作,也可以砥礪雙方企業的品質.

參考文章來源

企業網站做好了，下一步該怎麼辦？
http://220.135.241.51/lbs/article.asp?id=1336

從事互聯網行業7年 談談建站心得
http://220.135.241.51/lbs/article.asp?id=1335

網站設計流程分享 作者Peter Lin
http://twdesign.net/design/viewforum.php?f=9

十二個月內，僅僅依靠Google打造成功網站 作者Brett Tabke
http://www.webmasterworld.com/

web設計95%是排版,5%?
http://chouyu.com.cn/

訪客至上的網頁設計秘笈
http://220.135.241.51/lbs/article.asp?id=1245

參考書目來源
Web Designer 網頁設計關鍵Idea
作者 梁景紅