大家好,我是烏陵土明。

過氣的遊戲製作人烏陵土明。(為什麼過氣?因為曾經輝煌過。)
專案災難專家烏陵土明。(為什麼是專案災難專家?因為我說好的不一定準,說壞的一定準)
三吸達人烏陵土明。(哪三吸?吸空氣、吸菸、吸鼻涕)
敗家達人烏陵土明。不是我很會BUY,而是我經常慘「敗」。
很雖的抽籤合宜宅沒抽到,卻很幸運的候補買到浮洲合宜住宅,又變成很雖的成受災戶的烏陵土明。
DIY維修工具人烏陵土明。

什麼是烏陵土明呢?為什麼你筆名叫做烏陵土明呢?請看這篇  「什麼是烏陵土明

我這輩子第一次製作的網站上線了~這也是米各馬文創設計有限公司 Life Area 的官方網站,乍看之下還行吧?  XD

http://migemadesign.wix.com/lifearea

 米各馬文創設計 Life Area 官網 首頁  

 

以下是我們整個網站製作的資訊:

  • 製作人員與分工:BOSS小駱負責搜尋與選擇網站製作工具、網站美術與視覺。我負責網站企劃、網站文案、網站編輯。
  • 工具:網站製作工具  WIX、心智圖  FREEMIND、流程圖  VISIO2D繪圖軟體  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 網站企劃 心智圖                                  

 

  米各馬文創設計 Life Area 網站 Layuot

上圖為  米各馬文創設計有限公司 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,第三種是手機的FaceBookAPP,如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手機有裝FacebookAPP,而不是利用手機的瀏覽器瀏覽FB網站)

  • WIX製作出來的網站還分兩個版本,桌機版跟行動版。桌機版該連三個FB連結的哪個呢?行動版又該連三個FB連結的哪個呢?想起來就覺得超複雜超難搞的。再加上WIX的缺陷,既沒辦法連接到手機的FB APP(判讀為網址不合法),又沒辦法根據對方瀏覽桌機版還是行動版,來判斷要連行動版還是桌機版的連結,因此更增加問題的複雜度。(還好WIX的網站可以自動判斷對方是用桌機瀏覽還是手機瀏覽,會自動呈現符合對方平台的網頁版本,否則WIX官網若又分成桌機版、行動版兩個網址,就更複雜了啊~)

米各馬文創設計,Life Area,WIX,官網,桌機版,介面    

桌機版編輯介面

 

米各馬文創設計,Life Area,WIX,官網,行動版,介面

行動版編輯介面

 

 

米各馬文創設計,Life Area,WIX,官網,切換行動版桌機版,介面  

切換編輯桌機版或行動版

 

  • 網路行銷有一塊是交叉行銷(Cross Promote),利用官網、部落格、FB粉絲團、LINE等主流的網路載體,來達到互相導流與宣傳的效果。
    • 在官網放置:1.FB粉絲團連結。2.LINE@連結。(LINE@是什麼說來話長,有興趣請先自行GOOGLE,這邊先不解釋)
    • FB粉絲團放置:1.官網連結。2.LINE@連結。
    • LINE@放置:1.官網連結。2.FB粉絲團連結。

  • 由於現在手機普及,大家也很懶得輸入網址,一般都用QR Code讓手機掃描。QR Code 怎麼製作?網路查得到。重點是「觀念」。你到底該做哪些網址的QR Code?並且,桌機版網頁該放那些QR Code?行動版網頁該放哪些QR CodeLINE@該放哪些QR CodeFB粉絲團該放哪些QR Code

 米各馬文創設計 Life Area 官網 QR Code                                                                                  

米各馬文創設計 Life Area 官網 QR Code

 

米各馬文創設計 Life Area 官方FB粉絲團 行動版 QR Code

米各馬文創設計 Life Area 官方FB粉絲團 行動版 QR Code

 

米各馬文創設計 官方FB粉絲團 FB App QR Code 

米各馬文創設計 Life Area 官方FB粉絲團 FB App版 QR Code  

 

米各馬文創設計 LINE@ QR Code

米各馬文創設計 Life Area LINE@ QR Code

 

 

  • 搜尋引擎最佳化(SEO)可以讓網站更容易讓人看見,提升網站流量、曝光度,進而提升成交機會。不過由於我們非技術也非行銷領域出身,因此對SEO技術和做法,不太了解,正在摸索。目前WIX提供SEO功能,其中有一頁是SEO Page Setting,裡面有三個欄位可以填寫,分別是Page TitlePage DescriptionKeywords,目前我還不知道該怎麼做比較好,只能先胡亂填寫了。

WIX的SEO設定  

 

 

你是否也有網站製作的心得呢?一起交流吧~



更多烏陵土明的世界觀,討論到關於「經營管理」的文章

arrow
arrow

    烏陵土明 發表在 痞客邦 留言(0) 人氣()