本文列出了八個(gè)網(wǎng)站案例，這些案例遵循移動(dòng)優(yōu)先設(shè)計(jì)理念，供大家學(xué)習(xí)和參考，并聚集在一起！

2011年，Luke Wroblewski提出了移動(dòng)優(yōu)先級(jí)的設(shè)計(jì)理念。當(dāng)時(shí)，這似乎是一個(gè)新的設(shè)計(jì)原則，打破了行業(yè)慣例。今天，當(dāng)移動(dòng)互聯(lián)網(wǎng)受歡迎時(shí)，無(wú)論誰(shuí)遵循移動(dòng)優(yōu)先設(shè)計(jì)理念并設(shè)計(jì)最好的移動(dòng)網(wǎng)站，都將贏得客戶和商機(jī)。因此，移動(dòng)網(wǎng)站設(shè)計(jì)的重要性無(wú)疑是主要業(yè)務(wù)。

“完成網(wǎng)頁(yè)設(shè)計(jì)然后移植移動(dòng)設(shè)計(jì)的第一步”已不再適用。移動(dòng)化必將成為未來(lái)互聯(lián)網(wǎng)行業(yè)的發(fā)展趨勢(shì)。因此，移動(dòng)優(yōu)先網(wǎng)站設(shè)計(jì)將成為一種新趨勢(shì)，盡管這一概念已經(jīng)存在多年。

　為什么移動(dòng)優(yōu)先設(shè)計(jì)理念如此重要?

根據(jù)《全球互聯(lián)網(wǎng)報(bào)告》，截至2016年，全球智能手機(jī)用戶數(shù)已達(dá)28億。

與此同時(shí)，人們每天都在移動(dòng)方面花費(fèi)越來(lái)越多的時(shí)間。

早在2012年，全球智能手機(jī)的銷量就超過(guò)了PC的銷量。

移動(dòng)需求的爆炸式增長(zhǎng)要求設(shè)計(jì)人員在設(shè)計(jì)產(chǎn)品時(shí)注意產(chǎn)品的移動(dòng)版本，并遵循移動(dòng)優(yōu)先的設(shè)計(jì)原則。我相信這些原因足以讓設(shè)計(jì)師和商家學(xué)習(xí)移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)并從中受益。

　有哪些優(yōu)秀的移動(dòng)優(yōu)先設(shè)計(jì)案例?

今年的YouTube修訂版已經(jīng)證明了“移動(dòng)優(yōu)先”設(shè)計(jì)的權(quán)威性。 Material Design體現(xiàn)了“桌面版本是移動(dòng)版本的下屬”的設(shè)計(jì)理念。它對(duì)應(yīng)于口號(hào)——&ndquo; move priority"

這句話最流行的解釋是：過(guò)去，移動(dòng)版本是“縮小桌面版”，現(xiàn)在桌面版是“放大移動(dòng)應(yīng)用”。然后，借此機(jī)會(huì)，我們列出了8個(gè)遵循移動(dòng)優(yōu)先級(jí)設(shè)計(jì)理念的網(wǎng)站案例供大家學(xué)習(xí)和參考。

　1. YouTube

設(shè)計(jì)亮點(diǎn)：按鈕，文字顯示空白

夜間模式

YouTube桌面網(wǎng)絡(luò)版的材料設(shè)計(jì)語(yǔ)言也反映了移動(dòng)設(shè)備的強(qiáng)大優(yōu)先級(jí)。響應(yīng)式設(shè)計(jì)自然應(yīng)該是應(yīng)有的，并且按鈕和文本顯示的大量空白空間無(wú)疑適用于小屏幕觸摸屏的使用。

新采用的夜間模式也顯示其向移動(dòng)設(shè)備投降。桌面設(shè)備界面大多是白色背景，移動(dòng)端的更好解決方案是使用帶黃色屏幕的夜燈模式，而不是整個(gè)界面變?yōu)榘咨谏?。在所有光源都被取消且屏幕尺寸不大的情況下，手持設(shè)備使用黑白界面同時(shí)降低亮度，使眼睛更舒適。

　2. Apple

設(shè)計(jì)亮點(diǎn)：方便的滾動(dòng)導(dǎo)航

根據(jù)Nielson/Norman Group發(fā)布的用戶體驗(yàn)調(diào)查，隱藏導(dǎo)航（例如漢堡導(dǎo)航）將內(nèi)容的可發(fā)現(xiàn)性降低了21％，并將導(dǎo)航的平均使用時(shí)間增加了2秒。 Apple網(wǎng)站的內(nèi)容布局得很好，所以我不需要使用導(dǎo)航按鈕。我可以通過(guò)滾動(dòng)頁(yè)面輕松獲取信息。購(gòu)物袋的圖標(biāo)按鈕通常是必要的，并且一目了然地符合用戶的購(gòu)買需求。如果在瀏覽頁(yè)面后仍然無(wú)法獲取所需信息，我可以在底部導(dǎo)航中深入檢索所需信息。

　3. Pitchfork

設(shè)計(jì)亮點(diǎn)：拇指設(shè)計(jì)

盡管有很多關(guān)于拇指區(qū)域的研究，但仍有許多網(wǎng)站和應(yīng)用程序?qū)?dǎo)航放在屏幕頂部。因?yàn)槊總€(gè)人都這樣做。但是如果你注意拇指觸摸的區(qū)域，你會(huì)發(fā)現(xiàn)手機(jī)越大，用戶觸摸屏幕外邊緣的內(nèi)容就越困難。像Pitchfork這樣的移動(dòng)網(wǎng)頁(yè)將網(wǎng)站的主導(dǎo)航欄放在屏幕的底部，拇指最容易到達(dá)。隨著移動(dòng)設(shè)備的不斷發(fā)展，這種設(shè)計(jì)將成為未來(lái)。

　4. Typeform

設(shè)計(jì)亮點(diǎn)：大菜單按鈕–非常適合觸摸屏操作

Typeform的桌面網(wǎng)站設(shè)計(jì)精美，簡(jiǎn)約，高清視頻，動(dòng)畫(huà)和其他設(shè)計(jì)元素。但復(fù)雜的設(shè)計(jì)組件對(duì)移動(dòng)用戶并不友好，例如視頻和動(dòng)畫(huà)，這會(huì)顯著影響頁(yè)面加載時(shí)間。因此，他們刪除了移動(dòng)網(wǎng)頁(yè)上的許多不必要的設(shè)計(jì)元素，但保留了適合在移動(dòng)設(shè)備上操作的大菜單按鈕，簡(jiǎn)單而美觀，簡(jiǎn)化了整體移動(dòng)體驗(yàn)。

　5. Airbnb

設(shè)計(jì)亮點(diǎn)：卡片設(shè)計(jì)

卡設(shè)計(jì)使得在有限的時(shí)間內(nèi)更輕松地連接用戶和信息。這就是為什么谷歌選擇卡片設(shè)計(jì)作為他們的設(shè)計(jì)標(biāo)準(zhǔn)。其他互聯(lián)網(wǎng)公司如Airbnb已逐漸同意采用這種方法。每張卡片的信息簡(jiǎn)單有效，通常由標(biāo)題，圖片，圖表或簡(jiǎn)短文字組成。此設(shè)計(jì)為用戶提供了足夠的信息，使他們可以輕松決定是否繼續(xù)了解更多信息。

　6. Smashing Magazine

設(shè)計(jì)亮點(diǎn)：關(guān)注用戶并優(yōu)化屏幕空間的使用

數(shù)據(jù)顯示，越來(lái)越多的互聯(lián)網(wǎng)用戶選擇阻止他們不想要的內(nèi)容，特別是近年來(lái)移動(dòng)用戶一直在阻礙廣告。不變的導(dǎo)航設(shè)置，全屏廣告和過(guò)多的市場(chǎng)術(shù)語(yǔ)不能為用戶提供良好的用戶體驗(yàn)。如果您想推送用戶廣告或直接用戶繼續(xù)閱讀，您可以根據(jù)用戶瀏覽的內(nèi)容有選擇地推送。策略化格式化的內(nèi)容也更易于用戶主動(dòng)點(diǎn)擊以增強(qiáng)用戶體驗(yàn)。如果您只是打破用戶體驗(yàn)以獲取利潤(rùn)或讓他們跳轉(zhuǎn)到頁(yè)面，則用戶數(shù)量將逐漸減少，并且隨著用戶的損失，利潤(rùn)將減少。

　7. Facebook

設(shè)計(jì)亮點(diǎn)：有效的動(dòng)畫(huà)效果

網(wǎng)頁(yè)中出現(xiàn)的動(dòng)畫(huà)是幫助用戶在視覺(jué)上理解當(dāng)前的事物，為用戶提供更具表現(xiàn)力和人性化的體驗(yàn)，而不是為了娛樂(lè)公眾。例如，Mailchimp在一封成功的信件，Twitter用于轉(zhuǎn)發(fā)或喜歡功能的小動(dòng)畫(huà)以及Facebook制作的生動(dòng)表達(dá)包之后將其用作高五。但是如果你想在頁(yè)面上制作動(dòng)畫(huà)，請(qǐng)確保它優(yōu)雅而體面。

　　8. Evernote

設(shè)計(jì)亮點(diǎn)：干凈清爽的移動(dòng)UI界面

Evernote主要提供筆記存儲(chǔ)服務(wù)，允許用戶在所有平臺(tái)設(shè)備上訪問(wèn)它。所以Evernote也必須獲得正確的移動(dòng)體驗(yàn)。與網(wǎng)頁(yè)設(shè)計(jì)的桌面版一樣，Evernote的移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)與干凈清爽的UI界面設(shè)計(jì)相同。此外，網(wǎng)頁(yè)上恰到好處的CTA按鈕對(duì)用戶非常有用。

通過(guò)今年Youtube的修訂，我相信更多的企業(yè)將會(huì)關(guān)注未來(lái)移動(dòng)優(yōu)先的設(shè)計(jì)理念。我也希望上面列出的八個(gè)移動(dòng)優(yōu)先設(shè)計(jì)案例可以為您的新產(chǎn)品或新網(wǎng)站的構(gòu)建提供一些參考。移動(dòng)版本受限于流量必須簡(jiǎn)單粗糙，而桌面版本非常華麗。但現(xiàn)在“移動(dòng)優(yōu)先”幾乎是“正確的廢話”，因?yàn)樗殉蔀閹缀跛兄髁鞴韫裙镜某ＷR(shí)。

本文最初由@jongde發(fā)布。未經(jīng)許可，禁止復(fù)制。

« 首次在云上舉行的“草莓音樂(lè)節(jié)”超過(guò)了520萬(wàn)人，東京直播為2020年仲夏點(diǎn)燃了熱烈的愛(ài)之火 | 大型搜索汽車并購(gòu)汽車輕松拍攝10萬(wàn)輛汽車經(jīng)銷商進(jìn)入二手車戰(zhàn)斗局 »