網(wǎng)頁(yè)滾動(dòng)條在交互設(shè)計(jì)上有哪些需要考慮的點(diǎn)？

時(shí)間：2024-02-16 09:35:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-02-16 09:35:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁(yè)滾動(dòng)條在交互設(shè)計(jì)上有哪些需要考慮的點(diǎn)？：嘿，滾動(dòng)條！這是一個(gè)細(xì)節(jié)見(jiàn)真章的東西，需要較強(qiáng)的設(shè)計(jì)能力。由于顯示設(shè)備的區(qū)域限制，當(dāng)顯示內(nèi)容超出時(shí)，就有必要用到這個(gè)控件了。

先從我們最常見(jiàn)的滾動(dòng)條介紹吧，大家都熟悉的windows滾動(dòng)條，一般分為滾動(dòng)框、滾動(dòng)滑塊和滾動(dòng)箭頭。這個(gè)很傳統(tǒng)，傳統(tǒng)到很少有人或公司想去改變它。滾動(dòng)框代表顯示內(nèi)容的長(zhǎng)度或?qū)挾?、滾動(dòng)滑塊影射當(dāng)前顯示區(qū)域（與顯示內(nèi)容成比較顯示）、雞肋式的滾動(dòng)箭頭。


在上面這個(gè)傳統(tǒng)試的滾動(dòng)條基礎(chǔ)上，有許多創(chuàng)新的設(shè)計(jì)，挑一個(gè)最有代表性的設(shè)計(jì)吧，Google Wave（見(jiàn)下圖），初見(jiàn)Wave時(shí)我個(gè)人對(duì)這個(gè)滾動(dòng)條印象很深刻，純從理念上來(lái)講wave scrollbar設(shè)計(jì)得不錯(cuò)。將傳統(tǒng)滾動(dòng)滑塊的大小固定了，也就是說(shuō)滾動(dòng)滑塊并不會(huì)因?yàn)轱@示內(nèi)容占整體內(nèi)容的比例而變化（保證了點(diǎn)擊區(qū)域），滾動(dòng)箭頭集成至滾動(dòng)滑塊內(nèi)，不再是像傳統(tǒng)那樣一上一下的蛋痛設(shè)計(jì)了，并跟隨滾動(dòng)滑塊，保證了功能的集中。

但缺點(diǎn)也是很明顯的，固定了滑塊大小，又需要顯示當(dāng)前顯示內(nèi)容在整個(gè)內(nèi)容中所在位置，引申出半透明灰色塊的設(shè)計(jì)，半透明灰色塊與滾動(dòng)滑塊之前的邏輯復(fù)雜，這讓用戶(hù)從本質(zhì)上就產(chǎn)生了歧義（與習(xí)慣相違背）。另外還有終止條，根據(jù)官方的說(shuō)明，因?yàn)橐苿?dòng)設(shè)備和上網(wǎng)本的區(qū)域有限，為了這樣的用戶(hù)考慮，他們將光標(biāo)移動(dòng)范圍進(jìn)行了限定，所以有了這個(gè)玩意，除了讓我不至一次嘗試去點(diǎn)擊它，并使我迷惑外，再無(wú)其它作用。

雖然，wave的scrollbar并沒(méi)有得到大多數(shù)設(shè)計(jì)者的認(rèn)同，但google的設(shè)計(jì)師對(duì)于細(xì)節(jié)的研究和嘗試還是值得我們學(xué)習(xí)的，這比微軟萬(wàn)年不變的滾動(dòng)條設(shè)計(jì)強(qiáng)太多了。

有興趣的朋友可以去down個(gè)Demo嘗試一下，放個(gè)下載鏈接：https://github.com/rastasheep/google-wave-scrollbar

Wave的例子是一個(gè)極端，再回到頭來(lái)講一個(gè)優(yōu)雅的例子，OS X Lion系統(tǒng)對(duì)原生滾動(dòng)條的改進(jìn)，滾動(dòng)條只在執(zhí)行滾動(dòng)操作時(shí)才會(huì)出現(xiàn)。因此，它不會(huì)遮擋屏幕上的內(nèi)容，并且只在鼠標(biāo)移至滾動(dòng)條位置時(shí)整個(gè)滾動(dòng)條區(qū)域才放大以供操作，將滾動(dòng)箭頭也去掉了（實(shí)際使用當(dāng)中用戶(hù)對(duì)滾動(dòng)箭頭的需求較少）。這種設(shè)計(jì)最初出現(xiàn)在iOS系統(tǒng)里，因其簡(jiǎn)潔并具有相當(dāng)優(yōu)秀的特性被移植入OS X系統(tǒng)內(nèi)?？赡芤灿幸恍┤藭?huì)問(wèn)“如何在用戶(hù)未進(jìn)行任何操作時(shí)體現(xiàn)整體內(nèi)容的大小呢？”，蘋(píng)果在Finder里的處理方式是：滾動(dòng)條出現(xiàn) --> 消失，提示用戶(hù)，但不干擾用戶(hù)。

Less is More在這里被體現(xiàn)到極致，在我（用戶(hù)）需要時(shí)它出現(xiàn)，在我（用戶(hù)）拖動(dòng)時(shí)才放大。以用戶(hù)為基礎(chǔ)，以操作狀態(tài)為區(qū)分，很好的體現(xiàn)了滾動(dòng)條最本質(zhì)的設(shè)計(jì)訴求。

除了上述這些滾動(dòng)條，還有一些因其它需求而對(duì)滾動(dòng)條加以設(shè)計(jì)的例子，如果您正在使用Chrome的話(huà)，請(qǐng)使用它搜索一下當(dāng)前頁(yè)面，看看滾動(dòng)條會(huì)發(fā)了什么變化。

以及為了使用戶(hù)快速查找到以某種架構(gòu)化的信息而設(shè)計(jì)的滾動(dòng)條，如：聯(lián)系人的字母表或Timeline等

另外，你可以根據(jù)需求重新整理一下滾動(dòng)條，以使之能夠提供更好的用戶(hù)體驗(yàn)！ over...