移动端店铺装修【郑州网站建设】

移动端网店设计稿件,最初设计稿件不太合适,所以做了一部分调整。【郑州网站设计

移动端店铺装修,郑州网站建设.jpg

 

一、开始我们的第一步

因为现在移动端网站设计大行其道,相信会有很多从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页的赶脚做了一页移动端设计稿,导入手机上之后发现这完全是惨不忍睹啊,欲哭无泪有木有

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

3、简单易用是主旨

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

举例:
比如,tab bar上的文字。 能写两个就不要写四个。 我的账户,我们可以简化成”账户”。
再比如。按钮,我们能放两个按钮,绝不放三个或者四个(选择恐惧症这个你懂的),以下是反例。犹豫5秒,你还不知道要点哪个么?

再再比如:相对于web页,我们不可能把所有内容都塞到手机的一屏,所以,主旨是一个屏幕中,我们需要让使用者完成一项或者一类功能即可。更多的功能可以通过跳页,弹层以及其他交互形式完成。
这里再唠叨一个小细节,ios开发中规定,按钮(可点按区域)的高度最好不要小于44px。所以,最好不要做太小的按钮,这样使用者会抓狂的。

4、分辨率适配

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

为了方便观察我们列表如下:
第一列为分辨率,第二列为宽高比,第三列为宽除以高的数字,第四列是备注啦(根据我们现有的测试机来统计的情况)

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

好吧我们先把最好弄的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-960640-1136。宗旨是从大往小缩。(原因?设计师都懂,有一次同事问我,能不能把一张50-50的小的照片放大到5000-5000,我回复,去屎。。。。)

这里有同学会问了,安卓的适配还是没解决啊没解决? 我们再看一下上表,分析下数字。 第三列,看比值。 从0。56-0。75 都有。 但。相同 的比值呢? 0。56这个最多。 还有0。6 及0。66, 以及0。75 。 (魅族这种奇葩屏幕不多解释,需要单独适配。刨除smartbar后比值为0。63, 小胖子一个)。这里就要引出屏幕精度的问题了。 安卓的适配,最终可以归纳为适配四种精度,说白了,如果要达到完美的效果,需要做四套图。

根据实际开发经验,有时候为了省事,我们可以只来做第三栏,就是highdensity这个尺寸的适配,但最终效果并不能保证所有手机都会满意。这 个需要你和程序员同学达成默契。告诉他我是按照high density做的图哈。这个时候他们就不会把你切的图扔到其他文件夹,导致实际效果图片不是超大就是超小。

回想起我刚做安卓设计的时候,偷懒,按照640-960分辨率来作图,切图,直接给安卓开发工程师,这个时候工程师默认把图片适配了high density。 结果就是,在手机里看所有的东西都大一号。 同样的情况,如果用低分的图适应高分的,整个程序就会一片模糊。

所以根据实际经验来看,使用480-800这样的分辨率来切图和适配是比较合适的。 一方面,低分辨率的屏幕现在越来越少了,另一方面,其实效果并 不会太过分。 可是,另一方面,extra high这样的分辨率是当前这阶段不能不再考虑的了。因为高分屏幕越来越多,1920-1080分辨率的手机也已经有了,为了保证效果,我们需要适配某些 主流的分辨率和机型。 比如魅族mx2, note2 。 也就是说我们要提供部分特别影响视觉效果的图来适配。举例:闪屏图片(不适配可能变模糊或者拉 伸),特别影响布局的图片(不做适配布局会乱套)

总之,在开发成本和效率上,我们要做出一些兼顾。 因为所有图片要切四套,适配成本及工作量就太大了,值不值得,各位自行考量,这里只提供本人开发过程中的一些考虑因素郑州网站设计小达人提供。

网站推广100种方法 郑州手机网站建设 郑州网站建设价格 郑州网络营销公司 郑州网站优化公司 郑州网站设计公司 网页设计师 网站前端/网页前端 网站优化 网站设计 网站建设

推荐新闻

推荐案例