iOS界面設計，12個優秀案例激發你的靈感

總所周知，iOS和Android是當今兩大移動平臺，前者採用Human Interface Design，後者採用Material Design。做爲設計師，尤爲是App設計師，老是會在這二者進行設計。若是你的產品能在井噴的App裏推穎而出，這必定會是超級棒的體驗。你作到了，設計改變生活。

 

那麼，如何設計出一款界面精美的移動端App呢？

若是你是爲iOS設計應用程序，那麼此文你能夠好好看一看。咱們都知道用戶界面會直接影響到用戶體驗。因此本文中，我首先精心挑選了12款最佳iOS移動應用程序模板和案例，它們都有着優秀的iOS用戶界面設計（iOS設計模式）和良好的用戶體驗，涵蓋生活類，雜誌類，體育類，天氣類，網上購物類等等。此外，本文還提供了一些iOS人機界面設計指南。但願能對您有所幫助。

1. City App

類別：導航

系統要求：支持iOS 9.0以上

 

City App是一個iOS應用程序模板，也是一款以用戶爲中心的信息類集合軟件。City App用於提供城市指南解決方案，並能夠顯示你所在城市的有趣地點，並加以描述性介紹。用戶還能夠直接經過相機照片搜索圖片所在定位，一張圖片就是一個數據的集合。Admin後臺可集中管理地點數據，但您能夠對其編輯，更新或刪除。來自世界各地的風景優美的圖片是界面色彩的主要構成，很是美觀。

2. Triibe

類別：生活方式

系統要求：iOS 9.3或更高版本，與iPhone，iPad和iPod touch兼容

 

Triibe是一個引領全新的社區類iOS應用程序，它是專門爲製做達人設計的一款產品。它提供一種最簡潔、直觀的方式展現你的手工創做和學習創意。任何題材設計，包括工藝，烹飪，家居，時尚等等，均可以獲得展現。該App的一大特點使其精美的界面，用戶在這裏上傳和展現其手工做品，搭配純淨的淺色背景，幾乎和任何的設計做品都能呼應。

3. Design Events near you

類別：活動

系統要求：沒有限制

 

Design Events，顧名思義，就給人一種充滿設計感的印象。它是由來自印度的一位才華橫溢的設計師Johny vino設計的。它一款典型的iOS應用程序，主要用於發現你身邊的各類設計活動以及您所在城市和附近地區的各類戶外活動。它能夠智能的進行有趣的活動推薦。該App的動畫交互和過渡都很是簡潔流暢，搭配明快的配色，讓人以爲眼前一亮。

4. Trove

類別：播客和時尚

系統要求：iOS 9.0或更高版本，與iPhone，iPad和iPod touch兼容

 

這是一個很是酷炫時尚的iOS應用程序。藉助Trove，您能夠隨時隨地找到本身喜歡的風格，獲取來自世界頂級風格影響者的無盡靈感和建議，追隨頂級時尚博主。瀏覽「精選」服裝，能夠發現並關注與您風格一致的博客。此外，「My feed」選項卡，可讓您隨時查看收藏夾，並將物品添加到您的收藏夾中，以便稍後再購買或能夠選擇當即購買，你的全部選擇都是自由的。

5. Nowait Guest

類別：食品和飲料

系統要求：iOS 9.0或更高版本，與iPhone，iPad和iPod touch兼容

 

Nowait Guest是一個簡化生活的iOS App。使用該應用程序，能夠爲您節約大量的訂餐等待時間，很餐廳都已經開始投入使用該App，以方便其顧客能夠提前瞭解其訂餐狀況，包括Chili's，Buffalo Wild Wings，First Watch等。用戶在家時，就能夠隨時查看附件餐廳的當前等待時間，而後作出決定是否前往。餐廳的圖片使用很是吸睛，整個界面看起來讓人以爲「垂涎三尺」。

6. The New York Times

類別：雜誌和報紙

系統要求：iOS 9.0或更高版本，與iPhone，iPad和iPod touch兼容

 

這是一款家喻戶曉的應用程序，幫助您隨時隨地掌握最新信息，對於新聞愛好者和喜歡閱讀的用戶而言，這是一款比書美觀，但和書同樣能用文字傳達信息的程序。該程序與iPhone，iPad和Apple Watch的NYT應用程序一塊兒得到過聞類應用程序獎項。它具備新聞快訊，多任務處理，晨報和晚報，播客，保存文章以供往後在任何設備上閱讀等功能。

7. iPhone X - Todo Concept

類別：雜誌和報紙

系統要求：iOS 9.0或更高版本。與iPhone，iPad和iPod touch兼容

 

iPhone X - Todo Concept是由Jee-Jeong爲Norde設計。它是基於iPhone X概念而製做的一個新原型。該原型的草圖和psd模型均可以避免費下載。它是設計師特別爲iPhone X的發佈而設計的。它的動畫過分和轉換都很是流利，其色彩選擇鮮明大膽，極富感染力。留白的界面設計模式，和各類純色背景都能造成鮮明對比，突出了重要信息，又美化了界面。

8. Cloud Music Offline MP3 Music

類別：音樂

系統要求：iOS 9.3或更高版本，與iPhone，iPad和iPod touch兼容

 

對於喜歡聽音樂的人來講，這是一款不容錯過的音樂應用程序。您能夠輕鬆地將音樂從雲端下載到您的設備並脫機播放。您的設備上就是一個無限量的音樂庫。其音樂播放列表很是有趣，設置了動畫多樣的操做按鈕。整個界面白色純背景，乾淨而簡潔，用戶的注意力會停留在其喜歡的音樂上，不會分散。該程序支持全部最流行的音樂文件格式：.flac .mp3，.aiff，.m4a，.wav 等等。

9. KicksOnFire: Buy Sneakers

類別：運動

系統要求：iOS 8.0或更高版本，與iPhone，iPad和iPod touch兼容

 

這個應用程序是是專爲運動鞋發燒友設計的，主要是推送新款運動鞋的特別發佈日期及其相關新聞。該程序是App Store下載量最大的運動鞋發佈日曆類應用程序，不只是得到第一手運動鞋諮詢，您還能夠在這裏購買您最喜好的運動鞋。其推送會基於您的我的資料智能進行個性化的發佈和價格估算。

10. Airbnb

類別：旅行

系統要求：iOS 9.0或更高版本，與iPhone，iPad和iPod touch兼容

 

家喻戶曉的一款App，風靡全球。當您準備旅行，從Airbnb開始享受難忘的旅行體驗吧。這裏，全部關於旅行的事情都變得更加美好，好比尋找旅行冒險，遠遊或找到一個全新的地方。遊客能夠得到度假屋租賃，體驗一種新體驗，並在世界各地參觀的地方。若是您有房屋待租，Airbnb也是一個最佳平臺，在這裏，你絕對會當一個優秀的「房東」。

11. Local Weather Radar & Forecast

類別：天氣

系統要求：iOS 9.0或更高版本，與iPhone，iPad和iPod touch兼容

 

該程序是一個當地突破性的天氣新聞播報App，也是一個美國本地，乃至世界各地的交通應用程序。只需一個點擊，就能夠來回切換地位，以便隨時查看您的朋友和家人所在地的天氣狀況。該程序還能夠以小時來記錄您所在地區的氣溫變化狀況，造成以個獨特的「氣溫變化」列表。

12. Sofa

類別：電影，電視和書籍

系統要求：iOS 9.3或更高版本，與iPhone，iPad和iPod touch兼容

 

這是一款iPhone應用程序，是可讓您沉浸在書籍，電影或電視節目中度過美好時光的一款App。您能夠自定義建立電影，電視節目，書籍等列表，也能夠將電影，電視節目和書籍添加到任何列表中。當您須要搜索某一條目時，能夠經過向下滑動操做來直接解鎖。

以上是2018年12個很是棒的iOS移動應用程序，它們中的大部分都位於App Store排行榜的首位，下載次數和使用人數都幾位可觀。看了這麼多成功的iOS應用程序，做爲設計師，你有沒有思考過，這些App成功的祕訣的是什麼？

不難發現，出色的用戶界面和用戶體驗相當重要。iOS設計主題將就明晰、尊重和深度，這意味着，在整個iOS系統中，文字在任何尺寸的設備上都是清晰易讀的，圖標是精確而清晰的，而且須要流暢的動畫和交互，有序的視覺層次等等。總之，您設計出來的App須要知足用戶對質量和功能的高指望值，纔有可能成功。

那麼，設計一個美觀精細的iOS移動界面都有哪些必須注意的點呢？

1. 排版

1）字體

字體選擇不宜多，多則雜亂。只需使用單個字體並使用幾種字體變體便可。蘋果公司使用San Francisco，並根據產品功能選擇字體。例如，在iOS 7中使用Myriad（Pro）Light，在iOS 9中使用SF-UI。在iOS 10中，舊金山變體是SF UI Text和SF UI Display。你只需按照規則便可。但爲了達到文字的易讀性和可讀性俱佳，關於字體選擇和字體佈局，你仍是要根據具體狀況仔細斟酌。

2）字體大小

iOS的字體大小有其比較明確的規範，具體查看下錶：

 

2. UI設計中的顏色

色彩的魔力不言而喻，人都是視覺性的動物。顏色能夠傳達活力和信息，提供視覺連續性，響應用戶行爲提供反饋、幫助人們可視化數據。自iOS 7以來，Apple一直在爲其操做系統界面和預設應用程序設置色彩明朗鮮豔的調色板。關於顏色的選擇比較自由，你可使用下面列出的默認iOS調色板，也能夠本身定製，以便在同類App中能夠脫穎而出。

 

瞭解更多：如何在UI設計中明智地使用顏色來建立完美的UI界面？

3. 圖標

iOS的圖標風格是簡單易懂，而且專一於某個功能點或者信息點。一般狀況下，iOS應用程序須要使用到不一樣尺寸的圖標。好比，用戶在安裝某一App後，在主屏幕可能須要使用較小的圖標，但該程序在App Store裏又須要更大的圖標。關於iOS圖標大小，也有比較明確的規範：

 

4. iOS 11中的更新

1）加粗的導航設置

這幾乎是iOS 11中最使人印象深入的變化。使用粗體標題可讓用戶快速瞭解其當前位置，並進行快速標籤切換。

2）界面佈局中的空白區域

iOS 11的標題文本包含一組元素，其中包含圖片和描述，這些元素能夠保持組元素之間的較大間距。在這種狀況下，設計元素保持足夠的間距而且能夠用於區分沒必要要的裝飾元素之間的層次關係。

5. 從原型設計開始

在iOS 11中，還添加了拖放操做，容許用戶使用單指將所選照片，文本和其餘內容從一個位置移動到另外一個位置 -甚至iPad上的應用程序也能夠進行該操做。對於App設計師來講，設計產品時，若是有一款能夠靠拖放操做就能完成原型設計的工具是否是也會是一樣的方便快捷呢？而且，從原型開始着手能夠爲您節省大量金錢，時間和精力，並激發和記錄您的靈感。讓咱們看看原型工具在iOS界面設計，乃至整個iOS程序的原型設計中能夠如何幫助到您。

這裏我首先要推薦的，就是國內最優秀的原型工具Mockplus。它是一款專業的iOS應用設計原型設計工具。Mockplus提供了許多強大的功能，能夠幫助您快速構建一個美觀獨特的交互移動iOS應用程序原型：

1）Sketch導入

交互是原型中展現設計者邏輯和思惟的一種最直觀的方式。使用Sketch的用戶，在完成設計稿後，能夠下載和安裝Mockplus插件，將設計圖導出爲MP項目文件，在Mockplus中使用拖拽的方式對設計稿進行交互設計和團隊協做等，十分便捷。

 

2）Mockplus的Auto Data Fill組件支持批量添加圖片

圖片對原型界面的美觀不言而喻。人都是視覺類動物，爲了吸引注意力，設計師每每會選用精美的圖片增長界面美感。在Mockplus中，數據填充組件可讓您從繁多的圖片添加中解放出來，只需經過簡單的點擊或拖動，能夠批量添加圖像組件到您的原型設計。

 

3）Mockplus擁有3000多個矢量圖標

如上文所講，圖標在iOS界面設計中是相當重要的因素，圖標的合理使用可讓界面與用戶之間更好的進行溝通。Mockplus擁有3000多個不一樣類別的適量圖標，您能夠自由選擇，而且能夠進行相應的編輯。

4）Mockplus中的可視化交互設計

Mockplus能夠說是添加加快速交互的不二選擇。只需使用封裝可見的交互組件，用鼠標進行拖拽便可完成交互，不須要任何一行代碼或者參數的設置。Mockplus目前支持3種交互方式：頁面交互，組件交互和屬性交互。交互命令還可一鍵自動還原。

5）Mockplus擁有300多個高度封裝的組件

Mockplus的快速交互和其300多個高度封裝的組件能夠完美配合。作原型圖時，只須要把這些組件放入工做區進行組合，以拖拽交互連接點的方式，就能夠迅速呈現原型。你徹底能夠把思路用在設計上，而不用爲製做一個組件去勞心費力。在Mockplus中，你能夠快速的完成各種交互動態效果，好比滑動效果、縮放效果等等。

瞭解更多Mockplus的功能，查看其官網https://www.mockplus.cn