从网站改版看页面设计与用户体验

在五一假期期间,佚站互联对官网进行了大幅度设计与版式的改动,以下是前后两种风格之间的比较:

 

 

从外观上可以看出,我们对高度进行了大幅度缩减(从2620到1590),从而内容也进行了缩减与重构,结合一张整站建设的内页,让我们一起看看这些改动所带来的关于设计和用户体验的探讨。

 

首页:关键词(展示、入口、简约)

 

是的,我们将首页的设计理念定为这三个关键词。

 

展示是首页最原始的作用之一,毫无疑问,它承载了一个网站展示形象与内容的首要责任,所以它必须涵盖所有最核心的内容(对于佚站互联而言,核心内容就是业务以及信息分享)。

所以我们将这几块内容放置在首页最显眼的位置,并且加以HOVER的SCALE效果处理(使用CSS3技术),从而为用户带来一些小小的交互效果以体现网站自身善意的一面。

 

入口是首页之于用户体验而言非常重要的一点作用,可能很多人会说,所有的入口在NAV或者LINKS里面都已经有了,为何还要多此一举在页面中添加?

对于用户而言,最好的感觉就是在浏览网站相关内容的同时可以随时进入自己感兴趣的话题或者图片标识,而非浏览到一半还要大费周章返回NAV进行选择。

所以我们把在第一版中忽略的关于业务的入口加以填补,方便用户及时的了解与点击跳转。

 

简约是佚站互联一直秉承的建站理念之一,但如何做到简约而不简单,确实是一件难以率性而为之的事。

在设计方面,我们采用了黑白灰最原始的大色调,搭配上局部鲜明快活的亮彩色调,希望能够用色彩紧紧抓住用户的视觉感知,这一点,我们在两版中都有努力体现。

 

内页:关键词(脉络清晰)

 

虽然我们很想像其他传统网站一样把各种自身优势与长篇大论塞满整个页面篇幅,但是固执的我们最终还是选择了以最精简的言语加配图给用户带来清晰的阅读体验。

诚然这种方式会让整体内容显得不够充盈饱满甚至匮乏,但是相对而言精简清晰的文本脉络能够让用户更加迅速直观地从我们的文案、配图以及精心整理的阅读思路来了解我们,这也是其他过于冗长的页面设计所无法做到的。

 

细心的用户(当然需要在高级浏览器的支持下,推荐CHROME)应该会发现,在新版本中我们加入了大量CSS3的交互元素,这个在HTML5盛行之后日渐风靡的新CSS技术也在悄无声息地改变着我们的用户体验。

平滑的渐入与位移,细微的延迟载入与动画,都希望能够在用户阅读的同时与其进行互动,吸引他们的眼球,从而产生更精准的阅读定位与优雅的交互体验。

 

关于咨询框

 

我们在首页去除了在线咨询的悬浮窗,或许对于营销而言,这么做有些不可理喻。

但是我们认为,在一个用户还没有完整了解过服务商的前提下,在首页设置一个悬浮窗从而期盼他们能够马上进行咨询,这本身也是一个不符合逻辑并且会严重影响整体设计效果的坏主意。

 

关于LOGO

 

我们采用了GIF的图片LOGO,并且加上了我们的服务理念——“用心创造每一站”。

虽然体积较为庞大的LOGO会影响整体页面加载速度,但是在其他元素优化完整的前提下这点并不会有太大弊端,相反我们认为,这一点点动画效果,恰恰就是我们所追求的这个服务理念。

 

另外还有许多地方新版本还未完善的,也将在接下来的维护中进行完善,欢迎大家的探讨、批评、与指正。