คอลเลกชันดีไซน์นาฬิกาดิจิทัล

 (clocks.dev)
1 คะแนน โดย GN⁺ 23 시간 전 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Clocks.dev เป็นเว็บไซต์ที่ให้สำรวจดีไซน์นาฬิกาดิจิทัลซึ่งนำเสนอเวลาและวันที่ปัจจุบันในหลากหลายรูปแบบได้ในที่เดียว
  • สามารถเปรียบเทียบ วิธีแสดงผลทางภาพ ที่แตกต่างกัน เช่น รูปทรงเรขาคณิต การจัดวางตัวเลข การผสมคำ เข็มนาฬิกา หน้าปัดวงกลม และ LCD
  • เลือกดูดีไซน์ตามเกณฑ์ All time, This week, Newest และยังสามารถสร้าง ดีไซน์นาฬิกาใหม่ ได้เอง
  • มีนาฬิกาที่ชื่อบ่งบอกวิธีแสดงผลหรือสไตล์ เช่น number-field, word-field, binary-signal, swiss-railway, corner-date
  • นาฬิกาทั้งหมดที่ลงทะเบียนไว้เป็นโอเพนซอร์ส จึงใช้ได้ทั้งสำหรับชมดีไซน์และอ้างอิงไอเดียการพัฒนา

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

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

 
GN⁺ 23 시간 전
ความคิดเห็นจาก Hacker News

  • ลองทำ นาฬิกาดิจิทัลที่ประกอบด้วยนาฬิกาแอนะล็อก ขึ้นมาเล่น ๆ: https://mikespeed.com/clock

  • ก่อนยุค AI บูม ได้ทำ หน้าปัดนาฬิกาเชิงทดลอง ทั้งหมดด้วย SVG และ JavaScript เอง
    อาจไม่ใช่งานชิ้นเอก แต่ก็ภูมิใจที่ในฐานะดีไซเนอร์ได้เรียนโค้ดพื้นฐานด้วยตัวเองจนทำสำเร็จ: https://watchface.netlify.app/
    ยังเขียนสรุปขั้นตอนการทำไว้ด้วย: https://72mena.medium.com/designing-watch-faces-using-svgs-a...

    • เห็นงานชิ้นนี้แล้วก็อยากกลับไปลุย ฮาร์ดแวร์และการทำ PCB อีกครั้ง เพื่อทำของไว้แขวนบนผนัง
      ถ้าหน้าที่หน้าปัดนาฬิกาทำงานอยู่สามารถป้อนเวลาเองเพื่อดูหน้าตาได้ก็น่าจะดียิ่งขึ้น
    • ตั้งใจเข้ามาพูดถึงงานออกแบบของ Tokyoflash แต่พอมาเห็นที่นี่ก็ยินดีมาก

  • น่าจะถึงเวลารวมคนรักนาฬิกาใน HN มาทำ webring แบบสมัยก่อนกันได้แล้ว
    Lock Screen คล้ายกับ นาฬิกา Filling Digit ของฉัน ที่ใช้การเติมน้ำจากด้านล่างในตัวเลขโปร่งเพื่อแสดงวินาที
    Alphabetical Clock ที่สนุกมากก็เคยเป็นประเด็นใน HN เช่นกัน และแนวคิดของ webring ดูได้ที่ Wikipedia

  • ลองทำ Voutilainen Vingt-8 ISO ขึ้นใหม่ด้วย Svelte ที่เพิ่งใช้เป็นครั้งแรก: https://clocks.dev/clock/3b254b2789ec

    • เป็นแนวคิดที่เพิ่งเจอครั้งแรก แต่คงคุ้นเคยได้ไม่ยาก และก็อยากได้นาฬิกาข้อมือแบบนี้มาก

  • บน Chrome 150.0.7871.115 และ Windows ตั้งแต่ราว 2 ใน 3 ของหน้าลงไป แถบเลื่อนหายไปและเลื่อนต่อไม่ได้อีก

    • ตอนนี้แก้แล้ว แต่ ปัญหาด้านประสิทธิภาพ ที่ลึกกว่านี้ยังต้องตรวจสอบเพิ่ม
    • มองว่าการไปยุ่งกับพฤติกรรมการเลื่อนพื้นฐานของเบราว์เซอร์เป็นข้อห้ามใหญ่ของการพัฒนาเว็บ
    • ปัญหาเดียวกันเกิดขึ้นใน Firefox 152.0.5 บน Windows 11 ด้วย

  • Number Field ให้ความรู้สึกว่าเป็น วิธีแสดงนาฬิกาตัวเลขในเชิงพื้นที่ที่ดีที่สุด
    ถ้าจะให้สมบูรณ์คงต้องเปลี่ยนเป็นระบบ 24 ชั่วโมง แต่เป็นการแก้ไขเล็กน้อยเท่านั้น และด้วยโครงสร้าง 12 คอลัมน์จึงทำให้มองเวลาโดยประมาณได้ง่ายในพริบตาเดียว

  • เคยทำนาฬิกา Soroban โดยใช้ลูกคิดแบบญี่ปุ่น แต่เพิ่มเข้าในคอลเลกชันไม่ได้เพราะใช้งานแอนิเมชันที่อิง CSS: https://soroban-clock.netlify.app

  • 12 o’clocks ของ John Maeda ก็น่าดูเช่นกัน
    ผลงานปี 1996 ทำให้มองเห็นวิธีที่เวลาถูกถ่ายทอดเป็นกราฟิกในมุมใหม่ และยังดูได้ว่าเป็น งานในคอลเลกชันของ MoMA
    โดยเฉพาะผลงานที่เคลื่อนไหวอย่างลื่นไหลทำให้เริ่มไม่ชอบเข็มวินาทีที่กระตุกทุก 1 วินาที จนเปลี่ยนกลไกนาฬิกาทุกเรือนในบ้านเป็นแบบ เข็มวินาทีเดินต่อเนื่อง

  • นาฬิกาไบนารี ดูเหมือนจะนับตำแหน่งทางซ้ายของเลข 8 เป็นหลัก 10 แทนที่จะเป็นหลัก 16 ตามปกติ
    เลยทำให้เวลา 10 นาฬิกาแสดงเป็น 00010000 แทน 1010 และ 23 นาฬิกาเป็น 00100011 ซึ่งถ้าอ่านเป็นเลขฐานสองจะกลายเป็น 35 ดูแปลก ๆ

    • มันไม่ได้แปลงเวลาเป็นเลขฐานสองตัวเดียว แต่เป็นการแปลง แต่ละหลักของเลขฐานสิบเป็น 4 บิต
      กล่าวคือ 23 → 2 3 → 0010 0011 → 00100011

  • นาฬิกาบางเรือนดูมีจุดที่คลาดเคลื่อนเล็กน้อย
    Number Field สีส้มดูแยก 12:10 กับ 10:12 ได้ยาก และ Word Field ใช้ X แสดงอักษรที่ไม่ได้ใช้ ทำให้ความพิศวงเวลาคำค่อย ๆ ปรากฏแบบ Word Clock ต้นฉบับลดลง
    Temporal Exposure มีแถบของพื้นที่เบลอที่เยื้องจากจุดศูนย์กลาง และ Figure Hands ก็มีข้อความล้นออกนอกพื้นที่ภาพ

    • ใน Number Field นั้น ชั่วโมงจะอยู่ที่แถวบนสุดเสมอ ดังนั้น 12:10 กับ 10:12 จึงแสดงต่างกัน
    • ถ้าหมายถึง Figure Hands ก็ยังมีพื้นที่ให้ปรับปรุงสไตล์โดยรวมได้มาก
      การใช้ สองสีและขนาดที่ต่างกัน รวมถึงฟอนต์ที่เหมาะสมกว่าน่าจะช่วยให้ดีขึ้น