申请网站
忘记密码
密 码：
登录名：
建站咨询热线：
0532-88781131
、
18562723728
返回贴子列表
发表新贴
主题：
网站中文字的视觉设计
共有
1115
人浏览过本贴
主贴管理
置 顶
加 精
结 贴
转 贴
昵称：奈薇建站网
论坛积分：108000
发贴等级：
21
发贴数：1156
回贴数：1282
被砸鸡蛋：
1
获赠鲜花：
182
发表时间：2020/2/22 13:20:00
楼 主
网站中文字的视觉设计
可能很多人都要问，网站的文字还需要设计吗？对于很多的网站来说，字在整个网站的内容中占了80%以上甚至更多，或者换个角度上说，网站可以没有颜色，没有图片，但唯独不能没有文字。一个产品团队，有一个角色叫做ContentDesign，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字为佳。512和14px字相对来说最精致，13px在需要的时候可以做正文字，word里面默认的字的大小相当于网页的13px字。6对于一段文字，尤其是正文部分，保证左右至少有15px的留白，便于用户换行时不受到干扰。7文字和背景对比要足够明显，保证最弱文字的可读性。PS1：给Denis的可爱的女儿晨晨设计的wordpress主题今天出炉了，细节方面还需要再调。那丫头着实地可爱！PS2：有一些朋友给我来邮件让我给贵站提建议，我在写完这系列视觉设计的文章之后，统一给予回复。我觉得可以从文章观点中，是否能得到一些帮助呢？尤其是可以看看ucdchina的话题。
奈薇建站网致力于，让每个中国人、每个中国企业都拥有自己的“官方网站”！
回复此贴
单贴管理
修 改
删 除
清理签名
TOP
共
0
个回贴 分
0
页
上一页 / 下一页 当前第
页
奈薇建站网青岛网站建设公司/青岛网站制作公司，专业提供"气质"型网站建设及精美网站制作服务，同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展
热点地区：
青岛网站建设价格
青岛即墨网站制作公司
开发区信息港
山东在线门户
1
182
