เคอร์เซอร์ขนาดใหญ่: ชี้ทางสู่เว็บที่ดีกว่า

เผยแพร่แล้ว: 2020-04-29

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

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

เคอร์เซอร์ที่ใหญ่กว่า – UX ที่ดีกว่า

สิ่งสำคัญสองประการที่ทำให้แนวโน้มนี้มีความเกี่ยวข้อง

ประการแรก ในกรณีส่วนใหญ่ นักพัฒนาเหล่านี้ได้ทิ้งลูกศรเล็กๆ น้อยๆ ให้เป็นวงกลมแล้ว มีการเปลี่ยนการตั้งค่าไปยังเคอร์เซอร์เมาส์ทรงกลมอย่างหลีกเลี่ยงไม่ได้ ดังนั้นจึงไม่มีเรื่องน่าประหลาดใจที่นี่

และอย่างที่สองเกี่ยวกับพฤติกรรมของเมาส์เอง เช่นเดียวกับแนวคิดดีๆ ทั้งหมด ข้อนี้เรียบง่าย เมื่อเคอร์เซอร์เข้าสู่ส่วนสำคัญ เช่น โลโก้ ลิงก์ ไอคอนโซเชียลมีเดีย การนำทาง ฯลฯ จะมีความโดดเด่นมากขึ้นเพื่อเน้นย้ำถึงความสำคัญ สามารถเปลี่ยนขนาด สี หรือความโปร่งใสได้

โซลูชันนี้มีประโยชน์ต่ออินเทอร์เฟซในรูปแบบต่างๆ เช่น

  • มันทำให้สิ่งต่าง ๆ น่าสนใจยิ่งขึ้น
  • มันบันทึกอินเทอร์เฟซจากการเป็นโลกีย์;
  • ปรับปรุงการโต้ตอบกับผู้ใช้
  • ทำให้การสำรวจเว็บไซต์ใช้งานง่ายกว่าปกติ

โดยพื้นฐานแล้ว นี่ไม่ใช่สิ่งใหม่ เราคุ้นเคยกับการใช้เอฟเฟกต์โฮเวอร์เพื่อสร้างรายละเอียดเล็กๆ น้อยๆ ของเว็บไซต์ เช่น ลิงก์การนำทางหรือปุ่มต่างๆ ให้โดดเด่นเมื่อมีการโต้ตอบ

อย่างไรก็ตาม ศิลปินด้านล่างได้ไปไกลกว่านั้นเล็กน้อยและบังคับให้เคอร์เซอร์ปรับปรุงการโต้ตอบจากอีกด้านหนึ่ง ความคิดนั้นยอดเยี่ยม ลองพิจารณาตัวอย่างที่ยอดเยี่ยมเหล่านี้

เอเวอร์เรสต์ เอเจนซี่

พิจารณา Everest Agency เป็นตัวอย่างที่เป็นตัวแทนของเทรนด์

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

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

เอเวอร์เรสต์ เอเจนซี่

สื่อต้นไม้

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

สื่อต้นไม้

มีความสุขออนไลน์

Happy Online ได้รับความงามจากการดึงดูดใจทางเรขาคณิต พวงของสามเหลี่ยมสีสันสดใสที่ค่อนข้างใหญ่ช่วยเสริมการออกแบบ มีกล่องและลายมากมาย ที่นี่ เคอร์เซอร์ที่มีเส้นวงกลมกลมกลืนกันอย่างลงตัว แต่ละลิงก์จะได้รับความสนใจเป็นพิเศษเมื่อวางเมาส์เหนือ เรียบง่าย หรูหรา และมีประโยชน์

มีความสุขออนไลน์

Uptec

เช่นเดียวกับในตัวอย่างก่อนหน้านี้ การใช้เคอร์เซอร์แบบวงกลมพร้อมฟังก์ชันพิเศษนั้นสมเหตุสมผลสำหรับ Uptec โดยสิ้นเชิง สังเกตวงกลมกลวงขนาดใหญ่ที่กระจัดกระจายไปทั่วพื้นที่ฮีโร่ พวกเขาบันทึกส่วนต้อนรับจากการดูน่าเบื่อ

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

Uptec

เดอ ยองเก้นส์ ฟาน โบเวน

ในตัวอย่างก่อนหน้านี้ เทรนด์ให้ความรู้สึกเหมือนเป็นโบนัสที่น่าพึงพอใจ ในกรณีของ De Jongens van Boven มันเป็นสิ่งจำเป็น เว็บไซต์นี้มีพื้นที่ฮีโร่ที่มองเห็นได้ชัดเจนพร้อมเลเยอร์จำนวนมาก รายละเอียดทางเรขาคณิต และเอฟเฟกต์การตกแต่ง ดังนั้น ตัวชี้ที่มีชีวิตชีวาซึ่งมีขนาดค่อนข้างใหญ่ซึ่งคุณสามารถติดตามได้ง่ายจึงเป็นสิ่งที่ต้องมี

ที่นี่ คุณจะเห็นเคอร์เซอร์ของเมาส์ที่เป็นวงกลมสองวงรวมกัน อันแรกมีขนาดเล็กและแข็ง ในขณะที่อันที่สองมีขนาดใหญ่และกึ่งโปร่งใส โดยเน้นองค์ประกอบการนำทางโดยการเปลี่ยนขนาด นอกจากนี้ยังเปลี่ยนสีตามสไลด์ เสริมความสม่ำเสมอของการออกแบบ

เดอ ยองเก้นส์ ฟาน โบเวน

Wewo

เช่นเดียวกับตัวอย่างก่อนหน้านี้ Wewo ยังมีพื้นที่ฮีโร่ที่ซับซ้อนอีกด้วย แม้ว่าจะไม่มีแอนิเมชั่นที่แปลกประหลาด แต่เลเยอร์เพิ่มเติมก็มากเกินพอที่จะทำให้การติดตามการเคลื่อนไหวของคุณค่อนข้างท้าทาย ดังนั้นวิธีแก้ปัญหาจึงเหมาะสมอย่างยิ่ง

หมายเหตุสองสิ่ง: อย่างแรกคือทีมใช้เคอร์เซอร์ขนาดต่างๆ เพื่อระบุพื้นที่ที่จำเป็น ประการที่สอง เอฟเฟกต์อินฟาเรดที่เสริมการโต้ตอบและทำให้มันขี้เล่น

Wewo

Dominic Berzins

หากคุณรู้สึกว่าวงกลมเล็กๆ ไม่ได้สร้างความแตกต่างใดๆ ในเว็บไซต์ของคุณ คุณสามารถใช้มาตรการที่รุนแรงได้เสมอโดยขยายให้ใหญ่ขึ้นร้อยครั้งและบังคับให้ทิ้งร่องรอยที่ดึงดูดความสนใจ Dominic Berzins แสดงให้เห็นสิ่งนี้ในผลงานส่วนตัวที่โดดเด่นของเขา

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

บางคนอาจมองว่ามากเกินไป อย่างไรก็ตาม ไม่เพียงแต่จะพอดีเหมือนถุงมือเท่านั้น แต่ยังมีส่วนสนับสนุนธีมโดยรวม แต่ยังทำหน้าที่เป็นปัจจัยที่ "ว้าว" อีกด้วย นั่นคือการไม่พูดอะไรเกี่ยวกับการวาดภาพการเคลื่อนไหวของคุณอย่างแท้จริง ฉลาด.

Dominic Berzins

ยิ่งใหญ่ขึ้นเรื่อย ๆ

แนวโน้มนี้ทั้งน่าตื่นเต้นและมีแนวโน้ม คุณสมบัติหลักของมันคือความจริงที่ว่ามันใช้งานได้จริงและในขณะเดียวกันก็ให้ความบันเทิง และเป็นประโยชน์ต่อประสบการณ์ของผู้ใช้อย่างแน่นอน

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

บอกเราว่าคุณคิดอย่างไรเกี่ยวกับการใช้เคอร์เซอร์ขนาดใหญ่ คุณคิดว่ามันน่าขบขันหรือไม่? มีประโยชน์? หรือแค่ไร้ประโยชน์?