经常使用的移动前端webapp交互细节

#经常使用的移动前端webapp交互细节


##select的表现方式
###PC端
select控件在传统PC桌面已经存在多年，因为在IE6等低版本浏览器容易形成层级错乱，一直被一些UI框架所抛弃，而用div层去模拟。
![传统的select控件](https://images0.cnblogs.com/i/84053/201407/271218506505629.jpg)

###移动设备
而在移动设备上,select 控件的表现方式不太同样，以下图，分别是UC浏览器，小米的系统浏览器，及海豚浏览器的表现方式

能够看出，为适应移动设备小屏幕的特征，不少浏览器都对此进行优化改造。

###原理与思考
此现象的根本缘由，是html只有文档标准，因此各个软件（浏览器）的实现有其具体表现。的确，要进行web标准的交互，只能制定文档层面的标准。但也带来外观不统1、控件表现、操做体验不统一的问题。像UC就要在选择以后进行二次肯定，小米和海豚都不须要；小米的定位在底部，其余的都是居中表现的。

##单行数据内容过长的表现方式
###PC端
在新闻列表、文章标题列表的页面，很容易出现标题比内容长的状况，在PC端的通常表现方式是**相似excel表格的列宽调整机制**，如图（鼠标在上面拖动能够调整列宽）：

![PC端的列表展示](https://images0.cnblogs.com/i/84053/201407/271238480577480.jpg)


http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=


或者能够利用**鼠标提示**来展示可能会超出范围的文字


###移动设备
而在移动设备上，上述方案并不可行，可是咱们能够用另外的表现方式：`swipe`。如[示范页面](http://gh.p2227.com/m/swipe)所示

###原理与思考
原理是很是简单的，在一个宽100px，overflow非hidden的容器里面放进200px的内容，容器会产生滚动条。而后结合触摸设备的特色：滚动条并不占位置，而且是按住内容滚动的。这种表现方式就变得很是适应。


###组件化的swipejs
上面讲到的表现很是原始，对于大批量应用，咱们通常参考现成组件[swipe.js](http://swipejs.com/)，利用它去处理（可能在一些UI框架已经集成了此表现方式）。基本原理仍是利用滚动条，而后再加入了transform等新css3特征使之有必定的动画效果而且接近原生的表现。

##按钮的大小与间隔
###PC端
在鼠标指针控制的PC端，各功能按钮能够很是小，而且能够放得很是紧凑，例如经典的window窗口右上角-□×三个按钮（最小化最大化关闭），置于右上角是很是方便的，而且通常人也不容易按错。

###移动设备
而在移动设备上，因为触摸屏和人手指的特色，按钮应该要作得大而有必定间距，如图，咱们按钮的图标可能如红框所示，可是按钮的功能有效区域应该是整个黑框。

![移动设备的按钮](https://images0.cnblogs.com/i/84053/201407/272046475884820.jpg)


##最后的话
最后，本身评价一下吧，我以为本文仍是很是直观的感受与积累，并无进行太深刻的分析与原理探索，主要仍是想抛砖引玉，想跟你们一块儿讨论一些用户体验的东西。


而后是本身的一些博文计划，列出来，让本身常常记得要整理~
---状态机
---fiddler应用（反向代理）
---angular的filter
---打包发布工具ant,grunt（工程化）