UE Design | 回顾官网3.0迭代-视觉方案实施-京东云开发者社区

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/1e778c3f-14a6-4514-8b1d-96f4b1d9433b20210128151839.gif)</center>

三个方案基本解决了现有官网首页存在的问题，各设计者优化并解决各方案的问题，视觉安排三人分别按照三个方案出设计图，最终评审设计！

# 视觉方案展示
<center>![](//img1.jcloudcs.com/developer.jdcloud.com/be0dd477-4391-4d4f-bb1a-fdf93d9d6dc320210128151912.png)</center>

# 实施
在前端实施的过程中，遇到了一些问题，大概如下：

**1.若某产品分类过多时，如何处理？**
<center>![](//img1.jcloudcs.com/developer.jdcloud.com/b8406820-b7a8-4c9e-b084-3a0fc64ac3b620210128152019.png)</center>

------------

**三种方案：**

a.滚动条常显示；

b.不显示滚动条，鼠标移入区域后显示滚动条

c.滚动条常显，但弱化滚动条，鼠标移入后加重显示；

a方案很明确的告知用户滚动有更多产品，但当出现多处滚动条时，特别影响视觉效果；b方案不影响最完美的视觉展示，唯一的问题是当用户未移入时，无法感知是否有更多的产品；c方案浅色滚动条有稍微缓解，一样无法避免a方案的问题；

通过尝试和体验三种方案，最终选择b方案

**理由：b方案不影响视觉体验，且在实际浏览中，用户很容易发现滚动条。**

**2.地图旋转过程中，点比较集中，可能无法分辨具体是哪个点？**
设想的两种方案：

a.在地图点上标记文案；

b.只点亮一个当前的点；

a方案视觉体验不好；b方案的实现方式与待建中的样式有冲突。

**最终方案：在下方文案介绍处，增加单独的地图标记，以此增强位置感。**
<center>![](//img1.jcloudcs.com/developer.jdcloud.com/0fb44d26-94ff-451a-b8e3-d847c1682c4820210128152214.png)</center>

**3.对“注册”按钮的优化**
问题：

京东云目前处于发展中，单从大的群体来分析，注册使用人数>登录人数，故注册按钮重要程度要大于登录等按钮。当用户打开网站时，如何让用户第一眼就看到注册入口？

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/73c01c6b-24a3-4c6c-aa0d-540f2177928d20210128152328.png)</center>

**4.运营位的主题变更**

**问题：**

双11活动上线了一版以红色为主题的活动页，且需求方期望将首页的运营位布置上双11主题，最终设计给了一版很漂亮的设计，但当切换到其他颜色的banner时，运营位严重断层；

**解决方式：**

第一版上线紧急，暂时下线了其他的活动banner，第二版本，1天时间，在最小修改的前提下，当banner切换至其他活动时，运营位的主题同时切换至原有的常规模式；

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/9389359f-fe74-4d9b-b3fd-93806bdab3ee20210128152433.png)</center>

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/60d39e30-da96-4fb8-a65e-0ad4571805bc20210128152450.png)</center>
<center>![](//img1.jcloudcs.com/developer.jdcloud.com/db118f08-a641-4b72-aed2-4c464f01918320210128152504.png)</center>
<center>![](//img1.jcloudcs.com/developer.jdcloud.com/60d39e30-da96-4fb8-a65e-0ad4571805bc20210128152450.png)</center>
<center>![](//img1.jcloudcs.com/developer.jdcloud.com/4f26209e-db44-4e2d-bb44-7d51433925bd20210128152520.png)</center>