สิ่งที่ผู้ออกแบบเว็บสามารถเรียนรู้จากวิดีโอเกม

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

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

Screenshot
แม้ในเกมเก่าเช่นเดียวกับใน Prince of Persia (แสดงข้างต้น) ความสามารถของระบบที่ จำกัด การบังคับใช้นักออกแบบที่จะมากับความคิดสร้างสรรค์และนวัตกรรมรูปแบบการออกแบบ ด้วยความสามารถมากขึ้นในปัจจุบันเราสามารถที่จะหาเทคนิคการออกแบบขั้นสูงมากขึ้นในวิดีโอเกมที่ทันสมัย

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

มันไม่แปลกใจแล้วว่าเราได้เห็นการไหลเข้าของ carousels, lightboxes, accordions และซับซ้อนมากขึ้นรูปแบบการนำทางเป็นห้องสมุด CSS และ JavaScript ได้นำเครื่องมือดังกล่าวในการเข้าถึงของเว็บเบราเซอร์ ไม่ว่าจะเป็นดีหรือสิ่งที่ไม่ดีคือหัวข้อสำหรับบทความอื่นและบทความนี้จะเน้นเทคนิคมากกว่าการใช้งานที่ผิดพลาดของพวกเขา

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

(Smashing’s side note: Have you already bought the brand new Smashing Book #3? The book introduces new practical techniques and a whole new mindset for progressive Web design. Get your book today!)

จำภาพใหญ่

ในการพิจารณาการเชื่อมต่อเกม, ผู้ออกแบบเว็บจะต้องมีสติอย่างรุนแรงจากบริบทโครงการของพวกเขาและเป้าหมายของลูกค้าของตน เห็นได้ชัดว่าเว็บไซต์จะบ่อย แต่ไม่เคยมีเป้าหมายที่แตกต่างอย่างมากจากที่ของวิดีโอเกม เกี่ยวกับเว็บไซต์จำนวนมากที่มีประสิทธิภาพจะต้องมีการจัดลำดับความสำคัญสูงกว่าความบันเทิง อินเตอร์เฟซที่ปลาตาเย็นไม่ได้เป็นความคิดที่ปฏิบัติมากที่สุดสำหรับเว็บไซต์ที่อุทิศตนเพื่อการส่งมอบข้อมูลภาษีได้อย่างรวดเร็วหรือสำหรับเว็บไซต์ e-commerceอย่างไรก็ตามการโต้ตอบช่องทางสื่อสังคมอาจได้รับประโยชน์จากลีดเดอร์หรือประเภทของระบบความสำเร็จบางอย่าง เลือกองค์ประกอบ UI ของคุณเพื่อให้เหมาะสมกับโครงการ

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

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

Game Menu Structure Example

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

Screenshot

นอกจากนี้สถานที่ที่แจ้งให้ทราบที่วิดีโอเกมแสดงแทนการบอกและพยายามที่จะเข้าใจว่าพวกเขาทำอย่างนั้น เกมที่ประสบความสำเร็จเป็นอย่างยิ่งเก่งที่แสดงในระหว่างการฝึกอบรมในสิ่งที่มักเรียกกันว่า“ถ้ำ Noob.” ตัวละครมีให้ผ่านห้องประถมศึกษาหรือระดับที่พวกเขาจะสอนให้บรรลุผลงานขั้นพื้นฐานในลักษณะที่เป็นความบันเทิงและบูรณาการ กับเรื่องราว นักผจญภัยเรียนรู้ที่จะรับดาบและแกว่งมันแล้วฆ่าหนูแล้วเรียนรู้วิธีการรับสมบัติ ผู้ใช้จะถูกสอนให้ใช้อินเตอร์เฟซที่ผ่านประสบการณ์ที่ดื่มด่ำ

Screenshot
ใน Elder Scrolls IV: Oblivion, คุณเริ่มต้นในคุกและต้องหนีผ่านถ้ำใต้ดินต่อสู้หนูและผีเล็ก ๆ เป็นครั้งคราวไปพร้อมกันเพื่อเรียนรู้การควบคุมขั้นพื้นฐานของเกม

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

หมั้นไม่จำเป็นต้องเป็นคน GLITZY

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

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

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

ตัวอย่างที่กรุณา

Let ‘s ดำน้ำในและดูที่องค์ประกอบ UI บางอย่างที่สามารถเพิ่ม Zing กับโครงการต่อไปของคุณ เราจะดูตัวอย่างบางส่วนและจากนั้นไม่กี่แหล่งข้อมูลที่คุณสามารถเรียนรู้เพิ่มเติม

ข้อความ AJAX ด้วยรูปภาพ LOADER

Fallout New Vegas Loading Screen

Fallout 3 loading images and tips

เหล่านี้หน้าจอโหลดจาก Fallout: New Vegas (บน) และ Fallout 3 (ล่าง) มีข้อมูลที่เป็นประโยชน์และเคล็ดลับพร้อมกับภาพพื้นหลังที่ขยายในรูปแบบของเกม แทนการโหลดภาพปั่นผู้ใช้จะเห็นล้อรูเล็ตหรือเป้าหมายสีเขียวหน้าจอที่แปลงรอที่น่าเบื่อเป็นส่วนที่สนุกของประสบการณ์เกม

สิ่งที่นักออกแบบเว็บจะใช้เวลานี้:

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

ภาพพื้นหลังแบบเต็มหน้าจอสำหรับการโหลดอาจจะช้าเกินไป แต่คุณสามารถเพิ่มพื้นหลังสี div แผงโหลดแล้วใช้ JavaScript plug-ins ในการโหลดและเคล็ดลับการสุ่มและข้อมูลเพื่อเติมช่องว่าง เพื่อให้ได้ผลลัพธ์ที่ดีที่สุดเก็บไฟล์โหลดต่ำกว่า 30 กิโลไบต์; ขนาดเล็กที่ดีกว่า โทร AJAX ง่ายสามารถคว้าเคล็ดลับหลาย ๆ วินาทีทุกหรือคุณก็สามารถโพสต์หนึ่งสำหรับการโหลดแต่ละ ทางเลือกขึ้นอยู่กับเท่าใดเนื้อหาที่คุณจำเป็นต้องโหลดและวิธีการที่คุณมีเวลามาก สำหรับตัวอย่างของชนิดของ loader นี้ให้ตรวจสอบ เว็บไซต์ปราบดินให้ราบ ที่ HubSpot หลังจากส่งลิงค์ให้ตรวจสอบ loader ที่เกิดขึ้นในขณะที่คุณรอผล

Website loader with pizzazz - HubSpot

เคอร์เซอร์ที่กำหนดเอง

Custom cursor
ในนิทาน 3, สถานที่ถูกเลือกโดยผู้ใช้จะถูกระบุด้วยแว่นขยายซึ่งทำหน้าที่เป็นเคอร์เซอร์ที่กำหนดเอง

Hand icon
ใน Elder Scrolls IV: Oblivion, เคอร์เซอร์มือที่เรียบง่ายบ่งบอกถึงวัตถุที่ผู้เล่นสามารถรับ มือสีแดงแสดงให้เห็นว่ารายการนี้จะถูกขโมยและทหารที่อาจจะไล่ตาม

สิ่งที่นักออกแบบเว็บจะใช้เวลานี้:

น่าจะเป็นเคอร์เซอร์ที่กำหนดเองที่รู้จักมากที่สุดคือ “มือ grabby” ใน Google Maps . แต่เคอร์เซอร์ที่กำหนดเองจะไม่มีอะไรใหม่และเป็นเรื่องปกติในการใช้งานเว็บ ความสามารถในการสร้างไว้ในเบราว์เซอร์ส่วนใหญ่

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

Custom Cursor Demo

ไอคอน, ไอคอนไอคอน,

Screenshot

Screenshot

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

ดังนั้นวิธีการใช้อย่างมีประสิทธิภาพไอคอนในการนำเกมมีอะไรบ้าง พวกเขาจะต้องอ่านได้และพอดีกับบริบท ในตัวอย่างข้างต้นจากการเข้าถึง Halo ผู้ใช้อาศัยอยู่กับไอคอนเพื่อนำทางและเลือกอาวุธ แต่เมนูมีลักษณะคล้ายกับ “จอหัวขึ้น” (ฮูด) ที่เราอาจจะเห็นในรถในโลกจริง ในการให้อภัย, ไอคอนจะถูกนำเสนอใน “เลื่อน”. ไอคอนเว็บไซต์เช่นเดียวกันควรจะง่ายต่อการเข้าใจ เพิ่มป้ายข้อความสำหรับการใช้งานที่เหมาะสม

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

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

Screenshot

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

ไอคอนไม่จำเป็นต้องเป็นภาพประกอบแบบคงที่ ภาพหน้าจอบน Tap รูปแบบการ ให้บริการเป็นรูปขนาดย่อแบบเดิม แต่รูปร่างที่โดดเด่นของพวกเขายังทำหน้าที่เป็นไอคอนเพิ่มดอกเบี้ยและเสริมแบรนด์:

Iconic thumbnails

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

Icon submenu, products as icons

CAROUSELS เต็มหน้า

หน้าจอแบบแท็บที่หายไปเช่นเดียวจากเกม Dragon Age, Origins นี้ได้รับรอบระยะเวลานาน:

Screenshot

ใน “รายงาน Carnage” ใน Reach Halo ด้านล่างความคิดนี้จะนำไปสู่ระดับใหม่ หน้าจอเลื่อนในแนวนอนและแต่ละหน้ามีหลายแท็บ คอเกมจะใช้กับชนิดของอินเตอร์เฟซนี้ แต่จะเอามันไปยังเว็บและคนจะประหลาดใจ

Screenshot

คุณต้องมีปฏิสัมพันธ์กับชนิดของอินเตอร์เฟซนี้จะทำมันยุติธรรม

Jax Vineyards ใช้ประเภทที่คล้ายกันของรูปแบบโดยไม่ต้องแท็บ:

Carousel Navigation

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

วีโอไอพี ให้บริการอื่นที่เรียบง่ายใช้เวลากับความคิดนี้:

Screenshot

ตอนนี้เราจะเห็นประเภทนี้ของอินเตอร์เฟซใน UIs มือถือและแท็บเล็ตที่มีภาพพื้นหลังหลาย นอกจากนี้เรายังเห็นมันในเกมทุกประเภท นี้เป็นมากกว่าแท็บภายในแท็บหรือเลื่อนแนวนอนง่ายๆคิดว่า iPad กับเดสก์ท็หลาย ลองคิดสิว่าชีวิต มีแผนที่ (มากเกมต้องการ!) ในมุมขวาบนเพื่อช่วยให้ผู้ใช้นำทางม้าหมุนที่ผิดปกติของมัน

สิ่งที่นักออกแบบเว็บจะใช้เวลานี้:

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

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

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

เมนู SLIDER

Screenshot

Screenshot

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

การเลื่อนที่มีแถบเลื่อนเผยปุ่มและเนื้อหาจะถูกนำเสนอบนครึ่งขวาของหน้าจอ ปุ่มยังมี dropdowns ภายใต้พวกเขา หรี่เนื้อหาที่ไม่ใช้งาน ภาพข้างต้นเป็นหมวดหมู่ด้านบนของ “เสื้อผ้า.” แล้วการฝึกซ้อมเนื้อหาลงไป “เสื้อโค้ท” จากนั้นไปที่รายการเสื้อผ้าที่เฉพาะเจาะจง นี้จะเตือนคุณของ e-commerce?

สิ่งที่นักออกแบบเว็บจะใช้เวลานี้:

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

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

หน้าจอหมุน

ผมต้องยอมรับหัวใจของฉันข้ามตีครั้งแรกที่ฉันเห็นหน้าจอหมุนเมื่อ Halo Reach เมื่อคุณไปที่เมนูหลักข้อความจะถูกเบ้. Reach Halo ใช้มุมมองตลอดทั้งเกมที่จะชี้ไปที่ขอบด้านขวาของหน้าจอเมนูนี้เป็นคิวภาพ เกิดขึ้นเมื่อคุณผลักดันตัวควบคุมไปทางขวาคืออะไร? กระโดดหน้าจอและเลื่อนในแนวนอน, เบลอ, เพื่อให้คุณได้หน้าจอถัดไปซึ่งจะใช้มุมมองนี้เช่นกันเวลาไปบิดเบือนทั้งหมดของข้อความและภาพไปทางซ้ายนี้ ภายใต้แท็บตัวละครของคุณเป็นภาพเคลื่อนไหวที่แทบจะไม่เคลื่อนย้ายและการ eerily ชีวิตเหมือน ไชโย ผมนั่งและเล่นกับ pivots สำหรับในขณะที่ แน่นอนปฏิกิริยาแรกของฉันคือผมต้องการที่จะทำอย่างนั้น

สิ่งที่นักออกแบบเว็บจะใช้เวลานี้:

ด้วยเล็กน้อย Photoshop, คุณสามารถเลียนแบบเมนูนี้ โดยการใช้ภาพพื้นหลังที่มีขนาดใหญ่กว้างที่ครอบคลุมกว้างสองหน้าจอ ‘กับ เบ้ CSS3 วิชาการพิมพ์ และเลื่อนแนวนอนได้อย่างรวดเร็วใน JavaScript, คุณสามารถได้รับบางสิ่งบางอย่างใกล้เคียงกับการเอียงพบได้ในเกมนี้

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

UI: Pivot screen

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

เมนูบริบท

Assassin's Creed Radial Menu

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

สิ่งที่นักออกแบบเว็บจะใช้เวลานี้:

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

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

ตัวอย่างเช่นความสนุกสนานจากเมนูบริบทรัศมีออก musicmap TuneGlue ของ :

Radial menu

ขณะนี้ได้ทำใน Flash คุณสามารถ สร้างเมนูรัศมีง่ายๆด้วย JavaScript . หรือคุณอาจจะได้รับความซับซ้อนมากขึ้นด้วย เมนูรัศมีที่ซ้อนกัน เช่นดังนั้น

Radial Menus, Nested

เมนูรัศมีไม่ จำกัด เฉพาะเมนูบริบท Pop-up เมนูแผงที่จุดของการดำเนินการได้อย่างมีประสิทธิภาพเท่าเทียมกันและไม่อาจใช้เวลามากหรือการทดสอบในการพัฒนา

Panel Context Menu

เปิดของคุณ

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

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

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

แหล่งความรู้เพิ่มเติม

  • รู้เบื้องต้นเกี่ยวกับการออกแบบรูปแบบ
    ทรัพยากรเริ่มต้นที่ดีที่จะเรียนรู้เกี่ยวกับรูปแบบการออกแบบ
  • ศิลปะการออกแบบเกม
    หนังสือเล่มนี้สอนหลักการพื้นฐานของการออกแบบเกม บทตัวอย่างจะมีให้ดาวน์โหลด
  • ปฏิสัมพันธ์ห้องสมุดรูปแบบการออกแบบ
    เครื่องมือที่ดีสำหรับการแก้ปัญหาเฉพาะการระดมความคิดเพื่อตอบสนองความต้องการของผู้ใช้ แต่ก็มีรายชื่อของรูปแบบและคำอธิบายรายละเอียด
  • yahoo ห้องสมุดรูปแบบการออกแบบ
    แม่ของทุกห้องสมุดรูปแบบการออกแบบ
  • เลื่อนกำหนดเองในแนวตั้ง / Sliders
    จุดเริ่มต้นสำหรับเมนูเลื่อนแนวตั้ง
  • Patternry
    ทรัพยากร UI ที่ยอดเยี่ยมโดยมีตัวอย่างและวิธีการของ
  • Gamification.org
    วิกิพีเดียนี้จะทุ่มเทเพื่อสำรวจแนวทางที่จะบูรณากลศาสตร์เกมในสภาพแวดล้อมที่ไม่ใช่เกมเพื่อเพิ่มความผูกพัน

(AL)

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s