教程来了！亲历者揭秘小米无人机APP的设计之路

无人机是一个很酷的产品，小米无人机作为小米第一款无人机产品，从产品到App都是全新的尝试。今天就由小米生态链设计中心（ECOD）资深设计师成悦来聊一聊小米无人机App的设计之路。

5月25日，雷总做了一场纯直播发布会，发布了更新重量级产品-小米无人机。作为小米生态链设计团队，我们为无人机设计了手机App界面。

由于无人机本身有遥控器，手机可以架在遥控器上，App充当显示屏和仪表盘，一开始我们认为这个项目很简单，经过了深入的讨论，发现看这个似简单的项目，其实有很多挑战，主要有3点：

1，如何定义设计的边界

随着科技的发展无人机被应用到了很多领域，大到公安、消防、运输、农业、环保等，小到有不带航拍功能的玩具。我们了解到由于无人机的上手门槛较高，大部分购买无人机的用户是具有一定飞行经验的航拍爱好者，而在我们这种没玩过无人机的小白用户的印象中，这么高大上的产品好像离我们的生活有点远，而当它出现的时候我们又都特别感兴趣！

小米无人机的目标人群应该是既包含了专业素质的极客并让小白用户容易上手。那我们在界面设计上应该注意哪些问题呢？

2，如何适配使用情景

和我们做过的很多手机APP项目一样，开始我们把无人机界面当做静态APP来设计，讨论产品方向、理清交互逻辑、发散性尝试设计。几经改版模拟测试，我们发现在实际的飞行中使用起来会手忙脚乱…

3，如何让专业性的界面快速上手

无人机操作有一定的门槛，需要多加练习，除了天气、环境这种不确定因素外，无人机自身也有一定危险性。我们不希望用户在操控无人机的同时，还要因为手机APP操作的复杂性而分神。

我现在从界面更基本的形、色、布局来说说我们怎么去解决这些问题的。

1，我们想做一个有未来感的界面

无人机是一个很具有未来感的产品，所以我们希望在界面中，用户可以瞬间联想到钢铁侠、星际迷航这些酷的元素，让用户感觉在使用一个来自未来的产品。

抽象、概念化、圆、干净的曲线、刻度、没有复杂的材质表现

太空深邃的黑色、科技感的蓝、辅以橙色。

2，我们想做一个信息传递效率更高的设计

无人机有几个很重要的数据：高度、距离、信号、电量。设计之初，我们想把他当做仪表盘来做，试想当你驾驶汽车、飞机的时候，你希望仅向仪表盘瞄一眼就能得到更关键信息。

从这个出发点设计，我们发现这和高度抽象的未来感设计不谋而合。黑色的背景托着圆形的取景框，搭配高反差颜色，承载四个关键数据的大刻度条，信息更加明确，也让理解的路径更短 。

3，我们想设计一种使用情境，而不是只设计一个界面

UI设计与纯艺术的差别就是它们各自的受众人群如何理解它们所传达的消息。艺术家准备传递的观点情感，并非是说那观点或情感只有唯一的含义。而UI设计是用户的一个使用过程，要准确传达产品的操作功能，是用户与产品的桥梁而非屏障。

从这个角度思考，在进行界面的布局、交互、设计之前，更先要考虑的就是用户使用的时间、地点、状态，以及它会与你的产品有哪些特殊的瞬间。

比如说无人机在飞行过程中，用户一只手拿着遥控器，另一个手操作着APP想自定义一条飞行路线，我们可不希望他在这时候手忙脚乱的。

此时的使用情景就是把人一手持遥控器一手操作界面的情况当做一个整体设计，而不是只设计界面本身。

首先我们列出了所有功能并进行归纳整理。无人机界面比较重要的一个功能点就是可以在平面地图和实景摄像头之间进行来回的切换，并且，在两种地图模式下分别还有各自的功能操作。

如：在地图模式下可以定位、可以在地图上画航线，在摄像头模式下，可以拍照、录像、浏览图片。

考虑到习惯左手持遥控器，右手操作界面的人比较多，而界面又是横屏，左右跨度有点远，所以在界面中需要把频繁操作的功能放在右边。

于是我们把模式切换键单拎出来放在了左边，在此模式下的功能罗列到界面的右边，左边只有一个操作，其它的全在右边。

这样排布不仅方便操作，而且层级关系明确。当点击左边切换按钮的时候右侧的功能按钮也随之切换，符合用户的操作习惯。

无人机UI设计中，我们体会到了美学和信息传达的平衡点，针对一个人群进行定向设计不难，难的是如何在开始设计之前准确的定义用户边界 。

每一次设计，都像一次伟大的探险，会遇到不同的难题，不断从僵化的思维模式中走出来，再走进去，或许就有了灵感和答案。

希望大家在使用我们产品的同时，遇到问题积极反馈，帮助我们一同完善产品设计。

文章摘录链接 ：http://www.uisdc.com/xiaomi-drones-app-design#