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

相关推荐

  • 7个未来网页设计的发展

    太多的文章会告诉你什么是酷的在网页设计中。 我要带你做一些真正的预测。 1. 手势是新的点击 我们忘记了滚动网页曾经是多么困难。 大多数用户会刻意将鼠标移动到屏幕的右边缘,使用一些“古代”称为“滚动条”: 作为一…

    2015-08-19
  • CHI2017 交互设计在较热门的研究领域如何继续创新?

    什么是CHI? 今天跟大家分享一个学术会议SIG CHI,全称Special Interest Group on Computer-Human Interaction,顾名思义,这是研究人与计算机互动的一个学术会议。但希望大家别被「学术」两个字吓到,因为这个会议…

    2017-05-31
  • UED专访 | 张永和、王昀:寻找未来城市共生的答案

    📌编辑、剪辑| P.S📌采访| YHz2017年10月16日,全球天文学界联合发布一项新的重大发现,在1.3亿光年外,双中子星合并产生的引力波带着他的伴侣首次造访地球,这次长途跋涉的旅行为人类探索宇宙打开了新的大门。从爱因斯坦预言引力波到如今的发现,百年间,人类在探索未知空间的同时,也不断改造着我们的生存家园。着眼当下,我们对未来城市有何新的畅想?下文中有张永和、王昀专访视频不要错过!!!未来城市探讨在UED之前的采访中,厦门大学建筑与...

    2018-02-08
  • 聊一聊常见的登录交互方式

    现在市场上面的APP种类繁多,而登录注册的方式也有很多,下文就简单来分析一下各种登录的交互方式,谈谈自己对这些方式的见解。

    2017-05-26
  • 7个设计技巧,让内容和用户体验无缝地配合起来

    好的设计往往需要好的内容作为基础支撑。无论是内容还是设计,想要让两者最大化的搭配,往往是需要进行调整和优化才行。“不要总是玩弄算法,创造用户想看的内容才是正途。”

    2017-08-04
  • 做好这4个细节设计,让你的移动APP 用户体验脱颖而出

    启动页、空状态、动画反馈、框架界面… 今天提到的这4种状态,都是容易被忽视,而又能让移动App 脱颖而出的细节。如何做好这4个细节的用户体验设计?今天这篇好文总结了关键的几个原则。

    2017-05-18
  • Android VS iOS:多数PM忽视的5个交互设计

    本文简单介绍了5个Android和iOS设计不同的地方,可以说大部分PM都可能会忽视这些细节。不是大盘点,只是作为思考的引子。

    2017-04-30
  • 你们做交互设计都使用哪些权威的工具呢?

    达内UI设计,中国UID课程标准制定者工具是设计师的重要榜首,好的设计离不开好的工具,那么你交互设计都使用哪些权威的工具呢?本文为大家总结一下。哪里能学到企业需要的设计技术?2018学设计到哪里学就业更好?零基础学设计多久能学会?转行学设计学完好就业么?1月达内UI免费训练营火热报名中,全程大咖级讲师亲授,为你解析UI行业发展趋势,就业前景,帮你了解设计,轻松入门,更快一步成为设计大牛!马上阅读原文或者回复:姓名+电话+城市报名吧!好消...

    2018-01-30
  • 搜狐设计师:我从产品经理转为交互设计师的经验总结

    从正式入职搜狐到现在已经四个多月,刚刚从产品岗来到了设计组转成了一名交互设计师 。今天来聊聊这个转变过程中的一些思考,希望能对职业迷茫的同学有帮助。

    2017-05-25
  • UI设计、交互、产品、都应该具有这十种思维模式!!

    注:文章由 集创堂联合创始人CEO纯色老师和设计帮联合出品!这篇文章从十个维度深入挖掘交互设计的思维模式,如果你是UI设计师、初级交互设计师、产品经理、那么这篇文章很值得你学习。笔者在和纯色老师探讨交互设计思维时,老师说“不管你是UI、交互、产品,在团队中都不能是孤立单一的技能,要用联系的观点去看设计,不能分裂来看”。老师说的很对,做UI设计到最后是离不开交互知识支撑的,同样交互、产品也应该具备对设计的审美,这样每一个角色再探讨产品时才...

    2018-01-30