2012-10-29 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ,為期望卓越的國(guó)內(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ù)
來(lái)源: http://uxc.#/archives/965.html
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
自2010年9月15日360極速瀏覽器發(fā)布以來(lái),默認(rèn)界面一直沿用Chrome的外觀設(shè)計(jì)。隨著360極速瀏覽器的發(fā)展以及品牌化建立的需求,360UXC與產(chǎn)品團(tuán)隊(duì)進(jìn)行了深度的合作,以優(yōu)化用戶體驗(yàn)與提升視覺(jué)品質(zhì)為目標(biāo)參與到極速瀏覽器6.0版本的整體形象設(shè)計(jì)中,設(shè)計(jì)了全新的瀏覽器界面和官方網(wǎng)站,為360極速瀏覽器的品牌化建立打下了堅(jiān)實(shí)的基礎(chǔ)(chrome.# )。
我們?yōu)榻⑵放苹曈X(jué)設(shè)計(jì)進(jìn)行了多種有意義的嘗試,設(shè)計(jì)前期與產(chǎn)品部門(mén)進(jìn)行了深度的溝通交流,了解產(chǎn)品的人群定位,發(fā)展方向,用戶研究進(jìn)行了核心360極速瀏覽器用戶調(diào)研,為下一步設(shè)計(jì)做好充分的準(zhǔn)備。之后組織設(shè)計(jì)師,進(jìn)行Brainstorming,分析現(xiàn)在的設(shè)計(jì)流行趨勢(shì),包括相關(guān)競(jìng)品優(yōu)缺點(diǎn)分析等工作。
首先我們從整體的設(shè)計(jì)趨勢(shì)出發(fā),研究總結(jié)Windows xp風(fēng)格過(guò)渡到Windows 8的Metro風(fēng)格變化過(guò)程,發(fā)現(xiàn)整體的界面質(zhì)感慢慢趨向于平面化,這為后期設(shè)計(jì)帶來(lái)了理論性依據(jù)。
從界面的側(cè)面圖來(lái)看,漸變厚度的過(guò)渡,讓視線更多的關(guān)注于信息內(nèi)容本身。所以在設(shè)計(jì)過(guò)程中,我們并不是一味的追求metro視覺(jué)效果,同時(shí)要考慮Windows xp和windows 7的用戶,所以從另一個(gè)角度思考這樣的設(shè)計(jì)是把關(guān)注點(diǎn)放到信息內(nèi)容本身,而非界面元素上。同時(shí)我們分析了相關(guān)行業(yè)競(jìng)品,通過(guò)比較分析確定了極速瀏覽器的視覺(jué)風(fēng)格定位。
這次極速瀏覽器產(chǎn)品界面改版整體視覺(jué)風(fēng)格的關(guān)鍵詞可以定義為:輕量化,品牌化,快速。輕量化-體現(xiàn)極速瀏覽器更輕量,功能更精簡(jiǎn);品牌化-凸顯建立極速品牌化特征;快速-簡(jiǎn)化信息呈現(xiàn)的層次,優(yōu)化操作與內(nèi)容區(qū)域。
我們?cè)谝曈X(jué)設(shè)計(jì)上進(jìn)行了很多嘗試,整體框架用極簡(jiǎn)的線條拼接而成,去掉多余干擾的視覺(jué)表現(xiàn)元素。全新的設(shè)計(jì),給用戶耳目一新的感覺(jué)。
Tab色彩選擇,我們進(jìn)行了很多配色和形式的嘗試。
網(wǎng)站縮略圖的定制化
把大部分常用網(wǎng)站做成定制化圖形放到界面,在第一時(shí)間讓用戶對(duì)網(wǎng)頁(yè)內(nèi)容感覺(jué)直觀,同時(shí)達(dá)到界面與內(nèi)容可視化的統(tǒng)一,更整體。
控件化輸出,精細(xì)到每一處設(shè)計(jì)細(xì)節(jié)
在圖標(biāo)設(shè)計(jì)中, 應(yīng)該保證其輪廓清晰,圖形應(yīng)采用抗鋸齒角度進(jìn)行設(shè)計(jì);盡量填滿整個(gè)畫(huà)布,但要避免出現(xiàn)裝飾性視覺(jué)元素影響圖標(biāo)的識(shí)別性。簡(jiǎn)潔的界面往往更需要細(xì)節(jié)的深入刻畫(huà),這樣界面才能簡(jiǎn)約而不簡(jiǎn)單。
簡(jiǎn)化界面布局,精煉界面元素和信息,在保證瀏覽者對(duì)于頁(yè)面以及產(chǎn)品有足夠的認(rèn)知的情況下,使界面做得盡量簡(jiǎn)潔,從而傳達(dá)出更輕盈的視覺(jué)感受;
簡(jiǎn)約而通透的高明度頁(yè)面。白色,因其明度最高,無(wú)色相,明亮干凈、暢快、樸素,永恒無(wú)暇,在自然界象征著的純凈與貞潔。輕快的白色可以給人很好的輕快速度感,整潔、大空白的同時(shí)讓用戶保持歡快的情感進(jìn)行瀏覽。所以整體界面基調(diào)明度較高。
明亮大窗的房間一角,陽(yáng)光靜靜的瀉進(jìn)來(lái),打造你所熟悉并喜歡的環(huán)境,舒適、安靜、勿打擾的環(huán)境誰(shuí)不愿意多停留一些時(shí)間呢,同時(shí)打造畫(huà)面的空間感,前景物體清晰可辨,背景虛化,畫(huà)面形成縱深感,層次分明主題突出,使畫(huà)面在高亮基調(diào)下層次更加豐富。
秉承首頁(yè)的簡(jiǎn)約,輕薄,現(xiàn)代風(fēng)格,重內(nèi)容輕質(zhì)感,通過(guò)文字信息大小、顏色和間距使內(nèi)容產(chǎn)生自發(fā)的性質(zhì)的分離和形式感,明亮的白色無(wú)邊框背景,使頁(yè)面更加通透。實(shí)驗(yàn)室界面使用兩個(gè)概念性的配圖,介紹html5和雙核瀏覽器實(shí)驗(yàn)室,白的背景,簡(jiǎn)單的布局繼續(xù)保持整站簡(jiǎn)約、輕薄、明快的氣質(zhì)。
在原有字體結(jié)構(gòu)基礎(chǔ)上將筆畫(huà)重新整合歸納,簡(jiǎn)化橫、豎,強(qiáng)調(diào)鉤、捺,融入簡(jiǎn)潔利落的現(xiàn)代審美意趣,使字體端秀舒展、清新挺拔,對(duì)漢字結(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),筆畫(huà)設(shè)計(jì)靈動(dòng)自然。
首頁(yè)網(wǎng)站banner營(yíng)造的是一種自然的環(huán)境,真實(shí)且貼近用戶,“免費(fèi)下載”作為官網(wǎng)的重要功能點(diǎn),受到自然光環(huán)境的影響,投影映射到桌面,設(shè)計(jì)成整個(gè)場(chǎng)景中的一個(gè)元素,放在桌面上的一件物品,與整個(gè)場(chǎng)景渾然一體。采用統(tǒng)一光源,逆光效果使主體更加突出、靈動(dòng)。
配圖從視覺(jué)的形象闡釋說(shuō)明html5和雙核實(shí)驗(yàn)室的概念
UXC在整個(gè)項(xiàng)目設(shè)計(jì)過(guò)程中產(chǎn)品團(tuán)隊(duì),用戶研究密切合作,定義極速瀏覽器設(shè)計(jì)方向,整個(gè)過(guò)程可以總結(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)?,瀏覽器主要以可用性為主,如果在使用中遇到什么問(wèn)題或者有好的想法也歡迎一起討論交流:)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.820esy.cn