UI / UX 是什麼:User Experience UX 和 User Interface UI 的意思
兩者貌似相同,但卻是兩種完全不同的服務。雖然UI/UX代表不同的東西,但是在設計一個產品的時候,卻有著密不可分的重要性。(User Experience) UX設計很像是產品的骨骼,著重於「產品用起來怎麼樣?」簡單舉個例子,以下圖單車設計為例,User experience嘅主要作用就係起一部功能性能好嘅單車 ,而UI設計則是血肉,是讓產品活起來的元素,著重於「產品看起來怎麼樣?」,以單車為例,User Interface (UI) 就係只當用家坐上單車後會覺得型格和外表好看嘅單車。
客戶需要了解User Experience 與 User Interface 的差異很重要,因為你得搞清楚你的網頁究竟需要的是哪方面的改善。
UI / UX 是什麼 - 什麼是 User Experience (UX) ?
UX (User Experience),全名為使用者經驗。主要是提出使用者的體驗,“No product is an island. A product is more than the product. It is a cohesive, integrated set of experiences. Think through all of the stages of a product or service – from initial intentions through final reflections, from first usage to help, service, and maintenance. Make them all work together seamlessly.”
— Don Norman, inventor of the term “User Experience”
在marketing 的世界內,我們可以簡單地舉例哪裏產生一個button會容易令客人有call to action的動機。重大責任就是要確保產品從這一步流動到下一步符合邏輯。要辦到這點,UX 設計師用的其中一個方法就是實施真人測試。例子就像最近麥當勞的手機app最近大獲好評。因為會UX Designer 觀察使用者行為嫁一個簡易的方法令用家以最快方法登入app取得coupon. 這絕對是公司觀察使用者行為,檢查說得出來和沒說出來的使用障礙,經過不斷修改以創造出「最棒的」使用者經驗。

UI / UX 是什麼 - 使用者體驗設計例子 (UX Design example)
當你進入到這頁面內,證明你在搜尋網站設計的方向。由於網站設計需要多方面的協合。UX會係EDigital 第一時間收取的資料,有興趣可以睇返2020 香港網頁設計
跟據Interaction Design的文章提過以下是User Experience 的主要因素有以下例子:
- Usability Testing:您針對其他用法試圖觸及會員使用網站時候的heatmap行蹤。從而鎖定對象的熱門度以改善網站內容。
- User Research:在做用戶研究的時候,有很多種不同的訪談技巧,在開始採用不同方式前,要先了解要的是 attitudinal 還是 behavioral 資料?要的是質化還是量化資料?要的是generative 還是 evaluative 資料?
- User Stories:User Story(使用者敘述)是一段簡單的功能敘述,以客戶或使用者的觀點撰寫下有價值的功能(functionality/feature)。與其說它是規格文件(documentation),不如說它代表(represent)客戶的一個需求而已,因為實做細節將延後至開發時才會確定。
- Wire-framing:簡單解釋是線框稿,一般稱為 wireframe,它會用非常簡單的灰階顏色、線條、符號或框線,來表達網頁的排版架構

UI / UX 是什麼 - 什麼是 User Interface (UI) ?
設計頁面上的功能加產美感,在工作上不比 UX Designer來得輕鬆,因為designer要保留設計的美感,又要和ux designer 討論到底”點先有人click”, “點先返到數”UI (User Interface) 全名為使用者介面,說穿了簡單的設計頁面上的功能加產美感,在工作上不比 UX Designer來得輕鬆,因為designer要保留設計的美感,又要和ux designer 討論到底”點先有人click”, “點先返到數” 。UI可以是將UX理念實踐的美學工程師,包括整個網站的顏色、字型、字體大小、配置安排。更需要留意在手機時代下,網站在手機的UI都需要留意。
大家有看到一些正在工作中的網站我們會在sub-domain下製作,最後在大家充滿下把網站搬到客人的domain內。

UI / UX 是什麼 - 使用者介面設計例子 (UI Design example)
UI 是你使用時的所有外在部分,而 UX 是在你使用時的內在感受。 UI 設計師關注按鈕的顏色,考慮的是視覺的部分,是產品看起來如何。由於網站設計需要多方面的協合。UX會係EDigital 第一時間收取的資料,有興趣可以睇返2020 香港網頁設計
跟據Interaction Design的文章提過以下是User Experience 的主要因素有以下例子:
- Graphic:您針對其他用法試圖觸及會員使用網站時候的heatmap行蹤。從而鎖定對象的熱門度以改善網站內容。
- Iconography:在做用戶研究的時候,有很多種不同的訪談技巧,在開始採用不同方式前,要先了解要的是 attitudinal 還是 behavioral 資料?要的是質化還是量化資料?要的是generative 還是 evaluative 資料?
- Interface Design:User Story(使用者敘述)是一段簡單的功能敘述,以客戶或使用者的觀點撰寫下有價值的功能(functionality/feature)。與其說它是規格文件(documentation),不如說它代表(represent)客戶的一個需求而已,因為實做細節將延後至開發時才會確定。
- Visual Design:簡單解釋是線框稿,一般稱為 wireframe,它會用非常簡單的灰階顏色、線條、符號或框線,來表達網頁的排版架構
UI / UX 是什麼 - User Interface (UI) Hong Kong Agency Example
- 【UI設計-圖片slide效果】- 點擊圓點,可以轉跳至對應的圖片。如下圖顯示,這樣可以簡單給客戶看到完成品。而以下會以adobe xd作簡單教學。
- 以上圖例子為例,共有五個圓點,需要準備五張不同的圖片製作slide。置入第一張圖片。
- 利用圓形工具,繪製圓點並較為白色。製造出一個向右加圖片的slideshow情況。
- 完成後可以把原本的頁面複製,複製到相關slideshow 有的圖片數量,以下圖我們複製了5個頁面,之後對著圖片右click mouse更換圖片,將其他四個頁面分別更換為不同的圖片。
- 選擇不相關順序的四個圓點,降低圓點透明度。其他四個頁面也相同做法。同樣地如果到第二個button時記得把另外1,3, 4, 5圖的圓點透明度降低。
- 點擊第二個圓點,連接去第二張圖片的頁面。點擊第三個圓點則連接去第三張圖片。其他同樣做法。最後,將所有圓點連接對應的頁面,其他頁面也記得要連接。最後完成圖片slide效果!
UI / UX 是什麼 - 總結:UI v.s UX
User Experience Hong Kong VS User Interface Hong Kong
UI與UX雖然常常被擺在一起描述,但這兩者其實指涉了不太一樣的工作內容:「UX」的全名是User Experience,顧名思義,是針對使用者體驗進行研究的設計師。許多人會將UX翻譯成「產品體驗」,這樣的翻譯卻讓人誤會UX只發生在「產品使用當下。」Riven則提醒大家,儘管UX常常關注「顧客在使用產品時」的體驗,但一位好的UX設計師所關注的,並不只是產品使用當下的體驗,也包括使用產品前、使用產品後的各種細節。
UX設計師面對的是消費者、是客戶,他們的工作內容可能跟一般人對「設計師」想像有些出入,UX設計的不是漂亮的畫面,而是整個產品的使用邏輯,UX設計師必須做質化與量化的研究,並依據使用數據提出產品優化的相關建議。
UI之所以會常常與UX放在一起,是因為UI設計師所設計的往往是網頁或是畫面,當UX設計師設計好了互動模型、UI的規格之後,UI設計師就要想辦法設計出符合公司形象及美感的介面。廣義的UX也包括了UI的內容,但在分工上,兩者仍有不同之處。
為什麼選用EDigital Hong Kong作為你的UX & UI 代理?
EDigital Hong Kong作為香港的digital marketing agency, 當然除左以上廣告targeting功能外,還會協助你增加connection的機會,當中我們會使用自動的linkedin system 令你更容易connect你的用戶,而當成功connection後,會自動發出message 等等的功能。
可以幫客人直接管理公司的用戶而增加用戶的follower再加上廣告輔助達到更好的表現。
以下是系統圖片的cap-screen, 可以見到connection的表現,成功connection的人等等。
