小技巧!如何使用切圖。

2019.06.28

920

設計切出輸出的目的是與下游工程師團隊合作。

然后在團隊合作過程中,首先應確保切出的輸出符合工程師設計效果圖的高保真恢復要求。

其次,切斷輸出應盡可能減少工程師的開發工作量,避免切斷輸出造成的不必要的工作量。

應盡可能壓縮最終輸出切割圖像,以減小APP的總大小,并在用戶使用時提高加載速度。

因此,切出輸出應該準確,方便和壓縮。

1.切圖資源尺寸必須為雙數

眾所周知,智能手機的屏幕尺寸是雙倍的值。例如,iphone 7的屏幕分辨率為750 * 1334px。

切出資源的大小必須加倍,以確保在工程師的開發過程中切出的資源以高清晰度顯示。因為1px是智能手機可以識別的最小單位,換句話說,智能手機上不能將1個像素分成兩個像素。

因此,如果是單切,手機系統將自動拉伸切割圖像,這將導致切割圖像的邊緣模糊,這將導致開發的APP界面效果遠離原始設計效果。

2.圖標切圖輸出應根據標準尺寸輸出并且考慮到手機適配(主要是iPhone 6plus的適配)

圖標切出輸出是切出資源輸出的重要部分。

因為在開發過程中由于每個型號的屏幕分辨率不同,所以有必要適應一些大屏幕的機型。

為了在剪切圖中調整大分辨率手機(如iphone 7plus)圖標,需要輸出@ 2x和 @ 3x的剪切圖,

@ 2x的切割表可以滿足雙平臺大多數型號的適應性要求,@ 3x用于調整iPhone手機的各種加號版本(稍后會有關于改編問題的文章)。

@ 3x是@ 2x尺寸的倍數,例如圖標切割圖@ 2x尺寸是44px,然后@ 3x尺寸是66px。

3.為了提升APP使用速度,盡量降低圖片文件大小

圖標剪切輸出是剪切資源輸出中非常重要的部分,例如新手指南頁面,啟動頁面,默認地圖,廣告地圖等。

在圖片剪切的情況下,文件大小相對較大,這不利于用戶在使用app的過程中加載頁面。

因此,圖像剪切圖應該嘗試壓縮圖像文件的大小(文本壓縮的方法將在本文后面詳細說明)。

4.可點擊部件應當注意其點擊區域不小于88px

44px的單擊區域值基于iphone 3(320×480px)通用顯示器。現在,當手機的分辨率大大提高時,這些數據自然需要與時俱進。

在iphone7(750 * 1334px)Retina顯示屏中,44px命中區域變為88px。但無論是320 * 480px尺寸下的44px還是750 * 1334px尺寸下的88px,轉換成物理尺寸后大致在7mm-9mm之間。

早在人體工程學的研究中,人們就得出結論,人類舒適的中風范圍需要為7-9mm。

因此,ios的官方空間大小也經常出現88px的值,比如菜單欄的高度是88px。

5.可點擊部件要把相關狀態都切圖輸出,比如正常狀態、點擊狀態。

在切割過程中,不僅應省略正常狀態的切割圖,還應省略其他狀態的切割表。

這也是設計師經常犯的錯誤。例如,在按鈕切割過程中,可以忽略點擊和切割的狀態。

因此,設計師最好使用設計圖來顯示頁面中出現的各種狀態,以避免在地圖稍后時遺漏狀態。


最新案例

聯系電話 400-6065-301

微信咨詢 寒總監

重庆时时彩开奖网易