文字可以是优美的、简单的、狂放的、有趣的、激动人心的，还有很多其他种类。它能激起情绪，帮助用户理解你所要传达的讯息。字体有很多种，但有一点是共通的——它必须具有可读性。+ ~; \* P9 ~7 |7 G" i- V& o
; i3 e! ^8 X/ W" b0 A这是一个时常被遗忘的因素。设计师们往太狭小的空间填入太多信息，或是选用了外观胜过可读性的字体。但重点是：如果字体无法阅读，你的设计就无法完全生效。网页设计基础
4 q' g$ e5 @! {3 Y+ R# s1 Z% {, j% J: p e# S3 t$ r- c' c" @& P
尽管有些耸人听闻，但它几乎是普适规律。你会问：“作为艺术元素的那些字体怎么说？” 不可阅读的字体在这类设计中确实能发挥作用，但是，仅限于与可读的文字搭配使用。学网页设计入门9 g1 R3 K( l& d* c$ l
: B) `* H& W5 r" B% j( q5 C
在狭窄空间体现可读性
# u9 L2 r. T8 i9 g; z
( R, T( y* |' l0 P# @ q9 u
& Q: W. K X7 d( F' K
, _% i6 [# m, T# T$ ^/ K9 P1 f9 d7 I3 [0 i) @1 U7 l) H
( ]( x) `3 C% M* Y7 A' g
* S. _$ k9 u% R. D
, f5 f7 C4 @4 D# a& J& R) P5 f; q+ R& q( ?5 f& ]$ M
D l9 s. G! i% C
6 H% d( a" z0 P* s- f- d2 W1 D5 c( H什么使得文字能够阅读呢？它实际上是很多因素共同作用的结果，包括行长度、行距、字体样式、外边距和内边距，还有颜色和对比度。网页设计图片7 j5 {, ~0 b) X U6 k4 ]
( t! q6 A. d Y: s每一个元素，都影响着屏幕阅读的难易程度。这每一种元素，都是设计师能够操控的。记住，本文中谈论的这些元素，是指网站主体部分的文字，此处文字的可读性可以说是首要考虑因素。（别处文字的标准相对宽松许多，只要主体部分高度可读。）
7 |& g" W# ^' u5 r d
( D5 g( {- S& U" f+ K X9 ^9 C' x行长度：每行的字符个数对于整体的可读性起着主要作用。如果文字段落非常宽，那是很吓人的，难以阅读。同理，每行文字太短也不行，会给读者的眼睛带来压力，造成混乱。
, H/ g# H1 V" t) H: C9 D: |行距：每行文字间的间距也同样重要。看看这篇文章，如果每行文字都与上下两行粘在一起，你就无法理解这些句子。
* O7 n+ }5 s" i+ J2 J字体样式：字体的样式也会影响可读性。简洁的衬线字体和无衬线字体是最具可读性、最易浏览的，而那些华丽的手书和新奇字体则最难破译。! Z4 R4 I; l$ S0 ~8 f* T# M
外边距和内边距：和行距一样，元素周边和之间的空隙也影响着用户阅读文字本身。% S' s3 {, n) m1 Q3 H
颜色与对比度：文字颜色与相应背景也至关重要。如果在绿色背景上写绿色文字，就难以阅读了。设计师选择浅色字深色背景，或是深色字浅色背景，都是有原因的。对比使得字符容易阅读。学习网页设计有什么好处
2 A8 j, r& K; S+ R
4 z/ |) R6 b5 c$ G$ b! |不同屏幕上的可读性7 L$ _9 b6 X9 s, s% x5 D- Y: o
( g5 h4 `. N: U* f0 J$ N2 R2 k5 ]. @- s" l; w9 V/ a
7 l9 S7 B8 C: I% K8 l5 I: i5 F
9 g0 ^% z+ w, |* y7 O# ?那如何创造最易读的文字？如果是正文文字，有一些基本准则规定每行的字数——每种设备不同—— 有助于打造最佳的可读性。怎么学网页设计
7 u) q E) _, t J6 Y* f0 d1 T- D6 y8 ?1 M. N
从何开始呢？最佳行长度有助于帮你确定文字段落的大小。可以这样：确定正文部分的宽度——通常可以假定分成桌面、平板、手机三种尺寸。然后调整文字大小到理想的单行字数。如何快速学网页设计
" n7 J8 J5 x3 N
5 M4 z) t' h1 C4 A虽然还有其他因素在起作用，这些准则是很好的入手点。网页设计初学入门
. D* f+ d) c. V% _9 C3 t4 v6 q! @" O. w
桌面：每行55到75个英文字符，包括空格；理想状态是每行65个字符& Q+ A$ R1 h" y" p$ O" d9 K
移动设备：每行35到50个字符
! E* q4 r1 _ s* y/ C2 O: d8 h$ Z将最佳的单行字数与绝佳的行距相结合，可以提升可读性。通常，行距最好是按照正文字体字号的百分比来定义，也可以定义为固定值或是em。
' E' B9 |2 q% n& T9 T2 R0 y6 M( o- G) v+ w5 E- J
桌面：字号的1.5倍
! M7 K, C2 y7 D S移动设备：字号的1.75至2倍& }/ O! [3 M$ X. B
如果你想找个工具来简化所有这些工作，试试黄金比例文字计数器 。专业网页设计
; [. s% k' B- i/ C
" @7 M) O0 F" [* _: ?1 _可读性的其他提示
8 E [4 V7 `& V! N* A9 p1 L- u, |( p3 [
要打造可读的排版，正文以外的文字也大有关联。使用标题、无序列表、段落间的额外间距和颜色，也能提升整体可读性（标题则有助于浏览整个网站）。- n0 X0 e7 @6 \8 |; R' f* V
; Q0 Q7 R6 O" q) ?0 n- R考虑使用如下元素增进文字层级，创造更完整、更易读的网页优秀网页设计设计。记得要把这些元素“设计”成独特的字体、字号和颜色，并要在正文中保持协调。网页设计学习交流
) A- S% |' X ]" T. A9 i9 x- u
2 O/ |2 H3 W; |+ k1 S' w标题5 r- _ _% U y9 q7 i
链接" d! ^. D- ^$ f' x1 Z
粗体或斜体字
}, A4 T3 v! i9 n9 e" v/ {无序或有序列表
% V, v' P. {0 c6 H6 Y图像元素，例如照片7 T: Q' I" ~5 @( ?: O
说明文字
2 @4 G* i& |! R( B引用文字
$ Y, a3 s0 H* m8 q3 N3 }" P在各元素中混合使用衬线字体和无衬线字体
3 P9 R1 b3 ^- n( i* z% k3 X8 h1 V10种易读的字体
* ]! f6 | F: Y. s: O( U3 W- s8 ~, I4 P, X
没有一篇讨论可读性的文章不推荐字体的。下面有10种高度可读——并且相当流行——的字体供你选择建立网站。（自备梯子）0 M: T) }4 @) l
$ f3 `7 } @ n" A5 X无衬线字体
" T5 x" b4 y( ^* Z8 M7 D
3 [* |( f6 \* x8 o/ A' c7 B
- P- E# d6 o9 @' [. o% h; W- ~9 S/ E1 X! @3 D( \8 A- A: L* F
2 V( z! \3 e1 V( b6 K7 Y
0 t) T9 W2 d/ ]! e9 V4 l3 w, o
3 K3 w5 P7 v- r* `( }& d8 K
; h4 Z x. ]0 z# b$ ]- s3 n, u. k/ l, g) ^1 r' |$ b2 s
7 l0 h5 c6 @" J
$ W5 [( ^0 c5 a. W3 h
! A2 B* O' O; s
+ j! `; q' I( y5 J% B% E' {
0 T& i2 Q# J, E- m
0 ^2 u. `% r$ ~: ^" e% ]+ X, A0 }) i7 {/ t( F" Y. O' |5 M
衬线字体6 u; {7 h: _& c; \
" A! l! @. n0 ?- u% v, y& U6 W4 j- e' C4 t: p4 d
& E4 Y& f3 \9 d2 z$ U: Z S) X. u, P$ c' s
& [( Z- m$ M( X( Y2 A
5 m: w; o$ X% I
0 a2 A( U4 r1 F/ \ l
+ N- c* A% L0 B5 h- |* m. _: F/ H. K$ |# i- I
$ D7 R; x9 t; f: n3 S' c, T6 Z) ]; b; ^ P0 c
/ d' E& c7 L* j) y. i1 h: \, L; L可读性清单6 Z) f; e+ l+ X$ x0 _
5 D: V+ Y9 C% o6 Q f* u" U6 k, {5 F+ ?
* B. Y, Y$ G. x0 R1 l0 X
- B( k, n2 M2 f. t0 F; O
既然你已经有了好点子，决定下个设计项目中要使用什么字体和样式，你确定能以一种完全可读的方式将它们组合起来吗？下面是一列清单，供你规划字体的设计。, S& r( G0 V# X. V
4 T5 T5 R8 H9 }/ V
主体部分字号够大吗？在每种设备上，它是否达到最佳的行长度？; V; r% O% {4 T8 k
每行文字间是否有足够的间距？4 ?' I- G" b6 W4 _* F5 G: U# H
文字与页面边界和其他元素之间有没有足够的空间？
% {+ E7 n- a, E5 B$ D4 P正文文字颜色与背景对比反差够强烈吗？( ?* t) q$ q* \& ^
每个新段落之间是否有额外的空隙？ R: m* I7 Q) P Q7 A
标题和其他元素与正文文字不同吗？
8 o; z& _% f, m7 D4 J有没有使用其他元素（无序列表、粗体字等）分解大段文字？8 F3 N& d- w4 k1 s
正文文字是否使用了易读的字体（建议选用一种衬线或无衬线字体）？
+ P% i1 M" e% h- F结论( l' R& G Y: n6 B: }, Q1 M
& ]- P7 i" r7 Q
可读性是设计中至关重要的组成部分。如果无法阅读和理解页面上的内容，对于用户而言，它就完全不相关也不重要。
7 z' ]7 C9 A3 f* S; m# J& v1 q! q& \! [( z# r: F- C! {
转载请注明：http://www.801l88.com/，nasw00e或者留下我们的品牌词(浙江一卡通)。 |
