App细节优化有时候在于像素级别,有时候又在于整个排布给人的体验感受,还有时候是在于交互的舒适度。
作为开发人员应该注意从设计到真实UI的过程中一些要点,这里提供一些指导建议
概要性指导
排布应该遵循
- 亲密原则,亲密内容的间距自然会比不亲密内容之间的间距要小
- 对齐原则,严格注意文案,表单,按钮以及数字类信息的对齐,除非设计例外
- 对比原则,不同的内容之间会因为字体大小颜色,背景颜色,边框颜色的不同体现出对比
交互应该遵循
- 即时反馈,交互组件或者内容应该必定能反馈回用户(如颜色变化,大小变化,过度)
- 适当过度,交互内容之间状态变化应当使用合适的过度元素体现
- 动画效果,大面积内容变化的交互应该使用动画效果进行过度
实践指导
居中
一个内容如果是需要居中(水平或者垂直),那么严格注意内容离边框的距离,无设计例外,应该左和右一样,上和下一样,正所谓:中者,不偏不倚,无过不及之名
颜色
合适并且正确的字体颜色,边框颜色,背景颜色,效果颜色,这些是设计品味的基础,应当严格按照设计给出的颜色进行设置,正所谓:察颜观色也
长宽比
在不同设备上的元素(列表项,按钮,标签,小挂件)应该表现出在该设备下(通常是屏幕大小分辨率)拥有合适的长宽比,通常按照设计出的图算出一个长宽比,一个合适的长宽比,即给人良好的视觉效果,也给人点击起来更容易的体验感
间距
内容与内容之间通常总有一个合适的间距,不会直接粘连在一起,尤其注意图形与文字之间,细细观察,设计师定然会给出一个优美的距离给它们
大专栏 App开发中UI的细节优化link" title="过度">过度
作为过度,它总是不会立即反馈一个状态的变化,而是以一定的延迟来表现状态的变化,以平滑过快转变带来的突兀,比如:
1 |
loading不会每次都出现,合适的loading总是选择在一个请求(一个操作)消耗了 |
字体
字号(大小)通常应当根据设计师给出的字号,除此之外,在无法对上号的情况下,应该使用相对论:根据设计中的字体与周边的元素相比较进行设置。隔外注意和尊敬设计师在不经意间使用一种非系统默认字体来表现TA对此处UI设计的感觉。
边框
边框通常用于划分内容,通常边框的像素值多少和颜色深浅非常的重要,注意按照设计实践大体不会出现问题。
占击区域
点击区域不一定会跟随图片和文案的大小设定,除非产品的需要,技术手段上应该在过于小的地方宜合适地放大,例如:返回,√ x 图标
留空
在滚动面板中,内容顶部和底部(滚到底部时)某些情况下推荐留下一段空白,通常有以下场景是:
- 列表项之间有间距
- 列表项有边框
像素
注意那些差了1像素(可能更多)的地方,处女座会让你低头的