教學網站｜User interface design，UI - 使用者介面設計

UI/UX 使用者介面設計講義 Userinterfacedesign，UI 首頁/使用者介面設計講義 初探使用者介面設計課程總覽 UI/UX FunctionalMap｜功能地圖 FlowChart｜流程圖 UIFlow｜介面（頁面）流程 FIGMA介紹 Wireframe｜線框圖 Mockup｜視覺精稿 Prototype｜互動原型 DesignSystem｜設計系統 UIICON｜圖像設計 UI職場 學期作業說明 HomeWork｜課後作業 UI/UX使用者介面與使用者經驗 UX（UserExperience）使用者體驗，則是根據使用者的習慣，安排整個網站或APP頁面的內容規劃，像是哪些區塊的內容要先在網站上出現，網站的互動設計、行動呼籲按鈕（CalltoAction,CTA）的位置應該擺在哪裡。

包括使用者的研究（UserResearch）和情境分析（Scenario）。

研究必須透過問卷調查、焦點團體調查，或是大量的研究資料背景調查，才能獲得潛在客群的使用習慣報告分析。

UI（UserInterface）使用者介面，主要專業是設計頁面上的功能、顧及使用的便利性與整個設計的美學，網站的美觀性和他息息相關；UI可以是將UX理念實踐的美學工程師，包括整個網站的顏色、字型、字體大小、配置安排，讓網站或APP除了有好的使用者體驗，更有舒適美觀的視覺設計。

圖1：DifferencesBetweenUIandUXDesign UI的工作流程大概如下: 1.Userstory>2.FunctionalMap>3.FlowChart>4.UIFlow>5.Wireframe>6.Mockup>7.Prototype 圖2：UX/UI設計師準備要做的事情 FunctionalMap｜功能地圖 在面對開發時，首先要確認資訊架構，瞭解使用者從哪裡來、將往哪裡去；釐清產品脈絡、定義功能、分類與組織訊息、規劃層級。

在確認使用者之後，需先繪製功能地圖。

FunctionalMap（功能地圖）也類似於心智圖，每一個功能是一個節點，事先預想有什麼運行的功能要建立，我需要得到什麼資訊才能讓功能運轉，方便事先告知後端工程師準備適當的API。

同時也理清操作上的細節，有不清楚的地方趁開始做之前和客戶確認。

任何一套心智圖軟體都可以使用，我們的重點在有視覺化的圖案能和別人討論，這份心智圖大概也只有自己會編輯，網路上有許多免費的資源可以借來用，像是Coggle和MindMeister，或者下載的軟體像是XMind及MindNode。

圖3：FunctionalMap 圖4：鬧鈴APPFunctionalMap FlowChart｜流程圖 創建流程圖有助於我們思考之後畫Wireframe時的重要依據，包括連結頁面跟頁面之間的關係，並確認所有需要的功能，也有助於與開發人員討論與了解所有狀態如何運作，便於前端後端開發時的資訊顯示依據。

參考文章｜先別急著畫UI，你聽過FlowChart嗎 圖5：登入註冊的FlowChart 線上流程圖軟體｜VisualParadigmOnline UIFlow｜介面（頁面）流程 FunctionalMap主要目的在「將抽象的需求轉變成能被實現的功能」；而UIFlow則是「妥善安排功能與資訊在頁面之間的操作動線」。

UIFlow則更重視頁面的數量呈現以及頁面細節和操作動線，也被當作是Wireframe目錄。

圖6：義大世界GOGO購UIFlow 參考文章｜ 初學者的UIFlow APP規劃架構分析與改造 FIGMA介紹 Figma是線上介面設計工具，允許和團隊進行多人協同合作，在瀏覽器中進行設計，共同繪製使用者介面，UI、UX、網頁、App應用程式的介面原型，只要有一個成員變更內容，其他使用者都能同步查看變更和加入編輯，讓團隊可以共同討論，創作出最有共識的產品。

Figma=Sketch（UI設計）+InVision（原型設計）+Zeplin（標註）+Dropbox（雲端同步）+Abstract（版本歷史）+Craft-Freehand（實時討論）+Liveshare（實時分享）+TeamLibrary（團隊組件庫）+WebAPI（第三方接入）+… 延伸閱讀｜ Figma 學習Figma,從這裡開始-最新的Figma中文文檔和優質原創教程 深入了解Figma：UI設計神器 Figma—異軍突起的設計協作神器 Figma免費線上協同設計工具，和團隊一起編輯＆繪製UI、UX介面原型。

Wireframe｜線框圖 Wireframe是一種低保真度的設計原型，在去除所有視覺設計細節之下，進行頁面結構、功能、內容規劃。

初次接觸Wireframe的人會非常不習慣這種呈現方式，頁面上只有方框和文字，沒有圖片和色彩。

繪製Wireframe的目的在於確認每一個頁面的構成，重點在於畫面上要呈現什麼內容、而不是看起來漂不漂亮。

參考文章｜什麼是Wireframe? 圖7：由Wireframe建構的SiteFlow（網站流程（地圖）） 圖8：由Wireframe建構的UserFlow Mockup｜視覺精稿 UI設計師會根據產品經理(ＰＭ)確定好的Wireframe介面，使用Figma、Sketch、Photoshop等繪圖軟體進行視覺設計上的配色、版面調整等，以增強使用者體驗產品功能的效果，也就所謂的視覺精稿。

圖9：WholletCryptoWalletFreeUIKit 延伸閱讀｜ Wireframe、Mockup與Prototype的差異？來看看完整的產品UI設計流程 初學者的Mockup 更多的Mockup範本 Prototype｜互動原型 發者對於產品一定有各式各樣的想法，並盡力讓使用者覺得產品「好用」。

但開發者該如何確定目前產品設計走向能讓使用者覺得好用？可透過「使用者測試」這個方法驗證。

我們可以透過Prototype測試使用者想透過產品完成某項任務時，需經過哪些頁面的流程；觀察使用者在操作過程中是否有感到任何不順或遲疑的地方等等。

延伸閱讀｜ 威秀影城-ReDesign：設計解說｜Prototype 初學者的Prototype Prototype大觀園：Prototype優劣分析步步來 產品原型製作工具(PrototypingTools)使用分享 設計師必懂(一)–WIREFRAME與PROTOTYPE的不同 FigmaTutorial:Prototyping DesignSystem｜設計系統 設計系統可以想像是一個資源庫，裡面有設計風格規範、重複使用的介面設計元素(UIelement)、重複使用的互動設計元素(像是檔案管理)、大方向的設計方向，甚至是動畫設計元素或是檔案工具管理等等。

設計系統不僅僅只是介面設計的規範而已，更是團隊的工作方式和團隊所注重的核心價值。

設計系統(DesignSystem)可以幫助不同產品有和諧的使用者體驗以及風格，不僅讓公司對闡述品牌的核心價值有幫助，使用者也可以預期他們怎麼去使用產品。

設計系統案例-CavaDesignSystem 設計系統案例-FigmaDesignSystem-DEMO｜FigmaDesignSystem-File Figma中的設計系統基礎 知名系統案例： AustralianGovernmentDesignSystem｜澳洲政府設計系統 AudiUISystem｜AudiUI系統 IBMDesignLanguage IBM’sCarbonDesignSystem GE’sPredixDesignSystem｜設計系統網站｜設計概念｜AtomicDesign原子設計方法 GoogleMaterialDesign UIICON｜圖像設計 Icon是人們對這款應用程式(APP)的第一印象，好的APP需有專屬的UIICON，短暫時間內該如何吸引人們的注意？可從色彩、造型、文字、圖像等元素設計出好的icon。

圖11：AUDIICON 延伸閱讀｜ Designinggreaticonsformobileapps 在UI設計中善用IconFont Fontawesome UI職場 ☪UI/UXDesigner工作內容： 參與產品Web/AppUI/UX與視覺設計。

製作wireframe，UIflow與Prototype。

前期與工程師/PM等相關人員配合，溝通合作進行產品/專案設計與發想。

與客戶展示和溝通設計理念。

加分：懂得設計表現，注重細節與完整性。

學期作業說明 APPorWEBReDesign改善方案 分組、資料搜集1.Userstory>2.FunctionalMap>3.FlowChart>4.UIFlow>5.Wireframe>6.Mockup>7.Prototype 期中報告｜APPorWEB提案，規劃、流程、Wireframe 期末報告｜APPorWEB完整提案，含前置規劃、DesignSystem、Mockup、Prototype ReDesig學長姐範例 RedesignPChome24hApp Behance線上發表 Figma報告包含設計系統、情緒版等｜ Figma報告原檔 Figma檔案原檔 Figma｜Prototype｜互動檔案 ReDesign主題｜PxPay(全聯支付)｜1085445013 期中發表 期中報告檔案｜網址：點我連結 WF整合流程檔案網址：點我連結 期末發表 [Behance]線上發表 [期末簡報]完整檔案網址 含期中簡報、情緒板、FigmaMockup｜精稿設計及DesignSystem｜設計系統、Prototype｜互動原型設計 [Figma]互動精稿播放網址 ReDesign主題：中國信託行動銀行HomeBank｜1081445083 期中發表 期中報告檔案｜網址：點我連結 WF整合流程檔案網址：點我連結 期末發表 [Behance]線上發表 [期末簡報]完整檔案網址 含期中簡報、情緒板、FigmaMockup｜精稿設計及DesignSystem｜設計系統、Prototype｜互動原型設計 [Figma]互動精稿播放網址 Behance期末作品展示 PX-Pay-APP-UI-Redesign 中國信託行動銀行ReDesign MOSOrderUIREDESIGN NITORI|UIREDESIGNPROJECT 博客來電子書-UIRedesign uniqloAPPUIdesign OB嚴選-UIRedesign ReDesign-QueenShopApp COSTCOAPPReDesignProject a.mart愛買ReDesign ReDesign範例 威秀影城-ReDesign-1：案例練習：改造電影訂票App 威秀影城-ReDesign-2：設計解說｜Prototype 屈臣氏-Redesign：屈臣氏台灣iOSApp之發想與過程紀錄 7-11-Redesign：7-11AppRedesign 誠品人-Redesign：誠品人-AppRevamped Labs2.0Web-Redesign：Labs2.0WebRedesign 課後作業 第一週作業： 請填寫使用者介面設計｜課前問卷｜ 註冊Figm｜FIGMA 註冊作業網站｜MEPOPEDIA 閱讀推薦連結的文章，開始進入UI的世界｜推薦連結 開始好好的逛APP與WEB｜並分析其優缺點 開始找合作的組員｜UI/UX需要團隊合作 開始找欲修改的主題｜認真思考使用是否便利？路徑是否卡關？是否符合需求？介面設計是否美觀舒適？色彩、字體、編排是否有整體規劃設計？什麼樣的流程與介面設計更符合消費者的需求？.....