iT邦幫忙

2024 iThome 鐵人賽

DAY 6
0

補充說明:Wireframe 是什麼

前一篇提到一個概念「Wireframe」(中文稱:線框圖)是一種常見的設計溝通工具
由 UX 設計師產出(若無專業分工,有時會由 PM 出),只會以線條和方塊標示各元素的排列,用以呈現網頁、App 的架構,以及決定內容的層級,對於設計們來說是產品設計中重要的一環。

🙌 一個好的 Wireframe 和討論過程也能讓設計在 Wireframe 定稿後不會再有大幅度的變化!

為什麼不直接出 UI 精稿?

Wireframe 通常以黑白呈現,且不能出現過度的細解,甚至越醜越好!以此避免過多讓人糾結、和干擾的可能,分散了利害關係人的關注點。因此,除了透過設計軟體工整的畫出,也可能是在會議中直接拿紙或白板上快速畫出的產出。
wireframe

同時,談需求過程中容易反覆,設計師不會直接出到請前端切版的完稿(UI Mockup)(下圖右邊彩色圖)。
避免工程師們誤會 「應該可以開工了吧?」!
wireframe vs ui mock

如何參與 Wireframe 的討論

  1. 積極參與:在討論過程中,隨時提供反饋和任何意見,如果能指出潛在的問題和建議就更好了!
  2. 保持開放:保持開放的心態,接受來自不同專業背景的建議,共同完善 Wireframe。

Wireframe,是設計師和工程師之間溝通的橋樑,更是成功專案的基石!


上一篇
[Day5-討論階段] 參與草稿(Wireframe)的討論,之後會更好做事!
下一篇
[Day7-討論階段] 拒當通靈王!請設計師出 Demo(Prototype)吧!
系列文
【前端工程師&UI 的 30 天約會】戰勝猴子!:Figma 交付實戰篇30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言