交互組件微創新讓網站用戶體驗增色的方法

2024-07-11 08:25:51

字體：大中小

來源：轉載

供稿：網友

縱觀交互設計發展史，就是創新的交互模式被廣為接受后成為標準，舊的交互模式不斷被淘汰的歷史。所以交互模式發展也是一個“物競天擇，優勝劣汰”的過程。本文是09年在碳酸飲料會上做過的一次分享，當時創新的東西現在已經被廣泛應用了。因為主題跟現在UX平臺鼓勵創新的目標一致，所以再貼一次:)
　　交互設計是一個創造性的工作，利用創新的方式漂亮地解決產品問題，是一個交互設計師價值的體現。當創新的交互設計被用戶認可、被業界同行學習，更是一種巨大的職業滿足感。這種創新不一定是驚天地泣鬼神的革命性設計，一個小小的交互組件的創新就可以讓產品體驗增色不少。今天就通過一些案例聊聊交互組件創新的四種常見方式，與大家共勉。
　　一、滾動條的創新【重構法】
交互組件微創新如何讓網站用戶體驗增色錯新站長站

　　我們先來回想一下閱讀PDF文檔的兩種滾動方式：1、手型工具拖動 2、滾動條。
　　要翻看后面的信息，用手型工具向上拖動，用滾動條則是向下拖動，兩種操作方式的原理是什么呢?

　　把文檔分成可視區域A和整體區域B。滾動條滑塊對應的是文檔的可視區域A。因此滾動條拖動的是可視區域A，而手型工具拖動的是整體區域B，兩種操作方式拖動的主體不一樣，所以方向恰好相反。

　　滾動條可以理解為文檔在垂直方向上的縮略圖，滑塊可以表示可視區域當前位置，可視區域占整體區域的比例。隨著文檔整體區域不斷增高，可視區域所占的比例越小，因此滑塊高度不斷變小。統計過IE、FF、Office等常用軟件，一般滑塊高度到8px時就不再縮小。當滑塊高度只剩8px時，滾動條的拖動體驗就相當的差。
　　Google wave對滾動條做了大膽的創新。

　　1、上下按鈕與滑塊連在一起(好處：從滑塊到上下按鈕的鼠標運動距離變短;問題：點擊上下按鈕，滑塊無法跟隨運動)
　　2、滾動條的滑塊高度固定不變(好處：解決了滑塊極小的問題;問題：無法表示可視區域的比例)
　　這兩處修改優化了傳統滾動條的問題，卻引發滾動條基本屬性(“位置”與“比例”)問題。為解決引發的新問題，google wave的滾動條引入了兩個新元素：

上一篇：網頁設計基礎教程(二)：主題篇

下一篇：網頁制作經驗分享:干凈簡潔的網頁列表代碼