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咨询、用户体验公司、软件界面设计公司

背景

活动类项目由于具有玩法时效性强的特点，经常需要快速上线，但是需求变更频繁、方案难以达成共识、上线物料被忽略等“地雷”遍布项目进程之中，如果不幸“踩到引爆”，必然严重影响上线速度。交互设计师作为项目链条中承上启下的重要一环，可以通过提前介入、专业支撑等“排雷”策略对项目高效准时上线起到十分重要的促进作用。

笔者从2019年全面负责网易云音乐会员营收活动的交互设计工作，对从交互侧保证活动类项目高效协作和快速上线有一些思考。现按照一般活动类项目必经的项目立项阶段、项目执行阶段、项目收尾阶段来梳理出影响活动快速上线的“地雷”，并且输出对应的策略，希望对其他做活动类项目的交互设计同学有所帮助。

一、项目立项阶段

项目立项阶段主要有两个“地雷”，一个是运营玩法和策划需求变更，一个是业务细节和熟识度不足导致的设计返工。交互设计师可以通过提前介入、整体活动逻辑可视化的梳理来避开“踩雷”，下面将分别阐述。

1.排除“运营玩法和策划需求变更”的地雷

提前介入，从用户体验和开发成本角度管理运营玩法和策划需求。众所周知，一个活动从发起到下线流程如下图， 笔者一般是在运营立项阶段就开始介入项目，这个阶段运营往往会有很多玩法的脑爆idea，且开发资源尚未介入，交互设计师一定要站好这个节点的“岗”，防止有纰漏的玩法方案溜进需求池。

提前参与玩法需求讨论可以让我们更全面地了解活动目标、针对人群，以及运营想推的活动玩法，在想法产生之初通过交互设计师的专业建议使活动玩法更加落地可行、体验优雅、带来更多转化，降低返工可能性，提升上线效率。此时交互设计师一方面要站在用户体验角度上跟运营说明哪些idea会增加用户认知和操作成本，降低活动转化率，以及优化建议；另一方面站在开发角度跟运营说明哪些想法开发成本高，可能在限定的日期无法上线，如果坚持要做的话，需要与开发同学确认技术方案或申请更多研发资源；第三方面是基于交互设计师对用户心理学天然的了解，建议运营同学如何在活动中利用诱饵效应、从众效应、目标阶梯效应等方法提升用户的转化。

大家一定要谨记“提前介入”，否则等idea经过运营策划立项后推进到交互阶段发现问题要修正的话，会浪费极多的项目时间和团队精力。一方面是因为重新组织各方讨论的协调难度很大；另一方面是因为运营和策划已为玩法需求付出很多时间和精力，过程中必定相互洗脑要推的方案是可行且完美的，说服他们接受新修改意见的沟通难度和耗费的时间成本可想而知。

2.排除“业务玩法、技术方案等理解不足导致设计返工”的地雷

活动立项之后，尽可能地梳理完整的业务流程图、功能流程图。对于一些复杂的活动，业务流程图一定要输出（也可以和策划协作一起输出，或者规定让策划同学输出）。梳理业务流程图的过程就是理解活动玩法的过程，将运营用文案表达的玩法规则进行可视化。业务流程图可以让各方对活动玩法、流程、功能状态流转一目了然，便于让各方发现新的问题点，及时修订。梳理功能流程图是促使策划和开发将项目中所应用功能的技术方案一一确认，减少后续设计阶段的变数，增加输出设计文档的确定性。

如果对规则和玩法复杂的活动没有清晰的理解就盲目开始设计，很容易囿于细节而失去全局概念，后期如果规则玩法、活动流程或技术方案稍改就会被推倒重来，做很多无用功，耽误上线时间。

二、项目执行阶段

项目执行阶段主要有三个“地雷”，一个是设计方案输出效率低，二是各方信息没有对齐，三是开发过程中各方沟通不顺畅。交互设计师可以通过模块化的组件设计、组织交互评审会和及时跟进开发测试中的突发问题来避开，下面将分别阐述。

1.排除“设计文档输出效率低”的地雷

在以往的活动中，我们搭建的活动配置后台里已经沉淀了很多复用性高的组件，可以用组件像乐高积木一样快速搭建普通活动，这种方式可以极大的提高活动上线效率。

一些新玩法活动现有组件无法满足，需要梳理后设计控件的样式（采用按键、热区、上下结构、左右结构等）。组件交互设计的优先级是：稳定性-易用性-拓展性。所谓稳定性是活动组件设计的第一大原则，需要交互设计师尽量保证组件逻辑简单、开发难度低且能承受活动短时间高并发环境的压力，这样才能保证开发同学在较短时间内快速上线且bug少。所谓易用性是易于用户理解和操作，这直接关系到用户在此组件触点的转化率。所谓拓展性是两方面：一是后续可以应用到其他活动中，二是为活动的视觉设计阶段保留了更多样式发挥的可能性；拓展性强的组件可以在后续活动配置中持续使用，长期来看可提升活动上线效率。

2.排除“各方信息没有对齐”的地雷

交互评审是促进各方信息对齐的最最重要的扫雷秘诀。因为交互设计师需要将运营玩法、产品需求、业务逻辑，以及用户体验相结合，转化为各方可见可理解的低保真模型，所以交互评审十分重要，即使时间再紧也不可或缺。

交互评审的目的是让运营、策划、视觉、前后端开发、测试同学更加直观和形象的了解活动上线的大致呈现效果。运营和策划可以据此判断方案是否符合他们的需求，视觉可以构思活动页面的装饰元素和视觉风格，研发可以据此确定前后端接口、评估开发工作量和预估工时，测试同学可以以此来进行测试用例的输出。

评审方案的时候有两个技巧可以提升评审效率。一是按照活动前中后三个阶段来给大家进行讲解，这样会让各方更易理解。二是前端组件样式和对应的后台配置一起讲，这样不仅可以方便运营同学知道如何配置，和各配置项在前端如何展示，也方便开发同学快速梳理数据接口和核对参数。

交互设计师针对会上的功能点实现问题、前后端配置问题等暂时不能确定的，会后一定要拉各方核对定稿。即使活动上线周期十分紧急，也一定要进行交互评审，磨刀不误砍柴工，千万不能为了省时间而省略该步骤，否则各方在信息没有对齐的情况下按自己的想法推进，一旦出现执行偏差，必将需要更多的时间来弥补。

3.排除“视觉、开发和测试过程中各方沟通不顺畅”的地雷

视觉设计过程中，视觉同学对活动控件有新的想法或做了方案调整，需要及时沟通确认调整后的方案仅仅是样式的变更还是修改了控件的逻辑或字段，一方面需要确定视觉改动是否可接受，另一方面如果改动控件逻辑或字段的话需要找对应开发同学沟通，看是否增加开发难度和工作量，是否会影响上线时间。

开发过程中，开发、测试同学中对于交互文档中的细节有疑问时，交互设计师需要及时答疑。部分功能或流程因为技术实现问题或开发周期问题，需要组织各方沟通讨论出新的替代方案时，交互设计师要对设计方案进行及时修订并将修订记录同步全组。

测试验收过程中，测试同学完成第一轮冒烟测试后，交互设计师就可以进行交互走查验收。第一，将走查发现的问题创建验收清单，采用有道云协作来创建截图、问题、终端、备注的表格，将走查过程中发现的问题整理进去，便于测试、开发同学查看和跟进。第二，确定修bug的优先级，按照普通用户参与活动路径设立优先级，及时跟进和更新修bug的结果，上线前一定要再走查一遍，防止一些修好的bug复发和一些修bug过程中新产生的bug。第三，关注高并发压测环境下可能出现的问题，如果时间紧急没法变更技术方案，就需要通过采用用户体验的方法来进行引导或补救。

为了保证各方沟通顺畅，除了及时跟进处理各方遇到的问题外，交互设计师需将每日跟进的沟通结果和修订记录在项目组里同步。这样一方面让运营、策划、开发、项目管理等各方了解项目最新变动和进度；另一方面营造一种大家共同推进活动的感觉，让项目组同事更愿意相互协作配合工作。

三、项目收尾阶段

项目收尾阶段主要是物料准备不充分的“地雷”，交互设计师可以通过走查物料准备情况来避开。

排除“物料准备不充分”的地雷

活动项目中有很多物料需要准备，在线上活动项目中设计师需要重点关注的是活动冷启动阶段前置假写数据的准备和上线预演。假写数据的益处显而易见，例如在某些活动中前置假写的弹幕数据可以在冷启动阶段很好的营造场面热烈的氛围，激励用户“从众心理”参与活动，但在真实数据进入后要立即清理掉假数据避免造成用户信任危机。

活动上线前各方联调时，由于大家都忙于走查功能、合并代码、准备预发等，经常会出现假写数据准备不充分或者遗漏的情况，这个阶段交互设计师一定要检查到位，并且确定假写数据的上下线策略。

总结

交互设计师也可以在整个项目过程中实时收集各方从项目立项到项目收尾过程中对活动项目的想法和建议，包括玩法策略、业务逻辑、交互视觉设计、开发过程等，一些好的建议可以在后续开发中推行，让项目协作更加顺畅，项目上线更加快速高效。

以上是我在近两年时间参与活动类项目过程中，交互设计师促进活动类项目快速上线的一些经验沉淀。虽然不同公司、项目在活动流程、团队协作中有所差异，但交互设计师在项目前、中、后阶段遇到的“地雷”大致相似，希望对大家有所帮助。

转载请注明：学UI网》为了活动快速上线，交互设计师是如何“排雷”的？

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

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

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

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

二、看优秀的交互文档 

目前我觉得交互流程标注比较好的展示方式，是按照一个主流程在一个站点地图/画板的形式展示。当一个主流程中存在几个支线操作流程时，可以分别在一个站点地图/画板中，展示出来。同时用标题区分说明分支流程的操作名字。如下图所示：

全局断网：一般是在首页使用tips提示。用户在其他界面点击操作时，也会出现toast反馈提示用户。也有一些app在用户进入出现对话框提示用户网络异常。相对于对话框，使用tips对用户的干扰更小。

操作成功：一般操作成功都是根据具体的使用场景对出对应的提示。

操作失败：异常情况导致操作失败，这时需要统一的提示，通常使用toast，也有一些使用对话框强提示用户。

加载：涉及到全局加载和局部加载，全局加载在设计中要统一说明，例如上一个界面点击进入下一个界面，使用的全局加载就需要说明。如果是一些小场景的加载，那么需要特殊说明。例如上拉加载，下拉加载，局部小区域加载等。

1.初始状态的定义：初始化状态，没有任何内容，需要用户进行某种操作才能产生内容的界面。

2.清空状态的定义：通过删除或其他用户操作，清空当前的页面内容，产生了空界面，这时候需要有明确的提示，且告知用户该如何处理。

3.出错状态的定义：由于网络、服务器或者没有找他其他结果等原因导致无法加载内容，产生了空界面，这时候需要有明确的提示，且告知用户该如何处理。用户操作反馈的无结果界面也可以用这样的思路来设计。

三、思考设计背后的逻辑 

这样的改版，作为设计师或者产品经理，应该从两方面来看待这个事情，即从产品诉求和用户诉求双方面来看待，从两个方面看待得到的结果是迥然不同的。

产品诉求角度：新版将用户下单的状态显示在首页可提升首页访问深度和曝光率。

个人中心订单页并不能做到流量的二次利用。这也是这次改版的主要原因。

以前用户查看订单状态都是只能去订单页面，路径较长，且订单页面没有产品曝光，无法进行其他转化，流量无法被多次利用。

所以将用户的订单状态这种高频操作放置于首页，可利于其他业务的曝光。

美团的吃喝玩乐，其他业务被用户查看的概率提升。对产品来说是有巨大的好处。

用户诉求视角：将用户订单状态放于首页，用户的使用场景，会不时的查看订单状态，放置于首页可方面快捷的提供用户查看订单状态，对用户来说体验好。

从用户诉求和产品的诉求来看，这次改版应该是很优秀的。

但是脱离于个体业务，从产品全局来看，这种设计的逻辑方式，会让用户对于app的信息的寻找逻辑进行颠覆和破坏。

以后是不是重要的东西都可以放置于首页？如果这个改版开了个头，以后其他业务也都有这个诉求，整个产品的生态都会失去控制。

四、总结设计方法 

设计师接到的设计需求，大部分情况下是通过产品经理那里获得的。而产品经理的原始需求来源于：业务方、用户和老板。

产品经理会将原始需求进行整理，从而转化成产品需求，在这一过程中产品经理可能会出现对原始需求的理解出现偏差（范围扩大、范围缩小或者是方向错误）。

设计师如果直接拿着产品需求就开始做设计，可能会导致设计方案不符合业务需求。所以设计师进行设计前，最好也了解原始需求是怎么样产生的，这样才能做到心中有数。

• 提升清理缓存的成功率；
• 和开发沟通，是否有更好的更改缓存机制；
• 通过设计的手段引导用户清理缓存垃圾等。
• 是否可以增加自动清理功能。

例如注册流程/绑定银行卡的过程中，总的转化率只有0.06%，用户完成率过低，如果要优化整个用户注册操作流程，那么需要找出流失过大的节点进行优化。

从数据可以看出有两个失败率最高，分别为：注册流程和绑定银行卡流程。

以表单设计为例。常见的设计方案，是将所有的表单内容按照分组的方式，进行排列，如下图所示：

但是这种方案存在一个问题，用户进来之后，发现有大量的信息需要填写，填写压力大，导致用户的填写意愿变弱，导致提交成功率降低。

下图左边为分步设计，右图为表单信息隐藏到下一级页面。

4、切换用户视角

五、项目复盘 

1、提升设计师多种设计方法能力

2、提升设计师整体设计思维推导能力

3、提升设计师整体汇报、述职和晋升答辩能力

所以在工作中，每做完一个重要项目都要做好项目复盘。这样的话，既是是阶段性工作的总结，也是为下一次做项目提供更好的经验。

复盘的方法有多种，可以结合设计方法来做总结，在复盘的过程中，要体现最终的结果，即通过数据或用户反馈对我们设计验证。

也要总结其中的不足，为之后工作中避免踩坑，并更好的为以后的工作提供服务。

 转载请注明：学UI网》译文|交互设计不只是流程图与点击

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

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

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

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