iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 27
1
Modern Web

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

DAY 27-Daily UI 007 Setting 實作分享(三)

  • 分享至 

  • xImage
  •  

今天會把最後的 Artboard 都分享完,那第三個 Artboard 是點開 link 選項的頁面,可以增加或關閉社群平台連結。

一樣把上方的 Settings 複製過來,打上可以連結的社群平台,最常看到的就是 Facebook 或是 instagram,然後我還有加上 Pinterest 。
https://ithelp.ithome.com.tw/upload/images/20181111/20112491oKghgyXoma.png

加上隔線分開選項,後面也加上切換按鍵,這樣可以讓使用者快速設定要不要顯示或隱藏社群平台的連結。
https://ithelp.ithome.com.tw/upload/images/20181111/201124918xUCPk8GMS.png

最後在最下面的切換按鍵下面加上加號的 icon ,讓使用者可以自由的新增其他社群平台的連結。
https://ithelp.ithome.com.tw/upload/images/20181111/20112491qV2H0VyfF5.png

那第四個 Artboard 就是模擬點擊新增其他社群平台連結按鍵的懸浮畫面,所以直接複製第三個 Artboard,在上面蓋一個模糊背景的灰色色塊當懸浮畫面的底。
https://ithelp.ithome.com.tw/upload/images/20181111/201124917TG75MicCb.png

拉一個白色色塊作為懸浮畫面,打上其他可以連結的社群平台。
https://ithelp.ithome.com.tw/upload/images/20181111/20112491ZyZdRrB43t.png

最後在每個社群平台前都加上各自的 Logo ,都改成藍色統一風格,最後再加上隔線就完成了!
https://ithelp.ithome.com.tw/upload/images/20181111/201124918Lqrgi4L9u.png

明天一樣會進入prototype的分享,掰喵!


上一篇
DAY 26-Daily UI 007 Setting 實作分享(二)
下一篇
DAY 28-Daily UI 007 Setting 實作分享(prototype)(一)
系列文
UI/UX/ProtoPie入門-喵喵設計師的學習日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言