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

從事軟體開發和設計工作的大家肯定或多或少對設計規範和切圖以及尺寸有一些疑問，但是這些方面也是我們工作中必不可少要接觸的內容，所以大家都知道並瞭解我們從事這個行業，尺寸規範以及切圖的重要性，首先，我們先來聊聊設計規範，工作中我們往往需要提出一個完整的一次性解決方案。但有時我們是受到時間的限制,或者我們只是還沒有確定一個清晰的發展方向。一次性的解決方案並不是說它不好，但是如果它不是建立在一個堅實的基礎之上，最終我們會發現自己還是不得不回過頭來償還技術積累和設計這筆債。

 

n 為什麼需要設計規範

1、缺少限制

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

 

2、多人協作

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

 

3、多個平臺

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

 

4、軟體是連貫的

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

 

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

 

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

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

設計切圖的原則

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

l 切圖資源尺寸必須為雙數

l 圖示切圖輸出應根據標準尺寸輸出並且考慮到手機適配（主要是iPhone 6plus的適配） 

l 為了提升APP使用速度，儘量降低圖片檔案大小

l 可點選部件應當注意其點選區域不小於88px

l 可點選部件要把相關狀態都切圖輸出，比如正常狀態、點選狀態。

n 切圖神器Cutterman介紹

 

Cutterman是現在最主流的設計師切圖利器，能夠自動將你需要的切圖進行輸出。極大的減輕了設計師的工作量，提升了切圖效率。它支援各種圖片格式，尺寸，形態輸出，  相容安卓，iOS,WEB各種系統的一鍵輸出。以下是Cutterman的使用方法簡介。

 

l 一鍵切圖，真正解放雙手

Cutterman能夠讓你只需要點選一個按鈕，就自動輸出你需要的各種各樣的圖片，快到沒有朋友！

l 支援IOS平臺

輸出支援IOS平臺的單倍圖、雙倍圖，支援IPHONE6/6P尺寸比例。

l 支援Android平臺

輸出支援Android平臺的各種解析度大小圖片，什麼XXHPDI，XHDPI，HDPI啊之類的，通通自動化輸出，為你節省出更多的時間陪小夥伴好好玩耍。

l 支援各種圖片格式輸出

什麼png、jpg、gif通通不在話下，還可以自己縮放、壓縮大小呢。從此，就告別那個所謂的“儲存為web所用格式”的功能啦~~

l 多個圖層合併、單獨輸出

圖層太多？木關係！可以多選嘛！支援選中多個圖層合併輸出，也可以逐一輸出的哦，簡直方便到爆！

 

l 固定尺寸輸出

想要輸出固定尺寸的ICON，多種姿勢讓你選擇，秒秒鐘的事情~~