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

許寧

摘要：隨著信息化時(shí)代的不斷發(fā)展，移動(dòng)通信技術(shù)和互聯(lián)網(wǎng)技術(shù)的應(yīng)用范圍進(jìn)一步擴(kuò)大，兩者一躍成為世界科技領(lǐng)域中發(fā)展最為迅猛的兩大信息產(chǎn)業(yè)。移動(dòng)互聯(lián)網(wǎng)將移動(dòng)通信的輕便與互聯(lián)網(wǎng)的快捷有機(jī)融合，為廣大用戶提供了更高效的信息交互平臺(tái)。

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

1 移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品UI設(shè)計(jì)的類型劃分

目前，移動(dòng)互聯(lián)網(wǎng)主流客戶端的UI設(shè)計(jì)類型主要有以下5種。

1）服務(wù)性查詢類。主要應(yīng)用于為用戶提供查詢信息服務(wù)的移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品。如百度、谷歌等各大搜索網(wǎng)站提供的手機(jī)客戶端產(chǎn)品的UI設(shè)計(jì)。

2）媒體信息類。主要應(yīng)用于各大門戶網(wǎng)站提供的資訊、信息發(fā)布平臺(tái)。如騰訊新聞客戶端、網(wǎng)易新聞客戶端的UI設(shè)計(jì)。

3）產(chǎn)品宣傳類。主要應(yīng)用于各大獨(dú)立品牌宣傳品牌文化或產(chǎn)品的客戶端UI設(shè)計(jì)。如今日美麗客戶端、唯品會(huì)客戶端的UI設(shè)計(jì)。

4）網(wǎng)絡(luò)電商類。主要應(yīng)用于B2C購物網(wǎng)站、團(tuán)購網(wǎng)站網(wǎng)上交易客戶端的UI設(shè)計(jì)。如手機(jī)淘寶、京東客戶端的UI設(shè)計(jì)。

5）社交網(wǎng)絡(luò)類。主要應(yīng)用于各大社交網(wǎng)站、論壇推出的用于移動(dòng)線上交流客戶端的UI設(shè)計(jì)。如微信客戶端、微博客戶端、手機(jī)人人的UI設(shè)計(jì)。

2 移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品UI設(shè)計(jì)要素分析

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

在移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品中，色彩的視覺效果對(duì)于用戶的使用體驗(yàn)有著重要影響。從色彩心理學(xué)的角度來講，不同顏色能夠給人帶來不同的心理感受。紅橙黃等鄰近色組成的暖色系能夠帶給人歡樂、愉快、熱情的感受，在UI設(shè)計(jì)中通常用于吸引用戶注意或渲染促銷、新產(chǎn)品推出等商業(yè)活動(dòng)的氛圍，如京東商城“6·18”網(wǎng)購狂歡節(jié)界面。青藍(lán)紫等鄰近色組成的冷色調(diào)給人以寧靜、平和、莊嚴(yán)的心理感受，在UI設(shè)計(jì)中可用于非商業(yè)性的學(xué)術(shù)客戶端或即時(shí)通訊客戶端。從機(jī)械工程學(xué)和生理學(xué)的角度來講，目前主流手機(jī)屏幕可以生成的色彩大概有2000萬左右，其數(shù)目十分龐大，而人眼的生理結(jié)構(gòu)是固定的，其色彩適應(yīng)范圍并不廣泛，一些純度較高的屏幕色彩反而會(huì)讓人感覺不適。

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

文字是移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品UI設(shè)計(jì)中不可或缺的部分，其承擔(dān)著補(bǔ)充說明、分區(qū)分類、協(xié)調(diào)畫面整體感等多種作用。從字體選擇的角度來講，現(xiàn)今主流客戶端主要采用宋體和黑體兩種字體。其中，宋體包括傳統(tǒng)宋體、仿宋體、華文中宋、華文仿宋等，這類字體結(jié)構(gòu)典雅端莊、方中帶圓、柔中帶剛，不僅能夠清晰地表明內(nèi)容，而且又不會(huì)使軟件閱讀顯得沉悶，可廣泛用于各類說明性文字中；黑體主要包括華文黑體、華文細(xì)黑、微軟雅黑、微軟正黑、中易黑體等，此類字體周正醒目、厚重有力、現(xiàn)代感強(qiáng)烈，適合手機(jī)軟件中的標(biāo)題、規(guī)則等需要引起受眾注意的內(nèi)容。

通常，文字居中排列多用于軟件啟動(dòng)界面中，文字橫排使用范圍最廣，文字豎排則較為罕見。設(shè)計(jì)師應(yīng)根據(jù)具體需要進(jìn)行處理，同時(shí)還要考慮到字間距與“留白”、“壓角”等的組合效果，使文字疏密恰到好處，減小文字分布不均或排列密集造成的閱讀不適感。

2.3 移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品UI設(shè)計(jì)中的圖形元素

圖形由點(diǎn)、線、面三要素組成。一物體等比無限縮小則成為點(diǎn)，點(diǎn)的規(guī)律性移動(dòng)所產(chǎn)生的軌跡便是線，多條線的組合與變動(dòng)可成為圖形，將這個(gè)圖形進(jìn)行整體性的移動(dòng)所產(chǎn)生的移動(dòng)軌跡則成為面。移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品UI設(shè)計(jì)的主要目的是滿足客戶的使用需求，實(shí)現(xiàn)和客戶之間的互動(dòng)。因此，動(dòng)態(tài)的圖形元素對(duì)其有著極為重要的意義。移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品UI設(shè)計(jì)中動(dòng)態(tài)圖形的形成，只需將某個(gè)圖形進(jìn)行有規(guī)律地移動(dòng)、相交、重疊、重復(fù)、發(fā)射等運(yùn)動(dòng)即可，動(dòng)態(tài)圖形賦予了畫面強(qiáng)烈的生命力。如幾滴飛濺過來的液體會(huì)讓讀者本能地閉上雙眼，這種圖形設(shè)計(jì)能引導(dǎo)讀者瞬間進(jìn)入到圖形畫面之中，并產(chǎn)生聯(lián)想。具體而言，表現(xiàn)圖形元素運(yùn)動(dòng)的方法主要有3種：（1）積累一定數(shù)量，量變產(chǎn)生質(zhì)變，即對(duì)畫面進(jìn)行多次的重復(fù)與相交；（2）模仿運(yùn)動(dòng)軌跡，利用近大遠(yuǎn)小的透視法則，賦予畫面立體感和動(dòng)感。

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

版式在移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品UI設(shè)計(jì)中占據(jù)關(guān)鍵地位，科學(xué)的版式設(shè)計(jì)不僅可以美化界面布局，還可以提高信息傳輸效率。一般而言，不同的移動(dòng)互聯(lián)網(wǎng)終端設(shè)備屏幕的尺寸大小不同，產(chǎn)品界面的細(xì)節(jié)設(shè)置也會(huì)略有不同，但總體設(shè)計(jì)思路原則是相同的。首先，分清楚內(nèi)容的主次關(guān)系，據(jù)此選擇出合適的版面位置。據(jù)調(diào)查得知，相同大小的板塊在版式上受到的用戶關(guān)注度不盡相同，左側(cè)比右側(cè)受關(guān)注度高、上方比下方受關(guān)注度高，因此左上方為主要內(nèi)容的最佳呈現(xiàn)點(diǎn)。其次，界面版式的設(shè)計(jì)要盡可能凸顯主體內(nèi)容。充分運(yùn)用可逆選項(xiàng)，方便對(duì)主要內(nèi)容進(jìn)行重復(fù)點(diǎn)擊，以提高主體內(nèi)容的出現(xiàn)頻率。再次，遵守布局無障礙原則。

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

移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品要更好地滿足用戶審美需要，更好地實(shí)現(xiàn)其人性化、易操作的產(chǎn)品優(yōu)勢(shì)，還應(yīng)滿足以下6個(gè)要點(diǎn)。

1）界面語言體系要完備。語言是用戶同移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品交互的第一工具，設(shè)計(jì)師和軟件開發(fā)者應(yīng)根據(jù)用戶群的結(jié)構(gòu)對(duì)界面語言體系進(jìn)行系統(tǒng)構(gòu)建，盡量做到界面語言覆蓋面廣、系統(tǒng)占用率低。一般來講，國(guó)產(chǎn)主流手機(jī)客戶端多采用簡(jiǎn)體中文、繁體中文、英語等語言。

2）設(shè)計(jì)風(fēng)格要與內(nèi)容統(tǒng)一。移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品的UI設(shè)計(jì)風(fēng)格要同企業(yè)形象、產(chǎn)品形象相統(tǒng)一。設(shè)計(jì)師不應(yīng)單純追求界面的設(shè)計(jì)感，而忽略軟件產(chǎn)品的整體商業(yè)效果，應(yīng)盡量使用戶能夠在線下了解的基礎(chǔ)上，快速地從視覺上接受線上服務(wù)終端。

3）界面效果要清晰。智能手機(jī)觸摸屏的像素、分辨率越來越高，這對(duì)移動(dòng)互聯(lián)網(wǎng)軟件的顯示效果也提出了更高的要求。設(shè)計(jì)師要盡量選擇高清素材，以提升界面的清晰度和軟件畫質(zhì)，為用戶帶來更好的視覺體驗(yàn)。

4）UI設(shè)計(jì)要遵從簡(jiǎn)潔性原則。移動(dòng)互聯(lián)網(wǎng)終端的應(yīng)用就是為客戶提供更便捷的服務(wù)，以最大限度地滿足客戶需要，這也就決定了移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品UI設(shè)計(jì)的簡(jiǎn)潔性。

5）UI設(shè)計(jì)要具備即時(shí)性。主要指對(duì)重要信息提示的即時(shí)性，用來指導(dǎo)客戶的正確操作以及保障客戶信息的安全和隱私。某些情況下，用戶由于對(duì)操作界面的不熟悉，會(huì)出現(xiàn)操作錯(cuò)誤或是不知所措的情況。這時(shí)，醒目的、即時(shí)的信息提示可指導(dǎo)用戶來完成界面操作任務(wù)。

4 結(jié)語

近年來，移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品UI設(shè)計(jì)呈現(xiàn)出了迅猛的發(fā)展趨勢(shì)和多元化的發(fā)展態(tài)勢(shì)，其擺脫了傳統(tǒng)互聯(lián)網(wǎng)的局限性，為客戶設(shè)計(jì)了一種創(chuàng)新的應(yīng)用空間，也是我國(guó)科技水平和經(jīng)濟(jì)發(fā)展的綜合體現(xiàn)。但目前我國(guó)的移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品UI設(shè)計(jì)仍然存在套路化、同質(zhì)化的問題，尚未將用戶體驗(yàn)與UI設(shè)計(jì)完美結(jié)合，需要付諸更多的努力和更加深入的研究，從而提高移動(dòng)互聯(lián)網(wǎng)軟件產(chǎn)品的UI設(shè)計(jì)水平。

參考文獻(xiàn)：

[1] 白瑩.社交化電子閱讀軟件UI設(shè)計(jì)——以“讀友”軟件界面設(shè)計(jì)為例[D].桂林：廣西師范大學(xué)，2013.

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

（作者單位：東部戰(zhàn)區(qū)總醫(yī)院博士后科研工作站）