UI設計中關於設計規範、切圖和尺寸的幾點疑問？

01-29

1、請問UI設計中切圖怎麼切呢，想了解的是原理，並不是步驟；
2、如何用一套圖切出適配不同解析度下的png呢；
3、實際應用中做出設計後，到底是怎麼換算的呢；
3、還有px、dp、sp、ppi以及設備尺寸之間的關係，UI設計過程中到底選用何種單位來進行設計呢，有的說用px，有的說要用dp，很糾結，求科普，想徹徹底底的搞明白

切圖是什麼

簡單說來，切圖就是圖片。你把這些圖片給工程師，工程師再把圖片放到程序里，程序把圖片顯示出來。

為什麼需要切圖

因為圖片里的東西，開發沒辦法用代碼實現，所以需要切圖。

想像你要建一棟房子，請了一些建築師傅。你給了他兩樣東西。

圖紙：關於尺寸比例的。比如牆有多高，多厚，每個房間長寬是多少。

效果圖：用來告訴師傅你要的是什麼樣的，理想效果和建出來有什麼差別。

這些東西，也就是UI設計里的標註和視覺稿。

等師傅開工後，他告訴你，你需要買以下東西給他。

家用電器：電視、洗衣機、吊燈等。

基本建材：瓷磚，木地板、防盜門等。還要附帶它們的尺寸。

因為這些東西他們沒辦法徒手加鎚子、刷子和電鑽等做出來。

這些東西，也就是UI設計里的切圖。

怎麼做切圖

切圖的步驟就好像師傅問你，「你這地板打算怎麼鋪？」

這時，你就會給他一個圖案。「師傅，鋪成這樣樣子就行。」

「那你要告訴我這地板的尺寸長寬，跟每塊磚的尺寸。」他邊說，邊表示會拼出這樣的形狀出來給你。

圖案=視覺圖，地板=切圖，磚=像素

在早年，因為小的磚很難做出來，一做小，尺寸就有誤差，所以只有一種磚的尺寸。所以一般你只要告訴這地板長寬有多少塊磚就行了。就相當於PC時代，工程師只要知道圖片多少像素就行。

後來，工藝提升了，磚可以越做越小。甚至可以做到你遠遠看地板，根本分不清磚的邊界。這就是，像素越來越小，屏幕（地板）變成了Retina屏。

但尺寸都不是整數，交代起來特別難受。比如什麼3.1418614這種無循環小數。折讓大家很煩惱。

後來，大家發現有一個規律，一平方米中，磚的個數總是整數。所以把每平方磚的個數叫做單位密度。以後你跟師傅，就只要報密度和地板尺寸就行了。比如10平方，100密度之類的。師傅就會算出來，需要1000塊磚。

單位密度=PPI

但師傅慢慢發現，大家經常住三房，而且很喜歡地板都保持同一大小，只是磚不同。所以每次報密度還是太麻煩。

因此市面上就乾脆定了一個主流密度，叫做1x。其他的密度，都是它的整數倍，2x，3x等。

這樣你回到和以前一樣，報1x磚的長寬個數就行了。要是想多鋪，就喊一聲，順便多鋪個2x或者3x，師傅就會懂。

1x=多少倍的像素密度

1，切圖和標註一起的，什麼切圖對應什麼標註，個人是如果是差不多大的圖標就一個尺寸比如44x44px，標註就按44的邊緣標，現在我幾乎不用做.9切圖，切一個差不多大的圖讓開發自己適配

2，設計用iphone6的尺寸，輸出@2x,3x就行，安卓，iOS都能用

3，實際做設計的時候我是按偶數尺寸設計，就標px,開發自己換算，有的UI按一倍設計，就無所謂了，標的開發就直接用,

4，2倍尺寸1dp=2px,三倍尺寸1dp=3px，sp和dp差不多，不過是字體的尺寸

Android DP/PX Converter

這個網址可以換算安卓的dp,px,sp，蘋果的簡單就不用說了

1、請問UI設計中切圖怎麼切呢，想了解的是原理，並不是步驟；

點「九」切圖-教程分享

2、如何用一套圖切出適配不同解析度下的png呢；

下載Cutterman，http://www.cutterman.cn/v2/cutterman

3、實際應用中做出設計後，到底是怎麼換算的呢；

這個不懂你在說什麼

3、還有px、dp、sp、ppi以及設備尺寸之間的關係，UI設計過程中到底選用何種單位來進行設計呢，有的說用px，有的說要用dp，很糾結，求科普，想徹徹底底的搞明白

px、dp、dip、dpi、sp 等到底有什麼聯繫區別？產生的根源和設計時的影響如何？是否屏幕密度的決定原因？ - Adobe Photoshop

從事軟體開發和設計工作的大家肯定或多或少對設計規範和切圖以及尺寸有一些疑問，但是這些方面也是我們工作中必不可少要接觸的內容，所以大家都知道並了解我們從事這個行業，尺寸規範以及切圖的重要性。

首先，我們先來聊聊設計規範，工作中我們往往需要提出一個完整的一次性解決方案。但有時我們是受到時間的限制,或者我們只是還沒有確定一個清晰的發展方向。一次性的解決方案並不是說它不好，但是如果它不是建立在一個堅實的基礎之上，最終我們會發現自己還是不得不回過頭來償還技術積累和設計這筆債。

為什麼需要設計規範

1、缺少限制

相比於其他設計領域，軟體設計幾乎沒有物理限制。這就意味著任何一個問題都可能有多種解決方案，但這恰恰可能造成用戶體驗的不一致。因此作為產品所有者或設計師,我們必須創建並遵循自己的設計規範。

2、多人協作

軟體通常是由一個團隊設計出來的，有時甚至可能是很大的團隊。這就意味著，創造一個連貫一致的用戶體驗的難度會隨著團隊成員的人數增加而呈指數增長。另外，無論團隊協作多麼一致或團隊多小,不同的人總會有不同的解決方案或設計風格,很容易導致體驗割裂。

3、多個平台

我們需要讓產品應用於多種不同的平台和設備。為保證產品在多平台間的同步及體驗的一致性，通常需要在不同平台上去做很多重複性的工作。

4、軟體是連貫的

軟體的另一個不同之處在於，雖然它可以被認為是一個產品，但他不會像傳統的消費品那樣真的磨損或被更換。即使公司和其產品本身發生了大的變化，多年前的代碼和設計仍然會存在於產品的許多地方。這就要求不斷的維護和升級。

隨著現在手機行業的興起，手機的尺寸越來越多，相信剛入門的設計師都會被手機尺寸、解析度、適配等等的給弄昏頭腦，下面幫助UI新手小夥伴們，快速了解一些設計規範。

主流Android手機的解析度和尺寸

移動UI設計切圖是UI設計師最重要的設計輸出物，切圖資源輸出是否規範直接影響到工程師對設計效果的還原度。設計師的切圖輸出物是是體現一個設計師專業水準的重要標準，同時也是設計師表達自己對設計態度的最有力的語言。合適、精準的切圖可以最大限度的還原設計圖，起到事半功倍的效果。如何輸出具有全局把控和細節專註的高段位切圖，應該是所有設計師一直需要追求的能力。

設計切圖的原則

設計切圖輸出的目的是跟下游的工程師團隊協同工作，那麼在團隊協作過程中首先應該保證切圖輸出能夠滿足工程師設計效果圖的高保真還原的需求。其次切圖輸出應該儘可能的降低工程師的開發工作量，避免因切圖輸出而導致的不必要的工作量。最後輸出的切圖應當儘可能的壓縮大小，以降低APP的總大小，提升用戶使用時的載入速度。所以切圖輸出應當做到切圖精準、便與協同和壓縮大小。

切圖資源尺寸必須為雙數