2022-3-23 高勁
背景概述：設計師在日常工作中，避免不了與開發(fā)、測試同事溝通交流。他們說的話，你真的聽明白了嗎？如何更快、更好的無障礙交流？這就需要我們設計師，多多了解開發(fā)、測試同事們常用的術語，以及一些與設計相關的代碼知識。
設計師日常工作中，除了設計輸出，設計驗收也很重要。你們是否遇到過以下情況：
不知道什么時候開始設計驗收，等到上線了才發(fā)現(xiàn)設計還原不到位；
測試通知設計驗收，給出驗收文檔后，卻因為已經(jīng)到了上線節(jié)點，延后處理（這是因為驗收的節(jié)點不對，測試通知晚了）；
提前主動要求驗收，開發(fā)測試給過來各種各樣的安裝包，DEV環(huán)境、黑盒、沙盒等等，每次的叫法讓人暈頭轉(zhuǎn)向，賬號都搞不清了。
如果你有以上問題，就跟著我來一起了解一下，開發(fā)測試的常用環(huán)境術語吧～
它是通過測試來檢測每個功能是否都能正常使用。在測試中，把程序看作一個不能打開的黑盒子，在完全不考慮程序內(nèi)部結(jié)構和內(nèi)部特性的情況下，在程序接口進行測試，它只檢查程序功能是否按照需求規(guī)格說明書的規(guī)定正常使用，程序是否能適當?shù)亟邮蛰斎霐?shù)據(jù)而產(chǎn)生正確的輸出信息。黑盒測試著眼于程序外部結(jié)構，不考慮內(nèi)部邏輯結(jié)構，主要針對軟件界面和軟件功能進行測試。
計算機專業(yè)術語，在計算機安全領域中是一種安全機制，為運行中的程序提供的隔離環(huán)境。通常是作為一些來源不可信、具破壞力或無法判定程序意圖的程序提供實驗之用。
通常是由最終軟件的用戶（通常這些用戶不了解軟件的具體邏輯，而對業(yè)務邏輯卻相當熟悉）進行的測試，因此是面向最終用戶的測試，結(jié)束之后通常就可以發(fā)布生產(chǎn)環(huán)境了。
??：每個公司所使用的環(huán)境或開發(fā)流程順序可能不一樣，可以先通過對于上圖的基礎了解，去跟自己公司的開發(fā)測試同學詢問學習，深入了解自己公司的開發(fā)測試流程，制定屬于你自己的設計驗收規(guī)范～
冒煙測試執(zhí)行，與正式測試的區(qū)別在于二者側(cè)重點不同，冒煙測試關注的是阻塞型缺陷，包括但不限于流程不通、主要功能未實現(xiàn)等，而正式測試則屬于全面、細致的測試，需要盡可能的發(fā)現(xiàn)全部缺陷并按其嚴重性進行區(qū)分。
??：這個術語，跟設計師關系很小，此處只是簡單講解，大家了解即可。
棧在程序的運行中有著舉足輕重的作用。最重要的是棧保存了一個函數(shù)調(diào)用時所需要的維護信息，這常常稱之為堆棧幀或者活動記錄。堆棧幀一般包含如下幾方面的信息：
1．函數(shù)的返回地址和參數(shù)
2． 臨時變量：包括函數(shù)的非靜態(tài)局部變量以及編譯器自動生成的其他臨時變量。
在設計中的體現(xiàn)，例如下圖的密碼登錄流程：
對于段落文字的顯示，最終落地效果，經(jīng)常達不到UI的預期。一方面是UI在設計的過程中考慮不完善，一方面是開發(fā)在實現(xiàn)的過程中偷懶使用了默認屬性。
對于文字，常見適配方式有以下幾種：1、無適配；2、省略；3、換行
以上這些屬性可以結(jié)合使用，達到我們想要的UI效果，比如超過多少行省略都是可以實現(xiàn)的。
??對于適配方式，我們最好告知開發(fā)或在UI上有所體現(xiàn)，以呈現(xiàn)較完整的視覺樣式，不然開發(fā)就會按照自己的理解隨便寫樣式。
比如上圖設計稿：單行的上下間距和多行的就不一樣，到了開發(fā)那邊實現(xiàn)，開發(fā)若是給了一個定值，這就造成了最終的落地稿和視覺稿有誤差。若是按照設計稿上的實現(xiàn)，收起展開就會出現(xiàn)動效過渡抖動的情況。
如何解決：我們在設計的過程中多注意一下代碼規(guī)律，能統(tǒng)一的盡量統(tǒng)一，非必要的避免單獨定制（因為不同平臺的代碼特性，除了通用的，單獨定制的多少會有差異）
氣泡、不規(guī)則背景板、特殊投影切圖等等
1、為了自適應適配：如果一個樣式，里面的內(nèi)容有多有少，我們不能每種場景都切一張圖吧
2、為了適配不同分辨率：可拉伸元素，不同分辨率下用一張就足夠了
3、為了減少圖片的大小：比如一張帶特殊投影的背景板，正常切圖體積很大的時候，我們可以考慮只切一部分以減少圖片體積
安卓：點9即.9是andriod平臺的應用軟件開發(fā)里的一種特殊的圖片形式，文件擴展名為：.9.png；這種圖片能告訴開發(fā)哪部分可以被拉伸，哪一點部分不能被拉伸需要保持原有比例；
iOS：自帶拉伸屬性只需要提供圖片質(zhì)量較高的切圖，拉伸效果可由代碼控制；
H5：切圖+開發(fā)自己寫規(guī)則圖形拼接（都是規(guī)則圖形：規(guī)則三角+規(guī)則矩形，開發(fā)自己寫）
如果氣泡的小三角是規(guī)則的三角形，就不需要提供切圖
如果氣泡的小三角是帶圓角的三角形，是需要提供切圖的，可以給一個三角形的svg。
隨著手機設備的多樣化，有些手機的設備獨立像素和設備像素比的乘積并不等于物理像素，這就造成了在不同手機上樣式呈現(xiàn)有差異的原因。
一個原則：同樣大小的屏幕 邏輯分辨率越低 字體越大。
??這點要根據(jù)不同公司使用的開發(fā)單位去看
因為移動端的屏幕不僅僅分辨率有差異，其實還有Retina屏的問題。正常情況下，我們代碼里的1px在屏幕上就應該顯示一個像素點，但是在Retina屏下則不僅僅是一個像素點。以iphone6為例，其dpr(device pixel ratio)設備像素比為2，css中一個1x1的點，其實在iphone6上是2x2的點,并且1px的邊框在devicePixelRatio=2的Retina屏下會顯示成2px。
在我們頁面走查的過程中，有時候會發(fā)現(xiàn)給到開發(fā)的圖片，被拉伸變形了或者重要信息被剪裁了。例如下圖：
想要知道出現(xiàn)這種情況的原因，首先我們需要先了解下開發(fā)進行圖片適配與剪裁的幾種方式，以H5為例子(iOS和安卓同理):
結(jié)合以上開發(fā)適配剪裁方式，總結(jié)banner展示效果不佳，圖片被拉伸變、重要元素被剪裁掉的主要原因可能有
1、banner通常是由后臺上傳配置的，如果后臺上傳尺寸和前端的展示尺寸不一致，例如后臺只設置了一個上傳入口，前端我們需要在手機端、PC端同時展示該banner（兩個端展示尺寸還不一樣），就會出現(xiàn)以上情況。
2、不同型號的手機，圖片適配方式不一樣
3、對于PC端的動態(tài)自適應，開發(fā)適配方式使用錯誤
如何解決？
除了后臺設置多入口，匹配后臺和前端的尺寸，我們還可以使用以上代碼特性+設置banner剪裁安全區(qū)域去更好的展示banner。（開發(fā)有的時候不會想那么多，就使用默認的適配方式，我們可以告訴他怎么做）
剛剛變形、被剪裁的banner，開發(fā)一開始就是一張圖去無限拉伸適配，在拉伸的過程中使用的屬性也不對，造成各種變形。經(jīng)過溝通，設計了一張最大的banner，并將文案內(nèi)容設置在安全區(qū)域內(nèi)，其他區(qū)域根據(jù)窗體尺寸動態(tài)剪裁。
固定尺寸：不論在什么型號的手機上面，顯示尺寸都是一樣的
固定比例(固定邊距)：會根據(jù)不同型號的手機分辨率，按照在頁面中的占比進行等比縮放適配。
文章來源：站酷 作者：youki_ren
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.sdgs6788.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務