iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 14
1
Modern Web

UI/UX/ProtoPie入門-喵喵設計師的學習日記系列 第 14

DAY 14-Daily UI 002 Checkout 實作分享(四)

  • 分享至 

  • xImage
  •  

這一篇會把剩下的 Artboard 做完,上篇的 VISA 完成了,今天繼續做 PayPal 的部分。用昨天的 Artboard 直接複製一樣的一個,滑鼠按著 Artboard,再按 option / Alt 就可以直接拖移出一個一樣的 Artboard。

那 PayPal 付款方式的部分也有參考網路上其他網頁或是 App 的設計,讓使用者在付款時有比較習慣熟悉的感覺。
https://ithelp.ithome.com.tw/upload/images/20181029/20112491pWADI02mjC.png

卡片的上方一樣放上 PayPal 的 logo,讓使用者清楚這是 PayPal 的付款欄位。為了讓卡片比較簡約、乾淨,就把填寫資訊直接放在填寫欄位裡,不僅讓畫面更簡潔,還有提示使用者該欄位要填寫何種資料的功能。填寫欄位都使用 PayPal logo 的標準色淺藍色,讓整個卡片有統一的感覺。那這個 Artboard 就完成了。
https://ithelp.ithome.com.tw/upload/images/20181029/201124914lbCnI5IPY.png

最後一個 Artboard 是要做訂單完成的頁面,想讓淺綠色的區域收上去會跑出一個完成的圖案。
一樣再複製一個 Artboard,把不需要的物件刪除,把淺綠色塊拉短,加上一個打勾的 logo,簡潔明瞭的讓使用者知道訂單已完成。
https://ithelp.ithome.com.tw/upload/images/20181029/20112491bJ6pf2j1RL.png

這樣整個購物車的頁面都完成了,下一篇會介紹這次要做 prototype 的軟體 ProtoPie,那我們下篇見囉,掰喵!


上一篇
DAY 13-Daily UI 002 Checkout 實作分享(三)
下一篇
DAY 15-ProtoPie 軟體介紹和檔案導入
系列文
UI/UX/ProtoPie入門-喵喵設計師的學習日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言