奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 大前端知识 > 大神说 >

pc与手机页面差别

时间:2018-05-21 17:41来源: 作者:Vuez
也许你还没有过多的思考过手机页面与pc页面的差别,也没从产品角度思考过从产品设计上两者有什么不同,那么不妨跟小编一起去思考下,也许能给你一些有益的启示。

前言

也许你还没有过多的思考过手机页面与pc页面的差别,也没从产品角度思考过从产品设计上两者有什么不同,那么不妨跟小编一起去思考下,也许能给你一些有益的启示。

一 设备性能

1.1 设备对比

  • pc设备一般是台式机或者笔记本电脑,性能相比手机要好,那么哪些显示是需要性能的呢?动画、即时通讯、渲染、3d等都是需要设备性能支持的。众所周知,在没有出现手游之前,基本的游戏都是靠端游的。而网页本身目前需要好的性能么?很肯定的告诉你,需要!比如动画、图片加载与渲染、脚本程序执行、计算等。而页面一般情况下对于pc来讲,没有听说过有问题的。
  • 那么手机性能如何呢?我们也从游戏角度讲,之前手机性能是很低的,撑不起游戏本身的需要,如果真的吧一款高质的游戏放到手机,你只会感觉到卡顿、间歇感很强。即使到今天,手机的性能其实也不容太乐观,毕竟手机的单核和电脑的单核基本不是一个概念。那么手机浏览器对于页面的显示,纯文字也是ok,但是一旦有图片加载,动画或者程序运行就会感到卡顿。

1.2 最终结论

  • 对比鉴定 :pc占优,手机占劣,

1.3 导致结果

  • 直接导致了一些需要性能的页面只能优先考虑pc完成,比如图表绘制,css3动画,部分页游。

二 分辨率,视图大小

2.1 设备对比

  • pc分辨率一般情况下是高于900,绝大多数是1000-2000之间的大屏显示。所以直接结果导致pc页面的内容量更大。
  • 而手机目前还有很多分辨率是320~480这样的起步,主流的分辨率在750~1250+,但手机由于是2倍乃至3倍视口,所以真正显示的页面内容大小只有375*625+ ,所以手机页面显示内容量少。

2.2 最终结论

  • pc大,页面容量更大,手机小,展示内容需要精简

2.3 导致结果

  • 页面布局内容不同:pc页面布局中产品全局性展示项会一直存在,比如说我们pc中任何页面都会有公共头部,尾部,菜单项,侧边栏;而手机页一般只有主页会有这些基本内容,进入到具体页面时不会有这些基本项导致浪费空间。
  • 页面本身布局不同:pc页会出现多种多样的横向、竖向的布局,而且极为不规则,会根据不同业务展现以及不同个性化设计不断改变;而手机端则一般是从上到下一列布局,多的内容只会向下显示,很少出现一行有两个内容项。
  • 页面长度不同:pc页面一般情况下都可以在一屏到两屏展示完整,好一点的设计都会让用户一屏内完成基本的操作,稍微人性点针对长页面都会有返回顶部的功能箭头;而手机端因为倾向性的都是长页面,所以一般很少设计单独的向上箭头,在较新的产品交互中,是把点击页面顶部作为了回到顶部。
  • 产品类型不同:pc端比手机端有更多的产品类型,比如说管理后台,公司官网,广告平台,图标汇总统计后台,技术or ui的集中营等;而手机端目前更偏向于展示,管理职能偏弱,交互职能偏强。
  • 同一个产品设计理念不同:比如同样是一个预约挂号的标准流程,我在pc端可以看到更多的信息量,可以通过在当前页切换科室查看到该科室所有医生,因为视图够大;但手机上就需要分成两步,先选择科室,在选择查看科室下的医生;也可以举例商品列表,我在pc端的一页中看到了更多的商品,而在手机端只看到2-5个,而且大小对比也非常明显;
  • 对于分页数据处理不同:pc是点击跳转页,对于之前的页面放在历史记录的,而且是比较规整的只能看每页多少条数据;而手机端是通过手势对数据做累加操作的,这个得到多少条数据时自己实际操作需求的,如果只想多看一条那就多看一条。
  • 应对方案:
    pc应对方案分为三种: 1 固定宽度水平居中布局,单位为px; 2 媒体查询+百分比流式布局,栅格系统,以bootstrap为典型,单位水平百分比,竖直px;3 单纯的百分比h5布局 ,简单灵活的适用于大部分pc以及大屏移动显示设备,单位水平百分比,竖直px。
    手机应对方案分为三种: 1 百分比h5布局,适用于绝大部分移动页面,单位水平百分比,竖直px;2 网易rem布局,等比缩放布局 ;3 阿里rem布局,等比缩放布局

三 交互事件

3.1 设备对比

  • pc主要是鼠标以及键盘两大类事件;鼠标的事件基本是单机,双击,位置,移动,拖拉;键盘基本是输入设备,很少有键盘对应独立的交互事件,除非有特殊定义;
  • 手机端的事件类型本身比较多,比如短按,长按,拖拉,左拉,右拉,上拉,下拉,以及针对性的对元素本身滑动的事件很多。

3.2 最终结论

  • pc端操作更粗糙,一般是基本点击事件,然后不同的功能是通过点击不同的触发控件或者按钮造成的,很少是因为事件本身;手机端的事件更细腻,针对不同类型以及元素针对性的事件都会做触发。

3.3 导致结果

  • pc页面上有很多交互组件,功能按钮,可常用的事件一般只有单击;手机端对应的事件很多,所以一般情况下,手机的特征事件下多少都会影响页面的设计,比如长按出现什么状态或者操作,左拉页面或者某元素出现什么等等。

四 便携性

4.1 设备对比

  • pc一般较大笨重,而且续航能力较差,所以不便携;一般情况下,只有商务人士或者程序员才会随身携带电脑。
  • 手机基本普及率很高,而且续航ok,即使没电了也可以充电宝及时充电。

4.2 最终结论

  • 手机端胜出占优

4.3 导致结果

  • 一些社交性很强的产品一般必须有移动端:比如微信,主打移动端
  • 一些需要设置日程提醒或者必要操作的功能会出移动端:比如操作提醒,发送简单通知等
  • 一些管理繁重,操作复杂,展示过多的产品,在移动端只是展示部分功能项。

五 展现载体

5.1 设备对比

  • pc一般浏览器,包括你在pc其他软件里如果打开了某个链接也会默认用浏览器打开,而这其中就包括ie8
  • 手机情况很复杂,除了浏览器之外,还有app内置的网页浏览器,这个环境如何就需要探索了,众所周知的是微信x5浏览器

5.2 最终结论

  • 手机端展现载体更复杂,而且像微信这样的app内置页,支付宝内置页基本成了必备品了。

5.3 导致结果

  • 针对pc需要考虑ie系列,慎重使用部分属性;而针对手机端,一般情况下,我们很少会考虑手机浏览器打开你的页面,更多的还是两种:1 公司产品app的h5页面 2 微信or支付宝内的h5页面 而微信和支付宝也是有自己的页面ui体验规范的;
(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
Vuez 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2018-03-30 22:03 最后登录:2018-06-05 20:06
栏目列表
推荐内容

关注奔三路小程序,方便你我他