360影视改版小结

360影视改版小结 三联教程

  项目简介

  360影视(v.360.cn)改版后,不仅在视觉上有了一个全新的体验,在频道划分及内容整合上,也做出了很大调整,希望能够成为一个具有高水准用户体验及全网资源最全的视频网站。下面就和大家分享一下在这个改版过程中的问题及收获吧。

  前期准备

  在拿到设计需求之后,作为一名设计师,前期的思考是非常重要的,远比后续的在表现形式上面的思考要重要的多。正确的思路和梳理决定了产品的方向。所以在前期和需求方进行深入的沟通显得尤为重要,在了解了产品的用户群体、产品目的、设计所要表达的意义,后续的商业推广之后,我们针对原型图进行深入的分析和思考,从专业角度上给出合理的建议。这样不仅可以最大限度的减少设计稿反复修改的概率,也可以在实现商业目标的基础上最大化视觉的价值,根据自己的想法去诠释设计。

  设计理念

  根据360影视网站希望突出的四大主要功能,确定了整站的色彩调性。以蓝色为主,灰色为辅。 蓝色非常纯净,容易让人联想到天空,海洋,宇宙等。蓝色表达出的是一种广阔,冷静,包容及沉稳。非常符合360影视新版希望给用户营造的一种稳重,又不失愉悦的感官体验。

  LOGO设计

  这次全新改版,决定加入图形化的logo,这样不仅可以提高网站的用户认知度和用户忠诚度,也可以提高品牌自身的凝聚和影响力。我们的品牌定位不仅在于强调视频网站最基本的播放功能,更多的应该去探究一种现代人的人文关怀和情感状态。艺术原本就源自于生活,只有在情感上能够于用户达到更深层次的交流或者互动,才能够算是一个成功的产品。我们希望传递给用户的是一种自由惬意的生活状态,而不仅仅是一个工具或者产品。

  在前期的手稿过程中,舍弃了所有具象的元素,比如摄像机,电影屏幕等。因为这些元素过于写实,会让产品的定位局限于工具性的体现,没有更深层次的内涵。于最初的产品定位不符。最后我们决定用播放按钮的三角形作为原型,在此基础上进行进一步的延伸可扩展。

  标志的整体造型以播放按钮为原型,通过圆滑了边角的三角播放键拼接而成。而负形正好形成了一个播放按钮。五彩缤纷的颜色也寓意着360影视内容丰富,精彩纷呈。LOGO完整的表达出360影视自由便捷的选择以及传递给用户愉悦轻松的生活状态。

  界面优化

  1,导航条用了视频播放器常用的黑灰色搭配,利用亮色的单线条以及滑过的按钮颜色变化,突出了质感的表现。

  2,用单色线条和色块来分割各区域,并采用大面积的纯色作为底色,配合单线条的区域划分来均衡页面的重量,使得页面更加的透气和轻盈。在内容很丰富图片信息很大的情况下,平面化的设计起到了区分主次的作用。不会让过多的线条来妨碍用户的视线。

  设计细节提升用户体验

  通常,我们做一个项目,都会通过对每个设计细节的反复推敲来提高网站的易用性。

  A.当用户鼠标移动到搜索或其它button上面的时候,button会变亮,表示这里可点击,当鼠标按下去的时候,button会变暗,表示点击下去了,并会有结果等着你。每个这样的button在网页都呈现三个点击态;

  B.当用户鼠标移到所有文字上的时候,文字会变红加下划线,表示这是一个链接,点击下去后,会打开新页面;

  C.当用户鼠标移动所有海报图上的时候,会出现一个播放icon,表示这是一个能播放的视频资源,点击下去后,可以观看;

  D.当用户点击影片后的“喜欢”按钮后,后面会有一个“+1”的形态飘过,给用户一种正面的激励,表示你这个操作获得了一次加分。

  项目总结

  一个看似简单的设计原则,应用到实际产品中, 都需要设计者用心思考。一个看似很不起眼的细节,都可能带给用户很不一样的用户体验。设计师在设计的过程中,不仅需要考虑视觉的和谐美感和页面的整体有序,更应该重视如何在此基础上达到更加完美的用户体验。希望我们的产品可以脱离本身的一种最基本的观看功能,而是能给用户带来的一场愉悦自由的视觉体验。享受到的是一种轻松淡然的生活状态。思考用户本该怎样使用这个产品,用户使用的方式不是设计者自己创造出来的,而是用户本能的就知道的。以上所举,只是我们在实践中零星摸索的思考,希望能够起到抛砖引玉的作用。360影视的设计师们还将继续对用户心理抱有极大的好奇和探索,让我们的每个功能本身具有价值,对细节保持极大的关注,让用户的使用体验无限接近来自现实生活的认知。

  360影视官网体验地址:http://v.360.cn

  文章来源:360UXC 

【网站声明】本站除付费源码经过测试外,其他素材未做测试,不保证完整性,网站上部分源码仅限学习交流,请勿用于商业用途。如损害你的权益请联系客服QQ:2655101040 给予处理,谢谢支持。
360

相关文档推荐

这篇文章给大家详细介绍了HTML页面跳转及参数传递问题,需要的朋友参考下吧
这篇文章主要介绍了纯css实现照片墙3D效果的示例代码,可以实现鼠标经过图片实现改变,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本篇文章主要介绍了纯 Css 绘制扇形的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本篇文章主要介绍了一份纯CSS loading效果代码示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
这篇文章主要介绍了css 实现文字过长自动隐藏功能,需要的朋友可以参考下
本篇文章主要介绍了详解CSS3 rem(设置字体大小) 教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧