青岛网站建设谈谈web导航的样式及设计方法(二)

分享到:

2020-09-03 11:50:34

  4.固钉导航

  4.1款式

  以固定不动在网页页面对话框的某一个部位,翻转网页页面时不影响其部位。

  ①当內容地区较为长时,必须翻转网页页面,这些內容相匹配的实际操作或导航必须在翻转范畴内自始至终呈现,如侧面莱单、回到顶部按键等。(如果你感兴趣,可以免费注册一键制作你喜欢的网站)

青岛网站建设谈谈web导航的样式及设计方法(二)

  ②当网页页面可视性范畴过钟头,导航內容怕被挡住,则以内藏式固钉导航款式。

  4.2设计方式

  ①固钉内藏式导航

  一般用以掩藏导航的标准下,在设计上必须固定不动导航在显示屏上的部位时,也可用以因网页页面可视性范畴很钟头,导航內容怕被挡住。如圖掩藏导航。

  ②固钉水准导航

  一般做为在翻转网页页面时,关于免费网站模板,导航自始至终在对话框固定不动部位呈现,在设计上可做为竖直型网页页面设计和全屏幕转换网页页面设计时需选用。

  ③固钉竖直导航

  一般做为全屏幕转换的网页页面设计中,竖直导航固定不变,只转换banner或內容。

  ④固钉便捷按键

  如在网页页面较多时,右边经常会出現“回到顶部”的便捷按键,便捷客户查询顶端內容;或右边一些便捷的方法,例如联系方式,二维码等,经常要時刻提示客户可关心。

  5.底端导航

青岛网站建设谈谈web导航的样式及设计方法(二)

  5.1款式

  关于免费网站,网页页面內容较长时,底端导航便捷客户快速访问。

  5.2底端导航基本內容

  网页页面的底端导航內容在这里全部列出去,大伙儿可依据要求来自主挑选:

  ①导航的所有内容,包含主导航和所有次导航

  ②联系电话:包含详细地址、电話、电子邮箱、手机联系人、发传真、二维码、网站地址

  ③Logo

  ④版权信息,包含著作权隶属,备案号,服务支持。

  ⑤友链

  ⑥地图坐标:假如底端室内空间很大得话能够考虑到。

  ⑦别的便捷按键:如服务条款、隐私保护申明、法律法规申明、专利权等。

  ⑧一些广告词或英语单词,一般以设计为标准,为添充留白艺术地区,使网页页面更有层级

  在底端导航的设计中,优先要选中必须展现的內容,再挑选必须展现的方法,如背景颜色、排版设计方法、原素运用等,寻找合适要求的一种。

  三、别的导航款式归类及设计方式

  1.Tab导航

  1.1款式(此一部分內容来源于ant.design)

  ①基础款式:推动全部网页页面的內容,用以主作用转换,横着tab,选定则正下方出現基本色横杠。

  ②信用卡款式:用以网页页面中部分展现,包囊型器皿能非常好的和别的內容防护。

  ③胶襄型款式:用以信用卡内的选择项转换,常常和别的部件融合应用,让客户迅速转换相匹配內容。

  ④竖状款式:用以归类较多的选择项,可以不限定归类总数,具有更强的可扩展性。

  ⑤横着流程条:流程条使正确引导客户依照步骤达到目标的导航条,能够协助客户对操作步骤长短和流程有一个预估,并具体指导自身在哪个流程。横着流程条超过2步时应用,但提议不超过5步,每环节文本维持在12标识符内。

青岛网站建设谈谈web导航的样式及设计方法(二)

  ⑥向步骤流程条:一般居网页页面左边,飘浮固钉,可增加几行文本描述,合适较多的流程或流程数变化规律时应用。

  ⑦分页查询器:当有很多內容必须呈现时开展分页查询载入解决,分页查询器能够让客户清晰的具体指导自身所要访问 的內容有多少,早已访问 了是多少,还剩下是多少。

  2.面包糠导航

  关于网站建设服务,在网页页面中常会用以內容网页页面,告之客户“你在哪”,还可点一下面包糠导航来回到前多层级的网页页面,在作用上也适用面包糠下拉列表作用。

  3.下拉列表(子导航)

  3.1款式

  ①基础下拉列表:电脑鼠标移进即显示信息,单项选择题就可以,点一下则自动跳转。

  ②存有不能用菜单栏:往下拉后,以分隔线、深灰色字来表明不能点一下。

  ③莱单弹出来方位:可上弹出来,或下弹出来。

  ④开启方法:移进开启,点一下开启。

  ⑤多等级莱单,一般三级,较好

  ⑥带按键的下拉列表:一般按键为icon

  ⑦鼠标右键菜单:鼠标单击鼠标右键来开启。

  3.2设计方式

  ①基本设计方式 :仅有二级时,用基础下拉列表的款式,仅仅在情况、外框、移进时做设计的转变。

青岛网站建设谈谈web导航的样式及设计方法(二)

  ②横着通栏进行:一般在网站设计时,充分考虑下拉列表进行时小量挡住banner或设计必须时选用,可用以少等级,更适用多等级莱单。多等级通栏进行时候更形象化的呈现莱单內容及等级关联。

  ③侧面进行:上边有提及的,竖直导航在子导航进行时,适用电子商务等服务平台。

  好啦,这期內容到此就结束了,期待能给到你一些协助。


声明:此篇为凡科建站原创文章,转载请标明出处链接:
  • 热门模板
  • 热门专题
  • 推荐文章
  • 热门标签
合作伙伴