【多圖】設計原理大揭秘！教育類榜首App的UI怎樣做?
事隔一段日子，我們又回來和大家分享App了。這次要介紹的是一個教育類別的App。它在iOS上架不足24小時，已經榮登app store教育類第二位；在Google Play上架3日，亦成為熱門№1的教育app。它是我們最近剛完成的project之一 — — Skillmove。(iOS版本 / android版本)
Skillmove app由我們Redso和Skillmove的團隊攜手合作 — — 我們除了負責CMS（Content Management System）、伺服器系統和手機app的開發外，亦根據Skillmove所提供的品牌元素、設計方向和UI風格指引，對介面進行後續的細節設計和顏色搭配等等。
這次我們就看看這個App的UI設計要點吧！希望這篇分享可以給對UI有興趣、或是在網上找設計靈感的你一點啟發。（順帶一提，小編也很喜歡這個作品ヽ(●´∀`●)ﾉ）
Skillmove — 隨時隨地開啟你的學習旅程
在深入講解Skillmove的UI前，我們先來了解一下這個App的背景資料。
Skillmove是一個創新的線上學習平台——由香港網上教學先驅者Henry sir連同一眾人氣導師、YouTuber、狀元學霸和日校老師，聯手炮製一系列文憑試(HKDSE)科目的『微課程』。報讀課程只需點擊按鈕，繳付相應的App內專用代幣(Skillcoin)，便可以文字、語音和視頻形式遙距上課囉！
其他功能如：進度紀錄、講義配送、作業上載、私聊系統、討論區、課程評分等也一應俱全！而且，完成課程、留下評分、交功課、參與討論通通都有Skillcoin回贈，以遊戲化的形式鼓勵持續學習，大大提高學習原動力～
不枯燥不浮誇，拿捏恰當的UI
整體而言，Skillmove的UI設計採用流行的極簡風(minimalism)，旨在突出核心資訊同時，保留簡潔清新的頁面，為用家帶來舒適的閱覽體驗。可是極簡風在使用不當的時候，或許會令設計單調乏味。
那麼該如何掌握分寸？我們來看看以下幾部份：
1. 顏色選擇：切合主題和用戶群
在選擇顏色時，緊扣主題和符合用戶群是重中之重，我們可以列出主題關鍵詞以便挑選顏色。
比如說Skillmove的目標用戶群是學生，所提供的服務是有別於傳統的移動補習體驗，我們得出的主題關鍵字可能是年輕、積極、創新，因此除了背景(dominant hue)是白色外，整體顏色選向是比較有活力的暖色：
主題、品牌顏色為橘紅色，強調色(accent color)則是鮮綠和橘黃色。
2. 顏色運用：60–30–10黃金比例
選好顏色後，該在用於哪裏、用多少呢？我們可以參考室內設計的60:30:10黃金配色法則 — — 主色彩比例佔60%，次要色佔30%，強調色佔10%。
套入Skillmove的設計的話，白色背景佔60%，橘紅主題色佔30%，綠色和黃色則共佔10%。當然並非要完全計算用色比例，設計的時候拿個大概就可以達到主次分明的效果囉～
因此除了白色背景外，Skillmove大部分設計元素也採用橘紅色(#FF3A1E)，比如說按鈕、文字連結、標題文字、通知標記、書籤等等（如圖三）。使用主題顏色貫徹各個頁面，有助深化用家對App主題的觀感，亦令App更具特色。
而鮮綠色(#2DC100)和橘黃色(#FECD04)則是強調色，是頁面中少量使用的醒目色彩——可以凸顯頁面的焦點，也可以用以區分不同的類別的設計元素，令配色效果更為活潑生動。
一般而言，強調色會採用整體色調的對比色，Skillmove則採用了與主題橘紅色對比的綠色，同時加入了一點黃色作增艷之用。
在運用顏色的時候，也要考慮到不同顏色所代表的意義。
例如我們將含有安全、行進、提升意義的綠色用在status bar、選擇選項及獲得Skillcoin的通知等；而將有快樂、財富意義的橘黃色用於課程評分、及Skillcoin數量的文字上，讓用家可以以顏色，直覺分辨不同設計元素的功能。
適度利用強調色，可以讓設計（尤其是極簡風）看起來不會因整潔而看起來過於單調乏味，自然能提升用家使用app時的樂趣！可是注意不要用太多顏色導致眼花撩亂哦～
3. 色盤禁區：避免使用純黑色
白紙黑字，是很多人對於背景和文字顏色的普遍理解，但是設計師都會儘量避免使用純黑文字和白色背景的搭配。
為什麼呢？我們可以參考下面的對比圖。
左邊是純正的白紙黑字，右邊則是我們在Skillmove裡使用的深灰色文字(#333333)，可以看到純黑文字在純白背景的對比下，顯得略為刺眼、不自然，而深灰色文字則比較耐看。可想而知，在閱讀一大段文字的時候，純黑色文字會讓眼睛非常疲勞，因此在設計中儘可能要避免。
除了文字以外，其他UI設計元素也可以減少使用純黑色。這聽上去可能有點荒謬，可是自然環境中並沒有純黑色，像是黑髮或是辦公椅，其實都是很深的灰色和褐色，所以設計中使用純黑看上去會很突兀。
4. 空間配置：該大的更大、該小的更小
我們都知道，大眾普遍喜歡看圖片多於文字，所以設計中可大幅增加圖片所佔比例，減少文字比例，增加空間感，提高閱覽舒適度和趣味。
至於怎樣選擇圖片呢？這點則視乎app的主要用戶群。比方說Skillmove目標是中學生，所以使用了拼貼風(collage)的圖片和動圖作為課程圖像，吸引年輕人的視線。
雖然Skillmove是一個教育app，可是這樣看上去就沒有了傳統補習的無趣感，獨特的圖片設計反而讓人想一看再看！這也是Skillmove在教育app突圍而出的優點之一。
5. 吸睛大法：卡片式分類
承接上一段落，圖片其實並非只是一個增加趣味的存在，亦可以作為卡片替頁面不同部份分類。
Skillmove正使用了卡片式分類，將圖文放同一卡片上。這個分類的好處是，不同類別會像一個個獨立包裹般清晰分隔，一目了然，看上去也更時尚。（而且用卡片式設計的話，可在底部加陰影和立體感，更添app的玩味！）
當然，並非説卡片分類就是最好的分類模式，其他分類也各有好處，最重要是用得其所。像是主頁最需要吸引注意力的部分，不妨多用大卡片分類；其他次要部份則可用文字或圖文並排的分類。
6. 設計彩蛋：將品牌融入每個角落！
市面上那麼多app，要怎樣才可以凸顯自己app的品牌呢？
多使用品牌顏色是其中一個答案，可是和其他app「撞色」的情況並不罕見，這時候可以將品牌標誌加入設計中，加強app的原創特色。
上圖圖可見Skillmove抽取了logo的圖形特色，稍作修飾添加在用戶名卡上；也簡化成斜紋在不同色塊上作點綴。
謝謝你的閱讀，和我們聊聊吧！
文章在此告一段落，寫畢這篇之後，小編也深深體會到UI設計真是一門高深的學問。（辛苦設計師了）
“Good design is obvious. Great design is transparent.” — — Joe Sparano
好的設計往往都是不顯眼的，就如好的UI設計，正因貼心照顧到每個細節，用起來流暢自然，才令用家沒法察覺到刻意設計的部份呢～
如果你覺得這篇UI講解蠻讚的，或是喜歡Skillmove的UI的話，可以給我們鼓掌哦（長按最多可以發送50claps👏）～
在為你的app找UI設計嗎？想要開發自己的app嗎？不要猶豫，馬上點擊下方和我們展開對話！
