网站页面框架的制作设计

网页具有可塑性,无论是程度偏向照样垂直偏向,这是纸质页面所不具有的。是以,即就是在肯定页面网格之前,你也须要肯定最合适网站的根本页面框架:固定宽度的页面照样弹性宽度的页面。

肯定页面长度要轻易一些。最好的方法就是实用于内容的常识性方法。“收集读者不会滚动”这一老话或许实用于10年前或者更久之前的新用户,然则到了如今就不再是那么回事了。跟着读者更习惯于将网页作为一个浏览序言,页面长度的设计限制削减了。可用性研讨注解,网页读者一定会经由过程屏幕滚动来浏览他们感兴致的内容。

固定页面宽度

固定宽度页面设计应用广泛,尤其是在进行包括许多页面功效子区域的庞杂而面设计时,诸如消息网站。将内容放置在固定宽度的列意味着你的页面结构将不会因为用户的屏幕或阅读器窗口的年夜小分歧而转变。在一个不变的情况中进行设计音味着,你可以固定页面元素的地位并掌握行长和间距等版式特征。固定的结构还可以坚持有关页面结构中的分歧构成部门之间是若何联系关系的Gestalt视觉和空间逻辑。固定宽度的结构存在一些晦气身分。在年夜的显示屏上,会有较年夜比例的屏幕外于非应用状况,而在狭小的阅读窗口中,用户或许会须要程度滚动能力看到完全雷度的页面。此外,在阅读放年夜的文本时,固定宽度结构不会老是那么完善地作出反响。

假如读者选择放年夜文本,那么固定宽度的设计或许会发生视觉上的分别常见的混杂式替代设计就是将一个或者更多的固定宽度栏与一个弹性宽度的中央栏进行组合,个中中央栏拥有相对简略的内容构造而且可以延长以填满阅读器窗口的全部宽度。

“平安的”页面宽度是一个赓续变换的目的,因为电脑屏幕的平均年夜小~直在增加。决议最佳页面宽度的最好方法就是应用收集剖析学来肯定网站阅读者的平均屏幕年夜小。

固定结构对绝年夜多半网页阅读情况(台式电脑或笔记本电脑显示屏)而言是最佳的选择,其还可以实用于掌上装备以及其他情势的含移动样式表的移动电脑。不外固定结构将会变得比弹性结构更软弱而且更轻易涌现通用可用性问题。是以,我们强烈推举在设计时选择灵巧页面结构。

灵巧页面宽度

因为显示屏年夜小纷歧,从小型的手机到宽的片子屏幕,要设计成一个尺度“平安的”年夜小的盘算往往是不实际的。网页是一个灵巧的序言,用于顺应分歧的用户以及各不雷同的显示装备。与打印的固定于纸质上的文档不-样的是,网页的外不雅取决于显示年夜小、分辩率以及色彩设置、阅读器窗口的高度和宽度、软件参数选择(诸如链接和配景色彩设置)以及可用的字体等这类元素。往往最佳的方法就是接收序言的灵巧性,设计出清楚的、可实用于许多实际装备且能被所有效户采取的页面。灵巧或“弹性”的页面设计在许多方面都比固定设计更具挑衅性,因为灵巧的页面设计请求对HTML和其在平台和阅读器中的应用有一个很深的懂得。灵巧的页面设计还请求设计者能跳出自身的构造并想出可以或许在分歧情况中施展功能的图形和结构。在界说灵巧性页面宽度时有许多种办法。最常用的办法就是应用百分比来界说页面上分歧元素的宽度。例如,对一个两栏结构而言,内容可以占领页面宽度的75%,而区域导航占页面残剩的25%。统一页面在打印时将会隐蔽导航栏,因为其在纸质页面。上的用途不年夜,同时将页面宽度调至一个合适浏览的数值。而在移动装备上,导航是需要的,但狭小的屏幕宽度不会支撑多栏,我们会将两栏折叠为一栏。并将屏幕上的可用空间最年夜化。

灵巧的网站设计在顺应分歧的显示装备(台式电脑、笔记本电脑、手机、iPod,等等)方面具有许多的优势。此外,灵巧性设计更具有通用应用性,因为其可以随意马虎用于增长文本年夜小、晋升显示色彩和比较,以及增长浏览参数。灵巧的页面或许对于依附于页面年夜小、版式以及图形之间相对固定的视觉关系的庞杂页面结构而言,不是最好的方法。

相關文章: