那么，如何設計出一款界面精美的移動端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系統中，文字在任何尺寸的設備上都是清晰易讀的，圖標是精確而清晰的，并且需要流暢的動畫和交互，有序的視覺層次等等?？傊O計出來的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的標題文本包含一組元素，其中包含圖片和描述，這些元素可以保持組元素之間的較大間距。在這種情況下，設計元素保持足夠的間距并且可以用于區分不必要的裝飾元素之間的層次關系。

地址：Mockplus

作者：jongde

 轉載請注明：學UI網》iOS界面設計：12個優秀案例激發你的靈感

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

 為什么選擇藍色？

理由很多，我這里羅列一些：

1、人們就是喜歡藍色

問卷調查顯示大部分人把藍色當做它們最喜歡的顏色。因此藍色被認為是全球最安全的顏色。

色彩偏好是視覺體驗中的重要一環：

2、與大自然的關聯

藍色與凈水、晴空等自然景觀能夠產生強烈的關聯，這提高了人們對它的喜好。

3、界面設計的通用顏色

從一個界面設計師的角度來看，藍色絕對是一個有用的顏色。紅色、橙色和綠色通常都是有含義的，例如錯誤、警示和完成。藍色相對來說就成為了非常好的選擇。

4、科技創新感

這也是很多公司使用這個顏色的原因。

5、安全感

在旅游網站上，藍色是一種非常通用的色彩，因為它可以表達可以依賴的感覺，這對于旅游來說是件好事。

6、讓產品看起來更加可信

很多情況下，說服用戶使用我們的產品至關重要。這時，藍色就可以表現出信賴感。很多像Dell、IBM、Intel、AT&T和支付寶這樣的科技公司利用藍色來傳遞信譽信息，因為他們的產品是人們每天都要依賴的。

7、色弱

很多種色弱患者（如最常見的紅綠色盲）都可以看得到藍色，這一點上藍色明顯優于諸如綠色和紅色等其他顏色（Z Yuhan：幸運的是，色盲雖然在百種男性中的發病率高達10%，在亞洲人里卻十分少見）。

普通人看到的顏色 VS 色弱患者看到的顏色：

Facebook用藍色，因為扎克伯格就是色盲患者，他說：“藍色對我來說是最豐富的顏色，我可以看到所有種類的藍色。”

結論

我希望讀完本文，你能了解為何藍色在設計師中如此流行。然而這并不意味著你應該把你的方案的主色調改成藍色。

藍色也不是最好的萬能色，萬能色并不存在。

在一個網站或App上行得通的顏色，可能在另一個上就不能用了。最安全的方法還是根據目標用戶的喜好來選擇。

所以最終，用在你設計上的最佳色彩應該是你的用戶所認為的最佳色彩。

Z Yuhan：我發現我的手機上橙色比較多，文化差異，還是這幾年激烈競爭的變化？

原文地址：babich

譯文地址：知乎

譯者：Z Yuhan

 轉載請注明：學UI網》為什么界面設計大多喜歡用藍色？

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

1. How To Set Up Photoshop For UI Design

如果你是Photoshop的新手，又在做UI設計，這個教程教你如何使用常用的Photoshop設置來達到更好的效果。本文是以iPhone為實例告訴你怎么在UI設計中使用Photoshop，完全是初學者的教程。

2. How to Design an iPhone App in Photoshop

這篇文章將為我們介紹使用Adobe Photoshop為iPhone設計一個簡單的3頁目錄列表應用程序。并且將一步步地指導你完成這些步驟，還涵蓋了使用Photoshop設計iPhone應用程序的所有基本原則。

3. Design an App Landing Page in Photoshop

在這個教程中，我們可以看到一個應用程序著陸頁的詳細設計過程。設計師使用Tuts Android應用程序進行演示，強調其功能和優勢，利用多個CTA來完善整個著陸頁的設計。

4. How To Design a Mobile App Signup Screen in Adobe Photoshop

如果你想要設計一個像Facebook或者Instagram這樣成功的登錄界面設計，那么這個完全是你必看的基礎教程，視頻中教你如何選擇顏色，設計按鈕以及詳細的步驟來展示登錄界面的設計過程。視頻雖然是四年前的，但是里面的設計依舊不過時。

如何使用Sketch來設計手機UI界面

1. A Step-by-Step GUIde for Starting a New App Design Project in Sketch

開始一個新的設計項目是很難的，無論你是自由設計師，還是在知名的產品公司工作，時常會感到迷茫。本文將一步步的教你如何使用Sketch開始一項新的APP設計項目。

2. Food App UI ? Sketchapp Tutorial / Sketch 4 Tutorial

視頻主要是介紹如何使用Sketch制作一個美食類APP 菜單欄UI設計，簡單易懂。

3. Sketch 3 for iOS App Design Step by Step

Sketch 3是一款優秀的矢量設計和圖形程序，很適合用于設計iOS應用程序。在這個視頻中，設計師使用Sketch 3來設計一個iPhone APP用戶界面。

《From Idea To Reality: Designing An App With Sketch And Xcode 》這篇文章是進階版的APP 設計教程，從理論到具體的例子講解，非常受益。

4. Sketch App Tutorial – Build a music app landing page in Sketch

Sketch 作為當下主流的設計工具，似乎有超越Photoshop的趨勢。本視頻介紹的是如何使用Sketch來制作一個音樂APP登錄頁設計，可以說是手把手的教程，每一步都非常的詳細細致，非常適合初學者。

看了前面的音樂類APP登錄界面的教程， 你是否也想設計出一個屬于自己的音樂APP呢？接下來我將介紹如何通過結合Sketch和原型設計工具設計一款音樂類的APP（Prototype an music app with prototyping tool）

TIMING

這款原型音樂類的APP在Mockplus設計大賽中斬獲頭籌，設計師通過采用Sketch以及Mockplus的結合，做出了高保真原型。這個APP主要體現一種復古的視覺效果，磁帶轉動的效果是這次視覺上的設計重點。

必讀的手機界面UI設計好文

1. The 10 principles of mobile interface design

計算機和手機是人們日常工作和生活必備的通訊工具。但在許多方面，手機往往更加強大，手機更加的私人化，與我們的聯系更緊密。鑒于移動手機和計算設備之間的許多差異，移動設計與桌面設計的設計大不相同。這篇文章詳細的向我們介紹了移動界面設計的基本原則，幫助設計師們開發移動應用程序的獨特力量。

2. UI Design Do’s and Don’ts

iOS良好的優化了用戶面設計，并提供給用戶優質且具有吸引力的用戶體驗。在開始你的iOS設計之前，一定要清楚Apple官網的關于iOS常見的設計原則，來在增強手機應用的可用性和吸引力。更多關于優秀的iOS界面設計，請閱讀《iOS人機界面指南》。

3. How to use colors in UI Design

顏色可以說在UI設計中至關重要。用的好，那就成功了一半，用不好，可能導致整個應用失敗。在你的配色方案中，最好只使用三種主色跳，使用的顏色越多。越難實現平衡。這篇文章不但提到基礎的用色知識加上實例解釋，還有常用的工具介紹。

4. 10 Best APP UI Design for Your Inspiration

每位UI設計師都夢想著做出最出色的界面（UI）設計， 能夠脫穎而出的手機界面設計則少之又少。設計師們在設計UI界面時，往往會參考來自不同設計師的設計，這篇文章列出了2017年最出色的的10個手機應用界面設計范例，給設計師們謀福利。

總結

移動設計不斷地在發展，如果你想跟上這個時代，你需要不斷閱讀和觀看高質量的教程或文章。在本文中，我收集12個最佳教程的示例來教初學者如何學習手機UI界面設計，希望你們能從中受益。

原文地址：Mockplus

作者：jongde

 轉載請注明：學UI網》“手把手教你設計”—12個最佳手機APP界面設計教程

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

1). YONO.MP3 mobile app – 音樂軟件

*設計師：Anton Shmatko, Green Shark Studio, Pavel Khenkin

*軟件介紹：YONO.MP3是一款即可欣賞音樂, 也可收聽廣播節目, 了解最新時訊和趣事的手機端音樂軟件。它會是你閑暇時搜索和分享歌曲，歌手和專輯的理想工具。

*亮點：該款軟件采用了一個極具特色的配色方案 — 所有界面整體使用黑紅兩種顏色的對比， 經典而不失大氣。 而局部漸變色的使用, 也讓其功能和按鈕更加突出，極具層次感。而且, 軟件圖片, 按鈕和圖標的層級疊加, 也使整個界面更加的時尚柔和?？傊浖缑嬖O計整體簡潔漂亮而不失易用性。

2). Watering Tracker App – 生活類軟件

*設計師：Tubik

*軟件介紹：Watering Tracker app, 顧名思義，就是一款可以追蹤盆栽或植物的水分情況，及時提醒用戶澆水的生活類手機應用。

*亮點:首先，這種能夠監測植物水分情況，通知用戶澆水的創意，新穎且有趣。其次，界面背景和局部添加的綠色植物圖片使整個界面更加的直觀舒適，帶給用戶好心情。 當然，作為植物監測的工具，同時也設置了顯示各株植物水分，濕度，光照之類細節信息的功能區，即點即可了解到植物的具體生長情況，簡單易操作。而且，配色方面，黑色背景搭配白色和綠色圖片及按鈕，符合整個植物主題的同時，也更易于用戶接受和使用。

3). Listen – 音樂軟件

*設計師：CD UXT

*軟件介紹：Listen是一款致力于為喜愛不同音樂風格的用戶提供獨特且愉悅體驗的音樂軟件。整個界面設計簡潔清晰，用戶可以簡單的通過不同頻道（例如最新歌曲，電臺，主體和專輯等）和不同場景（例如駕車，運動，工作和約會等）快速的搜尋到最喜愛的歌曲。而且，軟件還特別為用戶提供了根據不同心情播放不同音樂列表的功能，更具個性。總之，喜歡閑暇時沉浸在自己的音樂世界的你，它會是你最佳的選擇。

*亮點：軟件整體采用經典的藍色背景搭配白色字體和同色系圖片，更加柔和舒適。一系列插畫風格 的場景和頻道對應圖片，也使整個界面設計更加美觀有趣。結合明亮陰影的圖標和按鈕讓軟件對應功能更加凸顯的同時， 更能易于用戶識別使用。 針對不同部件添加的靈活交互，也能夠使用戶具有更加流暢且愉悅的體驗?？傊且豢钜杂脩粲鋹傮w驗為基礎而設計的軟件原型，值得嘗試。（點擊這里查看原型詳情）

4). NightOwl Coffee – 咖啡預定軟件

*設計師：Queble Solutions

*軟件介紹：NightOwl Coffee是一款能夠幫助用戶根據自己的需要快速訂購各式咖啡的手機應用軟件。

*亮點：軟件整體采用了獨具特設的插畫風：主頁添加的由明亮顏色和各種幾何元素呈現的卡通咖啡機，可愛且切合主題。純色的背景搭配上灰色插畫以及黃色圖標和按鈕，使整個軟件界面更加干凈整潔，易于用戶使用。

5). Roomframes app – 管理型軟件

*設計師：Adrain Rudzik

*軟件介紹：Roomframe app是一款適用于iOS手機端的應用軟件，能夠幫助用戶記錄并珍藏他們所旅行過的地方的相關記憶，尤其是他們旅行中所居住過的房間的珍貴記憶。所以，從這方面來講，它是一款生活管理型手機應用。

*亮點：軟件多處使用了框架設計，方便用戶根據不同的旅店，工作區和相關新增地點，添加對應的日期，圖片和描述。其簡單的白色背景，使用戶信息更加明顯，也易于用戶隨時回顧或與家人朋友分享這些難忘的回憶。

6). iOS App Slide Car – 生活類軟件

*設計師：Melany Roa

*軟件介紹：iOS App Slider Car是一款專門針對iOS手機研發的應用軟件，能夠幫助用戶分類搜索各式汽車信息，并實現在線交易的一種手機端應用。同時，它也是一款能夠幫助用戶結交不同汽車愛好者的社交工具。

*亮點：簡單純色的背景，使用戶專注于汽車圖片，價格，描述和所有者等信息。搜索界面添加各種搜索參數，用戶簡單點擊即可實現汽車信息搜索?？傊?，整個界面簡單，整潔而實用。

7). Karoline – 購物軟件

*設計師：Varduhi Adami

*軟件介紹：Karoline是一款手機端服裝購物軟件，提供了各類服裝的詳細信息和購買渠道。

*亮點：軟件整體的粉色系配色，柔和甜美，對女性購買者極具吸引力。所有界面以服裝圖片為主，更易于用戶根據喜好挑選。而且，添加的簡單且易識別的圖標和按鈕，方便用戶搜索和查詢相關服裝細節。軟件界面豐富，例如主頁，我的賬號，我的訂單，我的購物車，要請朋友，設置，購買等，能夠滿足用戶購買時各方面的需求。所以，如果你有通過手機在線購買服裝的打算，它會是不是錯的嘗試。

8).Space – 管理類軟件

*設計師：Doeun Shin

*軟件介紹：Space是一款能夠幫助用戶更加有效的管理日常生活的手機端應用。主要提供了兩項特色服務：早上，自動結合用戶的日常習慣，提供有用的日程管理信息和建議，例如交通和天氣情況等； 晚上，通過自動分析用戶語音日記，提供符合用戶心情的主體和提示音等等。

*亮點：該軟件以插畫風為基礎，添加了各式動畫按鈕及圖片，直觀生動。藍色主題，漂亮舒適，無論早上還是晚上使用，用戶都不會反感。而且，軟件本身添加多樣的功能性界面，例如語音日記，心情日歷，日常服務，節日簡介等等，簡單全面?？傊且豢顦O具吸引力的管理軟件。

9).QuickBee – 廣告類軟件

*設計師：Monish Mohanan

*軟件介紹：QuickBee是一款廣告分類管理軟件，提供了生活中各個方面的信息，例如汽車，房地產，求職和教育等風方面面信息。使用者只需創建賬號，即可搜尋所需生活信息，了解流行趨勢，瀏覽各類特色廣告。

*亮點：軟件設計簡潔，顏色搭配極佳。彩色按鈕呈現多樣的生活分類，整潔美觀。各式框架呈現流行趨勢和特色廣告，簡潔有序。矢量圖標簡單易識別。添加多種界面，滿足用戶各方面的需求。

10).Wallet – 理財類軟件

*設計師： uixNinja

*軟件介紹：Wallet一款能夠幫助使用者理財的移動端軟件。

*亮點：軟件使用黑色，紅色和紫色三種顏色的對比和漸變，極具特色，漂亮時尚。簡易圖標和多色幾何圖形，是軟件界面更加簡潔使用，令人印象深刻。

結語

這些就是我們所搜集的10款最新的優秀手機端軟件UI設計作品。 希望他們不僅能給你新的設計帶來靈感，同時也能幫助你把握和預計2018年手機應用UI設計的發展趨勢。

原文地址：Mockplus

作者：jongde

 轉載請注明：學UI網》10個最新優秀手機應用界面設計實例

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

費茨定律是人類運動的預測模型，主要用于人機交互和人體工程學。該法則預測光標/手指從一個起始位置移動到一個最終目標所需的時間（T）由到目標的距離（D）和目標的大小（W）所決定，用數學公式表達為時間 T =a + b log2 ( D /W + 1 )。其中a、b是經驗常數，a代表手指開始到停止的時間，b代表手指的移動速度。

舉個生活中一個開燈的例子：

早期的開關只有一個手指大，每次開燈的時候都需要將手移動到開關上方，然后伸出手指調整到適合位置然后在按下。由于按鈕小，在沒開燈的時候你根本不知道它在哪里，需要不停的摸，所需時間就比較長。后期大家意識到了這個問題，將開關按鈕設計變大，人們操作時只需要將手移動到按鈕上方，由于面積大不需要調整直接按下即可，所需時間就比較短。

如何指導界面設計

費茨定律應用比較廣泛，其在移動界面設計中也有很好的啟發意義，結合費茨定律公式可以得出指導我們設計的三個要點：

1. 按鈕越大，所需時間越短

根據公式，當到目標的距離（D）一定時，目標大?。╓）越大，所需時間越短，反之越長。下面以支付寶的登錄流程為例，如下圖所示：

左圖是支付寶初始頁，該頁面主要讓用戶選擇合適自己的操作方式。因此在設計上采用登錄和注冊按鈕并排的方式，目標區域較小，給用戶充分選擇的時間。

中圖和右圖，界面中僅僅只有一個按鈕，其他注冊、遇到問題都可弱化用文字高亮的樣式展示，用戶在操作時基本不用想就知道點擊下一步按鈕。大大的減少了操作時間，讓用戶可以專注于登錄上。

2. 距離越遠，所需時間越長

當按鈕大小一定時，手到目標的距離越遠，所需時間就越長，反之越短。但是這里就發現一個問題，移動端如何判斷手到目標的距離呢？這里我們可以借用拇指熱區來進行判斷。隨著手機越來越大，不同機型的拇指熱區會有所差異，以iPhone6右手操作為例，它的拇指熱區。如下圖所示：

根據圖例可知綠色區域是我們手指最容易輕松達到的，橙色是伸長手指才能觸達，操作相對較難，紅色區域為難以觸及的區域。我們可以判斷手指到綠色區域的時間最短，到紅色區域的時間最長。因此在設計時我們需要將重要層級高的按鈕放到拇指熱區的綠色部分中，讓目標離手指越近，從而提高操作速度。如下圖所示：

以上兩個案例均是Feed流界面，在卡片中露出功能有點贊、評論、分享這三個按鈕，其中大眾點評這三個中點贊的重要性層級最高，因此將其放在綠色最易觸達區域，單手操作離手指距離最近，而分享和評論次之，因此將其放在了紅色和橙色區域，單手操作離手指更遠。

其中微信讀書這三個中分享的重要層級最高，因此將其放在最易觸達的綠色區域，單手操作更近。

3. 手移動越快，越易錯誤操作

其實不管你手的速度有多快，當距離較遠、按鈕較小時，當手移動到按鈕上方就會停下來進行定位然后才能準確得進行操作，如果只要求速度，手移動過來直接點擊有可能就點中不了按鈕，容易進行錯誤操作。

因此在UI設計中，如果我們想要用戶能夠快速操作，可以為用戶打破距離和大小帶來的限制，結合手勢操作來進行設計。如下圖所示：

以微信為例，在微信列表中為了讓用戶能夠快速操作列表，引入了手勢操作（安卓長按、iOS側滑），當長按或側滑列表時，就會在當前位置出現操作內容，提高操作效率。

在移動端界面中的應用

在實際交互設計中，合理使用費茨定律，可以讓我們的界面使用更流暢，錯誤率更低。下面我們一起來看看費茨定律的四大應用場景。

1. 來電顯示場景——不同狀態，不同設計方式

iOS的來電提示在鎖屏和蘇醒狀態分別采用滑動接聽和點擊接聽，可以很好的用費茨定律來解釋。如下圖所示：

鎖屏時：用戶手機場景不確定，很容易意外點擊。在設計時就需要增加操作距離、延長操作時間，防止誤操作的情況，采用滑動解鎖就可以增加操作的距離，放在該場景中使用較為合適。

蘇醒時：用戶正在使用手機，這時候采用滑動操作距離太長了，因此設計為按鈕的樣式，用戶可快速點擊接聽或拒絕，進而提高用戶操作效率。

2. 將返回浮于底部操作欄中——縮短操作距離和時間

隨著屏幕越來越大，拇指熱區也發生了變化，你會發現左上角的返回按鈕單手操作越來越不可能，尤其是Plus、iPhoneX的出現返回按鈕顯得有點雞肋。不過在體驗資訊類的產品時發現，部分界面他們將返回按鈕放到類界面底部左下角的位置，下面將這兩種進行對比下。如下圖所示：

以今日頭條的詳情為例，返回按鈕在常規的左上角。結合拇指熱區你會發現左上角的區域單手是很難到達的。對于資訊類APP需要不斷切換看的文章，返回鍵在左上角無疑加重了操作難度。

以虎嗅為例，他們將返回按鈕移動到了底部左下角，結合拇指熱區你會發現左下角的區域單手是可以輕松到達的，將返回按鈕放在底部，大大的節約了用戶操作時間。

需要注意的是，盡管通過分析，返回按鈕在左下角單手更好操作，但是有時候習慣真的是一件可怕的事情，比如我在華西醫院的微信小程序時，很少能夠記住點擊底部的前進和后退鍵，每次想返回上一級，就習慣性的點左上角，結果就直接退出小程序。如下圖所示：

、

面對頂部返回鍵單手不方便點擊、底部返回鍵又老是記不住點，同時在當前規范下又不適合大面積的使用，怎么樣才能幫助用戶操作呢？其實iOS按住左側屏幕邊緣向右滑既可以返回上一步，安卓自帶虛擬返回鍵都是較為快捷的操作方式。

3. 合理利用手勢操作——提高用戶操作速度

安卓的長按和iOS的側滑編輯大家都比較熟悉，他們多用在列表頁的編輯狀態，用戶長按或側滑列表，操作按鈕就顯示在當前位置，操作效率比較高，如下圖所示：

以天貓購物車為例，大家知道長按是安卓端常用的功能，側滑是iOS端的功能，然后天貓購物車這兩種功能都支持。其主要原因考慮到安卓用戶在使用蘋果手機時，可能不知道側滑的功能，因此在購物車的編輯中還加入了長按功能，讓用戶能夠更快捷的操作。

4. 將操作按鈕進行收納——阻礙用戶操作

在設計時如果控制不經常使用，或者想阻礙用戶操作時，就可以把操作按鈕放遠一點，同時在設計上可以將其收納，加大用戶到操作難度。如下圖所示：

以大眾點評詳情為例，在右上角并沒有直接放舉報到按鈕，而是放到更多到按鈕，一個原因是為了方便后期的拓展，另外很重要到一個原因是不想讓用戶舉報加深用戶的操作難度。

總結

本文主要分享了費茨定律在UI界面中的應用，結合今天的分析，總結起來主要有四個要點：

• 1、我們想要更容易點擊到目標，就需要將一個頁面的主操作按鈕放大。
• 2、我們想要讓用戶快速點擊目標，操作更方便，可以將目標放于拇指熱區輕松觸達區域。
• 3、我們想要讓用戶快速移動時，就可以利用手勢操作，它打破距離和大小的限制，從而讓用戶可以快速操作。
• 4、我們不想要用戶操作或不常用的控件時，就可以將按鈕進行收納，加大用戶操作距離，從而增長用戶的操作時間。

參考文獻：

Technical Artist的不歸路 —— 費茨定律(Fitts’s Law)在UI設計中的使用  

設計法則： Fitts’ Law / 費茨定律（費茨法則）

《通用設計法則》立德威爾著   朱占星 薛江譯 中央編譯出版社 2013年9月北京第1版

原文地址：海鹽社（公眾號）

作者：風箏KK

轉載請注明：學UI網》費茨定律如何指導界面設計

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

Part1 界面設計工具的發展歷程

• 1. 第一階段是最早期界面設計領域剛剛起步，設計師普遍使用PS來制作界面。但PS是一個全面的而非專門針對界面設計的工具，因此界面設計師在界面的繪制、文件的交付上都存在一定不便。
• 2. 第二階段是Sketch的出現。雖然Sketch是一款Mac端軟件，但其作為一款專門針對界面設計的工具，以其高效、小巧的優勢迅速占領界面設計市場，逐步取代PS成為各大設計團隊的首選。由于Sketch在動效制作方面的欠缺，出現了Principle、Flinto、Protopie等專門設計界面動效的工具，一般設計師都會將其搭配使用。
• 3. 當前階段各種新興設計工具如XD、Figma、Framer Web逐漸走進設計師們的視野，它們專注于界面設計領域，不斷挖掘和突破Sketch的短板，為設計師們打造更良好的使用體驗。

Part2 界面設計工具的未來發展趨勢

界面設計工具的發展改變著設計師們的工作方式。界面設計工具也漸漸從單一專注設計本身向云端性、協作性、通用性發展，旨在實現更高效的設計生產活動。

1. 云端性

隨著云計算的發展，界面設計工具也在逐步走向云端化。設計從本地轉向云端，不再依賴于本地硬件的性能，云端的計算能力讓使用性能得以提高。設計也不再受時間和空間的限制，只要有網絡，設計師可以隨時隨地的工作，臨時使用其他電腦工作時省去了安裝軟件、同步設計文件的麻煩。

2. 協作性

3. 通用性

Part3 界面設計工具推薦 

1. UI工具篇

1）Windows用戶也可隨心使用

2）云端文件使用不卡頓，支持離線編輯

Figma創建的文件全部存儲在用戶的云端賬戶中，不占用本地內存。當文件過大時，sketch會出現卡頓現象，拖拽一個圖層都會變得很困難。而Figma對本地資源的消耗很小，大文件也幾乎不存在卡頓的情況。

3）一鍵導入sketch文件

4）更強大的組件功能

Figma和Sketch都擁有組件功能。當原始組件更改時，復制組件就會同步變化，在這點上二者是相同的。但Figma在組件邏輯上比Sketch更進一步，復制組件可以靈活處理與原始組件的同步關系。當設計師修改復制組件的樣式時，原始組件不受影響。此時二者的關聯邏輯仍然存在，當再次修改原始組件，復制組件仍然會同步變化。相比于Sketch，Figma把組件做的更加靈活限制更少。

同時Figma也在不斷優化其組件功能，在Config Europe大會上，Figma預告在今年11月會正式上線組件Variants功能。該功能是將一系列有關聯的內容生成一個Variants組件，在使用時可以直接通過識別出來的組件屬性改變組件樣式。其優勢在于使用組件時可以更輕松的切換所需組件的不同狀態,再也不需要像在sketch中一樣逐級尋找了。

如下圖中的按鈕組件，設計師可以將所有的按鈕狀態都列舉出來并按層級、顏色、狀態、大小命名。然后選中所有按鈕將其組成一個Variants組件。

5）與代碼緊密結合

6）一鍵恢復歷史版本

7）團隊協作

除了設計師之間的協作，Figma也有效提高了設計評審的效率。與在工作群截設計圖標紅再描述相比，Figma的評論功能使得同事可以在設計文件中實時標注討論方案，提高了線上評審效率。

2. 動效工具篇

Framer Web的核心亮點是什么？

1）網頁端全平臺可用

相比于Framer classic和Framer X作為本地客戶端軟件只支持Mac電腦，Framer Web是一款基于瀏覽器的在線設計工具，因此windows用戶也可以安心使用。同時個人版本免費，大大降低了設計師的使用成本。

2）文件導入

Framer Web可通過import選項導入Sketch甚至Figma文件，可搭配Sketch和Figma快速制作高保真動效。

3）輕松實現復雜動效

Magic Motion與principle、keynote的動畫實現原理類似。當你選擇目標元素添加了交互行為后，可以在Magic Motion中選擇一個過渡方式。只要兩個畫板中的元素名稱一致且在不同面板中擁有不同的形態，那么在畫板切換時該元素就會生成補間動畫發生相應變化。

4）從設計到代碼

目前Framer Web 已經可以實現導出相應動效代碼，但導出的效果仍有待完善，只是可以導出Transiton的參數而已。

Framer Web放棄了攻占界面設計領域的策略，轉而和Figma官方達成積極的戰略合作，專注于做專業的動效設計軟件。因此Framer Web非常適合和Figma搭配使用。隨著產品策略的調整，相信在不久的將來Framer Web還會為設計師們提供更豐富、高效的動效設計功能，非常值得期待。

3. 插件篇

4. 協作工具篇

4.1 XSHOW

XSHOW是一款由ISUX研發的高效設計協作平臺。XSHOW連接了產品經理、開發等各個不同工種，提高了設計資源輸出和分發效率。設計師將設計文件上傳到XSHOW，就可以將文件鏈接分享給產品經理、開發等同學。

產品經理在手機小程序上就可以預覽方案，設計師每次更新的方案也可以直接預覽。開發同學可以直接查看標注和切片。同組設計師也可以直接下載源文件、甚至查看歷史迭代版本。

XSHOW是如何實現高效協作的？

對于設計師

1）可視化上傳文件

2）記錄所有版本迭代，輕松找回第一稿

3）靈活豐富的分享權限

對于項目管理者

1） 直觀了解團隊輸出,組建團隊展示能力空間

2）方案變更及時知道

 

1 

3）便捷組建項目和管理團隊成員

對于合作產品經理或甲方

1）多端查看更方便

 

2）查看歷史變更

Part 4 結語

原文地址：騰訊ISUX（公眾號）

作者：ISUX