交互设计

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

0
登录或者登记去做吧。

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

  • 场景不同,需求不同

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

  • 场景不同,用户心理也不同

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

  • 操作尺度不同

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

  • 界面布局

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

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

  • 移动端的手势操作更自然

有些web端也在用鼠标模仿手势,但毕竟不太自然。而移动端可以使用单个及多个手指进行自然的控制,是web端不可匹敌的。

  • 开发工具

移动端开发有一些jquery for mobile一类的库是专用的,不用于web端。反过来也一样,有些web端的工具在移动端不好用。

APPLE WATCH 中文手册:WatchKit使用iOS语言
APPLE WATCH 中文手册:Apple Watch应用程序的体系结构