移動(dòng)優(yōu)先設(shè)計(jì)：將用戶放在首位
移動(dòng)優(yōu)先設(shè)計(jì)是在構(gòu)建桌面版本之前為移動(dòng)設(shè)備構(gòu)建站點(diǎn)的實(shí)踐。
聽起來很簡單，對吧？與其先計(jì)劃桌面，然后再削減一半的想法以使其適合移動(dòng)設(shè)備，不如開始在創(chuàng)建移動(dòng)設(shè)備時(shí)著眼于網(wǎng)站。這意味著關(guān)注用戶，他們的需求以及炫耀客戶內(nèi)容的最佳方法。
但是，移動(dòng)優(yōu)先設(shè)計(jì)帶來了一系列挑戰(zhàn)，Web設(shè)計(jì)人員必須面對這些挑戰(zhàn)，才能為其客戶的移動(dòng)用戶提供出色的UX。
我不會騙你的，當(dāng)您第一次使用移動(dòng)優(yōu)先設(shè)計(jì)時(shí)，它似乎是一個(gè)很大的麻煩。它提出了許多需要解決的問題-屏幕的尺寸最明顯-但是如果您需要一些創(chuàng)造性思維和解決問題的方法，那么回報(bào)將會是巨大的。
讓我們看看如何一起解決移動(dòng)優(yōu)先設(shè)計(jì)。
通過Shopify合作伙伴計(jì)劃發(fā)展您的業(yè)務(wù)
無論您提供市場營銷，定制服務(wù)還是網(wǎng)站設(shè)計(jì)和開發(fā)服務(wù)，Shopify合作伙伴計(jì)劃都將助您成功。免費(fèi)加入并獲得收益分享機(jī)會，發(fā)展業(yè)務(wù)的工具以及充滿激情的商業(yè)社區(qū)。
為什么移動(dòng)優(yōu)先設(shè)計(jì)很重要？
所有網(wǎng)站都必須在Google的搜索結(jié)果中排名良好。您知道這一點(diǎn)，您的客戶也知道，在線購物者通過不斷地偏愛排名較高的網(wǎng)站來證明這一點(diǎn)。無論您是要?jiǎng)?chuàng)建博客，投資組合，還是在線商店，這都是對排名第一的競爭，因此您需要從第一天開始優(yōu)化客戶的網(wǎng)站。
谷歌已經(jīng)非常清楚地表明了移動(dòng)的重要性，這一點(diǎn)可以追溯到2010年，當(dāng)時(shí)首席執(zhí)行官埃里克·施密特（Eric Sc??hmidt）著名地宣布谷歌的開發(fā)人員正在致力于移動(dòng)優(yōu)先的設(shè)計(jì)。我們知道，適合移動(dòng)設(shè)備的網(wǎng)站在Google中排名的機(jī)會更大，因此，有必要針對移動(dòng)設(shè)備進(jìn)行優(yōu)化，而不是將其作為事后或事后補(bǔ)充。
2019年的移動(dòng)設(shè)備：統(tǒng)計(jì)
顯而易見，為什么Google會朝著移動(dòng)友好的互聯(lián)網(wǎng)邁出這樣的一步。2019年，全球有51.1億獨(dú)立移動(dòng)用戶，而移動(dòng)電話現(xiàn)在幾乎占人們上網(wǎng)時(shí)間的一半（準(zhǔn)確地說是48％）。這些統(tǒng)計(jì)數(shù)據(jù)引出了一個(gè)問題：您能否負(fù)擔(dān)不優(yōu)先考慮移動(dòng)設(shè)備的費(fèi)用？
有關(guān)電子商務(wù)和移動(dòng)設(shè)備的統(tǒng)計(jì)數(shù)據(jù)表明并非如此。在2019年第一季度，僅在美國，移動(dòng)電子商務(wù)支出就達(dá)到近390億美元，這表明移動(dòng)可以成為利潤豐厚的平臺。
人們現(xiàn)在比以往任何時(shí)候都更喜歡手機(jī)，這意味著現(xiàn)在比以往任何時(shí)候都更容易快速購買新衣服，注冊在線課程或隨時(shí)隨地預(yù)約。電子商務(wù)和移動(dòng)設(shè)備看起來像是完美的合作伙伴關(guān)系-午休時(shí)搶購交易，通勤上班時(shí)瀏覽新系列，甚至在回家之前就更換破舊的高跟鞋。
Shopify對 2018年黑色星期五/網(wǎng)絡(luò)星期一的分析證實(shí)了這一趨勢?？蛻舨辉傩枰陔娔X旁舒適地交出他們的錢—實(shí)際上，Shopify透露，黑色星期五周末期間，移動(dòng)設(shè)備占銷售額的66％。僅34％的銷售發(fā)生在臺式機(jī)上！
移動(dòng)優(yōu)先設(shè)計(jì)：shopify bfcm
Shopify的2018年BFCM結(jié)果。
移動(dòng)響應(yīng)式設(shè)計(jì)與移動(dòng)優(yōu)先設(shè)計(jì)：有什么區(qū)別？
沒有人會幻想移動(dòng)無關(guān)緊要-如今，任何值得其投入的網(wǎng)站設(shè)計(jì)師或網(wǎng)站建設(shè)者都將至少創(chuàng)建響應(yīng)移動(dòng)的網(wǎng)站。但是夠了嗎？
移動(dòng)響應(yīng)式設(shè)計(jì)的問題在于，它沒有針對移動(dòng)進(jìn)行適當(dāng)?shù)膬?yōu)化-它只是將相同的內(nèi)容重新格式化為適合任何類型的屏幕的格式。盡管這無疑是有用的，但它可能導(dǎo)致功能強(qiáng)大的桌面站點(diǎn)和笨拙的移動(dòng)版本不平衡。這是因?yàn)槭褂靡苿?dòng)響應(yīng)設(shè)計(jì)時(shí)，通常首先要?jiǎng)?chuàng)建桌面版本，然后將其安裝到其他設(shè)備上。
移動(dòng)優(yōu)先設(shè)計(jì)是不同的。這是一種逐步增強(qiáng)的形式，您可以在其中首先設(shè)計(jì)用于更基本瀏覽的產(chǎn)品，例如移動(dòng)設(shè)備。
這意味著您的初始產(chǎn)品是一種精簡，移動(dòng)的設(shè)計(jì)，可提供出色的用戶體驗(yàn)。只有到那時(shí)，您才開始增強(qiáng)臺式機(jī)的設(shè)計(jì)，添加滾動(dòng)效果，大圖像，奇特效果和豐富的懸停按鈕以使其全面。
漸進(jìn)增強(qiáng)與替代概念（稱為平穩(wěn)降級）直接相反。這是從高級桌面版本開始，然后剪切功能使其適合更基本的瀏覽器（例如移動(dòng)設(shè)備）的更常見方法。
隨著移動(dòng)電話變得越來越強(qiáng)大，遵循逐步增強(qiáng)的道路并致力于移動(dòng)優(yōu)先設(shè)計(jì)似乎是明智的。但是最好的起點(diǎn)在哪里？讓我們找出答案。
您可能還會喜歡： 2019年的移動(dòng)設(shè)計(jì)趨勢。
移動(dòng)優(yōu)先，內(nèi)容優(yōu)先
進(jìn)行移動(dòng)優(yōu)先設(shè)計(jì)時(shí)首先要考慮的是內(nèi)容。由于移動(dòng)設(shè)備的限制更大，因此您需要確定內(nèi)容的優(yōu)先級，以便最清晰地看到最重要的信息和操作。
您需要確切地知道用戶訪問網(wǎng)站時(shí)正在尋找什么，以及哪些內(nèi)容對您的客戶最有價(jià)值。通過創(chuàng)建一個(gè)以內(nèi)容為中心的網(wǎng)站，您還可以通過向用戶提供他們真正想要的東西來將用戶放在第一位。
保持冷酷無情-不要用不必要，混亂或分散注意力的內(nèi)容來淹沒主頁。這可以很簡單，例如省去廣告，或切開歡迎信息以使用預(yù)訂表格。
歐洲旅行網(wǎng)站Trainline.com的此示例為移動(dòng)用戶提供了一種簡單的全屏表格，可簡化預(yù)訂旅程。它認(rèn)識到用戶訪問該站點(diǎn)的主要目的，并提供了一種滿足其需求的快速方法。您可以在下面看到移動(dòng)版本和桌面版本之間的區(qū)別：
移動(dòng)優(yōu)先設(shè)計(jì)：火車線
Trainline的移動(dòng)網(wǎng)站。
移動(dòng)優(yōu)先設(shè)計(jì)：trainline臺式機(jī)
Trainline的桌面站點(diǎn)。
在創(chuàng)建移動(dòng)內(nèi)容時(shí)，少即是多。理論上很簡單，但是您會驚訝地削減到幾乎所有必需品的難度。
首先設(shè)計(jì)移動(dòng)設(shè)備的主要目的是提供清晰，簡潔的內(nèi)容，以幫助用戶做出決策，然后快速采取行動(dòng)。速度始終是至關(guān)重要的，但這在移動(dòng)設(shè)備上比以往任何時(shí)候都更為重要。
10個(gè)易于操作的移動(dòng)優(yōu)先設(shè)計(jì)技巧
一旦確定了用戶的目標(biāo)和客戶的需求，然后決定了最重要的內(nèi)容，您就可以進(jìn)入真正有趣的部分：使它成為外觀最好的電子商務(wù)網(wǎng)站。
您已經(jīng)了解了其中一些內(nèi)容，但是希望以下提示可以幫助您開始設(shè)計(jì)最佳的移動(dòng)商店。提供出色的用戶體驗(yàn)永遠(yuǎn)是最后的選擇-順暢的旅程可帶來滿意的客戶和更多的轉(zhuǎn)化！
1.使用視覺層次
要使內(nèi)容包真正發(fā)揮作用，請按重要性排序，然后使用它來幫助構(gòu)建頁面布局。高優(yōu)先級內(nèi)容的示例包括特色產(chǎn)品，銷售商品，新收藏，折扣代碼，表格和號召性用語。
Shopify建的Biko商店很好地做到了這一點(diǎn)，它使用大而亮的粉紅色CTA和大寫的標(biāo)題將用戶吸引到頁面下方。
移動(dòng)優(yōu)先設(shè)計(jì)：biko
Biko的移動(dòng)網(wǎng)站。
所有常見的可疑對象仍然適用：標(biāo)題，不同大小的元素，粗體，以及更多幫助吸引用戶注意并引導(dǎo)他們?yōu)g覽網(wǎng)站的信息。在移動(dòng)設(shè)備上，這也有額外的好處。在移動(dòng)設(shè)備上增加CTAs可以吸引人們的注意，但同時(shí)也使用拇指或手指點(diǎn)擊超級容易。
2.避免大量內(nèi)容
無論是龐大的文本，龐大的圖像還是一英里長的形式，任何類型的內(nèi)容持續(xù)時(shí)間過長都將成為移動(dòng)購物者的主要選擇。
我們已經(jīng)變得非常急躁，這些東西在移動(dòng)設(shè)備上得到了放大—人們在旅途中，匆忙中或在工作會議之間進(jìn)行一些快速瀏覽。從過度滾動(dòng)到繁重的閱讀，任何感覺像拖拉的事情，都會使用戶跳過其他地方。
相反，請考慮如何用更少的單詞獲得相同的消息，或者添加一個(gè)交互式元素以使信息更易于管理。
UX設(shè)計(jì)師Adrian Zumbrunnen的網(wǎng)站azumbrunnen.me就是一個(gè)很好的例子，他使用類似文本的聊天氣泡來介紹自己。用戶可以從指導(dǎo)“對話”流程中選擇答案。這完全包含了移動(dòng)體驗(yàn)，握在手中時(shí)感覺非常自然。
移動(dòng)優(yōu)先設(shè)計(jì)：adrian zumbrunnen
Adrian Zumbrunnen的網(wǎng)站。
3.使元素可點(diǎn)擊
您是否曾經(jīng)去過移動(dòng)網(wǎng)站，并且一直不得不放大以使按鈕大到可以點(diǎn)擊？令人沮喪，不是嗎？不要像英國的超級市場Waitrose那樣，您必須在其中放大才能閱讀或單擊任何東西，這使導(dǎo)航變得很困難。
移動(dòng)優(yōu)先設(shè)計(jì)：waitrose
Waitrose的移動(dòng)網(wǎng)站。
至關(guān)重要的是，在為移動(dòng)設(shè)備設(shè)計(jì)時(shí)，您必須使菜單，按鈕，圖像和導(dǎo)航箭頭之類的元素足夠大，以便可以用拇指或手指輕松單擊。它們也應(yīng)該清晰，整潔和隔離，以免意外按壓錯(cuò)誤的物體。
使用空格包圍所有交互式元素，展開所有文本內(nèi)超鏈接，并留出較大的按鈕尺寸。這與桌面設(shè)計(jì)形成對比，在桌面設(shè)計(jì)中，訪問者很可能會使用鼠標(biāo)光標(biāo)來瀏覽網(wǎng)站。
要考慮的另一件事是，菜單和導(dǎo)航按鈕通常位于頁面頂部。但是，由于大多數(shù)人拿著電話的方式，這可能很尷尬，尤其是如果您只有一只手騰出來并且在高峰時(shí)間擠在地鐵上時(shí)！
使用戶的生活更加輕松，并考慮在屏幕底部放置菜單和重要按鈕。在線音樂雜志Pitchfork做到了，這很有意義。我知道，很革命吧？
移動(dòng)優(yōu)先設(shè)計(jì)：干草叉
干草叉的在線網(wǎng)站。
4.忘記懸停控制和滾動(dòng)效果
盡管這些功能非常適合在臺式機(jī)上使用，但缺少鼠標(biāo)光標(biāo)可以消除懸?？刂苹驖L動(dòng)效果帶來的任何好處。
懸停控制在電子商務(wù)中對產(chǎn)品圖像特別有用-顯示購物籃選項(xiàng)，替代顏色選擇，產(chǎn)品后視圖和產(chǎn)品縮放-甚至用于激活下拉菜單。但是，當(dāng)然，這不是手機(jī)上的選項(xiàng)，因?yàn)?ldquo;懸停”字面意思是用戶實(shí)際上并沒有在觸摸手機(jī)屏幕。
如果您通常依靠這樣的效果來創(chuàng)建良好的UX，則需要重新考慮如何顯示此信息以及如何向用戶明確顯示這些信息。定向消息（例如“輕按以縮放”或“輕掃以查看后視圖”）對于為用戶創(chuàng)建清晰的路徑很有用。
您可能還會喜歡：可能 毀掉移動(dòng)用戶體驗(yàn)的15個(gè)神話。
5.脫開并避免多余的數(shù)字重量
正如我們已經(jīng)提到的，通過移動(dòng)設(shè)備銷售時(shí)，速度是成敗的關(guān)鍵。由于移動(dòng)帶寬有限，這一事實(shí)使情況更加復(fù)雜。
要解決此問題，請保留不必要的代碼，避免使用過多的媒體文件，優(yōu)化圖像并計(jì)算每張圖片。激活A(yù)MP（加速的移動(dòng)頁面）。Shopify App Store中有很多AMP應(yīng)用程序，您可以安裝這些應(yīng)用程序以提高移動(dòng)加載速度。運(yùn)行移動(dòng)站點(diǎn)速度測試，然后再次運(yùn)行它們。
6.利用空白的力量
即使在臺式機(jī)上，混亂也不是任何人的朋友，但是在移動(dòng)設(shè)備上，這是您最大的敵人。保持事物簡約，整潔和獨(dú)立。
通過在移動(dòng)設(shè)計(jì)中使用大量空白，您可以通過強(qiáng)調(diào)重要元素來指導(dǎo)用戶。混合使用微觀和宏觀空白，并積極規(guī)劃您的空白，而不要碰碰運(yùn)氣。Google是使用宏空白的著名示例，而微型空白通常可以在段落，圖像和文本行之間找到。
移動(dòng)優(yōu)先設(shè)計(jì)：google
Google對宏空白的使用。
Mobile還使自己具有明亮，大膽的顏色，清晰的圖形和堅(jiān)固的形狀。它們與空白配合使用，以吸引用戶的眼球，并在頁面的其余部分突出顯示（再次，請考慮那個(gè)大膽而色彩豐富的Google徽標(biāo)）。
該網(wǎng)站不僅外觀會更好，而且移動(dòng)用戶可以更輕松地導(dǎo)航，使他們更有可能留在客戶的網(wǎng)站上進(jìn)行轉(zhuǎn)化。
您可能還會喜歡： 如何在移動(dòng)設(shè)計(jì)中使用空白。
7.根據(jù)內(nèi)容選擇斷點(diǎn)
網(wǎng)頁設(shè)計(jì)中的一種常見方法是根據(jù)所使用的設(shè)備確定斷點(diǎn)。
簡而言之，可以在斷點(diǎn)處更改設(shè)計(jì)布局，以使內(nèi)容看起來最佳。一般規(guī)則是，當(dāng)您的內(nèi)容開始變差時(shí)，您添加一個(gè)斷點(diǎn)。
您可以看到為設(shè)備設(shè)計(jì)背后的想法，但是它很快變得非常復(fù)雜。由于設(shè)備數(shù)量的斷斷續(xù)續(xù)和屏幕尺寸的局限性，現(xiàn)在無法通過設(shè)備定義斷點(diǎn)是可持續(xù)的，并且一直在發(fā)布更多斷點(diǎn)。
相反，您的斷點(diǎn)應(yīng)取決于站點(diǎn)的內(nèi)容，而不取決于所使用的設(shè)備。作為設(shè)計(jì)師，這將為您省去很多麻煩。
8.使通信移動(dòng)友好
移動(dòng)用戶需要簡單的方法來進(jìn)行聯(lián)系和交流。在移動(dòng)設(shè)備上，您習(xí)慣于通過Snapchat，Instagram或WhatsApp進(jìn)行短信，消息傳遞和快速發(fā)送通信。
使伸出手變得容易。實(shí)時(shí)聊天是一項(xiàng)出色的功能，因?yàn)樗从沉艘苿?dòng)用戶習(xí)慣于掌握的通信方式。它還提供了即時(shí)的滿足感，這始終是一個(gè)巨大的勝利。
此外，請考慮用戶如何提交星級，發(fā)表評論和評論，甚至喜歡并保存他們喜歡的產(chǎn)品。這些都是交流形式，需要快速簡便。
TripAdvisor是一個(gè)很好的例子，它可以使評論盡可能無縫，使整個(gè)表格適合手機(jī)屏幕，而無需任何滾動(dòng)。
