小編導(dǎo)讀：本文從設(shè)計(jì)人員的角度出發(fā)，提出了移動(dòng)端設(shè)計(jì)與傳統(tǒng)桌面端設(shè)計(jì)的不同之處，同時(shí)歸納總結(jié)并比較了多種主流的設(shè)計(jì)模式和信息架構(gòu)，旨在幫助設(shè)計(jì)、產(chǎn)品、開發(fā)相關(guān)人員更好的思考移動(dòng)端設(shè)計(jì)。分享給大家，希望有所幫助和啟發(fā)。

　　大約在1993年，我父親帶回家一部體型碩大、形似磚頭的移動(dòng)電話。當(dāng)時(shí)，我們?nèi)胰硕紝?duì)這個(gè)稀物表示難以置信的興奮，但是沒有人會(huì)認(rèn)為它會(huì)對(duì)我們的生活產(chǎn)生巨大影響。幾年后，當(dāng)我的一些朋友決定購(gòu)買它時(shí)，我仍然會(huì)把它看作是一種花樣和噱頭。

　　如今全世界共有60億移動(dòng)訂閱用戶，意味著如果人手一部移動(dòng)電話，那么世界上87%的人便擁有移動(dòng)電話。然而，將近有30億人使用臺(tái)式電腦，這和移動(dòng)電話使用情況差別很大。

　　移動(dòng)設(shè)備存在于我們的生活中，隨之而來也為移動(dòng)端設(shè)計(jì)帶來了一系列新的限制和機(jī)遇。讓我們來看看設(shè)計(jì)方法會(huì)如何得以更新。

　　移動(dòng)有何不同?

　　關(guān)于移動(dòng)設(shè)計(jì)，我們最先需要了解的是它的不同之處，這并不僅僅指尺寸的不同。移動(dòng)設(shè)備的屬性與規(guī)格也帶來了不同的設(shè)計(jì)啟示和要求。由于移動(dòng)設(shè)備更輕更便攜，我們通常覺得它們更便于使用。通過頻繁使用移動(dòng)設(shè)備，我們與它們之間建立了獨(dú)特而富有情感的聯(lián)系。

　　物理屬性和特征

　　大部分移動(dòng)設(shè)備都是觸摸屏，用戶依賴于手勢(shì)——加上簡(jiǎn)單的界面元素進(jìn)行交互操作。由于它們尺寸更小，我們有時(shí)希望它上面的內(nèi)容結(jié)構(gòu)更小更簡(jiǎn)潔。同時(shí)，由于有限的帶寬和連接速率，移動(dòng)設(shè)備需要設(shè)計(jì)上充分利用加載時(shí)間，從而減少數(shù)據(jù)請(qǐng)求。

　　何時(shí)，何地，做什么

　　由于我們不斷地接觸移動(dòng)設(shè)備，我們傾向于更頻繁地使用它們，無(wú)論是在公交車上，大街上，或者看電視時(shí)。我們經(jīng)常一邊做事情一邊使用它們，這意味著我們可能在困難的閱讀環(huán)境下，或是各種干擾下使用移動(dòng)設(shè)備。

　　我們的行為和感覺如何

　　最終，我們?cè)谑褂靡苿?dòng)設(shè)備時(shí)產(chǎn)生了不同的態(tài)度，行為和優(yōu)先順序。“用戶體驗(yàn)設(shè)計(jì)咨詢公司Foolproof”在“Going Mobile 2012”的研究中發(fā)現(xiàn)，這些設(shè)備給予我們一種對(duì)于“自由”和“控制”的新感覺。換句話說，一些用戶對(duì)他們的移動(dòng)設(shè)備產(chǎn)生了非常真實(shí)的感情。Foolproof發(fā)現(xiàn)，63%的人在沒有移動(dòng)設(shè)備時(shí)感到失落。他們把移動(dòng)設(shè)備看成是“活的”……是他們身體和人格的一種延伸。

　　由于移動(dòng)設(shè)備已經(jīng)從根本上改變了人們的預(yù)期，對(duì)于我們?cè)O(shè)計(jì)師而言，采用“以用戶為中心”的設(shè)計(jì)思路來提供解決方案則顯得尤為重要。唯一的問題就是我們的傳統(tǒng)最佳實(shí)踐可能不管用了。

　　移動(dòng)(環(huán)境)如何影響著設(shè)計(jì)師們

　　移動(dòng)的不同直接影響著“以用戶為中心”設(shè)計(jì)流程的方方面面：從用戶研究到最終的開發(fā)測(cè)試。影響最大的是我們的分發(fā)方式和信息架構(gòu)。

　　移動(dòng)分發(fā)方式

　　不像傳統(tǒng)網(wǎng)站，移動(dòng)端有四大著名的分發(fā)方法。移動(dòng)用戶可以選擇在他們的瀏覽器上查看內(nèi)容，這些內(nèi)容要么是針對(duì)移動(dòng)端設(shè)計(jì)的網(wǎng)站，要么是響應(yīng)式的——意味著它會(huì)針對(duì)移動(dòng)端重新布局。還有一部分用戶選擇安裝App，這些App要么是原生的，要么是混合的(原生+WebView)。原生應(yīng)用有自我局限性：需要預(yù)先定制適配各種屏幕的應(yīng)用?；旌闲蛻?yīng)用則更靈活，它們從互聯(lián)網(wǎng)上讀取內(nèi)容(就像在瀏覽器中看內(nèi)容那樣)，但提供給用戶“像App那樣的“界面。

　　每一種分發(fā)方式都有優(yōu)缺點(diǎn)。可以根據(jù)你項(xiàng)目的設(shè)計(jì)背景進(jìn)行合適的選擇。(下面的表格，星星越多越好)

　　移動(dòng)信息架構(gòu)

　　移動(dòng)設(shè)備也有它自己的信息架構(gòu)模式。例如，響應(yīng)式網(wǎng)站架構(gòu)會(huì)遵循更多的“標(biāo)準(zhǔn)”模式，而原生app，經(jīng)常使用基于“Tab頁(yè)簽”的導(dǎo)航結(jié)構(gòu)。同時(shí)，在架構(gòu)一個(gè)移動(dòng)網(wǎng)站或應(yīng)用時(shí)，沒有“正確”的方法。相對(duì)的，讓我們看看一些著名的設(shè)計(jì)模式：層級(jí)結(jié)構(gòu)(Hierarchy)、集中和分發(fā)(Hub&spoke)、重疊放置(Nested doll)、頁(yè)簽視圖(Tabbed view)、便當(dāng)盒(Bento box)和過濾視圖(Filtered view)：

　　層級(jí)結(jié)構(gòu)(Hierarchy)

　　層級(jí)模式是一種標(biāo)準(zhǔn)的網(wǎng)站架構(gòu)，有一個(gè)主頁(yè)和一系列子頁(yè)面。如果你正在設(shè)計(jì)一個(gè)響應(yīng)式網(wǎng)站，你可能會(huì)受限于這個(gè)模式。但是，引入額外的模式會(huì)使你根據(jù)移動(dòng)端的經(jīng)驗(yàn)進(jìn)行裁剪。

　　Luke Wroblewski的“移動(dòng)優(yōu)先”策略幫助我們優(yōu)先關(guān)注首要對(duì)象：功能和用戶操作路徑將會(huì)幫助我們打造良好的用戶體驗(yàn)。

　　適合：對(duì)于需要依據(jù)桌面網(wǎng)站架構(gòu)進(jìn)行設(shè)計(jì)而言，能夠很好的組織復(fù)雜的網(wǎng)站結(jié)構(gòu)。

　　當(dāng)心：導(dǎo)航。當(dāng)用戶使用小屏幕時(shí)，多層導(dǎo)航架構(gòu)會(huì)引起問題。

　　集中和分發(fā)(Hub&spoke)

　　集中和分發(fā)模式會(huì)在導(dǎo)航時(shí)給予你一個(gè)中心索引。這是蘋果iPhone的默認(rèn)導(dǎo)航模式。用戶不能在不同子欄目中進(jìn)行跳轉(zhuǎn)，必須回到索引頁(yè)面。這種模式在工作流程受限的桌面軟件上使用很久了(主要由于技術(shù)限制，像表單或者購(gòu)買流程)，但是，由于用戶在移動(dòng)場(chǎng)景上會(huì)關(guān)注于一個(gè)任務(wù)(除了設(shè)備的組成元件之外)，這種設(shè)計(jì)正變得更加普及，而全局導(dǎo)航在這種情況下會(huì)很難用。

　　適合：多功能工具，每個(gè)功能有一個(gè)獨(dú)立的內(nèi)部導(dǎo)航和目標(biāo)。

　　當(dāng)心：用戶想要多任務(wù)時(shí)。

　　重疊放置(Nested doll)

　　重疊放置模式讓用戶以線性方式查看詳細(xì)內(nèi)容。當(dāng)用戶迷路時(shí)，這種設(shè)計(jì)能快速和方便地為用戶導(dǎo)航。它也給用戶一種強(qiáng)烈的感覺，通過向前和向后的操作，告訴他們處于整個(gè)內(nèi)容結(jié)構(gòu)中的位置。

　　適合：有著單一的，或者相關(guān)話題的App或者網(wǎng)站。也能用于其他父級(jí)模式中的的子模式，如標(biāo)準(zhǔn)層次機(jī)構(gòu)模式或集中&分發(fā)模式。

　　不適合：無(wú)法快速在不同模塊中切換的用戶，此類用戶希望這樣做來判斷是否某一模塊適合他們，而不是把模塊作為瀏覽內(nèi)容的障礙存在。

　　頁(yè)簽視圖(Tabbed view)

　　這種模式對(duì)于常規(guī)app的用戶而言十分熟悉。它通過一個(gè)工具條菜單將一組區(qū)塊組合在一起，從而允許用戶在首次使用時(shí)快速瀏覽和了解app的全部功能。

　　適合：基于工具的app，多任務(wù)，且主題相似。

　　當(dāng)心：復(fù)雜的。這種模式適合簡(jiǎn)單內(nèi)容結(jié)構(gòu)的應(yīng)用。

　　便當(dāng)盒(Bento box)

　　便當(dāng)盒，或儀表盤模式，通過使用組件展示相關(guān)工具或內(nèi)容的一部分，直接在首屏就能夠帶來更詳細(xì)的內(nèi)容呈現(xiàn)。由于它的復(fù)雜性，相比手機(jī)端，這種模式更適合于平板。由于允許用戶對(duì)關(guān)鍵信息一目了然，這種模式顯得很強(qiáng)大。但是，其也嚴(yán)重依賴于設(shè)計(jì)良好，信息呈現(xiàn)清晰的界面。

　　適合：多功能工具，以及基于內(nèi)容，具有相似主題的平板app。

　　當(dāng)心：平板屏幕給予你更多的空間利用這個(gè)模式，但是，了解用戶如何在不同頁(yè)面之間進(jìn)行交互使用，來確認(rèn)app的易用性、有效性和娛樂性，是件非常重要的事。

　　過濾視圖(Filtered view)

　　過濾視圖最終允許用戶通過選擇過濾條件創(chuàng)造不同視圖，來在一系列數(shù)據(jù)之間進(jìn)行導(dǎo)航。過濾，和使用“面搜索”一樣，從允許用戶瀏覽適合自己的內(nèi)容而言，是一種很好的方法。

　　適合：擁有大量?jī)?nèi)容的App或者網(wǎng)站，例如文章、圖片和視頻。對(duì)于雜志類型的app或網(wǎng)站，或者作為其他導(dǎo)航模式的子模式而言，是個(gè)好選擇。

　　當(dāng)心：移動(dòng)。由于其復(fù)雜性，過濾器和面搜索在小屏幕上的展示會(huì)很困難。

　　下一步

　　這是近二十年以來我第一次看到大磚形手機(jī)，(且大概12年前我買了我的第一臺(tái)手機(jī))?，F(xiàn)在，我、我父親和幾乎我認(rèn)識(shí)的每一個(gè)人都有智能機(jī)，我們通過智能機(jī)有規(guī)律地、頻繁地互動(dòng)、通信和管理我們的生活。每年技術(shù)會(huì)有個(gè)飛躍，很明顯我們需要和它一起改變。

　　設(shè)計(jì)出一個(gè)對(duì)移動(dòng)端友好的信息架構(gòu)僅是創(chuàng)建優(yōu)秀移動(dòng)應(yīng)用的第一步。在第2部分——設(shè)計(jì)注意事項(xiàng)中，我將解釋移動(dòng)環(huán)境的不同將如何影響你設(shè)計(jì)的最終方案。

　　本文作者：@ Elaine 翻譯@ 馬迪