移動互聯(lián)網(wǎng)軟件產(chǎn)品中的UI設計探討

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

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

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

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

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

2、UI設計的層次

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

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

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

3.1 移動互聯(lián)網(wǎng)軟件中UI設計的色彩設計

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

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

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

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

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

3.4 移動互聯(lián)網(wǎng)軟件產(chǎn)品中UI設計的動畫

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

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

4、移動互聯(lián)網(wǎng)產(chǎn)品UI 設計要點

4.1 設計風格要與內(nèi)容統(tǒng)一

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

4.2 具有完備的界面語言體系

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

4.3 界面效果要清晰

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

4.4 具備及時性

移動互聯(lián)網(wǎng)產(chǎn)品的UI設計需要具備及時性的特點，主要指的是對于重要信息及時提醒，這一要求是為了可以指導用戶正確操作軟件，并保障用戶的信息安全。因為用戶可能會因為對于操作界面不夠熟悉，從而發(fā)生操作錯誤的問題，因此軟件要及時提醒用戶，并指導用戶正確的操作方式。

4.5 UI設計要體現(xiàn)出簡潔性

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

4.6 充分發(fā)揮出藝術(shù)設計的特點

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

總結(jié)

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

參考文獻

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

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

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

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

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

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

[7] 蔣飛燕. UI設計的交互性與界面視覺設計研究[J]. 美與時代（上）， 2019（5）.

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

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

[10] 馮陽. 移動端智能手機軟件產(chǎn)品的UI設計研究[D]. 青島理工大學， 2016.

作者簡介：

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