自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

移動網(wǎng)頁設(shè)計的信息組織

移動開發(fā)
對于我們中很多人來說,移動端設(shè)計是一個嶄新的機(jī)會。但是,如果你過去是桌面端的網(wǎng)頁設(shè)計師,如何將經(jīng)驗(yàn)轉(zhuǎn)換到移動網(wǎng)頁端呢?當(dāng)然,已有的一些工具,經(jīng)驗(yàn),技能仍然適用,只需開始思考下如何在手機(jī)上進(jìn)行組織和布局。

  如何開始移動設(shè)計

  對于我們中很多人來說,移動端設(shè)計是一個嶄新的機(jī)會。但是,如果你過去是桌面端的網(wǎng)頁設(shè)計師,如何將經(jīng)驗(yàn)轉(zhuǎn)換到移動網(wǎng)頁端呢?當(dāng)然,已有的一些工具,經(jīng)驗(yàn),技能仍然適用,只需開始思考下如何在手機(jī)上進(jìn)行組織和布局。

  組織架構(gòu)

  當(dāng)你開始組織移動端界面的內(nèi)容和操作時,一些可靠的信息架構(gòu)準(zhǔn)則:比如,清晰的標(biāo)簽(labeling),平衡的寬度和深度,妥當(dāng)合理的心智模型,這些仍舊十分重要。但是,組織移動端網(wǎng)頁設(shè)計體驗(yàn)?zāi)阈枰紤]以下因素:

  配合使用方式:人們?nèi)绾芜m用移動設(shè)備,為什么這樣用?

  強(qiáng)調(diào)內(nèi)容超過導(dǎo)航

  保持清晰和專注

  配合移動設(shè)備適用方式

  我們很容易理解移動設(shè)備上獨(dú)特的限制和性能。簡單來說,桌面網(wǎng)頁同樣有很多獨(dú)特的限制。所以直接將桌面產(chǎn)品移植到手機(jī)端并無意義。而是要考慮移動端獨(dú)有的特性,并且滿足到用戶需求。

  通過研究一些專業(yè)分析的共通點(diǎn),我們會得到一些啟發(fā)。面對通常人們是如何使用他們的移動設(shè)備的,為什么?這個問題時,Josh Clark在他的《觸動人心》(注:《觸動人心-設(shè)計優(yōu)秀的iphone應(yīng)用》一書中講到過三個關(guān)鍵用戶行為:

  “我有個微任務(wù)要做”;

  “我想看看附近的情況”;

  “我有些無聊”。

  這正好與google的調(diào)研不謀而合,他將移動用戶細(xì)分為三種行為群體:當(dāng)前是急迫的,反復(fù)的,或者無聊的。

  不管如何描述,移動端的使用方式通常包括以下交互情形:

  查找/發(fā)現(xiàn)(急需信息,基于地點(diǎn)位置):我現(xiàn)在需要得到答案——多數(shù)是告訴我在哪里。

  探索/娛樂(無聊,基于地點(diǎn)位置):我現(xiàn)在想消磨時間,來點(diǎn)娛樂打發(fā)無聊。

  簽到檢查(check-in)/狀態(tài)(重復(fù)/微任務(wù)處理):一些重要的事需要不斷改變或更新,我想留在上面。

  編輯/創(chuàng)建(緊急調(diào)整,微任務(wù)處理):我需要馬上做完一些事,不能等。

  以上因素決定人們?yōu)楹翁统鍪謾C(jī),所以這些行為決定了手機(jī)體驗(yàn)應(yīng)該如何被構(gòu)造和組織來滿足人們的需求。

  例如:照片分享Flickr的移動網(wǎng)頁體驗(yàn)就有四個主要操作。你通訊錄里好友的***活動和***上傳讓人們不斷想檢查是否有好友的照片更新;提供當(dāng)日附近人們上傳的一些有趣的內(nèi)容和照片,為想瀏覽優(yōu)質(zhì)照片的人們打發(fā)無聊時間的方式。

  

[[83686]]

 

  flickr的移動網(wǎng)頁體驗(yàn)符合人們?yōu)槭裁炊统鍪謾C(jī)(雖然略顯生硬)。

  配合移動環(huán)境使用環(huán)境自然也需要適應(yīng)你網(wǎng)站真實(shí)世界的需要。因?yàn)橐苿芋w驗(yàn)可能被用在任何地點(diǎn)場景,你需要考慮如何讓人們無論在哪里都覺得好用。

  這就意味著需要考慮用戶真正需要你網(wǎng)站組織提供的真實(shí)用例(use cases)。之前我曾經(jīng)寫過一篇《利用人物角色來做信息架構(gòu)》其實(shí)就是通過分析用戶完成某任務(wù)的流程來進(jìn)行網(wǎng)頁上的信息架構(gòu)。這一點(diǎn)其實(shí)在手機(jī)端更加重要。

  通過了解以上用戶會掏出手機(jī)的動機(jī),結(jié)合自身app提供的功能,盡量減少用戶在移動端的操作路徑。

  內(nèi)容優(yōu)于導(dǎo)航

  一條常規(guī)理論,在移動端內(nèi)容優(yōu)先于導(dǎo)航。無論人們是否經(jīng)常查看更新信息,諸如:股票,新聞或是比分;他們查看當(dāng)?shù)匦侣劵蚴峭ㄟ^搜索查找文章或是使用聊天工具,他們都想快速響應(yīng)需求而不是看到你的網(wǎng)站架構(gòu)脈絡(luò)。

  太多的移動網(wǎng)頁體驗(yàn)(像是之前的Flickr )開始時的對話都是一大堆的導(dǎo)航列表,而不是內(nèi)容信息。移動端用戶時間很寶貴,下載也需要流量的金錢消耗,所以讓他們馬上獲得想要的信息才是關(guān)鍵。

  

 

  Youtube ESPN的移動網(wǎng)頁就是這樣做的。先是一個簡單的抬頭告訴你身處哪里,將導(dǎo)航選項(xiàng)降級為一個單獨(dú)的按鈕。其余的位置放置可隨時查看的***信息(ESPN)和最熱的供消遣的視頻。

  ESPN Youtube移動網(wǎng)頁體驗(yàn)將重點(diǎn)放在內(nèi)容信息上,而不是導(dǎo)航上。

  定位和探索

  但是,請稍等一下,如果內(nèi)容總是優(yōu)于導(dǎo)航。

  關(guān)于返回鍵

  許多iphone的原生應(yīng)用在導(dǎo)航上都有個***的返回按鈕。由于蘋果的移動設(shè)備沒有硬件上的返回按鍵,所以很多app都在頂部標(biāo)題欄設(shè)置了返回按鈕。

  

 

  不過在移動互聯(lián)網(wǎng)的體驗(yàn)上,沒必要處處都設(shè)置返回按鈕。因?yàn)楹芏嘣O(shè)備上,諸如,andoid、黑莓、windows phone7都有硬件上的返回物理按鍵。

  

 

  andoidphone 一般都有物理返回按鍵

  即便是蘋果iphone上的瀏覽器,底部的工具欄上包含一個***的返回按鈕。

  

 

  iphone瀏覽器底部工具欄包含一個返回按鈕。某網(wǎng)頁左上角的返回實(shí)屬多余。

  在移動網(wǎng)頁體驗(yàn)上添加一個返回按鈕容易引起混淆。人們在使用網(wǎng)頁時候會問:“這兩個返回按鍵的作用是一樣的嗎?”。因此在移動網(wǎng)頁設(shè)計時,不應(yīng)該在有限的空間內(nèi)占據(jù)一個多余的“返回”按鈕。

  紀(jì)念翻譯未果的《mobile first》

  源地址:http://www.zhangyq.com/first-element-of-the-interaction-design-of-mobile-terminal-scene/

責(zé)任編輯:佚名 來源: zhangyq.com
相關(guān)推薦

2012-03-09 09:21:41

Shadow

2012-03-15 10:04:06

移動web

2014-05-04 11:06:41

移動網(wǎng)站移動設(shè)計

2011-02-25 14:04:20

2017-10-17 11:51:59

移動端調(diào)試網(wǎng)頁Erdua

2013-08-27 13:13:29

移動網(wǎng)站性能優(yōu)化移動web

2011-12-26 10:28:39

移動Web

2011-03-21 15:23:24

觸屏網(wǎng)頁設(shè)計

2011-12-28 09:52:30

移動優(yōu)先移動Web

2023-07-18 07:51:56

JavaScriptAPI

2016-02-01 10:12:22

網(wǎng)頁設(shè)計移動端

2011-04-07 16:23:09

Web網(wǎng)頁設(shè)計編碼

2014-02-12 14:58:51

移動

2017-07-21 16:26:43

2011-02-22 11:37:23

MWC應(yīng)用程序

2011-11-02 11:06:50

2014-04-22 22:16:11

銳捷網(wǎng)絡(luò)移動網(wǎng)絡(luò)

2011-05-12 17:26:40

移動網(wǎng)站CSS

2010-11-11 14:56:27

信息架構(gòu)產(chǎn)品設(shè)計

2020-09-18 15:53:21

5G
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號