发表于: 2018-11-20 22:00:36

1 1075





今天完成的事情:


修改任务七第一版

完成任务七第二版


第一版



第二版




明天计划的事情:


暂时停止做任务七开始做小课堂



遇到的问题:


暂时没有问题



今天的收获:


1. icon尺寸通用设计规范:


理论尺寸(px)                                  实际(可见)尺寸(px)                       边距(px)

1024 x 1024                                                  896 x 896                                          64

  512 x 512                                                    448 x 448                                          32

  144 x 144                                                    136 x 136                                           9

  128 x 128                                                    112 x 112                                           8

    96 x 96                                                        84 x 84                                             6                       

    72 x 72                                                        64 x 64                                             4

    64 x 64                                                        56 x 56                                             4

    56 x 56                                                        50 x 50                                             3

    48 x 48                                                        42 x 42                                             3

    32 x 32                                                        28 x 28                                             2

    16 x 16                                                        14 x 14                                             1

 

注意事项:

1.基于风格化统一的目的 依据icon尺寸设计规范 在设计icon的时候 要注意每个icon的圆角大小 笔触大小 边距等问题

2.icon基础颜色统一化设置为#000 在项目中使用时 png格式的可以用颜色叠加来改变 svg和字体图标类的直接代码控制

3.命名规范:命名规则:类别-功能-名称-状态.png 例如:icon-home-normal.png

                1)类别分类(前缀)例:icon_(图标类)pic_(图片类)logo_(商标类)bg_(背景类)

                2)状态(后缀) 例 :_normal (正常状态)  _hover(悬浮状态)  _default(默认状态)  _pressed(按下状态)

                3)功能或者名称请根据产品内容适当描述

     4)分类层级限定在4层(含4层)以内

             5)命名使用小写全称英文,长单词、复合单词视情景可采取首字母缩写 例如:bg_rda_hover.png (dar:red downarrow)

               6)同类型不同状态或大小不同的图标在名称后面添加数字做区分 例如 首页 图标 在项目中的多处地方用到 但每一处大小不同

                     可采取此类命名:icon_home01_hover.png

         


          



返回列表 返回列表
评论

    分享到