A. 視覺設計師是怎樣讓前端工程師 100% 實現設計效果的
知乎問題：視覺設計師是怎樣讓前端工程師 100% 實現設計效果的？
問題補充：發現自己設計的app和網頁，在前端顯示總是和設計效果偏差很遠。和工程師溝通卻說不可能100%呈現的，但實際上80%都沒達到。想了解下，各位設計界的前輩是怎麼做的，才能讓前端顯示盡量和設計效果一致。
下面是知乎用戶@酸梅干超人 的回答，小編覺得很多價值，感興趣的讀者可以看一看，領悟一下。
首先，作為一個設計師，尤其是UI設計師，請跟我一起大聲念：必須掌握前端切圖流程！！
這可能意味著你得學會HTML+CSS，或者要長時間和IOS或者安卓開發人員交流他們是怎麼把圖片和文字排進屏幕內的。別老是抱怨你是設計怎麼能去學碼農的東西，設計人員對這些看似高深的源碼有本能的畏懼和厭惡。無論你所在的公司在項目人員配置上如何貼心到位，但如果你自己沒有掌握這些知識點，就不要妄想最後實現環節上能順利收尾，因為你從出發點開始和程序員的認知就不對稱，這些不對稱是矛盾和偏差的根源。
讓我們來舉舉例子：
例如你設計了這么個樣式，傾斜、層疊，你有沒有在設計的過程中考慮過這么設計的後果（國內外高能前端請不要加入此列）？你在當前寬度畫布中設計效果似乎還不錯，這註定該是個填滿瀏覽器顯示區域的設計，但是放大後呢？1920寬下怎麼辦，難道得是這個模樣？？
因為在水平線上無法直接延伸平鋪的設計，在前端部分你讓開發人員怎麼幫你填補這兩個區域的空白，你從設計初就不知道在對應設計類型下應該創建的畫布大小（滿屏響應式設計要准備好大小兩種或多種方案），那進入切圖環節我已經能腦補出你和開發人員是怎麼撕逼的盛況了。
再者，假如我們填滿這個設計稿（咳咳，比較粗糙的填上）：
這些沒有內容被紅線框出的背景區域最後怎麼呈現出來？這裡面幾個主要的傾斜圖形上面還疊加了對應內容、圖片、文字，還有前後關系，別指望前端設計人員能輕松實現，如果你用一張背景圖填充，那這張背景圖的大小控製得住？載入過程要多久？導出WEB用途格式圖片是選擇「連續」還是「優化」？
再類似這樣的案例：
現在很多小年輕們迷戀追波上大神們做的牛逼的動效，於是設計的時候光靜態稿件不甘心，也來做個AE特效玩玩，壓根沒有考慮IOS或者安卓在實現這樣的效果時，需要哪些運行機制，有沒有這樣的控制項支持，會不會不流暢等等！自己用了一整晚的時間折騰這么酷炫高大上的動畫，開發這些土鱉居然告訴我不能實現恩？？撕逼ING.........
再普遍點的，是不是每次前端開發完你發現絕大多數元素和字體都不對，沒有對齊，大小加粗等細節沒有注意，但是開發拿設計稿就是沒辦法100%實現的借口的來搪塞你？？
下面就來講重點~~~
==========重點==========
1、設計前請審核原型
在原型步驟就想好對應的圖層結構，交互特效，並和開發人員做好交流，是否可以實現，功能的評估一定要細致，否則會浪費大量的人力成本。還有原型是挺嚴肅一玩意兒，但是大多數團隊或者設計都沒有認識到它們的價值，在這里不展開原型的細節了，這還可以再寫一個長評，你們懂意思就好拉，畫在紙上的手稿也比沒有強。
下面放我自己平時做的原型：
2、熟悉設計環境規范
無論是WEB還是IOS、安卓、WP等等，都有對應的設計規範文檔，我下面會帖出來。如果連最基礎的設計規范都不知道就開始做設計，那麼你要自己承擔項目拖延和被整個開發組人員問責的後果。在你動手前，請好好的做完功課，並且在每次環境大升級時跟進關注（例如新的iPhone6、6+發布的尺寸變更等）。
前人已經栽好了樹，你需要做的就是在既定框架內完成設計即可。你要牢記自己的設計是基於相應的運行環境的，沒有足夠的能力前，不要有認為這套體系下的設計都很「土」，你是一個要成「大神」的男人，打破限制和規范是你的嗜好和品位。如有以上想法，請對著鏡子里的自己說：Navie！
例如WEB設計下，12PX以下的中文字體無法被正常顯示，文本只支持本地客戶端已有字型檔，IOS的TABBAR、TOPBAR等高度是不能被隨意變更任意增減層級等等。這樣的稿子如果被交付，並沒有強有力的邏輯說服別人，只會讓你的團隊感受到你的不專業，增加矛盾隱患。
B. web前端如何最大化實現設計稿還原
多和設計師溝通，太個性化的東西協商下，免得無法完全地還原設計稿！
C. 如何保證抄板還原的PCB文件100%正確
為保證PCB抄板功能和性能的質量，需要在PCB抄板後做各種測試。否則沒法保障PCB抄板後的質量，只有經過各種測試才能得以保障。
一、電性測試
在電子產品的生產過程中，因瑕疵而造成成本的損失，在各個階段都有不同的程度，越早發現則補救的成本越低。電性測試對於PCB業者而言，為的就是及早發現線路功能缺陷的板子。測試條件及測試方法主要包括測試資料來源與格式、測試條件，如電壓、電流、絕緣及連通性、設備製作方式與選點、測試章、修補規格。
在PCB的製造過程中，必須作測試的三個階段是內層蝕刻後、外層線路蝕刻後、成品。
二、電測的方法與設備
電性測試的方法有：專用型、泛用型、飛針型、非接觸電子束、導電布、電容式及刷測，其中最常使用的設備有三種，分別是專用測試機、泛用測試機及飛針測試機。為了更了解各種設備的功能，以下將分別比較三種主要設備的特性。
1、專用型測試
專用型的測試之所以為專用型，主要是因為其所使用的治具，僅適用於一種料號，不同料號的板子就無法測試，而且無法回收使用。
2、泛用型測試
泛用型測試的基本原理是PCB線路的版面是依據格子來設計，孔位置以一G10的基材作Mask，只有在孔的位置探針才能穿過Mask進行電測，因此治具的製作簡易而快速，而且探針可重復使用。泛用型測試點數通常在1萬點以上，測試密度在或是的測試稱為on-grid測試，屬於off-grid測試，其治具就必須要特殊設計，通常泛用型測試的測試密度可達 QFP。
3、飛針測試
飛針測試的原理很簡單，僅僅需要兩根探針作x、y、z的移動來逐一測試各線路的兩個端點，因此不需要另外製作昂貴的治具。但是由於是端點測試，因此測速極慢。
三、技術比較
飛針測試是目前最適合使用於小量產及樣品的電性測試設備，但是若要運用於中大量產時，則由於測速慢以及設備價格昂貴，將會使得測試成本大幅提高，而泛用型及專用型無論是用於何種層級的板子，只要產量達到一定的數量，測試成本均可達到規模經濟的標准，而且約只佔售價的2~4%。但是隨著電子產品的變化速度加快，使得單一電路設計版本的產品生命周期變短，。目前尚在積極改良的E-Beam、CEM或電漿放電技術，若能在測試效率上提升，將是電性測試上良好及可行的解決方案。
D. 前端入門篇（一）：如何把設計稿還原成真實網頁
前端工程師，根據設計稿寫代碼啊。html+CSS +JS +VUE+JQ+Bootstarp...
E. Android如何做到UI還原100%
要做到百分之百，這個基本上是不太可能的。除非UI效果設計得不復雜，能做到完全還原。但如果UI設計得比較復雜的話，就難以保證了。畢竟程序不是死的，是要運行的，實際運行效果在不同的機型和系統版本上可能會有差異。
有個說法，UI的設計圖按100%計，前端寫完頁面後可能還原度在90%~95%左右，等到程序整體完成後還原度可能90%都不到了。理想和現實終歸是有差距的，雖然這是個笑話，但很多時候的確如此。
F. 如何讓設計效果高還原度落地
一個產品完整的設計流程中，交互與視覺定稿後，後續視覺規范的輸出、UI控制項的整理與標注、開發的高還原度，都會影響產品最終的用戶體驗。作為視覺設計師，在視覺設計的最後階段則是繁瑣且像素級別的精雕細琢，設計講究的不僅是美感還有嚴謹態度與邏輯。
視覺設計師如何讓設計效果高還原度落地?
最近半年在大司(華為)參與一個重點項目，且將會上線到全球各個局點(本司專稱，指某個國家)中，涉及多端多屏協同問題。臨時組成的設計作戰團隊，人員投入少、時間緊迫、任務量大高強度的狀態下摸索前行。為時五個月過去了，項目推進良好Phone端ios與Android也到測試階段，「大視頻」端的開發工作也即將開始。五個月的時間，與優秀的同事一起協力合作，參與Phone端「大視頻」端的視覺與多端規范輸出。這里分享一下這幾個月的累積與沉澱--視覺設計師, 如何讓設計效果保持高還原度的開發落地?給用戶呈現一個設計精緻與體驗良好的產品?
在一個產品完整的設計流程中，交互與視覺定稿後，後續視覺規范的輸出、UI控制項的整理與標注、開發的高還原度，都會影響產品最終的用戶體驗。作為視覺設計師，在視覺設計的最後階段則是繁瑣且像素級別的精雕細琢，開發出來的精美頁面需要視覺設計師做到以下幾點。
一、視覺與交互之間應銜接無縫，即時刷新視覺頁面
一般產品設計流程包括不同的階段，不同的階段其涉及的范疇內容不一樣，作為設計師面對所有步驟不能一蹴而就，而是按部就班，計劃行事。
前期准備階段：確定設計需求的目標，競品分析，用戶研究，市場評估等;
設計需求分析階段：設計需求的理清，業務邏輯的推敲，產品的架構的搭建;
設計執行階段：交互設計原型的輸出，視覺設計風格與方案確定，開發落實與測試上線，這構成一個不斷迭代刷新的流程;
在以上階段中，業務需求的變更與澄清，交互的迭代，視覺的刷新，是設計過程中最繁瑣的階段。設計啟動前了解多端的適配情況(解析度/屏幕精度)，綜合考慮優先出什麼解析度;接著視覺設計師需面對龐大的頁面工作量，且常會遇到與交互原型不一致的問題，需及時反饋並拉通討論。這就需遵循一個清晰可見的迭代流程，對視覺設計而言，需求的變更與澄清-交互的迭代-視覺的刷新-設計的迭代構成的是一個閉環無縫的路線，只有這樣才能為開發的啟動，打下扎實的根基。
當然作為視覺設計師，設計過程中主動出ABC…方案而不是只拿出一個唯一的方案，只有將想法用畫面來表達，才是夠合格的設計師，特別是視覺設計師，好處可以鍛煉自己的設計表達力，方便評審定稿，避免反復修改被人牽著走。
二、適當時，為開發開啟更多的話語權，避免更多的無用功
視覺規范、視覺標注、視覺控制項庫的整理與輸出目的只有一個：那就是指導開發，讓設計100%還原落地;回到項目中，對於設計團隊與開發團隊通常會體現以下兩種情況出現：
開發團隊對項目有豐富經驗，設計團隊對此項目經驗少-開發話語權大於視覺
設計團隊擁有多次項目經驗，並有一定的設計沉澱累積-設計話語權大於開發
從視覺設計而言，如果是設計團隊擁有豐富的經驗這是最好的，用經驗累積設計沉澱與創造性指導項目，話語權大，反之亦然。
在這里結合最近參與的項目，情況為第一種來進行思考;交互視覺設計過程與規范輸出中，讓開發提供更多正確的方向引導，借鑒開發團隊以往的寶貴經驗，如：設計文檔的共享與即時性、設計規范的專業性，開發認同的設計規范去指導開發、設計相關問題單的及時跟蹤與解決、設計需求變更流程(變更流程包括：變更需求提出人-交互-視覺-開發-產品經理(SE or PM)敲定-執行變更-關閉問題單-變更完成)等，都能有效指導開發，提高產品開發落地的高還原性。
三、用80%場景的視覺設計＋視覺控制項規范＋切圖＋標注＋宣講來指導開發
1. 視覺設計的場景
由交互提供具體場景的典型頁面，視覺稿進行輸出，多次迭代評審敲定後，再由開發提出缺失場景的視覺設計，視覺進行場景補充;
2. 視覺UI控制項規范的輸出
必須是經過多次評審與迭代的最終視覺稿;但通常情況下，為了趕進度視覺設計與規范是同步進行，這導致規范反復修改的問題。
根據項目經驗是，在視覺迭代中期時，先輸出基礎控制項元素規范，包括(顏色/文字/圖標/蒙板/投影/按鈕/輸入框/或個別控制項)約占控制項規范30%，與開發進行第一次規范評審，確定規范輸出的正確性與專業性。
讓開發選取所有視覺頁面中需要標注的UI控制項，因為開發選擇的UI控制項也為通用樣式，開發代碼寫成UI控制項庫(可以對應視覺的控制項列表)並由其它分模塊統一調用;且所有UI控制項必須基於最終視覺效果進行控制項抽取與迭代輸出。最後，layout用文檔(pdf)的方式總結，避免單獨模塊單獨頁面傳遞，更能將規則一目瞭然;規范是一個龐大而繁瑣，極需耐心的工作;過程中注重每一個細節的精準與合理性。
3. 切圖與整理
切出所有視覺頁面中涉及到的圖標與輔助圖形;圖標大小如：24px/ 32px/48px/72px/128px等，根據圖標具體場景中的大小、顏色、狀態來切。換句話說，每一個圖標都有它對應的具體場景，特定的尺寸、顏色和狀態;記得曾與開發gg對規范與切圖的時候，他說：頁面的圖標切圖，需要的是一個具體的拿來就用的，我們不會去畫一個圖標或去特定寫一個圖標的顏色。
4. 標注
視覺頁面的標注基於UI控制項規范的基礎上進行，拋棄以往每個頁面細無巨細的具體尺寸/色值/大小的標注。其實每一個視覺頁面皆由不同的UI控制項組成，在頁面中將對應控制項用UI控制項規范中的編號來標注，開發gg拿著視覺頁面標注去敲寫代碼時，再在UI控制項規範文檔中尋找相對應的控制項規范細節;這樣，視覺設計師避免在視覺頁面中做那密密麻麻的尺寸標注，而開發gg拿到標注清爽的視覺頁面也不會產生視覺疲勞。
5. 規范宣講
以上4步完成後項目開發啟動前，用視覺規范對開發做統一的宣講，避免遺漏造成規則傳達不一致;這樣，還設計原度還是問題么?(後續會有一篇文章專門分享如何做設計規范與標注。)
四、與開發近距離接觸，面對面解決問題
最後一個方法是與開發來個親密接觸，即如果有條件允許的話，請與開發坐一起;遇到問題及時面對面澄清、拉通指導、達成共識、修改、敲定、解決。
1. 設計規范做得再完善，開發問題依然存在
試想一下，如果不和開發坐在一起，即使開發面對再完善的設計規范，基於開發本身對設計美感的欠缺，開發過程多多少少都會產生理解偏差。開發過程每遇到一個細節問題，開發gg都得拉著視覺問：這個按鈕上的左右箭頭是無限循環嗎?圖標缺少了一個狀態，那個狀態是什麼等;發個信息問拉會或者電話討論，有時候還解釋不清楚，效率低且事倍功半。
2. 視覺設計師直接進組到開發團隊中
結合當前項目的做法是視覺設計師直接進駐到開發團隊中，與開發團隊坐在一起，舉個例子此項目視覺在深圳，開發在異省南京或是異國，視覺也出差飛過去長期進駐，遇到問題面對面商議解決;大大提高了開發的進度與也節約了時間，視覺還原度還是問題么?當然，如果設計與開發本來就附近辦公，則不需無休止的出差，項目成本節省不少。
設計過程還是和開發gg們來一個「親密接觸」吧，永遠不要把開發拒之門外;覺得交互與視覺完成後則就萬事大吉。設計講究的不僅是設計美感還有嚴謹的態度合理的邏輯，要想一個產品始終保持是那個細節精緻，創意精彩，且用戶體驗好;需要的是交互-視覺-開發三者之間是無縫合作，各個環節的周全考慮。
G. UI設計師怎樣讓前端100%實現設計效果
這個問題很難為UI設計師，怎樣實現完全取決於你們之間的溝通配合，所謂搭檔就是這么產生的。但是作為設計師有些工作還是不得不做的，因為前端或許並不清楚，你所描述的效果，在呈現上和你保持一致性，所以設計師至少還得做以下工作：
具有參考性的頁面或者產品
你至少得把一些觸發效果前，和觸發後的頁面分別製作出來，讓前端不至於自己去猜想。
在自作之前，你如果不清楚這種效果對方是否有能力實現，最好先溝通後再做圖，否則會進退兩難。
H. 前輩們 剛剛自學前端老師給了我一個圖叫我百分百還原改怎麼做
這個沒有用到圖的地方不需要切圖，你用ps打開這個設計稿，然後測量這個寬度啊，高度了，邊距啊，三角形的大小啊，等等，然後進行布局和css樣式的修飾。把這個做出來就行了，像素最好不要有差別，但是一般可以允許1到2像素的誤差。最好還是百分百還原，你現在剛開始學習主要是讓你掌握你說的基礎樣式 選擇器 寬高 邊框 外邊距 內邊距 貼圖之類的知識點。所以你就把能用的盡量都用到就可以了。