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

來源： http://uxc.#/archives/965.html

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，            請點(diǎn)這里

 

項(xiàng)目背景

自2010年9月15日360極速瀏覽器發(fā)布以來，默認(rèn)界面一直沿用Chrome的外觀設(shè)計(jì)。隨著360極速瀏覽器的發(fā)展以及品牌化建立的需求，360UXC與產(chǎn)品團(tuán)隊(duì)進(jìn)行了深度的合作，以優(yōu)化用戶體驗(yàn)與提升視覺品質(zhì)為目標(biāo)參與到極速瀏覽器6.0版本的整體形象設(shè)計(jì)中，設(shè)計(jì)了全新的瀏覽器界面和官方網(wǎng)站，為360極速瀏覽器的品牌化建立打下了堅(jiān)實(shí)的基礎(chǔ)（chrome.# )。

設(shè)計(jì)準(zhǔn)備

我們?yōu)榻⑵放苹曈X設(shè)計(jì)進(jìn)行了多種有意義的嘗試，設(shè)計(jì)前期與產(chǎn)品部門進(jìn)行了深度的溝通交流，了解產(chǎn)品的人群定位，發(fā)展方向，用戶研究進(jìn)行了核心360極速瀏覽器用戶調(diào)研，為下一步設(shè)計(jì)做好充分的準(zhǔn)備。之后組織設(shè)計(jì)師，進(jìn)行Brainstorming,分析現(xiàn)在的設(shè)計(jì)流行趨勢，包括相關(guān)競品優(yōu)缺點(diǎn)分析等工作。

首先我們從整體的設(shè)計(jì)趨勢出發(fā)，研究總結(jié)Windows xp風(fēng)格過渡到Windows 8的Metro風(fēng)格變化過程，發(fā)現(xiàn)整體的界面質(zhì)感慢慢趨向于平面化，這為后期設(shè)計(jì)帶來了理論性依據(jù)。

從界面的側(cè)面圖來看，漸變厚度的過渡，讓視線更多的關(guān)注于信息內(nèi)容本身。所以在設(shè)計(jì)過程中，我們并不是一味的追求metro視覺效果，同時(shí)要考慮Windows xp和windows 7的用戶，所以從另一個(gè)角度思考這樣的設(shè)計(jì)是把關(guān)注點(diǎn)放到信息內(nèi)容本身，而非界面元素上。同時(shí)我們分析了相關(guān)行業(yè)競品，通過比較分析確定了極速瀏覽器的視覺風(fēng)格定位。

設(shè)計(jì)目標(biāo)

這次極速瀏覽器產(chǎn)品界面改版整體視覺風(fēng)格的關(guān)鍵詞可以定義為：輕量化，品牌化，快速。輕量化-體現(xiàn)極速瀏覽器更輕量，功能更精簡；品牌化-凸顯建立極速品牌化特征；快速-簡化信息呈現(xiàn)的層次，優(yōu)化操作與內(nèi)容區(qū)域。

極速瀏覽器界面設(shè)計(jì)

我們在視覺設(shè)計(jì)上進(jìn)行了很多嘗試，整體框架用極簡的線條拼接而成，去掉多余干擾的視覺表現(xiàn)元素。全新的設(shè)計(jì)，給用戶耳目一新的感覺。

Tab色彩選擇，我們進(jìn)行了很多配色和形式的嘗試。

網(wǎng)站縮略圖的定制化
把大部分常用網(wǎng)站做成定制化圖形放到界面，在第一時(shí)間讓用戶對網(wǎng)頁內(nèi)容感覺直觀，同時(shí)達(dá)到界面與內(nèi)容可視化的統(tǒng)一，更整體。

控件化輸出，精細(xì)到每一處設(shè)計(jì)細(xì)節(jié)

在圖標(biāo)設(shè)計(jì)中， 應(yīng)該保證其輪廓清晰，圖形應(yīng)采用抗鋸齒角度進(jìn)行設(shè)計(jì)；盡量填滿整個(gè)畫布，但要避免出現(xiàn)裝飾性視覺元素影響圖標(biāo)的識(shí)別性。簡潔的界面往往更需要細(xì)節(jié)的深入刻畫，這樣界面才能簡約而不簡單。

官網(wǎng)首頁設(shè)計(jì)

1、界面布局及信息：

簡化界面布局，精煉界面元素和信息，在保證瀏覽者對于頁面以及產(chǎn)品有足夠的認(rèn)知的情況下，使界面做得盡量簡潔，從而傳達(dá)出更輕盈的視覺感受；

2、色調(diào)：

簡約而通透的高明度頁面。白色，因其明度最高，無色相，明亮干凈、暢快、樸素，永恒無暇，在自然界象征著的純凈與貞潔。輕快的白色可以給人很好的輕快速度感，整潔、大空白的同時(shí)讓用戶保持歡快的情感進(jìn)行瀏覽。所以整體界面基調(diào)明度較高。

3、背景選圖：

明亮大窗的房間一角，陽光靜靜的瀉進(jìn)來，打造你所熟悉并喜歡的環(huán)境，舒適、安靜、勿打擾的環(huán)境誰不愿意多停留一些時(shí)間呢，同時(shí)打造畫面的空間感，前景物體清晰可辨，背景虛化，畫面形成縱深感，層次分明主題突出，使畫面在高亮基調(diào)下層次更加豐富。

二級(jí)頁

秉承首頁的簡約，輕薄，現(xiàn)代風(fēng)格，重內(nèi)容輕質(zhì)感，通過文字信息大小、顏色和間距使內(nèi)容產(chǎn)生自發(fā)的性質(zhì)的分離和形式感，明亮的白色無邊框背景，使頁面更加通透。實(shí)驗(yàn)室界面使用兩個(gè)概念性的配圖，介紹html5和雙核瀏覽器實(shí)驗(yàn)室，白的背景，簡單的布局繼續(xù)保持整站簡約、輕薄、明快的氣質(zhì)。

設(shè)計(jì)細(xì)節(jié)-字體

在原有字體結(jié)構(gòu)基礎(chǔ)上將筆畫重新整合歸納，簡化橫、豎，強(qiáng)調(diào)鉤、捺，融入簡潔利落的現(xiàn)代審美意趣，使字體端秀舒展、清新挺拔，對漢字結(jié)構(gòu)的認(rèn)知與現(xiàn)代字體設(shè)計(jì)之間的關(guān)系。設(shè)計(jì)成個(gè)性強(qiáng)，兼具現(xiàn)代感的新字體，能加入自我的思維與創(chuàng)新，即傳統(tǒng)又時(shí)尚。結(jié)構(gòu)寬博嚴(yán)謹(jǐn)，筆畫設(shè)計(jì)靈動(dòng)自然。

設(shè)計(jì)細(xì)節(jié)-按鈕

首頁網(wǎng)站banner營造的是一種自然的環(huán)境，真實(shí)且貼近用戶，“免費(fèi)下載”作為官網(wǎng)的重要功能點(diǎn)，受到自然光環(huán)境的影響，投影映射到桌面，設(shè)計(jì)成整個(gè)場景中的一個(gè)元素，放在桌面上的一件物品，與整個(gè)場景渾然一體。采用統(tǒng)一光源，逆光效果使主體更加突出、靈動(dòng)。

配圖從視覺的形象闡釋說明html5和雙核實(shí)驗(yàn)室的概念

總結(jié)

UXC在整個(gè)項(xiàng)目設(shè)計(jì)過程中產(chǎn)品團(tuán)隊(duì)，用戶研究密切合作，定義極速瀏覽器設(shè)計(jì)方向，整個(gè)過程可以總結(jié)為三大部分:1，設(shè)計(jì)方案由產(chǎn)品即時(shí)給出反饋，2，建立反饋流程了解用戶的想法，3，按照預(yù)期標(biāo)準(zhǔn)按時(shí)輸出。最終上線得到用戶的廣泛認(rèn)可，同時(shí)極速瀏覽器獲得了公司的項(xiàng)目獎(jiǎng)，UXC團(tuán)隊(duì)在以后的工作中會(huì)再接再厲，設(shè)計(jì)出更好的作品，因?yàn)?，瀏覽器主要以可用性為主，如果在使用中遇到什么問題或者有好的想法也歡迎一起討論交流：）