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

常用術語

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

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

• 不知道什么時候開始設計驗收，等到上線了才發現設計還原不到位；

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

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

如果你有以上問題，就跟著我來一起了解一下，開發測試的常用環境術語吧～

1、DEV環境

develop，即代碼開發的環境

2、黑盒/SIT

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

它是通過測試來檢測每個功能是否都能正常使用。在測試中，把程序看作一個不能打開的黑盒子，在完全不考慮程序內部結構和內部特性的情況下，在程序接口進行測試，它只檢查程序功能是否按照需求規格說明書的規定正常使用，程序是否能適當地接收輸入數據而產生正確的輸出信息。黑盒測試著眼于程序外部結構，不考慮內部邏輯結構，主要針對軟件界面和軟件功能進行測試。

3、沙盒/UAT

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

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

通常是由最終軟件的用戶（通常這些用戶不了解軟件的具體邏輯，而對業務邏輯卻相當熟悉）進行的測試，因此是面向最終用戶的測試，結束之后通常就可以發布生產環境了。

??：每個公司所使用的環境或開發流程順序可能不一樣，可以先通過對于上圖的基礎了解，去跟自己公司的開發測試同學詢問學習，深入了解自己公司的開發測試流程，制定屬于你自己的設計驗收規范～

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

冒煙即冒煙測試

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

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

??：這個術語，跟設計師關系很小，此處只是簡單講解，大家了解即可。

三、“棧”是什么？在設計中有怎樣的體現？

棧

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

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

1．函數的返回地址和參數

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

在設計中的體現，例如下圖的密碼登錄流程：

設計與開發

一、文字、段落的適配，開發是如何實現的？

對于段落文字的顯示，最終落地效果，經常達不到UI的預期。一方面是UI在設計的過程中考慮不完善，一方面是開發在實現的過程中偷懶使用了默認屬性。

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

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

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

結合一些其他屬性，我們來看看，對于需要自適應控件的設計，開發是如何實現的，我們需要注意些什么

案例一：文本段落的設計還原

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

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

案例二：按鈕的設計還原

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

哪些元素需要拉伸使用：

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

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

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

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

3、為了減少圖片的大小：比如一張帶特殊投影的背景板，正常切圖體積很大的時候，我們可以考慮只切一部分以減少圖片體積

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

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

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

H5：切圖+開發自己寫規則圖形拼接（都是規則圖形：規則三角+規則矩形，開發自己寫）

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

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

三、各型號的手機的適配、倍率關系與實現效果

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

常見走查疑問：

為什么在不同手機上樣式呈現有差異？

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

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

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

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

??這點要根據不同公司使用的開發單位去看

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

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

常見各類手機設計像素和倍率關系表：http://shijuechuanda.com/screen/index.htm

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

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

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

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

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

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

3、對于PC端的動態自適應，開發適配方式使用錯誤

如何解決？

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

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

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

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

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

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

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