Bear: Écriture Typographique Prioritaire
Comment le design typographie d'abord de Bear a remporté les Apple Design Awards : tags imbriqués, système de thèmes, mode focus et Markdown en ligne. Avec des patterns d'implémentation Swift.
Bear : L'écriture centrée sur la typographie
« Avec Bear, vous aurez l'impression d'utiliser à nouveau un véritable ordinateur Apple. Pas de spinners, pas d'écrans de chargement squelette, pas de messages toast. Seulement des animations fluides et un contenu toujours prêt à l'action. »
Bear est une leçon magistrale de design sans distraction. Chaque décision, de la typographie au système de tags, est au service des écrivains qui veulent penser, pas gérer.
Points clés
- Zéro état de chargement - Le contenu est toujours prêt ; la synchronisation se fait invisiblement en arrière-plan
- Les tags remplacent les dossiers - Les
#tagsinline pendant l'écriture surpassent la gestion de dossiers après coup, et les notes peuvent exister à plusieurs endroits - Les contrôles typographiques respectent les lecteurs - Les réglages de police, taille, hauteur de ligne et largeur permettent aux utilisateurs d'optimiser pour leurs yeux
- Thématiser tout en une fois - Plus de 28 thèmes soignés surpassent les sélecteurs de couleurs fragmentés
- Le mode focus comme échappatoire - Quand le sans-distraction doit aller plus loin, un seul geste supprime tout
Pourquoi Bear compte
Bear a remporté l'Apple Design Award 2017 et plusieurs prix Editor's Choice en prouvant que les applications de notes peuvent être à la fois puissantes et belles.
Réalisations clés : - A rendu le Markdown accessible aux non-développeurs - A inventé les tags imbriqués comme alternative flexible aux dossiers - A créé plus de 28 thèmes pour différents contextes d'écriture - A conçu des thèmes spécifiques OLED (Dieci) pour un noir véritable - Zéro état de chargement : le contenu est toujours prêt
Philosophie de design fondamentale
Le principe anti-friction
Bear supprime chaque obstacle entre la pensée et le texte :
PATTERNS DE FRICTION (Autres apps) APPROCHE DE BEAR
───────────────────────────────────────────────────────────────────
Dialogues de dossiers avant création Commencez simplement à écrire
Barres d'outils de format bloquantes Markdown inline, invisible
Spinners de sync interrompant le flux Sync en arrière-plan, sans indicateurs
Paramètres dispersés dans les menus Typographie toujours accessible
Sélecteurs de couleur pour surligner Les thèmes changent tout en une fois
Insight clé : Chaque élément d'interface est une interruption potentielle. En supprimer autant que possible.
Bibliothèque de patterns
1. Tags imbriqués à l'infini
Le système de tags de Bear remplace les hiérarchies de dossiers rigides par une organisation flexible et inline.
Dossiers traditionnels vs tags Bear :
APPROCHE DOSSIERS APPROCHE TAGS DE BEAR
───────────────────────────────────────────────────────────────────
📁 Work La note contient : #work/meetings
├── 📁 Meetings La note contient : #work/meetings/q1
│ ├── 📁 Q1
│ │ └── standup-2025-01.md Une note peut avoir PLUSIEURS tags :
│ └── 📁 Q2 #work/meetings #action-items #q1
└── 📁 Projects
Emplacement unique Emplacements multiples (virtuels)
Déplacer = opération fichier Tag = il suffit de le taper
Visible dans l'explorateur Visible dans la sidebar + corps de note
Syntaxe des tags :
Tag simple : #ideas
Tag imbriqué : #work/meetings/2025
Imbrication profonde : #journal/2025/01/17
Résultat dans la sidebar :
├─ 📁 work
│ └─ 📁 meetings
│ └─ 📄 2025
├─ 📁 journal
│ └─ 📁 2025
│ └─ 📁 01
│ └─ 📄 17
Insight clé : Les tags sont tapés inline, pas sélectionnés dans des menus. L'acte d'écrire crée l'organisation.
2. Système de contrôle typographique
Bear fournit des contrôles typographiques granulaires que les autres applications de notes cachent :
┌─ Paramètres typographiques ────────────────────────────────────────┐
│ │
│ Police │
│ [Avenir Next ▼] ← Polices système + polices personnalisées│
│ │
│ Taille │
│ [─────●────────] 16pt │
│ │
│ Hauteur de ligne │
│ [────────●─────] 1.6 │
│ │
│ Largeur de ligne │
│ [──●───────────] Étroite ← Largeur de lecture optimale │
│ │
│ Espacement des paragraphes │
│ [─────●────────] Moyen │
│ │
└────────────────────────────────────────────────────────────────────┘
Approche d'implémentation Swift :
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 caractères
case comfortable = "medium" // ~75 caractères
case wide = "wide" // Pleine largeur
}
}
// Appliqué à l'éditeur
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. Système de thèmes
Les thèmes de Bear affectent tout en une fois — pas de sélection de couleurs fragmentée.
Structure d'un thème :
struct BearTheme {
// Couches d'arrière-plan
let sidebarBackground: Color
let noteListBackground: Color
let editorBackground: Color
// Hiérarchie du texte
let textPrimary: Color
let textSecondary: Color
let textMuted: Color
// Surlignages sémantiques
let tagColor: Color
let linkColor: Color
let codeBackground: Color
let headingColor: Color
// Sélection et 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")
)
Catégories de thèmes : - Thèmes clairs : Red Graphite, High Contrast, Solarized Light - Thèmes sombres : Dark Graphite, Dracula, Nord - Thèmes OLED : Dieci, Charcoal (noir pur pour économiser la batterie) - Spéciaux : Shibuya Jazz, Everforest (adaptés à l'ambiance)
4. Mode Concentration
Le mode concentration de Bear supprime tout sauf les mots — même le curseur est discret.
MODE NORMAL
┌────────┬────────────┬───────────────────────────────────────────┐
│ │ │ │
│Barre │ Liste des │ Éditeur │
│latérale│ notes │ │
│ │ │ │
│ #work │ Réunion │ # Notes de réunion │
│ #ideas │ Idées │ │
│ #books │ Brouillon │ Aujourd'hui nous avons discuté... │
│ │ │ │
└────────┴────────────┴───────────────────────────────────────────┘
MODE CONCENTRATION (raccourci clavier ou balayage)
┌─────────────────────────────────────────────────────────────────┐
│ │
│ │
│ # Notes de réunion │
│ │
│ Aujourd'hui nous avons discuté... │
│ │
│ │
│ │
└─────────────────────────────────────────────────────────────────┘
Tout disparaît. Seuls les mots restent.
Principes d'implémentation : - Activation par un seul geste ou raccourci - Animation rapide (pas de transitions qui traînent) - Le curseur clignote subtilement, sans attirer l'attention - Les marges offrent de l'espace autour du texte
5. TagCons (Icônes visuelles des tags)
Bear attribue automatiquement des icônes aux tags courants, rendant la barre latérale facilement scannable.
Barre latérale avec TagCons :
├─ 💡 ideas
├─ 📚 books
├─ ✏️ writing
├─ 📝 journal
├─ 🏃 fitness
├─ 💼 work
│ ├─ 📅 meetings
│ └─ 📋 projects
└─ 🎯 goals
Logique d'attribution des icônes :
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]
}
}
Point clé : Les icônes sont attribuées automatiquement mais personnalisables. Les valeurs par défaut intelligentes réduisent les frictions de configuration.
Système de design visuel
Palette de couleurs (Thème Red Graphite)
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")
}
Typographie
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
}
Philosophie d'animation
Pas d'états de chargement
Le principe d'animation clé de Bear : le contenu est toujours prêt.
// 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
}
}
}
Transitions de panneaux fluides
// Sidebar collapse/expand
withAnimation(.spring(response: 0.3, dampingFraction: 0.8)) {
sidebarVisible.toggle()
}
// Focus mode transition
withAnimation(.easeInOut(duration: 0.2)) {
focusMode = true
}
Expérience Markdown
Prévisualisation en direct (stylisation en ligne)
Bear affiche le Markdown au fur et à mesure que vous tapez. Pas besoin de vue partagée.
What you type: What you see:
───────────────────────────────────────────────────────
# Heading Heading (large, bold)
**bold text** bold text (styled, ** hidden)
- list item • list item (bullet rendered)
`code` code (monospace, highlighted)
[link](url) link (styled, URL hidden)
Concept d'implémentation :
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
}
}
Leçons pour notre travail
1. Zéro état de chargement
Si le contenu existe localement, affichez-le instantanément. Synchronisez en arrière-plan.
2. Tags > Dossiers
Le tagging en ligne pendant l'écriture est plus rapide que la gestion des dossiers après coup.
3. La typographie, c'est l'UX
Donner aux utilisateurs le contrôle sur la police, la taille, l'interligne et la largeur témoigne du respect pour la lecture.
4. Thématiser tout d'un coup
Ne faites pas choisir 12 couleurs aux utilisateurs. Proposez des thèmes complets et soignés.
5. Le mode focus comme échappatoire
Quand le mode sans distraction n'est pas assez sans distraction, un seul geste supprime tout.
Questions fréquemment posées
Comment fonctionnent les tags imbriqués de Bear ?
Tapez #parent/enfant/petit-enfant n'importe où dans une note. Bear crée automatiquement la hiérarchie dans la barre latérale. Contrairement aux dossiers, une note peut avoir plusieurs tags, la plaçant dans plusieurs « emplacements » simultanément. Les tags sont créés en les tapant, pas en naviguant dans des menus.
Pourquoi Bear utilise-t-il des thèmes au lieu de paramètres de couleur individuels ?
Les thèmes assurent la cohérence visuelle. Quand les utilisateurs choisissent les couleurs individuellement, ils créent souvent des combinaisons avec un mauvais contraste ou des tons qui s'entrechoquent. Les 28+ thèmes soigneusement conçus de Bear garantissent des palettes de couleurs lisibles et esthétiquement cohérentes sur tous les éléments de l'interface.
Qu'est-ce qui distingue le Markdown de Bear des autres éditeurs ?
Bear affiche le Markdown en ligne au fur et à mesure que vous tapez. Les caractères de syntaxe (**, #, backticks) se masquent après que vous les avez tapés, ne montrant que le résultat stylisé. Vous voyez l'apparence finale pendant l'édition, sans panneau de prévisualisation séparé.
Comment Bear atteint-il zéro état de chargement ?
Bear stocke tout le contenu localement et le charge instantanément depuis le cache. La synchronisation iCloud se fait en arrière-plan sans spinners ni indicateurs de progression. Si vous ouvrez Bear hors ligne, tout fonctionne. La synchronisation se termine silencieusement quand la connexion revient.
Puis-je exporter mes notes Bear vers d'autres formats ?
Bear exporte vers Markdown, PDF, HTML, DOCX et texte brut. Les notes conservent leur source Markdown, donc vous êtes propriétaire de vos données. Le système de tags s'exporte en frontmatter ou en structure de fichiers selon le format.