Website、WAP、APP的差異化設計
作爲互聯網電商,一般都會針對以下幾個平臺進行開發:APP(ios&Android)、Website(PC)、Website(Pad)、WAP(手機瀏覽器,響應式或M站)。在有限的資源內,每個公司設計開發的側重點一般會不同,針對一個平臺進行設計,然後其他平臺做適配開發的很多。所以今天我們就來聊聊幾個常用平臺設計時在信息佈局上的差異。
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的可見即可點等等。
相關文章
-
關於Widget 、App Widget 、Web App 的概念
拿起你已經無法二次使用的手機殼,來給你的娃做一雙萌萌的小涼鞋吧~主要材料:廢棄皮質手機殼 一個鞋帶 一條所需工具:502膠 適量剪刀 一把製作步驟:第1步:先看看成品第2步:第3步:第4步:第5步:第6步:第7步:第8步:第9步:第10 -
JavaScript在Android的WebView中parseInt函數轉換不正確
今天被一個問題困擾,有一個頁面在瀏覽器(無論是手機還是PC)上運行良好,而通過WebView就出現了問題,有兩個值得計算始終出錯。於是就通過alert,把這個值顯示出來,發現和瀏覽器上計算的結果差了很多,本來是正數,卻變成了負數。仔 -
英語作文:review this app Aboutmusic-
《review this app Aboutmusic》I like pop music, because it’s very suit me to happy.Sometimes I like R&B and classical. R&B is very popular and makes me excited. Classical music can make m -
Newspapers and Websi英語作文
報紙和網站是當今兩大主要媒體。請根據下表內容,以 “Newspapers and Websites” 爲題,用英語寫一篇短文,簡要介紹這兩種媒體的優缺點。報 紙1. 傳統媒體,天天更新,信息可靠2. 攜帶方便,隨時隨地可以閱讀3.僅有文字和圖片網 -
Why Public Speaking Is So Important 公共演說的重要性大學英語
Many students ask why they shouldlea to give speeches. They often argue that they don’t plan to bepoliticians, members of board, or company presidents. Students think that those are the only careers -
國中英語《Unit 1 Will people have robots》教學設計
Teaching goals:Words & phrases: robot, paper, less, fewer, simple, unpleasant, factory, seem, etc 構成的一般將來時態的`陳述句、否定句、疑問句及回答e be 句型的一般將來時 , less , fewer 的用法.學習 -
DOS的Append、Debug、Diskcomp命令使用說明
導語:DOS的Append、Debug、Diskcomp命令應該怎麼使用呢?下面就由小編爲大家介紹一下DOS的Append、Debug、Diskcomp命令使用說明,大家一起去看看吧! append:設置非執行文件的.路徑[適用場合]當您無法在多個目錄中尋找到自 -
Diaspora Finance Powers Global Development美文欣賞
Diaspora Finance Powers Global DevelopmentLuis Lopez-Ramirez, a 30-year old Honduran immigrant, makes pizza.He has worked two jobs over 16 hours each day.He carefully saves his money and rents a small -
PHP函數中isset和array-key-exists的差異
本文將爲大家講解PHP函數中isset和array_key_exists的差異,歡迎學習!在判斷某個 PHP 數組的索引值是否存在,一般會使用 isset 和 array_key_exists 兩種方法。isset($a['key'])array_key_exists('key', -
How to keep a good relationship with parents英語作文
在平平淡淡的學習、工作、生活中,大家一定都接觸過作文吧,藉助作文人們可以反映客觀事物、表達思想感情、傳遞知識信息。那要怎麼寫好作文呢?下面是小編爲大家收集的彩霞的作文,希望對大家有所幫助。彩霞的作文1夕陽西下,