商務(wù)合作
  • 學(xué)習(xí)文章
  • 靈感素材
  • IOS規(guī)范
  • Android規(guī)范
  • WEB標(biāo)準(zhǔn)
  • 切圖規(guī)范

  • 文章分類

      點(diǎn)擊加載
      • 1/144
      • 第 頁

      點(diǎn)擊加載
      • 1/144
      • 第 頁

    • IOS設(shè)計(jì)規(guī)范

      iPhone界面尺寸
      單位：px
      按照750×1334分辨率進(jìn)行設(shè)計(jì)
      iPad界面尺寸
      單位：px
      按照1536×2048分辨率進(jìn)行設(shè)計(jì)

      單位：px

      設(shè)備 狀態(tài)欄高度 導(dǎo)航欄高度 標(biāo)簽欄高度 工具欄高度
      iPhone6 plus設(shè)計(jì)版 60 132 147 147
      iPhone6 plus物理版 54 132 147 147
      iPhone6/5S/5C/5/4S/4 40 88 98 88
      iPad 20 44 49 44
      iPad(@2×） 40 88 98 88

      單位：px

      描述 iPhone6 Plus(@3×） iPhone6 and iPhone 5(@2×） iPhone 4s/4 iPod touch(@2x) iPad and iPad mini (@2x) iPad2 and iPad mini (@1x)
      啟動(dòng)程序圖片 180×180 120×120 120×120 152×152 76×76
      為App Store應(yīng)用商店圖標(biāo) 1024×1024 1024×1024 1024×1024 1024×1024 1024×1024
      搜索結(jié)果圖標(biāo)（推薦） 120×120 80×80 80×80 80×80 40×40
      設(shè)置圖片（推薦） 87×87 58×58 58×58 58×58 29×29
      標(biāo)簽欄圖標(biāo)（可選） 約75×75 zui大144×114 約50×50 zui大96×96 約50×50 zui大96×96 約50×50 zui大96×96 約25×25 zui大48×48

      系統(tǒng) 英文字體 中文字體 設(shè)計(jì)選擇 設(shè)計(jì)字號(hào) zui小限制
      iOS 9 San Francisco 蘋方 蘋方 偶數(shù) 英文18px/中文22px
      iOS 8 Helvetica Heiti SC Heiti SC 偶數(shù) 英文18px/中文22px

      必背：ios可點(diǎn)擊區(qū)域zui小為44×44

      更多詳細(xì)規(guī)范，請(qǐng)見蘋果官方iOS 9人機(jī)界面開發(fā)指南
      https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/

    • Android設(shè)計(jì)規(guī)范

      主流機(jī)型界面尺寸
      單位：px
      按照1080×1920分辨率進(jìn)行設(shè)計(jì)
      設(shè)備 尺寸 分辨率
      三星Galaxy S3 4.8英寸 720×1280
      三星Galaxy S5 54 132
      三星Galaxy S4 5英寸 1080×1920
      三星Galaxy S6 4.5英寸 1200×1920
      華為 Ascend P7 5英寸 1080×1920
      華為 榮耀6 5英寸 1080×1920
      華為 C199 5.5英寸 720×1920
      華為 Ascend Mate7 6英寸 1080×1920
      華為 Ascend Mate2 6.1英寸 720×1280
      魅族 MEZU MX4 5英寸 1080×1920
      魅族 MEZU MX3 5.1英寸 1080×1800
      錘子 Smartisan T1 4.95英寸 1080×1920
      設(shè)備 尺寸 分辨率
      小米2 4.3英寸 720×1280
      小米3 5英寸 1080×1920
      小米4 5英寸 1080×1920
      紅米Note 5.5英寸 720×1280
      小米1S 4英寸 480×854
      小米2S 4.3英寸 720×1280
      小米3S(概念） 5英寸 1080×1920
      紅米 4.7英寸 720×1280
      OPPO Find 7 5.5英寸 1440×2560
      OPPO N1 mini 5英寸 720×1280
      OPPO R1S 5英寸 720×1280
      OPPO R3 5英寸 720×1280

      屏幕密度
      像素（px）代表屏幕上一個(gè)物理的像素點(diǎn)代表屏幕上一個(gè)物理的像素點(diǎn),為解決Android設(shè)備碎片化，引入一個(gè)概念DP，也就是密度。指在一定尺寸的物理屏幕上顯示像素的數(shù)量，通常指分辨率。 為了簡(jiǎn)單起見，Android把屏幕密度分為了四個(gè)廣義的大?。旱停?20dpi）、中（160dpi）、高（240dpi）和超高（320dpi） 像素= DP * （ DPI / 160 ) 例如，在一個(gè)240dpi的屏幕里，1DP等于1.5PX。
      于設(shè)計(jì)來說，選取一個(gè)合適的尺寸作為正常大小和中等屏幕密度（尺寸的選取依據(jù)打算適配的硬件，建議參考現(xiàn)主流硬件分辨率），然后向下和向上 做小、大、特大和低、高、超高的尺寸與密度。

      Android系統(tǒng)dp/sp/px換算表
      名稱 分辨率 比率rate（針對(duì)320px） 比率rate（針對(duì)640px） 比率rate（針對(duì)750px）
      idpi 240×320 0.75 0.375 0.32
      mdpi 320×480 1 0.5 0.4267
      hdpi 480×800 1.5 .75 0.64
      480×800 720×1280 2.25 1.125 1.042
      xxhdpi 1080×1920 3.375 1.6875 1.5

      鏈接：谷歌官方Material design規(guī)范使用手冊(cè) https://material.io/guidelines/

    • WEB設(shè)計(jì)規(guī)范

      中國(guó)網(wǎng)民的分辨率使用情況分析報(bào)告:
      根據(jù)CNZZ數(shù)據(jù)中心對(duì)國(guó)內(nèi)網(wǎng)民上網(wǎng)終端分辨率的統(tǒng)計(jì)分析，2013年5月中國(guó)網(wǎng)民上網(wǎng)終端分辨率從使用率來看，1024×768、 1440×900、1366×768與4月份環(huán)比呈現(xiàn)增長(zhǎng)趨勢(shì)，而1280×800、1680×1050、800×600、1152×864分辨率趨勢(shì)恰好相反， 其他分辨率趨勢(shì)變化不大。從占有率來看，1440×900、1366×768與4份相比有所增長(zhǎng)，而1024×768、1280×800、800×600 1152×864分辨率趨勢(shì)恰好相反。
      分辨率 2014年8月使用率
      1366×768 22.74%
      1440×900 20.89%
      1024×768 17.61%
      1920×1080 5.94%
      1280×800 14.41%
      1280×1024 4.8%
      1680×1050 4.13%
      1280×768 3.00%

      瀏覽器類型 2014年8月占有率
      Internrt Explorer 36.62%
      360瀏覽器 25.25%
      Safari 9.12%
      QQ瀏覽器 5.83%
      搜狗瀏覽器 6.01%
      2345瀏覽器 2.08%
      獵豹瀏覽器 2.01%
      網(wǎng)頁寬度與首屏高度:
      安全寬度1002 px 可建議較大寬度1258 px Window XP首屏大小580 px Window 7 首屏大小710 px

    • 切圖規(guī)范

      常見界面、控件、功能、狀態(tài)命名集合
      適用于產(chǎn)品經(jīng)理、設(shè)計(jì)師、開發(fā)工程師，包括H5前端開發(fā)人員。
      界面命名
      整個(gè)主程序 App 搜索結(jié)果 Search results 活動(dòng) Activity 信息 Messages
      首頁 Home 應(yīng)用詳情 App detail 探索 Explore 音樂 Music
      軟件 Software 日歷 Calendar 聯(lián)系人 Contacts 新聞 News
      游戲 Game 相機(jī) Camera 控制中心 Control center 筆記 Notes
      管理 Management 照片 Photo 健康 Health 天氣 Weather
      發(fā)現(xiàn) Find 視頻 Video 郵件 Mail 手表 Watch
      個(gè)人中心 Personal center 設(shè)置 Settings 地圖 Maps 鎖屏 Lock screen
      系統(tǒng)控件庫
      狀態(tài)欄 Status bar 搜索欄 Search bar 提醒視圖 Alert view 彈出視圖 Popovers
      導(dǎo)航欄 Navigation bar 表格視圖 Table view 編輯菜單 Edit menu 開關(guān) Switch
      標(biāo)簽欄 Tab bar 分段控制 Segmented Control 選擇器 Pickers 彈窗 Popup
      工具欄 Tool bar 活動(dòng)視圖 Activity view 滑桿 Sliders 掃描 Scanning
      功能命名
      確定 Ok 添加 Add 卸載 Uninstall 選擇 Select
      默認(rèn) Default 查看 View 搜索 Search 更多 More
      取消 Cancel 刪除 Delete 暫停 Pause 刷新 Refresh
      關(guān)閉 Close 下載 Download 繼續(xù) Continue 發(fā)送 Send
      zui小化 Min 等待 Waiting 導(dǎo)入 Import 前進(jìn) Forward
      zui大化 Max 加載 Loading 導(dǎo)出 Export 重新開始 Restart
      菜單 Menu 安裝 Install 后退 Back 更新 Update
      資源類型
      圖片 Image 滾動(dòng)條 Scroll 進(jìn)度條 Progress 線條 Line
      圖標(biāo) Icon 標(biāo)簽 Tab 樹 Tree 蒙版 Mask
      靜態(tài)文本框 Label 勾選框 Checkbox 動(dòng)畫 Animation 標(biāo)記 Sign
      編輯框 Edit 下拉框 Combo 按鈕 Button 動(dòng)畫 Animation
      列表 List 單選框 Radio 背景 Backgroud 播放 Play
      常見狀態(tài)
      普通 Normal 獲取焦點(diǎn) Focused 已訪問 Visited 默認(rèn) Default
      按下 Press 點(diǎn)擊 Highlight 禁用 Disabled 選中 Selected
      懸停 Hover 錯(cuò)誤 Error 完成 Complete 空白 Blank
      位置安排
      頂部 Top 底部 Bottom 第二 Second 頁關(guān) Header
      中間 Middle 第一 First zui后 Last 頁腳 Footer

      以iOS為范例(安卓通用)的切片文件命名規(guī)范如下：
      標(biāo)識(shí)符命名原則，也可以簡(jiǎn)化字母（如：Backgroud可以縮減成bg）。

    聯(lián)系我們

    深圳市龍華民治地鐵D口東邊商務(wù)大樓4層

    深圳
    深圳市龍華民治地鐵D口東邊商務(wù)大樓4層
    1、乘坐公交車在沙元埔或民康路口下車即到
    2、乘坐地鐵5號(hào)線在民治地鐵D口出即到
    180-1879-6460 周老師
    1683356417@qq.com
    設(shè)計(jì)交流和意見反饋-QQ群：208427678
    Copyright?2016 優(yōu)途UI教育 All Reserved 粵ICP16038326號(hào)-1