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

相关推荐

  • 如何设计完美的移动端表单【UXRen译#169】

    作者:Levi Kovacs   |  翻译:楠木,校审:小蟹   不是所有人都喜欢填写表单。它不是什么有趣的事情,但它是我们必须做的事,完成一件事情的方法,可以说是一个工具。所以,让我们不再关注如何让它有趣,而是如何…

    交互专题 2017-08-07
  • 你知道交互稿完成过程中的六个要点吗?

    目标明确的情况下,再开展设计!

    2017-05-16
  • 移动UX设计:如何设计好一条推送通知

    你注意过么,每天从不同的 App 上收到的大量的推送通知与提醒,这些通知里有多少你真的有兴趣?

    2017-05-24
  • 超实用的响应式排版快速指南

    译者语:无论是对于印刷、网站或是电视广告来说,排版都是我们用来沟通信息的主要方式。排版之重要性我想已无须赘述。然而,“理解”和“实践”还是相差十万 八千里的,特别是在网页设计中,“一个字号走天下”的想法可以歇歇了。我们或许都听说过响应式网站,但我想你们中可能很少有人知道什么是响应式排版吧。

    2017-06-02
  • 智能产品的交互设计,不做到这样可不行

    我们终将以自然的方式与机器交流。在2012年圣丹斯独立电影节上,影片《机器人与弗兰克》赢得特别奖,该片讲述机器人Robot照顾患有老年痴呆症弗兰克的故事。在2017年AI大热之年,人们能否像电影里的弗兰克那样,以人对人的方式与机器交流,这在人机交互学科里定义为“人机自然交互”。何为自然交互?简而言之就是以日常交流方式与计算机进行交互。何为日常交流方式?就是人们通过语音、肢体、手势、眼神、表情等形式进行交流互动。人机交互正迈上新台阶人机交...

    2018-02-07
  • 设计中的交互设计

    今天的文章,我们来讨论一下设计的本质。这是一个比较大的话题,我也只能抛砖引玉,带给大家一些我的思考。欢迎大家留言讨论。首先我们来看一下什么是设计。下面这个定义是引自王受之老师的《世界现代设计史》:所谓设计,指的是把一种设计、规划、设想、问题解决的方法,通过视觉的方式传达出来的活动过程。它的核心内容包括三个方面,即:计划、构思的形成;视觉传达方式,即把计划、构思、设想、解决问题的方式利用视觉的方式传达出来;计划通过传达之后的具体应用。从王...

    2018-03-06
  • 交互干货必收 | App界面交互设计规范

    在上篇《APP界面设计风格》确定下来后,产品经理(兼交互设计)还不用着急将所有的交互稿扔给设计师进行细致的界面设计。在细节设计启动前,拉上设计师和安卓前端开发、ios前端开发一起商议确定设计规范先吧!

    2017-06-04
  • 线上讲座 | 送你一份全新的交互设计指南ヾ(゚∀゚ゞ)

    ▲ 向左滑动查看更多导师作品摘要:上期Designer Talk 我们邀请到的UI设计师Coraline,以“对现代科技发起交互”为媒介,来传达她所创作的艺术呈现,不知道同学们有没有通过对非现场性艺术分享,使思想脱离理性范畴,继而进行创作性的探索与尝试。本期Designer Talk我们将借助符号性的语言,将碎片化的艺术凝结在一起,打破虚无与现实桎梏,为您呈现全新的交互设计。关键词:交互设计 / 当下全新的非完美呈现分享导师Jason本...

    2018-04-19
  • 你以为的交互,其实都有所出入

    任何职业的学习都是没有尽头的,只有越学越多,才能提高你的竞争力。多学各种知识才是王道。

    2017-05-21
  • 线上与线下零售体验设计分析

    本文作者将结合自己对线上与线下零售的实际体验,与你交流用户体验设计策略相同之处,提升融通思维的洞察力。本文行文思路如下:
    1、用户流量
    2、停留时间
    3、回访频次
    4、客单价
    5、盈利模式
    6、总结

    2017-04-29