同样是小程序电商,看上去为什么差距这么大?

企业项目已上线2019-05举报

同样是小程序电商,看上去为什么差距这么大?

扫描,分享朋友圈


每一个场景,都有物理世界的参照可循,有内在的逻辑呼应。”

微信小程序自上线以来,就以一支独角兽的姿态,冲击着移动互联网,各行各业的小程序都大放异彩,其中小程序电商是发展最为迅猛的一个行业。同样是小程序电商,不同的界面设计带给用户完全不同的用户体验。我们常常看到创意无限,脑洞清奇的设计作品,想象中的设计师们是一群高颜值高审美的群体,用设计表达个性,让Adobe完成”生命“的升华。

其实有这么一群设计师,他们默默无闻,却让你的生活井井有条,没了他们或许你会觉生活变得无序混乱,他们就是设计师中的处女座-UI设计师。好的界面设计需要严格遵守不同平台系统的设计规则和偏好,同时带给用户视觉的享受。设计师就如同带着镣铐跳舞的舞者,拥有对美好设计的向往,对人性化细节的极致追求。

Randomevent是创立于2012年的中国街头潮流品牌,不断通过产品、活动、影像记录等多元的方式呈现其品牌文化,Randomevent将Urban,Daily,Street三大元素融入,搭建起独特风格的高品质产品线。第一眼看到Randomevent电商小程序的界面,第一印象是被它简洁而不失质感的设计所吸引。细究其每一个细节可以发现他的设计服务商 NPLUS Digital-Cook Creative 在其中的用心,不仅是产品本身,他的界面设计也能衬托出潮牌的时尚感和品质感,让我们一起细细探究其中的奥秘。


字体规范

首先,界面中的字体规范很重要。不同层级不同页面,字体大小和间距非常有讲究。以Randomevent小程序首页为例,Banner的抬头标题字体颜色深浅可引导用户阅读主次,中英文的粗细大小对比明显,更加突出商店 slogan,也会使用户第一时间注意此处,从而达到留下深刻品牌印象的目的。

一级标题与二级标题的对比设置,粗细及字间距的考量设置,二级标题更细,且字间距松散些,使阅读更为轻松,英文字号对比中文小很多,且缩短间距使其更紧凑,有大小松紧对比,使视觉体验上更有节奏。商品卡片字体,价格符号缩小显得精致且能突出价格数字,数字显示满三位加逗号隔开,小小的细节都帮助用户更为轻松的阅读,按钮的字体选择了14pt,以黑底白字利于吸引用户点击。


图标规范

图标的设计,发现页面的部件都增加了圆角弧度,圆角卡片,圆角按钮使页面整体的高级感和品质感明显提升。图片的选中效果做了微弱的渐变过渡,黑色和灰色相辅相成,不会让你觉得过于单调。在顶部导航栏加入了品牌小Logo, 增加品牌的辨识度。这些细节,并不容易被用户发现,但用户却会在不知不觉中感知到这款产品设计的质感。而优秀的设计师不仅注意细节,还会不断调整。


内容设计

首页上可以看到设计者选择了满屏图文,广告位特意放大一些,打开小程序你第一眼看到的是满屏图文的视觉效果,增加了用户浏览的欲望。菜单栏左右分类,方便查看。左侧大分类,右侧小分类,查找方便自如,清晰明了,在分类最后一项加入了最新一季型录主题,引导用户浏览和购买最新产品。


产品详情页,采用了大面积的商品图浏览,随心切换商品颜色,优惠价格即时显示,一键加入或查看购物袋,还有详尽的模特尺码显示,让购物更加倾心。卡片大小为商品卡片的 1.5 倍,英文 20pt 中文 24pt,单张卡片横向占比够大,用户在横向滑动浏览时需要花点时间去找感兴趣的分类。

不论你的动画有多好看、多吸引眼球,如果成本太高或者过于复杂都是无法落地的,所以还是遵循了简单实用的原则来进行设计,千万不要过度设计。


配色克制

RDET作为兼具态度个性,又不失品质和高级感的国潮品牌,在界面的用色上,他的小程序界面采用以“黑、白、灰”三色为主,凸显其品质感,这样的配色让用户更容易聚焦内容本身,既不会喧宾夺主,也可以减少视觉干扰,符合品牌感的诉求。


动图.gif


在icon上的处理,以纯色的线性为主,采用了大面积留白,体现现代、简约的感觉,有一种奢侈大牌的即视感。电商小程序中画面的切换处都会用灰色底作为过渡,让用户在体验过程中能够不知不觉感受到品质感的设计,给人舒服享受的感觉,而不是简单的满足功能需求。

所有的动效,过度,预览加载...... 每一个场景,都有物理世界的参照可循,有内在的逻辑呼应。看完这些,不管你是否是UI设计师,是不是也了解到要设计出一个好的UI设计需要多少细节的堆砌才能够完成,这或许还只是冰山一角,在执行的过程中还需要不断的尝试与调整,才能够交出一份满意的作品!


Randomevent

NPLUS Digital

NPLUS Digital

葛悠悠

 

同样是小程序电商,看上去为什么差距这么大?

扫描,分享朋友圈

数英评分
10
我的评分
谢谢
数英评分
10
我的评分