Título Título (grande, negrito)
Bear: Escrita com Tipografia em Primeiro Lugar
“Com o Bear você vai sentir como se estivesse usando um computador Apple novamente. Sem spinners, sem telas de carregamento skeleton, sem mensagens toast. Apenas animações suaves e conteúdo sempre pronto para ação.”
O Bear é uma aula magistral em design livre de distrações. Cada decisão, da tipografia aos sistemas de tags, serve escritores que querem pensar, não gerenciar.
Principais Conclusões
- Zero estados de carregamento - O conteúdo está sempre pronto; a sincronização acontece invisivelmente em segundo plano
- Tags substituem pastas -
#tagsinline durante a escrita superam o gerenciamento de pastas depois, e notas podem existir em múltiplos lugares - Controles de tipografia respeitam os leitores - Controles de fonte, tamanho, altura de linha e largura permitem que usuários otimizem para seus olhos
- Tematize tudo de uma vez - Mais de 28 temas curados superam seletores de cores fragmentados
- Modo foco como válvula de escape - Quando livre de distrações precisa ir além, um gesto remove tudo
Por Que o Bear Importa
O Bear ganhou o Apple Design Award 2017 e múltiplos prêmios Editor's Choice ao provar que aplicativos de notas podem ser poderosos e bonitos ao mesmo tempo.
Principais conquistas: - Tornou o Markdown acessível para não-desenvolvedores - Inventou tags aninhadas como alternativa flexível às pastas - Criou mais de 28 temas para diferentes contextos de escrita - Projetou temas específicos para OLED (Dieci) para preto verdadeiro - Zero estados de carregamento: conteúdo está sempre pronto
Filosofia Central de Design
O Princípio Anti-Fricção
O Bear remove cada obstáculo entre o pensamento e o texto:
PADRÕES DE FRICÇÃO (Outros apps) ABORDAGEM DO BEAR
───────────────────────────────────────────────────────────────────
Diálogos de pasta antes de criar Apenas comece a digitar
Barras de formatação bloqueando Markdown inline, invisível
Spinners de sync interrompendo Sync em segundo plano, sem indicadores
Configurações espalhadas em menus Tipografia sempre ao alcance
Seletores de cor para destaque Temas mudam tudo de uma vez
Insight chave: Cada elemento de UI é uma potencial interrupção. Remova o máximo possível.
Biblioteca de Padrões
1. Tags Aninhadas Infinitas
O sistema de tags do Bear substitui hierarquias rígidas de pastas com organização flexível e inline.
Pastas tradicionais vs tags do Bear:
ABORDAGEM DE PASTAS ABORDAGEM DE TAGS DO BEAR
───────────────────────────────────────────────────────────────────
📁 Trabalho Nota contém: #trabalho/reunioes
├── 📁 Reuniões Nota contém: #trabalho/reunioes/t1
│ ├── 📁 T1
│ │ └── standup-2025-01.md Uma nota pode ter MÚLTIPLAS tags:
│ └── 📁 T2 #trabalho/reunioes #itens-acao #t1
└── 📁 Projetos
Localização única Múltiplas localizações (virtual)
Mover = operação de arquivo Tag = apenas digite
Visível no navegador de arquivos Visível na barra lateral + corpo da nota
Sintaxe de tags:
Tag única: #ideias
Tag aninhada: #trabalho/reunioes/2025
Aninhamento: #diario/2025/01/17
Resultado na barra lateral:
├─ 📁 trabalho
│ └─ 📁 reunioes
│ └─ 📄 2025
├─ 📁 diario
│ └─ 📁 2025
│ └─ 📁 01
│ └─ 📄 17
Insight chave: Tags são digitadas inline, não selecionadas em menus. O ato de escrever cria a organização.
2. Sistema de Controle Tipográfico
O Bear fornece controles tipográficos granulares que outros aplicativos de notas escondem:
┌─ Configurações de Tipografia ──────────────────────────────────────┐
│ │
│ Fonte │
│ [Avenir Next ▼] ← Fontes do sistema + fontes customizadas │
│ │
│ Tamanho │
│ [─────●────────] 16pt │
│ │
│ Altura de Linha │
│ [────────●─────] 1.6 │
│ │
│ Largura de Linha │
│ [──●───────────] Estreita ← Largura ideal de leitura │
│ │
│ Espaçamento de Parágrafo │
│ [─────●────────] Médio │
│ │
└────────────────────────────────────────────────────────────────────┘
Abordagem de implementação em 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 caracteres
case comfortable = "medium" // ~75 caracteres
case wide = "wide" // Largura total
}
}
// Aplicado ao 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. Sistema de Temas
Os temas do Bear afetam tudo de uma vez—sem seleção de cores fragmentada.
Estrutura do tema:
struct BearTheme {
// Camadas de fundo
let sidebarBackground: Color
let noteListBackground: Color
let editorBackground: Color
// Hierarquia de texto
let textPrimary: Color
let textSecondary: Color
let textMuted: Color
// Destaques semânticos
let tagColor: Color
let linkColor: Color
let codeBackground: Color
let headingColor: Color
// Seleção e foco
let selectionColor: Color
let cursorColor: Color
}
// Exemplo: Red Graphite (tema claro padrão)
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"), // O vermelho característico
linkColor: Color(hex: "#B44B41"),
codeBackground: Color(hex: "#F5F5F5"),
headingColor: Color(hex: "#333333"),
selectionColor: Color(hex: "#FFE4E1"),
cursorColor: Color(hex: "#D14C3E")
)
// Exemplo: Dieci (otimizado para OLED)
let dieci = BearTheme(
sidebarBackground: Color(hex: "#000000"), // Preto verdadeiro
noteListBackground: Color(hex: "#000000"), // Preto verdadeiro
editorBackground: Color(hex: "#000000"), // Preto verdadeiro
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")
)
Categorias de temas: - Temas claros: Red Graphite, High Contrast, Solarized Light - Temas escuros: Dark Graphite, Dracula, Nord - Temas OLED: Dieci, Charcoal (preto verdadeiro para economia de bateria) - Especiais: Shibuya Jazz, Everforest (específicos para humor)
4. Modo Foco
O modo foco do Bear remove tudo exceto as palavras—até o cursor é sutil.
MODO NORMAL
┌────────┬────────────┬───────────────────────────────────────────┐
│ │ │ │
│Barra │ Lista de │ Editor │
│Lateral │ Notas │ │
│ │ │ │
│ #trab │ Reunião │ # Notas da Reunião │
│ #ideia │ Ideias │ │
│ #livro │ Rascunho │ Hoje discutimos... │
│ │ │ │
└────────┴────────────┴───────────────────────────────────────────┘
MODO FOCO (atalho de teclado ou deslizar)
┌─────────────────────────────────────────────────────────────────┐
│ │
│ │
│ # Notas da Reunião │
│ │
│ Hoje discutimos... │
│ │
│ │
│ │
└─────────────────────────────────────────────────────────────────┘
Tudo desaparece. Apenas palavras permanecem.
Princípios de implementação: - Gesto único ou atalho aciona - Animação é rápida (sem transições demoradas) - Cursor pisca sutilmente, não exige atenção - Margens fornecem espaço ao redor do texto
5. TagCons (Ícones Visuais de Tags)
O Bear automaticamente atribui ícones a tags comuns, tornando a barra lateral escaneável.
Barra lateral com TagCons:
├─ 💡 ideias
├─ 📚 livros
├─ ✏️ escrita
├─ 📝 diário
├─ 🏃 fitness
├─ 💼 trabalho
│ ├─ 📅 reunioes
│ └─ 📋 projetos
└─ 🎯 metas
Lógica de atribuição de ícones:
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]
}
}
Insight chave: Ícones são atribuídos automaticamente mas personalizáveis. Padrões inteligentes reduzem fricção de configuração.
Sistema de Design Visual
Paleta de Cores (Tema Red Graphite)
extension Color {
// Destaque característico
static let bearRed = Color(hex: "#D14C3E")
// Fundos
static let sidebarBg = Color(hex: "#F7F7F7")
static let editorBg = Color(hex: "#FFFFFF")
// Texto
static let textPrimary = Color(hex: "#333333")
static let textSecondary = Color(hex: "#888888")
// Blocos de código
static let codeBg = Color(hex: "#F5F5F5")
static let codeText = Color(hex: "#333333")
}
Tipografia
struct BearTypography {
// Fontes do editor
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)
// Alturas de linha
static let bodyLineHeight: CGFloat = 1.6
static let headingLineHeight: CGFloat = 1.3
// Largura ideal de leitura
static let maxLineWidth: CGFloat = 680 // ~75 caracteres
}
Filosofia de Animação
Sem Estados de Carregamento
O princípio chave de animação do Bear: conteúdo está sempre pronto.
// Anti-padrão: Spinner de carregamento
struct LoadingNote: View {
var body: some View {
ProgressView() // Bear NUNCA faz isso
}
}
// Abordagem do Bear: Otimista, instantâneo
struct NoteEditor: View {
@State private var note: Note
var body: some View {
TextEditor(text: $note.content)
.onAppear {
// Conteúdo já disponível do cache local
// Sync acontece invisivelmente em segundo plano
}
}
}
Transições Suaves de Painéis
// Colapsar/expandir barra lateral
withAnimation(.spring(response: 0.3, dampingFraction: 0.8)) {
sidebarVisible.toggle()
}
// Transição do modo foco
withAnimation(.easeInOut(duration: 0.2)) {
focusMode = true
}
Experiência Markdown
Visualização ao Vivo (Estilização Inline)
O Bear renderiza Markdown enquanto você digita. Nenhuma visualização dividida necessária.
O que você digita: O que você vê:
───────────────────────────────────────────────────────
# Título Título (grande, negrito)
**texto em negrito** texto em negrito (estilizado, ** oculto)
- item de lista • item de lista (marcador renderizado)
`código` código (monoespaçado, destacado)
[link](url) link (estilizado, URL oculta)
Conceito de implementação:
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() {
// Aplica estilos baseados em padrões Markdown
// Oculta caracteres de sintaxe (**, `, #, etc.)
// Renderiza inline preservando a fonte em texto simples
}
}
Lições para Nosso Trabalho
1. Zero Estados de Carregamento
Se o conteúdo existe localmente, mostre instantaneamente. Sincronize em segundo plano.
2. Tags > Pastas
Marcação inline durante a escrita é mais rápida que gerenciamento de pastas depois.
3. Tipografia é UX
Dar aos usuários controle sobre fonte, tamanho, altura de linha e largura demonstra respeito pela leitura.
4. Tematize Tudo de Uma Vez
Não faça os usuários escolherem 12 cores. Selecione temas completos.
5. Modo Foco como Válvula de Escape
Quando livre de distrações não é livre de distrações o suficiente, um gesto remove tudo.
Perguntas Frequentes
Como funcionam as tags aninhadas do Bear?
Digite #pai/filho/neto em qualquer lugar de uma nota. O Bear automaticamente cria a hierarquia na barra lateral. Diferente de pastas, uma nota pode ter múltiplas tags, colocando-a em múltiplas "localizações" simultaneamente. Tags são criadas digitando-as, não navegando menus.
Por que o Bear usa temas em vez de configurações individuais de cor?
Temas garantem coerência visual. Quando usuários escolhem cores individualmente, frequentemente criam combinações com contraste ruim ou tons conflitantes. Os mais de 28 temas curados do Bear garantem esquemas de cores legíveis e esteticamente consistentes em todos os elementos da UI.
O que torna o Markdown do Bear diferente de outros editores?
O Bear renderiza Markdown inline enquanto você digita. Caracteres de sintaxe (**, #, crases) se ocultam depois que você os digita, mostrando apenas o resultado estilizado. Você vê a aparência final enquanto edita, sem um painel de visualização separado.
Como o Bear alcança zero estados de carregamento?
O Bear armazena todo conteúdo localmente e carrega do cache instantaneamente. A sincronização iCloud acontece em segundo plano sem spinners ou indicadores de progresso. Se você abrir o Bear offline, tudo funciona. A sincronização completa silenciosamente quando a conexão retorna.
Posso exportar minhas notas do Bear para outros formatos?
O Bear exporta para Markdown, PDF, HTML, DOCX e texto simples. As notas retêm sua fonte Markdown, então você é dono dos seus dados. O sistema de tags exporta como frontmatter ou estrutura de arquivos dependendo do formato.