今天看啥  ›  专栏  ›  YorkYoung

日更22/100(给美术看的UI出图规范)

YorkYoung  · 简书  ·  · 2018-08-21 22:39

文章预览

从程序角度,目前的项目经验看。发现一些问题,以及程序和美术对接的痛点

  1. 由于没有统一的设计和规划,导致UI样式过多,打开资源目录,可以看到大量类似的资源,仅有细微的不同。(内容底、按钮底、标题底图、分割线、进度条、图片数字等等)。
  2. 美术给过来示意图,程序每次都要花时间去找那些通用的UI元素对应的图片位置。
  3. 需求变更,比如在个人空间新加了一个家族图标;给过来的示意图有时候会发现所以其他元素的位置都变了(细微的位置偏移,导致蒙上去对不齐)。

所以出了这个规范,希望能提升美术和程序的对接效率。(这只是一个单纯的出图规范,不涉及UI统一设计和规划方面的内容,这是主美在一个项目设计之初应考虑好的。)

命名

命名很重要,务必重视。

  • 原则是一定要有意义的命名,最好是英文。并且保持统一规范。

为什么要使用好的命名:

  1. 好的命名能让人一眼就了解图片的用途,减轻理解的压力
  2. 能保持美术与程序图片名字一致,后期替换图片,或者资源复用,程序可以很方便的找到。(如果美术随意命名,程序在使用时可能会改名,导致两边不一致
  3. 提高美术与程序的沟通效率

想要命一个好名字有时候确实伤脑筋,会花费些时间;但是能提高整体效率,对美术同学而言也是一种提高。

关于命名的几点建议

  • 一般的UI元素命名规则:模块_用途。例:首充界面背景 FirstRecharge_Bg;结算界面横幅 Summary_Baner;
  • 如果同类图片有多个,则根据颜色、尺寸、品质等特征来区分。例:Common_Button_Red,Common_Button_Blue;
    Skill_Magnet,Skill_Magnet_Small;
    AppIcon_64、AppIcon_72、AppIcon_128;(这里64、72、128表示图片尺寸)
    Skin_NameBg_1、Skin_NameBg_2(1、2表示品质);
  • 如果是图标类,例如金币图标 Icon_Gold;钻石图标 Icon_Diamond;
  • 如果设计时考虑到以后会复用,最好在命名里体现出来。例如下拉框背景:Common_Dropdown_Bg;下拉框选中底图:Common_Dropdown_Select。
  • 尽量用英文,但找不到合适的英文单词或者用英语感觉更难理解时,可酌情使用中文或者拼音。总之一个原则就是规范,易懂

切图

  1. 背景图不带透明通道,且尺寸在2880X1440(适配18:9的屏幕)
  2. 图标类的图尺寸尽量为2的次幂
  3. 图片应该以主体内容居中,而不是以整个内容居中。
    比如按钮下边有阴影,那么切图时上面也要留出和阴影相同的空白像素,使按钮在图片内居中。否则每次制作按钮,按钮上的文字都得向上偏移几个像素,完全没必要。
    这类图常见的有按钮、头像框、气泡框等
  4. 尽量复用(UI框、按钮、进度条、分割线、图片数字等)
    从用户体验的角度讲,习惯界面统一的风格和少数的规矩,要比看起来好看更加重要,因为UI设计的最终目的在于用户体验和操作习惯的养成,而非看起来好看。
    从程序的角度讲,要尽量控制包体的大小和内存的占用。
  5. UI的元素(背景框、其他内容框),尽量设计成九宫格。
  6. 文字规格(颜色、字号)要有统一的规范。
  7. 示意图中如果有通用UI元素,要标识名称以便程序查找
  8. 如果是旧界面的变更修改,新的示意图最好是在旧示意图的基础上改,只动需要动的地方。

过几天会再出一个给程序看的UI对接规范。

………………………………

原文地址:访问原文地址
快照地址: 访问文章快照
总结与预览地址:访问总结与预览