設(shè)計風格

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

布局

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

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

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

用戶體驗

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

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

后記

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