UI设计-17-10-24
页眉(页头):网站的顶部。承载整个网站的主要功能,制作时更突出,放置一些重要的链接。
页脚放置辅助信息。(弱化)
是整个网站信息结构的核心区域。
页眉区域放置的内容:logo,主导航,副导航及联系 (主、副导航,实用性链接,logo,搜索)
方式、搜索、辅助功能性导航链接
界面导航:(功能):明显、明确、便捷、易用
导航系统常用的类别及形式:
全局导航(主导航)
局部导航(副导航,全局导航的延伸)
实用性导航(标识链接,搜索引擎,网站地图)
导航表现形式:链接,按钮,面包屑,图片,文字,图标
链接标识,搜索引擎,
页脚(页尾):在网站的底部:视觉流的最末
通常页脚尺寸宽度一般会呼应页眉去设计。内容区域设计页眉。
放置的内容:法律条款生命,版权信息,企业名称,联系方式,搜索以及关联性的页脚导航和辅助信息。
页脚的导航:采用简单的文字链接。
友情链接:其他的站点。放在页脚不重要的位置。
页脚链接:方便查找内容。
页脚不可以抢页眉信息,一般以淡色为主。
辅助性信息。
banner:背景、产品、装饰、文字
内容区:banner下方,主显示区域,信息安排从上到下,从左到右的视觉顺序来整理。
网页版式(形式):
一栏版式:一种没有对页面做分割的版式,内容区域可占据整个页面。
两栏版式:在内容区域的的旁边分割一块辅助区域(放导航)。区域导航,辅助性导航或者广告:增加实用性。
三栏版式:在内容区域,左右侧各增加一个辅助区域,将主要内容放在中间区域,适合相对较宽的网站。
版式的使用:采用按钮来切换二栏和三栏。

1.jpg

2.jpg

3.jpg

4.jpg

5.jpg

6.jpg

7.jpg

8.jpg

9.jpg

10.jpg

11.jpg

12.jpg

13.jpg

14.jpg

15.jpg

16.jpg

17.jpg

18.jpg

19.jpg
本文标题:UI设计-17-10-24
本文链接:https://www.haomeiwen.com/subject/ightpxtx.html
网友评论