讓文字講好banner的故事

2012-11-1    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   sillybuy.com  )是一家專注而深入的設(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://www.uisheji.com/xd

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

 

目錄圖[1]

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

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

一.文字的基本排列混搭

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

①大小和顏色的混搭

②排列組合的混搭

③不同字體之間的混搭

④中英文字體的混搭

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

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

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

002[1]

二.文字的傾斜與斜切

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

003[1]

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

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

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

004[1]

四.文字變形的魅力

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

005[1]

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

006[1]

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

007[1]

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

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

008[1]

六.生活中的字體元素

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

009[1]

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

七.猶抱琵琶半遮面

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

010[1]

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

011[1]


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

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

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

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

banner11

版本特色
Version features

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

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

23

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

33

設(shè)計(jì)過程
Design process

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

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

43

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

53

63


73

83


結(jié)語
Conclusion

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

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

93

102

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

淺談多終端屏幕特性

1

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

同步性

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

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

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

3.chrome書簽云同步 

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

2

相關(guān)性

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

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

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

3

共享性

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

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

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

4

轉(zhuǎn)向性

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

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

5

互補(bǔ)性

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

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

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

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

同時(shí)性

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

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

8

2.ABC的實(shí)習(xí)醫(yī)生格蕾同步應(yīng)用程序,讓觀眾參與的事件交互。雖然演出是在電視上,觀眾可以在演出期間啟動程序,通過實(shí)時(shí)聊天參與調(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ù),進(jìn)行深入的探討和研究,定能為用戶帶來更具互動性的體驗(yàn)。

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

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

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

01-banner1

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

入正題:

一,項(xiàng)目介紹 & 游戲效果圖

02-項(xiàng)目介紹游戲效果圖

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

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

03-項(xiàng)目設(shè)計(jì)流程圖

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

A :立項(xiàng)階段

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

B :設(shè)計(jì)定位

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

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

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

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

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

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

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

D :風(fēng)格確定

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

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

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

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

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

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

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

選場中…

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

開始游戲…

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

游戲中…

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

E :集中開發(fā)

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

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

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

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

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

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

F :后期優(yōu)化

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

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

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

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

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

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

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

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

G :游戲發(fā)布

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

三,總結(jié)思考

1,通過這個(gè)項(xiàng)目,和項(xiàng)目成員建立了相互的信任與革命情誼;

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

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

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

四,游戲下載

08-游戲下載1

Android設(shè)備體驗(yàn) & IOS設(shè)備體驗(yàn)

200

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

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

banner

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

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

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

二、素材收集

012

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

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

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

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

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

設(shè)計(jì)過程:

原來的

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

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

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

優(yōu)化后

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

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

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

11

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

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

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

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

 

寶麗來的前世今生

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

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

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

22[1]

 

寶麗來的色彩

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

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

33[1]

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

44[1]

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

55[1]

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

66[1]

 

電影中的寶麗來

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

77[1]

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

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

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

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

88[1]

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

最后分享幾個(gè)有關(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)

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

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

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

 

 

 

 

 

 

分享本文至:

日歷

鏈接

個(gè)人資料

存檔