MIUI论坛 下载APP

玩机之神

Rank: 7Rank: 7Rank: 7

积分
29133
机型
小米手机5
签到次数
312
MIUI版本
8.11.22
私信

MIUI 2000万1000万用户纪念勋章小米手机2终身荣誉勋章小米手机1终身荣誉勋章MIUI三周年关注微信关注腾讯微博关注新浪微博MIUI 100周发烧友俱乐部VIP贵宾主题大师小米手机元器件合体活动勋章一周年纪念勋章

[制作教程] MIUI V5/V4主题制作和设计教程

  [复制链接]
646324 1841 |
2013-3-5 20:49 | 来自PC
| |
|
跳转
本帖最后由 叛逆yu 于 2013-10-25 14:44 编辑

MIUI V5/V4主题制作和设计教程

(2013.03.05)
   MIUI主题
    首先,我们手机的UI是由很多部分组成的,如锁屏、通知栏、桌面壁纸、图标等等。如果我们把手机比喻成一个房子,上述的部分可想象成房子的门、窗、地板、吊灯、座椅等。那我们可以认为原生的android系统就是一个毛坯房,MIUI是在这之上的一个简装,自定义主题就是你自己给房子做的装修。
     MIUI提供主题自定义功能,其实就相当于帮你请了一个工程队,你可以用从众多装修方案(主题包)中选择自己喜欢的效果,最后交给工程队实施。而装修方案可大可小,大至全屋翻新,小到只换一盏灯。目前MIUI会自带两个主题包,达人们也可以设计自己的主题包,大家就可以借用达人们共享出来的设计。
下面我会分两大模块和大家介绍:
1.主题设计
1.1 主题模板
1.2 V5更强大的设计
2.主题的上传


3.主题制作
3.1 主题测试机器
3.2切图
3.3主题制作软件的安装
3.4主题工具使用教程视频
3.5主题涉及的模块介绍
3.6从V4到V5
3.7简单的锁屏制作
3.8theme_values.xml文件说明
3.9关于壁纸和铃声
3.10主题设计标准

3.11关于完美图标模板

1.主题设计:
      1.1一个主题包含V4、V5两个版本,而设计师只要根据miuiv5template(点击下载)这套模板进行一次设计即可。此模板针对MIUI V5,稍做调整即可作为V4主题的设计稿。具体见下表

      1.2 相比V4,V5有更强大的主题框架,更灵活更有趣,例如V5加上了动态图标动态壁纸,这些都是设计师可以去设计的。

从V4到V5的优化文档.png



2.主题上传:

上传步骤:
情况1:单独上传V5主题包
第一步:上传新主题
QQ截图20130307200123.gif

第二步,点击立即上传V5
QQ截图20130307194102.gif

第三部,等待上传,并填写信息
QQ截图20130307200022.png
QQ截图20130307195734.png

第四步,恭喜你上传成功,等待工作人员审核后就能上线了!

情况2:在原有的v4主题的基础上更新V5版本

第一步,点开您需要更新的主题,点击增加新版本按钮。
QQ截图20130307195847.png

第二步,选择版本,此时只需选择上传V5主题包即可。
QQ截图20130307195858.png

第三步、第四步同情况一。


3.主题制作:

3.1 主题测试机器:米2刷V5开发版
附上刷机教程连接http://www.miui.com/download.html

3.2 切图
    制作主题之前先根据设计稿和主题制作模板里的图的尺寸进行切图,将设计稿切片,分成各个小部分,用与主题制作。模板在主题编辑器里提供,只需插上手机,同步相应模块就OK了。

3.3 主题制作软件的安装
打开MIUIThemeEditor目录(图1所示)。
1.windows下运行,“run-windows.bat“
2.linux下运行,“run-linux.sh”
3.mac os运行,“run-mac.command”
图1.jpg



3.4 主题工具的使用
教程视屏:http://www.miui.com/thread-642823-1-1.html

3.5 主题工具中的模块介绍
主题内基本模块
com.android.contacts 通讯录以及拨号
com.android.fileexplorer 文件管理器
com.android.mms  短信
com.android.providers.downloads.ui 下载管理
com.android.settings  设置
com.android.systemui 通知栏以及任务管理器
com.android.updater 系统更新
com.miui.antispam 防打扰
com.miui.backup 备份
com.miui.home 桌面
com.wali.miui.networkassistant 流量监控
framework-miui-res  MIUI全局
framework-res  Android原生全局
以上模块为主题工具内带有图解的模块
MIUI全局主要存放文件是会在各种界面都会调用到的东西,比如按钮,弹窗,进度条,每个每块都会用到的小图标等等,如在当前模块没有想要修改的素材时,可以去全局找。
相比V4,V5的Android原生全局 的图不建议进行修改,V5在Android原生全局 只会涉及字体颜色,涉及的字体颜色只需看我们主题编辑器的V5字样的标记,无标记V5字样的请勿修改

3.6 从V4到V5主题
     对于已有的V4主题,制作者想迁移到V5上,可以参考下面提供的V4到V5的主题的映射表,里面会告诉大家部分V4到V5可能还可用的图,不可用的话需要自己重新调整尺寸和点9信息。这部分映射我们会逐步更新,大家可多留意!
这里给大家提供一个V4到V5的映射列表,仅供大家参考,具体图的尺寸还需大家根据主题来修改: MIUIV4 TO V5 可复用图映射表.xls (11.21 MB, 下载次数: 46068)
收藏1441 分享  

已有 188 人评分 经验 威望 理由  

瓜z + 1 精品文章^_^
大庞爱小珺 + 5 精品呐
lxdaxcy + 1 精品文章^_^
破散的繁星 + 1 精品文章^_^
繁花v碎落 + 5 精品文章^_^
大麻羊 + 1 MIUI 因你更精彩!
浅似留殇 + 1 精品文章^_^
丿·殇 + 1 挺好的,
梅里的夕阳 + 2 MIUI 因你更精彩!
一YY阳 + 1 非常感谢
FOREVER.HE + 2 MIUI 因你更精彩!
liyongsd + 1 MIUI 因你更精彩!
神奇哈密瓜 + 1 MIUI 因你更精彩!
人小–鬼大 + 5 MIUI 因你更精彩!
54huangxu + 1 感谢分享^_^
元宝天尊 + 1 助人为乐^_^
黯灼 + 1 MIUI 因你更精彩!
紫梦遗忘 + 1 MIUI 因你更精彩!
我是真的大良 + 1 助人为乐^_^
挚爱·蕊 + 1 感谢分享^_^

经验 +452  威望 +20  查看全部评分

主题创意组

Rank: 6Rank: 6

积分
5369
机型
小米手机3-WCDMA/CDMA版
签到次数
108
MIUI版本
7.10.10
私信

MIUI 2000万小米手机2终身荣誉勋章MIUI三周年MIUI 100周

2013-3-6 20:39 | 来自PC
|
本帖最后由 叛逆yu 于 2013-5-16 11:32 编辑

通讯录与拨号:
1.     拨号盘高度,修改diem值dialer_buttons_height


2.     联系人详情头像,修改bool值show_default_contact_detail_photo_bg该值默认为false,就是现在根据小头像计算头像的背景颜色 如果主题修改这个值为true,则不会计算头像背景的颜色,直接显示图片contact_detail_default_photo.png(尺寸:720X720)


3.     拨号输入预览背景调用framework-miui-res\res\drawable-xhdpi\v5_title_bar_bg_light.9.png,framework-miui-res\res\drawable-xhdpi\v5_title_bar_bg_light.9.png的高度必须要>= framework-miui-res\res\drawable-xhdpi\ v5_tab_indicator_bg_no_title_light.9.png


4.     服务热线背景list_splitter_opaque.9.png不能做成透明


5.     新建联系人,顶栏取消与确定按钮,两边的距离可以打通,由dimen值editor_title_button_margin确定


6.     头像按下二态在原生全局framework-res\res\drawable-xhdpi\quickcontact_badge_overlay_pressed_light.9.png

7.     群组界面智能分组下面列表list背景只调用framework-res\res\drawable-xhdpi\v5_list_view_single_item_bg_normal_light.9.png


8.     拨号盘必做480p&720p
          dialer_background.9
dialer_buttons
dialer_btn_close_dialpad_normal
dialer_btn_close_dialpad_pressed
dialer_btn_call_normal
dialer_btn_call_pressed
dialer_btn_delete_normal
dialer_btn_delete_pressed
        dialer_bottom_bar_bg.9



9.     联系人详情,tab高度受framework-res\res\drawable-xhdpi\v5_tab_indicator_placeholder.9.png占位图控制,v5_tab_indicator_placeholder.9.png的高度必须>= com.android.contacts\res\drawable-xhdpi\contact_detail_tab_container_bg.9.png


短信:
1.      新建短信顶栏背景高度必须与其相对应的占位图的高度一致
背景:com.android.mms\res\drawable-xhdpi\title_bar_bg_one_row.9.png     
       com.android.mms\res\drawable-xhdpi\title_bar_bg_two_row.9.png
       com.android.mms\res\drawable-xhdpi\title_bar_bg_one_three.9.png
占位图:com.android.mms\res\drawable-xhdpi\ top_place_holder_compose_msg_one_row.9.png
        com.android.mms\res\drawable-xhdpi\ top_place_holder_compose_msg_two_row.9.png
        com.android.mms\res\drawable-xhdpi\ top_place_holder_compose_msg_three_row.9.png

2.      拨号盘必做480p&720p
smiley_tab_image_smiley_normal
smiley_tab_image_smiley_pressed
smiley_tab_image_creature_normal
smiley_tab_image_creature_pressed
smiley_tab_image_lifestyle_normal
smiley_tab_image_lifestyle_pressed
smiley_tab_text_normal
smiley_tab_text_pressed
smiley_tab_symbol_normal
smiley_tab_symbol_pressed
smiley_back_normal
smiley_back_pressed
    sms_unread_count_bg.9


MIUI全局:
1. 小豆豆背景的右边.9内容区的高度必须与小豆豆的高度一致,bottombar右边.9的内容区的高度要>=小豆豆背景的的高度
2. bottombar右边的.9内容区可以控制小豆豆在bottombar上下的位置,左右的位置不受bottombar下边.9内容区的控制,由系统居中排列
3.   tab和title的高度由dimen值v5_action_bar_height控制,tab高度的最大值由dimen值theme_values/framework-res/action_bar_stacked_max_height控制


4.   控制list内容向上移动的距离theme_values/framework-miui-res/v5_action_bar_overlay_height,正值向上移动,负值向下移动
5.   控制list内容向下移动的距离theme_values/framework-miui-res/v5_split_action_bar_overlay_height正值向下移动,负值向上移动



6.   framework-miui-res\res\drawable-xhdpi\v5_dialog_bg_light.9.png顶部必须留100pix的透明

7. 带透明度的list的拉伸区域必须全拉伸,

为了方便大家阅读,我整理成了word,欢迎下载查阅!
主题教程--制作主题需要注意的地方.rar (894.09 KB, 下载次数: 10443)

已有 12 人评分 经验 威望 理由  

861329389 + 1 这些图是V5的哪个版本呀?有没有包分享下我.
宅男dy + 1 感谢分享^_^
智慧库洛牌 + 1 谢谢你哦亲,给我这种初学者指点了好多.
lonma + 2 MIUI 因你更精彩!支持下
V策策V + 1 精品文章^_^
380440553 + 1 助人为乐^_^
樱花 + 2 我想收藏这个帖子
k123ong + 1 感谢分享^_^
jimmyfxm + 1 精品文章^_^
叛逆yu + 10 + 3 精品文章^_^
疯狂8猪猪 + 1 助人为乐^_^
八戒℡ + 10 + 3 第一次离大神那么近

经验 +32  威望 +6  查看全部评分

主题创意组

二师兄。

Rank: 6Rank: 6

积分
30497
机型
索爱LT18i
签到次数
83
MIUI版本
7.8.16
私信

MIUI 9纪念勋章MIUI 2000万1000万用户纪念勋章小米手机2终身荣誉勋章MIUI三周年关注腾讯微博关注新浪微博MIUI 100周发烧友俱乐部

2013-3-6 20:39 | 来自PC
|
叛逆么么哒

已有 1 人评分 经验 威望 理由  

叛逆yu + 10 + 1 MIUI 因你更精彩!

经验 +10  威望 +1  查看全部评分

玩机之王

Rank: 5Rank: 5

积分
2908
机型
未知设备
签到次数
179
MIUI版本
V9.5.15.0.ODGCNFA
私信

关注微信MIUI 100周

2013-3-6 20:41 | 来自PC
|
楼主发果照啊!

玩机之神

Rank: 7Rank: 7Rank: 7

积分
107333
机型
未知设备
签到次数
227
MIUI版本
9.8.19
私信

MIUI 3000万MIUI 2000万1000万用户纪念勋章MIUI 7小米平板首发纪念勋章MIUI三周年关注微信关注腾讯微博关注新浪微博MIUI 100周

2013-3-6 20:42 | 来自PC
|
支持了

已有 1 人评分 经验 理由  

请节约爱 + 1 MIUI 因你更精彩!

经验 +1  查看全部评分

玩机之王

Rank: 5Rank: 5

积分
2092
机型
未知设备
签到次数
92
MIUI版本
6.4.14
私信

1000万用户纪念勋章关注腾讯微博

2013-3-6 20:48 | 通过手机发布
|
首页  
有分不

荣誉元老

Rank: 6Rank: 6

积分
211052
机型
未知设备
签到次数
350
MIUI版本
9.8.15
私信

小爱同学两周年点赞金米兔勋章MIUI 10专属勋章剑侠世界2荣誉内测2018新年勋章MIUI真实车主勋章2017圣诞节勋章全局搜索纪念勋章MIUI3亿用户纪念勋章感恩节勋章万圣节勋章米兔月饼勋章国庆勋章MIUI七夕鹊桥勋章MIUI七周年MIUI 9纪念勋章小米众筹2周年新版论坛APP小米7周年勋章“澎湃S1 ”芯片纪念勋章初音勋章2017年小金鸡勋章APP 1000万小火箭勋章用户反馈APP词条填充精英MIUI 300周为奥运加油勋章MIUI 8纪念勋章小米六周年小米5发布会MIUI 3000万MIUI 2000万1000万用户纪念勋章MIUI 7小米商城购买纪念勋章流量王MIUI五周年MIUI三周年百万壁纸关注微信极客勋章疾风测评勋章小米桌面MIUI6 荣誉勋章完美图标纪念勋章关注腾讯微博关注新浪微博MIUI 100周发烧友俱乐部VIP贵宾小米手机元器件合体活动勋章MIUI六周年

2013-3-6 22:54 | 来自PC
|
可来了  明天可以开始工作了~~~支持

内测粉丝组

理性玩机

Rank: 6Rank: 6

积分
15222
机型
未知设备
签到次数
305
MIUI版本
9.7.4
私信

小爱同学两周年点赞金米兔勋章MIUI 10专属勋章2018新年勋章2017圣诞节勋章全局搜索纪念勋章MIUI七夕鹊桥勋章MIUI七周年MIUI 9纪念勋章“澎湃S1 ”芯片纪念勋章初音勋章2017年小金鸡勋章APP 1000万小火箭勋章MIUI 300周为奥运加油勋章小米六周年MIUI 3000万MIUI 2000万1000万用户纪念勋章MIUI 7MIUI五周年极客勋章关注微信关注腾讯微博关注新浪微博MIUI 100周我爱米兔MIUI六周年

2013-3-7 00:36 | 来自PC
|
MIUI 因你更精彩!

玩机狂人

Rank: 3Rank: 3

积分
201
机型
未知设备
签到次数
16
MIUI版本
3.5.24
私信
2013-3-7 05:33 | 来自PC
|
反光板vvv

玩机之神

MIUI社区俱乐部&极客秀版务组成员

Rank: 7Rank: 7Rank: 7

积分
22535
机型
小米手机2/2S
签到次数
35
MIUI版本
3.6.28
私信

1000万用户纪念勋章MIUI歪歪管理组关注腾讯微博关注新浪微博发烧友俱乐部

2013-3-7 09:00 | 来自PC
|
很给力,很值得一看的说
快速回复 返回顶部 返回列表