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

用户头像
深圳/UI设计师/4年前/722浏览
【UI设计】界面改版思路分享

首页改版

一、背景介绍


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

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


作为to B的产品,

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

店家入驻后,

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

给他们的客户使用。


----


我拿到这个首页的时候,

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

界面清新、干净、舒适,

但是仔细推敲,

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


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



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




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

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





二、需求层


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

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


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

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

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


----


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

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

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

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


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


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


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

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

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

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

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


由此总结下,


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

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

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


再回顾我们的这个首页,

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



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

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

涵盖的模块类型又较多,

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


所以,

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

那我就基于现有的情况,

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

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

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



三、功能层

我们拆分模块后,

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

这样会考虑得更加周到


1、导航区存在的问题



对此,我的改版如下:




2、商圈存在的问题


我看到原版的设计后,

只会感觉很蒙圈,

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

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



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



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

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

可以发帖求助,

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

而且,从营销角度考虑,

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

不同的功能模式,

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


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

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

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





3、品牌上新存在的问题



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




四、视觉层


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

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



对于电商类的产品,

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

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

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

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


我做了以下微调:



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

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

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



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

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

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



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



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



最后的最后,

如果该产品有后台的话,

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

为了降低后期运营成本,

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




最终版展示




----



我的此次改版,

也仅仅基于我的理解,

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

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


希望大家多多指出~~~


又肝完了一个作业!

开心!

12
举报
|
14
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
我的钱包-UI界面设计-app
森系3D渐变流体抽象矢量UI背景图
UI通用设计素材1
UI界面 组件
【新年UI图标】活动icon
钱包ui模板
【新年UI图标】家具icon
手表表盘UI系列
【新年UI图标】礼物/活动icon
3D渐变流体抽象矢量UI背景图
高级表盘系列UI源文件
智能家居中心 简约 UI设计组件库
新能源APP应用UIKit
Security Camera UI kit
APP/小程序商业项目UI模板|99个高保真UI+79个原型
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】积分icon
盲盒APP UI设计
新拟态风格 UI设计组件库
【新年UI图标】体育icon
【新年UI图标】旅行icon
【新年UI图标】美食icon
【新年UI图标】美妆icon
UI 登录界面设计模板包
你可能喜欢
相关收藏夹
地产VI
地产VI
地产VI
地产VI
大家都在看
登录注册