那些天天想上的网站,有哪些好的设计体验?

2020-11-06 栏目:技术相关 查看()
    沟通在设计里起到至关重要的作用,有助于在网站和用户之间建立起明确的关系,还可以帮助用户实现他们的目标,这一点非常重要。当我们在网页设计里谈到沟通时,通常指的是文字。文字在沟通过程里起到至关重要的作用:
 
    “网站里95%以上的信息是以书面语言的形式呈现的。”
 
    好的字体版式可以使阅读毫不费力,而糟糕的排版则使用户无法阅读。就像OliverReichenstein在他的一篇文章《网页设计里95%的部分是字体排版》里说到的:
 
    “优化字体版式就是优化可读性、易访问性、适用性以及整体的图形平衡。”
 
    换句话来说,优化字体版式可以优化你的用户界面。接下来给大家讲讲字体排版的一些规则,帮助你增加文本的可读性和易读性。
 
    1、保持最少的字体使用数量
 
    使用超过3种以上的字体,会使网站看起来毫无结构,非常的不专业。请记住,太多的不同尺寸和类型的字体会破坏设计布局。
 
    总之,把字体数量限制到最少(两种字体是足足有余的,通常一种就足够了),保证整个网站使用相同的字体。如果使用超过一种字体的话,要确保根据字符宽度来匹配字体。
 
    2、尽量使用标准字体
 
    字体嵌入服务(如GoogleWebFonts或者Typekit)有很多有趣的字体供你选择,给你的设计带来一些新鲜、意想不到的效果。而且也非常容易操作使用。以Google为例:
 
    ・选择任何一种字体比如OpenSans。
 
    生成代码粘贴到你的HTML文档中。
 
    完成啦!
 
    所以能出什么问题呢?
 
    不过这种方法却有一个问题,用户更习惯标准字体,因此标准字体阅读起来会更快。除非你的网站对特定的字体有强烈的需求,比如为了品牌推广或者创建一个身临其境的体验,不然一般情况下最好选择系统字体。安全的做法是使用一种系统字体,比如Arial、Calibri、Trebuchet等等。要记住好的字体版式可以将读者吸引到内容本身,而不是版式上。
 
    3、限制每一行的文字长度
 
    每一行的文字长度决定了文本的易读性。不应该由设计来支配文本宽度,而是要由易读性决定。看看下面BaymardInstitute给出的建议:想要有一个良好的阅读体验,那么每一行大概要有60个字符左右的宽度。每一行正确的字符数是文本易读性的关键。
 
    对于手机端来说,每一行则应该在30至40个字符长度内。
 
    4、选择在不同尺寸下都有良好效果的字体
 
    用户会通过不同的设备访问你的网站,而不同的设备有不同的尺寸和分辨率。大多数的用户界面需要不同尺寸的文本元素(复制按钮、段落标签、章节标题等等),选择一个在不同尺寸和粗细下都能保持很好的可读性和易读性的字体,这点非常重要。
 
    5、选择可以分辨不同字母的字体
 
    很多字体的有些字母会比较容易搞混,特别是“i”和“L”(比如说下面的例子),还有一些字母之间的间距太短,比如“r”和“n”在一起看起来像“m”。所以当你选择字体时,确保你的字体在不同环境下不会给读者带来困扰。
 
    6、避免全都大写
 
    所有文本都是大写字母,在一些不需要阅读的地方是可以的(比如缩略词或者logo里),但是当你的信息需要读者去阅读时,不要强迫你的读者去分辨所有的大写段落。
 
    7、不要过于减少行间距
 
    字体版式中,我们对于两行字之间的空白距离称作“行间距”。通过增加行间距,可以提高可读性。一般来说,行间距应该比字符高度高30%左右,这样有利于可读性。
 
    8、确保有足够的颜色对比度
 
    文本和背景不要使用相同或相似的颜色。文字越明显,用户能更快的浏览和阅读内容。W3C给我们建议了合适的文字和图形的颜色对比度比例:
 
    ・小的文字和背景的对比度至少应该为4.5:1。
 
    大的文字(至少14号粗体或18号常规字体以上)比例至少为3:1.
 
    9、避免用红色或者绿色着色文字
 
    色盲是一个常见的现象,特别是男性中8%的人是色盲。因此建议除颜色之外使用附加的信息来区分重要的内容。同样要避免仅仅使用红色和绿色来传达信息,因为红绿色盲是色盲里最常见的两种。
 
    字体排版是件大事,正确的版式可以让你的网站焕然一新,让人心情愉快。而不好的字体排版,则会使用户分心。使字体版式可读性、易读性更高,易于理解,这些是非常重要的。
 
    “字体版式的存在是为了服务于内容的”
 
    字体版式是服务于内容的,永远不要给用户增加阅读的负担。
 
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

郑重申明:常州永佳软件技术有限公司以外的任何单位或个人,不得使用该案例作为工作成功展示!