1、文件命名
2、切图命名
3、有规则的设计
* 触控区域和可点击区域的规则
* 图片内容比例规则
* 图片间距规则
* 文字规则
* 图标规则
4、有目的的设计
* 视觉设计
* 听觉设计
* 触觉设计
1、文件命名
在项目过程中对文件的命名十分重要，一是方便我们后期查找查阅，二是对于团队协作的需要也更方便。文件命名主要分为以下几个文件夹：
一级文件夹：项目启动时间+项目名称。eg:[2019.09.18阿卡索外教网app]
二级文件夹：交互原型图、参考素材、源文件psd、展示效果图、输出（一些切图）
这几个可以分为三个字文件夹：️交互原型图+参考素材（原型图备注更新时间+更新名称）️源文件（一稿、二稿、定稿这是为了方便我自己查看每个版本并且保留原文件）️效果图jpg/png(主要是展示) 现在基本都用蓝湖切图直接在线下载也挺方便，只是偶尔还有一些程序员不好下载，蓝湖出现bug的时候单独切出来发
2、切图命名
这里的知识点挺多的，我觉得这对我当下的我来说然并卵，但是为了保持专业，还是需要将一些控件的名称记下来。
先说3个重要的规则：
* 不能用中文，所有字母必须小写
* 命名之间的连接用_ 下划线
* 规范是“模块_类别_功能_状态” eg:home_btn_search_pressed@2x.png
切图控件名称记忆：
跳过 skip
加载：loading
进度条：progressbar
版权：copyright
图片：pic/image
按钮：btn
不同状态：pes
3、有规则的设计
* 触控区域和内容区域的规则
这里简单拿一个按钮来说，按钮的高度为96px，这是基本参数，如果在一些特殊位置则要根据具体的视觉规则来定，那么按钮中的文字，也就是内容区域，一般来说比较合适的是 按钮高度的1/3左右（上下可以偏差4px;）；按钮圆角大小这里有一个基本的公式：按钮高度*10%约等于（四舍五入）则为圆角高度，还有一种是圆角高度=按钮高度的 二分之一；
* 图片内容比例规则
4:3 常规图片比例
16:9 更加符合人的视觉的一个比例，这个比例是4:3的优化，也是很多屏幕的分辨率是这个比例
9:6 8:5是最接近黄金分割的比例，但是适配性不高，9:6都能除以3，而且更方便适配。
* 图片间距规则
️图片与图片之间的间距 ️图片与屏幕两侧的间距 这两者的关系是1:2。
比如设置一个间距基数a，那么这款app 的所有元素之间的间距，最好都是这个基数的倍数，图片元素之间的间距a, 距离两侧间距为2a。
* 文字规则
文字大规则：印刷适合使用衬线类字体，数字媒体适合使用非衬线类字体。
文字基本规范：
最小22px 底部标签栏文本
24px 常用文本内容
32px 内容标题大小
36px 顶部标题文字
48px banner以及特殊标题
关于行间距：中文行间距1.5倍，英文行间距1.2倍。
文字3个细节规则：
* 文字缩进-25px；
* 文字使用段落中的“两端对齐，段落左对齐”
* 标题深色，内容文本灰色
* 图标规则
图标内外圆角大小基本公式：
外圆角大小＝外圆宽度*10% 四舍五入取整数
内圆角大小＝外圆角-边框
图标的基本作用
图标分为功能图标和启动图标，功能图标最重要的是语义的表达，传达信息准确。设计大多来源于日常生活和真实物体。
4.有目的的设计
分为视觉设计，听觉设计和触觉设计
视觉设计要在基本审美之上，有目的的设计，做到将有用的信息内容整理出来以更好的视觉效果呈现。
听觉设计是在大众的需求下衍生出来的，一个背景音乐可以让人联想起某个画面或者某段回忆某段时光，也会有越来越多的智能硬件需要语音，智能语音导航。
输出分享
分享能够认识到自己的不足，认识作者的不足，弥补自己的不足，并可以和作者各自的不足等，这些沟通和分享让所有人都有很大的提升。
网友评论