快好知 kuaihz

从滚动条消失看细节设计

我相信所有设计师都是注重细节的!即使有时迫于种种原因,无法达到像期望般完美,但心中一定有份纠结的坚持。

最近的项目中,给选择器设计备选列表,发现了一个“由细节引发的细节问题”。

下图是示例。很简单,在一个固定区域内做多选,当有很多备选时,滚动显示更多内容。(原本意图)

图A:原本的意图,和期望达到的效果

但实现出来之后,发现一个问题:滚动条被隐藏掉了。只有当在备选内容区滚动鼠标时,滚动条才会显示出来。这会影响到用户对这个功能区块的认知,根本察觉不到还有更多内容。(出乎预料)

图B:滚动条不见了,这可不是我们期望的

经过调试发现仍无法控制滚动条的始终显示,只好修改了设计。拉长区域高度,让下面的内容露出一部分来。用不完整来暗示还有更多内容。当区域有滑动时,滚动条自己就出来了。(解决方案)

图C:用不完整的形态做暗示

回到问题上来。可能会受影响的是在Mac OS X 10.7.3上使用Webkit内核的浏览器(Safari或Chrome)的用户们。究其最终原因,是因为一个系统默认选项(如下图),“根据输入设备自动显示”。这是苹果的一个细节设计,可以根据鼠标或触摸板等不同的输入设备,显示或隐藏滚动条。

也正是因为它,如果你使用的是触摸板或Magic Mouse等触控式鼠标,就会发现,在Webkit内核的浏览器下,一些功能原本有滚动条,现在都消失不见了。简单调整一下设计,就能比较好的解决这个问题了(如图C)。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:从滚动条消失看细节设计  滚动  滚动词条  消失  消失词条  细节  细节词条  设计  设计词条  
设计

 产品经理必备的工具

“工欲善其事,必先利其器!”这“器”不只是指的是“兵器”或“器具”,你可以理解为能够被你所“利用”、“使用”的工具或手段。对于从事互联网的产品经理来说,电脑是首...(展开)

设计

 交互设计基本功-PC端

做pc端交互设计时,这些基本的元件状态你知道吗?今天主要讲的内容有:《按钮的5种状态》《文本框的4种状态》《表单表格的2种状态》《提示框的7种类型》《永远不要犯...(展开)

设计

 心理学报告丶不可思议之日常

你走路的方式会透露出你的哪些性格?为什么有些人竟然会回忆起不曾发生过的事情?夏天出生的人和冬天出生的人谁运气更好?真心的笑容和虚假的笑容都打着哪些难以掩饰的烙印...(展开)