超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

《Ant Design 設(shè)計(jì)模式周周看》階段總結(jié)篇· 與交互操作相關(guān)的設(shè)計(jì)模式

2022-3-24 周周

模式一：按鈕組 Button Groups

簡介：「按鈕組」是把相關(guān)的動(dòng)作組織成一組按鈕的設(shè)計(jì)模式。按鈕組的內(nèi)部內(nèi)容彼此水平或垂直對(duì)齊，并采用相似的視覺設(shè)計(jì)。如果超過三個(gè)或四個(gè)動(dòng)作，往往會(huì)采取多個(gè)分組。

例子：語雀編輯器的頂部工具欄

詳情：按鈕組

模式二：懸浮工具 Popup Tools

簡介：「懸浮工具」其實(shí)很常見，在 PC 端，就是當(dāng)用戶鼠標(biāo)掠過對(duì)象時(shí)就懸浮顯示一些工具和功能；在移動(dòng)端，當(dāng)用戶點(diǎn)擊對(duì)象時(shí)，懸浮工具就會(huì)顯示在旁邊。

例子：花瓣網(wǎng)在鼠標(biāo)滑動(dòng)在圖片卡片上時(shí)，圖片上方就會(huì)出現(xiàn)放“采集”和喜歡的功能。

undefined

詳情：懸浮工具

模式三：動(dòng)作面板 Action Panel

簡介：「動(dòng)作面板」是集成了系列動(dòng)作的 UI 面板或命令組?；谟脩粼谲浖械耐Ａ粑恢煤褪褂们闆r，面板上通常是頻繁使用和最相關(guān)的動(dòng)作集合。相比于界面其他的行動(dòng)按鈕，如常規(guī)的「按鈕組」，動(dòng)作面板能以更加醒目的方式顯示命令。

例子： Mac 電腦的屏幕下方會(huì)為用戶展示一組可操作的命令

undefined

詳情：動(dòng)作面板

模式四：行動(dòng)號(hào)召按鈕 CTA Button

簡介：「行動(dòng)號(hào)召按鈕」是用來號(hào)召用戶點(diǎn)擊的進(jìn)行下一步的操作按鈕/可點(diǎn)擊的組件。

例子：螞蟻金融科技首頁的“開始探索”按鈕，點(diǎn)擊后跳轉(zhuǎn)到一個(gè)新的頁面進(jìn)行下一步操作。

undefined

詳情：行動(dòng)號(hào)召按鈕

模式五：智能菜單 Smart Menu

簡介「智能菜單』是一種動(dòng)態(tài)顯示菜單項(xiàng)的設(shè)計(jì)模式，根據(jù)用戶所處的不同上下文，提供不同的菜單選項(xiàng)，這是一種讓菜單變得更靈活和高效的設(shè)計(jì)模式。

例子 macOS 日歷的右鍵菜單項(xiàng)

undefined

詳情：智能菜單

模式六：結(jié)果預(yù)覽 Preview

簡介：「結(jié)果預(yù)覽」是一種在用戶執(zhí)行某個(gè)動(dòng)作之前，為其顯示操作效果的設(shè)計(jì)方法，可以為用戶預(yù)期的最終結(jié)果提供參考。

例子：寶馬官網(wǎng)在用戶選購時(shí)可以對(duì)車的各種屬性進(jìn)行配置和效果預(yù)覽

undefined

詳情：結(jié)果預(yù)覽

模式七：加載提示 Loading Indicator

簡介：「加載提示」是用戶在提交操作之后，程序響應(yīng)結(jié)果前顯示的動(dòng)畫和指示。

加載提示通常是儀表或溫度計(jì)式的動(dòng)畫，用于顯示某項(xiàng)耗時(shí)較長的任務(wù)的關(guān)鍵數(shù)據(jù)。例如，上傳大型文件或圖像，或者在移動(dòng)設(shè)備上加載移動(dòng)應(yīng)用程序時(shí)的動(dòng)畫，表示當(dāng)前的狀態(tài)以及完成任務(wù)剩余的時(shí)間。

例子：使用 Ant Design 組件-加載中搭建的kitchen頁面加載時(shí)的效果

undefined

詳情：加載提示

模式八：撤銷按鈕 Cancelability

簡介「撤銷按鈕」是一種允許用戶取消耗時(shí)操作的設(shè)計(jì)模式。

例子 Ant Design Upload 組件，文件上傳時(shí)允許用戶點(diǎn)擊垃圾桶圖標(biāo)進(jìn)行刪除

undefined

詳情：撤銷按鈕

模式九：多級(jí)撤銷 Multilevel Undo

簡介：「多級(jí)撤銷」允許用戶撤銷一系列的操作。用戶操作的順序能被系統(tǒng)捕獲記錄，根據(jù)原始執(zhí)行順序，一步步返回歷史操作。

例子：用 Sketch 畫設(shè)計(jì)稿時(shí)，可以多級(jí)撤銷，允許用戶返回上一步或更早的歷史操作

undefined

詳情：多級(jí)撤銷

模式十：歷史記錄 Command History

簡介：「歷史記錄」包含可撤銷的操作和瀏覽器歷史記錄兩種。

「可撤銷的操作」指的是當(dāng)用戶在某些軟件內(nèi)執(zhí)行某些操作時(shí)，系統(tǒng)自動(dòng)保存的關(guān)于這些操作的可見記錄，記錄了用戶做了什么操作、作用在什么對(duì)象上、以及執(zhí)行操作的時(shí)間。此記錄可以被用戶移除或改變這些動(dòng)作的順序。

「瀏覽器歷史記錄」指的是用戶瀏覽互聯(lián)網(wǎng)時(shí)，瀏覽器保留的用戶那些瀏覽過的網(wǎng)站，程序和URL的可見記錄。當(dāng)用戶忘記之前訪問過的網(wǎng)站網(wǎng)址時(shí)，能幫助用戶根據(jù)歷史歷史記錄進(jìn)行查找。

例子：釘釘?shù)脑票P查看文件后留下的最近查看文件的歷史記錄。

undefined