เคล็ดลับและตัวอย่างเว็บไซต์นักฆ่าออกแบบเว็บไซต์มือถือ

ฉากมือถือมีการเติบโตชี้แจงในช่วงสองสามปีที่ผ่านมา iOS App Store พร้อมกับ Android Apps บน Google Play ได้กลายเป็นฮอตสปอตสองแห่งสำหรับผู้ที่ชื่นชอบสมาร์ทโฟน ในขณะที่จำนวนผู้ใช้สมาร์ทโฟนเพิ่มขึ้นเราเห็นผู้พัฒนาแอพมือถือหลายร้อยรายเปิดตัวแนวคิดใหม่สู่ตลาด.

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

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

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

ภาพหน้าจอของอุปกรณ์

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

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

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

ป้ายของ App Store

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

ฉันชอบใช้ Instagram เป็นตัวอย่างตั้งแต่เว็บไซต์อัปเดตเป็นเลย์เอาต์ที่ใหม่กว่า พวกเขามีป้ายที่รองรับ Android Marketplace (Google Play) และ iOS App Store ป้ายทั้งสองออกแบบได้ง่ายมาก แต่ยังจดจำได้ง่าย หากคุณกำลังมองหาการออกแบบที่ซับซ้อนมากขึ้นฉันขอแนะนำการค้นหาน้ำลายไหลอย่างรวดเร็ว นักออกแบบที่มีความสามารถมักจะแบ่งปันแนวคิดตราสัญลักษณ์ของแอพสโตร์สำหรับการวิจารณ์เชิงสร้างสรรค์.

เครือข่ายโซเชียลมือถือ

Facebook และ Twitter ได้เปลี่ยนไปใช้มือถือ แต่นี่ไม่ได้หยุดเครือข่ายอื่นจากการแตกหน่อ เราเห็นเครือข่ายสังคมออนไลน์ใช้แอพมือถือเพื่ออนุญาตแพลตฟอร์มการสื่อสารใหม่ทั้งหมด.

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

การแชร์รูปภาพขั้นต่ำ

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

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

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

จากจุดเริ่มต้นต่ำต้อย

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

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

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

ช่องว่างที่น่ารัก

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

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

ภาพประกอบที่มีสีสัน

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

แต่โปรดสังเกตว่าไม่มีภาพอื่น ๆ เมื่อเลื่อนหน้าลง ส่วนบนทั้งหมดนี้ได้รับการออกแบบมาโดยเฉพาะสำหรับแอพ iPhone คล้ายกับ หน้า Landing Page. เวกเตอร์จับตาคุณทันทีและบอกใบ้เกี่ยวกับแอพนี้.

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

สไตล์การออกแบบนี้แทรกซึมผ่านการจัดวางจริงทั้งหมด พื้นที่ท้ายกระดาษตรงกับพื้นหลังไม้ที่คล้ายกันและตัวเลือกที่เหมือนกันมาก นี่เป็นตัวอย่างของรูปแบบเว็บไซต์ที่เรียบง่ายพร้อมกราฟิกที่ทรงพลัง.

เว็บไซต์แอป: ตู้โชว์พรีเมี่ยม

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

แอป Bosquet