融合的設(shè)計–QQ瀏覽器(android)設(shè)計分享

2012-5-24    藍(lán)藍(lán)設(shè)計的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(  bouu.cn )是一家專注而深入的設(shè)計機(jī)構(gòu) ,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、  cs界面設(shè)計 、  ipad界面設(shè)計  、  包裝設(shè)計 、  圖標(biāo)定制 、  用戶體驗 、交互設(shè)計、  網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源:http://wsd.tencent.com/2012/05/qqbrowser-integration-design.html

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中,          請點這里

 

 
每一次全新版本的設(shè)計都伴隨著挑戰(zhàn)與激情,它們化成對產(chǎn)品不斷精細(xì)打磨的動力。在經(jīng)過反復(fù)的推敲和錘煉后,孕育出了QQ瀏覽器的全新版本。這個版本優(yōu)化了交互結(jié)構(gòu),新增應(yīng)用+以及邊欄小工具。當(dāng)然,UI 的變化是一目了然的。早在去年年底,我們就投入到QQ瀏覽器的新版設(shè)計中?,F(xiàn)回過頭來看,整個的設(shè)計都貫穿了融的設(shè)計理念。

 

“融”的設(shè)計理念
融,有融入、融合之意。就如同光線、水珠、環(huán)境的包融。打破慣有的格局,追求一種更和諧平衡的關(guān)系。并嘗試摒棄工具式應(yīng)用帶給人的死氣,呆板的形象。融,同時也包含了簡潔,優(yōu)雅、流暢的特點。讓用戶獲得更好的沉浸式體驗。并確定以簡約、清新、開闊、沉浸式為主的設(shè)計關(guān)鍵詞。 

設(shè)計目標(biāo)的融合

這次新版本的視覺設(shè)計風(fēng)格主要從三個方面綜合考慮

增強(qiáng)品牌形象

自從 QQ 瀏覽器更換 logo 及 slogan 后,品牌的統(tǒng)一度得到更大的提升,發(fā)展方向也更加明確,這次新版本的設(shè)計需要在此基礎(chǔ)之上進(jìn)一步增強(qiáng) QQ 瀏覽器品牌形象。

把握設(shè)計趨勢

無論是 Windows Phone 7 那種極度平面化的設(shè)計,還是 Android4.0 明快的線型設(shè)計, 都反映出移動設(shè)計不斷的向簡潔,輕快方向行進(jìn)的趨勢。因此,我們的新版設(shè)計是需要符合這種設(shè)計趨勢的。

緊扣瀏覽體驗

瀏覽器是用戶獲取信息的一道重要窗口。其核心訴求還是方便快捷的為用戶提供各方面的內(nèi)容。打造內(nèi)容提供平臺,創(chuàng)造沉浸式閱讀體驗,是瀏覽器設(shè)計的重要任務(wù)。

 

設(shè)計表現(xiàn)的融合

色彩質(zhì)感

從 QQ 瀏覽器的新品牌顏色、云的概念以及瀏覽器閃屏,我們想到了藍(lán)天白云,天地交融,一覽眾山小的場景。這正是融的設(shè)計理念所想傳達(dá)出來的開闊豁達(dá)的感覺。因此,經(jīng)典藍(lán)白加上平滑漸變,扁平質(zhì)感,作為了 QQ 瀏覽器的首要選擇。

層次結(jié)構(gòu)

我們嘗試打破頭部區(qū)標(biāo)題欄與內(nèi)容區(qū)傳統(tǒng)有形的界限。而是采用有機(jī)自然的方式將兩者融和過渡,既保證了頭部區(qū)功能的有效表達(dá),又在視覺上有使兩者渾然一體。底部工具欄也采用相同的處理,和內(nèi)容區(qū)有平滑的連接。整個設(shè)計就在視覺上的增大了內(nèi)容區(qū),突出內(nèi)容,進(jìn)一步創(chuàng)造沉浸式的閱讀體驗。

由瀏覽器閃屏到起始頁的演變,保持了品牌的延伸,也承載了融的設(shè)計理念。

簡潔一致的設(shè)計

我們對其它頁面也進(jìn)行了層級結(jié)構(gòu)優(yōu)化。在不同的頁面創(chuàng)造統(tǒng)一的視覺體驗,簡化冗余信息的同時,將頁面以更輕盈,簡潔的方式呈現(xiàn)。

體驗功能的融合

一圖一世界,輕量的皮膚設(shè)置功能

在新版的設(shè)計中,我們加入了換膚功能,并采用的是最輕量級的換膚。結(jié)合融的設(shè)計理念,所有控件都注重“黑白灰”的設(shè)計,因此界面保持了很高的包容度。這樣,僅僅是簡單更換一張圖片,就可以使界面視覺效果有所不同。頁面元素高寬容度的設(shè)計既能與背景融為一體,又保持了內(nèi)容信息的可讀性。這種換膚方式提高了產(chǎn)品的差異化又滿足了用戶彰顯個性的需求,并且相比傳統(tǒng)的換膚方式,可以有效降低設(shè)計出圖數(shù)量。

 
 
 
 

結(jié)合場景的設(shè)計

當(dāng)用戶進(jìn)入到夜間模式時,整個背景將變換成夜晚的星空,將情景融入頁面的設(shè)計,營造整體的氛圍。讓用戶體會到產(chǎn)品的情感和人性化的關(guān)懷,并創(chuàng)造沉浸式的使用體驗。(后續(xù)版本實現(xiàn))

隱藏著的低調(diào),側(cè)邊欄的設(shè)計

瀏覽器的功能越來越強(qiáng)大,如何有效的安排信息的排布,區(qū)分主次功能層級,將很大程度影響產(chǎn)品的使用體驗。新版本中,我們從新對菜單項進(jìn)行了功能歸類,由以前的三屏簡化成一屏。當(dāng)用戶呼出菜單時,可以一目了然那些主要且常用的功能。將增強(qiáng)閱讀型的功能整合進(jìn)入側(cè)邊小工具欄,用戶可隨時通過右上角的按鈕或者頁面外滑動呼出。這樣既保持了菜單項的簡潔,又對功能信息項做了區(qū)分。

 

 

細(xì)節(jié)的融合

圖標(biāo)的重繪

之前版本的圖標(biāo)更多的采用面形的設(shè)計。加上它本身的質(zhì)感,多多少少還是會顯得厚重。在新版中,我們將所有圖標(biāo)都采用線形重新繪制,中性配色,保持高包容度。更好的融合新版簡約清新的觀感。

版本發(fā)布后,新的 UI 設(shè)計也獲得用戶的肯定和贊許。這只是我們向前邁進(jìn)的又一步,整套設(shè)計還有一些新的特性和變化會陸續(xù)在后面的版本中實現(xiàn)^_^。當(dāng)然,目前版本還存在著許多的不足。真心期待大家的反饋和建議。你們的支持,是我們前進(jìn)的最大動力,讓我們一起把瀏覽器的體驗做得更好。





日歷

鏈接

個人資料

存檔