【界面制作–通知栏】V10素材进阶

各位亲爱的设计师,大家好,

MIUI10更新后,通知栏的样式变化较大,对于旧主题适配MIUI10仍然有很多同学找不到资源问题。
首先,miui10通知栏部分相对于旧版本是完全重构了框架,并且针对于可以代码实现的部分,甚至一些图片资源,都已使用xml文件代替,所以这会导致大家常常找不到资源。
以下仅供参考。(有部分资源在最新稳定版还无法生效,请大家等待系统更新)
更基础的教程请点击这里:基础教程
一、通知栏主界面(模块归属:systemui)
颜色值
时间颜色:status_bar_expanded_weather
「滑动指示符」颜色值:qs_panel_expand_indicator_color
「清理按钮」背景颜色:notification_clear_all_bg_color


切图资源
大背景:notification_panel_window_bg.9.png
左上角功能icon:notch_quicksearch_n.png
                         notch_quicksearch_p.png
                         notch_enter_edit_mode_n.png
                         notch_enter_edit_mode_p.png
                         notch_settings_n.png
                         notch_settings_p.png

电池切图:(切图放置目录:com.android.systemui/res/raw-xxhdpi)
                   stat_sys_battery.png(等12张)使用在不同界面

「清理按钮」背景图:notification_clear_all_bg_color
「清理按钮」内部icon:notifications_clear_all.png



布尔值
状态栏颜色:expanded_status_bar_darkmode(改为true即可使用深色状态栏)


尺寸值
亮度条与通知列表间距:qs_panel_expand_indicator_height
「滑动指示符」粗细:qs_panel_expand_indicator_stroke_width
(如下图)


二、开关面板(模块归属:systemui)
颜色值
开关背板颜色:qs_panel_background_color
开关「关闭状态」背景色:qs_tile_icon_bg_disabled_color
开关「开启状态」背景色:qs_tile_icon_bg_enabled_color
开关「开启状态」描边色:qs_tile_icon_border_color
开关「关闭状态」icon颜色:qs_tile_icon_disabled_color
开关「开启状态」icon颜色:qs_tile_icon_enabled_color
开关名称字体颜色:qs_tile_label_text_color
「 移动数据 」无卡状态文字颜色:qs_tile_label_text_color_secondary
流量监测数据文字颜色:qs_footer_data_usage_text_color
流量数据与开关icon中间分割线(编辑页内部分割线):qs_divider_color
编辑页 顶部标题文字颜色(两行):qs_customize_title_text_color
编辑页 候选区开关背景色:qs_customize_content_background_color
编辑开关时,第三方开关app名称文字颜色:qs_tile_app_label_text_color
翻页提示符颜色:qs_page_indicator_dot_color



切图资源
开关背板图:panel_round_corner_bg.9.png
开关编辑页背板图:qs_customizer_bg.9.png
二级页背板图:qs_detail_bg.9.png
开关「关闭状态」背景图:ic_qs_bg_disabled.png
开关「开启状态」背景图:ic_qs_bg_enabled.png
*(此处改图or颜色值均可)
流量数据icon(见安全中心)
蓝牙orWLAN右下箭头:expand_indicator.png

设置icon:ic_settings.png
设为不重要icon:ic_filter.png
设为重要icon:ic_remove_from_filter.png



尺寸值
开关&通知列表圆角:notification_stack_scroller_bg_radius


(如下图)



三、通知列表(模块归属:systemui or framework-res)


颜色值
通知列表大背景:notification_panel_background
左滑通知「 设置 」背景颜色:notification_guts_bg_color
不重要通知分割线颜色:fold_dividing_line_color
通知页「不重要通知」文字颜色:fold_footer_text_color
不重要通知展开页title文字颜色:fold_header_text_color
左滑后设置项文字颜色:notification_setting_button_color
组通知「气泡」文字颜色:notification_overflow_number_color

(以下颜色值 模块归属:framework-res)
通知list主要字颜色:statusbar_content_title
通知list次要字颜色:statusbar_content
通知信息「时间」字颜色:notification_time_color
通知右侧按钮文字颜色:notification_miui_action_text_color_n(常态)
                                   notification_miui_action_text_color_p(按下态)

通知进度条背景色:notification_progress_horizontal_bg_color
通知进度条进度色:notification_progress_horizontal_progress_color



切图资源
通知列表大背景:notification_panel_bg.9.png(改颜色值可生效)
单条通知常态背景:notification_item_bg_n.9.png
单条通知按下态背景:notification_item_bg_p.9.png
单条展开后背景常态:notification_item_expanded_bg_n.9.png(音乐背景)
单条展开后背景按下态:notification_item_expanded_bg_p.9.png
通知二级展开背景常态:notification_item_expanded_children_bg_n.9.png
通知二级展开背景常态:notification_item_expanded_children_bg_p.9.png
不重要通知右侧箭头:right_arrow.png
不重要通知页_右侧「通知过滤」icon:user_fold_tips.png

(以下图片资源 模块归属:framework-res)
通知右侧按钮背景:notification_miui_action_bg.9.png(做此图时如下2张图不生效)
                             notification_miui_action_bg_n.9.png(常态)
                             notification_miui_action_bg_p.9.png(按下态)
通知右侧收起箭头:notification_up_arrow.png
数量提示按钮:notification_group_overflow_number_bg.9.png

(如下图)



四、亮度条&多媒体通知(模块归属:systemui or framework-miui-res)
颜色值
亮度板背景色:qs_brightness_background_color
亮度板进度颜色:qs_brightness_progress_color

「 播放、暂停等5个图标 」颜色:notification_media_action_color
多媒体通知分割线颜色:notification_expanded_bg_divider_color
多媒体通知大背景颜色:notification_expanded_bg_color

通知左侧mini_icon颜色:notification_mini_view_icon_tint_color
(以下颜色值模块归属:framework-res)
多媒体通知 app名称颜色:media_notification_app_name_text_color
歌名文字颜色:statusbar_content(同通知主要字)
歌名文字颜色:statusbar_content(同通知次要字)
底部按钮处背景色:media_notification_actions_bg_color



切图资源
亮度icon:ic_brightness_low.png(最弱)
                   ic_brightness_high.png(最亮)
亮度背景:brightness_toogle_bg.9.png(暂不生效)
亮度板进度:brightness_toogle_progress_bg.9.png(暂不生效)
亮度滑块:brightness_toggle_thumb.png(当滑块在最右侧or最左侧时,只能显示一半,因此该资源左右需要留出和图片等宽的留白,
width = png_width * 3
*(此处改图or颜色值均可,建议改颜色)
(如下图)



五、通知栏二级页面(模块归属:systemui or framework-miui-res)
颜色值
「无线网络」or「蓝牙」标题文字颜色:qs_detail_title_text_color
二级页内容区背景色:qs_detail_content_background_color
无线网络or蓝牙列表主要字:qs_detail_item_primary_text_color
无线网络wlan「已连接」字体颜色:qs_detail_item_secondary_text_color
底部按钮文字颜色:qs_detail_buttons_text_color

(以下颜色值 模块归属:framework-miui-res)
开关为全局控件(可改png资源,改颜色值也可以)
滑动开关开启状态背景色:accent color light
滑动开关关闭状态背景色:sliding button bar off light 

*(开关资源可能出现重启生效问题,不建议大家修改)


切图资源
背板图:qs_detail_bg.9.png
列表icon:ic_qs_wifi_full_4.png(wifi)
                   ic_qs_wifi_lock.png(锁)
                   ic_qs_wifi_lock.png(锁)



(如下图)



六、悬浮窗&虚拟按键(模块归属:systemui or framework-res)
颜色值
悬浮窗背景色:notification_heads_up_bg_color(改图也可以)
来电主要字颜色:notification_in_call_caller_name_color(旧版暂不生效,需要升级最新开发版)
来电次要字颜色:notification_in_call_caller_info_color
横屏悬浮通知单条文字颜色:optimized_heads_up_notification_text

「回复」文字颜色:optimized_heads_up_notification_action_text
(以下颜色值 模块归属:framework-res)
通知右侧按钮文字颜色:notification_miui_action_text_color_n(常态)
                                   notification_miui_action_text_color_p(按下态)



切图资源
悬浮窗背景:notification_heads_up_bg.9.png(改颜色值也可以)
接听电话icon:answer_icon.png
拒接电话icon:end_call_icon.png

横屏信息时出现
右侧按钮背景常态:optimized_heads_up_notification_action_button_bg_n
右侧按钮背景按下态:optimized_heads_up_notification_action_button_bg_p 

虚拟键切图:前缀为ic_sysbar的系列切图

(以下图片资源 模块归属:framework-res)
通知右侧按钮背景:notification_miui_action_bg.9.png(做此图时如下2张图不生效)
                                   notification_miui_action_bg_n.9.png(常态)
                                   notification_miui_action_bg_p.9.png(按下态)



(如下图)



七、多任务&分屏(模块归属:systemui )


颜色值
「分屏模式」文字颜色: recents_dock_btn_text_color
分屏提示字颜色:recents_dock_area_text_color
分屏提示字投影颜色:recents_dock_area_text_shadow_color
分屏拖动背景颜色:recents_dock_area_overlay 

缩略图标题字体:   task_manager_text
长按任务-大背景颜色值:recent_menu_mask_color
功能键背景(支持图片修改):recent_menu_bg_color(背景色)
                                             recent_menu_bg_pressed_color(按下态颜色)

切图资源
分屏icon:   ic_recents_dock_btn_n.png
                ic_recents_dock_btn_p.png

大背景:  recent_task_bg.9.png
功能键背景图:  recent_menu_bg.png(部分常态、按下态)
                      recent_menu_bg_normal.png(常态)
                      recent_menu_bg_press.png(按下态)

功能icon: ic_task_lock.png
                   ic_task_multi.png
                   ic_task_setting.png
                   ic_task_unlock.png

清理icon背景:  btn_clear_all.png(与通知栏清理icon一致)
清理icon: notifications_clear_all.png
清理完成:recent_clear_button_tick.png



(如下图)



八、长截屏界面(模块归属:systemui )
颜色值
顶栏背景:   screenshot_ui_bg
「反馈」文字颜色:  screenshot_lighttheme_text_color
分割线(上、下、截图描边):    screenshot_part_divider_color
长截屏时-文字颜色:screenshot_lighttheme_text_color
长截屏时-顶部背景色:screenshot_top_msg_bg



切图资源
「反馈」button 背景:  bugreport_btn_bg_normal.9.png
                                  bugreport_btn_bg_pressed.9.png

返回icon:  action_bar_back_normal_light.png
               action_bar_back_pressed_light.png

截长屏icon:    action_button_long_screenshot_normal_light.png
                     action_button_long_screenshot_pressed_light.png
                     action_button_long_screenshot_disable_light.png

大背景:    window_bg_secondary_light.9.png(模块归属:framework-miui-res)
底部「结束截长屏」button背景:按钮背景:screenshot_btn_bg_normal.9.png
                                                               screenshot_btn_bg_pressed.9.png


(如下图)

V10_systemui_截屏预览.jpg (313.54 KB, 下载次数: 0)

下载附件  下载到手机  保存到相册




好啦,今天就介绍这么多啦。大家还有什么找不到的颜色值可以留言或者加入我们的主题编辑器用户反馈群哟。
以上所有颜色值注释信息会在近期更新至编辑器,不需要更新,只要联网同步就好咯。
相关的图片资源,我们将在下次编辑器更新时一同附上。
界面制作不难哟。加油吧!

 

祝  商祺

9 条评论

  • 匿名 2018年12月17日 回复

    求不重要通知,通知过滤功能说明下方小字字体颜。

  • 匿名 2018年12月6日 回复

    锁屏界面下拉菜单界面大背景哪里改啊

  • 匿名 2018年12月4日 回复

    通知列表大背景:notification_panel_bg.9.png(改颜色值可生效)
    是什么意思?

  • 匿名 2018年11月19日 回复

    铃声组件一直显示正在加载中啊?

    • 匿名 2018年11月19日 回复

      有谁知道这是个什么情况吗?

  • 匿名 2018年11月19日 回复

    审核慢是无解了哎

  • 匿名 2018年11月16日 回复

    主题审核效率什么时候正常了。这些问题就都解决了。现在审核一次超过1个月,你的这些东西,也就是小米内部设计师用用, 内部的东西,就没必要发到论坛上了吧。

  • 匿名 2018年11月15日 回复

    可我觉得还行,酷安基佬前来报道,艾迪:西山北峰

  • 匿名 2018年11月14日 回复

    避免折腾,看来还是用默认的靠谱

发表评论

电子邮件地址不会被公开。

©2015-2016 zhutidasai.com. 版权所有 京ICP备16041368号-3