VISUAL MARKETING
Q&A
視覺行銷Q&A

quot;RWD響應式網頁

quot;RWD自適式網頁

註1:【圖一說明】早期進行網站設計時,因行動用戶不多,故很少建置手機版網頁,導致使用者在閱讀的網頁內容遭到切割(請觀看圖一裡的手機版網頁示意圖),於是瀏覽者會有3種使用動作:放大/縮小內容、左右平移網頁看被切割的內容、跳出網站 ! 致使瀏覽者不滿意度大大提升,跳離率大大提升,自然影響到詢價機率 !

註2:【圖二說明】為滿足使用者不同需求,進而提升詢價機率,但當時RWD尚未普及且製作成本昂貴,因此,網頁設計公司只好做出3種網站(手機、桌機、平版)來滿足企業主與使用者,但這卻造成網站管理者或行銷人員的困擾,因為同一篇文章要貼3次、3次、3次 !!nbsp;很困擾,所以說3次,且各網站要使用不同網址(ex:桌機www.a.com.tw、手機mobile.a.com.tw、桌機table.a.com.tw),不單提升了網站維護成本,且相同的內容亦會將影響搜尋能見度。

註3:【圖三說明】為此RWD響應式網頁設計因應而生,一次滿足3大面向(企業主、使用者與搜尋引擎),透過RWD設計,「企業網站」更具專業感/信賴感,且最佳化視覺介面不單吸引使用目光,更滿足行動用戶的需求(請參閱Google 搜尋開始依行動瀏覽便利性排名,請務必讓您的網站做好準備),進而提升網頁瀏覽時間,而這也提升了搜尋排名部分指標的分數(如想了解SEO操作,請參閱hellip;)。


nbsp;

nbsp;

nbsp;

nbsp;

nbsp;

nbsp;

一、RWD網站設計概念說明:
nbsp;
看到這篇,想必您已經了解RWD的意思(若還不清楚,請參閱5秒讓您瞬懂RWD)」,那RWD網頁設計的原理是什麼呢 ?由於專業內容(ex:CSS3、Html5hellip;等)太過艱澀,為加速您的了解,我們採圖片方式來敘述RWD設計概念。
nbsp;
您可以想像,響應式網頁就像是一個「積木網頁」,經由數字1-4堆積成視覺與網站內容(如圖二,參考網站:nbsp;https://www.jisc.ac.uk/),
  • 當你用「平版」閱覽時,因螢幕視窗縮小且網頁受到擠壓下,數字3與4往下排列(如圖三)。
  • 當你用「手機」時,由於螢幕更小,故數字2-4會往下排排站(如圖四)
這樣網頁內容就不會遭到切割,亦讓使用者能夠清楚看到內容,這就是RWD的網頁設計原理(觀看RWD實績案例)。
quot;RWD響應式網頁
二、【優點】RWD設計
  1. 請參閱【為何需要RWD網站?
三、【缺點】RWD設計
  1. 不適合複雜的介面:一來不利於行動用戶閱覽,二來在設計上要花費更多的時間進行調整,將提高網站成本。
  2. 載入速度的問題:由於3站合一,故當網頁設計的複雜度與動畫效果越高時,將影響到觀看網頁的速度
  3. 不支援IE8 以下的瀏覽器

nbsp;

三體一體代表一個網站能因應不同的螢幕尺寸(桌機、平版與手機)自動調整網頁圖文內容,讓您在瀏覽網頁時,能感受到排版整齊、視覺舒適、內容清晰明確(如下圖所示,觀看更多RWD實績案例),而這樣的網頁設計效果有一個專業的名稱叫做RWD(原文為Responsive Web Design),大多網站設計公司也稱RWD為「響應式網頁設計」或「自適應網頁設計」。

quot;RWD響應式網頁quot;

nbsp; nbsp; nbsp; RWD網站最棒的地方在於能呈現最佳瀏覽畫面,讓你看到的網頁不因受到螢幕限制而切割到內容(大家以前用手機看網站時,都要用手放大/縮小,然後透過左右平移看到其它內容,看網頁真的非常痛苦!!)


nbsp;

nbsp;

nbsp;

網頁設計的價格差異主要是因為經營型態、製作方式的不同而有所差異。

經營型態大致上可區分為工作室及設計公司兩種,在價格收費上來說,工作室平均較設計公司為低。

◎ 工作室屬於個人或由少數人員的團隊組成,並沒有成立公司,所以可以省去許多的人事管銷費用,大多數的工作室並沒有提供後續的維護服務,因此網站上線一段時間之後,若網站出了問題,將會有找不到人維護的風險。所以網頁設計工作室的設計費用通常會比一般設計公司來的低。

◎ 設計公司不僅內部有專業的網頁設計師、平面設計師、程式工程師、業務人員、客服人員hellip; 等,所使用的圖庫素材也都是購買有版權的。製作方式大致上可區分為專案型設計、標準型設計、套版型製作。網頁設計製作流程、架構、功能的複雜度、內容多寡、設計精緻度、修改率不同,價格肯定也是不同的,複雜的價格自然很高,簡單的自然就低。nbsp;

◎ 專案型設計的網頁設計都是由整體規劃開始的。先了解客戶的行業、客群,針對客戶的需求規劃整體網站,做到注重視覺美學的呈現及企業品牌形象的建立的要求。客戶可藉由網站精準地將好印象傳達給目標客戶,讓他們感受到網站想要傳達的意念,並在網站上取得所需的資訊,提升企業或產品營業績效,達成視覺行銷的目的。由於投入時間長且精緻化的服務,相對價格會比一般需求高,但絕對有其價值。

◎ 標準型設計是依客戶提出的功能與頁數加總做報價,並無像專案型設計的高規格整體企劃服務。由設計師設計提版,排版較為常態手法,程式功能標準。因為時間就是金錢,所以重點是無法給予較多設計結果的選擇與修改,而是要討論明確的方向後再進行製作。

◎ 套版型網站則是使用通用網站模板,只要花一兩天工時將原有的網頁設計模版改些圖片、改個名稱、地址hellip; 等基本資料即可完成。

建置網站,要以長期性的效益及風險為主要評估方向,不要完全以價格為主要的考量因素。

服務需要人力成本與時間成本,一分錢一分貨。

nbsp;

設計是需要發想的、設計是需要時間溝通的、許多精美的圖片都需要購買才不會有侵權問題、設計是將企業形象轉換成視覺震撼的一門專業美學。換句話說,網頁品質好壞跟這些因素都息息相關。越好的品質要求,需要越長的時間去做這些事情,當然也需要更多的預算去運作,因為設計真的是很明顯的一分錢一分服務啦。

一、前置準備階段

.公司內部整理討論網站需求及初步架構
.尋找網頁設計廠商
.與網頁設計廠商討論需求,並請廠商提供網站規劃及報價書
.確定廠商並進行簽約
.準備網站建置所需資料,並提供予網頁設計廠商

二、設計製作階段
.進行網站版面及風格討論及製作
.請客戶確認已完成之網站靜態風格版面
.風格確認後,進行網站切版及靜態內頁製作
.進行系統程式開發
.網站期中或期末驗收
.網址及網站空間申請
.網站正式上線

三、網站設計完成後
.至各大搜尋網站登錄網站
.進行網路行銷相關執行,以提高網站曝光率
.定期更新網站內容
.客戶需定期查詢並處理網站訂單或客服信件

網站設計執行前,企業族須先準備準備網站建置相關的資料,一般分為三種類型


一、文案資料
例如:「公司簡介、企業沿革、營業項目、產品介紹、公司連絡基本資料…等」。這些文案通常需由企業提供給設計公司進行製作,如果企業本身有行銷企劃人員,可請他們先將文案整理後並撰寫出具專業文案之相關資訊。若企業內部沒有專業的文案撰寫人員,也可請設計公司幫忙撰寫可能需要增加工本費,或是請他們提供參考範本,然後企業內部再針對範本進行內容編修。

二、圖片資料
建置網站需要的圖片資料,主要是以商品照片、公司相關場景照片、企業Logo圖片須可編修原始檔為佳。圖片資料中,以「商品照片」最為重要,優質的商品照片, 除可增加網站豐富度及美感外,更能增加準客戶的合作信心及消費者購買的慾望,所以慎選照片是很重要的,建議可以挑選幾張主要的商品,放置於網站首頁,如此將更能增加商品的曝 光機會。此外,您也需要注意圖檔的所有權,以免造成侵權行為。
(專業公司都會使用版權圖片,若是以便宜為訴求的設計公司您可能就要小心喽)

三、其它檔案資料
除了文案及圖片資料外,若您的網站需要有其它特殊需求時,便需另外準備相關的檔案資料,例如:「影音檔、技術說明文件、操作手冊、欲提供網友下載的檔案… 等」。此外若企業本身有自行的CIS企業識別設計,也可以將相關資料提供給設計公司,如此將能設計出更符合企業形象的網站。

一般而言要架設一個網站,需要具備「網頁與程式設計」、「網站空間」、「網域名稱」三個要件,才能讓網站正常運作。


1‧頁面設計與程式設計:
即設計出符合您自已企業形象及功能的網頁,您可自行設計但建議委託專業的網頁設計公司或人員代為設計。一般設計費用將依「設計頁面的多寡」及「程式功能的難易」為考量,費用由幾萬元至數十萬元不等。
2‧網站空間:
當您網頁設計完成後,您必需有個網站空間來放置您的網頁,一般網站空間取得方式有2種,一為自行架設伺服器,也就是您要自行去買一部電腦當伺服器,並全年開機運作,此種方式費用較高,約為3萬元至數十萬不等,大部份的企業多採另一種方式即「虛擬主機」。也就是您可以租用「虛擬主機空間」來放置您的網頁。 採用哪種方式?喝牛奶需要養頭牛嗎?
3‧網域名稱:
當您設計好了網頁,並有了主機放置網頁後,最後就是要有一個屬於自已網站的「網址」,您必需申請網域名稱,才會有一個固定的網址。目前網域名稱申請費用約為每年800左右。百邇來會幫您代辦。

1.租賃型: 製服型(整個平台數千家客戶網站都差不多相同)

租用某些大型平台的系統,類似Blog,申請帳戶後有一個管理介面做自己網站的內容管理,Blog是免費商業網站需要費用
優點: 可以靠平台來做廣告曝光
缺點: 每一個網站都長得一樣,買主無法感受到貴公司的產品或服務差異,網站只做資訊傳達無法提升形像效益

2.套版型: 雖有自我風格但還是會有人跟你一模一樣,如同穿衣服撞衫
價格不高的網站設計,服務很難投入太多時間規畫與構思,通常業者會使用現有的模版來使用以降低設計與程式兩方向的成本

3.簡易型: 重於資訊的傳達
雖是客製但價格便宜,就只是美工人員簡易編輯,一般微型企業有個網站就好,不求精緻......或公司定位本來就不求高水準,選這種方案即可....

4.標準型: 功能標準但視覺畫面量身設計
一般企業架構都是公司簡介、產品介紹、最新訊息、聯絡我們、檔案下載.....等功能
因為相關企業需求大同小異,所以都是強調畫面風格與視覺印象的差異
5.專案客製型:
由於客戶強調專業設計所以在頁面設計的編排上須加強創意與意涵,而在功能系統的呈現,手法上也會以較不同與複雜的語法來達到視覺形象的提升,不僅業主肯定其價值,更要瀏覽的目標客戶感受其特色,進而達成視覺行銷的目的,這是精緻化的服務,相對價格會比一般需求高些費用,但絕對有其價值