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

http://wsd.tencent.com/2011/10/qb-android-design.html

 

經(jīng)過幾個月的時間和大家的努力，手機QQ瀏覽器（android版）從 2.0 陸續(xù)更新到的 2.6。在經(jīng)歷了設(shè)計的千回百轉(zhuǎn)和架構(gòu)的不斷嘗試后，終于有了個新面貌，使用體驗也比之前版本有了較大提升。不過，這也僅僅是萬里長征第一步，這里先和大家分享下這第一步背后的設(shè)計心得。

國內(nèi)局勢

 

我們可以先來了解國內(nèi)局勢。目前，瀏覽器市場可謂戰(zhàn)火不斷，狼煙四起。姑且不說PC端各大瀏覽器大牛廠商角力數(shù)十年。單看手機端，特別是android平臺，似乎早已成為兵家必爭之地。Opera，起兵早，國際聲譽高，想方設(shè)法吞噬國內(nèi)市場。UC,靠多年的積累，早已成為一方霸主。海豚，后起之秀，也在不斷招兵買馬。還有迷人，天天，go，百度等各路勢力，以及android默認瀏覽器和正在發(fā)力的firefox。而手機QQ瀏覽器就夾在其中，真是前有虎，后有狼的。想要保住現(xiàn)有的地盤，并不斷壯大，不下點苦功夫，不來點磨砥刻厲的專業(yè)精神是不行的。

追本溯源，產(chǎn)品定義

這是一款怎樣的瀏覽器？

它會給用戶帶來什么樣的感受？

產(chǎn)品想給人一種怎樣的印象？

如何延續(xù)品牌的優(yōu)良基因？

….

這些最根本的問題擺在我們面前，通過對瀏覽器本身的特質(zhì)探求，我們認為瀏覽器應該以的性能,便捷的操作,來達到舒適的閱讀體驗。
讓用戶安靜愉悅的享受內(nèi)容，成了手機瀏覽器設(shè)計的重心。

關(guān)鍵詞提取

根據(jù)對產(chǎn)品的定義，我們找到了設(shè)計方向，并提取出了幾個關(guān)鍵詞：清新、舒適、簡潔、細膩、平靜

那如何從視覺上來表達這些個關(guān)鍵詞呢？

讓我們回到現(xiàn)實生活中，搜集一些與此關(guān)鍵詞相關(guān)的圖片，feel 一下這樣的感覺。

色彩定義

從這些圖片中，我們可以方便的找出符合關(guān)鍵詞氣質(zhì)的色彩。

藍色，易讓人聯(lián)想到天空的遼闊與海洋的深邃，讓人有寧靜，清澈，理智，科技的色彩印象。同時，它又是公司其它業(yè)務的基礎(chǔ)色系，從而在色彩上延續(xù)了品牌基因。因此，藍色很自然的作為主體色系，沉靜穩(wěn)重的深藍作為菜單系。藍色在綠色的映襯下，讓人感受到清新淡雅，明亮，干凈。同時，加入橘黃色點綴，使其顯得明快和活躍。

色彩像音樂一樣，是一種感覺。音樂需要靠音階來保持秩序，而形成一個體系。同樣的，色彩也需要靠三屬性來維持界面的層次與秩序。

質(zhì)感表達

質(zhì)感以扁平輕量為原則，一是比較符合UI設(shè)計的大體趨勢，二是對于以呈現(xiàn)內(nèi)容為主的界面來說會更加友好，增加親切感。因此，運用柔和漸變，略透明，亞光質(zhì)感等方式來減少大的視覺跳躍并使層次結(jié)構(gòu)清晰。描邊,漸變,線條,陰影等,不用太寬大也能有效增強設(shè)計。

信息分類，層次結(jié)構(gòu)

清晰的信息結(jié)構(gòu)和功能布局，能夠增加產(chǎn)品的易用性，減少用戶的學習成本，提高產(chǎn)品的親和力。手機瀏覽器整體劃分為三個區(qū)域，最上輸入導航區(qū)，中間內(nèi)容區(qū)，下方菜單區(qū)。同時集中信息在內(nèi)容區(qū)展示，提高用戶操作效率，一鍵直達內(nèi)容。左右內(nèi)容自成體系，無縫連接處理，增強滑屏體驗。合適的灰度與色彩對比度，減少用戶的視覺疲勞，增加可讀性。

簡化設(shè)計

之前版本的頭部設(shè)計雖然美觀，但占去較多空間。手機方寸之地，都得充分利用。對于以信息和內(nèi)容為主的瀏覽器來說，減法設(shè)計是必須的，弱化非功能性的設(shè)計元素，同時增大內(nèi)容可用空間。結(jié)構(gòu)上首尾也有所呼應。

簡約是美 少即是多。

小細節(jié)完善內(nèi)容感官

少量紋理的運用，也可使界面更加細膩，不單調(diào)。

等待過程的設(shè)計

David Maister 的等待心理學告訴我們：無所適事的等待比有事可干的等待感覺要長。

因此，我們在網(wǎng)頁載入過程中加入功能宣導，每隔兩秒鐘變換一句，轉(zhuǎn)移用戶注意力，避免用戶感覺等待時間過長，增加產(chǎn)品的沉浸式體驗。

傳統(tǒng)控件的新設(shè)計

Android廠商各家定制系統(tǒng)紛繁復雜，系統(tǒng)控件也是五花八門。我們從新設(shè)計了彈出菜單、對話框等系統(tǒng)控件，避免不同的定制系統(tǒng)出現(xiàn)較大感官差異，全方位統(tǒng)一產(chǎn)品視覺體驗。

圖標

簡約圖標的運用也是UI設(shè)計的一個發(fā)展趨勢。在準確表意的同時，排除不必要的多余元素，保持輕量的漸變，明確的描邊，能使圖標更加精致，也符合整體界面的風格。同時，讓用戶更加快速直觀的理解選項的含義。

經(jīng)過快速的原型制作，不斷的嘗試與PK，匯聚成了現(xiàn)在的QQ瀏覽器，沒有最好，只有更好。只要能用的交互視覺成本來幫助用戶解決問題，就是好設(shè)計。

遇到的問題

紛繁復雜的終端適配

Andriod系統(tǒng)目前已經(jīng)成為全球使用人數(shù)最多的智能手機系統(tǒng)，在用戶普及量大的同時，也存在一些十分明顯的問題，如廠家多，各有各的規(guī)范。機型多，手機顯示效果差異大。分辨率多，終端適配困難等。

為了簡化設(shè)計并且兼容更多的手機屏幕，最大限度的創(chuàng)造良好的視覺體驗，就需要為主流的中精度屏幕 (HVGA) 和高精度屏幕（WVGA） 分別提供兩套圖，并需要充分利用可拉伸圖片的特性，以保證在那些奇怪分辨率下的顯示效果。

令人抓狂的圖片抖動

另外一個容易遇到的問題，是色彩顯示效果，圖片出現(xiàn)明顯色階。

由于手機硬件的不同和系統(tǒng)本身的限制，程序貼圖后，含有漸變的圖在不同手機上，可能會出現(xiàn)不同的顯示效果。也許在google N1 上正常顯示，在moto里程碑上就出現(xiàn)明顯色階。這時，需要調(diào)整設(shè)計圖片，盡量避免過大或過細的漸變，在漸變圖形里加入斜紋理，也會得到較大的改善。

后記

說到這里，整個的設(shè)計過程也幾近結(jié)束，然而我們對產(chǎn)品的持續(xù)優(yōu)化和改進遠不會結(jié)束。感謝整個團隊的給力支持和其間所付出的辛勤勞動。版本發(fā)布后，得到了許多用戶的肯定和贊賞，雖然目前版本還存在諸多的不足，但我相信我們都會逐步提高，因為我們對體驗有的追求。革命尚未獲成功，同志仍舊需努力，萬里長征接著走，好戲還會在后頭。^_^