注：移動(dòng)化必將是未來(lái)互聯(lián)網(wǎng)行業(yè)的發(fā)展趨勢(shì)。
2011 年，Luke Wroblewski大神提出了移動(dòng)優(yōu)先的設(shè)計(jì)理念。在當(dāng)時(shí)看來(lái)這無(wú)疑是一個(gè)打破行業(yè)常規(guī)的新型設(shè)計(jì)原則。而在移動(dòng)互聯(lián)網(wǎng)大行其道的今天，誰(shuí)遵守移動(dòng)優(yōu)先的設(shè)計(jì)理念，設(shè)計(jì)出最好的移動(dòng)端網(wǎng)站，誰(shuí)就能贏得用戶和商機(jī)。由此，移動(dòng)端網(wǎng)站設(shè)計(jì)的重要性對(duì)各大商家來(lái)說(shuō)，毋庸置疑。
“先完成web設(shè)計(jì)再移植移動(dòng)設(shè)計(jì)”的常規(guī)模式已經(jīng)不再適用， 移動(dòng)化必將是未來(lái)互聯(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ì)理念如此重要？
1. 據(jù)《全球互聯(lián)網(wǎng)報(bào)告》，截至 2016 年，全球智能手機(jī)用戶已達(dá) 28 億。
2. 與此同時(shí)，人們每天在移動(dòng)端使用網(wǎng)絡(luò)的時(shí)間越來(lái)越長(zhǎng)。
3. 早在 2012 年，全球智能手機(jī)的銷量就超過(guò)PC電腦的銷量。
移動(dòng)端需求的爆炸式增長(zhǎ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)頁(yè)設(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 納德拉喊出來(lái)的口號(hào)——“移動(dòng)優(yōu)先”。
對(duì)這句話的最通俗的解釋就是：以前，手機(jī)版是“縮小了的桌面網(wǎng)頁(yè)”，而現(xiàn)在桌面版是“放大了的手機(jī) App”。那么，借此機(jī)會(huì)，我們列舉了 8 個(gè)遵循移動(dòng)優(yōu)先設(shè)計(jì)理念的網(wǎng)站案例供大家學(xué)習(xí)和參考。
1. YouTube
設(shè)計(jì)亮點(diǎn)：按鈕、文字顯示留白、夜間模式
YouTube桌面網(wǎng)頁(yè)版的Material Design設(shè)計(jì)語(yǔ)言，也體現(xiàn)出了強(qiáng)烈的優(yōu)先照顧移動(dòng)設(shè)備的特征。響應(yīng)式設(shè)計(jì)自然是應(yīng)有之義，按鈕以及文字顯示的大量留白，無(wú)疑是為了適應(yīng)小屏幕觸屏的使用。
新采用的夜間模式也顯示其對(duì)移動(dòng)設(shè)備的臣服。桌面版設(shè)備界面大多是白色背景，而在移動(dòng)端更好的方案則是使用屏幕偏黃光的夜燈模式，而不是整體界面都變成黑底白字。在所有光源都取消，且屏幕尺寸不大的情況下，手持設(shè)備用黑底白字的界面同時(shí)降低亮度，才會(huì)讓眼睛更舒服。
2. Apple
設(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)航按鈕，我可以通過(guò)滾動(dòng)頁(yè)面，十分便捷地獲取信息。一個(gè)購(gòu)物袋的圖標(biāo)按鈕通常是有必要且一目了然的，以符合用戶的購(gòu)買需求。如果瀏覽頁(yè)面后仍獲取不到所需信息，我可以在底部導(dǎo)航中深度檢索得到想要的信息。