從對于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

其實做設計師也有幾年，自己也是個比較懶的人，往往眼比手快，看什么都熱鬧，一到動手環節就懶得不行，也想通過這種方式去提高一下自己的設計能力。

同時，我看到很多的國外設計師其實不僅僅只是做好圖、做好設計那么簡單，他們寫很多的設計文章，講很多故事，剖析這么做的原因而不是僅僅停留在執行層面，用文字來幫助思考。我想做的可能也是這樣的東西，把想法都寫下來，而不是只停留在腦子里。

不定期更新！取決于工作的繁忙程度和懶癌的發作頻率！盡量一月一更吧，我也會盡量去嘗試不一樣的產品類型。