网站设计规范字号(网站设计规范字号标准)

网站设计 1729
今天给各位分享网站设计规范字号的知识,其中也会对网站设计规范字号标准进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、网页设计中,最小的字号应该是多少

今天给各位分享网站设计规范字号的知识,其中也会对网站设计规范字号标准进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

本文目录一览:

网页设计中,最小的字号应该是多少

网页设计中的字体一般设置成12px,如果网页的东西相对比较少,也可以设置成14px,关于导航和其他的一般是用ps处理出好的效果,如果是文本一般为14以上并且带加粗。

字体没有特别规定但是有常规的用法:

常规文字 12px;标题,页头 14px、16px;大标题,横幅等 18px。

扩展资料:

网页设计,是根据企业希望向浏览者传递的信息(包括产品、服务、理念、文化),进行网站功能策划,然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种,精美的网页设计,对于提升企业的互联网品牌形象至关重要。

网页设计一般分为三种大类:功能型网页设计(服务网站B/S软件用户端)、形象型网页设计(品牌形象站)、信息型网页设计(门户站)。设计网页的目的不同,应选择不同的网页策划与设计方案。

网页设计的工作目标,是通过使用更合理的颜色、字体、图片、样式进行页面设计美化,在功能限定的情况下,尽可能给予用户完美的视觉体验。高级的网页设计甚至会考虑到通过声光、交互等来实现更好的视听感受。

网页设计主要以Adobe产品为主,常见的工具包括FW、PS、FL、DW、CDR、AI等,其中DW是代码工具,其他是图形图像和FL动画工具。还有最近几年Adobe新出的EdgeReflow、EdgeCode、Muse。

网页设计配色及字体规范

网页设计配色使用风格

不同的网站有着自己不同的风格,也有着自己不同的颜色。网站使用颜色大概分为几种类型:

1、 公司色

在现在企业中,公司的CI形象显得尤其重要,每一个公司的CI设计必然要有标准的颜色。比如新浪网的主色调是一种介于浅黄和深黄之间的颜色,同时形象宣传、海报、广告使用的颜色都和网站的颜色一致。

2、 风格色

许多网站使用颜色秉承的是公司的风格。比如海尔使用的颜色是一种中性的绿色,即充满朝气有不失自己的创新精神。女性网站使用粉红色的较多,大公司使用蓝色的较多……这些都是在突出自己的风格。

3、 习惯色

这些网站的颜色使用很大一部分是凭自己的个人爱好,以个人网站较多使用,比如自己喜欢红色、紫色、黑色等,在做网站的时候就倾向于这种颜色。每一个人都有自己喜欢的颜色,因此这种类型称为习惯色。

网页设计的颜色搭配需要在实践中不断的摸索和不断的创新,认真学习别人的.先进方法和经验,可以快速的提高我们的制作水平。

可以说。网页颜色搭配得当,成功也就走了一半。

标准网页的宽度、字体、字号等的设计原则

标准字体字号:

中文网页一般文字正文都采用宋体12号(12px)字体,因为这个字体是系统对于浏览器特别优化过的字体。虽然12px-20px的宋体字都还能看,但是宋体12px是最漂亮的,是最普遍应用的。

黑体一般是14号,

因为一般很少用黑体做正文,

主要都是标题或者是关键字。

英文网页一般用11px字号,常用的字体是tahoma与verdana这两种!特别是verdana,是最经典,最好用的字体!

在这个显示器百花齐放的时代,网页设计师往往需要考虑不同客户端的浏览体验。

文字大小,是用户体验中的一个重要部分。不同的分辨率,不同的显示器尺寸,乃至不同的浏览器设置,都会对最终展现的文字大小带来影响。

虽然现在很多浏览器已经可以方便地缩放页面,但用户每次光临都要重新缩放,总归麻烦,何况还有许多用户不知道如何缩放页面。

最好还是根据用户的分辨率给用户一个比较体贴的默认字号。

网页设计视觉字体规范

(一)网页宽度及高度

建画布一般1920px*1080px(高度建议可自定)建议视觉中心网站宽度1000px以内,推荐尺寸960px,如果超出1000px,推荐尺寸1200px。(两边需留白,目的自适应)

建议网站高度控制在2-3屏内,大概高度控制在2000px以内为宜。一般一屏高度在710px以内,否则需要下滑,不下滑会看不到下方内容。

(二)字体字号

字体请使用系统自带字体。例:微软雅黑、黑体、宋体、Tahoma、Arial、Verdana。

安卓中文常用微软雅黑,英文常用HelveticalNeue

中文备选字体:方正兰亭黑

英文备选字体Helvetica、Arial、DIN

IOS常用字体:苹方

字号大小:

中文:最低12px起步,12、14……偶数递增

H1标题字36px,行间距60px,  H2副标题字24px,行间距40px,  正文14px,行间距24px,修饰提示性文字12px,行间距20px.

行间距=行高-字号(行高一般为20px)

2、英文:最低10px起步,10、12……偶数递增

字体颜色:

常规颜色:#666666(常用大面积范围文本子,在列表中标题字呈现加粗)

重要文字:#333333(常用于标题和关键性文字)

警示文字:#ff0000(常用于提示性文字,警示文字)

次级文字:#999999(常用于帮助信息,不需太在意的文字)

(三)页面布局

1.整体视觉

2.网页栅格页面宽度:980px栏目间距:10px

3.产品栅格产品宽度:160px产品间距:40px/30px

4.表单

5.Bar

6.留白

7.Button

合适的按钮尺寸

1.导航(文本字号一般14px)站酷导航按钮80*60px,东方头条导航按钮60*50px,宽度控制在50-100px左右,按钮内部左右留白一般20px左右,高度控制在30-50px左右,一般行高200-400%

2.注册、登录

注册、登录按钮一般宽度与上方输入表单宽度保持一致,一般表单文本对话框宽度300-400px左右

高度控制在30-50px左右(行高200-400%左右),由于单独存在,尺寸大、字号大,一般字号14-18px

3.搜索框

由于搜索框一般位于顶部单独存在,搜索框文本域尺寸较大,故按钮亦大,一般宽度控制80-100px左右,高度控制在30-50px左右(行高200-400%左右)

icon搜索按钮,一般宽度缩小,尺寸50px左右

4.购买、关注

一般购买按钮在150-200px左右,高度控制在30-50px左右(行高200-400%左右),由于单独存在,尺寸大、字号大,一般字号14-18px,关注等按钮相对购买宽度略小

(四)icon

制作规格:统一的视角、倒角、材质、尺寸,颜色数量尽量不要超过三种

制作要求:图标必须会意直观,这是它区别于文字的价值

icon尺寸正方形常见一般尺寸30*30  32px*32px 50*50 100*100px视大小自定

(五)命名

(六)图片输出

网页设计字体设计规范

网页设计需要将图片和文字相结合,达到融合的境界,当然文字的设计也是有一定的规范的,下面是关于网页设计字体设计规范,欢迎参考!

网页设计常用字号

最好用偶数字号

1、Header导航文字12号或14号;

2、Menu导航文字14—18号;

3、Sidebar文字12号或14号,

4、一级菜单使用14号、二级菜单使用12号

或一级菜单使用12号加粗、二级菜单使用12号

5、Footer 文字12号或14号

6、正文:大标题文字24—32号;标题文字16或18号;正文文字12号或14号

7、标题文字字号,18px,20px,24px,28px,32px, 尽可能使用双数

8、按钮文字:比如登录、注册页面按钮或其他按钮,文字14—16号,可根据实际情况调整大小或加粗。

9、同一层级的字号搭配应该保持一致。比如,同一层级的版块中标题文字和内容文字大小的一致性

在苹果官网中,产品展示文字以64号和32号搭配,文字内容简短有力,可读性强,同时非常具有视觉冲击力,突出显示了品牌特征。

字体排版规范

一、最佳易读性规范

1.行宽

传统图书排版每行最佳字符数是55—75,实际在网页上每行字符75—85更流行。中文在14号字体时,建议35—45个文字

2.行高

网页设计中,文字间距一般根据字体大小选1—1.5倍作为行间距,1.5—2倍作为段间距

比如12号字体,行间距是12px—18px,段落间距则是18px—24px。

另外,行高/段落之间的空白=0.754。行间距正好是段落间距的75%是非常常见的。

3.行对齐

通常情况下,建议在页面上只使用一种文本对齐,尽量避免两端对齐

4.文字留白

在排版文字时,在版面需要留出空余空间,留白面积从小到大应该遵循的顺序是:字间距、行间距、段间距。此外,在排版内容区之前,需要根据页面实际情况给页面四周留出余白。

5、CRAP原则(carp)

对比(Contrast)、重复(Repetition)、对齐(Alignment)、亲密性(Proximity)

字体选择

字体:中文:宋体,微软雅黑,方正系列(无状态)

字号:网页中正文/导航字号在12px-18px之间

英文可以偏小一些 10px-16px

再小识别性就不是特别好了

中规中矩,经典通用

中易宋体

Win最常见的'字体,小字体点阵,大字体TrueType,但是大字体并不好看,所以最好别做标题。

微软雅黑

大段的微软雅黑字体排列略显厚重,如果是在网页上长时间浏览,会让人的眼睛产生不适。相比而言,衬线字体装饰性强,具有易读性,所以宋体更适合知乎网站这种大段文字网站

微软雅黑给人的感受包括平和、干净、简单、平静、专业

华文细黑

Mac下的默认中文。

英文

Helvetica:

被评为设计师最爱的字体,Realist风格,简洁现代的线条,非常受到追捧。在Mac下面被认为是最佳的网页字体,在Windows下由于Hinting的原因显示很糟糕。

Arial:

Helvetica的「克隆」,和Helvetica非常像,细节上比如R和G有小小差别。如果字号太小,文字太多,看起来会有些累眼。Win和Mac显示都正常

Lucida Family:

Lucida Grande是Mac OS UI的标准字体,属于humanist风格,稍微活泼一点。Mac下的显示要比Win下好。

Verdana:

专门为了屏显而设计的字体,humanist风格,在小字号下仍可以清楚显示,但是字体细节缺失严重,最好别做标题。

Tahoma:

也是humanist风格,字体和Verdana有点像,但是略窄一些,counter略小,曾经是Windows的标准字体,Mac 10.5之后默认也有安装。

Verdana:

是一套无衬线字体,由于它在小字上仍有结构清晰端整、阅读辨识容易等高品质的表现,因而在1996年推出后即迅速成为许多领域所爱用的标准字型之一。

Georgia:

基本上适合正文屏显的衬线字体,非Georgia莫属了。笔画粗重,衬线明线,轮廓较大,小字体显示也很清晰,同时细节还算OK。

有些偏艺术类的网站的大字会使用lobster。更艺术的网站就搜索free font,或者font freebie吧

Trebuchet、Georgia、Times New Roman、Arial、Lucida等字体在26px或更大像素时效果是比较好的,非常适合作为正文的标题。

网页banner字体

网页banner的字体选用方法是要根据banner的主题,去挑选字体,因为字体本身也是有性格的

第一类,稳定型(协调,齐全,稳定,高质)

微软雅黑、冬青黑体、宋体、华文细黑、方正正中黑、方正兰亭系列

第二类,刚硬,锐利,清晰,强烈

造字工坊力黑体、造字工坊版黑体、造字工坊劲黑体、锐字逼格锐线体简、张海山锐线体、华康俪金黑、蒙纳超刚黑体

(更适用大气,热烈,权威,声明等主题)

第三类,轻松,手写,可爱,童趣,亲切

方正经黑、华康海报、汉仪小麦、方正稚艺、新蒂下午茶、汉仪歪歪体、新蒂小丸子

(适用于,游戏娱乐活动海报,h5广告页面,儿童/女性主题)

第四类,灵动,清新,秀雅,精致,古韵

方正清刻本悦宋简体、方正宋刻本秀楷体、方正宋刻本、秀楷体、汉仪全唐诗、简康熙字典体、祥南行书体、造字工房、刻宋

(适用于复古,典雅,传统,品质,灵动等主题)

网站设计规范字号的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于网站设计规范字号标准、网站设计规范字号的信息别忘了在本站进行查找喔。

扫码二维码