- 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 资源管理器中的树状视图 分类较多的大型
您可能关注的文档
最近下载
- 年会语言类节目搞笑朗诵《我爱上班》表演.pptx
- 《马克思主义基本原理概论》教案12 资本主义的本质及规律.doc VIP
- 55种语言汉译译音表-世界人名翻译大辞典.pdf
- 我们的母亲叫中国:.pptx VIP
- 1.6+隋唐时期的中外文化交流++课件++2024-2025学年统编版七年级历史下册+.pptx VIP
- 水稻绿色高产高效创建服务 投标方案(技术方案).docx
- 医用氧自检检查记录表.pdf
- 2024辽宁沈阳市文体旅产业发展集团有限公司中层岗位招聘5人笔试备考试题及答案解析.docx
- 《国际经济法学》(第二版)课后思考题答案.pdf
- 55个单病种(术种)管理指标质量控制标准(第二部分).xlsx
文档评论(0)