經常使用的移動前端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（工程化）