欧美日韩午夜精品不卡综合-欧美日韩系列-欧美日韩小视频-欧美日韩性-成人五月网-成人五级毛片免费播放

二維碼
企資網

掃一掃關注

當前位置: 首頁 » 企資頭條 » 生活 » 正文

有人告訴你「Popover氣泡卡片」這么好

放大字體  縮小字體 發布日期:2021-09-16 01:30:30    作者:企資小編    瀏覽次數:61
導讀

編輯導語:氣泡卡片是一個由矩形和三角箭頭組成的彈出窗口,可用來做提示引導,或者實現一些頁面的耦合,等等。不過任何一種交互組件的使用都有限度,氣泡卡片也不例外。本篇文章里,作者對氣泡卡片的交互含義、以及

編輯導語:氣泡卡片是一個由矩形和三角箭頭組成的彈出窗口,可用來做提示引導,或者實現一些頁面的耦合,等等。不過任何一種交互組件的使用都有限度,氣泡卡片也不例外。本篇文章里,作者對氣泡卡片的交互含義、以及設計時的注意事項做了總結,一起來看一下。

前幾篇短文小編介紹了「radio button」「check box」等一系列與表單相關等交互組件,相信觀眾老爺們對表單的頁面編排已經有基本的概念。現在我們開啟「popover」的世界,簡單聊一聊氣泡卡片的交互性質是怎么樣的。

一、「Popover氣泡卡片」的交互含義

「Popover」又稱”氣泡卡片/氣泡彈出框/彈出式氣泡/氣泡”,是由一個矩形和三角箭頭組成的彈出窗口,箭頭指向的地方通常是導致氣泡卡片彈出的控件或區域。通過點擊氣泡卡片內的按鈕或非氣泡卡片的屏幕其他區域可關閉氣泡卡片。

1. 「Popover氣泡卡片」的交互結構

1)箭頭(Arrow)

箭頭:「氣泡卡片」內承擔方向指示作用,位置不固定,隨著需要指向的內容方向而改變。

2)容器(Container)

容器:文字信息或者操作信息的承載物。

3)內容(Content)

內容:「氣泡卡片」內最重要的部分,可以是說明信息也可以是操作功能。

這里要強調一點,通常我們使用「氣泡卡片」會用一些視覺手法強調其是浮于原操作界面之上,例如:描邊、投影等。介于「氣泡卡片」指向好、善于吸引注意力、操作效率高、可承載信息量大的特點,一般使用在以下三種場景比較多:「快捷導航」「提示引導」「界面解耦」。

2. 快捷導航

由于移動端局限于物理尺寸,設計師不得不將大量的低頻但又重要的功能操作塞入「氣泡卡片」內,通過“更多”、“···”、“+”的方式呼出「氣泡卡片」。

3. 提示引導

基于「氣泡卡片」自帶箭頭這一方向性特質,我們在可以把它使用在一些需要引導的功能設計上面,比如版本迭代后的新功能提示,這樣做可以讓用戶非常明確地知道針對對頁面中某項新功能產品方更新了哪些東西。降低用戶認知成本。

4. 界面解耦

當不想破壞原界面用戶使用節奏與信息密度的情況下,可以利用「氣泡卡片」信息承載量大的特點來進行一些頁面的解耦,達到屏幕空間復用的目的(此做法適用于大尺寸界面 )。

二、「Popover氣泡卡片」的注意點

1. 注意與「Edit Menus 編輯菜單」的區別

在iOS規范當中明確把「Edit Menus 編輯菜單」與「Popover氣泡卡片」分為兩種不同的交互組件,使用場景也存在不小差異。

「Edit Menus 編輯菜單」用在對文本信息、視圖信息等內容編輯功能的承載,如復制和粘貼,其交互動作通常為長按或者雙擊。

developer.apple/design/human-interface-guidelines/ios/controls/edit-menus/

「Popover氣泡卡片」在iPhone上蘋果并不推薦使用,而是讓它用在屏幕尺寸更大的iPad上。

developer.apple/design/human-interface-guidelines/ios/views/popovers/

2. 避免使用時面積過大

不應該把氣泡卡片面積做得過大,更不應該占據整個屏幕,這樣會造成對原本信息的遮蓋。說到底氣泡卡片還是一種中等提醒的形式,設計師不應該貪心,設計時應對承載信息做減法,并且要注意不同屏幕下的適配問題。

3. 謹慎考慮彈出位置

氣泡卡片的箭頭應盡可能直接指向目標的元素。由于無法在屏幕上拖動氣泡卡片,因此氣泡卡片不應覆蓋重要信息。需要注意的是,在屏幕邊緣需要轉換氣泡卡片的方向,例如在屏幕頂部,氣泡卡片應當顯示在觸發位置的下方,否則氣泡卡片會超出屏幕導致顯示不完整。

4. 請考慮實時保存

基于它的關閉原理“通過點擊氣泡卡片內的按鈕或非氣泡卡片的屏幕其他區域可關閉氣泡卡片”,造成它極其容易被誤觸關閉,所以在它內部進行操作時建議采用實時保存的機制,可以有效地給用戶進行防錯。

5. 每次只使用一個氣泡卡片

在同個窗體當中每次只能出現一個氣泡卡片,當出現第二個的時候前一個必須關閉。因為從初衷來看氣泡卡片就是想讓用戶進行內容聚焦,暫時屏蔽一些信息,如果多個同時使用的話就變的自相矛盾。并且除了彈窗之外,氣泡卡片層之上不該有任何其他元素。

6. 注意存在時間

氣泡卡片是一個中等量級的提醒組件,它不像「toast」自動出現自動消失,也不像彈窗絕對的模態強提醒,切換用戶當下操作。它的出現時間與模態與非模態是可以由設計師根據業務屬性自行把控,所以與前端開發進行溝通時需要把設計需求傳遞到位。

三、文末小結

早在移動互聯網誕生之前,氣泡卡片作為快捷導航或者提示引導就在PC和Web里被廣泛運用。

在某些設計規范當中(比如iOS的移動端)并不提倡使用氣泡卡片,但在移動互聯網發展多年的當下,用戶使用習慣已經培養完畢,只要把握好氣泡卡片的特性,跨平臺使用現在也挺常見。同時基于氣泡卡片承載信息靈活的特點,在平常的設計工作當中飽受歡迎。

作者:月亮與六便士;公眾號:月亮體驗設計坊

本文由 @月亮與六便士 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來Unsplash,基于CC0協議。

 
(文/企資小編)
打賞
免責聲明
本文為企資小編推薦作品?作者: 企資小編。歡迎轉載,轉載請注明原文出處:http://www.syqk.com.cn/news/show-178720.html 。本文僅代表作者個人觀點,本站未對其內容進行核實,請讀者僅做參考,如若文中涉及有違公德、觸犯法律的內容,一經發現,立即刪除,作者需自行承擔相應責任。涉及到版權或其他問題,請及時聯系我們郵件:weilaitui@qq.com。
 

Copyright ? 2016 - 2023 - 企資網 48903.COM All Rights Reserved 粵公網安備 44030702000589號

粵ICP備16078936號

微信

關注
微信

微信二維碼

WAP二維碼

客服

聯系
客服

聯系客服:

在線QQ: 303377504

客服電話: 020-82301567

E_mail郵箱: weilaitui@qq.com

微信公眾號: weishitui

客服001 客服002 客服003

工作時間:

周一至周五: 09:00 - 18:00

反饋

用戶
反饋

主站蜘蛛池模板: 成年美女黄网站小视频 | 老司机精品福利视频 | 一本色道久久爱88av | 免费看一级欧美毛片视频 | 久久久久久国产精品免费免 | 国产视频在线免费观看 | 国产精品久久久久一区二区三区 | 久久久久国产成人精品 | 久久国产经典视频 | 天空在线观看免费完整 | 小明日韩在线看看永久区域 | 亚洲 欧美 日韩中文字幕一区二区 | 亚洲小视频在线观看 | 久久免费网 | 免费毛片全部不收费的 | 国产成人精品高清在线 | 日本一区二区三区四区公司 | 国产在线观看第一页 | 久久香蕉精品视频 | 亚洲综合爱久久影院 | 日韩激情无码免费毛片 | 国产日产韩产麻豆1区 | 伊人五月天婷婷琪琪综合 | 久久免费精品视频 | 免费看真人a一级毛片 | 免费看一级毛片欧美 | 中文字幕日韩欧美一区二区三区 | 伊人色综合久久天天网蜜月 | 久久成人免费观看草草影院 | 亚洲女人被黑人猛躁进女人 | 欧美激情第一欧美在线 | 很黄很暴力深夜爽爽无遮挡 | 精品亚洲福利一区二区 | 国产伦码精品一区二区三区 | 国产一区国产二区国产三区 | 国产伦码精品一区二区 | 国产欧美成人xxx视频 | 国产成人免费手机在线观看视频 | 午夜91理论片 | 三级网址在线 | 欧美日韩高清不卡免费观看 |