446c3071e97db3d627d1262f4d87d68c
10. 向下展开

初识

内容太多时,默认收起,点“展开”按钮展开看全文,点“收起”按钮恢复原状。
《设计元素12篇》这个系列里有一篇是“列表”,列表对应有详情,详情的展示可以有很多种形式。“向下展开”也可以看做是展示详情的一种形式。

“向下展开”功能的设计,应该努力做到以下几个要求:
 


要求1:按钮左右位置固定

这里的“阅读全文”就是“展开”按钮。这里的规则是,显示正文的前若干个字,“阅读全文”按钮紧跟其后。按钮不单独占用下一行,节省了空间,但位置就不固定了,时左,时右。
左右位置固定更好,用户更容易找到。
展开后的样子:
展开后,全文内容很长,超出一屏,窗口底部悬浮一行,最右侧是“收起”,总是在右下角,位置固定。

知乎是做到了“收起”位置固定,但“展开”位置没固定。
 


要求2:展开与收起位置一致

“展开”按钮位置固定了,“收起”按钮位置也固定了,那,再进一小步要求:这两个按钮在站同一个位置上。
也就是说:点“展开”,内容展开,“展开”按钮变成“收起”按钮。
这样来回变换的按钮,也被称为:A/B按钮。
这样的要求源于人们的现实生活经验:电灯的开关。开和关是在一起的,按这里打开了灯,怎么关?最好还是按这里,如果要去另外一个地方才能关,既不容易想到,又不方便操作。

上面两个要求都做到了,实际效果就是:
“展开/收起”是一组互相切换的按钮,出现在每篇文章固定的位置上。
就是最前面看到的微信朋友圈的样子。
 


要求3:指示明确

展开/收起是针对谁?这个需要表现清楚。这原本不是什么问题。

top Created with Sketch.