PC和APP产品设计区别

网络

PC&APP:WIFI网络相对稳定,蜂窝网络稳定性稍差。

iOS-WIFI覆盖率变化趋势-17年9月
Android-WIFI覆盖率变化趋势-17年9月

移动端大部分用户通过WIFI联网,但仍有30%左右通过4G接入。

PC:网络中断后,刷新页面,浏览器会给出提示,所以产品上不需要再做设计。
在当前页完成的操作,断网时点击按钮,页面仍要给出提示。
还要考虑网页加载缓慢的问题,可以通过压缩图片大小、异步加载等方式提高加载速度。
多操作步骤或填写多项信息的产品,要考虑分步保存或实时保存数据。

APP:网络中断、网络延迟,都需告知用户,减少等待的焦虑感。
网络中断后优先显示已加载数据;加载失败时,给出网络中断提示。
举例:
去哪网络延迟,loading提示(不同页面截图):

加载延迟1-努力加载中……
加载延迟2-疯狂加载中……
加载延迟3-玩命加载中……

交互

PC:鼠标、键盘,主要通过鼠标进行交互操作。

键盘:文字输入、按键组合。
除了文字输入,网页交互中常见的按键:空格(向下滚动,一次一屏)、左右方向键(翻页,资讯列表页)。

鼠标:单击(左键&右键)、双击(左键&右键)、按下、鼠标滚动、悬停。
右键:内容不希望被轻易复制的页面,可以通过JS禁用右键。
悬停:多用于tips提示;或者因为视觉需求,隐藏部分信息,在鼠标移入后展开显示。
鼠标滑动的交互在一些软件中也有,比如Mac版的Polymail,在邮件list中可以通过触控板右滑归档。根据向左滑动距离,稍微向左滑动,稍后阅读;持续向右滑动,添加分组。这些交互与APP保持一致。
在用的写作软件Bear也支持Mac左右滑动操作。

滚轮:页面上下滚动。PC浏览器窗口可以通过ctrl+滚轮放大或缩小。

App:单击、双击、滑动、两手指缩放、3Dtouch
单击:APP上的基本交互方式。
双击:
防止误操作,如儿童游戏BusyShapes,双击进入家长设置;查看图片,双击放大;双击底部tab返回顶部并刷新页面。

滑动:不同于PC,APP端信息展示以纵向为主,用户向下滑动的交互成本更低。横向滑动的交互 ,一般多项分类的信息流,横向滑动查看同一分类下的其他内容。

3Dtouch:常见于消息预览,松开手指后仍在当前页,继续重压则打开完整消息。除了继续重压,还有上下滑动的交互。

举例:微信公众号消息通知。

按压弹出消息

按压同时向上滑动,可以进一步操作

 

硬件支持

PC:外接摄像头、绘图板、话筒、扬声器、耳机

APP:WIFI、蓝牙、红外、GPS、相机、话筒、扬声器、音量按键、电源按键、指纹识别、耳机、传感器(重力感应器、陀螺仪、距离感应器、光线感应器、气压传感器、影像传感器、磁阻传感器、方向感应器、加速感应器、震动感应器、温度计等)RFID、NFC、裸眼3D等。

智能手机拥有丰富的感应器和功能模块。可以利用充分利用,做出创新好玩的APP。比如:重力感应游戏、VR游戏等;指纹解锁已经成为银行理财类APP标配;NFC模块用于遥控器、交通出行等方面。

举例:iAntiTheft

电源、耳机、移动和倾斜,用于防盗

尺寸

常见设备尺寸见下图:

平板、PC设备尺寸(图片来源网络)

移动设备尺寸(图片来源网络)

PC产品设计需要根据目标用户的设备类型来具体操作,可以通过GA、友盟等统计工具查看。
就个人的产品设计来说,目标用户中大部分屏幕分辨率为1366*768,所以逐渐将所有页面宽度改为1200,宽屏设计在视觉上更大气。
移动端页面宽度自适应,图片与屏幕两边设置合理的固定间距。

操作系统

操作系统占比-数据来自百度统计

如上图,Windows操作系统站比93.8%,Mac仅占5.08%。

浏览器占比-数据来自百度统计

如上图,chrome浏览器占比高达43.28%,IE浏览器仍占比19%
产品研发过程中,就要考虑浏览器兼容问题,尤其IE浏览器,对于不兼容的插件要给予友好的提示;
产品测试阶段,一定要注意测试Windows和Mac系统,及不同浏览器。
曾经遇到过网页在搜狗浏览器、MacBook PRo显示不正常的经历。

App:
Android:系统版本

Android系统

iOS:系统版本

iOS系统

更新形式

PC:即时发布即时更新,所以上线时间、版本控制更灵活。但结合实际业务,尤其是后台,新功能的发布时间会选在使用低峰期。
APP:Android,提交应用市场,提交后一般隔天即可下载最新版。iOS提交APP store,审核周期3天以内。

如果有来世,我愿意做一只贝壳