我相信所有設(shè)計師都是注重細(xì)節(jié)的!即使有時迫于種種原因,無法達(dá)到像期望般完美,但心中一定有份糾結(jié)的堅持。
最近的項目中,給選擇器設(shè)計備選列表,發(fā)現(xiàn)了一個“由細(xì)節(jié)引發(fā)的細(xì)節(jié)問題”。下圖是示例。很簡單,在一個固定區(qū)域內(nèi)做多選,當(dāng)有很多備選時,滾動顯示更多內(nèi)容。(原本意圖)
但實現(xiàn)出來之后,發(fā)現(xiàn)一個問題:滾動條被隱藏掉了。只有當(dāng)在備選內(nèi)容區(qū)滾動鼠標(biāo)時,滾動條才會顯示出來。這會影響到用戶對這個功能區(qū)塊的認(rèn)知,根本察覺不到還有更多內(nèi)容。(出乎預(yù)料)
圖A:原本的意圖,和期望達(dá)到的效果
圖B:滾動條不見了,這可不是我們期望的
經(jīng)過調(diào)試發(fā)現(xiàn)仍無法控制滾動條的始終顯示,只好修改了設(shè)計。拉長區(qū)域高度,讓下面的內(nèi)容露出一部分來。用不完整來暗示還有更多內(nèi)容。當(dāng)區(qū)域有滑動時,滾動條自己就出來了。(解決方案)
圖C:用不完整的形態(tài)做暗示
回到問題上來。可能會受影響的是在Mac OS X 10.7.3上使用Webkit內(nèi)核的瀏覽器(Safari或Chrome)的用戶們。究其最終原因,是因為一個系統(tǒng)默認(rèn)選項(如下圖),“根據(jù)輸入設(shè)備自動顯示”。這是蘋果的一個細(xì)節(jié)設(shè)計,可以根據(jù)鼠標(biāo)或觸摸板等不同的輸入設(shè)備,顯示或隱藏滾動條。
也正是因為它,如果你使用的是觸摸板或Magic Mouse等觸控式鼠標(biāo),就會發(fā)現(xiàn),在Webkit內(nèi)核的瀏覽器下,一些功能原本有滾動條,現(xiàn)在都消失不見了。簡單調(diào)整一下設(shè)計,就能比較好的解決這個問題了(如圖C)。
滾動條控制
再優(yōu)雅的設(shè)計,有時候也可能會引發(fā)問題。作為設(shè)計師,得以同樣優(yōu)雅的方式回應(yīng)并解決問題。