web端与移动端产品设计区别

同一产品不同的终端，在设计上相同却又不相同。（20191008-1009）

一、在功能上web做加法，app做减法

web端更重视功能的齐全，能否直观的查看到或者使用更多的功能，所以一般在同一个页面，在界面设计允许的情况下，以功能齐全为优先，功能做加法。

移动端则重视功能分级，根据功能权重分级，权重最高的功能展示在主页面，次一级的功能可以通过“抽屉”，隐藏在主页面下，每个页面都是功能做减法。抽屉有上下，侧边抽屉方式。

二、交互上

2.1操作不同

web端用鼠标操作，鼠标单机，悬停，滚动等。移动端则是手指操作，点击，长按等

2.2交互形式上

web端数据列表常分页，信息输入多下拉。

移动端数据列表常下拉加载，信息输入多页面。

三、设备需求上

1.设备需求不一样

web端显示器大，窗口可以随意缩放。

移动端窗口小，用户操作多为线性流程，用户使用习惯多为碎片化时间。

2.反馈机制不一样

web端很少有主动反馈，一般也就进某些网站，弹出业务聊天窗口。

移动端则是可以推送消息，主动反馈普遍也明显，所以需要考虑到如何让用户打开推送，再考虑让用户喜欢推送。

3.网络机制

1.web端若要上网，一般是在有网的同一位置。除了极少数停电的情况

2.手机端位置不固定，都有过丢失信号无网络的情况，那就要考虑好无网络时，哪些数据是可看不可看的，而且，手机还要考虑在使用流量与wifi情况下的不同场景，比如电影，若在流量情况下，需要提示是否要连wifi了再看。

4.展示对象不一样

web端需要注意浏览器的适配。

移动端需要注意各手机型号的适配。

四、其他

移动端设计有几种信息架构，层级式、辐射式、套娃式、标签视图式、仪表盘式、筛选视图式。

他要遵循的6个原则有：

mvp原则：当前页面以展示当前核心内容功能为优先。突出重点

易用性：操作简单，上手快。

可扩展性：建立完善的产品信息架构，当迭代优化时能聚焦到功能点附近，不影响其他功能的显示与使用。

手势优先性：移动端不只是点击，手势操作更要优先考虑，提高使用便利性。并且各手势功能应该保持一致。

转换输入方式：移动端应减少文字输入的部分，多加入选择或者语音输入方式。

为中断而设计：移动端多为碎片化时间来处理事情，所以要考虑各个中断的场景

最后要注意，安卓与苹果的各方面也是不一样的，比如说封装性，比如说物理交互，截屏与返回，而且两种系统在设计的时候也有出入，比如字体大小，尺寸，使用单位、控件（导航，弹窗，动画，按钮，键盘，选择控件）等