经验分享：移动端设计开发经验之设计篇资源-CSDN文库

102 浏览量 2021-02-20 20:14:14 上传评论收藏 5.46MB PDF 举报

资源推荐

资源详情

资源评论

经验分享：移动端设计开发经验之设计篇经验分享：移动端设计开发经验之设计篇

好，不管你的最爱是fireworks 还是photoshop还是illustrator或者是其它。都没关系。打开你最喜欢的一个，开始我们

客户端的设计吧。

一、开始我们的第一步

因为现在移动客户端大行其道，相信会有很多从web转过来的从事客户端设计的同学，也许大家会觉得，我web页面设

计妥妥的，客户端设计肯定没有任何问题，你看你看，手机上的界面比那些复杂的web页可简单多了，不就是几个条

条框框几个按钮吗? 小case! 这个时候，你身边的ui设计师估计在心中默默的吐槽了，“哼哼哼，那你就来试试吧！” 好

吧，不管霸王洗发水可以让成龙的头发有多飘逸，我们一定要试试，确定那个不是特效堆出来的。

打开熟悉的ps或fw，新建画布。额，宽多少，高多少，分辨率多少啊？好，先从你身边的手机开始吧。这里以iphone

为例，iphone5的分辨率是640-1136，iphone4的话，640-960。自己的手机分辨率多少，就建个多少的画布吧，分辨

率保持软件默认就好。

一张画布建好了。好，我们现在可以开始设计了。在这里，还要跟大家唠叨一点。看看你手机的最上端，黑色的状态

栏（就是手机上显示时间信号的东西了吗？），为了我们能在手机上预览时刚好占满整个屏幕，所以这个条条在大部

分情况下，需要包含到设计稿中。iphone下，这个条（Status Bar）的高度为40px。我们先画一个高40的条放上去，

然后呢，一堆的细节，按照下图的高度先画到画布里吧（注意，下图是3GS的分辨率哦，所以高度及宽度全部要乘以

2），这个对于大家实在是太简单了，注意分辨率就可以了。这个时候你可以用之前介绍的神器 PS play在手机上预览

一下。框架搞好，剩下的就可以开始设计了。

二、Web设计与客户端设计的异同点

第一步絮叨了好多，但其实对大家来说这些其实是真心太简单了对吧。对于如何设计，如何配色，相信各位专业的同

学都不会有问题的，所以我们也不打算在这里教大家如何来做这些了。那么，下边主要探讨下web设计和客户端设计

的异同点。

1、字体选用

字体是基础。在网页上，我们使用最多的可能是宋体，或者微软雅黑。那么，为了让客户端设计稿有较高的还原度，

这里雅黑或者神马宋体就会弱爆了，这些字体并不适合手机屏幕来显示。这里直接为大家推荐字体。

IOS：请直接选用冬青黑体或者华文黑体即可，推荐使用冬青黑体，效果更好。

Android：Droid Sans Fallback（其实冬青黑或者华文黑也可以考虑啦）

手机上字体的显示一般都会做字体的抗锯齿处理，那我们在设计稿里也来做相应的设置吧（这里我们不考虑极低分辨

率使用像素字体显示的情况）

至于字体使用多大号的，我们这里没有太严格规定，但有一点必须要做，设计完后，一定要导入手机上看真实效果具

体感受一下，因为在电脑屏幕上和手机上看，感受是完全不一样的，毕竟我们是来设计手机的应用。

2、细节为王

细节？对，在web端，由于我们的浏览介质是显示器，加上显示器分辨率及之前的设计习惯，所以有时候我们可以不

用太注重一个像素的移位等等的问题，但对于手机，可就完全不一样了，不知道各位同学有木有类似的感受，拿着设

计web页的赶脚做了一页移动端设计稿，导入手机上之后发现这完全是惨不忍睹啊，欲哭无泪有木有。

所以，如果你是大大咧咧风格粗犷的设计师，那现在就要加倍细心了，你的粗心和粗狂的风格会在手机上成倍的放大

放大再放大，比如发光比如投影比如字体一像素投影等等效果，这可不是时尚大气国际化哦，这是丑。当然，这个感

为了方便观察我们列表如下:

第一列为分辨率，第二列为宽高比，第三列为宽除以高的数字，第四列是备注啦(根据我们现有的测试机来统计的情况)

为什么要统计个呢。我们可以回到本文开头，这个情况下，我们是否在纠结，设计稿用哪种尺寸做呢?难道有这么多分

辨率我们就要做这么多设计稿吗?这是要逆天啊!!!恩，一想到这个问题就无比混乱。

好吧我们先把最好弄的iphone说完。 iphone有三种分辨率320-480，640-960，640-1136。分别对应3GS，ip4，ip5。

再往细了看，ip最终只有两种，一种3gs一种ip4和ip5。分析完感慨一下。apple多为广大开发者设计者考虑啊。ip4适

配ip5简直太简单了，因为宽度是不变的啊。

所以，在做ios开发时，我们可以选一种较大分辨率来做设计稿640-960或640-1136就好(取决于你的测试机)，这样从

大分辨率缩小到小分辨率就很easy了。直接缩小百分之50就好了，妥妥的。

至于剩下的(我们这里只考虑安卓，wp等先忽略)，那就是广大的安卓兄弟了，你会发现安卓的分辨率是多么的独特多

么的百花齐放啊(有没有想哭的赶脚啊?) 有同学问了，我现在只要做安卓的应用，用哪个尺寸做设计稿捏? 额。我这里

推荐480-800吧。如果安卓和ip一起开发的，我建议使用ip的分辨率来做，这样直接从640宽等比缩就可以了。

综上，优先设计ip分辨率尺寸640-960或640-1136。宗旨是从大往小缩。(原因?设计师都懂，有一次同事问我，能不能

把一张50-50的小的照片放大到5000-5000，我回复，去屎。。。。)

这里有同学会问了，安卓的适配还是没解决啊没解决? 我们再看一下上表，分析下数字。第三列，看比值。从0。56-

0。75 都有。但。相同的比值呢? 0。56这个最多。还有0。6 及0。66，以及0。75 。 (魅族这种奇葩屏幕不多解

释，需要单独适配。刨除smartbar后比值为0。63，小胖子一个)。这里就要引出屏幕精度的问题了。安卓的适配，最

终可以归纳为适配四种精度，说白了，如果要达到完美的效果，需要做四套图。

有安卓开发经验的同学可能知道。这四种适配。看下图。

根据实际开发经验，有时候为了省事，我们可以只来做第三栏，就是highdensity这个尺寸的适配，但最终效果并不能

保证所有手机都会满意。这个需要你和程序员同学达成默契。告诉他我是按照high density做的图哈。这个时候他们就

不会把你切的图扔到其他文件夹，导致实际效果图片不是超大就是超小。

剩余45页未读，继续阅读

内容反馈

weixin_38681286

粉丝: 1
资源: 898

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip