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

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

  • 场景不同,需求不同

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

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

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

  • 操作尺度不同

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

  • 界面布局

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

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

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

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

  • 开发工具

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

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/6191/

(0)
Smiler李想Smiler李想
上一篇 2015-06-15 09:43
下一篇 2015-06-15 09:45

相关推荐

  • 用户体验设计必须知道的产品9种状态

    作者:Yjjj @ UI设计狮联盟   之前在脉脉上有看见过有人提到的这12种状态,但是明确的说应该是用户在使用产品时的状态,但是细想之后觉得有几个状态应该修改一下,那么我们重新定义为9种状态吧: 等待 初始 寻找 无…

    交互专题 2017-08-07
  • Facebook 改变「点赞」背后的故事

    Facebook 在上段时间做出了一个改变,堪称是最近科技界的最重磅的新闻之一,那就是他们改变了自己实施已达 7 年的「赞」的功能,增加了 5 种新的回复选择。从某种程度上说,这是 Facebook 近几年在自身产品设计上迈…

    IxD案例 2016-03-03
  • 【线下沙龙】产品经理交互设计大会

    2018年产品经理交互设计交流分享大会活动背景一个优秀的产品经理不仅能引导产品的发展,而且还能引导公司的发展。同时,他还是一名优秀的执行者、项目管理和团队管理者,具备敏锐的洞察力,能在用户心理和产品细节间灵活游走,打磨出令人惊叹的产品。所以,在成为CEO之前,先成为一名出色的产品经理吧。然而当我们投入到实际工作中时,总是一次又_次遇到阻碍:和运营、枝术部门沟通不畅,项目推进难。公司要求不高,任务很轻松就能完成,想要挑战大公司,却深知自己...

    2018-04-22
  • iOS和Android规范解析——按钮

    今天介绍的是按钮。按钮是设计的过程中,经常使用的一种控件。我们来看看Google的Material Design和苹果的设计规范都是怎么说的。

    2017-04-28
  • 超实用!聊聊标签式导航的设计思路(附设计师做笔记方法)

    现在文章基本上都不深入,只是点到某个知识,跟大家说个理论的东西,然后罗列出所有导航的形式。读者看了之后跟没看是一样的,遇到问题还是没法解决,只知道有这类导航存在而已。今天这篇详细地讲了关于标签类导航的几个知识点,希望可以帮助大家在工作中更好的运用。

    2017-05-21
  • 如何加入AxureRP模板库会员

    点击边框调出视频工具条会员简介加入AxureRP原型库会员后可以获取社群中的全部元件库及付费原型模板(后续更新免费),节省您画原型70%的时间,聚焦业务逻辑和行业积累才是根本。通过我们的会员群能第一时间获得产品及原型设计方面的解答帮助,同时还有仅对会员开放的私有干货分享不限于产品课程、PRD文档和产品书库等诸多福利。社群服务,量化才有价值1.每两个月提供一份全新的AxureRP项目原型模板,by 三杠;2.免费下载社群中已有的所有干货资...

    2018-03-24
  • 国服筹备进度公开 将重点打造用户体验和品牌社会影响力

    4月22日UP2018腾讯新文创生态大会(以下简称UP大会)当晚,腾讯于北京举办了一场《绝地求生》国服生态交流会。本次交流会邀请了来自各大硬件厂商和直播平台的代表与《人民日报》、《解放军报》、中央广播电视总台等十余家主流媒体的嘉宾参加。腾讯游戏副总裁黄凌冬、PUBG公司中国区总经理郑秀英、PUBG开发室室长李昌浩、PUBG公司创意总监Brendan Greene、腾讯互动娱乐合作市场部总经理朱峥嵘、腾讯互动娱乐PGame合作产品中心总经...

    2018-04-25
  • 色彩和体验的平衡:为色盲用户设计网站

    如何为色盲用户设计网站?本文作者与大家分享了5点小技巧。WCAG 2.0级AA要求正常文本的对比度为4.5:1,大文本的对比度为3:1(14点和大于或大于18点或更大)。——WebAim颜色对比检查器

    2017-08-02
  • 我们都在交互稿中放了些什么?

    作为一名交互设计师,在输出交互稿件之时,要考虑的不仅是如何将需求转为具体页面,而且还要清晰的将其中的思想传达给对方。

    2017-05-08
  • 用户行为预判的交互设计研究

    #交互原型##预判设计#主要有两类目的:一是在用户初次体验某种功能时引导用户,避免用户陷入困惑;二是提前判断#用户行为#,缩短行为路径。 作为“剁手党”,闲暇功夫刷淘宝已经是消磨时间的习惯行为。某天看中了一件…

    2016-11-03