WAP 百分网手机站

Website、WAP、APP的差异化设计

时间:2017-05-09 15:00:17 WAP 我要投稿

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的可见即可点等等。

【Website、WAP、APP的差异化设计】相关文章:

1.WAP APP的栅格设计

2.wap和app手机网站的不同

3.分析与设计WAP的推送技术

4.WAP的简介

5.何谓WAP

6.装潢设计软件APP推荐

7.关于Widget 、App Widget 、Web App 的概念

8.WAP基本知识的介绍