• <tbody id="9brb1"><pre id="9brb1"></pre></tbody>

    <em id="9brb1"></em>

  • <th id="9brb1"></th>

  • <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
  • <button id="9brb1"><acronym id="9brb1"><input id="9brb1"></input></acronym></button>
      <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
        更多課程 選擇中心


        UI培訓

        400-111-8989

        【切圖】UI設計師要懂得切圖技巧

        • 發布:UI培訓
        • 來源:UI教程
        • 時間:2017-12-07 14:39

        UI設計師要懂得切圖技巧
        前 言

        今天給大家分享Android 系統的切圖。

        對于Android,因為本身是Open Source系統,設備廠商很多,可以運行 Android 系統的設備的屏幕大小也是各式各樣。

        對于Android的切圖輸出,與 iOS 系統類似,UI設計師們也是需要輸出不同倍率的切圖。開發工程師將會把所有倍率的切圖都封裝在同一個安裝包里面,在運行的時候系統會根據屏幕的分辨率來自動選用正確倍率的切圖。

        對于Android設備切圖,一般使用 720*1080px作為二倍稿進行設計。

        切圖注意事項

        1.輸出文件歸類

        和IOS相似,根據要輸出幾種切圖進行文件歸類。

        需要至少新建三個切圖文件夾,分別命名為xhdpi,xxhdpi,xxxhdpi,對應存放切好的圖。

        Android系統分辨率對應的DPI有ldpi QVGA (240×320)、mdpi HVGA (320×480)、hdpi WVGA (480×800),FWVGA (480×854)、xhdpi 720P(1280*720)、xxhdpi 1080p(1920*1080 )、xxxhdpi 4K(3840×2160)。

        通常需要輸出xhdpi,xxhdpi,xxxhdpi,對應IOS的就是2倍圖、3倍圖、4倍圖。

        2.開發所用單位

        dp:保證控件在不同密度的屏幕上按照這個比例單位換算顯示相同的效果,相當于一種比例換算單位。

        sp:文字單位,為了保證文字在不同密度的屏幕上顯示相同的效果。

        對應iOS 2倍圖:

        Android是xhdpi時,1dp=2px

        Android是xhdpi時,1sp=2px

        3.可點擊區域

        理論上,可點擊區域是不小于48*48dp。

        如上期所講,若是一個界面內兩個控件距離很近,為了避免重合容易產生誤操作。

        按照iOS的最小可點擊區域,換算成Android就是22*22dp。

        獨有切圖方法-“.9.png”

        因為Android平臺多種不同的分辨率,控件的切圖文件在被放大拉伸后,邊角會模糊失真。由于被拉伸和壓縮,比例極不協調。

        如果不同分辨率下放不同分辨率的圖片,盡管可以有效避免圖片失真,可是這樣一是工作量大,再就是切片資源多導致整個項目內存太大。

        而使用Android獨有的“.9.png”格式的圖片,可以實現有些圖片拉伸而不失真。

        1.“.9.png”格式的圖片是什么呢?

        中文 “點九”,就是在切圖命名的后面加上“.9.png”,相當于把一張png圖分成了9個部分(九宮格),分別為4個角,4條邊,以及一個中間區域。

        其中,四個角是不做拉升的,所以會一直保持圓角的清晰狀態;

        兩條水平邊和垂直邊分別只做水平和垂直拉伸,所以不會出現邊會被拉粗的情況;

        只有中間用黑線指定的區域做拉伸,這樣的界面顯示結果才是很完美的。

        UI設計師要懂得切圖技巧

        紅線的部分就是可拉伸的地方,就是黑點和黑線相交的中間區域

        2.“.9.png”方式切圖的好處是什么?

        (1)可以橫向和縱向隨意進行拉伸圖片,而保留像素精細度、漸變質感和圓角的原大小,實現完美多分辨率下的顯示效果;

        (2)減少不必要的圖片資源,一個幾KB或者幾十KB的圖片,變得非常小,一般只有幾百個字節那么大。

        (3)消耗系統資源會少,加載會更快。

        3.如何進行“.9.png”格式的切圖?

        (1)把需要做“.9.png”格式的控件先盡量縮小。

        如下方的登錄按鈕;(注意:只對按鈕進行操作即可,文字不需要切圖)

        UI設計師要懂得切圖技巧

        按鈕原本的大小

        UI設計師要懂得切圖技巧

        去掉文字把按鈕在ps里導出前先縮小

        (2)選中按鈕圖層,“導出為…”,把畫布大小較圖片大小的寬高都多加兩像素,使切出來的圖周圍有一個像素的空余,如下圖:

        UI設計師要懂得切圖技巧

        (3)點擊全部導出,把剛才導出的png圖片重新拖到ps中,查看切圖的可拉抻區域,即不包括圓角,光澤等特殊區域的區域,如果不能確定某一區域是不是可拉抻區域,可以在繪制之前將圖片該部分拉抻一下試試,若是圖片出現了失真的變化,該區域就是不可拉抻區域。

        UI設計師要懂得切圖技巧

        登錄按鈕沒有漸變和光澤,拉伸區域只避開圓角即可,紅線框的區域就是可拉伸區域

        (4)使用鉛筆工具,把前景色換成純黑色,把縱向的一條邊和橫向的一條邊畫布上空出來的1像素填上,剩下兩條邊各在可拉伸區域點一個點,如下圖:

        UI設計師要懂得切圖技巧

        (5)將切圖輸出為png格式的圖片,重命名為*.9.png,存放在劍豪xhdpi文件夾中,另外兩個文件夾就不需要了,后期工程師會自己適配。

        可能切圖上多出來幾條黑線,大家有疑惑說沒關系嗎?這個其實不用擔心,設計師把切圖給到工程師,他在后臺運行一次,黑線就會不見啦。

        Android除了特有的切圖方法,其余跟iOS都是一樣的。

        切圖的輸出方法

        1.盡量降低圖片文件大小,提升響應速度

        一般情況下,圖片切圖文件大小都是相對較大,不利于用戶在使用app過程中加載頁面,因此圖片切圖要盡量壓縮圖片文件的大小,可以借助壓縮圖片的軟件。

        2.根據圖片類型選擇不同的切圖方式

        (1)全屏類切圖

        需要把整張圖片轉成png格式提供給工程師。

        (2)局部切圖類

        若是圖案只占一部分,剩下頁面為空白或者字體的,就只需要把圖案和按鈕切出來就可以。

        (3)動圖類切圖

        根據動作,劃分幀,根據每一幀都導出一張png圖片,然后把這些交給工程師,將效果和開發工程師溝通即可。

        感謝大家閱讀由ui培訓班分享的“UI設計師要懂得切圖技巧”希望對大家有所幫助,更多精彩內容請關注UI培訓官網

        免責聲明:本文由小編轉載自網絡,旨在分享提供閱讀,版權歸原作者所有,如有侵權請聯系我們進行刪除

        預約申請免費試聽課

        填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

        上一篇:25個平面設計技巧讓客戶被你的海報吸引!
        下一篇:UI排版中常用的四大排版設計原則

        淺談設計中的加載

        平面設計中的印刷知識與印刷尺寸

        教你如何把手機里的自拍照片轉成手繪照

        如何將品牌基因融入到產品設計中?

        • 掃碼領取資料

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        貴州省

        廣西省

        海南省

        2019最新在线国产自拍,2019最新国产在线观看_久久爱久久高清视频 百度 好搜 搜狗
        <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>