杭州嵌入式培訓
達內杭州嵌入式培訓中心

13732203138

熱門課程

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

  • 時間: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流里的圖片,適配的方法大多都是自適應,界面中的元素間距和數量不變,元素尺寸進行等比縮放,比較適用于固定比例,但尺寸隨屏幕寬度變化的元素,如下圖所示:



知識點:

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

劃重點

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

預約申請免費試聽課

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

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

為什么你在職場很難得到晉升?

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

如何讓你的設計不那么千篇一律

選擇城市和中心
江西省

貴州省

廣西省

海南省

中文字幕人成乱码在线观看