UI / UX - หน้า 8

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

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

กริดที่กำหนดเอง เป็นคุณสมบัติที่ยากที่สุดในการสร้างตั้งแต่เริ่มต้น คุณสามารถค้นหาปลั๊กอินกริดก่ออิฐได้มากมาย แต่ละคนมีข้อ จำกัด และข้อกำหนดของตัวเอง. สคริปต์ Muuri เป็นทางเลือกที่แข็งแกร่งสำหรับทุกคนที่ต้องการ องค์ประกอบกริดเรียงลำดับและตอบสนองด้วยการสนับสนุนการสัมผัส. มันสร้างขึ้นบน Velocity.js สำหรับอนิเมชั่น, พร้อมกับ คลัง Hammer.js สำหรับการจัดการระบบสัมผัสมือถือ. Muuri ไม่ ต้องการ jQuery, ดังนั้นจึงเป็นหนึ่งในปลั๊กอินวานิลลา JavaScript ไม่กี่ตัวสำหรับอินเทอร์เฟซกริด. ในหน้าโครงการหลักคุณจะพบ การสาธิตกริดที่สวยงามพร้อมคุณสมบัติทั้งหมด. เอฟเฟกต์แอนิเมชันการสนับสนุนการลากและวางและองค์ประกอบกริดที่แตกต่างกันที่มีขนาดแตกต่างกัน การสาธิตนี้แสดงให้เห็นว่าคุณสามารถควบคุม Muuri grid...

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

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

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

ไม่มีการปฏิเสธว่ามือถือเป็นอนาคต ด้วย Google ยืนยันว่ามีการค้นหาบนมือถือมากกว่าบนเดสก์ท็อปจึงเป็นที่ชัดเจนว่าเว็บไซต์ทั้งหมดควรจะใช้มือถือถ้าพวกเขายังไม่ได้ทำ. แต่มีการแบ่งแยกที่น่าสนใจระหว่างเนื้อหาในเบราว์เซอร์ผ่านเลย์เอาต์ที่ตอบสนองและเนื้อหาในแอพผ่านแอพพื้นฐาน. ฉันต้องการสำรวจทั้งสองพื้นที่และขุดรากของแต่ละตัวเลือก เมื่อใดที่เว็บไซต์ควรใช้แอพแบบเนทีฟแทนเลย์เอาต์ที่ตอบสนองได้ ไซต์สามารถเรียกใช้ทั้งสองได้หรือไม่ นี่เป็นคำถามที่สำคัญที่ควรถามกับโครงการสร้างสรรค์ทุกโครงการในวันนี้. ค่านิยมของแอพเนทีฟ ผู้ใช้สมาร์ทโฟนส่วนใหญ่พึ่งพาแอพพื้นฐานสำหรับโปรแกรมโปรดของพวกเขา Facebook, Twitter, Instagram และอื่น ๆ ทั้งหมดใช้แอพของตนเอง. เนื่องจากแอปพลิเคชั่นดั้งเดิมนั้นทำงานบนระบบปฏิบัติการในตัวเครื่อง ราบรื่นและใช้งานง่ายขึ้นเกี่ยวกับภาพเคลื่อนไหวการออกแบบ UI และการจัดระเบียบเนื้อหา. แอพแบบเนทีฟเป็นไปตามหลักเกณฑ์ UI ทำให้พวกเขาทั้งหมดสอดคล้องและเป็นไปตามธรรมชาติ ผู้ใช้มักจะรู้วิธีใช้เมนูการเลื่อนและแถบแท็บโดยกำเนิด. ผู้จัดพิมพ์รายใหญ่หลายรายมีแอพใน iOS Store และ Google...

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