<th id="ik4gr"><pre id="ik4gr"></pre></th>
<rp id="ik4gr"></rp>
    <dd id="ik4gr"></dd>

  1. <rp id="ik4gr"><object id="ik4gr"><blockquote id="ik4gr"></blockquote></object></rp>
      <rp id="ik4gr"></rp>
        <button id="ik4gr"><acronym id="ik4gr"></acronym></button>
      1. <rp id="ik4gr"><object id="ik4gr"><input id="ik4gr"></input></object></rp>
        1. 杭州嵌入式培訓
          達內杭州嵌入式培訓中心

          13175137725

          手把手教你們如何快速上手做適配

          • 時間:2020-05-18 10:39
          • 發布:轉載
          • 來源:網絡

          前兩天在跟別的項目溝通適配的時候,傻白甜的設計一臉莫名其妙的問我,什么適配啊?我們為什么還要管適配啊?這不是前端要管的事情嗎?

          真的是這樣嗎?這里涉及到一個繞不開的話題,就是設計驗收,一旦效果不及預期,設計師就要協助技術人員完成調試,為了提高溝通和協作效率,設計師自然要理解一些相關的專業知識或代碼開發。 

          今天我們就來手把手的教大家,在適配的時候經常會遇到的難題,并且要怎么解決?

          錯誤的做法

          首先先說說常見的錯誤做法,由于部分設計師對適配了解不夠透徹,導致在做實際項目的時候,需要把750的設計稿適配到640、720、828的屏幕時,都會以為是把設計稿直接等比拉伸至對應的尺寸,重新標注就可以的(我們公司前端也是這么想的)。


          下面以微信為例,左圖是750的直接拉伸至828的,右圖是實際線上828的界面。


          能看出區別了嗎?750直接拉伸的比828的內容都要大,而明明750是@2x下的界面,828是@3x下的界面,由此可見直接拉伸是不行的,適配才是解決多端展示的唯一辦法,但是適配要怎么做才能在每個設備中都達到視覺統一呢?下面就來看看適配的時候經常會遇到的問題吧!

          問題一:簡單的界面一定簡單嗎

          以前的時候我們標注的時候就是把頁面中所有元素的尺寸、位置、屬性一一標清楚,如下如所示:


          把所有界面中的尺寸、間距等都標注出來,這樣那么在適配的時候要怎么處理呢?如果一直繼續這樣的手動標注方式,那么你們在遇到簡單的頁面時,是不是就會覺得很簡單?如下圖所示:


          看到上面兩張圖如果覺得簡單的,那么接下來的內容你要記得認真看哦!

          我們以馬蜂窩舉例說明,適配和標注是需要一起考慮的兩個因素,首先一定要先糾正大家的一個誤區就是,像上邊圖中一樣,標注的時候就只考慮標注好位置,不考慮適配。 

          其實越簡單的界面適配挺難的,為什么說很難呢?因為我們要保證不管是什么設備,同樣的頁面視覺上偏差不能太大。要確定自適應的部分,首先要找到固定的那部分,就是在@2x,@3x的情況下,依然不會變的模塊,如下圖所示:


          上圖中的橘色覆蓋的就是在三個設備中Y軸間距沒有改變的部分,這樣看起來就簡單一些,第二部分到第三部分就是根據屏幕高度自適應的,如下圖所示:


          這里的適配還涉及到小屏幕的適配問題,當一個元素在750上顯示的效果很完美,到640上可能就放不下了。所以在做圖的時候,設計師是需要用動態的眼光去考慮問題。如下圖所示:


          馬蜂窩的登陸頁面在750的界面上顯示的很完美,但是放在640的屏幕上就放不下了,所以就出現了圖中第一部分到第二部分的舉例縮短,從104px縮小到52px,減少了一半的距離,同時減少了20px輸入框的高度,保證視覺上不會產生因為上緊下松的突兀感。需要強調的是,這三個適配界面中字體的大小都是沒有變的。

          知識點:

          在簡單的界面中,由于本身界面的內容比較少,確定位置就會比較難,因為要考慮到不同的界面內容要怎么放才能保持視覺統一,這個時候可以先將界面中的信息分成不同的幾個部分,先保證每個部分內的固定內容,再確定自適應的內容。

          問題二:怎么判斷自適應的部分?

          我們用一個例子來直接說明會簡單一點,這個是我之前做的適配練習,我在適配的時候經常遇到的問題就是不確定哪一部分是自適應的,不過我在練習的時候發現了一些規律,想要分享給你們,先來看看之前的適配練習,如下圖所示:


          先來說說固定的一些內容:

          1、圖標或按鈕


          2、搜索框

          高度不變,寬度自適應


          3、Y軸間距


          一般來說,Y軸的間如果在相近的組件里,都會是固定的,不會有變化

          4、圖片

          像這種圖片的列表或者,十字縱橫的頭像或文字,大小都是固定的,變得會是間距或者數量,如下圖所示:


          那么哪些是自適應的呢?

          1、文字流

          文字流指在多行文字的情況下,文字數量變化會影像頁面布局和元素大小,如下圖所示:


          2、banner

          這里說的圖片是指banner或者feed流里的圖片,適配的方法大多都是自適應,界面中的元素間距和數量不變,元素尺寸進行等比縮放,比較適用于固定比例,但尺寸隨屏幕寬度變化的元素,如下圖所示:



          知識點:

          對于比較復雜的模塊,快速找到將以上所說的固定因素和自適應因素,除了能夠讓標注效率大大提高之外,還能夠找到合適的適配方法,避免出現開發完成后才發現某機型適配效果不理想的情況。

          劃重點

          當我們學會適配之后,最大的變化就是在做設計的同時,可以利用適配原理去預想當前設計在其他機型上的效果,從而幫助我們發現一些可能存在的問題,提前做出應對,也能夠更好的與開發區溝通。

          預約申請免費試聽課

          怕錢不夠?就業掙錢后再付學費!    怕學不會?從入學起,達內定制課程!     擔心就業?達內多家實踐企業供你挑選!

          上一篇:如何讓你的設計不那么千篇一律
          下一篇:為什么你在職場很難得到晉升?

          一文告訴你:如何參加IT培訓拿高薪?

          非科班出身轉行IT難嗎?好就業嗎?

          面試時程序員應該如何解答薪資問題?

          交付前你需要這樣的UI自查

          • 掃碼領取資料

            回復關鍵字:視頻資料

            免費領取 達內課程視頻學習資料

          • 視頻學習QQ群

            添加QQ群:1143617948

            免費領取達內課程視頻學習資料

          Copyright ? 2018 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

          選擇城市和中心
          江西省

          貴州省

          廣西省

          海南省

          香蕉视频在线一级a做爰片免费观看视频 欧美成年性色生活片 百度 好搜 搜狗
          <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>