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

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

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

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

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

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

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

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

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

iPhone平臺：

Android平臺：

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

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

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

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

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

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

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

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

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

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

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

五、讓用戶感到驚喜，引入手勢操作（高級功能）

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

六、屏幕適配

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

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

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

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

其他場景也采用了類似方法處理屏幕適配性。

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

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

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

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

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