24 ตัวอย่างความคิดสร้างสรรค์ของการนำทาง UI บนมือถือ

เผยแพร่แล้ว: 2015-12-01

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

สารบัญ ซ่อน
แอนิเมชั่นเมนูด้านข้าง
แอพท่องเที่ยว
แอพ Fantasy Leagues
TV Freak เมนูด้านข้าง
ลิสเตอร์
แอพแฟชั่น – User Timeline
VeLx – ลิสบอน
แถบเลื่อนแบบเลื่อนลงบนมือถือ
เค้าโครง UI ที่น่ารัก
ติดตามงาน
แนวคิดผลงานมือถือ
เมนูด้านข้าง ios
เว็บไซต์มือถือของบริษัทอสังหาริมทรัพย์
แอพสำหรับ iPhone การขนส่งสาธารณะ
BFC Partners Mobile
แอพ Volcano (เมนูพับ)
GIF: แอนิเมชั่นเมนู
เมนูบริบทสำหรับแอป iOS
Tofind แอบมอง #3
แอพคำคม (Sketch freebie)
แนวคิดเมนู
แถบเลื่อนเมนู/หน้าจอฟีด
เว็บแอป [WIP]
แนวคิดแอปทำสวน

คุณกำลังมองหาวิธีใหม่ในการออกแบบส่วนต่อประสานผู้ใช้สำหรับระบบนำทางมือถือหรือไม่? มองไม่เพิ่มเติม!

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

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

คุณจะพบกับการออกแบบทั้งแบบแบนและ 3 มิติพร้อมเอฟเฟกต์เงาที่ละเอียดอ่อน นอกจากนี้ คุณจะได้พบกับ การออกแบบระบบนำทาง ทั้งสีเข้มและสีสันสดใส !

คุณคิดว่าการออกแบบการนำทางบนอุปกรณ์เคลื่อนที่ UI ใดต่อไปนี้สร้างสรรค์ที่สุด แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง

แอนิเมชั่นเมนูด้านข้าง

ภาพเคลื่อนไหวเมนูด้านข้าง UI Mobile Navigation เข็มหมุด

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

แอพท่องเที่ยว

Travel App UI การนำทางบนมือถือ เข็มหมุด

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

แอพ Fantasy Leagues

Fantasy App UI การนำทางบนมือถือ เข็มหมุด

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

TV Freak เมนูด้านข้าง

เมนูทีวี UI การนำทางบนมือถือ เข็มหมุด

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

ลิสเตอร์

Lister UI การนำทางบนมือถือ เข็มหมุด

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

แอพแฟชั่น – User Timeline

การนำทางแฟชั่น UI มือถือ เข็มหมุด

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

VeLx – ลิสบอน

VeLx Mobile Navigation เข็มหมุด

VeLx เป็นแอปที่ดีมาก ๆ ที่ให้คุณค้นหาสถานที่เจ๋ง ๆ ในลิสบอนได้ แอปนี้มีจุดมุ่งหมายเพื่อเปลี่ยนวิธีการเดินทางของเราและทำงานเป็นระบบในเมือง นี่คือตัวอย่างคร่าวๆ ว่าแอปจะมีหน้าตาเป็นอย่างไร

แถบเลื่อนแบบเลื่อนลงบนมือถือ

แถบเลื่อนแบบเลื่อนลงบนมือถือ เข็มหมุด

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

เค้าโครง UI ที่น่ารัก

การออกแบบการนำทางมือถือที่น่ารัก เข็มหมุด

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

ติดตามงาน

การติดตามงานระบบนำทางมือถือ เข็มหมุด

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

แนวคิดผลงานมือถือ

แนวคิดผลงานมือถือ เข็มหมุด

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

เมนูด้านข้าง ios

เมนูด้านข้าง ios เข็มหมุด

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

เว็บไซต์มือถือของบริษัทอสังหาริมทรัพย์

การนำทางมือถืออสังหาริมทรัพย์ เข็มหมุด

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

แอพสำหรับ iPhone การขนส่งสาธารณะ

การขนส่งสาธารณะแอพ iPhone การนำทางบนมือถือ เข็มหมุด

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

BFC Partners Mobile

BFC Partners Mobile เข็มหมุด

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

แอพ Volcano (เมนูพับ)

Volcano Mobile Navigation เข็มหมุด

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

GIF: แอนิเมชั่นเมนู

ภาพเคลื่อนไหวเมนู GIF เข็มหมุด

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

เมนูบริบทสำหรับแอป iOS

แอพ iOS การนำทางบนมือถือ เข็มหมุด

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

Tofind แอบมอง #3

Tofind แอบดู Mobile Navigation เข็มหมุด

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

แอพคำคม (Sketch freebie)

คำคมการนำทางมือถือ เข็มหมุด

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

แนวคิดเมนู

แนวคิดเมนู เข็มหมุด

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

แถบเลื่อนเมนู/หน้าจอฟีด

หน้าจอแถบเลื่อนเมนู เข็มหมุด

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

เว็บแอป [WIP]

การนำทางเว็บมือถือ เข็มหมุด

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

แนวคิดแอปทำสวน

การนำทางด้วยมือถือแนวคิดแอปการทำสวน เข็มหมุด

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