一、設(shè)計(jì)的出發(fā)點(diǎn)：以用戶為中心的設(shè)計(jì)

以用戶為中心的設(shè)計(jì)(User-Centered-Design, UCD)，是一種強(qiáng)調(diào)用戶優(yōu)先、講究用戶體驗(yàn)的設(shè)計(jì)理念和方法。簡單來說就是圍繞用戶，以用戶需求和利益為出發(fā)點(diǎn)來設(shè)計(jì)產(chǎn)品，而非強(qiáng)迫用戶改變習(xí)慣來適應(yīng)產(chǎn)品。對于海鼎的產(chǎn)品設(shè)計(jì)而言，運(yùn)用“以用戶為中心的設(shè)計(jì)”方法就是以關(guān)注用戶需求和任務(wù)為設(shè)計(jì)決策，并將此外化到用戶界面。通過優(yōu)化界面，設(shè)計(jì)出易用易理解的產(chǎn)品，提高用戶完成任務(wù)的效率，同時(shí)提供良好的用戶體驗(yàn)。

這次在HDJPOS副屏的設(shè)計(jì)中，我們實(shí)踐了以用戶為中心的設(shè)計(jì)方法，在副屏區(qū)域有限、滿足客戶需求的同時(shí)，通過用戶（即顧客）需求挖掘以及焦點(diǎn)信息呈現(xiàn)來使得交易過程的信息更易理解、更加透明化，繼而幫助商家進(jìn)一步提高給予顧客的體驗(yàn)。

副屏設(shè)計(jì)步驟如下：

1.    制定設(shè)計(jì)決策

1)    需求分析：分析客戶和用戶需求得出產(chǎn)品需求。

2.    設(shè)計(jì)用戶界面

1)    原型：符合認(rèn)知原理的信息組織，劃分層次；

2)    視覺：使用視覺引導(dǎo)凸顯焦點(diǎn)信息，利用視覺輔助手段更加突出層次感。

二、設(shè)計(jì)決策

　1、需求定義

我們每天都會面對很多需求，設(shè)計(jì)產(chǎn)品更是從需求出發(fā)的，所以正確解讀和分析需求非常重要。

當(dāng)用戶提出問題時(shí)，往往同時(shí)會給出對問題的定性與解決方案。他們提出的各種期望的目的都是為了更好的完成任務(wù)，所以需要對這些用戶期望歸納提煉和挖掘，得到用戶需求。然后再形成產(chǎn)品需求，最終迭代到產(chǎn)品。

　2、收集用戶期望得到用戶需求

首先，需要注意的是用戶的概念。對于HDJPOS這個(gè)產(chǎn)品整體而言，用戶是海鼎的客戶；而對于HDJPOS副屏來說，用戶則是顧客。

副屏作為企業(yè)形象的展示窗口、商家與顧客信息溝通的一種渠道，在這次HDJPOS改造中被最先優(yōu)化。根據(jù)收集到的反饋，得到的客戶需求是副屏要美觀，既能符合企業(yè)的定位也能展示自身的形象，同時(shí)可以給顧客帶來良好的體驗(yàn)，以傳遞商家重視顧客、想顧客所想的理念。

對于顧客需求，我們采用了角色代入的辦法，根據(jù)以往作為普通消費(fèi)者的經(jīng)歷和體會，列出了作為顧客期望副屏上看到哪些內(nèi)容：比如當(dāng)前錄入商品的價(jià)格，累計(jì)金額，購買列表…簡而言之就是信息最好多而全，因?yàn)檫@些信息關(guān)系到顧客的行為決策。由此我們發(fā)現(xiàn)，顧客需求其實(shí)就是副屏上能顯示足夠的信息來幫助他們了解目前的進(jìn)程，并提醒他們下一步應(yīng)該采取什么動(dòng)作：比如根據(jù)累計(jì)的金額準(zhǔn)備多少現(xiàn)金，或是對商品價(jià)格存疑需告知店員核實(shí)等。

　3、分析用戶需求成為產(chǎn)品需求

顧客需求是要在副屏上顯示足夠的信息，但因?yàn)楦逼恋拇蟛糠值膮^(qū)域需辟為廣告和宣傳區(qū)，這關(guān)系企業(yè)的利益，所以顯示交易信息的區(qū)域是有限的。于此，顧客需求和企業(yè)的利益就產(chǎn)生了矛盾。

要解決這對矛盾，我們不妨先將其擱在一邊，先按場景分析用戶需求：

圖1 用戶需求分析圖

副屏的使用場景，如圖所示。前臺的結(jié)算追求高效準(zhǔn)確，可以要求店員能夠熟練操作，但對于顧客我們必須通過良好的設(shè)計(jì)幫助他們迅速響應(yīng)副屏展示的信息。前臺結(jié)算雖然牽涉到的信息較多，但每個(gè)階段的信息側(cè)重點(diǎn)不同。將重點(diǎn)信息提取出來，在各階段只顯示當(dāng)前應(yīng)關(guān)注的焦點(diǎn)信息，減少信息量以此降低用戶理解成本，說白了就是讓信息只在該出現(xiàn)的時(shí)候出現(xiàn)。同時(shí)，由于副屏的區(qū)域有限，給信息做減法也能讓焦點(diǎn)信息得到更寬敞的空間，這也就解決了之前提到的利益沖突問題。

´  綜上可得產(chǎn)品需求即：

1.美觀；

2.在對應(yīng)的階段只顯示當(dāng)前應(yīng)關(guān)注的焦點(diǎn)信息，減少信息量；

3.合理歸類、組織信息并借助視覺手段凸顯信息的層次；

三、用戶界面

用戶界面是產(chǎn)品需求的外化，設(shè)計(jì)用戶界面就是要把產(chǎn)品需求講明白。

1、確定焦點(diǎn)信息

每個(gè)頁面都有顧客關(guān)心的關(guān)鍵信息，這個(gè)可稱為焦點(diǎn)信息，需要在界面設(shè)計(jì)之初確認(rèn)。舉個(gè)例子，如對銷售各階段進(jìn)行場景分析列出每個(gè)階段對應(yīng)顯示的焦點(diǎn)信息。

　2、原型設(shè)計(jì)

　　在前一小節(jié)中已經(jīng)確定了焦點(diǎn)信息，我們按照信息間的邏輯和認(rèn)知規(guī)律組織信息，并在界面上簡明快速地體現(xiàn)出來，旨在幫助顧客快速接收并理解副屏信息。仍以銷售過程的3個(gè)階段為例進(jìn)行說明。

´  信息組織

銷售第1階段：等待銷售開始

圖 3 銷售第1階段復(fù)屏原型

l 可以顯示歡迎信息、全場性促銷信息或者企業(yè)宣傳語

銷售第2階段：銷售進(jìn)行中商品錄入

圖 4 銷售第2階段復(fù)屏原型

圖 5 銷售第2階段顧客視線移動(dòng)示意圖

l 將當(dāng)前的單品屬性信息和整筆累計(jì)金額按兩列左右布局?jǐn)[放；

l 單品信息分兩行顯示，第一行為單品名稱，第二行為“件數(shù)×單價(jià)    單品金額”，這樣設(shè)計(jì)的好處是個(gè)數(shù)值間的邏輯關(guān)系顯而易見，界面上不用標(biāo)明哪個(gè)是件數(shù)，哪個(gè)是單價(jià)；

l 整筆累計(jì)金額字體更大、醒目；

l 引導(dǎo)顧客的視線移動(dòng)：從上至下，從左至右；

銷售第3階段：銷售結(jié)算，顧客付款

圖 6 銷售第3階段復(fù)屏原型

圖 7 銷售第3階段顧客視線移動(dòng)示意圖

l 考慮顧客潛在需要，將最后錄入的商品信息顯示在第一行；

l 結(jié)算信息分兩行顯示，第一行顯示“應(yīng)付”、“實(shí)收”，第二行為“找零”，有會員制的顯示“積分”；

l 顧客的視線移動(dòng)：從上至下，從左上至右下；

´  信息層次

沿著之前的設(shè)計(jì)思路我們已經(jīng)減少了信息量并做了信息組織，但為更好的用戶體驗(yàn)，就需要將這些信息分出層次突出重點(diǎn)，使得關(guān)鍵信息一眼就能被關(guān)注。使用場景來看，在整個(gè)交易過程當(dāng)中，顧客最最關(guān)心的是金額信息！這些數(shù)值相比其他信息（商品名稱、字段指示標(biāo)題等）的等級要更加高。在這里我們用色彩的深淺以及色塊的區(qū)域大小來體現(xiàn)這種層次關(guān)系：

舉例，銷售第2階段：銷售進(jìn)行中商品錄入

圖 8 銷售第2階段信息層次示意圖

銷售第3階段：銷售結(jié)算，顧客付款

圖 9 銷售第3階段信息層次示意圖

　　如上圖見，黑色代表關(guān)鍵數(shù)值，大塊黑色區(qū)域代表更加重要關(guān)鍵金額，營造出視覺重點(diǎn)，讓顧客一眼就能注意到。在接下來的視覺設(shè)計(jì)中，就要使用視覺手段表現(xiàn)出這樣的層次關(guān)系。

3、視覺設(shè)計(jì)

在視覺設(shè)計(jì)部分解決的是兩部分問題：一是將原型設(shè)計(jì)中的層次關(guān)系表達(dá)出來，突出焦點(diǎn)信息；二是滿足我們客戶的需求，美觀。

在標(biāo)準(zhǔn)版方案中，為體現(xiàn)層次關(guān)系，關(guān)鍵的數(shù)值全用了顯眼的亮色，其余信息都用白色；數(shù)字字體采用了仿LCD顯示效果的液晶字體，易于辨認(rèn)。

l 標(biāo)準(zhǔn)版界面：

圖 10 銷售第1階段復(fù)屏界面

圖 11 銷售第2階段復(fù)屏界面
 

圖12 銷售第3階段復(fù)屏界面

4、項(xiàng)目應(yīng)用

´  個(gè)性化配色

副屏作為企業(yè)宣傳的窗口，客顯信息也需要與店面環(huán)境、企業(yè)VI的配色相協(xié)調(diào)。對于有需求的企業(yè)，我們將會提供量身打造的配色方案。

在美宜佳，我們根據(jù)其VI形象，采用了較深的底色，加強(qiáng)對比，同時(shí)采用其logo的經(jīng)典黃色作為焦點(diǎn)數(shù)字信息的顯示顏色，和美宜佳的門店形象協(xié)調(diào)一致：

圖13 美宜佳復(fù)屏示意圖

在絕味，通常廣告顏色比較鮮艷一些，所以在復(fù)屏的交易信息顯示的部分采用了白色底色，增加反差，同時(shí)采用了絕味經(jīng)典的紅色作為焦點(diǎn)數(shù)字信息的顯示顏色，顏色協(xié)調(diào)一致，同時(shí)也可以突出關(guān)鍵信息。

圖14 絕味復(fù)屏示意圖

´  增值服務(wù)

除了銷售的副屏設(shè)計(jì)外，我們還對其他服務(wù)類型比如便利店增值服務(wù)的副屏客顯進(jìn)行了設(shè)計(jì)，并在美宜佳有較好的應(yīng)用，舉例如下。

增值服務(wù)：繳納電費(fèi)

圖15 美宜佳繳納電費(fèi)增值服務(wù)復(fù)屏示意圖

增值服務(wù)：彩票

圖16 美宜佳彩票增值服務(wù)復(fù)屏示意圖

四、后記

　　用戶體驗(yàn)不是“面子工程”，它是從里到外的整個(gè)事情。它以“人機(jī)交互”為核心，從便利、易用、有效、高效方面來做工作。大家看到的平面設(shè)計(jì)和“美化”只是呈現(xiàn)在表面的一個(gè)方面，并不是全部的內(nèi)涵。用戶體驗(yàn)，不是界面看上去美不美，而真的是從根兒里幫助用戶解決問題。

 　海鼎做的是軟件，軟件是工具，要讓用戶不用浪費(fèi)精力在工具的事情上，而是一門心思關(guān)注自己的業(yè)務(wù)或者應(yīng)用。就象iPad這么不算簡單的一個(gè)設(shè)備，作為消費(fèi)者甚至小孩子，上手就能使用，玩得天翻地覆，根本不需找專門的幫助文件。這才叫用戶體驗(yàn)。

副屏設(shè)計(jì)是實(shí)踐以用戶為中心的設(shè)計(jì)（UCD）方法的一個(gè)很簡單甚至很小的例子，但效果可以說是立竿見影。好的體驗(yàn)應(yīng)來自用戶需求，同時(shí)超越用戶需求，減少用戶的學(xué)習(xí)成本以及完成任務(wù)的時(shí)間成本，將我們對用戶的關(guān)注通過產(chǎn)品的各種細(xì)節(jié)傳達(dá)給他們。“用戶體驗(yàn)”越來越成為一種生產(chǎn)力。
    我們已經(jīng)嘗試在產(chǎn)品設(shè)計(jì)的早期介入以用戶為中心的設(shè)計(jì)方法，同時(shí)希望各企業(yè)客戶也能參與產(chǎn)品的前期設(shè)計(jì)。越是在產(chǎn)品的早期設(shè)計(jì)階段，能充分的了解客戶及目標(biāo)用戶群的需求，結(jié)合市場需求，就能越大程度降低產(chǎn)品的后期維護(hù)甚至回爐返工的成本。
    UCD的運(yùn)用已經(jīng)成為互聯(lián)網(wǎng)產(chǎn)品競爭的一把利器，在商用軟件領(lǐng)域的運(yùn)用也正逐漸被行業(yè)所重視。加強(qiáng)UCD在我們產(chǎn)品設(shè)計(jì)中的實(shí)踐，功能和體驗(yàn)雙劍合璧，不僅能充實(shí)我們的產(chǎn)品實(shí)力，更能切實(shí)地給客戶帶來實(shí)質(zhì)性的效率和體驗(yàn)上的提升。