同样是小程序电商，看上去为什么差距这么大？
“ 每一个场景，都有物理世界的参照可循，有内在的逻辑呼应。”
微信小程序自上线以来，就以一支独角兽的姿态，冲击着移动互联网，各行各业的小程序都大放异彩，其中小程序电商是发展最为迅猛的一个行业。同样是小程序电商，不同的界面设计带给用户完全不同的用户体验。我们常常看到创意无限，脑洞清奇的设计作品，想象中的设计师们是一群高颜值高审美的群体，用设计表达个性，让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条）