馬炳亮

摘要：隨著科技的高速發(fā)展，基于人工智能技術(shù)下的圖像識(shí)別技術(shù)已經(jīng)滲透到了人們?nèi)粘Ｉ钪械姆椒矫婷妫谶b感圖像識(shí)別、生物醫(yī)學(xué)、金融購(gòu)物等領(lǐng)域大放異彩。在移動(dòng)“互聯(lián)網(wǎng) +”時(shí)代，終端用戶在使用圖像識(shí)別軟件時(shí)，會(huì)更傾向于將界面設(shè)計(jì)合理且具有良好使用體驗(yàn)的軟件留在自己的設(shè)備上。針對(duì)這種情況，本文在移動(dòng)端圖像識(shí)別軟件的UI視覺設(shè)計(jì)方面展開研究以求滿足用戶要求，為社會(huì)提供便捷實(shí)用的UI設(shè)計(jì)方案。

關(guān)鍵詞：UI設(shè)計(jì);手機(jī)界面;圖像識(shí)別;人工智能

一、研究背景

在移動(dòng)互聯(lián)網(wǎng)、社交網(wǎng)絡(luò)和智能手機(jī)高速發(fā)展的當(dāng)下，圖片正逐步成為互聯(lián)網(wǎng)中的主要信息載體，但圖片在帶來(lái)了快捷的信息記錄和分享模式的同時(shí)，也加大了信息檢索的難度，因而圖像識(shí)別技術(shù)在這種環(huán)境下就顯得尤為重要。為了實(shí)現(xiàn)用戶與圖像識(shí)別軟件的良好交互，合理的UI設(shè)計(jì)必不可少。

UI設(shè)計(jì)是一個(gè)軟件能否吸引用戶使用的要素之一。當(dāng)圖像識(shí)別技術(shù)與現(xiàn)實(shí)相融合時(shí)，只有成熟的技術(shù)條件是不夠的，若缺乏簡(jiǎn)便實(shí)用的操作方式則不能將其功能性充分表現(xiàn)出來(lái)，進(jìn)而降低用戶的使用體驗(yàn)，影響應(yīng)用的推廣和留存。

二、圖像識(shí)別技術(shù)

圖像識(shí)別技術(shù)是指利用計(jì)算機(jī)對(duì)圖像特征進(jìn)行提取和識(shí)別，并對(duì)其進(jìn)行分析以識(shí)別目標(biāo)的技術(shù)。在圖像識(shí)別過(guò)程中，知覺機(jī)制在過(guò)濾掉多余的輸入信息后提取并整合主要特征信息，然后逐步將獲得的信息整合成完整的知覺映象。

近年來(lái)，計(jì)算機(jī)深度學(xué)習(xí)的準(zhǔn)確性和效率的上升為物體辨識(shí)提供了技術(shù)保障，云計(jì)算平臺(tái)的大數(shù)據(jù)處理則為圖像識(shí)別技術(shù)提供數(shù)據(jù)支撐。如今已經(jīng)有了許多可以使用的深度學(xué)習(xí)框架，使得構(gòu)建深度學(xué)習(xí)應(yīng)用的難度降低，基于深度學(xué)習(xí)的圖像識(shí)別系統(tǒng)可以取得很好的效果。[1]

三、UI設(shè)計(jì)流程

1.設(shè)計(jì)應(yīng)遵循的準(zhǔn)則

自交互式計(jì)算機(jī)發(fā)明開始，就已經(jīng)有人嘗試著確立UI設(shè)計(jì)領(lǐng)域的準(zhǔn)則，來(lái)推行良好的設(shè)計(jì)。UI設(shè)計(jì)的通用設(shè)計(jì)準(zhǔn)則包括：保持界面的一致性;置界面于用戶的掌控之下;提供信息充足的反饋;減輕用戶的記憶負(fù)荷;錯(cuò)誤預(yù)防。

2.設(shè)計(jì)準(zhǔn)則的三大要素

（1）統(tǒng)一性原則

UI設(shè)計(jì)的統(tǒng)一性主要體現(xiàn)在三個(gè)方面，即設(shè)計(jì)目標(biāo)的一致性、外觀元素的一致性、交互形式的一致性。一個(gè)軟件可能由多個(gè)設(shè)計(jì)元件所構(gòu)成，設(shè)計(jì)元件之間的功能也可能有所差異，但不同的設(shè)計(jì)元件之間應(yīng)該保持統(tǒng)一的風(fēng)格，避免撕裂感，即設(shè)計(jì)目標(biāo)的一致性。外觀元素的一致性是用戶感受最為直觀的部分，UI設(shè)計(jì)中要注意維護(hù)用戶的視覺統(tǒng)一。交互形式的一致性主要體現(xiàn)在對(duì)于大多數(shù)的操作提供統(tǒng)一的交互方式，減輕用戶的認(rèn)知及記憶負(fù)荷。[2]

（2）可用性原則

為了確保可用性，首先要確保UI設(shè)計(jì)簡(jiǎn)潔明了。各個(gè)交互元素對(duì)應(yīng)的是用戶期望實(shí)現(xiàn)的的各項(xiàng)功能，因而要確保這些元素能夠被用戶簡(jiǎn)單的掌控和把握，減少用戶理解以及操作錯(cuò)誤的情況。其次是要可控性。用戶在使用軟件之時(shí)，應(yīng)用的交互和功能的執(zhí)行要允許用戶自己把控。

（3）合理性原則

應(yīng)用的交互界面的的整體效果和交互模式應(yīng)當(dāng)符合合理性的原則。應(yīng)用的核心功能應(yīng)放在顯眼位置，操作避免繁瑣復(fù)雜。當(dāng)用戶進(jìn)行了誤操作時(shí)，應(yīng)用應(yīng)當(dāng)彈出警示信息要求用戶確認(rèn)操作。

四、設(shè)計(jì)實(shí)例—搜奇選妙A(yù)PP（購(gòu)物社區(qū)）

1.排版與布局

排版設(shè)計(jì)是對(duì)界面中所有的畫面、圖形、文字、圖標(biāo)以及按鈕等元素的位置、大小、間距的組合搭配，從而合理有效地傳遞出產(chǎn)品所表示的信息。以下是本軟件中用到的幾種界面排版標(biāo)準(zhǔn)：

滿版型：滿版型可以展示大量的圖像畫面，并通過(guò)文字對(duì)圖片進(jìn)行一些必要的說(shuō)明，常用于購(gòu)物類的軟件和圖片分享界面之中。

骨架式：骨架式的界面設(shè)計(jì)十分嚴(yán)謹(jǐn)與合理，版面中圖像畫面和文字排版比例固定，給人的視覺觀感清晰條理。

布局設(shè)計(jì)即界面設(shè)計(jì)中組織、安排界面各元素之間的相互關(guān)系的整體性設(shè)計(jì)構(gòu)思。下面是本軟件中用到的幾種布局方式：

行為擴(kuò)展式：應(yīng)用于有分類需求的界面設(shè)計(jì)中，可以在有限的界面內(nèi)容中放置更多內(nèi)容，不需要額外進(jìn)行跳轉(zhuǎn)操作。

旋轉(zhuǎn)式：這種布局方式是通過(guò)滑動(dòng)頁(yè)面來(lái)切換不同頁(yè)面，多用于圖片展示。

2.界面色彩

界面的色彩是軟件展現(xiàn)給用戶的第一印象。因?yàn)樯示哂忻舾行?，所以常常被用?lái)代表獨(dú)特性質(zhì)的隱喻。搜奇選妙A(yù)PP（購(gòu)物社區(qū)）的界面，經(jīng)過(guò)對(duì)產(chǎn)品定位的剖析，選用藍(lán)色作為APP的主色調(diào)，藍(lán)色能夠給人以寧?kù)o、深沉、智慧的感覺，同時(shí)也是高科技產(chǎn)品中常用的顏色，符合產(chǎn)品氣質(zhì)。

3.文字與字體

在進(jìn)行UI設(shè)計(jì)中的字體字號(hào)選擇時(shí)要講究統(tǒng)一協(xié)調(diào)，從APP 有界面的全局考慮，同時(shí)要考慮到手機(jī)的分辨率和操作系統(tǒng)的默認(rèn)字體之間有差異的問(wèn)題。一般正常的字號(hào)設(shè)置為30像素，這是最利于人們舒適地長(zhǎng)時(shí)間瀏覽的字號(hào)大小。同時(shí)，根據(jù)不同的要求，軟件的字體和字號(hào)也要做出相應(yīng)的改動(dòng)，以起到警示提醒作用。

4.圖像與圖標(biāo)

圖像通常是用戶界面設(shè)計(jì)中的視覺焦點(diǎn)，其視覺感染力最為顯著。在軟件UI設(shè)計(jì)中，圖標(biāo)設(shè)計(jì)具有較高要求，圖標(biāo)和UI設(shè)計(jì)是技術(shù)與藝術(shù)的聯(lián)結(jié)，精致美觀的圖標(biāo)設(shè)計(jì)能給用戶帶來(lái)清新舒適的視覺感受。圖標(biāo)的設(shè)計(jì)應(yīng)與全局相協(xié)調(diào)，格調(diào)一致?；顫娗揖碌膱D標(biāo)方案能夠引起用戶矚目，起到畫龍點(diǎn)睛的效果。[3]

五、結(jié)語(yǔ)

具有明確的UI設(shè)計(jì)界面將會(huì)影響用戶的使用體驗(yàn)與使用率。從新的思維方式角度出發(fā)，設(shè)計(jì)一個(gè)更符合用戶體驗(yàn)和用戶行為的界面設(shè)計(jì)，可以更好地縮短用戶尋找目標(biāo)功能的時(shí)間，快速完成識(shí)別行為，提高用戶體驗(yàn)，最終幫助用戶完成圖像識(shí)別，提高軟件的知名度和利用率。因而，基于人工智能技術(shù)下的移動(dòng)端圖像識(shí)別軟件的UI視覺設(shè)計(jì)研究既有理論價(jià)值又具有實(shí)際意義。

參考文獻(xiàn)：

[1]王德廉.基于深度學(xué)習(xí)的圖像識(shí)別系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].海南大學(xué)2018.

[2]楊文鵬.智能化校園網(wǎng)絡(luò)互動(dòng)社區(qū)的設(shè)計(jì)研究—以哈密師范學(xué)校為例[D].華東理工大學(xué)2015.

[3]陳丹.面向傳統(tǒng)行業(yè)的物聯(lián)網(wǎng)UI設(shè)計(jì)研究[D].南京林業(yè)大學(xué)2017.

基金項(xiàng)目：

本文為山東工商學(xué)院大學(xué)生創(chuàng)新創(chuàng)業(yè)項(xiàng)目：“基于人工智能技術(shù)下的搜奇選妙A(yù)PP（購(gòu)物社區(qū)）研究”（編號(hào)116882019093）的研究成果。