Hình chữ nhật bo góc có ở khắp mọi nơi

 (folklore.org)
1 điểm bởi GN⁺ 2024-06-25 | 1 bình luận | Chia sẻ qua WhatsApp
  • Vào thời QuickDraw cho Macintosh vẫn còn được gọi là LisaGraf, Bill Atkinson đã tạo ra các routine vẽ hình tròn và elip tốc độ cao, và Steve Jobs muốn mở rộng nó thành một dạng hữu ích hơn cho UI
  • Khi đó, bộ xử lý 68000 không có dấu phẩy động, còn phép nhân và chia cũng chậm, nên Bill chọn cách xử lý phép tính hình tròn chỉ bằng phép cộng và phép trừ
  • Bản demo elip chạy cực nhanh, nhưng Steve đã thuyết phục Bill bằng cách chỉ ra các ví dụ thực tế trong và ngoài căn phòng, nói rằng “hình chữ nhật bo góc có ở khắp mọi nơi”
  • Ban đầu Bill cho rằng việc này không cần thiết và khó thực hiện, nhưng sau khi thấy một biển báo bo góc ông quyết định kiểm tra lại độ khó triển khai
  • Bản demo xuất hiện vào ngày hôm sau chạy với tốc độ gần bằng hình chữ nhật thông thường, và RoundRects sau đó trở thành yếu tố đồ họa thiết yếu của UI Macintosh

Yêu cầu bắt đầu từ một routine elip tốc độ cao

  • Bill Atkinson chủ yếu làm việc ở nhà, nhưng mỗi khi có tiến triển đáng kể ông lại chạy tới Texaco Towers, nơi đặt văn phòng Macintosh của Apple, để trình diễn
  • Mục đích của chuyến ghé thăm lần này là trình diễn các oval routines mới tạo, và khi đó QuickDraw vẫn còn được gọi là LisaGraf
  • Bill đã thêm đoạn mã vẽ hình tròn và elip cực nhanh, rồi cho thấy màn hình Lisa được lấp đầy bằng các elip có kích thước ngẫu nhiên

Giới hạn của 68000 và cách tính toán

  • Việc vẽ hình tròn nhanh trên Macintosh khi đó không hề dễ vì các giới hạn phần cứng
    • Tính toán hình tròn thường cần căn bậc hai
    • Bộ xử lý 68000 của Lisa và Macintosh không hỗ trợ phép toán dấu phẩy động
    • Phép nhân và phép chia trên 68000 cũng không nhanh
  • Bill đã dùng cách xử lý chỉ với phép cộng và phép trừ, không cần phép nhân hay chia
  • Cốt lõi là tính chất tổng của dãy số lẻ sẽ tạo thành số chính phương tiếp theo
    • Ví dụ: 1 + 3 = 4
    • Ví dụ: 1 + 3 + 5 = 9
    • Ví dụ: 1 + 3 + 5 + 7 = 16
  • Dựa vào tính chất này, ông lặp cho tới khi vượt ngưỡng để quyết định khi nào cần tăng giá trị tọa độ phụ thuộc, và QuickDraw có thể vẽ elip rất nhanh

Yêu cầu về hình chữ nhật bo góc của Steve Jobs

  • Khi bản demo của Bill chạy nhanh hơn nhiều so với kỳ vọng, Steve Jobs hỏi liệu có thể vẽ không chỉ hình tròn và elip mà cả hình chữ nhật bo góc hay không
  • Bill trả lời rằng ông không có cách triển khai, việc đó sẽ rất khó, và thực ra cũng không cần thiết
  • Steve nói “hình chữ nhật bo góc có ở khắp mọi nơi” rồi chỉ ngay các ví dụ trong phòng
    • Bảng trắng
    • Một số bàn làm việc và bàn khác
  • Ông còn nói rằng nhìn ra ngoài cửa sổ thì gần như chỗ nào cũng thấy thêm nhiều ví dụ nữa

Những ví dụ trong thế giới thực đã thúc đẩy việc triển khai

  • Steve thuyết phục Bill đi bộ một vòng quanh khu nhà trong chốc lát và chỉ cho ông từng hình chữ nhật bo góc dễ thấy
  • Khi cả hai đi ngang qua một biển cấm đỗ xe bo góc, Bill đã đổi ý
  • Bill trở về nhà làm việc và nói rằng ông sẽ kiểm tra xem nó có thực sự khó như ông nghĩ hay không

RoundRects trở thành yếu tố cơ bản của UI

  • Chiều hôm sau Bill quay lại Texaco Towers với một bản demo mới, và các hình chữ nhật bo góc được vẽ đẹp mắt và cực nhanh
  • Tốc độ gần như tương đương với tốc độ vẽ hình chữ nhật thông thường
  • Khi thêm đoạn mã này vào LisaGraf, Bill đặt tên cho yếu tố đồ họa cơ bản mới là RoundRects
  • Trong vài tháng sau đó, roundrects xuất hiện ở nhiều phần của giao diện người dùng và nhanh chóng trở thành một thành phần không thể thiếu

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-06-25
Ý kiến trên Hacker News

  • Windows đã dùng góc bo tròn cho các nút từ bản 1.0 đến 3.11, rồi sau đó chuyển sang góc vuông cho đến UI theo theme của XP; đến XP thì lại hơi bo tròn, sang 8 lại vuông, rồi đến 11 lại bo tròn tiếp
    https://user-images.githubusercontent.com/7389110/64139289-3...
    Dù vậy tôi vẫn thích góc sắc hơn

    • Trong số đó, Windows 2000 vẫn trông đẹp nhất. Chỉ trừ việc không có khử răng cưa phông chữ
      Windows 10 cũng làm khá tốt, nhưng vấn đề là nó là một mớ hỗn độn, nhất là khi lục trong phần Settings, cứ như bước vào một thế giới nơi các paradigm UI hoàn toàn khác nhau đột nhiên nhảy ra và quấn lấy nhau
    • Góc sắc nguy hiểm lắm. Những cửa sổ như vậy tạo cảm giác nếu vô tình chạm chuột vào thì sẽ chảy máu
      Lạ là tôi từng ở trong một khách sạn Đông Á, có lẽ chịu ảnh hưởng Tây Tạng, và nhớ là mọi góc trong phòng đều được bo tròn. Cảm giác đơn giản là tốt hơn và dễ chịu hơn. Ở phương Tây, nếu gọi thợ thủ công đến để bo tròn mọi góc trong phòng thì chắc sẽ cực kỳ đắt; làm bằng thạch cao thì được, nhưng khó mà bền hơn 10 năm và cũng không chắc làm tăng giá trị bán lại
    • Hình đó cho thấy rất rõ chúng ta đã mất nhiều thứ thế nào khi chuyển sang GUI phẳng, và đổ bóng trên nút quan trọng ra sao
      Đồng thời nó cũng khiến tôi nhận ra mình thật sự chẳng quan tâm chút nào chuyện góc bo tròn hay góc vuông
    • Xem các theme Windows qua nhiều năm khá thú vị. Cá nhân tôi thích UI trông như những miếng titan và thép được chạm khắc hơn là bảng màu RGBCMYK phẳng nhạt nhẽo. Ngay cái tên đã là Glass, và nó có chủ ý truyền tải cảm giác vật liệu
      Lập trình viên có thể dùng các bảng màu thiết kế như Solarized, vậy mà tôi không hiểu vì sao Microsoft lại áp đặt ý chí của mình, bắt mọi người lệ thuộc vào cùng một màu xanh tệ hại. Tôi ghét màu xanh đó vì chắc chắn đã có một cuộc trò chuyện kiểu doanh nghiệp như: “Vàng thì quá giống cảnh báo, cam thì quá mập mờ, đỏ thì quá giận dữ, tím thì quá nổi. Xanh dương là an toàn”
    • Hình rất hay. Tôi nghĩ XP là đẹp nhất. Chỉ riêng việc nó là màu vàng chứ không phải màu xám đã tạo ra khác biệt lớn
      Tôi ghét việc widget hiện đại không có đổ bóng. Tôi hiểu là họ muốn trông hiện đại, nhưng nó chỉ khiến tôi thấy cực kỳ lười biếng
      Cũng có thể thấy từ Windows Vista/7 trở đi, các nút đột nhiên to gần gấp đôi và khắp nơi xuất hiện khoảng trống và padding. Không gian bị UI lãng phí ngày càng lớn đến mức phi lý

  • Tôi đã thích câu chuyện này suốt mấy chục năm, nhưng điều nổi bật nhất với tôi lúc này là Bill Atkinson đã làm việc từ xa khi tạo ra Macintosh

    • Nếu dùng LSD thì ở nhà chẳng phải tốt hơn ở văn phòng sao?
      https://news.ycombinator.com/item?id=19238322
    • Nếu tôi nhớ không nhầm thì ông ấy làm những việc phức tạp hơn ở nhà để khỏi bị làm phiền, và vẫn làm việc ở văn phòng nữa. Một sự phân công lành mạnh

  • Hình chữ nhật bo góc của Apple bây giờ chẳng phải là squircle sao?
    https://medium.com/minimal-notes/rounded-corners-in-the-appl...

  • Các bài liên quan:
    Round rectangles are everywhere - https://news.ycombinator.com/item?id=28679496 - tháng 9/2021, 26 bình luận
    History of Rounded Corners - https://news.ycombinator.com/item?id=7062706 - tháng 1/2014, 1 bình luận
    Steve Jobs and Rounded Corners - https://news.ycombinator.com/item?id=3096927 - tháng 10/2011, 1 bình luận
    The story of round rectangles - https://news.ycombinator.com/item?id=1636358 - tháng 8/2010, 77 bình luận

  • Người ta đánh giá thấp việc gu thẩm mỹ của Steve Jobs xuất sắc đến mức nào, và cụm “khai phóng và công nghệ” thực sự chân thành ra sao

    • Tôi đồng ý là quan trọng, nhưng không nghĩ là bị đánh giá thấp. Ngược lại, nó được đánh giá rất cao
    • Người có thể bị đánh giá thấp hơn lại là Bill Atkinson. Dù cuối cùng ông nổi tiếng vì bỏ lại tất cả rồi rời đi, nhưng QuickDraw, MacPaint, HyperCard là một cú hat-trick cực kỳ ấn tượng
    • Tôi không chắc “đánh giá thấp” có phải từ đúng ở đây không. Ông ấy gần như được tôn vinh là nhà viễn kiến về thiết kế và đổi mới vĩ đại nhất trong lịch sử ngành công nghệ
      Dù vậy tôi đồng ý rằng mỗi lần những giai thoại kiểu này xuất hiện, tôi vẫn lại thấy kinh ngạc. Trong số rất nhiều người ái kỷ đang vận hành thế giới, có lẽ tôi sẽ nhớ về ông ấy với thiện cảm nhất
    • Chrisann Brennan, bạn gái của ông ấy và là mẹ của con ông ấy, là một nghệ sĩ. Những chuyện đó đều có trong sách của bà

  • Một ví dụ về hình chữ nhật bo góc được thêm vào thuần túy vì lý do thẩm mỹ là cửa sổ desktop trên Mac ngày xưa. Khi màn hình bật lên trong lúc khởi động thì tất nhiên nó là hình chữ nhật, nhưng một trong những việc đầu tiên phần mềm làm là bo tròn các góc đó, và trạng thái ấy được giữ cho đến khi phần mềm khác chuyển sang toàn màn hình
    Windows không có thứ như vậy, và rõ ràng đó là việc “vô dụng”, nhưng tôi thích chi tiết đó

  • Đoạn “trong vài tháng tiếp theo, hình chữ nhật bo góc đã thấm vào nhiều phần của giao diện người dùng, và chẳng mấy chốc trở thành thứ không thể thiếu” rốt cuộc cho thấy nó cũng chỉ là một trào lưu như những thiết kế khác. Rồi người ta chuyển sang các góc sắc và thiết kế phẳng, sau đó quay lại góc bo, rồi lại góc cạnh, rồi lại quay về
    Có thể thấy vòng lặp địa ngục này diễn ra ngay trước mắt. Khoảng một năm trước, ai đó ở Chrome cũng có ý tưởng “làm mới thiết kế” đầy sáng tạo như các công ty lớn vẫn hay làm, và đột nhiên các tab được bo tròn, quanh thanh điều hướng xuất hiện những góc bo nhỏ

    • Góc bo thực ra là một yếu tố khá quan trọng về mặt khả năng tiếp cận, và là một công cụ Gestalt mạnh trong thiết kế. Bán kính viền của hình chữ nhật bo góc giúp phân biệt ngay ranh giới của phần tử cũng như bên trong/bên ngoài
      Các góc bo được căn đồng tâm cũng có thể truyền đạt rõ ràng quan hệ cha-con theo kiểu Gestalt
    • Có vẻ thứ duy nhất không đổi trong thiết kế web hiện đại là margin và padding ngày càng tăng. Mọi thứ còn lại đều xoay vòng
      Khi Google làm các góc hình chữ nhật bo tròn hoàn toàn, họ cũng tăng thêm margin và padding. Nếu thiết kế có chất liệu lại thịnh hành, có lẽ lúc đó margin và padding cũng sẽ tăng thêm

  • Hack ROM Mac OS để tạo cửa sổ hoàn toàn hình tròn: https://web.archive.org/web/20201209143138/https://macgui.co...

    • Ở đây “hack” không phải là phần vẽ cửa sổ bo tròn. Việc đó chỉ là tạo một hình dạng cửa sổ mới bằng API của hệ điều hành
      Phần hack là tiêm đoạn mã đó vào Finder. Một cách là lưu WDEF trong file Desktop của đĩa mềm, và chỉ cần cắm đĩa mềm đó vào là có thể thay đổi hình dạng cửa sổ mới
      Finder mở resource fork của file đó và giữ nó mở để lấy thông tin file trên đĩa mềm. Khi mở một cửa sổ, Finder yêu cầu Resource Manager “WDEF #0”, và Resource Manager tìm thấy nó trong file Desktop — chính xác hơn là một WDEF giả vờ là nó. Việc tạo Trojan horse trên hệ điều hành đó không khó lắm

  • Hiện tôi đang học thiết kế mô hình cho in 3D, và góc bo là vấn đề cần thiết cũng nhiều như thẩm mỹ. Đồ vật có góc sắc thì cầm không thoải mái, và tùy vật liệu còn có nguy cơ gây thương tích. Nó cũng không vệ sinh và khó lau sạch bụi
    Ngược lại, toán học để tạo góc bo từ hình dạng tùy ý thì rối rắm, khi in thường cần support, và sau đó cần hậu xử lý để tháo support rồi dùng giấy nhám làm mịn các đường cong

  • Tôi tò mò vì sao Bill lại nói “Không, không có cách nào làm vậy đâu. Thực ra sẽ rất khó”. Vì sao việc áp dụng tối ưu hóa ellipse của ông ấy cho một phần tư hình tròn lại không phải chuyện nhỏ?

    • Vài năm trước tôi cũng từng hỏi câu tương tự
      Có lẽ ông ấy đã nghĩ đến việc mô hình hóa hình chữ nhật bo góc bằng một công thức toán học duy nhất. https://news.ycombinator.com/item?id=15073696
      Điều đó có lẽ là bất khả thi, vì hình chữ nhật bo góc không liên tục. Nhưng đó cũng là một hướng tiếp cận hoàn toàn không cần thiết, vì chỉ cần xử lý riêng các đoạn một phần tư hình tròn và các đoạn thẳng là được
    • Như Andy viết, Bill đang trình diễn một thứ rất ấn tượng và có thể hơi khó chịu vì Steve không công nhận đúng mức
      Ngoài ra, câu hỏi đó xuất hiện rất đột ngột, và theo đúng nghĩa đen thì trước đó chưa ai từng làm việc ấy
    • Việc thấy những người hoàn toàn có năng lực lại cư xử như vậy quanh Jobs giúp ta hiểu vì sao ông ấy trở thành con người như thế
    • Trong trường hợp phổ biến nhất, có lẽ thậm chí không cần đến mức đó. Nhiều khả năng họ đã hard-code và lưu một mask để bo góc, và cách đó sẽ nhanh hơn nhiều