淺談界面互聯(lián)網(wǎng)化的設(shè)計思路

摘 要：本文主要圍繞“界面設(shè)計互聯(lián)網(wǎng)化”這個話題，通過筆者對現(xiàn)有系統(tǒng)界面的問題的總結(jié)及對電商平臺的界面的學(xué)習心得，整理出一套“界面互聯(lián)網(wǎng)化的設(shè)計思路”供從事界面設(shè)計師的人員進行借鑒和學(xué)習，希望他們通過對本文的學(xué)習，能夠有所啟發(fā)和幫助。

關(guān)鍵詞：界面設(shè)計；互聯(lián)網(wǎng)化

中圖分類號：TP311.52 文獻標識碼：A文章編號：2096-4706（2018）07-0092-03

Abstract：This article focuses on the topic of“internet interface design”. Through the author’s summary of the problems of the existing system interface and the understanding of the interface of the e-commerce platform，a set of“interface internet design ideas”is arranged for the people engaged in interface designers for reference and learning. I hope that they will be enlightened and helpful through studying this article.

Keywords：interface design；internet

0 引 言

2017年底，筆者為一位大客戶現(xiàn)場做2018年的規(guī)劃交流，當交流結(jié)束后，客戶負責人說帶筆者去體驗一下現(xiàn)有生產(chǎn)系統(tǒng)。當我們來到各渠道看到那熟悉的系統(tǒng)界面時，客戶負責人問筆者有什么體會或感受，筆者當時真的挺慚愧的，客戶各渠道所使用的系統(tǒng)于2011年建設(shè)，各渠道的界面風格不統(tǒng)一、界面信息量多且復(fù)雜，存在隨意堆積、界面排版沒有規(guī)律、界面加載慢、提示不友好等問題，跟互聯(lián)網(wǎng)企業(yè)或電商平臺的界面根本沒有可比性。客戶負責人語重心長地說，現(xiàn)在都是移動互聯(lián)網(wǎng)時代，一切都向著互聯(lián)網(wǎng)看齊，誰跟不上時代的步伐，誰就會被時代所淘汰，最近很流行的一句話是：“只有不斷奔跑，才能停留在原地。”通過這次交流，筆者感觸很深，很感謝客戶負責人給筆者這次機會，讓筆者真正去思考這個問題。

1 界面的現(xiàn)存問題

隨著移動互聯(lián)網(wǎng)的迅猛發(fā)展，商業(yè)模式正在發(fā)生巨大變化，移動互聯(lián)網(wǎng)所具有的信息整合和人際傳播功能，改變了傳統(tǒng)的客戶行為，用戶體驗已經(jīng)成為系統(tǒng)設(shè)計的最重要的元素之一，傳統(tǒng)的系統(tǒng)架構(gòu)模式已經(jīng)不能適應(yīng)互聯(lián)網(wǎng)時代的發(fā)展要求，在實際應(yīng)用中暴露出較多問題。

界面風格不統(tǒng)一：實體渠道和電子渠道界面風格不一致，客戶面對專業(yè)、繁雜的界面，自助辦理意愿低。

用戶使用體驗差：功能菜單堆疊，界面流程復(fù)雜、專業(yè)術(shù)語多，一線人員業(yè)務(wù)辦理效率低，工作人員使用門檻較高。

系統(tǒng)間耦合度高：各渠道獨立建設(shè)，相同業(yè)務(wù)重復(fù)實現(xiàn)，前后臺緊密耦合，且具備各自的業(yè)務(wù)邏輯和規(guī)則，造成系統(tǒng)服務(wù)大量冗余。

2 界面的設(shè)計目標

實現(xiàn)多渠道界面風格統(tǒng)一，統(tǒng)一內(nèi)外部客戶業(yè)務(wù)辦理視角，將各渠道界面風格進行融合統(tǒng)一，并提供匹配智能終端的靈活支撐模式，通過自適應(yīng)的方式實現(xiàn)界面在不同渠道不同類型終端上的快速支撐。

引入互聯(lián)網(wǎng)元素的UED設(shè)計，打造全新的客戶體驗，從用戶交互體驗出發(fā)，采用互聯(lián)網(wǎng)界面風格與電商化操作模式，針對不同渠道界面的操作特點，采用響應(yīng)式設(shè)計，對系統(tǒng)界面進行設(shè)計，簡化頁面元素，提高系統(tǒng)易用性，提升客戶體驗。

3 界面的設(shè)計思路

界面設(shè)計要以客戶為中心，從用戶交互體驗出發(fā)，簡化頁面元素，精簡業(yè)務(wù)流程，采用互聯(lián)網(wǎng)界面風格與電商化操作模式，引入多屏統(tǒng)一技術(shù)，提高系統(tǒng)易用性，提升用戶體驗。

界面設(shè)計互聯(lián)網(wǎng)化是以極簡至酷為設(shè)計理念，充分以客戶為中心，簡化頁面元素，優(yōu)化界面及流程，提升業(yè)務(wù)受理效率與使用感知。互聯(lián)網(wǎng)化設(shè)計需要遵循以下原則：

（1）界面風格極簡：采用扁平化設(shè)計，網(wǎng)格化布局，使用大量純色，突出重點元素對比度與層級，提供清晰明確的視覺反饋。

（2）頁面元素精簡：在業(yè)務(wù)每個步驟中放置關(guān)鍵的輸入元素，刪除不必要的元素，并盡量提供系統(tǒng)默認值，減少輸入，并隱藏不常用的輸入元素，需要時再展開。

（3）操作體驗便捷：操作流程簡單，辦理過程有引導(dǎo)，操作步驟有示意，交互過程有提示，提示信息客戶化。

（4）界面響應(yīng)式設(shè)計：支持智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境（系統(tǒng)平臺、屏幕尺寸、屏幕定向等）進行相對應(yīng)的布局。

（5）支持終端適配：能根據(jù)不同的訪問設(shè)備和信息瀏覽手段，自動進行頁面格式轉(zhuǎn)換。

界面組裝采用組件化設(shè)計方式，使頁面通過組件的組合封裝即可完成頁面開發(fā)，界面可以靈活調(diào)整，快速定制，便于風格統(tǒng)一，實現(xiàn)業(yè)務(wù)功能的重用率。組件化設(shè)計原則如下：

（1）組件豐富，基本涵蓋頁面所有元素，支持大多數(shù)頁面組裝。

（2）高內(nèi)聚，組件功能、邏輯、資源組織封裝嚴密，邊界清晰，依賴性低，易維護。

（3）可重用，組件功能明確，實現(xiàn)清晰，API易于理解，可重構(gòu)。

（4）可組合，支持組件組合成新組件與復(fù)合組件。

（5）可擴展，提供組件擴展接口，便于新組件開發(fā)。

多屏統(tǒng)一模式，通過用戶終端屏幕進行檢測，路由到不同的頁面顯示模板和UCD來渲染界面，實現(xiàn)多屏統(tǒng)一，其實現(xiàn)原則如下：

（1）界面具備終端屏幕尺寸檢測能力。

（2）各渠道前臺技術(shù)架構(gòu)統(tǒng)一，且與后端服務(wù)架構(gòu)徹底解耦。

（3）統(tǒng)一渠道接口，剔除重復(fù)功能，對接口服務(wù)歸一化處理，協(xié)議上可以適配不同渠道對協(xié)議的要求。

4 界面適配

界面適配分為WEB端界面適配及APP端界面適配。其中WEB端界面適配為不同終端（PC、Pad、Phone等）設(shè)備訪問WEB頁面的適配原則。APP端主要針對移動端開發(fā)的APP應(yīng)用的適配原則。

4.1 WEB端界面適配

為了向用戶提供友好舒適的操作環(huán)境和多終端統(tǒng)一的操作體驗，同時達到降低終端擴充所帶來的界面開發(fā)維護成本的目的，需要通過界面適配，滿足不同用戶操作場景和智能終端設(shè)備的界面顯示要求。

在WEB端采用響應(yīng)式頁面設(shè)計，頁面根據(jù)不同設(shè)備環(huán)境（屏幕尺寸、屏幕定向、系統(tǒng)平臺等）以及操作行為（改變窗口大小等）自動響應(yīng)調(diào)整，進行屏幕尺寸和分辨率切換、框架調(diào)整、圖片及文字尺寸縮放，實現(xiàn)一個頁面能夠跨平臺跨終端適配。

響應(yīng)式設(shè)計中的CSS媒體查詢能夠根據(jù)不同智能終端的設(shè)備類型和設(shè)備特性提供不同的CSS樣式集合，包括設(shè)備的系統(tǒng)平臺、顯示區(qū)域尺寸、分辨率、屏幕定向等。頁面能夠通過加載不同的CSS樣式，實現(xiàn)終端屏幕的靈活適配。

媒體查詢表達式由設(shè)備類型（PC、Pad、Phone等）和一個或多個檢測媒體特性（視窗高度、視窗寬度、分辨率高度、分辨率寬度等）的聲明構(gòu)成，支持設(shè)置媒體類型和終端設(shè)備的物理特性檢測，并根據(jù)設(shè)備特性匹配特定的CSS樣式，頁面設(shè)計時只需要針對不同的設(shè)備屬性，如屏幕分辨率等級來編寫不同的頁面布局樣式，頁面在智能終端加載時通過對終端設(shè)備屬性的檢查，會根據(jù)終端的屏幕分辨率來選擇一種適合頁面的布局，加載對應(yīng)的CSS樣式。通過響應(yīng)式設(shè)計的終端適配技術(shù)，PC終端上的界面可以適配顯示在Phone上，但實際情況是PC的業(yè)務(wù)辦理界面會安排顯示較多的頁面元素，適配后顯示在Phone上也會較為擁擠，不利于操作，在具體實現(xiàn)時一般為Phone設(shè)計單獨的頁面元素展示。

頁面布局設(shè)計采用CSS流動布局，通過將頁面框架和各元素的固定像素替換成靈活的百分比寬度，實現(xiàn)用戶在終端設(shè)備上對頁面窗口進行縮放時，頁面布局能夠自動適配窗口大小顯示。將固定像素轉(zhuǎn)換為百分比寬度可套用以下公式：百分比寬度=目標元素寬度÷上下文元素寬度。

4.2 APP端界面適配

APP端由于設(shè)備、分辨率的不同對于界面適配有著更高的要求，基于產(chǎn)品快速迭代及人力投入成本的考量，可以對Android及IOS采用同一套界面規(guī)范，在進行具體開發(fā)適配的過程中根據(jù)各自平臺進行微調(diào)。同樣也可以針對Android與IOS兩者不同的平臺特性及界面要求設(shè)計兩套界面規(guī)范，這樣可以取得更好的適配效果。

隨著智能手機的快速發(fā)展，市場上用戶使用的手機終端也出現(xiàn)了多元化的趨勢，有多種不同的屏幕尺寸、分辨率存在，這里針對不同的手機終端進行統(tǒng)一的規(guī)范劃分。

分辨率根據(jù)由低到高大致可以劃分為中分辨率、高分辨率、超高分辨率、超超高分辨率四類，這四者之間存在一定的倍率關(guān)系。

IOS和Android的適配原理基本是一致的，都是基于密度的像素點進行適配的。為了便捷開發(fā)允許IOS和Android采用同一套的界面規(guī)范。

5 界面設(shè)計

界面設(shè)計從界面布局、視覺風格、界面要素三大部分進行設(shè)計要求，提升界面的統(tǒng)一性和協(xié)調(diào)性。

5.1 界面布局

界面布局將分為WEB端與APP端分別講述不同使用終端的布局設(shè)計，以用戶為中心，采用扁平化設(shè)計，通過合理的布局設(shè)計層級，保證界面直觀、易用。在視覺觀感和操作交互上帶給用戶全新的體驗。

WEB端界面布局將針對不同渠道界面的操作特點，提高系統(tǒng)易用性，提升客戶體驗。為了實現(xiàn)多渠道的界面風格統(tǒng)一和多終端界面的響應(yīng)式布局，這里將采用柵格化的方式進行界面布局設(shè)計。

將整個界面通過水平和垂直的交叉的參考線分成同等大小的若干小格，各個功能模塊內(nèi)容分別占用若干個小格。當需要調(diào)整某塊區(qū)域布局大小時，即可通過修改各個內(nèi)容塊的柵格參數(shù)（如起始、截至網(wǎng)格位置），配合界面適配技術(shù)，在不同設(shè)備上進行相同的布局。

APP端界面布局將針對手機的特點，對信息進行有效組織，通過合理布局把信息展示給用戶。合理的布局設(shè)計可以使信息變得井然有序，用戶可以很容易地找到自己想要的信息，產(chǎn)品的交互效率和信息的傳遞效率都得到提升，提高用戶體驗。

5.2 視覺風格

視覺設(shè)計是對界面元素的圖片化處理，包括主題、色彩、字體、圖片。視覺設(shè)計的總體要求如下：

色彩搭配要恰當。色系搭配以用戶在較長時間使用后不至于感到視覺過于疲勞為宜，切忌色彩過多過亮，妨礙用戶視覺交互。

系統(tǒng)采用統(tǒng)一的默認中英字體和字號。

要求通過在文本字體、色彩上增加格式的變化，如加粗、下劃線、行前導(dǎo)符、鏈接文本的不同狀態(tài)定義等，將冗長的文檔、表格等條理化，便于辨識。

要求通過視覺元素的組織引導(dǎo)用戶完成工作任務(wù)，視覺引導(dǎo)遵循從上至下、從左至右的原則，如在表單中依照該原則將重要字段信息依次放置在視覺軌跡上引導(dǎo)用戶關(guān)注。

5.3 界面要素

界面要素可以概括為界面上的各個交互控件。控件是指顯示在表單上的圖形對象，也就是允許用戶控制程序的圖形用戶界面對象，如文本框、復(fù)選框、命令按鈕等。主要描述界面中涉及到的控件在樣式、交互等方面滿足的要求，其中控件設(shè)計的總體要求如下：

分欄目的標題使用精簡明晰的描述性文字，提高用戶的友好感知度。

第三方控件在執(zhí)行過程中不能破壞頁面原布局。

WEB端控件將對“超鏈接、輸入框、文本框、下拉框、單選框、復(fù)選框、按鈕、表格、日歷控件、標簽頁、冒泡提示、消息提示框、系統(tǒng)響應(yīng)式狀態(tài)標識”這十三種WEB端常用的控件通過樣式、規(guī)則、圖示的方式進行系統(tǒng)的說明。

APP端控件將對“輸入框、搜索框、篩選列表、按鈕、日歷控件、標簽頁、列表、消息提示框、系統(tǒng)響應(yīng)狀態(tài)標識”這九種APP端常用的控件通過樣式、規(guī)則、圖示的方式進行系統(tǒng)的說明。

6 結(jié) 論

通過本文對“界面設(shè)計互聯(lián)網(wǎng)化”的描述，希望未來或即將成為界面設(shè)計師的你，能夠參照應(yīng)用到實際系統(tǒng)或項目建設(shè)當中，并通過實戰(zhàn)去發(fā)現(xiàn)和總結(jié)更多的經(jīng)驗，而后對本文的內(nèi)容進行完善和優(yōu)化，也算是作為一個界面設(shè)計師的經(jīng)驗傳遞吧！最后希望看到身為未來界面設(shè)計師的你，能夠站在講臺上對自己從事這一行業(yè)的心得體會和經(jīng)驗進行分享。

參考文獻：

[1] 章婕.用戶體驗的界面設(shè)計 [J].科技創(chuàng)新與應(yīng)用，2015（17）：82-83.

[2] 張廷權(quán).基于用戶體驗的移動互聯(lián)網(wǎng)產(chǎn)品運營評估體系探討 [J].電信科學(xué)，2011，27（8）：21-24.

作者簡介：鄭天明（1975-），男，福建仙游人，項目經(jīng)理，工程師。研究方向：業(yè)務(wù)架構(gòu)。