實戰(zhàn)技巧 | 優(yōu)步改版復(fù)盤，做個高逼格官網(wǎng)真不容易

▲點擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來到專業(yè)設(shè)計師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識，幫助全球 1 億設(shè)計師成長

轉(zhuǎn)自：體驗進(jìn)階

編輯：章成愉

共 1979 字，預(yù)計閱讀 5 分鐘

我發(fā)現(xiàn)國外的互聯(lián)網(wǎng)企業(yè)都喜歡找設(shè)計公司給自己做網(wǎng)站，而且做得還很好。例如之前說過 Uber 的競爭對手 Lyft 官網(wǎng)改版案例，他們找的是 Work & Co。這次就來說說 Uber 自己的官網(wǎng)改版，他們找的是 Ueno。

如果說 Lyft 的那次官網(wǎng)改版很有新意，那么 Uber 的這次官網(wǎng)改版則是很有逼格，能看出大廠的氣魄。

其實 Uber 與 Ueno 的合作是從品牌改版開始的，后者為前者在 2018 年做了一次品牌升級，奠定了其品牌基調(diào)。

上下滾動查看更多

你會發(fā)現(xiàn)，Uber 的品牌設(shè)計走的是穩(wěn)健的路子，和 Lyft 甚至滴滴相比，更偏商務(wù)嚴(yán)謹(jǐn)。

這是因為他們把自己定位成一家「跨國大企業(yè)」，其定位就是：

• 在全世界有辨識度

• 且能有效執(zhí)行的一整套品牌方案

看來 Uber 的高層對這種偏商務(wù)的風(fēng)格是認(rèn)可的，所以讓 Ueno 繼續(xù)負(fù)責(zé)自家官網(wǎng)的改版。

一、模板化設(shè)計

可能是考慮到 Uber 這種大公司的復(fù)雜性，Ueno 選擇了拼貼風(fēng)格。

這樣的網(wǎng)站設(shè)計，與其與說在設(shè)計頁面，到不如說是設(shè)計模板。因為每個模塊可以很方便地更換圖片和文字，以后再往里面填充其它內(nèi)容，也不需要頻繁變更界面布局。

設(shè)計團(tuán)隊自己也說，為了讓網(wǎng)站滿足未來每個活動或企劃的需求，他們在模板（template）上花費了不少心思。

常見的模板有三種，分別對應(yīng)不同的場景：

二、減少模板感

用模板雖然可以應(yīng)對未來的各種不確定性，但如果模板感太強，會讓網(wǎng)站看起來很單調(diào)。

為了讓模板的「模板感」沒有那么強，視覺上使用了很多「打破框架」的布局方式。而且就連配圖，也很注重疊層搭配。

三、無所不在的轉(zhuǎn)場動效

可能是覺得光靠布局還是有點單調(diào)，于是增加了很多轉(zhuǎn)場動效。

動效展示流暢，且設(shè)計得與布局非常貼合。這么做雖然把技術(shù)難度和開發(fā)成本拉高了不少，但看起來沒那么容易視覺疲勞。

四、反思

這個版本的官網(wǎng)，大家去 uber.com 已經(jīng)看不到了，他們換上了一個簡單很多的版本：布局更加簡單規(guī)整，動效能免則免。

之前的版本看起來那么高逼格，為什么卻會被換掉？

我的理解是：無處不在的特殊布局和轉(zhuǎn)場動效，會讓維護(hù)成本和難度都會高很多。

一個網(wǎng)站最重要的還是實用性，有新內(nèi)容需要快速更新。超高的維護(hù)成本和難度短期內(nèi)看不出來，長期肯定讓人有負(fù)擔(dān)感。

而且這網(wǎng)站是由設(shè)計公司開發(fā)的，雖然我不確定他們是不是一次性結(jié)清項目費用，然而一定方案通過了，團(tuán)隊在維護(hù)運營上的動力肯定會大打折扣。

這網(wǎng)站如果完全由設(shè)計公司交付給 Uber 自己的團(tuán)隊進(jìn)行維護(hù)運營，這么復(fù)雜的布局和動效，也很沒那么好辦。

雖然 Dribbble 等設(shè)計社區(qū)里可以看到很多高逼格的飛機稿，但是真正的大廠自己卻不在熱門產(chǎn)品上玩太多花樣，最多也就像 Uber 官網(wǎng)這樣沒多久就撤下。

真正實用的產(chǎn)品需要很高的迭代效率，畢竟內(nèi)容和功能才是真正的用戶需求。

為了保證迭代的穩(wěn)定和效率，大公司都喜歡用模板化頁面，而且還不能搞太多特殊布局和動效，最后難免都設(shè)計出一些比較中規(guī)中矩的頁面……

這就是為什么有些只做虛擬項目和拼湊飛機稿的作品集，哪怕看起來再高大上，也未必找到好的工作吧。

像 Uber 這樣的大公司，設(shè)計方案更加注重的是整體的系統(tǒng)性，而不是細(xì)節(jié)上的創(chuàng)意。

---

超值課程推薦

華為用戶體驗設(shè)計的體系搭建方法

超 10 億用戶的產(chǎn)品，到底是怎么做用戶體驗的？

揭秘滴滴、蔚來等大廠的用戶體驗設(shè)計策略

原創(chuàng)好文推薦

一款為你帶來難忘體驗的美食 APP

Web Vitals —— 谷歌的新一代 Web 性能體驗和質(zhì)量指標(biāo)

2021 年用戶體驗設(shè)計趨勢分析

想要引導(dǎo)用戶行為轉(zhuǎn)化，設(shè)計師必須深刻理解這 4 個認(rèn)知心理學(xué)理論

讓設(shè)計圈一片嘩然的 Google 新 logo 到底出了什么問題？國外的設(shè)計專家這么說

如何系統(tǒng)的增強用戶粘性，提升產(chǎn)品轉(zhuǎn)化率？你要懂得“行為設(shè)計學(xué)”

設(shè)計新趨勢「玻璃擬態(tài)」到底是什么？這里有一份實現(xiàn)效果的詳細(xì)教程

如何將設(shè)計系統(tǒng)快速的從 Sketch 切換到 Figma？這里有 6 個需要注意的關(guān)鍵點

---

歡迎大家關(guān)注三分設(shè)，每天分享優(yōu)質(zhì)設(shè)計、創(chuàng)意靈感、新知新識，定期大咖老師直播分享，零距離連麥，答疑解惑。