一款小小的工具軟件，如何贏得  iPhone app store4星級(jí)+評(píng)價(jià)；Android 電子市場(chǎng)4.5星評(píng)價(jià)，讓我與您一起分享手機(jī)令牌的設(shè)計(jì)過(guò)程

什么是手機(jī)令牌？

　　手機(jī)令牌是通過(guò)6位動(dòng)態(tài)密碼保護(hù)QQ帳號(hào)、Q幣和游戲裝備等虛擬財(cái)產(chǎn)安全的手機(jī)軟件。手機(jī)令牌每30S更換一次動(dòng)態(tài)密碼，用戶(hù)在敏感操作的時(shí)候驗(yàn)證動(dòng)態(tài)密碼，以此保障自己的帳號(hào)安全。簡(jiǎn)單的說(shuō)：手機(jī)令牌是一個(gè)動(dòng)態(tài)密碼的生成軟件。是我們專(zhuān)為保護(hù)用戶(hù)QQ帳號(hào)安全設(shè)計(jì)的手機(jī)APP。

　　設(shè)計(jì)工作主要包括：手機(jī)令牌風(fēng)格設(shè)定、新手綁定、更換及設(shè)置流程，以及AQ網(wǎng)站宣傳三部分。

　　下載地址：http://aq.qq.com/cn/manage/token/download

　　如何把一個(gè)簡(jiǎn)單的工具型軟件做好，我們做了以下設(shè)計(jì)思考：

一、確定清晰的框架和結(jié)構(gòu)

　　手機(jī)令牌2.0是一款工具類(lèi)型的APP，在做框架設(shè)計(jì)的時(shí)候，應(yīng)展現(xiàn)的是此APP的主要界面（動(dòng)態(tài)密碼），其次才是“設(shè)置”操作。

　　我們利用iPhone平臺(tái)的特性，將放在了正面與背面進(jìn)行展示，使得此軟件結(jié)構(gòu)清晰明了。而在Android平臺(tái)，我們則利用了本身的menu菜單鍵呼出option菜單的方式進(jìn)行設(shè)置操作。 

iPhone平臺(tái)：

Android平臺(tái)：

二、激活和使用的操作流程便捷性，細(xì)節(jié)決定成敗

　　為了讓用戶(hù)能快速了解如何使用令牌，每一部操作都在考慮用戶(hù)預(yù)期如何，用戶(hù)操作后所得到的反饋如何，是否準(zhǔn)確，令牌在產(chǎn)品的規(guī)劃和設(shè)計(jì)的細(xì)節(jié)上都充分考慮了這些。

　　用戶(hù)在第一次打開(kāi)產(chǎn)品時(shí)，需要app自動(dòng)發(fā)送一條短信確認(rèn)身份后才能激活，在使用過(guò)程中，我們需要充分的提醒用戶(hù)每一步操作的原因，下一步會(huì)怎樣，還有操作后的反饋是怎樣。而令牌自發(fā)布后，沒(méi)有接到一例關(guān)于使用上的投訴或疑問(wèn)，而令牌本身，在使用上，也沒(méi)有提供任何一個(gè)FAQ，我們將教育結(jié)合在了操作和使用當(dāng)中。

　　令牌在初期規(guī)劃時(shí)，設(shè)計(jì)師利用了草圖設(shè)計(jì)軟件mockups，設(shè)計(jì)了低保真交互原型初稿，快速搭建使用流程并與產(chǎn)品討論修改，流程界面如下圖：

三、遵循平臺(tái)軟件設(shè)計(jì)規(guī)范

　　我們的產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)雖然只有3人，但是對(duì)于細(xì)節(jié)和精品的追求，讓我們決定針對(duì)不同平臺(tái)，完全重新設(shè)計(jì)產(chǎn)品交互/UI，每一個(gè)細(xì)節(jié)都按照系統(tǒng)特色重新設(shè)計(jì)。

　　iPhone令牌的“設(shè)置”按鍵一目了然，即按即點(diǎn)，點(diǎn)擊后界面翻轉(zhuǎn)至背面進(jìn)行設(shè)置，對(duì)于Android令牌，則必須充分利用“menu”和“返回”的物理按鍵，這樣也使得Android的頁(yè)面更加簡(jiǎn)潔：

四、擬物化風(fēng)格，移動(dòng)設(shè)計(jì)的靈魂

　　經(jīng)過(guò)總結(jié)和分析各類(lèi)手持設(shè)備中的項(xiàng)目，尤其是在觸摸屏手持設(shè)備中，發(fā)現(xiàn)了UI擬物化風(fēng)格有其必然性和合理性，虛擬的體驗(yàn)來(lái)源于真實(shí)生活的實(shí)際體驗(yàn)的積累，讓指尖在與設(shè)備互動(dòng)中感受正式的場(chǎng)景。結(jié)合手機(jī)令牌的用戶(hù)需要，以及各個(gè)平臺(tái)上手機(jī)特色需要，大膽進(jìn)行設(shè)計(jì)暢想。

　　因此手機(jī)令牌選擇了盾牌作為擬物的核心要素，盾牌是自然的保護(hù)與安全的代言，直接讓用戶(hù)感覺(jué)到手機(jī)令牌對(duì)QQ安全的呵護(hù)。

　　當(dāng)然單純的盾牌并不能引發(fā)視覺(jué)沖擊，也不能解決令牌中一堆數(shù)字展現(xiàn)的單調(diào)乏味。所以我們創(chuàng)造性的引入了類(lèi)似心電圖的概念，表達(dá)了數(shù)字更新的同時(shí)增添了科技感，而數(shù)字的快速翻動(dòng)和變化的效果，讓數(shù)字更換的情景表現(xiàn)的更加淋漓盡致。尤其是有很多用戶(hù)反饋，會(huì)一直盯著手機(jī)屏幕中，動(dòng)態(tài)密碼每隔30秒跳躍的動(dòng)畫(huà)看，也許這就是設(shè)計(jì)中的細(xì)節(jié)吸引了用戶(hù)，打動(dòng)了用戶(hù)。

五、讓用戶(hù)感到驚喜，引入手勢(shì)操作（高級(jí)功能）

　　令牌是一款非常單純的工具軟件，如何在這樣的簡(jiǎn)單軟件中引入手勢(shì)，給用戶(hù)驚喜，讓用戶(hù)在使用時(shí)也能挖掘出一些高級(jí)功能，從而提高用戶(hù)體驗(yàn)，是一個(gè)值得考慮的問(wèn)題。最后，我們考慮到了令牌時(shí)間校準(zhǔn)這樣一個(gè)功能，雖然用戶(hù)使用的時(shí)間不多，但是對(duì)于使用此功能的用戶(hù)，將會(huì)非常得意于此功能，因?yàn)槲覀円肓嘶蝿?dòng)校準(zhǔn)時(shí)間，晃動(dòng)本身就有將無(wú)序變?yōu)橛行蛑狻Ｔ谠黾佑脩?hù)體驗(yàn)的同時(shí)，符合用戶(hù)操作預(yù)期。

六、屏幕適配

　　這個(gè)難題在Android系統(tǒng)上格外突出，如何適配android手機(jī)不同像素的分辨率，320×240，480×320，800×480，854×480？

　　出多個(gè)版本？我們只有一位視覺(jué)設(shè)計(jì)師和一位開(kāi)發(fā)同學(xué)，必須在資源有限的情況下用一個(gè)版本解決這些適配問(wèn)題。在閃屏畫(huà)面，如何做到一張圖片適配這么多屏幕？而保證不出現(xiàn)字跡模糊或者圖片變形？

　　我們采用了一個(gè)非常簡(jiǎn)單的方法，閃屏畫(huà)面中間采用了過(guò)渡色，下方采用純白色處理。對(duì)于閃屏界面，直接默認(rèn)先畫(huà)出純白色的背景，然后將閃屏圖片置頂。形成如下圖：

　　對(duì)于令牌主頁(yè)面的全擬物風(fēng)格，如何適應(yīng)這些不同的分辨率，我們也做了統(tǒng)一適配處理：我們先采用了木材背景填充頁(yè)面所有位置,針對(duì)不同的分辨率，程序先檢測(cè)手機(jī)分辨率，然后針對(duì)不同的分辨率，將盾牌擺放在不同的高度。當(dāng)然，高度還要充分考慮到menu鍵呼出option菜單后的效果，大家可以留意下不同手機(jī)看到的盾牌距離狀態(tài)欄的距離，如下圖所示： 

　　其他場(chǎng)景也采用了類(lèi)似方法處理屏幕適配性。

　　在進(jìn)行了充分的思考后，我們使用了一個(gè)670k的安裝包，適配了Android的所有機(jī)型，并且在電子市場(chǎng)獲得了4.5星級(jí)的高分。

七、項(xiàng)目組全員參與產(chǎn)品體驗(yàn)與設(shè)計(jì)

　　手機(jī)令牌的整個(gè)項(xiàng)目過(guò)程中，不少細(xì)節(jié)的優(yōu)化，是來(lái)自于產(chǎn)品和開(kāi)發(fā)同學(xué)的創(chuàng)意。

　　在此，特別感謝為手機(jī)令牌項(xiàng)目付出努力的產(chǎn)品和開(kāi)發(fā)同學(xué)，沒(méi)有你們的努力與建議，手機(jī)令牌不會(huì)取得現(xiàn)在的成績(jī)！