之前在網頁基本知識中簡單講解了架設網站的概念，那麼當然也要提到常常聽見的UI、UX、RWD囉！（都是英文簡稱感覺好像很專業齁XD）
RWD，全名是Responsive Web Design，也叫響應式網頁設計。
有沒有發現每台電腦螢幕規格都不一樣、瀏覽器也可以拉大拉小變換尺寸呢？或是手機每支都不一樣尺寸，電腦是橫的但手機是直的，除了這兩者又有平板，正因為現在愈來愈多不同載具和尺寸，網頁當然也要跟上時代！因此出現了響應式網頁的概念，讓網頁呈現於不同尺寸甚至載具時，資訊或圖片不會變形跑位。
有沒有發現有時候用手機打開一些傳統網站，會覺得字宇宙無敵超級小、全部擠在一起？或是某處有一大片莫名其妙的空白？這都是因為傳統的網站沒有做RWD的處理，所以在不同尺寸的瀏覽器或是手機上無法轉換，影響了使用的觀感和流暢度。
人人一台3C產品的現代，除非是很久以前就架設、沒有再更新的傳統網站，不然現在已經很少有不支援RWD的網頁啦XD
如果在使用電腦時把瀏覽器拉窄到一定尺寸，通常就會看起來跟用手機開同一個網站差不多喔~不過因為電腦螢幕大、又是橫的，可以呈現的效果就比手機直式的小螢幕來得豐富很多！因此通常在RWD的處理上，在使用手機瀏覽時，會自動將一些非主要的東西隱藏起來，讓畫面比較順暢，這也是為什麼手機上瀏覽網頁感覺好像板型都很類似~
如果真的很介意手機呈現、或是電腦版功能實在太過於複雜很難化簡，也可以請設計師特別製作電腦、手機兩個版本，由工程師設定讓網頁自動偵測載具，在電腦上自動呈現電腦版畫面、手機上自動呈現手機版畫面喔！例如多語系也是可以設定成自動偵測使用者瀏覽器的語言，自動轉換成同語言，讓使用觀感更流暢~工程師是很偉大的呀XD
台灣很愛講UIUX，也有許多人以為這兩者是一樣的，雖然有時候會重疊，但其實不一樣喔！UI是眼睛所看見的、UX則是使用時的感受。（有沒有曾經逛到很酷炫的網站但是點來點去都不知道怎麼樣才能跳下一頁？或是跳出廣告時明明看到【Ｘ】符號可是怎樣點都關不掉一定要畫面放到很大按了才有用？有沒有曾經看網站看到很火大因為覺得「爛透了、難用到爆」？這些就是你內心的感受啦XD）
UI是User Interface的縮寫，也就是「 使用者介面」。無論是app還是網頁， 你看見的畫面就是UI設計的範疇 ：整體畫面的美觀、配色、協調度，乃至字型、字體的選擇、每個按鈕應該放在哪裡等等。介面設計師（UI Designer）將畫面設計完畢後，會搭配適當的標註和說明，轉交給工程師進行撰寫；而介面工程師（UI Developer）就像是帶有前端工程師及設計師雙技能的人，可以在設計畫面後自行撰寫出網頁介面，不過比起javascript這樣比較功能性質的技術，通常會比較精於html與css在畫面呈現上的刻畫。
UX則是User Experience的縮寫，也就是「 使用者經驗」，利用收集來的資料、訪問數據等等，根據使用者的習慣 安排網站的流程與邏輯規劃。有發現有些購物網站很難用，明明點了A應該要連去B卻莫名其妙先出現C嗎？這就是UX沒有規劃好會發生的狀況啦~
在產品或網站推出之前，UX設計師要不停的收集數據；即使產品或網站已經推出，UX設計師還是要不停收集使用者的反饋與意見，去優化流程、讓使用者有最棒的體驗。要達到優良的UX可不能只靠通靈！數據收集方式有百百種，例如真人測試、AB測試、行為觀察、競品分析等等， 在不斷的數據收集與推敲下，創造出流暢的使用流程 。
如果說UI是舞台上美麗動人的表演，那麼UX就是幕後推動一切的功臣！將所有的流程、步驟都規劃好，才能順暢的完成這場表演；光有漂亮的介面但用起來很爛的話留不住使用者，但流程很棒畫面卻醜爆也同樣留不住使用者~在這個百花爭鳴的時代下， UI、UX要相輔相成才能讓網站創造出最棒的效果 。
不可能實際站在使用者旁邊一步一步說明網站要怎麼用，因此UI設計師負責用畫面將使用者引導到UX設計師已經擬定好的流程上，用視覺效果讓使用者很直覺的就知道要按這個鈕、導引到對的頁面上，就是UI和UX之間最棒的配合！
因此認為UI=UX=做網頁的人，就是不正確的迷思啦~
雖然UI、UX在本質上負責著不同的部份：前者著重於畫面的呈現、後者著重於事前的準備，但彼此也有很多工作內容會是互相重疊的。規模大一些的公司是會將這兩個職位分開的喔！彼此各司其職卻互相輔助才能達到最好的效益。
如果客戶要單純美化UI，就會著重在視覺的呈現上，當然也會適當的融合一些基本的UX概念進去（總不能因為美觀就讓按鈕出現在天外飛來一筆的地方結果使用者根本找不到按鈕吧XD），但整體還是以視覺的變化為導向；如果客戶需要的是UX的優化，那麼就會著重於了解整個網站架構和每一個細節的功能，再重新順過使用上的流程，反覆推敲頁面之間切換的順序、功能的擺放、按鈕的直覺度等等與使用體驗相關的變因，並刪減掉累贅或使人混亂的呈現方式、精簡化流程的同時也要確保不會精簡過頭反而讓人看不懂，這些準備都完成後，最後再將重新整理過的結論轉化成畫面，開始進行測試等等後續動作。
台上一分鐘、台下十年工，雖然手機滑著滑著很快就能逛完好幾個網站，但這些網站的背後都是無數UI、UX設計師和工程師聯手一點一滴從無到有建構而成的！
希望這樣的快速分享可以讓大家更了解UI、UX設計師本質上的不同~
雖然對於常見的網頁例如形象官網、購物網頁等等，因為已經常常看到、也經常使用，在流程上已經有些大家都有的共識（例如看到推車符號就知道是購物車按鈕、不一定要有文字），不過魔鬼永遠都是藏在細節中的！
你知道就連按鈕的顏色都會在無形之間影響人們的點擊率嗎？人會直覺的去點擊比較鮮艷的那個按鈕，所以通常購買鈕都是紅色、而且會比較醒目比較大～這也是設計的一環喔！選擇特定顏色不一定只是考量美觀、有時候也是利用一些已經測試過的數據結論，不知不覺將使用者導向設計師期望的道路上，這就是UI、UX相輔相成下的成果啊XD
😎這篇文章也可以在 https://www.ssudio.com 看到喔！歡迎來官網逛逛XD👉🏻延伸閱讀：網頁為什麼各家報價差這麼多啊?
👉🏻延伸閱讀：RGB? CMYK? 那是什麼? 可以吃嗎?
👉🏻延伸閱讀：PNG? JPG? GIF? 都是圖檔卻有大不同!
