<commit_before>---
layout: post
title:  "UI设计师切图规范（iOS）"
date:   2019-04-15
author: "袁凤鸣"
excerpt: UI设计师切图规范（iOS）

categories: 
    - iOS
tags: 
    - UI
mathjax: true

---
* content
{:toc}
---


## UI设计师切图规范（iOS）
### 0x1、序言：
- 不要无缘无故的在页面中新增一个 **“东西”**。
    - 每个一个元素的展示，设计师都应该自己知道其交互意义。避免页面突然多个东西而没有其交互逻辑（如：页面多了一个按钮，你作为设计都不知道这个按钮点击去哪个页面做什么事情，这是不太好的。）
- 界面上的元素要合理。不要出现奇葩的交互方式。
       - 如：这样交互就显得不合理![](https://ws4.sinaimg.cn/large/006tNc79gy1g23dan3415j308o0e8gmi.jpg))
- 建议 学习 `Axure-原型图` 对设计的 `UE` 交互理解非常有利。（比如一个完整的购物流程应该有哪些页面组成。相互之间怎么跳转）
- 如果图片涉及几十张后就必须新建文件夹按照模块分类，如果懒不想分文件夹，就自己按照业务模块定义数字下标。如：**4-3-1我的订单-全部**
    - 这样做方便排序同一业务图片都归类到一起

### 0x2、效果图：

- `iOS`的效果图建议同一采用 750px 宽度（iPhone6 系列4.7寸宽度），长度按照业务多少自行累加。
    - 不要出现 所给的 效果图 宽度像素度不一致。如错误的：![](https://ws4.sinaimg.cn/large/006tNc79gy1g23d3x8drej30iv0bzjti.jpg)
        - **在没有给 标注图 时候 开发都是手动 测量 效果图 得知 控件元素要布局多大多小，图规格不一致 新增换算的工作量**。
- 有多种业务状态的 图 要提供多种效果图。
    - （如个人中心的 登录之前展示的样子，和登录以后展示的样子。不一样就要提供两种图）
- 效果图命名规范：
    - 效果图务必使用中文命名。（给人看的图就必须快速让人理解图片是什么业务）
- 完美的效果图命名如下：
    - ![](https://ws2.sinaimg.cn/large/006tNc79gy1g23bhd7v1vj30kk01g0sv.jpg)
    - 对上图解读：（个人中心 第三个 业务模块 的第一张状态图，）。有数字代表业务模块后期图多了也容易分类查看
    
### 0x3  icon 切图命名规范：
- 每个大业务的所有图标icon都归类到该业务的文件夹。
- 必须切两套图标。@2x 和@3x。
    - 注意：750px宽度 psd 切出来的图标是 @2x的。（自行把切出的 @2x 图标看看像素大小是否 和 750px 宽的 psd中图标像素一样吻合。）
- 完美命名如图：![](https://ws2.sinaimg.cn/large/006tNc79gy1g23cgkovkoj30ke07e3zi.jpg)
    - 上图解读：
         - 命名 只 支持 小写英文字符、数字、和@2x标识符
        - 分了文件夹。找图非常方便
        - **“cf”** 是业务前缀。在代码项目中有业务前缀 找图也提供了方便。
        - 业务前缀标识命名，自己用业务名称的首字母或者英文单词都行。没业务前缀在几十上百张图中找图如同大海捞针。
        - 单词之间用下划线链接 **_**
        - 命名名称后面附带`@2x`或者`@3x`规格标识符。
        - 所有icon图片必须是 png 格式。
       
    - 错误命名方式：
    ![](https://ws4.sinaimg.cn/large/006tNc79gy1g23cxh0uqsj315q0nkk7x.jpg)


<commit_msg>Fix: Add: Change: Delete:<commit_after>---
layout: post
title:  "UI设计师切图规范（iOS）"
date:   2019-04-15
author: "袁凤鸣"
excerpt: UI设计师切图规范（iOS）

categories: 
    - iOS
tags: 
    - UI
mathjax: true

---
* content
{:toc}
---


## UI设计师切图规范（iOS）
### 0x1、序言：
- 不要无缘无故的在页面中新增一个 **“东西”**。
    - 每个一个元素的展示，设计师都应该自己知道其交互意义。避免页面突然多个东西而没有其交互逻辑（如：页面多了一个按钮，你作为设计都不知道这个按钮点击去哪个页面做什么事情，这是不太好的。）
- 界面上的元素要合理。不要出现奇葩的交互方式。
       - 如：这样交互就显得不合理
       ![](https://ws4.sinaimg.cn/large/006tNc79gy1g23dan3415j308o0e8gmi.jpg))
       
- 建议 学习 `Axure-原型图` 对设计的 `UE` 交互理解非常有利。（比如一个完整的购物流程应该有哪些页面组成。相互之间怎么跳转）
- 如果图片涉及几十张后就必须新建文件夹按照模块分类，如果懒不想分文件夹，就自己按照业务模块定义数字下标。如：**4-3-1我的订单-全部**
    - 这样做方便排序同一业务图片都归类到一起

### 0x2、效果图：

- `iOS`的效果图建议同一采用 750px 宽度（iPhone6 系列4.7寸宽度），长度按照业务多少自行累加。
    - 不要出现 所给的 效果图 宽度像素度不一致。如错误的：![](https://ws4.sinaimg.cn/large/006tNc79gy1g23d3x8drej30iv0bzjti.jpg)
        - **在没有给 标注图 时候 开发都是手动 测量 效果图 得知 控件元素要布局多大多小，图规格不一致 新增换算的工作量**。
- 有多种业务状态的 图 要提供多种效果图。
    - （如个人中心的 登录之前展示的样子，和登录以后展示的样子。不一样就要提供两种图）
- 效果图命名规范：
    - 效果图务必使用中文命名。（给人看的图就必须快速让人理解图片是什么业务）
- 完美的效果图命名如下：
    - ![](https://ws2.sinaimg.cn/large/006tNc79gy1g23bhd7v1vj30kk01g0sv.jpg)
    - 对上图解读：（个人中心 第三个 业务模块 的第一张状态图，）。有数字代表业务模块后期图多了也容易分类查看
    
### 0x3  icon 切图命名规范：
- 每个大业务的所有图标icon都归类到该业务的文件夹。
- 必须切两套图标。@2x 和@3x。
    - 注意：750px宽度 psd 切出来的图标是 @2x的。（自行把切出的 @2x 图标看看像素大小是否 和 750px 宽的 psd中图标像素一样吻合。）
- 完美命名如图：![](https://ws2.sinaimg.cn/large/006tNc79gy1g23cgkovkoj30ke07e3zi.jpg)
    - 上图解读：
         - 命名 只 支持 小写英文字符、数字、和@2x标识符
        - 分了文件夹。找图非常方便
        - **“cf”** 是业务前缀。在代码项目中有业务前缀 找图也提供了方便。
        - 业务前缀标识命名，自己用业务名称的首字母或者英文单词都行。没业务前缀在几十上百张图中找图如同大海捞针。
        - 单词之间用下划线链接 **_**
        - 命名名称后面附带`@2x`或者`@3x`规格标识符。
        - 所有icon图片必须是 png 格式。
       
    - 错误命名方式：
    ![](https://ws4.sinaimg.cn/large/006tNc79gy1g23cxh0uqsj315q0nkk7x.jpg)



{'fraction_non_alphanumeric': 0.14555555555555555, 'fraction_numerical': 0.06277777777777778, 'mean_word_length': 3.7010443864229763, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7139331', 'n_tokens_mistral': 2846, 'n_tokens_neox': 3162, 'n_words': 202}