Blog

小谈页面布局 每开始设计一个网站页面效果时，一般根据网站主题诉求，我们都会在脑海中闪过一些常见布局，这些布局大多是一种约定俗成的标准，符合人们的浏览习惯。我们可以在这些布局中，选择一种最能表达网站主题的布局，在此基础上加上自己的设计才思，最终完成一个高质量的页面布局。 当然，熟练者可以直接按自己的设计方案布局，但如果你的创意不够完美，或者创意灵感枯竭之时，或者你根本就是一个初学者，这时候，按通俗标准进行设计，便是上上之策。 下面是网页设计的一些基本概念： 1.网页尺寸 由于网页是在电脑显示器上面观看的，所以必然受到显示器尺寸及分辨率的影响。 然后浏览器也会占去一些空间，剩下的页面范围才是我们可以利用的实际空间。一般页面尺寸我们按以下情况进行设定： 分辨率640X480，页面显示尺寸620X311； 分辨率800X600，页面显示尺寸780X428； 分辨率1024X768，页面显示尺寸1007X600； 如果页面内容较多，当页面宽度超出上面显示尺寸，浏览器将出现横向滚动条，这对访问者是不友好的，最好避免； 向下延伸拖动页面是唯一解决增加内容的方法，但也最好不要拖动太多，除非页面内容足够吸引人，否则会引起浏览者反感； 当内容特别多时，还是好好规划，用链接表达才是最佳方案。 2.整体布局 顾名思义，是指页面的整体形象，每一部分，比如图片与文本等，应该要恰当自然，层叠有序。页面布局可以是多种多样的，不应该受显示器和浏览器的矩形区域限制。我们可以打开思维，充分运用自然界中的各种形状及其组合，得到一个我们满意的布局。 通常，不同形状，表达的意义也不同。我们可以按照以下规律进行布局选择： 矩形，表示严肃、正式，很多ICP和政府网页都是以矩形为整体布局； 圆形，表示活泼、柔和、团结、温暖、安全等，许多时尚站点运用圆形布局较多； 三角形，表示力量、权威、牢固、侵略等，许多大型商务网站为显示它的权威性常以三角形为页面整体布局； 菱形，表示平衡、协调、公平，一些交友站点常运用菱形作为页面整体布局。 现在的网页设计已经不局限于某一种特定形状的布局，多是以组合为主，灵活运用这些基本形状组合，可以设计出高水准的页面布局，把时尚、活泼、品味、高贵等等品质充分体现出来。 3.页眉 通常用来放公司的名字、logo等信息。有如一篇文章的题目，访问者一进来便知这里是些什么信息。同时页眉处的用色也基本为整个页面定下了主调。 4.文本、图片及多媒体 文本、图片和多媒体是信息的载体，也是页面的全部内容所在。 文本的排版、字体及颜色的选择、文字与图片的位置，决定了整个页面布局的可视性；多媒体的加入，使网页更加显得生动活泼。 5.页脚 此处多用来放置公司（版权）信息、制作者信息等。

网页设计在平面设计中，排版性相对强一点，除了传统的文字、颜色等的处理外，最明显的区别就是对按钮、图标的使用频率非常高。对这些元素的处理，记录一下个人心得体会，不对之处，敬请高手指正。 1、统一性 这个特点不仅在平面设计的VI中强化品牌意识至关重要，在网页设计中同样重要。同一个网站，各个页面色调、布局、按钮、操作方式等等，保持良好的统一性可以大大降低用户的理解成本，使用户方便浏览使用，增加点击率，最终使网站得以进一步推广。 统一性大致包括以下几点： 文字：根据不同等级功能，采用统一的字体、字号、颜色、粗细等 段落：边距、间距、行高等保持统一 样式：链接、按钮、图片等保持样式统一 2、色彩 打开网站，首先冲击用户眼球的便是网页界面的颜色，之后才是内容。好比听一首歌，一开始只会注意歌的旋律，旋律动听之后才会想去听歌词。所以，颜色的配置也是非常重要的。营销学中有个“7秒定律”，说的是消费者决定其购买意图其实只有7秒，而7秒内色彩占多半因素，由此可见选“色”的重要性。有效的使用色彩来区分信息的级别和种类，可以帮助用户对信息的处理产生记忆，减少大脑负担。 色彩使用注意一下几点： 主色选择：一般由产品性格决定。色彩可以影响情绪，也有性格之分，会吸引不同 性格的人，理解不同的情绪。比如橙色，代表热情、活跃和热烈的感觉。因此我们常会听到一些评论网页风格的词汇：大气、活泼、时尚等等。作为设计师，在考虑主色调时，一定要依附于产品，并注意对用户心理和文化的影响。 色彩数量：同一界面中，一般使用1种主色，1-2种辅色，再加1种小面积点睛色。 颜色搭配：重要信息一般使用对比度高的颜色，以突出信息。其他颜色以整个界面为主，“和谐”即可。 3、图标图形 良好的图标图形往往比文字表达更能传递信息，也更符合人类的认知习惯，同时也可以美化页面，从而使用户容易理解与接受。反之，不好的图标图形不能很好的传递信息，会给用户造成理解上的困扰，则会适得其反。因此，选择图标图形表达时一定要注意以下几点： 表意清晰明确，概括性与指向性高，可以快速使用户联想到对应操作和功能 相同类别信息应该保持统一性 避免滥用，注意使用场合，有助于用户理解信息 与文字同时使用效果更好