[核心提示] 對(duì)工具類產(chǎn)品來(lái)說(shuō)，好的設(shè)計(jì)可能會(huì)降低效率；趁手的功能或許有點(diǎn)簡(jiǎn)陋，在好看與好用之間尋求一個(gè)合適的均衡點(diǎn)，是非常有必要的。

打造一款產(chǎn)品，無(wú)非兩個(gè)終極目標(biāo)：好看和好用。但是，我們?cè)诋a(chǎn)品設(shè)計(jì)過(guò)程中，往往無(wú)法讓二者達(dá)到最大化程度的滿足。我們要做的，是在二者之間找到一個(gè)極限平衡點(diǎn)。

瀏覽器，作為一個(gè)工具型的產(chǎn)品，說(shuō)實(shí)話，要做到好看又好用，比一般的產(chǎn)品都具有挑戰(zhàn)性。但是，即便如此，在好看與好用之間，它也有一個(gè)極限平衡點(diǎn)。作為產(chǎn)品經(jīng)理，我們要做的就是尋找到它，并最終將產(chǎn)品呈現(xiàn)給用戶。

UC瀏覽器電腦版 3.0 就是我們一個(gè)尋找極限平衡點(diǎn)后呈現(xiàn)出來(lái)的產(chǎn)品，我們盡最大努力做到了好看又好用。下面，我就以我的親身經(jīng)歷，談?wù)?UC 瀏覽器電腦版的設(shè)計(jì)心得。

產(chǎn)品背景

瀏覽器是一個(gè)非常成熟的產(chǎn)品，UC 作為 PC 瀏覽器的新入者，在這個(gè)充滿了競(jìng)爭(zhēng)的紅海里有很多競(jìng)爭(zhēng)對(duì)手。所以，作為設(shè)計(jì)師，我們需要面對(duì)的是幾乎已經(jīng)被業(yè)界固定下來(lái)的布局和樣式。在原有形態(tài)上，我們很難有突破機(jī)遇。

瀏覽器，作為一個(gè) PC 軟件，它會(huì)比移動(dòng)端的 App 更為復(fù)雜，因?yàn)橛脩粜枰J(rèn)識(shí)、下載、安裝、學(xué)習(xí)和使用，甚至還有卸載，每一個(gè)環(huán)節(jié)對(duì)用戶而言都很敏感。也正因?yàn)檫@樣，作為廠商，我們還是有很多機(jī)會(huì)讓用戶喜歡你的產(chǎn)品。我們可以在每一個(gè)細(xì)節(jié)上下功夫，找到它的極限平衡點(diǎn)。

最優(yōu)的平衡點(diǎn)

在 3.0 版本的產(chǎn)品中，我們?cè)?UI 上下了很大的功夫。我針對(duì)我們打磨的一些細(xì)節(jié)，分享給大家。

安裝和卸載

用戶安裝或下載你的軟件，它的過(guò)程可能就只有十幾秒鐘，而且大部分用戶只會(huì)看到一次。但是，作為這十幾秒鐘的設(shè)計(jì)，卻是用戶對(duì)你產(chǎn)品最關(guān)鍵的第一印象和最后一次對(duì)你“回頭”的可能。

在UC瀏覽器電腦版3.0的設(shè)計(jì)過(guò)程中，為了很好的滿足用戶的這兩種體驗(yàn)。我們把枯燥的安裝和卸載變成了流暢的動(dòng)態(tài)過(guò)程，使用戶的整個(gè)體驗(yàn)很舒適。

當(dāng)你安裝新版 UC 瀏覽器電腦版時(shí)，你會(huì)發(fā)現(xiàn)翻轉(zhuǎn)的卡片、繽紛的氣泡……一鍵安裝的操作，整個(gè)安裝過(guò)程都很便捷很酷。不僅安裝過(guò)程，卸載體驗(yàn)也很有意思。對(duì)于產(chǎn)品經(jīng)理而言，丟失掉一個(gè)用戶，都是巨大的損失。所以，我們很希望從用戶卸載的過(guò)程中，得到真實(shí)的反饋，幫助我們改進(jìn)。于是，我們希望把我們的這份情感融入到產(chǎn)品里面去，傳達(dá)給用戶。

為此，我們?cè)谠O(shè)計(jì)卸載的時(shí)候，將卸載頁(yè)面設(shè)計(jì)成了一個(gè)略為夸張的翻頁(yè)漫畫，并且配上簡(jiǎn)單的動(dòng)態(tài)效果，甚至我們?nèi)サ袅诵遁d進(jìn)度條，改為了一個(gè)漸漸遠(yuǎn)去的卡通畫面，我們希望通過(guò)這種方式可以讓我們的產(chǎn)品更有溫度，讓用戶能夠體會(huì)到我們的情感。

誠(chéng)然，我們之所以在安裝這塊做這么多，無(wú)非是為了讓用戶好用的同時(shí)，感受到好看！

圓形卡片新標(biāo)簽

如果你用的 PC 瀏覽器產(chǎn)品比較多，你會(huì)發(fā)現(xiàn)，現(xiàn)在市面上 PC 瀏覽器新標(biāo)簽頁(yè)的設(shè)計(jì)基本都是采用方形宮格的設(shè)計(jì)。整個(gè)新標(biāo)簽頁(yè)，大部分位置都被宮格占據(jù)了，這樣就造成了用戶即使換上好看的壁紙，也會(huì)被宮格蓋住。雖然一定程度上這種設(shè)計(jì)會(huì)比較好用，但顯然不好看。

我們 UI 團(tuán)隊(duì)在發(fā)現(xiàn)這個(gè)矛盾點(diǎn)后，一段時(shí)間也很糾結(jié)。怎樣才能做到宮格和背景更好的融合？

后來(lái)，我們用了沒有棱角的圓形，且為了透出后面的壁紙，我們讓圓形標(biāo)簽透明了。還通過(guò)程序取壁紙的主色，然后將顏色付給每一個(gè)圓形瓦片。這樣，整體效果在美觀上就很好了。

但是，如何能更好用呢？

我們團(tuán)隊(duì)后來(lái)發(fā)現(xiàn)，可以讓每個(gè)圓形瓦片根據(jù)用戶的點(diǎn)擊次數(shù)而變換大小，點(diǎn)擊越多的網(wǎng)址，其圓形標(biāo)簽也會(huì)相應(yīng)的變大和移動(dòng)到更顯著的位置。且我們?cè)倥渖蠄A形卡片的微動(dòng)效果，原本單調(diào)的新標(biāo)簽頁(yè)也變得生動(dòng)。

透明和模糊

在新版中，我們新增了頭像菜單形式，將之前的文字菜單變?yōu)榱藞D形菜單，變得更為直觀。模糊和半透明的背景，讓整個(gè)菜單變得更輕、更細(xì)膩。

我們?cè)诤谏钠つw上面加入了透明模糊，在滾動(dòng)頁(yè)面的時(shí)候，可以看到瀏覽器的頂部，可以透出模糊的網(wǎng)頁(yè)，讓整個(gè)瀏覽器不再是操作區(qū)域和頁(yè)面顯示區(qū)域分開的兩部分，而是成為了一個(gè)整體。

細(xì)膩的動(dòng)態(tài)效果

除了以上這些，我們?cè)诤芏嗟胤郊尤肓烁鼮榧?xì)膩的動(dòng)態(tài)效果，比如下載模塊，當(dāng)你點(diǎn)擊下載的時(shí)候，會(huì)有一個(gè)松果，掉入到狀態(tài)欄，激起漣漪，一方面起到了視覺引導(dǎo)作用，告知用戶下載功能在界面中的位置，另一方面讓整個(gè)下載過(guò)程變得更有生趣。有點(diǎn)自豪的說(shuō)，這是我們?cè)O(shè)計(jì)的最為符合最優(yōu)平衡點(diǎn)的一個(gè)細(xì)節(jié)。

設(shè)計(jì)感想

UC 瀏覽器電腦版 3.0 對(duì)于UC的每一個(gè)設(shè)計(jì)師而言，都是一個(gè)開始。在這個(gè)版本的設(shè)計(jì)過(guò)程中，我們的想法很簡(jiǎn)單，就是想把我們的設(shè)計(jì)變得更有溫度，然后把這份溫度傳遞給每一個(gè)用戶。我們每一步都是在嘗試，每一次都是在摸索。我們不能保證每次的改進(jìn)都是該細(xì)節(jié)的極限平衡點(diǎn)，但我們會(huì)不停的尋找。

本文轉(zhuǎn)載自極客公園，作者李垚，UC瀏覽器電腦版UI負(fù)責(zé)人。轉(zhuǎn)載時(shí)略有修改與刪減。