移動(dòng)設(shè)計(jì)第1部分:信息架構(gòu)

1993年左右春锋,我父親帶回了一個(gè)大型的磚形手機(jī)累贤。我們都對(duì)這項(xiàng)新技術(shù)感到非常興奮奔垦,盡管我們都不會(huì)認(rèn)為它會(huì)對(duì)對(duì)我們的生活產(chǎn)生巨大影響屹耐。幾年后,當(dāng)我的一些朋友決定購(gòu)買時(shí)椿猎。我實(shí)際上仍然認(rèn)為它是一種噓頭惶岭。

如今,全球有60億移動(dòng)用戶?- 這意味著如果每個(gè)用戶擁有一個(gè)移動(dòng)用戶犯眠,那么世界上87%的移動(dòng)用戶將擁有一個(gè)移動(dòng)用戶按灶。考慮到只有不到30億人使用臺(tái)式電腦筐咧,這是一個(gè)很大的區(qū)別鸯旁。

移動(dòng)設(shè)備顯然仍然存在,并且與它們一起為我們的設(shè)計(jì)帶來(lái)了許多新的約束(和機(jī)會(huì))。讓我們來(lái)看看我們?nèi)绾紊?jí)我們的設(shè)計(jì)方法羡亩。

移動(dòng)設(shè)備有何不同摩疑?

我們需要了解移動(dòng)設(shè)計(jì)的第一件事是它是與眾不同的 - 而不僅僅是尺寸問(wèn)題。移動(dòng)設(shè)備的物理性和規(guī)格賦予不同的設(shè)計(jì)可用性和要求畏铆。由于移動(dòng)設(shè)備更輕便雷袋,更便攜,我們經(jīng)

常發(fā)現(xiàn)使用它們更加方便辞居。因此楷怒,通過(guò)這種更經(jīng)常的使用,我們感受到與他們獨(dú)特的情感上的聯(lián)系瓦灶。


物理性和規(guī)格

大多數(shù)移動(dòng)設(shè)備采用觸摸屏鸠删,用戶除了簡(jiǎn)單的界面元素外,還依靠手勢(shì)與他們進(jìn)行交互贼陶。由于尺寸較小刃泡,我們有時(shí)希望內(nèi)容結(jié)構(gòu)更簡(jiǎn)單,更小碉怔。此外烘贴,由于其有限的帶寬和連接性,移動(dòng)設(shè)備要求設(shè)計(jì)針對(duì)加載時(shí)間進(jìn)行優(yōu)化撮胧,同時(shí)降低數(shù)據(jù)要求桨踪。

如何,何時(shí)何地

由于我們可以持續(xù)訪問(wèn)我們的移動(dòng)設(shè)備芹啥,因此我們傾向于更頻繁地使用它們锻离。他們和我們一起坐公共汽車,走在街上或看電視墓怀。我們經(jīng)常在“做”其他事情時(shí)使用它們汽纠。這意味著我們可能會(huì)在困難的觀看條件下或在各種干擾中使用該設(shè)備。

我們是如何操作和感受

最終捺疼,我們?cè)谑褂靡苿?dòng)設(shè)備時(shí)有不同的態(tài)度疏虫,行為和優(yōu)先級(jí)。作為他們?cè)?a target="_blank" rel="nofollow">Going Mobile 2012研究的一部分啤呼,用戶體驗(yàn)設(shè)計(jì)機(jī)構(gòu)Foolproof發(fā)現(xiàn)這些設(shè)備給了我們新的自由和控制感。反過(guò)來(lái)呢袱,有些用戶對(duì)他們的移動(dòng)設(shè)備產(chǎn)生非常真實(shí)的感情官扣。Foolproof發(fā)現(xiàn),如果他們的手機(jī)很難拿到羞福,63%的人會(huì)感到沮喪惕蹄。他們將自己的手機(jī)描述成“活著的”即是他們自己身體和個(gè)性的延伸。

由于移動(dòng)設(shè)備從根本上改變了用戶的期望,因此作為設(shè)計(jì)人員卖陵,我們必須遵循以用戶為中心的設(shè)計(jì)流程來(lái)實(shí)現(xiàn)我們的解決方案遭顶。有個(gè)問(wèn)題就是我們以前常用的解決辦法可能并不都是適用在移動(dòng)設(shè)備上。

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

移動(dòng)設(shè)備的差異性直接影響以用戶為中心的設(shè)計(jì)流程的各個(gè)階段:從用戶研究到最終開(kāi)發(fā)和測(cè)試解決方案泪蔫。它對(duì)整個(gè)設(shè)計(jì)流程影響最大的部分就是我們的傳輸方式和信息架構(gòu)棒旗。

移動(dòng)設(shè)備傳輸?shù)姆椒?/b>

與傳統(tǒng)網(wǎng)站不同,有四種常用移動(dòng)傳送方式撩荣。選擇在瀏覽器中查看內(nèi)容的移動(dòng)用戶最好通過(guò)針對(duì)移動(dòng)設(shè)備優(yōu)化的移動(dòng)設(shè)備網(wǎng)站響應(yīng)式網(wǎng)站提供服務(wù)铣揉,這些網(wǎng)站可為移動(dòng)設(shè)備重新定位/設(shè)定自己。那些選擇在手機(jī)上安裝應(yīng)用程序的用戶可以使用本機(jī)應(yīng)用程序(lication)或混合應(yīng)用程序餐曹。原生應(yīng)用程序是設(shè)備自帶的:應(yīng)用程序的每個(gè)屏幕都是預(yù)先定義的逛拱。混合應(yīng)用程序提供更多靈活性台猴,從Web加載內(nèi)容(因?yàn)樗跒g覽器中查看)朽合,但為用戶提供“類似應(yīng)用程序”的界面(或chrome)。

每種傳送方法都有不同的優(yōu)缺點(diǎn)饱狂。你可以根據(jù)項(xiàng)目的設(shè)計(jì)背景選擇適合您的選項(xiàng)旁舰。(在下表中,較多的星星表示更好)


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

移動(dòng)設(shè)備同樣也有自己的信息架構(gòu)樣式庫(kù)嗡官。盡管響應(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)用的“正確”方法衍腥。接下來(lái)我們會(huì)帶來(lái)一些最流行的樣式:層級(jí)式磺樱、輻射式、套娃式婆咸、標(biāo)簽視圖竹捉、便當(dāng)盒和篩選視圖。


層級(jí)式

層級(jí)式(Hierarchy

層級(jí)樣式是帶有一個(gè)索引頁(yè)和一系列子頁(yè)面的標(biāo)準(zhǔn)網(wǎng)站結(jié)構(gòu)尚骄。如果你在設(shè)計(jì)一個(gè)響應(yīng)式網(wǎng)站块差,你可能會(huì)受限于此,然而它所帶來(lái)的額外樣式可以幫助你為適應(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)品特性和用戶使用過(guò)程憨闰。

適用項(xiàng)

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

注意項(xiàng)

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


跳板式

跳板式

跳板式會(huì)提供用戶導(dǎo)航的主要入口鹉动。這是蘋果手機(jī)的默認(rèn)模式。用戶想要同級(jí)跳轉(zhuǎn)時(shí)宏邮,必須先返回入口主面板泽示。從過(guò)往來(lái)看缸血,這種模式應(yīng)用于受限制的(通常是由于表單或購(gòu)買流程這種技術(shù)限制)工作流桌面,但由于用戶一直專注于單個(gè)任務(wù)以及設(shè)備的物理尺寸械筛,做整體導(dǎo)航會(huì)難以使用捎泻,所以跳板式在移動(dòng)視圖中十分流行。

適用于:

多功能工具埋哟,其中每一個(gè)入口都有特定的內(nèi)部導(dǎo)航和用途笆豁。

注意:?

需要多任務(wù)的用戶。


嵌套式

嵌套式

嵌套式以一種線性樣式將用戶引到詳情頁(yè)定欧。當(dāng)用戶處于不方便的條件下渔呵,選用這種快捷和方便的導(dǎo)航模式。由于前進(jìn)和后退的感觀砍鸠,他也能給用戶處于內(nèi)容結(jié)構(gòu)哪一級(jí)的強(qiáng)烈位置感扩氢。

適用于:

單一或者內(nèi)容關(guān)聯(lián)緊密的應(yīng)用和網(wǎng)站。也可作為主導(dǎo)航的次級(jí)導(dǎo)航模式爷辱,比如層級(jí)式和跳板式的主導(dǎo)航录豺。

注意:?

當(dāng)用戶無(wú)法在各個(gè)部分之間快速切換時(shí),要考慮這種模式是否真的合適饭弓,因?yàn)闀?huì)妨礙用戶探索內(nèi)容双饥。


標(biāo)簽式

標(biāo)簽式

這是App用戶非常熟悉的模式。通過(guò)一條工具菜單欄將各個(gè)部分的入口集合弟断。標(biāo)簽式能讓第一次使用App的用戶快讀瀏覽和理解全部的功能咏花。

適用于:

內(nèi)容相似的工具App。多任務(wù)阀趴。

注意:?

復(fù)雜度昏翰。這種模式最適合簡(jiǎn)單的內(nèi)容架構(gòu)。


儀表盤


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

便當(dāng)盒或儀表盤模式通過(guò)使用組件顯示相關(guān)工具或內(nèi)容的一部分刘急,直接將更詳細(xì)的內(nèi)容帶到索引屏幕棚菊。由于其復(fù)雜性,這種模式更適合平板電腦而不是移動(dòng)設(shè)備叔汁。它可以非常強(qiáng)大统求,因?yàn)樗梢宰層脩粢荒苛巳坏乩斫怅P(guān)鍵信息,但是它很大程度上依賴于設(shè)計(jì)良好据块、信息顯示清晰的界面码邻。

好處

具有類似主題的多功能工具和基于內(nèi)容的平板電腦應(yīng)用程序。

注意

平板電腦屏幕提供了更多的空間來(lái)充分地利用這種模式瑰钮,但是冒滩,為了確保應(yīng)用程序使用起來(lái)簡(jiǎn)單、高效和有趣浪谴,了解用戶將如何與每個(gè)內(nèi)容塊以及內(nèi)容之間進(jìn)行交互變得尤為重要开睡。


篩選視圖

篩選視圖

最后,過(guò)濾視圖模式允許用戶通過(guò)選擇篩選器選項(xiàng)來(lái)創(chuàng)建替代視圖苟耻,從而在一組數(shù)據(jù)內(nèi)導(dǎo)航篇恒。篩選以及使用多面搜索方法可以很好地允許用戶以適合他們的方式探索內(nèi)容。

好處

包含大量?jī)?nèi)容的應(yīng)用程序或網(wǎng)站凶杖,如文章胁艰、圖片和視頻,可以作為雜志風(fēng)格的應(yīng)用程序或網(wǎng)站的良好基礎(chǔ)智蝠,也可以作為在另一種導(dǎo)航模式中的子模式腾么。

注意

移動(dòng)。由于篩選器和多面搜索的復(fù)雜性杈湾,它們很難在較小的屏幕上展示解虱。

下一步

距離我第一次見(jiàn)到那款磚頭形狀的手機(jī)已經(jīng)過(guò)去了近20年了(大約12年前我買了第一款手機(jī))。現(xiàn)在我漆撞、我爸爸和幾乎我所有我認(rèn)識(shí)的人都有一部智能手機(jī)殴泰,我們定期、頻繁地互動(dòng)浮驳、交流和管理我們的生活悍汛。每年科技都會(huì)有新的飛躍,因此至会,很明顯我們需要隨之改變离咐。

原文地址:

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市奉件,隨后出現(xiàn)的幾起案子宵蛀,更是在濱河造成了極大的恐慌,老刑警劉巖瓶蚂,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件糖埋,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡窃这,警方通過(guò)查閱死者的電腦和手機(jī)瞳别,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)杭攻,“玉大人祟敛,你說(shuō)我怎么就攤上這事≌捉猓” “怎么了馆铁?”我有些...
    開(kāi)封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)锅睛。 經(jīng)常有香客問(wèn)我埠巨,道長(zhǎng)历谍,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任辣垒,我火速辦了婚禮望侈,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘勋桶。我一直安慰自己脱衙,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布例驹。 她就那樣靜靜地躺著捐韩,像睡著了一般。 火紅的嫁衣襯著肌膚如雪鹃锈。 梳的紋絲不亂的頭發(fā)上荤胁,一...
    開(kāi)封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音仪召,去河邊找鬼寨蹋。 笑死,一個(gè)胖子當(dāng)著我的面吹牛扔茅,可吹牛的內(nèi)容都是我干的已旧。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼召娜,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼运褪!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起玖瘸,我...
    開(kāi)封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤秸讹,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后雅倒,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體璃诀,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年蔑匣,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了劣欢。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡裁良,死狀恐怖凿将,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情价脾,我是刑警寧澤牧抵,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站侨把,受9級(jí)特大地震影響犀变,放射性物質(zhì)發(fā)生泄漏妹孙。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一弛作、第九天 我趴在偏房一處隱蔽的房頂上張望涕蜂。 院中可真熱鬧华匾,春花似錦映琳、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至旭旭,卻和暖如春谎脯,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背持寄。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工源梭, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人稍味。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓废麻,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親模庐。 傳聞我的和親對(duì)象是個(gè)殘疾皇子烛愧,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 今年的2月26號(hào),我在家養(yǎng)病的時(shí)候掂碱,無(wú)意中聽(tīng)到了葉武濱老師播講的《時(shí)間管理100講》怜姿,頓時(shí)耳目一新。尤其里...
    茹_6bf9閱讀 171評(píng)論 0 0
  • stash命令可以很好的解決這樣的問(wèn)題疼燥。當(dāng)你不想提交當(dāng)前完成了一半的代碼沧卢,但是卻不得不修改一個(gè)緊急Bug,那么使用...
    xdoyf閱讀 131評(píng)論 0 0
  • 項(xiàng)目地址 github地址、 碼云地址 Sass 世界上最成熟湃交、最穩(wěn)定熟空、最強(qiáng)大的專業(yè)級(jí)CSS擴(kuò)展語(yǔ)言NProgre...
    RtyXmd閱讀 2,455評(píng)論 2 5
  • 守在清寂的流年里 如同秋風(fēng)中的一片落葉 無(wú)法丈量未來(lái)的距離 尋一方云水禪心的庭院 與你十指相扣 訴說(shuō)我們?cè)裣鄳?...
    9胤祥9閱讀 150評(píng)論 1 2