那么，如何設(shè)計出一款界面精美的移動端App呢？

如果你是為iOS設(shè)計應(yīng)用程序，那么此文你可以好好看一看。我們都知道用戶界面會直接影響到用戶體驗。所以本文中，我首先精心挑選了12款最佳iOS移動應(yīng)用程序模板和案例，它們都有著優(yōu)秀的iOS用戶界面設(shè)計（iOS設(shè)計模式）和良好的用戶體驗，涵蓋生活類，雜志類，體育類，天氣類，網(wǎng)上購物類等等。此外，本文還提供了一些iOS人機界面設(shè)計指南。希望能對您有所幫助。

1. City App

類別：導(dǎo)航

系統(tǒng)要求：支持iOS 9.0以上

City App是一個iOS應(yīng)用程序模板，也是一款以用戶為中心的信息類集合軟件。City App用于提供城市指南解決方案，并可以顯示你所在城市的有趣地點，并加以描述性介紹。

用戶還可以直接通過相機照片搜索圖片所在定位，一張圖片就是一個數(shù)據(jù)的集合。Admin后臺可集中管理地點數(shù)據(jù)，但您可以對其編輯，更新或刪除。來自世界各地的風(fēng)景優(yōu)美的圖片是界面色彩的主要構(gòu)成，非常美觀。

2. Triibe

類別：生活方式

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

Triibe是一個引領(lǐng)全新的社區(qū)類iOS應(yīng)用程序，它是專門為制作達人設(shè)計的一款產(chǎn)品。它提供一種最簡潔、直觀的方式展示你的手工創(chuàng)作和學(xué)習(xí)創(chuàng)意。任何題材設(shè)計，包括工藝，烹飪，家居，時尚等等，都可以得到展示。該App的一大特色使其精美的界面，用戶在這里上傳和展示其手工作品，搭配純凈的淺色背景，幾乎和任何的設(shè)計作品都能呼應(yīng)。

3. Design Events near you

類別：活動

系統(tǒng)要求：沒有限制

Design Events，顧名思義，就給人一種充滿設(shè)計感的印象。它是由來自印度的一位才華橫溢的設(shè)計師Johny vino設(shè)計的。它一款典型的iOS應(yīng)用程序，主要用于發(fā)現(xiàn)你身邊的各種設(shè)計活動以及您所在城市和附近地區(qū)的各種戶外活動。它可以智能的進行有趣的活動推薦。該App的動畫交互和過渡都非常簡潔流暢，搭配明快的配色，讓人覺得眼前一亮。

4. Trove

類別：播客和時尚

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

這是一個非?？犰艜r尚的iOS應(yīng)用程序。借助Trove，您可以隨時隨地找到自己喜歡的風(fēng)格，獲取來自世界頂級風(fēng)格影響者的無盡靈感和建議，追隨頂級時尚博主。瀏覽“精選”服裝，可以發(fā)現(xiàn)并關(guān)注與您風(fēng)格一致的博客。此外，“My feed”選項卡，可以讓您隨時查看收藏夾，并將物品添加到您的收藏夾中，以便稍后再購買或可以選擇立即購買，你的所有選擇都是自由的。

5. Nowait Guest

類別：食品和飲料

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

Nowait Guest是一個簡化生活的iOS App。使用該應(yīng)用程序，可以為您節(jié)約大量的訂餐等待時間，很餐廳都已經(jīng)開始投入使用該App，以方便其顧客可以提早了解其訂餐情況，包括Chili’s，Buffalo Wild Wings，F(xiàn)irst Watch等。用戶在家時，就可以隨時查看附件餐廳的當(dāng)前等待時間，然后做出決定是否前往。餐廳的圖片使用非常吸睛，整個界面看起來讓人覺得“垂涎三尺”。

6. The New York Times

類別：雜志和報紙

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

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

7. iPhone X – Todo Concept

類別：雜志和報紙

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

iPhone X – Todo Concept是由Jee-Jeong為Norde設(shè)計。它是基于iPhone X概念而制作的一個新原型。該原型的草圖和psd模型都可以免費下載。它是設(shè)計師特別為iPhone X的發(fā)布而設(shè)計的。它的動畫過度和轉(zhuǎn)換都非常流利，其色彩選擇鮮明大膽，極富感染力。留白的界面設(shè)計模式，和各種純色背景都能形成鮮明對比，突出了重要信息，又美化了界面。

8. Cloud Music Offline MP3 Music

類別：音樂

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

對于喜歡聽音樂的人來說，這是一款不容錯過的音樂應(yīng)用程序。您可以輕松地將音樂從云端下載到您的設(shè)備并脫機播放。您的設(shè)備上就是一個無限量的音樂庫。其音樂播放列表非常有趣，設(shè)置了動畫多樣的操作按鈕。整個界面白色純背景，干凈而簡潔，用戶的注意力會停留在其喜歡的音樂上，不會分散。該程序支持所有最流行的音樂文件格式：.flac .mp3，.aiff，.m4a，.wav 等等。

9. KicksOnFire: Buy Sneakers

類別：運動

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

這個應(yīng)用程序是是專為運動鞋發(fā)燒友設(shè)計的，主要是推送新款運動鞋的特別發(fā)布日期及其相關(guān)新聞。該程序是App Store下載量最大的運動鞋發(fā)布日歷類應(yīng)用程序，不僅是獲得第一手運動鞋咨詢，您還可以在這里購買您最喜愛的運動鞋。其推送會基于您的個人資料智能進行個性化的發(fā)布和價格估算。

10. Airbnb

類別：旅行

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

家喻戶曉的一款A(yù)pp，風(fēng)靡全球。當(dāng)您準備旅行，從Airbnb開始享受難忘的旅行體驗吧。這里，所有關(guān)于旅行的事情都變得更加美好，比如尋找旅行冒險，遠游或找到一個全新的地方。游客可以獲得度假屋租賃，體驗一種新體驗，并在世界各地參觀的地方。如果您有房屋待租，Airbnb也是一個最佳平臺，在這里，你絕對會當(dāng)一個優(yōu)秀的“房東”。

11. Local Weather Radar & Forecast

類別：天氣

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

該程序是一個當(dāng)?shù)赝黄菩缘奶鞖庑侣劜驛pp，也是一個美國本地，乃至世界各地的交通應(yīng)用程序。只需一個點擊，就可以來回切換地位，以便隨時查看您的朋友和家人所在地的天氣情況。該程序還可以以小時來記錄您所在地區(qū)的氣溫變化情況，形成以個獨特的“氣溫變化”列表。

12. Sofa

類別：電影，電視和書籍

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

這是一款iPhone應(yīng)用程序，是可以讓您沉浸在書籍，電影或電視節(jié)目中度過美好時光的一款A(yù)pp。您可以自定義創(chuàng)建電影，電視節(jié)目，書籍等列表，也可以將電影，電視節(jié)目和書籍添加到任何列表中。當(dāng)您需要搜索某一條目時，可以通過向下滑動操作來直接解鎖。

以上是2018年12個非常棒的iOS移動應(yīng)用程序，它們中的大部分都位于App Store排行榜的首位，下載次數(shù)和使用人數(shù)都幾位可觀?？戳诉@么多成功的iOS應(yīng)用程序，作為設(shè)計師，你有沒有思考過，這些App成功的秘訣的是什么？

不難發(fā)現(xiàn)，出色的用戶界面和用戶體驗至關(guān)重要。iOS設(shè)計主題將就明晰、尊重和深度，這意味著，在整個iOS系統(tǒng)中，文字在任何尺寸的設(shè)備上都是清晰易讀的，圖標是精確而清晰的，并且需要流暢的動畫和交互，有序的視覺層次等等。總之，您設(shè)計出來的App需要滿足用戶對質(zhì)量和功能的高期望值，才有可能成功。

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

1. 排版

1）字體

字體選擇不宜多，多則雜亂。只需使用單個字體并使用幾種字體變體即可。蘋果公司使用San Francisco，并根據(jù)產(chǎn)品功能選擇字體。例如，在iOS 7中使用Myriad（Pro）Light，在iOS 9中使用SF-UI。在iOS 10中，舊金山變體是SF UI Text和SF UI Display。你只需按照規(guī)則即可。但為了達到文字的易讀性和可讀性俱佳，關(guān)于字體選擇和字體布局，你還是要根據(jù)具體情況仔細斟酌。

2）字體大小

iOS的字體大小有其比較明確的規(guī)范，具體查看下表：

2. UI設(shè)計中的顏色

色彩的魔力不言而喻，人都是視覺性的動物。顏色可以傳達活力和信息，提供視覺連續(xù)性，響應(yīng)用戶行為提供反饋、幫助人們可視化數(shù)據(jù)。自iOS 7以來，Apple一直在為其操作系統(tǒng)界面和預(yù)設(shè)應(yīng)用程序設(shè)置色彩明朗鮮艷的調(diào)色板。關(guān)于顏色的選擇比較自由，你可以使用下面列出的默認iOS調(diào)色板，也可以自己定制，以便在同類App中可以脫穎而出。

了解更多：如何在UI設(shè)計中明智地使用顏色來創(chuàng)建完美的UI界面？

3. 圖標

iOS的圖標風(fēng)格是簡單易懂，并且專注于某個功能點或者信息點。通常情況下，iOS應(yīng)用程序需要使用到不同尺寸的圖標。比如，用戶在安裝某一App后，在主屏幕可能需要使用較小的圖標，但該程序在App Store里又需要更大的圖標。關(guān)于iOS圖標大小，也有比較明確的規(guī)范：

4. iOS 11中的更新

1）加粗的導(dǎo)航設(shè)置

這幾乎是iOS 11中最令人印象深刻的變化。使用粗體標題可以讓用戶快速了解其當(dāng)前位置，并進行快速標簽切換。

2）界面布局中的空白區(qū)域

iOS 11的標題文本包含一組元素，其中包含圖片和描述，這些元素可以保持組元素之間的較大間距。在這種情況下，設(shè)計元素保持足夠的間距并且可以用于區(qū)分不必要的裝飾元素之間的層次關(guān)系。

地址：Mockplus

作者：jongde

 轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》iOS界面設(shè)計：12個優(yōu)秀案例激發(fā)你的靈感

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

 為什么選擇藍色？

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

1、人們就是喜歡藍色

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

色彩偏好是視覺體驗中的重要一環(huán)：

2、與大自然的關(guān)聯(lián)

藍色與凈水、晴空等自然景觀能夠產(chǎn)生強烈的關(guān)聯(lián)，這提高了人們對它的喜好。

3、界面設(shè)計的通用顏色

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

4、科技創(chuàng)新感

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

5、安全感

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

6、讓產(chǎn)品看起來更加可信

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

7、色弱

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

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

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

結(jié)論

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

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

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

所以最終，用在你設(shè)計上的最佳色彩應(yīng)該是你的用戶所認為的最佳色彩。

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

原文地址：babich

譯文地址：知乎

譯者：Z Yuhan

 轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》為什么界面設(shè)計大多喜歡用藍色？

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

1. How To Set Up Photoshop For UI Design

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

2. How to Design an iPhone App in Photoshop

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

3. Design an App Landing Page in Photoshop

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

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

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

如何使用Sketch來設(shè)計手機UI界面

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

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

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

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

3. Sketch 3 for iOS App Design Step by Step

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

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

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

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

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

TIMING

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

必讀的手機界面UI設(shè)計好文

1. The 10 principles of mobile interface design

計算機和手機是人們?nèi)粘９ぷ骱蜕畋貍涞耐ㄓ嵐ぞ?。但在許多方面，手機往往更加強大，手機更加的私人化，與我們的聯(lián)系更緊密。鑒于移動手機和計算設(shè)備之間的許多差異，移動設(shè)計與桌面設(shè)計的設(shè)計大不相同。這篇文章詳細的向我們介紹了移動界面設(shè)計的基本原則，幫助設(shè)計師們開發(fā)移動應(yīng)用程序的獨特力量。

2. UI Design Do’s and Don’ts

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

3. How to use colors in UI Design

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

4. 10 Best APP UI Design for Your Inspiration

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

總結(jié)

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

原文地址：Mockplus

作者：jongde

 轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》“手把手教你設(shè)計”—12個最佳手機APP界面設(shè)計教程

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

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

*設(shè)計師：Anton Shmatko, Green Shark Studio, Pavel Khenkin

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

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

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

*設(shè)計師：Tubik

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

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

3). Listen – 音樂軟件

*設(shè)計師：CD UXT

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

*亮點：軟件整體采用經(jīng)典的藍色背景搭配白色字體和同色系圖片，更加柔和舒適。一系列插畫風(fēng)格 的場景和頻道對應(yīng)圖片，也使整個界面設(shè)計更加美觀有趣。結(jié)合明亮陰影的圖標和按鈕讓軟件對應(yīng)功能更加凸顯的同時， 更能易于用戶識別使用。 針對不同部件添加的靈活交互，也能夠使用戶具有更加流暢且愉悅的體驗。總之，它是一款以用戶愉悅體驗為基礎(chǔ)而設(shè)計的軟件原型，值得嘗試。（點擊這里查看原型詳情）

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

*設(shè)計師：Queble Solutions

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

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

5). Roomframes app – 管理型軟件

*設(shè)計師：Adrain Rudzik

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

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

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

*設(shè)計師：Melany Roa

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

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

7). Karoline – 購物軟件

*設(shè)計師：Varduhi Adami

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

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

8).Space – 管理類軟件

*設(shè)計師：Doeun Shin

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

*亮點：該軟件以插畫風(fēng)為基礎(chǔ)，添加了各式動畫按鈕及圖片，直觀生動。藍色主題，漂亮舒適，無論早上還是晚上使用，用戶都不會反感。而且，軟件本身添加多樣的功能性界面，例如語音日記，心情日歷，日常服務(wù)，節(jié)日簡介等等，簡單全面。總之是一款極具吸引力的管理軟件。

9).QuickBee – 廣告類軟件

*設(shè)計師：Monish Mohanan

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

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

10).Wallet – 理財類軟件

*設(shè)計師： uixNinja

*軟件介紹：Wallet一款能夠幫助使用者理財?shù)囊苿佣塑浖?

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

結(jié)語

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

原文地址：Mockplus

作者：jongde

 轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》10個最新優(yōu)秀手機應(yīng)用界面設(shè)計實例

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

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

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

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

如何指導(dǎo)界面設(shè)計

費茨定律應(yīng)用比較廣泛，其在移動界面設(shè)計中也有很好的啟發(fā)意義，結(jié)合費茨定律公式可以得出指導(dǎo)我們設(shè)計的三個要點：

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

根據(jù)公式，當(dāng)?shù)侥繕说木嚯x（D）一定時，目標大小（W）越大，所需時間越短，反之越長。下面以支付寶的登錄流程為例，如下圖所示：

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

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

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

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

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

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

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

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

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

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

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

在移動端界面中的應(yīng)用

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

1. 來電顯示場景——不同狀態(tài)，不同設(shè)計方式

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

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

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

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

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

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

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

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

、

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

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

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

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

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

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

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

總結(jié)

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

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

參考文獻：

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

設(shè)計法則： Fitts’ Law / 費茨定律（費茨法則）

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

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

作者：風(fēng)箏KK

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》費茨定律如何指導(dǎo)界面設(shè)計

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

Part1 界面設(shè)計工具的發(fā)展歷程

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

Part2 界面設(shè)計工具的未來發(fā)展趨勢

界面設(shè)計工具的發(fā)展改變著設(shè)計師們的工作方式。界面設(shè)計工具也漸漸從單一專注設(shè)計本身向云端性、協(xié)作性、通用性發(fā)展，旨在實現(xiàn)更高效的設(shè)計生產(chǎn)活動。

1. 云端性

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

2. 協(xié)作性

3. 通用性

Part3 界面設(shè)計工具推薦 

1. UI工具篇

1）Windows用戶也可隨心使用

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

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

3）一鍵導(dǎo)入sketch文件

4）更強大的組件功能

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

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

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

5）與代碼緊密結(jié)合

6）一鍵恢復(fù)歷史版本

7）團隊協(xié)作

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

2. 動效工具篇

Framer Web的核心亮點是什么？

1）網(wǎng)頁端全平臺可用

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

2）文件導(dǎo)入

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

3）輕松實現(xiàn)復(fù)雜動效

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

4）從設(shè)計到代碼

目前Framer Web 已經(jīng)可以實現(xiàn)導(dǎo)出相應(yīng)動效代碼，但導(dǎo)出的效果仍有待完善，只是可以導(dǎo)出Transiton的參數(shù)而已。

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

3. 插件篇

4. 協(xié)作工具篇

4.1 XSHOW

XSHOW是一款由ISUX研發(fā)的高效設(shè)計協(xié)作平臺。XSHOW連接了產(chǎn)品經(jīng)理、開發(fā)等各個不同工種，提高了設(shè)計資源輸出和分發(fā)效率。設(shè)計師將設(shè)計文件上傳到XSHOW，就可以將文件鏈接分享給產(chǎn)品經(jīng)理、開發(fā)等同學(xué)。

產(chǎn)品經(jīng)理在手機小程序上就可以預(yù)覽方案，設(shè)計師每次更新的方案也可以直接預(yù)覽。開發(fā)同學(xué)可以直接查看標注和切片。同組設(shè)計師也可以直接下載源文件、甚至查看歷史迭代版本。

XSHOW是如何實現(xiàn)高效協(xié)作的？

對于設(shè)計師

1）可視化上傳文件

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

3）靈活豐富的分享權(quán)限

對于項目管理者

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

2）方案變更及時知道

 

1 

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

對于合作產(chǎn)品經(jīng)理或甲方

1）多端查看更方便

 

2）查看歷史變更

Part 4 結(jié)語

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

作者：ISUX