Nagłówek Nagłówek (duży, pogrubiony)
Bear: Pisanie z typografią na pierwszym miejscu
„Z Bear poczujesz się, jakbyś znowu używał komputera Apple. Żadnych spinnerów, żadnych ekranów ładowania szkieletowego, żadnych powiadomień toast. Tylko płynne animacje i zawsze gotowa do działania treść."
Bear to mistrzowska lekcja projektowania wolnego od rozpraszaczy. Każda decyzja, od typografii po systemy tagów, służy pisarzom, którzy chcą myśleć, a nie zarządzać.
Kluczowe wnioski
- Zero stanów ładowania - Treść jest zawsze gotowa; synchronizacja odbywa się niewidocznie w tle
- Tagi zastępują foldery - Wbudowane
#tagipodczas pisania są lepsze niż późniejsze zarządzanie folderami, a notatki mogą znajdować się w wielu miejscach - Kontrola typografii szanuje czytelników - Ustawienia czcionki, rozmiaru, wysokości linii i szerokości pozwalają użytkownikom optymalizować dla swoich oczu
- Zmień motyw całkowicie naraz - 28+ wyselekcjonowanych motywów jest lepsze niż fragmentaryczne wybieranie kolorów
- Tryb skupienia jako wyjście awaryjne - Gdy tryb bez rozpraszaczy musi pójść dalej, jeden gest usuwa wszystko
Dlaczego Bear ma znaczenie
Bear zdobył Apple Design Award 2017 i wiele nagród Editor's Choice, udowadniając, że aplikacje do notatek mogą być zarówno potężne, jak i piękne.
Kluczowe osiągnięcia: - Uczynił Markdown dostępnym dla osób niebędących programistami - Wynalazł zagnieżdżone tagi jako elastyczną alternatywę dla folderów - Stworzył 28+ motywów do różnych kontekstów pisania - Zaprojektował motywy specyficzne dla OLED (Dieci) dla prawdziwej czerni - Zero stanów ładowania: treść jest zawsze gotowa
Podstawowa filozofia projektowania
Zasada anty-tarcia
Bear usuwa każdą przeszkodę między myślą a tekstem:
WZORCE TARCIA (Inne aplikacje) PODEJŚCIE BEAR
───────────────────────────────────────────────────────────────────
Dialogi folderów przed tworzeniem Po prostu zacznij pisać
Paski formatowania blokujące widok Markdown inline, niewidoczny
Spinnery synchronizacji przerywające Synchronizacja w tle, bez wskaźników
Ustawienia rozproszone w menu Typografia zawsze pod ręką
Wybieraki kolorów do podświetlania Motywy zmieniają wszystko naraz
Kluczowy wniosek: Każdy element UI to potencjalna przerwa. Usuń ich jak najwięcej.
Biblioteka wzorców
1. Nieskończone zagnieżdżone tagi
System tagów Bear zastępuje sztywne hierarchie folderów elastyczną, wbudowaną organizacją.
Tradycyjne foldery vs tagi Bear:
PODEJŚCIE FOLDEROWE PODEJŚCIE TAGÓW BEAR
───────────────────────────────────────────────────────────────────
📁 Praca Notatka zawiera: #praca/spotkania
├── 📁 Spotkania Notatka zawiera: #praca/spotkania/q1
│ ├── 📁 Q1
│ │ └── standup-2025-01.md Jedna notatka może mieć WIELE tagów:
│ └── 📁 Q2 #praca/spotkania #do-zrobienia #q1
└── 📁 Projekty
Pojedyncza lokalizacja Wiele lokalizacji (wirtualnych)
Przeniesienie = operacja plikowa Tag = po prostu go wpisz
Widoczne w przeglądarce plików Widoczne w pasku bocznym + treści notatki
Składnia tagów:
Pojedynczy tag: #pomysły
Zagnieżdżony: #praca/spotkania/2025
Głębokie: #dziennik/2025/01/17
Wynik w pasku bocznym:
├─ 📁 praca
│ └─ 📁 spotkania
│ └─ 📄 2025
├─ 📁 dziennik
│ └─ 📁 2025
│ └─ 📁 01
│ └─ 📄 17
Kluczowy wniosek: Tagi wpisuje się inline, nie wybiera z menu. Akt pisania tworzy organizację.
2. System kontroli typografii
Bear zapewnia szczegółowe kontrole typografii, które inne aplikacje do notatek ukrywają:
┌─ Ustawienia typografii ────────────────────────────────────────────┐
│ │
│ Czcionka │
│ [Avenir Next ▼] ← Czcionki systemowe + niestandardowe │
│ │
│ Rozmiar │
│ [─────●────────] 16pt │
│ │
│ Wysokość linii │
│ [────────●─────] 1.6 │
│ │
│ Szerokość linii │
│ [──●───────────] Wąska ← Optymalna szerokość czytania │
│ │
│ Odstęp między akapitami │
│ [─────●────────] Średni │
│ │
└────────────────────────────────────────────────────────────────────┘
Podejście implementacji w 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 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. System motywów
Motywy Bear wpływają na wszystko naraz — bez fragmentarycznego wybierania kolorów.
Struktura motywu:
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")
)
Kategorie motywów: - Jasne motywy: Red Graphite, High Contrast, Solarized Light - Ciemne motywy: Dark Graphite, Dracula, Nord - Motywy OLED: Dieci, Charcoal (prawdziwa czerń dla oszczędzania baterii) - Specjalne: Shibuya Jazz, Everforest (specyficzne dla nastroju)
4. Tryb skupienia
Tryb skupienia Bear usuwa wszystko oprócz słów — nawet kursor jest subtelny.
TRYB NORMALNY
┌────────┬────────────┬───────────────────────────────────────────┐
│ │ │ │
│Pasek │ Lista │ Edytor │
│boczny │ notatek │ │
│ │ │ │
│ #praca │ Spotkanie │ # Notatki ze spotkania │
│ #pomysły│ Pomysły │ │
│ #książki│ Szkic │ Dziś rozmawialiśmy o... │
│ │ │ │
└────────┴────────────┴───────────────────────────────────────────┘
TRYB SKUPIENIA (skrót klawiszowy lub przesunięcie)
┌─────────────────────────────────────────────────────────────────┐
│ │
│ │
│ # Notatki ze spotkania │
│ │
│ Dziś rozmawialiśmy o... │
│ │
│ │
│ │
└─────────────────────────────────────────────────────────────────┘
Wszystko znika. Pozostają tylko słowa.
Zasady implementacji: - Pojedynczy gest lub skrót uruchamia tryb - Animacja jest szybka (bez przewlekłych przejść) - Kursor miga subtelnie, nie domaga się uwagi - Marginesy zapewniają przestrzeń oddechową wokół tekstu
5. TagCons (wizualne ikony tagów)
Bear automatycznie przypisuje ikony do popularnych tagów, czyniąc pasek boczny łatwym do przeglądania.
Pasek boczny z TagCons:
├─ 💡 pomysły
├─ 📚 książki
├─ ✏️ pisanie
├─ 📝 dziennik
├─ 🏃 fitness
├─ 💼 praca
│ ├─ 📅 spotkania
│ └─ 📋 projekty
└─ 🎯 cele
Logika przypisywania ikon:
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]
}
}
Kluczowy wniosek: Ikony są przypisywane automatycznie, ale można je dostosować. Inteligentne wartości domyślne zmniejszają tarcie konfiguracji.
System projektowania wizualnego
Paleta kolorów (motyw 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")
}
Typografia
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
}
Filozofia animacji
Brak stanów ładowania
Kluczowa zasada animacji Bear: treść jest zawsze gotowa.
// 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
}
}
}
Płynne przejścia paneli
// Sidebar collapse/expand
withAnimation(.spring(response: 0.3, dampingFraction: 0.8)) {
sidebarVisible.toggle()
}
// Focus mode transition
withAnimation(.easeInOut(duration: 0.2)) {
focusMode = true
}
Doświadczenie Markdown
Podgląd na żywo (stylizacja inline)
Bear renderuje Markdown podczas pisania. Nie potrzeba podzielonego widoku.
Co wpisujesz: Co widzisz:
───────────────────────────────────────────────────────
# Nagłówek Nagłówek (duży, pogrubiony)
**pogrubiony tekst** pogrubiony tekst (stylizowany, ** ukryte)
- element listy • element listy (punktor renderowany)
`kod` kod (monospace, podświetlony)
[link](url) link (stylizowany, URL ukryty)
Koncepcja implementacji:
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
}
}
Lekcje dla naszej pracy
1. Zero stanów ładowania
Jeśli treść istnieje lokalnie, pokaż ją natychmiast. Synchronizuj w tle.
2. Tagi > Foldery
Tagowanie inline podczas pisania jest szybsze niż późniejsze zarządzanie folderami.
3. Typografia to UX
Danie użytkownikom kontroli nad czcionką, rozmiarem, wysokością linii i szerokością pokazuje szacunek dla czytania.
4. Zmień motyw całkowicie naraz
Nie zmuszaj użytkowników do wybierania 12 kolorów. Wyselekcjonuj kompletne motywy.
5. Tryb skupienia jako wyjście awaryjne
Gdy tryb bez rozpraszaczy nie jest wystarczająco wolny od rozpraszaczy, jeden gest usuwa wszystko.
Często zadawane pytania
Jak działają zagnieżdżone tagi Bear?
Wpisz #rodzic/dziecko/wnuk gdziekolwiek w notatce. Bear automatycznie tworzy hierarchię w pasku bocznym. W przeciwieństwie do folderów, notatka może mieć wiele tagów, umieszczając ją w wielu „lokalizacjach" jednocześnie. Tagi tworzy się przez ich wpisywanie, nie przez nawigację po menu.
Dlaczego Bear używa motywów zamiast indywidualnych ustawień kolorów?
Motywy zapewniają spójność wizualną. Gdy użytkownicy wybierają kolory indywidualnie, często tworzą kombinacje ze słabym kontrastem lub kolidującymi tonami. 28+ wyselekcjonowanych motywów Bear gwarantuje czytelne, estetycznie spójne schematy kolorów we wszystkich elementach UI.
Co wyróżnia Markdown Bear od innych edytorów?
Bear renderuje Markdown inline podczas pisania. Znaki składni (**, #, backticki) ukrywają się po ich wpisaniu, pokazując tylko stylizowany rezultat. Widzisz ostateczny wygląd podczas edycji, bez osobnego panelu podglądu.
Jak Bear osiąga zero stanów ładowania?
Bear przechowuje całą treść lokalnie i ładuje z cache natychmiast. Synchronizacja iCloud odbywa się w tle bez spinnerów czy wskaźników postępu. Jeśli otworzysz Bear offline, wszystko działa. Synchronizacja kończy się cicho, gdy połączenie powróci.
Czy mogę eksportować notatki Bear do innych formatów?
Bear eksportuje do Markdown, PDF, HTML, DOCX i zwykłego tekstu. Notatki zachowują źródło Markdown, więc jesteś właścicielem swoich danych. System tagów eksportuje jako frontmatter lub strukturę plików w zależności od formatu.