摘要：自我國(guó)正式進(jìn)入到信息化時(shí)代以來(lái)，移動(dòng)互聯(lián)網(wǎng)已經(jīng)得到了廣泛的應(yīng)用，而移動(dòng)互聯(lián)網(wǎng)的出現(xiàn)為廣大用戶提供了更加便捷的信息交互平臺(tái)。但是移動(dòng)互聯(lián)網(wǎng)不能機(jī)械的將傳統(tǒng)互聯(lián)網(wǎng)的組織架構(gòu)、界面布置以及使用方法直接應(yīng)用在移動(dòng)互聯(lián)網(wǎng)終端上，為了可以推廣移動(dòng)互聯(lián)網(wǎng)產(chǎn)品，就需要重視UI設(shè)計(jì)。本文主要對(duì)移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品UI設(shè)計(jì)的類型劃分展開(kāi)分析，并對(duì)于UI設(shè)計(jì)要素進(jìn)行探討，最后提出了UI設(shè)計(jì)的要點(diǎn)。

關(guān)鍵詞：移動(dòng)互聯(lián)網(wǎng)；軟件產(chǎn)品；UI設(shè)計(jì)

信息化時(shí)代的到來(lái)，使得當(dāng)前的移動(dòng)通信技術(shù)、互聯(lián)網(wǎng)技術(shù)等應(yīng)用范圍在逐漸的擴(kuò)大，已然成為全球科技領(lǐng)域中發(fā)展速度最快的產(chǎn)業(yè)。移動(dòng)互聯(lián)網(wǎng)會(huì)將移動(dòng)通信所具有的輕便性特點(diǎn)與互聯(lián)網(wǎng)的快捷特點(diǎn)進(jìn)行結(jié)合，以此來(lái)提供更加高效化的信息交互平臺(tái)。而且移動(dòng)互聯(lián)網(wǎng)軟件的出現(xiàn)為用戶實(shí)現(xiàn)了各方面的功能，而我國(guó)現(xiàn)如今的移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品UI設(shè)計(jì)大部分仍舊還是采用傳統(tǒng)的互聯(lián)網(wǎng)界面布置方式與自制結(jié)構(gòu)，還尚未形成更為創(chuàng)新化的設(shè)計(jì)體系，這會(huì)對(duì)于移動(dòng)互聯(lián)網(wǎng)的普及造成嚴(yán)重阻礙。所以，如何提升我國(guó)當(dāng)前的移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品UI設(shè)計(jì)水平，成為當(dāng)前移動(dòng)互利網(wǎng)軟件設(shè)計(jì)行業(yè)需要解決的問(wèn)題。

1、移動(dòng)互利網(wǎng)軟件產(chǎn)品類型

移動(dòng)互聯(lián)網(wǎng)主流客戶端的UI設(shè)計(jì)類型主要可以分為五類，分別是社交網(wǎng)絡(luò)類、產(chǎn)品宣傳類、網(wǎng)絡(luò)電商類、媒體信息類以及服務(wù)性查詢類。其中，媒體信息類：主要是在各大門(mén)戶網(wǎng)站所提供的信息平臺(tái)中應(yīng)用，常見(jiàn)的有網(wǎng)易新聞客戶端等。網(wǎng)絡(luò)電商類：主要是在B2C購(gòu)物網(wǎng)站上交易客戶端的UI設(shè)計(jì)中應(yīng)用，例如京東和淘寶等。產(chǎn)品宣傳類：應(yīng)用在各大獨(dú)立品牌宣傳品牌文化或產(chǎn)品的UI設(shè)計(jì)，例如唯品會(huì)等。社交網(wǎng)絡(luò)類：在各大論壇、社交網(wǎng)站上的移動(dòng)線上交流客戶端的UI設(shè)計(jì)，如微信、微博等UI設(shè)計(jì)[1]。服務(wù)性查詢類：為用戶提供查詢信息服務(wù)的移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品，常見(jiàn)的主要有百度、谷歌等。

2、UI設(shè)計(jì)的層次

人類的大腦中認(rèn)知系統(tǒng)會(huì)將食物分為感官層、行為層以及反思層。這三個(gè)層次表現(xiàn)出層層遞進(jìn)的趨勢(shì)，其中感官層次具有最高程度的優(yōu)先級(jí)，其作用于邏輯思維與主觀意識(shí)之前。感官層的作用是大腦對(duì)于產(chǎn)品形成初次印象，這與產(chǎn)品的外觀和用戶最初的體驗(yàn)具有直接的關(guān)系。行為層是大腦對(duì)于產(chǎn)品更深層次的認(rèn)識(shí)，是用戶在使用產(chǎn)品后，對(duì)于產(chǎn)品更深層次的認(rèn)識(shí)，對(duì)于產(chǎn)品功能、操作等的初步了解[2]。最后是反思層，這是大腦認(rèn)知中的最高層面，大腦對(duì)于產(chǎn)品的認(rèn)知將會(huì)由簡(jiǎn)單了解轉(zhuǎn)移到精神層面上。

用戶在感官層的體驗(yàn)主要是來(lái)源于產(chǎn)品本身的外觀效果與外界對(duì)于產(chǎn)品自身的評(píng)價(jià)。在感官層中，有關(guān)于產(chǎn)品的視覺(jué)設(shè)計(jì)與基本功能都是形成用戶體驗(yàn)的原因。在行為層中，用戶對(duì)于已經(jīng)使用過(guò)的產(chǎn)品產(chǎn)生的用戶體驗(yàn)就是操作過(guò)程，其重點(diǎn)主要在于人機(jī)交互。反思層主要是來(lái)源于用戶對(duì)于情感方面的理解，這與用戶的個(gè)人背景、對(duì)產(chǎn)品的熟悉程度以及文化水平等有關(guān)，并且還會(huì)直接影響到用戶的體驗(yàn)效果。

3、移動(dòng)互聯(lián)網(wǎng)軟件中UI設(shè)計(jì)中的設(shè)計(jì)要素

3.1 移動(dòng)互聯(lián)網(wǎng)軟件中UI設(shè)計(jì)的色彩設(shè)計(jì)

色彩視覺(jué)效果在整個(gè)的移動(dòng)互利網(wǎng)的軟件設(shè)計(jì)中，直接關(guān)系到用戶的使用體驗(yàn)。基于色彩心理學(xué)的角度，不同顏色將會(huì)為用戶產(chǎn)生完全不一樣的心理感受，例如，在UI設(shè)計(jì)中使用紅色可以吸引用戶的注意力，或是宣傳促銷等商業(yè)活動(dòng)的氛圍?；谏韺W(xué)、機(jī)械工程學(xué)等角度，當(dāng)前的大部分手機(jī)屏幕色彩有2000萬(wàn)左右，但是因?yàn)槿搜鄣纳斫Y(jié)構(gòu)是固定的，所以，其色彩的適應(yīng)范圍較為狹窄，如果屏幕色彩的純度過(guò)高的話，還會(huì)導(dǎo)致眼睛不適[3]。因此，在UI設(shè)計(jì)色彩的過(guò)程中，需要盡量照顧人體視覺(jué)感受，添加一些比較融合的色彩，降低色彩對(duì)比度閾值，平衡界面的視覺(jué)效果。

3.2 移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品中UI設(shè)計(jì)的文字編排

文字在移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品UI設(shè)計(jì)中，具有非常重要的作用，主要承擔(dān)分區(qū)分類、補(bǔ)充說(shuō)明、協(xié)調(diào)畫(huà)面整體感等作用。而在選擇字體的時(shí)候，當(dāng)前所使用的字體大部分為宋體、黑體[4]。但是，宋體又可以分為華文仿宋、仿宋體、華文中宋以及傳統(tǒng)宋體等等，這些字體都可以將內(nèi)容充分表達(dá)出來(lái)，并且還會(huì)使軟件閱讀過(guò)程過(guò)于乏味，主要是在各種說(shuō)明性文字中進(jìn)行應(yīng)用。黑體則主要包括華文細(xì)黑、微軟雅黑、華為黑體一級(jí)微軟正黑等，這些字體具有十分強(qiáng)烈的現(xiàn)代感，比較適合應(yīng)用在標(biāo)題中。許多手繪字體與現(xiàn)代化字體開(kāi)始應(yīng)用在文字設(shè)計(jì)中，這些字體具有十分鮮明的個(gè)性，常常應(yīng)用在logo中。而對(duì)于文字的組合與編排，設(shè)計(jì)人員需要考慮手機(jī)屏幕的大小，同時(shí)還需要考慮大部分用戶的閱讀習(xí)慣，并盡量簡(jiǎn)潔界面。文字的排列方式中，居中排列適用在軟件啟動(dòng)界面，而橫排的適用范圍十分廣泛，豎排比較少見(jiàn)[5]。而設(shè)計(jì)的過(guò)程中需要根據(jù)實(shí)際情況進(jìn)行處理，并且還需考慮字間距與壓角、留白等效果，使文字的疏密恰到好處。

3.3 移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品中UI設(shè)計(jì)版式

在軟件產(chǎn)品中UI設(shè)計(jì)中，版式同樣非常關(guān)鍵，版式設(shè)計(jì)的科學(xué)性與否直接關(guān)系到軟件的頁(yè)面布局，可以使頁(yè)面布局更為優(yōu)化，從而有效的提高信息的傳輸效率。而移動(dòng)互聯(lián)網(wǎng)終端設(shè)備屏幕的尺寸不同的話，產(chǎn)品的界面細(xì)節(jié)設(shè)置同樣也會(huì)存在差異，但是其設(shè)計(jì)思路在總體上大致是相同的。首先需要了解內(nèi)容的主次性，然后選擇適合的位置。其次，在設(shè)計(jì)界面版式時(shí)，需要盡可能將主題內(nèi)容凸顯出來(lái)，可以通過(guò)設(shè)計(jì)可逆選項(xiàng)的方式，使用戶方便重復(fù)點(diǎn)擊主要內(nèi)容，從而提高出現(xiàn)頻率[6]。再次，嚴(yán)格遵守布局無(wú)障礙的設(shè)計(jì)原則。界面如果涉及的過(guò)于擁擠，將會(huì)導(dǎo)致用戶出現(xiàn)視覺(jué)疲勞的情況，因此必須要注意軟件的界面布局，以平衡布局為設(shè)計(jì)原則，重點(diǎn)凸顯出功能區(qū)的作用。

3.4 移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品中UI設(shè)計(jì)的動(dòng)畫(huà)

圖形是點(diǎn)、線、面三個(gè)要素構(gòu)成，以物體的等比無(wú)限縮小成為點(diǎn)，隨著點(diǎn)在進(jìn)行規(guī)律性移動(dòng)的過(guò)程中會(huì)產(chǎn)生軌跡，而運(yùn)動(dòng)軌跡就是線，多條線經(jīng)過(guò)組合與變動(dòng)，成為圖形，對(duì)于圖形進(jìn)行整體性移動(dòng)，將會(huì)成為面。移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品的UI設(shè)計(jì)目的是為了能夠滿足用戶的使用需求，并實(shí)現(xiàn)與客戶之間的互動(dòng)。從當(dāng)前各種移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品的發(fā)展?fàn)顩r來(lái)看，軟件產(chǎn)品上開(kāi)始應(yīng)用傳輸信息量豐富、流量占用小的動(dòng)畫(huà)。許多想要突出軟件功能的廣告都喜歡應(yīng)用動(dòng)畫(huà)效果；而設(shè)計(jì)網(wǎng)站上未來(lái)推廣產(chǎn)品，也會(huì)添加gif廣告圖形。要想表達(dá)清楚設(shè)計(jì)人員的設(shè)計(jì)意圖，動(dòng)畫(huà)效果是最為高效的一種手段。當(dāng)靜態(tài)設(shè)計(jì)圖無(wú)法充分表達(dá)出產(chǎn)品意圖的時(shí)候，一個(gè)簡(jiǎn)單地的動(dòng)畫(huà)就能代替文字語(yǔ)言表達(dá)出更完整的信息。動(dòng)畫(huà)的要素為周期、行為以及關(guān)鍵幀。一個(gè)流量小，制作簡(jiǎn)單的動(dòng)畫(huà)要比一張普通的靜態(tài)圖片具有更高的點(diǎn)擊率，靜態(tài)圖片容易被人忽視，即使打開(kāi)也會(huì)被很快遺忘。而伴隨著當(dāng)前人們審美水平的提高，缺乏創(chuàng)新的作品已經(jīng)很難受到人們的關(guān)注，在此背景下開(kāi)始應(yīng)用交互式動(dòng)畫(huà)，而交互式動(dòng)畫(huà)對(duì)于提高產(chǎn)品的可用性具有重要作用。

而體現(xiàn)動(dòng)畫(huà)元素運(yùn)動(dòng)有許多的方法，例如，（1）積累一定數(shù)量，并對(duì)畫(huà)面進(jìn)行重復(fù)、相交；（2）模仿運(yùn)動(dòng)軌跡，基于透視法則，可以使畫(huà)面獲得立體感、動(dòng)感；（3）通過(guò)利用不確定因素，例如，非確定物體運(yùn)動(dòng)軌跡、非確定物體運(yùn)動(dòng)方向等可以營(yíng)造出動(dòng)感氛圍[7]。

4、移動(dòng)互聯(lián)網(wǎng)產(chǎn)品UI 設(shè)計(jì)要點(diǎn)

4.1 設(shè)計(jì)風(fēng)格要與內(nèi)容統(tǒng)一

移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品的UI設(shè)計(jì)風(fēng)格要與產(chǎn)品的形象相統(tǒng)一，設(shè)計(jì)人員不能過(guò)于追求界面的簡(jiǎn)潔設(shè)計(jì)或是新穎化，但是卻忽略了整體的商業(yè)效果，需要使用戶在充分了解產(chǎn)品的基礎(chǔ)上，能夠在視覺(jué)上接受線上的服務(wù)終端。

4.2 具有完備的界面語(yǔ)言體系

語(yǔ)言是用戶與移動(dòng)互利網(wǎng)之間產(chǎn)生交互的有效工具，而設(shè)計(jì)人員與軟件開(kāi)發(fā)工作人員要給予用戶群來(lái)構(gòu)建界面語(yǔ)言體系，同時(shí)要使界面語(yǔ)言具有較廣的覆蓋面，并且也需具有較低的系統(tǒng)占用率[8]。

4.3 界面效果要清晰

智能手機(jī)屏幕的分辨率與像素在當(dāng)前已經(jīng)非常高了，在這一背景下對(duì)于移動(dòng)互聯(lián)網(wǎng)軟件的顯示效果提出了更高的要求。工作人員要最大程度上選擇更為高清的素材，這樣才可以有效的提高界面的清晰程度以及軟件的畫(huà)質(zhì)，通過(guò)這一特點(diǎn)能夠吸引更多的用戶。

4.4 具備及時(shí)性

移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的UI設(shè)計(jì)需要具備及時(shí)性的特點(diǎn)，主要指的是對(duì)于重要信息及時(shí)提醒，這一要求是為了可以指導(dǎo)用戶正確操作軟件，并保障用戶的信息安全。因?yàn)橛脩艨赡軙?huì)因?yàn)閷?duì)于操作界面不夠熟悉，從而發(fā)生操作錯(cuò)誤的問(wèn)題，因此軟件要及時(shí)提醒用戶，并指導(dǎo)用戶正確的操作方式。

4.5 UI設(shè)計(jì)要體現(xiàn)出簡(jiǎn)潔性

移動(dòng)互聯(lián)網(wǎng)終端需要最大程度上滿足用戶的需求，并為客戶提供更為便捷的使用過(guò)程。所以，這也導(dǎo)致在設(shè)計(jì)過(guò)程中，要盡量遵守簡(jiǎn)潔性。簡(jiǎn)潔的界面設(shè)置、功能可以為用戶提供更為高效化的服務(wù)，并且還可以降低用戶出現(xiàn)錯(cuò)誤操作的概率。例如，將不同界面的開(kāi)始與結(jié)束位置固定下來(lái)，不能隨意對(duì)其進(jìn)行更改；在設(shè)置功能鍵的時(shí)候，需要盡量簡(jiǎn)單明了、并且還需具有統(tǒng)一清晰的特點(diǎn)[10]。

4.6 充分發(fā)揮出藝術(shù)設(shè)計(jì)的特點(diǎn)

UI設(shè)計(jì)其本身是一種藝術(shù)設(shè)計(jì)，所以，需要將藝術(shù)設(shè)計(jì)的特點(diǎn)盡可能的發(fā)揮出來(lái)，基于此來(lái)設(shè)計(jì)出更加具有創(chuàng)新特點(diǎn)的作品，以此來(lái)迎合用戶對(duì)于移動(dòng)互聯(lián)網(wǎng)的審美需求以及天然存在的好奇心理。例如，可以將界面上的書(shū)籍設(shè)計(jì)為竹簡(jiǎn)形式，提高作品的視覺(jué)傳達(dá)效果，同時(shí)還可以為用戶營(yíng)造出一種豐富、濃郁的文化氛圍。

總結(jié)

綜上所述，我國(guó)近幾年來(lái)的移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品UI設(shè)計(jì)得到了飛速的發(fā)展，并且呈現(xiàn)出多元化的發(fā)展態(tài)勢(shì)與迅猛的發(fā)展趨勢(shì)，并且打破了以往的互聯(lián)網(wǎng)所存在的局限性，設(shè)計(jì)出更加創(chuàng)新的應(yīng)用空間，而這也正是我國(guó)的科技水平的一種體現(xiàn)。隨著時(shí)代的發(fā)展以及技術(shù)的不斷革新，UI設(shè)計(jì)需要不斷地進(jìn)行創(chuàng)新，這樣才會(huì)更加符合時(shí)代的發(fā)展需要。

參考文獻(xiàn)

[1] 屈鵬， 周家會(huì). 基于淺談UI設(shè)計(jì)在移動(dòng)應(yīng)用交互中的模式研究[J]. 現(xiàn)代婦女（下旬）， 2014（4）：328-328.

[2] 薛文峰.移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品中的UI設(shè)計(jì)研究[J].包裝工程， 2016，37（6）：45-48.

[3] 王真.移動(dòng)互聯(lián)網(wǎng)金融App的UI界面設(shè)計(jì)及互聯(lián)網(wǎng)式推廣[D].河北：河北大學(xué)，2015.

[4] 徐亞非， 王勤勤. “互聯(lián)網(wǎng)+”時(shí)代下的UI設(shè)計(jì)發(fā)展趨勢(shì)[J]. 藝術(shù)科技， 2015（9）.

[5] 劉程程， 張凌浩. 移動(dòng)互聯(lián)網(wǎng)時(shí)代手機(jī)服務(wù)型APP產(chǎn)品設(shè)計(jì)研究[J]. 包裝工程（12）：76-79.

[6] 朱長(zhǎng)永，張欣，班乃明.移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的“外衣”——圖形化的界面設(shè)計(jì)（UI）[J].電腦知識(shí)與技術(shù)，2015（4）：214—215.

[7] 蔣飛燕. UI設(shè)計(jì)的交互性與界面視覺(jué)設(shè)計(jì)研究[J]. 美與時(shí)代（上）， 2019（5）.

[8] 饒衛(wèi)民， 林道貴. 略談智能手機(jī)App開(kāi)發(fā)中的UI設(shè)計(jì)技巧[J]. 電子測(cè)試， 2016（13）：41-42.

[9] 張藝弋. 移動(dòng)互聯(lián)網(wǎng)UI設(shè)計(jì)中視覺(jué)界面的應(yīng)用設(shè)計(jì)研究[J]. 藝術(shù)品鑒， 2019（2X）：312-313.

[10] 馮陽(yáng). 移動(dòng)端智能手機(jī)軟件產(chǎn)品的UI設(shè)計(jì)研究[D]. 青島理工大學(xué)， 2016.

作者簡(jiǎn)介：

賈麗娜，碩士，任職于武漢船舶職業(yè)技術(shù)學(xué)院計(jì)算機(jī)信息技術(shù)學(xué)院，工程師，研究方向：互聯(lián)網(wǎng)軟件。