相比App，移動(dòng)Web成本少，實(shí)現(xiàn)難度低，數(shù)據(jù)追蹤更全面，還能快速調(diào)整。優(yōu)點(diǎn)非常多，隨著全民寬帶的提高，未來(lái)也會(huì)是一大熱點(diǎn)，今天阿里的師尹同學(xué)總結(jié)了超多超全面的移動(dòng)Web六大設(shè)計(jì)心法，特別推薦閱讀收藏。

在這個(gè)移動(dòng)互聯(lián)網(wǎng)時(shí)代，我們經(jīng)常聽(tīng)到這樣的話：

「我有個(gè)改變世界的點(diǎn)子，就差做個(gè)app了?！?/p>

「這是我們的商業(yè)計(jì)劃書，雖然還沒(méi)有開(kāi)始推廣，但我們真的擊中了用戶的痛點(diǎn)?？傊茸鰝€(gè)app吧。」

隨著移動(dòng)互聯(lián)網(wǎng)思維的滲透，以及智能手機(jī)浪潮的影響，一波波app前仆后繼，截至2015年7月，App Store應(yīng)用程序總數(shù)已達(dá)到150萬(wàn)個(gè)，「先做個(gè)app」幾乎成為所有項(xiàng)目的第一步。

可以理解的是，大家傾心于app必定源于其獨(dú)特優(yōu)勢(shì)，例如酷炫的交互效果、優(yōu)質(zhì)的用戶界面、支持離線模式消息推送，以及在用戶客戶端和各渠道的”存 在感”等等。對(duì)于需要體驗(yàn)性極強(qiáng)的大型手游、社交類應(yīng)用、拍照類工具型應(yīng)用、以及金融類功能復(fù)雜的平臺(tái)應(yīng)用，app無(wú)疑是目前最適合不過(guò)的載體。可是，所 有項(xiàng)目都必須做成app嗎？對(duì)于那些無(wú)需做成app的項(xiàng)目，還有比app更適合的實(shí)現(xiàn)方式嗎？

答案是肯定的，有。那就是移動(dòng)Web。

移動(dòng)Web的最大特點(diǎn)，是用戶可以直接通過(guò)瀏覽器訪問(wèn)網(wǎng)絡(luò)上的應(yīng)用程序。那么，移動(dòng)Web和app相比具備哪些優(yōu)勢(shì)呢？

1. 節(jié)約成本

app：需要投入客戶端和服務(wù)端開(kāi)發(fā)，以及耗費(fèi)開(kāi)銷支持多平臺(tái)和多設(shè)備。

移動(dòng)Web：僅需H5頁(yè)面開(kāi)發(fā)，使用響應(yīng)式設(shè)計(jì)的移動(dòng)Web可到處運(yùn)行。

2. 降低門檻

app：需要下載并等待安裝，占用手機(jī)容量，無(wú)Wi-Fi下流量耗費(fèi)大。

移動(dòng)Web：支持跨平臺(tái)，無(wú)安裝成本，用戶門檻較低。

3. 追蹤數(shù)據(jù)

app：下載來(lái)源無(wú)法追蹤，對(duì)渠道細(xì)分統(tǒng)計(jì)能力有限。

移動(dòng)Web：方便追蹤用戶來(lái)源，媲美PC瀏覽器下常規(guī)站點(diǎn)統(tǒng)計(jì)。

4. 快速調(diào)整

app：傷不起的審核周期，遇到緊急問(wèn)題無(wú)法快速處理。

移動(dòng)Web：站點(diǎn)服務(wù)器自己可控，利于快速更新迭代。

盡管移動(dòng)Web有如上諸多優(yōu)勢(shì)，但不可否認(rèn)的是，瀏覽的體驗(yàn)短期內(nèi)還無(wú)法超越原生應(yīng)用。那么，對(duì)于生長(zhǎng)在移動(dòng)Web上的業(yè)務(wù)和服務(wù)，如何做好設(shè)計(jì)確提升用戶體驗(yàn)將尤為重要。

移動(dòng)Web并不是把PC端內(nèi)容直接搬到手機(jī)上來(lái)顯示，而是需要結(jié)合移動(dòng)端用戶的使用場(chǎng)景，突出最核心的功能給用戶，并保持界面簡(jiǎn)潔。

我們簡(jiǎn)單總結(jié)了一些重要的移動(dòng)Web設(shè)計(jì)原則與大家分享。

一、針對(duì)首頁(yè)與網(wǎng)站瀏覽方式

1. 快速取得用戶需要的內(nèi)容：

PC首頁(yè)通常身兼迎賓、資訊中心和廣告推薦多重角色，但是移動(dòng)Web首頁(yè)的主要用途應(yīng)該是將用戶和他們所需要的內(nèi)容快速連接，一個(gè)好的移動(dòng)Web首頁(yè)能夠幫助用戶立即取得所需信息。

2. 網(wǎng)站下載速度越快越好：

手機(jī)用戶不耐于等待，網(wǎng)站內(nèi)容顯示過(guò)慢會(huì)讓用戶果斷離開(kāi)你的網(wǎng)頁(yè)。因此，網(wǎng)站的圖片大小、瀏覽器的緩存、JavaScript、CSS、HTML、伺服器的回應(yīng)時(shí)間，都是你可以優(yōu)化的空間。

3. 將用戶直接導(dǎo)入移動(dòng)Web：

確保用戶從搜索結(jié)果頁(yè)等站點(diǎn)自動(dòng)導(dǎo)入手機(jī)版網(wǎng)頁(yè)是成功留住使用者的第一步。

4. 將行動(dòng)點(diǎn)擺在顯眼的位置：

手機(jī)用戶很容易漏看菜單，因此一定要把主要的行動(dòng)點(diǎn)放在用戶絕對(duì)看得到的地方，使用戶最容易完成你想讓他完成的事。

5. 保持菜單簡(jiǎn)潔有力：

詳盡的菜單也許在PC端效果很好，但對(duì)手機(jī)用戶而言，可沒(méi)耐心在冗長(zhǎng)的菜單尋找類目，所以想辦法盡量縮減菜單類目的數(shù)量。

6. 提供回到首頁(yè)的捷徑：

通常用戶預(yù)期只要按下網(wǎng)頁(yè)上方角落的logo就能回到首頁(yè)，否則覺(jué)得很不方便。

7. 別讓廣告喧賓奪主：

宣傳信息及廣告可能會(huì)遮蓋四周內(nèi)容，或是吸引了眼球而妨礙用戶原本使用路徑。與大型插頁(yè)式廣告相比，用戶對(duì)于可以輕松關(guān)閉的橫幅廣告更有好感。

8. 把站內(nèi)搜索功能放在顯眼位置：

用戶通過(guò)搜索來(lái)取得自己需要的特定咨詢，因此搜索功能必須擺放在網(wǎng)站的顯眼處，一眼就能看見(jiàn)。對(duì)于網(wǎng)頁(yè)上方顯眼處且允許自由輸入文字的搜索框，用戶的評(píng)價(jià)最好。

9. 在搜索框輸入關(guān)鍵字時(shí)自動(dòng)列出熱搜：

10. 確保站內(nèi)搜索結(jié)果符合用戶需求：

用戶不想花時(shí)間刷網(wǎng)頁(yè)查看多頁(yè)搜索結(jié)果，并且會(huì)根據(jù)站內(nèi)搜索功能所傳回的前幾個(gè)結(jié)果來(lái)評(píng)斷搜索功能的好壞，因此搜索結(jié)果第一頁(yè)必須提供最精確的結(jié)果。用戶也可以使用自動(dòng)即時(shí)查詢和錯(cuò)字修正等智能搜索功能，讓用戶在小熒幕上搜索查詢時(shí)更輕松省力。

11. 提供篩選器更方便站內(nèi)搜索：

用戶使用篩選器來(lái)縮小搜尋結(jié)果范圍，有些用戶發(fā)現(xiàn)無(wú)法縮減網(wǎng)站的搜尋結(jié)果數(shù)量后，就離開(kāi)了網(wǎng)站。確保用戶的篩選結(jié)果不會(huì)落入死胡同，為避免用戶遇到這類問(wèn)題，應(yīng)該告知用戶在套用某篩選器后，系統(tǒng)能傳回幾個(gè)搜索結(jié)果。

12. 引導(dǎo)用戶取得更精確的站內(nèi)搜索結(jié)果：

如果用戶目標(biāo)人群非常多元，不妨考慮在用戶開(kāi)始搜索前先問(wèn)他們幾個(gè)問(wèn)題，確保傳回的結(jié)果來(lái)自最符合用戶需求的內(nèi)容區(qū)段。

13. 在首頁(yè)顯示用戶最近瀏覽的商品：

二、針對(duì)產(chǎn)品頁(yè)面

1. 在商品頁(yè)面推薦類似的商品 ：

2. 顯示可展開(kāi)產(chǎn)品特寫圖片：

3. 提供商品評(píng)論區(qū)供用戶瀏覽并留下評(píng)論：

4. 提供Email或SNS分享產(chǎn)品信息的選項(xiàng)：

有些用戶不習(xí)慣在行動(dòng)裝置上完成轉(zhuǎn)換, 方便用戶在各種裝置上儲(chǔ)存或公用資訊，可以留住他們的心。例如，曾經(jīng)發(fā)現(xiàn)他們可以在某求職網(wǎng)站上通過(guò)電子郵件將職缺寄給自己，以便日后應(yīng)聘。

三、針對(duì)網(wǎng)站登陸及賬戶信息

1. 讓用戶注冊(cè)會(huì)員，登入系統(tǒng)：

2. 讓用戶通過(guò)社交網(wǎng)站登入系統(tǒng)：

3. 商品可以被暫存在購(gòu)物車供之后結(jié)賬使用：

4. 暫存購(gòu)物車的商品, 在其他裝置下也可完成結(jié)賬：

四、針對(duì)交易與轉(zhuǎn)化

1. 讓用戶先瀏覽，再?zèng)Q定：

2. 顯示所有結(jié)賬步驟，并讓用戶知道目前結(jié)賬進(jìn)度：

3. 讓用戶以訪客身份購(gòu)物：

4. 運(yùn)用現(xiàn)有信息來(lái)提升便利性：

針對(duì)注冊(cè)會(huì)員，可以讓系統(tǒng)記住他們的偏好并預(yù)先填入這些資訊。如果是新顧客，可以提供他們可能已經(jīng)用過(guò)的第三方結(jié)帳服務(wù)。現(xiàn)在網(wǎng)站能提供第三方付款服務(wù)的選項(xiàng)，這么做不但能讓原本就使用這些付款服務(wù)的顧客輕松購(gòu)物，網(wǎng)站也能預(yù)先填入出貨信息。

5. 提供點(diǎn)選通話按鈕來(lái)協(xié)助用戶完成復(fù)雜操作 ：

為轉(zhuǎn)化過(guò)程中需要輸入復(fù)雜或敏感信息的階段提供點(diǎn)選通話功能。

五、針對(duì)表單輸入方式

1. 簡(jiǎn)化必須提供的信息以及輸入方式：

對(duì)用戶來(lái)說(shuō)，網(wǎng)站如果能自動(dòng)顯示數(shù)字鍵盤讓他們輸入郵編或生日等數(shù)字，他們會(huì)很開(kāi)心。另外，他們也喜歡會(huì)隨著自己輸入信息自動(dòng)換欄的表單。反過(guò)來(lái)說(shuō)，不論是為了輸入信息而得重復(fù)按下小小的表單欄位，還是需要自行將手機(jī)鍵盤切換成數(shù)字模式，他們都覺(jué)得很麻煩。

2. 為每項(xiàng)操作選用用最簡(jiǎn)單的輸入方式：

3. 顯示日歷，方便用戶選擇日期：

4. 善用標(biāo)簽和即時(shí)驗(yàn)證功能，盡可能減少表單錯(cuò)誤：

清楚標(biāo)示表單，并確認(rèn)用戶在實(shí)際輸入信息時(shí)能看到標(biāo)簽。同樣地，將標(biāo)簽放進(jìn)欄位中也會(huì)造成問(wèn)題，用戶發(fā)現(xiàn)標(biāo)簽在輸入信息時(shí)消失了，讓他們頓時(shí)少了指引。另外，信息輸入完畢后先立即確認(rèn)是否有誤再送出，也能省下使用者重新送出資訊的麻煩。

六、針對(duì)便利性及裝置尺寸外觀

1. 為行動(dòng)裝置制作完整的專用網(wǎng)站：

2. 避免讓用戶雙指收合縮放畫面：

用戶通常覺(jué)得用雙指收合縮放畫面很麻煩，有時(shí)還會(huì)因此漏看重要信息和號(hào)召性文字。因此，行動(dòng)網(wǎng)站的設(shè)計(jì)應(yīng)講求不需在瀏覽時(shí)調(diào)整大小。有些行動(dòng)網(wǎng)站甚至?xí)Ｓ秒p指收合縮放畫面的功能，只要網(wǎng)站設(shè)計(jì)得恰到好處，用戶根本不會(huì)用到這項(xiàng)功能，也不會(huì)注意到這項(xiàng)功能消失了。

3. 讓用戶知道最適合瀏覽網(wǎng)站的畫面方向：

用戶往往維持同一個(gè)畫面方向，直到有需要切換顯示方向?yàn)闉橹梗ɡ缈葱∽只蛴捌??？梢宰尵W(wǎng)站隨著裝置畫面方向 （橫向和直向)）自動(dòng)調(diào)整，也可以提醒用戶切換到最合適的畫面方向。不論采用哪個(gè)方式，重要的號(hào)召性文字在用戶未切換到建議顯示方向的情況下，一定也要能 完整顯示。

4. 讓用戶在同一個(gè)瀏覽器視窗就能完成一切操作：

在智能手機(jī)上切換視窗除了不方便外，訪客也有可能無(wú)法順利返回網(wǎng)站，建議避免在用戶按下號(hào)召性文字時(shí)開(kāi)啟新視窗，讓使用者留在原頁(yè)面。另外，用戶有時(shí)會(huì)開(kāi)啟新視窗來(lái)搜索優(yōu)惠券，不妨直接在網(wǎng)站上提供這類優(yōu)惠，省下用戶到別處搜尋的麻煩。

5. 清楚說(shuō)明為什么網(wǎng)站需要用戶的位置信息：

無(wú)論如何，應(yīng)該讓用戶了解他們需要提供所在地的原因。建議將所在地欄目預(yù)設(shè)為空白，并使用清楚的號(hào)召性文字讓用戶自行決定是否填寫所在地。

6. 避免使用完整版網(wǎng)站的字眼：

研究參與者發(fā)現(xiàn)可以選擇瀏覽「完整版網(wǎng)站」或「移動(dòng)版網(wǎng)站」時(shí)，他們會(huì)假設(shè)移動(dòng)網(wǎng)站的內(nèi)容是簡(jiǎn)化版本，因此選擇瀏覽完整版網(wǎng)站。某位研究參與者偏好 電腦版網(wǎng)站，因?yàn)檫@版網(wǎng)站的「資訊更豐富」，但事實(shí)上移動(dòng)和電腦版網(wǎng)站的內(nèi)容完全相同。建議您使用「電腦版網(wǎng)站」這個(gè)字眼來(lái)代替「完整版網(wǎng)站」，避免使用 者產(chǎn)生上述想法。

以上就是想要分享給大家的移動(dòng)Web設(shè)計(jì)原則。隨著無(wú)線互聯(lián)網(wǎng)技術(shù)的發(fā)展，Web產(chǎn)品和app產(chǎn)品的界限很可能會(huì)變得模糊起來(lái)。也許通過(guò)瀏覽器，也可以實(shí)現(xiàn)效果好、可推送。同一個(gè)服務(wù)之所以會(huì)有兩種不同呈現(xiàn)形式的存在，完全取決于用戶在不同使用場(chǎng)景下的體驗(yàn)差異。

原文來(lái)自：優(yōu)設(shè)