Bear: Typografie-First Schreiben
Wie Bears Typografie-First-Design Apple Design Awards gewann: verschachtelte Tags, Theme-System, Fokus-Modus und Inline-Markdown. Mit Swift-Implementierungsmustern.
Bear: Typografie-zentriertes Schreiben
„Mit Bear fühlt es sich wieder an, als würde man einen Apple-Computer benutzen. Keine Ladeanimationen, keine Skeleton-Screens, keine Toast-Benachrichtigungen. Nur fließende Animationen und Inhalte, die immer sofort bereit sind."
Bear ist ein Meisterkurs in ablenkungsfreiem Design. Jede Entscheidung, von der Typografie bis zum Tag-System, dient Autoren, die denken wollen – nicht verwalten.
Kernpunkte
- Keine Ladezustände - Inhalte sind immer bereit; die Synchronisierung erfolgt unsichtbar im Hintergrund
- Tags ersetzen Ordner - Inline-
#tagswährend des Schreibens sind besser als nachträgliche Ordnerverwaltung, und Notizen können an mehreren Orten existieren - Typografie-Einstellungen respektieren Leser - Schriftart, Größe, Zeilenhöhe und Breite lassen sich für die eigenen Augen optimieren
- Alles auf einmal mit Themes ändern - 28+ kuratierte Themes sind besser als stückweise Farbauswahl
- Fokusmodus als Notausgang - Wenn ablenkungsfrei noch weiter gehen muss, entfernt eine Geste alles
Warum Bear wichtig ist
Bear gewann den Apple Design Award 2017 und mehrere Editor's Choice-Auszeichnungen, indem es bewies, dass Notiz-Apps sowohl leistungsstark als auch schön sein können.
Wichtige Errungenschaften: - Markdown für Nicht-Entwickler zugänglich gemacht - Verschachtelte Tags als flexible Alternative zu Ordnern erfunden - 28+ Themes für verschiedene Schreibkontexte erstellt - OLED-spezifische Themes (Dieci) für echtes Schwarz entwickelt - Keine Ladezustände: Inhalte sind immer bereit
Grundlegende Design-Philosophie
Das Anti-Reibungs-Prinzip
Bear entfernt jedes Hindernis zwischen Gedanke und Text:
REIBUNGSMUSTER (Andere Apps) BEARS ANSATZ
───────────────────────────────────────────────────────────────────
Ordner-Dialoge vor dem Erstellen Einfach lostippen
Format-Toolbars blockieren Sicht Markdown inline, unsichtbar
Sync-Spinner unterbrechen Flow Hintergrund-Sync, keine Anzeigen
Einstellungen verstreut in Menüs Typografie immer griffbereit
Farbauswahl für Hervorhebungen Themes ändern alles auf einmal
Wichtige Erkenntnis: Jedes UI-Element ist eine potenzielle Unterbrechung. Entferne so viele wie möglich.
Pattern-Bibliothek
1. Unbegrenzt verschachtelte Tags
Bears Tag-System ersetzt starre Ordnerhierarchien durch flexible, inline Organisation.
Traditionelle Ordner vs Bear Tags:
ORDNER-ANSATZ BEARS TAG-ANSATZ
───────────────────────────────────────────────────────────────────
📁 Work Notiz enthält: #work/meetings
├── 📁 Meetings Notiz enthält: #work/meetings/q1
│ ├── 📁 Q1
│ │ └── standup-2025-01.md Eine Notiz kann MEHRERE Tags haben:
│ └── 📁 Q2 #work/meetings #action-items #q1
└── 📁 Projects
Einzelner Speicherort Mehrere Speicherorte (virtuell)
Verschieben = Dateioperation Tag = einfach eintippen
Sichtbar im Dateibrowser Sichtbar in Seitenleiste + Notiztext
Tag-Syntax:
Einzelner Tag: #ideas
Verschachtelter Tag: #work/meetings/2025
Tiefe Verschachtelung: #journal/2025/01/17
Seitenleisten-Ergebnis:
├─ 📁 work
│ └─ 📁 meetings
│ └─ 📄 2025
├─ 📁 journal
│ └─ 📁 2025
│ └─ 📁 01
│ └─ 📄 17
Wichtige Erkenntnis: Tags werden inline getippt, nicht aus Menüs ausgewählt. Der Akt des Schreibens erzeugt die Organisation.
2. Typografie-Steuerungssystem
Bear bietet granulare Typografie-Einstellungen, die andere Notiz-Apps verstecken:
┌─ Typografie-Einstellungen ─────────────────────────────────────────┐
│ │
│ Schriftart │
│ [Avenir Next ▼] ← Systemschriften + eigene Schriften │
│ │
│ Größe │
│ [─────●────────] 16pt │
│ │
│ Zeilenhöhe │
│ [────────●─────] 1.6 │
│ │
│ Zeilenbreite │
│ [──●───────────] Schmal ← Optimale Lesebreite │
│ │
│ Absatzabstand │
│ [─────●────────] Mittel │
│ │
└────────────────────────────────────────────────────────────────────┘
Swift-Implementierungsansatz:
struct TypographySettings: Codable {
var fontName: String = "Avenir Next"
var fontSize: CGFloat = 16
var lineHeightMultiple: CGFloat = 1.6
var lineWidth: LineWidth = .comfortable
var paragraphSpacing: CGFloat = 12
enum LineWidth: String, Codable {
case narrow = "narrow" // ~60 characters
case comfortable = "medium" // ~75 characters
case wide = "wide" // Full width
}
}
// Applied to editor
func applyTypography(_ settings: TypographySettings, to textView: UITextView) {
let style = NSMutableParagraphStyle()
style.lineHeightMultiple = settings.lineHeightMultiple
style.paragraphSpacing = settings.paragraphSpacing
let attributes: [NSAttributedString.Key: Any] = [
.font: UIFont(name: settings.fontName, size: settings.fontSize)!,
.paragraphStyle: style
]
textView.typingAttributes = attributes
}
3. Theme-System
Bears Themes wirken sich auf alles gleichzeitig aus – keine stückweise Farbauswahl.
Theme-Struktur:
struct BearTheme {
// Background layers
let sidebarBackground: Color
let noteListBackground: Color
let editorBackground: Color
// Text hierarchy
let textPrimary: Color
let textSecondary: Color
let textMuted: Color
// Semantic highlights
let tagColor: Color
let linkColor: Color
let codeBackground: Color
let headingColor: Color
// Selection and focus
let selectionColor: Color
let cursorColor: Color
}
// Example: Red Graphite (default light theme)
let redGraphite = BearTheme(
sidebarBackground: Color(hex: "#F7F7F7"),
noteListBackground: Color(hex: "#FFFFFF"),
editorBackground: Color(hex: "#FFFFFF"),
textPrimary: Color(hex: "#333333"),
textSecondary: Color(hex: "#888888"),
textMuted: Color(hex: "#BBBBBB"),
tagColor: Color(hex: "#D14C3E"), // The signature red
linkColor: Color(hex: "#B44B41"),
codeBackground: Color(hex: "#F5F5F5"),
headingColor: Color(hex: "#333333"),
selectionColor: Color(hex: "#FFE4E1"),
cursorColor: Color(hex: "#D14C3E")
)
// Example: Dieci (OLED-optimized)
let dieci = BearTheme(
sidebarBackground: Color(hex: "#000000"), // True black
noteListBackground: Color(hex: "#000000"), // True black
editorBackground: Color(hex: "#000000"), // True black
textPrimary: Color(hex: "#FFFFFF"),
textSecondary: Color(hex: "#888888"),
textMuted: Color(hex: "#555555"),
tagColor: Color(hex: "#FF9500"),
linkColor: Color(hex: "#FF9500"),
codeBackground: Color(hex: "#1C1C1C"),
headingColor: Color(hex: "#FFFFFF"),
selectionColor: Color(hex: "#3A3A3C"),
cursorColor: Color(hex: "#FF9500")
)
Theme-Kategorien: - Helle Themes: Red Graphite, High Contrast, Solarized Light - Dunkle Themes: Dark Graphite, Dracula, Nord - OLED-Themes: Dieci, Charcoal (echtes Schwarz für Akkuschonung) - Spezial-Themes: Shibuya Jazz, Everforest (stimmungsspezifisch)
4. Fokusmodus
Bears Fokusmodus entfernt alles außer den Wörtern – selbst der Cursor ist dezent.
NORMALER MODUS
┌────────┬────────────┬───────────────────────────────────────────┐
│ │ │ │
│Sidebar │ Notizliste │ Editor │
│ │ │ │
│ #work │ Meeting │ # Meeting-Notizen │
│ #ideas │ Ideen │ │
│ #books │ Entwurf │ Heute haben wir besprochen... │
│ │ │ │
└────────┴────────────┴───────────────────────────────────────────┘
FOKUSMODUS (Tastenkürzel oder Wischgeste)
┌─────────────────────────────────────────────────────────────────┐
│ │
│ │
│ # Meeting-Notizen │
│ │
│ Heute haben wir besprochen... │
│ │
│ │
│ │
└─────────────────────────────────────────────────────────────────┘
Alles verschwindet. Nur die Wörter bleiben.
Implementierungsprinzipien: - Eine einzelne Geste oder ein Tastenkürzel löst den Modus aus - Die Animation ist schnell (keine verzögerten Übergänge) - Der Cursor blinkt dezent und fordert keine Aufmerksamkeit - Ränder schaffen Freiraum um den Text
5. TagCons (visuelle Tag-Icons)
Bear weist gängigen Tags automatisch Icons zu und macht die Sidebar so leicht überschaubar.
Sidebar mit TagCons:
├─ 💡 ideas
├─ 📚 books
├─ ✏️ writing
├─ 📝 journal
├─ 🏃 fitness
├─ 💼 work
│ ├─ 📅 meetings
│ └─ 📋 projects
└─ 🎯 goals
Icon-Zuweisungslogik:
enum TagConCategory {
static let mappings: [String: String] = [
"ideas": "💡",
"books": "📚",
"reading": "📖",
"writing": "✏️",
"journal": "📝",
"diary": "📓",
"work": "💼",
"meetings": "📅",
"projects": "📋",
"goals": "🎯",
"fitness": "🏃",
"health": "❤️",
"recipes": "🍳",
"travel": "✈️",
"music": "🎵",
"code": "💻",
]
static func icon(for tag: String) -> String? {
let normalized = tag.lowercased()
return mappings[normalized]
}
}
Zentrale Erkenntnis: Icons werden automatisch zugewiesen, sind aber anpassbar. Intelligente Standardwerte reduzieren den Einrichtungsaufwand.
Visuelles Designsystem
Farbpalette (Red Graphite Theme)
extension Color {
// Signature accent
static let bearRed = Color(hex: "#D14C3E")
// Backgrounds
static let sidebarBg = Color(hex: "#F7F7F7")
static let editorBg = Color(hex: "#FFFFFF")
// Text
static let textPrimary = Color(hex: "#333333")
static let textSecondary = Color(hex: "#888888")
// Code blocks
static let codeBg = Color(hex: "#F5F5F5")
static let codeText = Color(hex: "#333333")
}
Typografie
struct BearTypography {
// Editor fonts
static let bodyFont = Font.custom("Avenir Next", size: 16)
static let headingFont = Font.custom("Avenir Next", size: 24).weight(.semibold)
static let monoFont = Font.custom("SF Mono", size: 14)
// Line heights
static let bodyLineHeight: CGFloat = 1.6
static let headingLineHeight: CGFloat = 1.3
// Optimal reading width
static let maxLineWidth: CGFloat = 680 // ~75 characters
}
Animationsphilosophie
Keine Ladezustände
Bears zentrales Animationsprinzip: Inhalte sind immer verfügbar.
// Anti-pattern: Loading spinner
struct LoadingNote: View {
var body: some View {
ProgressView() // Bear NEVER does this
}
}
// Bear's approach: Optimistic, instant
struct NoteEditor: View {
@State private var note: Note
var body: some View {
TextEditor(text: $note.content)
.onAppear {
// Content already available from local cache
// Sync happens invisibly in background
}
}
}
Flüssige Panel-Übergänge
// Sidebar collapse/expand
withAnimation(.spring(response: 0.3, dampingFraction: 0.8)) {
sidebarVisible.toggle()
}
// Focus mode transition
withAnimation(.easeInOut(duration: 0.2)) {
focusMode = true
}
Markdown-Erlebnis
Live-Vorschau (Inline-Styling)
Bear rendert Markdown während des Tippens. Keine geteilte Ansicht nötig.
Was du tippst: Was du siehst:
───────────────────────────────────────────────────────
# Heading Heading (groß, fett)
**bold text** bold text (gestylt, ** ausgeblendet)
- list item • list item (Aufzählungszeichen gerendert)
`code` code (Monospace, hervorgehoben)
[link](url) link (gestylt, URL ausgeblendet)
Implementierungskonzept:
class MarkdownTextStorage: NSTextStorage {
private var backingStore = NSMutableAttributedString()
override func replaceCharacters(in range: NSRange, with str: String) {
beginEditing()
backingStore.replaceCharacters(in: range, with: str)
edited(.editedCharacters, range: range, changeInLength: str.count - range.length)
endEditing()
}
override func processEditing() {
super.processEditing()
applyMarkdownStyling()
}
private func applyMarkdownStyling() {
// Apply styles based on Markdown patterns
// Hide syntax characters (**, `, #, etc.)
// Render inline while preserving plain text source
}
}
Erkenntnisse für unsere Arbeit
1. Keine Ladezustände
Wenn Inhalte lokal existieren, zeige sie sofort an. Synchronisiere im Hintergrund.
2. Tags > Ordner
Inline-Tagging während des Schreibens ist schneller als nachträgliche Ordnerverwaltung.
3. Typografie ist UX
Nutzern Kontrolle über Schriftart, Größe, Zeilenhöhe und Breite zu geben, zeigt Respekt für das Leseerlebnis.
4. Alles auf einmal thematisieren
Zwinge Nutzer nicht, 12 Farben auszuwählen. Kuratiere vollständige Themes.
5. Fokusmodus als Notausstieg
Wenn ablenkungsfrei nicht ablenkungsfrei genug ist, entfernt eine einzelne Geste alles.
Häufig gestellte Fragen
Wie funktionieren Bears verschachtelte Tags?
Tippe #parent/child/grandchild irgendwo in einer Notiz. Bear erstellt automatisch die Hierarchie in der Seitenleiste. Anders als bei Ordnern kann eine Notiz mehrere Tags haben und sich damit an mehreren „Orten" gleichzeitig befinden. Tags werden durch Eintippen erstellt, nicht durch Menünavigation.
Warum verwendet Bear Themes statt individueller Farbeinstellungen?
Themes gewährleisten visuelle Kohärenz. Wenn Nutzer Farben einzeln auswählen, erstellen sie oft Kombinationen mit schlechtem Kontrast oder unharmonischen Tönen. Bears über 28 kuratierte Themes garantieren lesbare, ästhetisch konsistente Farbschemata für alle UI-Elemente.
Was unterscheidet Bears Markdown von anderen Editoren?
Bear rendert Markdown inline während des Tippens. Syntaxzeichen (**, #, Backticks) werden nach der Eingabe ausgeblendet und zeigen nur das gestylte Ergebnis. Du siehst das endgültige Erscheinungsbild beim Bearbeiten, ohne separaten Vorschaubereich.
Wie erreicht Bear null Ladezustände?
Bear speichert alle Inhalte lokal und lädt sofort aus dem Cache. Die iCloud-Synchronisation erfolgt im Hintergrund ohne Spinner oder Fortschrittsanzeigen. Wenn du Bear offline öffnest, funktioniert alles. Die Synchronisation wird stillschweigend abgeschlossen, sobald die Verbindung wiederhergestellt ist.
Kann ich meine Bear-Notizen in andere Formate exportieren?
Bear exportiert nach Markdown, PDF, HTML, DOCX und Klartext. Notizen behalten ihre Markdown-Quelle, sodass du Eigentümer deiner Daten bist. Das Tag-System wird je nach Format als Frontmatter oder Dateistruktur exportiert.