• 首頁
        • 文章
        • 素材
          • APP界面
          • 網(wǎng)頁設(shè)計(jì)
          • Mockups
          • 圖標(biāo)
          • 矢量素材
          • Sketch
          • 字體
        • 工具
        • 返回首頁
        • 屏幕尺寸
        • 教程
        • 必備工具
        • IOS規(guī)范
        • Android規(guī)范
        • Web標(biāo)準(zhǔn)
        • 切圖命名
        • AI設(shè)計(jì)小店

        谷歌官方設(shè)計(jì)規(guī)范:https://material.io/guidelines/material-design/

        谷歌中文設(shè)計(jì)規(guī)范:http://design.1sters.com/


        設(shè)計(jì)尺寸



        名稱 分辨率 px dpi 像素比 示例 dp 對(duì)應(yīng)像素
        xxxhdpi 2160 x 3840 640 4.0 48dp 192px
        xxhdpi 1080 x 1920 480 3.0 48dp 144px
        xhdpi 720 x 1280 320 2.0 48dp 96px
        hdpi 480 x 800 240 1.5 48dp 72px
        mdpi 320 x 480 160 1.0 48dp 48px

        字體

        中文字體:Source Han Sans / Noto

        英文字體:Roboto

        常用字號(hào)排版(長(zhǎng)篇幅正文,每行建議60字符(英文)左右。短文本,建議每行30字符(英文)左右。)

        1. 12sp 小字提示

        2. 14sp(桌面端13sp) 正文/按鈕文字

        3. 16sp(桌面端15sp) 小標(biāo)題

        4. 20sp Appbar文字

        5. 24sp 大標(biāo)題

        6. 34sp/45sp/56sp/112sp 超大號(hào)文字




        元素 字重 字號(hào) 行距 字間距
        App bar Medium 20sp - -
        Buttons Medium 15sp - 10
        Headline Regular 24sp 34dp 0
        Title Medium 21sp - 5
        Subheading Regular 17sp 30dp 10
        Body 1 Regular 15sp 23dp 10
        Body 2 Bold 15sp 26dp 10
        Caption Regular 13sp - 20

        圖標(biāo) icons

        圖標(biāo)用途 mdpi (160dpi) hdpi (240dpi) xhdpi (320dpi) xxhdpi (480dpi) xxxhdpi (640dpi)
        應(yīng)用圖標(biāo) 48 x 48 px 72 x 72 px 96 x 96 px 144 x 144 px 192 x 192 px
        系統(tǒng)圖標(biāo) 24 x 24 px 36 x 36 px 48 x 48 px 72 x 72 px 196 x 196 px

        應(yīng)用圖標(biāo) Product icons



        系統(tǒng)圖標(biāo) System icons



        快捷圖標(biāo) Shortcut icon



        單位和度量 Units and measurements

        dpi =屏幕寬度(或高度)像素 / 屏幕寬度(或高度)英寸

        dp =(寬度像素 x 160)/ dpi

        名稱 分辨率 px dpi 像素比 示例 dp 對(duì)應(yīng)像素
        xxxhdpi 2160 x 3840 640 4.0 48dp 192px
        xxhdpi 1080 x 1920 480 3.0 48dp 144px
        xhdpi 720 x 1280 320 2.0 48dp 96px
        hdpi 480 x 800 240 1.5 48dp 72px
        mdpi 320 x 480 160 1.0 48dp 48px

        布局

        所有可操作元素最小點(diǎn)擊區(qū)域尺寸:48dp X 48dp。

        柵格系統(tǒng)的最小單位是8dp,一切距離、尺寸都應(yīng)該是8dp的整數(shù)倍。以下是一些常見的尺寸與距離:


        另外注意56dp這個(gè)數(shù)字,許多尺寸可變的控件,比如對(duì)話框、菜單等,寬度都可以按56的整數(shù)倍來設(shè)計(jì)。

        還有非常多規(guī)范,不詳細(xì)列舉,遵循8dp柵格很容易找到適合的尺寸與距離。平板與PC上留白更多,距離與尺寸要相應(yīng)增大。





        列表 List



        比率邊框



        詳情視圖 Detail view



        觸控區(qū)域尺寸 Touch target size



        應(yīng)用欄 App bar



        • 尺寸
        • 字體
        • 圖標(biāo)
          • 應(yīng)用圖標(biāo)
          • 系統(tǒng)圖標(biāo)
          • 快捷圖標(biāo)
        • 單位和度量
        • UI組件布局
          • 布局
          • 列表
          • 比率邊框
          • 詳情視圖
          • 觸控區(qū)域尺寸
          • 應(yīng)用欄

        網(wǎng)址收集于互聯(lián)網(wǎng),版權(quán)歸原作者所有,任何商業(yè)用途均須聯(lián)系作者。如未經(jīng)授權(quán)用作他處,作者將保留追究侵權(quán)者法律責(zé)任的權(quán)利。

        @優(yōu)波(uBuuk.com)    -    設(shè)計(jì)交流和意見反饋QQ群: 346333699

        粵ICP備17070061號(hào)

        Copyright 2014 - 2019 ubuuk.com All Rights Reserved

        感谢您访问我们的网站,您可能还对以下资源感兴趣:

        色综合久久综合欧美综合