APP界面UI的相关细则
有关一些常用的尺寸、颜色、规范与各位进行一些探讨
该图片是我制作的一张购物类商城的，其中包括状态栏、导航栏以及工具栏
状态栏高度为40px，用一纯白色块置于底层，并且添加适当的投影
导航栏高度为88px，其中浅灰色的浏览框底色为#eeeeee
工具栏高度也是88px
同时各个区块的文字色彩可用不同的颜色区分，流传最广使用最多的是#333333、#666666、#999999
随数值增加颜色浓度也在增加。
比如说浏览框内的“搜索商品”为提示性文字，颜色最浅，为#999999，工具栏内的图标也是#999999的色值，为了区别不同，使得色彩的层次更加分明，也可以将“搜索商品”的适当调节不透明度。工具栏内的文字颜色应该要比图标颜色稍微重一些，可以使用#666666
同时右侧文字需要重点突出，因为它不是提示性文字，反而比较重要，需要被人们清楚的看到，所以应该用颜色最重的#333333
且在UI设计中黑色值最重不能超过#333333，最恰当的方法是灵活选择上述三种色值
UI设计中文字大小也是一大重点，文字可以偏大（最好不要超过44px），但是不能过小，因为电子显示屏在当今的科技技术下过小的文字在放大时会模糊，影响用户使用，最小不要超过20/22px
拿这张图片来举例，右侧文字大小应为30/32px为最佳，“搜索商品”和工具栏内文字大小应为22px
“面包”“干果”等词的大小应比右侧文字稍小一些，为28/30px最合适。
哦哦！差点忘了最关键的字体：思源黑体（Android）或苹方（ios）。
上面这两张图分别为列表式和瀑布式的浏览方式，两种浏览方式各有便处，就看用户更倾向于哪一种方式了，因此我建议在制作时就提前做好两类方式，便于用户去随时切换。（我认为在当今过花哨的UI界面并不能够满足用户了，用户变得更加挑剔了，我们需要在一些细节之处去体现人文关怀，尽量去实现完美的人机交互模式）。
这是一张个人中心的图，（当然，图中有个小错误，大家应该一眼就可以看出来吧）
做这种图时没什么难度，最重要的就是注意去寻找相似的图标（在上面部分“优惠券”的粗细程度明显与其他三者不符合），因此我的建议就是在确定好自己需要的图标后自己再在PS或AI中用粗细相同的线条绘制相同的，这样就会使得图片的误差减小。
这张二级页面的图和上述我所讲的规范差不多。需要注意的是大家可以在导航栏下方看到一条浅浅的线，这并不是瑕疵，而是故意画上去的，可以用来区分两块区域，工具栏上方的那条线也是同理。这条线的高度为1px，色值为#eeeeee，和浏览框的色值相同。如果你注意观察生活的话就会发现有些APP的背景用的并不是纯白的#ffffff，而是略显灰色的，那就是#eeeeee，没错，就是这个色值。
这张图是一张弹窗图，我的这张图略显粗糙和简单，主要以文字内容为主，搭配一个可爱的小猫头像，当然这也符合我的整体APP的塑造，（可以看我上一篇作品）。在制作弹窗时我们这里就有一些关于人心理的揣摩，就上面图片一个“残忍拒绝”和一个“给个好评”，我想大多数人心里想的是“我才不想要去评价呢？真是浪费时间，赶紧关了”，但是他点击的时候往往是点的“给个好评”，这其实并不是你的脑子出现了问题，而是你的眼睛欺骗了大脑。我也常常有这种苦恼，明明想要关掉，却不小心就点开了，这就是色彩的魅力，我们故意将“残忍拒绝”颜色调为#999999，而不仅降低了70%的不透明度，还故意将右侧“给个好评”色值调到亮，增加饱和度。这是下意识就点了那个“给个好评”。这就是我们UI设计师的小心思。（能有什么坏心思呢？只不过是想让你给我一个好评罢了）当然，我的这个弹窗是最简单的，还有各种各样的弹窗等待你们去制作。
当我们制作完后，有时还需要我们去进行标注，标注这个工作看起来难，其实很简单，就是繁琐，需要你仔细将每一个小图片所在的具体位置与颜色进行标注（在这里我推荐大家使用Pxcook，非常的人性化）我们需要将psd源文件拖入Pxcook就可以标注。标注最好指标一些规则的图形，至于不规则图片的我们不需要去关心（可以使用切图）
标注完成之后我们还需要去切图，有三个尺寸：1倍图、2倍图、3倍图。不过现在最常用的是2倍图和3倍图，1倍图已经被渐渐淘汰了，但是也难免可能会需要用到。尺寸分别为（22px、44px、66px）
当然像上图中的”面膜“这类尺寸的图形，我们也不能只用普通的44px来切，可以根据其大小去适当调节尺寸，我这里用到的是100px。（使用切图是需要与PS联动，打开PS，打开首选项，点击增效工具，勾选”启动远程连接“，然后设置密码就可正常使用了）
下面是我切下来的一些2倍图和3倍图
细心的大家可能注意到了这些图片的名称有点怪，都是英文或拼音的混合。这是为了方便Pxcook进行识别，不然的话可能会切图失败。“home”就是主页的意思，然后是一些图标的命名，用拼音就可以代替，接下来是最重要的一个也就是点击态与非点击态，有的有两种不同的形式，在点击之后颜色，大小会发生变化，有的则只有一种状态，点击前后无变化。无变化的这种就输入normal，而有变化的就需要输入highlight。
例如：home_shouye_normal(一种状态）
home_faxain_normal或home_faxian_highlight（两种状态）
可以参照下面这些命令：
最后谢谢大家观看。这是我真正第一次自己独立编写的文章,存在诸多的不足之处请大家见谅，如有见解，也可以进行评论，我们一起探讨，共同进步。
