用戶體驗(yàn)設(shè)計(jì)規(guī)范與內(nèi)部UI支持系統(tǒng)應(yīng)用研究

楊帆 胡蓉 賈倩倩 王俊瀟

摘? ?要：基于《國家電網(wǎng)公司 2016 年信息化建設(shè)實(shí)施意見》中提出的要持續(xù)關(guān)注基層需求、關(guān)注用戶體驗(yàn)、關(guān)注應(yīng)用成效，構(gòu)建多方交流生態(tài)圈，逐步擴(kuò)大地市公司觀察員范圍，充分發(fā)揮基層作用，推進(jìn)用戶體驗(yàn)管控工作標(biāo)準(zhǔn)化、規(guī)范化建設(shè)，不斷提高公司信息系統(tǒng)用戶體驗(yàn)水平的指導(dǎo)意見。結(jié)合企業(yè)在信息化建設(shè)過程中產(chǎn)品用戶體驗(yàn)設(shè)計(jì)方面的實(shí)際需求，提出通過內(nèi)部UI系統(tǒng)的工具保障產(chǎn)品設(shè)計(jì)的標(biāo)準(zhǔn)化、規(guī)范化建設(shè)。

關(guān)鍵詞：用戶體驗(yàn)? 標(biāo)準(zhǔn)化設(shè)計(jì)? 設(shè)計(jì)規(guī)范? 設(shè)計(jì)組件

中圖分類號(hào)：TP311? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A? ? ? ? ? ? ? ? ? ? ? ? 文章編號(hào)：1674-098X（2019）04（c）-0002-03

2013年，國家電網(wǎng)總部成立桌面可視化項(xiàng)目組，該項(xiàng)目的重點(diǎn)是研究軟件產(chǎn)品的體驗(yàn)設(shè)計(jì)。經(jīng)過一年的研究，國家電網(wǎng)公司在2015年正式成立了用戶體驗(yàn)管控組。該組成立至今，一直針對(duì)國家電網(wǎng)公司在建及在運(yùn)信息系統(tǒng)，進(jìn)行全面的用戶體驗(yàn)評(píng)審及評(píng)測工作。通過近3年的用戶體驗(yàn)工作開展，國家電網(wǎng)公司主要解決以下3個(gè)方面問題：一是有效促進(jìn)了“以用戶為中心”的用戶體驗(yàn)理念在各單位的推廣;二是公司信息系統(tǒng)用戶體驗(yàn)整體質(zhì)量略有提升，管控工作成效初步顯現(xiàn);三是公司主要研發(fā)廠商均已意識(shí)到用戶體驗(yàn)管控工作的重要性，目前研發(fā)廠商正逐步加強(qiáng)本單位內(nèi)部的用戶體驗(yàn)管理。

為進(jìn)一步統(tǒng)一信息系統(tǒng)風(fēng)格，提高交互操作友好性，增強(qiáng)功能性能體驗(yàn)，降低用戶學(xué)習(xí)成本、縮短廠商培訓(xùn)周期、提高員工工作效率，國家電網(wǎng)公司將常態(tài)化開展用戶體驗(yàn)管控工作，并通過成立的公司級(jí)用戶體驗(yàn)專業(yè)機(jī)構(gòu)提供必要資源環(huán)境及相關(guān)制度規(guī)范支撐，最終實(shí)現(xiàn)公司信息系統(tǒng)用戶體驗(yàn)質(zhì)量的持續(xù)提升。

啟明星用戶體驗(yàn)設(shè)計(jì)規(guī)范研究與內(nèi)部UI支持系統(tǒng)研發(fā)項(xiàng)目，以用戶體驗(yàn)為核心開展工作，工作內(nèi)容包括視覺設(shè)計(jì)、交互設(shè)計(jì)以及前端制作3個(gè)方面，重點(diǎn)是形成規(guī)范化、系統(tǒng)化的一系列通用設(shè)計(jì)組件。通過設(shè)計(jì)規(guī)范保證用戶體驗(yàn)設(shè)計(jì)成果的有效性及可靠性，并不斷優(yōu)化組件庫來提升產(chǎn)品或信息系統(tǒng)的可用性及易用性，最終達(dá)到提升用戶工作效率的目的，實(shí)現(xiàn)國家電網(wǎng)公司對(duì)用戶體驗(yàn)設(shè)計(jì)工作管控的最根本價(jià)值。

國家電網(wǎng)公司將進(jìn)一步提升信息系統(tǒng)整體用戶體驗(yàn)質(zhì)量，全面提升用戶體驗(yàn)工作意識(shí)，促進(jìn)“以用戶為中心”工作理念推廣，實(shí)現(xiàn)信息系統(tǒng)用戶體驗(yàn)質(zhì)量的有效提高。啟明星用戶體驗(yàn)設(shè)計(jì)規(guī)范研究與內(nèi)部UI支持系統(tǒng)研發(fā)項(xiàng)目，將為國家電網(wǎng)公司構(gòu)建完善的用戶體驗(yàn)制度規(guī)范體系提供有力保障。將國家電網(wǎng)公司的精神落到實(shí)處，理論與實(shí)踐結(jié)合，針對(duì)國家電網(wǎng)公司信息化特點(diǎn)，制定必要的設(shè)計(jì)標(biāo)準(zhǔn)規(guī)范，實(shí)現(xiàn)設(shè)計(jì)有據(jù)可依，管控公正嚴(yán)肅。為國網(wǎng)公司信息系統(tǒng)的用戶體驗(yàn)提升工作，起到良好的示范作用，同時(shí)也為啟明星公司研發(fā)的軟件系統(tǒng)，塑造用戶體驗(yàn)良好的品牌形象。

1? 概述

隨著國內(nèi)外互聯(lián)網(wǎng)的蓬勃發(fā)展，產(chǎn)品“用戶體驗(yàn)”早已成為企業(yè)信息化建設(shè)中至關(guān)重要的一環(huán)。User Experience用戶體驗(yàn)，是用戶在使用產(chǎn)品（或服務(wù)）的過程中建立的一種主觀的感受。以用戶為中心設(shè)計(jì)就是產(chǎn)品設(shè)計(jì)時(shí)從用戶的需求和感受出發(fā)，使產(chǎn)品可用、易用?；趯?duì)用戶體驗(yàn)的研究提煉出一套標(biāo)準(zhǔn)化、規(guī)范化的設(shè)計(jì)規(guī)范，并通過建設(shè)內(nèi)部UI支持系統(tǒng)使用戶體驗(yàn)設(shè)計(jì)規(guī)范實(shí)現(xiàn)落地。研發(fā)各環(huán)節(jié)人員可通過內(nèi)部UI支持系統(tǒng)快捷完成頁面設(shè)計(jì)、配置、前端代碼等環(huán)節(jié)工作。

內(nèi)部UI支持系統(tǒng)是一個(gè)基于最新Web技術(shù)的企業(yè)級(jí)通用管理系統(tǒng)快速開發(fā)框架，可以幫助企業(yè)極大的提高工作效率，節(jié)省開發(fā)成本，提升品牌形象。以AOS.UED內(nèi)部UI支持系統(tǒng)所提供的基礎(chǔ)組件為基礎(chǔ)，快速開發(fā)各種BS后臺(tái)管理系統(tǒng)。AOS.UED內(nèi)部UI支持系統(tǒng)緊貼業(yè)務(wù)特性，涵蓋了大量的常用組件，基本頁面模板和基礎(chǔ)功能，最大程度上幫助企業(yè)節(jié)省時(shí)間成本和費(fèi)用開支。

2? 研究關(guān)鍵點(diǎn)

2.1 沉淀用戶體驗(yàn)設(shè)計(jì)原則，形成用戶體驗(yàn)設(shè)計(jì)規(guī)范

中國互聯(lián)網(wǎng)發(fā)展的這15年，無數(shù)產(chǎn)品涌現(xiàn)和消亡，用戶行為不斷變遷?；ヂ?lián)網(wǎng)產(chǎn)品必須通過自身不斷快速進(jìn)化才能適應(yīng)不斷變化的市場環(huán)境。人對(duì)用戶體驗(yàn)的喜好標(biāo)準(zhǔn)并未變化，用戶始終喜歡清晰、簡單、自然、好用的設(shè)計(jì)和產(chǎn)品。今天，用戶體驗(yàn)已成為全球互聯(lián)網(wǎng)產(chǎn)品的命脈。不僅國外各互聯(lián)網(wǎng)知名企業(yè)將產(chǎn)品的用戶體驗(yàn)設(shè)計(jì)工作作為核心，如騰訊公司，產(chǎn)品從需求到產(chǎn)出，大部分時(shí)間和精力都用于琢磨和研發(fā)更好的用戶體驗(yàn)。這也是為什么騰訊的互聯(lián)網(wǎng)產(chǎn)品擁有整互聯(lián)網(wǎng)最大用戶群體的原因。2016年，中國提出“互聯(lián)網(wǎng)+”的概念，加速傳統(tǒng)行業(yè)像互聯(lián)網(wǎng)行業(yè)的轉(zhuǎn)型。用戶體驗(yàn)設(shè)計(jì)理念深入到中國各行各業(yè)，并貫穿到產(chǎn)品研發(fā)的始終。各行業(yè)的領(lǐng)先企業(yè)正不斷培養(yǎng)自己的用戶體驗(yàn)團(tuán)隊(duì)，全面開展用戶體驗(yàn)設(shè)計(jì)研究工作，不斷推動(dòng)企業(yè)信息化的有效發(fā)展，并直接影響到研發(fā)及技術(shù)手段創(chuàng)新，最終成為獲得更大成效的催化劑。據(jù)國外統(tǒng)計(jì)，80%的軟件生命周期成本發(fā)生在維護(hù)階段，60%的維護(hù)階段工作是由于前期用戶需求不清楚導(dǎo)致的。所以每在用戶體驗(yàn)設(shè)計(jì)上投入1美元，回報(bào)是2～100美元。（如圖1和圖2所示）。

綜上所述用戶體驗(yàn)如此重要，那么如何使產(chǎn)品設(shè)計(jì)尤其是含有多個(gè)產(chǎn)品線的情況下能夠簡化開發(fā)過程、使多個(gè)產(chǎn)品擁有一致的體驗(yàn)、保障產(chǎn)品設(shè)計(jì)的易用性和好的用戶體驗(yàn)？

所謂無規(guī)矩不成方圓，經(jīng)濟(jì)社會(huì)高速發(fā)展的今天，各大企業(yè)之間的競爭此起彼伏，一套有效的管理制度及運(yùn)作規(guī)范都能幫助這個(gè)企業(yè)在市場競爭中處于上游地位，如時(shí)尚快消品牌ZARA的“一條龍”服務(wù)，創(chuàng)立了符合企業(yè)實(shí)際情況的生產(chǎn)設(shè)計(jì)規(guī)范，從而幫助ZARA一步一步建立自己的時(shí)裝帝國。所有規(guī)范都是為了提高生產(chǎn)力而制定的標(biāo)準(zhǔn)。同理，互聯(lián)網(wǎng)行業(yè)的產(chǎn)品設(shè)計(jì)規(guī)范，就是將產(chǎn)品的一切交互行為、視覺樣式都要嚴(yán)格遵從可用性原則和用戶體驗(yàn)原則，并根據(jù)公司業(yè)務(wù)目標(biāo)，制定出涵蓋公司產(chǎn)品功能范圍內(nèi)的所有相關(guān)控件與相應(yīng)的展示樣式。設(shè)計(jì)規(guī)范能夠指導(dǎo)團(tuán)隊(duì)成員高效地制作出既滿足業(yè)務(wù)需求，又能讓用戶輕易完成目標(biāo)的產(chǎn)品。每個(gè)公司或者團(tuán)隊(duì)，到了一定階段，都需要產(chǎn)品設(shè)計(jì)規(guī)范來突破瓶頸，提高效率，改善產(chǎn)品，讓產(chǎn)品和團(tuán)隊(duì)都能夠輕裝上陣，走得更遠(yuǎn)。

設(shè)計(jì)規(guī)范要具備明確層級(jí)和邏輯，便于其他組員查找相應(yīng)內(nèi)容，便于設(shè)計(jì)師日后對(duì)不同模塊進(jìn)行內(nèi)容完善。設(shè)計(jì)規(guī)范研究的步驟如下。

（1）素材積累。

將公司近幾年的典型項(xiàng)目的設(shè)計(jì)成果，以及現(xiàn)有在設(shè)計(jì)初期的產(chǎn)品的效果圖進(jìn)行歸納和總結(jié)，原文件和導(dǎo)出文件進(jìn)行分類整理，對(duì)設(shè)計(jì)過程中使用的控件和模式進(jìn)行歸納，同時(shí)簡單記錄一些界面設(shè)計(jì)的初衷，有爭議的設(shè)計(jì)點(diǎn)等等。及時(shí)地總結(jié)對(duì)后期設(shè)計(jì)規(guī)范的制定打下良好基礎(chǔ)，否則很容易忘記設(shè)計(jì)初衷，找不到文件或者設(shè)計(jì)負(fù)責(zé)人等問題。

（2）會(huì)議總結(jié)。

開始制作設(shè)計(jì)規(guī)范時(shí)，需要召集各產(chǎn)品線上的設(shè)計(jì)師將設(shè)計(jì)結(jié)果進(jìn)行匯總和提煉。這樣的會(huì)議既是討論性會(huì)議又是決策性會(huì)議，所以耗時(shí)較長，但這又是要制定設(shè)計(jì)規(guī)范的必要會(huì)議。可以預(yù)先將規(guī)范劃分成各個(gè)模塊，分步進(jìn)行會(huì)議討論和決議，并將不同模塊對(duì)應(yīng)到不同設(shè)計(jì)師來負(fù)責(zé)總結(jié)。當(dāng)遇到難以解決、產(chǎn)品間互相沖突的問題要即時(shí)溝通相關(guān)產(chǎn)品負(fù)責(zé)人，當(dāng)涉及到一些產(chǎn)品需要重大樣式修改時(shí)更要即時(shí)溝通，設(shè)計(jì)組內(nèi)部意見統(tǒng)一的同時(shí)也要得到外部支持和認(rèn)可。

（3）制作。

在動(dòng)手制作之前，設(shè)計(jì)師間要對(duì)規(guī)范自身的展現(xiàn)形式和樣式達(dá)成一致。設(shè)計(jì)師按照會(huì)議討論決議出的結(jié)果制作自己負(fù)責(zé)模塊的規(guī)范。模塊分為：配色，圖標(biāo)，字體，控件尺寸，控件交互等等，這也是內(nèi)部UI支持系統(tǒng)提供前端代碼的依據(jù)。

（4）匯總和發(fā)布。

將各部分規(guī)范匯總，再修改細(xì)節(jié)、微調(diào)排版后便可發(fā)布了。為了使規(guī)范更方便傳播和閱讀，將規(guī)范以網(wǎng)頁形式呈現(xiàn)更為合適。我們把這套講解規(guī)范并提供樣式與前端代碼的網(wǎng)頁命名為內(nèi)部UI支持系統(tǒng)。

設(shè)計(jì)規(guī)范是高度精簡和概括的，將相同情境下的不同設(shè)計(jì)樣式統(tǒng)一成適應(yīng)性更強(qiáng)、更科學(xué)合理的設(shè)計(jì)樣式，減少很多所謂的特殊情況設(shè)計(jì)和繁瑣的重復(fù)尺寸標(biāo)注。參與設(shè)計(jì)開發(fā)的組員可以結(jié)合情景直接調(diào)用適合的設(shè)計(jì)樣式。當(dāng)然在設(shè)計(jì)過程中會(huì)出現(xiàn)特殊情景，需要規(guī)范中不包含的特殊設(shè)計(jì)樣式，此時(shí)設(shè)計(jì)師要單獨(dú)給出設(shè)計(jì)效果圖。當(dāng)特殊情況越來越多就要考慮將這些情況整合，補(bǔ)充進(jìn)現(xiàn)有的規(guī)范中。

2.2 建設(shè)內(nèi)部UI支持系統(tǒng)，落實(shí)用戶體驗(yàn)設(shè)計(jì)規(guī)范

誠然，用戶體驗(yàn)設(shè)計(jì)規(guī)范的意義不言而喻，那么如何使設(shè)計(jì)規(guī)范能夠順利、高效、簡單的落地，指導(dǎo)團(tuán)隊(duì)成員完成產(chǎn)品設(shè)計(jì)研發(fā)呢？常見的設(shè)計(jì)規(guī)范閱讀對(duì)象是產(chǎn)品經(jīng)理和設(shè)計(jì)人員，那么如果通過工具省去設(shè)計(jì)環(huán)節(jié)使設(shè)計(jì)規(guī)范和設(shè)計(jì)理念直接體現(xiàn)在已經(jīng)完成的組件或頁面上，團(tuán)隊(duì)成員都可以直接獲取符合用戶體驗(yàn)設(shè)計(jì)規(guī)范的組件或頁面應(yīng)用于產(chǎn)品中，將可以大大降低用戶體驗(yàn)設(shè)計(jì)規(guī)范落實(shí)到產(chǎn)品中的難度，提高產(chǎn)品研發(fā)效率和便捷性。什么樣的工具可以滿足需求呢？企業(yè)可根據(jù)自身產(chǎn)品特點(diǎn)建設(shè)內(nèi)部UI支持系統(tǒng)，實(shí)現(xiàn)落實(shí)用戶體驗(yàn)設(shè)計(jì)規(guī)范的目標(biāo)。

啟明星內(nèi)部UI支持系統(tǒng)是一套設(shè)計(jì)組件庫工具，這套組件庫采用Axure軟件制作，設(shè)計(jì)師只要閱讀完這套工具說明之后，可以很快利用它去搭建一套設(shè)計(jì)。同時(shí)我們配合前端輸出前端組件庫（也就是我們的內(nèi)部UI支撐系統(tǒng)的內(nèi)容），打造完整的工具集，讓前端開發(fā)更快捷的同時(shí)，也讓后端和其他的開發(fā)人員利用這套工具很快地搭建頁面，從整體的流程環(huán)節(jié)上提升效率。

2.3 提升研發(fā)效率，統(tǒng)一產(chǎn)品設(shè)計(jì)體驗(yàn)

啟明星用戶體驗(yàn)設(shè)計(jì)規(guī)范研究與內(nèi)部UI支持系統(tǒng)研發(fā)項(xiàng)目，以用戶體驗(yàn)為核心開展工作，工作內(nèi)容包括視覺設(shè)計(jì)、交互設(shè)計(jì)以及前端制作3個(gè)方面，重點(diǎn)是形成規(guī)范化、系統(tǒng)化的一系列通用設(shè)計(jì)組件。通過設(shè)計(jì)規(guī)范保證用戶體驗(yàn)設(shè)計(jì)成果的有效性及可靠性，并不斷優(yōu)化組件庫來提升產(chǎn)品或信息系統(tǒng)的可用性及易用性，最終達(dá)到提升用戶工作效率的目的，實(shí)現(xiàn)國家電網(wǎng)公司對(duì)用戶體驗(yàn)設(shè)計(jì)工作管控的最根本價(jià)值。

3? 應(yīng)用展望

3.1 實(shí)現(xiàn)產(chǎn)品設(shè)計(jì)標(biāo)準(zhǔn)化、工具化、統(tǒng)一化

多產(chǎn)品線并行的企業(yè)通常存在大量的用戶體驗(yàn)問題，最常見的就是設(shè)計(jì)的不一致。交互UE和視覺UI設(shè)計(jì)師，在設(shè)計(jì)時(shí)質(zhì)量存在參差不齊的現(xiàn)象。通過用戶體驗(yàn)設(shè)計(jì)規(guī)范和內(nèi)部UI支持系統(tǒng)不僅能夠改善用戶體驗(yàn)，還可以保障產(chǎn)品設(shè)計(jì)的標(biāo)準(zhǔn)化、工具化、統(tǒng)一化。

3.2 提升企業(yè)研發(fā)環(huán)節(jié)的效率和質(zhì)量

多產(chǎn)品線的公司設(shè)計(jì)團(tuán)隊(duì)的人員規(guī)模要求極高，如果這些產(chǎn)品線的設(shè)計(jì)研發(fā)工作并行開展，設(shè)計(jì)團(tuán)隊(duì)人員就無法應(yīng)對(duì)，必須提升執(zhí)行效率才能解決這個(gè)問題。通過內(nèi)部UI支持系統(tǒng)里的組件工具，可以快速、高效的產(chǎn)出符合設(shè)計(jì)規(guī)范標(biāo)準(zhǔn)的組件和頁面，減少大部分重復(fù)性的設(shè)計(jì)工作，提升企業(yè)研發(fā)環(huán)節(jié)的效率和質(zhì)量。

4? 結(jié)語

據(jù)國外統(tǒng)計(jì)，80%的軟件生命周期成本發(fā)生在維護(hù)階段，60%的維護(hù)階段工作是由于前期用戶需求不清楚導(dǎo)致的。所以每在用戶體驗(yàn)設(shè)計(jì)上投入1美元，回報(bào)是2～100美元。基于《國家電網(wǎng)公司 2016 年信息化建設(shè)實(shí)施意見》提出的公司信息化建設(shè)要持續(xù)關(guān)注基層需求、關(guān)注用戶體驗(yàn)、關(guān)注應(yīng)用成效，構(gòu)建多方交流生態(tài)圈，逐步擴(kuò)大地市公司觀察員范圍，充分發(fā)揮基層作用，推進(jìn)用戶體驗(yàn)管控工作標(biāo)準(zhǔn)化、規(guī)范化建設(shè)，不斷提高公司信息系統(tǒng)用戶體驗(yàn)水平。國家電網(wǎng)公司將進(jìn)一步提升信息系統(tǒng)整體用戶體驗(yàn)質(zhì)量，全面提升用戶體驗(yàn)工作意識(shí)，促進(jìn)“以用戶為中心”工作理念推廣，實(shí)現(xiàn)信息系統(tǒng)用戶體驗(yàn)質(zhì)量的有效提高。啟明星用戶體驗(yàn)設(shè)計(jì)規(guī)范研究與內(nèi)部UI支持系統(tǒng)研發(fā)項(xiàng)目，將為國家電網(wǎng)公司構(gòu)建完善的用戶體驗(yàn)制度規(guī)范體系提供有力保障。將國家電網(wǎng)公司的精神落到實(shí)處，理論與實(shí)踐結(jié)合，針對(duì)國家電網(wǎng)公司信息化特點(diǎn)，制定必要的設(shè)計(jì)標(biāo)準(zhǔn)規(guī)范，實(shí)現(xiàn)設(shè)計(jì)有據(jù)可依，管控公正嚴(yán)肅。為國網(wǎng)公司信息系統(tǒng)的用戶體驗(yàn)提升工作，起到良好的示范作用，同時(shí)也為啟明星公司研發(fā)的軟件系統(tǒng)，塑造用戶體驗(yàn)良好的品牌形象。

參考文獻(xiàn)

[1] 國家電網(wǎng)公司.國家電網(wǎng)公司桌面可視化設(shè)計(jì)規(guī)范[S].2011.

[2] 國家電網(wǎng)公司.國家電網(wǎng)公司移動(dòng)終端業(yè)務(wù)應(yīng)用用戶體驗(yàn)工作標(biāo)準(zhǔn)[S].2015.