微商城首页设计

分类: 手机移动端
5,109 人气 / 0 评论 / 2017-3-1 发布
Author:

使用了:组装机 – 组装机

使用了:Adobe – Photoshop

使用了:Adobe – Illustrator

微商城首页设计,从草稿到最终稿共6个版本。
老夫先展示一下最终稿,然后会从草稿开始解析设计思路。
图片有点多,前方高能预警

站酷作品链接

 

  • 查看《微商城首页设计》原图,原图尺寸:3500x2336

    微商城首页设计

    .

  • 查看《微商城首页设计》原图,原图尺寸:4272x2848

    微商城首页设计

    .

  • 查看《微商城首页设计》原图,原图尺寸:1200x1800

    最终稿—页面预览

    .

  • 查看《微商城首页设计》原图,原图尺寸:640x2914

    最终稿—完整页面

    .

  • 查看《微商城首页设计》原图,原图尺寸:250x250

    咳咳,马上开始正文

    .

  • 查看《微商城首页设计》原图,原图尺寸:204x201

    微信扫一扫看看线上效果(后期有部分是别的设计师改了设计的)

    .

  • 查看《微商城首页设计》原图,原图尺寸:640x5905

    草稿图1,这个就比较飞机搞了。做设计的时候我们可以举一反三,比如我反问自己正文内容页面会不会太长了,首屏可不可以在简化一点。

    .

  • 查看《微商城首页设计》原图,原图尺寸:640x3022

    草稿图2,。根据草稿图2,我立刻又改动一些。此处设计思路是:利用菜单、排序、筛选来展示网站的项目,因为根据文案,这些项目会有各种优惠,而这些优惠则可以用筛选,例如“拼团优惠”来找出所有有相关优惠的项目。

    .

  • 查看《微商城首页设计》原图,原图尺寸:640x2100

    草稿图3。同样是举一反三,根据草稿2的设计,我们可以不可以换做方式来展示,同样的也是菜单,同时给项目加点底色。

    以上就是第一天做的3个草稿图。
    接下里开始第二天的,修进完善。

    .

  • 查看《微商城首页设计》原图,原图尺寸:640x2507

    在草稿二的基础上完善了一些UI设计。
    定义为初稿a

 

  • 查看《微商城首页设计》原图,原图尺寸:640x5537

    在做初稿A的时候,反问自己可不可以不用菜单,直接用楼层,但是不能页面过长。于是设计了如上的排版。
    此处为初稿b

    .

  • 查看《微商城首页设计》原图,原图尺寸:640x2914

    设计图A:采用了草稿2的思路,完善了UI设计,使用页面更加整洁美观,突发奇想,设计了“限量抢购”

    .

  • 查看《微商城首页设计》原图,原图尺寸:640x3082

    设计图B:与A不同的是,本人更倾向于这个版本,用户可以方便的选择类别(如牙科)、排序方式(如按关注度排序)已经筛选条件(如限时打折)。
    项目列表能清晰的展示项目的预览图+项目名称+关注人数+价格+各种优惠条件。

    请见下图所示

    .

  • 查看《微商城首页设计》原图,原图尺寸:1600x1600

    可惜,最后文案们说喜欢设计图A,他们决定用A。

  • 查看《微商城首页设计》原图,原图尺寸:250x250
相关资源:
  • 线雕详情页—医美详情页(移动端)
    线雕详情页—医美详情页(移动端)
    2018-6-2810
  • 脂肪专题页
    脂肪专题页
    2018-6-2511
  • 眼部专题页
    眼部专题页
    2018-6-2214
  • 6月促销专题—活动专题页
    6月促销专题—活动专题页
    2018-6-228
  • 激光洗纹身详情页—医美详情页
    激光洗纹身详情页—医美详情页
    2018-5-316
  • 祛红血丝详情页—医美详情页
    祛红血丝详情页—医美详情页
    2018-5-3112
  • 光子嫩肤详情页—医美详情页
    光子嫩肤详情页—医美详情页
    2018-5-319
  • 520专题页—活动专题页
    520专题页—活动专题页
    2018-5-315

评论

昵称*

邮箱*

网址


文章总数
106+
评论总数
0+
专题栏目
1+
运营天数
1019+