當我們想要架設一個網站、製作一個APP或是想要加入遊戲設計,首先就會聽到「UI」以及「UX」這兩個詞,那麼到底這兩個詞指的是什麼?設計的流程又是如何?下面就讓我們一起來了解UI與UX的差異,並釐清設計的5個基本步驟!
UI(User Interface)使用者介面
簡單來說,UI就是「使用者看到的設計」,當使用者第一眼看到網站、APP或遊戲時,會直接感受到的視覺設計,如:網站的版面、圖片、顏色等,就是UI的範疇。
UX(User Experience)使用者體驗
而UX則是指「使用者感受的流程」,當使用者在網站、APP或遊戲上瀏覽、操作時,會直接感受到的流程體驗,如:網站的操作流暢度、各功能之間的連結性、等待時間等,就屬於UX的範疇。
UI及UX比較
了解UI與UX各自指涵的範疇後,接著就讓我們來看看兩者差異性的比較。
定義 | UI | UX |
使用者體驗 | 使用者看到的設計 | 使用者感受的流程 |
設計目標 | UI以「美觀」為首要目標,再依照網站主題、產品特性或使用對象來做設計 | UX以「使用者滿意」為目標,不僅要讓使用者看到設計覺得順眼,也要透過各功能的設計與串聯,讓使用者體驗順暢 |
改變元素 | 網站的版面、各種內容的視覺設計 | 操作流程的設計、各功能的串聯性 |
整體差異 | UI是以使用者的視覺感受為主要考量 | UX是以使用者在使用產品時的整體體驗為主要考量 |
UI UX設計流程5步驟
由此可知,UI與UX在設計上各自有其要點,且皆重視使用者感受,而由於UX的設計目的較為抽象,因此在設計流程上,常以UI輔助UX的設計,以做到實際可行。而其設計流程可分為以下5步驟。
1.了解網站需求,架設目標
首先,我們會先釐清網站、APP或遊戲的需求,以及架設此平台的目的為何,同時了解目標受重分布、使用者的需求、再根據痛點來設定設計的目標。
在經過這步驟的調查並訂立出一份目標報購後,才能讓後續設計的過程更加順暢,也才能更確切地設計出符合需求的產品。
2.規劃功能地圖(Functional Map)
接著就可開始規劃整個產品的功能地圖,將各個功能模組化,並與各功能之間的連結關係與流程設計清楚,舉例來說,電商網站會需要有會員系統、購物車、購物紀錄等需求,而設計師則需要明確的將功能區分並記錄,讓接下來的產品開發、工程師溝通時,更快速了解各模組的功能與設計需求。
3.設定操作流程
在設定操作流程時,則會將上一步驟提出的功能的關聯性串接在一起,並畫在一張紙上讓大家可以更明確的瞭解產品輪廓。
以上面的例子為例:在操作流程圖的會員系統中,則他會將登入畫面、購物車、購物紀錄等功能串接在同一條線上,而購物車可能又與推薦系統、物流系統等內部功能連接。明確的畫出操作設計圖後,在未來的溝通或是討論上,都可以讓團隊的目標更加明確。
4.設計線框稿(Wireframe)
線框稿近似於網站設計中的「切版」或是漫畫的「分鏡圖」,設計出整個產品的骨架。而在此階段的主要目的為確認各版塊、功能的擺放,以及其與其他版塊、功能的關聯,與線條的分佈,以讓後續的視覺設計更加清楚。
5.製作測試版及功能測試
最後則是設計出測試版(demo)並進行功能測試,在網站、APP或是遊戲上線前,都會先有個測試站的形式,讓內部人員或少量外部人士測試,讓使用對象進行操作,驗證之前面設計是否符合使用者的需求、操作習慣,並了解其可能遇到的問題,進而改善產品。
UI UX應用範圍
因此,UI UX可說是現今設計領域中,不可或缺的元素,且隨著科技的進步,其應用範圍也越來越廣,讓己見室為你整理3個UIUX設計師經常接到的案子:
網站
網站應該是大家第一個就能聯想到到的例子,舉凡是論壇、電商、部落格、企業網站,設計師們都會需要依據UIUX的調查與研究,才能夠做出適合使用者瀏覽的網站。
手機APP或軟體
人手一隻手機機的現代,手機APP也成為人們生活中不可或缺的一部分,而許多廠商未來抓住固定客戶,會研發會員APP、互動小遊戲等等,而使用者若覺得某APP介面不美觀,或是操作不順暢時,大多數人會選擇離開,因此UI UX的設計也對APP而言是相當重要的
遊戲
不論是電玩、桌遊、手機遊戲等,皆需要經過細緻的設計,一個優秀的UIUX設計師,可以明確說出「為什麼攻擊鍵要放在F」,深知玩家的遊玩體驗同時,也需要有敏銳的美術設計,讓遊戲畫面足夠吸引人
看完了這麼多,我想你對UI跟UX有了一定的了解,如果喜歡我的文章,或是未來想要了解更多關於SEO的消息,請關注我的網站,我會努力將各種知識分享給各位:)
Last Updated on 10 6 月, 2024 by 己見室