2014-12-29 分類(lèi): 網(wǎng)站建設(shè)
8種方法來(lái)優(yōu)化移動(dòng)網(wǎng)站
當(dāng)世界從桌面電腦到移動(dòng)設(shè)備,設(shè)計(jì)師更注重用戶體驗(yàn)。盡管用戶界面創(chuàng)建移動(dòng)友好的設(shè)計(jì)中扮演著重要的角色,用戶體驗(yàn)已成為同樣重要的,當(dāng)世界從臺(tái)式電腦轉(zhuǎn)向移動(dòng)設(shè)備,成為設(shè)計(jì)師甚至UX更有針對(duì)性。雖然用戶界面在創(chuàng)造適合移動(dòng)設(shè)備的設(shè)計(jì)中的一個(gè)重要的角色,用戶體驗(yàn)現(xiàn)已成為同樣重要的,特別是因?yàn)槲覀儸F(xiàn)在有更多的設(shè)備集中于和用戶體驗(yàn)與設(shè)備的類(lèi)型而不同。
拉胡爾是正確的這一比喻。你可以有你的網(wǎng)站最吸引人的,人性化的,獨(dú)特的,功能性的桌面版本,但如果你不采取移動(dòng)體驗(yàn)考慮,你只是畫(huà)沒(méi)有任何想法。
那么,是什么從一個(gè)壞一個(gè)很好的移動(dòng)體驗(yàn)分開(kāi)?這不是太難以分開(kāi),使一個(gè)高效,優(yōu)化,以用戶為中心設(shè)計(jì)的重要組成部分。但這里是應(yīng)該引導(dǎo)你前進(jìn)的道路上的一些好做法:
1)不排除移動(dòng)先行
如果您的網(wǎng)站是針對(duì)移動(dòng)用戶體驗(yàn),您可能希望通過(guò)執(zhí)行“移動(dòng)第一”的戰(zhàn)略,以打破傳統(tǒng)。有一個(gè)在擁抱你的時(shí)候是積極的,大多數(shù)用戶將通過(guò)移動(dòng)設(shè)備訪問(wèn)您的網(wǎng)站這種技術(shù)沒(méi)有壞處。正如codemyviews表明,移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)不是一個(gè)小眾,但實(shí)際上,“1.2十億全球移動(dòng)互聯(lián)網(wǎng)用戶”和數(shù)字似乎并沒(méi)有很快將任何時(shí)間(很可能在不久的將來(lái)增加)。這可能是有點(diǎn)起初挑戰(zhàn);但如果你愿意首先把你的用戶,這是值得一試。
僅僅因?yàn)槟阋呀?jīng)旨在設(shè)計(jì)一個(gè)簡(jiǎn)單,干凈,或移動(dòng)為中心的網(wǎng)站并不意味著它不應(yīng)該是復(fù)雜的。 Karimrashid.com是簡(jiǎn)單性和復(fù)雜性如何可以混合到創(chuàng)造一個(gè)干凈,反應(yīng)靈敏,但優(yōu)雅的設(shè)計(jì)好的例子。
2)創(chuàng)建流動(dòng)布局
只是有太多的可能的屏幕尺寸在那里挑選哪些你設(shè)計(jì)了。你需要?jiǎng)?chuàng)建一個(gè)盡可能無(wú)縫適應(yīng)所有的布局。幸運(yùn)的是,流體布局在這里保存一天!
基于百分比,而不是明確的測(cè)量像像素,流體布局已經(jīng)成為網(wǎng)絡(luò)專(zhuān)業(yè)人士的標(biāo)準(zhǔn)。他們可能會(huì)非常棘手,但確保盡可能多的人能夠真正使用你的網(wǎng)站是非常值得的努力。
3)瞄準(zhǔn)的功能
什么是功能?這就是你提供你的訪問(wèn)者得到完成的事情,做得風(fēng)生水起。根據(jù)網(wǎng)站的目的,所有的工具,如最近的商店位置,產(chǎn)品搜索,產(chǎn)品評(píng)論,或貨幣轉(zhuǎn)換器,能幫助用戶完成預(yù)期的“功能”,實(shí)現(xiàn)目標(biāo)要快得多。
普瑞納,寵物食品供應(yīng)商,是如何使Web頁(yè)上的“功能”更容易的好典范。主頁(yè)有一個(gè)搜索框,可以搜索你要找的東西。 。下面是什么樣的,他們專(zhuān)注于動(dòng)物性食品中兩個(gè)單獨(dú)的列中的整個(gè)網(wǎng)站很容易與列,按鈕,工具和設(shè)計(jì)元素,使決定一種寵物食品進(jìn)行導(dǎo)航 - 再買(mǎi)入 - 一件輕而易舉的事。
4)確定你的用戶
不要試圖成為所有萬(wàn)事通,因?yàn)樗赡軙?huì)花費(fèi)你一個(gè)典型的用戶,沒(méi)有人希望這樣。先找出你的用戶是誰(shuí)。然后找出他們的典型的web瀏覽行為。一旦這樣擱置,找出是什么使他們打勾?,F(xiàn)代的用戶主要有兩大類(lèi):那些誰(shuí)心中沒(méi)有目標(biāo)瀏覽,和那些誰(shuí)正在尋求執(zhí)行一項(xiàng)任務(wù)。每個(gè)組都需要根據(jù)自己的需求不同的“功能”。
這并不困難,因?yàn)樗粝碌陌凳颈椴柬?yè)面猜測(cè)The Body Shop的網(wǎng)站的用戶的人口統(tǒng)計(jì)數(shù)據(jù)。由于The Body Shop的高度集中的“天然成分”等社會(huì)活動(dòng),單色綠色的變化,天然成分的滑塊,圖像的“綠色”的選擇,以及對(duì)公平交易,質(zhì)押及其他社交活動(dòng)報(bào)告是可以理解的發(fā)達(dá)的設(shè)計(jì)理念。
5)總是仰望開(kāi)發(fā)商的圖書(shū)館和準(zhǔn)則
根據(jù)您將使用該平臺(tái)上,必須給UI準(zhǔn)則密切關(guān)注。有些平臺(tái)允許比別人更多的靈活性。無(wú)論情況,品牌或“簽名”的一些關(guān)鍵部件應(yīng)保持。
蘋(píng)果應(yīng)用程序開(kāi)發(fā)人員應(yīng)該看看的iOS人機(jī)界面指南,并按照蘋(píng)果的標(biāo)準(zhǔn),當(dāng)涉及到設(shè)計(jì)基礎(chǔ),設(shè)計(jì)策略,UI元素,圖標(biāo)/形象設(shè)計(jì)等。Android開(kāi)發(fā)者,在另一方面,應(yīng)了解所有組件,風(fēng)格,易用性,以及典型的Android應(yīng)用程序與Android開(kāi)發(fā)指南的幫助布局。
6)使所有的內(nèi)容提供給所有用戶
一些設(shè)計(jì)師,而不是使流體布局所有內(nèi)容的工作,就干脆選擇隱藏它的一些手機(jī)用戶。有時(shí)是因?yàn)椴季质羌值?,或者他們覺(jué)得有一個(gè)移動(dòng)的布局只是太多的內(nèi)容。這是錯(cuò)誤的做法。
為用戶提供您的網(wǎng)站或應(yīng)用程序的“精簡(jiǎn)版”不僅是移動(dòng)用戶不公平的,但能認(rèn)真適得其反,而失去你的客戶。您可能需要簡(jiǎn)化布局到了極致,將一些內(nèi)容到其他屏幕,以減少混亂,或者只是盡量安排這一切更好;但它需要在那里。
比較BBC網(wǎng)站的桌面版本的移動(dòng)版本。雖然簡(jiǎn)單比它曾經(jīng)是,但它仍然把各種信息都在屏幕上。移動(dòng)版本,相比之下,一些滴圖像(這仍然在自己的文章有),但保留所有的頭條新聞,大大簡(jiǎn)化了手機(jī)大小的屏幕上的經(jīng)驗(yàn)。
7)設(shè)計(jì)用于觸摸
它也是有用的心中有一個(gè)移動(dòng)設(shè)備用戶將被代替使用精密型的鼠標(biāo)指針的手指的事實(shí)。你的設(shè)計(jì)應(yīng)該很容易與所有尺寸和形狀的手指來(lái)導(dǎo)航,考慮到所有的移動(dòng)設(shè)備,現(xiàn)在觸摸屏。用戶不應(yīng)該掐過(guò)多或放大挖掘的東西或填寫(xiě)表格或點(diǎn)擊一個(gè)按鈕。不準(zhǔn)確的水龍頭也應(yīng)與足夠大的觸摸輸入或手勢(shì)設(shè)計(jì)中占到完成任務(wù)的小型設(shè)備非常普遍。
這里是由彼得·保羅·科赫觸摸表,這可能有助于。注意事件(以及其他操作)如何觸摸可能因?yàn)g覽器的兼容性和設(shè)備的不同而不同。
8)使用壓縮工具
工具當(dāng)今的金額用于制作設(shè)計(jì)師的工作負(fù)擔(dān)較輕是深不可測(cè)。你會(huì)發(fā)現(xiàn)腳本的壓縮機(jī),如HTML壓縮機(jī)或Gzip壓縮,將自動(dòng)刪除不必要的注釋?zhuān)崭?,或代碼。 CSS minifier和CSS壓縮機(jī)和一些工具,讓您連接CSS代碼和提高性能。圖像壓縮也是同樣重要的;一些會(huì)減少你的.jpeg和.png文件的大小,同時(shí)仍保持完好的質(zhì)量包括EWWW圖像優(yōu)化技術(shù),smush.it,使用OptiPNG和jpegtran。
這里的雷約翰遜高度敏感的投資組合設(shè)計(jì)的一個(gè)例子。該網(wǎng)站是充滿壯觀圖片來(lái)自桌面版本沒(méi)有什么不同的。秘訣快速加載這里,毫無(wú)疑問(wèn),圖像優(yōu)化。
創(chuàng)新互聯(lián)設(shè)計(jì)文章推薦:
淮上網(wǎng)站制作公司
禹會(huì)網(wǎng)站制作,禹會(huì)制作網(wǎng)站
名稱(chēng)欄目:8種方法來(lái)優(yōu)化移動(dòng)網(wǎng)站
分享地址:http://www.rwnh.cn/news6/20506.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化、小程序開(kāi)發(fā)、網(wǎng)站建設(shè)、網(wǎng)站改版、面包屑導(dǎo)航、軟件開(kāi)發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容