設(shè)計(jì)目標(biāo)的融合
這次新版本的視覺(jué)設(shè)計(jì)風(fēng)格主要從三個(gè)方面綜合考慮
增強(qiáng)品牌形象
自從 QQ 瀏覽器更換 logo 及 slogan 后,品牌的統(tǒng)一度得到更大的提升，發(fā)展方向也更加明確，這次新版本的設(shè)計(jì)需要在此基礎(chǔ)之上進(jìn)一步增強(qiáng) QQ 瀏覽器品牌形象。
把握設(shè)計(jì)趨勢(shì)
無(wú)論是 Windows Phone 7 那種極度平面化的設(shè)計(jì)，還是 Android4.0 明快的線(xiàn)型設(shè)計(jì), 都反映出移動(dòng)設(shè)計(jì)不斷的向簡(jiǎn)潔，輕快方向行進(jìn)的趨勢(shì)。因此，我們的新版設(shè)計(jì)是需要符合這種設(shè)計(jì)趨勢(shì)的。
緊扣瀏覽體驗(yàn)
瀏覽器是用戶(hù)獲取信息的一道重要窗口。其核心訴求還是方便快捷的為用戶(hù)提供各方面的內(nèi)容。打造內(nèi)容提供平臺(tái)，創(chuàng)造沉浸式閱讀體驗(yàn)，是瀏覽器設(shè)計(jì)的重要任務(wù)。
設(shè)計(jì)表現(xiàn)的融合
色彩質(zhì)感
從 QQ 瀏覽器的新品牌顏色、云的概念以及瀏覽器閃屏，我們想到了藍(lán)天白云，天地交融，一覽眾山小的場(chǎng)景。這正是融的設(shè)計(jì)理念所想傳達(dá)出來(lái)的開(kāi)闊豁達(dá)的感覺(jué)。因此，經(jīng)典藍(lán)白加上平滑漸變，扁平質(zhì)感，作為了 QQ 瀏覽器的首要選擇。
層次結(jié)構(gòu)
我們嘗試打破頭部區(qū)標(biāo)題欄與內(nèi)容區(qū)傳統(tǒng)有形的界限。而是采用有機(jī)自然的方式將兩者融和過(guò)渡，既保證了頭部區(qū)功能的有效表達(dá)，又在視覺(jué)上有使兩者渾然一體。底部工具欄也采用相同的處理，和內(nèi)容區(qū)有平滑的連接。整個(gè)設(shè)計(jì)就在視覺(jué)上的增大了內(nèi)容區(qū)，突出內(nèi)容，進(jìn)一步創(chuàng)造沉浸式的閱讀體驗(yàn)。
由瀏覽器閃屏到起始頁(yè)的演變，保持了品牌的延伸，也承載了融的設(shè)計(jì)理念。
簡(jiǎn)潔一致的設(shè)計(jì)
我們對(duì)其它頁(yè)面也進(jìn)行了層級(jí)結(jié)構(gòu)優(yōu)化。在不同的頁(yè)面創(chuàng)造統(tǒng)一的視覺(jué)體驗(yàn)，簡(jiǎn)化冗余信息的同時(shí)，將頁(yè)面以更輕盈，簡(jiǎn)潔的方式呈現(xiàn)。
體驗(yàn)功能的融合
一圖一世界，輕量的皮膚設(shè)置功能
在新版的設(shè)計(jì)中，我們加入了換膚功能，并采用的是最輕量級(jí)的換膚。結(jié)合融的設(shè)計(jì)理念，所有控件都注重“黑白灰”的設(shè)計(jì)，因此界面保持了很高的包容度。這樣，僅僅是簡(jiǎn)單更換一張圖片，就可以使界面視覺(jué)效果有所不同。頁(yè)面元素高寬容度的設(shè)計(jì)既能與背景融為一體，又保持了內(nèi)容信息的可讀性。這種換膚方式提高了產(chǎn)品的差異化又滿(mǎn)足了用戶(hù)彰顯個(gè)性的需求，并且相比傳統(tǒng)的換膚方式，可以有效降低設(shè)計(jì)出圖數(shù)量。
結(jié)合場(chǎng)景的設(shè)計(jì)
當(dāng)用戶(hù)進(jìn)入到夜間模式時(shí)，整個(gè)背景將變換成夜晚的星空，將情景融入頁(yè)面的設(shè)計(jì)，營(yíng)造整體的氛圍。讓用戶(hù)體會(huì)到產(chǎn)品的情感和人性化的關(guān)懷，并創(chuàng)造沉浸式的使用體驗(yàn)。（后續(xù)版本實(shí)現(xiàn)）
隱藏著的低調(diào)，側(cè)邊欄的設(shè)計(jì)
瀏覽器的功能越來(lái)越強(qiáng)大，如何有效的安排信息的排布，區(qū)分主次功能層級(jí)，將很大程度影響產(chǎn)品的使用體驗(yàn)。新版本中，我們從新對(duì)菜單項(xiàng)進(jìn)行了功能歸類(lèi)，由以前的三屏簡(jiǎn)化成一屏。當(dāng)用戶(hù)呼出菜單時(shí)，可以一目了然那些主要且常用的功能。將增強(qiáng)閱讀型的功能整合進(jìn)入側(cè)邊小工具欄，用戶(hù)可隨時(shí)通過(guò)右上角的按鈕或者頁(yè)面外滑動(dòng)呼出。這樣既保持了菜單項(xiàng)的簡(jiǎn)潔，又對(duì)功能信息項(xiàng)做了區(qū)分。
細(xì)節(jié)的融合
圖標(biāo)的重繪
之前版本的圖標(biāo)更多的采用面形的設(shè)計(jì)。加上它本身的質(zhì)感，多多少少還是會(huì)顯得厚重。在新版中，我們將所有圖標(biāo)都采用線(xiàn)形重新繪制，中性配色，保持高包容度。更好的融合新版簡(jiǎn)約清新的觀(guān)感。
版本發(fā)布后，新的 UI 設(shè)計(jì)也獲得用戶(hù)的肯定和贊許。這只是我們向前邁進(jìn)的又一步，整套設(shè)計(jì)還有一些新的特性和變化會(huì)陸續(xù)在后面的版本中實(shí)現(xiàn)^_^。當(dāng)然，目前版本還存在著許多的不足。真心期待大家的反饋和建議。你們的支持，是我們前進(jìn)的最大動(dòng)力，讓我們一起把瀏覽器的體驗(yàn)做得更好。