Minecraft(我的世界)中文论坛

 找回密码
 注册(register)

!header_login!

只需一步,立刻登录

查看: 3243|回复: 1

[草稿] Material Design帖子主题规范

[复制链接]
Zapic 当前离线
积分
8149
帖子
主题
精华
贡献
爱心
钻石
人气
下界之星
最后登录
1970-1-1
注册时间
2017-1-7
查看详细资料
 楼主| 发表于 2019-10-21 13:59:42 | 显示全部楼层 |阅读模式

您尚未登录,立即登录享受更好的浏览体验!

您需要 登录 才可以下载或查看,没有帐号?注册(register)

x
本帖最后由 Zapic 于 2019-12-24 17:29 编辑
! A! ]+ y) j. P4 [% V0 H9 H


0 {2 C$ j. M) b7 t  |2 K  某Zapic的Material Design帖子主题设计规范
7 R' q3 e( V  v3 r, S如果你清楚的看到了这行文字,请点击这个链接继续阅读.

# d; a) ]/ {) I
     索引4 }2 ]4 d: V7 h
     帖子框架
; s, U6 Q& F' E& H$ I( Q2 h       基本要求
+ F) P/ b! i, E       脚手架
' S' f% J6 y* K1 l: M5 f     颜色: b4 t& |( X+ m! O
       主题色与强调色* {( p1 I' O5 O1 c3 g
       何时使用颜色  E3 b$ d2 \$ a" Y
       确保你的颜色统一
: u  X0 s8 z" t+ G8 F- k# D6 s- M     字体1 Q- s4 k" A+ Q0 i% a% M
       使用的字族
1 P& H! R/ H* R# {8 z     排版  L1 k" L% R6 Q
       基本排版' t/ s2 o' N5 U3 D3 e5 h0 ^
     媒体$ H$ y6 P" x; s" ]  n+ R. C# O
       图片+ W3 h" J( ?; K/ v
       视频& j! \0 e* F; L8 c
       音乐0 g8 ]/ S7 Y/ n' O: R9 g
     构造Material Design的元素2 G- g$ Z2 c' A/ v( t, l1 b% Q
       $ e) D0 A8 ?) l# o
     避免使用的元素
3 R' [5 A" @( h9 T9 F( d% S3 S9 A. B       4 T! b6 v$ @  T3 B1 Y/ J7 W- a' b


# b" O: g6 b; l3 E! o2 L4 P+ t- S# a1 F# L" S
% ?8 t3 J2 Q& }4 _' f
     帖子框架
: S' z0 J2 g; c) i  
+ o/ w7 L1 S1 X0 I0 P& _  基本要求
, A% a, \7 ~" E$ n' D/ g( b
. B  z& G- y; f  T" _  为了与Discuz的框架保持一定距离,我推荐使用90%宽度的表格进行排版,在90%的表格内请随意.$ u" O) ]+ {. u% f' I2 X
  Discuz背景([postbg])不做要求.
* @* ?% f$ G+ L9 n# ]! n; Q" s0 z* w% O: R7 j
  脚手架8 X/ n3 u0 z  Z1 M" W

7 `8 H4 V# d$ L  这是一个脚手架:
* ?+ M- k6 {2 k7 i; z& H
  1. [font=Roboto,Noto,sans-serif][align=center][table=90%]
    5 ~7 V8 K( u% h- J* ?
  2. [tr=#E91E63][td][p=21, 0, left][color=#fff]9 {6 q' w& Z& v7 g6 @# L; r! Q
  3.   [size=24px]标题[/size]! [0 I- |, t  S# D+ n8 V" m% x

  4. & R3 q- T  ^. J: \& N
  5. [/color][/p][/td][/tr]
    / l- O* w4 c) I6 s8 @* A
  6. [tr=#fafafa][td]5 _# v9 F& {# m: ~% s

  7. 2 p: A/ `4 t2 M
  8. [/td][/tr]4 E% c$ t8 ^8 H) s+ r: ^
  9. [/table][/align][/font]3 z- L8 n- c" o3 ~! M
复制代码

0 E9 t2 c" g! m/ z) C9 u

; I4 P( a, Z( r9 {7 [' r+ W+ C
  标题4 ?3 _7 I, {. c

1 V. v% k, w8 t% n" m1 @. f6 t( j


' B/ g; Z$ b7 c# N7 \
) b: Z, B+ s% i8 x

; I3 J" W4 N! ?5 y) y
( U; f3 B& D" ?' \8 j+ H, b
     颜色
9 b; }/ u/ `$ c! d
4 m* h7 ?- L' t7 J  参考自颜色 - 样式 - Material Design 中文文档
% ?% a: W7 r* p: y2 U0 Q0 P% X+ z5 k4 S6 z
  主题色与强调色
. d! P  x- c- d5 x
$ A' y9 r* y' ^& m2 k  在Material Design中有19组主色(Primary)和16组强调色(Accent).主题色与强调色允许自由组合.例如,本文使用的主题色与强调色均为Pink.
" y) y' `; e1 b3 \$ r  可以参考此处获得他们的HEX值.4 [! a- M9 A* f9 w
  U& `2 A) @; n
  当然,你可以自己选取颜色,使用Material Design提供的颜色是非必要的.6 G; v! C2 a& |4 M9 C% g
  选取颜色时应当注意你的对比度是否足够高,一般文字(15px)应当与背景至少有4.5:1的对比度,大文字(>21px)应当与背景至少有3:1的对比度,使用Material Design给定的19种颜色一般不会出现此类问题.0 p2 d' N) @4 c: k( P/ y3 \4 ]
  % T: ]7 l3 {* q3 I9 ]& E
  同时,在Material Design中有两种颜色主题:亮色与暗色4 b/ Z6 ~' M$ D6 Y% E0 L4 l* _
   

  G! ]3 w, f+ J" Z
Plan -- 一款优秀的玩家统计插件
' S8 s5 W% }! K+ G, E( s


$ |% m( Z1 e7 o* |2 n) ~
+ y. o& d3 k: A2 [  y) X

- h- t9 D! h/ W% B3 T* N3 E. R- c! @. R3 H. y2 i) `8 n
  What?你想随时监测你的服务器状态,却没有一套合适的工具?Player Analytics来了!一款支持网页查看的分析插件!玩家的行为/服务器的状态/网络的波动以及任何你关心的东西都在这里!
, d/ S- G& T$ R
4 V9 A* j5 {3 C7 i+ i$ v" Y" }  下载6 w1 F- Z+ H( W$ ]' l" X  R
    SpigotMC(1.7.x - 1.14.x). F  ~" X( I( V4 X
    Sponge Ore(API5 - API7)
& x# k& c# B( U  D
% u$ c$ T- D0 [9 b+ r* z% g# m
亮色0 t. S" o( K7 ~  u  j. \: M0 B# ]
  背景色为#FAFAFA # A  q  I* H; s7 a3 J  ~- J
  前景色为#444444

9 w1 {) T7 ]& ]0 l8 Q! O
Plan -- 一款优秀的玩家统计插件! ~5 ~& S2 V6 f: @: s+ ?* {: b

9 Y: R; h2 J# `4 J

# u; B9 S6 ]" ]
* F, j: H% }  t, D7 s; M9 h( H+ n- O$ e$ @
  What?你想随时监测你的服务器状态,却没有一套合适的工具?Player Analytics来了!一款支持网页查看的分析插件!玩家的行为/服务器的状态/网络的波动以及任何你关心的东西都在这里!# U$ e1 j( r- \1 R! p$ s# t
" L5 Z7 U4 u/ C9 z
  下载
0 C9 I3 W* G, G  S5 @" y5 g5 a    SpigotMC(1.7.x - 1.14.x)
; L7 p) y% N. p& s- r, L2 A    Sponge Ore(API5 - API7)
& k' t3 O+ v. O9 v- Y
- [+ X* ~9 l0 E+ D9 }' E" o9 G
暗色
( N& P: d/ {, O! x9 ~  背景色为#212121
* P- ?; e' C' T0 w+ K0 |5 t  前景色为#FFFFFF
2 l! x0 W1 J/ Q# T8 `
  何时使用颜色
6 W5 i3 U' Y/ n% U0 m
" ]7 J( ^0 v3 o, h# u/ A  主色用于填充背景,强调色用于突出关键部分.
9 `4 B! x8 H, q6 i+ Y7 {+ P) F  i  一般来说,主色应该是出现最频繁的颜色,但是这里仅仅用于文章排版,应该仅在填充大面积强调时(如本文头部的标题)才使用主色,其余时候应当使用强调色.同时,排版不应该出现大面积的带颜色的文字,以免影响阅读.
# V. u6 n9 g2 j0 j" i& ~) c0 s* Z& X3 C7 T$ c5 }: @
菜单结构应该简洁明了; e8 K- P* U$ B9 `% p
$ Z, k4 y4 g% o1 ]- s8 I
  1.合理安排菜单结构
& y3 \$ I% p1 t6 y5 Y& m0 Y0 Z
  为了能够更快的找到想要的东西,超市会划出一块一块的区域.菜单同理,不要把什么乱七八糟的东西都丢在一起,划出一页一页的区域方便玩家检索.1 |1 B: y5 O4 ~( g
$ l( o9 f* ?- l' B! r9 E( H& |4 ?
  例如,不应该把领取地皮的菜单项与传送到商店的菜单项放在一起,很明显去商店的玩家不会接着去领取地皮(除非他要去收购商店赚钱买地皮)
正确5 _2 x+ ]4 o8 c% E
强调色仅用于二级标题,正文与三级标题使用默认文本色,显示出层次感.
菜单结构应该简洁明了
, ]0 }. r+ y8 u8 i7 @2 u3 M6 z- f/ O; _5 u# F$ R
  1.合理安排菜单结构0 {1 V* q9 Z& e

6 m& r+ {  A- R5 l$ l7 E  为了能够更快的找到想要的东西,超市会划出一块一块的区域.菜单同理,不要把什么乱七八糟的东西都丢在一起,划出一页一页的区域方便玩家检索.% r* p- F4 _" @% f- k$ }( ~  X: c, {

! F8 J( W: P1 {& I% k& A  例如,不应该把领取地皮的菜单项与传送到商店的菜单项放在一起,很明显去商店的玩家不会接着去领取地皮(除非他要去收购商店赚钱买地皮)
错误* n# y; N' X2 w
强调色不应该用于一大片的正文,也不应该用于三级标题,以免喧兵夺主.

1 O- r  w/ \/ [4 k( S7 b( q% ~  确保你的颜色统一( b# s, d, ~8 ^# [" a( p$ f

+ R8 L/ }' A# \9 r* y+ ?% {  为了保证美观,你使用的颜色尽量在这个列表之内:; X6 l* n# V! r
  •   主色以及其附属颜色  
  • 强调色以及其附属颜色
  • 红色(#D32F2F) 用于强调错误
  • 绿色(#2E7B32) 用于强调正确
    3 j; k4 Q+ b& I# q

9 V+ K) _4 W2 W3 C" v5 R  4 v: @' |! X* g1 B( i) T4 m

' g! j9 q5 ^" e" q/ W     字体
- g5 B7 b0 {: P% W. ~. R  
, Y2 F: W& o; L% h  文章使用的字族& c& Q9 T; M' G& U9 c0 u- O

8 i- o* T2 j. c1 O( {9 t  看到脚手架的代码能明白,在Material Design应该按以下顺序使用字体:
' \4 s) ~! a4 p0 U; @* j) R3 ?- H  Roboto->Noto->sans-serif->默认字体
: a5 C0 x( w: y  如果一个字体不存在,则后面的字体会补足其空缺.
$ `% @+ A' `; g* s9 X  由于Discuz不允许自由的调整字体粗细程度(只有标准和粗两种形式),所以字体不作其余要求." \- z+ Y; o4 G* I0 T8 `' ~
  

" a* _: m% Z9 x5 i0 ], B     排版( k0 {+ d1 J) t5 y" K- R+ x, P

( H: k# X% Q1 E: o) p  基本排版
9 d9 ?- `' B; z
/ G9 {( S  K' a/ e# C4 o, r  Display 4
* f0 P# z0 i$ Y# D  Display 3
! C( y% G% @$ a9 P- g  Display 2
5 K8 a2 n$ |4 F& t  g  Display 1! B; r' [& O9 V3 q
  头行
3 j$ N+ P( s  M2 _  标题9 J$ n8 N) y7 X$ M4 m! n
  子标题
' [* P8 Y2 k6 @$ M# Q7 I  正文(粗)% f$ r) d, T* }$ D. \1 u. [
  正文- B, t# ?# [4 g( V, w
  注释
6 I3 q2 u! I3 L5 t
  1. [size=99px]Display 4[/size]
    " y2 z" D% M$ ~" _8 a
  2. [size=56px]Display 3[/size]  o; H2 s$ M: N, {& c9 P4 y  W6 q
  3. [size=45px]Display 2[/size]3 n8 {7 k& L, O2 k
  4. [size=34px]Display 1[/size]
    $ w: _6 U4 z6 V, |* ~+ x
  5. [size=24px]头行[/size], z9 `# S' d  z) S8 p
  6. [size=21px][b]标题[/b][/size]# l; i: E: Y. y4 K' u" ^
  7. [size=17px]子标题[/size]+ l/ H/ `7 z% e* x+ U! j+ v' R5 b
  8. [b]正文(粗)[/b]: {- s. t! ^9 O! h, a
  9. 正文* f1 J& f6 I4 z4 s
  10. [size=12px]注释[/size]
复制代码
Display 4本应为112px,且为细体.但是Discuz限制,只能使用99px.1 U3 w& C7 J. ~4 s& Y. F- x
  一般情况可以直接使用size=5代替size=24px,简化书写.+ c$ M" a% U; Z& P3 N9 U" U

% {& s0 A1 l9 V9 B/ g/ B! D8 `

+ k- m5 {6 L/ {8 j2 I

评分

参与人数 5人气 +10 金粒 +40 收起 理由
诺凡克罗诺 + 2 + 40 MCBBS有你更精彩~
inuEbisu + 1 神乎其技!6的飞起!
AzureHanChen + 2 MCBBS有你更精彩~
若南想睡觉 + 3 MCBBS有你更精彩~
古明地兔 + 2 推荐

查看全部评分

inuEbisu 当前离线
积分
9630
帖子
主题
精华
贡献
爱心
钻石
人气
下界之星
最后登录
1970-1-1
注册时间
2018-7-24
查看详细资料
发表于 2019-12-14 23:38:16 | 显示全部楼层
喧兵夺主草)
回复

使用道具 举报

Archiver|小黑屋|Mcbbs.net ( 京ICP备15023768号-1 ) | 京公网安备 11010502037624号 | 手机版

GMT+8, 2021-9-24 13:36 , Processed in 0.075226 second(s), Total 22, Slave 16 queries, Release: Build.2021.09.22 1647, Gzip On, Redis On.

"Minecraft"以及"我的世界"为Mojang Synergies AB的商标 本站与Mojang以及微软公司没有从属关系

© 2010-2020 我的世界中文论坛 版权所有 本站原创图文内容版权属于原创作者,未经许可不得转载

快速回复 返回顶部 返回列表