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

視覺稿（Mockup）：視覺稿在線框圖的基礎上添加顏色、字體、圖像等視覺元素，用於展示網站的外觀和風格。它著重於展現企業或品牌的形象和主視覺。在視覺稿階段 ...

在畫好Wireframe、定版後，就可以依照線框稿內容製作Mockup 了。Mockup 有很多種說法，我當它是視覺稿，所有跟視覺有關的部份都會在這個階段產出。

Step1：開啟畫布 · Step2：尋找合適的頁面框架 · Step3：製作缺少的頁面區塊 · Step4：確認文字所放的區塊 · Step5：調整網站整體的細節 · Step6：換上自己的網站素材.

當進行線框稿的製作時，可以先規劃一些共用的元素。到原型階段時，就可以更輕易的針對這些元素做設計了。 · 確保線框稿做完後，需與關係人與團隊成員討論，在得到回饋後進行修改 ...

建立路徑和形狀的速成秘訣. 若要為向量影像建立路徑，請置入一系列區段和錨點。關閉路徑，將其轉換成形狀。 若要建立可縮放到任意大小的平滑形狀，請微調錨點 ...

第八天！今天要繼續Figma教學，接下來會先設定好視覺稿尺寸，再依據前面繪製的Wirefame並結合在Day4確定下來的網站風格、用色，忘記的可以回去複習。

Mockup 視覺稿. 畫好wireframe 之後就是mockup，此階段決定頁面的視覺風格，並定義出UI Style Guide。像是dribbble、 Behance 這些網站上都是Mockup.

線稿是一種基本視覺介面規範，描繪介面的架構，還有頁面之間的關聯性。線稿是被用來定義專案的架構、內容與功能的藍圖。在任何設計視覺化工作開始前先創建線稿， ...

建立自訂樣張範本 · 選擇要使用的影像，並在編輯器底部輕觸「 效果」。 · 點選「 應用程式」，然後選擇「模型」。 · 選取Create Your Own Mockup ，然後等待Canva分析相片，並找出 ...