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

許寧

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

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

1 移動互聯(lián)網(wǎng)軟件產品UI設計的類型劃分

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

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

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

3）產品宣傳類。主要應用于各大獨立品牌宣傳品牌文化或產品的客戶端UI設計。如今日美麗客戶端、唯品會客戶端的UI設計。

4）網(wǎng)絡電商類。主要應用于B2C購物網(wǎng)站、團購網(wǎng)站網(wǎng)上交易客戶端的UI設計。如手機淘寶、京東客戶端的UI設計。

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

2 移動互聯(lián)網(wǎng)軟件產品UI設計要素分析

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

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

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

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

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

2.3 移動互聯(lián)網(wǎng)軟件產品UI設計中的圖形元素

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

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

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

3 移動互聯(lián)網(wǎng)軟件產品UI設計的要點

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

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

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

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

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

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

4 結語

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

參考文獻：

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

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

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