經(jīng)過(guò)漫長(zhǎng)的審核期，IOS版英雄殺終于在AppStore上與大家見面了，回想之前在項(xiàng)目工作中的點(diǎn)點(diǎn)滴滴，飽含了糾結(jié)，苦逼與歡樂(lè)；特借這發(fā)布的時(shí)機(jī)把這些點(diǎn)滴做一個(gè)匯總記錄，是分享也是一次自我提升的過(guò)程。

交互美術(shù)血淚史，是要有多擠！

“能不能給我?guī)紫袼氐目臻g，緊緊的把那界面畫個(gè)完全。”

珍惜生命，遠(yuǎn)離擁擠！

GUI的控訴：“死交互，尼瑪要不要給老子留點(diǎn)空間哇！老子要畫陰影有木有！”

苦逼交互：“交互圖都精確到1像素了有木有” T.T 555~

蝸居在3.5英寸的屏幕里，讓我們不得不與擁擠的界面做著艱苦卓絕的斗爭(zhēng)。

關(guān)于IPhone4的屏幕尺寸

物理尺寸3.5英寸

像素—Iphone4屏幕像素960*640px

交互圖使用的尺寸

方案一：使用實(shí)際物理尺寸

轉(zhuǎn)換到像素大小為：292*196px

也就是在電腦屏幕上看到的物理尺寸與手機(jī)屏幕上的物理尺寸一致

方案二：使用實(shí)際像素尺寸

像素大小為960*640px

方案一的優(yōu)點(diǎn)，可以較直接的掌控按鈕大小，控件設(shè)計(jì)的大還是小，符不符合手指操作，直接就能感受的到；

但在嘗試了之后發(fā)現(xiàn)…。.現(xiàn)實(shí)往往比想象的殘酷！！OMG！字都坨成素了~

英雄殺界面元素太多了，這種方式只能適用于界面元素較少的應(yīng)用

那么試試方案二吧

雖然設(shè)計(jì)起來(lái)方便了很多，但是大小卻沒(méi)有那么好把握了，實(shí)際放到手機(jī)上一瞧~“絲~腫么這么小~”

折中方案

方案三：使用比實(shí)際像素小一半的尺寸480*320px；

既能將界面元素畫下，又能盡量的掌控到尺寸；

最終選定的是480*320畫交互圖

那么我們的480*320的界面到底有多少內(nèi)容呢？

讓我來(lái)看一下客戶端八人場(chǎng)的界面吧

這個(gè)界面的大小是1024*738px，我們要做的就是把這所有的內(nèi)容放置480*320px內(nèi)，卡牌、按鈕、文字還必須都要放大！

苦逼的編輯，編輯，再編輯

整理后的需求層級(jí)如下：

第一層編輯：充分展示核心層的內(nèi)容，輔助層可以進(jìn)行可進(jìn)行隱藏，信息層在不影響核心游戲的情況下盡量展示清晰。

第二層編輯：細(xì)節(jié)調(diào)整縮小頭像，武器裝備以文字形式展示。

第三層編輯：調(diào)整操作方式，如：將技能面板調(diào)整成可收展面板。

標(biāo)簽： 交互設(shè)計(jì) 英雄殺項(xiàng)

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。