<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          UI中切圖與命名規范,收藏!

          2019-3-14    用心設計

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

           

          規范的命名方式可以提高開發人員的開發效率和整個開發團隊的友好合作,減少溝通成本。結合經驗與收錄的資料,分享給大家。

          一. 切圖命名英文縮寫的三個要求


          1.較短的單詞可通過去掉“元音”形成縮寫

          2. 較長的單詞可取單詞的頭部幾個字母形成縮寫

          3.還有一些特定的英文單詞縮寫


          二. 命名規則


          切圖命名以模塊為前綴,如:模塊_類別_功能_狀態.png


          模塊:

          登陸頁面(login) 公共(common) 需求a(need) 需求b(demand) 發現(discover) 消息(message)    我(me)


          類別:

          導航欄(nav) 菜單欄(tab) 按鈕(btn)  圖標(icon)  背景圖片(bg)  默認圖片(def)


          狀態:

          selected(選中) disabled(不可點) pressed(按下) normal(一般)


          舉例說明:

          IOS:

          以750*1334為基稿設計,按實際項目開發為標準,需切出@2x和@3兩套圖,把在公共頁面中的導航欄里面有一個按鈕(40x60px)的選中狀態切圖,直接輸出的切圖為@2x圖,@2x的1.5倍圖為@3x。


          輸出成果為:

          common_nav_btn_back_s@2x.png(40x60)和common_nav_btn_back_s@3x.png(80x120);

          意思為:公共_導航_按鈕_返回_選中


          Android:

          以720*1280為基稿設計,由于尺寸不同且多樣,需要切多套圖適配不同機器,分別為mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi,直接輸出的切圖為xhdpi;它們分別對應的倍數關系為1、1.5、2、3、4。


          輸出成果為:

          common_nav_btn_back_s_mdpi.png(20x30)、

          common_nav_btn_back_s_hdpi.png(30x45)、

          common_nav_btn_back_s_xhdpi.png(40x60)、

          common_nav_btn_back_s_xxhdpi.png(60x90)、common_nav_btn_back_s_xxxhdpi.png(80x120);


          命名示列:

          啟動  (default):    

          default.png   啟動圖片;

          default_logo.png   啟動logo


          登陸(login):

          login_bg.png   登陸背景圖片

          login_logo.png   登陸logo

          login_input_n.png   輸入框

          login_input_s.png   輸入框選中狀態

          login_btn_n.png    登錄按鈕

          login_btn_s.png    登錄按鈕選中狀態


          注冊(register):

          login_register_rb_n.png    單選框按鈕

          login_register_rb_s.png    單選框按鈕選中狀態


          導航欄(nav):

          common_nav_btn_menu_n.png    菜單按鈕

          common_nav_btn_menu_s.png    菜單按鈕選中狀態

          common_nav_btn_back_n.png    返回按鈕

          common_nav_btn_back_s.png    返回按鈕選中狀態

          common_nav_btn_close_n.png    關閉按鈕

          common_nav_btn_close_s.png    關閉按鈕選中狀態

          common_nav_btn_eidt_n.png    編輯按鈕

          common_nav_btn_eidt_s.png    編輯按鈕選中狀態

          common_nav_btn_delete_n.png    刪除按鈕

          common_nav_btn_delete_s.png    刪除按鈕選中狀態

          common_nav_btn_message_n.png    消息按鈕

          common_nav_btn_message_s.png    消息按鈕選中狀態

          common_nav_btn_search_n.png    搜索按鈕

          common_nav_btn_search_s.png    搜索按鈕選中狀態


          列表(list):

          hpcollege_list_collect.png    列表頁收藏按鈕


          左側導航欄(leftbar):

          leftbar_info.png     個人中心


          菜單(tab):

          common_tab_need_n.png     需求a按鈕

          common_tab_need_s.png     需求a按鈕選中狀態

          common_tab_find_n.png     發現按鈕

          common_tab_find_s.png     發現按鈕選中狀態

          common_tab_demand_n.png    需求b按鈕

          common_tab_demand_s.png    需求b按鈕選中狀態

          common_tab_me_n.png    我的按鈕

          common_tab_me_s.png    我的按鈕選中狀態


          首頁(home):

          home_bg.png     首頁背景

          home_banner.png     首頁廣告圖


          點9圖(.9):

          rounded rectangle.9.png    圓角矩形


          常用詞語:

          selected:選中/s

          pressed:按下/pre

          disabled:不可點/d

          normal:正常/n

          common:公共

          default:登錄頁

          discover:發現

          message:消息

          me:我

          navigation  bar:導航欄/nav

          tab:菜單欄

          button:按鈕/btn

          icon:圖標

          background-image:背景圖片/bg

          default-image:默認圖片/def

          cut-off  rule:分割線/cor

          login:登陸

          register:注冊

          list:列表

          home:首頁

          banner:廣告

          browse:瀏覽

          details:詳情

          like:喜歡

          dislike:不喜歡

          search:搜索

          content:內容

          collect:收藏

          eidt:編輯

          comment:評論

          message:提示信息/msg

          ranked:排名

          location:定位

          tags:標簽

          left:左

          right:右

          center:中

          popup:彈出/pop

          image:圖片/img

          viedio:視頻/vd

          audio:音頻/ad

          title:標題/tit

          address:地址/add

          number:人數

          time:時間

          sustem:系統

          refresh:刷新

          user:用戶

          more:更多

          border:邊框

          next:下一步

          sign:簽到

          code:密碼

          clear:清除

          scroll:滾動條

          hover:鼠標停留

          common:公共

          hot:熱點

          zoomin:放大

          zoomout:縮小

          service:服務

          presonal  data:個人資料/Pdata

          male:男性

          female:女性

          report:舉報

          input:輸入/ip

          dropdown  menu:下拉菜單/ddm

          radio button:單選框/rb

          check  box:復選框/cb

          progressbar:進度條/pbar

          download:下載

          arrow:箭頭

          share:分享

          upload:上傳

          release:發布

          tabbar:標簽欄

          autonym:實名

          藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合