|
接下來我們看下另一個(gè)工具——懸停即現(xiàn)工具，簡單來說就是鼠標(biāo)懸浮觸發(fā)操作入口。
這是很明顯的懸停操作，通過弱化背景，突出焦點(diǎn)區(qū)域的變化，來提示用戶操作。這種交互方式適合于圖片，列表等大面積的樣式，并且需要提供操作又不希望影響版面閱讀效果的場景。
隨著功能的越來越復(fù)雜，頁面承載信息也越來越多，如何平衡各種引導(dǎo)，操作，反饋是衡量一個(gè)交互工作的基本點(diǎn)。
這是一個(gè)照片編輯的事例，一般我們將顯示和編輯分離，通過操作入口進(jìn)入編輯頁面，保存后反饋。隨著技術(shù)的進(jìn)步，以前需要的頁面跳轉(zhuǎn)現(xiàn)在也可以局部刷新解決了。
接下來我們看一個(gè)例子：
好處：即時(shí)編輯不用跳轉(zhuǎn)，操作更方便，意味有更多元數(shù)據(jù)，從而產(chǎn)生更好的搜索和瀏覽體驗(yàn) 。
懸停即現(xiàn)工具-易發(fā)現(xiàn)性
懸停即現(xiàn)-需要考慮易發(fā)現(xiàn)性，因?yàn)槟惆阉[藏了。 所以對(duì)于交互提示需要設(shè)計(jì)的很明顯，這里，移動(dòng)到頭像上有浮雕效果，然后是下拉箭頭用藍(lán)色高亮顯示，點(diǎn)擊后三角形的箭頭方向變換。所有都是細(xì)節(jié)的變化，有時(shí)候我會(huì)想到是否做的太過了會(huì)。最近工作中也和同事討論，我們做產(chǎn)品做設(shè)計(jì)，有個(gè)假設(shè)：就是面對(duì)的海量用戶，他們的互聯(lián)網(wǎng)經(jīng)驗(yàn)很少，不明白哪里可以點(diǎn)擊，這個(gè)功能是什么意思。所以作為設(shè)計(jì)師需要做好引導(dǎo)，操作上把反饋?zhàn)鲎銐�，鼓�?lì)用戶去嘗試和探索。簡單來說，交互設(shè)計(jì)做的是產(chǎn)品的包裝，要會(huì)講故事，設(shè)計(jì)場景，吸引用戶后，通過貼心的引導(dǎo)來留住用戶。
小提示：
- 用戶通常知道點(diǎn)擊圖像會(huì)有更多信息
- 在主要的操作路徑觸發(fā)懸停內(nèi)容是個(gè)不錯(cuò)的方法
小結(jié)
- 操作不太重要，需要突出內(nèi)容的易讀性，可以講操作隱藏于鼠標(biāo)懸停之后
- 明顯操作的時(shí)候需要保證頁面布局不變化
- 編輯區(qū)域明顯
- 鼠標(biāo)狀態(tài)變?yōu)榫庉嫚顟B(tài)（I形）
- 空間合適的情況下可以放編輯入口
參考資料
- http://www.socialbeta.cn/
- 《web界面設(shè)計(jì)》
原文：http://cdc.tencent.com/?p=4138
本文鏈接：http://www.95time.cn/design/doc/2011/8558.asp 
出處：Tencent CDC Blog
責(zé)任編輯：bluehearts
上一頁 交互設(shè)計(jì):簡單 [3] 下一頁
|
第 1 頁 
第 4 頁 交互設(shè)計(jì):簡單 [4]
