Tag Archives: 设计

移动设计师该了解的Android分辨率

安卓手机千千万,屏幕尺寸也千千万。作为移动端的设计师,仅仅用PS或者AI画出视觉稿,明显是不够的,还应该提供不同屏幕的适配方案。

移动端适配和Web页面适配有相似之处,一般来说,纵向由于可以上下scroll,不需要特别严格的控制,但是横向一般都是确定的,对于不同的宽度,设计师心中应该很清楚自己的设计稿应该如何呈现。对于Web页面,为了适应不同宽度的展现效果,主要会使用Responsive Design的设计技巧。Responsive Deisgn的原理是,宽度变化的小时,通过减少空隙或者按照%来计算宽度,宽度变化太大时,就换一种layout。

安卓端的适配也类似,一般来说,都属于宽度变化较小的情况。但是现在大屏手机层出不穷,为了较好的大屏体验,有时可能也需要layout上的变化。

1. 这里就是100px,为什么程序员不能画出一样宽度的?

不同屏幕上,px和px是不一样大的!要说完全一样宽,那必须是100 Inch或者100 mm这样的单位,才可能表示不同屏幕上的完全对等宽度。可惜现实是,机器只认px。更加糟糕的是,安卓程序员只能使用dp单位。

2. 什么是高清屏

高清屏仅仅是分辨率高?1280*720?错。一个像素1px的大小越小屏幕越清晰。你可以理解每个像素点为一个矩形,越小越好。这里就有另外一个参数,就是像素密度,每英寸里有多少个像素,比如魅族MX2的像素密度就是343ppi,就是说每英寸有343个px。显然,像素密度越高,一个像素越小,屏幕越清晰。

3. 安卓程序员控制的dp单位和px如何换算?

其实这个不重要,仅仅是一些数学计算。重要的是,你可以认为每个dp在不同的设备上一样大

4. 不同手机的宽度有多少dp?

公式为,宽的像素数 / ( 像素密度 / 160 )
计算一下我接触到手机的宽度:

魅族MX2: 800 / (343 / 160) = 373.18 dp

小米2S: 720 / ( 342 / 160 ) = 336.84 dp

三星5S: 1080 / ( 432 / 160 ) = 400 dp

可以看到,三星的5S要比小米宽了约20%。如果直接用px像素数计算区别,恐怕程序员永远也实现不了你的设计稿。

5. 高度需要考虑嘛?

如果你的设计需要认真的考虑高度,其实是同理的,按照计算dp的方式,计算出手机的宽和高的dp,然后决定在不同长宽比的情况下,layout如何自动适应。

6. 如何告诉程序员尺寸?

最好是能直接说dp数是多少。

在PS中,设计师一般拖一个1280*720的canvas直接就画了,然后跟程序员说,这个是多少多少px。程序员抓了半天头发,想了半天,要么根据宽度,重新算一遍得到dp,要么就完全凭感觉吧。。

在实践中,一些设计师会以320ppi, 1280*720的屏幕参数作为基准,此时,一个2px = 1dp,这时设备宽度为360dp。这个仅仅是大致的估算,对于小米2s和MX2的适配可以差不多近似。

7. 更好的告诉程序员尺寸的方法

我个人认为,设计师无论画布有多大,在最终导出的标注图时,可以让标注图的px宽度值为一个实际手机的dp宽度值。例如,为小米2S的导出一张宽336px的图,为魅族MX2的导出一张宽为373px的图,看看两张图的效果。

不过,这样,导出的两张图中的细节尺寸不一样大呀?这时候,对于固定px宽度的元素,设计师就要以某个宽度为准,标注以后,另外一张图在实现的时候,细节尺寸也按这个来,中间的空隙可以自由伸缩。

程序员看到这样的标注图,也很轻松,因为直接认为1px=1dp了,不用换算,直接写就行。

从需求到网站:(三)视觉设计

接前一篇:从需求到网站:(二)产品和原型

从前这个活叫美工,现在还是很多人这么称呼。很多人从骨子里就没把设计当回事,很多淘宝店主招了几个自学PS的“美工”就开始淘宝生涯了。所以淘宝的UED真心很不容易,天天看那些商品详情页面做的乱七八糟,自己也无力回天,只能尽量从自己可以控制的地方加以控制。

会PS跟会设计完全没关系,我认识的一个非常厉害的设计师就不用PS,直接用AI(Adobe Illustrator)。设计工具仅仅是工具,如果没有审美的天赋,又不学习着去遵循设计的原则,那只能做出来自我感觉良好的页面,用户一用就觉得没质感。

视觉设计大约有下面几个方面。

排版布局 (layout)

就是说文字和图片应该放哪,放多大,行距多大,段落间距多大。比如本文,被转载到人人上和qq空间里,就丑爆了,标题完全和正文没区分开。通过文末的链接点回我的博客网站,就看起来舒服多了(这不是骗PV啊喂!)。好友biaobiaoqi最近在博客里解说了一本设计书里提到的原则,对想了解设计的人还是很有用的,可以一看。

排版布局是看起来简单,但十分难做的一件事。很多人不屑一顾,校园内的很多海报就是因为layout太差而实在太丑,重点不突出,让读者不能简单明了的看清楚所呈递的信息。例子也一时不好举,凡是你一眼没看明白干嘛,看第二眼第三眼还没明白,只有集中精神去找上面的看不清的字(不一定是小字哦)的海报,基本就失败了。

在字节社买过电子书之后,就觉得,在手机/平板上看电子书原来也可以这么享受。再看其他的电子书软件,好容易买本书,跟网上下一txt没啥区别,排版就是一坨shit,标题跟正文就一个字号,连个加粗都没有,真是气不打一处来,买你何用!我才不付费呢。搞互联网的人以为把一行行的字放到屏幕上显示就叫电子书了。实体书的装帧、排版、精致的印刷你懂么?

配色(color scheme)

这玩意也是说起来容易做起来难。你说自然界那么多种颜色,要选出几种搭配起来看着顺眼的,多不容易啊。还好有很多傻瓜式的配色理论来帮助我们。比如在色轮上按一定规则选颜色。这有一系列文章介绍颜色,写的挺实用:color theory。还有色彩设计的原理这本书,也挺不错。顺便,他家的版面设计的原理也挺不错,讲layout。

字体 (typeface)

字体这玩意水也很深。这两年中文字体设计也渐渐重现光彩。英文字体理论、实践都相当完备,横扫天下的是Helvetica。也许你没听过这个名字,但是你觉得见过。这个字体牛逼到有一部纪录片专门讲这个字体的前世今生。

字体的复杂不光在字体本身,在web上,你还关注另一个问题:字体渲染。就是说字体设计成那样的了,但是操作系统跟浏览器怎么画这个字又是另外一回事了,windows在此事上又一次充当了被骂的角色(IE6这种就不提了,好歹也是开创一个时代的浏览器)。欢迎关注知乎的字体话题。

能用在web上的中文字体有限,原因有两个:一个是大家机器上都装了的字体不多;另一个是,如果打开网页的时候后台下载一个,中文字体数量多文件又太大。所以,一般就宋体/黑体/微软雅黑有限的几种选择。当然,网页中的字体是可以设置fallback的,就是前一种字体没有,自动使用后一种。想要各个操作系统下都好看,可以参考知乎的字体设置。

这样说来,其实我对设计也不是很懂,凯凯而谈没啥用啊。因为程序员最爱的还是命令行了。

而需求神话的视觉设计也出炉了!其实没画完了,折腾了一下午加一晚上,还是觉得丑。还是交给老婆大人吧。。。半成品先发出来,表示这是视觉稿alpha1。

update:妹子大人万岁!比我画的好看多啦!

============ 本文是一个系列,其他已经写好的文章: