iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 26
1
Modern Web

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

DAY 26-Daily UI 007 Setting 實作分享(二)

  • 分享至 

  • xImage
  •  

今天換分享第二個 Artboard ,這一頁是做 personal information 的細項設定。

上面的 setting 部分一樣保留複製過來,細項的設定也做分類,所以先打上分類的大標,這邊是基本資訊的部分,字一樣用藍色區分。
https://ithelp.ithome.com.tw/upload/images/20181110/201124915TknZvsMuk.png

那可以思考一下基本資訊會有什麼內容,也可以參考其他的 App 或是網站,把整理出來需要的資訊打上來。
https://ithelp.ithome.com.tw/upload/images/20181110/20112491jqmc4orguo.png

接著也把其他類別的資訊和內容也都打上來,再加上隔線。
https://ithelp.ithome.com.tw/upload/images/20181110/20112491Wyuho4E3tC.png

那因為要模擬有打資料的樣子,所以也把資料都填上去。
https://ithelp.ithome.com.tw/upload/images/20181110/20112491SCbPF2794y.png

然後抓第一個資訊來模擬正在輸入的樣子,所以在第一格輸入格的輸入內容後加上游標,顏色用跟標題一樣的藍色,隔線也改成一樣的藍色,示意提醒使用者正在輸入此格的資訊。
https://ithelp.ithome.com.tw/upload/images/20181110/201124916ij9cq7mtI.png

然後要加上鍵盤,鍵盤的部分可以用XD裡有提供的插件,從file的地方可以找到Get UI Kits,裡面會有其他裝置的插件都可以使用,點選會跳到網頁頁面,下載打開就可以使用了。
https://ithelp.ithome.com.tw/upload/images/20181110/20112491jB4NURmJfF.png

那這邊就選擇適合的鍵盤複製過來就完成了!
https://ithelp.ithome.com.tw/upload/images/20181110/20112491Cd26COpufo.png

那第二個Artboard就分享到這,下篇見囉喵!


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

尚未有邦友留言

立即登入留言