สี่เหลี่ยมมุมมนมีอยู่ทุกที่

 (folklore.org)
1 คะแนน โดย GN⁺ 2024-06-25 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • ในยุคที่ QuickDraw สำหรับ Macintosh ยังถูกเรียกว่า LisaGraf นั้น Bill Atkinson ได้สร้างรูทีนสำหรับวาดวงกลมและวงรีที่รวดเร็ว และ Steve Jobs ต้องการขยายมันไปเป็นรูปทรงที่มีประโยชน์ต่อ UI มากขึ้น
  • ในเวลานั้น โปรเซสเซอร์ 68000 ไม่มีการคำนวณทศนิยมแบบลอยตัว และการคูณ·หารก็ช้า Bill จึงเลือกวิธีคำนวณวงกลมโดยใช้ เพียงการบวกและการลบ
  • เดโมวงรีทำงานได้เร็วมาก แต่ Steve โน้มน้าว Bill โดยบอกว่า “สี่เหลี่ยมมุมมนมีอยู่ทุกที่” พร้อมชี้ให้ดูตัวอย่างจริงทั้งในและนอกห้อง
  • ตอนแรก Bill มองว่าไม่จำเป็นและยากเกินไป แต่หลังจากเห็น ป้ายมุมมน เขาก็ตัดสินใจกลับไปตรวจสอบความยากในการทำจริงอีกครั้ง
  • วันถัดมา เดโมที่ออกมาทำงานได้เร็วใกล้เคียงกับสี่เหลี่ยมธรรมดา และ RoundRects ก็กลายเป็นองค์ประกอบกราฟิกสำคัญของ Macintosh UI ในเวลาต่อมา

จุดเริ่มต้นจากความต้องการต่อยอดรูทีนวงรีความเร็วสูง

  • Bill Atkinson ทำงานจากบ้านเป็นหลัก แต่เมื่อมีความคืบหน้าสำคัญ เขามักจะรีบไปที่ Texaco Towers ซึ่งเป็นที่ตั้งสำนักงาน Macintosh ของ Apple เพื่อไปสาธิตผลงาน
  • จุดประสงค์ของการมาครั้งนี้คือการสาธิต oval routines ที่เพิ่งสร้างขึ้นใหม่ และในตอนนั้น QuickDraw ยังถูกเรียกว่า LisaGraf
  • Bill ได้เพิ่มโค้ดที่วาดวงกลมและวงรีได้อย่างรวดเร็วมาก พร้อมแสดงหน้าจอ Lisa ที่เต็มไปด้วยวงรีขนาดสุ่ม

ข้อจำกัดของ 68000 และวิธีคำนวณ

  • การวาดวงกลมบน Macintosh ให้เร็วในยุคนั้นไม่ใช่เรื่องง่าย เพราะข้อจำกัดของฮาร์ดแวร์
    • การคำนวณวงกลมโดยทั่วไปต้องใช้ รากที่สอง
    • โปรเซสเซอร์ 68000 ของ Lisa และ Macintosh ไม่รองรับการคำนวณทศนิยมแบบลอยตัว
    • การคูณและการหารบน 68000 ก็ไม่ได้เร็วเช่นกัน
  • Bill ใช้วิธีที่ไม่ต้องพึ่งการคูณหรือการหาร แต่ใช้ การบวกและการลบ เท่านั้น
  • แกนสำคัญคือสมบัติที่ว่าผลรวมของลำดับจำนวนคี่จะกลายเป็นกำลังสองสมบูรณ์ถัดไป
    • ตัวอย่าง: 1 + 3 = 4
    • ตัวอย่าง: 1 + 3 + 5 = 9
    • ตัวอย่าง: 1 + 3 + 5 + 7 = 16
  • เขาอาศัยสมบัตินี้วนลูปไปจนเกินค่าขีดแบ่ง เพื่อกำหนดว่าเมื่อใดควรเพิ่มค่าพิกัดที่ขึ้นต่อกัน ทำให้ QuickDraw สามารถวาดวงรีได้อย่างรวดเร็วมาก

คำขอเรื่องสี่เหลี่ยมมุมมนจาก Steve Jobs

  • เมื่อเดโมของ Bill ทำงานได้เร็วกว่าที่คาดมาก Steve Jobs จึงถามว่านอกจากวงกลมและวงรีแล้ว จะสามารถวาด สี่เหลี่ยมมุมมน ได้หรือไม่
  • Bill ตอบว่ายังไม่เห็นวิธีทำ มันน่าจะยากมาก และในความเป็นจริงก็คงไม่ได้จำเป็น
  • Steve พูดว่า “สี่เหลี่ยมมุมมนมีอยู่ทุกที่” แล้วชี้ให้ดูตัวอย่างในห้องทันที
    • ไวต์บอร์ด
    • โต๊ะทำงานและโต๊ะบางตัว
  • เขายังเสริมว่า ถ้ามองออกไปนอกหน้าต่างก็แทบจะเห็นตัวอย่างเพิ่มได้ทุกที่

ตัวอย่างจากโลกจริงผลักดันให้ลงมือทำ

  • Steve ชวน Bill เดินรอบบล็อกสั้น ๆ เพื่อโน้มน้าวเขา และชี้ให้ดู สี่เหลี่ยมมุมมน ที่เห็นเด่นชัดทีละอย่าง
  • ตอนที่ทั้งสองเดินผ่านป้ายห้ามจอดซึ่งมีมุมมน Bill ก็เปลี่ยนความคิด
  • Bill กลับบ้านไปทำงานต่อ พร้อมบอกว่าจะลองตรวจสอบดูว่ามันยากอย่างที่คิดจริงหรือไม่

RoundRects กลายเป็นองค์ประกอบพื้นฐานของ UI

  • บ่ายวันถัดมา Bill กลับมาที่ Texaco Towers พร้อมเดโมใหม่ และสี่เหลี่ยมมุมมนก็ถูกวาดออกมาได้อย่างสวยงามและรวดเร็วมาก
  • ความเร็วเกือบใกล้เคียงกับการวาด สี่เหลี่ยมธรรมดา
  • Bill เพิ่มโค้ดนี้เข้าไปใน LisaGraf และตั้งชื่อองค์ประกอบกราฟิกพื้นฐานใหม่นี้ว่า RoundRects
  • ในช่วงหลายเดือนต่อมา roundrects ถูกนำไปใช้ในหลายส่วนของส่วนติดต่อผู้ใช้ และไม่นานก็กลายเป็นองค์ประกอบที่ขาดไม่ได้

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-06-25
ความคิดเห็นจาก Hacker News

  • Windows ใช้ปุ่มที่มี มุมมน ตั้งแต่ 1.0 ถึง 3.11 จากนั้นเปลี่ยนเป็นมุมเหลี่ยมจนกระทั่งก่อน UI แบบธีมของ XP แล้วใน XP ก็กลับมามนขึ้นเล็กน้อย พอถึง 8 ก็กลับไปเป็นเหลี่ยมอีก และใน 11 ก็กลับมามนอีกครั้ง
    https://user-images.githubusercontent.com/7389110/64139289-3...
    ถึงอย่างนั้นผมก็ยังชอบ มุมคม มากกว่าอยู่ดี

    • ในบรรดานั้น Windows 2000 ยังดูดีที่สุดสำหรับผม ถ้าไม่นับเรื่องที่ไม่มี anti-aliasing ของฟอนต์
      Windows 10 ก็ทำได้ค่อนข้างดี แต่ปัญหาคือมันเละเทะ โดยเฉพาะเวลาวนดูการตั้งค่า เหมือนหลุดเข้าไปในโลกที่แพรไดม์ UI คนละแบบโผล่มาปะปนกันอย่างกะทันหัน
    • มุมคมอันตรายนะ หน้าต่างแบบนั้นให้ความรู้สึกว่าเผลอไปโดนด้วยเมาส์ผิดจังหวะแล้วจะเลือดออกได้
      แปลกดีที่ผมจำได้ว่าเคยพักในโรงแรมแถบเอเชียตะวันออกแห่งหนึ่ง น่าจะมีอิทธิพลจากทิเบต ซึ่งมุมห้องทั้งหมดเป็นมุมมน มันรู้สึกดีกว่าและสบายใจกว่าจริง ๆ ในโลกตะวันตก ถ้าจะจ้างช่างมาทำให้มุมทุกมุมในห้องเป็นมุมมนคงแพงมาก และถึงจะทำด้วยปูนปลาสเตอร์ได้ ก็คงอยู่ได้ไม่เกิน 10 ปี และคงไม่ได้เพิ่มมูลค่าขายต่อด้วย
    • รูปนั้นแสดงให้เห็นชัดเจนว่าเราเสียอะไรไปมากแค่ไหนตอนเปลี่ยนมาเป็น GUI แบบแบน และ เงา บนปุ่มสำคัญเพียงใด
      ในขณะเดียวกันก็ทำให้เห็นด้วยว่าผมไม่ได้สนใจเลยแม้แต่นิดเดียวว่ามันจะเป็นมุมมนหรือมุมเหลี่ยม
    • การได้เห็นธีม Windows ตลอดหลายปีเป็นเรื่องน่าสนใจ ส่วนตัวแล้วผมชอบ UI ที่ดูเหมือน ชิ้นส่วนไทเทเนียมและเหล็ก มากกว่าพาเลตสีแบบแบน ๆ น่าเบื่อสไตล์ RGBCMYK ชื่อมันก็ Glass อยู่แล้ว และตั้งใจจะสื่อถึงคุณสมบัติทางวัสดุ
      นักพัฒนายังมีพาเลตสีดีไซน์อย่าง Solarized ได้ แล้วทำไม Microsoft ต้องยัดเยียดความตั้งใจของตัวเอง บังคับให้ทุกคนติดอยู่กับสีน้ำเงินห่วย ๆ เหมือนกันหมดก็ไม่รู้ ผมเกลียดสีน้ำเงินนั้น เพราะเห็นได้ชัดว่าคงมีใครสักคนคุยกันแบบองค์กรว่า “เหลืองดูเตือนภัยเกินไป ส้มก็ก้ำกึ่งเกินไป แดงก็ดูโกรธเกินไป ม่วงก็เด่นเกินไป น้ำเงินปลอดภัยกว่า”
    • เป็นภาพที่ดีจริง ๆ ผมว่า XP ดีที่สุด แค่ข้อเท็จจริงที่มันเป็นสีเหลืองไม่ใช่สีเทาก็สร้างความต่างแล้ว
      ผมไม่ชอบที่วิดเจ็ตสมัยใหม่ไม่มีการไล่แสงเงา เข้าใจว่าอยากให้ดูโมเดิร์น แต่มันให้ความรู้สึกขี้เกียจมากกว่า
      ตั้งแต่ Windows Vista/7 เป็นต้นมา ปุ่มก็ใหญ่ขึ้นประมาณสองเท่าอย่างฉับพลัน และเห็นว่ามี ช่องว่างและ padding โผล่ขึ้นมาทั่วไปหมด พื้นที่ที่ UI สิ้นเปลืองไปยิ่งมากขึ้นจนน่าขันเรื่อย ๆ

  • ผมสนุกกับเรื่องนี้มาหลายสิบปีแล้ว แต่สิ่งที่เด่นที่สุดในตอนนี้คือข้อเท็จจริงที่ว่า Bill Atkinson ทำงานจากที่บ้านตอนสร้าง Macintosh

    • ถ้าจะเล่น LSD อยู่บ้านก็ดีกว่าออฟฟิศไม่ใช่เหรอ?
      https://news.ycombinator.com/item?id=19238322
    • ถ้าจำไม่ผิด งานที่ซับซ้อนกว่านั้นเขาทำที่บ้านเพื่อไม่ให้ถูกรบกวน และเขาก็ทำงานที่ออฟฟิศด้วย เป็นการแบ่งงานที่ดีต่อสุขภาพดี

  • สี่เหลี่ยมมุมมนของ Apple ตอนนี้ไม่ใช่ squircle แล้วเหรอ?
    https://medium.com/minimal-notes/rounded-corners-in-the-appl...

    • อาจเป็นบทความเก่าที่ใกล้เคียงกับต้นฉบับ: https://www.figma.com/blog/desperately-seeking-squircles/
    • ใช่ ผมจำได้ว่าน่าจะเปลี่ยนเป็น squircle ตั้งแต่ iOS 7

  • บทความที่เกี่ยวข้อง:
    Round rectangles are everywhere - https://news.ycombinator.com/item?id=28679496 - กันยายน 2021, 26 ความคิดเห็น
    History of Rounded Corners - https://news.ycombinator.com/item?id=7062706 - มกราคม 2014, 1 ความคิดเห็น
    Steve Jobs and Rounded Corners - https://news.ycombinator.com/item?id=3096927 - ตุลาคม 2011, 1 ความคิดเห็น
    The story of round rectangles - https://news.ycombinator.com/item?id=1636358 - สิงหาคม 2010, 77 ความคิดเห็น

  • ผู้คนประเมิน รสนิยมของ Steve Jobs ต่ำไป รวมถึงความจริงใจของวลี “ศิลปศาสตร์และเทคโนโลยี” ด้วย

    • เห็นด้วยว่ามันสำคัญ แต่ไม่คิดว่าถูกประเมินต่ำไป ตรงกันข้าม เขาได้รับการยกย่องสูงมาก
    • คนที่อาจถูกประเมินต่ำไปมากกว่าคือ Bill Atkinson สุดท้ายเขาโด่งดังในฐานะคนที่ทิ้งทุกอย่างแล้วจากไปก็จริง แต่ QuickDraw, MacPaint, HyperCard นี่คือผลงานสามชิ้นติดที่ยิ่งใหญ่มาก
    • ผมไม่แน่ใจว่า “ประเมินต่ำไป” เป็นคำที่เหมาะตรงนี้หรือเปล่า จริง ๆ แล้วเขาแทบจะได้รับการยกย่องว่าเป็น วิสัยทัศน์ด้านดีไซน์และนวัตกรรม ที่ยิ่งใหญ่ที่สุดคนหนึ่งในประวัติศาสตร์อุตสาหกรรมเทคโนโลยี
      แต่ก็เห็นด้วยว่าเรื่องเล่าแบบนี้ทำให้ทึ่งขึ้นมาอีกครั้งทุกครั้ง ในบรรดานาร์ซิสซิสต์จำนวนมากที่ขับเคลื่อนโลก ผมคงจดจำเขาในแง่ดีที่สุด
    • Chrisann Brennan ซึ่งเป็นแฟนสาวของเขาและแม่ของลูกเขา เป็นศิลปิน เรื่องนั้นมีอยู่ทั้งหมดในหนังสือของเธอ

  • ตัวอย่างหนึ่งของสี่เหลี่ยมมุมมนที่เพิ่มเข้ามาด้วยเหตุผลด้านความสวยงามล้วน ๆ คือ หน้าต่างเดสก์ท็อป ของ Mac รุ่นเก่า ตอนที่จอแสดงผลติดขึ้นระหว่างบูต มันย่อมเป็นสี่เหลี่ยมธรรมดา แต่หนึ่งในสิ่งแรก ๆ ที่ซอฟต์แวร์ทำคือทำให้มุมเหล่านั้นมน และมันจะคงสภาพนั้นไว้จนกว่าซอฟต์แวร์อื่นจะสลับไปเต็มหน้าจอ
    Windows ไม่มีสิ่งแบบนั้น และมันเป็นงานที่ “ไร้ประโยชน์” อย่างชัดเจน แต่ผมชอบรายละเอียดนั้น

  • ข้อความที่ว่า “ในช่วงไม่กี่เดือนถัดมา สี่เหลี่ยมมุมมนได้แทรกซึมเข้าไปในหลายส่วนของอินเทอร์เฟซผู้ใช้ และไม่นานก็กลายเป็นสิ่งที่ขาดไม่ได้” สุดท้ายก็แสดงให้เห็นว่ามันก็เป็นแค่กระแสเหมือนดีไซน์แบบอื่น ๆ เท่านั้น จากนั้นก็เปลี่ยนไปเป็นมุมคมและดีไซน์แบบแบน แล้วกลับมามุมมนอีก แล้วกลับไปเป็นเหลี่ยมอีก แล้วก็กลับมาอีก
    เห็นวัฏจักรนรกนี้เกิดขึ้นต่อหน้าต่อตา ประมาณหนึ่งปีก่อน คนใน Chrome บางคนก็มีไอเดียสุดบรรเจิดแบบที่มักเกิดในบริษัทใหญ่ ๆ ว่า “มารีเฟรชดีไซน์กันเถอะ” แล้วจู่ ๆ แท็บก็กลายเป็นมุมมน และมีมุมมนเล็ก ๆ โผล่ขึ้นรอบแถบนำทาง

    • มุมมนจริง ๆ แล้วเป็นองค์ประกอบที่ค่อนข้างสำคัญในแง่ การเข้าถึง และเป็นเครื่องมือ Gestalt ที่ทรงพลังในงานออกแบบ รัศมีขอบของสี่เหลี่ยมมุมมนช่วยให้แยกขอบเขตขององค์ประกอบ รวมถึงด้านในและด้านนอกได้ในทันที
      มุมมนที่จัดให้สอดคล้องกันแบบวงกลมร่วมศูนย์ยังสามารถสื่อความสัมพันธ์แบบพ่อแม่-ลูกในเชิง Gestalt ได้อย่างชัดเจนด้วย
    • ในเว็บดีไซน์สมัยใหม่ สิ่งเดียวที่ดูเหมือนไม่เปลี่ยนคือ มาร์จินและแพดดิ้ง ที่เพิ่มขึ้นเรื่อย ๆ ส่วนที่เหลือวนเป็นวัฏจักรทั้งหมด
      ตอนที่ Google ทำให้มุมสี่เหลี่ยมกลายเป็นมุมมนสุด ๆ ก็ยังเพิ่มมาร์จินและแพดดิ้งด้วย ถ้าดีไซน์แบบมีพื้นผิวกลับมานิยมอีกครั้ง ถึงตอนนั้นมาร์จินและแพดดิ้งก็คงเพิ่มขึ้นอีกเหมือนกัน

  • การแฮ็ก Mac OS ROM เพื่อสร้างหน้าต่างที่เป็นวงกลมสมบูรณ์: https://web.archive.org/web/20201209143138/https://macgui.co...

    • ‘การแฮ็ก’ ในที่นี้ไม่ใช่ส่วนที่วาดหน้าต่างมุมมน นั่นเป็นแค่การสร้างรูปทรงหน้าต่างใหม่ด้วย API ของระบบปฏิบัติการเท่านั้น
      การแฮ็กคือส่วนที่ฉีดโค้ดนั้นเข้าไปใน Finder วิธีหนึ่งคือการเก็บ WDEF ไว้ในไฟล์ Desktop ของฟลอปปีดิสก์ และแค่เสียบฟลอปปีดิสก์นั้นก็สามารถเปลี่ยนรูปทรงหน้าต่างใหม่ได้
      Finder เปิด resource fork ของไฟล์นั้นและค้างไว้เพื่ออ่านข้อมูลไฟล์ของฟลอปปี เมื่อเปิดหน้าต่าง Finder จะขอ “WDEF #0” จาก Resource Manager และ Resource Manager ก็พบมันในไฟล์ Desktop — หรือให้ตรงคือพบ WDEF ที่แสร้งทำเป็นมัน ใน OS นั้น การสร้างม้าโทรจันไม่ได้ยากนัก

  • ตอนนี้กำลังเรียนออกแบบโมเดลสำหรับ การพิมพ์ 3 มิติ อยู่ มุมมนเป็นเรื่องของความจำเป็นพอ ๆ กับสุนทรียะ วัตถุที่มีมุมคมจับไม่สบาย และอาจเสี่ยงทำให้บาดเจ็บได้ขึ้นอยู่กับวัสดุ อีกทั้งยังไม่ถูกสุขลักษณะและทำความสะอาดฝุ่นได้ยาก
    ในทางกลับกัน คณิตศาสตร์สำหรับสร้างมุมมนจากรูปทรงใด ๆ นั้นยุ่งยาก และตอนพิมพ์ก็มักต้องใช้โครงรองรับ หลังจากนั้นยังต้องมีงานหลังการพิมพ์เพื่อเอาโครงรองรับออกและขัดส่วนโค้งด้วยกระดาษทราย

  • สงสัยว่าทำไม Bill ถึงพูดว่า “ไม่หรอก ไม่มีทางทำแบบนั้นได้ จริง ๆ แล้วมันคงยากมาก” ทำไมการนำ การเพิ่มประสิทธิภาพวงรี ของเขาไปใช้กับเสี้ยววงกลมหนึ่งในสี่จึงไม่ใช่เรื่องเล็กน้อย?

    • ผมก็เคยถามคำถามเดียวกันเมื่อหลายปีก่อน
      เป็นไปได้มากว่าเขากำลังคิดถึงการโมเดลสี่เหลี่ยมมุมมนเป็นสมการคณิตศาสตร์สมการเดียว https://news.ycombinator.com/item?id=15073696
      นั่นอาจเป็นไปไม่ได้ เพราะสี่เหลี่ยมมุมมนไม่ต่อเนื่องกัน แต่ถ้าจัดการชิ้นส่วนเสี้ยววงกลมหนึ่งในสี่กับชิ้นส่วนเส้นตรงแยกกันก็พอแล้ว ดังนั้นแนวทางนั้นจึงไม่จำเป็นเลย
    • อย่างที่ Andy เขียนไว้ Bill กำลังสาธิตสิ่งที่น่าประทับใจมาก และอาจรู้สึกไม่พอใจเล็กน้อยที่ Steve ไม่ได้ยอมรับมันอย่างเหมาะสม
      อีกทั้งคำถามนั้นก็โผล่ขึ้นมาแบบกะทันหัน และพูดตามตัวอักษรคือเป็นสิ่งที่ก่อนหน้านั้นไม่เคยมีใครทำมาก่อน
    • การเห็นคนที่มีความสามารถเต็มเปี่ยมประพฤติตัวแบบนี้เมื่ออยู่รอบ Jobs ช่วยให้เข้าใจได้ว่าทำไมเขาถึงกลายเป็นคนแบบนั้น
    • ในกรณีที่พบบ่อยที่สุด อาจไม่จำเป็นต้องถึงขั้นนั้นด้วยซ้ำ เป็นไปได้มากว่าเขาฮาร์ดโค้ดและเก็บ มาสก์ สำหรับทำมุมให้มนไว้ ซึ่งน่าจะเร็วกว่าเยอะ