講者：Asika所有權：I  Love  Joomla!  社群

h1p://ilovejoomla.tw

Joomla! 網站規劃

什麼是網站規劃？

⼀一種施工專用的溝通文件

•網站製作SOP

•照表操課不失誤

•與客戶溝通的橋樑

•制定規格、驗收標準

與「網站企劃」有什麼不同？

•網站企劃偏向行銷專案企劃書

•緣起

•目標族群

•預期效益

•廠商合作、主協辦單位、預算評估、ABC計畫、團隊簡介、行銷時程、SWOT、PEST、UESD、五力與產品生命週期........

我們需要的只是⼀一張藍圖

將顧客需求轉化成網站規劃書

我們可能會碰到幾種客戶

•很清楚自己在幹嘛的

我們可能會碰到幾種客戶

•簡單想想條列下來的

我們可能會碰到幾種客戶

•手繪魔人

我們可能會碰到幾種客戶

•像在寫作文的

我們可能會碰到幾種客戶

•克隆星人

阿嬤冗

我們可能會碰到幾種客戶

•堅持自己畫版面的

我們可能會碰到幾種客戶

•混沌

因為客戶不懂網站規劃

我們的服務才有價值

⼀一目了然的樹狀規劃展現我們的專業

不要永遠顧客至上

他們重視的不見得是真正需要的

替顧客想到他們沒想到的

他們不見得知道這麼多行銷輔助工具

設計適合他們的操作流程

vs

有些人控制欲比較強也有些人碰到電腦就焦慮

該如何開始

第⼀一步：需求蒐集

第⼀一步：需求蒐集

•案件洽談時，可以依照之前經驗設計開案用的紀錄單，記錄顧客需求。

•讓洽談工作SOP化

第⼀一步：需求蒐集

•引導客戶提出需求：

•準備相關網站分析內容

•提供常見網頁項目供參考

•提供制式表格給客戶填寫

•用紙記下討論內容回去慢慢整理

參考範本I

•直接讓客戶選想要的頁面

參考範本II

•制式表格直接填寫

翻譯能力也要訓練

•我有辦法知道訪客人數嗎？ -> (Analytics or 記數器)

•我們希望訪客可以問問題與互動 -> (討論區, FAQ, 留言板)

•你們會不會加上SEO? -> (其實他需要關鍵字廣告)

•你覺得需要Facebook粉絲頁嗎？->(資訊焦慮)

•不用做太複雜，只要......就好 -> (沒錢)

第二步：分類整理

第二步：分類整理

•首先，把所有內容都列出來

第二步：分類整理

•分類是人類的天性：

「將相似的事物放⼀一起，不相似的分開」

第二步：分類整理

•所有內容都要有歸屬點（不要製造孤兒）

第二步：分類整理

•決定哪些頁面要用擴充套件來製作

第三步：結構設計

第三步：結構設計

•首先，清楚Joomla!的內容結構

前後台展現不同的結構層級

第三步：結構設計

•用編號連結所有資源

•方便架站人員照表操課

第三步：結構設計

•擴充套件清單

第四步：開始架站啦

•交給架站人員搞定，喝紅茶去吧～～～

第五步：驗收

•有了前面精心設計的結構，驗收也更方便

•列成清單，讓客戶勾選即可

還需要些什麼？

還需要些什麼？

•頁面規劃圖

•別嚇到，用PowerPoint 就可以做到了

還需要些什麼？

•時程圖

還需要些什麼？

•估價表

別忘了加上有效期限

還需要些什麼？

•主機規格

總是有些客戶想自己買主機

實際操作

簡易流程

•通常， 我們會從客戶那邊拿到…

簡易流程

•讓我們做⼀一個簡易的排版

*��

0,� +���� �����

��� �

���%�

��"�

�.A"

��."

��."

�.B" �.C"

��."

FAQ"

)(��"

�/��"

���"

�#�-"

�$&'" ! ��"

簡易流程

•區分分類與單篇文章（灰色是分類）

*��

0,� +���� �����

��� �

���%�

��"�

�.A"

��."

��."

�.B" �.C"

��."

FAQ"

)(��"

�/��"

���"

�#�-"

�$&'" ! ��"

簡易流程

•標出特殊功能（元件）1��

73� 2���� ��!��

�����

��,�

��)�

�5A"

��5"

��5"

�5B" �5C"

��5"

FAQ"

0/ &"

�6��"

���"

�*�4"

$+-." ('��"

�# ��%��� �#-."���

簡易流程

•這是我們需要的分類與文章，把他們對應⼀一下

�$ •  ����

o ��� o �� �

•  FAQ o �%��

�� •  "��� •  ���� •  ! �� •  ���� •  ��#

簡易流程

•現在我們知道分類結構了（紅：分類、藍：文章）

前台選單 後台文章分類

簡易流程

簡易流程

•最後生成的表格

相關資源

相關資源• PowerPoint 頁面設計工具

• http://www.istartedsomething.com/20071018/powerpoint-prototype-toolkit-01/

• http://www.boxesandarrows.com/view/interactive

• http://www.raizlabs.com/blog/294/wireframing-in-powerpoint

• http://www.michaelgaigg.com/blog/2009/01/23/powerpoint-wireframe-stencils-as-free-download/

• Keynote 頁面設計工具

• http://keynotopia.com/

• http://keynotekungfu.com/

• http://sonspring.com/journal/keynote-wireframe-toolkit

• http://www.webdesignerdepot.com/2011/07/keynote-as-a-collaborative-wireframing-tool/

相關資源• 頁面設計軟體

• AxurpRP - http://userxper.com/axure

• Pencil - http://pencil.evolus.vn

• Balsamiq - http://www.balsamiq.com/

• 更多頁面設計資源

• http://www.1stwebdesigner.com/design/wireframing-mockup-prototyping-tools-plan-designs/

• http://www.noupe.com/design/35-excellent-wireframing-resources.html

• http://inspire.twgg.org/c/internet/other/several-useful-prototype-design-tools-prototype.html

• http://inspire.twgg.org/c/inspire/design-concept/wireframe-prototype-of-the-importance-of-planning-for-web-design.html

THANK YOU!