一些UI设计的技巧

因为最近的项目要做前端，所以网上搜集了一下大神的分享帖

搬回来一部分方便自己后续翻阅

（试着保存到有道云笔记，但是不方便翻看）

左右边距

在实际应用中应该根据不同的产品气质采用不同的边距，让边距成为界面的一种设计语言，常用的全局边距有32px、30px、24px、20px等等，当然除了这些还有更大或者更小的边距，但上面说到的这些是最常用的，而且有一个特点就是数值全是偶数。

以iOS原生态页面为例，“设置”页面和“通用”页面都是使用的30px的边距。

卡片间距

通常最小不低于16px，过小的间距会造成用户的紧张情绪，使用最多的间距是20px、24px、30px、40px，当然间距也不宜过大，过大的间距会使界面变得松散，间距的颜色设置可以与分割线一致，也可以更浅一些。

以iOS（750*1334px）为例，设置页面不需要承载太多的信息，因此采用了较大的70px作为卡片间距，有利于减轻用户的阅读负担，而通知中心承载了大量的信息，过大的间距会让浏览变得不连贯和界面视觉松散，因此采用了较小的16px作为卡片的间距。

设置界面建议40px，订单卡片建议20-24

列表布局

以我们最常用的微信和QQ为例，其“信息”页面都是采用的列表式布局，在采用这种布局形式的时候要注意列表舒适体验的最小高度是80px，最大的高度要视内容的多少而定。

继续举例，自如（列表高度110px）和唯品会（列表高度106px）的列表式布局。

建议设置界面110px

字体大小

在一款APP中字号范围一般在20-36之间（@2x）,当然iOS 11中出现了大标题的设计，字号还是要根据产品属性酌情设定。另外需要注意的一点是所有的字号设置都必须为偶数，上下级内容字号极差关系为2-4号。
关于字体颜色和是否加粗：字体的颜色设置我们一般很少用纯黑色，一般用深灰色和浅灰色、细体和粗体（注意要用字体本身的字重，不能用PS的加粗功能）来区分重要信息和次要信息，进行信息层级的划分。

以上均转自https://www.zcool.com.cn/article/ZNjQ0NjQw.html
（耗时7天，查资料码字，为大家整理了超全面的UI设计规范，相信会对大家有所帮助。（公众号《UI充能站》出品 搜索i-lifeway进站））

噢最后 找了一张 dp,px转换图