當前位置:才華齋>設計>網頁設計>

Website、WAP、APP的差異化設計

網頁設計 閱讀(6.21K)

作為網際網路電商,一般都會針對以下幾個平臺進行開發:APP(ios&Android)、Website(PC)、Website(Pad)、WAP(手機瀏覽器,響應式或M站)。在有限的資源內,每個公司設計開發的側重點一般會不同,針對一個平臺進行設計,然後其他平臺做適配開發的很多。所以今天我們就來聊聊幾個常用平臺設計時在資訊佈局上的差異。

Website、WAP、APP的差異化設計

  1. Website(PC&Pad),分塊式

Website的顯著特點是顯示區域大,頁面可以承載更多的資訊。

但是在承載更多資訊的同時,也意味著有更多的可能,如果稍不注意便會讓整個頁面的資訊變得混亂,使用者難以快速找到有效資訊。

所以Website的資訊要以大的塊狀分佈,先將資訊分類,然後歸類成不同的塊。保證主流程(主內容)集中在頁面中最醒目的塊中,不受其他資訊干擾。

這裡稱之為分塊式。

以Detail Page為例:

模組1:商品圖

模組2:名稱/尺碼/數量/加入購物車等基本資訊及操作

模組3:詳細資訊

模組4:使用者評價

模組5:推薦

(此設計中模組1會在頁面到達模組4前吸頂)

  2. WAP,直線式

WAP同樣是在瀏覽器上,但是顯示區域卻小了很多,而且是觸控操作,所以資訊的佈局上和APP相似。

和APP相比WAP的體驗一定是要差一些的,因為在有限的螢幕內WAP頂部和底部功能都已被佔用,所以顯示區域更小了。

而且很多在APP上表現不錯的操作不能在瀏覽器發揮好。

再者WAP會更多的遇到網路慢、跳出後難回來等問題。

所以WAP的頁面一定要輕量,資訊簡潔的同時以直線的.方式向下排列。

讓使用者儘可能單純以上下滑動完成瀏覽,在當前頁面完成我們設定的任務。

這裡稱之為直線式。

以Detail Page為例:

能在當前頁解決的絕不跳走

  3. APP,分層式

APP的特點是顯示區域小,觸控式螢幕,穩定可拓展。

APP各頁之間切換更流暢,不會像WAP那樣感覺跳轉頁面時很重。

而且你知道你就在這個APP裡,不擔心跳出,所以操作起來更大膽。

所以資訊在直線向下排列的同時,儘量把處於流程中的資訊(比如Detail Page的尺碼選擇)和一些詳細的資訊收起到另一層。

這裡稱之為分層式。

以Detail Page為例:

尺碼、數量會隱藏在購物流程中,更多評論會開啟另一層等。

結語這幾者的差別還有很多,比如Website在mouse over時的資訊可擴充套件性、APP的可見即可點等等。