視覺語言適配各種大小的移動端螢幕，讓資訊準確的傳達給使用者。
為了讓使用者能在不同的場景中合理的使用，設計師就需要針對不同場景使用者會使用到的不同尺寸螢幕進行不同設計。設計方向包括功能、互動、已經視覺展現，從而讓產品能夠更友好的被使用者使用。
螢幕的大小不同，所能承載的資訊數量自然也不同。為了保持不同分辨螢幕下，設計風格的一致。設計師可以通過合理合併功能按鈕、十字互動、增加可關閉容器、規整排列等等視覺語言進行資訊傳達。
合理合併功能按鈕
來回想下身邊小家電，因為體積的限制，小家電的操作按鈕少而精，通常將很多按鈕合併。
比如，時間控制器、溫度控制器、流量控制器等等，他們的共同點就是，合理的把相同功能按鈕合併為乙個，以節省空間。
如圖，相同位置，不同狀態的按鈕，讓按鈕在不增加佔位面積的前提下，增加了頁面承載內容，滿足了更多的功能需求。
十字互動
注意功能使用的區域間隔和可操作空間。
可關閉、隱藏內容
除此之外，可關閉提示氣泡、新手引導、下拉列表、上浮選單、選擇器等，都是常見的可關閉、隱藏內容的容器。
規整排列
大家有沒有遇到過，隨著產品功能的不斷增加，或是需要將大屏裝置功能，整合到小屏介面上時可涉及區域太小的問題呢？
增加可操作內容排列的靈活性和可變性(一般會通過icon+文字的方式進行呈現)。
現，很多應用都將此排列方式與可編輯功能相結合，製造為可自定義介面，大大增加了使用者體驗度。
總結
以上只是資料整合展現方式中的一小部分，但無論是那種整合方式都離不開資料篩選彙總，也就是前期的準備工作。
我們在使用視覺語言完成移動端螢幕資訊傳達的同時，也要注意不要脫離了使用者需求的本質，這也是我們將資訊進行視覺化處理的基礎。
《在你身邊，為你設計》- 電子工業出版社
移動端下拉滾動重新整理
clientheight 視口 viewport 的高度，就是我們在瀏覽器中所能看到內容的高度 screenheight 螢幕高度，實際移動裝置的螢幕高度。scrollheight 真實內容的高度 scrolltop 視窗上面隱藏掉的部分。真實內容高度 視窗高度 上面隱藏的高度 20，作為載入的觸發...
詳解vue移動端 下拉重新整理
說這個功能之前，大家要先了解一下，要怎麼觸發滾動條事件。一定要注意，所有滾動事件都必須要滿足這個條件，橫向滾動條也一樣，只要滿足子元素寬度大於父元素寬度就可以了。下篇文章會講怎麼實現乙個橫向滾動條 先來看看怎麼剖析這個下拉重新整理。要用到的移動端的三個事件 touchstart 手指按下 touch...
移動端螢幕適配
rem單位介紹 rem font size of the root element 是相對長度單位。相對於根元素 即html元素 font size計算值的倍數 移動端主要根據iphone5來參考適配，在谷歌瀏覽器中，1rem 16px iphone5的寬度是320px,320 16 20 動態設定...