|
|
本帖最后由 静电 于 2014-7-4 00:19 编辑
hi,大家好,静电设计教室04和大家见面了。之前的设计教室中，静电和大家一同探讨了如何设计一个app图标，那么，在本次的设计教室中，静电接着上次的课程，和大家一起来研究如何把效果图转换成程序猿同学们可以使用的素材。
思考与分析
大 家还记得,在之前的教程中,我们效果图是按照什么尺寸来做的吗?忘了的话,抓紧回想一下。什么?还是记不起来? 那,你总有手机吧?你知道自己手机的分辨率是多少吗? 什么?不知道……俄,好的,那么静电首先来个图表,和大家一同看一下现在主流手机的分辨率。静电在这里只举几种常见的手机型号，至于其他手机，大 同小异，所以就不再提及了，因为手机种类实在太多了。但分辨率，无非就如下几种：
在这里,有同学可能会说还有其他手机的分辨率,嗯,是的,静电在这里请大家先忽略这个疑问,等一下,大家就知道这么纠结这个问题, 其实作用并不大。
在上图中，静电列举了现在使用比例比较高的手机型号，那么下面静电用图来为大家演示一下，这里假设手机屏幕的精度是一致的，也就是说我们不考虑手机实际尺寸的问题。
好的,现在我们来做个算术题. 我们先不用管手机的高度, 单单把手机的宽度值拿出来,于是…
我们把这组值简化一下,也就是公约数神马的,静电数学一般,不过这点东西相信大家都是不在话下.
有同学可能已经猜到了,这就是我们要等比缩放一个图标所要得到的比例值.比如,从640等比例缩放到320时,图标的宽高都是640下的一半. 也就是缩小到原来的二分之一.
效果图使用哪种尺寸来设计
由 于手机屏幕和电脑屏幕对于像素和精度处理的不同,所以当我们从web端设计转到手机端的时候,像素的问题会困扰我们很久, 静电在刚开始接触app界面的设计的时候,也是没感觉了好久。嗯，大家知道，我们做网页，一般的宽度是多少呢？ 960？ 1110？ 恩哼， 对是按照屏幕的宽度来的，因为网页和手机页面一样，大部分是上下滚动的，也就是宽固定，高随着内容的多少往下撑。对了，手机也是一样的，这个时候，大家会 问，那我要使用哪种手机分辨率来作图最合适呢？ 静电在这里告诉大家，除了考虑以后图片缩放的问题外，我们还需要考虑自己手头的手机，因为我们还是需要在pc端作图，但通常做完会处于没感觉的状态，所以 我们需要在手机端来预览，现在看看自己手头都有什么手机吧。 静电使用的是iphone5s，所以我通常使用640-1136这个比例来做效果图。方便导入手机与手机分辨率进行精确适配以便“感受”效果。
如果大家是其他手机，比如小米2等等，那么就去网上查查这个型号的手机使用了多少分辨率的屏幕，然后按照这个数值设定画布即可。
另 外，必须要注意一点，如果你使用的是古董级手机，比如320-480分辨率这样的手机，那么静电还是建议你换一个屏幕适中的吧。 静电的建议如下，在下面的手机宽度中，选择中等偏上的手机来做设计时的测试机。如果是1080p分辨率的机型,那其实是再合适不过了,不过,还有一个问 题….那就是电脑屏幕的分辨率。
想想自己电脑屏幕是如何摆放的,分辨率是多少? 宽高1920-1080, 1680-1050.
最直观的感觉是,电脑屏幕大部分是横的,而,手机屏幕是竖的….而且现在大部分手机屏幕的宽度媲美pc显示器了,除非是土豪可以用上4k显示屏. 所以,我们发现大部分情况下作图的时候非常不爽,我们只能看到效果图的一部分,而屏幕边缘大量的空白区域被浪费.
所以,我们需要做一些调整,在设计手机效果图的时候,尝试把屏幕竖过来吧,非常爽的.哈哈!
竖过来之后,我们发现视野变大了,有一览众山小的感觉.但是,如果这时我们按照1080-1920这样的分辨率来设计图,其实还是不够用的,因为我们的屏幕边缘还有工具栏什么的. 所以静电建议大家选一个适中的尺寸来做, 比如640宽或者720宽这样的就可以了.(欢迎大家关注静电的微信公众号: jingdesign91)
使用fireworks来设计APP界面
为 什么不是photoshop呢?其实呢,也是可以的,但fireworks静电认为还是有不少优势的,其中一个重要的优势就是“矢量”。那又有同学问，为 什么不是ai呢？ 其实呢，ai也是可以的，但是对于尺寸和输出格式上，fireworks还是有独特的优势的，总之这是个兼顾矢量和切图的工具。
静 电是fireworks的死忠,这些年一直都在用fireworks作图,所以,在这里还是向大家推荐一下这款工具,当然,其他工具也可以,大家选一款自 己用的顺手的即可.最近有一款比较火的软件是sketch,这也是一款兼备矢量和切图功能的强大软件,而且针对手机切图功能做了优化,静电正在研究中,请 大家期待后续的教程.
记得有一点,因为我们选择的是居中分辨率的效果图,那么请大家在作图时尽量使用矢量来绘制效果图中的元素,否者后边的步骤中,我们由小图转大图的时候, 精度不够的图可是会虚掉的哦.所以,在设计的时候,如果一定要用位图,那么请务必保存一份高精度的图备用.
下面,我们开始随心所欲的设计自己想要的界面吧. 界面的设计在静电设计教室第一篇和第二篇中有讲解,所以,在这里静电就不讲具体的设计过程了. 大家可以到静电的主页来查看。
在设计过程中,我们可以使用psplay这个神奇来随时在手机中预览效果图。那么大家开始设计吧，静电去准备切图教程的第二部分,下一节的设计教室,可是满满的干货,让大家从繁重的切图工作中解脱出来,更专注于app界面的设计。
未完待续,敬请期待下期静电的设计教室.同时欢迎大家关注静电的微信公众号: jingdesign91
继续阅读: 静电的设计教室(5)-移动设备切图进阶
|
|
发表于 2014-7-3 23:07:41
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
淘帖
