易买web-个人中心首页设计

个人中心原型图

这是我当时拿到的原型图，我习惯在正式做设计之前都先审核一遍原型图的逻辑，看看布局，流程是否合理。首先这个原型和原本的网站差异不大，几乎可以说是照搬。原本的需求就是因为原网站用起来非常不方便因此才要改进，但是这样的原型似乎有违背改进网站的本意。并且经过我分析之后，发现有几个问题

1、在公司的业务里面，代购是指用户发网购网站商品链接，工作人员替其下单并转送至国外。自助购是指，用户自行购买商品，并将商品寄送到仓库。国际转运是指客户可以转运普通包裹，不一定是购物网站上的商品。但是我认为，首先对于用户来说，只要商品寄出后，商品原本由哪种途径得到已经不重要了。并且三种业务后期的状态一模一样，因此，没有必要再订单处理页面过于区分三种业务。

2、订单处理导航和下单按钮结合在了一起。我认为国际转运的下单不管怎么说还是一个稍稍有点复杂的过程，这个页面应该把重心放在处理已经下过的订单上面，下单需要有专门的下单引页面。图中原型还强调了下单按钮，总觉得有点冲突，我觉得页面的功能应该区分得明确清晰，毕竟鱼和熊掌不可兼得。

3、侧边栏的功能有一些交错，我认为财务管理应该放到右边余额，优惠券等有关现金或者金钱的地方。

4、客户服务应该和上面的在线客服放在一起，都属于“帮助”部分。

第一版设计

因为想到是华人华侨代购国内的产品，所以想着用中国风会不会更加亲切一些。于是开头的版本采用了水墨画的背景，用了朱红色作为醒目色，墨绿色作为背景。

然而用这个网站的用户大多为年轻女性，需求方希望配色能够更加明亮少女。于是我调亮了一些颜色。但是自己也总感觉有许多缺陷

这个版本通过我之前提出的一些问题，对页面逻辑做了许多改动

1、不再由自助购，转运，代购三个页面下设六个状态，反而由六个状态下下设三种业务，三种业务由颜色区分。最后一个版本觉得颜色区分业务的意义不大，多引入颜色容易照成页面颜色混乱，因此改为灰色。

2、将有关资金的部分，余额，优惠券等处理合并。

3、合并了消息部分

4、将与“我”有关的内容集成到一处，去除掉不常用的操作。将于页面无关的工具功能放到了其他的页面

第二版设计

第二版设计去掉了深蓝色，减少了页面中颜色的数量，并且进一步简化了页面，使用了更多扁平化的设计。但依然有一些问题

1、需求方认为此页面颜色依然太深，不适合大部分用户

2、实际上，一个订单要经过国内部分，包裹打包，以及国际转运三个部分。目前页面只显示了国内部分的六个状态，我的运单指我的包裹转运，我的送货车指国际转运。需求方表示很多用户不知道有这三个状态，经常漏了后续的操作。一方面是命名和下单指导的问题，另一方面设计上也要更好的突出这三个状态之间的顺序。

第三版本的设计

我觉得深蓝色的使得整个页面变得非常的沉重，压抑，因此我这个版本就去掉了深蓝色。

这个版本需求方新提出了包裹管理的想法，将每个订单划分为不同的包裹，再将包裹下划分不同的状态。

新的设计很好的加入了包裹管理的内容，除了按状态浏览也可以按包裹浏览，并且每个侧边栏的长度是一致的，每个状态的表格宽度是一致，因此同样的表格可以跨越各个页面使用。减少前端工作量的同时，也方便了用户，规范化了格式