南京小宇宙：网站header如何设计？

网站设计时，不必全部元素都添加在header上，也不要给header设计大量留白。Header信息过多或过少，都会让用户不能在短时间内弄清楚页面信息，而离开转向其他竞品网站。那网站header该如何设计？

　　网站header应该是令人难忘、简洁且有用的，因此要想利用网站header增加网站的曝光度，就不要被任何东西限制创造力。

　     尺寸

　　网站header图片大小通常没有确切的答案，而这也成为网站设计中最大的难点之一。因为即使两个屏幕尺寸相同，但分辨率不同，用户所按到的内容页不一定完全一样，更何况是两个屏幕尺寸不同。

　　因此，不要拘泥于精确的像素概念，header设计应具有不干扰内容感知的高度，例如对于信息丰富的页面，较小的header会不错的选择；而对于着落页，header的长度应该增加。

　　当header较长的情况，最好给下屏内容露出一些空间，让用户意识到页面还有其他内容，继而引导用户滚动。

　　 视觉层次

　　当用户处于陌生网站时，总会习惯从屏幕左上角开始浏览网站。因此别轻易因为所谓新颖的版式设计，而打破用户的阅读习惯。如果用户无法按照自己的习惯找到预期的信息，那么他们将会花费更多时间和精力重新适应，继而判定页面是难用和不规范的。

　　关于header视觉层次的设计技巧：

　　Logo：尽量放置页面的左侧，方便用户记忆；如果品牌使用的是圆形Logo，也可把它居中放置，但有效性会比左侧偏低。

　　导航：导航不要设计得过于复杂，也不要存在太多连结。尽量只保留网站最重要的类别，让用户轻松了解自己的所在位置及下一步操作。

　　行动指引：实施视觉层次结构原则以自然地突出CTA（号召性用语）。

　　 隐藏式导航

　　隐藏式导航多以汉堡菜单为主，平常以三条条纹的小图标出现，单击时会显示完整的菜单。通常设计师希望用户专注页面内容时，都会采用这种导航设计。

　　通常汉堡导航设计适用于以促销为主的网站类型，这类网站主要透过高质量图片或视频，向用户展示产品；但对于线上商店等网站，这类方法可能不太合适，因为对于用户而言，将重要菜单隐藏无疑是增加他们的操作难度。

　　 固定header

　　所谓的固定header，其实就是「粘性标题」，即用户在滚动页面时，header会固定在页面的顶部不消失。

　　一般来说，如果header不违反整体设计理念，无论是PC端还是移动端网站设计，建议采用固定header，一来能增加用户对品牌信息的记忆，二来提升用户体验，方便用户随时进行下步操作。

　　指引元素

　　设计网站header时，设计师都会添加一些CTA元素吸引用户注意，从而产生用户所需的行为。

　　想促使用户从一开始就采取行动，进而提高网站的转换率，将CTA元素放在具有战略意义的位置，同时包含客户可以理解的文案并区别于其他内容，就是一个不错的机会。

　　 header所传达的信息

　　设计header之前，请考虑网站的整体风格及主要目的。

　　如果是旨在展示产品的宣传网站，header设计可能需要包含主要子页面的连结，目的是有效地展示产品；如果网站是电商或商业网站，header就要尽可能简洁地凸显其他类别，方便用户操作。

　　相关图片

　　Header中的图片应该直接传达有关业务信息并极具吸引力，以便用户进入网站后，能从这里增加消费欲。

　　想让header图片更有吸引力，可从以下方式入手：

　　高质量摄影图片：这类具有强烈冲击力的摄影图片，？？能很好地向用户讲述一个故事，并唤起他们的情感，继而进一步滚动。

　　轮播图片：选取几张能代表网站业务的出色图片，既能吸引用户的眼球，同时还能让用户在短时间内了解网站的主要内容。

　　插画：利用如今非常流行的插画设计，能更容易地引起用户的共鸣，建立界面与人之间的联系。

　　视频或动画

　　添加视频或动画是网站header最有创意之一的设计。

　　很多网站都会利用视频或动画展示公司的信息或产品，吸引用户眼球之余，还能更好地与用户互动。

　　最佳字体

　　Header中的信息大多是概括整个网站的主要内容，因此字体的选择上应该清晰易读，能让用户一眼就能理解内容的大意。

　　对于大的主页标题，也可尝试使用一些粗体排版和富有想像力的元素吸引用户注意，但一定不要选用难以阅读的花俏字体。

　　移动端header设计

　　Header不仅仅只会出现在PC端网站上，还会显示移动端的网站设计上，因此网站设计尽量采用响应式设计，以更好地适应各种终端设备。

　　网站header就像网站一张独特的名片，因此设计网站时应多花点心思在header设计上，同时定期更新以保持网站的新鲜感和时效性。