从对于UI的学习开始，到工作的进行中，给自己喜欢的app或者网站做Redesign一直是一个很好的学习方式，之前也做过很多，但是一直没有系统的去分析过这件事，之前在Medium上看到spotify的设计师Evan Dinsmore做了一个Weekly Redesign Challenge的计划（虽然他只做了六周就没有再在Medium上面发了），很喜欢他对于重设计这件事的分析。作为设计师不仅仅要会做页面，也要会讲故事，我也想通过Redesign这件事情来重新审视一下自己，锻炼自己对于产品的分析能力。

为什么做Booking？

从我自己的个人使用习惯来说，订酒店这件事我基本上在内靠飞猪，在外靠booking，从专业性和国际性上booking都是一款很值得信赖的全球住宿预定平台。

但是，目前的设计从视觉上真的给我有点亮瞎狗眼的感觉，混乱的颜色运用和各种风格不够精致的图标并存，各种奇怪的间距和线宽，不够准确的层级划分，可能这也是不少老牌APP的通病，太多版本和功能并存，很难达到统一，之前在一些项目迭代时也碰到过这些问题。一般来说，这种情况最好是推翻重做吧，但是这个需要考虑的各方面因素太多，可能他们也不敢轻易这么去做吧。

首页

从2015年底Instagram的大胆去色化开始，渐渐刮起了一阵简洁风，把颜色还给内容，不再用去抢夺属于内容的那部分颜色。原来的版本里，颜色实在太多啦！很重的蓝色，不怎么好看的黄色，还有一个做强调的宝蓝色，这太可怕了。虽然我估计设计师放上这块黄色是为了强调，让用户第一眼就能找到搜索和筛选，可是我想说，在第一屏最大的位置已经是最好的强调了，真的不需要这样的颜色去加强。

所以我对首页做了这些事：

1.把顶部Tab从深蓝色改成了白色，不再给人头部过重的感觉。

2.去掉了那块可怕的黄色背景，真的不太需要这么大一块强调色。

3.优化了图标，用了双色的图标设计，调整了图标形状，增添了趣味化设计。

4.因为考虑到其他页面也有卡片的样式，所以干脆把ticket&tours的版块做成了一个卡片。

5.调整了间距，去掉了灰色分割线，整体上调整了色彩的排布和信息的排布。

做完了这些视觉调整，并没有损失首屏的信息量和功能，用统一的、简洁的、实用主义的设计语言去调整了页面视觉。也同时为其他版块的加入提供了可参考的空间比例和视觉方案（据我使用来说booking首页下面还有很多的功能，但是都缺乏统一的视觉语言去规范）

搜索列表页

当我们从首页出发，填写了相关出行信息之后就会 来到这样一个搜索结果页，帮我们列出符合我们条件的酒店。Booking会在这个页面上帮我们列举出很多相关信息，名称，图片，评分，价格等等，帮助我们选择适合的酒店。第一次看到这个页面，我最大的感觉是他太挤了，给我一种在火车站人来人往的拥挤感，各种信息通过不同颜色的文字来表现，好像有区别，但是我有必须花一些时间去分别，当然很受大家看中的价格和评价还是比较醒目的，但是总体来说，还是有种目光应接不暇的感觉。

我做了什么：

1.和首页一样，去掉了上面Tab和下面筛选的颜色，只保留了少量的彩色元素，减少对内容的干扰。

2.优化了卡片，增加了圆角和浅阴影，减少了描边，让卡片效果更柔和，不显得那么尖锐。

3.把评分放到了右上角更醒目的位置，一眼就可以看到评分对于用户非常重要

4.优化了信息的排列，优化了信息的显示，即使在不减少信息量的情况下尽量做出优先级。

5.优化了图标，和首页风格保持一致。

像这种大信息量的列表，用卡片的形式还是比较科学合理的方式，如果去掉了卡片，可能会显得信息密度过大，过于拥挤等问题，所以原来的版本里这样的列表本身是没有问题的，问题出在了不够精致，信息比较混乱上，所以我在思考的时候做了一些优化。

详情页

Booking的详情页和大部分酒店预订平台的详情页稍有不同，他并没有在这个页面放出酒店房型的具体介绍和价格等信息，而是一个综合的酒店概述的页面。这里不打算改变他的层级，只不过在这种信息的前提下做了一些修改。

1.其实不用每个页面都有顶部Tab，详情页完全可以用这种蒙版加图标的形式，看起来页面更通透。

2.比起几张看不清楚细节的小图，不如一张好看的大图来的过瘾，事实上这种方式在越来越多的同类产品上应用，如飞猪、Airbnb等。

3.保留了地址和地图的位置，因为这是选择酒店一个很重要的指标，保留了一定的扩展性，毕竟你也不知道还会不会加上更多的信息。

4.调换了酒店简介和特价房型（也是房型列表的入口之一），不是每个人都会先详细的去看那些繁琐的简介，特价永远是吸引人的好办法，把这个信息放到第一屏让使用者一目了然。针对这块也做了一定的视觉优化，提升视觉效果

5.简化了下面房型列表的入口样式，至少我觉得简洁一些更好看。

走到详情页这个层级，初步的了解其实已经建立，这种时候最应该注意的就是把用户最想看到的内容放在最显眼的位置，然后，让他们快速做出选择。这种情况下，套路少一点，有效信息多一点，才能吸引到用户去做选择。

因为时间的缘故，暂时只做了这三个页面的优化，以后有机会再补充。我想要传达出来的设计理念是，更简洁易懂的设计语言去规整这种比较复杂的app，在添加元素的过程中也尽量去做好协调的工作。我做的设计也不是完美 的，当然也有很多问题，但是从这个发现问题和解决问题的过程中我也希望能够提升自己的设计能力，提高自己对产品的认知能力。知其然也要知其所以然，而不是单纯地还原线框图而已。

关于为什么想通过图像加文字的形式去做Redesign

其实做设计师也有几年，自己也是个比较懒的人，往往眼比手快，看什么都热闹，一到动手环节就懒得不行，也想通过这种方式去提高一下自己的设计能力。

同时，我看到很多的国外设计师其实不仅仅只是做好图、做好设计那么简单，他们写很多的设计文章，讲很多故事，剖析这么做的原因而不是仅仅停留在执行层面，用文字来帮助思考。我想做的可能也是这样的东西，把想法都写下来，而不是只停留在脑子里。

不定期更新！取决于工作的繁忙程度和懒癌的发作频率！尽量一月一更吧，我也会尽量去尝试不一样的产品类型。