轉(zhuǎn)自公眾號：產(chǎn)品公園
一、從注冊頁面看移動端交互設(shè)計
不知道你有沒有過這樣的經(jīng)歷，碰到一個好奇的軟件，或者為了下載某個資源需要注冊，當(dāng)看到繁瑣的注冊頁面時，或者是一看到頁面就覺得令人心累的注冊過程，你就立馬放棄了使用這款軟件的想法。注冊頁面是我們使用應(yīng)用都必須經(jīng)過的步驟，而一個注冊頁面設(shè)計的是否合理，好用，也直接決定了你是否會繼續(xù)使用這個應(yīng)用。接下來我們通過3款不同的注冊頁面來看看在交互設(shè)計的原則。
這兩個頁面的區(qū)別主要在于pc端和移動端所采用的不同設(shè)計原則，以及不同的設(shè)計出發(fā)點。
左圖是較早版本的注冊頁面，也就是將pc端的注冊界面直接挪到了移動端，可以發(fā)現(xiàn)，在沒有適配的情況下，移動端里的該頁面，既難以看清所有信息，也不便用手指進行交互操作。但是在pc端，這個頁面是沒有問題的，Web端一般依賴鼠標(biāo)進行點擊，App則通常直接用手指操作。鼠標(biāo)光標(biāo)在準(zhǔn)確性上大于指尖，同時鼠標(biāo)有懸浮及右鍵操作。
而右圖則是一個普通的移動端注冊頁面，取消了重復(fù)輸入密碼的流程，因為在移動端，用戶的輸入成本是相對較高的，于是采用了一次輸入密碼，密碼明碼和暗碼的切換的方式，同時因為屏蔽尺寸，以及手持方式的不同，移動端比pc端更加私密，顯示密碼的設(shè)計也相對更加安全。
如圖這款注冊頁面，則充分體現(xiàn)了在移動端的交互設(shè)計原則，流程更加簡單，雖然把注冊流程分成了兩個頁面，但是注冊過程的流暢度卻提高了，而且在某款應(yīng)用的改版后的統(tǒng)計中，采用這種頁面設(shè)計的注冊用戶有顯著提升。首先在第一個頁面，用戶看到只需填寫一個手機號即可，則減輕了用戶害怕麻煩的憂慮，用戶當(dāng)然不喜歡需要填寫多個信息才能完成注冊。用戶會理解在第一個頁面，就已經(jīng)完成了注冊，如此簡單就完成了注冊。但是需要用戶填寫的信息怎么辦呢？于是，設(shè)計了第二個頁面，完善信息。具體注冊內(nèi)容和之前所提到的頁面是沒有較大差別的，但是分步，簡化的的設(shè)計，使得用戶在注冊過程中得到很好的用戶體驗。
總結(jié)來看，在移動端的交互設(shè)計中，所需要考慮到的原則有根據(jù)可視區(qū)的不同開展設(shè)計——大小合適，明確清晰的視覺重點——你想讓用戶干什么，簡化的流程——讓用戶用得爽。
二、視覺焦點讓設(shè)計更合理
通常來說，我們閱讀的順序是從上到下，從左至右，而在移動端，因為可視區(qū)域（屏幕大小，屏幕與人眼的距離都影響著視覺中心）的不同，我們的閱讀習(xí)慣則不太一樣。
在眼動圖中，我可以看出在移動端，我們通常所關(guān)注的焦點在中心的內(nèi)容上，之后再內(nèi)容中如果找不到所需要的信息，則回頭頁面上方的篩選、排序中去進行下一步的操作。
在交互熱力圖中，會發(fā)現(xiàn)頁面有很多的熱力點，紅色為較為活躍的位置，而在屏幕左下方則活力點變少。下面，通過一個頁面對比來看看如何利用視覺焦點做設(shè)計。
這兩個頁面都是對于以計時功能為主設(shè)計的頁面，左邊的頁面視覺大數(shù)字與底色的對比讓視覺焦點很明確——現(xiàn)在跑了多少公里。右圖則是一個循環(huán)計時的工具，設(shè)計的內(nèi)容很巧妙，通過對每個步驟的時間設(shè)定，設(shè)計一個循環(huán)，便可以開始一個循環(huán)的倒計時，對于健身來說是很好的設(shè)計。但是這個頁面的視覺焦點并不突出。兩排等大的數(shù)字，讓頁面均質(zhì)化，并不能一眼看出現(xiàn)在正在倒計時的是什么。于是我將這個頁面結(jié)合一些健身場景所需要的功能進行再設(shè)計。
視覺焦點是不是突出了呢？目前正在進行的倒計時用大數(shù)字來顯示，而進度條則縮小，并和下一個步驟統(tǒng)一排列。同時在頁面上方，增加動作指南，給用戶更好的體驗。
因此根據(jù)視覺焦點所做的設(shè)計會有這樣的好處：增強設(shè)計的可讀性、提高頁面閱讀效率，使設(shè)計整體感強。
第三、可視性&流程
移動端頁面的尺寸決定了用戶所看到的內(nèi)容是有限的。如何通過合理的設(shè)計使得用戶得到更好的體驗?zāi)兀?/p>
如圖不太清晰，但是我們想說明一個問題，一個好的設(shè)計會使得同樣的信息得到更好的展示。在左圖中，將一款應(yīng)用整體采用，列表式的布局將頁面分類，用戶需要每次點擊進去，看是不是想要的內(nèi)容，再退回，再選擇前進。這不是一個很好的設(shè)計，當(dāng)然現(xiàn)在采用這種布局的也并不是很多了。而右圖將同樣的信息首先進行分類，形成下方可以切換的主導(dǎo)航，同事每一頁面中的信息可視化處理，用戶可以清晰的看到這個分類里面是什么，選擇或是切換到下一個類目。
禮物說的這個界面則是將可視化&流程簡化原則進行了很好的體現(xiàn)。如何讓用戶看到如此多的禮物分類呢？通過上下兩個導(dǎo)航切換，可以讓用戶在最少的步驟內(nèi)看到更多的可視化信息。用小編的一句話說，好的東西就要用好的方式直白的展示給用戶，何必藏起來呢！
第四、2/8原則，long tail
為用戶展示他所需要的內(nèi)容；根據(jù)場景判斷，切割排除干擾信息。何為2/8原則？小編搜索了一下，“長尾”實際上是統(tǒng)計學(xué)中Power Laws和帕累托（Pareto）分布特征的一個口語化表達. 舉例來說,我們常用的漢字實際上不多,但因出現(xiàn)頻次高,所以這些為數(shù)不多的漢字占據(jù)了上圖廣大的紅區(qū)；絕大部分的漢字難得一用,它們就屬于那長長的黃尾. 在設(shè)計案例中改如何體現(xiàn)呢？
這是百度注冊賬號的一個案例，在設(shè)計情境中，用戶群體包括中國用戶和國外用戶，當(dāng)使用手機驗證碼進行注冊的過程中，由于國別的不同，所以中國的是+86，而美國的是+1，當(dāng)然還有別的國家。那么如何讓不同國家的用戶都能通過手機驗證碼進行注冊。
第一個版本，增加了國別選項。這是比較容易做到的，但是百度的用戶里中國用戶占比達到95%，這樣的一個設(shè)計使得絕大部分的用戶認(rèn)為雞肋。于是根據(jù)2/8原則，在用戶使用的過程中，輸入手機號后，根據(jù)手機號碼進行判斷是否屬于中國用戶，若不是，則自動跳出一個國別選項，這樣，既使得國外用戶能夠得到手機驗證碼注冊的服務(wù)，也不影響絕大部分的中國用戶使用。
在操作界面越來越小的情況下，不可能把所有的信息一次性展示給用戶，所謂2/8原則，則是按需的展示信息，通過2/8原則進行信息切割，展示他這個場景下所需要的信息。
總結(jié)一下，本文從4個點結(jié)合案例說明了交互設(shè)計中一些所需注意的原則，注冊頁面看移動端交互設(shè)計、視覺焦點讓設(shè)計更合理、可視性&流程、2/8原則。希望我們可以通過對于產(chǎn)品細節(jié)的關(guān)注，共同完善設(shè)計，讓設(shè)計使得用戶用得爽，不再罵娘~~~
您也可以加微信號1025792036備注“設(shè)計”進入微信群討論。
想系統(tǒng)的學(xué)習(xí)了解如何在項目中循序漸進的思考體驗設(shè)計和體驗創(chuàng)新。個人參與可以學(xué)習(xí)到如何成為合格的用戶體驗設(shè)計師，團隊參與可以推動團隊在用戶體驗思維角度的主動思考，以幫助建立跨團隊的用戶體驗協(xié)作的意識和初步能力。我們提倡把用戶體驗作為思維方式在企業(yè)中跨角色推廣。若要獲得產(chǎn)品和服務(wù)體驗的全面提升和突破創(chuàng)新，需要團隊成員對用戶體驗的思維方式的共同理解、認(rèn)同和深入人心的貫徹執(zhí)行。你不但可以聽到理念方法講授、案例分享，還有現(xiàn)場的小組實踐項目練習(xí)幫你吸收、應(yīng)用。
點擊“工作坊詳情”或掃描下圖中的二維碼進入報名頁。
