我這輩子第一次製作的網站上線了～這也是米各馬文創設計有限公司 Life Area 的官方網站，乍看之下還行吧？ XD
http://migemadesign.wix.com/lifearea
以下是我們整個網站製作的資訊：
- 製作人員與分工：BOSS小駱負責搜尋與選擇網站製作工具、網站美術與視覺。我負責網站企劃、網站文案、網站編輯。
- 工具：網站製作工具 WIX、心智圖 FREEMIND、流程圖 VISIO、2D繪圖軟體 PHOTOSHOP
- 網站製作時間：約2~3週。兩人都是第一次作網站。
製作流程：
1. 先找好工具WIX。網址是http://www.wix.com
2. 先確認公司營業策略與架構，繪製策略架構圖。(心智圖)
3. 利用上述策略架構圖，繪製網站架構圖。(心智圖)
4. 作網站企劃。(用心智圖，繪製需求、架構)
5. 利用VISIO(流程圖繪製軟體)進行畫面排版與規劃。(LAYOUT)
6. 利用WIX編輯桌機版網頁。
7. 細部文字編輯與排版。(圖形是用暫代圖形)
8. 製作正式版圖形。
9. 將暫代圖形改用正式圖形。
10. 行動版網頁排版Layout。
11. 內部測試與修正。
12. 正式上線Publish。
13. 利用FB粉絲團、員工個人等方法來宣傳官方網站。
14. 根據回饋意見進行臭蟲修正Debug、微調Tunning。
15. 進行「搜尋引擎最佳化」SEO工作。(學習中、進行中)
上述流程是第一次胡亂擬定的，因此遇到問題也是難免。第一次嘛～
上圖為 米各馬文創設計有限公司 Life Area 網站企劃 心智圖
上圖為 米各馬文創設計有限公司 Life Area 網站 版面規劃 Layout
下面來說說開發工具WIX的優缺點吧～
WIX優點：
- 某種狀況下，免費。
- 編輯容易，製作快速。(有點像Power Point。)
- 有免費圖庫可以使用。
- 支援各種免費或付費的APP插件。
- 相較於其他網站製作工具，較為強大。(但還是不足，詳見後面說明)
WIX缺點：
- 英文介面：網站本身介面支援英文、日文、法文等，但不支援中文介面UI。不過由於多數英文單字還挺簡單的，有學過電腦應該難不倒，再加上自己可以用GOOGLE翻譯，所以應該還好啦～
- WIX不支援中文字型的解決辦法：WIX的中文字體內建細明體，但不支援其他中文字形，只好偷吃步，用日文字型Meiryo來頂替，看起來有點像是「微軟正黑體」。不過此偷吃步解決辦法仍有缺陷，那就是部分文字無法用日文字型Meiryo顯示。為了解決這個問題，我又延伸一個偷吃步解法：不要用那個字！
- 行動版網頁支援性：WIX不支援手機使用FB APP網址，如fb://profile/519339054884538 (這是我們公司FB粉絲團，用手機的FB APP打開的網址連結)。還會判定為不合法的網址，不給輸入。囧～
- 行動版網頁支援性：WIX不支援USER按下按鈕後，辨識要連到桌機版還是行動版的網址連結，必須要靠偷吃步的方法才能達到同樣的目標功能。例如FaceBook有三種網址，第一種是桌機版網址，如http://ww.facebook.com/lifearea，第二種是行動版網址，如http://m.facebook.com/lifearea，第三種是手機的FaceBook的APP，如fb://profile/519339054884538 。
- 行動版網頁支援性：WIX是用桌機版網頁為基礎自動生成行動版，但是由於版面會跑掉，編輯者還是必須排版美化。但是這功能有缺陷，例如說，他的文字區域內文字的字型大小，行動網頁可以調整，但是，圖形註解卻無法調整。這是最大問題～因為無法用偷吃步的方法來解決問題～(至少我想了很多方法都沒辦法辦到)
其他製作心得
- 首先，我們公司在網站製作之前，就已經將各網路平臺的功能與目的作切割。因此官網的目標很簡單：這是一個公司用的形象網站，用來介紹公司，介紹公司業務。至於其他頻繁的消息更新，與客戶更加即時的互動，放到FB粉絲團去操作。由於任務切割明確，因此對於後面網站企劃的進度很有幫助。
- 由於我們公司的商業模型較為複雜(詳見米各馬官網：關於我們)，因此若是沒有先將公司的營業項目彙整成文件並條理化，後續製作網站將會造成頻繁的溝通與理解的錯誤。我們這點做得很好，一開始就把公司的商業模型、營業項目、策略給文件化了，並且用有系統結構的心智圖作為結構。
- 公司的基礎建設很重要。例如，要做文創活動與課程，整個過程的流程是什麼？如何讓USER知道？要怎麼收費？若事前報名，之後課程當日收費嗎？萬一有人報名不來怎麼辦？又例如給退費嗎？依照什麼法規？退費時要怎麼辨認身分？若要辨認身分要怎麼做，需要取得個資嗎？若要取得個資，我們還得要有個資聲明。哩哩叩叩的東西很多，都必須事先規劃。包含流程、方法、法規、文件等等。
- 由於我們公司的營業項目有一項是文創活動與課程，因此有參考其他公司的網站，了解這部分業務的運作流程。後來規劃了收費流程機制的需求，經過與小駱討論之後，將此需求移除。原因是，若網站有收費機制，我們沒有技術，外包出去又昂貴，所以直接將需求刪除。
- 之前本來有找了Axure準備要做網站的Pototype，不過由於網站本身並不複雜，用VISIO作簡單的圖文說明即可。
- 用VISIO進行畫面的預先排版，事後證明這個步驟是多餘的。因為WIX操作上接近PowerPoint之類的軟體，並不是很複雜，所以其實可以用WIX直接排版。因為我用VISIO排版排了大概0.5~1天，這工時算是浪費掉了。(Sorry Boss！浪費掉你好幾千元成本～)綜合以上兩點，我的工作經驗結論就是：不用作Prototype，不用作預先Layout，直接用WIX編輯就對了。所以我們的工作流程，其實是可以改善的。
- 「網站企劃」算是整個工作下來最有收穫的。整個網站企劃前期規劃，大概花了我一週，而且是非常傷腦筋，非常有挑戰性的一週。反而「網站編輯」沒甚麼挑戰性，雖然也花了大概一週左右的時間，不過就是摸摸工具然後施工而已。說穿了，純粹就是「工」。
- 上述網站編輯排版的「工」，其實蘊含著很多SENSE。例如，標題的顏色、字型怎樣才美？網站整體風格配色？字型大小要多大，桌機版、行動版瀏覽時會覺得剛好？行距要多寬？文字區塊要多靠近螢幕邊緣？每頁的每個標題、圖形有固定的位置嗎？圖片要怎麼編排放置才有感覺？很多東西是要一個一個Try的。很費時。
- 網站文編的「工」，也是蘊含著很多SENSE。如何消滅錯別字？如何確認寫出來的意思，人家不會會錯意？又怎樣寫，才符合消費者的需求？才符合網站風格甚或創造網站風格？怎樣寫才能讓瀏覽者了解公司，和公司的營業內容？怎樣寫才能吸引客戶成交，但又不至於攻擊他人、得罪他人？有些文字需要抒情，有些需要條列、表格，又需要感性，又需要理性。
- 官網要連結到手機的FB APP連到FB粉絲團，竟然是非常非常難搞的！一個FB粉絲團網址竟然有分成三個！哪三個？桌機版、行動版、行動APP版(假設USER手機有裝Facebook的APP，而不是利用手機的瀏覽器瀏覽FB網站)。
- WIX製作出來的網站還分兩個版本，桌機版跟行動版。桌機版該連三個FB連結的哪個呢？行動版又該連三個FB連結的哪個呢？想起來就覺得超複雜超難搞的。再加上WIX的缺陷，既沒辦法連接到手機的FB APP(判讀為網址不合法)，又沒辦法根據對方瀏覽桌機版還是行動版，來判斷要連行動版還是桌機版的連結，因此更增加問題的複雜度。(還好WIX的網站可以自動判斷對方是用桌機瀏覽還是手機瀏覽，會自動呈現符合對方平臺的網頁版本，否則WIX官網若又分成桌機版、行動版兩個網址，就更複雜了啊～)
桌機版編輯介面
行動版編輯介面
切換編輯桌機版或行動版
- 網路行銷有一塊是交叉行銷(Cross Promote)，利用官網、部落格、FB粉絲團、LINE等主流的網路載體，來達到互相導流與宣傳的效果。
- 由於現在手機普及，大家也很懶得輸入網址，一般都用QR Code讓手機掃描。QR Code 怎麼製作？網路查得到。重點是「觀念」。你到底該做哪些網址的QR Code？並且，桌機版網頁該放那些QR Code？行動版網頁該放哪些QR Code？LINE@該放哪些QR Code？FB粉絲團該放哪些QR Code？
米各馬文創設計 Life Area 官網 QR Code
米各馬文創設計 Life Area 官方FB粉絲團 行動版 QR Code
米各馬文創設計 Life Area 官方FB粉絲團 FB App版 QR Code
米各馬文創設計 Life Area LINE@ QR Code
- 搜尋引擎最佳化(SEO)可以讓網站更容易讓人看見，提升網站流量、曝光度，進而提升成交機會。不過由於我們非技術也非行銷領域出身，因此對SEO技術和做法，不太了解，正在摸索。目前WIX提供SEO功能，其中有一頁是SEO Page Setting，裡面有三個欄位可以填寫，分別是Page Title、Page Description、Keywords，目前我還不知道該怎麼做比較好，只能先胡亂填寫了。
你是否也有網站製作的心得呢？一起交流吧～
更多烏陵土明的世界觀，討論到關於「經營管理」的文章
全站熱搜
留言列表
