教程來了！親歷者揭秘小米無人機(jī)APP的設(shè)計(jì)之路

無人機(jī)是一個(gè)很酷的產(chǎn)品，小米無人機(jī)作為小米第一款無人機(jī)產(chǎn)品，從產(chǎn)品到App都是全新的嘗試。今天就由小米生態(tài)鏈設(shè)計(jì)中心（ECOD）資深設(shè)計(jì)師成悅來聊一聊小米無人機(jī)App的設(shè)計(jì)之路。

5月25日，雷總做了一場(chǎng)純直播發(fā)布會(huì)，發(fā)布了最新重量級(jí)產(chǎn)品-小米無人機(jī)。作為小米生態(tài)鏈設(shè)計(jì)團(tuán)隊(duì)，我們?yōu)闊o人機(jī)設(shè)計(jì)了手機(jī)App界面。

由于無人機(jī)本身有遙控器，手機(jī)可以架在遙控器上，App充當(dāng)顯示屏和儀表盤，一開始我們認(rèn)為這個(gè)項(xiàng)目很簡(jiǎn)單，經(jīng)過了深入的討論，發(fā)現(xiàn)看這個(gè)似簡(jiǎn)單的項(xiàng)目，其實(shí)有很多挑戰(zhàn)，主要有3點(diǎn)：

1，如何定義設(shè)計(jì)的邊界

隨著科技的發(fā)展無人機(jī)被應(yīng)用到了很多領(lǐng)域，大到公安、消防、運(yùn)輸、農(nóng)業(yè)、環(huán)保等，小到有不帶航拍功能的玩具。我們了解到由于無人機(jī)的上手門檻較高，大部分購(gòu)買無人機(jī)的用戶是具有一定飛行經(jīng)驗(yàn)的航拍愛好者，而在我們這種沒玩過無人機(jī)的小白用戶的印象中，這么高大上的產(chǎn)品好像離我們的生活有點(diǎn)遠(yuǎn)，而當(dāng)它出現(xiàn)的時(shí)候我們又都特別感興趣！

小米無人機(jī)的目標(biāo)人群應(yīng)該是既包含了專業(yè)素質(zhì)的極客并讓小白用戶容易上手。那我們?cè)诮缑嬖O(shè)計(jì)上應(yīng)該注意哪些問題呢？

2，如何適配使用情景

和我們做過的很多手機(jī)APP項(xiàng)目一樣，開始我們把無人機(jī)界面當(dāng)做靜態(tài)APP來設(shè)計(jì)，討論產(chǎn)品方向、理清交互邏輯、發(fā)散性嘗試設(shè)計(jì)。幾經(jīng)改版模擬測(cè)試，我們發(fā)現(xiàn)在實(shí)際的飛行中使用起來會(huì)手忙腳亂...

3，如何讓專業(yè)性的界面快速上手

無人機(jī)操作有一定的門檻，需要多加練習(xí)，除了天氣、環(huán)境這種不確定因素外，無人機(jī)自身也有一定危險(xiǎn)性。我們不希望用戶在操控?zé)o人機(jī)的同時(shí)，還要因?yàn)槭謾C(jī)APP操作的復(fù)雜性而分神。

我現(xiàn)在從界面最基本的形、色、布局來說說我們?cè)趺慈ソ鉀Q這些問題的。

1，我們想做一個(gè)有未來感的界面

無人機(jī)是一個(gè)很具有未來感的產(chǎn)品，所以我們希望在界面中，用戶可以瞬間聯(lián)想到鋼鐵俠、星際迷航這些酷的元素，讓用戶感覺在使用一個(gè)來自未來的產(chǎn)品。

抽象、概念化、圓、干凈的曲線、刻度、沒有復(fù)雜的材質(zhì)表現(xiàn)

太空深邃的黑色、科技感的藍(lán)、輔以橙色。

2，我們想做一個(gè)信息傳遞效率更高的設(shè)計(jì)

無人機(jī)有幾個(gè)很重要的數(shù)據(jù)：高度、距離、信號(hào)、電量。設(shè)計(jì)之初，我們想把他當(dāng)做儀表盤來做，試想當(dāng)你駕駛汽車、飛機(jī)的時(shí)候，你希望僅向儀表盤瞄一眼就能得到最關(guān)鍵信息。

從這個(gè)出發(fā)點(diǎn)設(shè)計(jì)，我們發(fā)現(xiàn)這和高度抽象的未來感設(shè)計(jì)不謀而合。黑色的背景托著圓形的取景框，搭配高反差顏色，承載四個(gè)關(guān)鍵數(shù)據(jù)的大刻度條，信息更加明確，也讓理解的路徑更短 。

3，我們想設(shè)計(jì)一種使用情境，而不是只設(shè)計(jì)一個(gè)界面

UI設(shè)計(jì)與純藝術(shù)的差別就是它們各自的受眾人群如何理解它們所傳達(dá)的消息。藝術(shù)家準(zhǔn)備傳遞的觀點(diǎn)情感，并非是說那觀點(diǎn)或情感只有唯一的含義。而UI設(shè)計(jì)是用戶的一個(gè)使用過程，要準(zhǔn)確傳達(dá)產(chǎn)品的操作功能，是用戶與產(chǎn)品的橋梁而非屏障。

從這個(gè)角度思考，在進(jìn)行界面的布局、交互、設(shè)計(jì)之前，最先要考慮的就是用戶使用的時(shí)間、地點(diǎn)、狀態(tài)，以及它會(huì)與你的產(chǎn)品有哪些特殊的瞬間。

比如說無人機(jī)在飛行過程中，用戶一只手拿著遙控器，另一個(gè)手操作著APP想自定義一條飛行路線，我們可不希望他在這時(shí)候手忙腳亂的。

此時(shí)的使用情景就是把人一手持遙控器一手操作界面的情況當(dāng)做一個(gè)整體設(shè)計(jì)，而不是只設(shè)計(jì)界面本身。

首先我們列出了所有功能并進(jìn)行歸納整理。無人機(jī)界面比較重要的一個(gè)功能點(diǎn)就是可以在平面地圖和實(shí)景攝像頭之間進(jìn)行來回的切換，并且，在兩種地圖模式下分別還有各自的功能操作。

如：在地圖模式下可以定位、可以在地圖上畫航線，在攝像頭模式下，可以拍照、錄像、瀏覽圖片。

考慮到習(xí)慣左手持遙控器，右手操作界面的人比較多，而界面又是橫屏，左右跨度有點(diǎn)遠(yuǎn)，所以在界面中需要把頻繁操作的功能放在右邊。

于是我們把模式切換鍵單拎出來放在了左邊，在此模式下的功能羅列到界面的右邊，左邊只有一個(gè)操作，其它的全在右邊。

這樣排布不僅方便操作，而且層級(jí)關(guān)系明確。當(dāng)點(diǎn)擊左邊切換按鈕的時(shí)候右側(cè)的功能按鈕也隨之切換，符合用戶的操作習(xí)慣。

無人機(jī)UI設(shè)計(jì)中，我們體會(huì)到了美學(xué)和信息傳達(dá)的平衡點(diǎn)，針對(duì)一個(gè)人群進(jìn)行定向設(shè)計(jì)不難，難的是如何在開始設(shè)計(jì)之前準(zhǔn)確的定義用戶邊界 。

每一次設(shè)計(jì)，都像一次偉大的探險(xiǎn)，會(huì)遇到不同的難題，不斷從僵化的思維模式中走出來，再走進(jìn)去，或許就有了靈感和答案。

希望大家在使用我們產(chǎn)品的同時(shí)，遇到問題積極反饋，幫助我們一同完善產(chǎn)品設(shè)計(jì)。

「除了無人機(jī)，設(shè)計(jì)師最應(yīng)該學(xué)習(xí)的設(shè)計(jì)趨勢(shì)」

提前知道進(jìn)入VR領(lǐng)域會(huì)遇到的困難！
《親歷經(jīng)驗(yàn)！設(shè)計(jì)師進(jìn)入VR領(lǐng)域會(huì)遇到哪些狀況？（附解決方法）》

可能是國(guó)內(nèi)研究VR最深入的騰訊設(shè)計(jì)師！
《騰訊干貨！設(shè)計(jì)師該怎樣從3個(gè)方面學(xué)習(xí)VR設(shè)計(jì)？》

VR設(shè)計(jì)指南：
《教程來了！VR設(shè)計(jì)指南之基礎(chǔ)概念與設(shè)計(jì)工具》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量130萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com