基于即時(shí)設(shè)計(jì)平臺(tái)的無人物流車智能終端UI 設(shè)計(jì)

劉余東，全嘉樂，唐丹娜

（南京理工大學(xué)，南京 210000）

運(yùn)用UI（User Interface）技術(shù)，將數(shù)據(jù)（通過模擬或者采集）映射為可視化的圖形、動(dòng)畫或者視頻并允許用戶對(duì)數(shù)據(jù)進(jìn)行交互分析的這項(xiàng)技術(shù)稱為數(shù)據(jù)可視化。在智能終端UI 設(shè)計(jì)中，數(shù)據(jù)可視化是非常重要的內(nèi)容，針對(duì)的設(shè)計(jì)主要是數(shù)據(jù)的呈現(xiàn)方式，其主要內(nèi)容包括背景圖、數(shù)據(jù)的動(dòng)態(tài)演示和圖標(biāo)的顯示等。用戶的體驗(yàn)隨著UI 設(shè)計(jì)界面可視化程度的提高而提高。相反，如果UI 界面直觀性較差，用戶便難以理解數(shù)據(jù)含義。因此，數(shù)據(jù)可視化呈現(xiàn)的是基于應(yīng)用層面的數(shù)據(jù)結(jié)果，UI 設(shè)計(jì)符合要求且較直觀時(shí)，才能滿足設(shè)計(jì)需求，提高體驗(yàn)度和可視化結(jié)果。

目前，伴隨著物流行業(yè)的快速發(fā)展和物流技術(shù)的不斷創(chuàng)新，無人物流車已逐漸成為快遞送貨的一種新趨勢(shì)，對(duì)于無人車UI 的優(yōu)化需求日益增加。在UI 方面，UI 設(shè)計(jì)的好壞直接影響用戶的操作體驗(yàn)，當(dāng)下主流的無人物流車大多只支持一人輸入取件碼取件，取件的效率并不高。智能終端UI 界面中呈現(xiàn)出的數(shù)據(jù)結(jié)果是一種基礎(chǔ)數(shù)據(jù)過程的動(dòng)態(tài)演化過程，在后臺(tái)要有明確的目標(biāo)再圍繞用戶需求進(jìn)行設(shè)計(jì)。后臺(tái)界面（運(yùn)營型和分析型）也都是根據(jù)功能需求進(jìn)行數(shù)據(jù)可視化操作，之后便設(shè)計(jì)加工數(shù)據(jù)前臺(tái)的呈現(xiàn)效果。數(shù)據(jù)在后臺(tái)界面中表現(xiàn)的更加復(fù)雜，尤其是當(dāng)數(shù)據(jù)類型較多時(shí)；靜態(tài)數(shù)據(jù)和動(dòng)態(tài)數(shù)據(jù)都需要根據(jù)數(shù)據(jù)變化結(jié)果呈現(xiàn)在前臺(tái)，展示出數(shù)據(jù)的指向性作用。

其次智能UI 的數(shù)據(jù)優(yōu)化方面，路徑規(guī)劃作為智能駕駛和機(jī)器人技術(shù)中的關(guān)鍵技術(shù)之一，逐漸成為相關(guān)領(lǐng)域的研究熱點(diǎn)[1]，現(xiàn)在大多數(shù)的路徑規(guī)劃用的是RRT 路徑規(guī)劃算法[2-4]，A*算法及其改進(jìn)算法[5-6]等。此外，為了實(shí)現(xiàn)流程優(yōu)化，路徑優(yōu)化設(shè)計(jì)必不可少。路徑規(guī)劃的主要目的是尋找起點(diǎn)與終點(diǎn)的最短路徑以提高配送的效率[1]。近年來隨著計(jì)算機(jī)計(jì)算能力的不斷提升，新的更加優(yōu)秀的算法在被不斷提出與被應(yīng)用，同時(shí)在原有的優(yōu)化算法基礎(chǔ)上，針對(duì)不同優(yōu)化問題的改進(jìn)算法也是層出不窮[7]。本方案路徑優(yōu)化設(shè)計(jì)采用的是遺傳算法，近年來遺傳算法在國內(nèi)外備受重視，普遍應(yīng)用于機(jī)器學(xué)習(xí)、人工智能等方面。

因此，本系統(tǒng)采用深圳市利豪捷工控有限公司旗下的12.1 寸觸摸顯示屏作為硬件基礎(chǔ)，使用即時(shí)設(shè)計(jì)APP 作為軟件基礎(chǔ)，配合支持多人取件、支持寄件和路徑規(guī)劃等功能，提出了一套能夠?qū)崿F(xiàn)讓用戶知曉無人物流車的狀態(tài)和任務(wù)進(jìn)度、能多樣化地取件和寄件，如掃碼、觸摸等，同時(shí)也能便于管理員管理的一套智能無人車的流程優(yōu)化方案。

1 實(shí)驗(yàn)部分

1.1 硬件設(shè)計(jì)模塊

硬件方面本套優(yōu)化方案采用的是利豪捷的12.1寸觸摸顯示屏，該顯示器的具體參數(shù)如下：分辨率為1 280×800，可視角為85（L/R/U/D），顏色為16.7 M，亮度大于350 cd/m3，響應(yīng)時(shí)間為5 ms，最高可在70 ℃的氣溫下工作，電容觸摸點(diǎn)數(shù)為10 點(diǎn)，電阻觸摸點(diǎn)數(shù)為1點(diǎn)。該觸摸顯示器將安裝在智能無人物流小車的尾部用于UI 界面的顯示和進(jìn)行人機(jī)交互。

此外，在硬件方面，為了讓使用者能夠更加清楚地看清屏幕，設(shè)計(jì)了屏幕旋轉(zhuǎn)裝置，如圖1 所示。經(jīng)過實(shí)驗(yàn)發(fā)現(xiàn)，假如屏幕傾斜角度固定的情況下，不同時(shí)段不同的光照角度以及車輛停放的不同位置會(huì)導(dǎo)致落到屏幕上的光照強(qiáng)度不同，光照強(qiáng)度強(qiáng)的情況下屏幕的顯示并不清楚，用戶可以通過調(diào)整該裝置使得屏幕達(dá)到一個(gè)合適的角度以確保能夠清楚地看清屏幕上顯示的內(nèi)容。

圖1 改變屏幕角度的滑槽

1.2 軟件控制模塊

即時(shí)設(shè)計(jì)是國內(nèi)首款專業(yè)級(jí)UI 設(shè)計(jì)工具，與傳統(tǒng)的設(shè)計(jì)工具相對(duì)比，即時(shí)設(shè)計(jì)具有可以突破平臺(tái)限制，使用更加方便、文件數(shù)據(jù)與儲(chǔ)存更加安全以及免費(fèi)使用等優(yōu)點(diǎn)。具體的設(shè)計(jì)操作如下：首先打開即時(shí)設(shè)計(jì)軟件，在進(jìn)入工作臺(tái)后創(chuàng)建新文件，文件創(chuàng)建完成后需要?jiǎng)?chuàng)建新的頁面，頁面是設(shè)計(jì)內(nèi)容的載體，在新的頁面內(nèi)創(chuàng)建內(nèi)容不會(huì)影響其他頁面。頁面創(chuàng)建完成后需要?jiǎng)?chuàng)建畫板，根據(jù)顯示器的尺寸設(shè)置好畫板的尺寸以確保能夠清晰顯示，畫板在設(shè)計(jì)中通常作為應(yīng)用程序的屏幕，每個(gè)畫板作為一個(gè)單獨(dú)的屏幕使用。

畫板創(chuàng)建完成后便可以在畫板上進(jìn)行一系列操作，可以在畫板上設(shè)置不同圖層，在不同圖層上又可以進(jìn)行不同的操作，如設(shè)置背景、插入文字、插入圖片與插入插件等，在不同畫板之間可以通過鏈接進(jìn)行聯(lián)系。通過這一系列操作來實(shí)現(xiàn)自己需要設(shè)計(jì)的內(nèi)容。眾多面板構(gòu)成一個(gè)頁面，當(dāng)一個(gè)頁面設(shè)計(jì)完成后再新建另一個(gè)頁面繼續(xù)進(jìn)行面板設(shè)計(jì)，最終將所有頁面設(shè)計(jì)好后即構(gòu)成所需設(shè)計(jì)的UI。

最后是UI 的導(dǎo)出，可以導(dǎo)出PDF 或者sketch 格式的文件，在顯示器端再將設(shè)計(jì)好的文件導(dǎo)入即可。

1.3 路徑優(yōu)化算法

本套優(yōu)化方案采用的路徑優(yōu)化算法為遺傳算法，遺傳算法（Genetic Algorithm，GA），最早是由美國的Holland 教授提出，起源于對(duì)自然和人工自適用系統(tǒng)的研究[8]。該算法是模擬達(dá)爾文生物進(jìn)化論的自然選擇和遺傳學(xué)機(jī)理的生物進(jìn)化過程的計(jì)算模型，是一種通過模擬自然進(jìn)化過程搜索最優(yōu)解的方法。其主要特點(diǎn)是直接對(duì)結(jié)構(gòu)對(duì)象進(jìn)行操作，不存在求導(dǎo)和函數(shù)連續(xù)性的限定；具有內(nèi)在的隱變形性和更好的全局尋找優(yōu)解的能力；采用概率化的尋優(yōu)方法，不需要確定規(guī)則就能夠自動(dòng)獲取和指導(dǎo)優(yōu)化的搜索空間，自適應(yīng)地調(diào)整搜索方向等。遺傳算法以一種群體中的所有個(gè)體為對(duì)象，并利用隨機(jī)化技術(shù)指導(dǎo)對(duì)一個(gè)被編碼的參數(shù)空間進(jìn)行高效搜索。其中，選擇、交叉和變異構(gòu)成了遺傳算法的遺傳操作；參數(shù)編碼、初始群體的設(shè)定、適應(yīng)度函數(shù)的設(shè)計(jì)、遺傳操作設(shè)計(jì)、控制參數(shù)設(shè)定5 個(gè)要素構(gòu)成了遺傳算法的核心內(nèi)容。

遺傳算法的過程是從代表問題可能存在的解集的一個(gè)種群（population）開始的，而一個(gè)種群則由基因（gene）編碼的一定數(shù)目的個(gè)體（individual）組成。每個(gè)個(gè)體實(shí)際上是染色體（chromosome）帶有特征的實(shí)體。染色體作為遺傳物質(zhì)的主要載體，即多個(gè)基因的集合，其內(nèi)部表現(xiàn)（即基因型）是某種基因組合，它決定了個(gè)體的形狀的外部表現(xiàn)，如黑頭發(fā)的特征是由染色體中控制這一特征的某種基因組合決定的。因此，在一開始需要實(shí)現(xiàn)從表現(xiàn)型到基因型的映射即編碼工作。由于仿照基因編碼的工作很復(fù)雜，我們往往進(jìn)行簡(jiǎn)化，如二進(jìn)制編碼。初代種群產(chǎn)生之后，按照適者生存和優(yōu)勝劣汰的原理，逐代（generation）演化產(chǎn)生出越來越好的近似解，在每一代，根據(jù)問題域中個(gè)體的適應(yīng)度（fitness）大小選擇（selection）個(gè)體，并借助于自然遺傳學(xué)的遺傳算子（genetic operators）進(jìn)行組合交叉（crossover）和變異（mutation），產(chǎn)生出代表新的解集的種群。這個(gè)過程將導(dǎo)致種群像自然進(jìn)化一樣的后生代種群比前代更加適應(yīng)于環(huán)境，末代種群中的最優(yōu)個(gè)體經(jīng)過解碼，可以作為問題近似最優(yōu)解。

智能物流小車的路徑問題以小蠻驢為例，小蠻驢的行駛路徑是根據(jù)管理員的設(shè)定而執(zhí)行的，按照約定的時(shí)間和約定的地點(diǎn)為師生提供送貨服務(wù)。這樣的路徑設(shè)定存在一定的問題，比如某次配送中可能不需要去某個(gè)地點(diǎn)但是按照設(shè)置物流車還需前往指定地點(diǎn)，這就浪費(fèi)了時(shí)間，降低了配送效率，要解決這個(gè)問題需要管理員重新設(shè)置路徑。為了更好地解決這一問題，我們將智能物流車配送問題抽象成旅行商問題（traveling salesman problem，TSP），該問題可以描述為已知n 個(gè)城市之間的距離，現(xiàn)有一個(gè)推銷員從某一個(gè)城市出發(fā)，必須訪遍這n 個(gè)城市，并且每個(gè)城市只能訪問一次，最后又必須返回到出發(fā)城市，如何安排訪問次序可使其旅行路線的總長度最短[9]。在小車配送問題中，每個(gè)需要前往的地點(diǎn)就是每一座“城市”，從驛站出發(fā)經(jīng)過每一個(gè)配送地點(diǎn)最后再回到驛站，如何走最短路徑，這便是遺傳算法解決旅行商問題在本套方案上的應(yīng)用。

1.4 系統(tǒng)測(cè)試

本套智能UI 設(shè)計(jì)方案的設(shè)計(jì)與實(shí)現(xiàn)涉及的硬件部件有：12.1 寸的觸摸顯示屏；安裝Windows 系統(tǒng)的主板；線性振動(dòng)馬達(dá)。

首先將主板與觸摸顯示器連接，將振動(dòng)馬達(dá)等硬件也接入主板，再在系統(tǒng)上安裝即時(shí)設(shè)計(jì)，再將優(yōu)化好的系統(tǒng)導(dǎo)入進(jìn)行測(cè)試，進(jìn)入的測(cè)試界面如圖2 所示。

圖2 無人車初始界面

2 結(jié)果與討論

2.1 智能UI 界面優(yōu)化設(shè)計(jì)

針對(duì)現(xiàn)有取件可視化反饋的缺失，增加了交互反饋機(jī)制和可視化，因此交互內(nèi)容可視化便變得尤為關(guān)鍵。結(jié)合人機(jī)工程學(xué)中色彩選擇原則，字樣選擇紅色是由于紅色的警戒意義，以及紅色的易辨認(rèn)程度最高。動(dòng)態(tài)字樣的設(shè)計(jì)是由于運(yùn)動(dòng)的目標(biāo)，相比于靜止的目標(biāo)更加易于人們察覺。放在左側(cè)的原因是，人視線變化的習(xí)慣是“從左到右，從上到下”的，放在左側(cè)更加有利于人的察覺。更好起到對(duì)用戶輸入錯(cuò)誤的提醒作用，符合人機(jī)工程學(xué)的設(shè)計(jì)要求，如圖3 所示。

圖3 輸入無效寄件碼時(shí)顯示

提高界面的可操作性主要體現(xiàn)在輸入取件碼的按鈕大小（圖4），設(shè)計(jì)以2 個(gè)食指近位指關(guān)節(jié)寬為邊長的正方形，輸入寄件碼時(shí)按鈕的大小則是長為3 個(gè)食指近位指關(guān)節(jié)寬，寬為2 個(gè)食指近位指關(guān)節(jié)寬的矩形。這樣的設(shè)計(jì)可以讓輸入者更加方便地點(diǎn)擊到對(duì)應(yīng)的數(shù)字按鈕，提升了智能UI 的可用性以及可操作性。對(duì)于全部開啟按鈕，則是利用了半徑為1.5 個(gè)食指近位指關(guān)節(jié)寬的圓形按鈕，也可以讓大家比較方便點(diǎn)擊。由于在人機(jī)工程學(xué)的研究中，直線輪廓的接受程度是優(yōu)于曲線輪廓的，所以除了上文提到的2 個(gè)圓形按鈕外，其余按鈕都采用了矩形的直線輪廓，讓用戶更容易接受。

圖4 取件界面

無人車的UI 界面的排列設(shè)計(jì)同樣依據(jù)人機(jī)工程學(xué)中的研究，研究中發(fā)現(xiàn)人的視覺具備以下特征，視覺順序?yàn)樽笥疑舷潞晚槙r(shí)針，疲勞程度水平優(yōu)于垂直，觀察情況的優(yōu)先性左上右上左下右下。因此在無人車的智能UI 上提出相應(yīng)改進(jìn)，輸入數(shù)字按鈕的排列嚴(yán)格符合“左上→右上→左下→右下”的順序，和現(xiàn)有的大部分?jǐn)?shù)字輸入按鈕界面相同，符合人的使用習(xí)慣。無人車的各個(gè)柜門開啟按鈕的排列順序嚴(yán)格按照“12345678、左→右、上→下、順時(shí)針”的順序排列，符合人們的視覺特征。最后在確認(rèn)頁面中，“確認(rèn)”按鈕和“取消”按鈕的排列設(shè)計(jì)參照了操作者的使用習(xí)慣。由于人的失誤的發(fā)生只是偶爾的，所以一般情況下在確認(rèn)頁面中UI 使用者都會(huì)點(diǎn)擊“確認(rèn)”按鈕。而人的慣用手又一般為右手，所以將確認(rèn)按鈕放在了右邊，取消鍵放在了左邊，讓界面更加符合人的使用習(xí)慣。

2.2 放取件流程優(yōu)化設(shè)計(jì)

放取件流程優(yōu)化主要體現(xiàn)在用戶的操作流程優(yōu)化和提示。例如為了讓用戶輸入號(hào)碼時(shí)可以時(shí)刻查看輸入的數(shù)字是否有誤，號(hào)碼輸入界面除了有輸入按鈕外，在按鈕的上方加上可以顯示輸入數(shù)字的橫線或圓圈標(biāo)識(shí)，如在圖4 中依次輸入100 三個(gè)數(shù)字，屏幕上也會(huì)依次展示如圖5 所示的3 張畫面。點(diǎn)擊“退格”按鈕和“清除”按鈕，屏幕畫面也會(huì)有相應(yīng)的反饋。

圖5 取件輸入演示

當(dāng)用戶與智能UI 交互時(shí)為了減少出錯(cuò)率，一些其他的信息也會(huì)實(shí)時(shí)地反饋給用戶，具體的實(shí)現(xiàn)可以分為以下幾個(gè)方面：①驛站端管理員開啟柜門界面。除了顏色變化提醒，還加上了字樣的提醒，開啟的柜門序號(hào)會(huì)自動(dòng)顯示在柜門開關(guān)按鈕的上方。并且由于人們學(xué)習(xí)數(shù)字的邏輯，按照順序排列有利于人看出有哪個(gè)數(shù)字缺失，進(jìn)而推出哪個(gè)柜門沒有開啟。所以字樣的排列順序嚴(yán)格按照“12345678”，而不是開啟柜門的順序；②寄件處管理員打印快遞頁面。為了使管理員更方便地處理用戶要寄出的包裹，以及使前來攬收的快遞員可以更快地給包裹貼上專用快遞單，在無人車上添加了打印快遞單的功能。但這個(gè)單號(hào)并不是專用快遞單，而是點(diǎn)擊每個(gè)欄目后可以看到的詳細(xì)信息；當(dāng)管理員按下“打印快遞單”按鈕后便開始打印，打印完成后，會(huì)回到寄件目錄頁面。由于打印的順序不一定是從上到下的，而是可以按任意順序打印。所以為了讓驛站管理員在打印過程中可以了解打印流程，在每個(gè)快遞單打印完成后，欄目里會(huì)出現(xiàn)“已打印”的字樣提醒管理員。具體可參考圖6。

圖6 管理員寄件目錄顯示

利用人機(jī)工程學(xué)中對(duì)比度的概念[10]，將有包裹的柜門按鈕設(shè)置成了藍(lán)色，沒有包裹的設(shè)置為淺灰色。當(dāng)取件人依次點(diǎn)擊1、3、6 號(hào)柜門的開啟按鈕時(shí)，屏幕上會(huì)依次顯示如圖7 中的4 幅畫面。從圖中還可以發(fā)現(xiàn)已經(jīng)被打開的柜門并沒有變成淺灰色，而是變?yōu)榱松罨疑@主要是為了將“有包裹，但是沒有打開的”“有包裹，但是已經(jīng)打開的”“已沒有包裹”的柜門區(qū)分開來，讓用戶可以更加直觀地了解自己當(dāng)前的取件狀態(tài)。

圖7 打開柜門的依次畫面

2.3 智能路徑優(yōu)化設(shè)計(jì)

由于無人車每次出車時(shí)，每個(gè)中途停靠點(diǎn)的使用者人數(shù)是會(huì)變化的，使用的人數(shù)越多，車停留的時(shí)間就會(huì)越長，再考慮到道路上的一些其他因素（如修路等）。所以每次出發(fā)時(shí)規(guī)劃出一條可以更快地服務(wù)完每個(gè)站點(diǎn)的路徑是十分重要的，因此基于遺傳算法解決TSP問題，在智能UI 上添加了自動(dòng)規(guī)劃路徑的功能。本方案將校園劃分成5 000×5 000 的網(wǎng)格，根據(jù)網(wǎng)格來確定每次配送需要停靠地的坐標(biāo)。以測(cè)試為例，本次測(cè)試根據(jù)包裹情況設(shè)置了12 個(gè)配送點(diǎn)，設(shè)置種群數(shù)量P=48，染色體基因數(shù)N=25，迭代次數(shù)maxIter=1 000，變異概率Pm=0.1，接著根據(jù)這些參數(shù)執(zhí)行交叉、變異、選擇操作，生成新的種群，最后根據(jù)判斷條件輸出最短路徑圖，繼而輸出。不同的配送情況下，系統(tǒng)會(huì)自動(dòng)更新各項(xiàng)參數(shù)并得出相應(yīng)的最佳路線圖。