Chat UI Kit - Messaging Interface Design
source link: https://getstream.io/chat/ui-kit/?utm_content=developer
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Chat Messaging UI Kits
Craft a beautiful chat app UI design with our high fidelity Chat UI kit for Sketch. In-App Chat interfaces for live chat, team collaboration, messaging, customer support and gaming are included. Design your responsive chat interface with all the essential elements required for fully interactive chat experiences.
5 Essential Chat Use Cases
This Messaging UI kit includes designs for social chat, team collaboration, livestreams, in-game chat, sales and support. Each interface has light, dark, web and mobile versions to make designing your chat app straightforward.
Chat UI Kit v1
DownloadMobile Chat Kit
This is the UI kit that we built our stunning Chat UX Kit with. It’s a very good starting place for mobile chat designs, with patterns for every feature your users expect from a powerful chat experience.
Figma, Sketch, Adobe XD
View ChatKit →Chat UI Kits with 5 Essential Use Cases for Chat Apps
This UI kit includes designs for social messaging, team collaboration, livestreams, in-game chat, sales and support. Each use case has light and dark versions to make designing your chat app straightforward.
Social Messenger UI
Design a messaging UX that feels like Facebook, iMessage or Telegram.
Team Chat UI
Design a messaging app that feels like Slack or Twist with that classic email thread layout.
Livestream Chat UI
Livestream features a compact UI that is better suited for real-time events.
Game Chat UI
Gaming chat like Xbox live for multiplayer games.
Customer Support Chat UI
Agent and bot based chat UI for sales and support use cases.
Flexible Chat Messaging Components
The design philosophy of this UI kit was to provide other designers with a 95% complete starting point. This means that we needed to create a robust design system with relatively generic styling, while still showcasing the unique features of each use case.
Chat Message Lists
The message list UI is for displaying attachments, messages, channels, typing indicators and date separators. Show accurate dates and message actions in the chat message lists.
Chat Channels and Lists
Display the active conversations with indicators of who has read along with any new messages received within the Channel List UI Component.
Chat Threads & Replies
Threads enable conversations to stay on topic and organized. Threads render a parent message with a list of replies, keeping everything in a single threaded conversation.
Chat Message UI
There are many micro-interactions with chat. Editing, deleting, flagging, muting, reactions, retry and thread initiation are all attached to each individual message.
Chat Reactions UI
Select and show an emoji reaction to a message. Reactions allow users to quickly respond to any message, for any purpose.
Chat Message Input UI
Composing the perfect message takes a robust and flexible message input UI. Attaching images, videos, and files and select the perfect emoji.
DM or Groups
We have designed options for DMs or Group chats. This includes how avatars are handled, chat preferences, and a whole bunch of other UX.
Create a New Chat UX
Our Chat Sample Kit has a complete user experience for creating a new chat. It’s very flexible, intuitive and ready to streamline your chat onboarding.
Galleries
Smart uploading, intelligent grouping and robust gallery views make our Mobile Chat UI/UX ready to be used to advance your own designs.
Chat UI Kit also Includes
- Message Reactions
- Link previews
- Images, Videos and Files attachments
- Edit and Delete message
- Typing Indicators
- Read Indicators
- Block & Mute
- Image gallery
- GIF support
- Light/Dark themes
- Style customization
- Simple UI
- Threads
- Slash commands
- Network problems
- Mention users
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK