申请网站
忘记密码
密 码：
登录名：
建站咨询热线：
0532-88781131
、
15166683288
返回贴子列表
发表新贴
主题：
交互学习笔记－手风琴菜单
共有
1455
人浏览过本贴
主贴管理
置 顶
加 精
结 贴
转 贴
昵称：奈薇建站网
论坛积分：108060
发贴等级：
21
发贴数：1159
回贴数：1282
被砸鸡蛋：
1
获赠鲜花：
182
发表时间：2019/6/28 15:46:00
楼 主
交互学习笔记－手风琴菜单
手风琴菜单（accordionmenu）在交互页面上经常使用的一种展现方式，通常用在有多个二级导航（或内容）以上的并列层级，这些层级可以是标签，标题，卡片等等。但是不管形式如何，其目低都是为了将又有用的信息展现给用户，将临时不用的信息隐藏起来，这样可以起到节省空间的作用。
【手风琴的分类】
1.卡片堆：
a.用在聊天软件上，作为好友分组。最典型如qq，旺旺，msn等。
b.用在帮助中心分类里。
n久版的QQ好友分组，很经典的应用
淘宝帮助中心
2.标签分类：
a.苹果网站的软件下载分类
b.visualthesaurus网站的词性分类
3.作为标题
AlexCohaniuc的手风琴菜单设计的很好。把作品项目藏到手风琴里是的做法其实挺有道理的，因为这能把每个项目的不必要信息隐藏起来，等访客有需要的时候再显示。说这项设计好是因为：一，每块画布的标题都很大，很好点击；二，每块标签卡都使用了一个小箭头来反映开合状态；三，鼠标滑过时，当前标签卡有将它区分出来的不同背景色。
MariusRoosendaal使用另一个非常漂亮的手风琴来“储藏”他的作品图像。与上面例子一样，每一个内容区块都是一个项目的展示。不过，此例的手风琴里的每个图像还附加有一些文字介绍。你能注意到一个小按钮被用来显示/隐藏介绍。他同时也提供到更详细介绍或者更大预览图的链接。在一个小小的手风琴里当然不能塞进特别特别多的信息，所以如果可以的话，还是尽量给每个项目都加上到详细内容的链接吧。
4.用于全局导航
polargold网站很新颖的将手风琴效果用于全站的导航，点击每一个字母标题都展现该系列下的人名和作品。视觉形式上也打破了传统的手风琴的块状模式，看上去清晰而活泼。
5.用于流程引导
Grooveshark整个站点的每一个页面中，这个漂亮的登录窗口都触手可及。注意，点击登录（Lodin>）按钮后并不会载入一个新页面，而是直接把注册表单替换成了登录表单（使用了手风琴效果）。非常方便，非常友好的用户界面。我觉的这可以算是手风琴的变体使用。
奈薇建站网致力于，让每个中国人、每个中国企业都拥有自己的“官方网站”！
回复此贴
单贴管理
修 改
删 除
清理签名
TOP
共
0
个回贴 分
0
页
上一页 / 下一页 当前第
页
奈薇建站网青岛网站建设公司/青岛网站制作公司，专业提供"气质"型网站建设及精美网站制作服务，同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展
热点地区：
青岛网站建设价格
青岛即墨网站制作公司
开发区信息港
山东在线门户
1
182
