电商类应用界面如何做？京东七鲜应用设计案例解析

静电说：连续几期的优秀案例解析栏目推出后，收到小伙伴的热烈反馈，大家都说亟需这样的栏目帮助大家分析设计过程中的思考要素。其实总的要点和原则是一致的，就是在设计过程中融入产品设计思路与用户心理的思考。任何时候都是。

今天给大家带来的是京东七鲜应用的UI界面设计思路解析，京东七鲜是一款生鲜电商类应用，也是从京东商城分离出的一款细分的应用类型。生鲜类应用有一些特色，它更强调实效性，场景化，新鲜，以提升浏览者的购买情绪和欲望。

同时，七鲜应用是一个跟线下门店联动的APP，结合线下门店实现生鲜产品的快速送达服务。

接下来我们分别从视觉和产品角度来讲讲这款产品的设计优点，取其精华，帮助大家更好的改善自有产品。

01.启动页面：塑造品牌

上图是七鲜的启动页面，看似挺简单的启动页面也有很多设计要点。Logo：我们非常有必要对Logo文字进行一些艺术化处理，这是很多设计师会忽略的要点。Logo是点睛之笔，请不要直接把文字打上去就完事儿。Slogan：Slogan一般与Logo同时出现，七鲜采用了大字方式来呈现，而这种大字具有“招牌”的特性，简单直接。但是，我们需要注意，如果缺少上方具有设计感的Logo，那整个页面就完了。广告宣传语：Slogan一般与Logo同时出现，七鲜采用了大字方式来呈现，而这种大字具有“招牌”的特性，简单直接。但是，我们需要注意，如果缺少上方具有设计感的Logo，那整个页面就完了。

02.首页设计 氛围感营造

首页弹层广告：虽然弹层广告可能会影响用户体验，但是我们需要在用户体验和营销效果直接做个平衡，首页弹层直观且醒目，对于数据导流有明显的意义。只需要加大关闭按钮，并不会对用户有过多感染。但是，我们需要把握弹层的频度，不要过高，否则用户可能真的会厌烦。

接下来说首页细节：

带有色彩的头部背景：头部背景有个很明显的好处，就是可以结合运营呈现出更多的氛围感。在有营销节点的时候更换背景，整个页面的风格就会发生变化，灵活好用。相对于纯白背景，更有识别度。

固定位置的广告语：七鲜设计师采用了两个简短的字段来凸显产品特色，且是在非常显著的位置，这说明这个特色是非常希望用户关注的要点。快！东西多！

金刚区设计：这个金刚区分类icon非常值得我们学习，首先，它使用的是照片实物背景，第二，它采用了统一倾斜设计，第三，背景为纯色。把握住这几点，使用实物照片也可以做金刚区图标且不显得乱。

首页第二屏：

双行的Tab菜单：这是首页第二屏的效果，设计师采用了双行的Tab菜单栏，这一点非常值得我们学习。第二行的菜单除了可以作为定位指示器，还可以加入文字，让设计更有意义。

瀑布流卡片设计：灰色背景+白色+阴影卡片效果，配合绿色的加号按钮来表现个性化推荐。

03.分类页设计

左右分栏的分类页：左右分栏来设计分类页面已经成为设计师的共识，可以帮助用户减少页面跳转带来的损失厌恶情绪，提升浏览效率。

分类配图设计：配图一定要精心挑选，尽量角度一致，且抠图处理。

04.7Clube页面

7Club是链接购买转换的重要一环，现在越来越多的电商类应用开始加入内容性的内容促成客户转化下单。二级菜单的设计采用了笑脸风格的状态指示器。并加入了品牌绿色和纹理设计。另外我们发现，这个页面也有用户头像出现。

05.产品详情页设计

不少电商应用会使用“购物车”和“马上购买”两个按钮，为何此处仅仅使用了“购物车”呢？我们可以从场景角度考量，一般生鲜类应用不会直接购买单件商品，大部分会购买一系列物品，配菜之类，因此直接放入购物车，再结算也不失为一种简单粗暴的做法。

场景化设计：当你去超市买菜的时候，你可能会想，我要买啥菜呢？今天要做啥饭呢？而如果菜旁边写了一个菜谱，那你可能马上会有灵感了。这就是场景化设计的力量，想用户所需。七鲜应用也采用了这样的方式，在产品下方放上相关菜谱，提升用户购买其它产品的概率，是一种非常不错的方法。而且菜谱和7club频道有机关联。这就是内容与产品结合的力量。

06.总结

京东七鲜是我非常喜欢的一款应用，它简洁方便，设计清新好用，而且还有我最喜欢的一些细节，以及菜谱栏目的结合，这一点对于生鲜类应用确实是个创新。各位小伙伴，在平时要多去观察应用，多看，多总结，相信你在平时如果形成了这些习惯，一定会成为一个更优秀的设计师的。