移動(dòng)網(wǎng)站設(shè)計(jì)吸引和轉(zhuǎn)換用戶(hù)的6個(gè)技巧

移動(dòng)是一個(gè)改善人們網(wǎng)絡(luò)體驗(yàn)的機(jī)會(huì)，計(jì)師可以通過(guò)七種方式提供幫助。

隨著移動(dòng)設(shè)備的出現(xiàn)，設(shè)計(jì)師不得不改變他們的方法。打印轉(zhuǎn)向數(shù)字化，設(shè)計(jì)師發(fā)現(xiàn)了人們與像素制作的內(nèi)容進(jìn)行交互的新方法。而現(xiàn)在，移動(dòng)設(shè)備已超越臺(tái)式機(jī)作為我們的網(wǎng)絡(luò)窗口。以下是設(shè)計(jì)師在今天的小屏幕上吸引和轉(zhuǎn)換用戶(hù)的6個(gè)技巧。

1.設(shè)計(jì)移動(dòng)設(shè)備

不久前，設(shè)計(jì)師們主要為龐大的桌面顯示器設(shè)計(jì)產(chǎn)品。這些提供了一個(gè)廣闊的畫(huà)布，為設(shè)計(jì)師提供了很多工作空間。限制迫使一種更實(shí)用的方法，減少視覺(jué)混亂和無(wú)意義的裝飾。

任何網(wǎng)頁(yè)設(shè)計(jì)的起點(diǎn)都應(yīng)該考慮網(wǎng)站可能顯示的最小屏幕。在較小屏幕的限制下工作將在各種設(shè)備上創(chuàng)建一致的體驗(yàn)。

在為移動(dòng)網(wǎng)站設(shè)計(jì)創(chuàng)建線框之前，請(qǐng)確保：

編譯必要的內(nèi)容并定義如何組織

為每個(gè)部分創(chuàng)建標(biāo)題

確定號(hào)召性用語(yǔ)及其展示位置

規(guī)劃您將使用的交互式元素的類(lèi)型

并計(jì)劃所有這些元素將如何在單列設(shè)計(jì)中流動(dòng)。

2.使用手勢(shì)微交互和動(dòng)畫(huà)

通過(guò)簡(jiǎn)單的向左或向右滑動(dòng)。移動(dòng)意味著更小的屏幕空間，這使得內(nèi)容和交互元素脫穎而出并清楚地傳達(dá)其目的非常重要。

微交互是可用性的一小部分，激發(fā)了某人立即采取行動(dòng)的反饋。我們?cè)诩s會(huì)應(yīng)用程序上向左或向右滑動(dòng)，并立即得到有人喜歡我們的消息（喘氣?。?。微交互使交互性快速直觀 - 它們是許多網(wǎng)站和應(yīng)用程序的決定性時(shí)刻。

基于滾動(dòng)的交互就像微交互一樣：它們?yōu)槲覀兪种械钠矫嫫聊惶砑恿藙?dòng)作。他們將動(dòng)態(tài)元素添加到設(shè)計(jì)中并充當(dāng)指南，吸引用戶(hù)的注意力，將其引導(dǎo)到您想要的位置，例如注冊(cè)表單。

3.保持簡(jiǎn)單

在設(shè)計(jì)移動(dòng)設(shè)備時(shí)，將所有內(nèi)容都拆分為基本組件。這不是關(guān)于無(wú)聊的，不起眼的文字漂浮在虛空中 - 但如果你可以做到這一點(diǎn)，你就會(huì)有更大的力量。它是關(guān)于精煉元素，以便只剩下重要的東西。

這意味著帶走不必要的項(xiàng)目，如圖形和繁忙的動(dòng)畫(huà)，不會(huì)增加用戶(hù)體驗(yàn)。極端陰影和其他模擬三維的圖形被拋在一邊，以實(shí)現(xiàn)更實(shí)用的設(shè)計(jì)。

相反，使用引人注目的顏色和充足的負(fù)空間。結(jié)合簡(jiǎn)單的排版，這可以使設(shè)計(jì)方法易于導(dǎo)航和快速加載。設(shè)計(jì)日歷利用負(fù)空間和強(qiáng)烈排版成功的平面設(shè)計(jì)。

4.快速加載時(shí)請(qǐng)注意

臺(tái)式機(jī)擁有更快的處理器，更強(qiáng)大的計(jì)算能力，并且無(wú)需在縮小的3G連接中填充兆字節(jié)。它們可以容納更大的文件大小，如長(zhǎng)視頻剪輯。您不希望有人登陸您的網(wǎng)頁(yè)，只會(huì)被未針對(duì)移動(dòng)設(shè)備優(yōu)化的文件陷入困境。

在為設(shè)計(jì)準(zhǔn)備視覺(jué)效果時(shí)，請(qǐng)確保：

使用組合良好，整潔，有意義的圖像

使用Photoshop等照片編輯軟件優(yōu)化所有圖像

使用適當(dāng)大小的比例圖像進(jìn)行布局

使用高質(zhì)量的背景視頻，但僅在必要時(shí) - 大多數(shù)移動(dòng)設(shè)備甚至無(wú)法顯示這些視頻

5.記住手機(jī)制作您的內(nèi)容

內(nèi)容需要分成小塊，在短暫的參與過(guò)程中很容易被消化。正如視覺(jué)設(shè)計(jì)元素需要精煉到只需要的東西一樣，內(nèi)容也是如此。這意味著制作簡(jiǎn)短，直接，清晰的句子和段落。

內(nèi)容組織在移動(dòng)設(shè)備上更為重要。每個(gè)部分都應(yīng)無(wú)縫地流入下一部分。不應(yīng)該有內(nèi)容的變化。當(dāng)有人滾動(dòng)瀏覽內(nèi)容時(shí)，一切都應(yīng)該有意義。一個(gè)想法需要邏輯地流入下一個(gè)想法。

號(hào)召行動(dòng)需要的不僅僅是耳語(yǔ) - 他們應(yīng)該引起注意。要編寫(xiě)更具吸引力的號(hào)召性用語(yǔ)：

給讀者一個(gè)行動(dòng)的理由

吸引他們的情緒

強(qiáng)調(diào)及時(shí)性的重要性

創(chuàng)造性地傳達(dá)品牌的個(gè)性

6.以正確的方式使用彈出窗口

彈出窗口是轉(zhuǎn)換的重要工具。他們需要使自己的外表變得有用，而不是分散注意力。彈出窗口需要的不僅僅是一般的提示 - 它應(yīng)該與您的品牌個(gè)性保持一致，并啟發(fā)一個(gè)特定的行動(dòng)，讓讀者獲得一些東西。即使它將來(lái)只是更多的免費(fèi)內(nèi)容。

彈出窗口需要錨定到特定內(nèi)容。不要在每個(gè)頁(yè)面的頂部不加選擇地顯示，而是將它們編織到內(nèi)容的結(jié)構(gòu)中。彈出窗口應(yīng)該在所呈現(xiàn)的內(nèi)容中有意義。

用戶(hù)可能正在滾動(dòng)樂(lè)隊(duì)的巡演日期。要求他們加入關(guān)于旅游日期的電子郵件列表的彈出窗口是合適的。當(dāng)彈出窗口有用且在上下文中時(shí)，會(huì)發(fā)生轉(zhuǎn)換。內(nèi)容應(yīng)提供了解更多信息并采取行動(dòng)的理由。

移動(dòng)網(wǎng)站設(shè)計(jì)是關(guān)于簡(jiǎn)單性的，移動(dòng)網(wǎng)站設(shè)計(jì)改變了可用性標(biāo)準(zhǔn)。曾經(jīng)很好用于桌面的東西現(xiàn)在被認(rèn)為是麻煩的。移動(dòng)網(wǎng)站設(shè)計(jì)消除了不必要的裝飾，并找到了更直接的路線來(lái)引導(dǎo)用戶(hù)瀏覽內(nèi)容。有些人稱(chēng)之為約束，我們可以將其視為改善人們體驗(yàn)網(wǎng)絡(luò)的機(jī)會(huì)。