基于即時設(shè)計平臺的無人物流車智能終端UI 設(shè)計

劉余東，全嘉樂，唐丹娜

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

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

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

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

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

1 實驗部分

1.1 硬件設(shè)計模塊

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

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

圖1 改變屏幕角度的滑槽

1.2 軟件控制模塊

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

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

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

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

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

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

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

1.4 系統(tǒng)測試

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

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

圖2 無人車初始界面

2 結(jié)果與討論

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

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

圖3 輸入無效寄件碼時顯示

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

圖4 取件界面

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

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

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

圖5 取件輸入演示

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

圖6 管理員寄件目錄顯示

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

圖7 打開柜門的依次畫面

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

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