iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
自我挑戰組

來寫看看app好了! Swift探索之旅系列 第 17

Day#17 基本功能=直覺的畫面

  • 分享至 

  • xImage
  •  

前言

最近寫不熟的語言覺得有點累,想看看ios的其他相關技能。
同時也在思考一份完整的專案需要的前端畫面是否可以靠自己來設計。想到約莫一週前寫的使用者體驗,今天想再來研究一下最近開發的註冊/登入畫面。
希望將功能開發完善後可以逐漸調整前端成想要的樣子。

I'm 免費仔

決定了要先做流程,欲善其事必先利其器,本來想說都要開發潮潮的iOS了,就要用自家的sketch呀。

而且加上我許久前買了Hahow的課程iOS 入門 - 從介面設計到開發殊不知我到現在進度還是只有27%,果然買了線上課程跟side project一樣,做完第一步就成為dead thread :cold_sweat:

總之,Adobe XD有提供免費版,功能基本、輕量,不過已經算很完備了! 為了上手,我參考Udemy上面的免費課程How to Design & Prototype in Adobe XD,這真的很推薦,從製作prototype的過程很完整的介紹所有功能,還有帶到一些快捷鍵。

Wireframe

開啟畫面如下,可以直接開一個iPhone12,或任何行動裝置大小的專案。

Adobe XD初始畫面

登入

非常隨便的先將專案就取叫Double Date。不是想抄襲...但我真的先想不到別的名字QQ
雖然在pinterest上研究了一下登入/註冊的頁面長怎麼樣,但後來覺得如此==基本的功能應該設計的直觀,以及不需要使用者花費額外的心力去理解畫面、或是學習如何互動。

個人覺得這樣的介面還算直覺。也提供了忘記密碼、顯示密碼等的功能。

然後底下的使用條款就是放了覺得好像很潮。

註冊

這邊的介面差不多,比較需要注意的是couple code。第一天有提到第二個人在註冊的時候需要輸入這個號碼,將兩個人資訊連結在一起。

結語

到目前為止,Adobe XD使用起來我覺得一切都很直觀,只是需要一些時間把畫面刻出來。

未來展望(?)

後來有發現一些可以修改,或是需要修改的...

  1. email/password等提示字會直接寫在輸入格當中,而不是輸入格上方
  2. 現在只有拉非常粗略的區塊,但並沒有考慮iPhone nav或是瀏海等元件
  3. 因為視覺與Logo都還沒有設計,各個區塊大小與邊界框線效果都需要另作設定

...這樣講好像代表未來的UI會跟現在大相徑庭呢。

若上述內容有誤或任何指教,歡迎留言~謝謝!


上一篇
Day#16 Database manager
下一篇
# Day#18 設定、上傳照片與default值
系列文
來寫看看app好了! Swift探索之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言