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

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

2016/06/16 11442评论区

xiaomi-drones-app-design-1

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

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

xm201606155

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

1,如何定义设计的边界

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

wrj20160616 (1)

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

2,如何适配使用情景

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

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

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

wrj20160616 (2)

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

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

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

pt20160616 (2)

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

xm201606155

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

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

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

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

pt20160616 (3)

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

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

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

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

pt20160616 (1)

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

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

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

xm201606153

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

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

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

xm201606154

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

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

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

「除了无人机,设计师最应该学习的设计趋势」

提前知道进入VR领域会遇到的困难!
《亲历经验!设计师进入VR领域会遇到哪些状况?(附解决方法)》

可能是国内研究VR最深入的腾讯设计师!
《腾讯干货!设计师该怎样从3个方面学习VR设计?》

VR设计指南:
《教程来了!VR设计指南之基础概念与设计工具》

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量130万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/xiaomi-drones-app-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch UI 转场动效 界面设计 平面设计 交互设计师 设计师 扁平化设计 排版布局 职场 设计师专访 素材下载 设计流程 用户体验设计 视觉设计 配色 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 设计趋势 动效设计 psd下载 产品设计 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里