使用者介面設計｜期末發表說明

ReDesign學長姐範例 使用者介面設計講義 Userinterfacedesign，UI 首頁/使用者介面設計講義 UserInterface使用者介面設計｜期末發表說明 期末發表說明 Behance｜Figma整合參考檔案 Behance發表說明 範例參考 ReDesign學長姐範例 使用者介面設計｜期末發表說明 期末作業｜製作說明 將本學期的UIReDesign設計，做一整合，將之設計為一專業線上發表之呈現，使之成為可公開展示、說明、介紹的UI設計(使用者介面設計)作品，並可直接成為UI作品集。

綜合期中作業內容：1.主題分析、2.動機與目的、3.使用者介面現況（現有APP截圖分析）、4.擷取APP評論頁面，整理評論、4.擬定問題及修正方向、5.用戶分析、6.競爭者分析、7.流程修改提案、8.流程圖｜架構圖、9.Wireframe提案。

並結合期中作業內容以及期中後內容：情緒板、Mockup精稿設計、DesignSystem設計系統、Prototype互動設計等。

取其精華，將之加入風格元素，彙整本學期製作與設計之內容，製作成完整作品發表設計。

於專業設計平台Behance上發表。

回覆於：110-2期末作業回覆區 參考學長姐範例： 109-2北期末作業回覆區、109-2竹期末作業回覆區論壇發表，包含線上平台發表網址、Figma設計原檔網址等，並發表本學期製作心得。

［期末作業］製作進度 第十三週：開始製作Mockup，以及色彩樣式、文字樣式、組件等。

第十四週：製作Prototype、Mockup精稿與設定DesignSystm設計系統。

第十五週：互動式精稿、製作發表頁面於Behance 第十六週：期末報告｜發表於線上平台，並回覆於論壇 第十七週：期末報告｜發表於線上平台，並回覆於論壇 第十八週：期末報告｜於Line群組公布成績，檢視期末成績與最後修改（全部報告完之後） FigmaPrototype互動設計｜Behance線上發表說明｜上課影片 Behance｜Figma整合參考檔案 練習用Mockup 以下提供練習發表用之精稿設計。

MindfulnessandMeditationAppUIwithIllustrations使用Blush在您的設計中創建和自定義插圖。

Blush(搭配上面範例應用插畫外掛)使用Blush在您的設計中創建和自定義插圖。

DaresayMobileUIKit BankAppiOSUIKit Behance發表檔案 MallikaUIKit MallikaCookbook-FreeUIKit FigmaAnimationTemplate BehancePresentationTemplate Donner-ADonationApp FooddeliveyappUI Fooddeliveryappdesign,Checilfooddelivery FooddeliveryappUikit Stream-FinanceUIKit StreamMobileAppDesign MockupDevice裝置載體檔案 Presently 提供30多個免費UI模型，可將Mockup輸出為圖檔，將模型使用圖檔填充方式；或直接右鍵複製png，貼上（Ctrl+V）即可使用。

FreeFigmaMockups AlliPhonesMockups AllVersioniPhoneMockupwithspecs:iPhoneSE,6,7,8andX DeviceMockupsLibrary(100+devices!) MajesticWireframeKit-Free CreditCardCheckoutIphoneFrame Mockup外掛套件 Masker 使用Masker，您可以輕鬆地將設備覆蓋在項目中選定的圖層上。

ClayMockups3D｜使用3D模型樣式的設備模型創建模型。

為您的模型自定義顏色，相機角度和設備模型。

包括適用於iPhone11，Pixel4和MacbookPro的型號。

Vectary3DElements｜Figma的Vectary3D插件可在此處為2D設計添加缺少的三維尺寸。

將您的Figma設計放入預定義的3D模型中，或加載自定義3D元素以增強設計。

Prototype補充 Figma範例練習檔｜FigmaTutorials-SmartAnimatePrototyping Figma範例練習檔｜FigmaPrototypingHack-ExerciseFile Figma範例練習檔｜9SmartAnimateExamples Figma範例練習檔｜FigmaSmartAnimateTutorialbyFerdiCildiz Figma範例練習檔｜HackingPrototypes Figma範例練習檔｜Microinteractions-Prototyping 使用者介面設計｜Behance發表說明 Behance發表步驟 先將要呈現的畫面，加入風格元素，彙整本學期製作與設計之內容，在Figma或illustrator做一設計與統整，分別輸出成圖檔（jpg或png）。

選擇欲輸出的Frame框架，使用右側的Export輸出按鍵，將畫面輸出成圖檔。

在Behance上註冊或登入Adobe帳號，即可發表。

登入後，選擇上方『建立專案』開始建立UI作品集。

選擇上傳檔案，上傳第一張圖檔。

接著在其下方，上傳第二張圖檔，會發現圖與圖之間有空隙。

選擇左側『編輯樣式與版面』，調整圖片間距為0，圖與圖之間則無距離，緊密貼合。

預覽無接縫的形式。

圖與圖之間也可以插入文字，形成部落格圖文並茂排版。

若要選擇圖文並茂排版，可再度使用『編輯樣式與版面』，調整圖與文字的間距，及其他設定，使畫面閱讀更為舒適。

可於Figma，選取互動分享，並選取複製崁入語法選項。

貼入語法選項，即可呈現互動模式。

最後點選儲存，及完成專案的發表，將網址回覆於論壇，即完成期末線上發表。

使用者介面設計｜期末範例參考 可參考：Behance以及Medium等設計發表平台之作品，並於平台註冊，將之作專業發表。

插畫為主的APP CaseStudy:ABetterWaytoHandleYourMoney｜以黑白為主色彩簡潔的插畫風金融APP KodaAppConcept FoodOrderingSystem-UI/UXCaseStudy｜外送服務APP 以女性為主要對象到插畫風格APP 色彩為主的APP MobileAppforMuseums｜優雅的博物館APP Okkocinema-redesign.UX&UIstory｜具有強烈對比色彩的影城APP SophieMessagingappuikit｜訊息APP YogaAPP｜女性柔性漸層色調瑜伽APP XARA'SKITCHEN-FOODAPPCASESTUDY｜以明亮黃色為主的餐廳APP 粉嫩色彩的果汁APP 以產品或圖片為主的APP MaynoothFurnitureWebsite&Appdesign｜風格優雅的家具網站及APP RecipeAppUXCaseStudy｜食譜APP EMask口罩預購APPReDesign案例 ReDesig學長姐範例 RedesignPChome24hApp： Behance線上發表 Figma報告包含設計系統、情緒版等｜ Figma報告原檔 Figma檔案原檔 Figma｜Prototype｜互動檔案 ReDesign｜MUJIpassport： Behance線上發表 Figma完整原檔 ReDesign｜星巴克STARBUCKSTW： Behance線上發表-1055445017 Figma檔案-1055445017 Behance線上發表-1055445056 期中發表-簡報 期中發表-Figma-Mockup-Prototype互動 ReDesign｜電影時刻movietimeApp： Behance線上發表-1055445135 Figma報告包含設計系統、情緒版等｜ Figma報告原檔 Figma檔案原檔 Figma｜Prototype｜互動檔案