• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 网站的文字还需要设计吗?

网站的文字还需要设计吗?

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含设计,需要,文字,网站,宋体,可以,em,面的,没有,字体,一些等相关知识,佚名 希望在学习及工作中可以帮助到您

可能很多人都要问,网站的文字还需要设计吗?
对于很多的网站来说,字在整个网站的内容中占了80%以上甚至更多,或者换个角度上说,网站可以没有颜色,没有图片,但唯独不能没有文字。
一个产品团队,有一个角色叫做Content Design,ucdchina有过一期话题叫做 注意界面上的文字 ,非常精彩,我在写本文之前,再次通读一遍,一方面是学习,另一方面,是避免写重复的内容。如果你按照里面的观点对照你的网站,相信一定会有所帮助的。
那期话题只有 潇潇重点说的是文字的视觉方面 ,那篇文章非常精彩,也是该期话题的“浏览冠军”,本文是延续性的一些想法。
先看看网站以外的中文字体设计,英文的正文字体有很多可以选择,但中文的正文字,总的来说就两种:宋体和黑体。在传统的版式设计中,设计师们都喜欢做英文的排版,为什么?从视觉上来看,英文的组合很容易形成线和面的关系,而且字母有节奏感,比如aby这三个字母放一起有高矮区别。中文字相对来说,单调、孤立、不流畅。
回到网站中文字的设计,设计师基本上不用考虑在字体上做选择,只有宋体。前文说:单个字成点,一行字成线,一段字成面。这是版式设计最基本的原理,我们需要做的就是强化这样的感觉。拿微软雅黑和宋体来举例子,本人非常喜欢微软雅黑的设计。

将12号的宋体和雅黑放大,注意以下细节:
    雅黑要比宋体宽一像素 雅黑让每个笔画往四周撑,比如“是”上面的“日”,雅黑显得就要饱满

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

PS1:给 Denis 的 可爱的女儿晨晨设计的wordpress主题 今天出炉了,细节方面还需要再调。那丫头着实地可爱!
PS2:有一些朋友给我来邮件让我给贵站提建议,我在写完这系列视觉设计的文章之后,统一给予回复。我觉得可以从文章观点中,是否能得到一些帮助呢?尤其是可以看看ucdchina的话题。

您可能想查找下面的文章:

  • 浅谈响应式设计
  • 分享15个最佳的HTML/CSS设计和开发框架
  • 专题页设计的5个基本功(阿里巴巴UED 山木)
  • 巧用扁平化风格来设计网站的方法
  • 让一个网站看起来高大上且更有设计感的方法介绍
  • 网站设计效果体验 之七种不同的色系
  • 高效导航设计三原则 网页设计师必知
  • 一枚设计师再吐槽锤子官网
  • 网页设计与西方建筑的发展历程有何相似之处
  • 未来最成功的公司是技术公司还是设计公司?

相关文章

  • 2018-08-23「这个控件叫什么」系列之Popover/气泡弹出框/弹出式气泡
  • 2018-08-23网易资深设计师:如何建立可信赖的品牌形象?
  • 2018-08-23近两万字的干货!可能是最全面的网页设计基础知识全攻略
  • 2017-08-06浅谈网页中的字体的设置
  • 2018-08-232018 阿里巴巴 UCAN 回顾!张晶华:用户研究在产品定义上的新影响力
  • 2018-08-23还有这种操作?这10个导航栏设计技巧别错过了
  • 2018-08-23实用经验!移动AR体验设计的特质与挑战
  • 2018-12-10Fluent Design
  • 2018-08-23想自学插画?9个必备的手绘插画教程神器
  • 2018-08-23超实用!体验设计师如何自建知识体系?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • css里面图片路径问题(同包/不同包)探讨
    • 30个网页设计色彩搭配的优秀案例分享
    • 阿里设计师:如何用动效创新方法解决产品问题?
    • 想要做好用户调研,你要学会这九种定量用户研究的方法
    • 用户体验设计师,这10个世界级盛会是为你准备的
    • 水彩自学第四集:水彩颜料常见问题和自用测评
    • 超全面的移动端UI 设计规范整理汇总
    • 在现代网页设计中,动效有哪些常见的用法?
    • 这个大公司越来越重视的体验文案编写师,到底是干嘛的?
    • 辣眼睛?这种粗粝但有趣的设计风格正悄然流行

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有