那么，如何设计出一款界面精美的移动端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的标题文本包含一组元素，其中包含图片和描述，这些元素可以保持组元素之间的较大间距。在这种情况下，设计元素保持足够的间距并且可以用于区分不必要的装饰元素之间的层次关系。

地址：Mockplus

作者：jongde

 转载请注明：学UI网》iOS界面设计：12个优秀案例激发你的灵感

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

1). YONO.MP3 mobile app – 音乐软件

*设计师：Anton Shmatko, Green Shark Studio, Pavel Khenkin

*软件介绍：YONO.MP3是一款即可欣赏音乐, 也可收听广播节目, 了解最新时讯和趣事的手机端音乐软件。它会是你闲暇时搜索和分享歌曲，歌手和专辑的理想工具。

*亮点：该款软件采用了一个极具特色的配色方案 — 所有界面整体使用黑红两种颜色的对比， 经典而不失大气。 而局部渐变色的使用, 也让其功能和按钮更加突出，极具层次感。而且, 软件图片, 按钮和图标的层级叠加, 也使整个界面更加的时尚柔和。总之，软件界面设计整体简洁漂亮而不失易用性。

2). Watering Tracker App – 生活类软件

*设计师：Tubik

*软件介绍：Watering Tracker app, 顾名思义，就是一款可以追踪盆栽或植物的水分情况，及时提醒用户浇水的生活类手机应用。

*亮点:首先，这种能够监测植物水分情况，通知用户浇水的创意，新颖且有趣。其次，界面背景和局部添加的绿色植物图片使整个界面更加的直观舒适，带给用户好心情。 当然，作为植物监测的工具，同时也设置了显示各株植物水分，湿度，光照之类细节信息的功能区，即点即可了解到植物的具体生长情况，简单易操作。而且，配色方面，黑色背景搭配白色和绿色图片及按钮，符合整个植物主题的同时，也更易于用户接受和使用。

3). Listen – 音乐软件

*设计师：CD UXT

*软件介绍：Listen是一款致力于为喜爱不同音乐风格的用户提供独特且愉悦体验的音乐软件。整个界面设计简洁清晰，用户可以简单的通过不同频道（例如最新歌曲，电台，主体和专辑等）和不同场景（例如驾车，运动，工作和约会等）快速的搜寻到最喜爱的歌曲。而且，软件还特别为用户提供了根据不同心情播放不同音乐列表的功能，更具个性。总之，喜欢闲暇时沉浸在自己的音乐世界的你，它会是你最佳的选择。

*亮点：软件整体采用经典的蓝色背景搭配白色字体和同色系图片，更加柔和舒适。一系列插画风格 的场景和频道对应图片，也使整个界面设计更加美观有趣。结合明亮阴影的图标和按钮让软件对应功能更加凸显的同时， 更能易于用户识别使用。 针对不同部件添加的灵活交互，也能够使用户具有更加流畅且愉悦的体验。总之，它是一款以用户愉悦体验为基础而设计的软件原型，值得尝试。（点击这里查看原型详情）

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是一款能够帮助用户更加有效的管理日常生活的手机端应用。主要提供了两项特色服务：早上，自动结合用户的日常习惯，提供有用的日程管理信息和建议，例如交通和天气情况等； 晚上，通过自动分析用户语音日记，提供符合用户心情的主体和提示音等等。

*亮点：该软件以插画风为基础，添加了各式动画按钮及图片，直观生动。蓝色主题，漂亮舒适，无论早上还是晚上使用，用户都不会反感。而且，软件本身添加多样的功能性界面，例如语音日记，心情日历，日常服务，节日简介等等，简单全面。总之是一款极具吸引力的管理软件。

9).QuickBee – 广告类软件

*设计师：Monish Mohanan

*软件介绍：QuickBee是一款广告分类管理软件，提供了生活中各个方面的信息，例如汽车，房地产，求职和教育等风方面面信息。使用者只需创建账号，即可搜寻所需生活信息，了解流行趋势，浏览各类特色广告。

*亮点：软件设计简洁，颜色搭配极佳。彩色按钮呈现多样的生活分类，整洁美观。各式框架呈现流行趋势和特色广告，简洁有序。矢量图标简单易识别。添加多种界面，满足用户各方面的需求。

10).Wallet – 理财类软件

*设计师： uixNinja

*软件介绍：Wallet一款能够帮助使用者理财的移动端软件。

*亮点：软件使用黑色，红色和紫色三种颜色的对比和渐变，极具特色，漂亮时尚。简易图标和多色几何图形，是软件界面更加简洁使用，令人印象深刻。

结语

这些就是我们所搜集的10款最新的优秀手机端软件UI设计作品。 希望他们不仅能给你新的设计带来灵感，同时也能帮助你把握和预计2018年手机应用UI设计的发展趋势。

原文地址：Mockplus

作者：jongde

 转载请注明：学UI网》10个最新优秀手机应用界面设计实例

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

费茨定律是人类运动的预测模型，主要用于人机交互和人体工程学。该法则预测光标/手指从一个起始位置移动到一个最终目标所需的时间（T）由到目标的距离（D）和目标的大小（W）所决定，用数学公式表达为时间 T =a + b log2 ( D /W + 1 )。其中a、b是经验常数，a代表手指开始到停止的时间，b代表手指的移动速度。

举个生活中一个开灯的例子：

早期的开关只有一个手指大，每次开灯的时候都需要将手移动到开关上方，然后伸出手指调整到适合位置然后在按下。由于按钮小，在没开灯的时候你根本不知道它在哪里，需要不停的摸，所需时间就比较长。后期大家意识到了这个问题，将开关按钮设计变大，人们操作时只需要将手移动到按钮上方，由于面积大不需要调整直接按下即可，所需时间就比较短。

如何指导界面设计

费茨定律应用比较广泛，其在移动界面设计中也有很好的启发意义，结合费茨定律公式可以得出指导我们设计的三个要点：

1. 按钮越大，所需时间越短

根据公式，当到目标的距离（D）一定时，目标大小（W）越大，所需时间越短，反之越长。下面以支付宝的登录流程为例，如下图所示：

左图是支付宝初始页，该页面主要让用户选择合适自己的操作方式。因此在设计上采用登录和注册按钮并排的方式，目标区域较小，给用户充分选择的时间。

中图和右图，界面中仅仅只有一个按钮，其他注册、遇到问题都可弱化用文字高亮的样式展示，用户在操作时基本不用想就知道点击下一步按钮。大大的减少了操作时间，让用户可以专注于登录上。

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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的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