iT邦幫忙

2023 iThome 鐵人賽

DAY 7
3
SideProject30

用 React 和 Firebase 打造一個完整 side project 吧!系列 第 7

Day07:使用 Wireframe 線稿拼接網站的功能與畫面(一)

  • 分享至 

  • xImage
  •  

在本系列文的第二篇「用最短時間完成 side project 規劃」中有提到,我認為規劃一個作品,一定要先將 Flow Chart 確定、且資料欄位也規劃好後,再開始繪製網頁線稿、進行後續開發,這樣的方式可以避免功能遺漏或邏輯錯誤。

目前進度是這樣的:Flow Chart → 資料欄位設計 → 繪製 Wireframe

Wireframe 工具介紹 — Whimsical

首先要介紹內文中會使用到的 Wireframe 線稿製作工具,我選擇使用的是 Whimsical 。有些人可能會好奇,現在主流不是使用 Figma 嗎?是的沒錯,但因為我不是專業設計師,主要也想將此次 side project 系列文從構思、前端、後端到部屬的內容都能平均分擔篇幅分享出來,所以在這樣的規劃中,我認為 Whimsical 是很適合我現階段需求的線上編輯工具,它很容易上手、基本規劃工具跟組合功能很直覺、常用的 icon 圖標或網頁元件也都足夠使用。

Wireframe, Mockup 和 Prototype?

另外,有三個名詞的差異性我也想稍微提及,這也是在開發 project 時很基本的認知。順序依左至右,通常會先使用 Wireframe 進行跟客戶或 PM 間的溝通,確認是否有遺失的流程、所有想要的功能都有在上面,後續才請設計師延續做出有介面風格一致性且高還原度外觀介面,並依照按鈕功能、頁面切換製作 Prototype,通常前端工程師拿到的就是最完整的 Prototype啦,簡易整理表格在下方:

比較值 Wireframe Mockup Prototype
簡義 網站藍圖 較高保真的外觀 完整有功能的模型
目的 溝通架構、提早得到回饋 有設計 有設計、動態效果等
工具複雜度 較低 較高 較高
是否有功能
所需時間 最短 中度 最高

Wireframe vs mockup vs prototype: What’s the difference?

預約平台的 Wireframe 線稿

首頁的主功能按鈕—搜尋按鈕

https://ithelp.ithome.com.tw/upload/images/20230922/20140920yhmlAz0mgW.png

首頁的主功能按鈕—漢堡選單按鈕

https://ithelp.ithome.com.tw/upload/images/20230922/201409202HRvJ5Netu.png

好的,畫線稿其實很花時間,明天再讓我繼續努力吧!


上一篇
Day06:依照 Firebase 數據庫規劃專案資料欄位
下一篇
Day08:使用 Wireframe 線稿拼接網站的功能與畫面(二)
系列文
用 React 和 Firebase 打造一個完整 side project 吧!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
JCY
iT邦新手 4 級 ‧ 2023-10-16 00:39:33

謝謝妳的這篇分享

讓我在比賽中途回去檢討了使用者操作體驗的問題

獲益良多~

Annie iT邦新手 1 級 ‧ 2023-10-17 19:36:06 檢舉

不客氣,使用者體驗是很專業的領域,我也還在努力學習

我要留言

立即登入留言