一項好的設(shè)計往往起始于內(nèi)容。要想你的移動用戶體驗更充分的表達和符合實際的操作體驗，在內(nèi)容的設(shè)計上你可能需要經(jīng)過一些調(diào)整和改變。

不過，你應(yīng)該從哪里開始呢?內(nèi)容應(yīng)該如何適應(yīng)移動設(shè)備并做到可以無縫地工作呢?我想，你可能需要從思考用戶如何與小屏幕交互的方式開始，以及它如何能夠影響(以及能影響的程度)他們想要去閱讀。

1.你需要每一屏只保留一個主要信息(想法)

當移動設(shè)備的內(nèi)容設(shè)計看起來一團糟的時候，試著重新計劃和規(guī)劃頁面的元素(這一點在網(wǎng)站設(shè)計項目中是一樣的)，你需要保證每一個屏幕最多承載一個主要的的視覺或信息。即使現(xiàn)在的手機日益趨向于更大的尺寸和分辨率，也不要被誘惑在屏幕上塞過多的信息!

每一屏保留一個主要信息已經(jīng)足夠了，再多，你可能就冒著壓倒用戶的風險。

一般來說，習慣使用移動設(shè)備的用戶更傾向于多任務(wù)處理。他們可能在看你的網(wǎng)站設(shè)計的同時，也在看棒球比賽，或者和朋友聊天。通過保持信息和內(nèi)容的簡單和直接，你有一個更好的機會來傳達一個想法，同時，這個想法也更容易被用戶吸收(因為頁面上沒有其他不先關(guān)的干擾)。

但這個想法具體是什么呢?它可以是一組文本、圖像和可操作的元素。內(nèi)容的組合應(yīng)該讓用戶做出一個選擇:你想要這樣做嗎?

2.優(yōu)先級導(dǎo)航

當用戶訪問你的網(wǎng)站設(shè)計或者移動端(響應(yīng)性)版本時，應(yīng)該有一些可以使用戶傾向于去做的事情，或者你希望他們做的事情。確保你的導(dǎo)航可以正確并且有效的引導(dǎo)用戶，讓用戶快速地獲得這些信息或者元素。

盡管像具有10個不同級別的導(dǎo)航選項菜單可能在你的桌面站點上運行良好，但移動端的用戶通常在時間上更有壓力。他們無意在網(wǎng)站上閑逛，他們的唯一目的就是找到一些他們需要的東西。

所以，移動端的導(dǎo)航需要盡可能的簡單和精簡。如果你不確定從哪里開始，可以在網(wǎng)上查找一些有關(guān)手機用戶的行為分析來幫助你獲得想法。弄清楚用戶經(jīng)常訪問的前三、四頁是什么?這些頁面的訪問量是否符合你的預(yù)期?通過這些信息，你可能會找到關(guān)鍵的導(dǎo)航元素，接下來就是相應(yīng)地調(diào)整移動端的內(nèi)容了。

3.以搜索引擎的角度來思考

無論你每天獲得的頁面瀏覽量是十個還是數(shù)百萬個，你要像搜索引擎一樣思考移動設(shè)備上的內(nèi)容。每個單詞、圖像和內(nèi)容都需要被快速找到和記錄。不要過多的在意和規(guī)避搜索引擎的算法，你需要做的是創(chuàng)建用戶想要閱讀的高質(zhì)量內(nèi)容。

在移動方面，這可能意味著你需要減少一些內(nèi)容元素。例如，在主頁上有三張圖片，選一張最重要的照片就足夠了。不要在評估上失衡，網(wǎng)絡(luò)速度和wifi技術(shù)一直在進步，但你不能保證所有的用戶都在使用高質(zhì)量的網(wǎng)絡(luò)。

關(guān)于這點，你可以借助像谷歌提供的瀏覽器工具來檢查移動頁面的速度，這可以幫助你保持所有的優(yōu)化。

4.使文本內(nèi)容更大

小屏幕并不意味著你需要更小的文本。實際上，你應(yīng)該增加點尺寸，使內(nèi)容更容易被閱讀和消化�？匆豢茨愕淖∥谋緝�(nèi)容，選擇一種更適合的尺寸，并且保持每行30到40個字符(這個標準大約是桌面版網(wǎng)站設(shè)計推薦的一半)。

在小屏幕上也有其他的技巧可以讓文字更容易閱讀和理解。你可以在之前的Design Shack中找到那些有關(guān)于如何設(shè)計更好的移動端文本排版技巧的文章。

5.微內(nèi)容需要有意義

微內(nèi)容的好壞(內(nèi)部元素如按鈕)在網(wǎng)站設(shè)計上可以成就或者毀滅整體的設(shè)計，這在手機端是一樣的。微內(nèi)容可以幫助設(shè)計添加個性和焦點。它同時也需要能夠傳達一些有用的信息，幫助用戶在設(shè)計中找到自己的目標。

特別是在移動設(shè)備上，考慮將微內(nèi)容較平時的更大一點，并且總是用它來幫助引導(dǎo)用戶。

你可以試著思考一下你在日常生活中在移動端遇到的常見問題，比如你通過移動端付費的時候。需要填寫的表單可能會跨越多個屏幕或者以滾動的形式延長距離，而通過微內(nèi)容作為指引，可以使用戶在第一次進行操作的時候就可以正確填寫所有的內(nèi)容變得更容易。

6.剔除不必要的元素

在PC端的網(wǎng)頁設(shè)計上，類似旋轉(zhuǎn)的動畫和視差滾動功能看起來很不錯，但在移動版本這些效果可以直接去除。去掉所有你在移動端并不需要的設(shè)計效果。你希望所有的東西都能快速、無縫地加載，動效可能會阻礙你和用戶之間直接有效的鏈接。

另一個你可能需要去除的效果就是懸停效果了。對于觸摸操作，沒有“懸浮狀態(tài)”這樣的東西。

將移動用戶體驗簡化為容易理解的tap功能(替換點擊)同樣可以做到明顯的反饋。你不希望用戶質(zhì)疑某個行為是否發(fā)生，它應(yīng)該始終是顯而易見的。

7.適應(yīng)范圍

沒有什么比登陸一個在頁面上所有的內(nèi)容都很“mini”的移動端響應(yīng)網(wǎng)站更令人沮喪的了。擁有獨立的移動設(shè)計的目的是讓用戶可以在更小的設(shè)備上更容易訪問你的網(wǎng)站。你必須使內(nèi)容適應(yīng)這種范圍。

有時，調(diào)整內(nèi)容只是部分內(nèi)容的重新排版。

· 在PC端的屏幕上橫向排列的按鈕在移動端可能需要調(diào)整為垂直放置。

· 在移動端使用的主導(dǎo)方向(垂直)上，照片可能需要被裁剪得更偏向于方形或垂直的長方形。

· 為頁面的簡潔，你會需要重新編輯和修剪文本內(nèi)容。

· 導(dǎo)航需要被重新定位，放置在一個不同的位置。

· 有關(guān)于呼吁行動的按鈕或元素需要被做成更大的，可以適應(yīng)移動端屏幕大小的元素。

· 基于用戶持有手機的方式，所有的按鈕和點擊元素都需要被放置在很容易找到并觸發(fā)的位置。

總結(jié)

你準備好重新考慮在你的網(wǎng)站設(shè)計上規(guī)劃的內(nèi)容了嗎?如果你建立了一個響應(yīng)式的網(wǎng)站，并且假設(shè)所有的東西都能轉(zhuǎn)化為移動端的內(nèi)容，那么就該評估一下移動端部分的設(shè)計了。很有可能，小內(nèi)容更改的空間會改變用戶與設(shè)計的交互方式。

這是設(shè)計過程中至關(guān)重要的一部分。如果你手上有關(guān)于網(wǎng)站的統(tǒng)計分析，看看你的用戶群有多少百分比是在移動設(shè)備上訪問你的網(wǎng)站的?如果你不調(diào)整以迎合他們的需求，你可能會疏遠一個很大的用戶群，盡管你并沒有冒犯他們的意思。

----圖文來自：design shack

----由深圳網(wǎng)站建設(shè)公司-Clh翻譯編輯整理