iOS端的UI设计文档

iOS端的UI设计文档

 

    APP和网站，风格色调始终注意保持一致（平台一致性）

    在App不断更新的过程中定义设计准则、风格、规范

设计规范：

    1、分类合理（为了能让用户快速查找，合理的分类必不可少）

    2、规范本身保持一致（内容保持一致、格式保持一致）

    3、排版易读（通过合适的字体字号、间距留白减少用户阅读的疲劳感，图片与说明清晰的结合）

一、原型图和二倍、三倍切图

    1、一般图标命名：

          例如：alipay.png、alipay@2x.png、alipay@3x.png

          相对规范命名：

                 切片种类+功能+图片描述（可有可无）+状态.png

                 名称应使用英文命名(中文不识别，推荐小写字母)，不要以数字或者符号当作开头，使用下划线进行连接

                 例：一个首页的处于正常状态的确定按钮

                 btn_sure_nor.png、btn_sure_nor@2x.png、btn_sure_nor@3x.png

                 切片种类是按钮（btn）；功能是确定(sure)；状态是normal(正常)

    2、App图标按尺寸命名，名字为icon，前边数字是宽，后边数字是高：

          icon28x28.png、icon29x29.png 、icon40x40.png、icon57x57.png、icon58x58.png、icon60x60.png、icon72x72.png、icon76x76.png、icon80x80.png、icon87x87.png、icon114x114.png、icon120x120.png、icon167x167.png、icon180x180.png、icon512x512.png、icon1024x1024.png

    3、引导页、启动页面图片命名，名字为Default，前边数字是宽，后边数字是高：          

          Default640x960.png、Default640x1136.png、Default750x1334.png、Default768x1024.png、Default1242x2208.png、 Default1536x2048.png、Default2048x1536.png、Default2732x2048.png         

    在JPG和PNG两种格式图片大小相差不是很大的情况下，推荐使用PNG；如果图片大小相差很大，使用JPG

    欢迎页面Default，icon一定要使用PNG格式，在不影响视觉效果的前提下，可以考虑使用PNG 8

    在所有iOS设备上，渲染的像素和实际像素是相等的。唯一的例外是：iPhone 6 Plus的Retina HD屏幕。因为其屏幕的像素分辨率比自然的 @3x 分辨率更低，渲染的内容会自动调整到大约原尺寸的87%（从2208 x 1242像素适应到1920 x 1080像素)