設(shè)計(jì)風(fēng)格

致心零售的整體設(shè)計(jì)風(fēng)格還是沿用整個(gè)產(chǎn)品的設(shè)計(jì)風(fēng)格，扁平化，抽像化，多用線性圖標(biāo)和圓角矩形表達(dá)一個(gè)圓潤的感覺，少了一份犀利，多了一份親合感。配色方面選用了產(chǎn)品logo中的主題亮黃色，亮黃色也是今年潘通（PANTONE）流行色之一，非常有活力，輔以黑灰色，呈現(xiàn)一種簡單明快的感覺。圖標(biāo)采用線性圖標(biāo)，選中狀態(tài)為反色高亮，這也是一種常見的設(shè)計(jì)，簡單直觀。按鈕采用全圓角設(shè)計(jì)，感覺圓潤有親合力，非選中狀態(tài)只有一個(gè)邊框效果，使整個(gè)UI呈現(xiàn)一個(gè)干凈的效果，減少視覺疲勞感。選中狀態(tài)是一個(gè)線性漸變色，增加一些設(shè)計(jì)上的活力和變化。在tab項(xiàng)目的選中效果為一個(gè)放大和加粗的字體，這是一種簡化認(rèn)識的做法，選中效果一看便知。同時(shí)下面增加一個(gè)主題色的條狀元素，同時(shí)該元素也是圓角的，保持一個(gè)設(shè)計(jì)上的一致性，可惜后面開發(fā)說不好做，給斃掉了，搞了一個(gè)簡單的矩形效果，非常可惜。

布局

收銀機(jī)POS的屏幕大小可以簡單理解為一個(gè)平板，當(dāng)年我們做iPad APP的經(jīng)驗(yàn)就可以參考來用了，好消息是該應(yīng)用是只應(yīng)用于pos機(jī)的，并不需要同時(shí)兼容平板和手機(jī)，這樣我們設(shè)計(jì)產(chǎn)品整體布局就簡單多了。

布局的產(chǎn)品UI的骨架，設(shè)計(jì)的好，產(chǎn)品后續(xù)的操作邏輯才能一以貫之，不然會(huì)造成操作邏輯混亂和復(fù)雜，增加用戶學(xué)習(xí)和認(rèn)知成本。

我第一個(gè)想法是采用“3段式設(shè)計(jì)”，3段分別為菜單區(qū)，列表區(qū)，詳情區(qū)。目前這種設(shè)計(jì)應(yīng)用的也比較多，比如我們常見的微信桌面端，但是這個(gè)設(shè)計(jì)并不微信的首創(chuàng)，我感覺最早用這個(gè)設(shè)計(jì)的應(yīng)該是Twitter的mac客戶。“3段式設(shè)計(jì)”的一個(gè)最大的好處是操作邏輯比較清楚，把UI拆分成一個(gè)我們?nèi)粘Ｉ钪谐Ｒ姷臉錉罱Y(jié)構(gòu)，簡化認(rèn)知和理解，用戶能夠做到舉一反三，降低學(xué)習(xí)成本。

用戶體驗(yàn)

前面我有提到UI的整體布局的“3段式設(shè)計(jì)”，這個(gè)設(shè)計(jì)有一個(gè)好處是帶來操作動(dòng)線是線性的，不需要來回操作。以收銀界面為例子，致心零售的操作動(dòng)線是從左到右的，先選菜單區(qū)，手移右點(diǎn)擊選擇商品，再移動(dòng)到右邊查看編輯商品并結(jié)賬，整個(gè)的操作動(dòng)線是從左到右，從上到下的，減少收銀員的手部動(dòng)作，減少收銀員的疲勞感。而某些收銀軟件就完全沒有考慮過這個(gè)問題，這樣收銀員的手部會(huì)來回?cái)[動(dòng)，時(shí)間長了會(huì)增加人的疲勞感。

數(shù)據(jù)顯示，從事收銀工作的員工普遍存在年齡偏大，學(xué)習(xí)能力不強(qiáng)的問題。致心零售UI設(shè)計(jì)上特意簡化操作，比如商品搜索。一般的搜索會(huì)讓用戶輸入中文，這樣就會(huì)增加操作的復(fù)雜度。致心零售會(huì)自動(dòng)生成商品名稱的助記碼，配合我們專門研發(fā)的虛擬鍵盤，最大化減少用戶操作。

后記

在整個(gè)致心零售的POS UI設(shè)計(jì)當(dāng)中，有不少的遺憾。一是現(xiàn)在市場大部分收銀機(jī)不支持高分屏而分辨率不高，這樣的話整體顯示效果非常不好, 希望以后有新的設(shè)備能支持高分屏。二是沒有支持黑暗模式，可能有人會(huì)覺得黑暗模式可有可無，但是我們一直堅(jiān)信設(shè)計(jì)還是以人為本的，用戶在使用產(chǎn)品的時(shí)候能夠感覺到你的設(shè)計(jì)，這個(gè)就是對設(shè)計(jì)人員的最大獎(jiǎng)勵(lì)。