起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識超實用的移動Web六大設計心法
相比App，移動Web成本少，實現(xiàn)難度低，數(shù)據(jù)追蹤更全面，還能快速調(diào)整。優(yōu)點非常多，隨著全民寬帶的提高，未來也會是一大熱點，今天阿里的師尹同學總結了超多超全面的移動Web六大設計心法，特別推薦閱讀收藏。
在這個移動互聯(lián)網(wǎng)時代，我們經(jīng)常聽到這樣的話：
「我有個改變世界的點子，就差做個app了。」
「這是我們的商業(yè)計劃書，雖然還沒有開始推廣，但我們真的擊中了用戶的痛點?？傊茸鰝€app吧。」
隨著移動互聯(lián)網(wǎng)思維的滲透，以及智能手機浪潮的影響，一波波app前仆后繼，截至2015年7月，App Store應用程序總數(shù)已達到150萬個，「先做個app」幾乎成為所有項目的第一步。
可以理解的是，大家傾心于app必定源于其獨特優(yōu)勢，例如酷炫的交互效果、優(yōu)質的用戶界面、支持離線模式消息推送，以及在用戶客戶端和各渠道的”存 在感”等等。對于需要體驗性極強的大型手游、社交類應用、拍照類工具型應用、以及金融類功能復雜的平臺應用，app無疑是目前最適合不過的載體。可是，所 有項目都必須做成app嗎？對于那些無需做成app的項目，還有比app更適合的實現(xiàn)方式嗎？
答案是肯定的，有。那就是移動Web。
移動Web的最大特點，是用戶可以直接通過瀏覽器訪問網(wǎng)絡上的應用程序。那么，移動Web和app相比具備哪些優(yōu)勢呢？
1. 節(jié)約成本
app：需要投入客戶端和服務端開發(fā)，以及耗費開銷支持多平臺和多設備。
移動Web：僅需H5頁面開發(fā)，使用響應式設計的移動Web可到處運行。
2. 降低門檻
app：需要下載并等待安裝，占用手機容量，無Wi-Fi下流量耗費大。
移動Web：支持跨平臺，無安裝成本，用戶門檻較低。
3. 追蹤數(shù)據(jù)
app：下載來源無法追蹤，對渠道細分統(tǒng)計能力有限。
移動Web：方便追蹤用戶來源，媲美PC瀏覽器下常規(guī)站點統(tǒng)計。
4. 快速調(diào)整
app：傷不起的審核周期，遇到緊急問題無法快速處理。
移動Web：站點服務器自己可控，利于快速更新迭代。
盡管移動Web有如上諸多優(yōu)勢，但不可否認的是，瀏覽的體驗短期內(nèi)還無法超越原生應用。那么，對于生長在移動Web上的業(yè)務和服務，如何做好設計確提升用戶體驗將尤為重要。
移動Web并不是把PC端內(nèi)容直接搬到手機上來顯示，而是需要結合移動端用戶的使用場景，突出最核心的功能給用戶，并保持界面簡潔。
我們簡單總結了一些重要的移動Web設計原則與大家分享。
一、針對首頁與網(wǎng)站瀏覽方式
1. 快速取得用戶需要的內(nèi)容：
PC首頁通常身兼迎賓、資訊中心和廣告推薦多重角色，但是移動Web首頁的主要用途應該是將用戶和他們所需要的內(nèi)容快速連接，一個好的移動Web首頁能夠幫助用戶立即取得所需信息。
2. 網(wǎng)站下載速度越快越好：
手機用戶不耐于等待，網(wǎng)站內(nèi)容顯示過慢會讓用戶果斷離開你的網(wǎng)頁。因此，網(wǎng)站的圖片大小、瀏覽器的緩存、JavaScript、CSS、HTML、伺服器的回應時間，都是你可以優(yōu)化的空間。
3. 將用戶直接導入移動Web：
確保用戶從搜索結果頁等站點自動導入手機版網(wǎng)頁是成功留住使用者的第一步。
4. 將行動點擺在顯眼的位置：
手機用戶很容易漏看菜單，因此一定要把主要的行動點放在用戶絕對看得到的地方，使用戶最容易完成你想讓他完成的事。
5. 保持菜單簡潔有力：
詳盡的菜單也許在PC端效果很好，但對手機用戶而言，可沒耐心在冗長的菜單尋找類目，所以想辦法盡量縮減菜單類目的數(shù)量。
6. 提供回到首頁的捷徑：
通常用戶預期只要按下網(wǎng)頁上方角落的logo就能回到首頁，否則覺得很不方便。
7. 別讓廣告喧賓奪主：
宣傳信息及廣告可能會遮蓋四周內(nèi)容，或是吸引了眼球而妨礙用戶原本使用路徑。與大型插頁式廣告相比，用戶對于可以輕松關閉的橫幅廣告更有好感。
8. 把站內(nèi)搜索功能放在顯眼位置：
用戶通過搜索來取得自己需要的特定咨詢，因此搜索功能必須擺放在網(wǎng)站的顯眼處，一眼就能看見。對于網(wǎng)頁上方顯眼處且允許自由輸入文字的搜索框，用戶的評價最好。
9. 在搜索框輸入關鍵字時自動列出熱搜：
10. 確保站內(nèi)搜索結果符合用戶需求：
用戶不想花時間刷網(wǎng)頁查看多頁搜索結果，并且會根據(jù)站內(nèi)搜索功能所傳回的前幾個結果來評斷搜索功能的好壞，因此搜索結果第一頁必須提供最精確的結果。用戶也可以使用自動即時查詢和錯字修正等智能搜索功能，讓用戶在小熒幕上搜索查詢時更輕松省力。
11. 提供篩選器更方便站內(nèi)搜索：
用戶使用篩選器來縮小搜尋結果范圍，有些用戶發(fā)現(xiàn)無法縮減網(wǎng)站的搜尋結果數(shù)量后，就離開了網(wǎng)站。確保用戶的篩選結果不會落入死胡同，為避免用戶遇到這類問題，應該告知用戶在套用某篩選器后，系統(tǒng)能傳回幾個搜索結果。
12. 引導用戶取得更精確的站內(nèi)搜索結果：
如果用戶目標人群非常多元，不妨考慮在用戶開始搜索前先問他們幾個問題，確保傳回的結果來自最符合用戶需求的內(nèi)容區(qū)段。
13. 在首頁顯示用戶最近瀏覽的商品：
二、針對產(chǎn)品頁面
1. 在商品頁面推薦類似的商品 ：
2. 顯示可展開產(chǎn)品特寫圖片：
3. 提供商品評論區(qū)供用戶瀏覽并留下評論：
4. 提供Email或SNS分享產(chǎn)品信息的選項：
有些用戶不習慣在行動裝置上完成轉換, 方便用戶在各種裝置上儲存或公用資訊，可以留住他們的心。例如，曾經(jīng)發(fā)現(xiàn)他們可以在某求職網(wǎng)站上通過電子郵件將職缺寄給自己，以便日后應聘。
三、針對網(wǎng)站登陸及賬戶信息
1. 讓用戶注冊會員，登入系統(tǒng)：
2. 讓用戶通過社交網(wǎng)站登入系統(tǒng)：
3. 商品可以被暫存在購物車供之后結賬使用：
4. 暫存購物車的商品, 在其他裝置下也可完成結賬：
四、針對交易與轉化
1. 讓用戶先瀏覽，再決定：
2. 顯示所有結賬步驟，并讓用戶知道目前結賬進度：
3. 讓用戶以訪客身份購物：
4. 運用現(xiàn)有信息來提升便利性：
針對注冊會員，可以讓系統(tǒng)記住他們的偏好并預先填入這些資訊。如果是新顧客，可以提供他們可能已經(jīng)用過的第三方結帳服務?，F(xiàn)在網(wǎng)站能提供第三方付款服務的選項，這么做不但能讓原本就使用這些付款服務的顧客輕松購物，網(wǎng)站也能預先填入出貨信息。
5. 提供點選通話按鈕來協(xié)助用戶完成復雜操作 ：
為轉化過程中需要輸入復雜或敏感信息的階段提供點選通話功能。
五、針對表單輸入方式
1. 簡化必須提供的信息以及輸入方式：
對用戶來說，網(wǎng)站如果能自動顯示數(shù)字鍵盤讓他們輸入郵編或生日等數(shù)字，他們會很開心。另外，他們也喜歡會隨著自己輸入信息自動換欄的表單。反過來說，不論是為了輸入信息而得重復按下小小的表單欄位，還是需要自行將手機鍵盤切換成數(shù)字模式，他們都覺得很麻煩。
2. 為每項操作選用用最簡單的輸入方式：
3. 顯示日歷，方便用戶選擇日期：
4. 善用標簽和即時驗證功能，盡可能減少表單錯誤：
清楚標示表單，并確認用戶在實際輸入信息時能看到標簽。同樣地，將標簽放進欄位中也會造成問題，用戶發(fā)現(xiàn)標簽在輸入信息時消失了，讓他們頓時少了指引。另外，信息輸入完畢后先立即確認是否有誤再送出，也能省下使用者重新送出資訊的麻煩。
六、針對便利性及裝置尺寸外觀
1. 為行動裝置制作完整的專用網(wǎng)站：
2. 避免讓用戶雙指收合縮放畫面：
用戶通常覺得用雙指收合縮放畫面很麻煩，有時還會因此漏看重要信息和號召性文字。因此，行動網(wǎng)站的設計應講求不需在瀏覽時調(diào)整大小。有些行動網(wǎng)站甚至會停用雙指收合縮放畫面的功能，只要網(wǎng)站設計得恰到好處，用戶根本不會用到這項功能，也不會注意到這項功能消失了。
3. 讓用戶知道最適合瀏覽網(wǎng)站的畫面方向：
用戶往往維持同一個畫面方向，直到有需要切換顯示方向為為止（例如看小字或影片）?？梢宰尵W(wǎng)站隨著裝置畫面方向 （橫向和直向)）自動調(diào)整，也可以提醒用戶切換到最合適的畫面方向。不論采用哪個方式，重要的號召性文字在用戶未切換到建議顯示方向的情況下，一定也要能 完整顯示。
4. 讓用戶在同一個瀏覽器視窗就能完成一切操作：
在智能手機上切換視窗除了不方便外，訪客也有可能無法順利返回網(wǎng)站，建議避免在用戶按下號召性文字時開啟新視窗，讓使用者留在原頁面。另外，用戶有時會開啟新視窗來搜索優(yōu)惠券，不妨直接在網(wǎng)站上提供這類優(yōu)惠，省下用戶到別處搜尋的麻煩。
5. 清楚說明為什么網(wǎng)站需要用戶的位置信息：
無論如何，應該讓用戶了解他們需要提供所在地的原因。建議將所在地欄目預設為空白，并使用清楚的號召性文字讓用戶自行決定是否填寫所在地。
6. 避免使用完整版網(wǎng)站的字眼：
研究參與者發(fā)現(xiàn)可以選擇瀏覽「完整版網(wǎng)站」或「移動版網(wǎng)站」時，他們會假設移動網(wǎng)站的內(nèi)容是簡化版本，因此選擇瀏覽完整版網(wǎng)站。某位研究參與者偏好 電腦版網(wǎng)站，因為這版網(wǎng)站的「資訊更豐富」，但事實上移動和電腦版網(wǎng)站的內(nèi)容完全相同。建議您使用「電腦版網(wǎng)站」這個字眼來代替「完整版網(wǎng)站」，避免使用 者產(chǎn)生上述想法。
以上就是想要分享給大家的移動Web設計原則。隨著無線互聯(lián)網(wǎng)技術的發(fā)展，Web產(chǎn)品和app產(chǎn)品的界限很可能會變得模糊起來。也許通過瀏覽器，也可以實現(xiàn)效果好、可推送。同一個服務之所以會有兩種不同呈現(xiàn)形式的存在，完全取決于用戶在不同使用場景下的體驗差異。
原文來自：優(yōu)設
最近正在迭代移動站，收獲頗多。
移動web還是有很多缺陷