致心零售的beta測試馬上就要完成了,作為我們自主設計開發的第一個大型的項目,今天想在這里把當初設計的一些思路跟想法寫下來,對個人作為一個沉淀,對他人算是一個分享。我主要從設計風格,布局,用戶體驗這3個方面來談一下。

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

布局
布局的產品UI的骨架,設計的好,產品后續的操作邏輯才能一以貫之,不然會造成操作邏輯混亂和復雜,增加用戶學習和認知成本。
我第一個想法是采用“3段式設計”,3段分別為菜單區,列表區,詳情區。目前這種設計應用的也比較多,比如我們常見的微信桌面端,但是這個設計并不微信的首創,我感覺最早用這個設計的應該是Twitter的mac客戶。“3段式設計”的一個最大的好處是操作邏輯比較清楚,把UI拆分成一個我們日常生活中常見的樹狀結構,簡化認知和理解,用戶能夠做到舉一反三,降低學習成本。
用戶體驗
前面我有提到UI的整體布局的“3段式設計”,這個設計有一個好處是帶來操作動線是線性的,不需要來回操作。以收銀界面為例子,致心零售的操作動線是從左到右的,先選菜單區,手移右點擊選擇商品,再移動到右邊查看編輯商品并結賬,整個的操作動線是從左到右,從上到下的,減少收銀員的手部動作,減少收銀員的疲勞感。而某些收銀軟件就完全沒有考慮過這個問題,這樣收銀員的手部會來回擺動,時間長了會增加人的疲勞感。

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

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