• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】詳細解析交互細節中的那些變形金剛




    詳細解析交互細節中的那些變形金剛

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自優設的設計理論類文章,寫教學的作者是佚名,感謝佚名提供設計理論的實作教學。

    教學大綱:

    網頁中常見一些頁面其複雜程度是遞進的,類似變形金剛日常保持汽車人形態,遇到戰鬥場面他們會伸展出四肢掄起武器為自由而戰! 在交互設計中我們稱這種類似“變形”的情形為“漸進展開”。該策略用來應對展現複雜的信息,即只有在用戶需要的情況下,才顯示信息


    設計理論教學開始

    網頁中常見一些頁面其複雜程度是遞進的,類似變形金剛日常保持汽車人形態,遇到戰鬥場面他們會伸展出四肢掄起武器為自由而戰! 在交互設計中我們稱這種類似“變形”的情形為“漸進展開”。該策略用來應對展現複雜的信息,即只有在用戶需要的情況下,才顯示信息。適當地使用此設計原則,可使產品簡約,操作邏輯清晰。以下舉幾枚栗子,請大家品嘗。

    實現“漸進展開”的操作類型基本為四種:分級式分層展現,點擊觸發,鼠標滑過+點擊觸發,鼠標滑過。在不同功能中可靈活運用,結合產品風格特性,會使設計增色不少。

    詳細解析交互細節中的那些變形金剛

    分級式分層展現:

    首先來看Facebook Ads投放操作,展現只有第一步,輸入完畢後點擊繼續,進入第二步。

    詳細解析交互細節中的那些變形金剛

    第二步設置“目標對象”輸入框承接第一步區域,此時頁面變長,無需跳轉。

    詳細解析交互細節中的那些變形金剛

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

    詳細解析交互細節中的那些變形金剛

    這種類似Next, Next,Next的展現方式在程序安裝過程常見,當網頁中有類似複雜程序操作時也可採用,可稱之為“分級式分層”,將有上下級關係的信息有效展現,並且嚴格符合分機結構由上而下的順序。

    點擊觸發:

    豆瓣說輸入框面積本身很小,點擊後會展現稍大的輸入框和相應功能,包括:推薦網址,發布照片,加入話題,計數器,發送按鈕。繼續點擊具體操作如“照片”可以展現對應操作,用戶在一步步試探中摸索前進,逐步完成任務。

    詳細解析交互細節中的那些變形金剛

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

    詳細解析交互細節中的那些變形金剛

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

    詳細解析交互細節中的那些變形金剛

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

    詳細解析交互細節中的那些變形金剛

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

    鼠標滑過+點擊觸發:

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

    詳細解析交互細節中的那些變形金剛

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

    詳細解析交互細節中的那些變形金剛

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

    鼠標滑過:

    Youtube的音量調節鍵很好的做到了“不需要時不出現”,鼠標滑過會顯示音量調節。而且動畫做好的情況下,整個操作自然而流暢,使播放過程更優雅。

    詳細解析交互細節中的那些變形金剛

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

    詳細解析交互細節中的那些變形金剛

    Notable是一款在線團隊協作產品,其中大量使用onmouseover事件,使界面簡潔,用節省的空間呈現更豐富的協作內容。圖中為團隊協作成員列表,鼠標滑過列表頭像可直接對成員進行管理。

    詳細解析交互細節中的那些變形金剛

    小結:

    實現“漸進展開”的操作類型基本為四種:分層級展現,點擊觸發,鼠標滑過+點擊觸發,鼠標滑過。在不同功能中可靈活運用,結合產品風格特性,會使設計增色不少。

    網頁中的變形金剛“漸進展開”形式將複雜並佔用空間大的功能很好的融合在頁面中,節省空間,減少網頁中信息複雜性,尤其對於新手用戶,我們在設計中可以多考慮這部分新手用戶使用感受,將不常使用的控制選項隱藏起來,會幫助其更好的完成複雜操作。

    — —

    文章永久連結為: 詳細解析交互細節中的那些變形金剛