背景概述：設(shè)計師在日常工作中，避免不了與開發(fā)、測試同事溝通交流。他們說的話，你真的聽明白了嗎？如何更快、更好的無障礙交流？這就需要我們設(shè)計師，多多了解開發(fā)、測試同事們常用的術(shù)語，以及一些與設(shè)計相關(guān)的代碼知識。

常用術(shù)語

一、開發(fā)測試常說的DEV環(huán)境、黑盒、沙盒、SIT、UAT是什么？開發(fā)的流程是怎樣的？UE/UI在何時介入驗收測試比較好？

設(shè)計師日常工作中，除了設(shè)計輸出，設(shè)計驗收也很重要。你們是否遇到過以下情況：

• 不知道什么時候開始設(shè)計驗收，等到上線了才發(fā)現(xiàn)設(shè)計還原不到位；

• 測試通知設(shè)計驗收，給出驗收文檔后，卻因為已經(jīng)到了上線節(jié)點，延后處理（這是因為驗收的節(jié)點不對，測試通知晚了）；

• 提前主動要求驗收，開發(fā)測試給過來各種各樣的安裝包，DEV環(huán)境、黑盒、沙盒等等，每次的叫法讓人暈頭轉(zhuǎn)向，賬號都搞不清了。

如果你有以上問題，就跟著我來一起了解一下，開發(fā)測試的常用環(huán)境術(shù)語吧～

1、DEV環(huán)境

develop，即代碼開發(fā)的環(huán)境

2、黑盒/SIT

黑盒測試/系統(tǒng)集成測試(System Integration Testing)，黑盒=SIT，開發(fā)人員、測試人員測試流程是否走通。

它是通過測試來檢測每個功能是否都能正常使用。在測試中，把程序看作一個不能打開的黑盒子，在完全不考慮程序內(nèi)部結(jié)構(gòu)和內(nèi)部特性的情況下，在程序接口進行測試，它只檢查程序功能是否按照需求規(guī)格說明書的規(guī)定正常使用，程序是否能適當(dāng)?shù)亟邮蛰斎霐?shù)據(jù)而產(chǎn)生正確的輸出信息。黑盒測試著眼于程序外部結(jié)構(gòu)，不考慮內(nèi)部邏輯結(jié)構(gòu)，主要針對軟件界面和軟件功能進行測試。

3、沙盒/UAT

沙盒測試/用戶驗收測試((User Acceptance Testing)，沙盒=UAT，由專門的測試人員驗證，驗收完成才能上生產(chǎn)環(huán)境。

計算機專業(yè)術(shù)語，在計算機安全領(lǐng)域中是一種安全機制，為運行中的程序提供的隔離環(huán)境。通常是作為一些來源不可信、具破壞力或無法判定程序意圖的程序提供實驗之用。

通常是由最終軟件的用戶（通常這些用戶不了解軟件的具體邏輯，而對業(yè)務(wù)邏輯卻相當(dāng)熟悉）進行的測試，因此是面向最終用戶的測試，結(jié)束之后通常就可以發(fā)布生產(chǎn)環(huán)境了。

??：每個公司所使用的環(huán)境或開發(fā)流程順序可能不一樣，可以先通過對于上圖的基礎(chǔ)了解，去跟自己公司的開發(fā)測試同學(xué)詢問學(xué)習(xí)，深入了解自己公司的開發(fā)測試流程，制定屬于你自己的設(shè)計驗收規(guī)范～

二、“冒煙”是什么意思？

冒煙即冒煙測試

跟黑盒、沙盒測試的側(cè)重點不一樣，黑盒、沙盒是手動測試流程、樣式、交互等等，而冒煙測試主要用于壓力測試，比如同時載入N條數(shù)據(jù)或者點擊動作，測試服務(wù)器是否能承載這樣的操作，整體流程是否會有阻塞等等。

冒煙測試執(zhí)行，與正式測試的區(qū)別在于二者側(cè)重點不同，冒煙測試關(guān)注的是阻塞型缺陷，包括但不限于流程不通、主要功能未實現(xiàn)等，而正式測試則屬于全面、細致的測試，需要盡可能的發(fā)現(xiàn)全部缺陷并按其嚴(yán)重性進行區(qū)分。

??：這個術(shù)語，跟設(shè)計師關(guān)系很小，此處只是簡單講解，大家了解即可。

三、“棧”是什么？在設(shè)計中有怎樣的體現(xiàn)？

棧

存儲貨物或供旅客住宿的地方，可引申為倉庫、中轉(zhuǎn)站，引入到計算機領(lǐng)域里，就是指數(shù)據(jù)暫時存儲的地方，所以才有進棧、出棧的說法。

棧在程序的運行中有著舉足輕重的作用。最重要的是棧保存了一個函數(shù)調(diào)用時所需要的維護信息，這常常稱之為堆棧幀或者活動記錄。堆棧幀一般包含如下幾方面的信息：

1．函數(shù)的返回地址和參數(shù)

2． 臨時變量：包括函數(shù)的非靜態(tài)局部變量以及編譯器自動生成的其他臨時變量。

在設(shè)計中的體現(xiàn)，例如下圖的密碼登錄流程：

設(shè)計與開發(fā)

一、文字、段落的適配，開發(fā)是如何實現(xiàn)的？

對于段落文字的顯示，最終落地效果，經(jīng)常達不到UI的預(yù)期。一方面是UI在設(shè)計的過程中考慮不完善，一方面是開發(fā)在實現(xiàn)的過程中偷懶使用了默認(rèn)屬性。

對于文字，常見適配方式有以下幾種：1、無適配；2、省略；3、換行

以上這些屬性可以結(jié)合使用，達到我們想要的UI效果，比如超過多少行省略都是可以實現(xiàn)的。

??對于適配方式，我們最好告知開發(fā)或在UI上有所體現(xiàn)，以呈現(xiàn)較完整的視覺樣式，不然開發(fā)就會按照自己的理解隨便寫樣式。

結(jié)合一些其他屬性，我們來看看，對于需要自適應(yīng)控件的設(shè)計，開發(fā)是如何實現(xiàn)的，我們需要注意些什么

案例一：文本段落的設(shè)計還原

比如上圖設(shè)計稿：單行的上下間距和多行的就不一樣，到了開發(fā)那邊實現(xiàn)，開發(fā)若是給了一個定值，這就造成了最終的落地稿和視覺稿有誤差。若是按照設(shè)計稿上的實現(xiàn)，收起展開就會出現(xiàn)動效過渡抖動的情況。

如何解決：我們在設(shè)計的過程中多注意一下代碼規(guī)律，能統(tǒng)一的盡量統(tǒng)一，非必要的避免單獨定制（因為不同平臺的代碼特性，除了通用的，單獨定制的多少會有差異）

案例二：按鈕的設(shè)計還原

二、不同平臺，可拉伸元素是如何使用的？

哪些元素需要拉伸使用：

氣泡、不規(guī)則背景板、特殊投影切圖等等

為什么要使用可拉伸元素：

1、為了自適應(yīng)適配：如果一個樣式，里面的內(nèi)容有多有少，我們不能每種場景都切一張圖吧

2、為了適配不同分辨率：可拉伸元素，不同分辨率下用一張就足夠了

3、為了減少圖片的大?。罕热缫粡垘厥馔队暗谋尘鞍?，正常切圖體積很大的時候，我們可以考慮只切一部分以減少圖片體積

不同平臺如何使用可拉伸元素：

安卓：點9即.9是andriod平臺的應(yīng)用軟件開發(fā)里的一種特殊的圖片形式，文件擴展名為：.9.png；這種圖片能告訴開發(fā)哪部分可以被拉伸，哪一點部分不能被拉伸需要保持原有比例；

iOS：自帶拉伸屬性只需要提供圖片質(zhì)量較高的切圖，拉伸效果可由代碼控制；

H5：切圖+開發(fā)自己寫規(guī)則圖形拼接（都是規(guī)則圖形：規(guī)則三角+規(guī)則矩形，開發(fā)自己寫）

如果氣泡的小三角是規(guī)則的三角形，就不需要提供切圖

如果氣泡的小三角是帶圓角的三角形，是需要提供切圖的，可以給一個三角形的svg。

三、各型號的手機的適配、倍率關(guān)系與實現(xiàn)效果

首先，我們需要先了解以下基礎(chǔ)概念：英寸、分辨率、設(shè)備獨立像素、設(shè)備像素比等等

常見走查疑問：

為什么在不同手機上樣式呈現(xiàn)有差異？

隨著手機設(shè)備的多樣化，有些手機的設(shè)備獨立像素和設(shè)備像素比的乘積并不等于物理像素，這就造成了在不同手機上樣式呈現(xiàn)有差異的原因。

為什么iphone12的文字顯示比iphone11大？

一個原則：同樣大小的屏幕 邏輯分辨率越低 字體越大。

為什么在同一個手機上H5文字看起來比本地偏大？

??這點要根據(jù)不同公司使用的開發(fā)單位去看

H5的1px細線問題,為什么有的開發(fā)寫出來的細線比較粗？

因為移動端的屏幕不僅僅分辨率有差異，其實還有Retina屏的問題。正常情況下，我們代碼里的1px在屏幕上就應(yīng)該顯示一個像素點，但是在Retina屏下則不僅僅是一個像素點。以iphone6為例，其dpr(device pixel ratio)設(shè)備像素比為2，css中一個1x1的點，其實在iphone6上是2x2的點,并且1px的邊框在devicePixelRatio=2的Retina屏下會顯示成2px。

常見各類手機設(shè)計像素和倍率關(guān)系表：http://shijuechuanda.com/screen/index.htm

四、開發(fā)是如何進行圖片適配與剪裁的？

在我們頁面走查的過程中，有時候會發(fā)現(xiàn)給到開發(fā)的圖片，被拉伸變形了或者重要信息被剪裁了。例如下圖：

想要知道出現(xiàn)這種情況的原因，首先我們需要先了解下開發(fā)進行圖片適配與剪裁的幾種方式，以H5為例子(iOS和安卓同理):

結(jié)合以上開發(fā)適配剪裁方式，總結(jié)banner展示效果不佳，圖片被拉伸變、重要元素被剪裁掉的主要原因可能有

1、banner通常是由后臺上傳配置的，如果后臺上傳尺寸和前端的展示尺寸不一致，例如后臺只設(shè)置了一個上傳入口，前端我們需要在手機端、PC端同時展示該banner（兩個端展示尺寸還不一樣），就會出現(xiàn)以上情況。

2、不同型號的手機，圖片適配方式不一樣

3、對于PC端的動態(tài)自適應(yīng)，開發(fā)適配方式使用錯誤

如何解決？

除了后臺設(shè)置多入口，匹配后臺和前端的尺寸，我們還可以使用以上代碼特性+設(shè)置banner剪裁安全區(qū)域去更好的展示banner。（開發(fā)有的時候不會想那么多，就使用默認(rèn)的適配方式，我們可以告訴他怎么做）

剛剛變形、被剪裁的banner，開發(fā)一開始就是一張圖去無限拉伸適配，在拉伸的過程中使用的屬性也不對，造成各種變形。經(jīng)過溝通，設(shè)計了一張最大的banner，并將文案內(nèi)容設(shè)置在安全區(qū)域內(nèi)，其他區(qū)域根據(jù)窗體尺寸動態(tài)剪裁。

五、APP界面適配方式，固定尺寸還是固定比例？

屏幕適配的原則是：大屏手機顯示更多的內(nèi)容；所以并不是大屏手機就根據(jù)屏幕寬高比將UI控件進行等比例縮放

界面里的元素樣式適配有兩種形式

固定尺寸：不論在什么型號的手機上面，顯示尺寸都是一樣的

固定比例(固定邊距)：會根據(jù)不同型號的手機分辨率，按照在頁面中的占比進行等比縮放適配。