UI

萌宠菠菠乐园
2024-12-01 22:30

hello大家好，欢迎来到虎课网，我是豆豆，又给大家带来新案例了，是关于，宠物的两个app页面，那这款app呢主要有两个功能，第一个呢是用户可以在这款app上买到宠物的生活用品，那第二个呢是可以在上面发布一些宠物平时的生活动态那与其他用户呢可以进行交流增添更多的乐趣，那主色调呢我们选用的是一款饱和度和亮度都比较高的橘黄色，那这种颜色呢，其实可以体现主人和宠物之间一种和谐温暖的这样的一种感觉，ok ，话不多说，我们还是老规矩，先来熟悉一下ios界面的基本设计规范，那为了照顾新同学，所以我们还是要比较详细的再说一遍首先呢是控件规范，那基本的控件呢，一般有三个状态栏，导航栏，还有我们的标签栏，一般呢这三个控件呢，他们的高度都是固定的哈，然后呢，就是我们的画布大小，那在ios界面设计上呢，我们现在通常用到的尺寸都是iphone6的尺寸，也就是750x1334 ，然后呢，是状态栏的高度，40像素，导航栏的高度呢，是88像素，标签栏的高度呢，是98像素，这个呢，都是规定好的，那这个控件规范呢我希望大家可以记一下哈，然后呢是字体规范，那我们的字体呢一般默认的用的是苹方中等平滑，那导航栏的文字呢，一般是34到36像素，那标签栏里面的文字呢，一般是20像素，或者是22像素，因为呢通常里面要放一些icont所以呢这个字体就比较小但是同时呢，那字体最小呢，其实就是20像素了，如果要是再低于20像素的话呢，那可能用户在浏览文字的同时呢他，

可能辨识度就会不高，就会看不清，所以呢，大家这里要记一下，那剩下的就是内容区域的文字了，那这里的文字呢，就可以自由的发挥了，最后的是排版细节，那排版细节呢主要就是有两点第一点呢是字体文字大小呢必须为双数第二点呢就间距，界面中所有元素之间的距离呢，也必须为双数，也就是要遵从我们的，双数原则，那这个呢是，大家要严格谨记的，如果说你出现单数的情况下呢，那程序员在后期开发的过程当中的就会出现问题了，所以呢这个是必须要注意到的，ok ，那接下来呢，我们就边做边讲，首先打开ps，ctrl+n新建画布，我们先来做它的的动态页，然后给它一个命名，宽度750，高度1334 ，分辨率72像素，颜色模式，2gb，点击确定，首先呢我们先把刚刚提到的三个控件的高度呢给它量出来，然后ctrl+a得到选区，让它置顶，接着呢拖着一条参考线，然后呢用同样的方法，把导航栏的高度88量出来，那同样，我们底部的标签栏 98像素，也是用同样的方法把它的高度量出来，那如果你嫌麻烦的话，可以直接用选区工具，把它的高度量出来，转一条参考线也是可以的，但是考虑到刚开始做的同学呢，可能在使用选取工具上手不会把握得那么稳，用这个方法呢，可能会更快一些，当然呢还有另一种固定我们选区的高度也是可以的，但是我觉得和这个画图型因为都要输入数值嘛，其实都差不多，那你可以选用一种你比较擅长的方法来操作怎么快怎么来，

接着把状态栏拽进来，那这里的状态栏呢，我直接就是以1:1的这样的，大小保存的所以呢直接拖进来就好不用放大缩小然后呢让它居中于画布当中，在40的高度之内呢也居中，那就状态栏呢，大家可以自己绘制，那也可以从网上自行下载哈，不过呢，我都会把这些素材打包发给大家的，点击视频右侧的黄色按钮就可以进行下载，然后呢选择矩形工具画一个宽750的矩形，高可以先随意哈然后居中置顶，ctrl+t直接把它的高度呢拉到导航栏的最底部也就是高128像素，然后呢改成白色，接着选择图层样式加一层投影，首先呢，把这个角度先改一下，改成90度，然后呢，混合模式呢，我们改为正常就好了，颜色呢是纯黑色哈，不透明度，那我们给它降低，降低到十左右，这里呢我们给它浅浅的一层投影就可以了，我们只是为了让这个，导航栏里面这个标题呢，突出一下，所以呢，做了一个这样的效果，这样的页面看起来，嗯，比较有层次，同样的也可以使标题更加的突出，那这个数值呢大家可以参考一下我的，但是千万不要死记硬背哈，那你这些投影的数值呢还是要根据你的具体页面情况来，进行修改的那我们不管它数值是多少只要看起来是比较舒服自然就可以那我现在把，参考线清除一下，让大家看一下这个效果哈那这样的话呢，就有层次感了，然后呢 ctrl+z ，把这个参考线呢还是给它调回来接着呢输入导航栏当中的标题，那一般导航栏里面的内容的一般都是放我们这一页的主要的标题的哈，

还有一些返回按钮，比较重要的一些操作都是放这些元素的，然后呢在导航栏88高度之内呢居中 ctrl+d呢是取消选区接着ctrl+J复制一层，修改文字动态，ctrl+j再复制一层修改为频道，选择矩形工具，画一个宽为60，高为6的矩形，圆角能给到最大，然后呢，让这个矩形和这个动态要互相居中，我们可以得到动态的这个选区，然后再选择矩形的图层，点击这个居中就可以了哈，那这个动态的选区呢，可以按住CTRL键，点击文字的图层就可以得到，然后呢我们把它换成主色调的颜色，那这里的色值呢大家可以啊，这个是可以参考一下的哈，那因为这一页呢，是动态页，所以呢，我们给它一个选中的状态，所以呢文字呢，我们也给它换一下颜色，然后让精选居左，然后呢 ctrl+t把这个x轴改为172像素，然后呢频道呢让它居右 x轴呢改为-172 ，然后呢，将动态进行居中，同样的，那这个滑动条呢也是要跟着一起居中的，然后呢按住shift键选中这几个图层 ctrl+G编组，我们给它改个命名然后ctrl+s 保存一下在做的时候呢要养成随时保存的好习惯哈，