縱觀交互設(shè)計(jì)發(fā)展史，就是創(chuàng)新的交互模式被廣為接受后成為標(biāo)準(zhǔn)，舊的交互模式不斷被淘汰的歷史。所以交互模式發(fā)展也是一個(gè)“物競天擇，優(yōu)勝劣汰”的過程。本文是09年在碳酸飲料會(huì)上做過的一次分享，當(dāng)時(shí)創(chuàng)新的東西現(xiàn)在已經(jīng)被廣泛應(yīng)用了。因?yàn)橹黝}跟現(xiàn)在UX平臺鼓勵(lì)創(chuàng)新的目標(biāo)一致，所以再貼一次:)
交互設(shè)計(jì)是一個(gè)創(chuàng)造性的工作，利用創(chuàng)新的方式漂亮地解決產(chǎn)品問題，是一個(gè)交互設(shè)計(jì)師價(jià)值的體現(xiàn)。當(dāng)創(chuàng)新的交互設(shè)計(jì)被用戶認(rèn)可、被業(yè)界同行學(xué)習(xí)，更是一種巨大的職業(yè)滿足感。這種創(chuàng)新不一定是驚天地泣鬼神的革命性設(shè)計(jì)，一個(gè)小小的交互組件的創(chuàng)新就可以讓產(chǎn)品體驗(yàn)增色不少。今天就通過一些案例聊聊交互組件創(chuàng)新的四種常見方式，與大家共勉。
一、滾動(dòng)條的創(chuàng)新【重構(gòu)法】
我們先來回想一下閱讀PDF文檔的兩種滾動(dòng)方式：1、手型工具拖動(dòng) 2、滾動(dòng)條。
要翻看后面的信息，用手型工具向上拖動(dòng)，用滾動(dòng)條則是向下拖動(dòng)，兩種操作方式的原理是什么呢?
把文檔分成可視區(qū)域A和整體區(qū)域B。滾動(dòng)條滑塊對應(yīng)的是文檔的可視區(qū)域A。因此滾動(dòng)條拖動(dòng)的是可視區(qū)域A，而手型工具拖動(dòng)的是整體區(qū)域B，兩種操作方式拖動(dòng)的主體不一樣，所以方向恰好相反。
滾動(dòng)條可以理解為文檔在垂直方向上的縮略圖，滑塊可以表示可視區(qū)域當(dāng)前位置，可視區(qū)域占整體區(qū)域的比例。隨著文檔整體區(qū)域不斷增高，可視區(qū)域所占的比例越小，因此滑塊高度不斷變小。統(tǒng)計(jì)過IE、FF、Office等常用軟件，一般滑塊高度到8px時(shí)就不再縮小。當(dāng)滑塊高度只剩8px時(shí)，滾動(dòng)條的拖動(dòng)體驗(yàn)就相當(dāng)?shù)牟睢?/p>
Google wave對滾動(dòng)條做了大膽的創(chuàng)新。
1、 上下按鈕與滑塊連在一起(好處：從滑塊到上下按鈕的鼠標(biāo)運(yùn)動(dòng)距離變短;問題：點(diǎn)擊上下按鈕，滑塊無法跟隨運(yùn)動(dòng))
2、 滾動(dòng)條的滑塊高度固定不變(好處：解決了滑塊極小的問題;問題：無法表示可視區(qū)域的比例)
這兩處修改優(yōu)化了傳統(tǒng)滾動(dòng)條的問題，卻引發(fā)滾動(dòng)條基本屬性(“位置”與“比例”)問題。為解決引發(fā)的新問題，google wave的滾動(dòng)條引入了兩個(gè)新元素：
1、 半透明灰色塊 (點(diǎn)擊上下按鈕，滑塊無法跟隨運(yùn)動(dòng)，則半透明灰色塊運(yùn)動(dòng)——解決位置問題)
2、 終止條 (wave內(nèi)容不斷增多，終止條位置不斷向下，用來表示內(nèi)容整體高度——解決比例問題。可惜這個(gè)終止條視覺效果讓人以為是可拖動(dòng)的，容易引起疑惑。)
Google Wave花了這么大心思創(chuàng)新滾動(dòng)條，也面臨著滾動(dòng)條復(fù)雜化后引發(fā)的用戶習(xí)慣問題。個(gè)人認(rèn)為這個(gè)滾動(dòng)條創(chuàng)新是因產(chǎn)品需要而做的，wave一個(gè)頁面可能同時(shí)存在4個(gè)滾動(dòng)條，當(dāng)4個(gè)傳統(tǒng)滾動(dòng)條同時(shí)出現(xiàn)在一個(gè)頁面上效果可想而知。Wave滾動(dòng)條無論視覺還是交互上都是很“輕”的設(shè)計(jì)，與產(chǎn)品整體上還算貼切。
====================================================
蘋果對滾動(dòng)條的改進(jìn)則簡單有效：加錨點(diǎn)。
