信息架構(gòu)之移動(dòng)端設(shè)計(jì)與傳統(tǒng)桌面端設(shè)計(jì)的不同之處

1 評論 19540 瀏覽 10 收藏 13 分鐘

譯者注:本文從設(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ā)。

英文原文: http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/

—————————————————-

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

如今全世界共有60億移動(dòng)訂閱用戶,意味著如果人手一部移動(dòng)電話,那么世界上87%的人便擁有移動(dòng)電話。然而,將近有30億人使用臺式電腦,這和移動(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)系。

絕大多數(shù)移動(dòng)設(shè)備配有觸摸屏,用戶主要通過手勢以及一些簡單的界面元素進(jìn)行操作。由于受限于屏幕尺寸,有時(shí)我們希望屏幕中的顯示內(nèi)容結(jié)構(gòu)更簡單精致。同樣由于受限于帶寬和連接速度,移動(dòng)端上的設(shè)計(jì)需要優(yōu)化加載時(shí)間,減少數(shù)據(jù)請求。

  為何,何地與何時(shí)

由于需要不間斷查看手機(jī)信息,我們往往會(huì)更頻繁地使用手機(jī)。乘坐公交車時(shí)、街上漫步時(shí)或看電視時(shí),它們都無處不在。甚至,我們通?!白觥币恍┢渌虑闀r(shí)也在使用。這意味著我們可能在一些復(fù)雜的視覺環(huán)境下或是一系列干擾條件下使用手機(jī)。

  我們?nèi)绾涡袆?dòng)和感知

使用移動(dòng)設(shè)備時(shí),我們有不同的態(tài)度、行為和優(yōu)先級。作為Going Mobile 2012研究的一部分,用戶體驗(yàn)設(shè)計(jì)機(jī)構(gòu)Foolproof 指出移動(dòng)設(shè)備賦予我們一種新的自由感和控制感。還有一些用戶反而對他們的移動(dòng)設(shè)備產(chǎn)生了非常真實(shí)的情感。Foolproof指出當(dāng)智能電話不在身邊時(shí),63%的人會(huì)感到失落不安。他們把這些設(shè)備描述為“有生命的”,是他們身體和人格的一種延伸。

移動(dòng)設(shè)備從根本上改變了用戶的期望,因此對于設(shè)計(jì)師而言,非常重要的一點(diǎn)是遵從以用戶為中心的設(shè)計(jì)流程來進(jìn)行設(shè)計(jì)。但存在的問題在于:以往那些最佳的傳統(tǒng)實(shí)踐方法并不總是可以參照。

 移動(dòng)如何影響設(shè)計(jì)師

移動(dòng)設(shè)備的差異化直接作用于以用戶為中心的設(shè)計(jì)的整個(gè)過程:從用戶研究到最終的開發(fā)和實(shí)現(xiàn)方案的測試。而實(shí)現(xiàn)方法和信息架構(gòu)是整個(gè)設(shè)計(jì)流程中受到最大影響的。

  移動(dòng)設(shè)計(jì)實(shí)現(xiàn)方式

不同于傳統(tǒng)網(wǎng)站,移動(dòng)設(shè)計(jì)的實(shí)現(xiàn)存在四種主流方式。移動(dòng)用戶最希望在瀏覽器上瀏覽,移動(dòng)式網(wǎng)站(為移動(dòng)設(shè)備而特地優(yōu)化的網(wǎng)站)或者響應(yīng)式網(wǎng)站(根據(jù)設(shè)備重新排列布局的網(wǎng)站)的內(nèi)容。而那些在設(shè)備上安裝了應(yīng)用程序的人會(huì)選擇原生應(yīng)用或混合模式應(yīng)用。原生應(yīng)用是獨(dú)立存在的:每一個(gè)應(yīng)用的界面都被定義在平臺層上方?;旌夏J綉?yīng)用提供了更為靈活的方式,從網(wǎng)絡(luò)中獲取內(nèi)容,(即通過瀏覽器進(jìn)行閱讀),但也提供了類似于原生應(yīng)用的界面。

每一種實(shí)現(xiàn)方式都有正反兩面。選擇哪種樣式取決于項(xiàng)目的設(shè)計(jì)背景。(下面的表單中,星星越多,效果越好)

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

移動(dòng)設(shè)備同樣也有自己的信息架構(gòu)樣式庫。盡管響應(yīng)式網(wǎng)站的結(jié)構(gòu)可能更多遵從“標(biāo)準(zhǔn)化”樣式,而諸如原生應(yīng)用則通常采用基于標(biāo)簽的導(dǎo)航結(jié)構(gòu)。但并不存在構(gòu)造移動(dòng)網(wǎng)站或應(yīng)用的“正確”方法。接下來我們會(huì)帶來一些最流行的樣式:層級式、輻射式、套娃式、標(biāo)簽視圖、便當(dāng)盒和篩選視圖。

  層級式(Hierarchy):

層級樣式是帶有一個(gè)索引頁和一系列子頁面的標(biāo)準(zhǔn)網(wǎng)站結(jié)構(gòu)。如果你在設(shè)計(jì)一個(gè)響應(yīng)式網(wǎng)站,你可能會(huì)受限于此,然而它所帶來的額外樣式可以幫助你為適應(yīng)移動(dòng)設(shè)備而調(diào)整體驗(yàn)。

Luke Wroblewski在博文《移動(dòng)為先》( Mobile First)中幫助我們首先關(guān)注于重要的內(nèi)容:可以幫助我們創(chuàng)造更好的用戶體驗(yàn)的產(chǎn)品特性和用戶使用過程。

適用項(xiàng):整理需要跟桌面端網(wǎng)站保持一致結(jié)構(gòu)的復(fù)雜站點(diǎn)。

注意項(xiàng):多面的導(dǎo)航結(jié)構(gòu)應(yīng)用于小屏幕上可能會(huì)給用戶引起的麻煩。

  輻射式(Hub-spoke):

輻射樣式向用戶提供了便于跳轉(zhuǎn)的中央式索引,這是iPhone的默認(rèn)樣式。用戶無法在分頁面之間切換,而必須回到中央跳轉(zhuǎn)。一直以來,這種樣式主要用于工作流程受限的桌面端(通常是技術(shù)限制,諸如表單或者購買流程中受到的限制)。然后,這種樣式在移動(dòng)設(shè)備上越來越流行,這是由于用戶使用移動(dòng)設(shè)備時(shí)會(huì)專注于單一任務(wù),以及由于設(shè)備本身的外型因素。這種樣式的流行使得全局性導(dǎo)航愈發(fā)難以使用。

適用項(xiàng):多功能工具,其中每個(gè)都有不同的內(nèi)部導(dǎo)航和目標(biāo)。

注意項(xiàng):這種樣式不適于用戶進(jìn)行多任務(wù)操作。

  套娃式(Nested doll):

套娃樣式采用漸進(jìn)式導(dǎo)航引導(dǎo)用戶查看到更詳細(xì)的內(nèi)容至。當(dāng)用戶操作不方便時(shí),這是一種快速簡單的導(dǎo)航方法。通過點(diǎn)擊“前進(jìn)”或“后退”,用戶可以強(qiáng)烈感知自己所處何處。

適用項(xiàng):應(yīng)用或網(wǎng)站的主題奇特或者主題之間密切相關(guān)。它們同樣適用于內(nèi)置其他父樣式的子樣式,諸如標(biāo)準(zhǔn)的層級樣式式和輻射樣式。

注意項(xiàng):用戶無法在不同內(nèi)容中快速切換,因此需要考慮這種樣式是否方便查找,而不能讓它成為查找內(nèi)容的絆腳石。

  標(biāo)簽視圖(Tabbed view):

這是一種普通應(yīng)用用戶熟悉的樣式。這種形式通過工具欄菜單集合為一系列的內(nèi)容。這樣用戶可以在第一次打開應(yīng)用時(shí),便能快速掃過并了解應(yīng)用的全部功能。

適用項(xiàng):基于一個(gè)相似主題的工具項(xiàng)和多任務(wù)情況。

注意項(xiàng):這種樣式不太適合復(fù)雜類結(jié)構(gòu),較為適用于非常簡單的內(nèi)容結(jié)構(gòu)。

  便當(dāng)盒/儀表盤(Bento box/Dashboard)

便當(dāng)盒/儀表盤樣式通過使用組件展示相關(guān)工具或內(nèi)容的部分信息,再把更詳盡的內(nèi)容鏈接至到索引界面。由于這種樣式很復(fù)雜,它在桌面端顯示會(huì)比在移動(dòng)端更為適合。這種顯示醒目有力,用戶只需要掃一眼就可以理解關(guān)鍵信息,但它嚴(yán)重依賴于信息清晰的設(shè)計(jì)呈現(xiàn)。。

適用項(xiàng):主題相似的多功能工具和基于內(nèi)容的平板電腦應(yīng)用程序。

注意項(xiàng): 盡管平板電腦的屏幕提供更多空間承載這種樣式,但更為重要的是我們要理解用戶如何與每塊內(nèi)容互動(dòng),以及我們要確保應(yīng)用簡單、有效、使用愉悅。

  篩選視圖(Filtered view)

最后,篩選視圖樣式允許用戶通過選擇篩選項(xiàng)來切換不同視圖從而在一系列的數(shù)據(jù)中進(jìn)行導(dǎo)航。篩選同分面搜索方法一樣,是一種很棒的適合用戶查詢內(nèi)容的方法。

適用項(xiàng):內(nèi)容數(shù)量龐大的應(yīng)用或網(wǎng)站,諸如文章,圖像和視頻。它可能為雜志樣式的應(yīng)用或網(wǎng)站提供了好的基礎(chǔ),或者是它可以作為另一個(gè)導(dǎo)航樣式內(nèi)的子樣式。

注意項(xiàng): 移動(dòng)設(shè)備上,由于篩選和分面搜索很復(fù)雜,所以很難在較小的屏幕上展示。

  下一步

自從我第一次看到大型的磚頭式移動(dòng)電話起,已經(jīng)過去了將近二十年,(而我買第一步移動(dòng)電話也有大約十二年了)。如今我、我父親和我認(rèn)識的人幾乎都有一部智能電話,我們習(xí)慣于頻繁地使用它們溝通、交流并且管理我們的生活。每一年科技都有一次飛躍,因此我們要清楚地認(rèn)識到我們需要與時(shí)俱進(jìn)。設(shè)計(jì)友好的移動(dòng)和桌面信息架構(gòu)正是創(chuàng)建偉大的移動(dòng)體驗(yàn)的第一步。在第二部分-設(shè)計(jì)考量 中,我將解釋移動(dòng)內(nèi)容的差異性如何影響最終方案的設(shè)計(jì)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!