交互組件微創(chuàng)新

3 評(píng)論 14872 瀏覽 6 收藏 13 分鐘

縱觀交互設(shè)計(jì)發(fā)展史,就是創(chuàng)新的交互模式被廣為接受后成為標(biāo)準(zhǔn),舊的交互模式不斷被淘汰的歷史。所以交互模式發(fā)展也是一個(gè)“物競(jìng)天擇,優(yōu)勝劣汰”的過(guò)程。本文是09年在碳酸飲料會(huì)上做過(guò)的一次分享,當(dāng)時(shí)創(chuàng)新的東西現(xiàn)在已經(jīng)被廣泛應(yīng)用了。

交互設(shè)計(jì)是一個(gè)創(chuàng)造性的工作,利用創(chuàng)新的方式漂亮地解決產(chǎn)品問(wè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)增色不少。今天就通過(guò)一些案例聊聊交互組件創(chuàng)新的四種常見(jiàn)方式,與大家共勉。

一、滾動(dòng)條的創(chuàng)新【重構(gòu)法】

 

11

 

我們先來(lái)回想一下閱讀PDF文檔的兩種滾動(dòng)方式:1、手型工具拖動(dòng) 2、滾動(dòng)條。

要翻看后面的信息,用手型工具向上拖動(dòng),用滾動(dòng)條則是向下拖動(dòng),兩種操作方式的原理是什么呢?

 

2

 

把文檔分成可視區(qū)域A和整體區(qū)域B。滾動(dòng)條滑塊對(duì)應(yīng)的是文檔的可視區(qū)域A。因此滾動(dòng)條拖動(dòng)的是可視區(qū)域A,而手型工具拖動(dòng)的是整體區(qū)域B,兩種操作方式拖動(dòng)的主體不一樣,所以方向恰好相反。

34

滾動(dòng)條可以理解為文檔在垂直方向上的縮略圖,滑塊可以表示可視區(qū)域當(dāng)前位置,可視區(qū)域占整體區(qū)域的比例。隨著文檔整體區(qū)域不斷增高,可視區(qū)域所占的比例越小,因此滑塊高度不斷變小。統(tǒng)計(jì)過(guò)IE、FF、Office等常用軟件,一般滑塊高度到8px時(shí)就不再縮小。當(dāng)滑塊高度只剩8px時(shí),滾動(dòng)條的拖動(dòng)體驗(yàn)就相當(dāng)?shù)牟睢?/p>

Google wave對(duì)滾動(dòng)條做了大膽的創(chuàng)新。

44

1、 上下按鈕與滑塊連在一起(好處:從滑塊到上下按鈕的鼠標(biāo)運(yùn)動(dòng)距離變短;問(wèn)題:點(diǎn)擊上下按鈕,滑塊無(wú)法跟隨運(yùn)動(dòng))

2、 滾動(dòng)條的滑塊高度固定不變(好處:解決了滑塊極小的問(wèn)題;問(wèn)題:無(wú)法表示可視區(qū)域的比例)

這兩處修改優(yōu)化了傳統(tǒng)滾動(dòng)條的問(wèn)題,卻引發(fā)滾動(dòng)條基本屬性(“位置”與“比例”)問(wèn)題。為解決引發(fā)的新問(wèn)題,google wave的滾動(dòng)條引入了兩個(gè)新元素:

1、 半透明灰色塊 (點(diǎn)擊上下按鈕,滑塊無(wú)法跟隨運(yùn)動(dòng),則半透明灰色塊運(yùn)動(dòng)——解決位置問(wèn)題)

2、 終止條 (wave內(nèi)容不斷增多,終止條位置不斷向下,用來(lái)表示內(nèi)容整體高度——解決比例問(wèn)題??上н@個(gè)終止條視覺(jué)效果讓人以為是可拖動(dòng)的,容易引起疑惑。)

Google Wave花了這么大心思創(chuàng)新滾動(dòng)條,也面臨著滾動(dòng)條復(fù)雜化后引發(fā)的用戶習(xí)慣問(wèn)題。個(gè)人認(rèn)為這個(gè)滾動(dòng)條創(chuàng)新是因產(chǎn)品需要而做的,wave一個(gè)頁(yè)面可能同時(shí)存在4個(gè)滾動(dòng)條,當(dāng)4個(gè)傳統(tǒng)滾動(dòng)條同時(shí)出現(xiàn)在一個(gè)頁(yè)面上效果可想而知。Wave滾動(dòng)條無(wú)論視覺(jué)還是交互上都是很“輕”的設(shè)計(jì),與產(chǎn)品整體上還算貼切。

====================================================

蘋(píng)果對(duì)滾動(dòng)條的改進(jìn)則簡(jiǎn)單有效:加錨點(diǎn)。

 

54

mac官網(wǎng): 加錨點(diǎn)橫向滾動(dòng)條,點(diǎn)擊錨點(diǎn),滑塊滾動(dòng)到相應(yīng)位置

611

 

iphone音樂(lè)專(zhuān)輯列表:加錨點(diǎn)的滾動(dòng)條,輕觸字母,列表滾動(dòng)到相應(yīng)位置

加錨點(diǎn)的方式讓滾動(dòng)條增加了導(dǎo)航和準(zhǔn)確定位功能,變得更加易用。

 

 

二、組合搜索框的創(chuàng)新 【組合法】

74

常見(jiàn)的帶條件搜索框是“輸入框+下拉菜單+按鈕”三個(gè)控件組成的,合適的控件組合可以帶來(lái)更好的效果。

1、【輸入框+下拉菜單】組合

 

7-1

新浪微博的搜索框,將下拉選項(xiàng)融合到輸入框提示里,選擇搜索范圍的操作更加便利。

 

88

Google reader這樣的帶輸入操作的下拉菜單,讓下拉菜單更加易用。(這種控件組合在word、photoshop等軟件里很常見(jiàn),如字體選擇控件)

 

2、【按鈕+下拉菜單】組合

93

豆瓣Flickr的搜索按鈕后面加了一個(gè)下拉箭頭,按鈕與下拉選擇操作合二為一 (flickr這個(gè)設(shè)計(jì)與它網(wǎng)站主導(dǎo)航條體驗(yàn)一致,豆瓣用這種設(shè)計(jì)在其整站看來(lái)則略顯突兀)

三、文件上傳組件的創(chuàng)新 【瘦身法】

103

標(biāo)準(zhǔn)的文件上傳組件是由“輸入框(偽)+瀏覽按鈕+提交按鈕”組成。之說(shuō)以稱之為“偽輸入框”是因?yàn)樗饕袚?dān)顯示文件路徑的作用,于是Firefox下點(diǎn)擊這個(gè)輸入框是開(kāi)始文件選擇操作,chrome更是把偽輸入框改造成了按鈕,還原控件最原始的作用。

 

114

使用標(biāo)準(zhǔn)文件上傳組件經(jīng)常會(huì)出現(xiàn)兩個(gè)提交按鈕,以上圖為例,最經(jīng)常的誤操作就是:選完文件后,直接點(diǎn)擊“保存頭像設(shè)置”,于是杯具了。

Gmail附件上傳的設(shè)計(jì)對(duì)文件上傳組件做了兩次瘦身手術(shù)。

 

123

過(guò)去的gmail附件上傳步驟是:1、點(diǎn)擊“添加附件”(點(diǎn)擊后出現(xiàn)一個(gè)不帶提交按鈕的上傳組件),2、選擇文件(選完后自動(dòng)開(kāi)始上傳)。去掉了那個(gè)提交按鈕。

132

現(xiàn)在的gmail附件上傳步驟是:1、點(diǎn)擊“添加附件”(點(diǎn)擊后自動(dòng)開(kāi)始上傳,且有上傳進(jìn)度條)。去掉了輸入框和提交按鈕,只剩下一個(gè)瀏覽按鈕,上傳只需要一次點(diǎn)擊操作。

 

 

四、翻頁(yè)的創(chuàng)新 【替代法】

141

傳統(tǒng)的翻頁(yè)方式是“上一頁(yè)+頁(yè)碼+下一頁(yè)”,大家最熟悉的設(shè)計(jì)。

 

154

Bing圖片搜索

Google reader

看圖購(gòu)

 

而近年興起的這種“無(wú)盡滾動(dòng)翻頁(yè)”的翻頁(yè)方式,即滾動(dòng)條拖動(dòng)到最底部后開(kāi)始加載后面的內(nèi)容,而不再有“上一頁(yè)+頁(yè)碼+下一頁(yè)”這樣的鏈接。

 

162

相對(duì)而言twitter、Iphone app store這樣的“遞進(jìn)式翻頁(yè)”則沒(méi)那么激進(jìn),保留了一個(gè)翻頁(yè)按鈕,是介于傳統(tǒng)翻頁(yè)與無(wú)盡滾動(dòng)翻頁(yè)的一種折中方式。

171

上圖是Google book search一個(gè)巧妙的翻頁(yè)設(shè)計(jì),鼠標(biāo)懸停在文檔底部一個(gè)局部區(qū)域(高度約50px)時(shí),出現(xiàn)一個(gè)半透明的層,點(diǎn)擊這個(gè)層開(kāi)始翻頁(yè)。這個(gè)巨大的輔助翻頁(yè)按鈕,大大提升了翻頁(yè)的便利性,且對(duì)界面影響很小。

這里講到的翻頁(yè)組件創(chuàng)新,是用新的翻頁(yè)方式替代傳統(tǒng)翻頁(yè)組件。從信息的結(jié)構(gòu)來(lái)看,傳統(tǒng)翻頁(yè)是將信息分段,而“無(wú)盡滾動(dòng)翻頁(yè)”屬于信息滾動(dòng)。這兩種方式對(duì)應(yīng)現(xiàn)實(shí)生活中的原型是:書(shū)籍和電影膠片,書(shū)籍把信息拆分到每頁(yè)里去翻動(dòng),電影膠片的信息則一幀幀的滾動(dòng)而過(guò)。

181

從信息流動(dòng)速度和翻頁(yè)便利性來(lái)看,“信息滾動(dòng)”遠(yuǎn)遠(yuǎn)大于“信息分段”。這兩種翻頁(yè)方式應(yīng)該如何選擇?我想這應(yīng)該取決于用戶對(duì)后面內(nèi)容的需求強(qiáng)度,像google搜索結(jié)果頁(yè)這種越往后信息質(zhì)量越低的場(chǎng)景,用戶對(duì)翻頁(yè)需求并不那么強(qiáng)烈。Google reader這樣不是按信息質(zhì)量排序的場(chǎng)景,提供高速的翻頁(yè)方式是個(gè)相對(duì)必要的做法。需要注意的是,滾動(dòng)翻頁(yè)不利于內(nèi)容準(zhǔn)確定位和信息回溯。

信息流動(dòng)速度對(duì)信息接受者心態(tài)有很大影響,流動(dòng)速度越快信息吸收量相對(duì)越小,所以閱讀pdf文檔比閱讀紙質(zhì)書(shū)籍心情急躁,忍不住去翻頁(yè),是在“掃描”而不是“閱讀”(個(gè)人主觀感受,如有雷同純屬必然)

由此也延伸出一點(diǎn),交互設(shè)計(jì)師的工作職責(zé)除了架構(gòu)信息,還應(yīng)該控制信息的流動(dòng)速度和供給量。

總結(jié)

191

最后,以一張圖片總結(jié)交互組件創(chuàng)新的四種方式,一家之言希望對(duì)大家有所啟發(fā)。

 

來(lái)源:ux.taobao

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 太贊了

    來(lái)自上海 回復(fù)
  2. 哇,

    來(lái)自上海 回復(fù)