Hahow:iOS入門課程心得

少數同時包含介面設計和程式開發的課程,全長10小時。


關於課程

iOS入門-從介面設計到開發,目前是線上教學平台Hahow唯一iOS課程,也是少數同時包含介面設計、程式開發的課程。

一般來說介面設計和程式開發,在我的印象都是分別開立課程較多,但想想對於剛入門的初學者而言,單一領域深度內容的需求或許不是最優先考量,能先走過整個流程是非常有幫助的。

作為設計師,可以了解原型圖在工程師手上是怎麼被完成,以及哪些規劃可以讓開發過程更流暢;作為工程師,也能知道原型圖是如何透過Sketch被繪製出來,多熟悉一個新軟體,說不定摸出新樂趣(?)

625分鐘的課程,我大約用一週上完。

但我並不是完全從零開始,關於iOS半年前就有開始在接觸,可以參考我之前的新手筆記初探Xcode 8Auto Layout,然後就沒有然後了…忘光光。


關於Sketch

介面設計教學是用Sketch,Mac上知名繪圖軟體,許多便於設計行動裝置介面的功能。

第一次使用有30天體驗期,因為我很早以前有下載試玩,所以直接購買才能繼續使用。看到網頁結帳畫面美金$99換算的金額是台幣$3,1XX,想著啊竟然超過三千塊了…

但刷下去後信用卡通知其實只有台幣$2,9XX,整個心情就很好!(連「真是調皮的網頁呢」這種OS都冒出來,我腦袋大概壞了吧)


Sketch基礎練習

剛開始會先學習Sketch基礎工具、練習畫出不同樣式;因為設計師可能需要先畫幾種介面和團隊討論溝通。

這部分就是各種排版、移動時還能看到距離隔壁元素幾px很新鮮,是充滿樂趣的環節,也體驗到Sketch輕量又強大的魅力所在。

其中物件群組化後的Create Symbol,雖然其他繪圖軟體有同樣功能,但第一次使用還是覺得很新鮮。概念是我們先畫出標的物,例如商標好了。之後不管出現在哪裡,只要我們一改樣式,衣服鞋子上的商標都會連動跟著改變,免除重複修改的負擔。

還有Grid Tool柵欄工具,做重複的動作很迅速,好比說想要三行兩列,只要點選指定標的物再打數字、就能瞬間完成,不用逐個複製貼上。

設計師的碎碎念跟堅持,不管是哪位老師都很有趣:「長度調成240好了」、「怪怪的還是260」、「好像太大了那就250」。


溝通的細節

課程進行到介面設計師跟工程師溝通的環節。

由於行動裝置尺寸各異,介面設計師會根據不同的尺寸大小進行畫面的微調,而圖片左、右雖然看起來差不多,但在工程實作的部分差距非常大。

圖左,設計師幾乎把畫面所有元素都調整過了,大頭貼、照片、字型大小、間距、icon尺寸,讓工程師需要根據不同尺寸全部微調上述的內容,增加許多繁複的工作。

圖右,設計師全部就只調整中間照片的尺寸而已,以相對少的變動讓工程部門在實作上也方便不少。

也提到新手設計師往往介面畫好就很開心的交出去,沒有注意到工程端可能有的疑問。比如說下面的文字敘述,如果字數太多,是要縮起來變成「…more」,還是照樣展開把下面的元素往下壓,在畫面上就看不出來要用哪種方法實作。


介面設計成果

前半部設計課程結束。

有的章節雖然只有30分鐘,不過觀看影片加上實作我花了差不多2個小時,挑圖真是件很開心的事呢。

除了繼續文字跟圖片排版外,還學到了Sketch裡mask的用法,像左上角大頭照,就是用圓形遮色片罩在方形照片上。

貼文方框,陰影做法也跟我想的不同,原先以為是點外框然後加上陰影特效,最直覺。沒想到是另外做一個較窄的長方形藏在底下加陰影,這樣比較有卡片般「浮」起來的視覺效果,陰影延伸到邊角前就收掉。

好像是流行的做法,但我第一次看到、覺得蠻新奇的。

還有照片右上角的白色愛心icon,為了避免照片該區域也是白色,加上了向外輻射的黑色漸層圓形,讓圖案的位置更加清晰。圓形的邊界用高斯模糊淡化、看起來較為柔和。

自己做過一次才知道畫面背後有這麼多細節,畫完有種幸福洋溢的滿足感~( ゚∀゚) ノ♡


程式開發成果

程式實作部分,就把前半段用Sketch做的圖刻出來。

過程難以言喻(汗)

有部分段落我覺得太長了,比如章節28就超過40分鐘,章節29接近40分鐘;加上按暫停實作、看不懂倒回看,會超過一個小時。

我是分幾次才把它看完,到個段落就切出去看漫畫補充精神能量、或是起身走走。

基於腦袋不太靈光的關係,比較長的段落我會另外做筆記、大概寫一下重點也加深印象。


成品:

包括類似Instagram的貼文牆,各元素排版以及每個貼文連接照片文字資料串接顯示,最喜歡的是點右上角愛心的特效動畫。

在個人資訊頁面,實作訊息通知開關;新增貼文的頁面,首次點選詢問使用者是否開放存取相簿權限,以及送出前針對文字和照片空白的檢查警示,接著送出後刷新主畫面、並讓新貼文置頂。

最後把檔案傳到iPhone進行實機測試,雖然不是第一次了,但看到出現在手上還是亂感動的。

逐漸模糊的視線中,也分不清楚是作品帶來的感動、還是因為挑選的漂亮照片而來嗚嗚。


如果以廚師做比喻的話,我正在熟悉廚房工具和做菜流程,目前已經可以煎出美味荷包蛋了;比較複雜的菜色做到一半還是會熊熊卡住偷瞄食譜。

接下來繼續挑戰500頁的《iOS 10 App程式設計實力超進化實戰攻略》,開始重拾消化去年收藏好多iOS開發相關資料。


後記

朋友對App領域比較陌生,看到我在學習有些疑惑,也和大家分享。

Q1. iOS APP,開發出來是只能在Apple行動裝置上使用嗎?

A1. 對喔!

Q2. 要服務Android系統,是不是要換系統重寫一次app?

A2. 是,Android跟iOS App工程師是兩種路線、用的程式語言不同;就像兩種路線的魔法師。

Q3. App有蘋果和Android版,就是用不同系統寫出兩種版本,對嗎?

A3. 對,背後是不同的程式語言。可以把App想像成是一首歌曲,為了唱出來,有些人會用注音標註、有些人選用羅馬拼音標註,最後都能詮釋出來。不同系統的App,就像不同平台的遊戲片,無法在非自己的系統上運行;好比PS4的遊戲不能在Xbox運行。


延伸閱讀

Udemy:iOS新手入門課程、我的iOS小遊戲開發心得

Pala

朝iOS Developer自學轉職中。紀錄過去兩年下班自學Python網頁設計Google Analytics分享;也推薦從架站、撰文到運營,首年12萬瀏覽的部落格心得;新文章是演算法與iOS動畫入門