移动web适配利器-rem

前言

提到rem,大家首先会想到的是em,px,pt这类的词语,大多数人眼中这些单位是用于设置字体的大小的,没错这的确是用来设置字体大小的,但是对于rem来说它可以用来做移动端的响应式适配哦。

阅读更多

移动Web问题小结

Meta标签


<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport">

这个想必大家都知道,当页面在手机上显示时,增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览。


<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">

这两个属性分别对iOS上自动识别电话和Android上自动识别邮箱做了限制。

阅读更多

WebAPP与原生APP的交互设计区别

WebAPP和原生APP同为移动端,很少有研究这两项的交互区别,最近公司做了一次从原生APP到WebAPP(HTML5)的移植,故总结一下期间遇到的问题及不同点总结。

从使用场景上,WebAPP用户面临比原生APP用户更严峻的问题:

1、页面跳转更加费力,不稳定感更强

思考点:如何减少跳转(扁平结构、页面布局技巧),增加数据及展示的流畅流程及稳定性(技术)

2、更小的页面空间(由于浏览器的导航本身占用一部分屏幕空间),更大的信息记忆负担

移动设备的屏幕要小得多。这种如同透过门缝进行的阅读增加了认知的负担。人脑的短期记忆是不稳定的,用户在滚动屏幕的过程中需要临时记忆的信息越多,他们的表现就会越差。

——《贴心设计:打造高可用性的移动产品》

思考点:排版更清晰、信息更简练 (可在原生APP基础上去掉一些丰富、复杂的视觉表现)

3、导航不明显,原有底部导航消失,有效的导航遇到挑战

思考点:如何有效的提供导航?有哪些形式?

4、交互动态效果收到限制,影响一些页面场景、逻辑的理解。

思考点:比如登录注册流程的弹出、完成及异常退出,做好文字提示。

针对以上困境,解决方法总结如下。

首先,从APP到Web版,在产品上,最明显且核心的:

  1. 精简功能,只将核心的任务实现,非核心的枝节可考虑删减。
  2. 做好新的WebAPP导航。
  3. 补充从WebAPP对下载原生APP的引导。

阅读更多

PC与移动设计

随着各大互联网公司都转战移动市场,移动端产品的需求越来越大,设计师在PC与移动设计之间的相互转移也越来越频繁。当前许多产品的规划都是在PC 端和移动端全方位地进行布局,这也进一步要求设计师应该有更高的素养,能在PC与移动端进行一体化的设计思考。

然而,设备、产品形态的多样性虽然给了设计师更多的发挥空间,同时也给他们带来了更大地挑战。PC与移动产品有各自的使用情景,它们的设计有何不同,如何统一思考和规划在不同平台上产品的功能、设计是非常值得探讨的话题。

阅读更多

移动HTML5前端性能优化指南

移动H5前端性能优化指南
阅读更多

论Web App、Hybrid App、Native App设计差异

论Web App、Hybrid App、Native App设计差异 阅读更多

分类目录