iOS APP 程式入門課程紀錄

Intro

開始了為期一個月的 iOS 程式入門課。

為什麼要報這個課程?一來是有自己想要做的東西,雖然我知道不太可能上完入門課就會做,但至少可以拉拉畫面呀,或是寫一些簡單的 code XD;二來也是想參考一下講師們的授課方式,看看自己有什麼待改進的部分 XD

因為這堂課有一些回家作業,所以就決定統一整理記錄在自己的部落格啦,以後等作業愈來愈多,再採用分頁截斷,現階段就統一放在這篇文章裡 😊

利用 pop 做一個 prototype app,並分享 GIF

POP 是一個很簡單的 prototype 工具,利用拍照就能將紙本的畫面流程化啦~

先簡單的做了一個首頁跟另外兩個流程:

作業提到要做成 GIF 檔案,所以就用 Quick Time Player 錄好影片,再用 Gifrocket 轉成 GIF 圖檔 (瞬間覺得以工具繁雜程度來說:UI/UX > Front-end > Back-end 阿,後端出身的某人一定覺得很阿雜 XD)。

⬇️ 以下是 GIF 檔案

製作一頁漂亮的 App 畫面,分享在 GitHub

作業還有提到要做成 GIF,但我這一頁根本也沒啥動態,也還不知道怎麼用 Xcode 換到下一頁,所以就省略不做 GIF 啦

雖然題目說要「漂亮」,但我做了一個一點都不漂亮的首頁 😓

⬇️ 輸入框的 border 真是糾結了我大半天啊!好想直接下個border-bottom: 1px solid #ccc之類的 CSS 語法讓他變漂亮 XD,看了一下 stack overflow 的討論,好像都要寫 code 才能改掉,可惡我還不會寫 swift 啦 😢

⬇️ 另外一個糾結點在於,我要輸入 Mail 的時候會跳出鍵盤好棒棒,但是我不知道怎麼讓他消失啊 😂。還有密碼也是明碼更糾結我 …,根本是做了一個畫面就有千千萬萬個問題啊(炸)

閱讀 The iOS Design Guidelines 並撰寫心得

作業提到的 Guidelines 網址為:http://iosdesign.ivomynttinen.com,看到一半查了一些資源,才發現他好像不是官方的東西 XDDD,所以沒有中文版可看 😄

這份 Guidelines 有種「你要設計 iOS APP,就必須按照我規則」的 FU,蘋果真是無時無刻都很鴨霸呀~

如果以我做的首頁舉例,現階段會參考到的規格大概有:

  • Resolutions and Display Specifications
  • App Icons
  • Typography
  • Color Palette

重要的 UI Elements 倒是還不需要參考,因為我根本不知道怎麼到下一頁,半個元件都還沒使用到 😂

第一堂課程心得

我學到一個很不錯的觀念,就是大概知道 @1x, @2x, @3x… 是怎麼來的?以及為什麼要這樣設定?除了做 iOS app 需要之外,在 RWD 的世界裡也需要這個東西(總之一切就是為了鴨霸的蘋果 again)

簡單來說,蘋果自己定義了一個叫做pt的單位,而這個 pt 跟我們以往認知的網頁 pt 單位不同,所以以前我在讀文章的時候一直百思不解的原因就在這裡,上課的時候終於解惑惹 XDDD

而在這個pt的空間裡,可以容納多個px。如果是非 retina 的螢幕,圖片尺寸就是 1:1,即俗稱的 @1x,可以想像成在 1pt 的空間裡,容納 1 x 1 pixels 即可。

依此類推:

  • @2x 就是在 1pt 的空間裡容納 2 x 2 pixels
  • @3x 就是在 1pt 的空間裡容納 3 x 3 pixels

課程簡報有一張畫得很清楚的示意圖:

以及可能是圖片來源的網站(雖然我點進去沒看到這張圖 XD")

以上是第一堂課的作業與課程心得,打完收工啦 😊😊😊