讓文字講好banner的故事

2012-11-1    藍藍設(shè)計的小編

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

來源: http://www.uisheji.com/xd

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

 

目錄圖[1]

關(guān)于banner設(shè)計的話題相信之前已經(jīng)有很多設(shè)計師發(fā)表過自己的經(jīng)驗分享,讓人看完以后也是感慨良多、受益匪淺。但是這并不妨礙我們再一次提起這個話題,每個設(shè)計師的工作方法和設(shè)計的切入角度都是不同的,今天我想跟大家著重談?wù)刡anner中的文字設(shè)計,如何設(shè)計好banner中的文字,讓文字和其他元素相輔相成達到和諧的統(tǒng)一。就算只是拋磚引玉,能讓大家得到一絲共鳴,產(chǎn)生舉一反三的作用,也是非常欣慰的。

對于Banner設(shè)計,很多人理解為是信手拈來,不需要太多的設(shè)計思路就可以完成,這是有必要訂正一下的。設(shè)計banner可能并不難,但是設(shè)計一個稱職又有視覺沖擊力的banner,還是需要經(jīng)驗積累的。設(shè)計師應(yīng)該力求自己設(shè)計的每個banner都經(jīng)得起多方面的考驗,在這個小方塊里真正的做到有板有眼才行。也許很多人會說光設(shè)計banner對設(shè)計能有多大提高,其實如果你做到能設(shè)計好banner,你會慢慢發(fā)現(xiàn)做專題,甚至很多產(chǎn)品介紹頁面也會越來越得心應(yīng)手。接下來,我就跟大家談一談自己對于banner的中文字設(shè)計的一些經(jīng)驗方法,如有紕漏或者不同觀點,謝謝指正。

一.文字的基本排列混搭

設(shè)計banner時候,千萬不要不加思索的就把一行文字硬生生的放上去,那會讓你的banner直接顯得呆板木訥。往往很多新手設(shè)計師容易犯這樣的錯,就算字體顏色樣式處理的很好,也會看上去很無趣、很僵硬。這時候我們就需要做一些文字排列混搭的設(shè)計:

①大小和顏色的混搭

②排列組合的混搭

③不同字體之間的混搭

④中英文字體的混搭

以上都是一些常見的處理方式。當(dāng)然這也是banner文字設(shè)計的基礎(chǔ),其他很多的文字處理方式都建立在混搭的基礎(chǔ)中,所以做好混搭的重要性就不言而喻了。001[1]

上圖文字沒有進行什么混搭,顯得文字有些呆板;下圖中文字進行了一些大小和排列的混搭,更能體現(xiàn)所要展現(xiàn)的氣氛。

下面我們可以看一看其實設(shè)計師所設(shè)計的一些簡單的文字混搭的banner作品:

002[1]

二.文字的傾斜與斜切

有時候設(shè)計banner,根據(jù)背景構(gòu)圖不同或者我們想要更有視覺沖擊力表現(xiàn)文字內(nèi)容時,我們可以嘗試對文字進行傾斜或斜切透視等處理,有時候這會更會令你達到意想不到的效果。普通的文字排列平平穩(wěn)穩(wěn),方正有矩,我們可以用傾斜或者斜切打破這種“穩(wěn)定的構(gòu)圖”,讓畫面更有動感和層次感。

003[1]

上面的2個banner是利用了文字傾斜的效果,下面的3個banner同時利用了斜切的效果。文字利用了傾斜和斜切效果后,讓文字和整個畫面一下活潑起來,更能勾起了用戶的閱讀欲望。

三.讓文字形成相對獨立的區(qū)域

banner設(shè)計時,考慮到有些時候背景顏色比較復(fù)雜,也可能背景有比較多產(chǎn)品等元素,這時我們需要讓文字放在一個相對獨立的區(qū)域或色塊中,如果沒有相對獨立的區(qū)域,我們就要自己設(shè)計創(chuàng)造出這個獨立區(qū)域和色塊,這樣更便于文字閱讀,也能讓文字的視覺焦點加強。例如下圖:

004[1]

四.文字變形的魅力

設(shè)計banner和專題頭圖時,設(shè)計師經(jīng)常用到文字變形,好的文字變形直接可以影響到文字的趣味性的提升,讓banner和頁面的氣氛被烘托得相得益彰。很多設(shè)計師感覺設(shè)計banner只是個小工作,用不到文字變形那么麻煩,其實不盡然,選好合適的參照字體進行簡單的文字變形并沒有多么復(fù)雜,但是卻能提升banner設(shè)計的品質(zhì),所以說益處良多。下面我先給大家舉個工作中設(shè)計的小例子:

005[1]

同理的文字變形設(shè)計延伸:

006[1]

下面讓我們再來看看其他優(yōu)秀設(shè)計師對于文字變形設(shè)計的作品:

007[1]

五.文字的3D應(yīng)用

3D文字效果的應(yīng)用在banner設(shè)計中也十分常見,利用好AI和PS等工具可以制作出令人滿意的3D文字,如果你肯花多一點的時間,在材質(zhì)或者光影上還可以做到進一步的效果提升。下面讓我們看一些優(yōu)秀設(shè)計師設(shè)計的3D字體樣式banner:

008[1]

六.生活中的字體元素

我們設(shè)計歷史文化頻道的banner時,或者當(dāng)我們設(shè)計中國傳統(tǒng)的節(jié)日時,經(jīng)常要用到一些中國風(fēng)的元素,就例如毛筆字。在生活中字體元素,毛筆字、粉筆字、字帖等我們也可以把它們活用在banner中,配合合適的背景和主題,讓你的設(shè)計更突顯出banner氣氛。

009[1]

上面的2個banner是利用了粉筆字的設(shè)計效果,突出了年輕,活力;下面的3個banner使用了毛筆字,字帖等中國風(fēng)的字體效果,體現(xiàn)出文化,品味和底蘊的感覺。

七.猶抱琵琶半遮面

banner中,字體的設(shè)計一定要清晰,這樣可以便于用戶更流暢的閱讀。不過有時也可以讓文字“半隱半現(xiàn)”,前提當(dāng)然是在保證沒有閱讀壓力的情況下。“半隱半現(xiàn)”的文字可以讓你設(shè)計的banner更生動更有層次感。

010[1]

文字的下方部分被隱藏住,但是并沒有妨礙閱讀,反而讓文字有了種融入背景環(huán)境的感覺。

011[1]


文字的左邊緣被上一個字壓住,有種層疊的感覺,讓文字的排列更顯層次。

寫在最后,banner中字體設(shè)計相關(guān)的學(xué)問其實還有很多,我這里只簡單寫了一點自己的經(jīng)驗心得。以上圖例中有部門是網(wǎng)上收集來的其他優(yōu)秀設(shè)計師的作品,文中借用不甚感激,如有侵權(quán)請及時告知,謝謝。

微博UDC 原創(chuàng)博文,轉(zhuǎn)載請注明出處,歡迎訂閱

騰訊SOSO地圖 iPhoneV2.0項目設(shè)計總結(jié)

banner11

版本特色
Version features

2D/3D地圖完美轉(zhuǎn)換
炫酷3D地圖,領(lǐng)略立體城市。最高到5米,帶你看清大樓每一面??辞辶⒔粯?qū)哟?,不再錯過出口。
110

高清衛(wèi)星圖
400個城市的高清衛(wèi)星圖,帶你看看自家的屋頂。

23

SOSO地圖大換裝
2012地圖數(shù)據(jù),全新本色,地點道路信息更加豐富清晰。

33

設(shè)計過程
Design process

用研同學(xué)通過對競品、用戶、數(shù)據(jù)等多個維度進行深度分析,并以用戶問卷調(diào)查的方式采集了大量的數(shù)據(jù),以幫助產(chǎn)品團隊對產(chǎn)品進行精準(zhǔn)定義,同時用研結(jié)果將有效指導(dǎo)后續(xù)設(shè)計方案的推進方向。

用戶畫像
第一時間聆聽用戶的心聲,搜集和整理用戶的各種反饋意見,是我們不斷進步的動力。

43

設(shè)計方案
SOSO地圖作為一個滿足用戶出行,為用戶提供地理位置,及相關(guān)生活服務(wù)的產(chǎn)品,一切功能與設(shè)計都應(yīng)該從生活中的真實場景去捕捉。

53

63


73

83


結(jié)語
Conclusion

SOSO地圖作為公司平臺戰(zhàn)略性產(chǎn)品,一直受到公司領(lǐng)導(dǎo)的關(guān)注。曾多次在Apple免費排行榜或?qū)Ш筋惍a(chǎn)品名列前茅。但我們深知自己還有很多不足,我們會不斷提升產(chǎn)品的體驗,擔(dān)高用戶滿意度。

希望大家多多關(guān)注和支持SOSO地圖,多提寶貴意見!

93

102

  • (本文出自Tencent CDC Blog,轉(zhuǎn)載時請注明出處)

淺談多終端屏幕特性

1

我們已逐漸邁向多終端時代,這是一次挑戰(zhàn),也是一個機遇。
關(guān)于多終端屏幕,我們能做些什么?我們能從哪些地方著手?
以下是關(guān)于多終端屏幕的幾個特點,希望能和大家一同探討并帶來啟發(fā)。

同步性

不管是任何的設(shè)備,時間或地點,用戶都希望能從任何地方,任何終端獲?。ㄏ嗤┬畔⒒驍?shù)據(jù)。設(shè)備能為用戶保持?jǐn)?shù)據(jù)同步與管理,而信息可以隨時被用戶在各種設(shè)備平臺上訪問或跨平臺編輯。因此,也就有了多終端屏幕的同步特性。

例子:
1.Kindle,你可以在任何時候中斷電子書閱讀,切換其他設(shè)備閱讀時,應(yīng)用程序會記住上一次的閱讀位置。

2.icloud,能把用戶的日歷,聯(lián)系人,文檔,音樂和照片自動同步到蘋果的服務(wù)器,從而無論在哪個設(shè)備上使用,都能保持。包括推出的Power Nap,也是為了數(shù)據(jù)及時同步而服務(wù)的。

3.chrome書簽云同步 

4.Dropbox等云筆記產(chǎn)品。

2

相關(guān)性

多終端屏幕的相關(guān)性,就是內(nèi)容在多種設(shè)備的不同屏幕下,依然可用的特性。因此,就要求產(chǎn)品具備良好的跨平臺體驗。針對不同的設(shè)備和屏幕尺寸,讓內(nèi)容重新排列,邏輯框架作適應(yīng)調(diào)整,并盡可能地保持產(chǎn)品的一致性和統(tǒng)一體驗。

例子:
1.EverNote,可以在許多平臺和設(shè)備上運行(桌面應(yīng)用程序,瀏覽器應(yīng)用程序,iPad和智能手機客戶端),而即使在不同屏幕和設(shè)備上的應(yīng)用程序看起來有所不同,但仍能為用戶提供的一致的體驗。

2.視頻提供商Netflix,為來自全國各地的設(shè)備和特定的電視,平板電腦,筆記本電腦和智能手機提供按需服務(wù)。

3

共享性

就是在某些情況下,信息過大過多,一個屏幕沒有足夠的顯示空間。因此,需要把多個屏幕結(jié)合使用,讓信息完整地呈現(xiàn)出來,所以也就有了多終端屏幕的共享特性

例子:
1.公司為方便設(shè)計師工作而配備雙顯示器

2.麻省理工學(xué)院媒體實驗室的一個項目,通過幾個不同的顯示器形成一個虛擬的超大空間協(xié)同工作。

4

轉(zhuǎn)向性

用戶會在不同的場景下,希望切換不同類型的設(shè)備來使用以滿足其需求。各種設(shè)備本身也具備可用于隨時更改信息,不丟失任何信息或明顯中斷信息流的功能,從而也就產(chǎn)生了多終端屏幕的轉(zhuǎn)向特性。

例子:
蘋果的Airplay。你可以因不同場景轉(zhuǎn)換不同的移動設(shè)備來觀看同一部電影。電影所包含的信息內(nèi)容會被轉(zhuǎn)移到另一個設(shè)備上以供繼續(xù)使用(如從電視機轉(zhuǎn)換至iPhone使用)。

5

互補性

各種設(shè)備的相互溝通和相互反應(yīng),可以增加提升互動的質(zhì)量,使設(shè)備相得益彰。另外,在大多數(shù)應(yīng)用中,一個設(shè)備會用來作為導(dǎo)航,或是其他設(shè)備互動的遙控裝置,來控制另一個屏幕上的信息。多終端屏幕的互補特性的使用,也開始變得越來越普遍。

例子:
1.智能手機變成電視機遙控器。6

http://v.youku.com/v_show/id_XMzQ3MzI5MzIw.html

2.一個iPhone與iPad屏幕結(jié)合的拼字游戲應(yīng)用程序。
7

同時性

多終端屏幕的同時性,就是通過并行的內(nèi)容,結(jié)合至少兩個或幾個不同的設(shè)備,彼此交換和傳遞信息,來添加用戶的創(chuàng)造和互動價值。

例子:
1.在電視和平板電腦的并聯(lián)使用,僅在Tablet PC上的屏幕上顯示的信息可以是一個補充部分。一邊看電視,你可以在Tablet PC上使用Twitter和Facebook上編輯相關(guān)的信息。

8

2.ABC的實習(xí)醫(yī)生格蕾同步應(yīng)用程序,讓觀眾參與的事件交互。雖然演出是在電視上,觀眾可以在演出期間啟動程序,通過實時聊天參與調(diào)查互動。

9

3.可口可樂的互動營銷廣10

http://v.youku.com/v_show/id_XNDE1ODk3NjE2.html

4.13th Street Last Call互動電影

11

http://v.youku.com/v_show/id_XMjUxMzI5OTcy.html

 

總結(jié)

盡管像云同步、云存儲方面已逐漸成熟,但在多屏幕互動等其他方面依然存在很大的空白和不足。而隨著智能電視的介入,必然會衍生出更多新的玩法和相關(guān)的服務(wù),進行深入的探討和研究,定能為用戶帶來更具互動性的體驗。

相關(guān)參考內(nèi)容:
http://www.multiscreen-experience.com/
http://precious-forever.com/

  • (本文出自Tencent CDC Blog,轉(zhuǎn)載時請注明出處)

歡樂二人雀神 for IOS & Android 項目設(shè)計分享

01-banner1

前言:項目的順利完成來源于項目團隊里每一位成員的努力,成就感則來源于喜歡這款游戲的大家,在此做一次心得分享,希望讓玩家看到我們的用心,更希望大家喜歡這款游戲!……

入正題:

一,項目介紹 & 游戲效果圖

02-項目介紹游戲效果圖

我們要做的是一款應(yīng)用于IOS和Android平臺的終端休閑類麻將游戲,歡樂二人雀神PC端游戲相信很多玩家玩過,但基于平臺不同,操作習(xí)慣不同,基本可以說是以一款全新游戲的設(shè)計概念去要求與實施的,最終達到適用于IOS平臺的iPhone4S,iPhone4,iPhone3GS和Android平臺的HTC,魅族等等機型上的精品麻將游戲。

二,項目開發(fā)流程

03-項目設(shè)計流程圖

下面以項目開發(fā)流程的順序來重點介紹一下在每個階段我們所做的事和遇到的問題以及解決方案。

A :立項階段

立項階段我們要做的事其實尤其重要,它直接決定我們最終會研發(fā)出什么樣的一款產(chǎn)品,在這個階段,產(chǎn)品的期望,開發(fā)人員的實力,項目時間,以及預(yù)測的疑難問題能不能解決等等都是項目順利進行的重要因素,為此我們多次會議討論,相關(guān)干系人都要參加,在確定我們的目標(biāo)后(項目介紹欄就是最終目標(biāo)),列出一些重點問題,比如實現(xiàn)3D效果的實現(xiàn)方式(這個在后面技術(shù)實現(xiàn)會具體講),作為優(yōu)先需要解決的問題,在所有開發(fā)人員明確方向和心中有一個比較形象的概念后,設(shè)計師需要做一些前期準(zhǔn)備工作,如PC端的二人雀神體驗,IOS和Android的用戶操作習(xí)慣,項目風(fēng)格預(yù)想,資料收集,與開發(fā)討論實現(xiàn)方案與制作方式等等,隨之我們進入下一個階段,設(shè)計定位!

B :設(shè)計定位

04-B-設(shè)計定位

到了這里就比較明確了,設(shè)計師提煉了一些項目會議討論的關(guān)于風(fēng)格方面的關(guān)鍵詞,以此作為基礎(chǔ)去發(fā)散思維進行視覺拼圖,用快速的拼圖與產(chǎn)品再次進行頻繁溝通,用圖形去確定大家心中的那個太陽是不是這樣的一個太陽,哈哈,這里我們有很多草圖就不發(fā)出來了(后面會有最終的效果展示),在草圖確定大概方向后我們就可以正式進入風(fēng)格設(shè)計了。角色場景UI同步進行。

C :技術(shù)實現(xiàn)

05-C-技術(shù)實現(xiàn)

OK,我們提到立項階段所預(yù)測的技術(shù)難點問題,那我們在做風(fēng)格設(shè)定的同時要解決如果這樣做,我們怎么實現(xiàn)?在設(shè)計的同時甚至優(yōu)先考慮實現(xiàn)問題是很關(guān)鍵的,這里列舉兩項比較重要的點來進行說明:

第一,如上圖,游戲中不同狀態(tài)的麻將有74種,牌花則是24張,這樣的話,如果我們按實際每種狀態(tài)每個花面出一張貼圖的話就是1776張單個麻將貼圖,按一張1024x1024px貼圖放滿的話預(yù)計是需要24張這樣的貼圖,每張貼圖PVR4M計算,就是96M,當(dāng)然PVR我們會進行壓縮,按3比1的壓縮比算的話也有32M,試想一般的APP應(yīng)用在10-40M不等吧,這里光牌的資源就要32M,所以必須保證3D效果的前提下解決這個問題,最后和開發(fā)多次討論測試,以一套資源算相對坐標(biāo)的形式實現(xiàn),這樣只需一張1024px貼圖就能解決,但需要將每個點準(zhǔn)確無誤的算到牌面上,在牌的切圖上也要求很高,不能有1px的誤差,最終花了一些精力去測試實現(xiàn)了這個效果,以最終游戲體驗看,還是非常不錯的。

第二,從上面的過程我們明顯感覺拆分資源對文件大小的影響至關(guān)重要,那么在后面的設(shè)計中,設(shè)計師不光要考慮設(shè)計的視覺效果,同時還要考慮如何拆分你的效果圖,還有復(fù)用的問題,這里就是考驗設(shè)計師的感性與理性思維是否并在了,滿足視覺效果,滿足功能實現(xiàn),滿足開發(fā)易實現(xiàn),滿足資源最小化,,,這里就不附圖了,可參考的方法有:圖形的對稱設(shè)計,漸變以垂直或水平實現(xiàn)勿其它角度實現(xiàn),元件統(tǒng)一,紋理用可拼接的效果等等…

D :風(fēng)格確定

06-D-風(fēng)格確定-1

無論你是男生還是女生,都有可愛的人物形象提供給你…

06-D-風(fēng)格確定-2

游戲支持換場景功能,各種炫麗的場景帶給你不一樣的游戲氛圍!

06-D-風(fēng)格確定-3

游戲界面,精致的畫面,全新的3D效果體驗,簡單易操作,帶給你高品質(zhì)且輕松操作的游戲體驗!

06-D-風(fēng)格確定-4

選場中…

06-D-風(fēng)格確定-5

開始游戲…

06-D-風(fēng)格確定-6

游戲中…

以上則為我們最終游戲美術(shù)效果的各個部分截圖,當(dāng)然在達到這樣效果之前,我們進行過無數(shù)次的嘗試,調(diào)整,優(yōu)化,關(guān)于游戲的趣味點&新嘗試,在上面的圖中我想大家也看到了,3D效果的全新體驗,人物形象的全新設(shè)計,提供場景切換,以及其它很多細(xì)節(jié)部分的創(chuàng)新等等,更多細(xì)節(jié)需要大家進游戲體驗啦…

E :集中開發(fā)

07-E-集中開發(fā)-11

好,在游戲風(fēng)格和技術(shù)實現(xiàn)方面解決以后,正式進入我們的集中開發(fā)階段,其實我想說,游戲研發(fā)才剛剛開始…

在這個階段我們需要做大量的UI設(shè)計與輸出工作,除了保證風(fēng)格的統(tǒng)一性外,在一些細(xì)節(jié)注意小創(chuàng)新,也會給游戲帶來好的體驗,還有細(xì)節(jié),一定不能為了迭代壓力忽略細(xì)節(jié),這個時候設(shè)計師要堅定,嗯,不管怎么趕也要保持相當(dāng)?shù)馁|(zhì)量才可以!

在我們邊做設(shè)計邊輸出的時候,我想說的是輸出真的是腦力與體力活,一開始我們只是按常規(guī)輸出,但做了一部分后發(fā)現(xiàn)需要考慮3GS版本復(fù)用貼圖的問題,這個部分可能一開始也沒有溝通好,設(shè)計和開發(fā)了解到的是做iPhone4版本,發(fā)現(xiàn)可能有問題后隨即和產(chǎn)品確認(rèn)了這個問題,把我們之后有可能做到的版本都確認(rèn)了一遍,然后速度改掉所有貼圖,到這里還沒結(jié)束,第二坑在前方,當(dāng)貼圖做到大概25%樣子,問題又來了,開發(fā)說如果那樣拆分貼圖我們可以提高性能,OMG,之前不是現(xiàn)在的方案OK么?看來有必要再次和開發(fā)嚴(yán)肅的討論一次,了解下來,確實是分開加載性能更好,改,這相當(dāng)于把房子建好拆了重建,而且磚頭都已經(jīng)打碎了,不過為了完美的性能,還是決定改了。加班,無怨無悔的加班…嗯,再往后就比較順利啦…

07-E-集中開發(fā)-2

開發(fā)中還有一個比較重要的點就是跟進實現(xiàn)效果,在每個版本發(fā)出時設(shè)計師高覺悟的測試效果,所有的設(shè)計稿都有給效果圖,每個功能都是,包括動態(tài)文本都給到開發(fā)明確的數(shù)值,這樣才能最大化保證游戲質(zhì)量與效果圖一致。

F :后期優(yōu)化

終于到這了,嗯,是不是覺得游戲可以上線了?NONONO,還有很多問題,首先,我們要改掉所有與效果圖有出入的游戲畫面問題,一般游戲中的效果只能實現(xiàn)效果圖的60%-70%,那么你想達到95%以上呢?這就需要和開發(fā)反復(fù)的聯(lián)調(diào),當(dāng)然,在此過程中,設(shè)計師和開發(fā)也建立起非常深厚的友誼:

設(shè)計師:“這里偏差1px。”

開發(fā):“沒有啊,看上去很完美??!”

設(shè)計師:“啊呀,是很完美,和效果圖只差1px了。”

開發(fā)默默的改了1px,

設(shè)計師:“啊呀,終于和效果圖一模一樣了,哈哈!”

諸如此類1px的問題很多,玩家都能看得出來么,當(dāng)然不,但我們必須改!

好,改完這些只是一個版本的質(zhì)量效果OK了,那么接下來的其它版本呢,除了聯(lián)調(diào)的問題,還有很多其它問題,比如貼圖如何復(fù)用?不等比的分辨率怎么解決全屏問題?布局如何修改?等等……這里就不再詳細(xì)說了,以后再單獨做分享。

G :游戲發(fā)布

最后就是發(fā)布了,發(fā)布也有一系列的資源設(shè)計輸出!了解一下各平臺的要求就可以了。

三,總結(jié)思考

1,通過這個項目,和項目成員建立了相互的信任與革命情誼;

2,作為設(shè)計師一定要頻繁的與產(chǎn)品開發(fā)溝通,很多時候需要了解產(chǎn)品甚至用戶深層次的需求,與開發(fā)近距離溝通,了解一些邏輯問題,讓設(shè)計更好實現(xiàn)等等;

3,遇到問題要及時解決,小問題不及時改以后就是大問題啦…

4,關(guān)于IOS和Android平臺上的應(yīng)用開發(fā),通過這個項目我們積累了很多經(jīng)驗,相信在以后的同類型項目開發(fā)中可以運用,但還遠(yuǎn)遠(yuǎn)不足,這是一片森林,需要去探索學(xué)習(xí)研究!

四,游戲下載

08-游戲下載1

Android設(shè)備體驗 & IOS設(shè)備體驗

200

App Store:搜索歡樂二人雀神 下載!

QQ歡樂系列游戲LOGO設(shè)計小結(jié)

banner

前言:
不知道大家有沒這種經(jīng)歷,無聊想找款新游戲打發(fā)下時間,到一些游戲應(yīng)用市場或者游戲平臺,但卻發(fā)現(xiàn)琳瑯滿目而且玩法嚴(yán)重雷同的游戲,令人眼花繚亂無從選擇!面對這些不太熟悉的新游戲, 通常我們不太會逐個點開去詳細(xì)了解,而是通過LOGO傳達的信息去選擇游戲,看到哪款游戲LOGO視覺效果比較炫,我們就有點擊的欲望。

項目背景:
QQ歡樂系列游戲有眾多的忠實玩家,歡樂斗地主更是紅遍大江南北的休閑棋牌游戲,是很多人茶余飯后娛樂放松的首選游戲,也讓歡樂系列游戲在玩家中形成了良好的口碑,因此打造歡樂系列游戲的品牌就顯得很有必要了!也如QQgame產(chǎn)品愿景:打造“歡樂、專業(yè)、人性化”的國際化休閑游戲平臺,踐行歡樂無處不在的品牌理想,打造多平臺、國際化的休閑社區(qū)。
另外,目前歡樂系列游戲總共有14款,而且歡樂系列游戲還在不斷的增加,其中斗地主就有歡樂斗地主、歡樂悶抓斗地主、視頻斗地主等5款,麻將也有歡樂二人雀神、歡樂麻將等4款,一款游戲不同的玩法,也為玩家選擇游戲添加了門檻,面對這樣的情況,有必要要為每款游戲設(shè)計卡通形象和LOGO!

前期準(zhǔn)備:
首先感謝原畫組同學(xué)的精彩原畫資源。
一、 設(shè)計定位
歡樂系列的游戲,優(yōu)先要帶給玩家的是輕松休閑的感覺,在游戲中把一天的疲憊一掃而盡,收獲快樂!所以LOGO設(shè)計也要快樂、輕松。

二、素材收集

012

三、 素材LOGO分析:
1、 顏色比較明快,有鮮明的對比色,突出游戲名字本身。
如圖1,顏色輕松快樂;如圖6,凸顯ZOMBIE

2、 字體形狀飽滿,粗描邊有厚度感,更有視覺沖擊力。
如圖2,通過厚重的描邊體現(xiàn)了游戲中城堡的特性;

3、 文字之間的組合和變形,讓Logo更有設(shè)計感
以上的例子都有帶有這些特點

4、 文字的質(zhì)感貼圖和游戲特性比較貼合。
如圖5中的木質(zhì)感的文字設(shè)計,在游戲中的界面中也能體現(xiàn),也讓玩家潛意識中聯(lián)想到捕鳥,圖6的迷彩等
5、 提煉游戲中的關(guān)鍵元素,體現(xiàn)游戲的性質(zhì),增加LOGO辨識度。
圖1中的骰子、圖2中的劍和盾牌、圖3中的拳擊套、圖4中的忍者、圖5中羽毛和箭、這些都是游戲中關(guān)鍵的元素,讓新玩家第一眼就能知道這是款什么游戲。

有了這些前期的準(zhǔn)備,就可以接下的工作了!

設(shè)計過程:

原來的

分析原來的歡樂系列LOGO
可保留的:
1、 LOGO整個的結(jié)構(gòu)比較飽滿。
2、 表現(xiàn)形式比較統(tǒng)一,游戲卡通形象統(tǒng)一在右上角,代表歡樂系列游戲的歡樂字樣居左上角,底部是游戲名
3、 “歡樂“字樣的設(shè)計

不足的:
1、 顏色比較沉,稍微有點臟
2、 字體不夠厚重感,設(shè)計感較弱
3、 游戲關(guān)鍵元素沒有體現(xiàn)出來,辨識度較低
4、 視覺沖擊力不夠

優(yōu)化后的效果:

優(yōu)化后

1、優(yōu)化的效果
優(yōu)化后的歡樂系列LOGO選取了更明亮歡快的顏色,通過描邊和增加字體厚度讓整體更有重量,飽和的字體筆劃讓LOGO更有親和力;同時提煉了每款游戲的關(guān)鍵元素,讓LOGO傳達的信息更清晰,LOGO辨識度更高。
2、不足的地方
優(yōu)化后的LOGO還是有些不足的地方,整體還是有點散,LOGO樣式統(tǒng)一性不強,這些都是日后要注意的地方.

后記
這次的設(shè)計項目雖然比較小,但整個項目做下來還是有不小的收獲,首先前期的素材收集和分析,提煉了休閑游戲LOGO的一些設(shè)計小規(guī)律,過程中的溝通也很重要,及時的溝通和反饋,能減少很多不必要的重復(fù)工作,有效提高工作效率!新版歡樂系列的游戲LOGO希望能讓玩家得到更多快樂!

不一樣的色彩——紀(jì)念逝去的寶麗來

11

60年前,一個小女孩的一句話“為什么我不能馬上看到照片呢?”讓世界從此掀起了一場即影成像的風(fēng)潮,開創(chuàng)了一個歷史,現(xiàn)在這種風(fēng)潮更多的已經(jīng)被人們稱之為一種文化、一種獨特的生活態(tài)度。

這就是我這篇文章要跟大家分享的主角,曾經(jīng)紅極一時的即影相機-寶麗來,它從拍照到成像的過程需要60秒左右,因此人們也給了寶麗來相機一個“60秒的奇跡”的綽號,它的出現(xiàn),讓攝影從此變得更加有趣和簡單,也讓更多的人們喜歡上了攝影。

當(dāng)每次看到寶麗來拍出的相片的時候,總會給我們一種歷史的存在感,那種微微泛著青黃色的色彩,有一種特別的懷舊情懷,每一張照片都會隨著時間的久遠(yuǎn),經(jīng)歷從清晰到模糊褪色的過程,而正是這個過程給了我們特殊的一種記憶…

因此在數(shù)碼橫行的時代,我依然喜歡每次出門都帶著寶麗來,每次拍照的時候,總是非常期待手中相紙漸漸顯現(xiàn)出影像的那一刻,純粹,沒有任何的修飾,每次都會充滿著不一樣的期待與驚喜。

 

寶麗來的前世今生

說起寶麗來,不得不提Edwin H. Land(艾德溫·蘭德),正是他的發(fā)明,給人們帶來了無數(shù)的歡樂。1943年蘭德博士女兒的一個疑問,她向剛拍完一張照片的父親問道:“為什么我不能馬上看到照片呢?”敏感而天才的蘭德看到了這個問題后巨大的市場需求,研發(fā)出了一種粘貼了負(fù)片以及涂上感光藥劑的片基的相紙,只需幾十秒鐘的顯影并分離負(fù)片,就能立刻得到一張照片。2009年9月寶麗來停產(chǎn)前的最后一批相紙過期,寶麗來“死了”。然而奧地利人弗洛蘭·凱普斯(Florian Kaps)并不希望寶麗來就此死去。他帶領(lǐng)著只有12人的影像專家,在寶麗來荷蘭恩斯赫德已廢棄的工廠里研制新型相紙,并把這個計劃命名為“不可能的任務(wù)”。2010年3月22日,“不可能的任務(wù)”團隊在紐約正式發(fā)布了px100和px600兩種新相紙,凱普斯成功了。此刻,寶麗來又重新回到了我們的生活。(篇幅有限這里不詳細(xì)介紹了)
 

寶麗來歷史中最為大家熟知的三款相機

Polaroid 680/690(機皇)、Polaroid SX-70、Polaroid彩虹機,當(dāng)然了寶麗來還有非常多的型號,如經(jīng)典的風(fēng)琴機,入門級的ONE600系列等,在這里我就不一一介紹了,如果大家有興趣可以私下里一起交流:)

22[1]

 

寶麗來的色彩

寶麗來在經(jīng)歷了由盛及衰再到重生之后,新復(fù)刻的相紙已經(jīng)遠(yuǎn)遠(yuǎn)達不到從前的效果,并且新的顯影液充滿了不穩(wěn)定,但是就是這種不穩(wěn)定卻給我們帶來了更多的驚喜,下面我就和大家分享一下寶麗來相機照的照片,那種鑲嵌在方方框框中,淡淡的充滿著懷舊情懷的色彩,讓我們一起懷念曾經(jīng)的感動~

① 寶麗來造就了無數(shù)的藝術(shù)大師,其中最富盛名的就是波普藝術(shù)的倡導(dǎo)者和領(lǐng)袖——安迪·沃霍爾(Andy Warhol),照相機是沃霍爾的日記本,也是他的素寫本,他一生拍攝了6至10萬快照和寶麗來照片。她的相片多半是以明星為主,是早期寶麗來相機的忠實用戶,最著名的瑪麗蓮夢露的翻成一張絲網(wǎng)印刷的相片就是出自他手。

33[1]

② 說起寶麗來,另外一個具有代表性的人物應(yīng)該就是荒木經(jīng)惟了,他是日本一位極富傳奇及爭議的攝影大師,他的作品游走于藝術(shù)與情色而極具爭議的創(chuàng)作,荒木經(jīng)惟用“不可能的任務(wù)(IMPOSSIBLE Project)”團隊復(fù)刻的「PX600 UV+ Black Frame」黑框?qū)汒悂淼灼?,以「情色捆綁」、「花」、「人像」、「日常生活與陽臺」、「天空」及「黑窗」等系列主題,創(chuàng)作出其獨具魅力的數(shù)百張單一作品。另外荒木經(jīng)惟(Nobuyoshi Araki) 為Lady Gaga拍攝的寶麗來作品也可以堪稱后寶麗來時代的經(jīng)典,也是荒木經(jīng)惟創(chuàng)作的第一組寶麗來肖像。照片中充滿了諸如捆綁,SM等元素,頗具張力。(需要注明的是荒木經(jīng)惟所拍攝的寶麗來所用的底片都是來源于復(fù)產(chǎn)之后新復(fù)刻版的黑白和彩色相紙,這類相紙的色彩成像還不夠穩(wěn)定,因此這一時期的彩色照片往往會出現(xiàn)偏黃偏紅的色調(diào),反而讓照片有了一種濃郁的復(fù)古感覺)

44[1]

③ 看了上面兩位的作品是不是大家覺得口味似乎略微有些重了?呵呵,下面咱們就看一組柔和清新的作品,這也是我最中意的寶麗來色彩。inverselive是臺灣的一名攝影師,她的寶麗來作品無論是色調(diào)還是氛圍都讓人深深著迷。(如果大家也喜歡的話可以去他的官網(wǎng)看更多的照片:http://inverselive.com/)

55[1]

④ 下面這些形形色的寶麗來相片,記錄了不同的生活點滴,每一張照片都充滿了不同的色彩,但是他們都屬于寶麗來,最純粹,最原始的記錄了我們的生活,這便是寶麗來的色彩魅力~

66[1]

 

電影中的寶麗來

經(jīng)典的寶麗來,在很多的電影中也都有他的身影,不知道大家是否都發(fā)現(xiàn)過呢?在這里列舉幾部,大家可以猜猜看都是哪些電影里面的鏡頭。

77[1]

看了這么多寶麗來的相片,相信大家對寶麗來已經(jīng)有所了解,是不是也為它的色彩所著迷了呢?

這就是我所喜歡的寶麗來,有著不同于數(shù)碼相機的色彩,淳樸,自然,沒有任何的修飾,充滿了懷舊的味道~

如果你也喜歡寶麗來的話,那么從現(xiàn)在開始,就用它來記錄我們的生活吧,多年后,當(dāng)我們再次翻看這些曾經(jīng)的照片的時候,那種悠悠褪去的色彩,混雜著被遺忘的記憶再次涌入到我們的身體里,鏡頭中的那一刻是否會讓我們熱淚盈眶?

去年的時候,我專門設(shè)計了一套微博的皮膚《情迷寶麗來》,以此紀(jì)念寶麗來的重生…如果大家喜歡的話也可以登錄微博,在模板設(shè)置里面可以找到它:)

88[1]

注:文中所涉及的圖片照片均來源于網(wǎng)絡(luò),如有侵權(quán)請及時告知,謝謝。

最后分享幾個有關(guān)寶麗來的網(wǎng)址:

http://polachina.com/ (寶麗來研究所)

http://weibo.com/polaroidlove (寶麗來研究所的微博)

http://www.flickr.com/groups/1622899@N24/ (Flickr上的寶麗來小組)

http://inverselive.com/ (臺灣的一名攝影師inverselive的官網(wǎng))

http://www.flickr.com/photos/inverselive/sets/72157605599538904/ (inverselive的Flickr)

再送給大家一個小軟件,這個是可以模擬寶麗來經(jīng)典成象過程及色彩的一個小軟件,能夠把我們用數(shù)碼相機拍的照片轉(zhuǎn)換成寶麗來相片,挺有意思的,大家可以試試

http://poladroid.net/download.html (這個里面有MAC版和WINDOS的版本,點擊下載之后稍等一會就可以下載了)
 

微博UDC 原創(chuàng)博文,轉(zhuǎn)載請注明出處,歡迎訂閱

 

 

 

 

 

 

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.820esy.cn

存檔