Material Design帖子主题规范

本帖最后由 Zapic 于 2019-12-24 17:29 编辑

某Zapic的Material Design帖子主题设计规范
如果你清楚的看到了这行文字,请点击这个链接继续阅读.

     索引
     帖子框架
       基本要求
       脚手架
     颜色
       主题色与强调色
       何时使用颜色
       确保你的颜色统一
     字体
       使用的字族
     排版
       基本排版
     媒体
       图片
       视频
       音乐
     构造Material Design的元素

     避免使用的元素

     帖子框架

  基本要求

  为了与Discuz的框架保持一定距离,我推荐使用90%宽度的表格进行排版,在90%的表格内请随意.
  Discuz背景([postbg])不做要求.

  脚手架

  这是一个脚手架:

[font=Roboto,Noto,sans-serif][align=center][table=90%]
[tr=#E91E63][td][p=21, 0, left][color=#fff]
[size=24px]标题[/size]
[/color][/p][/td][/tr]
[tr=#fafafa][td]
[/td][/tr]
[/table][/align][/font]

复制代码

标题

     颜色

  参考自颜色 - 样式 - Material Design 中文文档

  主题色与强调色

  在Material Design中有19组主色(Primary)和16组强调色(Accent).主题色与强调色允许自由组合.例如,本文使用的主题色与强调色均为Pink.
  可以参考此处获得他们的HEX值.

  当然,你可以自己选取颜色,使用Material Design提供的颜色是非必要的.
  选取颜色时应当注意你的对比度是否足够高,一般文字(15px)应当与背景至少有4.5:1的对比度,大文字(>21px)应当与背景至少有3:1的对比度,使用Material Design给定的19种颜色一般不会出现此类问题.

  同时,在Material Design中有两种颜色主题:亮色与暗色

Plan -- 一款优秀的玩家统计插件

What?你想随时监测你的服务器状态,却没有一套合适的工具?Player Analytics来了!一款支持网页查看的分析插件!玩家的行为/服务器的状态/网络的波动以及任何你关心的东西都在这里!

下载
SpigotMC(1.7.x - 1.14.x)
Sponge Ore(API5 - API7)

亮色
背景色为#FAFAFA
前景色为#444444

Plan -- 一款优秀的玩家统计插件

暗色
背景色为#212121
前景色为#FFFFFF

  何时使用颜色

  主色用于填充背景,强调色用于突出关键部分.
  一般来说,主色应该是出现最频繁的颜色,但是这里仅仅用于文章排版,应该仅在填充大面积强调时(如本文头部的标题)才使用主色,其余时候应当使用强调色.同时,排版不应该出现大面积的带颜色的文字,以免影响阅读.

菜单结构应该简洁明了

  1.合理安排菜单结构

  为了能够更快的找到想要的东西,超市会划出一块一块的区域.菜单同理,不要把什么乱七八糟的东西都丢在一起,划出一页一页的区域方便玩家检索.

  例如,不应该把领取地皮的菜单项与传送到商店的菜单项放在一起,很明显去商店的玩家不会接着去领取地皮(除非他要去收购商店赚钱买地皮)

正确
强调色仅用于二级标题,正文与三级标题使用默认文本色,显示出层次感.

错误
强调色不应该用于一大片的正文,也不应该用于三级标题,以免喧兵夺主.

确保你的颜色统一

为了保证美观,你使用的颜色尽量在这个列表之内:

主色以及其附属颜色
强调色以及其附属颜色
红色(#D32F2F) 用于强调错误
绿色(#2E7B32) 用于强调正确

     字体

  文章使用的字族

  看到脚手架的代码能明白,在Material Design应该按以下顺序使用字体:
  Roboto->Noto->sans-serif->默认字体
  如果一个字体不存在,则后面的字体会补足其空缺.
  由于Discuz不允许自由的调整字体粗细程度(只有标准和粗两种形式),所以字体不作其余要求.

     排版

  基本排版

  Display 4
  Display 3
  Display 2
  Display 1
  头行
  标题
  子标题
  正文(粗)
  正文
  注释

[size=99px]Display 4[/size]
[size=56px]Display 3[/size]
[size=45px]Display 2[/size]
[size=34px]Display 1[/size]
[size=24px]头行[/size]
[size=21px][b]标题[/b][/size]
[size=17px]子标题[/size]
[b]正文(粗)[/b]
正文
[size=12px]注释[/size]

复制代码

Display 4本应为112px,且为细体.但是Discuz限制,只能使用99px.
一般情况可以直接使用size=5代替size=24px,简化书写.

Material Design帖子主题规范

回复: