App开发中UI的细节优化

App细节优化有时候在于像素级别，有时候又在于整个排布给人的体验感受，还有时候是在于交互的舒适度。

作为开发人员应该注意从设计到真实UI的过程中一些要点，这里提供一些指导建议

概要性指导

排布应该遵循

亲密原则，亲密内容的间距自然会比不亲密内容之间的间距要小
对齐原则，严格注意文案，表单，按钮以及数字类信息的对齐，除非设计例外
对比原则，不同的内容之间会因为字体大小颜色，背景颜色，边框颜色的不同体现出对比

交互应该遵循

即时反馈，交互组件或者内容应该必定能反馈回用户（如颜色变化，大小变化，过度）
适当过度，交互内容之间状态变化应当使用合适的过度元素体现
动画效果，大面积内容变化的交互应该使用动画效果进行过度

实践指导

居中

一个内容如果是需要居中（水平或者垂直），那么严格注意内容离边框的距离，无设计例外，应该左和右一样，上和下一样，正所谓：中者，不偏不倚，无过不及之名

颜色

合适并且正确的字体颜色，边框颜色，背景颜色，效果颜色，这些是设计品味的基础，应当严格按照设计给出的颜色进行设置，正所谓：察颜观色也

长宽比

在不同设备上的元素（列表项，按钮，标签，小挂件）应该表现出在该设备下（通常是屏幕大小分辨率）拥有合适的长宽比，通常按照设计出的图算出一个长宽比，一个合适的长宽比，即给人良好的视觉效果，也给人点击起来更容易的体验感

间距

内容与内容之间通常总有一个合适的间距，不会直接粘连在一起，尤其注意图形与文字之间，细细观察，设计师定然会给出一个优美的距离给它们

大专栏 App开发中UI的细节优化link" title="过度">过度

作为过度，它总是不会立即反馈一个状态的变化，而是以一定的延迟来表现状态的变化，以平滑过快转变带来的突兀，比如：

loading不会每次都出现，合适的loading总是选择在一个请求(一个操作)消耗了
500ms左右还未完成时才出现，一旦出现后不会立即消失，loading讨厌一闪一闪的，
用户也讨厌一闪一闪的。一个按钮刚进入一个过度态（比如loading）时，总会停留
一小段时间，不会因为数据状态被更改而立马更改，而是平滑好状态变化后再完成过
度到新状态，至于时间，大约在500ms-1000ms之间根据过度效果确定为妙

字体

字号（大小）通常应当根据设计师给出的字号，除此之外，在无法对上号的情况下，应该使用相对论：根据设计中的字体与周边的元素相比较进行设置。隔外注意和尊敬设计师在不经意间使用一种非系统默认字体来表现TA对此处UI设计的感觉。

边框

边框通常用于划分内容，通常边框的像素值多少和颜色深浅非常的重要，注意按照设计实践大体不会出现问题。

占击区域

点击区域不一定会跟随图片和文案的大小设定，除非产品的需要，技术手段上应该在过于小的地方宜合适地放大，例如：返回，√ x 图标

留空

在滚动面板中，内容顶部和底部（滚到底部时）某些情况下推荐留下一段空白，通常有以下场景是：

列表项之间有间距
列表项有边框

像素

注意那些差了1像素（可能更多）的地方，处女座会让你低头的