从滚动条消失看细节设计技巧

2016-02-17 02:33 2 1 收藏

下面是个超简单的从滚动条消失看细节设计技巧教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~

【 tulaoshi.com - 平面设计 】

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

最近的项目中,给选择器设计备选列表,发现了一个由细节引发的细节问题。下图是示例。很简单,在一个固定区域内做多选,当有很多备选时,滚动显示更多内容。(原本意图)

从滚动条消失看细节设计技巧,PS教程,图老师教程网

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

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

从滚动条消失看细节设计技巧,PS教程,图老师教程网

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

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

从滚动条消失看细节设计技巧,PS教程,图老师教程网

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

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

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

从滚动条消失看细节设计技巧,PS教程,图老师教程网

滚动条控制

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

再优雅的设计,有时候也可能会引发问题。作为设计师,得以同样优雅的方式回应并解决问题。

来源:http://www.tulaoshi.com/n/20160217/1577683.html

延伸阅读
标签: Web开发
一外国佬写的。 有几种样式,点击那些example1234.html就能看见了。 可以研究一下下 http://www.n-son.com/scripts/jsScrolling/
标签: Web开发
记录滚动条位置 dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd...
标签: Web开发
SCROLLBAR-FACE-COLOR:#f5f5f5; SCROLLBAR-HIGHLIGHT-COLOR:#f5f5f5; SCROLLBAR-SHADOW-COLOR:#b2b2b2; SCROLLBAR-3DLIGHT-COLOR:#b2b2b2; SCROLLBAR-ARROW-COLOR:#3e3e3e; SCROLLBAR-TRACK-COLOR:#fff; SCROLLBAR-DARKSHADOW-COLOR:#fff; SCROLLBAR-BASE-COLOR:#f5f5f5;
标签: flash教程
第一步:场景中的元素 因为这一步主要是在场景中加入文字和图片,大家可以下载源文件后用FLASH打开自己研究,这里就不详细介绍各元素的画法了。 点击下载FLA源文件 关于场景中的元素,这里要说清楚的是各个MovieClip(影片剪辑,以下简称mc)的命名,如下图所示(注:这里说的命名,是指把mc放到场景中后在Properties<属性面板中的命名,而不是...
标签: Web开发
网页滚动条本身就是浏览器的一部分,使用它可以方便浏览较大的网页,但是千篇一律的它经常会给整体页面效果拖了不少后腿,我们能不能改变它灰灰的样子呢?能!俗话说:“只有你想不到的,没有做不到的。” 给滚动条换色 FRA 几乎所有网页的滚动条都是默认的灰色,如果把它的颜色换换,来点另类的,相信一定会使网页更加靓丽。我们只...

经验教程

717

收藏

69
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部