淺談網頁設計切圖規範
網頁設計切割圖，是UI設計師最重要的設計輸出，是反映設計師專業水準的重要标準。适當準确的切割圖，能最大程度的還原設計圖紙，事半功倍。如何輸出具有全局控制和對細節的關注的高層次裁剪圖形應該是所有設計師一直追求的能力。
一、設計切圖的原則
設計切割圖輸出的目的是與工程師團隊合作，是以在團隊合作的過程中，首先要保證切割圖輸出能夠滿足工程師設計效果圖高保真恢複的要求。
其次，切割圖的輸出要盡量減少工程師的開發工作量，避免切割圖的輸出帶來不必要的工作量。
最後，對輸出切割圖進行盡可能的壓縮，以減少APP的總尺寸，提高使用者的加載速度。
是以，圖形切割的輸出應準确、友善、緊湊。
1. 切圖資源尺寸必須為雙數
智能手機以雙屏著稱，比如iphone 7，分辨率為750 * 1334像素。
為了確定切割資源在工程師開發時以高清格式顯示，切割資源的大小必須是均勻的。因為1px是智能手機能識别的最小機關，換句話說，一個像素在智能手機上不能分成兩部分。
是以，如果是一個奇異的切割圖形，手機系統會自動拉伸切割圖形，導緻切割元素的邊緣模糊，進而導緻開發出來的APP界面效果與最初的設計效果相差甚遠。
2. 切割圖的輸出應根據标準尺寸，并考慮手機的拟合
圖示切割圖形輸出是切割圖形資源輸出的重要組成部分。
由于開發中每個模型的螢幕分辨率不同，需要對一些大螢幕模型進行調整。
3.縮小圖像檔案大小
圖示切割圖形輸出是切割圖形資源輸出的重要組成部分，如新手引導頁面、啟動頁面、預設圖形、廣告圖形等。
一般來說，檔案的大小比較大，這不利于使用者在使用app的過程中加載頁面。是以，對圖像進行剪切，嘗試壓縮圖像檔案的大小。
4. 可點選部分應注意可點選區域不小于88px
44px的點選量是基于iphone 3的(320×480px)分辨率，你可以随時掌握最新的手機分辨率。
在iphone7的視網膜下(750*1334px)，
44px的點選區域變成了88px。然而，無論是320*480px的44px，還是750*1334px的88px，換算成實體尺寸時，都在7mm到9mm之間。
5. 可點選部分将相應的狀态剪切到輸出，如正常狀态和點選狀态。
在圖形切割過程中，不僅要輸出圖形的正常狀态，還要注意不要遺漏圖形的其他狀态。
這也是設計師常犯的一個錯誤，例如，在切割按鈕的過程中，他們可能會忽略點選圖形的狀态。
二、切圖輸出類型
1. 桌面圖示切割圖形輸出
App桌面圖示顯示在很多不同的地方，如移動桌面、App store、移動設定清單等。是以，app桌面圖示需要以多種不同的尺寸顯示。
相應的桌面圖示設計輸出兩個平台的尺寸不一樣，在輸出中把這些尺寸的雙平台全部輸出截圖。
桌面圖示切割圖隻需要提供一個直角圖示切割圖即可，手機系統會自動産生圓角效果。
2. 系統圖示切割圖輸出
兩個平台的一套圖紙:
Ios平台(iphone 6plus版本除外)與android平台共享44*44px的裁剪素材，可實作兩平台一套裁剪圖檔的開發。
适應大螢幕:
為了适應iphone 6plus和iphone
7plus，一組切割圖是原始44*44px切割圖的1.5倍，即66*66px切割圖。(UI設計适應将在另一篇文章中詳細讨論。)
3.切割圖檔輸出
圖檔類切圖主要是指起始頁、新手指南頁、預設提示、廣告圖等需要完整切圖的圖檔。
相同類型的圖形切割圖應保持相同的大小，供工程師開發和使用。
另外，一般來說，這些切割圖的檔案比較大。在切割圖的過程中，需要控制切割圖檔案的大小。(後面的文章将詳細說明如何壓縮切割圖的大小。)
4. 動态效果元件切割圖輸出
動效元素切割圖一般是指在app中加載動效所需要的切割圖元素。例如qq的下拉加載動效就是幾個切割圖連續播放所形成的動畫效果。這些圖檔是按序列号排序的，我們稱它們為序列片。序列切割圖是使用者界面設計過程中不可避免的問題。這種切割圖需要動态效果的流暢自然表現，需要設計者的深思熟慮。
5. 可拉伸元件圖紙輸出
可拉伸元素一般是指在圖形切割過程中可以被縮減和壓縮的元素，如按鈕、輸入框等。通過對這些元素進行瘦身和壓縮，可以大大改善圖像的大小，進而提高使用者在應用程式中的加載速度。這在ios中被稱為tile
cutting，在android中稱為dot nine。
6. 不需要切割的部分
重新設計的切割圖的輸出中的許多元素不需要輸出，而是直接使用系統的本地設計元素來修改參數。
作為一個設計師，你需要知道哪些元素需要被削減，哪些元素需要在系統中使用，以避免不必要的削減。
例如，文本、卡片背景、線條和一些标準的set圖形不需要提供cut圖形。例如，搜尋框隻需要訓示注釋中的大小、圓角的大小、筆畫的厚度和顔色值。工程師可以通過代碼根據設計效果來實作這種效果。
三、縮小裁剪圖形的方法
1. 點割圖法
PNG之是以稱為PNG，是因為檔案extension.png。
p9的主要目的是适應各種android手機型号。這種方法允許圖像水準和垂直拉伸，而不會損壞圖像。
另一個重要的效果是減少了不必要的圖像檔案大小，大大提高了頁面加載速度。Android平台是切割地圖的重要途徑。
制作點九的軟體是“DRAW9PATCH”，它可以很容易的制作點九圖，并在切割圖後預覽開發效果。
3.線上圖像壓縮工具“Tinypng”
使用“Tinypng”智能PNG和JPG線上壓縮工具，在不影響圖像品質的情況下，将較大的圖像切成較小的片。
Tinypng線上壓縮工具在圖像品質和檔案大小之間取得了完美的平衡，降低了圖像的視覺品質，但大大降低了圖像的剪切大小。
Tinypng是一個高度推薦的圖像壓縮工具，現在是最廣泛使用的線上壓縮工具。
使用說明:
1. 一鍵剪畫面，真正解放雙手
卡特曼允許您自動輸出各種圖檔，你需要在點選一個按鈕。
2. 支援IOS平台
輸出支援IOS平台單倍圖，雙位數，支援iphone 6/6p大小比。
支援Android平台
輸出支援各種分辨率的Android平台，如XXHPDI, XHDPI, HDPI等，都是自動輸出，節省了你和朋友玩的時間。
3.支援多種圖像格式的輸出
什麼PNG, JPG, GIF裡的單詞，還可以縮放，壓縮大小。從現在開始，是時候告别所謂的“web格式”特性了
4. 多個層分别合并和輸出
圖層太多了嗎?木頭!你可以選擇多個。支援選擇多個圖層來合并輸出，可以一個一個的輸出哦，很友善的!
5. 固定大小的輸出
想要輸出一個固定大小的圖示，各種位置供您選擇，秒秒事情~~
草圖測量插件的介紹
素描測量是最新的素描切割插件，使用非常簡單。它可以用一個鍵生成Html注釋檔案，并自動生成非常高端的設計規範檔案。
以上介紹的網頁設計切圖規範，隻是一種工作方法，技術更新很快，是以小編在此要提醒大家的是，每個人在具體的工作中，都要靈活運用，希望它們能對設計者有所幫助。