【UI设计】界面改版思路分享
首页改版
一、背景介绍
这是一款面向中小服装店和线下小服装网店的
服装批发、仓储、销售App。
作为to B的产品,
店家主要是有相应仓储的线下服装店,
店家入驻后,
可以通过该产品再次TO C,
给他们的客户使用。
----
我拿到这个首页的时候,
它给我的第一感觉还是很不错的,
界面清新、干净、舒适,
但是仔细推敲,
它还是存在一些小的问题。
为了更好地观察,我将其拆分成两个页面进行分析。

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

分析页面的时候,我习惯于从三个层次去考虑:
1需求层; 2功能层; 3视觉层;

二、需求层
每个产品都有其核心需求,
这款产品的核心需求应该是通过服装的展示、售卖吸引店家入驻。
那么,作为重中之重的首页,
店家和用户最关心的应该也是
服装【最新】【最优惠】这两个模块。
----
然后,我又截取了淘宝、京东、得物、唯品会和考拉海购
这几个典型的电商首页进行了横向比对,
看看他们首页都有哪些模块,
并对比它们哪些模块占比最大。

(原谅我截的图长度不一,我尽量保持在相近的长度下对比,┭┮﹏┭┮)
从功能展示模块可以看出,
淘宝:信息瀑布流>瓷片区>金刚区>导航区
得物:信息瀑布流>金刚区>瓷片区>banner区>导航区
京东:信息瀑布流>瓷片区>banner区>金刚区>导航区
考拉:瓷片区>banner区>优惠功能区>信息瀑布流>导航区
唯品会:大牌广告区>品牌特卖区>瓷片区>导航区>banner区
由此总结下,
淘宝、京东和得物:比较注重信息瀑布流的展示,说明这三家的智能推荐和算法很强;
考拉海购:非常注重商品的特卖和优惠各种优惠力度;
唯品会:非常注重各种大牌广告效应、品牌特卖,围绕品牌展开。
再回顾我们的这个首页,
我也把它进行了功能的拆分:

发现它存在的问题是重点不突出,
每个模块的比重几乎是一致的,
涵盖的模块类型又较多,
包括了:商圈、品牌、特卖、信息瀑布流等
所以,
这个时候我们要明确自己的核心竞争力和卖点。
那我就基于现有的情况,
自己暂时做了模块的功能主次划分:
信息瀑布流>品牌特卖和优惠专区>金刚区>bannner区>导航区>商圈
(商圈为啥放在最后,我稍后说明)
三、功能层
我们拆分模块后,
对每个模块的功能逐一分析,
这样会考虑得更加周到
1、导航区存在的问题

对此,我的改版如下:

2、商圈存在的问题
我看到原版的设计后,
只会感觉很蒙圈,
因为不知道这个功能想要表达的含义,
更不明确我点进去会进入到一个什么页面

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

所以说,电商意义上的商圈,
应该是某一区域内这类用户交流的一个圈子类产品:
可以发帖求助,
应该还带有当前商圈定位区域推荐的一系列商品和供应商信息。
而且,从营销角度考虑,
还得想到商圈是自营的形式还是第三方品牌入驻,
不同的功能模式,
意味着后期不一样的运营和维护。
如果它一定要出现在首页的话,
我也对此进行了一定程度的改版,
但是在综合的考量下,我并没有让其展示在首页:

3、品牌上新存在的问题

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

四、视觉层
我仔细把跟产品主题色相关的地方都进行了截图查看,
发现产品使用的主题色应该是芋头紫。

对于电商类的产品,
低饱和的颜色不适用于推销和热卖,
因为淘宝、京东一类的产品,
它们都用了明度和饱和度很高的红、橙、粉等色系,
所以在保留产品原色系的情况下,
我做了以下微调:

对标题的图标进行了优化,
但最终版本里我把标题的图标去掉了,
目的是减少用户的视觉干扰:

对品牌特卖区域进行了优化,
利用主题色做了磨砂质感的卡片,
凸显一种“优惠卡”“VIP卡”的属性

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

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

最后的最后,
如果该产品有后台的话,
每个服装的主图、封面图要通过后台上传,
为了降低后期运营成本,
我把所有的服装封面图的尺寸比例全部统一从1:1的正方形:

最终版展示

----
我的此次改版,
也仅仅基于我的理解,
获取的产品信息并不充分,
所以肯定也有诸多不合理的地方
希望大家多多指出~~~
又肝完了一个作业!
开心!














































































