UI Pattern

UI เลื่อนหน้าขึ้น (Go to Top)

0

featured-go-to-top

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

เราสามารถทำลิงค์เลื่อนหน้าขึ้นได้หลากหลายวิธี มาดูตัวอย่างกันเลย

1. ใช้รูปลูกศรโดยจะปรากฏเมื่อผู้ใช้เลื่อนดูหน้าเกิน 1 หน้าจอ และจะอยู่ในตำแหน่งด้านล่างตลอดขณะเลื่อนหน้าจอ

go-to-top-01

เว็บอีเกียใช้ลูกศรประจำอยู่ด้านล่างเมื่อยูสเซอร์เลื่อนหน้าอ่านข้อมูล

2. ใช้ลูกศรวางไว้ตำแหน่งด้านบน โดยจะปรากฎเมื่อเลื่อนหน้าลง

go-to-top-02

เว็บ New Balance จะแสดงลูกศรเลื่อนหน้าในตำแหน่งตรงกลางหน้าจอทางด้านบน

3. ใช้ลูกศรวางไว้ในตำแหน่งแต่ละส่วนของประเภทสินค้า โดยปรากฏให้เห็นตลอด

go-to-top-03

เว็บ Lazada.co.th ใช้ลูกศรเป็นตัวแทนเหมือนการขึ้นลงบันไดเลื่อน

4. ใช้ลูกศรวางไว้ในตำแหน่งด้านล่างสุดของหน้า โดยปรากฏให้เห็นตลอด

go-to-top-04

เว็บ Longdo Dict จะมีปุ่มเลื่อนหน้าขึ้นบริเวณด้านล่างก่อนถึงส่วน footer

5. ใช้ลิงค์ที่เป็นตัวหนังสือวางไว้ด้านล่างของหน้า

go-to-top-05

เว็บ Greg Brady Project ใช้ลิงค์เลื่อนหน้าเป็นตัวหนังสือ

ในตัวอย่างใช้คำว่า ‘Back to Top’ และอีกหลายตัวเลือกคือ

  • Go to Top
  • Top
  • Up

โดยถ้าหากต้องเลือกใช้ ขอแนะนำแบบที่ 1 เพราะเป็นรูปแบบที่ใช้กันเยอะในหลายๆ เว็บ แต่ถ้าอยากได้แบบแปลกๆ แบบที่ 2 ก็ดูเข้าตาเหมือนกันนะครับ ^^

uiblogaziner
สวัสดีครับ ผมชื่อฟริ้นครับ รักและชอบงาน Graphic Design เอามากๆ เลย พอได้เริ่มทำงานเป็น UI Designer แล้ว ยิ่งสนุกขึ้นอีกแยะ งานออกแบบที่ใช้ความรู้สึกและเหตุผลเป็นอะไรที่สุดยอดจริงๆ ครับ

คลิก เปลี่ยน เล่น สำหรับ slideshow

Previous article

ธุรกิจรุ่งเพราะคิดอย่างมีดีไซน์ (Design Thinking Business)

Next article

You may also like

Comments

Leave a reply

Your email address will not be published. Required fields are marked *

More in UI Pattern