製作一頁精美的 App 畫面-模仿9gag App

作業說明: 模仿現成的 App 畫面,或發揮設計的浪漫血液,製作設計一頁精美的 App 畫面。

我選擇模仿的App是舒壓搞笑圖文網站9GAG的官方App, 原本只有想說做登入頁面,結果越做越覺得有趣就多做了幾頁:P

登入頁面:這頁很單純就是view controller中插入image view元件當作背景,只有再用到label加入文字還有button 加入試用還有登入兩個按鈕。
Button有用到講義上製作圓型按鈕的keypath:layer.cornerRadius 把邊邊變成圓角。

value數字越大腳越圓

首頁:按下Try it now 的按鈕後會到Home頁面,這頁是table view controller。Hot, Trending, Fresh那列在官方App中是向右向左滑來操控,我在這邊用button取代,做個樣子而已。
主要的圖片up vote, down vote, comment and share 區塊是直接截圖用image view元件加到table裡。頁面中有加入tab bar controller連結到其他頁面。

下列的tab bar controller圖示跟元App不太一樣,是從講義上給的免費圖示網站中找類似的加上去,再把bar 改成黑色的。

搜尋頁面:這頁我掙扎了一陣子才做出來。我原本是用view controller,上半頁插入image view元件,下半頁插入table view元件,做成上半頁固定,下半頁滑動選單的頁面。但殊不知table view 只能加在table view controller 頁面中,只好從頭來過。搜尋欄是把search bar 元件加入table的第一列中,再從右邊介面編輯顯示文字。

改搜尋欄上顯示的文字

影片頁面:這頁是image view controller 加上一堆button 還有label元件。影片的截圖和敘述是在youtube上隨機找的。做這頁時的新發現是label背景色在選色的小視窗中可以調透整明度。

選擇label元件後點background跑出來的colors視窗有opacity欄可以調整透明度。

通知和會員資料頁面:最後的兩個頁面都是要會員登入才可以使用,我是借別人的iphone參考畫面做作業所以就沒有登入了。在image view controller 上加入label還有button就完成了!頁面上方的標題是navigation bar 元件。

完成後的main storyboard:

測試影片:

心得:在選擇要模仿什麼App的時候突然覺得咦?才學兩堂課就可以做出很多App的介面了嘛!信心大增XD 
真的動手做之後才發現其實一個看似簡單的App背後藏了好多眉眉角角!
每做一頁都要回頭看看講義或是google一下,而且現在接觸到的還只是最簡單的前端頁面設計而已,背後的技術一定更高深。要能夠自己做出實用的App還有一段很遠的路要走!

加上iphone外框

Github連結