移動端設計大補腦第一補:信息架構

摘自原文地址:http://mp.weixin.qq.com/s?__biz=MjM5MDk0MDM0MA==&mid=204626697&idx=1&sn=fadbc67d616d294df848217cfaf8daff#rd

世界上已經有了60億手機用戶,也就是說,按一人一一部算圾另,全世界人口的87%都有了手機汰具。相比之下,全球只有不到30億人使用臺式機幔荒。

移動設備絕不是曇花一現(xiàn),但其興起也給設計帶來了許許多多的新制約(和機會)。下面我們來看一下應當如何相應地革新我們的設計方式属划。

移動設備的不同之處是什么?

關于移動端設計候生,我們首先要了解的是除了尺寸其還有哪些不同于傳統(tǒng)之處同眯。移動設備的物理特性和規(guī)格產生出了不同的設計可容性及要求。移動設備更加輕便唯鸭、易于攜帶须蜗,從而使用起來也就更方便。由此造成的對移動設備的頻繁使用目溉,會讓我們對它們產生一種獨特的情感聯(lián)系明肮。

物理特性與規(guī)格

大部分移動設備都采用觸摸屏,也就是讓用戶在簡單的界面元素之外依靠手勢來與設備進行交互缭付∈凉溃考慮到移動設備的尺寸較小,我們有時候就會希望其內容結構更加簡單小巧蛉腌。除此之外官份,移動設備的網絡帶寬和連接也存在限制,因此就要求設計針對加載時間進行適當?shù)膬?yōu)化烙丛,也就是說要盡量減少數(shù)據(jù)需求舅巷。

何時何地如何做

大家一般都會把移動設備帶在身邊,所以對其使用也就相對來說比較頻繁河咽。比方說在公交地鐵上钠右、在路上或者看電視時,我們都可以隨時使用忘蟹。換句話說飒房,我們一般都是在干著其他事的時候“順便”使用。這樣一來媚值,移動設備的使用就會受到視覺條件的限制狠毯,或者存在著諸多分散人注意力的因素。

我們的行為與感覺

在使用移動設備時我們有著各自不同的態(tài)度褥芒、行為和主次順序嚼松。有用戶體驗設計公司調研發(fā)現(xiàn),移動設備給我們帶來了一種全新的自由和控制感。進而献酗,有的用戶就會對自己的移動設備產生出實實在在的情感寝受。63%的人在發(fā)現(xiàn)自己的智能手機沒放在能輕松拿到的地方時會覺得不爽。他們將移動設備看作是“有生命的”...是自己身體和人格的一個延伸罕偎。

移動設備已經從本質上改變了用戶的心理預期很澄,因此,我們作為設計師就務求遵循以用戶為核心的流程來打造各項解決方案颜及。這里唯一的問題就是我們傳統(tǒng)的最佳實踐可能就不那么好用了甩苛。

移動對設計師的影響

移動設備的獨特性直接影響著以用戶為中心設計流程的各個方面:從用戶調查到最終開發(fā)再到測試等等。而流程中受影響最大的部分之一就是我們的交付方式以及信息架構器予。

移動端呈現(xiàn)方式

有別于傳統(tǒng)網站浪藻,移動端的呈現(xiàn)方式比較流行的有四種。使用瀏覽器查看內容的移動用戶最愛的是專門針對移動設備的網站(針對移動設備特別優(yōu)化)或響應式網站(可針對移動設備調整顯示方向或重新布局)乾翔。而通過安裝應用瀏覽內容的用戶則一般會選擇本機應用或混合型應用爱葵。本機應用通常功能完備:應用的所有界面都經過預先的規(guī)劃》磁ǎ混合型應用則比較靈活一些萌丈,其可通過web加載內容(因為需要通過瀏覽器查看),但最后通過類似應用的界面(或Chrome)進行呈現(xiàn)雷则。

上面每種呈現(xiàn)方式都有著自己的優(yōu)劣之處辆雾。所以大家需要根據(jù)項目的設計背景相應進行選擇。(下表中星數(shù)越多表示越好)

移動端信息架構



移動設備也有自己的一套信息架構模式月劈。雖然響應式站點的結構可以采用“標準”模式度迂,但是,以本機應用為例猜揪,其通常會采用基于標簽的導航式結構惭墓。再次強調,移動站點或應用的架構并沒有一定之規(guī)而姐。比如下面這些比較熱門的模式:分層結構腊凶、軸輻式結構、套娃結構拴念、標簽視圖钧萍、便當盒結構及篩選視圖結構:

分層結構

分層結構模式是一種比較標準的網站結構,其擁有索引頁及一系列子頁政鼠。對于響應式網站风瘦,可能這是唯一可用的模式了,不過你也可以自己構思其他模式來針對移動端量身定制用戶體驗公般。

“移動為先”方法可以幫助我們將注意力先集中到關鍵的內容上弛秋,例如有助于打造優(yōu)秀用戶體驗的功能及用戶旅程等器躏。

適合于

組織需要遵循臺式機網站結構的復雜型網站結構。

要注意

導航蟹略。多層面導航結構容易給使用小屏幕的用戶帶來問題。


軸輻式結構

軸輻式結構可讓用戶通過中央索引向外導航遏佣。這是iPhone默認采用的模式挖炬。用戶不能在各個“輻條”之間進行導航切換,只能先回到軸心再出去状婶。這個方式在歷史上一直用于工作流程存在限制(通常是表單或購買流程等技術限制)的臺式機情況意敛,但其現(xiàn)在也開始逐漸流行到了移動端,因為在移動端用戶往往需要專注于單項任務膛虫,另外設備的形狀因素也造成全局導航使用比較不便草姻。

適合于

每個功能都有自己內部導航和用途的多功能工具。

要注意

需要執(zhí)行多任務的用戶



套娃結構

套娃結構模式能夠以相對線性的方式引領用戶查看細節(jié)內容稍刀。當用戶身處環(huán)境不便時撩独,這種導航方式相對比較快捷簡單。其簡單的前后推進模式還能讓用戶清楚明確地知道自己目前在內容結構的什么位置账月。

適合于

主題單一或彼此相近的應用或網站综膀。也可用作其他模式的子模式,例如標準分層結構或軸輻式結構模式局齿。

要注意

用戶無法快速在不同板塊直接切換剧劝,所以要考慮其適用性,不能成為對內容探索的障礙抓歼。


標簽視圖

這是普通應用用戶比較熟悉的模式之一讥此。其實際上就是通過工具欄菜單把一系列板塊綁在一起。這種方式可以方便用戶在首次打開時快速瀏覽并理解應用的全部功能谣妻。

適合于

主題類似的工具類應用萄喳。多任務。

要注意

不要做的太復雜拌禾。這一模式最適合于簡單的內容結構取胎。


便當盒/儀表盤

便當盒或者叫儀表板模式可以通過使用組件形式展示相關工具或內容的不同部分將詳細具體的內容直接呈現(xiàn)到索引屏幕上。這一模式比較復雜湃窍,因此更適合于平板電腦闻蛀。其可以讓用戶一眼發(fā)現(xiàn)關鍵信息,因此功效強大您市。但是這種模式同時也嚴重依賴于設計界面的優(yōu)劣以及信息呈現(xiàn)是否明確觉痛。

適合于

主題類似的多功能工具和基于內容的平板電腦應用。

要注意

平板電腦的屏幕較大茵休,因此能夠留出更大的空間發(fā)揮這一模式薪棒。但設計時尤其要注意理解用戶與各部分內容之間進行交互的方式手蝎,以便確保應用的簡便和樂趣性。


篩選視圖

篩選視圖模式可以讓用戶通過選擇篩選器選項形成分類視圖以便在系列數(shù)據(jù)中進行導航俐芯。篩選以及分類搜索方法的使用是方便用戶以自己喜愛的方式探索內容的好辦法棵介。

適合于

內容量大的應用或網站,例如文章吧史、圖片和視頻類網站邮辽。可以用做雜志類應用或網站的模板贸营,或者用作其他導航模式的子模式吨述。

要注意

移動端〕考慮到復雜性問題揣云,篩選器和分類搜索在比較小的屏幕上顯示時可能會有困難。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 后 續(xù)

開發(fā)出適合于手機和平板電腦的信息架構只是打造優(yōu)秀移動用戶體驗的第一步冰啃。明天將與大家分享交互設計邓夕,說明移動與傳統(tǒng)之間的種種差別對最終設計解決方案的出爐會存在哪些影響。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末亿笤,一起剝皮案震驚了整個濱河市翎迁,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌净薛,老刑警劉巖汪榔,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異肃拜,居然都是意外死亡痴腌,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進店門燃领,熙熙樓的掌柜王于貴愁眉苦臉地迎上來士聪,“玉大人,你說我怎么就攤上這事猛蔽“颍” “怎么了?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵曼库,是天一觀的道長区岗。 經常有香客問我,道長毁枯,這世上最難降的妖魔是什么慈缔? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮种玛,結果婚禮上藐鹤,老公的妹妹穿的比我還像新娘瓤檐。我一直安慰自己,他們只是感情好娱节,可當我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布挠蛉。 她就那樣靜靜地躺著,像睡著了一般括堤。 火紅的嫁衣襯著肌膚如雪碌秸。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天悄窃,我揣著相機與錄音,去河邊找鬼蹂窖。 笑死轧抗,一個胖子當著我的面吹牛,可吹牛的內容都是我干的瞬测。 我是一名探鬼主播横媚,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼月趟!你這毒婦竟也來了灯蝴?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤孝宗,失蹤者是張志新(化名)和其女友劉穎穷躁,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體因妇,經...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡问潭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了婚被。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片狡忙。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖址芯,靈堂內的尸體忽然破棺而出灾茁,到底是詐尸還是另有隱情,我是刑警寧澤谷炸,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布北专,位于F島的核電站,受9級特大地震影響淑廊,放射性物質發(fā)生泄漏逗余。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一季惩、第九天 我趴在偏房一處隱蔽的房頂上張望录粱。 院中可真熱鬧腻格,春花似錦、人聲如沸啥繁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽旗闽。三九已至酬核,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間适室,已是汗流浹背嫡意。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留捣辆,地道東北人蔬螟。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像汽畴,于是被迫代替她去往敵國和親旧巾。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內容