UX/UI差很多 ?！UI 設計師工作內容、必備技能

 

UI和UX千萬別混淆，簡單解釋兩者

☑UI(（User Interface）：專注於視覺設計和互動設計

☑UX（User Experience）使用者體驗：專注於使用者的整體體驗和感受

例如，一個銀行App的 UI 可能設計得非常漂亮，但如果需要點擊多個頁面才能完成轉帳操作，那麼這樣的UX就不會很好！

快速掌握UI設計基本職能

當談到「UI設計師」和「UX設計師」時，很多人會混淆這兩者，儘管人才市場常常將這2者合併，但工作範圍、職能是完全不同，今天這篇我們先來來探討UI設計師角色核心職責

UI設計師（User Interface Designer）的主要工作是設計數位產品的視覺界面，確保用戶在使用產品時有愉快且直觀的體驗，以下是UI設計師角色職能

1.    視覺設計：創建產品的外觀，包括色彩、字體、圖標和排版等元素，確保界面美觀且一致。

2.    原型設計：使用工具如Figma或Sketch製作互動原型，展示產品的功能和用戶流程。

3.    設計系統：建立和維護設計系統，確保不同產品和平台之間的設計一致性。

4.    用戶測試：與用戶體驗設計師（UX Designer）合作，進行用戶測試，收集反饋並進行設計改進。

5.    協作：與開發團隊、產品經理和其他設計師密切合作，確保設計能夠順利實現並符合產品需求。

網頁的基本構成UI設計就佔了一半以上：

1.    視覺設計(UI)：配色、字體和圖片

2.    網站結構(UI)：清晰的網頁目錄引導

3.    互動元素(UI)：表單、按鈕等

4.    網站架構(UI)：首頁、關於我們、服務項目等頁面

5.    內容：文字和影片素材等……

6.    響應式設計：適應不同設備的顯示

7.    網站速度：SEO優化

 

快速掌握UI設計基本技能

1.了解 UI 設計的基本概念

多了解UI 設計（使用者介面設計）基本原則和概念，主要關注於產品的外觀和互動方式，包括顏色、字型、佈局等。

2.學會利用平台設計出好的UI

常用的 UI 設計工具包括 Figma、Sketch 和 Adobe XD。這些工具可以幫助你快速上手這些工具。

3.不斷練習累積作品集

開始設計一些簡單的介面，如手機應用程式或網站的原型。可以參考一些設計範例，逐步提升自己的設計能力

 

熱門5個網頁設計工具優缺點分析

☑    Adobe Express：
這是一款線上工具，適合製作簡單的網頁，如作品集、履歷和簡報。它提供了多種模板和設計元素，操作簡單。但較明顯的缺點是對於中文的支援程度不足。例如，比方使用「手機」作為搜尋素材關鍵字，會得不到相應的結果，但如果改用「Mobile」就能找到許多相關素材。

☑    Weebly：
費網站建置工具讓人可以簡單上手。尋找可自訂的範本、網域和易於使用的工具，適合任何類型的商務網站。其缺點是網站依附於平台上，沒有辦法搬運或移轉。

☑   Wix：
Wix.com是一個線上網站，能讓使用者在其網路上網站編輯器中拖放工具建立HTML5網站。適合初學者。Wix 提供了豐富的模板和應用程式，可以輕鬆地自訂網站。也是繼WordPress後聲量次高的網站。免費版會有廣告干擾，影響網站UX，同樣也是其缺點是網站依附於平台上，沒有辦法搬運或移轉。 

☑   WordPress：
擁有全球最多用戶的網站，全球有 40 % 以上的網站使用WordPress架設。最大優勢是WordPress 是開源軟體，這意味使用 WordPress 架站，未來你想將網站搬去哪裡都可以。

☑   Webnode：
適合快速建立個人或商業網站。它提供了多種模板和設計選項。缺點是需升級專業版方案，才可去除Webnode商標、開啟GA，對於SEO優化不太友善。

 

舉個實例解釋UI設計師的工作

假設我們正在設計一個電商網站，目標是讓用戶能夠輕鬆地瀏覽和購買商品，以下是UI設計師如何通過設計來提升用戶體驗的過程。

😡問題：用戶反映在瀏覽商品時，經常找不到自己想要的商品，並且購物車的操作不夠直覺，導致購物體驗不佳。

😀UI解決方法：
一、改善網站結構：

☑   分類清晰：UI設計師重新設計了商品分類，使用直覺的圖標和簡潔的文字， 使用戶容易找到所需的商品類別。

☑   搜尋功能：增強搜索功能，加入智能推薦和自動補全，讓用戶在輸入關鍵字  時能夠快速找到相關商品。

二、優化購物車介面：

☑   圖像化購物車：在每個頁面上添加一個固定的購物車圖標，並顯示當前購物車中的商品數量，讓用戶隨時了解購物車狀態。

☑   簡化操作：設計一個簡單明了的購物車界面，使用大按鈕和清晰的步驟指
引，讓用戶能引，讓用戶能夠輕鬆添加或移除商品，加速結帳。

三、提升視覺吸引力：

☑   高畫素圖片：使用清晰商品圖片，並提供多角度查看功能，讓用戶能夠 
更好地了解商品細節。更好地了解商品細節。

☑   一致性設計：保持視覺風格一致，使用統一的色彩和字體，提升整體的專 
業感和品牌識別度。

 

↑UI設計師必須有效率的掌握WordPress架構網站的技巧

想做好UI，來看前輩們的建議?

• 姜宜均/系統專案經理

💬我的工作是客製化系統的專案經理人，常需要跟客戶洽談需求後，需要把畫面先做出來。所以往往在初期跟客戶展示系統畫面時，會需要請工程師製作雛形，為了減少工程師的作業量讓他們專注在開發，會希望專案經理人學會如何使用Figma製作雛形。

這些都是要跟工程師們去討論，然後將畫面產製出來給客戶看，如果學會了Figma，且也經過長時間的練習的話，我相信在職涯發展上對我一定有許多幫助，也可以幫助我累積許多作品以及經驗，那在我求職的路上一定也會大大的加分。(全文)

 其他延伸文章

新UI設計神器Figma到底有何亮點?
用Figma製作原型Portotype的技巧

• 張芷芹/長庚醫院-網頁開發人員

💬因我想將RWD應用在我們的官方網頁上，讓所有使用我們網頁的人都可以有很良好的體驗。若是要將一個響應式網頁設計的讓人看到了會耳目一新，那麼你本身的CSS能力就絕對不能輸人。(全文)

• 胡毓萍/網頁管理人員

💬常常聽到使用者抱怨：「系統畫面好醜！」、「看起來很古板、老舊。」、「我找不到功能在哪裡？」等等，傳統的資訊系統往往著重於技術層次的發展，追求功能齊全、資訊完備，然而密密麻麻的按鈕與擁擠不堪的畫面文字，無形間築起一道系統高牆，阻礙使用者與資訊系統間的互動交流。隨著技術演進，使用者介面從黑底白字視窗框架，延伸至圖形化、感應式、甚至是人腦感測等層次，然而最重要的不外乎是能透過好看、好用甚至讓人感動的使用者介面，進而產生好的使用者體驗。(全文)

• 王詠柔/電子業網站管理人員

💬沒有設計基礎者可以先學入門「使用者介面視覺構成解析與優化」，理論和實作搭配的比例剛剛好，從一開始的基本 UI 觀念、各種應用範例的說明，讓我們可以很清楚知道這個領域在產業中扮演的角色，以及會遇到的問題。

接著進入到顏色的觀念講解，老師不藏私的提供了多個色票網站資源，也一一說明了如何操作、使用這些網站快速產出自己偏好的色票，甚至還能夠直接匯入photoshop裡面，而每一次產出後，也都引導我們透過ppt整理色票，呈現出一個UI設計師實際上要產出的樣子。(全文)

 以上經驗，讓我們初步了解UI設計是如何通過細緻的設計過程，從用戶的角度出發，解決實際問題，從而提升整體的用戶體驗。

 

零基礎/新手UI設計師，以下這3種工具學起來就對了!

1. Figma基礎操作：Figma是一款協作設計工具，主要用於UI設計和原型製作。新手UI設計師建議可先學習Figma的基本操作，如畫板、圖層、元件等(零基礎者也可選擇先學習基本的UI介面視覺構成解析與優化，再來學Figma)。

2.響應式網頁設計：RWD (Responsive Web Design) 可提升用戶體驗，無論使用何種設備，網站都能提供最佳的瀏覽效果。可學習使用CSS框架如Bootstrap來快速建立響應式佈局。

3. WordPress：如果你已經熟悉 Figma，學會 WordPress 會帶來更多的優勢，因為WordPress即使沒有技術背景的用戶也能輕鬆上手，可獨立製作完整的網站。