Disappear from the scroll bar to see the detail design

I believe all designers pay attention to detail! Even if sometimes forced by a variety of reasons, can not achieve as perfect as expected, but the heart must have a tangled insistence.

In the most recent project, an alternative list was designed for the selector, and a "detail-specific issue" was found. The following illustration is an example. It's easy to choose between a fixed area and scroll for more when there are many alternatives. (Original intention)

But after the implementation, we found a problem: the scroll bar was hidden. The scroll bar appears only if you scroll the mouse over the alternative content area. This affects the user's perception of this functional block, and there is little more to be realized. Unexpected）

After debugging, we still can't control the display of the scroll bar, so I have to modify the design. Lengthen the height of the area so that the content below is partially exposed. Use incomplete to imply that there is more. When the area is sliding, the scroll bar comes out. (solution)

Come back to the question. Potentially affected are users of browsers that use the WebKit kernel (http://www.aliyun.com/zixun/aggregation/11218.html ">safari or Chrome") on Mac OS X 10.7.3. The final reason for this is because a system default option (shown below), "automatically displays according to the input device". This is an Apple detail design that can display or hide scrollbars based on different input devices, such as the mouse or touchpad.

It is precisely because of it, if you are using a touchpad or magic mouse and other touch-like mouse, you will find that in the WebKit kernel of the browser, some features originally have scroll bar, now disappear. A simple adjustment to the design, you can better solve the problem (such as Figure C).

Another elegant design, 8630.html ">" may sometimes cause problems. As designers, the same elegant way to respond and solve problems.

Source Address: http://blog.b3inside.com/......etail-design/