Akane老師UI 入門課程筆記：Wireframe、Mockup、Prototype

Wireframe 線框稿. “Akane老師UI 入門課程筆記：Wireframe、Mockup、Prototype” is published by corgi. GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWriteAkane老師UI入門課程筆記：Wireframe、Mockup、PrototypeWireframe線框稿用手繪或是電腦軟體畫出頁面雛形，一般線框圖可以由線框、無色但有灰度的方塊、文字、線條及箭頭構成。

在畫的同時把UserStory、FunctionalMap、FlowChart、UIFlow都放旁邊參考。

用途：網頁或應用程式的低保真原型。

去除所有視覺影響，用來確認將要顯示的頁面元素。

需要考慮觸發(ex:網頁的hover)、回饋(ex:點擊後出現下拉選單)、行為、狀態。

Wireframe(圖片來源：https://www.pinterest.com/pin/250372060521105938/)手繪的Wireframe(圖片來源：https://www.pinterest.com/pin/733875701756406167/)頁面的六種狀態理想狀態(IdealState)你最希望人們看到的狀態又稱最完美狀態最能發揮產品淺力的狀態設計畫面的其他狀態的基礎空白狀態(EmptyState)用戶第一次開始使用所有資料都清除後沒有資料可顯示時極限狀態(MaximumState)最小值(可能有負數)最大值(超過如何顯示)ex:Line未讀訊息顯示999+錯誤狀態(ErrorState)有事情出錯時畫面各種出錯的回饋局部資料狀態(PartialState)只顯示部份資料的時候引導使用者填完資料讓使用者預見理想狀態引起使用者的興趣，留住ex:給予使用者小獎勵載入中狀態(LoadingState)降低等待的不耐感系統回饋Mockup視覺稿畫好wireframe之後就是mockup，此階段決定頁面的視覺風格，並定義出UIStyleGuide。

像是dribbble、Behance這些網站上都是Mockup標示文件包含：尺寸、距離、文字屬性、色碼。

圖片標示元素包含：圖片類型、圖檔名稱、間距、座標、尺寸、透明度。

文字標示元素包含：字級、字體、色碼、字距、行高、透明度、樣式。

除此之外對齊方式、濾鏡(CSS)、邊框樣式也需要標示出來。

UIStyleGuide(圖片來源：https://bashooka.com/inspiration/40-great-examples-of-ui-style-guides/)Prototype原型是指可被操作且動態的原型，目的是模擬使用者與介面之間的互動，例如說按鈕按下後會出現的操作方式與呈現等。

簡單來說，就是模擬一個產品完整的體驗。

老師推薦製作prototype的工具：Hype3、Principle、invision、POPappPrototype、Mockup、Wireframe區分方式--MorefromcorgiFollowLovepodcastsoraudiobooks?Learnonthegowithournewapp.TryKnowableAboutHelpTermsPrivacyGettheMediumappGetstartedcorgi61FollowersFollowMorefromMediumMitushaArya5benefitsofhavingamentorinyourUIdesignercareer🚀JuneChoHOMI — AUIprojectMcKinleyRiceBlogsHowtoCreateaNeumorphicDesign(SoftUI)inAdobeXD?WahibIrawan7MostCommonMobileUIScreensHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable