1973阅读
4回复

移动客户端设计开发经验(2)-设计篇(原创理论)学习分享 [复制链接]

只看楼主倒序阅读使用道具楼主 梦舞飞扬 发表于: 2013-07-25

作者：hixulei

原文：

在《移动客户端设计开发经验(1)-流程篇》中，我们把流程搞通了。那么，在这一篇文里，要给大家奉献各种干货。相信作为设计师的我们，肯定会非常非常感兴趣滴。想了很久，弄什么地方入手呢? ok! 我们打开电脑，开始工作，那么除了qq还有邮箱，那么我们最爱的软件，肯定是下边这些啦:

好，不管你的最爱是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在手机上预览一下。框架搞好，剩下的就可以开始设计了。

图片:03.jpg

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

第一步絮叨了好多，但其实对大家来说这些其实是真心太简单了对吧。对于如何设计，如何配色，相信各位专业的同学都不会有问题的，所以我们也不打算在这里教大家如何来做这些了。那么，下边主要探讨下web设计和客户端设计的异同点。

1、字体选用

字体是基础。在网页上，我们使用最多的可能是宋体，或者微软雅黑。那么，为了让客户端设计稿有较高的还原度，这里雅黑或者神马宋体就会弱爆了，这些字体并不适合手机屏幕来显示。这里直接为大家推荐字体。

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

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

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

至于字体使用多大号的，我们这里没有太严格规定，但有一点必须要做，设计完后，一定要导入手机上看真实效果具体感受一下，因为在电脑屏幕上和手机上看，感受是完全不一样的，毕竟我们是来设计手机的应用。

2、细节为王

细节？对，在web端，由于我们的浏览介质是显示器，加上显示器分辨率及之前的设计习惯，所以有时候我们可以不用太注重一个像素的移位等等的问题，但对于手机，可就完全不一样了，不知道各位同学有木有类似的感受，拿着设计web页的赶脚做了一页移动端设计稿，导入手机上之后发现这完全是惨不忍睹啊，欲哭无泪有木有。

所以，如果你是大大咧咧风格粗犷的设计师，那现在就要加倍细心了，你的粗心和粗狂的风格会在手机上成倍的放大放大再放大，比如发光比如投影比如字体一像素投影等等效果，这可不是时尚大气国际化哦，这是丑。当然，这个感觉是需要一定时间才能找到的，唯一的捷径就是多在手机上预览效果图，多研究其它应用的细节。有时间可以尝试画画图标，这是个细致活。

3、简单易用是主旨

由于手机屏幕的限制，虽然现在分辨率高和精度特别高的手机不少，但我自己的经验，如果手机一个屏幕罗列太多的功能及操作以及元素，那这个设计及其可能是一个失败的设计。某人说过，少即是多。其实，要做减法真的不容易。这个是我们设计思路的一个转变的过程。

举例:

比如，tab bar上的文字。能写两个就不要写四个。我的账户，我们可以简化成"账户"。

再比如。按钮，我们能放两个按钮，绝不放三个或者四个(选择恐惧症这个你懂的)，以下是反例。犹豫5秒，你还不知道要点哪个么?

再再比如:相对于web页，我们不可能把所有内容都塞到手机的一屏，所以，主旨是一个屏幕中，我们需要让使用者完成一项或者一类功能即可。更多的功能可以通过跳页，弹层以及其他交互形式完成。

这里再唠叨一个小细节，ios开发中规定，按钮(可点按区域)的高度最好不要小于44px。所以，最好不要做太小的按钮，这样使用者会抓狂的。

4、分辨率适配

诶，想到这个就头疼啊头疼。上边我们做了个效果图，没错按iphone分辨率来的。网页要适配分辨率。手机还要适配，而且。非常麻烦啊有木有啊。我们来看下图:主流手机分辨率统计(我们假设屏幕dpi是一样的情况下。)

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

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

为什么要统计个呢。我们可以回到本文开头，这个情况下，我们是否在纠结，设计稿用哪种尺寸做呢?难道有这么多分辨率我们就要做这么多设计稿吗?这是要逆天啊!!!恩，一想到这个问题就无比混乱。

本部分内容设定了隐藏，需要回复后才能看到

（申明：此教程来源于网络，转载请注明作者，如需商业用途请与作者联系。请支持原创！）

只看该作者沙发 cwl823 发表于: 2013-07-29

LKANKAN KAN

只看该作者板凳 7631772 发表于: 2015-08-08

???????????????????????????????

只看该作者地板 倔强木偶 发表于: 2016-06-20

移动客户端设计开发经验(2)-设计篇

只看该作者 4楼 yuguorui8 发表于: 2018-09-01

发帖回复

返回列表

摄影

影楼

打包

下载

资料

帖子

资源包下载

移动客户端设计开发经验(2)-设计篇(原创理论)学习分享 [复制链接]


	http://vip.86ps.com 访问内容超出本站范围，不能确定是否安全


	关闭选中1篇全选