ดูการออกแบบสำหรับอุปกรณ์มือถือ

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

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

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

การวางแผนประสบการณ์ผู้ใช้ที่แข็งแกร่ง

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

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

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

ทำให้หน้าสั้นและหวาน

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

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

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

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

การสร้างสไตล์ CSS บนมือถือ

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

(ที่มาของภาพ: Smashing Magazine)

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

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

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

ออกแบบเว็บไซต์สำหรับ iPhone

ส่วนแบ่งการตลาดมือถือนั้นค่อนข้างใหญ่และถูกแบ่งออก แต่ Apple ได้รับส่วนแบ่งขนาดใหญ่ของ iDevices ทั้ง iPhone และ iPad เป็นอุปกรณ์เชื่อมต่ออินเทอร์เน็ตบนมือถือที่มีฟังก์ชั่นหน้าจอสัมผัสในตัว มันมีเว็บเบราว์เซอร์เริ่มต้นเดียวกัน Safari และโฮสต์ทั้งหมดของตัวเลือกอื่น ๆ.

สำหรับเว็บไซต์เฉพาะ iPhone คุณจะต้องกำหนดเป้าหมายขนาดหน้าจอ ขนาดหน้าจอคงที่ถูกตั้งค่าเป็น 320px คูณ 480px สำหรับ iPhone รุ่นเก่า และ 640px คูณ 960px สำหรับ iPhone 4 และ iPhone 4S.

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

โดยพื้นฐานแล้วตรรกะดึงโลกของเรา $ _SERVER ตัวแปรสำหรับเอเจนต์ HTTP และตรวจสอบว่าคำนั้น “iPhone” ปรากฏขึ้นทุกที่ ถ้าใช่เรารู้ว่าผู้เยี่ยมชมของเรากำลังใช้ iPhone และจากนั้นเราสามารถวาง HTML ที่แตกต่างกันเล็กน้อยหรือแม้กระทั่งเค้าโครงแม่แบบใหม่ทั้งหมด! สิ่งนี้สามารถใช้ในการ รวมสไตล์ชีทเฉพาะของ iPhone, เปลี่ยนชื่อหน้าของคุณลบภาพหรือเอฟเฟกต์ไดนามิกเกือบทั้งหมด.

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

หน้าจอ @ สื่อและ (ความกว้างอุปกรณ์สูงสุด: 960px) / * iPhone css * / 

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

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

การเขียนสคริปต์ jQuery บนมือถือ

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

jQuery Mobile นั้นแตกต่างจาก jQuery ปกติเล็กน้อยเพราะมันให้สภาพแวดล้อมที่สมบูรณ์ในการสร้าง เมื่อคุณทำงานกับไฟล์ของพวกเขาพวกเขาไม่ได้เป็นเพียง JavaScript แต่ยังสไตล์ CSS สำหรับปุ่มลิงค์และผลการเปลี่ยนแปลง คุณยังคงเขียนเว็บเพจเป็นรหัส HTML แต่ทีม jQuery Mobile มี มีฟีเจอร์การออกแบบ UI เพิ่มเติมให้เลือกมากมาย. มีหลายสิ่งที่เราสามารถทำได้ด้วยกรอบนี้ แต่เนื่องจาก กรอบยังคงอยู่ในรุ่นเบต้า, ลองทำเอฟเฟกต์ง่ายๆ.

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

เอฟเฟกต์และการเปลี่ยนภาพนั้นค่อนข้างเรียบร้อยและความจริงที่ว่าคุณสามารถสร้างอินเทอร์เฟซมือถือทั้งหมดอย่างเคร่งครัดด้วย jQuery ยังเป็นก้าวสำคัญสำหรับแพลตฟอร์มนี้ แต่ด้วยแพลตฟอร์มในรุ่นเบต้าเท่านั้นฉันไม่แนะนำให้สร้างเว็บไซต์มือถือทั้งหมดด้วย ห้องสมุดของพวกเขาโดยเฉพาะอย่างยิ่งกับความจริงที่ว่า ไม่ได้รับการสนับสนุนจากสมาร์ทโฟนหลักทั้งหมดในขณะเขียน (โดยเฉพาะ Windows Phone 7) แต่มันจะดีขึ้นเมื่อเวลาผ่านไป.

ในที่สุดฉันขอแนะนำให้ทำความคุ้นเคยกับกรอบมือถือใหม่นี้ ก่อน การปรับใช้สดในโครงการใด ๆ.

เครื่องมือสำหรับนักพัฒนาที่มีประโยชน์

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

Opera Mobile Emulator

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

อีมูเลเตอร์ไม่รองรับ 20 โปรไฟล์มือถือ เช่น Samsung Galaxy S, HTC Desire และแม้กระทั่งแท็บเล็ตเช่น Motorola Xoom เป็นไปได้ที่จะตั้ง ความละเอียดที่กำหนดเอง และ ความหนาแน่นของพิกเซล สำหรับวัตถุประสงค์ในการทดสอบอย่างเข้มข้น เหนือสิ่งอื่นใดคุณไม่จำเป็นต้องทำการกำหนดค่ามากเกินไปเพียงแค่คลิกไม่กี่ครั้งก็ทำได้ดี.

การดาวน์โหลดนั้นไม่มีค่าใช้จ่ายใด ๆ ทั้งสิ้นและซอฟต์แวร์ทำงานได้ทั้งใน Mac OS X และ Windows นักพัฒนาซอฟต์แวร์ของพวกเขาทำงานอย่างหนักเพื่อสร้างมาตรฐานเว็บที่เหมาะสมและปรับแต่งเอ็นจิ้นการแสดงผลบนมือถือ ฉันแนะนำเครื่องมือ dev อื่น ๆ ของพวกเขาหากคุณกำลังมองหาเครื่องมือพิเศษที่จะช่วยคุณไปตลอดทาง.

PhoneGap

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

กระบวนการทำงานโดยการบีบอัดรหัสของคุณและส่งผ่านเฟรมเวิร์กแอปพลิเคชันของ PhoneGap จากนั้นแอพของคุณสามารถเข้าถึงตลาดมือถือส่วนใหญ่รวมถึง Android, iOS, Windows Phone 7 และ BlackBerry.

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

Aptana Studio

เว็บไซต์ Aptana เป็นสถานที่ชั้นนำสำหรับการเรียนรู้เกี่ยวกับเครื่องมือในการพัฒนาของพวกเขา การเปิดตัวชุดล่าสุด Aptana 3.0.3 มี IDE แบบครบวงจรสำหรับการพัฒนาเว็บสไตล์ CSS และการวางแท็ก HTML และส่วนที่ดีที่สุด: Aptana นั้นสมบูรณ์ ฟรี ดาวน์โหลด! พวกเขาเสนอแพ็คเกจสำหรับระบบปฏิบัติการหลักทั้ง 3 (รวมถึง Linux) ซึ่งเป็นความสะดวกสบายอย่างมากสำหรับนักพัฒนา.

สิ่งที่ทำให้ Aptana พิเศษคือความรวดเร็วในการพัฒนาเว็บแอปพลิเคชั่นขนาดเล็กและทดสอบการออกแบบของคุณ สตูดิโอสวีทช่วยให้คุณ พัฒนาและทดสอบเว็บแอปพลิเคชันที่รันบน Ruby on Rails, PHP, Python หรือ HTML / CSS อย่างรวดเร็ว, และฟีเจอร์การไฮไลต์รหัสของพวกเขาเพิ่งได้รับการปรับปรุงให้ดีขึ้น รวมไลบรารีแท็ก HTML5 และ CSS3 ใหม่. นอกจากนี้ยังมาพร้อมกับการรวม Git, เทอร์มินัลในตัว, โปรแกรมดีบั๊กและคุณสมบัติอื่น ๆ อีกมากมาย.

ชุดและไอคอน GUI มือถือ

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

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

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

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

iOS 5 GUI Kit

องค์ประกอบของเวกเตอร์ UI ของ iPhone

ชุดไอคอนแอป iPhone

โครงลวดแม่เหล็ก (ชุด DIY)

GUI อินเตอร์เฟสของ Android