技術 Day6. Figma(1) 教學介紹、繪製Ｗireframe

嗨～從今天開始就是Figma教學了！不知道大家對網頁設計是否有初步的概念了呢？今天會簡單介紹Figma及基本操作方法，再用穿插教學的方式帶著大家使用Figma繪...

技術 Day5. 網頁UI設計-Wireframe線框稿

到Day5啦！已經到個小段落了，那就再說明一下，這次的挑戰是以我的作品集為範例，分享給大家RWD靜態網站從頭到尾的製作過程，希望過了這30天你也能創造屬於自己的...

技術 Wireframe 製作

一個全面的設計流程：從初步設計到最終階段 草稿和低保真（Low-Fidelity）線框圖：初步構思並繪製基本界面。 回顧和反饋：收集意見並進行調整。 高...

技術 Day28【每天5分鐘】學前端 | 切版實作 HTML 篇

鐵人賽將近尾聲了～時間在不知不覺間也過得很快。 我們來切一個簡單的網頁吧！ Wireframe 配置 方框中間有叉叉 ： 表示 圖片 方框 ： 表示...

技術 Day27【每天5分鐘】學前端 | 切版前的 wireframe 線框圖

什麼是 Wireframe？ 雖然說 Wireframe 屬於 UI/UX 設計師的工作範圍，但前端工程師如果看不懂線框圖，就會不知道網頁該切成什麼模樣。 Wi...

技術 Day 6 - Wireframe 線框稿

Day 6 - Wireframe 線框稿 每日一談 嗨 ! 大家好，我是阿蘇不知不覺就來到了 Day 6 ，有沒有開始對 Side Project 有些靈...

技術 Day 2 給我一支筆雖不能舉起地球，但可以具象化想法！

前言 昨天釐清了需求，今天要來把想法具體化。到底在工程師拿到美美的設計稿前，設計師都下了什麼功夫呢？ 設計流程 把抽想的想法圖像化，大致可以分為三個步驟：...

技術 Day 16. UX/UI 設計流程之四： Wireflow，並以 Axure RP 實作 (下)

我們平常可能不太會注意到，ajax 網頁、APP 裡的每一個頁面，其實不是單一靜態的，而是伴隨著多種不同狀態。 想想看當我們在用 Line 傳訊息的時候，網路突...

技術 Day 15. UX/UI 設計流程之四： Wireflow，並以 Axure RP 實作 (中)

Wireflow = Wireframe + Flow ，上一篇理解了什麼是 Wireframe 之後，離更深入了解 Wireflow 就不遠了。 Wire...

技術 Day 14. UX/UI 設計流程之四： Wireflow，並以 Axure RP 實作 (上)

由於 UI Flow 一定程度上已經交代了操作流程會走過哪些頁面，接下來設計師就可以根據 UI Flow，把每個頁面的所有狀態、環節、動線都繪製完畢，便能夠...

技術 Day7. 使用 Whimsical 繪製低精度 Wireframe

製作低精度原型時，紙、筆、及便利貼是相當方便的工具，但許多人是手繪苦手，畫出來的線歪歪斜斜，實在很難專注在原型構建上。用紙、筆、便利貼的好處是不用花太多心思在工...

技術 [Day03 - 規劃與設計] 建立 Wireframe 讓你開發不迷路

如果不想要大家一起通靈通出一坨Ｏ，請不要偷懶做好規劃。我說那個Excel寫出來的功能列表也是不夠的，畢竟大家對文字的理解都不同。 一份好的匡線圖也可以做好聚焦的...

技術 【Day 06】設計流程環節：回顧篇

我們一起看過了在正式進入繪製之前的四個階段 ( IA 資訊架構 / Functional Map 功能地圖 / Logic Flow 邏輯流程 / Wirefr...

技術 【Day 05】設計流程 (四)：Wireframe 線框圖稿

IA 資訊架構 -> Functional Map 功能地圖 -> Logic Flow 邏輯流程 -> Wireframe 線框圖稿 本篇重...

技術 什麼是 Wireframe ?

Wireframe（線框稿）:用線條、文字、圖案去構成頁面，目的於確認每一個頁面的構成，呈現什麼內容、功能、結構。降低做好頁面結果不滿意要重做的重工狀態。 例:...

技術 Wireframe, Mockup and Prototype

之前在規劃雛型，都會用「真實感」的系統雛型期待客戶會被自己「以假換真」騙過去... 所以都會很追求版面的視覺爽度及效果，所以花很多時間在對齊、元件、很炫的效果...