贊助連結
自定義顏色和尺寸
(PNG 檔案)
(PNG 檔案)
留白:
關閉
表現數位對話與功能,「圓角對話框」免費素材
這是一款在接近正方形,圓角的對話框中配置「…(刪節號)」的圖示。相對於強調「對話」的雲形或橢圓形對話框,此形狀接近智慧型手機的APP圖示或UI按鈕,讓人聯想到「數位上的留言」或「系統性訊息」。因為簡約不突兀,從商務聊天到遊戲畫面皆廣泛合適。
具體使用場景與用途建議
此圖示從訊息APP的狀態顯示,到網站的操作按鈕,可用於多樣化的用途。
- 聊天・SNS的「留言・輸入中」圖示
作為前往佈告欄或SNS貼文針對「留言欄」的連結按鈕。或是作為在聊天畫面中,對方正在輸入文字時的「輸入指示器」最為適合。圓角四方形狀會讓人聯想到文字框(輸入欄),因此也有促使使用者輸入的效果。 - APP或網站的「其他・選單」按鈕
作為配置於畫面角落「…」按鈕(肉丸選單)的變化形。透過附帶對話框外框,能直覺傳達「按下這裡會顯示詳細說明或選項」的工具提示(Tooltip)角色。 - 評論網站的「感想・口碑」投稿形象
在商品評論或餐飲店的口碑網站中,作為顯示使用者寫下感想動作的圖示。四方形狀讓人聯想到長篇文章或包含圖片的豐富評論。 - 漫畫或部落格的「沉默・思考」表現
作為角色語塞的場景,或表現正在思考某事但尚未化為言語狀態的「間隔(停頓)」。由於比橢圓形給人稍硬的印象,也適合嚴肅場面,或機器人・AI正在思考的場景。 - FAQ或幫助頁面的「補充說明」圖示
作為顯示「詳細資訊請按此」或「有補充」的標記。透過在文章末尾放置此圖示,暗示有被省略的資訊,能夠引導點擊。
編輯技巧與EPS格式的優點
分發檔案中,除了方便網頁製作的PNG、SVG格式外,也同梱了適合DTP設計或高度編輯的向量數據EPS格式。
若活用EPS格式(向量數據),就能配合UI設計的基調微調形狀。使用Adobe Illustrator等軟體,調整圓角弧度,能使其更接近正方形,反之接近圓形也是可能的。
此外,也推薦刪除尾巴(對話框的突起)部分,作為單純的「四方形按鈕」使用。將內部的刪節號改寫為「i(資訊)」或「?(幫助)」,就能應用為網站內的指南圖示,將背景色設為半透明重疊在圖片上的用法也很時尚。
相關關鍵字
對話框、氣泡框、圓角、四方形、刪節號、…、點點點、輸入中、留言、聊天、選單、選項、詳細、思考中、沉默、UI、圖示、Speech bubble、Rounded rectangle、Typing、Menu、Comment
此圓角對話框與刪節號圖示為免費素材。可商用,無需標註出處,免註冊。使用前請務必確認使用條款。
關聯網站:也歡迎使用徒手繪製的手繪插畫素材(免費)。