<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • UI中切圖與命名規(guī)范,收藏!

    2019-3-14    用心設(shè)計

    如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

     

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

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


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

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

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


    二. 命名規(guī)則


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


    模塊:

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


    類別:

    導(dǎo)航欄(nav) 菜單欄(tab) 按鈕(btn)  圖標(biāo)(icon)  背景圖片(bg)  默認(rèn)圖片(def)


    狀態(tài):

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


    舉例說明:

    IOS:

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


    輸出成果為:

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

    意思為:公共_導(dǎo)航_按鈕_返回_選中


    Android:

    以720*1280為基稿設(shè)計,由于尺寸不同且多樣,需要切多套圖適配不同機器,分別為mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi,直接輸出的切圖為xhdpi;它們分別對應(yīng)的倍數(shù)關(guān)系為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   輸入框選中狀態(tài)

    login_btn_n.png    登錄按鈕

    login_btn_s.png    登錄按鈕選中狀態(tài)


    注冊(register):

    login_register_rb_n.png    單選框按鈕

    login_register_rb_s.png    單選框按鈕選中狀態(tài)


    導(dǎo)航欄(nav):

    common_nav_btn_menu_n.png    菜單按鈕

    common_nav_btn_menu_s.png    菜單按鈕選中狀態(tài)

    common_nav_btn_back_n.png    返回按鈕

    common_nav_btn_back_s.png    返回按鈕選中狀態(tài)

    common_nav_btn_close_n.png    關(guān)閉按鈕

    common_nav_btn_close_s.png    關(guān)閉按鈕選中狀態(tài)

    common_nav_btn_eidt_n.png    編輯按鈕

    common_nav_btn_eidt_s.png    編輯按鈕選中狀態(tài)

    common_nav_btn_delete_n.png    刪除按鈕

    common_nav_btn_delete_s.png    刪除按鈕選中狀態(tài)

    common_nav_btn_message_n.png    消息按鈕

    common_nav_btn_message_s.png    消息按鈕選中狀態(tài)

    common_nav_btn_search_n.png    搜索按鈕

    common_nav_btn_search_s.png    搜索按鈕選中狀態(tài)


    列表(list):

    hpcollege_list_collect.png    列表頁收藏按鈕


    左側(cè)導(dǎo)航欄(leftbar):

    leftbar_info.png     個人中心


    菜單(tab):

    common_tab_need_n.png     需求a按鈕

    common_tab_need_s.png     需求a按鈕選中狀態(tài)

    common_tab_find_n.png     發(fā)現(xiàn)按鈕

    common_tab_find_s.png     發(fā)現(xiàn)按鈕選中狀態(tài)

    common_tab_demand_n.png    需求b按鈕

    common_tab_demand_s.png    需求b按鈕選中狀態(tài)

    common_tab_me_n.png    我的按鈕

    common_tab_me_s.png    我的按鈕選中狀態(tài)


    首頁(home):

    home_bg.png     首頁背景

    home_banner.png     首頁廣告圖


    點9圖(.9):

    rounded rectangle.9.png    圓角矩形


    常用詞語:

    selected:選中/s

    pressed:按下/pre

    disabled:不可點/d

    normal:正常/n

    common:公共

    default:登錄頁

    discover:發(fā)現(xiàn)

    message:消息

    me:我

    navigation  bar:導(dǎo)航欄/nav

    tab:菜單欄

    button:按鈕/btn

    icon:圖標(biāo)

    background-image:背景圖片/bg

    default-image:默認(rèn)圖片/def

    cut-off  rule:分割線/cor

    login:登陸

    register:注冊

    list:列表

    home:首頁

    banner:廣告

    browse:瀏覽

    details:詳情

    like:喜歡

    dislike:不喜歡

    search:搜索

    content:內(nèi)容

    collect:收藏

    eidt:編輯

    comment:評論

    message:提示信息/msg

    ranked:排名

    location:定位

    tags:標(biāo)簽

    left:左

    right:右

    center:中

    popup:彈出/pop

    image:圖片/img

    viedio:視頻/vd

    audio:音頻/ad

    title:標(biāo)題/tit

    address:地址/add

    number:人數(shù)

    time:時間

    sustem:系統(tǒng)

    refresh:刷新

    user:用戶

    more:更多

    border:邊框

    next:下一步

    sign:簽到

    code:密碼

    clear:清除

    scroll:滾動條

    hover:鼠標(biāo)停留

    common:公共

    hot:熱點

    zoomin:放大

    zoomout:縮小

    service:服務(wù)

    presonal  data:個人資料/Pdata

    male:男性

    female:女性

    report:舉報

    input:輸入/ip

    dropdown  menu:下拉菜單/ddm

    radio button:單選框/rb

    check  box:復(fù)選框/cb

    progressbar:進度條/pbar

    download:下載

    arrow:箭頭

    share:分享

    upload:上傳

    release:發(fā)布

    tabbar:標(biāo)簽欄

    autonym:實名

    藍(lán)設(shè)計www.skdbbs.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

    日歷

    鏈接

    個人資料

    存檔

    主站蜘蛛池模板: 久久精品国产亚洲麻豆| 国产A∨国片精品一区二区| 精品日产一区二区三区手机| 欧美日韩国产精品| 精品视频一区二区三区在线观看| 日韩精品一区二区三区中文字幕| 麻豆精品久久精品色综合| 日韩欧精品无码视频无删节 | 最新国产在线精品观看| 97精品国产高清自在线看超 | 国产亚洲精品a在线观看app| 在线观看国产精品普通话对白精品 | 精品久久久久久国产| 亚洲精品成人片在线观看精品字幕| 国产精品亚洲欧美大片在线看 | 狼色精品人妻在线视频| 久久久久久久久久免免费精品| 一区二区三区精品国产欧美| 成人国产精品免费视频| 午夜欧美精品久久久久久久| 蜜臀av无码人妻精品| 久久国产精品二国产精品| 国产精品v欧美精品v日韩| 999国产精品色在线播放| 青青草精品视频| 精品久久久久久国产| 精品福利一区二区三| 精品成人免费自拍视频| 久久er热视频在这里精品| 精品国产免费一区二区三区香蕉 | 国产精品专区第二| 国产精品久久久久久久久免费| 尤物TV国产精品看片在线| 午夜三级国产精品理论三级| 国产一区二区三区在线观看精品| 欧美精品福利视频| 老司机91精品网站在线观看| 九九热在线视频观看这里只有精品| 91精品最新国内在线播放| 2020国产精品永久在线| 99麻豆久久久国产精品免费|