隨著移動互聯(lián)網(wǎng)的普及,移動端上網(wǎng)的人數(shù)也超過了PC端。產(chǎn)品的設(shè)計也越來越傾向于PC端和移動端統(tǒng)籌起來考慮,出現(xiàn)了不少純移動端的產(chǎn)品。
近年來關(guān)于移動端和PC端融合的設(shè)計技術(shù)和理念也不斷的涌現(xiàn),HTML 5、響應(yīng)式設(shè)計、移動先行的理念等等。一定程度上緩解也解決了移動端和PC端重復開發(fā)的問題。但是,因為PC端和移動端在設(shè)備形態(tài)和使用上的差異,如何根據(jù)兩者的差異,合理規(guī)劃產(chǎn)品設(shè)計的差異還是有很多值得關(guān)注的點。
頁面結(jié)構(gòu)的差異
顯示屏幕的大小是PC端和移動端最直接的呈現(xiàn)了。
PC端有超大的屏幕,頁面結(jié)構(gòu)可以設(shè)計得相對比較復雜,而不會影響用戶的使用。PC端的產(chǎn)品設(shè)計往往關(guān)注于單個頁面的橫向信息量和不同頁面層次間的縱向信息量。
首先,PC端在頁面橫向信息量上比較大。
設(shè)計PC端產(chǎn)品頁面時,除了考慮本身頁面信息,還要考慮很多“其他”的信息。如相關(guān)閱讀、廣告推薦等等。
這是因為人在瀏覽頁面內(nèi)容的時候,會自動的“過濾”掉不相關(guān)的信息。我們可以閉上眼睛想一下我們?yōu)g覽新聞頁面時多少時候能注意到頁面邊上的小廣告。
其次,PC端縱向頁面層次信息比較深。
PC端頁面比較大,所以設(shè)計的時候可以利用面包屑導航、快捷按鈕等來保證你在網(wǎng)站瀏覽時不會迷路。
例如我們在瀏覽門戶網(wǎng)站時,用戶從閱讀時政新聞一步步被引導到閱讀周邊新聞是經(jīng)常的事情,你可以隨時在頂部菜單欄回到你關(guān)注的時政新聞頁面。
第三,PC端可以在新標簽打開。
在PC端瀏覽器上,多頁面瀏覽是一件輕而易舉能實現(xiàn)的事情。通過打開多個頁面打開能保證用戶關(guān)閉標簽后可以接著瀏覽從而保證操作的連續(xù)性。
移動端在承載豐富內(nèi)容上面有天然的不足的。所以在移動端設(shè)計的時候往往會更簡潔。
首先,讓頁面呈現(xiàn)方式更“簡單、明了、直接”。
移動端頁面就那么一畝三分地,放了這個放不了那個,這個也是習慣了PC端產(chǎn)品的人設(shè)計移動端產(chǎn)品是手足無措的原因。
移動端遵循少即是多原則,剔除不必要的元素,減少非關(guān)鍵信息對用戶的干擾。怎么用最簡潔的方式把產(chǎn)品想呈現(xiàn)的信息呈現(xiàn)出來是產(chǎn)品設(shè)計過程中需要考慮的。
其次,頁面層級不要太深。
在移動端,執(zhí)行多次返回操作回到原點是很煩躁的事情(在PC端也同理,試想一下,你在PC網(wǎng)站上,有沒有操作過三四次返回到一個頁面?)。
移動端產(chǎn)品設(shè)計,應(yīng)該充分利用導航欄來找到入口。同時要盡量縮短產(chǎn)品單次任務(wù)的層級。遇到頁面層級較多的任務(wù)時(比如下單流程),需要考慮在過程或結(jié)束頁面增加返回到起點的操作(比如下單過程提示購物車結(jié)賬,下單完成引導用戶繼續(xù)購物)。
操作方式不同
PC端用的是鼠標和鍵盤,移動端用的多為手指。
鼠標的移動可以精確到像素級別,手指移動精確度要差得多。如果非要在移動端做精確移動的操作,可以考慮轉(zhuǎn)化成按鈕,利用“上、下、左、右、放大、縮小”按鈕來進行精確移動操作。
在移動端輸入文本絕對是一個噩夢,無論是用粗大的手指在狹小的鍵盤點擊,還是光標的重定位。如何減少用戶在使用過程中的輸入是需要考慮的。如,輸入聯(lián)想、輸入按鈕化(將歷史輸入、熱門輸入設(shè)計成按鈕)、輔助輸入(比如增加下拉、增加按鈕等)。
是否在移動端進行長文本輸入的任務(wù)也是需要慎重考慮的。
在移動端有著獨特的輸入方式滑動、多點觸控、搖一搖等,善用這些操作方式將會帶來極大的便捷。
應(yīng)用場景不同
應(yīng)用場景的不同是很多初做產(chǎn)品的人容易忽略的。
PC端的應(yīng)用場景往往是在固定的場景、相對長的一段時間進行的。如辦公室、家里、網(wǎng)吧等等,多數(shù)情況下用戶使用PC端產(chǎn)品往往有著一段相對長的時間。而移動端不同,移動端應(yīng)用場景是碎片化的,辦公司、家里、車上、廁所都是移動端使用的場景。
如何讓產(chǎn)品更輕、更扁平,從而占據(jù)用戶碎片化片的時間。豆瓣電影移動端弱化了社區(qū)功能,突出電影導看和購票,用戶直接查看熱門電影、查找附近影院、完成購票。馬蜂窩則把內(nèi)容進行了拆分,形成了馬蜂窩旅游攻略(內(nèi)容)、旅游翻譯官(工具)等產(chǎn)品。
縱觀市面熱門PC端和移動端產(chǎn)品,并無通用原則。綜合移動端和PC端的差異,根據(jù)應(yīng)用場景和產(chǎn)品策略,關(guān)注產(chǎn)品細節(jié)才能設(shè)計出好的產(chǎn)品。