Android 视觉样式设计规范

1. 基于 Theme.AppCompat.Light.NoActionBar

2. 拿到UI视觉标准图：

   
   UI标准.jpg

3. 拆解UI视觉标准，设置等级：

   
   

4. 进行颜色配置，完成colors.xml：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- *****************
     ****** UI标准-颜色规范 ********
     ********************* -->
    <color name="pal_1">#f33c3e</color>
    <color name="pal_2">#f99d9e</color>
    <color name="pal_3">#333333</color>
    <color name="pal_4">#666666</color>
    <color name="pal_5">#999999</color>
    <color name="pal_6">#eeeeee</color>
    <color name="pal_7">#f7f7f7</color>
    <color name="pal_8">#ffffff</color>
</resources>

5. 进行字体、间距配置，完成dimens.xml：

<resources>
    <!-- *****************
    ****** UI标准-字体规范 ********
    ********************* -->
    <dimen name="pal_text_1">@dimen/text_size_720_1280_34</dimen>
    <dimen name="pal_text_2">@dimen/text_size_720_1280_32</dimen>
    <dimen name="pal_text_3">@dimen/text_size_720_1280_28</dimen>
    <dimen name="pal_text_4">@dimen/text_size_720_1280_24</dimen>
    <dimen name="pal_text_5">@dimen/text_size_720_1280_20</dimen>
    <!-- *****************
    ****** UI标准-间距规范 ********
    ********************* -->
    <dimen name="pal_div_1">@dimen/width_720_1280_96</dimen>
    <dimen name="pal_div_2">@dimen/width_720_1280_88</dimen>
    <dimen name="pal_div_3">@dimen/width_720_1280_32</dimen>
    <dimen name="pal_div_4">@dimen/width_720_1280_16</dimen>
    <dimen name="pal_div_5">@dimen/width_720_1280_2</dimen>
</resources>

6. 进行通用样式配置，完成styles.xml：

<style name="PandaTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- *****************
    ****** 通用设置 ********
    ********************* -->
    <item name="colorPrimary">@color/app_primary</item>
    <item name="colorPrimaryDark">@color/app_primary_dark</item>
    <item name="colorAccent">@color/app_accent</item>
    <!-- 窗口的背景颜色 -->
    <item name="android:windowBackground">@color/bg_window</item>
    <!-- 字体样式 -->
    <item name="android:textAppearanceLarge">@style/PandaTheme.FirstText</item>
    <item name="android:textAppearanceMedium">@style/PandaTheme.SecondText</item>
    <item name="android:textAppearanceSmall">@style/PandaTheme.ThirdText</item>
    <!-- *****************
    ****** 各种控件主题 ********
    ********************* -->
    <!-- Dialog属性 -->
    <item name="android:dialogTheme">@style/PandaTheme.Dialog</item>
    <!-- alertDialog属性 -->
    <item name="android:alertDialogTheme">@style/PandaTheme.Dialog.Alert</item>
    <!-- SearchView -->
    <item name="searchViewStyle">@style/Widget.AppCompat.SearchView</item>
    <!-- overflow menu的样式 -->
    <item name="actionOverflowMenuStyle">@style/PandaTheme.OverflowMenuStyle</item>
    <!-- listDivider的样式 -->
    <item name="android:listDivider">@style/PandaTheme.DividerThin</item>
</style>
...

此文件比较复杂：参考themes_panda.xml