致心零售的beta測試馬上就要完成了，作為我們自主設計開發的第一個大型的項目，今天想在這里把當初設計的一些思路跟想法寫下來，對個人作為一個沉淀，對他人算是一個分享。我主要從設計風格，布局，用戶體驗這3個方面來談一下。
設計風格
致心零售的整體設計風格還是沿用整個產品的設計風格，扁平化，抽像化，多用線性圖標和圓角矩形表達一個圓潤的感覺，少了一份犀利，多了一份親合感。配色方面選用了產品logo中的主題亮黃色，亮黃色也是今年潘通（PANTONE）流行色之一，非常有活力，輔以黑灰色，呈現一種簡單明快的感覺。圖標采用線性圖標，選中狀態為反色高亮，這也是一種常見的設計，簡單直觀。按鈕采用全圓角設計，感覺圓潤有親合力，非選中狀態只有一個邊框效果，使整個UI呈現一個干凈的效果，減少視覺疲勞感。選中狀態是一個線性漸變色，增加一些設計上的活力和變化。在tab項目的選中效果為一個放大和加粗的字體，這是一種簡化認識的做法，選中效果一看便知。同時下面增加一個主題色的條狀元素，同時該元素也是圓角的，保持一個設計上的一致性，可惜后面開發說不好做，給斃掉了，搞了一個簡單的矩形效果，非常可惜。
布局
布局的產品UI的骨架，設計的好，產品后續的操作邏輯才能一以貫之，不然會造成操作邏輯混亂和復雜，增加用戶學習和認知成本。
我第一個想法是采用“3段式設計”，3段分別為菜單區，列表區，詳情區。目前這種設計應用的也比較多，比如我們常見的微信桌面端，但是這個設計并不微信的首創，我感覺最早用這個設計的應該是Twitter的mac客戶。“3段式設計”的一個最大的好處是操作邏輯比較清楚，把UI拆分成一個我們日常生活中常見的樹狀結構，簡化認知和理解，用戶能夠做到舉一反三，降低學習成本。
用戶體驗
前面我有提到UI的整體布局的“3段式設計”，這個設計有一個好處是帶來操作動線是線性的，不需要來回操作。以收銀界面為例子，致心零售的操作動線是從左到右的，先選菜單區，手移右點擊選擇商品，再移動到右邊查看編輯商品并結賬，整個的操作動線是從左到右，從上到下的，減少收銀員的手部動作，減少收銀員的疲勞感。而某些收銀軟件就完全沒有考慮過這個問題，這樣收銀員的手部會來回擺動，時間長了會增加人的疲勞感。
數據顯示，從事收銀工作的員工普遍存在年齡偏大，學習能力不強的問題。致心零售UI設計上特意簡化操作，比如商品搜索。一般的搜索會讓用戶輸入中文，這樣就會增加操作的復雜度。致心零售會自動生成商品名稱的助記碼，配合我們專門研發的虛擬鍵盤，最大化減少用戶操作。
后記
在整個致心零售的POS UI設計當中，有不少的遺憾。一是現在市場大部分收銀機不支持高分屏而分辨率不高，這樣的話整體顯示效果非常不好, 希望以后有新的設備能支持高分屏。二是沒有支持黑暗模式，可能有人會覺得黑暗模式可有可無，但是我們一直堅信設計還是以人為本的，用戶在使用產品的時候能夠感覺到你的設計，這個就是對設計人員的最大獎勵。
