分類：網頁設計

在著手開始網頁設計前，網頁設計者應該要清楚：網頁設計，並不單單只是將網站設計的多美多炫彩迷人；也不只是一昧的將所有訊息塞入網頁中丟給使用者，在進行網頁設計時，更多的是要了解進入網頁瀏覽的使用者，了解他們的需求與目的，再結合網頁自身欲達到的目標，在兩者之間尋求到最適當的平衡，最終呈現出剛剛好的網頁。   網頁設計重點 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) 當一個網站已經上線一陣子卻無法被用戶找到，那麼這些優

網路 e 世代來臨，越來越多人選擇將資源投入到網路上，不僅可以獲取更多的資源以及關注度，更可以突破時間以及空間的限制，讓更多的使用者能夠接觸到網頁設計者製作的網站。在製作網頁初期，許多網頁設計者會尋求像是戰國策集團這類提供各式網頁設計服務的公司的協助，然而每家公司的報價也會有所落差，該怎麼做選擇，才不會花大錢卻變成冤大頭，本篇將帶領網頁設計者全面了解。   尋求報價前，先釐清網站設計需求 在尋找網頁設計公司之前，網頁設計者應該先了解自己要架設網站的目的為何？有些人是想要架設網站來創立自己的部落格；有些人是要開立自己的網路商店；有些是要為特定活動做宣傳；而有些是要為自己的品牌建立形象官網，建立網站的目的有百百種，這也影響到網站設計者應該要選擇架設何種網站類型，挑選正確的網站類型，才能更讓網站設計者所建構的網站往正確的方向成長，也才有機會在未來可以進一步獲利。   該如何選擇網站類型？ 1. 活動頁面 活動頁面顧名思義就是為了某活動而特別架設的網站，通常會搭配抽獎或是送禮等誘因增加頁面的瀏覽人數，活動頁面可以算是執行網路行銷中的一項元素。針對活動頁面的設計，普遍上來說，活動頁面的設計比起其他類型的網站來說，會相對比較活潑，色彩設計可能會比較鮮艷或是採用對比色，因為這樣的設計往往更能抓住瀏覽者的眼光提高印象。 2. 企業網站 企業網站是所有網站類型中最常見的一種，主要用於建立公司形象、傳遞公司理念、介紹公司產品、或是提供公司簡介給使用者作為參考以及即時獲得公司訊息。常見的企業網站分頁有關於我們、連絡資訊、商品介紹、即時資訊等等，網頁整體設計風格，會以企業形象或是 logo 顏色去做調色。 3. 電商網站 架設電商網站的主要目的就是要販售商品，因此在這類型的網站中，商品的資訊以及圖片、使用說明需要具備高度的完整性、準確性以及即時性。此外，電商類型的網站也需要更加注意交易的安全機制以及個人資訊的維護，針對網頁安全，可以參閱本篇：設定 SSL 憑證，為你的網站安全把關。 4. 入口網站 入口網站是將不同來源的資訊，經過彙整統一整理到某一網頁中進行呈現。使用者可以在入口網站中根據自身的搜尋目的及需求進行搜尋或是關鍵字檢索，進一步從入口網站中篩選出所需要的內容。在設計入口網站時，需要著重注意資訊瀏覽動線以及資訊分類，提升使用者體驗滿意度，讓使用者可以更快速方便

在上一篇文章 5G 世代來臨，2020 網頁設計最新發展趨勢（上），曾經提到當前網頁設計趨勢之一便是在網頁設計中加入影片元素，因為令人印象深刻的影片置入，比起普通文字更能夠抓住使用者目光，此外適時的影片使用，也會比文字或是圖檔更能清楚傳達訊息給使用者，進一步延長使用者在網頁的停留時間。   當影片成為網頁設計不可或缺的重要要素之一，越來越多網頁設計者為了提升視覺行銷開始在網頁中嵌入影片，不論是商品使用說明影片、品牌介紹影片、活動花絮影片等等，然而，當網頁設計者一昧的將影片上傳到主機上，無形中卻也成為了拖垮網站速度的兇手，這時，善用 Youtube 資源，就能大幅度減少降低網站整體表現的狀況發生！使用 Youtube 播放影片究竟可以帶來哪些好處，以下將一一解析： 1. 降低主機負擔，提升網站速度 目前網路上的網站，多數都是透過向虛擬主機服務供應商購買虛擬主機，而非本身擁有私人的實體主機，而當網頁設計者將影片上傳到網站上，他會耗費虛擬主機的流量，越多的網頁設計者上傳影片，虛擬主機的處理負擔就會越大，這將會造成網站品質下降，讓網站設計者需要更進一步的花費更多的預算，購買更高效能的主機方案，才能達到最理想的影片播放品質。然而如果網頁設計者直接使用 Youtube  所提供的空間，不僅不需要額外負擔費用，又可以減少虛擬主機的負擔，可說是兩全其美的解決方案。 當虛擬主機負擔下降，他就能夠有更多的資源處理網站其他相關的運轉，例如圖片以及內容的加載、資料的處理或是網頁其他程式的運行，而這將大幅提升網站的加載速度，避免使用者點入網頁卻苦等不到內容的窘境。此外，使用 Youtube 影片上傳功能還有一大利處，就是 Youtube 除了有影片緩衝讀取功能，也會根據不同的觀看裝置，去提供使用者最佳的影片格式，這對於網站設計的響應式設計是非常友善的要素之一。 2. 不需安裝外掛播放程式 當網頁設計者將影片上傳到虛擬主機上時，這意味著瀏覽者需要有相對應的影片播放軟體，例如 Flash Player 才能夠順利播放影片，而這對於某些使用者來說，卻是一個跳出網頁的重大因素，因為並非每個使用者的瀏覽裝置上，都有安裝或是能夠執行相對應的播放程式，簡單來說會造成使用者的排他性，同時，不同的影片播放軟體所能呈現的影片品質並不相同，而這兩者與網頁設計者希望可以接觸到最多使用者並提供最好的網頁品

上一篇 5G 世代來臨，2020 網頁設計最新發展趨勢（上）提出了因應 5G 世代的來臨，網頁設計趨勢的四大發展重點：影片的使用、設計排版、網站加載速度、RWD 網頁設計，本篇將延續上一篇的內容，提出另外四大網頁設計發展趨勢重點。 網頁設計趨勢五：內容重點摘要 當使用者在使用網路時，往往會希望可以花費最少的時間就能找到所需的資訊，或是達到目標，而當網頁提供給使用者的資訊以操作流程過於冗長繁複，將會加速使用者跳出網站的機率，這對於搜尋引擎在判定網路排名時是非常不利的，因此網頁設計者，應該要思考應該提供怎麼樣的內容給使用者，以此延長使用者在網頁上停留更長的時間意願。 根據研究，在網頁中顯示內容重點摘要，逐漸成為現今網頁設計的趨勢，因為以往，當使用者點進頁面時，因為不清楚各頁面間的內容，而會產生盲點的狀況，當使用者進到頁面發現資訊不符預期時，就會立刻跳出，進而大大提高了網頁的跳出率。在內容重點摘要的輔助下，使用者可以在點進內容頁面前，就先對於裡面所提供的訊息有一定的概念與方向，提高點進適當頁面的準確率，這時當使用者進入正確頁面時，往往會須要耗費數分鐘去閱讀完整內容，而這將有助於提高停留時間，同時對於網頁來說，也可以更精準的了解這些真正有價值的核心用戶。 此外，設計內容重點摘對於使用手機或是平板裝置的使用者來說，也是一大助益，因為使用者不需要在狹小的界面上，閱讀過多不必要的文字，不僅提供這些裝置使用者更好的使用者體驗，也更符合這些使用者的使用習慣。 網頁設計趨勢六：SEO 搜尋引擎優化 網頁設計不僅希望可以美觀並可以提供使用者適當的內容資訊，更重要的便是要讓使用者可以在搜尋引擎上找到你，這時候就會需要執行搜尋引擎優化，也就是常見的 SEO。SEO 執行的方式可以從很多不同層面，從網頁的加載速度、使用者的跳出率、關鍵字的密度、內外連結的提供等等，都會影響 SEO。因此在執行網頁設計時，不僅僅要留意整體使用者體驗以及視覺上的美感，也需要將 SEO 列入考量，才可以避免，精心設計的出網頁，卻無法被使用者所搜尋到。  網頁設計趨勢七：字體設計變化 受到字體庫過於龐大的影響，網頁設計者在設定中文字體，並不如英文一般的多元，多數採用最基本的新細明體或是標楷體，就算使用了其他的網路字體，例如 Google Font 或是 Adobe Typekit，事前也會需要先從雲端上下載字體才能正

2026 即將進入 5G 的高速網路世代，也就是說網路世界勢必走向一個全新的面向，在這股新勢力的推動下，過往的網頁設計早已無法因應網路世界龐大的需求，因此將網頁設計的品質、實用性、使用者友善性全面提升，成了當今網頁設計最大的課題。而在這新課題的產生下，也有許多提供網頁設計服務的公司如雨後春筍般出現，如戰國策集團，這些網頁設計公司，提供了網站業者更多的選擇以及諮詢管道。   網頁設計趨勢一：影片的使用 以往的網頁設計，多數選擇使用圖片多於影片，而現在，令人印象深刻的影片露出，卻更能夠抓住使用者的眼光，拉長使用者在網頁的停留時間。然而在網頁中添加影片，複雜度卻遠遠比添加圖片還要來的多，像是網頁開啟後影片的加載速度、影片是否自動撥放、影片的畫質、載入時是否靜音、影片是否可以在不同裝置上正確播放等等，都是在網頁上加入影片時需要注意的。 關於影片使用，除了後期的網頁設定外，前期的拍攝以及素材挑選也暗藏玄機，如何在短短數分鐘的影片畫面中，將欲傳達的資訊準確的傳達給觀看者，影片的拍攝手法、運鏡、後期的字幕以及特效剪輯等等，都需要特別的著墨。 最後，介於圖片以及影片之間的 Gif 動圖檔，也是當今網頁設計愈來愈熱門的呈現方式，製作的繁複程度低於影片製作，卻依舊可以呈現生動的效果，在連續的秒數中，不斷重複播放相同的畫面，更可以加深使用者的印象，也提高了網站整體的趣味性，然而目前在某些架站平台中，並不支援 Gif 動圖檔的使用，因此在使用 Gif 動圖檔時，也需注意網頁瀏覽時是否可以順利呈現，或是需要透過其他外掛裝置去優化。   網頁設計趨勢二：設計排版 過往的網頁設計通常趨於保守，現今的網頁設計則更為講究整體設計感與排版動線，讓使用者在瀏覽網頁時，除了可以輕易獲得想要的資訊，更可以滿足視覺上的體驗。根據統計，網頁設計的排版方式以對稱排版最被廣為採用，因為對稱的設計界面，可以讓使用者可清楚的了解網頁動線，並幫助使用者更快速的找到資訊整理出重點。對稱網頁設計呈現的方式有很多種，可以是顏色上的對稱、格式上的對稱又或者是水平型式的對稱。網頁設計者可以根據不同的網站目的以及多數使用者的需求去選擇適合的對稱方式，常見的對稱模式為 Z 字型的排版樣式。 為了要在眾多網站中脫穎而出，有些網頁設計者會捨去非對稱的設計型式，例如 N 字型的模式，利用不同的變幻風格，讓使用者產生視覺