推薦！交互細(xì)節(jié)中的那些變形金剛

ericoming ：網(wǎng)頁中常見一些頁面其復(fù)雜程度是遞進的，類似變形金剛?cè)粘１３制嚾诵螒B(tài)，遇到戰(zhàn)斗場面他們會伸展出四肢掄起武器為自由而戰(zhàn)！ 在交互設(shè)計中我們稱這種類似“變形”的情形為“漸進展開”。該策略用來應(yīng)對展現(xiàn)復(fù)雜的信息，即只有在用戶需要的情況下，才顯示信息。適當(dāng)?shù)厥褂么嗽O(shè)計原則，可使產(chǎn)品簡約，操作邏輯清晰。以下舉幾枚栗子，請大家品嘗。

實現(xiàn)“漸進展開”的操作類型基本為四種：分級式分層展現(xiàn)，點擊觸發(fā)，鼠標(biāo)滑過+點擊觸發(fā)，鼠標(biāo)滑過。在不同功能中可靈活運用，結(jié)合產(chǎn)品風(fēng)格特性，會使設(shè)計增色不少。

分級式分層展現(xiàn)：

首先來看Facebook Ads投放操作，展現(xiàn)只有第一步，輸入完畢后點擊繼續(xù)，進入第二步。

第二步設(shè)置“目標(biāo)對象”輸入框承接第一步區(qū)域，此時頁面變長，無需跳轉(zhuǎn)。

進入第三步賬戶設(shè)置中頁面比較壯大，用戶可查看剛才所填的一切內(nèi)容，亦方便修改。試想如果一開始就給用戶這么一大張表單，用戶很有可能會抓狂。

這種類似Next, Next，Next的展現(xiàn)方式在程序安裝過程常見，當(dāng)網(wǎng)頁中有類似復(fù)雜程序操作時也可采用，可稱之為“分級式分層”，將有上下級關(guān)系的信息有效展現(xiàn)，并且嚴(yán)格符合分機結(jié)構(gòu)由上而下的順序。

點擊觸發(fā)：

豆瓣說輸入框面積本身很小，點擊后會展現(xiàn)稍大的輸入框和相應(yīng)功能，包括：推薦網(wǎng)址，發(fā)布照片，加入話題，計數(shù)器，發(fā)送按鈕。繼續(xù)點擊具體操作如“照片”可以展現(xiàn)對應(yīng)操作，用戶在一步步試探中摸索前進，逐步完成任務(wù)。

Google+發(fā)布框同樣隱藏了很多功能，還有其特殊的選擇接收信息圈子功能。

Twitter輸入框隱藏了定位和發(fā)布按鈕功能。

Omniture是一款Web分析與網(wǎng)站統(tǒng)計產(chǎn)品，其豐富的信息量決定了一些空間需要強烈壓縮，比如這個時間控件，平時顯示為：月，年+圖標(biāo)，點擊后顯示整個時間控件的功能其實很豐富，以浮層形式展現(xiàn)讓使用者可以對照部分報告作出時間選擇。

點擊觸發(fā)對用戶來說實現(xiàn)成本不大，又可以節(jié)省空間，何樂而不為呢。但這種情況還需要將點擊前的控件做的看起來像“可點擊”的，否則用戶永遠(yuǎn)不知道有多強大的功能被雪藏了，反面例子相信大家也曾遇到過，這里不作舉例。

鼠標(biāo)滑過+點擊觸發(fā)：

Google Maps默認(rèn)只顯示衛(wèi)星視圖和實時狀況，當(dāng)鼠標(biāo)滑過展示谷歌地球和其他功能，點擊more會呈現(xiàn)更佳神奇有趣的功能。 這種隱藏很好的將主要功能第一時間呈現(xiàn)給用戶，如果需要其他功能可以憑借鼠標(biāo)事件查看下拉的菜單項，如果不需要這些功能，他們不會看到這些信息，所以不會對初學(xué)者造成困惑。對于熟練用戶，可以隨時使用這些選項，只需多付出一次點擊的代價。如此一來簡化了設(shè)計結(jié)果，避免干擾。

Flickr的個人頭像平時只是正方形小圖標(biāo)，鼠標(biāo)滑過會有下箭頭出現(xiàn)，點擊后展開的功能列表略長，幾乎涵蓋了個人賬戶相關(guān)的全部主要功能，如果平時將這些功能陳列在頁面中會很占空間，影響瀏覽圖片。而且有這個設(shè)置后，頭像出現(xiàn)的位置就可以相應(yīng)進行這么多操作，很是便捷，擺放位置不會受過多限制。

將初始控件兩個邊固定，另外兩邊延展，可以隱藏很多功能。展開效果做得好的話延續(xù)的感覺明顯。

鼠標(biāo)滑過：

Youtube的音量調(diào)節(jié)鍵很好的做到了“不需要時不出現(xiàn)”，鼠標(biāo)滑過會顯示音量調(diào)節(jié)。而且動畫做好的情況下，整個操作自然而流暢，使播放過程更優(yōu)雅。

百度身邊對餐廳列表部分功能做了隱蔽，鼠標(biāo)滑過會顯示查看地圖和寫點評。這兩項功能如果在列表中老實的陳列出來，會一致的占用一些空間，而對于只查看一部分飯店的用戶會產(chǎn)生信息干擾，可能會浪費篩選信息時間。

Notable是一款在線團隊協(xié)作產(chǎn)品，其中大量使用onmouseover事件，使界面簡潔，用節(jié)省的空間呈現(xiàn)更豐富的協(xié)作內(nèi)容。圖中為團隊協(xié)作成員列表，鼠標(biāo)滑過列表頭像可直接對成員進行管理。

小結(jié)：

實現(xiàn)“漸進展開”的操作類型基本為四種：分層級展現(xiàn)，點擊觸發(fā)，鼠標(biāo)滑過+點擊觸發(fā)，鼠標(biāo)滑過。在不同功能中可靈活運用，結(jié)合產(chǎn)品風(fēng)格特性，會使設(shè)計增色不少。
網(wǎng)頁中的變形金剛“漸進展開”形式將復(fù)雜并占用空間大的功能很好的融合在頁面中，節(jié)省空間，減少網(wǎng)頁中信息復(fù)雜性，尤其對于新手用戶，我們在設(shè)計中可以多考慮這部分新手用戶使用感受，將不常使用的控制選項隱藏起來，會幫助其更好的完成復(fù)雜操作。

原文地址：ued.baidu.com
作者：ericoming

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計講座：每月邀請國內(nèi)互聯(lián)網(wǎng)公司設(shè)計前輩及行業(yè)總監(jiān)在群內(nèi)及YY語音（YY頻道：156982）分享實戰(zhàn)經(jīng)驗。
設(shè)計微博：擁有粉絲量49萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：