在设计主题的过程中,很多设计师都只将短信对话框做成单一的模式,其实MIUI的主题框架支持短信气泡样式多样化,如添加形状、花纹等。 以米兔为例:在米兔主题中,对话框出了单一的方框式之外,还加上了兔子小尾巴(发送短信时),和米兔军帽(接收短信时)的小点缀,这样不仅使对话框不再单一,而且还能增加主题的趣味性。 但在设计的过程中,需要注意的是,必须要留出文字显示区域,在此区域上最好不要添加花纹或图案,否则对话框在适应文字内容的同时,可能会把点缀的图案给纵向或横向拉伸,导致整体效果被破坏。 实例:在画.9的时候,拉伸区不能触碰到图案上,必须要落到文字显示的区域,否则整个图形会被破坏。另外对话框上下不宜留太多的透明像素,否则会造成短信列表的间隔增大,影响美观。而如果左右留过多透明像素,则气泡与手机边框的距离会增大,同样影响美观。留透明像素保持间距的技巧:接受气泡:上下各留:15px 左留:30px发送气泡:上下各留:15px 右留:30px群发送气泡:上下各留:15px 右留:30px也可根据自己需要调整 一个气泡包含normal(常态)和pressed(按下)两个状态,这两个状态形状一样,而且是相互影响的,在设计和制作的过程中,应该同时处理这两个状态。需要注意的是,发送失败和普通短信发送成功的气泡用的是同一个按下态,因此发送失败的形状和普通短信的气泡形状要相一致。具体例子如图所示: 最后在短信设计的过程中,由于主题机制的实现原理,收藏短信的标记在接收气泡中是属于右边边底对齐的,而在发送气泡是左边底对齐的。 因此,在设计收藏标识时,在接收气泡中收藏标记最好画在右下角的地方,发送短信画在左下角地方。如果将收藏短信标识的位置随意放置,不仅达不到设计稿的效果,还有可能破坏了主题的美感。
2015年05月05日
by叛逆yu
自由桌面制作教程自由桌面以com.miui.home.freestyle 为名。●搭建基本框架:在com.miui.home.freestyle内,包含三个文件夹和一个description.xml文件,如下(截图)skins文件夹主要存放自由部件;stage_images存放场景图;tools存放小工具(比如音乐插件);description.xml(描述文件,对自由桌面的宽高、类型的定义)。◆skins自由部件制作:如下图,将每一张要做自由部件的png图切好、命名(无限制),存放skins目录下。◆stage_images背景图:首先要确定自由桌面的宽度,例如:要做3屏的自由桌面,则要选择2160宽度的图作为壁纸。壁纸将存放于stage_images目录下。◆tools制作的小工具将放在此目录内(制作说明看最后)。◆description.xml文件配置:将以下代码复制到description.xml内保存即可。<?xml version='1.0' encoding='utf-8' standalone='yes' ?><scene name="mi_style"> <screen type="drift"/> <screen type="background"/> <screen type="foreground"/> <screen type="dock"/> 至此,一个简单的自由桌面已经完成了一半,剩下的一半将在主题编辑器内完成。用主题编辑器将此主题打开,点击“自由桌面编辑器”模块,进入编辑自由桌面。●添加自由桌面部件 首先要说明,自由桌面分为drift、background、foreground、dock四层,将部件添加在drift层则可随意移动,可点击;background不可移动,不可点击;foreground不可移动,可点击;dock跟随屏幕移动而移动,例如桌面底部拨号联系人图标。通常会选择drift层。填写自由桌面宽度,主屏填写(0为第一屏;1为第二屏;2为第三瓶,以此类推)◆添加背景图选中drift层,选择“创建”在“场景图片”分类内,可以看到之前编辑好的背景图片,点击图片进行添加。◆添加部件选择创建,在自由部件分类内选择要添加部件的图片,然后为它选择功能,有四种功能可供选择。无功能:用户可以在自由桌面中为它添加功能。打开APP:为部件预设打开指定的应用,但用户在自由桌面内也可以自由更改。抽屉:打开所有应用列表。快捷开关:与桌面快捷开关相同。文件夹:将部件设置为文件夹功能。添加成功后,部件将出现在预览图中,预览图可以通过鼠标滚轮进行缩放,部件可以通过鼠标拖放来改变位置或直接在预览图下输入坐标。※ 关于tools小工具的制作每一个小工具都是以文件夹形式放在tools目录下它的manifest.xml文件如下,代码写在gadget内。一样基于百变框架,与锁屏代码通用。
2015年05月05日
by叛逆yu
随着米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