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

Illustration: Outcrowd

1、构思仪表盘界面的大脑

让我们深入研究设计解剖学。仪表盘的“父母”是客户端、设计人员和开发人员，每个组件设计都需要他们的合作产出，所有关键点在一开始要做出说明。

智人是由胚胎发展而来的。首先形成的是脑细胞和神经细胞，然后是身体的其他细胞。这正是任何可行的项目应该遵循的方式。第一个阶段是最重要的。如果你忽视这个阶段，再花哨的设计也不能挽救局面。这正是为仪表盘的长期发展奠定基础。

仪表盘如果会说话的话，它会问“我为什么出生？谁需要我?“。

试问你能回答吗？因此你需要明确:

• 仪表盘将如何助力公司目标?
• 什么结构，功能和视觉效果将帮助仪表盘服务好用户?
• 哪种设计最适合目标受众?

这些问题的答案将构成你的设计理念基础。

Perls

仪表盘中没有琐碎的细节。

仪表盘显示的信息应该使用户能够做出决策。设计师的工作是帮助用户解决问题，而不是让他们使用一堆很酷的小工具。任何对目标不起作用的事情都会与目标背道而驰。

从项目的最初阶段到最后阶段，设计师必须关注公司的目标、仪表盘的目标和用户的目标。

否则，仪表盘将永远不会做的更好。

Clover

2. 数据及关键指标选择:循环系统

仪表盘数据就像循环的血液。我们必须理解它们来自哪里，当用户需要它们时如何处理，以及应该如何可视化。

设计师需要理解数据的目的。显然，这将帮助他们选择合适的组件，但还有更多的工作要做。例如，用户希望在屏幕上看到大量不同的读数。你不需要移除任何东西来清除一些空间，但你可以做的是突出最重要的元素，并在视觉上“弱化”次要的东西。然而，要做到这一点，你必须知道数据的优先级。

Bidding Car

最重要的指标是哪些数据能帮助达成目标。例如:

• 显示实际成功率;
• 影响产品的感知方式;
• 激励创造产品的团队。

参数的选择也需要了解用户。用户应该看到哪个关键指标，他们认为什么样的可视化表现最容易理解？

人们喜欢看到与他们的目标相符的数字。

Panch

3. 仪表盘结构:骨架

想象进入一个酒店房间，看到一张床，一张桌子和椅子，一面镜子和一个壁橱。甚至不用打开壁橱，你就能猜到里面有什么。吹风机、拖鞋和毛巾都在你想要的地方——有人确保了这些。一个好的仪表盘就像那个房间。它是干净的，整洁的，可预测的。你马上就能看到所有的要点，凭直觉知道在哪里可以找到其余的内容。

设计师有自己的工具来确保整洁。

1) 层次结构

首先，你得整理思绪。在开始设计之前，一定要对所有数据进行排序，将其分类，了解什么是最先发生的，什么是最后发生的，接下来是什么等等。确定用户必须马上看到的关键内容。

视觉层次结构必须反映信息层次结构。

数据层次结构通过小组件的大小和位置表示。如果你的读者从左到右阅读，关键信息必须放在左上角，最不相关的信息将在右下角。

对数据排序的方法将取决于仪表盘的用途。重要的是根据信息的优先级组织信息，并创建逻辑场景。

把信息面板看作是一个故事，而不是一系列数据点。

2) 网格

网格对于创建页面的总体布局、排序、平衡和对齐元素非常有用。

3) 信息模块

模块系统类似于公寓的分区。卧室是用来睡觉的，餐厅是用来吃饭的——每个区域都有自己的功能。你的舒适度取决于他们所处位置的便利程度。糟糕的布局不能通过装修或家具来修复。相应地，必须提前考虑模块划分。

模块帮助显示内容层次结构，根据数据的重要性、相关性和逻辑连接对数据进行分组。每个模块都应该在给定的流程中服务于特定的目的。

4) 连续性和接近性

如果你去厨房需要经过有两扇门的走廊，这是一个糟糕的布局。互连的流程假定逻辑接近。如果一个模块中的流程需要来自另一个模块的信息，那么布局上应该保证数据的连续性。这一点必须提前考虑，这样用户就不必在晦涩的存储空间中寻找他们需要的信息。

Illustration: Outcrowd

所有相关信息都应按重要到不重要的顺序进行分组，并就近放置。

5) 分离模块

没有人需要一个延伸到卧室的厨房。为了将一个模块与另一个模块分开，你需要负空间。确保从一开始就考虑到这一点:将负空间视为需要视觉平衡的设计元素的组合。

Wingle

4. 功能:肌肉

功能和工具的数量由仪表盘的用途及其用户的关键目标决定。

要想自由活动，人类只需要两条腿，狗需要四条腿，蜘蛛需要八条腿。一个功能太多的仪表盘就像一条六条腿的狗一样，这有点令人毛骨悚然。

不要在控制面板上放置过多的工具。用户只需要手边有必要的东西。过多的可用工具会让人们感到困惑，并吓走他们，因为它看起来太复杂了。个性化总是比标准化好。

Band

5.小组件:重要的器官

如果屏幕上有超过5到7个小组件，人们就很难理解内容。因此，我们的工作是让相关数据易读，但不过量。用户应该在几秒钟内理解他们所看到的内容。

数据可视化工具包括:

• 表格
• 图表
• 示意图
• 卡片
• 指标
• 地图
• 图片
• 分组
• 筛选器
• 列表
• 选择树

Activity

小组件的选择取决于仪表盘的用途和用户。想想以下几点:

• 哪个组件能最好地显示一个特定的KPI?
• 用户可以立即看到什么?
• 哪个组件是用户最容易理解的?
• 什么可以帮助用户更快地找到他们需要的东西?

选择易于理解和阅读的小组件。

这里是一个令人困惑的小组件的例子:

想想主要的“目标”来吸引用户的注意力。例如，如果你的优先级是绩效目标，你应该使用数字;如果你需要比较值，用直线或柱状图会很好;为了激励团队，可以使用带有相关亮点的排行榜。

不正确选择的小组件或默认小组件模板可能会使用户混淆或导致他们误解数据。

最好的解决方案是分析和测试的结果。

最好的小组件设计是极简和易于阅读的。例如，一个3D图表可能看起来令人印象深刻，但它占用了用户太多的注意力，最终证明会分散用户的注意力。这也适用于渐变、过度使用颜色和过多的细节。

6. 视觉设计:一般技巧

我们已经创建了仪表盘的思想和身体。唯一要做的就是皮肤——最外层。这可以根据优秀设计的基本原则来实现，但仍有一些新的需要注意的细节。

1) 简单

仪表盘应该像你喜欢工作的桌子一样干净:它必须只有必要的文件和工具，没有干扰。

MEMO

2) 颜色

仪表盘颜色的选择必须有一个目的:尽可能清晰地显示信息。颜色跨度越大，就越难把数据展示清晰。所以不要让仪表盘的颜色过多。使用同一颜色的深浅是一个好的办法。

首先要选择底色，然后是补色。每种颜色都必须有特定的用途。一种颜色可以用来组合元素，另一种颜色可以用来高亮。颜色还能体现一个元素是积极的还是消极的。

避免使用可能有负面含义的颜色。例如，在这个例子中，红色看起来像是代表坏的和不受欢迎的东西:

如果仪表盘提供了可定制的颜色，确保所有可用的选择看起来都比较舒服。

选择颜色组合的一个好工具是Adobe color CC。

3) 突出

语义高亮应该与视觉高亮相对应。为了突出一个元素，你可以使用颜色(对比度，亮度)，形状，大小，负空间等。

4) 可读性和数字格式化

这是确保视觉清晰度的重要因素:干净的布局，视觉层次，重点突出，对比元素，适当的字体，这些字体也必须具有对比性和易读性。

高精度的数字格式很难理解。最好把所有的数字都四舍五入，然后把较长的数字尾巴去掉。

7. 适应性

在实践中，当用户优先考虑桌面版本时，在移动版本之前创建网页版本是合理的。如果你的目标用户主要使用的是手机版本，那么你可以先从移动设备着手构建仪表盘，然后再开发桌面版本。

Snap

总结

设计一个好的仪表盘不是一件容易的事情。我们把它比作人类的发展，因为它是一个很好的方式来呈现重要的东西。当你在设计仪表盘时，请不断地问自己:是否一切都已就绪？有多余的肢体吗?身体的各个部位协同工作吗?用户会喜欢这个结果吗？它有用吗？

正如你所看到的，视觉设计实际上是设计师最不应该担心的事情。

最后，彩云再分享一组常用的后台图表界面组件库，相信会对大家的日常设计工作有帮助，

本文翻译已获得作者的正式授权。

原文地址：medium

作者：Erik Messaki

译文地址：彩云译设计（公众号）

译者：彩云Sky

转载请注明：学UI网》后台界面设计的7条原则

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

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

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

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