文章列舉了8個(gè)遵循移動(dòng)優(yōu)先設(shè)計(jì)理念的網(wǎng)站案例供大家學(xué)習(xí)和參考,一起來看!
2011年,Luke Wroblewski大神提出了移動(dòng)優(yōu)先的設(shè)計(jì)理念。在當(dāng)時(shí)看來這無疑是一個(gè)打破行業(yè)常規(guī)的新型設(shè)計(jì)原則。而在移動(dòng)互聯(lián)網(wǎng)大行其道的今天,誰遵守移動(dòng)優(yōu)先的設(shè)計(jì)理念,設(shè)計(jì)出最好的移動(dòng)端網(wǎng)站,誰就能贏得用戶和商機(jī)。由此,移動(dòng)端網(wǎng)站設(shè)計(jì)的重要性對(duì)各大商家來說,毋庸置疑。
“先完成web設(shè)計(jì)再移植移動(dòng)設(shè)計(jì)”的常規(guī)模式已經(jīng)不再適用, 移動(dòng)化必將是未來互聯(lián)網(wǎng)行業(yè)的發(fā)展趨勢(shì)。所以移動(dòng)優(yōu)先的網(wǎng)站設(shè)計(jì)將會(huì)變成一個(gè)新的潮流,即便這個(gè)理念已經(jīng)存在了好幾年。
為什么移動(dòng)優(yōu)先設(shè)計(jì)理念如此重要?
據(jù)《全球互聯(lián)網(wǎng)報(bào)告》,截至2016年,全球智能手機(jī)用戶已達(dá)28億。與此同時(shí),人們每天在移動(dòng)端使用網(wǎng)絡(luò)的時(shí)間越來越長。早在2012年,全球智能手機(jī)的銷量就超過PC電腦的銷量。
移動(dòng)端需求的爆炸式增長,要求設(shè)計(jì)師在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí),重視產(chǎn)品的移動(dòng)端版本,遵從移動(dòng)優(yōu)先的設(shè)計(jì)原則。我相信,這些理由已經(jīng)足夠讓設(shè)計(jì)師和商家們好好研究移動(dòng)端網(wǎng)頁設(shè)計(jì),并從中獲益。
有哪些優(yōu)秀的移動(dòng)優(yōu)先設(shè)計(jì)案例?
今年YouTube的改版就已經(jīng)體現(xiàn)了“移動(dòng)優(yōu)先”設(shè)計(jì)的權(quán)威。Material Design 體現(xiàn)出“桌面版是移動(dòng)版的從屬”這一設(shè)計(jì)思想。正對(duì)應(yīng)了微軟現(xiàn)任 CEO 納德拉喊出來的口號(hào)——“移動(dòng)優(yōu)先”。
對(duì)這句話的最通俗的解釋就是:以前,手機(jī)版是“縮小了的桌面網(wǎng)頁”,而現(xiàn)在桌面版是“放大了的手機(jī) App”。那么,借此機(jī)會(huì),我們列舉了8個(gè)遵循移動(dòng)優(yōu)先設(shè)計(jì)理念的網(wǎng)站案例供大家學(xué)習(xí)和參考。
設(shè)計(jì)亮點(diǎn):按鈕、文字顯示留白
夜間模式
YouTube桌面網(wǎng)頁版的Material Design設(shè)計(jì)語言,也體現(xiàn)出了強(qiáng)烈的優(yōu)先照顧移動(dòng)設(shè)備的特征。響應(yīng)式設(shè)計(jì)自然是應(yīng)有之義,按鈕以及文字顯示的大量留白,無疑是為了適應(yīng)小屏幕觸屏的使用。
新采用的夜間模式也顯示其對(duì)移動(dòng)設(shè)備的臣服。桌面版設(shè)備界面大多是白色背景,而在移動(dòng)端更好的方案則是使用屏幕偏黃光的夜燈模式,而不是整體界面都變成黑底白字。在所有光源都取消,且屏幕尺寸不大的情況下,手持設(shè)備用黑底白字的界面同時(shí)降低亮度,才會(huì)讓眼睛更舒服。
設(shè)計(jì)亮點(diǎn):便捷的滾動(dòng)式導(dǎo)航
根據(jù)Nielson/Norman Group,它所發(fā)表的一篇用戶體驗(yàn)調(diào)查研究顯示,隱藏導(dǎo)航(如漢堡導(dǎo)航)會(huì)減少21%的內(nèi)容可發(fā)現(xiàn)性,并平均增加使用導(dǎo)航2秒。而蘋果網(wǎng)站的內(nèi)容被布局的非常棒,所以我并不需要使用導(dǎo)航按鈕,我可以通過滾動(dòng)頁面,十分便捷地獲取信息。一個(gè)購物袋的圖標(biāo)按鈕通常是有必要且一目了然的,以符合用戶的購買需求。如果瀏覽頁面后仍獲取不到所需信息,我可以在底部導(dǎo)航中深度檢索得到想要的信息。
設(shè)計(jì)亮點(diǎn):拇指化設(shè)計(jì)
雖然現(xiàn)在有許多拇指化區(qū)域的研究,但仍有許多網(wǎng)站與應(yīng)用將導(dǎo)航放至屏幕頂部。因?yàn)榇蠹叶际沁@么做的。但如果你留心拇指觸及區(qū)域,你會(huì)發(fā)現(xiàn)手機(jī)越大,屏幕外部邊緣區(qū)域的內(nèi)容越難以被用戶接觸到。而類似Pitchfork這樣的移動(dòng)網(wǎng)頁則是將網(wǎng)站主導(dǎo)航欄放在屏幕最底部,拇指最容易觸及到的地方。隨著移動(dòng)設(shè)備持有量的不斷增長,這樣的設(shè)計(jì)也將是未來所向。
設(shè)計(jì)亮點(diǎn):大菜單按鈕–非常適合觸屏操作
Typeform的桌面網(wǎng)站設(shè)計(jì)非常精美,簡潔的副本,高清視頻,動(dòng)畫等設(shè)計(jì)元素。但是復(fù)雜的設(shè)計(jì)組件對(duì)移動(dòng)端用戶并不友好,比如視頻和動(dòng)畫可能會(huì)顯著影響頁面加載時(shí)間。因此,他們?cè)谝苿?dòng)端網(wǎng)頁上刪減了許多不必要的設(shè)計(jì)元素,但保留了適合在移動(dòng)設(shè)備上操作的大菜單按鈕,簡單卻不失精美,簡化了整體移動(dòng)體驗(yàn)。
設(shè)計(jì)亮點(diǎn):卡片式設(shè)計(jì)
卡片式設(shè)計(jì)更易在有限時(shí)間內(nèi)讓用戶與信息相互聯(lián)系。這也是谷歌選擇卡片式設(shè)計(jì)作為他們?cè)O(shè)計(jì)標(biāo)準(zhǔn)的原因。其他互聯(lián)網(wǎng)公司例如Airbnb也逐漸認(rèn)同并采取這個(gè)做法。每張卡片的信息傳達(dá)簡潔而有效,通常由一個(gè)標(biāo)題、圖片、圖表或是一段簡介文字組成。這種設(shè)計(jì)為用戶提供了足夠的信息并且方便他們決定是否想要繼續(xù)更深層次了解更多信息。
設(shè)計(jì)亮點(diǎn):重視用戶,合理優(yōu)化屏幕使用空間
數(shù)據(jù)顯示,越來越多的互聯(lián)網(wǎng)用戶選擇阻止他們不想要的內(nèi)容,尤其是移動(dòng)端用戶近年來攔截廣告的趨勢(shì)直線上升。不變的導(dǎo)航設(shè)置、滿屏幕的廣告宣傳、過度的市場術(shù)語使用,這些并不能為用戶帶來良好的用戶體驗(yàn)。如果你想推送用戶廣告或引導(dǎo)用戶繼續(xù)閱讀,可以循序漸進(jìn)地根據(jù)用戶瀏覽的內(nèi)容選擇性推送。經(jīng)過策略性排版的內(nèi)容也更容易讓用戶主動(dòng)點(diǎn)擊,從而提升用戶體驗(yàn)。如果只是單純的為了獲取利潤而打破用戶體驗(yàn)或者讓他們跳轉(zhuǎn)頁面,逐漸的用戶會(huì)越來越少,利潤也會(huì)隨著用戶的流失而減少。
設(shè)計(jì)亮點(diǎn):有效的動(dòng)畫效果
在網(wǎng)頁中出現(xiàn)的動(dòng)畫是輔助用戶形象地了解當(dāng)前事物,賦予用戶體驗(yàn)更強(qiáng)的表現(xiàn)力與人性化,而不是娛樂大眾。例如Mailchimp將其運(yùn)用為寄信成功后的擊掌,Twitter在轉(zhuǎn)發(fā)或喜歡功能上使用的小動(dòng)畫,再比如Facebook制做的形象生動(dòng)的表情包。但如果你想在頁面上制作動(dòng)畫,請(qǐng)確保它是雅致而得體的。
設(shè)計(jì)亮點(diǎn):干凈清爽的手機(jī)UI界面
Evernote主要是提供筆記存儲(chǔ)服務(wù),允許用戶在全平臺(tái)的設(shè)備上訪問。因此Evernote也必須獲得正確的移動(dòng)體驗(yàn)。和桌面版的網(wǎng)頁設(shè)計(jì)一樣,Evernote的移動(dòng)端網(wǎng)頁設(shè)計(jì)也是同樣的保持了干凈清爽的UI界面設(shè)計(jì)。此外,網(wǎng)頁上恰到好處的CTA按鈕對(duì)用戶來說是非常有用的。
通過今年Youtube的改版,相信今后會(huì)有更多的商家重視起移動(dòng)優(yōu)先的設(shè)計(jì)理念。也希望以上列舉的8個(gè)移動(dòng)優(yōu)先設(shè)計(jì)的案例能為你的新產(chǎn)品或新網(wǎng)站的建設(shè)提供一些參考思路。移動(dòng)版受限于流量必須簡單粗糙,而桌面版則極盡華麗之能事。但現(xiàn)在“移動(dòng)優(yōu)先”幾乎成為一句“正確的廢話”,因?yàn)樗兂闪藥缀跛泄韫戎髁髌髽I(yè)的常識(shí)。
標(biāo)簽: 南昌網(wǎng)站建設(shè)公司/南昌做網(wǎng)站的公司/南昌微信小程序/南昌APP開發(fā)/—斑驢互聯(lián)