游戲UI 第4章　iOS系統(tǒng)游戲UI設(shè)計(jì)學(xué)習(xí)課件

4.1.1

iOS系統(tǒng)UI尺寸

4.1

iOS系統(tǒng)游戲UI設(shè)計(jì)基礎(chǔ)iOS系統(tǒng)是由蘋果公司開發(fā)的手持移動(dòng)設(shè)備操作系統(tǒng)，具體來說，是iPhone、iPad和iPodtouch的默認(rèn)操作系統(tǒng)。iOS系統(tǒng)游戲即針對(duì)使用iOS操作系統(tǒng)所開發(fā)的手機(jī)游戲，在進(jìn)行iOS系統(tǒng)手機(jī)游戲UI設(shè)計(jì)之前，首先需要了解iOS系統(tǒng)的相關(guān)知識(shí)。iOS系統(tǒng)的英文全稱為iphoneOperationSystem，是目前蘋果公司推出的手持移動(dòng)設(shè)備的唯一操作系統(tǒng)，主要應(yīng)用在蘋果公司的iPhone手機(jī)和iPad平臺(tái)電腦中。4.1.2

iOS系統(tǒng)圖標(biāo)尺寸OS系統(tǒng)中每個(gè)應(yīng)用程序都有屬于自己的圖標(biāo)，游戲同樣會(huì)有自己的圖標(biāo)，這些圖標(biāo)大都精致美觀，能充分吸引用戶的注關(guān)。iOS設(shè)備的種類多種多樣，不同的設(shè)備和程序所使用的圖標(biāo)尺寸也不相同。

4.2

iOS系統(tǒng)游戲UI設(shè)計(jì)原則iOS移動(dòng)設(shè)備的屏幕相對(duì)較小，在設(shè)計(jì)iOS游戲時(shí)需要注意移動(dòng)設(shè)備與PC的差異性，在iOS游戲界面中過多的界面元素會(huì)使得畫面擁擠，會(huì)使游戲失去吸引力。在iOS游戲的UI界面設(shè)計(jì)過程中，設(shè)計(jì)師還需要遵循一定的設(shè)計(jì)原則，這樣設(shè)計(jì)出來的游戲界面才是一款出色的iOS游戲界面。4.2.1一致性游戲UI的設(shè)計(jì)需要保持一致性，這里的一致性原則主要包括3個(gè)方面：視覺樣式一致、交互行為一致和操作一致性。1．視覺樣式一致界面是玩家在游戲達(dá)程中首先接觸到的內(nèi)容，統(tǒng)一的視覺樣式能夠減輕玩家的游戲?qū)W習(xí)時(shí)間，快速的理解游戲，提高功能的操作的準(zhǔn)確性。如果將游戲中的每個(gè)界面設(shè)計(jì)的不一樣，無疑會(huì)增加玩家對(duì)游戲的認(rèn)知困難度。2．交互行為一致在設(shè)計(jì)游戲之初建立交互模型，不同類型的行為觸發(fā)后其交互行為需要和整體一致。例如：所有需要玩家確認(rèn)操作的對(duì)話框都至少包含“確定”和“取消”兩個(gè)按鈕。3．操作一致性在IOS游戲UI設(shè)計(jì)中要特別注意游戲操作的一致性，例如，iPhone手機(jī)上的“返回”按鈕通常在界面的左上方，如果硬性的放在其他位置的話，會(huì)增加iPhone手機(jī)用戶的使用負(fù)擔(dān)。4.2.2了解目標(biāo)用戶群首先，需要了解該款游戲所針對(duì)的玩家，因?yàn)樗O(shè)計(jì)的游戲不是為自己設(shè)計(jì)的。了解他們的性別、學(xué)歷、愛好、技能、相關(guān)使用經(jīng)驗(yàn)以及他們對(duì)游戲的期望等，然后建立用戶模型。然后，基于用戶模型去分析游戲UI設(shè)計(jì)的顏色、質(zhì)感、布局。不要迷戀自己的審美，也不要盲目跟風(fēng)。4.2.3界面是為功能服務(wù)的漂亮的游戲界面通常是設(shè)計(jì)師們所追求的，但是當(dāng)漂亮的界面與功能之間發(fā)生沖突的時(shí)候，玩家的體驗(yàn)就會(huì)變差。這個(gè)問題在設(shè)計(jì)游戲界面的時(shí)候經(jīng)常會(huì)出現(xiàn)，應(yīng)該引起設(shè)計(jì)師的注意，當(dāng)視覺效果凌駕于功能之上的時(shí)候，界面設(shè)計(jì)就是失敗的。4.2.4清晰的信息在iOS游戲界面設(shè)計(jì)中，設(shè)計(jì)師需要提前預(yù)估玩家在游戲中需要的信息，并一直在游戲界面中給予足夠的提示。例如對(duì)于消除類游戲來說，游戲時(shí)間進(jìn)度條、當(dāng)前級(jí)別、分?jǐn)?shù)、暫停按鈕，都是玩家在游戲過程中需要經(jīng)常使用的。4.2.5簡(jiǎn)化游戲操作交互的中心是用戶，交互元素和用戶行為是一一對(duì)應(yīng)的。這直接要求游戲界面中所設(shè)計(jì)的交互元素必須在用戶的可控范圍。通常，手機(jī)游戲的玩家都是通過手勢(shì)、鍵盤等與游戲發(fā)生交互產(chǎn)生可見或不可見的交互結(jié)果。在這個(gè)過程中設(shè)計(jì)師需要注意交互的次數(shù)會(huì)直接會(huì)影響到最后的結(jié)果。當(dāng)一個(gè)功能被隱藏過深，交互次數(shù)在4次以上，玩家就很難達(dá)到該元素?？蛇_(dá)到的效果也同游戲UI設(shè)計(jì)有關(guān)，過于復(fù)雜的UI界面會(huì)影響可達(dá)到的效果。4.2.6合理的運(yùn)用視覺等級(jí)通常，在游戲界面中擁有很多信息，但是在每個(gè)時(shí)間段玩家所關(guān)注的信息的重點(diǎn)可能是不同的。設(shè)計(jì)時(shí)需要考慮這些階段，盡量避免視覺的雜亂，應(yīng)該引導(dǎo)玩家把注意力放在重要的地方。在一致性原則下，每一個(gè)按鈕、對(duì)話框、顏色、字體、位置都為理解界面提供了有效地幫助。清晰的層次關(guān)系為用戶理解游戲的內(nèi)容，降低界面上的陌生感起到至關(guān)重要的作用。4.2.7合理的信息反饋玩家在游戲中進(jìn)行的每一步操作都帶有一定的目的性，所以界面需要隨時(shí)的反饋玩家的操作信息，告訴玩家當(dāng)前的行為：當(dāng)前狀態(tài)、隱藏信息和引導(dǎo)提示等。4.2.8簡(jiǎn)化、規(guī)范化文字描述所有的界面基本上都有文字的存在，大多數(shù)玩家在游戲過程中不會(huì)有心情閱讀大量的文字，過多的文字描述，會(huì)使玩家反感。華麗的辭藻或?qū)I(yè)化的術(shù)語同樣也會(huì)干擾玩家的體驗(yàn)。設(shè)計(jì)師需要讓游戲界面中的文字心量的簡(jiǎn)單化、口語化，這樣更加貼近用戶。動(dòng)手實(shí)踐——制作連字手機(jī)游戲界面動(dòng)手實(shí)踐：制作連字手機(jī)游戲界面源文件：光盤\源文件\第4章\連字手機(jī)游戲界面.psd視頻：光盤\視頻\第4章\連字類手機(jī)游戲界面.swf手機(jī)游戲由于其運(yùn)行設(shè)備的特殊性，與傳統(tǒng)的電腦游戲相比有其自身的特點(diǎn)，這些特點(diǎn)會(huì)直接影響到手機(jī)游戲UI的設(shè)計(jì)。

4.3手機(jī)游戲的特點(diǎn)1．覆蓋用戶群廣泛信息化的今天，電腦已經(jīng)遠(yuǎn)遠(yuǎn)不能解決人們對(duì)信息、娛樂的需求，手機(jī)更能提供隨時(shí)隨地地信息、娛樂服務(wù)。手機(jī)游戲玩家將超過任何游戲平臺(tái)，而且這個(gè)玩家群將覆蓋不同的種族、不同的文化、不同的年齡、不同的職業(yè)。2．便于攜帶與電腦游戲相比，手機(jī)擁有電腦大部分功能，而且小巧輕便。人們可以隨身攜帶，隨時(shí)、隨地進(jìn)行游戲。3．能夠接入網(wǎng)絡(luò)因?yàn)槭謾C(jī)是網(wǎng)絡(luò)設(shè)備，可以實(shí)現(xiàn)多人在線游戲，這比單機(jī)游戲的互動(dòng)性要強(qiáng)的多。4.3.1手機(jī)游戲的優(yōu)勢(shì)1．屏幕尺寸較小手機(jī)的屏幕尺寸相對(duì)較小，在一定程度上限制了內(nèi)容的展示。在一個(gè)游戲界面中不能出現(xiàn)太多的東西，否則小的圖標(biāo)或文字會(huì)給玩家閱讀帶來很大的負(fù)擔(dān)。由于手機(jī)屏幕尺寸較小，在游戲移植方面也有很多問題。電腦游戲移植過來就得重新考慮布局，不僅僅是視覺效果上的布局，還包括交互方面。4.3.2手機(jī)游戲的缺點(diǎn)2．色彩分辨率和音效目前中高端手機(jī)屏幕的分辨率較高，iPhone6plus的分辨率已經(jīng)達(dá)到1080pxX1920px，但是還有許多分辨率并不高的手機(jī)，各種分辨率版本眾多，多版本的分辨率對(duì)于手機(jī)游戲開發(fā)造成一定的難度。．游戲運(yùn)行時(shí)，受CPU、內(nèi)存的影響較大如果在手機(jī)上運(yùn)行較大的游戲，會(huì)出現(xiàn)游戲畫面卡死的現(xiàn)象，這是手機(jī)硬件本身的限制引起的。CPU、內(nèi)存的局限，也會(huì)對(duì)手機(jī)游戲的開發(fā)產(chǎn)生制約。4．易受到干擾當(dāng)玩家正在游戲時(shí)，突然接了一個(gè)電話，就會(huì)中斷游戲。設(shè)計(jì)手機(jī)游戲時(shí)要盡量考慮到這些干擾性因素，需要在后臺(tái)替用戶繼續(xù)保留當(dāng)前的游戲進(jìn)度，而不是繼續(xù)游戲運(yùn)行或退出。動(dòng)手實(shí)踐——設(shè)計(jì)iOS游戲圖標(biāo)動(dòng)手實(shí)踐：設(shè)計(jì)iOS游戲圖標(biāo)源文件：光盤\源文件\第4章\iOS游戲圖標(biāo).psd視頻：光盤\視頻\第4章\iOS游戲圖標(biāo).swf動(dòng)手實(shí)踐——設(shè)計(jì)五子棋手機(jī)游戲界面動(dòng)手實(shí)踐：設(shè)計(jì)五子棋手機(jī)游戲界面源文件：光盤\源文件\第4章\五子棋手機(jī)游戲界面.psd視頻：光盤\視頻\第4章\五子棋手機(jī)游戲界面.swf

4.4

iPad游戲視覺設(shè)計(jì)要素iPad是由蘋果公司開發(fā)的采用iOS系統(tǒng)的平板電腦，提供瀏覽互聯(lián)網(wǎng)、收發(fā)電子郵件、觀看電子書、播放音頻或視頻、玩游戲等功能。由于iPad提供了比iPhone手機(jī)更大的屏幕，所以在iPad上玩游戲可以給玩家?guī)砀玫囊曈X和用戶體驗(yàn)。接下來向大家介紹一些iPad游戲界面設(shè)計(jì)過程中的視覺設(shè)計(jì)要素。圓角、陰影和高光元素廣泛的應(yīng)用于蘋果產(chǎn)品設(shè)計(jì)和iPad游戲界面UI設(shè)計(jì)中，通過這三種視覺圖形元素的添加，可以使游戲圖標(biāo)、界面更加具有質(zhì)感。4.4.1圓角、陰影和高光半透明也是iPad游戲界面中常用的視覺設(shè)計(jì)要素，尤其是用于菜單和邊框設(shè)計(jì)時(shí)，半透明元素可以有效地增強(qiáng)游戲界面的靈動(dòng)、深邃和通透感。另外，半透明也可用于當(dāng)需要在游戲界面中彈出一些面板、對(duì)話框或菜單時(shí)，可以在游戲的整體界面上添加半透明的純色覆蓋，既美觀又不干擾視覺。4.4.2半透明游戲UI設(shè)計(jì)不同于網(wǎng)頁或軟件等其他領(lǐng)域的UI設(shè)計(jì)，游戲UI需要能夠?qū)⑼婕規(guī)氲接螒虍?dāng)中來，顯然擬物化的設(shè)計(jì)風(fēng)格比扁平化的設(shè)計(jì)風(fēng)格更加適合用于游戲UI界面的設(shè)計(jì)。出色的在游戲UI界面中使用擬物化設(shè)計(jì)風(fēng)格，可以在第一眼就打動(dòng)用戶，增加親切感，減少游戲界面給玩家?guī)淼谋涓?，因?yàn)槿藗儗?duì)生活中的事物才是最熟悉的。4.4.3擬物化空間感并不是一個(gè)空泛的概念，而是處處體現(xiàn)在游戲界面設(shè)計(jì)中。它的一個(gè)典型的表現(xiàn)方式，就是打存平面感，用立體和三維方式來展現(xiàn)?？臻g感的設(shè)計(jì)一是可以增加游戲界面的炫酷和華麗，二是可以用于凸顯重要內(nèi)容。4.4.4空間感音效的使用可以讓玩家有身臨其境的感覺，尤其是模擬真實(shí)的音效。例如《植物大戰(zhàn)僵尸》這款游戲，從視覺設(shè)計(jì)的生動(dòng)感、每個(gè)植物和僵尸的角色設(shè)計(jì)、情節(jié)布局的環(huán)環(huán)相扣、甚至是音效的配合都有許多值得學(xué)習(xí)的地方?！吨参锎髴?zhàn)僵尸》這款游戲中大量使用了擬物音效，種植物時(shí)與草地摩擦的聲音、子彈打到僵尸身上的響聲、僵尸來臨時(shí)的恐怖音效、腦子被吃掉的哀嚎。擬物音效讓游戲更加生動(dòng)，不會(huì)蒼白平淡。4.4.5擬物音效動(dòng)手實(shí)踐——設(shè)計(jì)iPad游戲登錄界面動(dòng)手實(shí)踐：設(shè)計(jì)iPad游戲登錄界面源文件：光盤\源文件\第4章\iPad游戲登錄界面.psd視頻：光盤\視頻\第4章\iPad游戲登錄界面.swf動(dòng)手實(shí)踐——設(shè)計(jì)iPad游戲開始界面動(dòng)手實(shí)踐：設(shè)計(jì)iPad游戲開始界面源文件：光盤\源文件\第4章\iPad游戲開始界面.psd視頻：光盤\視頻\第4章\iPad游戲開始界面.swf動(dòng)手實(shí)踐——設(shè)計(jì)iPad游戲運(yùn)行界面動(dòng)手實(shí)踐：設(shè)計(jì)iPad游戲運(yùn)行界面源文件：光盤\源文件\第4章\iPad游戲運(yùn)行界面.psd視頻：光盤\視頻\第4章\iPad游戲運(yùn)行界面.swf4.5.1為什么需要考慮智能手機(jī)的特點(diǎn)？答：智能手機(jī)的共性特點(diǎn)在于其硬件，包括處理器、屏幕、鍵盤、音響甚至電池等。通常，智能手機(jī)的CPU運(yùn)算能力不如PC機(jī)強(qiáng)大，屏幕大小也對(duì)UI設(shè)計(jì)有很大的限制。尤其是全觸摸屏的智能手機(jī)，顯示器和鍵盤都在同一塊空間內(nèi)，如何讓操作不對(duì)顯示造成較大的遮擋也是UI設(shè)計(jì)需要考慮的問題。受制于智能手機(jī)的物理性能，為了兼顧游戲運(yùn)行的性能，游戲UI必定不能占用過多的資源。這也使得手機(jī)游戲畫面不夠精彩、流暢，音效不夠理想。同時(shí)由于移動(dòng)網(wǎng)絡(luò)的限制，智能手機(jī)游戲數(shù)據(jù)的實(shí)時(shí)性難以得到保障，這也是單機(jī)游戲、在線的卡牌游戲、回合制游戲盛行的原因之一。

4.5

專家支招設(shè)計(jì)師在設(shè)計(jì)基于iOS系統(tǒng)的手機(jī)游戲UI時(shí)，需要結(jié)合iOS系統(tǒng)自身的交互特點(diǎn)，以簡(jiǎn)單、自然、友好、一致的設(shè)計(jì)原則為基礎(chǔ)，來設(shè)計(jì)iOS系統(tǒng)手機(jī)游戲UI。在前面的內(nèi)容中已經(jīng)向讀者介紹了有關(guān)iOS系統(tǒng)游戲UI設(shè)計(jì)的方法和技巧，在對(duì)手機(jī)游戲UI進(jìn)行設(shè)計(jì)時(shí)必須考慮到智能手機(jī)的特點(diǎn)以及所使用的操作系統(tǒng)的特點(diǎn)。答：智能手機(jī)畢竟不同于PC，通常在使用PC進(jìn)行游戲時(shí)，用戶可以很方便而且不需要考慮系統(tǒng)資源的同時(shí)進(jìn)行其他的操作。但是對(duì)于智能手機(jī)來說，用戶在運(yùn)行一款高質(zhì)量的大型游戲時(shí)會(huì)集中精力在游戲上，很少會(huì)分散精力和浪費(fèi)系統(tǒng)內(nèi)存去做其他的事。所以，智能手機(jī)游戲UI更貼近用戶。進(jìn)行智能手機(jī)UI設(shè)計(jì)之前，必須進(jìn)行詳細(xì)的UE設(shè)計(jì)。什么是UE？簡(jiǎn)單來說UE（UserExperience）就是用戶體驗(yàn)。UI的開發(fā)過程是迭代的，在開發(fā)過程中也要不斷的進(jìn)行UE的測(cè)試，并依據(jù)UE的設(shè)計(jì)進(jìn)行調(diào)整。所以在進(jìn)行UI的設(shè)計(jì)時(shí)，不能僅僅考慮游戲的操作性，而應(yīng)該同時(shí)進(jìn)行UE設(shè)計(jì)。4.5.2手機(jī)游戲UI設(shè)計(jì)與UE是什么關(guān)系？iOS系統(tǒng)游戲