整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
載自優(yōu)設(shè) 歐巴醬
編者：這是一種簡(jiǎn)單快速制作規(guī)范的方法，已經(jīng)在公司內(nèi)部得到實(shí)踐，可行性很高。適用于中小團(tuán)隊(duì)。
像優(yōu)秀的設(shè)計(jì)規(guī)范比如Material Design / ANT Design等。
這里主要講解如何快速制作一份設(shè)計(jì)規(guī)范。附件帶工程文件和sketch插件。規(guī)范所用素材非工作設(shè)計(jì)界面，但不影響內(nèi)容。關(guān)于設(shè)計(jì)規(guī)范的好處，這里不詳細(xì)描述。
分析以往痛點(diǎn)
小結(jié)：規(guī)范落實(shí)起來(lái)難，效果就低很多，溝通成本加大，背離初衷。
問(wèn)題場(chǎng)景
一家公司有30名設(shè)計(jì)師，4個(gè)前端開(kāi)發(fā)團(tuán)隊(duì)，已有一份PDF規(guī)范。有趣的事情是，設(shè)計(jì)師的設(shè)計(jì)稿間距高度、字號(hào)、顏色用法有很大的個(gè)人習(xí)慣。有時(shí)還重復(fù)做已有的控件。然后開(kāi)發(fā)爸爸們，同樣也是，同一個(gè)可以復(fù)用的導(dǎo)航欄，側(cè)邊欄等，都重復(fù)去寫了代碼。小團(tuán)隊(duì)之間，都單獨(dú)有自己的控件庫(kù)，在UI驗(yàn)收時(shí)才能去解決，但是這無(wú)形中增加了成本。
我們能否減少這些問(wèn)題呢，帶著這些疑問(wèn)，我也摸索出一點(diǎn)小經(jīng)驗(yàn)。這也是我真正想要分享的內(nèi)容。
首先確保團(tuán)隊(duì)已經(jīng)使用Sketch辦公。為什么用Sketch ? 關(guān)于這個(gè)問(wèn)題，主要是效率方面高。
先出設(shè)計(jì)稿還是先出規(guī)范？
對(duì)于大多數(shù)小伙伴來(lái)說(shuō)很疑惑，我也疑惑過(guò)。但是，你還沒(méi)設(shè)計(jì)，怎么知道你真正想要的是什么顏色什么字號(hào)？這里我建議是，部分設(shè)計(jì)稿出來(lái)再做規(guī)范，然后慢慢的完善。
你說(shuō)，公司已經(jīng)有規(guī)范了怎么辦，那可以把規(guī)范換一種方式呈現(xiàn)出來(lái)。
規(guī)范制作
這里主要以一個(gè)iOS設(shè)計(jì)稿為主，涉及到安卓的話，如果要精準(zhǔn)，也時(shí)需要2份設(shè)計(jì)稿和2份設(shè)計(jì)規(guī)范。
這是一個(gè)Sketch制作的設(shè)計(jì)稿。我會(huì)簡(jiǎn)單做一個(gè)設(shè)定。
視覺(jué)規(guī)范
有小伙伴有疑問(wèn)了，上面的色值那個(gè)C1／C2的代號(hào)是什么意思？
這個(gè)代號(hào)主要是為了方便前端開(kāi)發(fā)人員建立UI庫(kù)。比如，我們?cè)O(shè)計(jì)稿一個(gè)間距是20px，可能在開(kāi)發(fā)眼里的20px和他所計(jì)算的單位不在一個(gè)頻道。如果以J2來(lái)代號(hào)來(lái)表達(dá)一個(gè)間距值，那么不管雙方是什么單位，但是至少這個(gè)間距大小呈現(xiàn)出來(lái)是一致的。當(dāng)開(kāi)發(fā)問(wèn)設(shè)計(jì)人員某個(gè)地方間距是多少，你可以直接告訴他是J2，那么開(kāi)發(fā)就會(huì)知道，哦，是20dp。
交互樣式
組件庫(kù)
比如，我們把設(shè)計(jì)規(guī)范做完了，如何去使用呢？
需要分2個(gè)方向，一個(gè)是UI，一個(gè)是前端。
設(shè)計(jì)師規(guī)范的使用
可以直接在sketch上面拷貝樣式，或者直接Command C+V。還可以調(diào)出別的同事的畫板，然后導(dǎo)入到自己的機(jī)子上。
插件名字叫做sketch palettes.可以上網(wǎng)搜索，可以下載的。
前端開(kāi)發(fā)規(guī)范使用
他們沒(méi)有sketch的前提下， 可以借用插件Marketch導(dǎo)出一個(gè)html格式。
導(dǎo)出后用瀏覽器打開(kāi)index.html。
這樣的呈現(xiàn)方式是不是比一個(gè)PDF文件要好呢？左邊是類目，右邊是相關(guān)的屬性。也可以直接下載某些圖標(biāo)。
當(dāng)設(shè)計(jì)規(guī)范建立，開(kāi)發(fā)人員也建立了自己的UI庫(kù)，然后再去推進(jìn)之前剩下沒(méi)有統(tǒng)一樣式的小尾巴。
如果以后設(shè)計(jì)稿迭代怎么辦？
要 - 面向用戶的軟件開(kāi)發(fā)人員通常將圖形用戶界面（GUI）的模型轉(zhuǎn)換為代碼。因?yàn)?GUI 的變化與時(shí)俱進(jìn)，這個(gè)過(guò)程既發(fā)生在應(yīng)用程序啟動(dòng)時(shí)，也發(fā)生在演化環(huán)境中。麻煩的是，這種做法既具有挑戰(zhàn)性又耗時(shí)。在本文中，我們提出了一種自動(dòng)化的方法通過(guò)以下三個(gè)任務(wù)實(shí)現(xiàn) GUI 的準(zhǔn)確原型制作，從而實(shí)現(xiàn)了這一過(guò)程：檢測(cè)，分類和組裝。一，邏輯組件使用計(jì)算機(jī)視覺(jué)技術(shù)或模型元數(shù)據(jù)從模型工件中檢測(cè)出 GUI 的數(shù)量。然后，軟件庫(kù)挖掘，自動(dòng)動(dòng)態(tài)分析和深度卷積神經(jīng)網(wǎng)絡(luò)可將 GUI 組件準(zhǔn)確分類為特定于域的類型（例如，切換按鈕）。最后，數(shù)據(jù)驅(qū)動(dòng)的 K 最近鄰算法生成合適的分層 GUI 可以自動(dòng)組裝原型應(yīng)用程序的結(jié)構(gòu)。我們?cè)谙到y(tǒng)中為 Android 實(shí)現(xiàn)了這種方法稱為 ReDraw。我們的評(píng)估表明，ReDraw 的平均 GUI 組件分類精度達(dá)到 91％，并且組裝了原型應(yīng)用程序，這些應(yīng)用程序在視覺(jué)親和力方面緊密地鏡像目標(biāo)模型，同時(shí)展示合理的代碼結(jié)構(gòu)體。與行業(yè)從業(yè)人員的訪談?wù)f明了 ReDraw 在改善實(shí)際開(kāi)發(fā)工作流程方面的潛力。
索引詞 - GUI，CNN，移動(dòng)，原型，機(jī)器學(xué)習(xí)，挖掘軟件存儲(chǔ)庫(kù)。
大多數(shù)面向客戶的現(xiàn)代軟件以 GUI 為中心，依賴有吸引力的用戶界面（UI）和直觀的用戶體驗(yàn)（UX）來(lái)吸引客戶，促進(jìn)有效完成計(jì)算任務(wù)。麻煩或美觀的軟件令人不快的用戶界面成功的可能性很小，尤其是公司希望將自己的應(yīng)用與具有類似功能的競(jìng)爭(zhēng)對(duì)手。這種現(xiàn)象可以在移動(dòng)應(yīng)用市場(chǎng)中很容易觀察到作為 App Store 或 Google Play，其中許多提供類似功能的競(jìng)爭(zhēng)應(yīng)用程序（也稱為應(yīng)用程序）功能（例如任務(wù)管理器，天氣應(yīng)用）通過(guò) UI/UX 來(lái)區(qū)分自己。因此，重要的是正在開(kāi)發(fā)任何基于 GUI 的應(yīng)用程序的第一步和原型設(shè)計(jì)模型，這有助于 UI 的實(shí)例化和實(shí)驗(yàn)，以便進(jìn)行評(píng)估或證明抽象設(shè)計(jì)概念。在工業(yè)環(huán)境中對(duì)于較大的團(tuán)隊(duì)，此過(guò)程通常由擁有特定領(lǐng)域?qū)I(yè)知識(shí)的敬業(yè)設(shè)計(jì)師使用圖像編輯軟件制作引人入勝的直觀 GUI 軟件，例如 Photoshop 或 Sketch。這些團(tuán)隊(duì)是通常負(fù)責(zé)表達(dá)一致的設(shè)計(jì)語(yǔ)言在公司數(shù)字化業(yè)務(wù)的許多方面，包括網(wǎng)站，軟件應(yīng)用程序和數(shù)字市場(chǎng)緊縮材料。此設(shè)計(jì)過(guò)程的某些組件也傾向于延續(xù)到較小的獨(dú)立發(fā)展通過(guò)創(chuàng)作實(shí)踐設(shè)計(jì)或原型制作流程的團(tuán)隊(duì)吃線框或模型來(lái)判斷設(shè)計(jì)思路之前承諾花費(fèi)發(fā)展資源實(shí)施-給他們。這些初始設(shè)計(jì)稿創(chuàng)建后，至關(guān)重要的是，它們?nèi)鐚?shí)地被翻譯成代碼讓最終用戶體驗(yàn)設(shè)計(jì)和用戶界面以其預(yù)期的形式。自動(dòng)化原型制作過(guò)程 GUI 是一項(xiàng)艱巨的任務(wù)。這個(gè)困難的核心是需要彌合巨大的抽象差距從任一像素推理出準(zhǔn)確的用戶界面代碼基于圖形用戶界面或數(shù)字設(shè)計(jì)的圖形表示草圖。
我們提出一種方法，將原型制作過(guò)程構(gòu)造為以下任務(wù)：檢測(cè)，分類和組裝。第一項(xiàng)任務(wù)涉及檢測(cè)-原子元素的邊界框（例如 GUI-用戶無(wú)法進(jìn)一步分解的組件）實(shí)體模型設(shè)計(jì)工件（例如基于像素）的界面圖片?？梢酝ㄟ^(guò)以下方法解決此挑戰(zhàn)：關(guān)于表示 GUI 組件的對(duì)象的形成直接從模型工件（例如，解析導(dǎo)出的元來(lái)自 Photoshop 的數(shù)據(jù)），或使用 CV 技術(shù)進(jìn)行推斷對(duì)象。一旦來(lái)自設(shè)計(jì)工件的 GUI 組件已被識(shí)別，需要將其分類為特定于域的正確類型（例如，按鈕，下拉菜單，進(jìn)度條）。本質(zhì)上，這是圖像分類任務(wù)，并且對(duì)該主題的研究已顯示出巨大的近年來(lái)的進(jìn)步，主要是由于深卷積神經(jīng)網(wǎng)絡(luò)（CNN）。但是，由于 CNN 是一種監(jiān)督式學(xué)習(xí)技術(shù)，他們通常需要大量的訓(xùn)練有效數(shù)據(jù)，例如 ILSVRC 數(shù)據(jù)集。我們主張對(duì)應(yīng)用程序進(jìn)行自動(dòng)動(dòng)態(tài)分析從軟件存儲(chǔ)庫(kù)中提取的信息可用于收集屏幕截圖和 GUI 元數(shù)據(jù)，可用于自動(dòng)最終得出帶標(biāo)簽的訓(xùn)練數(shù)據(jù)。使用此數(shù)據(jù)，可以有效地訓(xùn)練 CNN 來(lái)對(duì) GUI 實(shí)體模型中的組件（使用檢測(cè)到的組件進(jìn)行提取邊界框）放入其特定于域的 GUI 組件類型。但是，組件的分類圖像不是足以匯編有效的 GUI 代碼。GUI 通常是在代碼中表示為層次樹(shù)，其中邏輯組組件捆綁在一起放在容器中。我們使用迭代 K 最近鄰（KNN）算法和 CV 技術(shù)在挖出的 GUI 元數(shù)據(jù)上運(yùn)行，以及屏幕截圖可以構(gòu)建現(xiàn)實(shí)的 GUI 層次結(jié)構(gòu)，被翻譯成代碼。 我們已經(jīng)實(shí)現(xiàn)了上述方法在適用于 Android 平臺(tái)的名為 ReDraw 的系統(tǒng)中。我們從 Google Play 提取了 8,878 個(gè)最受好評(píng)的應(yīng)用，使用全自動(dòng)輸入生成了這些應(yīng)用程序從我們先前的工作中得出的方法（例如 GUI 抓?。╆P(guān)于移動(dòng)測(cè)試。在自動(dòng)應(yīng)用程式執(zhí)行期間，從每個(gè)應(yīng)用程序中提取最受歡迎的屏幕瀏覽 GUI 層次結(jié)構(gòu)。然后，我們?cè)谧钍軞g迎的原生 Android GUI 組件類型為在防雷屏上觀察到。ReDraw 使用此分類器與迭代 KNN 算法和 addi-傳統(tǒng)的簡(jiǎn)歷技術(shù)來(lái)翻譯不同類型的模擬將工件放入原型 Android 應(yīng)用中。我們執(zhí)行了一整套三項(xiàng)評(píng)估 ReDraw 的研究旨在測(cè)量（i）基于 CNN 的分類的準(zhǔn)確性-分隔符（根據(jù)基線特征描述符和基于支持向量機(jī)的技術(shù)），（ii）相似度生成的應(yīng)用程序到實(shí)體模型（在視覺(jué)上和在結(jié)構(gòu)上），以及（iii）的潛在工業(yè)適用性我們的系統(tǒng)，通過(guò)對(duì)手機(jī)進(jìn)行半結(jié)構(gòu)化采訪 Google，華為和 Facebook 的設(shè)計(jì)師和開(kāi)發(fā)人員。我們的結(jié)果表明，我們基于 CNN 的 GUI 組件分類-sifier 的前 1 個(gè)平均精度達(dá)到 91％（即 CNN 預(yù)測(cè)的頂級(jí)類別是正確的），我們生成了應(yīng)用程序與其模型具有高度的視覺(jué)相似性工件，生成的應(yīng)用程序的代碼結(jié)構(gòu)相似到實(shí)際應(yīng)用，ReDraw 有潛力改善并促進(jìn)原型開(kāi)發(fā)一些實(shí)用擴(kuò)展的移動(dòng)應(yīng)用程序。我們的評(píng)估該部分還說(shuō)明了 ReDraw 如何勝過(guò)其他相關(guān)移動(dòng)應(yīng)用程序原型開(kāi)發(fā)一些實(shí)用擴(kuò)展的移動(dòng)應(yīng)用程序。
總而言之，我們的論文的貢獻(xiàn)有：
模擬驅(qū)動(dòng)開(kāi)發(fā)實(shí)踐的第一個(gè)概念我們?cè)诒疚闹幸玫氖悄Ｐ凸ぜ?，即我們定義為：
定義 1-模擬工件：軟件的工件-標(biāo)明設(shè)計(jì)準(zhǔn)則的標(biāo)志和開(kāi)發(fā)過(guò)程 GUI 及其內(nèi)容。
定義 2-GUI 組件：原子圖形元素具有預(yù)定義的功能，并顯示在軟件的 GUI 中軟件應(yīng)用。GUI 組件具有以下幾種與域相關(guān)的組件之一類型，每種不同的類型都有不同的功能或美學(xué)目的。例如，在常見(jiàn)的網(wǎng)絡(luò)應(yīng)用中組件類型包括下拉菜單和檢查盒子，僅舉幾例。
定義 3-GUI 容器：分組的邏輯結(jié)構(gòu)成員 GUI 組件，通常定義空間顯示其成員的屬性。在以 GUI 為中心的現(xiàn)代應(yīng)用中，GUI 組件很少使用預(yù)定義的坐標(biāo)在屏幕上呈現(xiàn)。在-相反，容器的邏輯分組形成了分層結(jié)構(gòu)（或 GUI 層次結(jié)構(gòu)）。這些層次結(jié)構(gòu)通常定義有關(guān)其組成成分的空間信息并在許多情況下會(huì)對(duì)尺寸的變化做出反應(yīng)顯示區(qū)域。例如，GUI-顯示文本的組件可能會(huì)根據(jù)到其容器的尺寸。
有了這些定義，我們要解決的問(wèn)題本文內(nèi)容如下：
問(wèn)題陳述：給定一個(gè)模型工件，生成一個(gè)打字應(yīng)用程序，非常類似于模擬 GUI 在視覺(jué)上，以及在 GUI 層次結(jié)構(gòu)的預(yù)期結(jié)構(gòu)方面。
這個(gè)問(wèn)題可以分解分為三個(gè)不同的任務(wù)，包括檢測(cè)分類和 GUI 組件的功能化，以及現(xiàn)實(shí)的組裝 GUI 層次結(jié)構(gòu)和相關(guān)代碼。在本文的范圍內(nèi)，我們專注于自動(dòng)為移動(dòng)應(yīng)用生成 GUI 在視覺(jué)和結(jié)構(gòu)上都相似（GUI 層次結(jié)構(gòu)）。為此，我們調(diào)查了（i）現(xiàn)有應(yīng)用程序；以及（ii）素描樣機(jī)反向從現(xiàn)有的流行應(yīng)用程序設(shè)計(jì)而成。我們利用這些類型的工件作為真實(shí)模型通常不是適用于開(kāi)源移動(dòng)應(yīng)用，因此無(wú)法在我們的研究中使用。應(yīng)該注意的是兩種本文中使用的模型偽像可能無(wú)法捕獲在創(chuàng)建過(guò)程中創(chuàng)建的模型中存在某些歧義一個(gè)真正的軟件設(shè)計(jì)過(guò)程的過(guò)程。我們討論這在第二節(jié)中的含義。
我們將圍繞以下內(nèi)容描述我們用于 GUI 原型制作的方法：該過(guò)程分為三個(gè)主要階段：檢測(cè)，分類和部件。圖 2 說(shuō)明了該過(guò)程的概述我們將在整個(gè)方法說(shuō)明中參考。在高層次上，我們的方法首先檢測(cè) GUI 組件通過(guò)使用 CV 技術(shù)或直接從生成的模型工件中解析元數(shù)據(jù)使用專業(yè)的照片編輯軟件。二，分類我們將檢測(cè)到的 GUI 組件轉(zhuǎn)換為適當(dāng)?shù)念愋褪褂脧拇笠?guī)模收集的 GUI 數(shù)據(jù)訓(xùn)練 CNN 對(duì)提取的應(yīng)用程序進(jìn)行自動(dòng)動(dòng)態(tài)分析挖掘軟件存儲(chǔ)庫(kù)。經(jīng)過(guò)訓(xùn)練的 CNN 隨后可以應(yīng)用于模型工件以對(duì)檢測(cè)到的組合進(jìn)行分類要素。最后，構(gòu)建合適的 GUI 層次結(jié)構(gòu)（例如，GUI 容器中 GUI 組件的正確分組）我們利用了基于 KNN 的算法，該算法利用了 GUI-大規(guī)模動(dòng)態(tài)分析中提取的信息組裝一個(gè)現(xiàn)實(shí)的 GUI 組件的嵌套層次結(jié)構(gòu)和 GUI 容器。為了說(shuō)明我們的一般方法，在每個(gè)階段，我們首先描述建議的方法，高層設(shè)計(jì)決策，然后討論實(shí)現(xiàn)具體到我們的 ReDraw 實(shí)例的詳細(xì)說(shuō)明適用于 Android 平臺(tái)。
GUI 原型方法所需的第一個(gè)任務(wù)是檢測(cè)存在于實(shí)體模型中的 GUI 組件 tifact。此階段的主要目標(biāo)是準(zhǔn)確推斷原子 GUI 組件元素的邊界框（在實(shí)體模型中基于像素的坐標(biāo)項(xiàng)）。這樣就可以將 GUI 組件的各個(gè)圖像裁剪并提取以便在以后使用原型制作過(guò)程的各個(gè)階段。此階段可以是通過(guò)以下兩種方法之一完成：（i）解析數(shù)據(jù)從模型工件中提取，或（ii）使用 CV 技術(shù)檢測(cè) GUI 組件。在以下小節(jié)中，我們將介紹這兩種方法的檢測(cè)程序作為我們?cè)?ReDraw 中的特定實(shí)現(xiàn)。
3.1.1 從設(shè)計(jì)模型中解析數(shù)據(jù)
檢測(cè) GUI 組件的第一種方法是存在于模型工件中。鑒于 UI / UX 在當(dāng)今時(shí)代的重要性面向消費(fèi)者的軟件，許多設(shè)計(jì)師和小型團(tuán)隊(duì)開(kāi)發(fā)人員團(tuán)隊(duì)進(jìn)行專業(yè)級(jí)圖像編輯 Photoshop 或 Sketch 等軟件來(lái)創(chuàng)建 GUI 的線框或像素完美靜態(tài)圖像包含模型工件。在此過(guò)程中，編輯或設(shè)計(jì)軟件通常用于創(chuàng)建空白尺寸與目標(biāo)設(shè)備屏幕匹配的畫布，或顯示區(qū)域（帶有一些便于縮放的設(shè)計(jì)軟件到多個(gè)屏幕尺寸）。然后，代表 GUI 組件作為可編輯對(duì)象放置在此組件的頂部畫布來(lái)構(gòu)建模型。這些工具大多數(shù)是能夠以以下格式導(dǎo)出模型工件：編碼有關(guān)畫布上對(duì)象的空間信息，例如使用“可縮放矢量圖形（.svg）”格式或 html 輸出。有關(guān)對(duì)象布局的信息，包括這些對(duì)象的邊界框，都可以解析從這些輸出格式中獲得高度準(zhǔn)確的結(jié)果檢測(cè)組件。因此，如果此元數(shù)據(jù)用于可用模型實(shí)體，可以對(duì)其進(jìn)行解析以獲得 GUI 組件的非常精確的邊界框存在于模型工件中，然后可用于其余的原型制作過(guò)程。
給定在元數(shù)據(jù)中編碼的空間信息，有時(shí)可以在模型制品中使用，有人可能會(huì)問(wèn)：該信息是否也可以用于重建 GUI 組件的分層表示，可以以后有助于代碼轉(zhuǎn)換過(guò)程。不幸，現(xiàn)實(shí)的 GUI 層次結(jié)構(gòu)通常無(wú)法被可行地解析至少由于以下兩個(gè)原因而從此類工件中獲?。海╥）設(shè)計(jì)者使用照片編輯軟件來(lái)創(chuàng)建模型，ups 傾向于編碼與層次結(jié)構(gòu)不同的編碼由于設(shè)計(jì)師缺乏知識(shí)，開(kāi)發(fā)人員會(huì)關(guān)于以編程方式的最佳方式在屏幕上排列 GUI 組件；（ii）限制在照片編輯軟件中可能會(huì)禁止創(chuàng)建 pro-語(yǔ)法正確的空間布局。因此，任何分層從此類工件中解析出來(lái)的結(jié)構(gòu)很可能是特定的設(shè)計(jì)師的喜好，或根據(jù)容量限制照片編輯軟件的功能，限制了我們的原型場(chǎng)景。例如，設(shè)計(jì)師可能沒(méi)有提供足夠的 GUI 容器來(lái)創(chuàng)建有效的反應(yīng)式移動(dòng)版式或照片編輯軟件可能不會(huì)允許按比例縮放 GUI 組件的相對(duì)位置跨不同的屏幕尺寸。
3.1.2 使用 CV 技術(shù)進(jìn)行 GUI 組件檢測(cè)
從模型中解析信息會(huì)導(dǎo)致高度 GUI 組件的準(zhǔn)確邊界框此信息由于以下方面的限制，可能并非始終可用使用的照片編輯軟件或設(shè)計(jì)不同的照片實(shí)踐，例如以數(shù)字或物理方式繪制模型使用數(shù)位屏，數(shù)位板或紙。在這種情況下，偽影可能只包含一張圖片，因此 CV 技術(shù)-需要標(biāo)識(shí)相關(guān)的 GUI 組件信息的工具。為了支持這些情況，我們的方法建立在中的 CV 技術(shù)來(lái)檢測(cè) GUI 組件邊界盒子。此過(guò)程使用了一系列不同的簡(jiǎn)歷技術(shù)（圖 2 -1）來(lái)推斷對(duì)象周圍的邊界框響應(yīng)圖像中的 GUI 組件。首先，坎尼的邊緣檢測(cè)算法用于檢測(cè)邊緣圖像中的對(duì)象。然后將這些邊緣擴(kuò)張合并邊緣彼此靠近。最后，那些輪廓邊用于導(dǎo)出原子周圍的邊界框 GUI 組件。合并基于文本的其他啟發(fā)式方法使用光學(xué)字符識(shí)別（OCR）的組件是用于合并文本的邏輯塊的邊界框（例如，與其將每個(gè)單詞都檢測(cè)為自己的組成部分，句子和文本段落合并在一起）。
3.1.3 ReDraw 實(shí)現(xiàn)-GUI 組件檢測(cè)
在實(shí)施 ReDraw 時(shí)，要支持以下情況：可以從適用于 Android 的模型中收集元數(shù)據(jù)我們針對(duì)使用 Marketch 創(chuàng)建的文物的應(yīng)用程序 Sketch 的插件，可將模型導(dǎo)出為 html 和 javascript 的組合。素描很受歡迎在移動(dòng)開(kāi)發(fā)人員之間，并提供廣泛的自定義功能大型插件庫(kù)中的內(nèi)容。ReDraw 解析包含在其中的 GUI 組件的邊界框?qū)С龅?Marketch 文件。支持與元數(shù)據(jù)相關(guān)的場(chǎng)景實(shí)體模型不可用，ReDraw 使用 CV 技術(shù)自動(dòng)推斷組件的邊界框從靜態(tài)圖像。因此，GUI 的輸入-ReDraw 的組件檢測(cè)階段是屏幕-鏡頭和相應(yīng)的插銷文件（3 月 ketch 解析程序已應(yīng)用）或單個(gè)屏幕截圖（已應(yīng)用基于 CV 的技術(shù)）。最終結(jié)果 GUI 組件檢測(cè)過(guò)程是一組邊界位于原始輸入屏幕中的框坐標(biāo)-鏡頭和從原始圖像中裁剪出的圖像集合根據(jù)派生的邊界框截圖描述原子 GUI 組件。稍后將提供此信息到 CNN 中分類為 Android 特定組件階段 2.2 中的類型。請(qǐng)注意，只有 GUI-在此過(guò)程中檢測(cè)到組件。在另一手工 GUI 容器和相應(yīng)的 GUI 層次結(jié)構(gòu)在第 2 節(jié)中描述的組裝階段構(gòu)造。
一旦原子 GUI 組件的邊界框已從實(shí)體模型工件中檢測(cè)到錯(cuò)誤，下一個(gè)原型制作過(guò)程中的步驟是對(duì)裁剪后的圖片進(jìn)行分類特定 GUI 組件的年齡進(jìn)入其特定領(lǐng)域類型。為此，我們提出了一種基于數(shù)據(jù)的基于機(jī)器學(xué)習(xí)的方法利用 CNN 的方法。如該圖所示。2-2.1 和圖 2-2.2，此階段包含兩個(gè)主要部分：（i）大規(guī)模軟件資源庫(kù)挖掘和自動(dòng)動(dòng)態(tài)分析-sis，以及（ii）CNN 的分類訓(xùn)練和應(yīng)用 GUI 組件的圖像。在以下小節(jié)中我們首先討論的動(dòng)機(jī)和實(shí)施之前的資源庫(kù)挖掘和動(dòng)態(tài)分析過(guò)程討論使用 CNN 的基本原理以及我們的具體 ReDraw 中的體系結(jié)構(gòu)和實(shí)現(xiàn)。
3.2.1 2.1 階段-大規(guī)模軟件存儲(chǔ)庫(kù)挖掘和動(dòng)態(tài)分析
鑒于其受監(jiān)管的性質(zhì)和深入的架構(gòu)，CNN 針對(duì)圖像分類任務(wù)需要大量訓(xùn)練數(shù)據(jù)以實(shí)現(xiàn)精確分類。訓(xùn)練傳統(tǒng) CNN 圖像分類網(wǎng)絡(luò)的數(shù)據(jù)典型 ic 由大量標(biāo)有它們的圖像組成對(duì)應(yīng)的類別，其中標(biāo)簽對(duì)應(yīng)于優(yōu)先級(jí)圖像中的瑪麗主題。傳統(tǒng)上，此類數(shù)據(jù)集具有人工采購(gòu)，其中人類費(fèi)力地標(biāo)記數(shù)據(jù)集中的每個(gè)圖像。但是，我們建議自動(dòng)創(chuàng)建標(biāo)簽火車的方法包含特定 GUI 組件的圖像的數(shù)據(jù)從完整的屏幕截圖和對(duì)應(yīng)的標(biāo)簽中裁剪其特定于域的類型（例如，按鈕或微調(diào)框 Android）使用全自動(dòng)動(dòng)態(tài)程序分析。我們對(duì)自動(dòng)化動(dòng)態(tài)分析的關(guān)鍵見(jiàn)解過(guò)程如下：在自動(dòng)探索軟從大型存儲(chǔ)庫(kù)，平臺(tái)特定框架中挖掘的軟件可以用來(lái)提取描述 GUI 的元數(shù)據(jù)，然后可以將其轉(zhuǎn)換為適合的大標(biāo)簽訓(xùn)練集 CNN。如圖 2- 2.1 所示，此過(guò)程可以通過(guò)挖掘軟件倉(cāng)庫(kù)自動(dòng)提取可執(zhí)行文件。然后進(jìn)行大量有關(guān)自動(dòng)輸入的研究可以使用基于 GUI 的應(yīng)用程序測(cè)試生成通過(guò)模擬用戶自動(dòng)執(zhí)行挖掘的應(yīng)用程序-輸入。例如，如果目標(biāo)是移動(dòng)應(yīng)用，則輸入生成技術(shù)依賴于基于隨機(jī)的策略可以用于此任務(wù)。作為應(yīng)用程序執(zhí)行后，屏幕截圖和與 GUI 相關(guān)的元數(shù)據(jù)可以為每個(gè)觀察到的獨(dú)特屏幕自動(dòng)提取或應(yīng)用布局。其他類似的自動(dòng) GUI 翻錄或爬網(wǎng)方法也可以適用于其他平臺(tái)例如網(wǎng)絡(luò)。可以使用第三方軟件捕獲屏幕截圖或目標(biāo)操作系統(tǒng)隨附的實(shí)用程序。圖形用戶界面可以從各種來(lái)源收集相關(guān)的元數(shù)據(jù)包括可訪問(wèn)性服務(wù)，html DOM 信息-或 UI 框架（例如 uiautomator）。的然后可以使用 GUI 元數(shù)據(jù)和屏幕截圖提取 GUI 組件的子圖像及其標(biāo)記的類型從描述每個(gè)屏幕的相關(guān)元數(shù)據(jù)中解析。結(jié)果數(shù)據(jù)集的基礎(chǔ)質(zhì)量與標(biāo)簽如何很好地描述了 GUI 組件的類型顯示在屏幕上。鑒于許多軟件 UI 框架，可用于挖掘此類數(shù)據(jù)直接從呈現(xiàn)工具中提取信息屏幕上的應(yīng)用程序 GUI 組件，此信息可能非常準(zhǔn)確。但是，有一些從這些框架中收集信息的情況-作品包含輕微的錯(cuò)誤或無(wú)關(guān)的情況。我們討論這些情況和可采取的緩解措施他們?cè)?3.2.4 節(jié)。
3.2.2 ReDraw 實(shí)施-軟件存儲(chǔ)庫(kù)-和自動(dòng)化動(dòng)態(tài)分析
采購(gòu)大量 Android 應(yīng)用來(lái)構(gòu)建我們的我們開(kāi)采的 CNN 的培訓(xùn)，驗(yàn)證和測(cè)試語(yǔ)料庫(kù) Google Play 上的免費(fèi)應(yīng)用程序。為確保代表提取的應(yīng)用的情感性和質(zhì)量，我們提取了截至 2017 年 6 月 Google Play 商店中的所有類別。然后，我們篩選出主要包含游戲，因?yàn)橛螒騼A向于使用非標(biāo)準(zhǔn)類型的 GUI，無(wú)法自動(dòng)提取的組件。這個(gè)離開(kāi)我們共有 39 個(gè)類別。然后，我們使用了 Google PlayAPI 庫(kù)，可從每個(gè)庫(kù)下載前 240 個(gè) APK 類別，不包括一個(gè)以上存在的重復(fù)項(xiàng)類別。這導(dǎo)致了總共 8,878 獨(dú)特的 APK 之后解釋跨類別交叉列出的重復(fù)項(xiàng)。
要從挖出的 APK 中提取信息，我們會(huì)補(bǔ)充了一個(gè)大型動(dòng)態(tài)分析引擎，稱為使用系統(tǒng)自動(dòng)化的執(zhí)行引擎基于我們先前工作的輸入生成方法 CRASHSCOPE 和 MONKEYLAB 至充實(shí)應(yīng)用程序并提取屏幕截圖和與 GUI 相關(guān)的內(nèi)容有關(guān)已訪問(wèn)屏幕的信息。更具體地說(shuō)，我們的系統(tǒng) GUI 探索在以下位置導(dǎo)航目標(biāo)應(yīng)用程序的 GUI 以深度優(yōu)先搜索（DFS）的方式鍛煉可輕敲的內(nèi)容，可長(zhǎng)時(shí)間敲擊且可鍵入（例如，能夠接受文本輸入）組件。在系統(tǒng)的探索中，我們使用 Android 的 uiautomator 框架提取與 GUI 相關(guān)的信息作為描述層次結(jié)構(gòu)的 xml 文件以及給定顯示的組件的各種屬性屏幕。我們使用 Android screencap 實(shí)用程序來(lái)收集屏幕截圖。該 uiautomator XML 文件包含各種顯示的每個(gè) GUI 組件的屬性和屬性在 Android 應(yīng)用程序屏幕上（包括邊界）框（例如，屏幕內(nèi)的精確位置和區(qū)域）和組件類型（例如 EditText，ToggleButton）。這些屬性可為每個(gè) GUI-提供單獨(dú)的子圖像顯示在給定屏幕上的要從中提取的組件相應(yīng)的屏幕截圖并自動(dòng)標(biāo)記為帶有適當(dāng)?shù)念愋汀?/span>
DFS 探索策略的實(shí)施利用狀態(tài)機(jī)模型，其中考慮了狀態(tài)唯一的應(yīng)用程序屏幕，如其活動(dòng)名稱所示并使用以下命令提取顯示的窗口（例如，對(duì)話框）在 ADB 殼 dumpsys 窗口命令?？紤]到超過(guò) 8.8k 個(gè)應(yīng)用中可行的執(zhí)行時(shí)間我們的數(shù)據(jù)集，同時(shí)仍在探索幾個(gè)應(yīng)用程序屏幕，我們將我們的勘探策略限制為每次執(zhí)行 50 次操作應(yīng)用程式。先前的研究表明，大多數(shù)自動(dòng)輸入 Android 的生成方法趨于達(dá)到峰值覆蓋率（例如，約 20％到 40％的語(yǔ)句覆蓋率）經(jīng)過(guò) 5 分鐘的探索。而不同的輸入生成方法往往表現(xiàn)出不同的數(shù)量給定時(shí)間單位的操作數(shù)，我們過(guò)去的工作表明我們的自動(dòng)輸入生成方法可以實(shí)現(xiàn)有競(jìng)爭(zhēng)力的覆蓋率，以及我們的規(guī)定每次 50 次動(dòng)作的舒適時(shí)間超過(guò) 5 分鐘應(yīng)用程式。此外，我們的目標(biāo)是進(jìn)行大規(guī)模分析不是要完全探索每個(gè)應(yīng)用程序，而是確保各種屏幕和 GUI 組件類型。對(duì)于每個(gè)應(yīng)用程序，執(zhí)行引擎提取 uiautomator 前六個(gè)唯一屏幕的文件和屏幕快照對(duì)每個(gè)應(yīng)用程序的屏幕數(shù)量參觀了。如果給定的數(shù)量少于六個(gè)屏幕應(yīng)用程序，然后收集所有屏幕的信息。我們的大型執(zhí)行引擎以并行方式運(yùn)行，中央調(diào)度員向工人分配工作的地方，每個(gè)工作人員都連接到一個(gè)物理 Nexus 7 的地方平板電腦，負(fù)責(zé)協(xié)調(diào)執(zhí)行傳入的工作。在動(dòng)態(tài)分析過(guò)程中，每個(gè)工作包括系統(tǒng)地執(zhí)行來(lái)自我們的數(shù)據(jù)集。當(dāng)工人完成工作后，通知調(diào)度員，調(diào)度員又分配新的工作。此過(guò)程在 5 名工人上并行進(jìn)行，直到所有我們已經(jīng)研究了數(shù)據(jù)集中的應(yīng)用程序。由于廣告在免費(fèi)應(yīng)用程序中很受歡迎，通常是動(dòng)態(tài) WebView 而非本機(jī)組件組成，我們使用 Xposed 來(lái)阻止應(yīng)用中的廣告使其他類型的本機(jī)組件模糊。
3.2.3 2.2 階段-GUI 組件的 CNN 分類
收集了標(biāo)記的訓(xùn)練數(shù)據(jù)集后，我們需要訓(xùn)練一種機(jī)器學(xué)習(xí)方法來(lái)提取顯著特征從 GUI 組件圖像中進(jìn)行分類基于這些提取特征的圖像。去完成我們的方法利用了 CNN 的最新進(jìn)展。的與其他圖像分類相比，CNN 的主要優(yōu)勢(shì)方法是該架構(gòu)允許自動(dòng)執(zhí)行從圖像數(shù)據(jù)中提取抽象特征的逼近非線性關(guān)系的應(yīng)用原理數(shù)據(jù)局部性和端到端可訓(xùn)練的分類建筑。
3.2.4 ReDraw 實(shí)現(xiàn)-CNN 分類器
一旦目標(biāo)實(shí)體模型中的 GUI 組件具有使用模型元數(shù)據(jù)或基于 CV 進(jìn)行檢測(cè)技術(shù)，ReDraw 必須有效地將這些組合陣營(yíng)。為此，ReDraw 實(shí)施了 CNN 將 GUI 組件的目標(biāo)圖像分類為觀察到的 15 種最受歡迎的組件之一在我們的數(shù)據(jù)集中。在本小節(jié)中，我們首先描述數(shù)據(jù)-用于生成培訓(xùn)，驗(yàn)證和測(cè)試數(shù)據(jù)集（示例如圖 4 所示）在描述我們的 CNN 架構(gòu)和培訓(xùn)之前我們采用的程序。
數(shù)據(jù)清理：我們實(shí)施了多種類型的預(yù)備降低噪音的處理和濾波技術(shù)。更多具體來(lái)說(shuō)，我們?cè)谌齻€(gè)階段實(shí)施了過(guò)濾流程不同的粒度級(jí)別：（i）應(yīng)用程序，（ii）屏幕和（iii）GUI 組件級(jí)別。
原型制作過(guò)程的最后任務(wù)是組裝應(yīng)用程序 GUI 代碼，包括三個(gè)階段：（i）建立適當(dāng)?shù)慕M件和容器層次結(jié)構(gòu)，（ii）從目標(biāo)實(shí)體模型推斷出樣式細(xì)節(jié)，（iii）組裝應(yīng)用程序。
3.3.1 推導(dǎo) GUI 層次結(jié)構(gòu)
為了從的分類集合中推斷出現(xiàn)實(shí)的層次結(jié)構(gòu)組件，我們的方法利用了 KNN 技術(shù)（方法 1）用于構(gòu)建 GUI 層次結(jié)構(gòu)。該算法采用表示檢測(cè)到的和分類的 GUI 組件的集合作為單個(gè)級(jí)別樹(shù)（InputNodes）中的節(jié)點(diǎn)作為輸入。然后，對(duì)于我們從自動(dòng)化收集的數(shù)據(jù)集中的每個(gè)屏幕動(dòng)態(tài)分析，Alg。1 次首先提取一組 TargetNodes 的對(duì)應(yīng)于 InputNodes，它們是算法第一次通過(guò)的葉節(jié)點(diǎn)里特姆。接下來(lái)，將 InputNodes 與每個(gè)使用基于以下內(nèi)容的相似性指標(biāo)提取（TargetNodes）屏幕所占據(jù)的屏幕區(qū)域的并集交集（IOU）重疊成分（ALG 的邊界框。1 -line5）。通過(guò)選擇一個(gè)匹配的屏幕 InputNodes 之間的最高 IOU 組合得分最高和 TargetNodes。然后，父容器組件
3.3.2 推斷樣式并組裝目標(biāo)應(yīng)用
為了從模型中推斷出樣式細(xì)節(jié)，我們的方法采用色彩量化（CQ）的 CV 技術(shù)，和顏色直方圖分析（CHA）。對(duì)于 GUI 組件其類型不表示他們正在顯示圖像，我們的方法量化了每個(gè)圖像的顏色值像素并構(gòu)建顏色直方圖。最受歡迎顏色值可用于通知樣式屬性生成代碼時(shí)的組件。例如，對(duì)于顯示文本的組件，最流行的顏色可以是用作背景和第二最普遍的顏色可以用于字體。
3.3.3 ReDraw 實(shí)施-App AssemblyReDraw 使用 KNN 組裝 Android 應(yīng)用程序 GUI 層次結(jié)構(gòu)構(gòu)建方法（請(qǐng)參見(jiàn)第 3.3.1 節(jié)）和基于 CV 的顏色樣式檢測(cè)。輸入到 Alg。1 是來(lái)自 CNN 的一組分類的“葉節(jié)點(diǎn)”組件，以及輸出為 GUI 層次結(jié)構(gòu)。為提供足夠的數(shù)據(jù) KNN 算法，一個(gè)語(yǔ)料庫(kù)，包括來(lái)自從中挖掘的 GUI 層次結(jié)構(gòu)的“清理”屏幕我們構(gòu)建了大規(guī)模的動(dòng)態(tài)分析過(guò)程。這個(gè)語(yǔ)料庫(kù)形成 InputNode 到的數(shù)據(jù)集 TargetNodes 組件在層次結(jié)構(gòu)構(gòu)建期間匹配 tion。KNN 為目標(biāo)生成的 GUI 層次結(jié)構(gòu)然后使用“葉節(jié)點(diǎn)”組件來(lái)推斷風(fēng)格細(xì)節(jié)來(lái)自原始的模型工件。更具體地說(shuō)，每個(gè)組件和容器，我們執(zhí)行 CQ 和 CHA 提取每種成分的主色。對(duì)于有文字元素的組件，我們將光學(xué)使用開(kāi)源 Tesseract 進(jìn)行字符識(shí)別（OCR）在原始屏幕快照庫(kù)中獲取字符串。
4.1 RQ1 結(jié)果：CNN 的有效性
ReDraw 基于 CNN 的 GUI 組件分類器能夠獲得較高的平均精度（91%），并優(yōu)于基線 BOVW 方法的平均精度（65%）。
4.2 RQ2 結(jié)果：層次結(jié)構(gòu)構(gòu)建
ReDraw-Mock Up 能夠生成與真實(shí)層次結(jié)構(gòu)相似的 GUI 層次結(jié)構(gòu)，而不是 REMAUI 或 pix2code。這一信號(hào)，重新繪制的層次結(jié)構(gòu)可以被開(kāi)發(fā)人員使用的低努力。
4.3 RQ3 結(jié)果：視覺(jué)相似度
與目標(biāo)截圖相比，ReDraw 生成的應(yīng)用程序具有很高的視覺(jué)相似性。
4.4 RQ4 結(jié)果：工業(yè)適用性
ReDraw 有望應(yīng)用于工業(yè)設(shè)計(jì)和開(kāi)發(fā)工作流程，特別是在進(jìn)化環(huán)境中。然而，模塑最有可能是必須作出適合具體工作流程和原型工具鏈。
本文由南京大學(xué)軟件學(xué)院 iSE 實(shí)驗(yàn)室 2020 級(jí)碩士研究生張晶翻譯轉(zhuǎn)述。
者：林間有影落
作為設(shè)計(jì)師，一個(gè)老生常談的話題就是還原度檢查。
還原度檢查：也叫還原度驗(yàn)證、設(shè)計(jì)走查、設(shè)計(jì)驗(yàn)證。是保證研發(fā)實(shí)際實(shí)現(xiàn)的效果是否和設(shè)計(jì)稿一致的過(guò)程。
借一位建筑設(shè)計(jì)師寫的話來(lái)說(shuō)，“畫一張效果圖很容易，但項(xiàng)目得以高完成度的還原卻很難?！?如果你的設(shè)計(jì)不是僅僅停留在紙面，那你就需要面臨最終的設(shè)計(jì)還原度問(wèn)題。
在進(jìn)行還原度檢查中，你是否有聽(tīng)到過(guò)這樣的話：
“我這樣實(shí)現(xiàn)也行吧，我覺(jué)得比你設(shè)計(jì)還好點(diǎn)?！?br>“這里還不對(duì)嗎？我已經(jīng)改了好幾遍了……“
“項(xiàng)目時(shí)間太緊了，我們先實(shí)現(xiàn)功能吧。”
“不就幾個(gè)像素嗎？差不多行了?！?br>“我覺(jué)得是一樣的，你行你上？”
……
這些其實(shí)并不是個(gè)例。
在設(shè)計(jì)還原度檢查的過(guò)程中，我們常常會(huì)遇到這樣或那樣的問(wèn)題，令這個(gè)過(guò)程耗費(fèi)精力無(wú)數(shù)，最終收效卻并不大。聽(tīng)聞一位設(shè)計(jì)師說(shuō)他們某個(gè)項(xiàng)目，最終耗費(fèi)了 30 人/天的時(shí)間去做還原度驗(yàn)證。
設(shè)計(jì)的項(xiàng)目還原度如何，是每一位設(shè)計(jì)師成長(zhǎng)的必經(jīng)之路，也是設(shè)計(jì)師能力的一種重要體現(xiàn)。說(shuō)到這里，你可能有點(diǎn)疑問(wèn)，明明是研發(fā)實(shí)現(xiàn)的問(wèn)題，怎么成了能衡量設(shè)計(jì)師能力的一種體現(xiàn)呢？
誠(chéng)然，在同等條件下，優(yōu)秀的研發(fā)工程師能夠憑借自身實(shí)力和豐富經(jīng)驗(yàn)實(shí)現(xiàn)更高程度的設(shè)計(jì)稿還原，同樣的，優(yōu)秀的設(shè)計(jì)師也可以憑借著自身實(shí)力和豐富經(jīng)驗(yàn)，保證自己的設(shè)計(jì)稿具有更高的還原度，這是一個(gè)相互影響的過(guò)程。
所以，本質(zhì)上，設(shè)計(jì)還原度，還是一個(gè)合作問(wèn)題。
而 B 端+AR，其本質(zhì)也是一樣，是建立在設(shè)計(jì)還原度檢查的通用場(chǎng)景上的一個(gè)特殊場(chǎng)景。接下來(lái)的文章，我分五個(gè)部分來(lái)進(jìn)行說(shuō)明。
我認(rèn)為，整個(gè)設(shè)計(jì)還原度檢查可以分為三個(gè)部分：
1. 交互內(nèi)容
交互內(nèi)容緊扣功能，但和測(cè)試不同，主要是以用戶的使用流程來(lái)檢查相應(yīng)功能下的交互邏輯是否完整實(shí)現(xiàn)，反饋和提示是否有遺漏，使用時(shí)的合理性和可用性是否與設(shè)計(jì)初衷一致。
AR 中還應(yīng)多關(guān)注各種交互轉(zhuǎn)換中的相對(duì)參照分類是否正確。
2. 視覺(jué)內(nèi)容
前端頁(yè)面的靜態(tài)效果是否和設(shè)計(jì)稿一致，包括色彩、布局、排版等細(xì)節(jié)，這塊內(nèi)容一直是研發(fā)和設(shè)計(jì)難以達(dá)成一致的重災(zāi)區(qū)。
在 AR 應(yīng)用中，還要包括三維內(nèi)容的大小、材質(zhì)等細(xì)節(jié)。
3. 整體體驗(yàn)
AR 設(shè)計(jì)是虛實(shí)結(jié)合的設(shè)計(jì)，我們實(shí)際設(shè)計(jì)時(shí)雖然只能著眼于虛擬元素，但用戶所體驗(yàn)到的是結(jié)合真實(shí)環(huán)境的虛實(shí)結(jié)合界面，所以特定環(huán)境下的整體體驗(yàn)檢查也是必要的。
我做的項(xiàng)目由于一般是一整套系統(tǒng)，通常存在多個(gè)終端數(shù)據(jù)聯(lián)動(dòng)，比如 web 平臺(tái)和 AR 應(yīng)用的聯(lián)動(dòng)，那它們之間的交互是否符合設(shè)計(jì)需求，是否有遺漏和錯(cuò)誤，也屬于整體體驗(yàn)的檢查內(nèi)容。
為了效率最大化，我推薦是產(chǎn)品提測(cè)后再進(jìn)行設(shè)計(jì)還原度檢查，如有條件，最好在測(cè)試團(tuán)隊(duì)完成第一輪功能測(cè)試后再介入。
原因有三個(gè)：
這個(gè)其實(shí)沒(méi)有非常硬性的標(biāo)準(zhǔn)，不同公司、不同項(xiàng)目、不同設(shè)計(jì)師都可能不一樣。有的認(rèn)為 95%以上還原度才能達(dá)到標(biāo)準(zhǔn)，有的認(rèn)為 90%甚至 80%就算達(dá)到標(biāo)準(zhǔn)。
一般來(lái)說(shuō)，還原度標(biāo)準(zhǔn)：C 端＞B 端＞后臺(tái)。
而 AR 應(yīng)用的還原度即使在 B 端，也應(yīng)該大于通常的 B 端應(yīng)用，因?yàn)樵诋?dāng)前技術(shù)水平下，許多 AR 應(yīng)用首要滿足的是展示目的，交互和視覺(jué)的最終效果是非常關(guān)鍵的。
在設(shè)計(jì)還原度檢查中，我們常常遇到這樣或那樣的問(wèn)題，歸納起來(lái)，有下面幾點(diǎn)。
1. 設(shè)計(jì)輸出有缺失
輸出的缺失主要體現(xiàn)在兩個(gè)方面，是一個(gè)是內(nèi)容本身的缺失，一個(gè)是附加說(shuō)明的缺失。
內(nèi)容本身的缺失，指設(shè)計(jì)輸出里缺少某些細(xì)節(jié)交互的說(shuō)明，界面不同狀態(tài)的展示，不同狀態(tài)的按鈕或圖標(biāo)切圖，動(dòng)效說(shuō)明等。這個(gè)可以靠設(shè)計(jì)師的細(xì)心和對(duì)設(shè)計(jì)的自查來(lái)避免。
附加說(shuō)明的缺失，主要是標(biāo)注的問(wèn)題。隨著行業(yè)的發(fā)展，現(xiàn)在已經(jīng)有很多自動(dòng)標(biāo)注和切圖工具了，但正因?yàn)槿绱?，反而容易因?yàn)閼?，缺失很多需要手?dòng)補(bǔ)充的信息標(biāo)注。
2. 設(shè)計(jì)處理不規(guī)范
設(shè)計(jì)處理不規(guī)范，主要是指自由發(fā)揮，完全不考慮研發(fā)的實(shí)現(xiàn)難度和整個(gè)項(xiàng)目的目標(biāo)。有些設(shè)計(jì)稿乍一看質(zhì)量上乘，如果作為停留在紙面上的作品甚至相當(dāng)優(yōu)秀，但是 UX 設(shè)計(jì)畢竟不是純藝術(shù)，而是用來(lái)解決問(wèn)題的方案，需要掌握平衡。
3. 研發(fā)沒(méi)有理解設(shè)計(jì)的邏輯
由于每個(gè)人的角度不一樣，即使輸出的設(shè)計(jì)文檔在設(shè)計(jì)師眼里看起來(lái)再詳盡，在研發(fā)人員的理解下也可能完全不一樣。
4. 研發(fā)和設(shè)計(jì)師優(yōu)先級(jí)認(rèn)知不一致
如果說(shuō)沒(méi)有理解帶來(lái)的現(xiàn)象是研發(fā)工程師認(rèn)真的做了，但沒(méi)有做對(duì)。那這一點(diǎn)帶來(lái)的現(xiàn)象就是他明明可以做好，卻總是不好好做。也就是我們常常吐槽的研發(fā)人員“不配合”。這里的不配合，其實(shí)就是兩方在優(yōu)先級(jí)認(rèn)知上不一致，你提出的還原度問(wèn)題，他覺(jué)得沒(méi)什么關(guān)系。既然無(wú)關(guān)重要，何必浪費(fèi)精力？畢竟，哪個(gè)研發(fā)工程師身上不背幾個(gè) bug。
5. 還原度檢查不完整
該檢查的內(nèi)容沒(méi)有檢查到。原因可能有自己的，也可能有外部的。比如在 AR 設(shè)計(jì)中，我們經(jīng)常會(huì)遇到很難完美復(fù)現(xiàn) AR 應(yīng)用真實(shí)環(huán)境的問(wèn)題。又比如在某個(gè) To B 項(xiàng)目中，由于 web 平臺(tái)的聯(lián)動(dòng)終端是機(jī)器人，我很難在某些與機(jī)器人強(qiáng)聯(lián)動(dòng)的界面上進(jìn)行整體的體驗(yàn)檢查。
為了有效保證還原度，我們可以做的事情有很多，我總結(jié)了 7 點(diǎn)：
第一、有規(guī)范。第二、符合規(guī)范。
有規(guī)范，指整個(gè)設(shè)計(jì)有自己的規(guī)范定義，同類的元素使用相同的規(guī)范來(lái)呈現(xiàn)，具有一致性的間距、大小、色值設(shè)定等。比如同樣表示“可用”/”不可用“的標(biāo)簽，在所有的界面，都應(yīng)該是一致的視覺(jué)元素，包括樣式、顏色、文字、間距、大小等。
符合規(guī)范，指符合研發(fā)語(yǔ)言的基本規(guī)范定義，比如可行情況下盡量使用該語(yǔ)言下的常用標(biāo)準(zhǔn)框架，定義最小單元網(wǎng)格（一般 4px，6px，8px 等），切圖或間距等盡量以此為倍數(shù)；不要出現(xiàn)奇數(shù)等。這些都可以提高研發(fā)的效率。
設(shè)計(jì)規(guī)范的好壞，直接影響到后面的設(shè)計(jì)宣講和設(shè)計(jì)輸出的好壞。
2. 了解開(kāi)發(fā)思維
了解開(kāi)發(fā)的思維，在做設(shè)計(jì)稿的時(shí)候就可以換個(gè)角度看問(wèn)題，足以讓自己在后面的還原度檢查中更省心省事。
首先是最簡(jiǎn)單的盒子模型。
盒子模型是 CSS 語(yǔ)言中的術(shù)語(yǔ)， 又稱框模型 (Box Model) ，所有 HTML 元素可以看作盒子，是用來(lái)設(shè)計(jì)和布局時(shí)使用。CSS 盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的 HTML 元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。 盒模型允許我們?cè)谄渌睾椭車剡吙蛑g的空間放置元素。
圖片來(lái)自網(wǎng)絡(luò)
然后是 AR 設(shè)計(jì)中常用的 U3D 工具。這款工具可以使用多種語(yǔ)言來(lái)開(kāi)發(fā)，它的布局可以分為三種方式：固定像素、根據(jù)屏幕大小進(jìn)行縮放、固定物理距離。
固定像素，忽略屏幕的大小根據(jù) UI 元素的實(shí)際像素顯示 ，像素大小始終不變，即一個(gè) 100×100 的圖片在任何的分辨率下都占用 100×100 的像素。一般 PC 上會(huì)使用這種方式，因?yàn)?PC 端分辨率差異并不大。
根據(jù)屏幕大小進(jìn)行縮放，是研發(fā)最常用的一種，會(huì)根據(jù)設(shè)備真實(shí)分辨率與設(shè)計(jì)分辨率來(lái)對(duì) Canvas 進(jìn)行縮放。有三種模式：
固定物理距離，忽略屏幕大小和分辨率根據(jù) UI 的實(shí)際物理大小來(lái)顯示。
不管是和設(shè)計(jì)評(píng)審一起還是私下對(duì)接研發(fā)，都要對(duì)自己的設(shè)計(jì)邏輯和輸出內(nèi)容做講解，講解的內(nèi)容包括：通用的設(shè)計(jì)規(guī)范、資源圖的命名規(guī)則、特別事項(xiàng)的注意等等。
講解的目的就是讓他理解你的設(shè)計(jì)邏輯。
通過(guò)講解，研發(fā)人員明白這些設(shè)計(jì)的內(nèi)在意義，知道為什么要這樣做，才能夠幫你把設(shè)計(jì)實(shí)現(xiàn)得更好。同樣，宣講設(shè)計(jì)邏輯的時(shí)候一定要要求具體的研發(fā)工程師到場(chǎng)，這會(huì)提高后面一系列工作的效率。
想一想，當(dāng)你把自己辛辛苦苦，連幾個(gè)像素一點(diǎn)點(diǎn)色差都要糾結(jié)半天作品托付給另外一個(gè)人，不該囑咐囑咐幾句：“親～這非常重要，值得你好好對(duì)待?！?/span>
完整的設(shè)計(jì)輸出，應(yīng)該包含承接產(chǎn)品需求文檔的交互說(shuō)明、視覺(jué)說(shuō)明（含標(biāo)注）和相關(guān)資源。
交互說(shuō)明，應(yīng)該寫明可點(diǎn)擊部分跳轉(zhuǎn)的界面，不同狀態(tài)下的中間過(guò)程，特殊情況下的界面處理等等。
視覺(jué)說(shuō)明，應(yīng)該包含對(duì)規(guī)范的說(shuō)明和幫助研發(fā)實(shí)現(xiàn)界面的標(biāo)注。
（1）規(guī)范的說(shuō)明，需要設(shè)計(jì)師梳理通用的內(nèi)容，讓工程師對(duì)項(xiàng)目的前端界面樣式有個(gè)整體了解，快速查找和定位到具體頁(yè)面的基礎(chǔ)樣式（如：標(biāo)準(zhǔn)色、標(biāo)準(zhǔn)字、按鈕等），也可以讓研發(fā)工程師清楚的知道哪些內(nèi)容我只要兢兢業(yè)業(yè)的調(diào)一遍，就可以復(fù)制到其他地方了。
AR 應(yīng)用主要使用 U3D 研發(fā)，不像普通的屏幕 UI 有諸如藍(lán)湖、摹客、marketch 這些標(biāo)注工具自動(dòng)翻譯，我所遇到的工程師大多傾向于把設(shè)計(jì)師的效果圖放到正視圖下的狀態(tài)，再用切圖的元素一個(gè)個(gè)界面拼出來(lái)，如果研發(fā)能知道有些界面通用一套“拼圖法則”，那會(huì)省事很多。
（2）標(biāo)注部分，除了交給自動(dòng)標(biāo)注軟件標(biāo)注的部分，還應(yīng)該將無(wú)法自動(dòng)標(biāo)注出來(lái)的內(nèi)容通過(guò)手動(dòng)標(biāo)注補(bǔ)齊，這些內(nèi)容包括但不限于：
圖片來(lái)源： https://juejin.cn/post/6844903712331137037 ??微信小程序規(guī)范V1.0
比如：絕對(duì)位置和相對(duì)位置的注明。
上面這張圖，A 類標(biāo)注就可以用自動(dòng)標(biāo)注精確到像素完成，而 B 的標(biāo)注因?yàn)椴煌聊淮笮〔煌?，其?shí)只要保證兩個(gè) B 相等就可以，那這里就需要手動(dòng)注明了。
在 AR 應(yīng)用中，由于涉及到三維空間，相對(duì)參考物尤為重要，首先要保證研發(fā)知曉當(dāng)前界面里每個(gè)元素的參照對(duì)象（關(guān)于 AR 界面按參照物的分類），然后，再按照百分比來(lái)進(jìn)行標(biāo)注。
當(dāng)然，也可以更為精確的使用當(dāng)前 Z 軸下的物理尺寸來(lái)進(jìn)行標(biāo)注，但需要一些轉(zhuǎn)換會(huì)比較難以把握。標(biāo)注的這個(gè)部分，是和了解開(kāi)發(fā)思維相輔相成的，當(dāng)你了解開(kāi)發(fā)思維后，就能夠標(biāo)注出更符合研發(fā)人員要求的說(shuō)明。
相關(guān)資源，是指研發(fā)所需要的視覺(jué)元素資源。相關(guān)資源按照一定的規(guī)范命名，方便研發(fā)人員查找使用。
值得注意的是，在 AR 應(yīng)用的設(shè)計(jì)中，視覺(jué)不僅僅指二維視覺(jué)（GUI）的說(shuō)明和相關(guān)資源，還應(yīng)該包括三維視覺(jué)內(nèi)容的必要說(shuō)明和相關(guān)資源。為了更好的模擬實(shí)際研發(fā)后的效果，盡量還原用戶可見(jiàn)界面，推薦在視覺(jué)設(shè)計(jì)輸出時(shí)添加環(huán)境照片。
設(shè)計(jì)輸出是設(shè)計(jì)體現(xiàn)的書(shū)面形式，是整個(gè)設(shè)計(jì)交付非常重要的一環(huán)。好的設(shè)計(jì)輸出讓你交付研發(fā)時(shí)可以放心大膽的說(shuō)一句：“親～你還有不懂的可以看文檔哦，別有事沒(méi)事都來(lái)煩我如果有問(wèn)題可以再找我?！?/span>
前面我們說(shuō)過(guò)，還原度驗(yàn)證的標(biāo)準(zhǔn)一般 C 端大于 B 端大于內(nèi)部后臺(tái)，AR 應(yīng)用由于其特殊性，即使交付 B 端的 AR 應(yīng)用也一般要高于普通 B 端的還原驗(yàn)收標(biāo)準(zhǔn)，在此基礎(chǔ)上，可以根據(jù)項(xiàng)目公司業(yè)務(wù)和項(xiàng)目實(shí)際情況來(lái)確定一個(gè)基準(zhǔn)。
分清輕重緩急，避免體驗(yàn)問(wèn)題被擱置，或者好改的體驗(yàn)問(wèn)題被改了，而比較重要的體驗(yàn)問(wèn)題，反而因?yàn)椴缓酶姆炊z留下來(lái)。
圖片來(lái)源： https://www.shangyexinzhi.com/article/4211627.html
現(xiàn)在市面上已經(jīng)有一些工具幫助設(shè)計(jì)師進(jìn)行還原度檢查，這里簡(jiǎn)單的舉例 2 個(gè)。
Css Peeper： https://csspeeper.com/
它比瀏覽器自帶的 Css 代碼檢查更適合設(shè)計(jì)師，不僅可以看到元素的常規(guī)屬性，比如顏色、背景、間距；還可以看到元素的盒子模型，可以看到元素的 Padding、Margin…
Copiexl： https://copixel.bytedance.com/
字節(jié)出品的一款走查插件。
通過(guò)在網(wǎng)頁(yè)上放置設(shè)計(jì)稿圖片檢查設(shè)計(jì)稿與開(kāi)發(fā)結(jié)果是否完全重疊來(lái)判斷開(kāi)發(fā)的還原精度，精確到像素實(shí)現(xiàn)高質(zhì)量的項(xiàng)目還原效果。
在項(xiàng)目發(fā)布之前，很多情況下體驗(yàn)問(wèn)題可能得不到全部解決，這個(gè)時(shí)候，總結(jié)現(xiàn)有的設(shè)計(jì)還原程度，明晰重點(diǎn)問(wèn)題及可能產(chǎn)生的體驗(yàn)風(fēng)險(xiǎn)，能夠幫助整個(gè)項(xiàng)目快速了解現(xiàn)狀，決策任務(wù)優(yōu)先級(jí)。對(duì)于其他遺留的問(wèn)題，也能夠有機(jī)會(huì)進(jìn)入下一輪迭代中。
· · ·
還原度的本質(zhì)是一個(gè)合作問(wèn)題，只有設(shè)計(jì)質(zhì)量硬，配套產(chǎn)品全，在與研發(fā)合作的過(guò)程中活用我們的用戶思維，才能讓我們的設(shè)計(jì)作品得到更高的還原度。
注：本文來(lái)源于網(wǎng)絡(luò)，如有侵權(quán)請(qǐng)及時(shí)聯(lián)系我們。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
