网站基础交互控件设计

⽹网站基础控件解析!－⽹网站控件设计基础－!⽹网站控件是什什么？!⽹网站控件是什什么？!基础构件!2143视觉感知!交互元件!操作实现!可复⽤用!copy1copy2copy3设计规范!⽹网站基础控件有哪些？!显示!输⼊入!选择!控制!4⼩小类!3层次!框架!容器器!内容!导航栏!⾯面包屑!翻⻚页!标签⻚页!对话框!悬浮⾯面板!⽂文本框!⽂文本域!搜索框!单选!多选!下拉选单!按钮!滑块!开关!列列表!分割线!滚动条!⽹网站基础控件有哪些？!2.容器器!3.内容!1.框架!导航栏!⾯面包屑!翻⻚页!架构、路路径、当前位置!框架!⽹网站基础控件有哪些？!2.容器器!3.内容!1.框架!导航栏!⾯面包屑!翻⻚页!⼀一组横向选项卡!当前位置标识!导航栏!展现⽹网站整体内容概况，标明当前所处位置⽹网站基础控件有哪些？!2.容器器!3.内容!1.框架!导航栏!⾯面包屑!翻⻚页!导航栏!b.多级导航!发散!a.纵向导航!导航项扩展、内容展现!不不太符合⼈人们阅读习惯!注意!⽹网站内容多!不不要超过两级!注意!⽹网站基础控件有哪些？!b.多级导航!发散!a.纵向导航!导航项扩展、内容展现!不不太符合⼈人们阅读习惯!注意!⽹网站内容多!不不要超过两级!注意!2.容器器!3.内容!1.框架!导航栏!⾯面包屑!翻⻚页!导航栏!⽹网站基础控件有哪些？!2.容器器!3.内容!1.框架!导航栏!⾯面包屑!翻⻚页!注意!a.避免导航项过多!b.导航层级要清晰!导航栏!⽹网站基础控件有哪些？!2.容器器!3.内容!1.框架!导航栏!⾯面包屑!翻⻚页!⾯面包屑!发散!操作路路径，⽅方便便返回之前层级!路路径标识!层级节点!⽹网站基础控件有哪些？!2.容器器!3.内容!1.框架!导航栏!⾯面包屑!翻⻚页!表明当前内容⻚页位置，⽅方便便同级跳转!翻⻚页!步进按钮!⻚页⾯面节点!省略略号!注意!根据情况展现!⻚页⾯面概况!快捷跳转!⽹网站基础控件有哪些？!2.容器器!3.内容!1.框架!标签⻚页!对话框!悬浮⾯面板!容器器!装内容!⽹网站基础控件有哪些？!2.容器器!3.内容!1.框架!标签⻚页!对话框!悬浮⾯面板!标签⻚页!并列列的内容⻚页，相同内容区切换!标签头部!内容!注意!操作效果需⼀一致，有默认展示!⽹网站基础控件有哪些？!2.容器器!3.内容!1.框架!标签⻚页!对话框!悬浮⾯面板!对话框!发散!常⽤用做提示、警告、功能请求询问!标题栏!提示信息!操作按钮!会打断⽤用户操作流，避免频繁使⽤用!注意!⽹网站基础控件有哪些？!2.容器器!3.内容!1.框架!标签⻚页!对话框!悬浮⾯面板!悬浮⾯面板!触发元件!悬浮⾯面板!有效收纳次要内容!不不稳定、有遮盖!注意!⽹网站基础控件有哪些？!2.容器器!3.内容!1.框架!显示类!输⼊入类!选择类!显示!输⼊入!选择!控制!控制类!列列表!分割线!滚动条!⽂文本框!⽂文本域!搜索框!单选!多选!下拉选单!按钮!滑块!开关!⽹网站基础控件有哪些？!2.容器器!3.内容!1.框架!显示类!输⼊入类!选择类!控制类!a.适当的视觉分割!注意!b.只保留留当前情景需要的信息!列列表、分割线、滚动条!列列表!滚动条!分割线!⽹网站基础控件有哪些？!2.容器器!3.内容!1.框架!显示类!输⼊入类!选择类!控制类!⽂文本框、⽂文本域、搜索!a.输⼊入提示!b.反馈状态!注意!⽂文本框!⽂文本域!⽹网站基础控件有哪些？!2.容器器!3.内容!1.框架!显示类!输⼊入类!选择类!控制类!搜索搜索按钮!输⼊入框!提示图标!最近搜索、热⻔门搜索、搜索联想!图⽚片搜索、排⾏行行榜等!发散!搜索类别!搜索提示、热推词!热搜词、热推词!⽂文本框、⽂文本域、搜索!⽹网站基础控件有哪些？!最近搜索、热⻔门搜索、搜索联想!图⽚片搜索、排⾏行行等!注意!a.权重!2.容器器!3.内容!1.框架!显示类!输⼊入类!选择类!控制类!搜索框!⽹网站基础控件有哪些？!2.容器器!3.内容!1.框架!显示类!输⼊入类!选择类!控制类!单选、多选、下拉选单!单选!多选!下拉选单!注意!a.单选和下拉选单差异：空间、直观度!b.默认选项：单选和下拉可设置默认选项!⽹网站基础控件有哪些？!2.容器器!3.内容!1.框架!显示类!输⼊入类!选择类!控制类!单选、多选、下拉选单!发散!注意!a.层级关系!b.前置后置关系!⽹网站基础控件有哪些？!发散!注意!a.层级关系!b.前置后置关系!2.容器器!3.内容!1.框架!显示类!输⼊入类!选择类!控制类!单选、多选、下拉选单!⽹网站基础控件有哪些？!2.容器器!3.内容!1.框架!显示类!输⼊入类!选择类!控制类!按钮、滑块、开关!注意!a.形式：图标、⽂文字、组合!b.三态：⼀一般、悬浮、按下!⽹网站基础控件有哪些？!⼩小结回顾!显示!输⼊入!选择!控制!4⼩小类!3层次!框架!容器器!内容!导航栏!⾯面包屑!翻⻚页!标签⻚页!对话框!悬浮⾯面板!⽂文本框!⽂文本域!搜索框!单选!多选!下拉选单!按钮!滑块!开关!列列表!分割线!滚动条!~TheEnd~!该⽂文档的版权为百度UE讲堂所有，如需转载请注明出处。!