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

常用術(shù)語

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

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

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

• 測(cè)試通知設(shè)計(jì)驗(yàn)收，給出驗(yàn)收文檔后，卻因?yàn)橐呀?jīng)到了上線節(jié)點(diǎn)，延后處理（這是因?yàn)轵?yàn)收的節(jié)點(diǎn)不對(duì)，測(cè)試通知晚了）；

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

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

1、DEV環(huán)境

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

2、黑盒/SIT

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

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

3、沙盒/UAT

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

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

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

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

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

冒煙即冒煙測(cè)試

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

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

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

三、“?！笔鞘裁矗吭谠O(shè)計(jì)中有怎樣的體現(xiàn)？

棧

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如何解決：我們?cè)谠O(shè)計(jì)的過程中多注意一下代碼規(guī)律，能統(tǒng)一的盡量統(tǒng)一，非必要的避免單獨(dú)定制（因?yàn)椴煌脚_(tái)的代碼特性，除了通用的，單獨(dú)定制的多少會(huì)有差異）

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

二、不同平臺(tái)，可拉伸元素是如何使用的？

哪些元素需要拉伸使用：

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

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

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

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

3、為了減少圖片的大?。罕热缫粡垘厥馔队暗谋尘鞍澹Ｇ袌D體積很大的時(shí)候，我們可以考慮只切一部分以減少圖片體積

不同平臺(tái)如何使用可拉伸元素：

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

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

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

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

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

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

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

常見走查疑問：

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

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

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

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

為什么在同一個(gè)手機(jī)上H5文字看起來比本地偏大？

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

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

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

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

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

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

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

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

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

2、不同型號(hào)的手機(jī)，圖片適配方式不一樣

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

如何解決？

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

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

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

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

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

固定尺寸：不論在什么型號(hào)的手機(jī)上面，顯示尺寸都是一樣的

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