同樣是小程序電商，看上去為什么差距這么大？
“ 每一個場景，都有物理世界的參照可循，有內在的邏輯呼應。”
微信小程序自上線以來，就以一支獨角獸的姿態，沖擊著移動互聯網，各行各業的小程序都大放異彩，其中小程序電商是發展最為迅猛的一個行業。同樣是小程序電商，不同的界面設計帶給用戶完全不同的用戶體驗。我們常常看到創意無限，腦洞清奇的設計作品，想象中的設計師們是一群高顏值高審美的群體，用設計表達個性，讓Adobe完成”生命“的升華。
其實有這么一群設計師，他們默默無聞，卻讓你的生活井井有條，沒了他們或許你會覺生活變得無序混亂，他們就是設計師中的處女座－UI設計師。好的界面設計需要嚴格遵守不同平臺系統的設計規則和偏好，同時帶給用戶視覺的享受。設計師就如同帶著鐐銬跳舞的舞者，擁有對美好設計的向往，對人性化細節的極致追求。
Randomevent是創立于2012年的中國街頭潮流品牌，不斷通過產品、活動、影像記錄等多元的方式呈現其品牌文化，Randomevent將Urban，Daily，Street三大元素融入，搭建起獨特風格的高品質產品線。第一眼看到Randomevent電商小程序的界面，第一印象是被它簡潔而不失質感的設計所吸引。細究其每一個細節可以發現他的設計服務商 NPLUS Digital－Cook Creative 在其中的用心，不僅是產品本身，他的界面設計也能襯托出潮牌的時尚感和品質感，讓我們一起細細探究其中的奧秘。
字體規范
首先，界面中的字體規范很重要。不同層級不同頁面，字體大小和間距非常有講究。以Randomevent小程序首頁為例，Banner的抬頭標題字體顏色深淺可引導用戶閱讀主次，中英文的粗細大小對比明顯，更加突出商店 slogan，也會使用戶第一時間注意此處，從而達到留下深刻品牌印象的目的。
一級標題與二級標題的對比設置，粗細及字間距的考量設置，二級標題更細，且字間距松散些，使閱讀更為輕松，英文字號對比中文小很多，且縮短間距使其更緊湊，有大小松緊對比，使視覺體驗上更有節奏。商品卡片字體，價格符號縮小顯得精致且能突出價格數字，數字顯示滿三位加逗號隔開，小小的細節都幫助用戶更為輕松的閱讀，按鈕的字體選擇了14pt，以黑底白字利于吸引用戶點擊。
圖標規范
圖標的設計，發現頁面的部件都增加了圓角弧度，圓角卡片，圓角按鈕使頁面整體的高級感和品質感明顯提升。圖片的選中效果做了微弱的漸變過渡，黑色和灰色相輔相成，不會讓你覺得過于單調。在頂部導航欄加入了品牌小Logo， 增加品牌的辨識度。這些細節，并不容易被用戶發現，但用戶卻會在不知不覺中感知到這款產品設計的質感。而優秀的設計師不僅注意細節，還會不斷調整。
內容設計
首頁上可以看到設計者選擇了滿屏圖文，廣告位特意放大一些，打開小程序你第一眼看到的是滿屏圖文的視覺效果，增加了用戶瀏覽的欲望。菜單欄左右分類，方便查看。左側大分類，右側小分類，查找方便自如，清晰明了，在分類最后一項加入了最新一季型錄主題，引導用戶瀏覽和購買最新產品。
產品詳情頁，采用了大面積的商品圖瀏覽，隨心切換商品顏色，優惠價格即時顯示，一鍵加入或查看購物袋，還有詳盡的模特尺碼顯示，讓購物更加傾心。卡片大小為商品卡片的 1.5 倍，英文 20pt 中文 24pt，單張卡片橫向占比夠大，用戶在橫向滑動瀏覽時需要花點時間去找感興趣的分類。
不論你的動畫有多好看、多吸引眼球，如果成本太高或者過于復雜都是無法落地的，所以還是遵循了簡單實用的原則來進行設計，千萬不要過度設計。
配色克制
RDET作為兼具態度個性，又不失品質和高級感的國潮品牌，在界面的用色上，他的小程序界面采用以“黑、白、灰”三色為主，凸顯其品質感，這樣的配色讓用戶更容易聚焦內容本身，既不會喧賓奪主，也可以減少視覺干擾，符合品牌感的訴求。
在icon上的處理，以純色的線性為主，采用了大面積留白，體現現代、簡約的感覺，有一種奢侈大牌的即視感。電商小程序中畫面的切換處都會用灰色底作為過渡，讓用戶在體驗過程中能夠不知不覺感受到品質感的設計，給人舒服享受的感覺，而不是簡單的滿足功能需求。
所有的動效，過度，預覽加載...... 每一個場景，都有物理世界的參照可循，有內在的邏輯呼應。看完這些，不管你是否是UI設計師，是不是也了解到要設計出一個好的UI設計需要多少細節的堆砌才能夠完成，這或許還只是冰山一角，在執行的過程中還需要不斷的嘗試與調整，才能夠交出一份滿意的作品！
項目信息
參與者
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）