縱觀交互設(shè)計(jì)發(fā)展史，就是創(chuàng)新的交互模式被廣為接受后成為標(biāo)準(zhǔn)，舊的交互模式不斷被淘汰的歷史。所以交互模式發(fā)展也是一個“物競天擇，優(yōu)勝劣汰”的過程。本文是09年在碳酸飲料會上做過的一次分享，當(dāng)時創(chuàng)新的東西現(xiàn)在已經(jīng)被廣泛應(yīng)用了。因?yàn)橹黝}跟現(xiàn)在UX平臺鼓勵創(chuàng)新的目標(biāo)一致，所以再貼一次:)
　　交互設(shè)計(jì)是一個創(chuàng)造性的工作，利用創(chuàng)新的方式漂亮地解決產(chǎn)品問題，是一個交互設(shè)計(jì)師價值的體現(xiàn)。當(dāng)創(chuàng)新的交互設(shè)計(jì)被用戶認(rèn)可、被業(yè)界同行學(xué)習(xí)，更是一種巨大的職業(yè)滿足感。這種創(chuàng)新不一定是驚天地泣鬼神的革命性設(shè)計(jì)，一個小小的交互組件的創(chuàng)新就可以讓產(chǎn)品體驗(yàn)增色不少。今天就通過一些案例聊聊交互組件創(chuàng)新的四種常見方式，與大家共勉。
　　一、滾動條的創(chuàng)新【重構(gòu)法】
　　我們先來回想一下閱讀PDF文檔的兩種滾動方式：1、手型工具拖動 2、滾動條。
　　要翻看后面的信息，用手型工具向上拖動，用滾動條則是向下拖動，兩種操作方式的原理是什么呢?
　　把文檔分成可視區(qū)域A和整體區(qū)域B。滾動條滑塊對應(yīng)的是文檔的可視區(qū)域A。因此滾動條拖動的是可視區(qū)域A，而手型工具拖動的是整體區(qū)域B，兩種操作方式拖動的主體不一樣，所以方向恰好相反。
　　滾動條可以理解為文檔在垂直方向上的縮略圖，滑塊可以表示可視區(qū)域當(dāng)前位置，可視區(qū)域占整體區(qū)域的比例。隨著文檔整體區(qū)域不斷增高，可視區(qū)域所占的比例越小，因此滑塊高度不斷變小。統(tǒng)計(jì)過IE、FF、Office等常用軟件，一般滑塊高度到8px時就不再縮小。當(dāng)滑塊高度只剩8px時，滾動條的拖動體驗(yàn)就相當(dāng)?shù)牟睢?br />　　Google wave對滾動條做了大膽的創(chuàng)新。
　　1、 上下按鈕與滑塊連在一起(好處：從滑塊到上下按鈕的鼠標(biāo)運(yùn)動距離變短;問題：點(diǎn)擊上下按鈕，滑塊無法跟隨運(yùn)動)
　　2、 滾動條的滑塊高度固定不變(好處：解決了滑塊極小的問題;問題：無法表示可視區(qū)域的比例)
　　這兩處修改優(yōu)化了傳統(tǒng)滾動條的問題，卻引發(fā)滾動條基本屬性(“位置”與“比例”)問題。為解決引發(fā)的新問題，google wave的滾動條引入了兩個新元素：
　　1、 半透明灰色塊 (點(diǎn)擊上下按鈕，滑塊無法跟隨運(yùn)動，則半透明灰色塊運(yùn)動——解決位置問題)
　　2、 終止條 (wave內(nèi)容不斷增多，終止條位置不斷向下，用來表示內(nèi)容整體高度——解決比例問題。可惜這個終止條視覺效果讓人以為是可拖動的，容易引起疑惑。)
　　Google Wave花了這么大心思創(chuàng)新滾動條，也面臨著滾動條復(fù)雜化后引發(fā)的用戶習(xí)慣問題。個人認(rèn)為這個滾動條創(chuàng)新是因產(chǎn)品需要而做的，wave一個頁面可能同時存在4個滾動條，當(dāng)4個傳統(tǒng)滾動條同時出現(xiàn)在一個頁面上效果可想而知。Wave滾動條無論視覺還是交互上都是很“輕”的設(shè)計(jì)，與產(chǎn)品整體上還算貼切。
　　====================================================
　　蘋果對滾動條的改進(jìn)則簡單有效：加錨點(diǎn)。
　　mac官網(wǎng)： 加錨點(diǎn)橫向滾動條，點(diǎn)擊錨點(diǎn)，滑塊滾動到相應(yīng)位置
　　iphone音樂專輯列表：加錨點(diǎn)的滾動條，輕觸字母，列表滾動到相應(yīng)位置
　　加錨點(diǎn)的方式讓滾動條增加了導(dǎo)航和準(zhǔn)確定位功能，變得更加易用。
　　二、組合搜索框的創(chuàng)新 【組合法】
　　常見的帶條件搜索框是“輸入框+下拉菜單+按鈕”三個控件組成的，合適的控件組合可以帶來更好的效果。
　　1、【輸入框+下拉菜單】組合
　　新浪微博的搜索框，將下拉選項(xiàng)融合到輸入框提示里，選擇搜索范圍的操作更加便利。
　　Google reader這樣的帶輸入操作的下拉菜單，讓下拉菜單更加易用。(這種控件組合在word、photoshop等軟件里很常見，如字體選擇控件)
　　2、【按鈕+下拉菜單】組合
　　豆瓣與Flickr的搜索按鈕后面加了一個下拉箭頭，按鈕與下拉選擇操作合二為一 (flickr這個設(shè)計(jì)與它網(wǎng)站主導(dǎo)航條體驗(yàn)一致，豆瓣用這種設(shè)計(jì)在其整站看來則略顯突兀)
　　三、文件上傳組件的創(chuàng)新 【瘦身法】
　　標(biāo)準(zhǔn)的文件上傳組件是由“輸入框(偽)+瀏覽按鈕+提交按鈕”組成。之說以稱之為“偽輸入框”是因?yàn)樗饕袚?dān)顯示文件路徑的作用，于是Firefox下點(diǎn)擊這個輸入框是開始文件選擇操作，chrome更是把偽輸入框改造成了按鈕，還原控件最原始的作用。
　　使用標(biāo)準(zhǔn)文件上傳組件經(jīng)常會出現(xiàn)兩個提交按鈕，以上圖為例，最經(jīng)常的誤操作就是：選完文件后，直接點(diǎn)擊“保存頭像設(shè)置”，于是杯具了。
　　Gmail附件上傳的設(shè)計(jì)對文件上傳組件做了兩次瘦身手術(shù)。
　　過去的gmail附件上傳步驟是：1、點(diǎn)擊“添加附件”(點(diǎn)擊后出現(xiàn)一個不帶提交按鈕的上傳組件)，2、選擇文件(選完后自動開始上傳)。去掉了那個提交按鈕。
　　現(xiàn)在的gmail附件上傳步驟是：1、點(diǎn)擊“添加附件”(點(diǎn)擊后自動開始上傳，且有上傳進(jìn)度條)。去掉了輸入框和提交按鈕，只剩下一個瀏覽按鈕，上傳只需要一次點(diǎn)擊操作。
　　四、翻頁的創(chuàng)新 【替代法】
　　傳統(tǒng)的翻頁方式是“上一頁+頁碼+下一頁”，大家最熟悉的設(shè)計(jì)。
　　Bing圖片搜索
　　Google reader
　　看圖購
　　而近年興起的這種“無盡滾動翻頁”的翻頁方式，即滾動條拖動到最底部后開始加載后面的內(nèi)容，而不再有“上一頁+頁碼+下一頁”這樣的鏈接。
　　相對而言twitter、Iphone app store這樣的“遞進(jìn)式翻頁”則沒那么激進(jìn)，保留了一個翻頁按鈕，是介于傳統(tǒng)翻頁與無盡滾動翻頁的一種折中方式。
　　上圖是Google book search一個巧妙的翻頁設(shè)計(jì)，鼠標(biāo)懸停在文檔底部一個局部區(qū)域(高度約50px)時，出現(xiàn)一個半透明的層，點(diǎn)擊這個層開始翻頁。這個巨大的輔助翻頁按鈕，大大提升了翻頁的便利性，且對界面影響很小。
　　這里講到的翻頁組件創(chuàng)新，是用新的翻頁方式替代傳統(tǒng)翻頁組件。從信息的結(jié)構(gòu)來看，傳統(tǒng)翻頁是將信息分段，而“無盡滾動翻頁”屬于信息滾動。這兩種方式對應(yīng)現(xiàn)實(shí)生活中的原型是：書籍和電影膠片，書籍把信息拆分到每頁里去翻動，電影膠片的信息則一幀幀的滾動而過。
　　從信息流動速度和翻頁便利性來看，“信息滾動”遠(yuǎn)遠(yuǎn)大于“信息分段”。這兩種翻頁方式應(yīng)該如何選擇?我想這應(yīng)該取決于用戶對后面內(nèi)容的需求強(qiáng)度，像 google搜索結(jié)果頁這種越往后信息質(zhì)量越低的場景，用戶對翻頁需求并不那么強(qiáng)烈。Google reader這樣不是按信息質(zhì)量排序的場景，提供高速的翻頁方式是個相對必要的做法。需要注意的是，滾動翻頁不利于內(nèi)容準(zhǔn)確定位和信息回溯。
　　信息流動速度對信息接受者心態(tài)有很大影響，流動速度越快信息吸收量相對越小，所以閱讀pdf文檔比閱讀紙質(zhì)書籍心情急躁，忍不住去翻頁，是在“掃描”而不是“閱讀”(個人主觀感受，如有雷同純屬必然)
　　由此也延伸出一點(diǎn)，交互設(shè)計(jì)師的工作職責(zé)除了架構(gòu)信息，還應(yīng)該控制信息的流動速度和供給量。
　　總結(jié)
　　最后，以一張圖片總結(jié)交互組件創(chuàng)新的四種方式，一家之言希望對大家有所啟發(fā)。

最新評論