手机上网易和图片库设计的改版升级设计

【 tulaoshi.com - 平面设计 】

一. 手机上网易历程 http://help.3g.163.com/

一个网站或者一个页面在一段时间内会进行一次改版，而比较容易催促改版的情况有几种。

1. 用户体验需要大幅度提升。2.用户习惯需求发生了明显变化。3.组织结构或其他原因调整。而这次手机页面改版的情况主要是第一点。总结了一下在前期没有认真分析产品定位和产品设计方向是导致这次返工量比较多的重要原因。

难点主要是功能之间关系准确的呈现性和结构组织的直观性。

首先，手机网易网页面是帮助用户怎样更简便快速的用手机登陆页面。手机网易网页面是让用户了解手机上网的好处，更快更及时随时随地都能关注每条信息。分析清楚后什么是手机网易网也就可以大概划分这个页面的主要架构了。其次，用户使用人群大部分可能是第一次手机上网的人群，所以设计界面时一定是友好的而且准确和直观。另一群用户可能是资深用户，他们对类似产品的操作很熟悉。还有一小撮用户是路过的。最后，用户使用环境可能大多是电脑操作，也可能是手机上网而且是随时随地。简略的分析完后可确定用户应怎样使用相关界面元素。

下面这个图是手机网易网改版之前的页面。

在大结构上，一.页面帮助用户更简便快速的用手机登陆页面，而手机登录页面的两个途径之间功能关系并没有表达准确。文字描述也有歧义。手机输入163.com和发送免费短信其实就是这个页面主要功能的两种途径。 二.帮助页面播放的内容也没有呈现出直观性。主次无明显的区别，重点没有突出。从而显得焦点分散，用户使用效率降低，和没有理由的图形呈现形成了视觉上的噪音。分析完大概框架以及各个功能之间关系后一个大的框架图就出来了。

下面是简单的框架关系图：

下面是最新的手机网易网改版页面：

虽然页面中还有很多细节做的不够好，但是只要不断向前这就是一条很好的ui设计准则。信息表达准确，杜绝二义性，主次分明重点突出。如果做到这两点，可能就是一个很好的设计产品了。如果配合前两点在加上能使信息做到打动人心。那可能就是个艺术品。。。。。。。。。。例如：苹果。。。

二. 图片库设计历程

图片库这次的改版不算成功，仍在继续努力。结合第一个案例催促一个产品改版的情况，图片库是结合了第一点和第二点，用户体验需要大幅度提高，用户使用习惯也有明显的改变。而这次图片库的设计难点在于要适应各个频道的风格和怎样与各个频道沟通到用户在使用图片库的主要目的是什么

下面是最初改版时的页面：

在适应各个频道的要求和适应部门的规范内初步设计的图片库。而这次页面的改版是为改版而改版，并没有真正站到用户的度去考虑，其实用户的使用目的很简单很直观，这个页面上呈现的杂乱信息太多。首先, 标题有两条，简要文字有两条，导航有三条，搜索框有两个。焦点太多，使主题混淆。用户真的需要这么多的信息吗?

下面是最后次图片库改版：

这次改版虽然主体清晰很多，但是在于各个频道使用规范上做的功夫还需协调，虽然图片库功能比之前有明显的改善，而且制作出像影音播放一样的滚动条，使用户更快更方便的找到自己想要的目标，但是还没做到更好的用户体验。在创建一个界面时，总会遇到很多问题。没关系，只要不断向前，并记住UI简单易用。

进入论坛讨论