随着米3的1080p分辨率的出现,我们现在做的720P主题或多或少都会在1080P上出现一些BUG。那么对于暂时还没有设备测试的设计师和制作者们想必是一个比较头疼的事情。所以这周我就教大家在没有设备的基础上如何能比较有效的解决1080主题的适配问题。下面将采用Q&A的方式讲解。Q :拨号键盘错位。A:dialer_buttons.png 这张图片为png,需要重做1080尺寸,720的尺寸放大1.4倍,图放入xxhdpiQ: 分页指示器错位A:大部分主题出现,1080重做,720的尺寸放大1.4倍,图放入xxhdpiQ:quickcontact_track_background.9.png 高度不够,导致错位A:需要做1080的尺寸,把720尺寸放大1.4倍,图放入xxhdpiQ:进度条内容区偏移,开关,进度条等都会出现此问题。A:每一组部件不论在720还是1080,都应齐全,才能保证在不同分辨率下等比压缩。Q:收起拨号盘按钮2态被拉伸A:适配1080的pressed状态,或者把720的normal状态补全。Q:两行联系人时,TAB栏会遮挡住下面的最近联系人。A:title_bar_bg_one_row.9.png ,title_bar_bg_two_row.9.png,title_bar_bg_three_row.9.png 这三张图另 做1080尺寸,720的尺寸放大1.35倍,图放入xxhdpiQ:小豆豆文字及图标错位A:关于小豆豆的制作,不仅要放入 常态 与 二态,还要有disable(不可按)状态,想要在多分辨率不错位,三态缺一不可。 总结:将720移植到1080与当前 720主题适配480主题所出现的问题都类似,相比形状复杂的主题,只是单独替换橙色的主题更容易出现问题,因为有些作者只是在720中放入了二态(pressed)图片,却没有放入常态(normal)图片,所导致的就是在不同分辨率下系统不能都等比压缩,从而出现错位现象,一般存在disable,normal,pressed的系列图,都需要配套出现,不能只出现一个状态。
2015年05月05日
by叛逆yu
马上就要到我们的一年一度的中秋节了,想必大家有可能已经在为中秋节设计一个庆典主题了,但是毕竟中秋节和新年不一样,如果只为一天设计一个主题,想必比较劳民伤财。那么我们是否可以换一种玩法呢?使平时的主题也能在过节当天有点新意思呢?没错,我们可以换一个新玩法,在主题里植入彩蛋。 请大家观察下面两张截图的红框部分,是否发现亮点了呢?是的,中秋节当天显示的内容变了。“Honey”变成了“Honey祝你中秋节快乐!”了。想达到此效果,我们只需要把左边红框部分的内容写在以下代码(两个Group之间)把右边边红框部分的内容写在以下代码(两个Group之间)此彩蛋适用于锁屏,百变壁纸,时钟插件对于设计师:可以发挥你们的想象,在这三个地方做一些彩蛋设计,可变的内容可以是一整张壁纸,也可以是一句话,也可以是一个小图片等等。对于制作者:可直接复制此代码协助设计师制作完成彩蛋。测试的时候,我们可以把手机的时间调到中秋当天测试效果。
2015年05月05日
by叛逆yu
大家是否还记得之前教大家如何制作个性拨号盘呢?在之前,要实现高度比默认高很多的拨号盘,是需要通过改dime值实现的。 好消息是自稳定版JLB21&最新开发版以后,我们做比默认高度还高的拨号盘,已经不需要改dime值了。直接是我们拨号盘做多高就显示多高。散花~~ 但这个改变也许给一些旧主题带来新的BUG,例如我下面列举的例子:阿狸Ali-v5-1.0.0.5制作者把dialer_background.9.png这张图做成了330的高度。然后把dime值改成了244,即是说实际显示的效果的高度为488。 结果在改实现后的稳定版JLB21&最新开发版就出现了如下图的BUG。这是因为dime值失效了。直接显示了图的高度330。 解决办法:把dialer_background.9.png这张图也按实际的显示效果488做。dime也依然值改成了244。这样是为了兼顾(稳定版JLB21&最新开发版)和(比稳定版JLB21&最新开发版旧的版本) 此外,因为我们还多了台湾的用户,台湾用户拨号盘的数字图是和我们不一样的,图的路径为:com.android.contacts\res\drawable-xhdpi\dialer_buttons_zhuyin.png 对于设计师:我们建议把这个图也设计了,因为他的布局和我们简体版不一样。 对于制作者,如果设计师没有设计这个图,我们就把dialer_buttons.png这个图复制一份,改名为dialer_buttons_zhuyin.png进行适配。
2015年05月05日
by叛逆yu
Question 1: 在制作MUI主题的过程中,也许有很多人会在480里遇到以下截图的BUG。这是比较懊恼的问题。下面我就来教大家怎么解决此烦恼吧。 首先把preference这系列图都改成480的尺寸。(图左右的空白像素都不能超过10像素;横向内容区的黑边除空白像素外,都画满。)v5_preference_first_item_bg_normal.9.png,v5_preference_first_item_bg_pressed.9.png,v5_preference_last_item_bg_normal.9.png,v5_preference_last_item_bg_pressed.9.png,v5_preference_middle_item_bg_normal.9.png,v5_preference_middle_item_bg_pressed.9.png,v5_preference_single_item_bg_normal.9.png,v5_preference_single_item_bg_pressed.9.png 其次把v5_progress_bar.9.png,v5_progress_bar_small.9.png,v5_seekbar_progress.9.png。这三张图也改成480的尺寸(720缩放成66.7%)。Question 2: 此外,主题里有一部分图是分normal和pressed两态的,当我们形状用和默认一致,只是希望pressed态换个别的颜色时,往往我们在主题包里都不习惯放入normal态的图,而只放入了我们改后的pressed态的图。这样,在但分辨率,如720分辨率的情况下,是不会有什么问题的。但当应用在480,或者1080分辨率的手机上时,就有可能出现图标错位,变形等问题。 所以当我们只改pressed态的图时,需要把normal态的图也放入。下面我为大家提供下该类图的截图,希望能给大家带来帮助。Question 3: 当大家出现以下截图的问题时,解决办法:1.如果是单分辨率,如720P,那么多半是因为小豆豆只放入了normal和pressed两态,disable态没放入,或者漏放了一个或几个这样的图标,请认真检查每个小豆豆的图标是否每个状态的图都放入了,是否dark,light都放入了。2.如果是跨分辨率出现此问题,那么一样可以用1的办法解决。3.如果你是没改小豆豆,只改了小豆豆那圆圆的背景,跨分辨率出现此问题,那么解决办法是,吧小豆豆的圆圆背景做一套480P的或1080P的放到对应目录。4.小豆豆和小豆豆的背景都是属于系列图,牵一发而动全身,所以改的时候必须改全,而不能只一两个,也不要漏改。不然就可能出现各种错位的问题了。PS:关于之前每周一招提到的480&720P必做的图,这周的主题编辑器已经为我们提供了这类必做图的适配功能了。请大家下载最新主题编辑器更新吧。能有效的提供你的工作效率和减小BUG出现率:主题编辑器:http://www.miui.com/thread-642823-1-1.html
2015年05月05日
by叛逆yu
其实系统弹窗也是我们整个主题的重要组成部分,没当你按下菜单键的时候,它就会跳出来。当你收到短信时,在桌面的弹窗。当你进去编辑模式编辑东西时,确定和取消的按钮也会出现弹窗。等等。。这期我会告诉大家弹窗的实现原理,帮助大家更好的去设计主题。那么我们进入主题吧! Miui系统的弹窗上的list(列表)是由first(上)、middle(中)、last(下)、single(单一)组成。每条list(列表)都有两态:normal(常态)、pressed(按下态)1.当只有一行内容时,调用single(单一);2.当有两行内容时,调用first(上)和last(下);3.当有三行或三行以上的内容时,第一行调用first(上),最后一行调用last(下),中间多条重复调用middle(中)。 对于设计师:基于这个原理,我们可以发散思维,把他设计成别的形状,别的文理图案,而不必拘谨只能和默认主题一样只是一个长方形,纯色。但在设计文理图案的时候,你需要考虑好上、中、下的拼接,因为当list超过三条时,中间的middle的这张图就需要重复调用,这时,你的文理图案就有可能出现拼接错位了。如: 此外我们在设计多个列表弹窗的时候,还需要考虑控件弹窗,因为控件弹窗上的list调用图和是多个列表弹窗一样的,如下图: 对于制作者:当设计师设计出不是纯色的弹窗时,我们第一反应也许是把文理图案就做到弹窗的背景图上,但这样就会出现弹窗拉伸效果不好的情况。所以我们可以考虑把图案文理做到list的normal(常态)上面,这样或许就能实现设计师想要的效果了。
2015年05月05日
by叛逆yu
这期教大家如何制作特殊高度的拨号面板,这里之所以说特殊,是因为这种面板会和默认高度不一样,可能会比默认的高出很多,这样即使我们按默认的切图去做,系统也无法显示我们想要的高度。此时我们就需要改一个dime值去适配了。 下面我们以ios7的主题做详细讲解: 设计稿上的拨号面板的高度是674px(图1),比默认的要高出好多。要是我们直接切图切成674px放进主题包里,那么显示的效果就会(如图2)所示,拨号的底板被压扁了,数字完全错位。 此时,我们找到在主题编辑器里找到模块:通讯录与拨号(com.android.contacts),选dimen, 找到dialer_buttons_height,把值改成674px/2,即337。(如图3)。 此时再倒入主题,你就能完美呈现和设计稿一样的拨号面板了! 720我们完美适配了,但我们可不能忘记适配480的机型哦。 480的话,对于数字的那张dialer_buttons.png,我们只需直接缩放66.7即可。 但对于dialer_background.9.png这张拨号背板的图我们就不能简单的这么做了,这么做就会出现图4的显示效果,非常难看。 解决办法是: 1.把dialer_background.9.png这张图按73.5缩放,得出高度495px, 2.把dialer_background.9.png这张图按66.7缩放,得出高度447px, 3.用495px-447px=48px 4.把按66.7缩放的图dialer_background.9.png往上加48px的透明像素。如图5。 5.导入手机就能完美适配480了,如图6。 对于此适配方法只是适用于改过拨号盘高度dimen值的。没改过的,适配480,只需要把两张图直接缩放66.7即可
2015年05月04日
by叛逆yu
开关篇:开关主要分成四大部分,依次为1.按钮层 最上层v5_sliding_btn_slider.png 按钮v5_sliding_btn_slider_pressed.png 按钮按下2.遮罩层(盖在v5_sliding系列图最上面的一层)v5_sliding_btn_frame.png3.形状遮罩层(控制开关内容的形状)v5_sliding_btn_mask.png4.背景层v5_sliding_btn_off.png 关时背景v5_sliding_btn_on.png 开时背景5.不可按状态v5_sliding_btn_off_disable.pngv5_sliding_btn_on_disable.png拿到psd先把开和关以按钮为中心重叠,这是的总宽度就是底背景的宽度。开关宽度×2-按钮宽度=底背景宽度 需要注意的是,部分开关按钮带有阴影,切图时候需要把这部分的宽度,用透明区域适当的加到v5_sliding_btn_frame.png 和v5_sliding_btn_mask.png。v5_sliding系列图的高度必须保持一致!最后至于形状和样式,只要发挥你们的想象力即可。拖动条篇:拖动条和开关一样主要分成三大部分,依次为1.按钮层 最上层v5_seekbar_control_disabled.pngv5_seekbar_control_focused.pngv5_seekbar_control_normal.pngv5_seekbar_control_pressed.png2.形状遮罩层(控制开关内容的形状)v5_seekbar_progress_mask.9.png3.内容层v5_seekbar_progress.9.png4.背景层v5_seekbar_bg.9.png当做纯色拖动条时,可参照主题编辑器中提供的默认主题的模板的方式和大小来切图。当要做带文理的拖动条时:下面以贝塔为例子,我们切图的时候,背景层(v5_seekbar_progress.9.png)的宽度直接按PSD的尺寸切出,如图2,高度只需v5_seekbar系列图保持一致即可。点9的画法也可以参照图2。图1图2
2015年05月04日
by叛逆yu
在MIUI主题中,需要适配480P和720P两种不同的分辨率,而在制作主题过程中,由于制作者受使用机器的限制(如只有1部小米2代),往往无法同时兼顾两种或两种以上的分辨率。 在MIUI的主题机制中,大部分的720P资源可以在480P上使用,但有部分资源在直接套用时会产生那个错位现象,需要在480P目录中单独重新制作这部分资源。 常见的资源错位有以下几部分。在以下列出来的部分素材中,需要在drawable-xhdpi和drawable-hdpi目录下同时制作720P和480P的资源,如果单独制作720P部分,则该主题在480P上会出现错位现象。 (1)拨号盘和数字键(com.android.contacts):dialer_background.9、dialer_buttons.png。 (2)系统桌面缩略图模式(com.miui.home):home_button_sethome_on.png、thumbnail_bg.9.png、thumbnail_bg_current.9.png、thumbnail_new_screen_p.png。 (3)短信表情选择页(com.android.mms):smiley_tab_bg.9.png、smiley_tab_image_creature_normal.png、smiley_tab_image_creature_pressed.png、smiley_tab_image_lifestyle_normal.png、smiley_tab_image_lifestyle_pressed.png、smiley_tab_image_smiley_normal.png、smiley_tab_image_smiley_pressed.png、smiley_tab_symbol_normal.png、smiley_tab_symbol_pressed.png、smiley_tab_text_normal.png、smiley_tab_text_pressed.png、smiley_back_normal.png、smiley_back_pressed.png。
2015年05月04日
by叛逆yu
大家好,本周MIUI Turbo Team将继续教大家MIUI主题的制作技巧,第四周的主题为——.9图的绘制技巧。 在MIUI主题中,含有大量的.9.png的图片,如果能正确的绘制,不仅能使主题更加不拘一格外,还能节省系统资源。论坛里已经有很详细的.9图说明和教程,现在以具体的例子来说明下.9图的绘制技巧和应注意的问题。 以钢铁侠的弹窗为例。下图(图1)为第一版钢铁侠的弹窗样式。在(图1)的左半部分,在红框部分,.9区域只有1个像素点,这时候由于拉伸的区域不能完全将bottom按钮给完全包住,因此产生了错位的现象。 而在右半部分中,.9区域从1个像素点改成2个像素点之后,拉伸区域完全,bottom按钮可以完全落在灰色拉伸区域上,这时候就不会产生错位现象。 此外,在绘制.9图的过程中,除了可以参考官方默认尺寸之外,可以根据需要适当的调整图标。如(图2)所示。 在(图2)中,左半部分是根据官方尺寸绘制的大小,但由于改图不含有图案、渐变等元素,在纯背景图中,.9的拉伸不会破坏图形的样式,因此将图适当压缩,纯色拉伸区域可适当缩小,通过调整图形的尺寸来改变图形大小,这样不仅能压缩主题包的大小,还能节省系统资源。 而如果背景有图案或者其他样式,在绘制.9区域的过程中,需要根据具体的情况做出相应的调整,避免出现拉伸区域落在图案或样式上的现象,在有条件的情况下,应试试拉伸区和内容区不同的组合,多注意拉伸区和内容区的对应关系,以到达最佳的效果。
2015年05月04日
by叛逆yu
第三招:局部调用 大家好,本周MIUI Turbo Team将继续教大家MIUI主题的制作技巧,第三周的主题为——局部调用功能。 在MIUI主题中,有时候部分模块的元素是与MIUI全局元素有冲突的,大家是否遇到过这样的情况而不知道如何处理?本周我将教大家如何处理这样的情况,让主题更加不拘一格。 下面以钢铁侠为例。 在钢铁侠这款主题中,短信背景与联系人背景是不一样的(图1),而我们知道,在MIUI主题机制中,全局背景图是调用framework-miui-res\res\drawable-xhdpi目录下的v5_window_bg_light.9.png文件的。 当设计稿中出现两个不同样式的背景(元素),需要怎么办呢? MIUI的主题中提供了局部调用的功能,在不同模块中,可以分别调用MIUI全局的元素,而不影响到其他模块和全局功能。 此功能分为两部分:(1)主题元素单独调用;(2)字体颜色单独修改。 一、主题元素单独调用 以拨号与联系人背景为例,为了单独独立出不同于其他模块的背景,需要在联系人模块(com.android.contacts)下单独建立framework-miui-res文件夹,目录结构如(图2)所示。 framework-miui-res目录与res目录同级,在这个目录中修改需要替换的元素,如tab栏、背景等等MIUI全局支持的任意元素,这样该主题元素就会单独在这个目录生效,而不影响其他模块和全局的调用。 二、字体颜色单独修改 当替换完背景之后,字体颜色如果使用全局的颜色,有可能会出现问题。这时就需要对字体颜色进行单独修改。 打开主题编辑器,选择模块,下拉选择需要单独修改的模块,在同步好素材库后,点击主题编辑器上栏的切换编辑模式(图3),进入编辑theme_values.xml修改代码模式,并从下拉单中选择miui(图4)。 之后就进入了熟悉的修改字体颜色界面,选择需要修改的颜色字段,进行修改即可。例如在这里我将单独修改拨号模块中小豆豆的字体颜色(图5),此项修改并不会影响其他模块以及全局模块,而是独立进行的,不会破坏主题的整体结构。 好了,本周的教程结束了,请期待下一周新的主题制作技巧。MIUI Turbo Team
2015年05月04日
by叛逆yu