分類：網頁設計

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，事前也會需要先從雲端上下載字體才能正

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

說到網頁設計，許多人首先閃過腦海的都是WordPress網站架設，因為WordPress在現今網頁設計的世界當中，對於許多不是那麼熟悉網站架設語法的網頁設計人來說，可說是一大利器，因為WordPress不僅讓網站架設更加便利輕鬆，也幫忙免去了許多煩雜的語法設定，同時還結合了許多WordPress外掛程式以及電商功能，讓整體的網站架設更為簡單易上手。   WordPress網站範例 提到WordPress的厲害之處，從許多知名大網站都是使用WordPress網站來架設就不能看出，包括國際知名的雜誌Vogue、跨國電腦軟體Adobe的部落格、著名Walt Disney的官方網站、美國音樂龍頭Sony Music等等，都是使用WordPress網站架設而成的。   WordPress後台教學 圖片來源：維基百科 想要在WordPress網站架設專屬於自己的網頁其實並不困難，只需掌握簡單的幾個步驟，就可以架設好一個簡單的網站 1. 購買網址 架設往這的第一步，你需要西擁有一個專屬自己的網址，當然你也可以使用WordPress內建的免費網域，但如果想要專業點的，建議可以上像是戰國策購買網域。 2. 申請主機 擁有自己的網址後就要來申請主機，主機決定了網站整體的速度以及穩定度，網路上有許多提供免付費虛擬主機的服務，然而往往不穩定或是表現不甚理想，導致網站後續問題層出不窮，因此在挑選主機時千萬別為了金額而因小失大，應該挑選像戰國策雲端主機服務這種擁有不同成功案例，口碑評價良好的主機供應商，才能取得合理價格，以及有一定的水準表現的速度與穩定度。 3. 設定網頁外觀 在有了自己的網址以及主機後，就可以開始進入網站內部設定，WordPress網站中提供許多不同類型的模板，有免付費以及付費的樣式，讓使用者可以根據自身的需求以及喜好選擇相對應的樣式，此外，也可以透過上傳的方式，將自己喜歡的主題樣式上傳到WordPress網站進行修改。換好了喜愛的樣式之後，也別忘記為自己的網頁設定專屬的logo，以上這些都可以在WordPress網站的「外觀」功能中進行修該以及調整。 4. 熟悉網站後台 在WordPress網站後台中，左方欄內有需多不同的設定功能，在欄位中你可以選擇你想要操作的功能，像是新增文章、上傳媒體、設定頁面、新增外掛、設定彈跳視窗等等，建議新手使用者可以一個一

RWD，英文全名Responsive Web Design，中文譯作響應式網頁設計，顧名思義是一種前端網頁設計師或是後端工程師在設計網頁時，會運用到的一種技術做法，讓其網頁設計可以針對不同的裝置（例如桌電、筆電、平板、手機等等），而呈現出不同的瀏覽方式以及最適合的解析度，讓使用者在操作時，可以免去許多縮放或是捲動等行為。   RWD觀念 隨著近年來，行動網路與行動裝置的普及，使用者有越來越多的裝置可做為上網的選擇，從手機平板到桌機筆電，就算是在同種裝置分類中，也有許多不同的大小尺寸，為了因應這樣的趨勢，許多網頁設計師，開始針對不同的行動裝置以及尺寸做出不同的網頁版本，有的甚至會開發出手機APP，為了就是讓使用者有更好的使用體驗，然而在這樣龐大的做工下，同時也需要花費許多的人力、心力、時間以及預算成本去做維護。   RWD寫法 要設定網頁RWD，不外乎以下幾個步驟： 1. 設定HTML檢視區 所謂的檢視區（viewport）指的就是當使用者在瀏覽頁面時，顯示內容的畫面範圍。而不同的使用裝置，有不同的顯示範圍，這時為了讓網頁可以因應不同的螢幕裝置大小，就會在HTML的head中設定檢視區，來完成RWD的設定。 舉例來說：為了適合手機使用者的最佳閱讀解析度，W3C特地為手機版網頁制定了專屬的HTML檢視區語法：<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>   2. 決定RWD外觀設計模式 設定完HTML檢視區後，接著需要設定在不同的檢視區範圍下，網頁該如何配置以及呈現方式，目前RWD主要的五大外觀設計模式為：主體流動（Mostly Fluid）、欄內容下排（Column Drop）、版面配置位移（Layout Shifter）、微小調整（Tiny Tweaks）以及畫布外空間利用 (Off Canvas)。   3. 使用 CSS3 Media Queries 設定頁面的版面配置是CSS的主要工作之一，因此為了在RWD中可以針對不同瀏覽器的寬度，提供最合適的頁面樣式，就需要使用CSS3 Media Queries。舉例來說，當我們要針對「螢幕尺寸在 400 - 500px間，針對 <p> 設定字體大小為 20px

在網路世界當道的世代，許多企業開始投入愈來愈多的資源與心力在建立官網上，也因此促成了網頁設計軟體、課程相關以及像是戰國策集團這類提供網頁設計服務公司的蓬勃發展。然而看似直白的網路設計，卻暗藏了許多「眉角」，舉凡HTML 語法設定、CSS 設計、JavaScript、SEO 設定、使用者體驗、視覺設計、RWD 網頁設計等等，全都包含在了網頁設計中，環環相扣。 網頁設計範例 蘋果官網 相信大家對蘋果官網都不陌生，簡單俐落的風格，整齊的頁面排版和清楚的產品圖示，一目瞭然，搭配上巧妙的動畫設計，讓每次的瀏覽都是一次令人期待的視覺饗宴。 Nike 商品頁 在Nike 的商品頁面中，針對每一項產品都有給出清楚的商品名稱、預覽圖、價格，以及可供選擇的顏色。左邊的側邊欄中，根據不同的消費者需求，給出了不同的篩選條件，大幅提高了使用者體驗的分數。 Dropbox Dropbox在使用RWD 響應式網頁設計上表現得非常出色。從電腦轉移到行動設備時，字體顏色以及大小不僅會根據不同的背景顏色做更改，連帶的圖片也會更改方向。此外Dropbox 也根據不同的瀏覽裝置，而制定不同傻用者體驗，例如，為了防止使用者疑惑，在電腦介面上有一個小箭頭符號，導引桌面使用者向下滾動以查看更多內容。然而當使用者是透過具有觸摸屏功能且可上下滾動的行動裝置時，小箭頭則會消失。 網頁設計軟體推薦 工欲善其事必先利其器，想要架設一個好的網站，首先你需要先有一個簡單上手、方便使用的網頁設計軟體，以下將分別推薦適合初學者或是進階使用者所使用的網頁設計軟體，以及不熟悉語法的使用者所適合採用的網頁設計網站。 FontPage 圖形化的網頁設計軟體，使用簡單，基本功能完善，適合網頁設計的初學者做使用。但其進階功能上卻稍嫌不足，因此比較少專業網頁設計者會使用。 FontPage 主要由三個部分組成，分別是頁面製作的編輯頁、HTML 語法編輯器以及網頁預覽頁。而FontPage 的導覽模式以及所提供的版型，都能讓初學者在初期使用時，更清楚也更容易上手。 Adobe Dreamweaver 針對HTML 語法已經有一定了解以及基礎的使用者，Adobe Dreamweaver 將會是一個最佳的選擇。與FontPage 同樣採圖形化的設計，介面友善，使用門檻也不高。 Adobe Dreamweaver 支持了許多不同的程式軟體，包括Ja