分類：網頁設計

網頁設計是個既專業又籠統的詞彙，因為它涵蓋的範圍太廣泛，常聽到的UI/UX設計、RWD設計、網站套版等都屬於其範疇，因此市面上充斥著各式網頁設計公司。但是我該怎麼找才能選到最符合自己需求的網頁設計公司？要如何溝通才不會雞同鴨講？在這之前你必須先了解什麼是「網頁設計」。   網頁設計是什麼？ 網頁設計指的是製作和維護網站需要的技能，包含圖形設計、介面設計、使用者體驗設計及搜尋引擎最佳化(SEO)等工作。網頁設計因為範圍廣泛的關係，通常會以多人團隊協力完成。(以上內容引用並改編自維基百科) 根據維基百科的定義，網頁設計是非常廣泛且需要具備多項專業技能的業務，小到需要會圖案或icon設計，大到需要了解一些程式語言、視覺風格和心理學(使用者體驗)，甚至還要會一點行銷或大數據觀念。乍看之下感覺網頁設計師好像十項全能、什麼都要會，實際上如果某個人說他會HTML跟使用Photoshop等繪圖軟體，或他會用Wix或Wordpress套版製作網站，他也可以自稱是「網頁設計師」或「網頁設計公司」。所以你需要留意以下這6點，才能選到最符合自己需求的網頁設計公司： 網頁設計公司怎麼找｜確認自己的需求 網頁製作的方式有很多，客製化網站、套版網站、響應式網站等都是常見的類型，但是價格差異非常大，以下是簡單的比較法： 客製化網站：也就是我們一般對於「製作網站」的認知，從前端、後端、主機等可能都需要委託專業工程師協助，因此費用會最高，但同時彈性也是最大、最能符合自己需求。 套版網站：套版網站是這幾年較熱門的網頁製作方式，常見的套版網站有Wordpress、Wix及Weebly等。這些套版網站都已經內建相關功能，只要套用後做微幅修改，再購買主機跟網域就可以使用。雖然價格便宜，但彈性最小，有時候可能無法實現你想做的部分功能。 響應式網站(RWD)：響應式網站其實包含在上面兩種網站中，單獨拉出來講的原因是因為它同時具備各尺寸介面(電腦、平板、手機)的相容性。由於不同尺寸的介面需要獨立設計，所以如果想做響應式網站就必須提前告知網頁設計公司，因為報價會跟只有做單一尺寸網頁的價錢不同。 網頁設計公司怎麼找｜瀏覽網頁設計作品 當你找到某一間有興趣的網頁設計公司後，可以先瀏覽放在網站上的網頁設計作品，或請對方提供相關的網頁設計範例。 參考網頁設計作品是很重要的事情，如果該網頁設計公司提供愈多樣化的作品

電商網站設計隨著現代人購物習慣的轉變，變得越來越重要，因此許多實體店鋪業主都想為自己的店舖架設一個網站，這時候問題來了，一個好的電商網站應該具備什麼？這就是我們今天要來探討的主題！ 目錄 重點1｜官方網站就是企業的門面，價格定位與產品受眾決定首頁的樣子  重點2｜你的商品頁有規劃好嗎？文案、視覺呈現、分類，三管齊下 重點3｜你的網站串接金流了嗎？常見電商金流大比拼 總結   官方網站就是企業的門面，價格定位與產品受眾決定首頁的樣子 講到好的電商網站平台你會想到什麼？五花八門的商品展示、光鮮亮麗的首頁...沒錯，吸引消費者留下來的重要原因是美觀，但美觀的定義很廣，什麼樣的網站叫漂亮呢？不是業主你決定也不是設計師決定，是客戶決定。想一下你的客群屬於哪種他們又有什麼特性？ 以下提供幾個方向找出你的品牌受眾(Target audience)。   1. 商品的定價偏高還是偏低？ 以無印良品與小北百貨為例子，同樣販售各式生活用品，因為定價策略不同網站呈現是不是也有所不同？ 另外一個例子，TOYOTA與賓士都是知名車商，但因為定價差異與受眾不同，網頁所使用的橫幅圖片、文案有沒有差呢？ 2. 品牌定位與風格 UNIQLO為日系的快時尚品牌，販售的是日系極簡、休閒風格的衣物，而ZARA來自西班牙，商品走的是歐美風格，品牌本身的風格不同、因此受眾也不同，這會直接影響網站呈現的方式。 3. 販售的商品是客戶想要的？還是需要的？ 當販售的商品為民生必需品的時候，我們會建議網站的呈現以功能導向為主，因為消費者注重的是實用性，舉例來說，挑選慢跑鞋時我們會注重功能、美觀和價格，但在購買限量球鞋時，功能跟價格就變得不那麼重要了，這時候消費者考慮的是鑑賞性與稀有度。另一個例子，廣告商不會強調衛生紙每批大量生產100萬箱，但品牌商會強調限量款包包全世界只有5個。   商品頁有規劃好嗎？｜文案、視覺呈現、分類三管齊下 商品頁面的規劃大致分類為 文案 視覺呈現 歸類   文案 商品文案分成長敘述與短敘述，如下圖iPhone SE的商品頁舉例，短敘述的功能是吸睛，適合擺放產品特點，而當你把頁面往下拉會看到商品詳細敘述，這個區塊是用來針對產品功能做延伸描述。 長敘述透過提供完整的描述，讓消費者對產品更有信心。所以如果你販售的是食品，短敘述可以描寫食物有多好吃、製作手

在網路世代競爭激烈的時代，網頁設計成為了各家企業商家手中最大的武器，工欲善其事，必先利其器，在進行網頁設計前，首先應該要挑選合適的網頁設計軟體；又或者可以尋求如戰國策這種提供專業網頁設計服務公司，為網頁設計者提供更全面的說明與服務。   網頁開發軟體介紹 1. Adobe Dreamweaver Dreamweaver 是一款 Adobe 公司的網站開發軟體，也是早期最多人使用來製作網站的軟體。Adobe Dreamweaver 將網站製作以圖形化的方式呈現與編排，友善的介面，讓使用者只需透過點擊以及排列的方式就可以輕鬆為網站排版；同時，網站設計者也可以輸入 CSS 來進行網站設計。比起直接輸入 HTML 以及 CSS，Adobe Dreamweaver 的編寫方式更簡單，因此也更適合新手的網站設計者做使用。然而，比起可以直接套版的架站網站，使用 Adobe Dreamweaver，還是需要有網站設計基礎，像是知道基本的 CSS 還有網站元素，有了這些觀念後，在網站製作上才可以更得心應手。 2. Sublime Text Sublime Text 是一套跨平台的文字編輯器，不像 Adobe Dreamweaver 擁有圖形化的介面，Sublime Text 需要透過編寫 Coding 的方式來編輯 HTML 以及 CSS，但 Sublime Text 擁有許多外掛程式，網站設計者可以依據自己的需求，安裝所需要的外掛，因此 Sublime Text 的功能更為完善也更適合進階的網站設計者。 3. Microsoft FrontPage Microsoft FrontPage 是微軟公司的一款網頁開發軟體，因為其簡單易上手的使用特性，因此被廣泛認為是適合初學者的網頁設計軟體，目前 Microsoft FrontPage 已推出新的升級版本，Microsoft Expression Web。 4. Visual Studio Code Visual Studio Code，又稱 VS Code，也是由微軟所開發，不僅功能強大，介面設計也很簡單。Visual Studio Code 支援 Windows 、 Linux 以及 Mac OS 等操作系統。此外，Visual Studio Code 也支援了各式的個性化組態，例如主題色彩改變、鍵盤捷徑等各種屬性和參數

通常在執行網頁設計時，網頁設計者會有兩個選擇，一是直接套用模板設計，二是自行設計客製化，前者方便快速，也免去了很多設定上的麻煩；後者雖然麻煩，卻能提高網頁的辨識度，做出專屬自己獨一無二的網站。而對於選擇後者的網頁設計者來說，還會遇到靈感枯竭的狀況，因此隨時更新素材庫，累積網頁設計作品來源，是一個網頁設計者平常就需要準備好的基本功。同時您也可以參考戰國策的網頁設計作品案例。     1. Bēhance：不同網頁設計範例並可與Adobe軟體連動 Bēhance 是一款 Adobe 旗下線上平台，在 Bēhance 上，使用者可以在上面發表與分享自己的創意作品。在 Bēhance 上，使用者可以透過搜尋，找到符合自己需求的設計，從網頁設計、圖像設計到應用程式設計都有包含，囊括的範圍廣且可以直接與 Adobe 旗下的軟體做連動。   2. awwwards：網羅全球得獎網頁設計範例 awwwards 是一個專業網頁設計與開發的競賽平台，在 awwwards 上收錄了還自世界各地的網頁設計作品，此外在 awwwards，每個網頁都會被從四個面相評分：創意、內容、實用性、整體設計。在 awwwards 上使用者可以瀏覽過往的得獎作品，也會有其它使用者分享實用的網頁設計工具或是教學，可以提供給網頁設計者做參考。   3. Responsive Web Design JP：日本RWD響應式網頁設計範例 在 Responsive Web Design JP 裡面的網站多數為日本網站，每個網站都會以三種不同的視窗大小做呈現，讓網頁設計者可以直接瀏覽響應式網頁在不同畫面下使用的畫面呈現結果。在 Responsive Web Design JP 網頁的右方，有主選單替使用者將網站做了分類，方便使用者搜尋。   4. OS TEMPLATES：日本RWD響應式網頁設計範例 OS TEMPLATES 提供了 HTML的樣版，以及 PSD 的網頁模板，為方便網頁設計者可以下載做修改微調使用，PSD 的版型圖層都沒有合併，對網頁設計者來說，可謂是一大福音。   5. One Page Love：一頁式網頁版型範例 不同於一般的網站，一頁式網頁需要在僅有的一個頁面中，將遇傳達的訊息，用最能讓人記憶的方式，正確的傳達給使用者，因此在整體的

在著手開始網頁設計前，網頁設計者應該要清楚：網頁設計，並不單單只是將網站設計的多美多炫彩迷人；也不只是一昧的將所有訊息塞入網頁中丟給使用者，在進行網頁設計時，更多的是要了解進入網頁瀏覽的使用者，了解他們的需求與目的，再結合網頁自身欲達到的目標，在兩者之間尋求到最適當的平衡，最終呈現出剛剛好的網頁。   網頁設計重點 1. 了解使用者需求與目的 大部分網站設計者架設網站的目的，都是為了要吸引使用者進入瀏覽，進而促進後續的轉換率，因此網站設計的第一要點，是站在使用者的角度思考，了解使用者的使用習慣、瀏覽網站的目的以及大概的瀏覽次序。只有抓住使用者的喜好並給出相對應的資訊，才可以延長使用者在網站上的停留時間，提高達成網頁設計最終目的的機率。 另外，根據調查指出，網路上的使用者，有將近七成是使用行動裝置瀏覽，而一般來說，當使用者在使用行動裝置瀏覽時，由於螢幕尺寸比起電腦還要來的小，因此大部分的使用者會希望在行動裝置上獲得最直接的重點資訊；電腦版的使用者因為畫面足夠，因此更適合用來瀏覽文字較多，內容較豐富的設計，這些細節都是網頁設計者在進行網頁設計時，需要列入考量的重點。 2. RWD 響應式網頁設計 為了讓使用不同裝置瀏覽網頁的使用者都可以達到最佳的使用者體驗，RWD 響應式網頁設計的概念因應而生，而在 Google 的提倡下，也越來越多的企業及店家開始重視 RWD 響應式網頁設計。通常對於電腦版的網頁設計，更多會傾向於橫向發展；行動裝置則相反，由於大部分的行動裝置都是長型的，因此直向的卷軸式設計，使用者只需要往下捲動就可以瀏覽完所有資料。 由於行動裝置擁有電腦所沒有的易攜性以及便利性，同時行動裝置也是現代人最常使用的設備之一，因此網頁設計可以把握行動裝置的這些特性，提高行動版網頁的易用性；也可以置入社群媒體的分享鈕，以及 QR Code，提高網頁的競爭力。 更多 RWD 響應式網頁設計可參閱：提升網頁使用者及行動裝置友善 – RWD 響應式網頁設計 3. 免去不必要的複雜 一般來說，行動裝置的處理系統並不會像電腦一般強大，可以在電腦上執行的播放器系統，在行動裝置上也不一定可以順利呈現，因此在進行網頁設計時，除了把握上述 RWD 響應式網頁設計的概念，也應該要免去過多不必要的複雜，過度複雜的網站，除了會降低網站加載速度，也有可能因為不同的瀏覽系統不相容，而造成內

響應式網頁 RWD 設計（Responsive Web Design）又俗稱為自適應網頁設計、對應式網頁設計或是回應式網頁設計，顧名思義是當網頁設計可以針對不同的瀏覽裝置而有相對應或是最佳適應的呈現模式，即是符合響應式網頁 RWD 設計。   響應式網頁 RWD 設計的來源 由於目前市面上不論是手機、平板裝置、筆電或是桌上型電腦，都各有不同的大小尺寸及解析度，同時隨著行動裝置使用比例年年升高並逐漸超越桌上型電腦，過往專為桌上型電腦尺寸設定的網頁設計尺寸早已不敷使用。此外響應式網頁 RWD 設計，可以幫助免去網頁設計者需要針對不同尺寸各自建立獨立頁面的困擾，只需要在單一設計下進行設定，即可為各裝置提供最完整舒適的瀏覽畫面，綜合上述原因響應式網頁 RWD 設計相應而生。   而 Google 在 2015 年宣布行動裝置時代（Mobilegeddon）的來臨，並對於行動裝置友善或是有執行響應式網頁 RWD 設計的網頁，提高了搜尋引擎排名評分的分數，在在都說明了響應式網頁 RWD 設計誕生的重要性。   響應式網頁 RWD 設計原則 響應式網頁 RWD 設計是一種網頁設計的技術手法，這種技術手法讓網頁可以因應不同的瀏覽裝置、解析度以及裝置尺寸大小，呈現出相對應的畫面，讓每個使用者在進行網頁瀏覽時，都可以獲得最佳的使用者體驗，降低使用者需要進行縮放、滑動或是平移的動作，也減少了因為裝置不同而導致顯示畫面不如預期的風險。 響應式網頁 RWD 設計可以讓網頁設計者自行設定在多少的尺寸範圍內，要顯示哪個相對應的頁面排版以及內容，因此首先尺寸範圍的設定，網頁設計者需要進行妥善的拿捏。除此之外，對於一些網頁內容較繁複，或是顯示畫面排版較複雜的網頁，也應該要對尺寸較小的裝置進行內容縮減，才不會導致畫面凌亂或是顯示不清楚的狀況發生。值得注意的是，並非所有的網站都適合使用響應式網頁 RWD 設計，更多資訊可以參閱提升網頁使用者以及行動裝置友善 – RWD 響應式網頁設計。   響應式網頁 RWD 設計範例 1. Shopify 知名的加拿大電商架站平台 Shopify 在響應式網頁 RWD 設計就是一個很好的範例，為了讓所有的使用者在各個裝置上都可以享有一致的使用者體驗，因此在不同的裝置上針對點擊按鈕以及圖片排版上都有做出變動。 在尺寸

隨著智慧型手機的普及，現代人不論是食衣住行上的各種大小需求或是最簡單基本的網路上搜尋資料，往往都只需要透過點擊自己手上的行動裝置，就可以完成，也因此網路世界這塊令人垂涎三尺的大餅，成了許多企業商家爭先恐後想要搶佔的市場。 在這競爭激烈的市場中，吸引人的網頁設計已不再是使用者的唯一訴求，更多的是需要可以在任何情況、任何裝置上都可以完整呈現網頁內容的網站，這時就會需要執行響應式網頁設計，也就是網路上常聽到的 RWD。   什麼是響應式網頁設計？ 響應式網頁設計，英文 Responsive Web Design，也就是市面上常聽見的 RWD。響應式網頁設計是一種能夠讓網頁依據不同的裝置大小以及解析度，去呈現相對應或是最合適的頁面效果的技術模式。使用響應式網頁設計 RWD，可以提高頁面的靈活性，讓使用者不論是使用手機、平版或電腦，都能擁有最佳的使用者體驗以及瀏覽畫面，更可以大幅降低因裝置不同而跑版的風險。   為何要使用響應式網頁設計 RWD？ 1. 降低裝置使用排他性 科技日新月異，行動裝置、桌上型電腦推陳出新，光一個廠牌的某一特定裝置，就會有許多不同的尺寸，而響應式網頁設計 RWD 的設計，讓單一網頁可以在各個不同的裝置上，都可以有不同的呈現，不局限於單一裝置或是尺寸。 2. 降低成本以及開發時間 如果要為了每個不同的裝置以及尺寸都特別設計出一個專屬的網頁，那所需要耗費的時間以及成本一定比只開發一個還要來的多。響應式網頁 RWD，只需要一個檔案，就可以從中執行更改，根據不同的裝置輸入不同的設定，不僅減少了多餘的開發與維護成本，也降低了整體所需的時間與人力。 3. 有利於搜尋引擎排名優化 由於響應式網頁設計 RWD 在每個不同的裝置下，雖然有不同的呈現，卻依然共用同一個網址，因此當使用者在搜尋有使用響應式網頁設計 RWD 的網頁時，會更容易被搜尋的到。此外，各大搜尋引擎如 Google，過去都曾公開提出，使用行動裝置友善的網頁，因為可以提供用戶更佳的使用體驗，因此在搜尋引擎排名評分上，有更高的機率獲得較好的排名，由此可知響應式網頁設計 RWD 對於搜尋引擎優化 SEO 來說，將會有相對的幫助。   響應式網頁設計 RWD 注意事項 1. 播放軟體是否支援 在過去大部分的網站都會使用 Flash Player 做為網頁的播放器，然而目前市面上

RWD, Responsive Web Design的縮寫，翻譯成中文即是你我都聽過的響應式網頁，好像有點熟悉又不確定是什麼嗎？沒關係，響應式網頁顧名思義就是，可以網頁可以響應各式瀏覽工具，不論是用手提電腦、桌上電腦、平板與最重要的趨勢工具-智慧型手機上都可以完美展示，因此其設計核心即是讓網頁具有彈性與可變性(Fluid grids)，隨著螢幕的大小切換，響應式頁面就會依此做出適當的變化。 響應式的重要性 1. 行動裝置友善 增加線上用戶：目前全世界總線上用戶約有46億，其中約有50%也就是20億的線上用戶僅用行動裝置瀏覽網站與購物，而這個數據到了2025年後預計會攀升到37億，37億很多嗎？大概就是超過75%的線上用戶總和，所以一個非非響應式的網站目前已經流失了一半的瀏覽量而幾年後會再流失25%的用戶。 影片瀏覽量：超過一半的線上影片、直播的觀看數是來自手機用戶。 由行動裝置貢獻的線上平台的流量在過去10年(2011-2020)已經增長了500%。 2. 線上廣告是不可逆的廣告趨勢 線上廣告對比傳統廣告的手法多元許多，有影音廣告、文字廣告、聯盟行銷廣告、影響力行銷、電郵行銷，多變又靈活的廣告手法相比傳統廣告有許多的限制，因此成為廣告商的新寵兒，在2018年光是世界12大國家(包括英國、美國、中國等)企業花在手機廣告上的預算就高達千億，這是為什麼？ 因為社群媒體廣告的觸及率是所有廣告方式中，目前表現最好的！排名在後的則是影音廣告，但就如同前面所說，超過一半的影片流量來自於手機用戶。這代表什麼？ 網站具備響應式功能就有機會讓這些廣告在你的網站上推播，賺取可觀的廣告費用。 RWD - 響應式網頁應該做到什麼 響應式案例分析：戰國策 頁面的圖片要可以隨著螢幕的大小縮放 從左到右由上到下分別為手機螢幕、平板螢幕與桌機螢幕三種不同模式，可以看到這張圖片於三種螢幕大小都能自由縮放並完美顯示。另外可以看到欄位的部分，因為手機螢幕比較窄，因此欄位的顯示從橫向改為縱向，個別區塊展示是不是更加清晰？ 文字字體縮放、內容排列 可以看到文字的部分，因為手機螢幕縮小而增加排數，字體大小合適、文字內容置中，畫面整齊一致容易觀看，無需瀏覽者自行縮放螢幕，若為傳統非響應式網頁用戶需要自行縮放螢幕，直接影響用戶體驗。 延伸閱讀：UX,用戶體驗知多少 – 網頁設計小學堂 (1) 適當的margin與

UX(User Experience)： 用戶體驗，簡單來說就是透過各種操作手法提升使用者的滿意度，這與網站設計有些差別，因為單單網頁站計這件事，只涉及了網站的架設與形象等，而提升用戶體驗的設計卻相當複雜，從網站安全性、可信度、方不方便使用、商品形象圖吸不吸引人、消費者喜好掌握好了嗎、良好的SEM等等都包含其中。如果網站並不注重使用者的感受，那麼網站設計得再好，也只能說是金玉其外、敗絮其內。因為這個網站留不住用戶無法轉換。那麼打造良好的用戶體驗該考慮什麼？讓使用者開心的概念好像有點抽象但其實並沒有想像中困難，大致上可以分成五個面向，我們馬上來說明。   本篇文章包含 1.UX,UI-用戶體驗是什麼？與網站設計有什麼不同？ 2.打造良好的用戶體驗應該考慮什麼？ 想要的(desirable) 實用的(useful) 可被搜尋到的(findable) 方便操作的(usable) 可信的(credible) 3.那些常見的可能激怒用戶的方法，如何掌握消費者喜好？ 填寫資料好麻煩，最煩的是不登入還不能觀看網站內容！(desirable) 客服經驗不好 / 客服反應過慢(useful) 網站載入過慢(findable) 方便操作的(usable) 不安全網站(credible) 4.總結   1. 想要的(desirable) 這個應該不難聯想吧？網站的其中一個功能就是線上銷售，這意味著一個電商網站當然需要將商品的展示包裝成消費者喜歡的樣子。 解決方案：鎖定你的TA提升用戶體驗，將網站設計、排版、網站風格調整成一致，舉個例子，Chanel的受眾與Uniqlo的客人偏好的風格一樣嗎？當你鎖定了某一族群的受眾，網站就要打造成符合受眾期待的樣子，才能緊緊抓牢他們。   2. 實用的(useful) 最簡單也最直接的就是實用的，網站的功能之一就是要替人解決問題，舉凡是專業性問題如：UX是什麼？又或是生活化的疑問：哪裡可以買到口罩？或是提供可以解決問題的產品，一個良好的產品應該要是可以替受眾解決問題的。 解決方案：站在客戶端的角度去設想，這需要參考數據了解你的受眾有什麼困擾，例如說受眾族群為家庭主婦，那麼網站的內容就必須針對她們常碰到的問題進行排解。   3. 可被搜尋到的(findable) 當一個網站已經上線一陣子卻無法被用戶找到，那麼這些優