View
3.267
Download
2
Category
Preview:
Citation preview
講者：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!
Recommended