Raft 设计系统
English

产品 · Raft Chat

Home

The phone's Home screen — the server switcher, who is working and the bell on the frame, the Saved row, and the channel and direct message sections.

本页尚未翻译
译文完成之前，这里显示英文原文。 阅读英文版

Home is the first top-level page on a phone. It answers which server you are in, who is working, and what is waiting, and it lists every channel and direct message. It is the same list as the desktop Chat sidebar (Raft Chat), drawn on paper.

Structure

From top to bottom:

  1. The top bar, on the frame: a 56px row (PanelSectionHeader), with the seam under it like every tab root, the server switcher on the left, and the working summary and the bell on the right. It has no subtitle and no Search button: searching everything is the Search tab (Navigation).
    • The server switcher is the workspace button (WorkspaceButton): the server's avatar, its name and a chevron, the same on the phone web and in the mobile app. It opens the server list as a popover (Built from existing parts).
    • The working summary is an avatar stack and a count; it opens Working now (Working agents) and is hidden when no one is working.
    • The bell, a 20px icon with a 44px target, opens the notification center (Raft Chat) and shows a pink pixel when there is something new. Home is the only top-level page with the bell and the working summary.
  2. The Saved row, with a gray count in Space Mono: Saved's only entry point on a phone. Search and Activity are on the tab bar, so Home has no rows for them.
  3. Sections: the sections of the Chat sidebar, without Saved, in the person's order.
  4. The tab bar, with Home selected. Nothing is attached above the tab bar.
sidebar/compositions/phone-home

The rows are sidebar rows, which are 44px below md on their own (Sidebar).

Rules

  • Show the server switcher only on Home. Draw it with the workspace button: the server's avatar, its name (at most 200px, then an ellipsis) and a chevron. Add the globe when the server's public page is on. It looks the same at every window height.
  • Put the list straight on paper, not in cards.
  • Draw the rows with the sidebar row (Sidebar), 44px high in text-body. The Saved row is never selected.
  • Don't put a pink button on Home. Creating is the + buttons in the section headers (Raft Chat).
  • Open every row as a pushed page.