技術(shù)資訊
QQ 瀏覽器(android) 設(shè)計(jì)之路
2011-11-03 12:00:29
經(jīng)過幾個(gè)月的時(shí)間和大家的努力,手機(jī)QQ瀏覽器(android版)從 2.0 陸續(xù)更新到的 2.6。在經(jīng)歷了設(shè)計(jì)的千回百轉(zhuǎn)和架構(gòu)的不斷嘗試后,終于有了個(gè)新面貌,使用體驗(yàn)也比之前版本有了較大提升。不過,這也僅僅是萬里長(zhǎng)征第一步,這里先和大家分享下這第一步背后的設(shè)計(jì)心得。
國(guó)內(nèi)局勢(shì)
我們可以先來了解國(guó)內(nèi)局勢(shì)。目前,瀏覽器市場(chǎng)可謂戰(zhàn)火不斷,狼煙四起。姑且不說PC端各大瀏覽器大牛廠商角力數(shù)十年。單看手機(jī)端,特別是android平臺(tái),似乎早已成為兵家必爭(zhēng)之地。Opera,起兵早,國(guó)際聲譽(yù)高,想方設(shè)法吞噬國(guó)內(nèi)市場(chǎng)。UC,靠多年的積累,早已成為一方霸主。海豚,后起之秀,也在不斷招兵買馬。還有迷人,天天,go,百度等各路勢(shì)力,以及android默認(rèn)瀏覽器和正在發(fā)力的firefox。而手機(jī)QQ瀏覽器就夾在其中,真是前有虎,后有狼的。想要保住現(xiàn)有的地盤,并不斷壯大,不下點(diǎn)苦功夫,不來點(diǎn)磨砥刻厲的專業(yè)精神是不行的。
追本溯源,產(chǎn)品定義
這是一款怎樣的瀏覽器?
它會(huì)給用戶帶來什么樣的感受?
產(chǎn)品想給人一種怎樣的印象?
如何延續(xù)品牌的優(yōu)良基因?
….
這些最根本的問題擺在我們面前,通過對(duì)瀏覽器本身的特質(zhì)探求,我們認(rèn)為瀏覽器應(yīng)該以高效的性能,便捷的操作,來達(dá)到舒適的閱讀體驗(yàn)。
讓用戶安靜愉悅的享受內(nèi)容,成了手機(jī)瀏覽器設(shè)計(jì)的重心。
關(guān)鍵詞提取
根據(jù)對(duì)產(chǎn)品的定義,我們找到了設(shè)計(jì)方向,并提取出了幾個(gè)關(guān)鍵詞:清新、舒適、簡(jiǎn)潔、細(xì)膩、平靜
那如何從視覺上來表達(dá)這些個(gè)關(guān)鍵詞呢?
讓我們回到現(xiàn)實(shí)生活中,搜集一些與此關(guān)鍵詞相關(guān)的圖片,feel 一下這樣的感覺。
色彩定義
從這些圖片中,我們可以方便的找出符合關(guān)鍵詞氣質(zhì)的色彩。
藍(lán)色,易讓人聯(lián)想到天空的遼闊與海洋的深邃,讓人有寧?kù)o,清澈,理智,科技的色彩印象。同時(shí),它又是公司其它業(yè)務(wù)的基礎(chǔ)色系,從而在色彩上延續(xù)了品牌基因。因此,藍(lán)色很自然的作為主體色系,沉靜穩(wěn)重的深藍(lán)作為菜單系。藍(lán)色在綠色的映襯下,讓人感受到清新淡雅,明亮,干凈。同時(shí),加入橘黃色點(diǎn)綴,使其顯得明快和活躍。
色彩像音樂一樣,是一種感覺。音樂需要靠音階來保持秩序,而形成一個(gè)體系。同樣的,色彩也需要靠三屬性來維持界面的層次與秩序。
質(zhì)感表達(dá)
質(zhì)感以扁平輕量為原則,一是比較符合UI設(shè)計(jì)的大體趨勢(shì),二是對(duì)于以呈現(xiàn)內(nèi)容為主的界面來說會(huì)更加友好,增加親切感。因此,運(yùn)用柔和漸變,略透明,亞光質(zhì)感等方式來減少大的視覺跳躍并使層次結(jié)構(gòu)清晰。描邊,漸變,線條,陰影等,不用太寬大也能有效增強(qiáng)設(shè)計(jì)。
信息分類,層次結(jié)構(gòu)
清晰的信息結(jié)構(gòu)和功能布局,能夠增加產(chǎn)品的易用性,減少用戶的學(xué)習(xí)成本,提高產(chǎn)品的親和力。手機(jī)瀏覽器整體劃分為三個(gè)區(qū)域,最上輸入導(dǎo)航區(qū),中間內(nèi)容區(qū),下方菜單區(qū)。同時(shí)集中信息在內(nèi)容區(qū)展示,提高用戶操作效率,一鍵直達(dá)內(nèi)容。左右內(nèi)容自成體系,無縫連接處理,增強(qiáng)滑屏體驗(yàn)。合適的灰度與色彩對(duì)比度,減少用戶的視覺疲勞,增加可讀性。
簡(jiǎn)化設(shè)計(jì)
之前版本的頭部設(shè)計(jì)雖然美觀,但占去較多空間。手機(jī)方寸之地,都得充分利用。對(duì)于以信息和內(nèi)容為主的瀏覽器來說,減法設(shè)計(jì)是必須的,弱化非功能性的設(shè)計(jì)元素,同時(shí)增大內(nèi)容可用空間。結(jié)構(gòu)上首尾也有所呼應(yīng)。
簡(jiǎn)約是美 少即是多。
小細(xì)節(jié)完善內(nèi)容感官
少量紋理的運(yùn)用,也可使界面更加細(xì)膩,不單調(diào)。
等待過程的設(shè)計(jì)
David Maister 的等待心理學(xué)告訴我們:無所適事的等待比有事可干的等待感覺要長(zhǎng)。
因此,我們?cè)诰W(wǎng)頁(yè)載入過程中加入功能宣導(dǎo),每隔兩秒鐘變換一句,轉(zhuǎn)移用戶注意力,避免用戶感覺等待時(shí)間過長(zhǎng),增加產(chǎn)品的沉浸式體驗(yàn)。
傳統(tǒng)控件的新設(shè)計(jì)
Android廠商各家定制系統(tǒng)紛繁復(fù)雜,系統(tǒng)控件也是五花八門。我們從新設(shè)計(jì)了彈出菜單、對(duì)話框等系統(tǒng)控件,避免不同的定制系統(tǒng)出現(xiàn)較大感官差異,全方位統(tǒng)一產(chǎn)品視覺體驗(yàn)。
圖標(biāo)
簡(jiǎn)約圖標(biāo)的運(yùn)用也是UI設(shè)計(jì)的一個(gè)發(fā)展趨勢(shì)。在準(zhǔn)確表意的同時(shí),排除不必要的多余元素,保持輕量的漸變,明確的描邊,能使圖標(biāo)更加精致,也符合整體界面的風(fēng)格。同時(shí),讓用戶更加快速直觀的理解選項(xiàng)的含義。
經(jīng)過快速的原型制作,不斷的嘗試與PK,匯聚成了現(xiàn)在的QQ瀏覽器,沒有最好,只有更好。只要能用最低的交互視覺成本來幫助用戶解決問題,就是好設(shè)計(jì)。
遇到的問題
紛繁復(fù)雜的終端適配
Andriod系統(tǒng)目前已經(jīng)成為全球使用人數(shù)最多的智能手機(jī)系統(tǒng),在用戶普及量大的同時(shí),也存在一些十分明顯的問題,如廠家多,各有各的規(guī)范。機(jī)型多,手機(jī)顯示效果差異大。分辨率多,終端適配困難等。
為了簡(jiǎn)化設(shè)計(jì)并且兼容更多的手機(jī)屏幕,最大限度的創(chuàng)造良好的視覺體驗(yàn),就需要為主流的中精度屏幕 (HVGA) 和高精度屏幕(WVGA) 分別提供兩套圖,并需要充分利用可拉伸圖片的特性,以保證在那些奇怪分辨率下的顯示效果。
令人抓狂的圖片抖動(dòng)
另外一個(gè)容易遇到的問題,是色彩顯示效果,圖片出現(xiàn)明顯色階。
由于手機(jī)硬件的不同和系統(tǒng)本身的限制,程序貼圖后,含有漸變的圖在不同手機(jī)上,可能會(huì)出現(xiàn)不同的顯示效果。也許在google N1 上正常顯示,在moto里程碑上就出現(xiàn)明顯色階。這時(shí),需要調(diào)整設(shè)計(jì)圖片,盡量避免過大或過細(xì)的漸變,在漸變圖形里加入斜紋理,也會(huì)得到較大的改善。
后記
說到這里,整個(gè)的設(shè)計(jì)過程也幾近結(jié)束,然而我們對(duì)產(chǎn)品的持續(xù)優(yōu)化和改進(jìn)遠(yuǎn)不會(huì)結(jié)束。感謝整個(gè)團(tuán)隊(duì)的給力支持和其間所付出的辛勤勞動(dòng)。版本發(fā)布后,得到了許多用戶的肯定和贊賞,雖然目前版本還存在諸多的不足,但我相信我們都會(huì)逐步提高,因?yàn)槲覀儗?duì)體驗(yàn)有極致的追求。革命尚未獲成功,同志仍舊需努力,萬里長(zhǎng)征接著走,好戲還會(huì)在后頭。^_^
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁(yè)面設(shè)計(jì)開發(fā)——移動(dòng)端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項(xiàng)目
- [2021-03-05 10:34:45] 移動(dòng)互聯(lián)時(shí)代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢(shì)?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計(jì)
- [2020-12-16 16:55:32] 建設(shè)一個(gè)常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2011-10-14 15:34:17] 如果想做好網(wǎng)站SEO優(yōu)化我們就應(yīng)該學(xué)會(huì)如何吸引蜘蛛
- [2009-04-16 22:23:00] 人際溝通與信息設(shè)計(jì)
- [2014-11-04 19:07:12] 幾點(diǎn)更新網(wǎng)站比較好
- [2014-12-31 15:12:14] 教你如何使用攝影來優(yōu)化網(wǎng)頁(yè)設(shè)計(jì)
- [2011-10-24 11:57:02] 為什么要將網(wǎng)站地圖鏈接放在robots.txt?
- [2015-03-16 09:08:12] 網(wǎng)站登陸頁(yè)面應(yīng)遵循的原則?
- [2012-02-19 21:04:27] 網(wǎng)頁(yè)設(shè)計(jì)細(xì)節(jié)的處理
- [2008-09-10 14:30:00] 動(dòng)態(tài)導(dǎo)航設(shè)計(jì)
- [2011-10-19 09:13:45] 網(wǎng)頁(yè)設(shè)計(jì)總是超越技術(shù),設(shè)計(jì)是一種藝術(shù)!
- [2011-10-09 23:40:11] 青島網(wǎng)站制作優(yōu)化的發(fā)展趨勢(shì)
- [2011-10-21 15:02:35] 青島網(wǎng)站設(shè)計(jì)成功要素
- [2014-10-27 10:13:14] 網(wǎng)站建設(shè)與設(shè)計(jì)應(yīng)掌握的16條原則性問題
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
色彩心理學(xué) 網(wǎng)站的速度 微官網(wǎng)帶來的好處 網(wǎng)站設(shè)計(jì) 青島網(wǎng)絡(luò)公司 新的元素 網(wǎng)站開發(fā) 網(wǎng)站策劃 網(wǎng)站動(dòng)畫 H5 青島高端網(wǎng)站建設(shè) 青島網(wǎng)站SEO 青島不錯(cuò)的英文網(wǎng)站建設(shè)公司 用戶界面 手機(jī)網(wǎng)站建設(shè) 響應(yīng)式設(shè)計(jì) 網(wǎng)站設(shè)計(jì)資訊 企業(yè)建站 網(wǎng)站設(shè)計(jì)趨勢(shì) 網(wǎng)站建設(shè)的步驟有哪些 php程序 平面設(shè)計(jì) 青島網(wǎng)站案例 互聯(lián)網(wǎng) 英文網(wǎng)站建設(shè) 青島黃島、紅島網(wǎng)站建設(shè)公司 微網(wǎng)站 微官網(wǎng) 網(wǎng)站制作 青島網(wǎng)站建設(shè)