Rechtecke mit abgerundeten Ecken sind überall

 (folklore.org)
1 Punkte von GN⁺ 2024-06-25 | 1 Kommentare | Auf WhatsApp teilen
  • Als QuickDraw für den Macintosh noch LisaGraf hieß, entwickelte Bill Atkinson eine schnelle Routine für Kreise und Ellipsen, und Steve Jobs wollte sie zu einer für die UI nützlicheren Form erweitern
  • Der 68000-Prozessor hatte damals keine Gleitkommaeinheit, und Multiplikation sowie Division waren ebenfalls langsam, daher entschied sich Bill für einen Ansatz, der Kreisberechnungen nur mit Addition und Subtraktion ausführte
  • Die Ellipsen-Demo war extrem schnell, aber Steve überzeugte Bill mit realen Beispielen im und außerhalb des Raums und sagte: „Rechtecke mit abgerundeten Ecken sind überall“
  • Bill hielt das zunächst für unnötig und schwierig, beschloss nach dem Anblick eines Schilds mit abgerundeten Ecken aber, den Implementierungsaufwand noch einmal zu prüfen
  • Die am nächsten Tag gezeigte Demo lief mit nahezu der Geschwindigkeit gewöhnlicher Rechtecke, und RoundRects wurden später zu einem unverzichtbaren grafischen Element der Macintosh-Oberfläche

Die Anforderung begann mit einer schnellen Ellipsen-Routine

  • Bill Atkinson arbeitete meist von zu Hause aus, fuhr aber immer dann zu den Texaco Towers, wo sich das Macintosh-Büro von Apple befand, wenn es nennenswerte Fortschritte zu zeigen gab
  • Ziel dieses Besuchs war die Vorführung der neu entwickelten oval routines, und QuickDraw hieß zu dieser Zeit noch LisaGraf
  • Bill hatte Code hinzugefügt, der Kreise und Ellipsen sehr schnell zeichnete, und zeigte, wie der Lisa-Bildschirm mit Ellipsen zufälliger Größe gefüllt wurde

Die Einschränkungen des 68000 und die Berechnungsmethode

  • Auf dem Macintosh war schnelles Zeichnen von Kreisen wegen der damaligen Hardwarebeschränkungen nicht einfach
    • Für Kreisberechnungen wird normalerweise die Quadratwurzel benötigt
    • Der 68000-Prozessor in Lisa und Macintosh unterstützte keine Gleitkommaoperationen
    • Auch Multiplikation und Division waren auf dem 68000 nicht besonders schnell
  • Bill verwendete deshalb einen Ansatz, der ohne Multiplikation oder Division auskam und nur Addition und Subtraktion nutzte
  • Der Kern war die Eigenschaft, dass die Summe aufeinanderfolgender ungerader Zahlen die nächste Quadratzahl ergibt
    • Beispiel: 1 + 3 = 4
    • Beispiel: 1 + 3 + 5 = 9
    • Beispiel: 1 + 3 + 5 + 7 = 16
  • Mit dieser Eigenschaft ließ sich in einer Schleife bis zu einem Schwellwert bestimmen, wann ein abhängiger Koordinatenwert erhöht werden musste, sodass QuickDraw Ellipsen sehr schnell zeichnen konnte

Steve Jobs’ Wunsch nach abgerundeten Rechtecken

  • Als Bills Demo deutlich schneller lief als erwartet, fragte Steve Jobs, ob sich damit nicht nur Kreise und Ellipsen, sondern auch Rechtecke mit abgerundeten Ecken zeichnen ließen
  • Bill antwortete, er wisse nicht, wie man das umsetzen solle, es wäre sehr schwierig und werde in der Praxis auch nicht benötigt
  • Steve sagte daraufhin: „Rechtecke mit abgerundeten Ecken sind überall“ und zeigte sofort auf Beispiele im Raum
    • Whiteboard
    • einige Schreibtische und Tische
  • Er fügte hinzu, dass es draußen vor dem Fenster fast überall noch mehr Beispiele gebe

Beispiele aus der realen Welt trieben die Implementierung voran

  • Steve überredete Bill zu einem kurzen Spaziergang um den Häuserblock und zeigte auf jedes auffällige Rechteck mit abgerundeten Ecken
  • Als die beiden an einem Parkverbotsschild mit abgerundeten Ecken vorbeikamen, änderte Bill seine Meinung
  • Bill ging nach Hause zurück und machte sich an die Arbeit, um zu prüfen, ob es wirklich so schwierig war, wie er gedacht hatte

RoundRects wurden zu einem Grundelement der UI

  • Am nächsten Nachmittag kehrte Bill in die Texaco Towers zurück und zeigte eine neue Demo, in der Rechtecke mit abgerundeten Ecken schön und sehr schnell gezeichnet wurden
  • Die Geschwindigkeit lag nahezu auf dem Niveau normaler Rechtecke
  • Beim Hinzufügen des Codes zu LisaGraf gab Bill diesem neuen grafischen Grundelement den Namen RoundRects
  • In den folgenden Monaten tauchten roundrects in vielen Teilen der Benutzeroberfläche auf und wurden bald unverzichtbar

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-06-25
Hacker-News-Meinungen

  • Windows verwendete von 1.0 bis 3.11 abgerundete Ecken bei Buttons; danach wechselte es bis zur Theme-UI von XP zu eckigen Ecken, wurde in XP wieder leicht abgerundet, ging in 8 wieder zu eckig über und wurde in 11 erneut rund
    https://user-images.githubusercontent.com/7389110/64139289-3...
    Trotzdem mag ich scharfe Ecken immer noch lieber

    • Von denen sieht Windows 2000 für mich immer noch am besten aus. Abgesehen davon, dass es kein Font-Antialiasing gibt
      Windows 10 hat es auch ziemlich gut gemacht, aber das Problem ist vor allem das Chaos, wenn man durch die Einstellungen geht und plötzlich völlig andere UI-Paradigmen auftauchen und man in eine Welt gerät, in der alles miteinander verheddert ist
    • Scharfe Ecken sind gefährlich. Solche Fenster fühlen sich an, als würde man bluten, wenn man sie mit der Maus versehentlich berührt
      Seltsamerweise erinnere ich mich daran, einmal in einem ostasiatischen Hotel übernachtet zu haben, vermutlich an einem Ort mit tibetischem Einfluss, wo alle Zimmerecken abgerundet waren. Es fühlte sich einfach besser und gemütlicher an. In der westlichen Welt wäre es wohl extrem teuer, einen Handwerker zu beauftragen, alle Ecken eines Zimmers abzurunden; mit Gips ginge es zwar, aber es würde kaum länger als zehn Jahre halten und den Wiederverkaufswert vermutlich auch nicht steigern
    • Dieses Bild zeigt sehr deutlich, wie viel wir beim Übergang zu flachen GUIs verloren haben und wie wichtig Schatten bei Buttons sind
      Gleichzeitig bestätigt es mir, dass mir wirklich nicht im Geringsten wichtig ist, ob Ecken rund oder eckig sind
    • Es ist interessant, die Windows-Themes über die Jahre zu sehen. Persönlich mag ich UIs, die wie Stücke aus Titan und Stahl aussehen, lieber als eine langweilige flache RGBCMYK-Farbpalette. Schon der Name war Glass, und es gab die Absicht, Materialität zu vermitteln
      Entwickler können Design-Farbpaletten wie Solarized haben, aber ich verstehe nicht, warum Microsoft seinen Willen aufzwingt und alle demselben schrecklichen Blau unterwirft. Ich hasse dieses Blau, weil ganz sicher irgendein Konzern-Dialog wie „Gelb wirkt zu sehr wie eine Warnung, Orange ist zu unklar, Rot ist zu wütend, Lila ist zu auffällig. Blau ist sicher“ stattgefunden hat
    • Wirklich ein gutes Bild. Ich finde, XP ist am besten. Allein die Tatsache, dass es gelb und nicht grau ist, macht einen Unterschied
      Ich mag nicht, dass moderne Widgets keine Schattierung haben. Ich verstehe, dass es modern aussehen soll, aber es wirkt einfach sehr faul
      Man sieht auch, dass Buttons ab Windows Vista/7 plötzlich ungefähr doppelt so groß wurden und überall Ränder und Padding auftauchten. Der von UIs verschwendete Platz wird immer absurder

  • Ich habe diese Geschichte über Jahrzehnte hinweg gern verfolgt, aber was mir jetzt am meisten auffällt, ist die Tatsache, dass Bill Atkinson beim Bau des Macintosh im Homeoffice gearbeitet hat

    • Wenn man LSD nimmt, ist das Zuhause doch besser als das Büro, oder?
      https://news.ycombinator.com/item?id=19238322
    • Wenn ich mich richtig erinnere, erledigte er die komplexeren Aufgaben zu Hause, um nicht gestört zu werden, arbeitete aber auch im Büro. Eine gesunde Arbeitsteilung

  • Sind Apples abgerundete Rechtecke inzwischen nicht Squircles?
    https://medium.com/minimal-notes/rounded-corners-in-the-appl...

  • Verwandte Beiträge:
    Round rectangles are everywhere - https://news.ycombinator.com/item?id=28679496 - September 2021, 26 Kommentare
    History of Rounded Corners - https://news.ycombinator.com/item?id=7062706 - Januar 2014, 1 Kommentar
    Steve Jobs and Rounded Corners - https://news.ycombinator.com/item?id=3096927 - Oktober 2011, 1 Kommentar
    The story of round rectangles - https://news.ycombinator.com/item?id=1636358 - August 2010, 77 Kommentare

  • Es wird unterschätzt, wie ausgeprägt Steve Jobs’ Geschmack war und wie ernst die Formulierung „Liberal Arts und Technologie“ gemeint war

    • Ich stimme zu, dass das wichtig ist, aber ich würde nicht sagen, dass es unterschätzt wird. Im Gegenteil, es wird sehr hoch geschätzt
    • Die eher unterschätzte Person könnte Bill Atkinson sein. Am Ende ist er zwar dafür bekannt, alles hinter sich gelassen zu haben, aber QuickDraw, MacPaint und HyperCard sind ein unglaublicher Dreifachschlag
    • Ich bin mir nicht sicher, ob „unterschätzt“ hier wirklich das richtige Wort ist. Er wird praktisch als einer der größten Visionäre für Design und Innovation in der Geschichte der Tech-Branche gefeiert
      Trotzdem stimme ich zu, dass man jedes Mal aufs Neue überrascht ist, wenn solche Anekdoten auftauchen. Unter den vielen Narzissten, die die Welt antreiben, werde ich ihn wohl am besten in Erinnerung behalten
    • Chrisann Brennan, seine Freundin und die Mutter seines Kindes, war Künstlerin. Das steht alles in ihrem Buch

  • Ein Beispiel für abgerundete Rechtecke, die rein aus ästhetischen Gründen hinzugefügt wurden, waren die Desktop-Fenster des alten Mac. Wenn der Bildschirm beim Booten anging, war er natürlich rechteckig, aber eine der ersten Aufgaben der Software war es, diese Ecken abzurunden, und so blieb es, bis andere Software in den Vollbildmodus wechselte
    Unter Windows gab es so etwas nicht, und es war offensichtlich „nutzlos“, aber ich mochte dieses Detail

  • Die Passage „In den nächsten Monaten drangen abgerundete Rechtecke in viele Bereiche der Benutzeroberfläche ein und wurden bald unverzichtbar“ zeigt letztlich, dass auch das nur eine Mode war wie jedes andere Design. Dann ging es zu scharfen Kanten und Flat Design, dann wieder zurück zu abgerundeten Ecken, dann wieder kantig, und wieder zurück
    Man sieht diesen höllischen Kreislauf direkt vor sich. Noch vor etwa einem Jahr hatte jemand bei Chrome, wie es in großen Unternehmen oft passiert, die geniale Idee, „das Design aufzufrischen“, und plötzlich wurden Tabs rund, und rund um die Navigationsleiste tauchten kleine abgerundete Ecken auf

    • Abgerundete Ecken sind tatsächlich ein ziemlich wichtiger Faktor für Barrierefreiheit und ein starkes Gestalt-Mittel im Design. Der Radius der Umrandung eines abgerundeten Rechtecks lässt auf einen Blick die Grenzen eines Elements sowie Innen und Außen erkennen
      Konzentrisch abgestimmte abgerundete Ecken können auch Eltern-Kind-Beziehungen gestalterisch klar vermitteln
    • Das Einzige, was im modernen Webdesign unverändert bleibt, scheinen die immer weiter zunehmenden Margins und Paddings zu sein. Alles andere läuft in Zyklen
      Auch als Google rechteckige Ecken vollständig rund machte, wurden Margins und Paddings weiter vergrößert. Wenn texturiertes Design wieder in Mode kommt, werden vermutlich auch dann Margins und Paddings weiter wachsen

  • Ein Mac-OS-ROM-Hack, der vollständig kreisrunde Fenster erzeugt: https://web.archive.org/web/20201209143138/https://macgui.co...

    • Der „Hack“ besteht hier nicht darin, ein rundes Fenster zu zeichnen. Das ist nur das Erzeugen einer neuen Fensterform über die Betriebssystem-API
      Der Hack besteht darin, diesen Code in den Finder einzuschleusen. Eine Methode war, das WDEF in der Desktop-Datei einer Diskette zu speichern; schon das Einlegen dieser Diskette konnte die neue Fensterform ändern
      Um die Dateiinformationen der Diskette zu erhalten, öffnete der Finder den Resource Fork dieser Datei und hielt ihn offen. Wenn ein Fenster geöffnet wurde, fragte der Finder beim Resource Manager „WDEF #0“ an, und der Resource Manager fand es in der Desktop-Datei — genauer gesagt ein WDEF, das vorgab, dieses zu sein. Einen Trojaner für dieses OS zu bauen war nicht besonders schwer

  • Ich lerne gerade, Modelle für 3D-Druck zu entwerfen, und abgerundete Ecken sind ebenso sehr eine Frage der Notwendigkeit wie der Ästhetik. Gegenstände mit scharfen Kanten sind unbequem zu greifen und können je nach Material sogar Verletzungsgefahr bergen. Hygienisch sind sie auch nicht, und Staub lässt sich schwer entfernen
    Umgekehrt ist die Mathematik zum Erzeugen abgerundeter Ecken bei beliebigen Formen unsauber, beim Drucken braucht man oft Stützstrukturen, und danach ist Nachbearbeitung nötig: Stützen entfernen und die Kurven mit Schleifpapier glätten

  • Ich frage mich, warum Bill sagte: „Nein, so etwas lässt sich nicht machen. Tatsächlich wäre das wirklich schwierig.“ Warum war es nicht trivial, seine Ellipsen-Optimierung auf einen Viertelkreis anzuwenden?

    • Ich habe mir vor ein paar Jahren dieselbe Frage gestellt
      Vermutlich dachte er daran, ein abgerundetes Rechteck als eine einzige mathematische Formel zu modellieren. https://news.ycombinator.com/item?id=15073696
      Das ist wahrscheinlich unmöglich, weil ein abgerundetes Rechteck nicht kontinuierlich ist. Es ist aber auch ein völlig unnötiger Ansatz, weil man die Viertelkreisstücke und die geraden Segmente getrennt behandeln kann
    • Wie Andy schrieb, führte Bill gerade eine sehr beeindruckende Demo vor und war vielleicht etwas verärgert, dass Steve das nicht richtig anerkannte
      Außerdem kam die Frage völlig unerwartet, und buchstäblich niemand hatte so etwas zuvor gemacht
    • Dass völlig kompetente Leute sich in Jobs’ Umfeld so verhielten, hilft zu verstehen, warum er zu so jemandem wurde
    • Im häufigsten Fall wäre vermutlich nicht einmal das nötig gewesen. Wahrscheinlich hätte man eine Maske zum Abrunden der Ecken hardcodiert und gespeichert, und das wäre viel schneller gewesen