web端和移动端产品设计的区别

移动设备发展非常迅速，移动端产品越来越多。今天小编来扒一扒web端与移动端产品设计有哪些不同。

场景不同，需求不同

首先，两者对应的需求场景不同，这会相应地导致功能点的优先级变动，进而影响到界面控件和信息元素。比如，大众点评网web端优先考虑让用户写点评，而移动端更偏向于找到周围的餐馆。再比如用户在web端登录淘宝，更倾向于去“逛”和选购，但在移动端来说，因为碎片化和实时在线的特点，用户更喜欢“闪购”、“秒杀”等产品形态。不过，随着用户的盈余时间朝移动端转移的越来越多越来越明显，用户在web端和移动端的需求的差别也变得模糊起来。

场景不同，用户心理也不同

在web端，展示面积比较大，展示效率也比较高，用户的耐心比较好，所以适合展示比较丰富的内容，也适合在一个页面里安排较复杂的操作；在移动端，展示面积比较小，展示效率也比较低，用户的耐心不佳，不适宜像web端那样包罗万象，而必须重点突出，产品链路也须尽可能的短。

操作尺度不同

web端可以隐藏用户不太关注的元素，仅在鼠标hover时才展示出来。而手机没有hover事件，同时面积又小，逼迫设计师学会更多藏信息的方法。Web端鼠标的操作尺度比较小，点击是一件准确的事情；触屏的操作尺度就比较大，点击误差大，所以元素必须做大。这一点淘宝网页的web版和移动版是个非常良好的例子。Web版淘宝中有些小按钮能放下的功能，移动版就必须另弹界面让用户详细输入。

界面布局

web端屏幕宽大，布局可以灵活一些，在产品设计时应该注意把信息有序地组织起来。如果网页比较长的话，还应该注意到越往后的，用户跳出的越多，所以网页的首屏应该放导航和最重要的区块，中部放操作比较复杂和内容比较有吸引力的区块，后部放优先级最低的以及分流用的区块等。

移动端可视区域小，布局上不同于传统网页，需要充分利用有限的空间去展示信息，需要对用户需求有更精准的把握，每个页面上呈现的元素更加精确。页面流程简单清晰，复杂的操作尽量分段展示。隐藏不常用的功能，可以将其放在侧边栏或弹出层。由于移动端是直接用手指操作，而非鼠标。所以，需要响应元素点击区域要相对明显，屏幕宽度虽小，但是上下滑动体验好，因此布局上可以多上下排列。