2023-03-12 23:53来源:m.sf1369.com作者:宇宇
留意行距离
行距离是指两行文字之间的距离。当行距离太窄时,文字会显得拥挤,阅览时需要花时间去分辩。而行距离太宽时,阅览的连贯性就会遭到扰。一般情况下,两行文字之间的距离不会跳过两个字的高度,适中的行距离在阅览中会有一种轻松、舒适的感觉。
留意行宽
在文字过多的情况下,通常规划者会进行分栏,这样就可以防止阅览过程中眼睛不停地来回环视产生的错行现象,从而提高阅览速度和改善阅览感受。
留意行对齐
无论是活泼的、新潮的、严厉的仍是文艺风格的网页规划,都有一种很明确的对齐方法,这样才干完成一个网页的规范性
通常情况下,主张在页面上只使用一种文本对齐方法,且尽量防止两端对齐。
留意文字数量
随着科技的开展,人们的阅览习气也发生着变化,现代人更喜欢看图而非文字,网页中很多的文字只会让人厌烦,规划过程中,应尽或许地防止使用很多文字。若要防止阅览的压迫感,可采用图文结合的方法,为访客营造一种轻松、舒适的阅览环境。
关于网页文字排版技巧有哪些,环球青藤小编就和您暂时分享到这里了。如果您对网站设计、页面排版、图像处理方面比较感兴趣,希望分享的这篇文章可以给您的学习或工作提供帮助。如若您还想了解更多关于平面设计的素材及技巧等内容,可以点击本站的其他文章进行学习。
1、竖向排版
竖向排版,大多数应用在UI设计中,它打破了常规的横向排版思路。这种版式突破固有规则对其的限制,反而是更为自由的排版。竖向版式也是源于平面设计,然后延伸到网页设计中。
2、分栏式叠加布局
分栏式叠加布局设计方法,一般是将画面分成1/2、2/3、1/4等,然后与文字进行叠排版,形成一种特殊的布局。
分栏式叠加布局的特点:杂志感强、视觉吸引力、形式感,将平面设计的一些思路延伸到UI网页设计中,在作品集的包装和网页头图中也是出现较多。
3、元素居中构图
元素居中构图,将重要信息最大化显示在页面视觉中心,同时也增强视觉冲击力。元素居中构图的特点:突出重要的内容、视觉聚焦、冲击力强。
4、大字体排版
大字体排版一直都受到很多设计师追捧,特别是国外很多优秀网页设计或者平面UI等都大量使用这种排版方法,大字体版式风格更加纯粹与吸引用户目光。大字体版式的特点:聚焦、力量、形式感。
5、全屏大图
全屏大图设计,充分利用了屏幕特征,将信息最大化显示出来,全屏设计在移动端和Web端也是常常出现。现今5G网速的到来,全屏大图肯定也是一个趋势,因此设计师们多留意下这种设计方法。全屏大图设计的特点:突出品牌、视觉冲击力强、吸引目光、品质感高。
描述详细一点,
你可以先用dreamwear将网页排版好,再添加到后台。操作更方便
网页设计在加过js之后排版全乱了通过修改DW属性参数。用DW作网页的时候经常会碰到这类问题的原因,DW的可视化虽然给网页制作人员带来了方便,但是它的许多可视的标示符号也着实讨厌会占据设计试图的空间及修改其布局,所以您的原本整齐的页面变乱了解决办法把类似于脚本一类的会出现标示符号的部分放在HTML元素的非元素空间里,或者不显示的空间里。
网页设计常用字号 最好用偶数字号
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广告页面,儿童/女性主题)
第四类,灵动,清新,秀雅,精致,古韵
方正清刻本悦宋简体、方正宋刻本秀楷体、方正宋刻本、秀楷体、汉仪全唐诗、简康熙字典体、祥南行书体、造字工房、刻宋(适用于复古,典雅,传统,品质,灵动等主题)
特殊字体或艺术字体的设置。
如果你需要用一种特殊的字体来体现你的风格,那么特殊字体或艺术字体最好以图片的方式置入网页。需要用这种字体的地方用图片代替,以保证所有人看到的页面是同一效果。