QQ 瀏覽器(android) 設計之路

來源:互聯網
上載者:User

  經過幾個月的時間和大家的努力,手機QQ瀏覽器(android版)從 2.0 陸續更新到的 2.6。在經曆了設計的千迴百轉和架構的不斷嘗試後,終於有了個新面貌,使用體驗也比之前版本有了較大提升。不過,這也僅僅是萬裡長征第一步,這裡先和大家分享下這第一步背後的設計心得。

  國內局勢

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

  追本溯源,產品定義

  這是一款怎樣的瀏覽器?

  它會給使用者帶來什麼樣的感受?

  產品想給人一種怎樣的印象?

  如何延續品牌的優良基因?

  …

  這些最根本的問題擺在我們面前,通過對瀏覽器本身的特質探求,我們認為瀏覽器應該以高效的效能,便捷的操作,來達到舒適的閱讀體驗。

  讓使用者安靜愉悅的享受內容,成了手機瀏覽器設計的重心。

  關鍵詞提取

  根據對產品的定義,我們找到了設計方向,並提取出了幾個關鍵詞:清新、舒適、簡潔、細膩、平靜

  那如何從視覺上來表達這些個關鍵詞呢?

  讓我們回到現實生活中,搜集一些與此關鍵詞相關的圖片,feel 一下這樣的感覺。

  色彩定義

  從這些圖片中,我們可以方便的找出符合關鍵詞氣質的色彩。

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

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

  質感表達

  質感以扁平輕量為原則,一是比較符合UI設計的大體趨勢,二是對於以呈現內容為主的介面來說會更加友好,增加親切感。因此,運用柔和漸層,略透明,亞光質感等方式來減少大的視覺跳躍並使階層清晰。描邊,漸層,線條,陰影等,不用太寬大也能有效增強設計。

  資訊分類,階層

  清晰的資訊結構和功能布局,能夠增加產品的易用性,減少使用者的學習成本,提高產品的親和力。手機瀏覽器整體劃分為三個地區,最上輸入導航區,中間內容區,下方菜單區。同時集中資訊在內容區展示,提高使用者操作效率,一鍵直達內容。左右內容自成體系,無縫串連處理,增強滑屏體驗。合適的灰階與色彩對比,減少使用者的視覺疲勞,增加可讀性。

  簡化設計

  之前版本的頭部設計雖然美觀,但佔去較多空間。手機方寸之地,都得充分利用。對於以資訊和內容為主的瀏覽器來說,減法設計是必須的,弱化非功能性的設計項目,同時增大內容可用空間。結構上首尾也有所呼應。

  簡約是美 少即是多。

  小細節完善內容感官

  少量紋理的運用,也可使介面更加細膩,不單調。

  等待過程的設計

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

  因此,我們在網頁載入過程中加入功能宣導,每隔兩秒鐘變換一句,轉移使用者注意力,避免使用者感覺等待時間過長,增加產品的沈浸式體驗。

  傳統控制項的新設計

  Android廠商各家定製系統紛繁複雜,系統控制項也是五花八門。我們從新設計了快顯功能表、對話方塊等系統控制項,避免不同的定製系統出現較大感官差異,全方位統一產品視覺體驗。

  表徵圖

  簡約表徵圖的運用也是UI設計的一個發展趨勢。在準確表意的同時,排除不必要的多餘元素,保持輕量的漸層,明確的描邊,能使表徵圖更加精緻,也符合整體介面的風格。同時,讓使用者更加快速直觀的理解選項的含義。

  經過快速的原型製作,不斷的嘗試與PK,匯聚成了現在的QQ瀏覽器,沒有最好,只有更好。只要能用最低的互動視覺成本來協助使用者解決問題,就是好設計。

  遇到的問題

  紛繁複雜的終端適配

  Andriod系統目前已經成為全球使用人數最多的智能手機系統,在使用者普及量大的同時,也存在一些十分明顯的問題,如廠家多,各有各的規範。機型多,手機顯示效果差異大。解析度多,終端適配困難等。

  為了簡化設計並且相容更多的手機螢幕,最大限度的創造良好的視覺體驗,就需要為主流的中精度螢幕 (HVGA) 和高精度螢幕(WVGA) 分別提供兩套圖,並需要充分利用可展開圖片的特性,以保證在那些奇怪解析度下的顯示效果。

  令人抓狂的圖片抖動

  另外一個容易遇到的問題,是色彩顯示效果,圖片出現明顯色階。

  由於手機硬體的不同和系統本身的限制,程式貼圖後,含有漸層的圖在不同手機上,可能會出現不同的顯示效果。也許在google N1 上正常顯示,在moto裡程碑上就出現明顯色階。這時,需要調整設計圖片,盡量避免過大或過細的漸層,在漸層圖形裡加入斜紋理,也會得到較大的改善。

  後記

  說到這裡,整個的設計過程也幾近結束,然而我們對產品的持續最佳化和改進遠不會結束。感謝整個團隊的給力支援和其間所付出的辛勤勞動。版本發布後,得到了許多使用者的肯定和讚賞,雖然目前版本還存在諸多的不足,但我相信我們都會逐步提高,因為我們對體驗有極致的追求。革命尚未獲成功,同志仍舊需努力,萬裡長征接著走,好戲還會在後頭。^_^

  (本文出自Tencent WSD Blog,轉載時請註明出處)

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。