大疆社区
标题: 干货！如何让你的MSDK应用程序拥有更好的UI体验 [打印本页]
作者: 如鱼得水 时间: 2020-5-26
标题: 干货！如何让你的MSDK应用程序拥有更好的UI体验
本帖最后由 如鱼得水 于 2020-5-27 13:16 编辑
原创内容，未经允许，请勿转载!
UI设计，即用户界面（User Interface）设计，即针对应用程序的特点，设计其人机交互和操作逻辑，使其具有易用性和美观性。
DJI GO（DJI GO 4）的UI设计
在Android应用设计中，Google公司提供了MaterialDesign（简称MD）的UI设计规范；在iOS应用设计中，Apple公司也提供了HumanInterface Guildeline（HIG）人机交互指南。MD和HIG为开发者提供了丰富的设计思想和设计方向，但是在基于MobileSDK进行无人机二次开发时，还需要考虑到其应用本身的特点。
本文章介绍了MSDK的重要UI设计思路和设计经验！！
1、MSDK应用程序的操作特点
MSDK应用程序与其他应用程序最为显著的区别就是：MSDK应用程序所在的移动设备是夹在遥控器上的，而一般移动程序是紧紧地握在用户手中的。
一般应用场景是这样的：
一般应用程序---单手操作手机
MSDK应用场景是这样的：
无人机应用程序---需要一只手扶着遥控器
根据这一特点，MSDK应用程序一定要遵循以下几个基本原则：
（1）禁用竖屏。
几乎在所有的应用场景下，无人机都是横置被夹在遥控器的夹子上，这样更加符合人类的视觉感官体验。因此，除了极为特殊的情况，建议所有的MobileSDK应用程序都强制使用竖屏。
哪些情况下可以使用横屏呢？例如，在Mavic Pro无人机开启了Wi-Fi遥控模式，并且进入竖拍模式下，用于自拍、直播等场景下，竖屏可能可以带来更好的用户体验，但仍然建议开发者充分考虑易用性、安全性等各种因素后再做决定。
（2）单手操作。
与手持移动设备相同的是，夹在遥控器上的MSDK应用程序同样以单手操作为主。这主要是因为用户的另一只手常常需要扶住遥控器，有时甚至需要进行拨动云台旋钮等操作。与手持移动设备不同的是，用户更加倾向于使用右手食指操作MSDK应用程序，而不是使用大拇指。由于食指接触屏幕的范围更小，且往往比大拇指更加灵活，按钮等各种控件就可以设计的更小一些，以容纳更多的控件。
单手操作
注意，对于常用的按钮控件（例如拍照、录像等）和安全性控件（如返航、取消任务等）需要适当的占据更大的屏幕位置。
（3）控件可在屏幕四周分布
对于一般的应用程序而言，无论是Android的MD设计理念，还是iOS的HIG设计理念，都建议开发者把控件放在屏幕的顶部和底部，这样更加容易操作，且可最大程度的避免误操作。由于MSDK应用程序“解放”了右手手指的位置，因此可以将各种信息展示的视图和控件摆放在屏幕的任何位置。但是为了突出主体信息（例如图传、地图等），建议将这些视图和控件放置在屏幕四周均匀分布。
控件要均匀的放在界面四周
另外，功能相关的视图和控件建议放置在一起，以便于用户的寻找和操作。
2、MSDK应用程序的安全特点。
无人机飞在天空，价格昂贵，且具有潜在的责任风险，因此MSDK应用程序必须要时刻注意让用户了解到无人机的关键信息和安全性信息。
（1）时刻显示图传影像
除特殊情况，建议开发者将图传作为应用程序的主体部分，甚至填充整个UI界面。一方面，图传影像是无人机的“眼睛”，最为直观地显示着无人机所处的位置环境，图传可以在突发情况下第一时间让用户了解到发生了什么，并作出正确的响应。
当用户需要查看其他的信息时（例如，在航测、巡检等应用场景下，用户希望打开地图了解无人机所处的地理位置，以及查看任务执行的进度等），强烈建议将图传信息以缩略图的形式占据屏幕一定的位置，提高用户操作时的自信心。
建议开发者在使用MSDK时，隐藏移动设备最上方的状态栏，让应用程序进入全屏模式。
（2）切忌使用占据整个屏幕的提示框
建议开发者杜绝使用Android中的AlertDialog 和iOS中的UIAlertController等占据整个屏幕的提示框。这些类型的提示框会严重影响用户的正常操作：一方面，突如而来的提示框会使得后方的控件暂时无法操作；另一方面，任何提示也不如让用户看到图传信息那么重要。
这种占据整个屏幕的提示框会让飞手心慌慌
这种提示就非常有效：
优秀的提示效果
（3）提高屏幕亮度
目前，任何昂贵的手机（平板）屏幕在阳光下都会显得黯然失色。在MSDK应用程序中，最好加入控制屏幕亮度的代码让屏幕保持一定的亮度，或者给予用户充分的提示来提高屏幕亮度。
（4）突出安全提示和安全选项
要始终把无人机的安全性信息和选项配置信息摆在重要的位置，特别是电池电量、无人机信号的信息，以及终止任务、返航等按钮。对于执行航点任务、时间线任务等飞行任务，开始前要把安全性信息（例如电池是否充足、距离是否过远）给予用户充分的提示。
另外，要注意安全性信息的色彩选配：红色代表严重警告、黄色代表警告、绿色代表正常。适当使用绿色提示用户也可以给予用户充分的驾驶信心，从而降低安全事故的发生率，
善用各种颜色来表示安全性信息
3、培养一致性的用户习惯
大疆官方提供了DJI GO、GS Pro等多种不同场景下无人机应用程序。在Mobile SDK应用程序开发过程中，要充分利用现有的资源，了解并参考其视图和控件的摆放方式并用于行业应用开发中。
快来下载我们吧！参考我们的UI界面
另外，对于专业化的行业应用（例如航测、巡检、植保等）而言，在iPad等平板设备具有针对性的开发应用程序，可以更加清晰地显示更多地信息和控件，从而可能能够提供更好的用户体验。
好在，大疆UX SDK提供了几乎完整的用于显示无人机信息以及具有控制功能的各种视图和视图组合。通过UX SDK，用户可以组装成另一个“DJI GO（DJI GO 4）”。但是，在使用UX SDK时，要参考官方的应用程序排放其位置，培养一致性的用户习惯，以便于获得更好的用户体验。
UX SDK的官方地址：
iOS中使用UX SDK的官方教程
Android中使用UX SDK的官方教程
| 欢迎光临 大疆社区 (https://bbs.dji.com/) |
Powered by Discuz! X3.2 |
