Tooltips設計指南

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

如果您想訂閱本博客內容|-云顶娱乐怎么钱取不到?,每天自動發到您的郵箱中-|中兴国际彩票客服电话, 請點這裏

工具提示(Tooltips)是用戶觸發的信息|_-金丝蓉,用來提供有關頁麵元素和功能的更多信息_|_李天一受害老师照片。盡管工具提示(Tooltips)對於網頁不是新概念-__果酱汉堡店变态版,但它們卻經常被錯誤的使用--房室交叉。


Tooltips並不新鮮--|银镜马赛克,但它們仍然被誤用-||韩版棒针毛衣外套。


定義-_寒山寺门票:Tooltip是當用戶與圖形用戶界麵中的元素交互時出現的簡短-_|云顶彩票娱乐网站、信息豐富的消息_-|太子乐奶粉最新事件2013。Tooltips通常會在兩種情況下出現_|流动人口信息,鼠標懸停時或鍵盤懸停__|310胜负彩14场专家预测。(以防萬一你不知道鍵盤懸停是什麼: 為了使用頁麵中激活的元素|智彩11选5走势图,用戶通常需要用鼠標移上去或使用鍵盤上的tab鍵切換上去--金健米业招聘。鍵盤懸停指的是保持鍵盤聚焦在同一個元素上一段時間-|报关单样本下载。)


工具提示(Tooltips)可以依附於頁麵中任何激活的元素(圖標|__挠脚心漫画、文字鏈接|易富彩票注册、按鈕||_郭锦瑾,等等)_--陈白沙祠。它們為配對的元素提供描述或解釋-_|芳香志。因此-_-移动彩票平台靠谱吗,tooltips與界麵中的元素相關聯並具有特定性|厦门一中,並不會用它來解釋大圖或整個的任務流__2019世界杯竞彩app。


有一個很重要的地方是_|我是传奇2百度影音,tooltips是用戶觸發的__168彩票网是不是黑彩。因此-|-众发彩票走势预测,在頁麵中主動彈出來告知用戶新的功能或如何使用一個具體的功能的提示不是tooltips__|众彩彩票彩票兼营。


由於tooltips是由懸停手勢觸發出來的-|305彩票软件,他們隻能在設備上通過鼠標或鍵盤觸發||_深圳卫视回看。在觸摸屏上通常不可用--|易发彩票是不是黑平台。(將來-_卫生人才考试成绩查询,tooltips可以在眼控設備上觸發_南京机场大巴时刻表,當用戶將視線聚焦在界麵某個特定元素一段時間便可觸發)



Tooltips vs. Popup Tips

盡管tooltips主要是限於桌麵電腦和筆記本中国邮政网络培训学院职业鉴定中心,但是在觸摸屏上||西班牙赛道阀芯,它們還有一個類似姊妹元素_科幻电影排行榜前十名:popup Tips|--江苏点招网。Tooltips和Popup Tips都有相同的目標|--幼香阁网址:提供有用的|_|宏基销售、更多的內容__-河南大象网。下麵這個表格展現了二者主要的相似點和不同點-|陈蓉照片。



Tooltips

Popup tips

適用場景

桌麵端

任何

觸發

懸停(鼠標或鍵盤)

觸摸/點擊

結束

用戶離開交互區

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

對應元素

圖標___易彩—彩民福地登录APP、文本鏈接||他的世界有点冷、按鈕||二十二选五、圖片

“?” 或 “i” 圖標

內容類型

微內容

微內容



本文將重點介紹tooltips及其在桌麵網站上的使用_149期双色球开奖结果。



Tooltip使用指南


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

用戶不需要找到工具提示即可完成任務_-长沙坎城红毯。當Tooltips為一些用戶不熟悉的表單字段提供額外的解釋|258彩票平台,或者解釋一些看起來不尋常的需求時_-万兽之国(h)人蛇,它是最好用的|_上海酒吧砍人事件视频。請記住_-老师给学生毕业赠言,tooltips會消失|_-东莞桑拿服务流程,因此指令或其它可直接操作的信息||-英拉他信雾霾游北京,比如字段需求||采风是什么意思,不應該出現在tooltip中|||小动脉电影网。(如果是的話_|_钚电池,用戶就不得不在他的工作記憶中記住|||234下载彩票软件,以便順利使用)


Don't:

Amtrak網站將密碼要求放在Tooltips中(通過鼠標懸停訪問)__11选五5开奖结果辽宁。這類信息對於用戶成功完成“創建賬戶”流程至關重要|陈楚河张檬,因此應始終顯示在屏幕上|||芯睿单片机。

 

Do:

FedEx使02-用tooltips為運輸表單字段提供額外信息|-|摩托车驾驶证查询。比如_|_与狼共舞oa,電子郵件字段中有一個tooltip-_1号娱乐平台正规吗?,說明列出該字段的原因(此tooltip通過鼠標懸停訪問)

 

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

明顯的或有冗餘文本的tooltips對用戶無益|-_比亚斯。如果你無法想到特別有用的內容|-|博尔格斯,就不要提供Tooltip--_金艺贞仙桃福利观看。否則_-陈大鹏,隻會給UI增加無用信息_|-天星影院,並且浪費任何一個看到該工具提示的用戶__-missripley结局。

此外--|再见美丽女孩,長內容也不再是“提示”-_|168彩票安卓版28,所以請保持簡短-_小米1锤子rom下载。Tooltips是微內容的——短文本旨在自給自足_|35472藏宝阁玄机资料。你的文本可以是單行或者多行___青海卫视下一站幸福,隻要它是有關聯的並且不會遮擋相關內容__鹰爪门。


Don't:

在Sprint網站上--_窖口客运站网上订票,帶有“添加新行”的按鈕上還有文本“添加新行”的tooltip-|360彩票网。這個tooltip是重複且沒必要的|_铜皮规格。

 

Do:

阿裏巴巴的搜索框裏有一個無標簽的相機圖標-|盐都政府网。當用戶鼠標懸停到這個圖標上時||青岛火车站订票,會出現“通過圖片搜索”的tooltip|_约彩彩票为啥注册不了。這個功能對很多用戶來說都不熟悉-_抖音温婉百度云,因此這裏描述圖標用途的tooltip很有幫助

 

3.支持鼠標和鍵盤懸停

Tooltips隻在鼠標懸停時出現的話__|车位尺寸,對於依賴於鍵盤導航的用戶來說不夠易用|吴尊的qq号是多少。確保在你的設計中tooltips可以通過鍵盤無障礙訪問-|_qq书签怎么没了。


Don't:

麥當勞的網站不支持通過鍵盤觸發tooltip|-雅虎宝贝鱼翻译。當用戶選中同一個頁麵(底部)時_|长汀南禅寺,鼠標懸停啟動的tooltip(頂部)不可用_|_暴走鞋在哪买。

 

Do:

維基百科支持鍵盤觸發tooltips||-众发娱乐代理犯法吗。鼠標懸停和鍵盤懸停時會出現相同的tooltips___苏州大学法学院。

 

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

箭頭有助於清楚的識別工具提示和哪個元素相關聯__-霹雳赛车主题曲。當附近有幾個元素時|_永胜集团是做什么的,箭頭有助於避免混淆|-星光大道20130202。


Don't:

PowerPoint有幾個圖標彼此靠近-掌上彩票不能用了。如果沒有工具提示箭頭--_江淮愿景iii,則很難知道哪個工具提示對應哪個工具-动作猜谜游戏。

 

Do:

Whiteboard使用工具提示箭頭來提示所選圖標_男扮女装过程。盡管圖標間距很大|--傲盾代理,但手型指針的提示能讓指示更清晰|__闫芳事件,視覺噪音最小|_诺基亚ovi商店。

 

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

Tooltips很難發現|-少年进化论成员,因為它們通常缺乏視覺線索-_金巧巧的胸。如果tooltips在你的網站中沒有規律的出現||168极速赛车开奖结果,用戶將永遠不會發現它們-_幼儿教师年度工作总结。保持一致並為設計中的所有元素_-北镇青网,而不是隻針對某些元素提供工具提示非常重要_|奶妈吧。如果隻有一些元素需要額外的解釋-168现场开奖下载,使用彈出提示而不是工具提示__-阜南县教育局。


Don't:

Business Insider網站為其導航菜單裏3個圖標的其中兩個提供了tooltips||quickoffice下载。(注-|-租东西:在網站的主頁上--济南五中,Globe圖標確實有一個讀取Globe圖標的工具提示|_古蔺教育网,但是這個標簽沒有任何幫助|-租东西,沒有說明它的功能-||卓易彩票什么时候恢复:語言選擇器)一般來說---帕丁顿熊2百度云,我們建議不要使用沒有標簽的圖標和隱藏標簽的tooltips||_1rdt军海,但是當工具提示不一致時|_n79软件下载,這種問題更嚴重_宅男躲艳记。

 

Do:

Todolist始終如一的使用tooltips|193大赢家彩票。主要部分的三個圖標都有tooltips.通過一致性來實現用戶的潛在期望__-扬州八怪画竹子。

 


更多推薦

  • 為無標簽的圖標提供tooltips

大多數圖標都有一定程度的概念模糊__|10500彩票怎么玩,這就是我們為所有圖標推薦文本標簽的原因|-_阿列克莎。如果你堅持不為網站中的圖標提供文本標簽__众彩网是不是真的,至少你可以給用戶提供一個描述性的工具提示|||刘剑简历。


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

用戶通常會查看他們點擊或懸停的位置|-|艾艾社区。然而|-胶囊模具,由於tooltips的隱蔽性_-女士毛衣编织款式,一定對比度對於確保用戶能看到工具提示中的文字很重要||直播CCTV。此外_|2分钟快3是什么彩票,對於有視力障礙的用戶--|韩文臣,在白色頁麵中使用淺灰色tooltips會很難閱讀-_|105彩票是正规平台吗。


  • 定位tooltips_||双性人生,以便他們不會遮擋相關內容

當tooltips遮擋了與它們相關的內容時||105彩票网,會導致用戶重複操作(即移動鼠標關閉工具提示-|哈乐士,再次讀取信息或字段_鹊桥卡灰,懸停以顯示工具提示)-|相信未来 朗诵。測試你的工具提示位置確保不會擋到與用戶目標相關的其它內容|重庆公安局长。



結論

當用戶無法理解某項功能時|--ovi套件,tooltips是一種防錯方式--038彩票能提款吗。如果用戶遵循其它的設計指南(比如_|_阳泉中行吧,文本標簽加圖標)_|-长沙口碑网租房,那麼今天的很多tooltips用例都可以忽略_--永盛投资。重要的信息應始終在頁麵上顯示|银盘服务。因此-_亿博娱乐登录,tooltips對於用戶完成重要的任務並不是必不可少的_|_优秀教师的先进事迹。


我們越是追求極簡主義_|-怎样克隆qq空间,我們需要的tooltips就越多_-_佳佳宠儿,我們的用戶就需要越多的學習成本-|2019世界杯竞彩足球。下次|尊龙娱乐人生,當你考慮tooltips的時候_晋城五个人图片,問一下自己-_蘑菇街2013新款冬装:為了用戶完成某個任務--语文老师你的好紧嗯爽,這個信息是否需要-永盛国际APP?如果答案是否定的-||滕州彭庆国女人,那麼工具提示非常合適|-|云购彩票YG888COM。否則|--问道维护到几点,信息應直接出現在頁麵中-_大肚吧分娩小说。


藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司|||11选5,為期望卓越的國內外企業提供卓越的UI界麵設計-_舒南、BS界麵設計 |-农牧场盗匪、 cs界麵設計 -|塔河贴吧、 ipad界麵設計 _|鹿寨都市论坛、 包裝設計 ___南京联单印刷、 圖標定製 |_|曼联正品球衣、 用戶體驗 -|-河北区haobc、交互設計_|云顶注册送76、 網站建設 |-198彩成立几年了、平麵設計服務-|智彩平台。

 

分享到-子宫日记中文版全集: 新浪微博 騰訊微博 微信 微信 更多

Powered by emlog 京ICP備12006971號-1 sitemap