網頁設計大補帖～1萬個什麼

• 推薦分享：
• 

➤ 網頁設計是什麼？

網站你一定耳熟能祥，你天天在用的FB就是一種網站，但你是否想過網站內網頁是怎麼製作出來的呢？一個網頁其實包含很多人力及專業技術產生出來的，一開始網頁均會由設計師(A設)設計一張平面稿出來，接著便會有設計師(B設)將平面圖轉換成一個帶有大量HTML程式碼的(什麼是HTML)網頁。

因此最簡單的一個網頁就被這樣子設計出來了。當然這絕對不是那麼的簡單的事，動手下去做從網站前端 ➡ 網站後端 ➡ 資料庫 ➡ 主機管理，每一個環節可都是包含著專業的技術。

➤ 主機、網址是什麼？

每一個網站都需要架在一台電腦上面，因此我們就會稱那台電腦就是所謂的"主機"。目前市面上有很多的服務都在提供主機，外商如Google、Amazon、Godaddy、linode、bluehost。本土商如中華電信、智邦、戰國冊..等。

若您問我說那一個比較好呢？我個人是使用Google的Bitname，因為我喜歡主機在台灣，速度快有利於SEO，而且Google品質掛保證， 主機費一個月只要300有找，只是稍有難度，不利於非IT人員。

若是創業新手要建置網站的話，我個人推薦Godaddy，介面簡單又是中文化，三年主機租用費大概4500元。若懂英文的話，建議可以選擇Bluehost。

網址呢？ 你家地址住在"台北市中正區忠孝東路168號"，同樣的網址就是主機的地址，只是他是以4組數字所組成的，如35.123.32.33(稱為IP)。為了方便人腦記憶就會對應另一組網址如facebook.com。

主機跟網址都是需要跟第三方服務所購買或租用的，這邊的細節我們會放在外包篇提到更多的介紹

➤ 響應式網頁設計(RWD)是什麼？

在過去手機尚未流行之前，網頁只要在電腦螢幕前面美美的的呈現就可以。但由於手機的興起，過去一個14寸的網頁要塞到只有5寸的手機螢幕or平版裡面，這跟本就是不可能的事。因此響應式網頁設計(RWD)的設計概念就跑出來了。

所以響應式網頁設計(RWD)就是讓你的設計出來的網頁能夠皆能夠完美的呈現在各式大小的螢幕內，一點也沒有網頁壞掉之問題。

響應式網站 (圖片來源:簡單創設計部)

所以響應網站的優勢是「同一個網站在不同尺寸的螢幕上會自動調適內容，以符合版面大小，都能夠清楚地看到網站的圖片和內文，都能完美呈現。」，支援多種瀏覽裝置，如電腦、平版或是手機等，可增加行動裝置用戶外在您的網站上直接下單的機率。

台灣使用智慧型手機高達82%，提供給您的用戶最佳瀏覽體驗，讓您的網站手機、平板、電腦一次搞定！品牌形象一致，不需要針對不同版本而設計不同視覺效果，可使用單一網址做宣傳。在SEO(搜尋引擎最佳化)加分，因響應式網站不必拆成電腦版、手機版兩個連結，因此流量分析能統一，有利於SEO。

網站架設外包的時候，請確定是否有提供RWD頁面，若沒有的話 or要加費用，請換下一家網站架設公司吧。以現有技術RWD叫做"標準配備"，怎麼是拿來做為敲詐消費者的手段。(除非你也不在乎RWD啦)

➤ APP是什麼？

APP(Application:應用程式)，同於智慧型手機的流行與普及，就會有一些"程式"是專門"應用"在手機 /平版 /智慧型裝置上的，這些"應用程式"就是所謂的APP，如台灣最普及的Line、FB不只有網頁版本、也有手機版(即APP版)。

APP一般有分成Andorid(安桌)及IOS，差異是在Android只能在非IPhone的手機上安裝，而IOS只能在IPhone上平用。下載的時間請注意有些APP是需要付費的，美金、台幣請千萬要注意。(附上AndoridIOS的下載圖片及網址)

1. APP 都已娛樂、社交、遊戲為主
   只要拿出你的手機看一下，會發現APP都使休閒為目的。所以APP下載排名以遊戲軟體、娛樂程式（如電影時刻、線上影片）和社交程式（如Facebook、Line）為主。
2. 手機只能搜尋網頁
   手機搜尋功能都是以搜尋「網頁」為主，除非花大錢宣傳，搜尋結果只會出現網站，不會出現APP。Google map及Facebook通常只會顯示你的網址連結，無法點到你的APP。
3. APP與RWD網站重疊
   APP大部分功能與RWD網站重疊，都是可以用手機使用，但APP被搜尋到的機會少之又少，建置費用相對貴很多。
4. APP vs RWD網站
   • 費用：APP 30萬起跳 | RWD 一般網站費用
   • 製作時程：APP 1-3個月起跳 | RWD 1-2個月
   • 使用平台：APP 須iOS、Android系統，必須花兩筆APP設計費 | RWD 可以跨平台使用
   • 方式：APP 須下載使用｜ RWD 無須下載，點開網頁使用
   • 更新：APP 需被動更新｜RWD 每次轉載都是新的

➤ 網站前台、後台是什麼？

用餐廳來舉例吧。你在餐廳內用餐，餐廳內所有看到的裝潢、擺設、牆壁顏色等一切就是這個餐廳的前台，而後台就是所謂的廚房，廚房需準備餐廳前台的一切食物、飲料、餐點等。

以網站來講，你是一個FB網站的訪客，當你進入某某FB粉絲團所有看到的內容、網頁介面、資訊等一切，都是需要一個後台進行上稿、發EDM。

網站前台、後台 (圖片來源:簡單創設計部)

➤ 網站架站軟體、平台

市面上架站方式千百種，若需求分為"形像官網"、"個人Blog"、"電商網站" 可參考如下

1. 形像官網:
   1. 智邦、中華黃頁企業架站平台:
      個人覺的是很陽春的架站平台、有很多傳產企業的頭家會選擇使用該平台，因為難度低、中文介面、電話客服隨找隨到、版形沒幾種、網站專業度低、美觀程度請參考:(簡單創智邦主機版) 但許多人仍買單就是因為便宜吧，就單純自家公司資訊上一上，未來可以玩的把戲也不多了。若真需要幫忙，可參考我們的方案 智邦: 台灣主機商提供的網站空間，擁有500個版型可選擇，適合剛創業的朋友輕鬆入手。我要諮詢。
   2. Wix/Weebly/Strikingly/Squarespace/Webnode/Google Blogger/Onepager/Godaddy
      這類型平台大都為歐美公司設計，他們有提供較完整的前後台功能、專業感也還可以、支援度普通、收費中等、難度中等。Wix/Weebly較為人知，待後續會有較完整的介紹。
   3. Wordpress:
      全世界約有30%的網站都是用該平台做的，其實包比BMC、時代雜誌、Elle雜誌等大家品牌。他的支援度、擴充性都很好。很適合拿來做形像官網、部格格、電商平台，而且重點是網站整個資料、程式碼都是自已的，不用擔心類似之前無名、天空倒閉，一堆資料都取不回來的窘境。
   4. 原刻網站:
      早在10年前吧。做一個網站還很貴的時代，那時候用的就是非常技術性的程式語言，如java、 php、.net直到幾近年火紅的python。這類的技術只適合在非常客製化的功能比較會使用到。 若你的也是電商平台 or單純形像官網的話，其實大家的功能都大同小異，跟本無需那麼客製化。若預算4萬or up就外包Wordoress，幾千就使用智邦，1~2萬就使用Wix之類的軟體。
   
   
2. 個人Blog: Pixnet、隨意鳥、無名、天空、medium、Wordpress，適合在寫個人寫部落格使用，因為裡面的介面、功能支援都是為了部落格設計的，操作起來會較心得應手。若你要拿樓上智邦、中華黃頁來當Blog相信我你會吐血。
   
   
3. 電商平台: 電商專用91App、Meepshop、Shop123這類平台超競爭，因為電商紅了好久，過去大家上網賣東西的選擇就是yahoo / pchome商店街 / 露天幾個什台，這幾個平台現在仍是有人使用，我覺的他的好處就是平台本身會帶流量來，你不用太多的行銷費，但上架費用較高、商品還會被抽成，他的概念比較像是百貨公司，百貨公司會有人自已走進來然候你就有生意可做。 上述平台的服務一樣提供你電商平台，你可以管理商品上架、金流、物流、強大的報表工具之類的，但有些平台就是不帶流量，所以你仍需花費請人處理SEO、Google廣告、FB廣告之類的。
   

➤ Weebly、Wix是什麼

Weebly、Wix是歐美公司所提供的架站平台，他的優勢就是便宜、簡單、易用，俱備網站最基礎需要的功能，可以滿足一些非商業性網站的需求，如個人Blog。但若你的網站需要用到事業上，從經營事業的角度來講，Wordpress會是比餃適當的選擇。 但Wix/Weebly在創業起初還是可以將就使用，畢竟總比沒有好。但這邊有一點需提醒，雙W網站所有的資料、程式碼、資料庫都是在它們那邊，未來你也沒有得搬家，因為其他的系統是無法相容的。要是發生過去無名小站、天空部落格的事件一樣。就只能等著哭了。

這邊額外提醒一下，有些網站架設外包商是使用自有的架站工具，如中華電信、智邦、Godaddy等等。若單純只是要有一個網站做資訊曝光，也從來沒有想過要走什麼網路行銷、 Google廣告之類的，走這類的方式架站也可以(當然有些廠商自有架站工具很強，但很少)。

Wix / Weebly方案:
以簡約、美觀架設網站為主要核心目標，很適⽤用於個人的網站，如有短期計畫、短期推廣、一頁銷售頁。 特點: • 約300種網站版型樣式，樣板一旦決定後，以後都再也不能換。
• 後台英文介面
• 適合：網站規模很小、短期運作的網站、個人成果呈現、簡易易目錄型、一頁銷售頁
我要諮詢

➤ Wordpress是什麼？

WordPress是一個以PHP和MySQL為平台的自由開源的部落格軟體和內容管理系統。WordPress具有外掛程式架構和模板系統。截至2018年4月，排名前1000萬的網站中超過30.6%使用WordPress。以上來自維基百科的解釋

講白了，他是一個新技術(其實也不新了)，現在很多網站架設公司都用它來幫客戶(包括簡單創設計部)架置網站、電商平台、購物網站。Wordpress的優點有

Wordpress超過30.6%使用者（來源：wordpress）

1. 全球30%的網站在使用，如BMW、迪士尼、TIME、VOGUE..等等。所以技術純熟，公信力非常足夠
2. 熱門架站軟體，會此技術的員工會較容易尋找
3. 網站有許多外掛、版形只均幾千元就可快速擴充功能
4. 完整的前、後台功能，形像官網、一頁式網頁、電商平台、部落格一應俱全

➤ HTML是什麼

HTML是某一種的技術的縮寫，有興趣請參考維基百科HTML。前面有提到的網頁設計就需要會使用到HTML技術，所以其實他就是一種程式語言，而且是非常基礎的程式語言。

透過該程式語言，你可以在網頁上設計表格、表單、圖片、文字、連結，建構出一個網頁基本的架構。若在加上css就能夠美化你的網站、若能夠加上javascrip就能夠互動，若加上java / c++ / .net就能夠變動態網頁。 對於有興趣學習HTML的，非常的建議去W3School學習，許多的範例，讓你當場學習，立馬測試。

有些網站架設外包商是使用自有的架站工具，如中華電信、智邦、Godaddy等等。通通都不建議你們使用，因為員工勢必來來又去去的，若您不想要每次新員工進來，又要花時間成本做教育訓練，建議您還是使用大眾架站軟體Wordpress（Wordpress網站架設）。

➤ SEO(搜尋引擎最佳化)是什麼

SEO稱為搜尋引擎最佳化，是一種行銷的技術。全世界每天都有上億次的人口，在Google輸入關鍵字做搜尋。如果搜尋出來結果的第一名，就是你的商務中心名稱(舉例)，可想而知那個就是"黃金店面"，黃金店面帶來的人潮就是金流了，重點是還不用付房租、更棒的一旦搶上黃金店面，還不容易落入別人他手，是有辦法獨佔長長久久的可能性的。

所以有別於Google廣告，它是一種長效性的行銷方法，而且不用付任何的行銷費用。所以簡單創大力推薦您學習該技術，您可以參考熱門暢銷書SEO超入門的作家嚴家成老師所開設的SEO課程。 站長上過課，真心推薦。最近還有SEO策劃師認證培訓班值得報名學習。

『網頁與谷歌的距離，可以決定網頁能否與網友相遇；而網頁能否讓網友滿意，也會決定網頁與谷歌的距離。SEO就是縮短網頁與谷歌距離的操作，也是使得網頁讓網友滿意的要素。』

嚴家成 － 亞洲搜尋行銷協會 講師

➡ 亞洲搜尋行銷協會官網
➡ 亞洲搜尋行銷協會FB粉絲團

➤ Domain(網域)、URL、IP

以簡單創 https://ezstartup.cc為範例來解釋，網域就是指 https://ezstartup.cc
該文章的URL: https://ezstartup.cc/website-design.html
IP:網域ezstartup.cc是方便給人記憶，但網域背後會對應該到一組數字，也就是所謂的IP Ex 35.32.42.23。

網域除了好記以外，也要思考一下您的品牌，尋找適合您品牌的網域，當客戶找尋您的網站會比較容易想到您的網址。若已想好了網域名稱，要盡快去檢查是否已有人購買走了，漂亮的網址很容易被購買走。

可以至GoDaddy尋找網域並且購買。

尋找網域（來源：GoDaddy）

➤ Https是什麼？

簡單創的網址是https://ezstartup.cc，在網址前面有一個"https"，這代表網站透過協定上的加密機制後能夠防止資料竊取者就算攔截到了傳輸資訊卻也無法直接看到傳輸中的資料，講白一點就是資料從網站傳到你電腦上的瀏覽器都是經過加密的。

有心截取你資料的駭客是無法解密的(理論上)。網站要使用免費的https，可以去Cloudflare or Let's Encrypt註冊。一年大概可以省下2xxx多的成本。 但當然加密等級是有差的囉！

➤ 為什麼要架設官網？

我有了Facebook粉絲專頁、Youtube、Instagram等社群平台，我還需要網站嗎？是的，很多企業主都會諮詢時提出的問題，也有不少店家、企業選擇不架設網站，只經營Facebook的粉絲頁，「台灣人愛滑手機，使用臉書的比例偏高，為何不直接開一個粉絲專頁不是更有效？」

確實，既然可以免費使用臉書平台，為什麼我還要架設一個網站？也有很多網路行銷公司，對外推廣「以粉絲專頁取代網站」的快速行銷，但他們都忽略了網路行銷的環節。 是不是覺得Facebook粉絲專頁觸及＆按讚人數持續下滑？經營事業除了持續經營不同社群管道外，應建立網站讓客戶能在Google找到您的網站。

1. 官網永遠是最具公信力的平台：
   許多官方平台的申請，都會設定要求審核官網的條件，或者接洽客戶，當名片上的公司網址呈現.com等國際正式網址而非社群平台的附屬網址，都是增加客戶對企業或品牌信賴度的重要指標。
2. 官網傳達完整企業形象：
   擁有一個真正屬於自己官網，能呈現專業品牌形象外，也在訴說這間公司擁有真正的企圖和承諾的表現。
3. 官網傳達的是一種信賴感：
   上面有提到，官網能帶來公信力，想像一下，如果您要找一家沒合作過的廠商合作，如果A廠商有一個官網，專業、有完整資訊，B廠商剛好沒網站，只有一些資訊在社群媒體上，您會覺得哪一家比較有信賴呢？
4. 官網才能累積你的行銷歷程：
   官網價值之一，就是官網的網域，網域=你的價值，網域可以代表企業的價值，不附屬在別人的平台之下，對搜尋引擎來說具有累積性。無論你怎麼更改網站內容，都會記載在網路上，讓你的行銷不至於間斷。
5. 官網留下寶貴內容：
   日已累績的文章、內容、瀏覽人數等，瀏覽著可以很容易找到他們想看的內容，透過內容行銷＆搜尋引擎優化（SEO）行銷的概念，可以創造出疊加行銷能量。Facebook沒有搜尋功能，精心設計的素材、菜單、心得、文章等，經過一段時日，就會被新的貼文不斷往下壓，石沈大海找不到了！
6. 絕大部分的粉絲沒再回訪過！：
   時代雜誌(Times magazine)指出，其實絕大部分的粉絲按讚後，就再也沒回訪過！平均只有6%的粉絲可以看見你的貼文，他們預計要減到1-2%，所以98%的粉絲看不見你的貼文，Facebook限制的你的曝光率，目的是要讓你花錢買廣告。
7. Facebook有廣告干擾：
   你不會想讓你的競爭者廣告出現在你的專頁旁邊吧。
8. Facebook是房東：
   紛絲專頁出租套房，沒有權力更改。整體走向一切照著Facebook規定走。如果粉絲專頁被惡意檢舉而停權？很抱歉你無法作主。
9. 官網是最能永續經營的平台：
   現在Facebook的前景看好，但誰能保證它永遠不會消失？哪天Facebook不玩了或是哪天出現更酷更炫的網站使用者紛紛跳槽？到時再多的粉絲和討論全部歸零。

結論是…企業官方網站就如同人的名片，當使用者瀏覽到你的頁面，網頁的風格、完整的內容資訊都影響著使用者的觀感。Facebook粉絲專頁提供顧客一個空間討論、評價、即時性、與客戶互動的平台。

而你應該善用這項優勢經營顧客關係，粉絲專頁應該成為連結到網站網域的輔助工具，和你的顧客溝通的管道。同時擁有兩者可以觸及更多的客源，網站和粉絲頁的並行合作才能做到最好的行銷！

➤ 網站建置要準備什麼

網頁設計最重要的是事前準備的資料，簡單創的客戶通常花最多的時間就是在準備素材的部份。

1. 網站名稱：
   記的拿你想到的名稱，去Google上面搜尋一下，看是否有同樣的名稱，因為這可是會引響到後續的商標註冊與公司登記
2. 網址：
   網址的購買，正常網址的費用大概是1000元有找，若是特殊網址的話，費用通常會有可能高達上萬元。以簡單創 (ezstartup)來說，在Godaddy購買的話，ez-startup.com只要一年299元。但startupdb.com的話，第一年要高達98553，第二年就只要576而已，因為首次購買是買擁有權，第二次就是使用權而已。
3. 公司logo：
   Logo的設計以外面行情價從3000~~8000以上，12000都有。
4. 公司口號slogan：
   如簡單創的”創業家嚴選夥伴平台”
5. 網站色系：
   每一個品牌都會有一個主色系，如麥當勞就黃色、Air Asia就紅色、簡單創紅色。所以你呢？
6. 網站風格：
   網站風格一般是讓外包商了解你喜歡的風格，但以現在世界最流行的Wordpress的版形有上萬個，通常確定好版形再開始延伸版形的風格，通常最後的成品通常都不會太差。
7. 網頁設計公司：
   簡單創有提供眾多網頁設計公司(包含簡單創設計部)，您都可以參考。

網頁設計風格 (圖片來源:簡單創設計部)

➤ 網站外包的流程是什麼？

以簡單創設計部網站架設流程

1. 挑選網站種類：
   選擇適合貴公司網站的種類，公司形像官網、電子商務平台
2. 需求訪談：
   專員會與您溝通網站的構想與需求
3. 支付訂金：
   將提供合約與帳戶資料
4. 規劃網站架構圖：
   下單後，將為您規劃網站所需的架構圖，可討論是否需要該功能。
5. 網站風格挑選：
   將依照您喜愛網站風格提供3~5種風格讓您挑選。 (請先提供您喜愛的網站風格3個，讓我們了解您的喜好)
6. 網站素材提供：
   請提供網站首頁及內頁裡面所需的文字及圖片。
7. 14天等待施工：
   待素材提供後的14~21天後，我們會提供網站給您。
8. 驗收＆支付餘款：
   網站測試確認無誤，正式上線後，請支付其餘的尾款。
9. 繳交帳密：
   繳交帳密 所有的帳密會在收到尾款後全部提供給您。

➤ 網站建置費用？

估算網站建置費用之前，要必需搞清楚，你的外包商是用什麼軟體 or 套件幫你開發的。但一般也就那幾種。純個人見解不筆戰， 以最低階的方式例如使用中華黃頁、智邦(顯少)幫你建置網站，費用大概5000~1萬，但網站簡陋、單純、可能沒有RWD。 接著使用Wix / Weebly / squarespace 大既是2萬多，搬家難、網站後台、擴充有限、SEO差， 再來使用Wordpress大概3萬多(如簡單創設計部)，高於4萬的大概也不會寫價格了 ，若使用原生語言，如Java、.Net、C++、phtyon、php、Andorid'IOS等的起跳大概就是10萬~1000萬都有。

目前網頁設計最多的還是使用Wordpress建置網站，世界上有近30%的網站都是Wordpress做的，甚至BMC、BBC也是選擇使用Wordpress，而費用有1萬多~3萬多，不寫價格的就是費用較高的。 而有寫價錢的就是限定網頁數及功能。收費方式有月月收、一次收、照流量收都有。就看客戶能接受那一種。以簡單創設計部來講就是一次性收費37,800，1主頁5內頁做到好，無任何延伸性費用、第一年免主機費、有網站最大後台權限、年固定成本5000有找。 所以要評估網站建置費用的話，應該以一整個網站的費用到約期結束，你需要付多少費用來計算才是準確的，雖有些外包商第一年低收幾千元而已，但他要綁5年約， 其實也並未有便宜到。還有上述都不包含外加其他功能，如多國語言、優惠折扣、特價組合、EDM等等之類的。費用都需要外加的。

➤ 找網站設計公司要注意的事項

找到網頁設計公司製作網站時，應當注意一些事項，以免設計後無法達到您的需求：

1. 確認是否是響應式網站(ＲＷＤ)：
   以現在的技術已經很容易可以達到，只需要製作一個網站就能任何裝置都能在最佳瀏覽狀態，不論是手機、網頁、平板等。

   響應式網站 (圖片來源:簡單創設計部)

2. SSL安全憑證(https)：
   網站如沒有設定SSL安全憑證，會被Google列為不安全網站，這樣google排序會降低。此外網址列也會看到「不安全」這三個字，會讓使用者產生疑慮，如果是電商平台客戶下單時會不安心，而流失客人。需要確認網址前面有：HTTPS
3. 了解公司網站是屬於那一種類型？：
   先思考一下公司網站屬於哪一類型，網站需要哪些資訊需要曝光、需要什麼功能，在歸類網站是屬於哪一類：形象官網、電商平台、特殊需求的平台。網站製作大都屬於「客製化量身製作、套版式網站、租用式網站」三種，費用以客製化量身製作最高，最高彈性但無特殊要求，其實一班套版式網站已非常足夠。
4. 網站結案後，是否可以自行修改：
   為了避免被廠商綁架或著網站孤兒，沒人照顧網站又無法自行更新，請確保您的網站設計公司有提供「後台」or「原始檔」讓您自行編輯、更新。
5. 有沒有提供基本SEO搜尋引擎優化設定：
   當網站製作好了當然是要讓客戶Google的到你的網站，所以基本的SEO設定一定要有，不然網站就是白做了！

.......continue.......

簡單創設計部
Email: [email protected]

• 推薦分享：
•