1. 設(shè)計(jì)背景

　　1.1 豐滿的理想——觸控目標(biāo)大小的定義

人們用他們的手指對(duì)觸摸式界面進(jìn)行操作，界面的控件必須足夠大，以避免誤操作的產(chǎn)生。在iPhone Human Interface Guideline，蘋(píng)果建議最小觸控尺寸是88*88 px(針對(duì)Retina Display，326 ppi)。

(引用http://www.lukew.com/ff/entry.asp?1085，by Luke Wroblewski May 4, 2010)

　　1.2 骨感的現(xiàn)實(shí)——僧多粥少

當(dāng)我設(shè)計(jì)四人斗地主(兩副牌：地主33張牌，農(nóng)民25張牌)的時(shí)候;iPhone 4S的寬度是74.5mm,我們?cè)囍鲆粋€(gè)除法運(yùn)算，74.5÷33=2.25mm。這個(gè)數(shù)值與人們食指8mm(來(lái)源于麻省理工觸控學(xué)院數(shù)據(jù))和 Windows最佳觸控區(qū) 7mm的數(shù)據(jù)相比，相差3倍之多。這個(gè)2.25mm間隙的手牌操控如果不加以處理，再加上移動(dòng)終端操作的場(chǎng)景的多變性，根本無(wú)法達(dá)到用戶的可用性的最低標(biāo)準(zhǔn)。

1. 三人斗地主沒(méi)意思，太簡(jiǎn)單，手牌好壞決定牌的結(jié)局。

2. 任意組合牌，千變?nèi)f化，可以提高牌技。

3. 在其他玩家出牌時(shí)，希望可以手動(dòng)組合手中的牌。

我們不難發(fā)現(xiàn)，四人斗地主的主要優(yōu)勢(shì)在于各種牌型的組合，這也是玩家選擇這款游戲的主要?jiǎng)訖C(jī)，而目前我們現(xiàn)實(shí)情況(屏幕小、手牌多)導(dǎo)致玩家手牌操作非常困難，所以我們?cè)O(shè)計(jì)的重點(diǎn)就是使玩家操作手牌變得更加便捷。為此我們?cè)贒emo時(shí)期也嘗試了各種解決方案。

2. 探索最佳體驗(yàn)的可能性——手牌設(shè)計(jì)方案

2.1 水平重疊式

　　優(yōu)點(diǎn)：

1. 玩家可以快速、準(zhǔn)確的定位到他期望選擇的牌，多選的起點(diǎn)比較容易。

2. 玩家可以直觀的看清楚自己每組牌的張數(shù)。

3. 方便玩家完成出單張和順子的操作。

　　缺點(diǎn)：

1. 玩家選擇出每組牌里面的幾張牌(牌數(shù)少于這組牌總牌數(shù))，終點(diǎn)定位比較難。

2. 適合從右向左開(kāi)始選牌的玩家，不過(guò)讓玩家自己發(fā)現(xiàn)規(guī)律可以使玩家獲得意外的驚喜。

2.2 豎直方向重疊

1. 3、5、7張組合數(shù)的牌型很難顯示。

2. 不能多選。

3. 選擇每組牌中若干張牌也比較麻煩，例如選擇4個(gè)8中的3個(gè)8。

這種組合不太適合我們四人斗地主快速多選、出順子等核心操作的需求，所以我們最終放棄嘗試了。

2.3 扇形的排列方式

　　優(yōu)點(diǎn)：

1. 如上圖，這種弧線的排列與直線排列相比增大了牌間距，弧線的路徑大于直線的路線。

2. 排列符合真實(shí)場(chǎng)景，虛擬現(xiàn)實(shí)和體驗(yàn)真實(shí)感較強(qiáng)。

　　缺點(diǎn)：

1. 雖然視覺(jué)上更符合真實(shí)場(chǎng)景，但是弧形的手牌操作路徑難度較高，精準(zhǔn)度也不高。

2. 玩家只能限制在最外圍的操作才能保證準(zhǔn)確性，導(dǎo)致準(zhǔn)確的操作范圍很局限。

3. 扇形占據(jù)更大的空間，使其他的空間變得更小，在與其他玩家互動(dòng)上也比較不方便。

2.4 附幾種方案設(shè)計(jì)草圖對(duì)比

　　3. 最佳排列方式：水平分組的實(shí)現(xiàn)

　　3.1 交互設(shè)計(jì)創(chuàng)新實(shí)現(xiàn)

2. 牌型數(shù)量：A、2、3、4…….10、J、Q、K、王;所有地主手牌組數(shù)最大的情況是14組，任何牌都有。

3. 最后一張是整張牌一起顯示的，所以14組牌型都有的話，就是一個(gè)P，13個(gè)M，19N。以iPhone4s 橫屏寬度為例。

4. 13M+19N+P+2A=960; 13M+19N=960-P-2A (P和A的值是美術(shù)效果圖設(shè)定的，建議減少A的值)

5. 原則：調(diào)整M的值，要使M的值在此基礎(chǔ)上盡可能大，N的值最小是能夠看得清楚牌即可。

6. 算法1.讓M= 系數(shù)*N ，所以13M+19N=960-P-2A ，這樣在(21-33)牌的時(shí)候，M，N可以動(dòng)態(tài)的分配這個(gè)寬度。

7. 算法2.讓M固定，在M>N前提和(21-33)前提下，N的值慢慢變大。

8. 當(dāng)剩下20張時(shí)候，開(kāi)始均勻排列。假設(shè)20張均勻排列的時(shí)候每張牌的間隙是Z，那么19Z+P+2A=960。 Z=(960-2A-P)/19，Z的大小不會(huì)變的。

9. 20張以下，Z不變，就和普通均勻分布一樣即可。

10. 在牌數(shù)減少的情況，盡量快速增加N的值。

3.2 程序算法的實(shí)現(xiàn)

通常游戲的處理(均勻牌間距)

手牌展示寬度 = 牌間隔 * 最大牌數(shù)

900 = 26 * 33

手牌展示寬度 = 牌間隔 * 最大牌數(shù)

900 = 35 * 25

最大手牌33張的分組情況

手牌展示寬度 = 牌間隔 * 最大牌數(shù) + 分組附加間隔 * 分組數(shù)

900 = 20 * 33 + 14 * 15

手牌大于17張的展示

手牌展示寬度 = 牌間隔 * 最大牌數(shù) + 分組附加間隔 * 分組數(shù)

900 = 38 * 17 + 14 * 10

(分組數(shù)為大致的平均值，實(shí)際情況按實(shí)際手牌會(huì)有浮動(dòng)，所以手牌展示寬度以接近最大展示區(qū)域900為宜)

手牌在33張到17張期間，牌間隔為變化值，保證能最大展示手牌的寬度，以方便操作。當(dāng)小于17張時(shí)，間距不再動(dòng)態(tài)變化。

4. 兩副牌游戲創(chuàng)新點(diǎn)總結(jié)

創(chuàng)新點(diǎn)1：

(菲茨定律與互聯(lián)網(wǎng)設(shè)計(jì) Fitts’Law，http://cdc.tencent.com/?p=6122，騰訊CDC)

　　優(yōu)點(diǎn)：

1. 方便單選。

2. 方便出順子。

3. 方便多選時(shí)定位初始位置。

4. 方便查看手牌，玩家更容易理解自身的手牌情況。

　　創(chuàng)新點(diǎn)2：

在17-33牌之間(17張牌的閥值借用三人斗地主成功經(jīng)驗(yàn))，保持手牌總寬度不變，牌減少增加的空隙，分別分配給每組牌的非首張牌。原三人斗地主設(shè)計(jì)是牌減少時(shí)，保持牌間距不變，而減少總寬度。

　　優(yōu)點(diǎn)：

1. 隨著牌數(shù)量的減少增加手牌間隙。

2. 在間隙增量的分配時(shí)，使每組非首張的手牌獲得更大的增量。

3. 方便多選時(shí)定位終點(diǎn)。

創(chuàng)新點(diǎn)3：

手指滑動(dòng)經(jīng)過(guò)的區(qū)域的手牌都被提起，手指滑動(dòng)的起點(diǎn)和終點(diǎn)可以在手牌兩邊與屏幕邊緣的區(qū)域。

　　新：

　　優(yōu)點(diǎn)：

1. 多選邊緣區(qū)域的牌時(shí)，選擇手牌的起點(diǎn)或者終點(diǎn)可以獲得“無(wú)限可選中”。

2. 最后一把時(shí)，起點(diǎn)和終點(diǎn)均為“無(wú)限可選中”狀態(tài)，可以獲得一掃而起的出牌快感。

5. 未來(lái)設(shè)計(jì)指導(dǎo)總結(jié)

小屏幕移動(dòng)終端在設(shè)計(jì)多副牌類(lèi)游戲的時(shí)候，勢(shì)必會(huì)遇到手牌操作區(qū)域有限的問(wèn)題，我在此總結(jié)了一下前期摸索的一些成果和經(jīng)驗(yàn)。

不同的游戲?qū)?yīng)不同手牌操作方式。例如，《QQ無(wú)線升級(jí)》就采用手牌均勻排列方式，手牌操作規(guī)則是：第一次點(diǎn)擊放大對(duì)應(yīng)花色的牌，縮小其他花色;第二次才選中目標(biāo)牌;由于升級(jí)特定的游戲規(guī)則，決定了每次采用兩步出牌的方式很適合。但是同樣這種方式不適合四人斗地主。

歸根到底，棋牌游戲規(guī)則決定了其交互方式。就棋牌游戲交互方式而言沒(méi)有最好的，只有最合適的，讓我們一起去探索最好的游戲體驗(yàn)吧。

來(lái)源：騰訊GDC