一个线上商城小程序界面改稿经验分享

进来的朋友看看这个改稿前后的效果怎么样,第一版的设计效果如下:

一个线上商城小程序界面改稿经验分享

个人觉得排版上的问题不大,最大的问题在于视觉样式太单调。而且这是一个「线上商城」的页面,应该做的更丰富更吸睛才是。

在我们优化后,这个页面最终呈现效果为:

一个线上商城小程序界面改稿经验分享

这次的改稿经历让我收获良多,下面我就一一分享一哈子。

01 增加设计丰富度

最直观的感受就是目前的画面看着很平、很单调。所以最先优化这个大bug。

1. 往卡片上增加设计样式:卡片下再叠一张卡,并且  让这两张卡片错开,使卡片更有层次。

一个线上商城小程序界面改稿经验分享

2. 用颜色进一步的拉开前后对比。

一个线上商城小程序界面改稿经验分享

增加了卡片层次后,就看着没那么单调了。

02 标题的设计感,也能增加丰富度

在我们优化卡片之后,标题就显得过于朴素,有些压不住下面的内容。

一个线上商城小程序界面改稿经验分享

我们先在标题上增加三层信息层级,让标题不单薄:

一个线上商城小程序界面改稿经验分享

再加一些错落的小装饰,增加丰富度:

一个线上商城小程序界面改稿经验分享

这样标题在整个画面中就和谐了。我们也在下面 TAB 标题上运用相似的样式。效果如下:

一个线上商城小程序界面改稿经验分享

03 卡片优化

1. 优化排版

现在的排版上半部为商品图片,下半部为商品信息,两个部分把卡片均分为两半,这样均分的比例在视觉感官上不如上长下短的比例,也比较没有视觉重心。

一个线上商城小程序界面改稿经验分享

我们根据黄金分割的比例(≈0.6)调整上下分割,将一些信息挪到上面去。

这样卡片的分割就更有美感,信息分布也更舒服。

2. 优化视觉

现在价格挪到右上角了,也相应调整了下价格标签样式。藏品标签也有些朴素,可以加一些颜色区分。

一个线上商城小程序界面改稿经验分享

04 画面不要灰不溜秋

调整至此,发现页面有点灰溜溜的。观察了一些其他 APP 的页面,发现页面常用的布局一般有两种,一个是灰底上放白卡,一个是白底上用灰色的分割线。这两种方式都是可以的,层次分明,也不会让页面发灰:

一个线上商城小程序界面改稿经验分享

我们目前的页面是灰底,但没有大面积的白卡,就会导致整个页面看着灰溜溜的:

一个线上商城小程序界面改稿经验分享

在这里,白底灰色分割线的方式是更适合这个页面的。最终调整后:

一个线上商城小程序界面改稿经验分享

感悟

为了得到最好的方案,我们总是一个稿子会有几十版草稿,以前的我总是觉得一遍又一遍的改稿很痛苦、很痛苦、很痛苦。但是作为设计师一定要培养这个习惯,习惯融入后便觉得这是一件习以为常的事情,改稿时就不会只想着自己的工作量又增加了,只是期待着自己又能做出更好的设计。于是就在这一遍又一遍的改稿过程中成长,这当中总觉得自己成长的好慢啊,但是回过头其实已经走了很大一截了。

共勉!一起加油!

本文来自网络,不代表设计泡一泡立场,转载请注明出处。https://www.sjpyp.com/3724.html

发表评论

邮箱地址不会被公开。 必填项已用*标注

返回顶部