【2022最新】做網路行銷還沒聽過UI UX？ Google給企業的UI ...

UX（User Experience）主要的範疇為根據使用者的習慣設計優化用戶體驗，主要考慮的是「產品用起來的感覺」，也就是使用者介面設計。

鑽研如何妥善安排整個網站頁面的 ... Home/網站優化/【2022最新】做網路行銷還沒聽過UIUX？Google給企業的UIUX操作建議 【2022最新】做網路行銷還沒聽過UIUX？Google給企業的UIUX操作建議 相信大家常常聽過UI和UX，也常看到國內公司開出UIDesigner的職稱，但其實對於UIUX確切定義並不太清楚。

其實UX是 UserExperience使用者經驗的簡稱，而UI則是UserInterface使用者介面的簡稱。

今天我們一起來看看UIUX的確切定義、區別，以及Google等知名的跨國大公司他們是如何替自己的網站設計UX。

內容目錄 隱藏 I. UIUX是什麼？ I.I. UX（UserExperience）使用者體驗設計 I.II. UI（UserInterface）使用者介面設計 II. UIUX設計與行銷的關聯 III. UIUX設計之間的關係？ III.I. 視覺設計/圖像設計（VisualDesign） III.II. 互動設計/動態設計（InteractionDesign） III.III. 設計研究（DesignResearch）/使用者研究（UserResearch） IV. 網站UX入門–GoogleUXPlaybook重點摘要 V. GoogleUXPlaybook建議指南 VI. 網站UX設計目的 VI.I. 對顧客優點 VI.II. 對網站主價值 VII. UX金字塔 VII.I. A、消費者洞察 VII.II. B、網站資訊架構 VII.III. C、內容優化 VIII. 零售電商篇UX技巧 IX. 改善UX體驗的6大關鍵環節與46個優化原則 IX.I. A、首頁/登陸頁（Homepage/Landingpage） IX.I.I. 降低摩擦 IX.I.II. 協助理解 IX.II. B、Menu/導覽頁（Menu/Navigation） IX.II.I. 降低摩擦 IX.II.II. 協助理解 IX.III. C、搜尋（Search） IX.III.I. 降低摩擦 IX.IV. D、分類/品類（Category/Product） IX.IV.I. 降低摩擦 IX.IV.II. 協助理解 IX.V. E、轉化頁（Conversion） IX.V.I. 降低摩擦 IX.V.II. 協助理解 IX.VI. F、結帳資訊欄/表格優化（Formoptimization） IX.VI.I. 降低摩擦 IX.VI.II. 協助理解 X. UX優化結論 X.I. 做任何優化前一定要A/BTest X.II. 避免打斷使用者的瀏覽注意力  UIUX是什麼？UX（UserExperience）使用者體驗設計UX（UserExperience）主要的範疇為根據使用者的習慣設計優化用戶體驗，主要考慮的是「產品用起來的感覺」，也就是使用者介面設計。

鑽研如何妥善安排整個網站頁面的內容規劃，例如行動呼籲按鈕（CalltoAction）的位置應該擺在哪裡、哪些區塊的內容要先在網站上出現等等。

 UX設計一般包含使用者的研究（UserResearch）和情境分析（Scenario），一般有資源的公司會透過使用者歷程追蹤、問卷及實際訪談調查，或是內部資料庫分析等等，分析潛在TA的使用習慣和行為，而後再三修飾創作出「最棒的」使用者體驗。

 若公司只開一個UXDesigner職缺，那這位UXDesigner主要是做網站的骨架設計，產出網站地圖模板、網頁Wireframe&Prototype，以及配合行銷數據去進行使用者研究報告。

 UI（UserInterface）使用者介面設計UI主要是負責設計，將介面上的按鈕、區塊等等，主要考慮「產品怎麼呈現」，以使用者便利性與整個設計的美學為出發點設計，依UX的理念和架構設計，包括整個網站產品的顏色、字型、字體大小，主要是根據PM或是UX設計師給的架構設計網頁或是App介面，是產品的美學工程師。

 而UI設計師和網頁設計師的差別，一般網頁設計師除設計網頁的視覺呈現之外，也要求必須懂得前端切版，需要具備前端程式語言HTML+CSS甚至JS的能力；而UI設計師更重視使用者流程與使用者體驗的細節，產出的網頁比較偏向功能性網頁，重視使用者流程。

 UIUX設計與行銷的關聯與一般傳統商店相同，數位網站需要漂亮的門面、簡單直覺的使用者介面及舒適的購物體驗，吸引人的首頁設計能讓來到網站的客戶能一眼看出你是賣什麼、或是正在舉辦什麼促銷活動，以增加轉換率。

在UIUX設計中，會用顧客旅程地圖來掌握消費體驗與流程，進而找出改善方向。

 而對於行銷人員而言，UIUX設計的好壞會直接關乎到每個人員的KPI關鍵指標和成效，可以說是不得不重視的領域： 專案經理專案經理被時間追著跑，可藉由評估UX成本與效益的取捨，並給出最適合客戶的建議。

 SEO操作網站體驗會直接影響使用者的停留時間、瀏覽頁數等網站分數，進而提升SEO成效。

進行SEO規劃時，從使用者的角度看待網站，安排好網站的視覺動線，在文案內容架構中曝光關鍵字，就能兼顧兩者。

 業務在接洽或談判時，可藉由客戶網站優化情況，知己知彼百戰百勝。

 廣告投手好的UX能提升 Landingpage體驗，優化廣告成效。

 UIUX設計之間的關係？一般UIUX設計為上下游關係，UX先透過研究分析使用者需求，思考哪些版面位置該放哪些內容及互動設計，在將網頁的架構勾勒出來，接著才交棒給負責整體視覺呈現的UI設計師；UI設計師透過視覺安排與設計具體呈現，達成UX期望傳達給使用者的邏輯與感覺。

 台灣有些中小型的新創公司因為人員資源有限，會選擇融合UI和UX設計這兩個角色，並期許這位UI設計師可以兼具UX設計能力，最好還要會些前端程式語言，直接產出符合使用者體驗+美感的網頁。

 相反，若大公司要將UIUXDesigner職缺細分成更專業的分工，依種類可以再細分成視覺設計（VisualDesign）、互動設計（InteractionDesign），以及設計研究（DesignResearch）/使用者研究（UserResearch）。

 視覺設計/圖像設計（VisualDesign）視覺設計跟我們一般認知的UI設計最相近，也最符合大眾認為的「網頁設計師」。

視覺設計不需注意畫面之間如何連接，也不必在乎網頁互動性，視覺設計師最主要的工作是設計出美觀且符合品牌直觀概念的圖示、控制鈕、視覺元素和運用合適的字型，決定每個視覺元素應該呈現的樣子，最常使用Photoshop、Sketch等軟體進行設計。

 工作時，VisualDesigner會根據InteractionDesigner畫好的流程及Wireframe進行視覺化的設計，他們必須在視覺上呈現想要給用戶的感覺，較難用主觀的條件論來評斷成品好壞，畢竟每個人的美感不盡相同。

 VisualDesigner看中繪畫能力及設計能力，對美感尤其要求，對學歷的要求比較沒那麼多，想應徵VisualDesigner可以多著墨於自己的作品集以及設計的經驗。

 互動設計/動態設計（InteractionDesign）視覺設計擅長處理靜止物件，而動態設計師主要設計動畫呈現，也就是「使用者按了以後介面要有什麼反應」，包含按鈕&選單等元素，動畫設計元素移進來&退出的轉場效果，動態效果可以引導使用者的使用流程，提供使用產品的視覺線索，讓介面更加完整，因此必須擁有動畫設計能力。

 InteractionDesign需要將流程系統化且合乎邏輯的串起來，幫助使用者可以更順利的使用產品，拿網頁來說就是網頁架構，因此非常考驗設計者的邏輯能力。

 工作上和工程師的合作會比其他角色來的更加緊密。

許多分工沒那麼細的中小型公司不會將這個職位分出來，由PM和VisualDesigner一起瓜分工作內容。

 設計研究（DesignResearch）/使用者研究（UserResearch）主要工作為設計題目，並且邀請使用者進行深度訪談，並從訪談中洞察使用行為，並判斷出使用者軌跡，提出相對應的路徑和按鈕。

身為設計研究需要相當的邏輯能力和觀察力，深度了解使用者需求。

 除了實體訪談，研究員通常也會研究目前的使用數據，用A/Btest來得知哪個設計選項最適合使用者，根據需求不斷重複更改設計。

 網站UX入門–GoogleUXPlaybook重點摘要Google身為搜尋引擎龍頭，擁有各大企業到達頁面的數據，2019年初發布了最新版的GoogleUXPlaybook，涵蓋電商、新聞媒體、旅遊、金融財經、不動產以及顧客經營等領域，今天針對這些領域，我們綜合自身代操經驗，替大家翻譯整理出一些通用的UX設計技巧，你可以根據以下我們為您整理的要點，替你的網站做份UX健檢。

 如果想進一步了解我們是如何架設出精美又符合UX及SEO搜尋引擎優化的網頁，可以點進我們的網站架設頁面了解更多。

 不過提醒各位，Google今天是以宏觀角度去看每一個網站，想當然爾大公司品牌的流量、權重都比中小企業來的高很多，因此蒐集到的數據皆以國際知名品牌品牌為主，建議每一個中小企業還是要根據自身品牌的目的去設計想要的顧客旅程。

 GoogleUXPlaybook建議指南 Retail(零售)、ECommerce(電商)https://services.google.com/fh/files/events/pdfretailux_playbook.pdf Travel(旅遊)https://services.google.com/fh/files/events/pdftravelux_playbook.pdf Finance(金融)https://services.google.com/fh/files/events/pdffinanceux_playbook.pdf RealEstate(不動產)https://services.google.com/fh/files/events/pdfrealestateux_playbook.pdf News(新聞)、Content(內容)https://services.google.com/fh/files/events/pdfnewsux_playbook.pdf LeadGen(潛在客戶)https://services.google.com/fh/files/events/pdfleadgenux_playbook.pdf 網站UX設計目的對顧客優點         降低逛網站的摩擦力         快速找到他們需要的資訊，降低搜尋成本 對網站主價值         降低流失率         優化行銷漏斗         提升品牌信賴和形象         控制訪客在網站的行為 UX金字塔 A、消費者洞察在消費者洞察中，你必須模擬網站訪客的心態，找出顧客需求–他想要什麼顧客的心智模型–他是怎麼思考的，消費者的思考邏輯？顧客旅程–使用者的三個What：這是什麼網站？能帶給我什麼好處？我需要做什麼才能獲得好處？ B、網站資訊架構 視覺動線– 如何安排資訊？好的視覺動能要能配合受眾直覺，並且符合資訊邏輯。

 可用性– 可用性可以理解成防呆設計，盡量設計的簡單易用，讓使用者以更少的程序就能工作，並且避免錯誤的使用情況。

 C、內容優化該寫甚麼–內容架構該怎麼寫–文案與內文撰寫 零售電商篇UX技巧今天詳細介紹LandingPage中最常見的零售電商，其餘旅遊、金融、不動產、新聞媒體以及名單型網站將另外開篇詳細介紹。

  如何定義自己是否為零售電商的landingpage？在電商網站地圖中，關鍵點在於產品頁和結帳流程，因此只要能從網站上買到東西就可以當作電商網站去優化。

 關於網站內的SEO，在內容和html的編排上主要是首頁、分類頁、產品頁及部落格皆使用關鍵字做SEO，甚至所有網站內會出現的文字資訊都需要做SEO，以增加關鍵字和網站的吻合度，幫助搜尋引擎能在關鍵字被搜尋時能立即找到你的網站。

 改善UX體驗的6大關鍵環節與46個優化原則  A、首頁/登陸頁（Homepage/Landingpage）降低摩擦不要使用插頁式廣告移除自動輪播圖字體大小清晰可閱讀，確保在手機上閱讀舒服使用第三方認證 修改難度影響校度KPI1易高跳出率BounceRate2易高跳出率BounceRate3易高停留時間4中高跳出率BounceRate 協助理解     首頁含最熱門的內容/品類，以及主類別在不動頁面的情況下(Abovethefold)，可看到呼籲按鈕情境描述式CTA，而非直敘型首頁必須有明確的價值主張文案加入足夠的社群佐證 修改難度影響校度KPI1中高按鈕點擊率、跳出率2易高CTA點擊率、跳出率3易中CTA點擊率、跳出率4易高跳出率、轉化率CVR5易中跳出率範例：BFFECT首頁簡單明瞭，操作提示清楚字體適中有價值主張與CTA按鈕  B、Menu/導覽頁（Menu/Navigation）降低摩擦    有置頂收合式的選單    Menu長度限制在一頁內，讓用戶一次就可以看完所有選項    固定欄位（包含收合式選單）