环形设计理论
非常UI:“这为老兄技术非常扎实,这篇文章有很多非常受用的技术性理论,但是,如果能够读完这篇文章的朋友会发现,有一点问题就是动画是在Flash里面做的而不是PS~”。
距离上一次写设计经验,已经过了8个多月了,也就是扎扎实实的又苦干了8个月后,才敢写这一篇出来,不然就有点扯蛋了。个人觉得这次写的会比之前的知识点多,所以有兴趣的同学,可以认真的去思考,不然7、8千字的东西,不会一下就消化的。
这次我会从4个层面去描述,分别是产品,设计,程序和行业去分别讲设计。设计是一个圈,起点在那,终点也在那,所以我命名为环形设计论。
感谢honfan的人物配图,有兴趣的可以了解下他的个人主页:http://www.zcool.com.cn/u/353331/
下面我会用我最近做的多米音乐5.0的设计来引开整个话题,整个产品的产品形态,交互,视觉 都是我和老板两人没日没夜的“基友爱”之结晶,当然整个团队在开发过程中不断的挑战,也起到了关键性的作用,这里假设没有这些挑战,是不可能有产品的最终形态的,所以我认为,越是激烈的挑战,:)就越能把设计做到极致。
以下正式开始分享经验:
产品
这个项目正式启动,在今年的8月份,通过封闭2个月和非封闭2个月的设计开发,一共4个多月,安卓和苹果2个平台都顺利完成。而项目是从今年年初就开始想做的,因为4.0在产品和交互的层面上,都没有做到很好的一个开始和可延续性,所以,怀着这个遗憾,会努力的想在5.0的基础上去把这个产品去完善。
5.0最开始的理念是“家”,更容易理解的,叫个人空间。我觉得热爱音乐,会有寻找音乐和收藏音乐的需求。那么,需要一个自己的空间去储存这些收藏的音乐,也需要一个广场去寻找音乐。那么。我把整个音乐软件,分成了“家”和“商店”两个维度。
设计通过右下角的按钮,快速的切换这两种不同场景。
首先,假设我们有一个家后,会把家里的空间划分开,做客厅,卧室,洗手间等等。同样,如果自己有一批的音乐,同样也要去划分,分为不同使用场景,不同的风格类型。而商店也是同样,则需要各种分类,各种方式去帮助用户找到他们心仪的音乐。
但是,经过一段时间的使用会发现,当我们拥有很多音乐后,并不是单纯的通过“家 ”就可以把音乐好好的使用,音乐既是一个私有的,又是一个可以用来交流和沟通的工具。所以,要把私有化的设计,扩展到社区化的一种概念中去,才会通过音乐,获得更多的音乐和朋友。
所以,改造最初的5.0第一件事,就是要把自己的家开放出去,除了原本的家里分类,还要让自己的家像国外的家庭一样,可以举办party。那么如果是要举办party,则需要自己的家空间更大,可定制的功能,需要加强。围绕着这些点,得出了新的结果:
从空间的分配上,首先给自己的个性空间,划分出了一个领域,用于展示自己的性格和头像,然后,再通过固有的一些分类,和自建的分类,来展示自己的音乐空间。
而对于自建的空间,同样可以自定义的装饰。达到更好的展示效果,用图形和文字表达对这个空间中的音乐的描述和感觉。
在软件操作的方式中,采用侧边栏无限扩展模式,可增加多种获取音乐的方式。这样对版本迭代来说,不用因为新增模块而改动框架结构。
对于“商店”,也就是获取音乐的途径,会分为推荐类,搜索类,社区类,发现类几种。这里不细述,可以在使用软件的过程中去体验不同分类中获得音乐的方式和效果。
那么整个产品的形态就设定好了,接下来就是进入 设计阶段。
设计
设计中,分几点去讲:
- 计算
- 平台特性
- 细节
- 均衡
计算
UI设计其实类似于工业设计中严谨的造型设计,只是大部分通过了平面式的排布方式去进行设计的。所以,计算在设计中,是非常必要的。就好比如果工业设计中不计算好每个零件的关系,是不能让各个零件配合拼装一样。而每个零件都有特定的大小和材质,也才能发挥其作用一样,UI设计其实也是一样的。
首先,对于不同的系统,我们去了解不同的系统的特征,比如iPhone按钮的标准大小,是通过计算的出来的,安卓的也同样。为何会有标准这一说,因为标准代表着各种计算后最后得出的一个参数,比如一个按钮的大小,在屏幕中点击的最佳范围,这些就是计算后的结果。当设定系统的人把标准公布的目的,是告知在这个系统的开发者们清楚的知道,这些标准是的意义在哪,而设计师很容易忽略这一点。
那么,为了保证每个按钮的点击区域都能满足正常的使用,先要为每个按钮的控件根据标准设定好大小。还有就是物件之间间距等,一旦这些基本的参数都设定好后,接下来就是从美感和功能区域去划分了。
说回平台特性,安卓的图形输出是属于适配型,苹果IOS是属于固定型,所以相对而言,IOS的设计稍微简单一些,但是,苹果在iPhone5之前的机型,屏幕比例是存在不合理的地方 ,高度不够,整个可设计的区域相对与安卓来说,会比较矮。所以iPhone5做了很好的改善,加长了这个区域,分辨率从960x640的比例改成1136x640就是这个目的。
重点说一下安卓的机型,首先在设定的时候,要定好是在1:1 1:1.5 1:2等这些DP转换去开发。这次我的设计,从现有大量的机型来说,我才用了1:1.5的换算方式去做。也就是在480x800的基础上设计。那么,每一个输出的尺寸,都是要符合能被1.5整除的可能性。为何要这样?因为这样才能做到100%还原。
比较关键的点,就是即使整除,也要注意为偶数,比如75和72都能被1.5整除,两者之间,要选72,尽可能做到偶数结尾,为何?举个最简单的例子,如果你的这个75的区域中,需要出现文字,那么假定是14号字体,75-14=61,如果我要居中显示,则会出现上下各30.5像素的结果,也就是说,这个字体会被拉长,或则不对齐等等结果。
那么有人说,那假设是13号字体呢?没错,一般,奇数结尾的字体,都会比偶数字体结尾的要模糊一些,甚至在不同机型,会出现更多奇怪的结果。我做了10款不同分辨率机型的测试,最后实现后的效果证明了,只要是偶数的,几乎不会出现什么问题。而刚刚字体的例子,也同时在图形上体现过被拉伸的可能性。
所以假定是选择了1:1.5比例的设定话,最好用Excel做一个计算表格:
这样我们能随时计算出像素和DP之间的转换,方便输出后程序实现的时候不会 出问题。
(有知道代码的同学会说,安卓是可以认得出类似30.33333这样的参数的,那么你可以试验一下,30.333和30.4的结果,会不可控,避免奇怪的问题,就从了1.5倍数这个老衲吧)
Ps:使用.9.png的格式的话,也要注意文字显示区域的那个位置,保证你设定的区域符合倍数的要求,不然文字会糊掉。
Ok~那么既然需要不断的被1.5的倍数所限制,设计上会不会有很大的限定?其实,正因为这个限定,解决了很多我们需要凭感性判断的地方,比如列表的大小,按钮的大小,这些都是通过计算限定出来的,那么,还存在有些傻X产品或老板和你说:这里的按钮要大一些,这些文字要大一些这种说法吗?你可以和他说,这是公式,懂不,高级不…
而假定你的图标大小是48x48像素,也就是32DP的话,建议要做到比48大的输出尺寸,比如60x60,这样,你在修改这个图标的时候,可以有剩余的空间给你作调整,或则是可以利用这些空间给你调整实际显示的效果,比如需要制造一些间距的时候,在一些程序上不方便调整的时候,改变图形即可得到这个结果。
那么以播放界面为例,所有的按钮,图形显示区域,边距,都是先通过感性去设计和排布,感觉一下这样设计的美观度,操作感觉是不是良好。然后再通过公式计算后得出的结果,整体效果而言,就会非常的工整,并且在每个机型上,都可以等比例还原。
一旦熟练的运用计算这种方式去 设计后,你会发现整套软件的界面设定,会变的高度统一和一致性。
平台特性
刚刚有提到平台特性的部分,比如安卓和苹果之间的输出方式不同。
还有更重要的是交互特性,比如安卓2.x的系统中,会有很多出现“返回”按钮的地方,而4.x的系统中,因为把返回按钮直接做到了软件的最下方,那么,则不需要重复设计这个返回按钮。试想一下,一个老款安卓手机上装的是4.x系统,你设计了一个返回,屏幕下方还有一个返回,硬件还有一个返回…
但是在苹果系统中,因为只有一个home键,返回的按钮是必定存在的。所以,在不同系统中,我们要考虑到这一点。所以在设计不同平台设计的时候,需要不断的考虑这些。
加上性能的分配,苹果在图形显示的时候,是优先的,比如你滑动的时候,他的cup是100%分配到滑动动画中,所以苹果的动画会很顺滑,而安卓系统则不是。所以在设计的时候,也要考虑不同平台的图形展示能力。苹果的图片拉伸方式,和安卓拉伸需要.9.png的格式使用等,这些都是平台的特性。
有时候我们会听到程序说:这个做不到,实现不了。大部分就是这个原因,排除某些程序员真的技术不咋的之外,很多时候都是因为内存分配等问题,我们的设计不能被实现,在设计的时候,需要关照到他们的领域中去,这样在和程序实现配合的时候,会很方便很多。
细节
关于细节,这是每个做ui的人必备的一个观点,细至1像素,不管是16x16的图标,还是1024x1024的图标,都要每个像素细扣。有些人喜欢把图做大,然后缩小后就看不出来,尤其是现在的分辨率越来越大,这种细节其实被忽略的越来越严重。
这里引用我以前学生时期一个老师与我的对话:以前画石膏的时候,我喜欢把五官刻画的很精细,但是头发的后面,我会简单的画好大形体后然后模糊掉,老师问我,为何这里要模糊,我说为了拉开景深,更有空间感。老师只说了一句:后面是模糊的,但是也是存在的,不代表可以不画。这句话我至今受用。
我们如果设定好了每个图标的大小,那么就开始在这个区域里面,精确到每个像素的去刻画。
对于这次的图标绘制,我采用了几何形剪切的方式去处理。比如:
整个形体都是根据几何形剪切出来的,所以形体很标准,很干净,修改的时候,也很方便的通过调整几何形就可以修改到造型和细节部分。
一些图形界面部分也同样,要去找到你设计的根据,比如光盘的大小,标准CD-R和DVD,外圆直径≤118mm,内圆直径≥22 mm。这是百度的结果,实际拿尺子去量,会有几毫米的偏差。得出这个结果后,然后再设计中需要去真实运用上去,当然也要根据实际的情况,做一些细微的调整。但是整体的比例是对的,就会给人看上去“顺眼”,因为和你平时看到光盘,是一样的。我们日常看的各种形体,是有其形态的记忆的,所以你在设计类似真实物件时候,最好看看原本的比例,去了解清楚为何这个比例会是这个设定,你在设计中还原的时候,才不会出现很大的偏差,尽可能不用感觉去调整大小,而是去真实的找到答案。
均衡
设计的时候“均衡”是很重要的一件事情,就比如程序的可实现性。如果你的设计会和程序实现很大的冲突,那么要懂得改变你的设计去配合程序,达到最均衡的效果。
比如: