【UI设计】界面改版思路分享

深圳/UI设计师/3年前/649浏览
【UI设计】界面改版思路分享

首页改版

一、背景介绍


这是一款面向中小服装店和线下小服装网店的

服装批发、仓储、销售App。


作为to B的产品,

店家主要是有相应仓储的线下服装店,

店家入驻后,

可以通过该产品再次TO C,

给他们的客户使用。


----


我拿到这个首页的时候,

它给我的第一感觉还是很不错的,

界面清新、干净、舒适,

但是仔细推敲,

它还是存在一些小的问题。


为了更好地观察,我将其拆分成两个页面进行分析。



我先把自己改版后的页面展示出来:




分析页面的时候,我习惯于从三个层次去考虑:

1需求层; 2功能层; 3视觉层;





二、需求层


每个产品都有其核心需求,

这款产品的核心需求应该是通过服装的展示、售卖吸引店家入驻。


那么,作为重中之重的首页,

店家和用户最关心的应该也是

服装【最新】【最优惠】这两个模块。


----


然后,我又截取了淘宝、京东、得物、唯品会和考拉海购

这几个典型的电商首页进行了横向比对,

看看他们首页都有哪些模块,

并对比它们哪些模块占比最大。


(原谅我截的图长度不一,我尽量保持在相近的长度下对比,┭┮﹏┭┮)


从功能展示模块可以看出,


淘宝:信息瀑布流>瓷片区>金刚区>导航区

得物:信息瀑布流>金刚区>瓷片区>banner区>导航区

京东:信息瀑布流>瓷片区>banner区>金刚区>导航区

考拉:瓷片区>banner区>优惠功能区>信息瀑布流>导航区

唯品会:大牌广告区>品牌特卖区>瓷片区>导航区>banner区


由此总结下,


淘宝、京东和得物:比较注重信息瀑布流的展示,说明这三家的智能推荐和算法很强;

考拉海购:非常注重商品的特卖和优惠各种优惠力度;

唯品会:非常注重各种大牌广告效应、品牌特卖,围绕品牌展开。


再回顾我们的这个首页,

我也把它进行了功能的拆分:



发现它存在的问题是重点不突出,

每个模块的比重几乎是一致的,

涵盖的模块类型又较多,

包括了:商圈、品牌、特卖、信息瀑布流等


所以,

这个时候我们要明确自己的核心竞争力和卖点。

那我就基于现有的情况,

自己暂时做了模块的功能主次划分:

信息瀑布流>品牌特卖和优惠专区>金刚区>bannner区>导航区>商圈

(商圈为啥放在最后,我稍后说明)



三、功能层

我们拆分模块后,

对每个模块的功能逐一分析,

这样会考虑得更加周到


1、导航区存在的问题



对此,我的改版如下:




2、商圈存在的问题


我看到原版的设计后,

只会感觉很蒙圈,

因为不知道这个功能想要表达的含义,

更不明确我点进去会进入到一个什么页面



因此,我还特意百度了“商圈”的含义



所以说,电商意义上的商圈,

应该是某一区域内这类用户交流的一个圈子类产品:

可以发帖求助,

应该还带有当前商圈定位区域推荐的一系列商品和供应商信息。

而且,从营销角度考虑,

还得想到商圈是自营的形式还是第三方品牌入驻,

不同的功能模式,

意味着后期不一样的运营和维护。


如果它一定要出现在首页的话,

我也对此进行了一定程度的改版,

但是在综合的考量下,我并没有让其展示在首页:





3、品牌上新存在的问题



对此,我做出了以下的优化:




四、视觉层


我仔细把跟产品主题色相关的地方都进行了截图查看,

发现产品使用的主题色应该是芋头紫。



对于电商类的产品,

低饱和的颜色不适用于推销和热卖,

因为淘宝、京东一类的产品,

它们都用了明度和饱和度很高的红、橙、粉等色系,

所以在保留产品原色系的情况下,


我做了以下微调:



对标题的图标进行了优化,

但最终版本里我把标题的图标去掉了,

目的是减少用户的视觉干扰:



对品牌特卖区域进行了优化,

利用主题色做了磨砂质感的卡片,

凸显一种“优惠卡”“VIP卡”的属性



对信心瀑布流的tab栏进行了优化:



对底板导航栏进行了优化:



最后的最后,

如果该产品有后台的话,

每个服装的主图、封面图要通过后台上传,

为了降低后期运营成本,

我把所有的服装封面图的尺寸比例全部统一从1:1的正方形:




最终版展示




----



我的此次改版,

也仅仅基于我的理解,

获取的产品信息并不充分,

所以肯定也有诸多不合理的地方


希望大家多多指出~~~


又肝完了一个作业!

开心!

12
Report
|
14
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
《马到成功》2026马年IP
Homepage recommendation
相关收藏夹
app
app
app
app
作品收藏夹
UI
UI
UI
UI
作品收藏夹
UI作品集
UI作品集
UI作品集
UI作品集
作品收藏夹
改版思路
改版思路
改版思路
改版思路
作品收藏夹
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
精选收藏夹
作品收藏夹
企业展厅/文化墙 参考
企业展厅/文化墙 参考
企业展厅/文化墙 参考
企业展厅/文化墙 参考
精选收藏夹
作品收藏夹
大家都在看
Log in