天天想上的网站,有哪些好的设计体验?
交流在规划里起到至关重要的作用,有助于在网站和用户之间建立起明确的关系,还能够协助用户完成他们的目标,这一点非常重要。当咱们在网页规划里谈到交流时,一般指的是文字。文字在交流进程里起到至关重要的作用:
“网站里95%以上的信息是以书面语言的形式出现的。”
好的字体版式能够使阅览毫不费力,而糟糕的排版则运用户无法阅览。就像OliverReichenstein在他的一篇文章《网页规划里95%的部分是字体排版》里提到的:
“优化字体版式就是优化可读性、易访问性、适用性以及全体的图形平衡。”
换句话来说,优化字体版式能够优化你的用户界面。接下来给大家讲讲字体排版的一些规则,协助你增加文本的可读性和易读性。
1、坚持最少的字体运用数量
运用超越3种以上的字体,会使网站看起来毫无结构,非常的不专业。请记住,太多的不同尺度和类型的字体会损坏规划布局。
总归,把字体数量约束到最少(两种字体是足足有余的,一般一种就足够了),保证整个网站运用相同的字体。假如运用超越一种字体的话,要保证依据字符宽度来匹配字体。以下面的组合为例,左面Georgia和Verdana字体组合有类似的字型,而右边的Baskerville和Impact组合中,Impact字型太粗而遮盖了它配对字体的衬线部分。
2、尽量运用规范字体
字体嵌入服务(如GoogleWebFonts或许Typekit)有许多有趣的字体供你挑选,给你的规划带来一些新鲜、意想不到的作用。并且也非常简单操作运用。以Google为例:
所以能出什么问题呢?
不过这种方法却有一个问题,用户更习气规范字体,因而规范字体阅览起来会更快。除非你的网站对特定的字体有激烈的需求,比方为了品牌推广或许创建一个身临其境的体会,否则一般情况下最好挑选体系字体。安全的做法是运用一种体系字体,比方Arial、Calibri、Trebuchet等等。要记住好的字体版式能够将读者吸引到内容自身,而不是版式上。
3、约束每一行的文字长度
每一行的文字长度决定了文本的易读性。不该该由规划来分配文本宽度,而是要由易读性决定。看看下面BaymardInstitute给出的主张:想要有一个良好的阅览体会,那么每一行大概要有60个字符左右的宽度。每一行正确的字符数是文本易读性的要害。
每一行假如太短的话,眼睛就得来回地看,会打破读者的阅览节奏;假如一行文字太长,读者注意力会很难会集到内容上。图片来源:MaterialDesign
关于手机端来说,每一行则应该在30至40个字符长度内。下面则是手机端的两个网站例子。第一个每一行有50至75个字符(而这个应该是印刷和桌面端的理想长度),第二个则运用了最佳的30至40个字符长度。
网页规划里能够经过运用em或许pixel单位来约束文本宽度,来到达每一行最理想的字符数。
4、挑选在不同尺度下都有良好作用的字体
用户会经过不同的设备访问你的网站,而不同的设备有不同的尺度和分辩率。大多数的用户界面需求不同尺度的文本元素(仿制按钮、阶段标签、章节标题等等),挑选一个在不同尺度和粗细下都能坚持很好的可读性和易读性的字体,这点非常重要。
保证你挑选的字体在更小的屏幕上也能阅览。防止运用连体字,比方下面的Vivaldi字体,虽然它们很好看,但是很难阅览。
5、挑选能够分辩不同字母的字体
许多字体的有些字母会比较简单搞混,特别是“i”和“L”(比方说下面的例子),还有一些字母之间的距离太短,比方“r”和“n”在一起看起来像“m”。所以当你挑选字体时,保证你的字体在不同环境下不会给读者带来困扰。
6、防止全都大写
所有文本都是大写字母,在一些不需求阅览的地方是能够的(比方缩略词或许logo里),但是当你的信息需求读者去阅览时,不要强迫你的读者去分辩所有的大写阶段。就像MilesTinker在他的里程碑作品《LegibilityofPrint》中所说的,与小写字体相比,大写字体大大降低了阅读和阅览的速度。
7、不要过于减少行距离
字体版式中,咱们关于两行字之间的空白距离称作“行距离”。经过增加行距离,能够进步可读性。一般来说,行距离应该比字符高度高30%左右,这样有利于可读性。
DmitryFadeyev指出,正确运用阶段之间的距离,能够进步20%的了解力。正确运用距离的技巧是提供给读者易于了解的内容,然后去除多余的细节。
8、保证有足够的色彩对比度
文本和布景不要运用相同或类似的色彩。文字越显着,用户能更快的阅读和阅览内容。W3C给咱们主张了适宜的文字和图形的色彩对比度份额:
一旦你选定了色彩,要在大多数设备上都测验一下。假如测验发现了问题,那么能肯定用户也会有相同的问题。
9、防止用赤色或许绿色着色文字
色盲是一个常见的现象,特别是男性中8%的人是色盲。因而主张除色彩之外运用附加的信息来区分重要的内容。相同要防止只是运用赤色和绿色来传达信息,由于红绿色盲是色盲里最常见的两种。
10、防止运用闪耀的文本
闪耀的文本可能会引发灵敏的个别不适的症状,并且可能会变得让人讨厌,让用户分神。