经验分享：移动端设计开发经验之设计篇开始我们的第一步

来源：武汉天琥设计培训学校时间：2019/1/14 12:21:06

因为现在移动客户端大行其道，相信会有很多从web转过来的从事客户端设计的同学，也许大家会觉得，我web页面设计妥妥的，客户端设计肯定没有任何问题，你看你看，手机上的界面比那些复杂的web页可简单多了，不就是几个条条框框几个按钮吗? 小case! 这个时候，你身边的ui设计师估计在心中默默的吐槽了，“哼哼哼，那你就来试试吧!” 好吧，不管霸王洗发水可以让成龙的头发有多飘逸，我们一定要试试，确定那个不是特效堆出来的。

打开熟悉的ps或fw，新建画布。额，宽多少，高多少，分辨率多少啊?好，先从你身边的手机开始吧。这里以iphone为例，iphone5的分辨率是640-1136，iphone4的话，640-960。 自己的手机分辨率多少，就建个多少的画布吧，分辨率保持软件默认就好。

一张画布建好了。好，我们现在可以开始设计了。在这里，还要跟大家唠叨一点。看看你手机的最上端，黑色的状态栏(就是手机上显示时间信号的东西了吗?)，为了我们能在手机上预览时刚好占满整个屏幕，所以这个条条在大部分情况下，需要包含到设计稿中。iphone下，这个条(Status Bar)的高度为40px。我们先画一个高40的条放上去，然后呢，一堆的细节，按照下图的高度先画到画布里吧(注意，下图是3GS的分辨率哦，所以高度及宽度全部要乘以2)，这个对于大家实在是太简单了，注意分辨率就可以了。这个时候你可以用之前介绍的神器 PS play在手机上预览一下。 框架搞好，剩下的就可以开始设计了。