UC瀏覽器8.3 (for iPhone)設計理念.“無”爲而設

原文: http://red.uc.cn/?p=823 

引子

2012伊始,作爲開春之作,iPhone版的UC瀏覽器8.3帶來了全新的視覺設計;這個版本體現的是我們對UC瀏覽器視覺的全新理解,也承載着我們對今後視覺風格的探索。

iPhone平臺的UC瀏覽器從7.x系列開始,GUI風格都是以藍色爲主調。藍色,一直給人科技、沉穩、信賴的感覺。

除了藍色,瀏覽器還能嘗試怎樣的配色及風格設計呢?

縱觀2011年以來的GUI設計趨勢,輕量化、平面化的風格逐漸成爲大家探索的主流。

結合UC瀏覽器8.3版本的首頁改版,經過設計師們的屢次探討研究,我們決定在此版本進行新的UI風格探索,力求在設計上給用戶帶來全新的視覺體驗感受。

最終,我們定下了設計主題:“無”爲而設!

追求的是簡單、優雅的質樸之美!

 

設計背景

回顧iPhone平臺的歷史版本,可以看到UC瀏覽器從擁有較爲成熟的設計開始,藍色就貫穿着整個產品的視覺風格主線。

縱觀國內外各種軟件,藍色一直流行在UI設計中。確實,這通常是一種能表現出清新、明快,且不容易引起用戶的反感的顏色。

然而本次我們卻要跳出這個顏色的溫房,嘗試一種新的設計風格。

 

設計思想:“無”爲而設

關鍵字:簡單、優雅

首先,迴歸產品的本質,瀏覽器始終是一個承載着頁面信息展示的平臺。更多情況下,我們認爲瀏覽器界面本身應該作爲配角,用戶所要看到的頁面信息纔是視覺上的要點。而UC瀏覽器又是專業針對手持設備進行開發,那麼我們的界面設計所要面對的一個基本要求和挑戰:那就是在有限的顯示範圍內最大限度的展現網頁信息元素。

從對產品的本質思考中,我們能得到2個重要的設計要點:無干擾;更大的視野。因此,我們開始探索一種相對無感知(或者說感知較弱)的顏色,目的是希望其能在衆多的色彩中儘量隱去自身,使得在用戶瀏覽網頁信息時受到的干擾減到最小。

於是,我們引入””這一非常具有禪意的設計理念,它要體現的正是無干擾,低調,沉穩。

顏色風格:經典的黑白灰搭配,畫“藍”點睛;追求簡單、優雅的設計風格

8.3版本的顏色風格以經典的黑白灰爲主搭配。爲了給用戶更舒適的界面,避免在長期使用過程中因單純的灰黑感到沉悶,也爲了減少界面由於大量白色而引起的刺眼的感受,我們在灰黑色中摻雜了少量深藍色 ,並在純白色中加入了少量的黑色,最終以這2個合併後的元素作爲主色調,並以少量的經典藍色爲“點睛”色,在搭配上點亮整個界面設計。

 

最後,我們確定了整體設計以經典的黑白灰爲主色調,亮藍色作爲界面的指示顏色搭配的風格,追求的是簡單、優雅的設計。

 

啓動畫面:“無”爲而設之初印象

對比上一個版本,8.3版本的啓動畫面在整體上去除掉了多餘的元素,重點突出主體——可愛的吉祥物以及清晰的版本號

首頁元素與佈局——“少即是多”(less is more),追求簡單、優雅的視覺效果以及自然流暢的觸控交互體驗

1)8.2版本的首屏3個tab的功能模塊重組,在8.3版本中改爲雙屏展示,加之整合了網址導航三行摺疊欄使之變成一個主入口;如此以來8.3版本首頁的整體設計元素得以精簡,在佈局上也更爲清晰明確

 

2)秉承”少即是多”的理念,首頁的“我的導航”設計迴歸九宮格的方式,將來原本用摺疊欄展現的推薦網址隱藏在一個下拉框入口中,整體留給用戶的是更廣的視野以及帶來更流暢的觸控交互體驗。

 

工具欄:輕打擾,還給用戶一個純粹的瀏覽體驗環境

灰白色的工具欄,設計目的有兩點:

A.灰白色一種相對無感知的顏色,能在衆多的色彩中隱去自身,在瀏覽網頁時對頁面有最小的干擾;運用在工具欄中可達到突出瀏覽器的頁面內容爲主體的目的,用戶的視覺焦點不會輕易被有顏色的工具欄所吸引

B.灰白色屬於淺色系,對比8.2版本的藍色工具欄,8.3版本的瀏覽頁面整體在視覺和心理方面都更容易給到用戶“擁有更大視野”的感受

 

細節設計

1)單色圖標——迴歸質樸的本色

另外在細節上,8.3版本界面上的圖標再一次做了改動,主菜單的圖標由彩色又回到了質樸的單色.

 

2)彩色圖標——形象精緻,易於識別

而在下載/文件管理的圖標中,爲了更好地區分不同文件類型,我們設計出一套有較高識別性的彩色圖標.

3)統一的Tab指示樣式設計

對於tab的展現方式,8.3統一爲使用亮藍色的長條作爲當前tab的指示

 

結語:What is NEXT……?

UC瀏覽器8.3(for iPhone)推出已有一段時間,期間不少用戶紛紛表達了喜愛之情,當然也收到一些大家熱心提出的意見和建議。

8.3版本的GUI風格嘗試只是2012年的一個開始,後續版本我們會在8.3的基礎上整合更多產品功能,補全現有的不足,優化細節體驗,打造精品的手機瀏覽器。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章