iT邦幫忙

2021 iThome 鐵人賽

DAY 4
1
Modern Web

30天打造品牌特色電商網站系列 第 4

30天打造品牌特色電商網站 Day.4 網站設計及Figma介紹

  • 分享至 

  • xImage
  •  

開始打程式前,網頁設計是不可或缺的環節!

網站介面設計,稱為UIUX設計
UI指使用者介面(User Interface)、而UX是使用者經驗(User Experience)
通常從發想、草稿,到後來線框稿(wireframe)繪製無顏色的介面、
進而做可點擊以上色的原型(prototype)
這些流程都是幫助團隊能往同一方向溝通、邁進

網頁設計的好處:

  1. 在琳瑯滿目的購物平台中獨樹一幟,且能展示品牌風格,進而增加客戶的認同感、信任感。
  2. 漂亮的設計,吸引目光,人是視覺動物,運用設計理論打造的頁面,增加點擊、繼續使用的機率!
  3. 完整的動線規劃,讓使用者在網站頁面間、頁面裡,操作上都得心應手,好用的東西,都會繼續用~

Figma

今天來已Figma做介紹及實作,
可以用瀏覽器直接打開、不需另外下載軟體,
能免費使用的功能非常完整,而且還有很多好用的外掛!

到figma.com網站
https://ithelp.ithome.com.tw/upload/images/20210918/20141820Xkd1ZwYQWn.png
先註冊一個自己的帳號

https://ithelp.ithome.com.tw/upload/images/20210918/20141820xvsHxAzVnS.png

登入後會來到檔案管理的頁面

左邊是檔案區域
分成最近的檔案、草稿檔案、也有Beta版的社群可以查看,
再來是不同團隊及團隊的專案,
最下面的“Creat new team“可以增加新的團隊。

中間是有一個檔案是Figma教你線框稿(wireframe)、原型(prototype)、團隊協作等初步教學,
可以瀏覽過一遍有基本的認識。

右邊可以選擇新增檔案的類型。

今天要用的是藍色的Design file這個類型,
紫色Figjam file是用來做心智圖、白板協作這方面的工具(現為Beta版)。


工作區域介紹

https://ithelp.ithome.com.tw/upload/images/20210918/20141820BB7swqsfX9.png

一建立完新的檔案,
上方一排的左邊有一些按鈕,
這些是繪製工具及選項列,舉凡匯入檔案、另存、輸出等等功能都能在這邊找尋找。
上方中間可以將檔案搬移到其他團隊、更改檔名。
右邊則會顯示正在看這個專案的人們,
以及分享這個檔案、執行這個檔案的活動畫面、目前畫面的縮合比例。

左邊區域分成Layers(圖層)、Assets(物件)、Page(頁),
圖層會顯示目前的工作區域及其物件的先後順序,排序越上面就會在工作區域上排得越上層,
Assets是這一頁可以共用的統一物件,假如你設計了一種按鈕後要用在整個網站,
就可以用這項功能複製,需要改也只要改一次就好了,
Page能建立新的一頁,如果有第二種設計風格可以用新的一頁區分開來。

中間是工作區域的地方,也就是繪製網頁頁面的地方!

右邊區域是物件的設計選項,Prototype能設計互動,Inspect可以檢視寬度、XY距離,
以及提供這個物件的樣式程式碼!

今天介紹到這邊,明天來一起著手開始第一個網站設計!


上一篇
30天打造品牌特色電商網站 Day.3 網站架構
下一篇
30天打造品牌特色電商網站 Day.5 Figma快速上手
系列文
30天打造品牌特色電商網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言