美文网首页交互
PC端与移动端设备的特性及差异

PC端与移动端设备的特性及差异

作者: 灵魂设计师 | 来源:发表于2017-03-30 19:58 被阅读349次

一、硬件篇

屏幕尺寸

PC:屏幕大,可多栏设计;阅读习惯从左到右,自上而下。

移动端:屏幕尺寸小,对信息的排版和归类有一定要求;阅读习惯自上而下;4英寸为单手操作的极限,再大要考虑大屏的交互优化(如控件下移)。

网络环境

PC:长时间网络稳定,正常使用。

移动端:依靠无线数据传输,可靠性低;需考虑网络强/弱/断开/恢复/234G、有无wifi等场景,做好反馈;还要考虑流量问题:图片默认加载?内容精简?。

使用场景

PC:场景相对固定,时间比较集中。

移动端:便携,站走坐躺……使用场景多元化(时间、空间)、碎片化、不固定,要求交互模式能尽量满足可能的使用场景(视觉、听觉、手操作等方面考虑)。

传感器的使用

移动端具备众多传感器功能:温度/光线传感器、方向感应器、重力感应器、加速感应器、距离感应器、陀螺仪感应器、压力传感器(3D Touch)、RFID(非接触式射频识别)、NFC(近场无线通信)、指纹识别,摄影。相应的交互方式:摇一摇,挤压屏幕、位移、扫码等。

强LBS属性,可以使用基于地理位置定位的服务。

操作方式

PC:鼠标+键盘交互(单击、双击、移动、滚滚轮、敲键盘、长按),灵活精确。

移动端:手势交互(点击、触屏滑动、拖动、双击、长按、晃动、多指触控、左右手同时操作)、语音交互,符合移动端控制与自然交互。但精确度较差。

移动端独有的交互模式

①触屏滑动操作:a、滑动切换页面;b、滑动条目删除;c、滑动解锁;d、侧滑呼出菜单;②摇一摇;③扫码;④下拉刷新和上拉加载;⑤长按操作:a、呼出更多选项;b、拖移;⑥拍照上传;⑦实时定位;⑧随时随地旋转屏幕。

输入成本

移动端:输入成本高,触摸打字易错,中英/大小写/符号切换麻烦。


二、软件篇

人机关系

移动端:①移动设备与使用者间绑定更紧密:支付宝、银行卡、其他的个人身份信息、个人验证,注意安全性;②好友关系强,可以与通讯录紧密结合;③私有性强,注册后免登录。

登陆注册

移动端比PC简单:应用跳转、指纹识别、手机号验证,解决了真实性和唯一性的问题。

表单

关于移动端和PC端的表单

①移动端没有hover状态,所以移动端的表单要有良好的可视性;②尽可能减少移动端的输入成本——针对不同的文本输入框调用不同的键盘模式;③PC端的网页设计为响应式,或至少允许缩放;④移动端屏幕空间有限的特点,设计表单时输入框的标题可用placeholder提示;⑤移动端让用户更多选择而不是输入,且要有智能纠错功能;⑥移动端的错误提示尽可能使用toast list而不是弹窗,不要打断用户的任务流(存疑)智能输入功能:如直接从短信获取验证码,语音输入等;⑧考虑表单输入框是否足够大来显示用户所输入的内容;⑨横竖屏的情况下,键盘出现时,表单是否都能够正常显示,按钮是否能够点击,表单过长提交按钮可以融入到键盘里;⑩使用信息分组。


相关文章

  • PC端与移动端设备的特性及差异

    一、硬件篇 屏幕尺寸 PC:屏幕大,可多栏设计;阅读习惯从左到右,自上而下。 移动端:屏幕尺寸小,对信息的排版和归...

  • 移动端和pc端使用不同页面,判断设备是pc端还是移动端,并进行链

    移动端和pc端使用不同页面,判断设备是pc端还是移动端,并进行链接的切换跳转

  • 2018移动端搜索推广的特性

    一、移动端与PC端的特性 1.移动端的特性: 近两年随着智能机的普及,移动端流量的数量越来越多,质量也越来越高,但...

  • 移动端布局(1)

    1.移动端基础 #1.1.屏幕 移动端和pc端开发差异比较大的就是屏幕了,这里说的差异主要体现在移动端大屏幕碎片化...

  • WEB兼容性测试----移动端兼容矩阵的设计

    上期文章分享了PC端的web兼容测试,本期我们通过调研移动端web的特性和移动端浏览器特性,进一步探讨Web移动端...

  • 判断设备类型

    判断iPhone X 判断iOS或安卓 判断PC端与WAP端 js判断当前页面在移动设备还是在PC端中打开 //j...

  • 浅谈响应式

    前言 由于移动设备的增多,携带便利,人们在移动设备上浏览网页的时间不断增加,甚至要超过PC端。但是PC端的网页放到...

  • 移动端适配

    移动端与PC端有以下特点 ①系统:PC:windows/mac(区别不大),移动端:ios/andriod/win...

  • 单项目里的多终端自适应

    背景 网站需要适配移动端,但是不能切换域名,只能在一个项目里适配,然后设计的移动端页面结构与PC端存在相当的差异,...

  • 判断PC端和移动端

    做企业官网的项目会遇到判断设备是移动端还是pc端

网友评论

    本文标题:PC端与移动端设备的特性及差异

    本文链接:https://www.haomeiwen.com/subject/yohpottx.html