移動互聯(lián)網(wǎng)產(chǎn)品的“外衣”

朱長永　張欣　班乃明

摘要：伴隨著移動互聯(lián)網(wǎng)信息時代的發(fā)展，移動互聯(lián)網(wǎng)如潮水般一樣席卷著整個世界，充斥著我們生活的各個方面，極大的方便了我們的生活。同時移動話聯(lián)網(wǎng)也在讓眾多傳統(tǒng)的行業(yè)發(fā)生顛覆性的變革，無論是世界百強的企業(yè)，還是名不見經(jīng)傳的小企業(yè)，無論是團隊還是個人，都受其極大的影響。移動互聯(lián)網(wǎng)已經(jīng)在改變了我們的生活習慣、工作方式、社交方式等。微信、陌陌、騰訊、APP、百度、網(wǎng)易、阿里巴巴、淘寶等眾多互聯(lián)網(wǎng)以及移動客戶端平臺的出現(xiàn)改變了我們的生活。同時作為互聯(lián)網(wǎng)產(chǎn)品的“外衣”圖形化的界面設(shè)計顯得尤其重要。

關(guān)鍵詞：移動互聯(lián)；信息化；界面設(shè)計

中圖分類號：TP37 文獻標識碼：A 文章編號：1009-3044（2015）12-0214-02

據(jù)統(tǒng)計到2014年年底，全球接入互聯(lián)網(wǎng)的用戶將達到總?cè)丝诘?0%，全球移動互聯(lián)網(wǎng)用戶接近30億。移動互聯(lián)網(wǎng)普及率在發(fā)達國家為78%，在發(fā)展中國家僅僅為32%，尚未使用移動互聯(lián)網(wǎng)的人90%以上生活在發(fā)展中國家，發(fā)展中國家將成為移動互聯(lián)網(wǎng)化的主力地區(qū)。移動互聯(lián)網(wǎng)用戶總數(shù)快速膨脹，接入設(shè)備迅速增加，移動互聯(lián)網(wǎng)滲透進度加速，網(wǎng)絡視頻成為年輕人的首選，網(wǎng)購增速遠超線下零售[1]。各種社交軟件、購物平臺、信息發(fā)布平臺的出現(xiàn)滿足了不同用戶的需求，而用戶只需要移動客戶端或者電腦客戶端口即可搜集到所需要的信息，同時信息化的時代，海量的信息資源充滿我們的終端設(shè)備，如何去吸引用戶去選擇所需要的信息，讓平臺引起用戶的注意，從而擴大影響力。這就需要一套完整的視覺化的設(shè)計即互聯(lián)網(wǎng)產(chǎn)品的“外衣”—界面化的圖形設(shè)計（UI）。UI設(shè)計的好壞也成為互聯(lián)網(wǎng)平臺營銷的關(guān)鍵所在。對于海量信息的存在，用戶沒有過多的時間去慢慢的篩選所需要的信息，或者同一個信息，有不同的發(fā)布渠道，而用戶在對于信息不明的情況下，他只能通過自己的感官去選擇有用的信息，而圖形化的界面設(shè)計對用戶來講就顯得極其重要，好的UI設(shè)計不僅是讓軟件變得有個性有品味，還要讓軟件的操作變得舒適、簡單、自由，充分體現(xiàn)軟件的定位和特點。

1 用戶界面設(shè)計——UI（User Interface）

用戶界面設(shè)計（UI設(shè)計）是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。軟件設(shè)計可分為兩個部分：編碼設(shè)計與UI設(shè)計。UI的本意是用戶界面，是英文User和 Interface的縮寫。從字面上看是用戶與界面2個部分組成，但實際上還包括用戶與界面之間的交互關(guān)系。 在互聯(lián)網(wǎng)迅速發(fā)展的時代，圖形化的界面設(shè)計工作顯得尤為重要。與之前的美工相比，做界面設(shè)計的“美工”被稱之為“UI設(shè)計師”或“UI工程師”。該職業(yè)也是從美工中延伸出來的，具備基本的美術(shù)素養(yǎng)，同時還擁有互聯(lián)網(wǎng)思維模式。其實軟件的界面設(shè)計就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計一樣，是產(chǎn)品的重要賣點。界面設(shè)計的好壞直接影響到用戶的感官使用，一個電子產(chǎn)品擁有美好的界面會給用戶帶來舒適的視覺享受，拉近人與商品的距離，它是建立在科學性之上的藝術(shù)設(shè)計。所以在快速發(fā)展的移動互聯(lián)網(wǎng)時代，UI產(chǎn)品設(shè)計的好壞直接影響到消費者的心理感受。即使產(chǎn)品的功能做的再完善，如果因為界面設(shè)計糟糕，那整個產(chǎn)品就是失敗的產(chǎn)品。界面設(shè)計（UI設(shè)計）研究的內(nèi)容大致分為三大部分：界面視覺設(shè)計（視覺設(shè)計師Graphic UI designer）、人與界面之間的交互（交互設(shè)計師interaction designer）研究人（用戶測試/研究工程師User experience engineer）。界面設(shè)計師主要是為了了解軟件產(chǎn)品、致力于提高軟件用戶體驗的產(chǎn)品外形設(shè)計師。區(qū)別與傳統(tǒng)意義上的美工，有部分也是從美工方面延伸而來，他們具有一定的設(shè)計專業(yè)素養(yǎng)，懂的如何把握用戶的視覺，如何讓界面更加美觀，視覺更加有沖擊力，讓用戶產(chǎn)品購買或者觀看的欲望。在移動話聯(lián)網(wǎng)產(chǎn)品的設(shè)計中，界面設(shè)計師整個產(chǎn)品設(shè)計的靈魂，而功能設(shè)計是產(chǎn)品設(shè)計的載體。用戶無法看到現(xiàn)實中實際的物品，只能夠通過終端設(shè)備看到虛擬的產(chǎn)品，而圖形化界面設(shè)計的虛擬產(chǎn)品，可以完成實際物品中的不足，從而吸引到用戶。

2 UI設(shè)計原則

圖形化的界面設(shè)計跟其他設(shè)計有其相同點，也有其不同點。在滿足美觀、使用性、視覺享受的前提下又有其自己獨特的原則：1）產(chǎn)品界面的簡潔性：簡潔不是簡單，界面設(shè)計要簡潔，大方，便于用戶的了解、使用，同時應該盡可能采用圖形語言，易識、易記。2）采用貼近用戶的大眾語言：從用戶的角度出發(fā)考慮組織語言，而不是從開發(fā)者、設(shè)計者的角度去組織語言，畢竟產(chǎn)品的設(shè)計是給用戶使用的。[2] 3）減少記憶復雜化： 人腦不是電腦，在文字以及圖形之間，圖形的記憶速度遠遠超過文字的記憶速度。4）風格、結(jié)構(gòu)的一致性：界面的結(jié)構(gòu)必須清晰一致，風格必須與產(chǎn)品內(nèi)容相一致，這樣用戶就能夠從風格上迅速的了解其產(chǎn)品的類型，在用戶腦海中產(chǎn)生一個短暫的記憶存儲，然后如果對產(chǎn)品感興趣，繼而可以進一步的加深了解。5）必須保持用戶界面的清晰度：用戶界面必須清晰，對于移動設(shè)備來說，因為其設(shè)備大小不一致，所以在設(shè)計的時候應該要考慮其尺寸以及畫面的清晰度，同時也應該照顧到不同的用戶人群。6）用戶的熟悉程度：用戶可通過已掌握的知識來使用界面，但不應超出一般常識。7）排列：一個有序的界面能讓用戶輕松的使用。8）安全性：用戶能自由的作出選擇，且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統(tǒng)的提示。9）人性化：高效率和用戶滿意度是人性化的體現(xiàn)。應具備專家級和初級玩家系統(tǒng)，即用戶可依據(jù)自己的習慣定制界面，并能保存設(shè)置。10）智能化 通過更為簡單的操作，完成更加復雜繁瑣的工作。

3 關(guān)于UI設(shè)計中的尺寸

市場上存在的手機系統(tǒng)主要是以安卓、IOS兩套系統(tǒng)為主，在進行ui設(shè)計過程中，因為系統(tǒng)以及分辨率的不同會導致界面設(shè)計的不同。我們以安卓及iOS系統(tǒng)來分別講解：

安卓常用的界面尺寸：Android常用界面尺寸：480*800、720*1280、1080*1920（單位都是像素：px）由于Android的尺寸多種多樣，只需做幾套比較主流的界面尺寸設(shè)計即可。

Android的APP界面尺寸與iPhone的界面基本相同：狀態(tài)欄、導航欄/標題欄、菜單欄/工具欄以及中間的內(nèi)容區(qū)域組成[3]。以720*1280尺寸為例，元素的尺寸：

狀態(tài)欄（status）：高度為50px

導航欄（nav）：高度為96px

標簽欄（tab）：高度為96px

標簽欄（tab）：高度為1038px（1280-50-96-96=1038）

常用字體大小：Android常用的字號是：26px

IOS長用的界面尺寸

iPhone界面尺寸：320*480、640*960、640*1136（單位都是像素：px）

當然在設(shè)計當中我們并不需要每一種尺寸都做一套圖，建議取用640*960的尺寸設(shè)計。

iPhone的APP界面一般由：狀態(tài)欄、導航欄/標題欄、菜單欄/工具欄以及中間的內(nèi)容區(qū)域組成。以640*960尺寸為例，元素的尺寸：

狀態(tài)欄（status）：高度為40px

導航欄（nav）：高度為88px

標簽欄（tab）：高度為98px

內(nèi)容區(qū)域：高度為734px（960-40-88-98=734）

至于iPhone5/5s的內(nèi)容區(qū)域高度增加至910px。

在IOS7的風格中，蘋果已經(jīng)在開始弱化狀態(tài)欄的存在，將狀態(tài)欄和導航欄合在了一起， 但是尺寸高度保持不變。

常用字體大小 ：蘋果默認中文字體為：黑體-簡體

以IOS7為例：導航欄標題：34px 普通按鈕：34px 表格頭部：34px 表格標簽：28px 頁簽欄文字：20px

一般將軟件UI設(shè)計稿分辨率設(shè)為640x960px，這個尺寸是ios5的分辨率，同時也可以兼容大部分安卓手機。并且盡量使用形狀和圖層樣式，這樣可以避免拉伸引起的變形和像素損失，達到一勞永逸的效果。（如圖1）

4 UI設(shè)計的基本流程

在進行用戶界面的設(shè)計工作時我們應該需要遵循以下簡單的流程

1）了解用戶的需求：在進行UI設(shè)計過程中，需求設(shè)計角色會確定軟件的目標用戶，獲取最終用戶和直接用戶的需求。用戶交互要考慮到目標用戶的不同引起的交互設(shè)計重點的不同。

2）采集目標用戶的習慣交互方式：不同類型的目標用戶有不同的交互習慣。這種習慣的交互方式往往來源于其原有的針對現(xiàn)實的交互流程、已有軟件工具的交互流程。因此需要了解用戶的交互習慣，如果是大眾群體的話，要考慮大眾群體通用的交互方式，如果是有針對性的目標客戶，可以針對這一部分人群進行分析。

3）提示和引導用戶軟件是用戶的工具。因此應該由用戶來操作和控制軟件。軟件響應用戶的動作和設(shè)定的規(guī)則。對于用戶交互的結(jié)果和反饋，提示用戶結(jié)果和反饋信息，引導用戶進行用戶需要的下一步操作。

4）界面化的設(shè)計 針對目標客戶的需求以及用戶的習慣，進行界面設(shè)計，在設(shè)計的過程中要與客戶之間經(jīng)常的交流，以此來了解用戶的需求。

5）交互功能的實現(xiàn) 在界面話的設(shè)計完成之后，需要與程序員之間建立溝通，并通過程序來實現(xiàn)其中的功能

6）軟件測試分析 軟件在制作完成之后，要將軟件上傳到不同的平臺進行測試，以此來檢測軟件中存在的若干問題，力求將軟件的漏洞減少到最小化。

參考文獻：

[1] 中國產(chǎn)業(yè)網(wǎng)宏觀數(shù)據(jù)[DB/CD].（2014-05-18）

[2] 百度UI設(shè)計[DB/CD]. （2015-02-18）.

[3] Android APPUI設(shè)計、切圖的常用尺寸大全[DB/CD].（2015-01-13）.