中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

根據(jù)國(guó)際數(shù)據(jù)公司（IDC）報(bào)告，2016 年度全球智能手機(jī)總出貨已達(dá) 14 億 7060 萬(wàn)臺(tái)。隨著用手機(jī)的人增多，讓網(wǎng)頁(yè)在手機(jī)上的瀏覽體驗(yàn)更好，成為產(chǎn)品人越來越重要的課題。

手機(jī)用戶越來越希望能夠便捷有效地在移動(dòng)網(wǎng)頁(yè)端處理事情。無論是購(gòu)買商品，查看商品價(jià)格或是添加內(nèi)容到郵件列表，網(wǎng)頁(yè)操作的用戶體驗(yàn)要盡可能地?zé)o縫自然。

這篇文章將會(huì)根據(jù)移動(dòng)端網(wǎng)頁(yè)的設(shè)計(jì)要素和特別的用戶需求，來討論如何設(shè)計(jì)移動(dòng)端網(wǎng)頁(yè)。

一個(gè)好的移動(dòng)網(wǎng)頁(yè)是怎么設(shè)計(jì)的？

Google 最近的研究表明，移動(dòng)設(shè)備的用戶更樂于再次訪問適配了移動(dòng)設(shè)備的網(wǎng)頁(yè)。這意味著，你的網(wǎng)頁(yè)在移動(dòng)端也同樣要做到界面友好。但究竟怎樣才能使移動(dòng)端網(wǎng)頁(yè)有良好的用戶體驗(yàn)?zāi)兀?/p>

實(shí)際上，有大量的重要細(xì)節(jié)需要你在設(shè)計(jì)移動(dòng)網(wǎng)頁(yè)的時(shí)候考慮。請(qǐng)看下圖：

移動(dòng)設(shè)備用戶將會(huì)注意到你們這些增強(qiáng)用戶體驗(yàn)的設(shè)計(jì)并會(huì)為此感到愉悅的。圖片來源：business2community
如果你希望你的網(wǎng)頁(yè)更好地適配移動(dòng)設(shè)備，那么你必須解決網(wǎng)頁(yè)在所有移動(dòng)設(shè)備上的兼容性問題。

以下是 12 條改進(jìn)措施，你可以參照著來確保你的網(wǎng)頁(yè)能適配移動(dòng)設(shè)備，并給用戶帶來愉悅的體驗(yàn)。

1. 讓整個(gè)網(wǎng)頁(yè)都適合在移動(dòng)端上瀏覽

相比在移動(dòng)端上直接操作桌面版網(wǎng)頁(yè)，經(jīng)過適配的移動(dòng)網(wǎng)頁(yè)會(huì)大大方便用戶的操作使用。舉個(gè)例子，下圖是手機(jī)端 ?Domino 披薩官網(wǎng)的兩個(gè)版本，一個(gè)是桌面版網(wǎng)頁(yè)，另一個(gè)是已適配手機(jī)端的網(wǎng)頁(yè)。

桌面版網(wǎng)頁(yè)手機(jī)的小屏幕里顯得窄而小，并且很難操作。經(jīng)過對(duì)比，手機(jī)版的網(wǎng)頁(yè)主要由方便操作的大按鈕組成，顯得簡(jiǎn)潔。

如果你的網(wǎng)頁(yè)適配了手機(jī)，你的網(wǎng)頁(yè)在手機(jī)上將會(huì)更加地易用。以下是網(wǎng)頁(yè)適配手機(jī)的 3 個(gè)小技巧。

• 只允許垂直滾動(dòng)。不應(yīng)該通過水平滑動(dòng)頁(yè)面來查看主要內(nèi)容。你要確保你的網(wǎng)頁(yè)使用了相對(duì)應(yīng)的寬度與位置值，圖片縮放后也能正常顯示。你還要把網(wǎng)頁(yè)的主目錄放在顯目位置并剔除那些會(huì)干擾用戶操作的元素。
• 限制橫欄按鈕的數(shù)量——最好是僅有一列的頁(yè)面布局。

圖片來源：Google

• 不要將桌面版的網(wǎng)頁(yè)與手機(jī)版的網(wǎng)頁(yè)互混。因?yàn)檫@樣的網(wǎng)頁(yè)會(huì)比桌面版的更加難用。

2. 將主操作按鈕設(shè)計(jì)得更友好

手機(jī)用戶很容易忽視手機(jī)界面上的元素，所以主操作按鈕要放在顯要位置。手機(jī)頁(yè)面的主操作按鈕（Calls-To-Action Buttons）可能會(huì)跟桌面版的有所不同，所以你要從在用戶的角度考慮，來決定你要把主操作按鈕放在什么位置。

主操作按鈕要容易點(diǎn)擊，且在頁(yè)面中不要被其他的元素干擾。圖片來源：constantcontact

3. 菜單欄要簡(jiǎn)短而中肯

桌面版網(wǎng)頁(yè)里有豐富的菜單欄可能會(huì)很方便用戶使用，但手機(jī)用戶不會(huì)有耐心滑動(dòng)長(zhǎng)長(zhǎng)的選項(xiàng)欄，找他們想要的東西。

你需要考慮如何盡可能地減少菜單欄選項(xiàng)。例如，只留下主要產(chǎn)品的目錄。根據(jù)「拇指原則」，盡量不要使用超過 7 條不同分類的條目。

簡(jiǎn)短且區(qū)分明顯的目錄更方便用戶操作

還有，你的分類列表應(yīng)該是符合你用戶的需求的：

• 它應(yīng)該是根據(jù)用戶的使用頻率與給用戶帶來的價(jià)值來排列。
• 它不應(yīng)該使用晦澀難懂的措辭。菜單欄的設(shè)定需要具備商業(yè)素養(yǎng)，不然你會(huì)混淆菜單欄的類別。如使用文縐縐、比喻性的措辭可能會(huì)迷惑用戶，致使更多用戶離開。

4. 把搜索欄放在醒目的位置

如果搜索是你網(wǎng)頁(yè)里的一個(gè)主要的功能，那么就把它放在網(wǎng)頁(yè)的主要位置，因?yàn)檫@是讓有明確目的的用戶找到他們想要東西的最快途徑。用戶在查找特定消息時(shí)，通常會(huì)選擇搜索。

所以，搜索欄應(yīng)該是放在手機(jī)用戶一下子就能看到的地方。你可以把你的網(wǎng)頁(yè)搜索欄放置在接近主頁(yè)頂部的位置，并附上搜索說明文字。

搜索欄要放在網(wǎng)頁(yè)的顯目位置（如屏幕頂部）就像 MACY 的網(wǎng)站

5. 不要讓用戶通過捏拉來縮放網(wǎng)頁(yè)

通過捏拉網(wǎng)頁(yè)來查看文本或照片時(shí)，常常會(huì)使用戶感到心累。如果用戶不得不通過捏拉來查看網(wǎng)頁(yè)，很可能會(huì)錯(cuò)過一些重要的細(xì)節(jié)信息。因此，你設(shè)計(jì)的網(wǎng)頁(yè)應(yīng)該是不需要調(diào)整大小才能使用的。

ASOS 使用了合適的照片尺寸，但字體卻不夠大。在小而亮的屏幕中看這些小字體實(shí)在是會(huì)令用戶頭疼：

6. 只用高質(zhì)量的網(wǎng)頁(yè)素材

由于沒有實(shí)體商品，所以你的照片、視頻跟其他內(nèi)容就是你呈現(xiàn)給用戶的商品。因此，它們必須是高質(zhì)量的，這樣才能在用戶瀏覽網(wǎng)頁(yè)時(shí)，吸引他們的眼球，使其點(diǎn)擊網(wǎng)頁(yè)查看更多信息。

圖片來源：Yoox

7. 設(shè)計(jì)手指友好操作的圖標(biāo)

如果你在設(shè)計(jì)一個(gè)手指操作友好的界面，那么你網(wǎng)頁(yè)按鈕的大小是要按恰當(dāng)?shù)某叽缭O(shè)計(jì)的。

據(jù) MIT 觸擊實(shí)驗(yàn)室研究結(jié)果顯示，人們手指指頭的平均大小在 10~14mm 之間，指尖的大小在 8~10mm 之間，所以 10mm X 10mm 大小的圖標(biāo)是最佳的最小尺寸圖標(biāo)。

圖片來源：uxmag

還有重要的一點(diǎn)是，你要考慮可點(diǎn)擊元素間的相對(duì)距離。如果按鈕間靠得太近，手機(jī)用戶可能會(huì)不時(shí)按錯(cuò)按鈕。

為了處理這些錯(cuò)誤并防止用戶誤操作，你必須確保按鈕有恰當(dāng)?shù)某叽绾涂臻g位置，這樣才更好地適合手機(jī)用戶操作。下圖是手機(jī)網(wǎng)頁(yè)中，按鈕間最佳的最小距離。

8. 讓用戶探索完你的產(chǎn)品后，再讓他們登錄賬戶

如果在用戶沒有看到你的網(wǎng)頁(yè)內(nèi)容前，就要求他們登錄或注冊(cè)的話，會(huì)有非常高的交互成本，并且也違反了互惠原則。過早地要求用戶注冊(cè)，可以導(dǎo)致超過 85% 的用戶流失。

Netflix 提供了一個(gè)月的免費(fèi)使用，但用戶只有登錄賬戶才能瀏覽網(wǎng)頁(yè)內(nèi)容。

用戶在登入個(gè)人信息前，通常會(huì)先瀏覽網(wǎng)站的內(nèi)容，看看這個(gè)網(wǎng)站是干什么的（用戶對(duì)于陌生的網(wǎng)站更會(huì)如此）。為了給用戶提供一個(gè)無障礙瀏覽的體驗(yàn)，移動(dòng)網(wǎng)頁(yè)應(yīng)該這樣設(shè)計(jì):

• 不登錄狀態(tài)下，可瀏覽網(wǎng)頁(yè)信息
• 不登錄狀態(tài)下，可購(gòu)買商品。
• 當(dāng)用戶需要瀏覽更多的內(nèi)容時(shí)，要求用戶登錄，不然只能看到有限的內(nèi)容。

想為提供更好的注冊(cè)體驗(yàn)？在微信號(hào) appsolution 后臺(tái)回復(fù)「注冊(cè)」可獲取本文作者 Nick 和蘋果年度十佳應(yīng)用得主「方片收集」創(chuàng)始人的心得分享，以及知名協(xié)作溝通軟件 Slack 的實(shí)例。

9. 告訴用戶最適合的屏幕方向

如果網(wǎng)頁(yè)有適配手機(jī)橫屏與豎屏的瀏覽，那么要提醒用戶切換成最佳的屏幕方向。因?yàn)槌悄闾崾居脩粢D(zhuǎn)屏幕（比如彈出一個(gè)會(huì)話框），不然他們只會(huì)照常瀏覽網(wǎng)頁(yè)。

圖片來源：Google

10. 產(chǎn)品圖片可放大

顧客總會(huì)想看要購(gòu)買的商品照片。在網(wǎng)上商城，顧客總是希望瀏覽高清特寫圖片來了解商品（尤其是衣服）細(xì)節(jié)，不然用戶便會(huì)感到不快。

用戶要可通過雙擊圖片或點(diǎn)擊圖片變焦按鈕，輕松地放大商品照片來查看更多的細(xì)節(jié)。此外，圖片放大的部分也應(yīng)該是高分辨率的。

既包含有商品的概覽圖，也能讓顧客自由地放大照片來查看商品的細(xì)節(jié)。圖片來源：thinkwithGoogle

11. 在其他設(shè)備上能同步切換

并不是所有的用戶都喜歡用手機(jī)來購(gòu)買商品，他們中有部分人僅僅是用手機(jī)來搜索產(chǎn)品信息。
你得讓用戶能簡(jiǎn)便地在不同設(shè)備間保存或共享頁(yè)面，這樣才能收獲更多的忠實(shí)用戶。用戶可以從智能手機(jī)轉(zhuǎn)換到其他設(shè)備或?yàn)g覽器來繼續(xù)搜索、購(gòu)買或預(yù)訂商品。

1. 用戶能夠通過郵箱或社交媒介分享頁(yè)面內(nèi)容來征求購(gòu)買意見。
2. 用戶可以同步賬戶里愿望清單，收藏以及購(gòu)物車?yán)锏膬?nèi)容。

MR.PORTER 提供了一系列的分享選項(xiàng)

12. 讓用戶在一個(gè)頁(yè)面里操作

在手機(jī)上，切換不同的窗口瀏覽網(wǎng)頁(yè)是很麻煩的事，用戶也會(huì)有更大的機(jī)率返回不到之前的網(wǎng)頁(yè)。所以，盡量讓用戶只待在一個(gè)頁(yè)面里，避免彈出新的窗口。此外，也要確保主操作按鈕都在同一個(gè)窗口中。

附贈(zèng)提示：避免出現(xiàn)「完整網(wǎng)頁(yè)」的標(biāo)簽

當(dāng)訪客看見「完整網(wǎng)頁(yè)」的選項(xiàng)時(shí)，他們會(huì)認(rèn)為移動(dòng)端網(wǎng)頁(yè)是精簡(jiǎn)版的，轉(zhuǎn)而會(huì)去切換成完整網(wǎng)頁(yè)版。

使用「桌面」代替「完整」可以減少這些認(rèn)知偏差。讓用戶能夠在不同版本網(wǎng)頁(yè)間便捷切換，且把「完整版」替換成「桌面/電腦端」，以便清楚地表達(dá)兩者都能帶來完整的體驗(yàn)。

總結(jié)

就像其他的設(shè)計(jì)原理一樣，以上詳細(xì)的小技巧僅僅是一個(gè)開始。你要能融會(huì)貫通地使用這些技巧，來產(chǎn)出最好的產(chǎn)品。你要記住，設(shè)計(jì)不僅僅是為設(shè)計(jì)師本人設(shè)計(jì)，更是為用戶設(shè)計(jì)的。

你的設(shè)計(jì)要在不增加用戶學(xué)習(xí)成本的前提下滿足用戶的需求。

原文作者：Nick Babich，軟件工程師，關(guān)注 UI 和 UX。

原文地址：http://t.cn/RJNLImN

翻譯：謝敏欣

譯文地址：微信公眾號(hào)：?AppSo

版權(quán)：人人都是產(chǎn)品經(jīng)理遵循行業(yè)規(guī)范，任何轉(zhuǎn)載的稿件都會(huì)明確標(biāo)注作者和來源，若標(biāo)注有誤，請(qǐng)聯(lián)系主編QQ：419297645