- 1、本文档共28页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
网页界面设计要点-2-功能篇-1导航
网页界面设计要点-2-功能篇-1
BIZ BI 魏 凌 2013年9月
目 录
• 视觉篇
–1-界面布局
–2-色彩搭配
–3-分隔类型
• 功能篇
–导航
–条件选择
–提示框
–表单
–表格
–图形
–按钮
功能篇\ 1-导航\总述
• 导航的定义:能够在页面上起到指示和引导作用的元素,都可以称之为导航。
• 按导航的作用类型可以分为:
–全局性导航:网站架构中权重最高的导航,统领整个网站的信息架构,决定网站形状和整
体的信息分类,通常使用固定模式。
–局部导航:是在全局导航之下的用于访问下级结构的导航,经常作为全局导航下一个分支
的平铺引导。形成局部导航的机制有很多,比如树状导航、垂直菜单、动态菜单等。
• 导航的主要类型:
–Tab导航
–树状导航
–面包屑导航
–引导式导航
–鱼眼导航
–网站地图
–推荐性导航
–有哪些信誉好的足球投注网站式导航
功能篇\ 1-导航\ 1-Tab导航\简述
• 优点:直观、清晰
• 缺点:扩展性较差
• Tab导航的主要展现形式:
• 设计TAB导航前需要想清楚的问题:
–用Tab解决什么问题?
–Tab结构是什么?
–Tab的视觉样式是什么样子?
–Tab的交互方式如何设计?
功能篇\ 1-导航\ 1-Tab导航\Tab信息结构关系
• 设计Tab之前,需要考虑清楚导航与Tab是否匹配,也就是为什么要用Tab。
• 需要细致的考虑:
–每个tab下的信息到底是什么?
–信息之间的关系是什么?
–信息结构一共有多少层?
–Tab跟大标题之间的关系如何划分?
• 例:
–Tab就是一个入口
–Tab之间信息不交叉、层级相同
–总共为一层信息
–Tab和大标题之间没有层级关系,大标题是网
站LOGO
功能篇\ 1-导航\ 1-Tab导航\Tab结构与视觉样式
• 几个简单的例子:
–同样选中Tab4 ,但效果却不一样:
–一些Tab视觉样式示意:
更多导航样式见 /design_elements/navigation/index.php?page=1
功能篇\ 1-导航\ 1-Tab导航\Tab交互设计
• Tab个数:对于导航Tab ,一般建议是一级导航Tab3-10个,二级导航项不超过7个
• 点击后的跳转:新开窗口,还是在当前页面刷新?新开页面需要注意Tab导航条的项
目个数、排序等信息也不应有所改变。
• hover切换还是点击切换:tab多的时候建议点击切换,否则容易让用户心烦。Tab较
少用到hover切换,因为涉及到页面载入、刷新等问题,如果一定要做,需要解决灵
敏度问题,如悬停3秒后触发。
• 点击热区大小:有图片的整片设置为热区,只有文字的,需要注意热区大小需要考虑
页面空白位置,而不只是在文字上。
• 视觉效果:Tab被选中的,需要有明显的视觉突出效果,并且多级tab间关联要明显。
功能篇\ 1-导航\ 1-Tab导航\案例讨论\ Amazon的导航变迁
功能篇\ 1-导航\2-树状导航\简述
树状导航是纵向导航中的一种,因其形状像 相对横向导航来讲,树状导航项数量较少受
树的分支结构而得名。最典型的树状导航就 到空间的约束,可以放置更多分类,适用于
是Windows 资源管理器中的树状视图 分类较多的大型
您可能关注的文档
- 结缔组织-组织胚胎学-PDF课件-上海交通大学-03.pdf
- 给排水管网系统课程设计.pdf
- 给水工程-时文歆 第06章.pdf
- 给水处理工程chap2(修改稿).pdf
- 给水处理工程chap3.pdf
- 给水处理工程chap4.pdf
- 统计学动态数列.pdf
- 给水工程课件(二).pdf
- 给水排水管网设计第11章.pdf
- 统一视频介绍.pdf
- 高中数学专项训练:解三角形小题常考题型归类(原卷版).pdf
- 2025年高考物理复习:静电场中的力和能量问题(讲义篇)(原卷版).pdf
- 2025年高考数学复习之填空题:平面解析几何(10题).pdf
- 2025年高考物理复习:电磁感应的综合运用(讲义篇)(原卷版).pdf
- 江苏某中学2025届高三年级上册第一次调研考试数学试题(含答案).pdf
- 2025年高考生物复习之植物生命活动的调节.pdf
- 2025年高考物理专项复习:曲线运动(讲义篇)(解析版).pdf
- 2025年高考语文古诗文必备篇目读写专练:选择必修下册之《扬州慢》.pdf
- 2025年高考语文古诗文必备篇目读写专练:选择必修下册之《蜀道难》.pdf
- 2025年高考物理复习:牛顿运动定律的综合运用(讲义篇)(原卷版).pdf
最近下载
- 2023年智慧工地行业分析报告及未来五至十年行业发展趋势报告.docx
- [新教材]统编版高中政治 必修3 政治与法治 知识点复习提纲(填空版+答案版).docx
- 八年级地理上册 1.1 中国的疆域说课稿 (新版)湘教版.docx
- 软件技能培训-sketchup草图大师-模式试题(二).docx
- 《作物育种学总论》试题库及答案.doc
- 知识产权运营与商业化探索——以沪亚生物国际为例.docx
- 氨合成装置管道焊接施工方案.docx
- 2023《小学科学课程标准》(修订稿).doc
- 市政道路绿化工程专项施工方案.doc VIP
- Galop arr. Ken Berg 童声合唱 视唱练习曲 钢琴伴奏正谱.pdf
文档评论(0)