โฮมเพจ » UI / UX - หน้า 2

    UI / UX - หน้า 2

    ทำความเข้าใจเกี่ยวกับการเขียนตัวอักษรสำหรับเว็บ
    ในการออกแบบเว็บหัวเรื่องของการพิมพ์มีความสำคัญเมื่อพิจารณาทุกด้านของประสบการณ์ผู้ใช้ ทุกเว็บไซต์มีความต้องการข้อความและมีแนวทางที่คุณสามารถติดตามเพื่อสร้างเลย์เอาต์ที่สวยงามเป็นพิเศษ เส้นตาราง, ตัวอักษร, ความสูงของตัวอักษร, ระยะห่างของข้อความ, โทนสีและคุณสมบัติอื่นที่คล้ายคลึงกันควรนำมาพิจารณาด้วย. ในบทความนี้ฉันต้องการเจาะลึกถึงขอบเขตของการพิมพ์เว็บ เราจะตรวจสอบ แนวคิดยอดนิยมที่อยู่เบื้องหลังการออกแบบข้อความหน้าเว็บที่น่าเชื่อถือ. ระหว่างทางฉันจะแนะนำเล็กน้อย คุณสมบัติ CSS3 ที่เป็นประโยชน์ นักออกแบบคนไหนที่มักจะลืม. ฉันพยายามที่จะให้ความสำคัญกับทฤษฎีและอุดมการณ์ของเว็บมากขึ้น สิ่งนี้จะให้ความสำคัญกับข้อความดิจิตอลที่กว้างขึ้นโดยทั่วไปและคุณนักออกแบบเว็บไซต์สามารถเลือกสไตล์ที่จะใช้สำหรับวัตถุประสงค์ใดก็ได้ บริบทเป็นกุญแจสำคัญเสมอและคุณต้องพิจารณาสิ่งนี้อย่างเหมาะสมสำหรับแต่ละโครงการที่คุณทำงาน พิจารณาคู่มือนี้เป็นข้อมูลอ้างอิงเกี่ยวกับแพ็คเก็ตที่เต็มไปด้วยเทรนด์เว็บที่ทันสมัยจากนักประดิษฐ์ด้านการพิมพ์ทั่วโลก. วัดย่อหน้าของคุณ คุณไม่จำเป็นต้องหยุดยั้งหลาสำหรับการวัดแบบนี้ จริงๆแล้วการวัดที่เกี่ยวข้องกับการพิมพ์หมายถึงความกว้าง (แนวนอน) ของย่อหน้าที่ให้ไว้ในหน้าของคุณ ไม่ใช่หัวข้อที่กล่าวถึงเสมอ แต่จะมีผลต่อความสามารถในการอ่านเนื้อหาของคุณ ตามกฎทั่วไปของหัวแม่มือคุณต้องการ จำกัด บรรทัดเดียวที่มีความยาวประมาณ 75-85...
    การทำความเข้าใจวิชาการพิมพ์ 10 เครื่องมือและทรัพยากรที่มีประโยชน์
    ในบทความล่าสุดของฉันเกี่ยวกับการทำความเข้าใจวิชาการพิมพ์ฉันเขียนเกี่ยวกับสิ่งที่จะเข้าสู่การออกแบบตัวอักษรและวิธีการจัดการเพื่อปรับปรุงเค้าโครงของเว็บไซต์ของคุณและเพื่อเพิ่มประสบการณ์ผู้ใช้ ในบทความนี้ฉันกำลังแสดงรายการ 10 เครื่องมือที่ฉันชอบสำหรับการพิมพ์ บนเว็บ. สิ่งเหล่านี้สามารถช่วยสร้างกริด HTML และพื้นที่เนื้อหาสร้างสไตล์ CSS สร้างชื่อแบบอักษรและสิ่งดีๆอื่น ๆ ลองใช้ลิงค์ด้านล่างและอย่าลืมแจ้งให้เราทราบความคิดเห็นของคุณในส่วนของการโพสต์การสนทนา. อ่านหนังสือที่แนะนำ: ทำความเข้าใจเกี่ยวกับวิชาการพิมพ์: การเขียนสำหรับเว็บ เมทริกซ์แบบอักษร คู่มือออนไลน์นี้ถูกโพสต์โดยบล็อกการออกแบบ 24ways มันมีตารางเมทริกซ์ของแบบอักษรเว็บมาตรฐานทั้งหมดที่คุณจะพบโดยค่าเริ่มต้นจากผู้จำหน่ายซอฟต์แวร์ต่างๆ ชื่อที่ได้รับความนิยม ได้แก่ Windows, Mac OS X, Microsoft Office และโปรแกรม Adobe Creative...
    UI Movement - แอนิเมชั่นอินเทอร์เฟซที่ยอดเยี่ยมสำหรับคุณแรงบันดาลใจ
    นอกเหนือจากการเยาะเย้ย UI แบบคงที่มาใหม่กว่า สินทรัพย์การออกแบบตามการเคลื่อนไหว. คุณสามารถหาของฟรีมากมายในเว็บและมันก็ดีสำหรับการศึกษาองค์ประกอบ UI / UX แบบเคลื่อนไหว. และถ้าคุณกำลังมองหาสิ่งที่ยิ่งใหญ่ แกลเลอรี่ที่รวบรวมไว้ของส่วนต่อประสานการเคลื่อนไหว คุณต้องตรวจสอบ การเคลื่อนไหวของ UI. เว็บไซต์ดามัสก์นับร้อยแห่ง mockups อินเตอร์เฟสแบบเคลื่อนไหว จากในเว็บ นอกจากนี้ยังมีจดหมายข่าวรายสัปดาห์จัดแสดง ภาพเคลื่อนไหว UI ห้าอันดับแรก สำหรับสัปดาห์ที่ผ่านมา ภาพเคลื่อนไหวเหล่านี้มาจากทั่วทุกมุมเว็บและมักถูกส่งโดยนักออกแบบที่มีทักษะ. ในยุคการออกแบบที่ทันสมัยของเรามันเป็นเรื่องธรรมดามากสำหรับผู้ออกแบบ UI ดั้งเดิม ปรับใช้ทักษะ UX. นี่เป็นเหตุผลเพียงพอที่จะศึกษาภาพเคลื่อนไหวที่ใช้กับองค์ประกอบอินเทอร์เฟซ....
    หน้า GitHub นี้แสดงรายการทางเลือกที่ไม่ใช่ JS สำหรับคุณสมบัติ UI ทั่วไป
    คุณต้องการกี่ครั้ง สร้างสไลด์โชว์ CSS-only อย่างรวดเร็วหรือหน้าต่าง modal? เหล่านี้คือบางส่วนของ องค์ประกอบ UI ที่พบบ่อยที่สุด บนเว็บและทุกวันนี้คุณสามารถสร้างมันได้โดยไม่ต้องใช้ JavaScript. แน่นอนว่าเป็นไปได้ที่ Google จะมองหาวิธีแก้ปัญหา แต่ทำไมไม่ เลือกจากรายการที่ดูแล ทรัพยากรที่ยอดเยี่ยม? นั่นคือสิ่งที่หน้า GitHub นี้เข้ามาเล่น มันมีชื่อว่า "คุณไม่ต้องการ JavaScript", และนำเสนอรายการโซลูชั่นที่ใช้การได้ขนาดใหญ่สำหรับ องค์ประกอบส่วนต่อประสานทั่วไป. สิ่งหนึ่งที่ควรทราบคือรหัสเหล่านี้ ไม่สิ้นสุดโซลูชัน be-all ทั้งหมด. ไม่ใช่ทุกสิ่งในรายการที่รองรับเบราว์เซอร์ทั้งหมดและโซลูชันเหล่านี้จำนวนมากไม่สามารถจัดการกับการเสื่อมสภาพหรือปัญหาเกี่ยวกับเบราว์เซอร์มือถือได้อย่างสมบูรณ์...
    Javascript ของขนาด 500 ไบต์นี้สามารถทำนายการย้ายเคอร์เซอร์ของผู้ใช้ได้
    คุณสามารถทำสิ่งที่ยอดเยี่ยมด้วย JavaScript และรหัสโอเพนซอร์สทำให้การทำงานง่ายยิ่งขึ้น. Premonish เป็นหนึ่งในห้องสมุดที่เจ๋งที่สุดที่ฉันเคยเห็นและมันถูกสร้างขึ้นด้วย JavaScript เพียง 500 ไบต์. ด้วยปลั๊กอินนี้คุณสามารถตรวจสอบว่าเมาส์ของผู้ใช้เลื่อนไปอยู่ที่ใดและคาดเดาว่าองค์ประกอบใดที่พวกเขากำลังมุ่งหน้าไป. สิ่งนี้อาจฟังดูเป็นความคิดที่ซับซ้อน แต่การนำไปปฏิบัติได้ค่อนข้างง่าย ไม่ต้องพูดถึงข้อเสนอนี้ ตัน โอกาสสำหรับนักพัฒนาในการสร้างเอฟเฟกต์เจ๋ง ๆ เช่น ภาพเคลื่อนไหวก่อนวางเมาส์ หรือ เอฟเฟกต์เค้าโครงแบบไดนามิก. คุณเริ่มต้นด้วย การกำหนดเป้าหมายองค์ประกอบ บนหน้าและ กำหนดว่ามันจะมีลักษณะ เมื่อผู้ใช้เคลื่อนไปยังองค์ประกอบนั้น. การคำนวณทั้งหมดทำที่แบ็กเอนด์ด้วยห้องสมุด Premonish ดังนั้นคุณไม่จำเป็นต้องกังวลเกี่ยวกับคณิตศาสตร์หรือตรรกะเบื้องหลังสิ่งนี้. คุณกำลังมองหาวิธีการแทน จัดการกับการทำนาย...
    ทดสอบความเป็นเพื่อนบนมือถือของเว็บไซต์ด้วยเครื่องมือ Google นี้
    ปี 2559 สร้างประวัติศาสตร์เมื่อ การใช้อินเทอร์เน็ตบนมือถือเกินเดสก์ทอป เป็นครั้งแรกเลยทีเดียว มันควรจะชัดเจนอย่างล้นเหลือว่า ไม่สามารถเพิกเฉยต่อการออกแบบเว็บที่ตอบสนองได้. แต่เพียงเพราะคุณสร้างเค้าโครงที่ตอบสนองได้ไม่ได้หมายความว่าประสบการณ์ของผู้ใช้จะยอดเยี่ยม คุณจำเป็นต้องพิจารณาเสมอ การใช้งานบนอุปกรณ์ต่าง ๆ และ เวลาในการโหลดหน้าเว็บทั้งหมด. Google เพิ่งเผยแพร่ เครื่องมือใหม่เอี่ยม เรียกว่า เครื่องมือเพิ่มความเร็วในการทดสอบเว็บไซต์มือถือ. ด้วยแอปพลิเคชันเว็บนี้คุณสามารถทำได้ วิเคราะห์เว็บไซต์ใด ๆ และ ได้รับคะแนน ขึ้นอยู่กับความเร็วในการโหลดโดยเฉลี่ยของไซต์และลักษณะการออกแบบที่ตอบสนองโดยรวม. คุณเพียงแค่ ป้อนโดเมน และ ปล่อยให้มันวิ่ง. การทดสอบสามารถ ใช้เวลาไม่กี่นาที...
    สิบ Wireframe Kits คุณสามารถดาวน์โหลดได้ฟรี
    ในฐานะนักออกแบบคุณจะต้องผ่านหลายขั้นตอนในขณะที่คุณทำงานในโครงการของคุณตั้งแต่การออกแบบความคิดของคุณบนกระดาษจนถึง สร้าง wireframes เพื่อปรับแต่งต้นแบบของคุณในที่สุด. หากคุณมีหลายโครงการจะต้องใช้เวลาพอสมควรในการสร้างทุกอย่างตั้งแต่เริ่มต้น. ในโพสต์นี้เรารวบรวมชุดโครงลวด 10 อันที่สามารถทำได้ ช่วยเหลือคุณในกระบวนการ wireframing. ด้วยการใช้ชุดเครื่องมือเหล่านี้คุณสามารถทำงานได้เร็วขึ้นและมีประสิทธิภาพมากขึ้นและจากนี้ไปคุณสามารถเริ่มต้นโครงการและ เพิ่มความเร็วเวิร์กโฟลว์การออกแบบ UX ของคุณ. ชุดสายไฟออกแบบวัสดุ นี้ ชุดสายไฟออกแบบวัสดุ ได้รับการรวบรวมขนาดใหญ่มากผู้สร้างจะต้องโฮสต์มันไว้ใน Dropbox เพื่อให้สามารถใช้งานได้สำหรับทุกคน จนถึงตอนนี้ก็มี 41 หน้าจอ ที่จัดเตรียมไว้รวมถึงหน้าจอรายชื่อติดต่อ e-Commerce เนื้อหาข้อความการตั้งค่าหน้าและอื่น ๆ ดาวน์โหลดไฟล์ Sketch ได้ที่นี่....
    เลื่อนเต็มหน้าอย่างราบรื่นด้วยปลั๊กอิน jQuery viewScroller.js
    ผลการเลื่อน JavaScript เป็นเวลาหลายปีแล้วที่มีห้องสมุดดีๆมากมายให้เลือก แต่คู่แข่งรายใหม่ในสนามคือ viewScroller.js. ห้องสมุดขนาดเล็ก แต่ทรงพลังสามารถสร้างได้ เค้าโครงหน้าเดียว ที่ เลื่อนเป็นบล็อก ด้วยการเลื่อนหนึ่งครั้งของล้อเลื่อน (หรือทัชแพด) สิ่งนี้จะสร้างเค้าโครงที่มีการควบคุมซึ่งการเลื่อนจะเลื่อนผู้ใช้ไปยังส่วนต่างๆของหน้าด้วย ความแม่นยำของพิกเซลแน่น. โดยธรรมชาติแล้วนี่เป็นห้องสมุดที่ไม่มีค่าใช้จ่าย มีอยู่ใน GitHub และติดตั้งง่าย กับ Bower หรือ npm. อย่างไรก็ตาม viewScroller.js คือ ไม่ ไลบรารี JavaScript อิสระ. มันพึ่งพา...