何为网页设计
前言:网页设计(web design,亦称Web UI design,WUI design,WUI),基于企业期望向访客传达的信息(涵盖产品、服务、理念、文化),进行网站功能规划,进而进行的页面设计美化作业。作为企业对外宣传资料的一种,精致的网页设计,对提升企业的网络品牌形象极为关键。
网页美术设计(亦称网站美术、美工设计)在某种程度上可称为“视觉工程”,网页的美术创作需充分吸引访客的注意力,使访客产生视觉上的愉悦感。因此,在网页创作过程中,必须将网站的整体设计与网页设计的相关原理紧密融合。在某种程度上,网站美术设计是网站成功的关键因素。
网页美术设计与网站整体形象保持一致,符合艺术规范和网站标准,重点关注网页色彩(主色调和次色调)、图片的应用及版面布局,保持网页的整体统一性。
网页设计要点
1、网页是客户浏览网站获取信息的主要渠道。为此,页面加载速度快、浏览页面方便快捷、无错误链接是设计网页最重要的要求。
2、网站是企业的门面。为此,网页美术设计一般需与企业整体形象保持一致,需符合CI规范。需关注网页色彩、图片的应用及版面布局,保持网页的整体统一性。
3、在新技术的应用上需考虑主要目标访问群体的分布地域、年龄层次、网络速度、阅读习惯等。
4、网页设计需体现企业文化和经营管理。
5、制定网页改版计划,如半年至一年时间进行较大规模改版等。
6、主页是客户登录企业网站,首先看到的一个页面,也是获取信息的起点,为此,主页的设计除具体有以上特点外,还要求清晰的导航系统和独特的创意设计
相关阅读》》自适应网页设计与响应式网页设计
在现代网站开发中,有两种主要方法,即自适应和响应式,这两者都使用断点的概念,这个概念是通过媒体查询所创建的限制,在这些断点上,网站的布局被强制更改。
自适应方法和响应式方法之间的差异可以归结为,网站在断点间变化,自适应配置上是一系列宽度固定的布局而响应式使用的尺寸则很灵活,所以即使在断点之间,网站仍具有一定的流动性。
鉴于不同设备屏幕尺寸的巨大差异,试图使一系列宽度固定的页面适应即使是最极端的配置都是一种不明智的做法,更好的做法是使用流动设计,它包括使用长度值的百分比以使页面元素的尺寸适应窗口的大小,这种做法也是构建响应的关键。
大多数用户所使用的台式机或笔记本电脑的显示器宽度大于或等于1024,那么制作一个宽度固定为960的页面是可以接受的,但这种情况已成为历史,如果现在还按照上述方式设计,那将意味着使用移动设备的用户看到的是一个按比例缩小的屏幕,他们只有通过放大、缩小和左右滚动才能完全浏览页面。这种结果并不是不能接受,但也并不理想。
使用百分比而非固定值意味着页面元素可以随着窗口的尺寸进行伸展,从而使内容流进屏幕边界内,这就是为什么这种方法被称为滚动设计,将这个方法与内容或设备的媒体查询相结合,就得到是响应式设计的核心,这为用户提供量身定制的称心体验,却无需考虑用户设备的情况。
响应式网页设计排版需要注意什么
1.精心挑选字体将为你赢得灵活而高效的排版
自从客户端字体(Font Face)被引入网页设计中之后,网页设计师们便拥有了将不同字体用于自己设计中的自由。此前,他们只能使用特定的,与网页安全兼容的字体。
但面对这些可以自由使用的字体,设计师们还需要知道如何正确地使用它们。响应式网页设计已经成为多数网站的标准设计模式,不过由于要顾及不同尺寸的设备屏幕,它对网页排版也提出了一些限制。所以网页设计师在一个响应式网页系统中使用多种字体时,必须十分审慎。在同一个网站中不要使用太多种字体,最好不要超过三种。同时也不要使用极为流行的字体,这并不能让你的网页看起来比别的网页更有优势。
2.突出显示标题
网页排版的一个特点就是标题在版式中占据突出位置。别致的标题能吸引用户在你的网站停留更久。为了实现这一点,你可以利用字形(glyphs)和连字(ligatures)技巧创造外观更独特的标题。
连字指的是看起来似乎是连接在一起的字母。例如,单词“fish”中的f和i在某种字体里可能联成一体(fi)。通过浏览器的字体设置功能或借助“文本渲染——优化清晰度”(Text Rendering- OptimiseLegibility)特性,你可以轻松地实现连字效果。火狐浏览器已经设置了默认的连字符。在某些字体中使用特定的连字组合效果能为你的网页版式增加美感和风格。在网页排版软件的Text, Type或Open Type目录中,一般都可以开启或关闭连字效果。当合适的字母相邻出现时,这些软件会自动为它们设置连字效果。
3.合理搭配不同大小和颜色的字体
正如上面的图片所传递的信息一样,我们在网页设计中必须选择能在桌面端和移动设备屏幕上都清晰显示的字体。一款字体在印刷品中与在数码设备中显示的效果是不同的。因此我们必须理解font family属性,风格和效果。根据W3C对于CSS字体的规定,Serif, Sans-Serif, Monospace, Fantasy和Cursive等字体都具有font family属性。
第二,应根据网站的主题或分类来选择字体。这样才能确保你的网页能引起目标受众的共鸣,达到想要的效果。衬线字体同样能用于提升文本的阅读效果,强化要传达的信息。这里的问题是,衬线字体的特性决定了它只能在高解析度的屏幕上正常显示,在低解析度的屏幕上可能会导致糟糕的结果。因此建议你在短标题中使用艺术字体,在正文中采用更简洁的字体。
其次,需依据网站的宗旨或类别挑选字体。如此一来,方能保证网页与目标用户产生共鸣,实现预期的效果。非衬线字体亦能有效增强阅读体验,凸显传达内容。然而,问题在于非衬线字体的特性使其仅在高清屏幕上能良好展示,在低分辨率屏幕上可能产生不良效果。因此,建议在简短标题中使用艺术字体,而在正文部分选用更为简洁的字体。
-
在响应式布局中,调整行距至关重要
必须调整网页中的行距(line length),因为字行的宽度与布局的适应性紧密相连。响应式设计亦涉及在不同屏幕尺寸下字体的自适应调整。因此,调整字行的宽度是必不可少的。
理想的行距应保持在每行文本字符数在45-47个之间,包括空格和标点。最长不超过85个字符。这一结论是基于对阅读习惯和眼动规律的研究得出的。据此,有专家建议网页内容采用左对齐的排版方式,因为人们在阅读时视线通常从左至右在水平方向上移动。 -
用户与屏幕距离不同时,调整字体大小可提升阅读体验。在响应式布局设计中,这一点必须考虑。
字体大小需确保在设备上清晰可见、易于阅读。为实现此目标,可能与之前提到的“理想行距”产生冲突。因为“理想行距”可能需要调整字体大小,而这两种调整都可能导致文本难以阅读。关键在于确保访客能够舒适地阅读网页内容。响应式设计的一个关键点在于,根据用户与设备屏幕的距离,应用适当的字体大小。关于字体大小与阅读距离的关系,已有相应的计算方法。 -
响应式布局要求浏览器支持不同字体大小
若网页设计中需要使用特定自定义字体,必须确保浏览器支持加载和显示这些字体。即使字体本身清晰无误,浏览器兼容性问题也可能导致前功尽弃。还需检查保存的字体文件格式是否与网页中使用的字体兼容。不兼容的字体无法正常加载,最终影响网页显示。
案例分析:从上述示例中可以看出,我们需要使用标准字体或“字体库”。首先,通过“字体测试”来确认一款字体是否适用于网页。浏览器为每个字体系列提供“首选选项”、“备选选项”、“第三选项”等。如果浏览器在该系列中找不到合适的字体,它会自动选择默认的无衬线字体、衬线字体或等宽字体。
例如,许多浏览器自带Century Gothic字体。可以创建一个字体库,将Century Gothic设为首选,其次是Arial、Helvetica,最后是无衬线字体。注意,在CSS中,标题包含多个单词的字体需要加上引号。例如:font-family:“Century Gothic”, Arial, Helvetica, Sans-Serif。
这样,浏览器会首先尝试使用Century Gothic字体。由于许多浏览器自带这款字体,大多数用户在浏览网页时也会看到Century Gothic字体。对于未配置Century Gothic的浏览器,浏览器会按照Arial、Helvetica、预设置的顺序寻找替代字体。
- 影响字体物理属性的要素会影响字体设计的灵活性
响应式布局可能受到影响字形的要素的限制。这些要素包括字重、字宽、笔画对比、字体高度、光学尺寸等。这些因素的微小变化都会影响网站的视觉效果。尽管如此,现在已有多种工具可以帮助设计师部分克服这些限制。
Superpolator和FlowType.js是这类工具中的佼佼者。当屏幕尺寸减小时,不同比例的网页差异更为明显。因此,需要在网页尺寸和缩放比例之间找到平衡点。例如,标题字体与正文字体的大小比例应为多少,这就涉及到比例问题。这也是为什么我们需要响应式布局的原因。我们需要在断点中能够自动缩小的字体,因为设计师无法为网页内的所有字体元素逐一调整基线风格。
网页设计概述
网页设计旨在根据企业希望传达给浏览者的信息(包括产品、服务、理念、文化),进行网站功能规划,随后进行页面设计美化。作为企业对外宣传材料的一种,精美的网页设计对于提升企业的网络品牌形象至关重要。
网页设计通常分为三大类:功能型网页设计(服务网站&B/S软件用户端)、形象型网页设计(品牌形象站)、信息型网页设计(门户站)。设计网页的目的不同,应选择不同的策划与设计方案。
网页设计的工作目标是,通过运用更合理的颜色、字体、图片、样式等元素进行页面设计美化,在功能限制的前提下,尽可能为用户提供完美的视觉体验。高级的网页设计甚至考虑通过声光、交互等方式创造更佳的视听感受。
希望对您有所帮助,希望您能采纳我的建议。谢谢!