4000 字硬核干貨！UX設(shè)計師必備的開發(fā)知識全在這了！

UX 設(shè)計師與開發(fā)、測試同事交流有障礙？溝通費時？不用怕，讀完這篇文章你將掌握開發(fā)、測試常用術(shù)語及基礎(chǔ)知識，溝通效率+10086。

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

常用術(shù)語

1. 開發(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ù)語吧～

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

黑盒/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)，主要針對軟件界面和軟件功能進行測試。

沙盒/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ī)范～

2. “冒煙”是什么意思？

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

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

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

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

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

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

1. 函數(shù)的返回地址和參數(shù)
2. ?臨時變量：包括函數(shù)的非靜態(tài)局部變量以及編譯器自動生成的其他臨時變量。

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

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

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

對于段落文字的顯示，最終落地效果，經(jīng)常達不到 UI 的預(yù)期。一方面是 UI 在設(shè)計的過程中考慮不完善，一方面是開發(fā)在實現(xià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è)計還原

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

哪些元素需要拉伸使用：氣泡、不規(guī)則背景板、特殊投影切圖等等

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

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

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

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

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

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

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

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

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

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

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

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

常見走查疑問：為什么在不同手機上樣式呈現(xiàn)有差異？

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

為什么 iPhone 12 的文字顯示比 iPhone 11 大？

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

為什么在同一個手機上 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)系表：https://uiiiuiii.com/screen/

4. 開發(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ā)有的時候不會想那么多，就使用默認的適配方式，我們可以告訴他怎么做）

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

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

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

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

1. 固定尺寸：不論在什么型號的手機上面，顯示尺寸都是一樣的
2. 固定比例（固定邊距）：會根據(jù)不同型號的手機分辨率，按照在頁面中的占比進行等比縮放適配。

參考文章：

• https://www.zhihu.com/question/19939866
• H5 適配方式： https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
• 關(guān)于移動端適配，你必須要知道的： https://blog.csdn.net/weixin_39670849/article/details/111655506
• 如何看待 iPhone 12 系列的邏輯分辨率設(shè)置？蘋果可能是如何考慮的？ https://www.zhihu.com/question/425893492
• 從第一代 iPhone 細數(shù)到 iPhone 12，iPhone 屏幕尺寸進化歷程背后的 app 設(shè)計哲學(xué)： https://sspai.com/post/62198

部分配圖源自網(wǎng)絡(luò)，僅做交流學(xué)習(xí)使用，如果侵權(quán)，請聯(lián)系我刪除。

對日常工作中與開發(fā)測試同學(xué)對接的一些知識經(jīng)驗總結(jié)就到這里，歡迎評論交流，讓我們的設(shè)計稿落地更精致～

點贊收藏給點鼓勵～我會持續(xù)給大家分享日常工作實戰(zhàn)經(jīng)驗總結(jié)，一起進步呀～