文字可以是优美的、简单的、狂放的、有趣的、激动人心的，还有很多其他种类。它能激起情绪，帮助用户理解你所要传达的讯息。字体有很多种，但有一点是共通的——它必须具有可读性。1 g0 O3 ]5 F4 P3 v& A
) q W/ g$ H- K# C) z0 w \) X
这是一个时常被遗忘的因素。设计师们往太狭小的空间填入太多信息，或是选用了外观胜过可读性的字体。但重点是：如果字体无法阅读，你的设计就无法完全生效。网页设计基础- O% |. P! Q: g1 F' g( C/ Y
- T: }" V7 \& w2 z
尽管有些耸人听闻，但它几乎是普适规律。你会问：“作为艺术元素的那些字体怎么说？” 不可阅读的字体在这类设计中确实能发挥作用，但是，仅限于与可读的文字搭配使用。学网页设计入门- T* w0 t7 }% H. U, \8 `
$ x7 a# j v1 S) @ ]; C) ] b
在狭窄空间体现可读性
- S" \! t5 c5 ]+ M" ~& c# @0 R, Q! H4 L& f: b: G* ]( g; n* I
! T6 R+ _/ H9 i" d! n* i$ w, w9 x' }7 t P% z
$ V; a( l8 U! m7 l4 V( I1 w1 H) P
) H6 o# M G( s3 \. _6 P% H
P) U6 \3 I% |( D& l$ u n) W+ w( r1 a* d( F" R
( \4 L8 C. i- @: h7 O$ ~: z
$ S0 _: f/ p" Y4 z, y2 {8 L什么使得文字能够阅读呢？它实际上是很多因素共同作用的结果，包括行长度、行距、字体样式、外边距和内边距，还有颜色和对比度。网页设计图片
" R, M7 k- P# U( @4 o
+ a5 m6 j- T- }$ s; E8 @每一个元素，都影响着屏幕阅读的难易程度。这每一种元素，都是设计师能够操控的。记住，本文中谈论的这些元素，是指网站主体部分的文字，此处文字的可读性可以说是首要考虑因素。（别处文字的标准相对宽松许多，只要主体部分高度可读。）( h5 o$ @' b& R( t3 ?* K
$ S6 k. z! p& B% Y# Z) v行长度：每行的字符个数对于整体的可读性起着主要作用。如果文字段落非常宽，那是很吓人的，难以阅读。同理，每行文字太短也不行，会给读者的眼睛带来压力，造成混乱。
8 d2 F4 E; E9 [- B9 X% v行距：每行文字间的间距也同样重要。看看这篇文章，如果每行文字都与上下两行粘在一起，你就无法理解这些句子。6 ^6 B7 Y5 ^ D) h& r3 p
字体样式：字体的样式也会影响可读性。简洁的衬线字体和无衬线字体是最具可读性、最易浏览的，而那些华丽的手书和新奇字体则最难破译。
+ S) z4 l$ P0 M" B% U外边距和内边距：和行距一样，元素周边和之间的空隙也影响着用户阅读文字本身。5 f" Z' }; D D: K
颜色与对比度：文字颜色与相应背景也至关重要。如果在绿色背景上写绿色文字，就难以阅读了。设计师选择浅色字深色背景，或是深色字浅色背景，都是有原因的。对比使得字符容易阅读。学习网页设计有什么好处. |+ o; X) y5 P7 F# S. y
7 f; h5 C* X/ ~. Z! {0 t1 t不同屏幕上的可读性
0 C) Y' |6 p7 P% V8 } M2 V. f+ R* p5 d) U: E
! _: Q7 Q: b( G- J' a1 C, d
* N7 S: I: O* z8 o1 ]5 t1 q- R
! E( K ~! U& l2 F! ~那如何创造最易读的文字？如果是正文文字，有一些基本准则规定每行的字数——每种设备不同—— 有助于打造最佳的可读性。怎么学网页设计
( w5 q# U A+ g7 n6 ]; b; f' B, d& i# c3 ~4 O( B9 Z
从何开始呢？最佳行长度有助于帮你确定文字段落的大小。可以这样：确定正文部分的宽度——通常可以假定分成桌面、平板、手机三种尺寸。然后调整文字大小到理想的单行字数。如何快速学网页设计
" F, J7 G t0 C7 b" A5 i, o. a( E- s5 v% Z; R7 ~8 R
虽然还有其他因素在起作用，这些准则是很好的入手点。网页设计初学入门/ e/ s0 w# Y, {' N" q2 m
8 C4 I& V# {. X0 P# t* ?! A/ J桌面：每行55到75个英文字符，包括空格；理想状态是每行65个字符0 u9 a3 ~5 P: V+ l
移动设备：每行35到50个字符
& I( i$ r5 P& T n" g将最佳的单行字数与绝佳的行距相结合，可以提升可读性。通常，行距最好是按照正文字体字号的百分比来定义，也可以定义为固定值或是em。, O6 w; Y4 ?2 [' n+ Y
$ ^1 b: ~7 q2 t6 t! B/ [桌面：字号的1.5倍
$ G. l8 z6 {* u9 u移动设备：字号的1.75至2倍1 W* z. L6 N9 w8 L
如果你想找个工具来简化所有这些工作，试试黄金比例文字计数器 。专业网页设计/ X* k6 w5 R% A8 K! t
& b2 U. N2 }5 e3 A& z6 O B; M7 d可读性的其他提示7 N1 I5 O; Q# E4 f" `! ^+ N7 u
: @* Z6 L2 S2 i k+ ^- G+ b1 I! p
要打造可读的排版，正文以外的文字也大有关联。使用标题、无序列表、段落间的额外间距和颜色，也能提升整体可读性（标题则有助于浏览整个网站）。$ z0 n! e2 H7 |
: f1 w/ y/ W3 U+ w, c
考虑使用如下元素增进文字层级，创造更完整、更易读的网页优秀网页设计设计。记得要把这些元素“设计”成独特的字体、字号和颜色，并要在正文中保持协调。网页设计学习交流8 M5 n2 ~' }. c+ }" N
& z" z( g* \6 A, R
标题3 M! G3 y' L( b: J! p; t3 V
链接
; t4 F+ r' U$ W粗体或斜体字8 N; m# t9 [& w4 q+ B
无序或有序列表
' ^; i: f- Q0 u- m/ {, M. U5 \图像元素，例如照片
. w5 h1 ~2 v4 P3 _6 V& R/ E- D说明文字
) C" [1 h% F; o8 j* _' t* ?引用文字
7 s0 e) Z7 g% h \在各元素中混合使用衬线字体和无衬线字体
/ O9 s# V6 M- P" q8 q1 Y10种易读的字体9 x5 R. V" o, e
( E8 A. x8 Q+ _1 D4 n% n, v! Y- h" P
没有一篇讨论可读性的文章不推荐字体的。下面有10种高度可读——并且相当流行——的字体供你选择建立网站。（自备梯子）
" D5 h; x7 \4 p5 V. y- Y
* J z5 L r8 j* a9 F9 U) w. D无衬线字体* x; U5 }/ g/ t
9 [' ^3 j9 v4 S' [
( i8 G0 e2 y; H0 U1 `' ^' x0 C
/ c0 n" t- `8 w+ }/ F2 ]9 W" g0 N& O5 A4 T: C
{0 z$ V( Q( d0 b1 S* l9 ~
% [* w7 l: J$ J& D, L: r6 x# H: V
3 i0 v4 w7 t5 B+ R d* J a$ Y# i/ i
/ i! z- a( q- v m0 z s" I9 G% N7 f2 W, d8 L$ }- c I
4 X& s/ b# {2 x7 s& D1 S/ u; T1 A G. ^$ N1 w) v
: |/ I7 Q E* e" l' L
N) f0 l, d% ~, `) K$ M
2 }7 b3 ]' h! ?7 E2 {* ~衬线字体
; B4 O {9 z: F9 p( w5 B) Y) ~6 q& V; R; i5 ~- C4 V+ Y \3 R
6 [9 ]* s, t4 j7 b
' Z; d: X* J) {, O! H% ]" E% ]/ G# q5 P( c& R: W
' C8 C: v. c& L( m! G
# E, t2 C: D- R8 J# n! p# T. M( ^7 d) h' R; V7 ~8 g$ Z
7 m# M) f3 S# {$ z$ e
& i# m1 g9 ^5 |4 S/ X0 X9 I
, V6 Z( \# k# a% T( ^, c; f9 M) f) t* Y
- B$ ~5 q( E& P/ X- V9 A可读性清单& u4 [$ q- q; O+ m0 F
, e4 L* w, y1 q6 Z9 o0 R
2 x) Q) A) s* E( }! g
$ t7 Q) n3 q: P
# o. a! X% n# ~/ Y既然你已经有了好点子，决定下个设计项目中要使用什么字体和样式，你确定能以一种完全可读的方式将它们组合起来吗？下面是一列清单，供你规划字体的设计。! h+ q9 r- Z, m7 x
7 j# e c5 R. x2 Z8 p. X
主体部分字号够大吗？在每种设备上，它是否达到最佳的行长度？
# K9 T& l* h" v* ?每行文字间是否有足够的间距？
; K) |' r, z0 A8 v- k" e+ s! M文字与页面边界和其他元素之间有没有足够的空间？
; `$ Z) F( s0 x; t$ j7 ~1 m7 n正文文字颜色与背景对比反差够强烈吗？! D- k- h+ o/ u: o; L H
每个新段落之间是否有额外的空隙？ b0 }1 G5 _$ \, F
标题和其他元素与正文文字不同吗？
, L1 n! ~; I. e* C0 N有没有使用其他元素（无序列表、粗体字等）分解大段文字？( i7 P X& l+ X0 `
正文文字是否使用了易读的字体（建议选用一种衬线或无衬线字体）？8 L8 L( c: r: T1 W% m
结论0 f3 Z! f, ?4 l$ a; E1 t1 G) O
) n" s s8 E' {) S8 [+ c9 ~+ J可读性是设计中至关重要的组成部分。如果无法阅读和理解页面上的内容，对于用户而言，它就完全不相关也不重要。/ m3 n. D, p' x
. G/ J/ N8 ]- w$ q
转载请注明：http://www.801l88.com/，nasw00e或者留下我们的品牌词(浙江一卡通)。 |
