Share This Post

進入軟體開發的前置作業

  1. 確認需求(流程、畫面(功能性,無美觀、內容))
    • 用wireframe向客戶展示、確認功能
    • draw.io
    • balsamiq
    • figma

wireframe工具=>draw.io,balsamiq,figma

UI圖工具 => Figma, Adobe XD, Sketch

Figma

  • brain storming
  • 心智圖
  • User flows
  • ui design
  • prototyping
  • handoff
  • design systems
  • versioning

協作

可以與工程師以web的形式共用檔案,無須額外下載其他應用,並且使用tag功能可以在協作上可以更快得到回應。另外,sketch若是要與他人共用或合作,需要額外輸出成其他檔案。

註釋

使用sticker撰寫需要修改的部分,並可以使用tag功能標記關係人,最後可標記已完成sticker事件。

plugin

Figma中可以安裝許多插件,包含去背,統一文字修改,可以到community中尋找plugin,以下列舉部分課程中提及的插件

  • Lorem ipsum: 當客戶還沒想到文稿時使用,生成假文字
  • remove BG : 移除背景
  • Iconify : 插入icon

community

具有強大的community,有大神或官方的協作者製作UI,能夠直接複製貼上即開始實作,像是iphone瀏海、home。

figmajam

整合brainstorms, meetings, diagramming等形成一整套,其中包含許多類別的template。

使用figma

建立Frame

  • 點擊左上Frame可以新增一個畫面,或是右邊可以選擇iphone等預設畫面

方塊位置

  • 在Frame中加入方塊,右邊十字方塊可以選擇物件定位(例如垂直置中、靠左)

Component(右件物件,選Create Component)

如果有重複的物件建議使用Component,這樣只要修改母物件,子物件就能跟著修改,但母物件不會覆蓋已修改過的子物件。

快捷鍵

  • alt +拖曳物件 可以複製

fill

  • 定義自己的style
create color style

inspect

點擊右上角inspect會有頁面資料可以參考

輸出

design頁面 滑到最下面export
輸出

設計guideline

  • android有其guideline,iOS有其guideline
  • material UI
  • guildline可養成使用者習慣

Material Design

Ant Design

訂閱研究文章

Get updates and learn from the best

More To Explore

Scroll to Top

hurry up !

軟體工程師培訓

限時免費報名中

藉由與「真實世界軟體專案」相同的技術、工具與開發流程,化簡成與商業機密無關、門檻較低更容易上手的「模擬專案」,讓你有機會在職場前輩的陪伴下,完成真槍實彈的練習,動手解決真實的問題,快速累積個人的經驗與作品,而不只是「學習技術」而已。