歡迎來(lái)到合肥浪訊網(wǎng)絡(luò)科技有限公司官網(wǎng)
  咨詢(xún)服務(wù)熱線:400-099-8848

圖片優(yōu)化

發(fā)布時(shí)間:2016-07-25 文章來(lái)源:  瀏覽次數(shù):3028
如何開(kāi)始移動(dòng)設(shè)計(jì)

  對(duì)于我們中良多人來(lái)說(shuō),移動(dòng)端設(shè)計(jì)是一個(gè)嶄新的機(jī)會(huì)。但是,假如你過(guò)去是桌面真?zhèn)網(wǎng)頁(yè)設(shè)計(jì)師,如何將經(jīng)驗(yàn)轉(zhuǎn)換到移動(dòng)網(wǎng)頁(yè)端呢?當(dāng)然,已有的一些工具,經(jīng)驗(yàn),技能仍舊合用,只需開(kāi)始思索下如何在手機(jī)長(zhǎng)進(jìn)行組織和布局。


  組織架構(gòu)


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


  配合使用方式:人們?nèi)绾魏嫌靡苿?dòng)設(shè)備,為什么這樣用?


  夸大內(nèi)容超過(guò)導(dǎo)航


  保持清楚和專(zhuān)注


  配合移動(dòng)設(shè)備合用方式


  我們很輕易理解移動(dòng)設(shè)備上獨(dú)特的限制和機(jī)能。簡(jiǎn)樸來(lái)說(shuō),桌面網(wǎng)頁(yè)同樣有良多獨(dú)特的限制。所以直接將桌面產(chǎn)品移植得手機(jī)端并無(wú)意義。而是要考慮移動(dòng)端獨(dú)占的特性,并且知足到用戶(hù)需求。


  通過(guò)研究一些專(zhuān)業(yè)分析的共通點(diǎn),我們會(huì)得到一些啟發(fā)。面臨通凡人們是如何使用他們的移動(dòng)設(shè)備的,為什么?這個(gè)題目時(shí),Josh Clark在他的《觸動(dòng)人心》(注:《觸動(dòng)人心-設(shè)計(jì)優(yōu)秀的iphone應(yīng)用》一書(shū)中講到過(guò)三個(gè)樞紐用戶(hù)行為:


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


  “我想看看四周的情況”;


  “我有些無(wú)聊”。


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


  無(wú)論如何描述,移動(dòng)真?zhèn)使用方式通常包括以下交互情形:


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


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


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


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


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


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


  



 


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


  配合移動(dòng)環(huán)境使用環(huán)境天然也需要適應(yīng)你網(wǎng)站真實(shí)世界的需要。由于移動(dòng)體驗(yàn)可能被用在任何地點(diǎn)場(chǎng)景,你需要考慮如何讓人們不管在哪里都覺(jué)得好用。


  這就意味著需要考慮用戶(hù)真正需要你網(wǎng)站組織提供的真實(shí)用例(use cases)。這一點(diǎn)實(shí)在在手機(jī)端更加重要。


  通過(guò)了解以上用戶(hù)會(huì)取出手機(jī)的念頭,結(jié)合自身app提供的功能,盡量減少用戶(hù)在移動(dòng)真?zhèn)操縱路徑。


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


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


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


  



 


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


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


  定位和探索


  但是,請(qǐng)稍等一下,假如內(nèi)容老是優(yōu)于導(dǎo)航。


  關(guān)于返回鍵


  很多iphone的原生應(yīng)用在導(dǎo)航上都有個(gè)永久的返回按鈕。因?yàn)樘O(píng)果的移動(dòng)設(shè)備沒(méi)有硬件上的返回按鍵,所以良多app都在頂部標(biāo)題欄設(shè)置了返回按鈕。


  



         不外在移動(dòng)互聯(lián)網(wǎng)的體驗(yàn)上,沒(méi)必要處處都設(shè)置返回按鈕。由于良多設(shè)備上,諸如,andoid、黑莓、windows phone7都有硬件上的返回物理按鍵。


 


  



 


  andoidphone 一般都有物理返回按鍵


  即便是蘋(píng)果iphone上的瀏覽器,底部的工具欄上包含一個(gè)永久的返回按鈕。


  



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


  在移動(dòng)網(wǎng)頁(yè)體驗(yàn)上添加一個(gè)返回按鈕輕易引起攪渾。人們?cè)谑褂镁W(wǎng)頁(yè)時(shí)候會(huì)問(wèn):“這兩個(gè)返回按鍵的作用是一樣的嗎?”。因此在移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)時(shí),不應(yīng)該在有限的空間內(nèi)占據(jù)一個(gè)多余的“返回”按鈕。


 


  總之,當(dāng)你打算組織移動(dòng)網(wǎng)頁(yè)體驗(yàn)時(shí),考慮哪些用戶(hù)行為符合移動(dòng)糊口的需要。


  移動(dòng)用例(usecase)。像是尋找、探索/游戲,簽到/查看狀態(tài),編纂/創(chuàng)建,思索這些行為,然后調(diào)整網(wǎng)站移動(dòng)端使用時(shí)候的架構(gòu)。


  首先關(guān)注內(nèi)容,其次才是導(dǎo)航。人們更關(guān)心信息和他們想快速處理的任務(wù)。


  相關(guān)的的導(dǎo)航泛起在合適的位置,會(huì)讓人們陶醉,或是訪問(wèn)度更深。


  減少樞紐任務(wù)的選擇。導(dǎo)航需要清楚并且關(guān)注在人們真正需要的事情上,多考慮人們?cè)诰o急狀態(tài)和非理想狀態(tài)下盡快提供匡助。


  考慮人們?cè)谛蓍e時(shí)候使用手機(jī),并且請(qǐng)考慮橫屏設(shè)計(jì),讓人們更加賞識(shí)你簡(jiǎn)樸的設(shè)計(jì)。

上一條:標(biāo)題優(yōu)化...

下一條:好的網(wǎng)站推廣,要處理以下...