UI / UX - หน้า 7

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

ด้วยชื่อแปลก ๆ คุณคงไม่คาดหวังอะไรมากมายนัก Wenk, ฟรี CSS tooltip library. แต่มันเป็น หนึ่งในห้องสมุดที่เล็กที่สุด คุณสามารถวัดได้ต่ำกว่า 1KB เมื่อ gzipped. Wenk ใช้ CSS บริสุทธิ์ด้วย ข้อมูล-* แอตทริบิวต์ เพื่อสร้าง เคล็ดลับเครื่องมือสด ที่คุณสามารถ restyle และตำแหน่งที่คุณชอบ เหนือสิ่งอื่นใดมันเป็นห้องสมุดที่ไม่มีค่าใช้จ่ายพร้อมซอร์สโค้ดที่มีอยู่ใน GitHub. เคล็ดลับเครื่องมือที่มีน้ำหนักเบาเหล่านี้ง่ายมากที่จะเพิ่มไปยังเว็บไซต์ของคุณ คุณแค่ต้องการ Wenk.css...

ไม่มีการปฏิเสธว่าเป็นของ Google การออกแบบวัสดุ มีการเปลี่ยนแปลงเว็บอย่างรุนแรง มันมี ภาษาการออกแบบทั่วไป ที่นักออกแบบ UI สามารถใช้กับเว็บไซต์และแอปมือถือทั้งหมด. แนวโน้มการออกแบบวัสดุนี้นำไปสู่ห้องสมุดหลายแห่งรวมถึงกรอบ Materialize ที่เป็นที่นิยม และหนึ่งในนั้น โครงการวัสดุใหม่ที่เด็ดสุด ที่ฉันพบคือ Mprogress.js. ไลบรารี JavaScript นี้สร้าง แถบความคืบหน้าสไตล์วัสดุ ใช้ CSS และจาวาสคริปต์อย่างแท้จริง. ไม่มีการพึ่งพา, ไม่มีเรื่องไร้สาระ เพียงโหลดง่าย ๆ (และโหลดล่วงหน้า) ด้วยรูปลักษณ์การออกแบบวัสดุที่จะตรงกับเว็บไซต์หรือแอปพลิเคชันเว็บใด ๆ....

มันง่ายมากที่จะ สร้างเว็บไซต์ที่ทันสมัยด้วย Bootstrap, แม้ว่าคุณจะไม่มีความรู้ด้านการออกแบบก็ตาม ห้องสมุดติดตั้งง่ายและใช้งานได้ทันทีด้วยการออกแบบที่เก่าแก่. แต่เมื่อเว็บไซต์จำนวนมากมีลักษณะ Bootstrap เหมือนกันคุณจะได้รับ มีหลายหน้ามากเกินไปที่มีลักษณะเหมือนกัน. อย่างไรก็ตามคุณสามารถ ทำให้ไซต์ของคุณโดดเด่น ด้วยกรอบเช่น Bootplus. เฟรมเวิร์ก BootStrap นี้ฟรี restyles CSS ทั้งหมด สำหรับรูปลักษณ์ Bootstrap ที่รีเฟรช สิ่งนี้ทำให้เค้าโครงเริ่มต้นของคุณ ดูคล้ายกับ Google+ เพจมากขึ้น ด้วยปุ่มข้อความกริดและส่วนประกอบที่คล้ายกัน. บันทึก กรอบนี้ฟรี 100%...

นักออกแบบส่วนต่อประสานอย่างรวดเร็ว ตกหลุมรัก Sketch เป็นเครื่องมือออกแบบ UI / UX ออกมานอกกรอบเลยก็สามารถ ชักขึ้นอินเตอร์เฟซที่เรียบง่าย เร็วกว่า Photoshop หรือ Illustrator มาก. คุณลักษณะที่ดีอย่างหนึ่งที่ขาดหายไปจาก Sketch คือความสามารถในการ กระดานเชื่อมโยงกับแผนภูมิการไหล. แต่ด้วยความที่ ปลั๊กอินการไหลของผู้ใช้ คุณสามารถทำสิ่งนั้นได้! นักออกแบบ UX มักจะต้องส่งมอบ ต้นแบบการทำงานเต็มรูปแบบของ mockups การเชื่อมโยงลิงค์ / ปุ่มต่าง ๆ...

มันง่ายเสมอที่จะ สร้างกริดด้วย jQuery, ใช้ปลั๊กอินและแบบฝึกหัดฟรีจากนักพัฒนา. อย่างไรก็ตามกริดก่ออิฐนั้นมีความแข็งแรงกว่าในการสร้างเนื่องจากพวกเขา ไม่พอดีทั่วทั้งหน้า. คุณจะมีความกว้างขนาดคงที่สำหรับคอลัมน์ยกเว้น ความสูงของรายการอาจแตกต่างกันมาก. ในการทำ กริดก่ออิฐพิกเซลที่สมบูรณ์แบบ คุณต้องการปลั๊กอินเช่น Bricks.js. ปลั๊กอินนี้เป็นโอเพ่นซอร์สทั้งหมดและรวดเร็วอย่างน่าขัน มันจะ แสดงผลกริดในเวลาน้อยกว่าครึ่งวินาที, แม้จะมีหลายสิบรายการในหน้า. คนส่วนใหญ่รู้จักกริดก่ออิฐฉาบปูนจาก Pinterest เนื่องจากพวกเขานิยมใช้เลย์เอาต์ แต่มันก็โตขึ้นเรื่อย ๆ ใช้ในเว็บไซต์อื่น ๆ อีกมากมาย, เกินไป. ในการเริ่มต้นกับ Bricks.js คุณต้องมี เนื้อหาบางส่วน และ...

นักออกแบบ UX ทะเลาะกันเรื่องการใช้ เมนูแฮมเบอร์เกอร์ ในการออกแบบเว็บ พวกเขา ตอบสนองวัตถุประสงค์สำหรับผู้ใช้มือถือ แต่ยัง มีการค้นพบที่ต่ำกว่า. ฉันไม่สามารถบอกได้ว่าพวกเขาควรจะใช้เว็บไซต์ของคุณหรือไม่ แต่ถ้าคุณกำลังมองหาวิธีที่ง่าย ตั้งค่าเมนูเลื่อน จากนั้น Slidebars Framework เป็นทรัพยากรที่มีประโยชน์. Slidebars นั้นฟรีและโอเพ่นซอร์สที่สร้างขึ้นทั้งหมด ด้านบนของไลบรารี jQuery. มันทำงานเหมือนที่คุณคาดหวังว่าคุณจะคลิกที่ไอคอนแฮมเบอร์เกอร์เพื่อเปิดเมนูเลื่อนและมัน ผลักหน้าจอ off-canvas เพื่อให้มีที่ว่าง. คุณสมบัติหนึ่งที่ฉันชอบเป็นพิเศษคือ แตะเพื่อซ่อนการตั้งค่า ที่ซึ่งคุณสามารถแตะที่ใดก็ได้ในหน้าเพื่อ ซ่อนเมนูทันที. สิ่งนี้ไม่ได้อยู่ในปลั๊กอินเมนูแบบเลื่อนทุกครั้ง แต่เป็นคุณลักษณะที่ปรับปรุงประสบการณ์การใช้งานของผู้ใช้อย่างมาก....

คุณสามารถค้นหา mockups อุปกรณ์ออนไลน์ฟรีมากมายตั้งแต่ PSDs ไปจนถึงไฟล์ Sketch แต่จะทำอย่างไรถ้าคุณทำได้อย่างรวดเร็ว สร้างอุปกรณ์จำลองในทันที ในเบราว์เซอร์ของคุณ? ขอบคุณเพื่อน ๆ ที่ rm-labo คุณทำได้! ปลั๊กอิน jQuery ฟรีของพวกเขา DeviceMock.js ช่วยให้คุณ ล้อมรอบอุปกรณ์เวกเตอร์รอบองค์ประกอบหน้าใด ๆ, ใช้ JavaScript และ SVG ง่าย ๆ. ดังนั้นวิธีนี้ทำงานอย่างไร? ก่อนอื่นคุณต้อง สำเนาของ...