手機頁面制作的25個設計注意事項

創新互聯為做外貿企業的公司送福利了，做外貿的面對客戶大多是外國用戶，有外貿企業肯定有做英文網站建設，但是你做移動端網站了，可以找找，相關外包公司是否有這些手機頁面制作的設計。

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

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

1、“行為召喚”內容要靠前或居中

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

關鍵要素：你的“行為召喚”的內容最重要的位置在網站上最突出的位置。

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

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

關鍵要素：一個簡短的菜單，明確了選項的分類搭配，可以使移動訪問者更清晰的網站導航。

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

當移動用戶在你的站點導航上面瀏覽時，他們希望可以很快回到以前的頁面。谷歌公司在研究中發現，用戶往往喜歡在頁面上喜歡公司的標志，因為他們認為這種方式可以直接回到主頁，所以你的網站也必須要支持這個功能，或者如果用戶點擊了標志，但沒有響應，他們會感到非常失望。

關鍵元素：公司的網站上的標志優化成一個導航按鈕，當用戶點擊可以瀏覽到主頁

4、別讓促銷廣告搶了你網站的風頭

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

關鍵要素：一定要保證廣告宣傳不影響頁面導航功能，也要對廣告和內容完全獨立的“行為召喚”

5、保持搜索功能可見

如果用戶需要找到一些特殊的信息，然后他們會使用網站的搜索功能，因此，必須的一個最重要的功能的移動網站搜索，在一般情況下，用戶希望能夠代表在Web頁上的使用文本搜索功能，因為最容易找到的在頁面上的位置。

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

6、確保網站搜索結果符合用戶預期

事實上，用戶似乎并不討厭閱讀搜索結果的頁面，但是他們更關注網站返回的搜索結果是否滿足他們的期望，所以至少你需要確保你的第一個搜索結果頁面顯示可以準確地滿足用戶的搜索需求。在移動終端，因為屏幕很小，所以你需要提供一些智能搜索功能，幫助用戶自動拼寫等或糾正用戶的錯誤拼寫等。

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

7、使用過濾功能提升網站搜索易用性

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

，

8、指導用戶去訪問較好的網站搜索結果

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

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

9、不要一上來就讓用戶在網站上注冊

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

關鍵元素：不要強迫用戶注冊一個賬戶，允許任何訪客瀏覽你的網站

10、讓用戶能以訪客的身份在你的網站上購物

即使用戶想在你的零售網站上購買商品，但實際上，他們仍然不想注冊一個帳戶。用戶會覺得，如果你能以游客的身份購買商品，所以真的很方便、簡單、快捷。當購物網站注冊一個帳戶時，人們不喜歡武力，許多網站并沒有通知用戶注冊帳戶有什么好處。

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

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

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

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

12、對于復雜任務，使用“點擊撥打電話”功能

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

關鍵要素：當用戶需要提供復雜的信息時，可以提供一個“點擊”功能，在網站上的突出位置，使客戶可以避免從“漏斗”，導致客戶的損失。

13、當用戶更換不同的移動設備時，確保能夠便捷的完成交易

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

關鍵元素：移動用戶可能會更換不同的設備，所以你可以通過社會共享，電子郵件，或“放入購物車”，允許用戶在網站上繼續他們的經驗。

14、信息輸入時做到流線作業

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

關鍵元素：如果你的站點需要輸入一個數字，可以為用戶提供一個專用的數字鍵盤，當用戶點擊輸入框時，自動彈出鍵盤。

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

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

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

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

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

關鍵元素：當需要選擇輸入日期時，你需要提供一個可視化的日歷，并應該有一個清晰的日期結構，讓用戶不中斷體驗。

17、通過標簽和實時確認，第一時間解決輸入錯誤

在你的表格框內，你應該提示標簽功能，而且在實際的用戶輸入，你可以看到必要的和準確的信息。這是用戶的一個例子，一旦進入電子郵件地址欄輸入您的家庭住址，因為當時消息這一列不清楚，只有一個地址標簽。把信息輸入框將會是一個問題，因為當用戶單擊準備輸入，消息將會消失，所以需要使用標簽提示。此外，如果用戶在輸入過程中，需要實時確認，否則，一旦錯誤，會重復，導致用戶體驗不好。

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

18、設計高效的表格

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

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

19、針對移動終端，整體優化你的網站

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

關鍵元素:如果你的網站頁面設計的移動終端，那么它將使用起來非常方便。

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

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

關鍵元素：如果用戶在一個網站放大圖像，有時不會看到一些“行為召喚”。在網頁設計中，她要注意這個。

21、你的產品圖像需要支持大圖顯示

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

關鍵要素：產品照片為這些關鍵圖片，需要提供高質量的特寫照片。

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

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

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

23、保證“行為召喚”的內容在一個單獨的瀏覽器窗口中顯示

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

關鍵元素：保證“行為召喚”的內容在一個單獨的瀏覽器窗口中顯示。

24、回避“全網站”標簽

一旦用戶看到選項“全網站”，會覺得是不是“移動網站”是壓縮精簡版本的網站，最終不得不選擇點擊進入“全網站”。即使桌面上的網頁和移動網頁的內容是一致的，也會給用戶造成誤解，因此，可以使用桌面網站標簽，而不是“全網站”。

關鍵元素：給用戶一個簡單的站點切換體驗，使用桌面網站標簽，而不是“全網站”的標簽。

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

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

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

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

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

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

1、添加搜索欄

若你的移動網站沒有一個搜索欄，所以真要加一個搜索欄。“在移動終端，人們希望能夠快速的找到他們所需要的，所以我們發現人們是搜索欄的需求很大，而且最好是在首頁。”gove給解釋。

當然，作為谷歌推出的一個研究項目，推薦醒目的地方安裝網頁搜索欄似乎并不令人驚訝。但事實上，谷歌公司發現，用戶并不真正介意使用搜索欄，因為它可以讓他們快速找到你需要的信息。

2、把大表格拆分成小塊

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

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

3、允許用戶匿名瀏覽

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

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

4、要在支持設備之間輕松切換

因為人們在任何時候和任何地方都使用移動終端，所以在使用過程中可能會被一些東西打斷，然后將其轉移到PC端，然后去忙其他事情了。

戈夫認為，最痛苦的經驗是，當用戶切換設備，不能繼續自己之前的使用體驗，如果允許用戶復制和粘貼你的訪問的URL，它太麻煩了。

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

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

手機頁面制作的25個設計注意事項

標題名稱：手機頁面制作的25個設計注意事項
網頁鏈接：http://m.newbst.com/news24/165124.html

成都網站建設公司_創新互聯，為您提供網站策劃、用戶體驗、ChatGPT、網站制作、網站內鏈、Google

廣告

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