h5移动端注意事项

心已赠人 2022-02-19 11:47 568阅读 0赞

转自：[https://blog.csdn.net/qq\_36584352/article/details/80775529][https_blog.csdn.net_qq_36584352_article_details_80775529]&&[https://www.jianshu.com/p/650819820c86][https_www.jianshu.com_p_650819820c86]

一、meta的使用

1、`<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>`

强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览

2、`winphone`系统`a`、`input`标签被点击时产生的半透明灰色背景怎么去掉：   
`<meta name="msapplication-tap-highlight" content="no">`

3、忽略页面的数字为电话，忽略email识别   
`<meta name="format-detection" content="telephone=no, email=no"/>`

二、针对适配等比缩放的方法:

@media only screen and (min-width: 1024px){
    　　body{zoom:3.2;}
    }
    @media only screen and (min-width: 768px) and (max-width: 1023px) {
    　　body{zoom:2.4;}
    }
    @media only screen and (min-width: 640px) and (max-width: 767px) {
    　　body{zoom:2;}
    }
    @media only screen and (min-width: 540px) and (max-width: 639px) {
    　　body{zoom:1.68;}
    }
    @media only screen and (min-width: 480px) and (max-width: 539px) {
    　　body{zoom:1.5;}
    }
    @media only screen and (min-width: 414px) and (max-width: 479px) {
    　　body{zoom:1.29;}
    }
    @media only screen and (min-width: 400px) and (max-width: 413px) {
    　　body{zoom:1.25;}
    }
    @media only screen and (min-width: 375px) and (max-width: 413px) {
    　　body{zoom:1.17;}
    }
    @media only screen and (min-width: 360px) and (max-width:374px) {
    　　body{zoom:1.125;}
    }

或如：

@media all and (orientation : landscape) { 
    　　h2{color:red;}/*横屏时字体红色*/
    } 
    
    @media all and (orientation : portrait){ 
    　　h2{color:green;}/*竖屏时字体绿色*/
    }

三、布局   
1.布局使用百分比：   
　　不同的手机有着不同的分辨率，这时再用我们pc端布局常用的px就不合适了。使用百分比布局要时时刻刻清楚其父元素，因为子元素的百分比高度是根据父元素的高度来确定的，当父元素的高度为不确定值时，或者说父元素的高度未定义时，子元素的高度百分比将没有用（没有参照物）。所以只有设置了父元素的高度，子元素的高度百分比才会有用。

2.em与rem：   
　　`em`是根据相对单位，不是固定的，他会继承父级元素的字体大小，若没有父级则em的相对基准点为浏览器的字体大小，浏览器的字体默认为16px，因此若无父级元素，相对于浏览器大小：`Xem=X*16px;`   
`rem`是css3新增属性，是完全相对于HTML根元素大小设定的，默认为10px，因此无论父级字体大小，`1rem=10px`。

3.栅格布局：   
　　`box-sizing:border-box;`可以改变盒子模型的计算方式方便你设置宽进行自适应流式布局。

4、wap页面有`img`标签，记得加上`display：block；`属性来解决`img`的边缘空白间隙的1px像素。如果图片要适应不同的手机要设置`width:100%;`而且不能添加高度。

5、有关`Flexbox`弹性盒子布局一些属性   
　　1、不定宽高的水平垂直居中   
　　   
　　.xxx\{   
　　　　position:absolute;   
　　　　top:50%;   
　　　　left:50%;   
　　　　z-index:3;   
　　　　-webkit-transform:translate(-50%，-50%)；   
　　　　border-radius:6px;   
　　　　background:\#fff;   
　　　\}   
　　　　   
2、\[`flexbox`版\]不定宽高的水平垂直居中   
　　.xx\{   
　　　　justify-content:center;//子元素水平居中，   
　　　　align-items:center;//子元素垂直居中;   
　　　　display:-webkit-flex;   
　　\}

四、文本的处理   
1、关闭iOS键盘首字母自动大写`<input type="text" autocapitalize="off" />`   
2、//单行文本溢出

.xx{
    　　overflow:hidden;
    　　white-space:nowrap;
    　　text-overflow:ellipsis;
    }

3、//多行文本溢出

.xx{
    　　display:-webkit-box !importmort;
    　　overflow:hidden;
    　　text-overflow:ellipsis;
    　　word-break:break-all;
    　　-webkit-box-orient:vertical;
    　　-webkit-line-clamp:2;(数字2表示隐藏两行)
    }

4、

html {
    　-webkit-text-size-adjust: 100%;
    }

五、图片、媒体的处理   
1、//使用流体图片

img{
    　　width:100%;
    　　height:auto;
    　　width:auto\9;
    }

2、`audio`元素和`video`元素在`ios`和`andriod`中无法自动播放   
　　应对方案：触屏即播

$('html').one('touchstart',function(){
    　　audio.play()
    })

3、如何禁止保存或拷贝图像   
　　通常当你在手机或者`pad`上长按图像 `img` ，会弹出选项 存储图像 或者 拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：

img {
    　　-webkit-touch-callout: none;
    }

PS：需要注意的是，该方法只在 iOS 上有效。

六、阴影的处理   
　　1、 移动端如何清除输入框内阴影   
　　　　在iOS上，输入框默认有内部阴影，但无法使用 `box-shadow` 来清除，如果不需要阴影，可以这样关闭：

input,textarea {
    　　border: 0;
    　　-webkit-appearance: none;
    }

七、字体的处理   
　　对于网站字体设置   
　　1、移动端项目：   
　　`font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;`   
　　2、移动和pc端项目：   
　　`font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;`

3、字体大小尽量使用`pt`或者`em`，`rem`，代替`px`。

4、设置`input`里面`placeholder`字体的大小`::-webkit-input-placeholder{ font-size:10pt;}`

5、解决字体在移动端比例缩小后出现锯齿的问题：`-webkit-font-smoothing: antialiased;`

八、圆角设置

放一个图片或者一个按钮，设置圆角会比较美观，设置圆角的值可以用百分比，也可以用em等单位。

element{
    　　border: 1px solid #ccc;
    　　-moz-border-radius: 百分比;
    　　-webkit-border-radius: 百分比;
    　　border-radius: 百分比;
    }

九、边距凹陷

1、像素边框（例子:移动端列表的下边框）

.list-iteam:after{
    　　position: absolute;
    　　left: 0px;
    　　right: 0px;
    　　content: '';
    　　height: 1px;
    　　transform: scaleY(0.5);
    　　-moz-transform: scaleY(0.5);
    　　-webkit-transform:scaleY(0.5);
    }

2、与在pc端开发一样，开发过程中需要的一个很需要注意的问题的边距塌陷，典型的问题是`margin-top`的嵌套，对子元素设置`margin-top`值，子元素相对于父元素的位置没有变，而父元素跟着子元素一起向下移动响应的距离。解决方案：

(1) 给父元素`div1`设置一个`padding`值

.div1{
    　　height: 500px;
    　　width: 100%;
    　　background: #ccc;
    　　padding-top: 1px;
    }

(2) 给父元素`div1`设置一个`overflow：hidden；`在不加`overflow:Hidden;`的时候，`margin-top:`这个属性是认不到边的，也就是失效。但是ie浏览器解决了这个问题，火狐、谷歌之类的就会出现失效，所以这是个标准问题，也是个兼容问题。

.div1{
    　　height: 500px;
    　　width: 100%;
    　　background: #ccc;
    　　overflow: hidden;
    }

十、禁止内容   
1、//禁止文本缩放

html {
        -webkit-text-size-adjust: 100%;
    }

2、移动端禁止选中内容   
如果你不想用户可以选中页面中的内容，那么你可以在`css`中禁掉：

.user-select-none {
    　　-webkit-user-select: none;
    　　-moz-user-select: none;
    　　-ms-user-select: none;
    }

兼容`IE6-9`的写法：`onselectstart="return false;" unselectable="on"`

十一、滚动效果

十二、快速回弹   
　　快速回弹滚动

.xxx {
    　　　overflow: auto;
    　　　-webkit-overflow-scrolling: touch;
    　}

PS：`iScroll`用过之后感觉不是很好，有一些诡异的bug，这里推荐另外一个 `iDangero Swiper`，这个插件集成了滑屏滚动的强大功能（支持3D），而且还有回弹滚动的内置滚动条，官方地址：   
　　[http://www.idangero.us/sliders/swiper/index.php][http_www.idangero.us_sliders_swiper_index.php]

十三、白色背景颜色搭配

十四、常用的移动端开发框架以及工具   
框架   
1. 移动端基础框架   
　　`zepto.js` 语法与jquery几乎一样，会jquery基本会zepto~   
　　`iscroll.js` 解决页面不支持弹性滚动，不支持fixed引起的问题~ 实现下拉刷新，滑屏，缩放等功能~   
　　`underscore.js` 该库提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。   
　　`fastclick` 加快移动端点击响应时间   
　　`animate.css` CSS3动画效果库   
　　`Normalize.css Normalize.css`是一种现代的、CSS reset为HTML5准备的优质替代方案   
2. 滑屏框架   
　　适合上下滑屏、左右滑屏等滑屏切换页面的效果   
　　`slip.js`   
　　`iSlider.js`   
　　`fullpage.js`   
　　`swiper`   
3.瀑布流框架   
　　`masonry`   
工具推荐   
　　`caniuse` 各浏览器支持html5属性查询   
　　`paletton` 调色搭配

十五、动画的处理   
开启硬件加速   
解决页面闪白   
保证动画流畅

.css {
    　　-webkit-transform: translate3d(0, 0, 0);
    　　-moz-transform: translate3d(0, 0, 0);
    　　-ms-transform: translate3d(0, 0, 0);
    　　transform: translate3d(0, 0, 0);
    }

设计高性能`CSS3`动画的几个要素   
尽可能地使用合成属性`transform`和`opacity`来设计`CSS3`动画，   
不使用`position`的`left`和`top`来定位   
利用`translate3D`开启`GPU`加速

十六、消除闪烁   
　　 消除`transition`闪屏

.css{
    　　　-webkit-transform-style: preserve-3d;
    　　　-webkit-backface-visibility: hidden;
    }

十七、移动端取消`touch`高亮效果   
　　在做移动端页面时，会发现所有`a`标签在触发点击时或者所有设置了伪类 `:active` 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来禁止：

.xxx {
    　　-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

计量单位的使用

css的计量单位有三种选择：

>  *  px: 固定的相素值
>  *  em: 相对父级元素的font-size设置来作为当前元素1em所代表的像素值，如父节点的font-size:10px，当前节点的font-size:1.2em,则当前节点的font-size实为12px;
>  *  rem：相对根节点html的font-size设置来作为当前元素1rem所代表的像素值，与em的区别就是rem的基本度量单位与父节点无关，只与根节点font-size的设置有关，如设置html\{font-size:10px;\}后当前dom所有节点的1rem都表示10px;

移动端开发中我们使用rem作为基本计量单位，同时将根节点默认字号大小设为font-size:62.5%,因移动端浏览器默认字号大小为16px;16\*62.5%刚好为10px; 具体设置方法及使用示例

html{font-size:62.5%;/*刚好为10px;*/}
    #example{font-size:1.2rem}/*设置#example的字体大小为12px;*/
    #example div{font-size:1.4rem; width:10rem;height:10rem}/*设置#example子节点div的字体大小为14px;宽度为100px;高度100px*/

*  安卓下<textarea>标签的内容字体大小不支持rem设置，如有需要使用响应式及px单位设置其字体大小，暂时还未找到具体原因

不同分辨率的终端

在对主流手机终端进行统计得出，大部分手机的device-width为320px、360px、375px、384px、400px、414px，另外安卓pad的device-width为600px\\800px。 手机屏幕分辨率宽度则在320px-1080px间，有少部分手机已经达到1152px和1440px。PS:ipad访问移动端建议跳转去对应的PC页面。

viewport设置

在移动端开发中，我们使用如下viewport设置

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

注：device-width实际上并不等于设备宽度，而是css宽度，它是根据设备屏幕宽度和屏幕像素密度换算得出的用于网页显示的css宽度

移动端设计稿750px\*1134px的制作规范

css部分

/*reset.less*/
    /* CSS Document */
    html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;  font-size:62.5%;}
    ul,li,div,p,body,h1,h2,h3,h4,h5,h6,dl,dt,dd{margin:0;padding:0;}
    li{list-style:none;}
    a{text-decoration:none; color: #2a2a2a; }
    input{ -webkit-appearance:none;outline:none}
    *{outline: none; webkit-focus-ring-color: rgba(0, 0, 0, 0);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;}
    .hide{display:none;}
    body, html {width: 100%; font-family: "Microsoft YaHei","Helvetica Neue",Arial, HelveticaNeue, Helvetica, "BBAlpha Sans", sans-serif;font-weight: normal;display: -webkit-box;-webkit-box-orient: vertical; -webkit-box-align: center;}
    
    /* *{-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden;} 用于解决某些情况下出现闪屏的问题，若无则不加*/
    body{opacity: 1;-webkit-transition:opacity 500ms ease-in;transition:opacity 500ms ease-in; }
    p,a,li{font-size:1.2rem; color:#434343}
    html{ font-size: 312.5%; } 
    @media screen and (max-width:359px) and (orientation:portrait) {
        html { font-size: 266.67%; } 
    }
    @media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
        html { font-size: 300%; } 
    }
    @media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
        html { font-size: 320%; } 
    }
    @media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
        html { font-size: 333.33%; } 
    }
    @media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
        html { font-size: 345%; }
    }
    @media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
        html { font-size:360%; }
    }
    @media screen and (min-width:480px)and (max-width:639px) and (orientation:portrait){
       html{ font-size:400%;}
    } 
    @media screen and (min-width:640px) and (orientation:portrait){
       html{ font-size:533.33%;}
    }

例如750px设计稿上320px\*200px字体大小为32px的区域样式为：

html{ font-size: 312.5%; } 
    .div{
        width:3.2rem;
        height:2rem;
        font-size:0.32rem    
    }

js部分

主要处理短屏下缩放，以及初始化时固定页面大小，防止竖屏下弹出键盘或横屏时页面发生缩放的情况

### html示例 ###

<!doctype html>
    <html>
        <head>
            <title>标题</title>
            <meta name="keywords" content="关键字" />
            <meta name="description" content="描述" />
            <meta name="format-detection" content="telephone=no" />
            <meta name="format-detection" content="address=no" />
            
            <meta name="applicable-device"content="mobile"> 
            <meta http-equiv="Cache-Control" content="no-transform" />
            <meta http-equiv="Cache-Control" content="no-siteapp" />
            
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
            <meta name="apple-mobile-web-app-capable" content="yes" />
            <link rel="stylesheet" type="text/css" href="css/index.less" />
        </head>
        <body>
       
            <div id="forhorview">
                <p>推荐使用竖屏浏览哦~</p>
            </div>
    
            <script src="js/zepto.min.js"></script>
        </body>
    </html>

### 移动端开发细节和优化 ###

在移动端使用新的css3样式代替原来在PC上的开发习惯

>  *  新的布局实现方式:使用display:box、box-flex代替float\\display：inline-block; 实现更强大、更完美的流体布局，尤其在宽度为100%的布局中，实现横向并排元素宽度的自动伸缩以及水平垂直居中平均分布、首尾分布排列等。
>  *  垂直居中的实现方式：使用display:-webkit-box;-webkit-box-align: center;实现垂直居中。
>  *  尽量使用border-radius，box-shadow,text-shadow等css3样式实现诸如圆角、渐变色、盒子投影、字体投影,减少使用图片。
>  *  对于单色的icon图标，我们将会整理出一套常用图标，并制作成字体，利用css3的@font-face使用自定义字体导入，这样的话，可以像修改字体一样随意地修改图标的颜色、大小、背景色、特殊效果（如投影）等，而不再需要每一种颜色就需要切一份图片。
>  *  利用-webkit-transform:rotate(90deg)来获取旋转了不同角度的icon，避免每个角度需要切一张图片
>  *  在动画中，利用css3动画属性如-webkit-transform:translate(10px,12px)来改变元素的偏移位置，减少使用left和top来做位移动画

这是根据腾讯最新公布的《移动页面用户行为报告》来给大家分享的关于移动端H5页面开发一些20条规范和准则。里面大概包含了16种用户操作习惯和注意点。

想要了解详细的小伙伴可以前往：[http://bigdata.qq.com/article?id=2944][http_bigdata.qq.com_article_id_2944]

下面25学堂跟大家先分享一张关于2016年最新的ios和android系统的占比情况，以便于我们对h5开发和APP设计有进一步的了解。

![2016最新app系统占比][2016_app]

扩展阅读：

1、[移动端H5页面的设计稿尺寸大小规范][H5]

2、[当当网的H5触屏版的UI视觉设计规范][H5_UI]

废话少说，直接跟随25学堂的小编来细细品读这20条移动前端[H5页面开发规范][H5 1]。

**1. 做好缩略图，事半功倍**

用户会点击一个H5，跟标题、缩略图以及发布的时间有关系。一个夺人眼球的标题能够吸引人的点击，一个引人注目的缩略图会引起人们的好奇心。

![a56ca251f6c8b151c60bdf4e92c3be29.jpg][]

以上一些经典的H5案例

**2. 请在12点或22点发布或上线H5页面**

H5发布最合适的时间，腾讯的《移动页面用户行为报告》给出了以下答案。

![51c0025c1c0cd878d65db4f4a946028e.jpg][]

**3. 请把引流页放在首页或尾页**

腾讯《移动页面用户行为报告》指出，H5页面首屏和最后一屏的平均停留时间比中间页面的平均停留时间长，按钮点击率也比较高，是放置引流页面的最佳选择。

![3d960bfb336e9bdfc2502f1e309d6996.png][]

**4. 给按钮好听的名字和动画**

![1ff63644de17f92e3e03d53bc537a928.gif][]

▲以上3个案例来自ih5平台 按钮命名值得借鉴

**5. 力求三秒钟渲染首屏**

腾讯《移动页面用户行为报告》第一条指出，加载超过5秒就会有74%的用户离开页面。

![2f6d446ce9baa379a1e8a67a12f31e7e.png][]

用户都是没有耐心的，首屏渲染越短越好。

因此一定要尽量缩小首屏的体积，业内一般以联通3G网络平均338KB/s(2.71Mb/s)为准，3秒以内渲染完成，所以首屏资源不应超过1014KB。

**6. 大型重资源页面采用loading页面**

如果你不能够保证3秒出首屏，那就增加有趣的Loading页面进行预加载，资源加载完成后再显示页面。虽说Loading页面可以缓解用户等待的焦虑，但时间过长，也会造成用户流失。因此H5素材优化才是硬道理。

![e30926dc6ff4abf4e50aade7fd97b98b.gif][]

**7. 用色彩单一的绘图方式作图**

![8a2d39968d468fbabc18aea6bd20ab87.jpg][]

这是三张200\*200像素图片的体积对比，第一张单色块，第二张垂直渐变，第三张斜对角渐变。对于H5来说，流畅度往往比画面的精细程度更加重要。

**8. 静态图尽量保存成png8、或者进行图片压缩，在线png图片压缩工具很多。**

![32e8c882078f69f26ef25af996706148.jpg][]

这是一张1M的图片用PS压缩成jpg、png8、png24的体积对比。需要补充的是Png8最多只能展示265种颜色，而png24能有1600万。

所以色彩单一时用png8，色彩丰富时用jpg，需要追求精度时用png24。

**9. 无损压缩图片可用网站**

大家都知道的TinyPNG 和业界好口碑的智图。

## [手机APP设计必备图片压缩神器-TinyPNG][APP_-TinyPNG] ##

## [推荐一个APP切图文件的PNG压缩工具-Pnggauntlet][APP_PNG_-Pnggauntlet] ##

**10. 图片避免大小重设**

根据需求上传相应尺寸图片，避免大小重设，不宽于640像素（基于手机屏幕一般宽度），避免造成图片质量剩余。

![9b8aadedeaba23fe69035506db5b417a.png][]

**11、善于用H5工具匹配多终端**

H5中背景图片宽度固定为640px，那如何匹配高度呢？

如果你用的是H5制作工具——ih5.cn，就能够解决。

打开ih5.cn，在舞台下添加【移动设备】功能，设置不同方案的高度，案例就可以根据终端设备自动跳转到对应的方案去浏览。这种方法需要重复设计多种尺寸的图，堪称累倒设计师的方法。

![a0ed5267370affdb8e2916ef5af3f1d0.png][]

偷懒的设计师们用的是——将设计文档统一按照最大方案也就是640\*1040px来创建，然后添加一个移动设备，选择默认高度，在设计文档时记得将主要的信息放在中间，重要的按钮尽量往中间放。

![23a2044ab65eaf037550179b6a516879.png][]

**12. 动图优化再优化**

在不影响动态图整体效果的前提下，通过修改尺寸、质量、帧数等进行优化。

![e3ab1bcf8ea8bb2f3c918c544b7f8901.gif][]

**13. 善用背景颜色属性**

如果你是用H5工具编辑案例，以ih5为例，在需要使用单纯色做背景或者其它的情况下，可以利用图形工具里面的背景色属性或者舞台与页面的背景属性。

![d7cd22c9f4e62937597942c5172ccff2.png][]

▲ih5平台页面属性面板

**14. 开发们都喜欢的H5音频规范**

格式：mp3 ，单轨，最好30秒以内 ，文件大小控制在100k以内最佳。

![43298c4237637be8d7987a05c3d68708.png][]

由上图可得，mp3文件较大主要是由于比特率过高，一般H5背景音乐比特率选择64kbps已经足够了。利用Adobe Audition、格式工厂或者一些音乐播放软件可以剪辑和压缩音乐。要注意，作为无限循环的背景音乐，截取时一定要注意头尾得连接得上，而且要淡入淡出。

**15. 视频3分钟以内，用H.264格式**

① 视频时长：3分钟以内。近年比较火的全屏视频，视频长度均为3分钟以内，比如薛之谦史上最疯狂的广告（腾讯出品，2分51秒），都是为了避免跳出率过高。

② 格式：MP4，H.264。H.264编码后生成的视频文件，体积较小，画质也不错。蓝光技术（Blu-ray）和几乎所有的高清摄像机都采用这种格式。

③ 在保证基本清晰度的前提下，用格式工厂等软件进行压缩。视频宽度同样是640px，尺寸越小，体积才越小。

**16.不滥用Web字体**

一般浏览器只支持一些默认字体，中文如宋体、微软雅黑、华文细黑，英文如Helvetica、Arial、Georgia、Times。

H5用了其他字体，需要下载，解析，重绘当前页面，应尽量减少使用，或者直接将文字转成图片再导入。

不过在ih5中，如果你用中文字体组件输入文字，其实是自动将文字转成图片，就不需要担心这个问题。

**17. 善于复用元素**

H5在制作的过程中经常会用到同一个元素，比如按钮、箭头等，我们可以直接在iH5编辑舞台里复制或直接填写被复用的元素的连接，这样就不用重复插入图片，节省案例内存，提高流畅度。

![34ab7ac484fc1e41fa789a7611896fe1.png][]

▲图片属性面板记录着资源位置

**18. 遵循用户操作习惯**

腾讯的《移动页面用户行为报告》公布：大多数用户习惯滑动切换，放置在左边的按钮点击率低（可能大部分是右撇子）。

![3e6dc3f21f842cee44bf40f7ec8bb987.jpg][]

用户习惯沿用上一屏学习到的操作行为，如果当前操作不同，需要提示用户。

**19. 慎用向右滑动和横屏**

很多手机，特别是苹果手机，向右滑动容易触发返回“上一级页面”效果。

横屏需要用户设备开启屏幕旋转功能，才能正常观看，用户操作成本高（很多安卓手机经常对横屏没反应）。对不同屏幕的手机，长宽比例不一，难以展示最佳的视觉效果。

**20. 慎用输入行为**

输入行为或者复杂交互行为都会导致用户流失。

用户都是没有耐心的，如果一定要输入，尽量改成选择的形式，会好很多。

比如ih5平台上设计师悟脚叔叔的作品《你，有什么资格睡觉》，就把一些输入行为转为了选择行为。对每一个测试类H5，都是有借鉴意义的。

![91a23a075b9a488e6ed68af907a138b4.jpg][]

[https_blog.csdn.net_qq_36584352_article_details_80775529]: https://blog.csdn.net/qq_36584352/article/details/80775529
[https_www.jianshu.com_p_650819820c86]: https://www.jianshu.com/p/650819820c86
[http_www.idangero.us_sliders_swiper_index.php]: http://www.idangero.us/sliders/swiper/index.php
[http_bigdata.qq.com_article_id_2944]: http://bigdata.qq.com/article?id=2944
[2016_app]: /images/20220219/379a297154bb4a10847ffef4adb2645d.png
[H5]: http://www.25xt.com/allcode/9581.html
[H5_UI]: http://www.25xt.com/appdesign/11581.html
[H5 1]: https://www.25xt.com/tag/h5%E9%A1%B5%E9%9D%A2%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83
[a56ca251f6c8b151c60bdf4e92c3be29.jpg]: /images/20220219/8a7c841b08ce42139f260fae7effa075.png
[51c0025c1c0cd878d65db4f4a946028e.jpg]: /images/20220219/06ea566f923b491eae0ada6233030ae1.png
[3d960bfb336e9bdfc2502f1e309d6996.png]: /images/20220219/5b6cdd5b9e9f490ba9dff00fed8a564e.png
[1ff63644de17f92e3e03d53bc537a928.gif]: /images/20220219/69d4b36297af48ca81eea25ed65efdd2.png
[2f6d446ce9baa379a1e8a67a12f31e7e.png]: /images/20220219/dd8bbf8383e94b2aa20af9c20cee9c1f.png
[e30926dc6ff4abf4e50aade7fd97b98b.gif]: /images/20220219/e56bebeb297044718a661351725f3811.png
[8a2d39968d468fbabc18aea6bd20ab87.jpg]: /images/20220219/88317bebe19d49b9ba1f4b668c97fe94.png
[32e8c882078f69f26ef25af996706148.jpg]: /images/20220219/4a225fb279e04c46be128649c2870e67.png
[APP_-TinyPNG]: http://www.25xt.com/appdesign/7709.html
[APP_PNG_-Pnggauntlet]: http://www.25xt.com/uidesign/6628.html
[9b8aadedeaba23fe69035506db5b417a.png]: /images/20220219/af13dc9a7e1d4b0682a8e6c41f2aeefa.png
[a0ed5267370affdb8e2916ef5af3f1d0.png]: /images/20220219/c199143f092c45b8ab9035a080301a68.png
[23a2044ab65eaf037550179b6a516879.png]: /images/20220219/09c59d56f5074e09aadb1ae5bfe9205b.png
[e3ab1bcf8ea8bb2f3c918c544b7f8901.gif]: /images/20220219/06a05d3c6bb74c25b217776eabc86dbf.png
[d7cd22c9f4e62937597942c5172ccff2.png]: /images/20220219/8d01872f0f5f49fcaeb7ec774355f53c.png
[43298c4237637be8d7987a05c3d68708.png]: /images/20220219/16c08203144e48249872ab635076515a.png
[34ab7ac484fc1e41fa789a7611896fe1.png]: /images/20220219/172a502b544644e2b96b3cfcfaf4a6d9.png
[3e6dc3f21f842cee44bf40f7ec8bb987.jpg]: /images/20220219/75832f389042458b8d4cdf4a06224ca1.png
[91a23a075b9a488e6ed68af907a138b4.jpg]: /images/20220219/bb146f4cab1b4ae6aa821ed77f400123.png