聊一聊OnePlus官网的改版(上)
2015.08.31 11:50 By: OnePlus设计师 韩明达、刘增芳
  • 19970

01

引言

2014年4月23日,OnePlus One正式发布,同时发布的还有OnePlus官方网站、OnePlus Store、个人中心、移动端专题页等等。

2015年5月18日,OnePlus官网完成最新的改版上线,每一个页面都焕然一新。此次改版不仅对页面整体结构、视觉和交互几个方面进行全面的升级,商城楼层设计也进行了全面优化。以更亲切流畅的用户体验、更丰富的购物流程,带给用户赏心悦目的使用感受。英文版也在7月正式上线。

今天我们可以和大家来聊一聊这次改版的一点心得。

02

刚开始时候觉得挺简单,跟产品经理沟通沟通,画画原型图,然后按着原型图标注个规范,出个设计稿,基本内容功能全,产品也就没什么话讲,最后出来的效果也就是一个看上去带点颜色的原型图,仅此而已。

产品的需求可能很简单,就是“ 能用 ”。但要达到较好的用户体验,就需要从“ 能用 ”到“ 好用 ”,甚至“ 爱用 ”。

03

起初大家可能对于OnePlus官网这个平台的理解不同,导致最后出来的方向会不一样。OnePlus作为一个刚出道的新品牌,目前还不是类似于“ 小米 ” 与 “ 华为 ” 一样相对成熟的购物平台,有一定的品牌知名度和用户。

04

对于OnePlus这个新品牌的来讲不是那么的合适,或者说是当时的那个阶段不太合适。最后上线之后的网站来说,也只是实现了“能用”的阶段。

05

随着OnePlus的热度越来越高,需求越来越多,周边的产品配件也越来越丰富,自然会有很多的问题出现,并且网站也不足以支撑需求的内容,需要进行改版,但没有正式提上日程。

在15年初的时候,随着OnePlus 2 的即将发布,同时也想要以一套全新的面貌去向消费者传达我们品牌的理念。网站作为其中比较重要的部分,被提到了较高等级的需求上来。

前期和产品经理去交流OnePlus官网的定位、服务人群等,想了很多。

06

对于之前的网站也提出了很多的问题,例如页面混乱、购物体验过长、购买流程不统一、不同页面的设计风格不统一等问题,也有很多“ 加油 ” (喜欢OnePlus的用户的统称)提了自己的看法,一些技术型加油在视觉和功能上提出的建议也是很好。

定下来了就马上去落实,作为负责这次改版的设计师,和两外的两个设计师一起,带着自己三三两两的东西就搬进了僻静的“小黑屋”,这样与产品和前端技术人员可以进行更加紧密的交流。

首先思考的是整个结构的问题

之前的官网采用的是1130px的固定宽度,同行业的一些友商大多也都是采用固定的分辨率,然后在其中去处理相应的结构。这是搭建网站基础的一种方式,但是不是最合适的方式呢?互联网领域现在正是蓬勃发展的时候,电脑、手机、Pad等各种设备层出不穷,各种分辨率的尺寸更是让现在的电商门户网站伤透脑筋,迫切需要尝试更好的方式去解决这个问题。

07

所以我们应用了响应式的做法,它可以自动适应不同尺寸的屏幕,根据目标设备自动改变风格如显示类型,宽度、高度等,这能很好解决不同屏幕尺寸的显示问题。根据用户设备的分辨率来加载不同分辨率的不同图片,这样既能给不同终端的用户一个很好的视觉体验,又不会白白浪费用户的网络数据流量。

这次的改版采用这种方式作为基础,是为了能够达到更好的一个用户体验,也为好用的这个阶段踏出坚实的一步。伙伴们认同了我们的这个观点,所以很快我们就开始尝试一些页面的结构,整个网站的结构有个初步的模型。

下面先对于响应式这部分的改变来简单的聊一下。

关于首页的结构来说,分成:

08

在首屏的部分分为内容层、导航层、以及右边工具层。

09

内容部分的形象图主要以展现品牌形象为主,根据数据分析及统计选取了主流的几个分辨率尺寸做为断点,界面在断点处会发生明显的版式调整,在断点之间进行适当地处理以达到在不同分辨率之间视觉效果的一致性,总体目的就是为了保证页面在手机、平板、PC上加载相应的样式,而现在很多高清的屏幕和一些常用的屏幕之间该如何处理也是最为纠结的问题。

比如说在导航层下拉部分的产品展示中,产品图片和产品文字的相对位置在不同分辨率下会发生变化。

10

运营部分的布局也会根据不同的分辨率做出最佳调整。

11

在处理商城首页展示的时候,也遇到了一些问题;不仅要保证布局上达到视觉的最佳比例,同时也要兼顾不同分辨率下背景的变化。我们通过不断的尝试、讨论,最终得到一个比较完美的结果。

12

个人中心与购物流程

这部分和购物流程并没有采取全屏响应式的方式,而是采用了一个固定1200分辨率宽度的区域范围内进行布局。同样也是会在不同分辨率的情况下达到一个最优的视觉效果。

13

目前越来越多的电商平台在逐步的采取这种方式,这将成为网站改造的一个热门。虽然还有很多的问题需要完善,但是目前来看这项技术已经向前迈进了一大步,期待将来有更好的呈现方式出来。

由于时间关系,今天先聊到这里,下次我们针对网站的视觉风格来聊一下我们做了哪些变化。

谢谢大家!

Never Settle.