手機(jī)頁面制作的25個設(shè)計(jì)注意事項(xiàng)

創(chuàng)新互聯(lián)為做外貿(mào)企業(yè)的公司送福利了，做外貿(mào)的面對客戶大多是外國用戶，有外貿(mào)企業(yè)肯定有做英文網(wǎng)站建設(shè)，但是你做移動端網(wǎng)站了，可以找找，相關(guān)外包公司是否有這些手機(jī)頁面制作的設(shè)計(jì)。

對于外文網(wǎng)站，當(dāng)然要看Google的移動端設(shè)計(jì)規(guī)則，那么就為大家一一展示一下吧。最近，來自谷歌公司和AnswerLab的研究人員主持了一場長達(dá)119小時的用戶測試會議，他們每天都會讓用戶訪問100個不同的移動網(wǎng)站，這些網(wǎng)站涉及的行業(yè)范圍非常廣泛，比如零售行業(yè)，保險行業(yè)，或是新聞行業(yè)。參與測試的用戶會把自己的使用感覺實(shí)時告訴研究人員。最后，谷歌公司的研究人員總結(jié)出了25個要點(diǎn)，內(nèi)容如下：

最近，研究人員從谷歌公司和answerlab主持了16年的時間，119小時的用戶測試會話，他們允許用戶訪問的每一天100個不同的移動網(wǎng)站，該網(wǎng)站涉及的行業(yè)范圍很廣，如零售業(yè)、保險業(yè)、或新聞。參加測試的用戶將使用感覺自己告訴研究人員在實(shí)時。最后，谷歌公司的研究人員總結(jié)了25個要點(diǎn)，內(nèi)容如下：

1、“行為召喚”內(nèi)容要靠前或居中

對于手機(jī)用戶來說，常常容易忘記菜單的選擇，因此，你應(yīng)該把自己的“行為召喚”的關(guān)鍵內(nèi)容放在一個突出的位置，讓用戶可以很容易地看到它。所以，你需要讓最重要的“行為被稱為”內(nèi)容的主要部分來站點(diǎn)，用戶將能夠快速完成任務(wù)，另一方面，如果你想繼續(xù)下一個任務(wù)，你可以使用菜單選項(xiàng)標(biāo)記，也可以是下一個任務(wù)后的第一個任務(wù)。在移動終端中，你所說的“行為”內(nèi)容應(yīng)該是不同與臺式機(jī)，所以你必須是“保留座位”，因地制宜的調(diào)整措施。

關(guān)鍵要素：你的“行為召喚”的內(nèi)容最重要的位置在網(wǎng)站上最突出的位置。

2、讓菜單看起來既簡潔又親切

一個廣泛的菜單可以適用于桌面網(wǎng)站，但移動用戶可能沒有足夠的耐心來回滑動他們的手機(jī)，他們不喜歡看一個長長的菜單選項(xiàng)列表，以找到他們想要的。所以，你需要考慮一下，如何把你最需要的菜單選項(xiàng)？例如，有一個大型的零售店(其中沒有透露其名稱)，在自己的移動網(wǎng)站優(yōu)化產(chǎn)品類別菜單，和桌面菜單是完全不同的，讓移動端菜單選項(xiàng)為用戶提供了一個更短、更清晰的產(chǎn)品列表。

關(guān)鍵要素：一個簡短的菜單，明確了選項(xiàng)的分類搭配，可以使移動訪問者更清晰的網(wǎng)站導(dǎo)航。

3、要讓用戶便于回到主頁

當(dāng)移動用戶在你的站點(diǎn)導(dǎo)航上面瀏覽時，他們希望可以很快回到以前的頁面。谷歌公司在研究中發(fā)現(xiàn)，用戶往往喜歡在頁面上喜歡公司的標(biāo)志，因?yàn)樗麄冋J(rèn)為這種方式可以直接回到主頁，所以你的網(wǎng)站也必須要支持這個功能，或者如果用戶點(diǎn)擊了標(biāo)志，但沒有響應(yīng)，他們會感到非常失望。

關(guān)鍵元素：公司的網(wǎng)站上的標(biāo)志優(yōu)化成一個導(dǎo)航按鈕，當(dāng)用戶點(diǎn)擊可以瀏覽到主頁

4、別讓促銷廣告搶了你網(wǎng)站的風(fēng)頭

促銷和廣告會影響你的網(wǎng)站的內(nèi)容，也可能會影響網(wǎng)站的用戶體驗(yàn)。谷歌的研究人員讓用戶訪問公司的手機(jī)網(wǎng)站，有一個巨大的橫幅廣告，這些用戶被廣告吸引了，沒有心情去關(guān)注廣告下面的導(dǎo)航按鈕和導(dǎo)航按鈕相反，向用戶提供有關(guān)該公司的內(nèi)容的更多信息。

關(guān)鍵要素：一定要保證廣告宣傳不影響頁面導(dǎo)航功能，也要對廣告和內(nèi)容完全獨(dú)立的“行為召喚”

5、保持搜索功能可見

如果用戶需要找到一些特殊的信息，然后他們會使用網(wǎng)站的搜索功能，因此，必須的一個最重要的功能的移動網(wǎng)站搜索，在一般情況下，用戶希望能夠代表在Web頁上的使用文本搜索功能，因?yàn)樽钊菀渍业降脑陧撁嫔系奈恢谩?/p>

關(guān)鍵要素：網(wǎng)站的搜索功能在頂部的頁面，你可以使用一個文本框顯示“搜索”功能。

6、確保網(wǎng)站搜索結(jié)果符合用戶預(yù)期

事實(shí)上，用戶似乎并不討厭閱讀搜索結(jié)果的頁面，但是他們更關(guān)注網(wǎng)站返回的搜索結(jié)果是否滿足他們的期望，所以至少你需要確保你的第一個搜索結(jié)果頁面顯示可以準(zhǔn)確地滿足用戶的搜索需求。在移動終端，因?yàn)槠聊缓苄?，所以你需要提供一些智能搜索功能，幫助用戶自動拼寫等或糾正用戶的錯誤拼寫等。

關(guān)鍵元素：保證你的網(wǎng)站搜索功能可以返回有效的結(jié)果，除了需要提高智能搜索，提供自動拼寫或錯誤的拼寫校正等功能。

7、使用過濾功能提升網(wǎng)站搜索易用性

用戶可以使用搜索過濾功能，這樣可以縮小你的搜索，返回的搜索結(jié)果更準(zhǔn)確。然而，你需要確保用戶在搜索后使用過濾器，而不是什么都沒有。網(wǎng)站應(yīng)該讓用戶知道一個過濾器的搜索功能可能會返回搜索結(jié)果，這樣我們就可以幫助用戶避免一些問題。

，

8、指導(dǎo)用戶去訪問較好的網(wǎng)站搜索結(jié)果

對于一個網(wǎng)站，用戶有多種類型，所以，當(dāng)用戶搜索時，要問一些相關(guān)的問題，這將確保他們的搜索結(jié)果如預(yù)期。例如，一個大的鞋零售商在其移動網(wǎng)站提供的搜索服務(wù)，但搜索之前，他們問的用戶的性別，和腳的大小。

關(guān)鍵元素：如果你希望縮小搜索結(jié)果的范圍，那么就要求用戶提前一些相關(guān)的問題，這樣才能保證用戶能夠看到滿足他們對搜索結(jié)果的期望。

9、不要一上來就讓用戶在網(wǎng)站上注冊

如果你有一個移動網(wǎng)站允許用戶登記，然后體驗(yàn)一定很糟糕。谷歌公司的研究人員發(fā)現(xiàn)，最難以接受的是，用戶必須注冊才能訪問該網(wǎng)站的內(nèi)容。事實(shí)上，用戶要提交個人信息，然后才能瀏覽網(wǎng)站內(nèi)容，至少需要了解這個網(wǎng)站可以提供自己的。

關(guān)鍵元素：不要強(qiáng)迫用戶注冊一個賬戶，允許任何訪客瀏覽你的網(wǎng)站

10、讓用戶能以訪客的身份在你的網(wǎng)站上購物

即使用戶想在你的零售網(wǎng)站上購買商品，但實(shí)際上，他們?nèi)匀徊幌胱砸粋€帳戶。用戶會覺得，如果你能以游客的身份購買商品，所以真的很方便、簡單、快捷。當(dāng)購物網(wǎng)站注冊一個帳戶時，人們不喜歡武力，許多網(wǎng)站并沒有通知用戶注冊帳戶有什么好處。

關(guān)鍵要素：你可以在移動網(wǎng)站提供一個選項(xiàng)，讓用戶可以以游客的身份購物。此外，如果你需要用戶在網(wǎng)站上注冊一個帳戶，你可以清楚地告訴他們注冊的好處。

11、使用已有信息，大程度為用戶提供便利

對于那些網(wǎng)站注冊的用戶，你需要記住他們的喜好。對于一個新的用戶，您可以提供他們使用的第三方支付服務(wù)。谷歌的研究人員調(diào)查了零售網(wǎng)站，他們發(fā)現(xiàn)許多網(wǎng)站提供的第三方支付服務(wù)，以避免給您帶來的不便，當(dāng)最后支付，移動網(wǎng)站還可以根據(jù)現(xiàn)有信息的注冊用戶，提供地址信息的預(yù)填充物流功能。

關(guān)鍵要素：信息要充分利用你的手，盡可能使用第三方支付服務(wù)，盡可能為用戶提供方便

12、對于復(fù)雜任務(wù)，使用“點(diǎn)擊撥打電話”功能

如果用戶需要輸入一個更復(fù)雜或更敏感的任務(wù)，你需要提供一個“點(diǎn)擊撥打電話”的服務(wù)功能。例如，有一家金融服務(wù)公司，他們的移動網(wǎng)站將提供這個功能，如果用戶不想在移動終端中填寫復(fù)雜的形式，可以立即用他的手機(jī)打電話，接受人工代理業(yè)務(wù)。

關(guān)鍵要素：當(dāng)用戶需要提供復(fù)雜的信息時，可以提供一個“點(diǎn)擊”功能，在網(wǎng)站上的突出位置，使客戶可以避免從“漏斗”，導(dǎo)致客戶的損失。

13、當(dāng)用戶更換不同的移動設(shè)備時，確保能夠便捷的完成交易

用戶可能訪問你的移動網(wǎng)站在不同移動設(shè)備，你需要提供一個簡單的方法在不同的設(shè)備上共享信息。例如，招聘網(wǎng)站，當(dāng)用戶完成應(yīng)用程序，他們將一個電子郵件，這樣用戶可以訪問自己的網(wǎng)站在其他設(shè)備上。

關(guān)鍵元素：移動用戶可能會更換不同的設(shè)備，所以你可以通過社會共享，電子郵件，或“放入購物車”，允許用戶在網(wǎng)站上繼續(xù)他們的經(jīng)驗(yàn)。

14、信息輸入時做到流線作業(yè)

如果網(wǎng)站可以預(yù)先的一些信息，用戶體驗(yàn)會很好。提前確定用戶的郵政編碼，例如，或出生日期，等等。當(dāng)輸入一些信息，如果你能做到自動輸入，經(jīng)驗(yàn)會更流暢。相比之下，如果網(wǎng)站要求用戶以小的形式輸入一些信息，一次又一次，讓他們頻繁切換數(shù)字/字母模式的手機(jī)上的鍵盤，體驗(yàn)會很糟糕。

關(guān)鍵元素：如果你的站點(diǎn)需要輸入一個數(shù)字，可以為用戶提供一個專用的數(shù)字鍵盤，當(dāng)用戶點(diǎn)擊輸入框時，自動彈出鍵盤。

15、為每一個任務(wù)選擇最簡單的輸入方法

如果用戶需要選擇在一個有限的選擇項(xiàng)目，最容易的方法是點(diǎn)擊選擇，而不是使用文本輸入，或下拉框中選擇。如果你想選擇一個項(xiàng)目在許多選擇，傳統(tǒng)的下拉框是最直接的。不管什么任務(wù)，你需要選擇最簡單的輸入方法。

關(guān)鍵元素：如果你需要輸入表單的操作移動網(wǎng)站，然后你可以選擇下拉框和開關(guān)功能，在任何時間，以確保操作很容易點(diǎn)擊。

16、在需要選擇日期的時候，提供一個可視化日歷

當(dāng)一個用戶在移動站點(diǎn)預(yù)定航班時，很難確定“某一天”是幾號，所以你需要為用戶提供一個可視化的日歷來檢查日期。讓用戶不需要離開你的網(wǎng)站，然后打開手機(jī)上的日歷應(yīng)用程序。在選擇開始和結(jié)束日期時，可以提供一個清晰的標(biāo)簽，以避免用戶和混淆日期。

關(guān)鍵元素：當(dāng)需要選擇輸入日期時，你需要提供一個可視化的日歷，并應(yīng)該有一個清晰的日期結(jié)構(gòu)，讓用戶不中斷體驗(yàn)。

17、通過標(biāo)簽和實(shí)時確認(rèn)，第一時間解決輸入錯誤

在你的表格框內(nèi)，你應(yīng)該提示標(biāo)簽功能，而且在實(shí)際的用戶輸入，你可以看到必要的和準(zhǔn)確的信息。這是用戶的一個例子，一旦進(jìn)入電子郵件地址欄輸入您的家庭住址，因?yàn)楫?dāng)時消息這一列不清楚，只有一個地址標(biāo)簽。把信息輸入框?qū)且粋€問題，因?yàn)楫?dāng)用戶單擊準(zhǔn)備輸入，消息將會消失，所以需要使用標(biāo)簽提示。此外，如果用戶在輸入過程中，需要實(shí)時確認(rèn)，否則，一旦錯誤，會重復(fù)，導(dǎo)致用戶體驗(yàn)不好。

關(guān)鍵元素：清晰可見的使用標(biāo)簽，讓用戶知道他們的需求，實(shí)時驗(yàn)證的輸入錯誤，最后正式提交前的信息來幫助用戶正確的。

18、設(shè)計(jì)高效的表格

你要保證自己的設(shè)計(jì)形式不會被重復(fù)操作，只提供會丟失的信息，你還需要使用自動填寫功能。當(dāng)用戶填寫表格時，最好是在屏幕的頂部顯示一個進(jìn)度條，讓人們知道自己的進(jìn)度。如果形式太復(fù)雜，會讓人不喜歡，相對于性格，一個簡單的直接形式可以讓人感到很舒服。如果我們可以自動填充的搭配功能，如提前輸入用戶名和郵政編碼，效果會更好。

在輸入數(shù)字的關(guān)鍵元素：盡量減少窗體，盡可能提供自動填充功能，使用一個清晰的進(jìn)度條。

19、針對移動終端，整體優(yōu)化你的網(wǎng)站

如果你有一個專用移動終端的網(wǎng)站，當(dāng)用戶訪問移動設(shè)備，這當(dāng)然是容易得多比純桌面網(wǎng)站，這是毫無疑問的。但最不舒服，是兩個網(wǎng)站的移動和桌面版本混合在一起，用戶訪問起來比訪問PC端網(wǎng)站更困難。

關(guān)鍵元素:如果你的網(wǎng)站頁面設(shè)計(jì)的移動終端，那么它將使用起來非常方便。

20、不要讓用戶用手捏放屏幕，去放大或縮小圖片

屏幕上如果用戶需要用手捏、放大或縮小圖像，有時會看到一些重要的信息或相關(guān)內(nèi)容的“行為召喚”內(nèi)容，這會讓用戶感到失望。在移動端網(wǎng)站建設(shè)時的網(wǎng)頁設(shè)計(jì)中，你應(yīng)該注意到，不要讓用戶改變大小。一些網(wǎng)站會把捏放熒屏功能取消，如果你的網(wǎng)站設(shè)計(jì)很合理，用戶不會有這個功能就不會注意到。

關(guān)鍵元素：如果用戶在一個網(wǎng)站放大圖像，有時不會看到一些“行為召喚”。在網(wǎng)頁設(shè)計(jì)中，她要注意這個。

21、你的產(chǎn)品圖像需要支持大圖顯示

客戶希望看到他們購買的產(chǎn)品。在零售網(wǎng)站，用戶希望看到產(chǎn)品的高分辨率圖片，所以你可以看到更多的細(xì)節(jié)，如果網(wǎng)站不支持產(chǎn)品的圖像顯示，肯定會讓用戶感到非常失望。

關(guān)鍵要素：產(chǎn)品照片為這些關(guān)鍵圖片，需要提供高質(zhì)量的特寫照片。

22、告知用戶在哪種屏幕方向上訪問網(wǎng)站最舒服

用戶傾向于在一個固定的屏幕方向訪問的網(wǎng)站，除非有一個提示，告訴他們切換屏幕方向(如她看的視頻，例如)。可以設(shè)計(jì)網(wǎng)站，考慮到垂直和水平兩個屏幕的方向?yàn)g覽，并鼓勵用戶切換到屏幕上的好方向。但無論如何切換屏幕方向，你必須確保一些重要的“行為召喚”的內(nèi)容可以清楚地顯示在網(wǎng)站上面。

關(guān)鍵要素：你可以與用戶溝通好的屏幕方向，但要保證“行為召喚”的在重要內(nèi)容保持在醒目的位置。

23、保證“行為召喚”的內(nèi)容在一個單獨(dú)的瀏覽器窗口中顯示

頻繁切換智能手機(jī)界面是一件很麻煩的事，并且用戶可能找不到如何回到你的網(wǎng)站。所以，讓用戶瀏覽你的網(wǎng)站只在一個窗口。尤其是，不要打開新窗口打開“行為召喚”內(nèi)容。

關(guān)鍵元素：保證“行為召喚”的內(nèi)容在一個單獨(dú)的瀏覽器窗口中顯示。

24、回避“全網(wǎng)站”標(biāo)簽

一旦用戶看到選項(xiàng)“全網(wǎng)站”，會覺得是不是“移動網(wǎng)站”是壓縮精簡版本的網(wǎng)站，最終不得不選擇點(diǎn)擊進(jìn)入“全網(wǎng)站”。即使桌面上的網(wǎng)頁和移動網(wǎng)頁的內(nèi)容是一致的，也會給用戶造成誤解，因此，可以使用桌面網(wǎng)站標(biāo)簽，而不是“全網(wǎng)站”。

關(guān)鍵元素：給用戶一個簡單的站點(diǎn)切換體驗(yàn)，使用桌面網(wǎng)站標(biāo)簽，而不是“全網(wǎng)站”的標(biāo)簽。

25、你要明白自己要用戶地址信息的作用

用戶通常想知道為什么你想問他們的位置信息。例如，一個用戶在一個旅游景點(diǎn)在其他城市的酒店,但他覺得很奇怪,因?yàn)榫W(wǎng)站會要求用戶提供當(dāng)前位置的位置信息。所以,你需要把這一列的位置在網(wǎng)站上默認(rèn)是空的,然后讓用戶選擇,或提供一個清晰的“行為召喚”操作，例如，“我周圍的發(fā)現(xiàn)”等。

關(guān)鍵要素：你要明白自己要用戶地址信息的作用，然后要了解這些信息是如何影響用戶體驗(yàn)的

針對上述這25個要點(diǎn)，谷歌公司用戶體驗(yàn)研究員Jenny Gove總結(jié)了最重要的四點(diǎn)建議，分別如下：

另外，Gove建議，最好能夠顯示表格填寫的步驟。而且最好在填寫時可以實(shí)時驗(yàn)證輸入內(nèi)容的正確性，比如用戶在輸入自己的郵政編碼時，可以實(shí)時校驗(yàn)。

在以上這25點(diǎn)來看，谷歌公司用戶體驗(yàn)研究員Jenny Gove總結(jié)了最重要的四點(diǎn)建議，分別如下：

1、添加搜索欄

若你的移動網(wǎng)站沒有一個搜索欄，所以真要加一個搜索欄?！霸谝苿咏K端，人們希望能夠快速的找到他們所需要的，所以我們發(fā)現(xiàn)人們是搜索欄的需求很大，而且最好是在首頁?！眊ove給解釋。

當(dāng)然，作為谷歌推出的一個研究項(xiàng)目，推薦醒目的地方安裝網(wǎng)頁搜索欄似乎并不令人驚訝。但事實(shí)上，谷歌公司發(fā)現(xiàn)，用戶并不真正介意使用搜索欄，因?yàn)樗梢宰屗麄兛焖僬业侥阈枰男畔ⅰ?/p>

2、把大表格拆分成小塊

谷歌發(fā)現(xiàn)，很多網(wǎng)站都會要求用戶提供各種信息，如地址信息(需要用于當(dāng)發(fā)送商品時)，信用卡號碼(需要用于在支付支票時)等等。并及時填寫這些信息，網(wǎng)站往往會提供一個長的窗體頁面，有各種各樣的輸入框，非常復(fù)雜。所以，如果我們可以把這些形式拆分成更小的，更容易理解小，效果會更好。

此外，政府的建議，顯示形式的最好措施。和最好的可以實(shí)時填寫，以證明輸入的有效性，如用戶在輸入自己的郵政編碼，你可以實(shí)時檢查。

3、允許用戶匿名瀏覽

一些購物網(wǎng)站將要求用戶必須注冊或登錄購買操作。而一些網(wǎng)站更夸張的是，你必須注冊或登錄才能瀏覽。這兩種方法都是錯誤的。

戈夫說，如果您準(zhǔn)備創(chuàng)建一個零售網(wǎng)站，如果用戶沒有注冊帳戶，那么可以提供他們一個訪問者的身份。是的，商家都希望用戶可以注冊登錄，但他們可在買單之后再進(jìn)行操作。

4、要在支持設(shè)備之間輕松切換

因?yàn)槿藗冊谌魏螘r候和任何地方都使用移動終端，所以在使用過程中可能會被一些東西打斷，然后將其轉(zhuǎn)移到PC端，然后去忙其他事情了。

戈夫認(rèn)為，最痛苦的經(jīng)驗(yàn)是，當(dāng)用戶切換設(shè)備，不能繼續(xù)自己之前的使用體驗(yàn)，如果允許用戶復(fù)制和粘貼你的訪問的URL，它太麻煩了。

最好的解決方案是，移動網(wǎng)站可以提供一個快捷鍵，然后將當(dāng)前的鏈接自動，或訪問內(nèi)容發(fā)送到用戶自己的郵箱里面，然后無論用戶設(shè)備以上登錄，都可以繼續(xù)自己的使用。

最后，戈夫想通過用戶研究谷歌，清晰定位的問題在移動網(wǎng)站建設(shè)存在的，她認(rèn)為，雖然問題很多，但幸運(yùn)的是，這些問題可以發(fā)現(xiàn)，如果這些問題可以寫下來的人，意味著人也有解決問題的能力。

手機(jī)頁面制作的25個設(shè)計(jì)注意事項(xiàng)

標(biāo)題名稱：手機(jī)頁面制作的25個設(shè)計(jì)注意事項(xiàng)
網(wǎng)頁鏈接：http://jinyejixie.com/news24/165124.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、用戶體驗(yàn)、ChatGPT、網(wǎng)站制作、網(wǎng)站內(nèi)鏈、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)