交互思维】WEB端和APP端分别从交互和设计的角度说说它们的区别?

2021-12-13 11:42发布

4条回答

首先WEB和APP的区别在于屏幕大小上,操作方式上有不同。比如电脑的操作一般都是鼠标的操作,例如点击(单击、双击、左键、右键)、滚动湑轮、拖拽;以及键盘输入。那么在交互的操作上要根据鼠标和键盘的特性进行设计。

手机的操作一般是手指的按(轻按、点按、长按)、拖(单指、多指),但手机也有一些特殊的追踪器,例如声音追踪、重力感应等。可在这些方面进行交互操作的设计。

设计上区别于尺寸,因为手机毕竟小宽度的局限性较大,在没计上适配问题以及设计的尺寸上面要进行考虑。


茄子酱
3楼 · 2021-12-13 18:32

一、用户与界面交互/操作的方式不同

Web网站:以鼠标或触摸板为媒介,多采用左键点击的操作,也支持鼠标滑过、鼠标右键的操作方式。

移动App:直接用手指触控屏幕,除了最通用的点击操作之外,还支持滑动、捏合等各种复杂的手势。

设计要点:

1、相比鼠标,手指触摸范围更大,较难精确控制点击位置,对此iOS人机交互规范中提到手指最合适的触控区域至少需要44 point。所以移动App的点击区域要设置的更大一些,不同点击元素的间隔也不能太近。

2、Web网站支持鼠标滑过的效果,一些tips提示通常采用鼠标滑过展开/收起的交互方式。在移动App则不支持这类效果,通畅需要点击特定的icon来收起/展开提示。

3、移动App支持的丰富的手势操作,比如通过左滑可看到你可能需要的快捷操作“取消关注”、“删除”,这类操作方式的特点是快捷高效,但对于初学者来说有一定的学习、获知成本。我们在合理设计这些快捷操作方式的同时,还需要支持最通用的点击方式来完成任务的操作路径。针对手势操作学习成本高的问题,一些App常通过新手引导的方式来教用户。

4、移动App以单手操作为主,界面上重要元素需要在用户单手点击范围内,或者提供快捷的手势操作。

二、设备尺寸不同

Web网站:不同PC的分辨率不同,浏览器窗口最大化的尺寸也不同;浏览器窗口可缩放。

移动App:设备尺寸相对较小;不同设备的分辨率差异化较多,特别是Android;支持横屏、竖屏调转方向。

设计要点:

1、移动App的尺寸较小,一屏展示的内容有限,更需要明确哪些信息更为重要,有效的“组织”相关联的内容,优先级高的内容突出展示、次要内容适当“隐藏”。

2、Web网站因浏览器分辨率差异较大、且窗口尺寸可变化,设计时需要确定好不同分辨率的内容展示和布局,也因为这一点加上webapp的浏览需求,近几年来响应式设计更为普遍。

3、因设备分辨率、dpi大小不一,所以移动App在界面布局、图片、文字的显示上,要兼顾不同设备的效果,需要设计师与开发共同配合做好适配工作。

4、因移动设备支持横屏、竖屏展示,所以在设计移动App(比如游戏、视频播放界面)时,需要考虑用户是否有“换个方向看看”的需求、哪些情况下切换屏幕方向、如何切换等。

三、使用环境不同

Web网站:通常坐在某个室内、使用时间相对较长;

移动App:既可能是长时间在室内使用、也可能是利用碎片化的时间使用,或站或坐或躺着或行走,姿势不一;

设计要点:

1、使用Web网站时,用户更为专注;

2、使用移动App时,用户很容易被周边环境所影响,对界面上展示的内容可能没那么容易留意到;长时间使用时更适合沉寂式浏览,碎片化时间使用时用户可能没有足够的时间、每次浏览内容有限,类似“稍候阅读”、“收藏”等功能则比较实用;用户在移动过程中更容易误操作,需要考虑如何防止误操作、如何从错误中恢复。

四、网络环境不同

Web网站:网络相对稳定且基本无需担心流量问题

移动App:因用户使用环境复杂,可能在移动过程中从通畅环境到封闭的信号较差的环境,网络可能从有到无、从快到慢;既可使用无需担心流量的WiFi,也可能使用需要控制流量的3G/4G。

设计要点:

1、移动App,网络异常的情况更普遍,需要更加重视这类场景下的错误提示、以及如何从错误中恢复的方法。

2、移动App,在3G/4G情况下用户对流量比较重视,对于需要耗费较多流量的操作,需要提醒用户,在用户允许的前提下才继续进行。


aijingda
4楼 · 2021-12-16 15:58

1、需求场景

首先,两者对应的需求场景不同,这会相应地导致功能点的优先级变动,进而影响到界面控件和信息元素。

比如,大众点评网web端肯定优先考虑让用户写点评,而手机端更偏向于找到周围的餐馆。

2、手机界面元素更精简

手机端显示面积有限,需要对用户需求有更精准的把握,每个页面上呈现的元素更加精确。


3、手机端更讲究“藏”

web端可以隐藏用户不太关注的元素,仅在鼠标hover时才展示出来。

而手机没有hover态,同时面积又小,逼迫设计师学会更多藏信息的方法。


4、手机端的手势操作更自然

有些web端也在用鼠标模仿手势,但毕竟不太自然。

而手机端可以使用单个及多个手指进行自然的控制,是web端不可匹敌的。

LERRR
5楼 · 2021-12-17 09:28

首先WEB和APP的区别在于屏幕大小上,操作方式上有不同。比如电脑的操作一般都是鼠标的操作,例如点击(单击、双击、左键、右键)、滚动湑轮、拖拽;以及键盘输入。那么在交互的操作上要根据鼠标和键盘的特性进行设计。

相关问题推荐

  • 回答 6

    分屏就可以了吧

  • 回答 7

    使用登录账号绑定手机号 

  • 回答 4

    Figma是一款基于浏览器的界面设计协作工具。该工具可以将项目时刻保存在云端,这样就可以保证多方用户对设计进行实时评论或修改。该软件操作相对比较简单,哔哩哔哩及站酷等平台都有相关的视频教程,根据教程过几遍项目便会啦!...

  • 回答 9

    AxureAxure是其中资历最老的工具之一,使用经年,感觉用来做线框图、原型很是便捷,在国内很多大厂也是用的这个软件来做交互,故而比较推荐以这软件作为主要输出工具。Sketch 相对于原型软件来说,我更倾向于把Sketch当做是视觉软件,能满足大部分UI设计需求...

  • 回答 3

    很多新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是十分清楚,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页面总是不那么尽如人意。本文整理汇总了一些界面设计(iOS系统)中常用的一些尺寸规范和...

  • 回答 3

    USER EXPERIENCE MAP-用户体验地图-用户体验地图是什么?用户体验地图是用于定位和描述一个完整服务过程中的每个阶段的产品或服务的体验情况,主要是以画图(工作过程中可用便利贴代替)的方式进行产出。用户体验地图就是记录用户在整个使用流程中的行为和情...

  • 回答 4

    用户体验的核心是用户使用这款产品的根本原因,它与一个功能按照什么原则去设计其实没太大关系。比如 Uber 用户体验的核心是「用户随时或短时间内就能打到一辆出租车」。而精确地计算并显示出租车的到达时间的功能,是可以适当提升用户体验的。当然,没有这个...

  • 回答 4

    交互思维,听上去是设计,但是其本质和常见的UI和视觉设计相去甚远。交互指的是人类与机器之间的沟通,与美学、界面、按钮什么的,其实没有半毛钱关系。领域细分之前,也许我们考虑的东西越多越好,但是在细分之后的今天甚至未来,交互设计就要有它不一样的价...

没有解决我的问题,去提问