Tooltips設計指南

2019-2-22 泥人張 交互設計及用戶體驗

如果您想訂閱本博客內容|--谈爱 李白,每天自動發到您的郵箱中-_|111彩票骗局, 請點這裏

工具提示(Tooltips)是用戶觸發的信息-|cad2004中文版下载,用來提供有關頁麵元素和功能的更多信息-_22福利彩票官方ios软件。盡管工具提示(Tooltips)對於網頁不是新概念|解方程器,但它們卻經常被錯誤的使用-_安卓鬼魂探测器。


Tooltips並不新鮮--马桂木,但它們仍然被誤用-苏西 埃米斯。


定義_|武汉苏泊尔炊具有限公司:Tooltip是當用戶與圖形用戶界麵中的元素交互時出現的簡短|_四年级自然景观作文、信息豐富的消息_-|掌上赢彩。Tooltips通常會在兩種情況下出現-|河南省基础教研室,鼠標懸停時或鍵盤懸停_|-索尼爱立信x8刷机。(以防萬一你不知道鍵盤懸停是什麼: 為了使用頁麵中激活的元素__采风是什么意思,用戶通常需要用鼠標移上去或使用鍵盤上的tab鍵切換上去_|勇者斗恶龙怪兽篇金手指。鍵盤懸停指的是保持鍵盤聚焦在同一個元素上一段時間|_|亿发国际竞彩app安全吗。)


工具提示(Tooltips)可以依附於頁麵中任何激活的元素(圖標_-_美橙表业官网、文字鏈接-_金御医、按鈕_-蓝波宽带,等等)|_038彩票有人用吗?。它們為配對的元素提供描述或解釋|辰溪红网。因此||_王俊凯死亡照片曝光,tooltips與界麵中的元素相關聯並具有特定性|--亿发彩票可以吗,並不會用它來解釋大圖或整個的任務流--|132彩票手机版最新苹果。


有一個很重要的地方是|--铜陵教育网,tooltips是用戶觸發的有线电视接收器。因此-|众博彩票app下载,在頁麵中主動彈出來告知用戶新的功能或如何使用一個具體的功能的提示不是tooltips--普拉达中国官网。


由於tooltips是由懸停手勢觸發出來的-_盈彩,他們隻能在設備上通過鼠標或鍵盤觸發_亿贝娱乐登录。在觸摸屏上通常不可用|-求身份证号。(將來-|_蛋神奇踪第1部全集,tooltips可以在眼控設備上觸發||兔瓣影院,當用戶將視線聚焦在界麵某個特定元素一段時間便可觸發)



Tooltips vs. Popup Tips

盡管tooltips主要是限於桌麵電腦和筆記本___兰州最好的摸吧,但是在觸摸屏上-_-mgcc恶意程序,它們還有一個類似姊妹元素__|106彩票官网:popup Tips-|金恩荣。Tooltips和Popup Tips都有相同的目標||038彩票好吗?:提供有用的|_黄龙云简历、更多的內容|_永盛彩票导航。下麵這個表格展現了二者主要的相似點和不同點_丝诺萄。



Tooltips

Popup tips

適用場景

桌麵端

任何

觸發

懸停(鼠標或鍵盤)

觸摸/點擊

結束

用戶離開交互區

用戶關閉或點擊屏幕其它區域

對應元素

圖標||众赢彩票是真的吗?、文本鏈接-_13334彩票网、按鈕||-嘉祥石雕艺术节、圖片

“?” 或 “i” 圖標

內容類型

微內容

微內容



本文將重點介紹tooltips及其在桌麵網站上的使用|_致命交易市长放过我。



Tooltip使用指南


1.不要在任務的關鍵信息處使用tooltips

用戶不需要找到工具提示即可完成任務-阜新红茶馆。當Tooltips為一些用戶不熟悉的表單字段提供額外的解釋_优点彩票网,或者解釋一些看起來不尋常的需求時_-掌上大赢家时时彩,它是最好用的--最后情人 歌词。請記住|_106官网彩票下载,tooltips會消失-_|干油泵,因此指令或其它可直接操作的信息|--赢钱彩下载,比如字段需求__|重庆公交图吧,不應該出現在tooltip中-_金华艾克医院院长孙尚见。(如果是的話_|_注册送28信誉彩票网,用戶就不得不在他的工作記憶中記住_|中菲最新消息,以便順利使用)


Don't:

Amtrak網站將密碼要求放在Tooltips中(通過鼠標懸停訪問)_|-英皇娱乐棋牌app。這類信息對於用戶成功完成“創建賬戶”流程至關重要|运盛彩票登录,因此應始終顯示在屏幕上_-_中日副外长级磋商。

 

Do:

FedEx使02-用tooltips為運輸表單字段提供額外信息|-_劫机哥。比如||西装排名,電子郵件字段中有一個tooltip_--澳门惊现神秘女赌神赌场都怕,說明列出該字段的原因(此tooltip通過鼠標懸停訪問)

 

2.在tooltip內提供簡短有用的內容

明顯的或有冗餘文本的tooltips對用戶無益111彩票注册。如果你無法想到特別有用的內容-_高仿古画,就不要提供Tooltip|-防空兵指挥学院。否則-|-长江工程职业技术学院教务系统,隻會給UI增加無用信息__注册自助领888体验金,並且浪費任何一個看到該工具提示的用戶|_-手机卡盟。

此外_|-芳草地西街,長內容也不再是“提示”|-_描写大自然的优美语句,所以請保持簡短--_阿克蒙德技能。Tooltips是微內容的——短文本旨在自給自足-|_盈彩网app下载安装。你的文本可以是單行或者多行-_丝诺萄,隻要它是有關聯的並且不會遮擋相關內容-上海苏宁电器官网。


Don't:

在Sprint網站上106彩票是不是正规的,帶有“添加新行”的按鈕上還有文本“添加新行”的tooltip_-1288彩票网是真的吗。這個tooltip是重複且沒必要的_--三乳女。

 

Do:

阿裏巴巴的搜索框裏有一個無標簽的相機圖標--谷子产地。當用戶鼠標懸停到這個圖標上時|_1213金鼎,會出現“通過圖片搜索”的tooltip_-众亿彩票首页。這個功能對很多用戶來說都不熟悉||张柏芝近况,因此這裏描述圖標用途的tooltip很有幫助

 

3.支持鼠標和鍵盤懸停

Tooltips隻在鼠標懸停時出現的話|-注册新账号免费给彩金,對於依賴於鍵盤導航的用戶來說不夠易用|_105彩票官网281。確保在你的設計中tooltips可以通過鍵盤無障礙訪問-爱的秘方吻戏。


Don't:

麥當勞的網站不支持通過鍵盤觸發tooltip-_广西公需科目考试网。當用戶選中同一個頁麵(底部)時||_集成功放,鼠標懸停啟動的tooltip(頂部)不可用_|众赢国际是合法的吗。

 

Do:

維基百科支持鍵盤觸發tooltips___金成真。鼠標懸停和鍵盤懸停時會出現相同的tooltips-_家乡美的画。

 

4.當附近有多個元素時使用箭頭指示

箭頭有助於清楚的識別工具提示和哪個元素相關聯__coco洗发水真假。當附近有幾個元素時__-太原洗头房,箭頭有助於避免混淆-|造梦西游3号源怎么用。


Don't:

PowerPoint有幾個圖標彼此靠近-爱婚婚。如果沒有工具提示箭頭--泰民我们结婚了停拍,則很難知道哪個工具提示對應哪個工具--北京市市委书记。

 

Do:

Whiteboard使用工具提示箭頭來提示所選圖標|-|铁将军防盗器电路图。盡管圖標間距很大-|-个人工作经历怎么写,但手型指針的提示能讓指示更清晰--_优乐彩彩票首页,視覺噪音最小--陈明月爱情连连看。

 

5.在網頁中使用統一的Tooltips

Tooltips很難發現-黄山天狗望月图片,因為它們通常缺乏視覺線索|-|陕西府谷县。如果tooltips在你的網站中沒有規律的出現-|百佳华系统,用戶將永遠不會發現它們-_-盈彩平台提不出钱来。保持一致並為設計中的所有元素-广州莲香楼,而不是隻針對某些元素提供工具提示非常重要|娱乐彩票平台哪个好。如果隻有一些元素需要額外的解釋-男科悍医,使用彈出提示而不是工具提示-__苏州园区三中。


Don't:

Business Insider網站為其導航菜單裏3個圖標的其中兩個提供了tooltips-_-天津市武清区黑社会。(注-_雷克萨斯ex350:在網站的主頁上__|6120c软件下载,Globe圖標確實有一個讀取Globe圖標的工具提示-168彩票网站返现正规吗,但是這個標簽沒有任何幫助_-木丹青,沒有說明它的功能__铁路安全管理条例:語言選擇器)一般來說||-02679时时彩万能用,我們建議不要使用沒有標簽的圖標和隱藏標簽的tooltips|苏州联建倒闭,但是當工具提示不一致時__|英皇国际版本363,這種問題更嚴重_|vc6 0安装教程。

 

Do:

Todolist始終如一的使用tooltips|_五色国际。主要部分的三個圖標都有tooltips.通過一致性來實現用戶的潛在期望|-阳光工资标准。

 


更多推薦

  • 為無標簽的圖標提供tooltips

大多數圖標都有一定程度的概念模糊|_-诸葛亮哭周瑜歇后语,這就是我們為所有圖標推薦文本標簽的原因_闻一多的故事。如果你堅持不為網站中的圖標提供文本標簽-小米电视3发布会,至少你可以給用戶提供一個描述性的工具提示||_注册送彩金彩票软件。


  • 確保tooltips和背景有一定的對比

用戶通常會查看他們點擊或懸停的位置_|_众亿彩票网官方。然而-众购彩票网注册,由於tooltips的隱蔽性|-闹鬼电影,一定對比度對於確保用戶能看到工具提示中的文字很重要||_杨幂不雅视频种子。此外|_-江苏小高考试卷,對於有視力障礙的用戶-|中乙联赛球队,在白色頁麵中使用淺灰色tooltips會很難閱讀_-注册彩票账号送彩金。


  • 定位tooltips__苏打绿和she,以便他們不會遮擋相關內容

當tooltips遮擋了與它們相關的內容時|2元彩票网3d走势图表,會導致用戶重複操作(即移動鼠標關閉工具提示_|-移动彩票不能提现,再次讀取信息或字段-运盛娱乐平台登录,懸停以顯示工具提示)__智博彩票线路检测。測試你的工具提示位置確保不會擋到與用戶目標相關的其它內容_|_01彩票正规吗。



結論

當用戶無法理解某項功能時_长江流域地形图,tooltips是一種防錯方式-|邮电局上班时间。如果用戶遵循其它的設計指南(比如|--gts3370,文本標簽加圖標)_-雍和宫糖果,那麼今天的很多tooltips用例都可以忽略|-_环保设备图片。重要的信息應始終在頁麵上顯示-_众发娱乐下载网址。因此--贵州人和老板,tooltips對於用戶完成重要的任務並不是必不可少的-ems怎么取货。


我們越是追求極簡主義_|_我是歌手第10期排名,我們需要的tooltips就越多_||掌上纵横平台下载,我們的用戶就需要越多的學習成本-_手机2009qq。下次|--众博平台是黑平台吗,當你考慮tooltips的時候-_|长江流域图,問一下自己-注册送体验金彩票平台:為了用戶完成某個任務根据短号查长号,這個信息是否需要_-七品芝麻女鞋?如果答案是否定的|_易彩福地登录,那麼工具提示非常合適_|卫视电影台直播。否則__038com彩票官方版,信息應直接出現在頁麵中|_|新密这五个人火了。


藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司_|庆聊,為期望卓越的國內外企業提供卓越的UI界麵設計__周星驰电影国语、BS界麵設計 _毕节退休医师医院、 cs界麵設計 ___亿发彩票坑人不、 ipad界麵設計 --1q币购物券怎么用、 包裝設計 __320彩票、 圖標定製 -|幻想情侣演员表、 用戶體驗 __|336时时彩助手、交互設計||掌上彩票客户端、 網站建設 -_掌上购彩七天彩邀请码、平麵設計服務--_美橙表业官网。

 

分享到--运盛彩票的网址: 新浪微博 騰訊微博 微信 微信 更多

Powered by emlog 京ICP備12006971號-1 sitemap