致心零售的beta測試馬上就要完成了，作為我們自主設(shè)計開發(fā)的第一個大型的項目，今天想在這里把當(dāng)初設(shè)計的一些思路跟想法寫下來，對個人作為一個沉淀，對他人算是一個分享。我主要從設(shè)計風(fēng)格，布局，用戶體驗這3個方面來談一下。
設(shè)計風(fēng)格
致心零售的整體設(shè)計風(fēng)格還是沿用整個產(chǎn)品的設(shè)計風(fēng)格，扁平化，抽像化，多用線性圖標(biāo)和圓角矩形表達(dá)一個圓潤的感覺，少了一份犀利，多了一份親合感。配色方面選用了產(chǎn)品logo中的主題亮黃色，亮黃色也是今年潘通（PANTONE）流行色之一，非常有活力，輔以黑灰色，呈現(xiàn)一種簡單明快的感覺。圖標(biāo)采用線性圖標(biāo)，選中狀態(tài)為反色高亮，這也是一種常見的設(shè)計，簡單直觀。按鈕采用全圓角設(shè)計，感覺圓潤有親合力，非選中狀態(tài)只有一個邊框效果，使整個UI呈現(xiàn)一個干凈的效果，減少視覺疲勞感。選中狀態(tài)是一個線性漸變色，增加一些設(shè)計上的活力和變化。在tab項目的選中效果為一個放大和加粗的字體，這是一種簡化認(rèn)識的做法，選中效果一看便知。同時下面增加一個主題色的條狀元素，同時該元素也是圓角的，保持一個設(shè)計上的一致性，可惜后面開發(fā)說不好做，給斃掉了，搞了一個簡單的矩形效果，非?？上А?/div>
布局
收銀機(jī)POS的屏幕大小可以簡單理解為一個平板，當(dāng)年我們做iPad APP的經(jīng)驗就可以參考來用了，好消息是該應(yīng)用是只應(yīng)用于pos機(jī)的，并不需要同時兼容平板和手機(jī)，這樣我們設(shè)計產(chǎn)品整體布局就簡單多了。
布局的產(chǎn)品UI的骨架，設(shè)計的好，產(chǎn)品后續(xù)的操作邏輯才能一以貫之，不然會造成操作邏輯混亂和復(fù)雜，增加用戶學(xué)習(xí)和認(rèn)知成本。
我第一個想法是采用“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)，簡化認(rèn)知和理解，用戶能夠做到舉一反三，降低學(xué)習(xí)成本。
用戶體驗
前面我有提到UI的整體布局的“3段式設(shè)計”，這個設(shè)計有一個好處是帶來操作動線是線性的，不需要來回操作。以收銀界面為例子，致心零售的操作動線是從左到右的，先選菜單區(qū)，手移右點(diǎn)擊選擇商品，再移動到右邊查看編輯商品并結(jié)賬，整個的操作動線是從左到右，從上到下的，減少收銀員的手部動作，減少收銀員的疲勞感。而某些收銀軟件就完全沒有考慮過這個問題，這樣收銀員的手部會來回擺動，時間長了會增加人的疲勞感。
數(shù)據(jù)顯示，從事收銀工作的員工普遍存在年齡偏大，學(xué)習(xí)能力不強(qiáng)的問題。致心零售UI設(shè)計上特意簡化操作，比如商品搜索。一般的搜索會讓用戶輸入中文，這樣就會增加操作的復(fù)雜度。致心零售會自動生成商品名稱的助記碼，配合我們專門研發(fā)的虛擬鍵盤，最大化減少用戶操作。
后記
在整個致心零售的POS UI設(shè)計當(dāng)中，有不少的遺憾。一是現(xiàn)在市場大部分收銀機(jī)不支持高分屏而分辨率不高，這樣的話整體顯示效果非常不好, 希望以后有新的設(shè)備能支持高分屏。二是沒有支持黑暗模式，可能有人會覺得黑暗模式可有可無，但是我們一直堅信設(shè)計還是以人為本的，用戶在使用產(chǎn)品的時候能夠感覺到你的設(shè)計，這個就是對設(shè)計人員的最大獎勵。
打賞
免責(zé)聲明：
本網(wǎng)站部分內(nèi)容來源于網(wǎng)站會員、合作媒體、企業(yè)機(jī)構(gòu)、網(wǎng)友提供和互聯(lián)網(wǎng)的公開資料等，僅供參考。本網(wǎng)站對站內(nèi)所有資訊的內(nèi)容、觀點(diǎn)保持中立，不對內(nèi)容的準(zhǔn)確性、可靠性或完整性提供任何明示或暗示的保證。如果有侵權(quán)等問題，請及時聯(lián)系我們，我們將在收到通知后第一時間妥善處理該部分內(nèi)容。
本網(wǎng)站部分內(nèi)容來源于網(wǎng)站會員、合作媒體、企業(yè)機(jī)構(gòu)、網(wǎng)友提供和互聯(lián)網(wǎng)的公開資料等，僅供參考。本網(wǎng)站對站內(nèi)所有資訊的內(nèi)容、觀點(diǎn)保持中立，不對內(nèi)容的準(zhǔn)確性、可靠性或完整性提供任何明示或暗示的保證。如果有侵權(quán)等問題，請及時聯(lián)系我們，我們將在收到通知后第一時間妥善處理該部分內(nèi)容。
