1. 程式人生 > >iOS界面設計,12個優秀案例激發你的靈感

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

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