Website、WAP、APP的差異化設計

　　作為互聯(lián)網(wǎng)電商，一般都會針對以下幾個平臺進行開發(fā)：APP(ios&Android)、Website(PC)、Website(Pad)、WAP(手機瀏覽器，響應式或M站)。在有限的資源內(nèi)，每個公司設計開發(fā)的側(cè)重點一般會不同，針對一個平臺進行設計，然后其他平臺做適配開發(fā)的很多。所以今天我們就來聊聊幾個常用平臺設計時在信息布局上的差異。

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

　　Website的顯著特點是顯示區(qū)域大，頁面可以承載更多的信息。

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

　　所以Website的信息要以大的塊狀分布，先將信息分類，然后歸類成不同的塊。保證主流程(主內(nèi)容)集中在頁面中最醒目的塊中，不受其他信息干擾。

　　這里稱之為分塊式。

　　以Detail Page為例：

　　模塊1：商品圖

　　模塊2：名稱/尺碼/數(shù)量/加入購物車等基本信息及操作

　　模塊3：詳細信息

　　模塊4：用戶評價

　　模塊5：推薦

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

　　2. WAP，直線式

　　WAP同樣是在瀏覽器上，但是顯示區(qū)域卻小了很多，而且是觸摸操作，所以信息的布局上和APP相似。

　　和APP相比WAP的體驗一定是要差一些的，因為在有限的屏幕內(nèi)WAP頂部和底部功能都已被占用，所以顯示區(qū)域更小了。

　　而且很多在APP上表現(xiàn)不錯的操作不能在瀏覽器發(fā)揮好。

　　再者WAP會更多的遇到網(wǎng)絡慢、跳出后難回來等問題。

　　所以WAP的頁面一定要輕量，信息簡潔的同時以直線的方式向下排列。

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

　　這里稱之為直線式。

　　以Detail Page為例：

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

　　3. APP，分層式

　　APP的特點是顯示區(qū)域小，觸摸屏，穩(wěn)定可拓展。

　　APP各頁之間切換更流暢，不會像WAP那樣感覺跳轉(zhuǎn)頁面時很重。

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

　　所以信息在直線向下排列的同時，盡量把處于流程中的信息(比如Detail Page的尺碼選擇)和一些詳細的信息收起到另一層。

　　這里稱之為分層式。

　　以Detail Page為例：

　　尺碼、數(shù)量會隱藏在購物流程中，更多評論會打開另一層等。

　　結(jié)語這幾者的差別還有很多，比如Website在mouse over時的信息可擴展性、APP的可見即可點等等。

【W(wǎng)ebsite、WAP、APP的差異化設計】相關(guān)文章：

企業(yè)培訓如何實現(xiàn)差異化安排07-28

APP推廣怎么做03-11

物業(yè)APP四大亮點01-23

差異化營銷：“三綱五�！敝�道03-09

盤點七款集健身與游戲一體的APP03-06

《微微一笑很傾城》先行登陸墨瞳漫畫App05-27

裝潢設計的設計風格03-29

空間設計與設計空間的關(guān)系12-23

設計軟件對平面設計的影響03-28

美工設計中的字體設計01-07