朱冠穎
海大 SwiftUI iOS / Flutter App 程式設計
4 min readApr 10, 2018

--

電子書APP — 冰與火之歌

這是一個爾虞我詐以及愛恨情仇的故事。

寒假的時候因為無聊接觸到美劇「冰與火之歌」,後來不小心看完全部七季的影集。所以趁著對影集的熱情趕快把它做成精美的電子書APP吧!

總共分成兩個架構展示,一個是角色家族的人物關係簡介。另一個是讓懶人輕鬆看完大大意的故事大綱。透過運用簡單的tab controller 和scroll view的搭配就是一本能在行動裝置上閱覽的書了呢!

這個頁面主要用tab controller將四個家族及相關派系分別切開,可以看到有史塔克家族、蘭斯洛特家族以及塔格利安和拜拉席恩家族。進入介面就可以把他們祖宗十八代看光光哦哦哦!

點選角色後可以看到每個角色的簡單介紹,背景是角色在劇中所生長的圖片,所以每個家族的背景都是不一樣的(有人在比較寒冷的寒冷極地、有人在溫暖的熱帶)如此的效果讓使用者更能身歷其境,彷彿自己就活在劇中的世界。

有些角色的生涯可能比阿嬤的裹腳布還臭還長,這時候我運用到了scroll view 去包裝他,這樣效果的好處是,使用者可以用一個舒服的大小去觀看角色的生平。(給小孩看可以顧眼睛,給老人看不用擔心老花哦!)

其中家徽的地方我有特別用圓角的設計,如此以來看起來就很像一個大圓形的標誌飄揚在自己的城堡,想像一面圓形的旗幟高高插在每個家族的景色,很壯麗的。

可以看到從起始頁面到角色的名字,我有特別用”centaur”這個字體去包裝,選擇這個字體是因為我想要營造一種史詩壯麗的感覺,這個字體會增強體驗的感覺可以想像千兵萬馬簇擁而上,槍茅相向血流成河的景象,讓使用者更能想像。

每個家族的配色有暖色系或冷色系的差別,我在這塊也特別構思出能夠代表家族的顏色,像是獅子的熱情、冰原狼的孤寂等等。顏色也會影響使用者觀看心情的一部分!

下面的選擇item我用mac內建的特別符號(獅、鷹、鹿、龍)等等的動物去取代,讓使用者更一目瞭然想要選擇的頁面。

home鍵的設計方便使用者可以更快的切換回主頁面,方便使用(雖然這個方法可能需要考慮其他硬體效能)。

最下面一個cell我有用不一樣的顏色標示起來,就可以讓使用者知道這已經是最底部了,貼心的小設計不可少!

這一頁主要的目的是讓使用者觀看濃縮好的4200分鐘的內容。透過背景單純活潑的配色可以讓更輕鬆的閱讀,品嚐全劇的內容,領略每一個史詩劇情的小細節。

連接的方式就比較簡單,透過普通的navigate和button做連接每一季的內容,使用者可以按“>>”鍵或back鍵去自由閱覽,“>>”這也是Xcode提供的符號。

廣告一下,冰與火之歌的第八季(最終季)會在2019的春季釋出,這已經讓影迷期待一陣子了。使用者如果按下coming 2019 就會切回本來的主頁面,這也是方便使用者的設計之一。

總結來說,比較花時間的是架構的設計。對於每個設計都需要有人性化的設計。其次是配色的美感了,必須符合內容的背景去做適當的配色需要花蠻大一塊時間的。大量的練習view和tab之間的運用讓我更熟悉IOS的運作方法,即使我沒有用IPHONE也能對這套系統有更熟悉的認識。

--

--