网站中文字的视觉设计

news/2024/5/20 12:31:16/文章来源:https://blog.csdn.net/iteye_170/article/details/81578492

可能很多人都要问,网站的文字还需要设计吗?

对于很多的网站来说,字在整个网站的内容中占了80%以上甚至更多,或者换个角度上说,网站可以没有颜色,没有图片,但唯独不能没有文字。
一个产品团队,有一个角色叫做Content Design,ucdchina有过一期话题叫做注意界面上的文字,非常精彩,我在写本文之前,再次通读一遍,一方面是学习,另一方面,是避免写重复的内容。如果你按照里面的观点对照你的网站,相信一定会有所帮助的。
那期话题只有潇潇重点说的是文字的视觉方面,那篇文章非常精彩,也是该期话题的“浏览冠军”,本文是延续性的一些想法。

先看看网站以外的中文字体设计,英文的正文字体有很多可以选择,但中文的正文字,总的来说就两种:宋体和黑体。在传统的版式设计中,设计师们都喜欢做英文的排版,为什么?从视觉上来看,英文的组合很容易形成线和面的关系,而且字母有节奏感,比如aby这三个字母放一起有高矮区别。中文字相对来说,单调、孤立、不流畅。

回到网站中文字的设计,设计师基本上不用考虑在字体上做选择,只有宋体。前文说:单个字成点,一行字成线,一段字成面。这是版式设计最基本的原理,我们需要做的就是强化这样的感觉。拿微软雅黑和宋体来举例子,本人非常喜欢微软雅黑的设计。


将12号的宋体和雅黑放大,注意以下细节:
1 雅黑要比宋体宽一像素
2 雅黑让每个笔画往四周撑,比如“是”上面的“日”,雅黑显得就要饱满
这么做的目的只有一个,让中文字体更容易形成线,从而读起来更流畅。我们可以看到,尽管雅黑不是真正的正方形,但它看起来要比宋体方一些。

看完上面这个例子,我的观点也就出来了:别把你的文字看成字,而是看成点,文字的视觉设计其实就是处理点线面的关系。

下面是具体设计方面的点:
1字体的单位用px而不用em,尽管12px和0.8em大小差不多。
updete:感谢网友Dreamcolor推荐文章95%的中国网站需要重写CSS,该文很详细的解释了px和em的差别和原理。这点写之前是我想当然了,没有深入理解em单位。只看到很多用em的视觉效果不好看,现在明白了,是因为没有把em单位和px对上号。结论是应该用em而不是px,但需要把em的值设置好。
2 在css文件body中的font-family里面保证”宋体”前面有Arial或者verdana,个人推荐这么写:font-family:Helvetica,Georgia,Arial,sans-serif,宋体。这样能保证你界面中的字母、数字、符号看上去美观一些,更重要的是更加易读。
3 子条说:12号宋体时,我们一般使用18-20像素的行距。14号宋体通常使用22-24像素的行距。
很赞同,这个行距大小随着单行字数的多少而上下浮动。我认为12px字如果单行字数少的话,17也是可以接受的。
4 正文一行字数最好不超过50,首页的标题文字以8-20字为佳。
5 12和14px字相对来说最精致,13px在需要的时候可以做正文字,word里面默认的字的大小相当于网页的13px字。
6 对于一段文字,尤其是正文部分,保证左右至少有15px的留白,便于用户换行时不受到干扰。
7 文字和背景对比要足够明显,保证最弱文字的可读性。

PS1:给Denis可爱的女儿晨晨设计的wordpress主题今天出炉了,细节方面还需要再调。那丫头着实地可爱!

PS2:有一些朋友给我来邮件让我给贵站提建议,我在写完这系列视觉设计的文章之后,统一给予回复。我觉得可以从文章观点中,是否能得到一些帮助呢?尤其是可以看看ucdchina的话题。

来源:uitony.com 作者:Tony 2008年04月14日 15:47 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_825257.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网站的视觉路径和版式设计

cooper谈到用户的视觉路径一般是:从上到下,从左到右。好的视觉设计路径应该是顺应这样的用户习惯,糟糕的设计会让用户无所适从,焦点到处都是。当然,上图的视觉路径图并非绝对的,浏览习惯因人而异。 网站中方…

国外web设计教程资源网站收集

作者authorSawser来源http://sawse.com/2007/11/21/top-12-sites-and-tools-for-web-design-and-inspiration/不管你是专业还是业余的网页设计者,或者仅仅想了解一下网页设计是何物的,这里有些好棒的资源值得去浏览并收藏。这些收藏涵盖了各种设计类型&a…

互联网上最独特的20个网站

当你在创建一个新的网站的时候,一个版面独特的网页总会在不经意间激发你的灵感。不知道这些使用背景图片产生强烈视觉冲击的页面有没有给你带来设计灵感。1, http://www.popmatik.co.uk/ 2, Digitalmash.com 3,Melissahie.com 4&a…

60 个激发你灵感的电子商务网站展示

电子商务多火啊,可是多数电子商务网站做得都很垃圾,这里列出了 60 个设计精美的电子商务网站,你值得看看。 Heart Breaker Fashion Here You Buy Vintage-inspired Fashion Shop Sanctuary T Shop Sancuary T Showcases Awesome Beauty And H…

在线医生预约网站ZocDoc获高盛2500万美元C轮投资

据美国科技博客techcrunch报道,在上个月获得俄罗斯风投机构DST 5000万美元投资之后,位于纽约的在线医生预约网站 ZocDoc昨日在其C轮融资中又从高盛投资公司募集2500万美元,这使得ZocDoc公司C轮融资总额达到了7500万美元。至此,该公…

Box of Bundles:免费设计资源网站

Box of Bundles 网址:http://www.boxofbundles.com 地点:美国 创立时间:2012年2月 用户群:设计师 Box of Bundles 是一个免费提供创意设计资源的新网站。类似酷站之前推荐过的免费的设计资源素材网站 Premium Pixels,都…

给你的网站加上站内搜索---Compass入门教程

Compass(基于Lucene)入门教程 1 序言 2 Compass介绍 3 单独使用Compass 4 springhibernate继承compass 4-1 jar包 4-2 配置文件 4-3 源代码 4-4 说明 4-5 测试 5 总结下吧 1 序言 这些天一直在学点新的东西,想给毕业设计添加点含量,长时间的…

想学习建个网站?WAMP Server助你在Windows上快速搭建PHP集成环境

我想只要爬过几天网的同学都会知道PHP吧,异次元的新版本就是基于PHP的WordPress程序制造出来的,还有国内绝大部分论坛都是PHP的哦。据我所知很多同学都想要试着学习一下PHP,无奈要在Windows下安装搭建好一个PHP环境来学习对于菜鸟同学来说繁琐…

计算机组成原理移位图,逻辑运算和移位指令-计算机组成原理与汇编语言-电子发烧友网站...

3.4.1 逻辑运算和移位指令 1.逻辑运算指令(1)NOT OPRD该指令对操作数进行求反操作,然后将结果送回。操作数可以是寄存器或贮器的内容。该指令对标志位不产生影响。例如: NOT AL(2)AND指令该指令对两个操作数进行按位相“与”的逻辑运算。即只有参加相与的…

IE浏览器中用Firebug调试网站的方法

对于大部分做前端设计者而言应该都使用过Firefox浏览器下一款调试网站的扩展插件firebug吧,功能非常的强大,对于我们找出网页兼容性的问题非常的有效。不过对于很多不喜欢使用Firefox浏览器的开发者而言,那么IE浏览器有没有类似的插件呢&…

那些香喷喷的网站

1、蓝奏云网盘:为用户而变革,越简单越好,越快越好 ! https://pc.woozooo.com/ 网盘工具,无限制的储存空间。最重要的是下载速度毫无限制,你的网速有多快下载速度就有多快! 2、docsmall&#xf…

查看php网站瓶颈,使用XHProf查找PHP性能瓶颈

XHProf是facebook 开发的一个测试php性能的扩展,本文记录了在PHP应用中使用XHProf对PHP进行性能优化,查找性能瓶颈的方法。安装Xhprof扩展$ wget http://pecl.php.net/get/xhprof-0.9.4.tgz$ tar -zxvf xhprof-0.9.4.tgz$ cd xhprof-0.9.4$ cd extension…

Linux康乐备份,Kangle(康乐)ep控制面板备份网站数据和恢复的教程

【原创版权所有】其他拓展文章:强烈推荐!如果大家希望自动备份并异地保存数据,请访问KOS工具箱 – Kangle EP云备份:KOS云备份,是KOS工具箱推出的第一款付费服务。它可以帮助您每日自动备份Kangle EP所有主机数据。并且…

CSU前端网站 +登陆系统

实现CSU网站主页,并设计实现一个简单全栈登陆系统 实现要求短信验证码实现:臻子云关键功能解析运行结果实现要求 1)前端页面的基本布局 布局类似于学校门户顶部需有 LOGO 栏目;提供轮播图;提供账号密码登录方式&…

Linux中搭建静态网站(练习题)

在rhel8的系统上搭建网站:该网站ip地址主机位为11,设置documentroot为/www/你的名字拼音的缩写,网页内容为:my name is… 做题思路: #面对这类的题目,确定好做题思路: #配置题目要求的IP地址关…

搭建https的静态网站

搭建一个基于https://www.zuoye.com访问的web网站,网站首页在/www/https/,内容为exercise。 思路: #思路:准备好https所需要的东西关闭防火墙及SElinux创建目录编写网页内容编写配置文件https相关的东西: [rootloca…

网站架构方案全解析

1、HTML静态化其实大家都知道,效率最高、消耗最小的就是纯静态化的html页面,所以我们尽可能使我们的网站上的页面采用静态页面来实现,这个最简单的方法其实也是最有效的方法。但是对于大量内容并且频繁更新的网站,我们无法全部手动…

[au3]下载css文件里的图片,保存别人的网站时有用。

;by onepc 153785587 #NoTrayIcon#Region ;**** 参数创建于 ACNWrapper_GUI ****#AutoIt3Wrapper_iconC:\windows\system32\SHELL32.dll|-123#EndRegion ;**** 参数创建于 ACNWrapper_GUI ****#include <INet.au3>#include <ButtonConstants.au3>#include <Edit…

老鸟传经:做网站的实用建议

做网站现在似乎是每个企业或团队都必做的一项工作了——不管你所在的行业是不是和互联网相关。我平均每周都会接到一两个朋友的电话问&#xff1a;我们要做一个网站&#xff0c;该用什么技术&#xff0c;PHP、Java还是.NET&#xff1f;我们该从哪里请开发人员&#xff1f;我们现…

可以判断用户打开页面次数吗?_SEO搜索优化,你可以不做外链吗?

自从2015年谷歌建立了Rainbrain&#xff0c;利用机器学习对内容分析与判断以后&#xff0c;很多SEO专家就开始讨论一个问题&#xff0c;SEO关键词排名&#xff0c;我们是不是可以不需要发布链接了&#xff0c;虽然百度也在一度强调&#xff1a;我们将逐渐摒弃技术排名的方法&am…