เนื้อหา
- 01. ผ้าใบพื้นฐาน
- 02. องค์ประกอบของอินเทอร์เฟซ
- 03. ข้อมูลผู้ใช้
- 04. รูปแบบกล่องจดหมาย
- 05. รายการอีเมล
- 06. ปุ่มใหม่
- สรุป
เรากำลังสร้างการออกแบบแอปพลิเคชัน iOS 7 โดยใช้คุณสมบัติที่น่าตื่นเต้นที่สุดของระบบปฏิบัติการมือถือใหม่ของ Apple iOS 7 ของ Apple นำเสนอรูปลักษณ์ใหม่ของระบบปฏิบัติการ iPhone และ iPad คำแนะนำทั่วไปสำหรับการออกแบบอินเทอร์เฟซแอปพลิเคชัน iOS 7 สรุปได้ดังนี้:
- แบน - แนวทางการออกแบบของ Apple สำหรับ iOS 7 ส่งเสริมความเรียบง่ายใช้งานได้และแนวทางที่ใช้งานง่าย แอพที่ออกแบบใหม่บางแอพ (และในรูปแบบของ Apple เอง) ต่อต้านลักษณะบางอย่างของการออกแบบที่แบนราบ แต่อย่าใช้มันมากเกินไป ตัวอย่างเช่นแป้นพิมพ์และปุ่มต่างๆที่แสดงจะไม่แบน 100 เปอร์เซ็นต์ ตัวอักษรทุกตัวจะอยู่ในปุ่มที่มีเงาตกกระทบ เอฟเฟกต์ที่ละเอียดอ่อนนี้มีข้อดีบางประการและเป็นสิ่งที่ทำให้แตกต่างจากแนวทางที่เรียบโดยสิ้นเชิง
- สี - สีสำหรับแอปพลิเคชัน iOS 7 ควรจะสดใสอิ่มตัวและน่าดึงดูด แม้ว่าแอป iOS 7 ที่มาพร้อมเครื่องจะไม่เป็นไปตามนั้นเสมอไป ตัวอย่างเช่นดูแอปอีเมลหรือข้อความ
- วิชาการพิมพ์ - เนื้อหามีลักษณะการพิมพ์ที่มีน้ำหนักเบา แบบอักษรคือ Helvetica Neue Light
- เค้าโครง - เน้นอินเทอร์เฟซที่เบาและใช้งานง่ายโดยมีสไตล์เลเยอร์ขั้นต่ำหรือไม่มีเลย
เมื่อคุณมีโครงร่างของคุณแล้วเราสามารถเริ่มสร้างการออกแบบต่อไปได้
01. ผ้าใบพื้นฐาน
มาสร้างผ้าใบพื้นฐานเพื่อวางองค์ประกอบ UI สร้างผืนผ้าใบขนาด 640x1138px ใน Photoshop ด้วยพื้นหลังโปร่งใส แอปพลิเคชันควรจะเข้าถึงได้ใช้งานได้และเน้นเนื้อหาดังนั้นเราจะไม่ใช้สีที่บ้าคลั่งสำหรับพื้นหลัง
เราจะจองสีตราสินค้าของเรา (สีม่วงมะเขือ) ไว้ที่แถบด้านบนแทน แถบด้านบนมักมีความสูง 100px (เมื่อเริ่มต้นด้วย iOS 7 แถบสถานะเป็นส่วนหนึ่งของอินเทอร์เฟซแถบด้านบนดังนั้นอย่าลืมรวมไว้ในการออกแบบของคุณหากคุณยังไม่เคยทำมาก่อน)
สร้างสี่เหลี่ยมผืนผ้าทึบขนาด 640x100px ที่ด้านบนสุด โดยปกติฉันจะใช้การซูมสูงสุด 3200% เพื่อให้แน่ใจว่าการออกแบบนั้นสมบูรณ์แบบพิกเซล
หากคุณเรียนรู้แป้นพิมพ์ลัดพื้นฐานคุณจะสามารถทำสิ่งเหล่านี้ซ้ำได้ในพริบตา เริ่มต้นด้วยผืนผ้าใบโปร่งใสและสร้างหน้าจอสองสามหน้าจอที่จะใช้ในบางส่วนของโฟลว์
02. องค์ประกอบของอินเทอร์เฟซ
โลโก้ของแอปเป็นแบบวงกลมซึ่งเป็นสาเหตุที่ทำให้ฉันตัดสินใจใช้โลโก้นี้เพื่อแจ้งองค์ประกอบอินเทอร์เฟซ แทนที่จะมีเส้นแนวตั้งสามเส้นมาตรฐานสำหรับเมนูเรามาสร้างสรรค์กันเถอะ! วาดวงกลมขนาด 12x12px เติม #fff คัดลอกสามครั้งแล้ววางตามที่แสดงบนรูปภาพ ช่องว่างระหว่างวงกลมคือ 8px
ทางด้านขวาเราจะมี "การตั้งค่า" มาสร้างสิ่งที่คล้ายกันสำหรับไอคอนการตั้งค่า: วงกลม 10x10px ที่มีเส้นขีดด้านนอกกว้าง 4px คุณสามารถสร้างเส้นโครงร่างนี้ได้โดยวาดวงกลมที่มีเส้นผ่านศูนย์กลาง 42px และลบวงกลมด้านในที่มีเส้นผ่านศูนย์กลาง 34px วางไอคอนทางด้านซ้ายและด้านขวาอย่างเหมาะสมโดยให้มีพื้นที่ 20px ในแต่ละด้าน ชื่อของเพจนี้คือ "โปรไฟล์" ซึ่งอยู่กึ่งกลางในแนวนอน แบบอักษรคือ Helvetica Light และขนาดตัวอักษรคือ 36px
พยายามใช้แถบด้านบนเป็นพื้นฐานสำหรับสีของแบรนด์ในการออกแบบแอปของคุณ ตัวอย่างที่ดีสามารถดูได้ในแอพ Facebook และ Instagram สำหรับ iPhone
03. ข้อมูลผู้ใช้
เรามาวาดพื้นที่ข้อมูลผู้ใช้ซึ่งประกอบด้วยชื่อสถานที่และรูปภาพของผู้ใช้ พื้นหลังเป็นสี่เหลี่ยมจัตุรัสสูง 222px วางรูปถ่ายตัวอย่างและสร้างมาสก์โดยใช้เครื่องมือ Clipping Mask จัดกึ่งกลางภาพให้เหมาะสม
เค้าโครงที่ใช้การถ่ายภาพควรได้รับการออกแบบอย่างรอบคอบโดยคำนึงถึงการใช้เลย์เอาต์ เราจะวางข้อความไว้ด้านบนดังนั้นเราจึงต้องตรวจสอบให้แน่ใจว่าคอนทราสต์ดีและสามารถเข้าถึงข้อความได้ ตรวจสอบให้แน่ใจว่าคุณได้ทดสอบการมองเห็นข้อความด้วยภาพถ่ายที่แตกต่างกันในพื้นหลัง ฉันเลือกข้อความที่มีเงา #fff และ 1px
เพื่อให้ได้คอนทราสต์มากขึ้นเราจะเพิ่มการไล่ระดับสีดำบางส่วนให้กับพื้นหลัง สร้างสี่เหลี่ยมผืนผ้าและใช้ Clipping Mask กับมัน
อย่าปรับขนาดการถ่ายภาพด้วยเครื่องมือ Transform คุณภาพจะต้องทนทุกข์ทรมานอย่างมาก ให้ใช้เครื่องมือ Image Size แทนและปรับขนาดให้เล็กลงตามขนาดที่คุณต้องการ เพื่อผลลัพธ์ที่ดีที่สุดให้ใช้ซอฟต์แวร์ระดับมืออาชีพเช่น Adobe Lightroom ซึ่งจะส่งออกไฟล์ตามขนาดที่กำหนด
ใช้เทคนิคนี้เพื่อให้ได้คอนทราสต์ที่ดีขึ้นเพื่อให้สามารถใช้การถ่ายภาพเป็นพื้นหลังได้จึงให้ความยืดหยุ่นแก่ผู้ใช้
04. รูปแบบกล่องจดหมาย
ตอนนี้เรากำลังสร้างเค้าโครงกล่องจดหมาย เริ่มต้นด้วยแถบด้านบนสำหรับส่วนกล่องจดหมาย สร้างสี่เหลี่ยมผืนผ้าขนาด 640x100px โดยมี # 3a3e4b ทึบเป็นพื้นหลัง ส่วนด้านซ้ายจะเป็นลูกศรเพื่อกลับไปที่เมนูกล่องจดหมาย สร้างสี่เหลี่ยมผืนผ้า # 2e988d แบบทึบซึ่งมีขนาด 100x100px
นี่คือจุดที่มีประโยชน์ในการ Wireframing คุณสามารถมีเลย์เอาต์เดียวกันได้หลายรูปแบบ แต่การโต้ตอบที่แน่นอนจะบอกคุณได้ว่าอันไหนใช้งานได้มากที่สุด
การใช้สีเสริมในการออกแบบแอปเป็นสิ่งสำคัญอย่างยิ่ง เล่นกับสีบางสีใช้คำแนะนำทฤษฎีสีและอย่าลืมใช้สีของแบรนด์ในขณะที่คุณไป (มีแหล่งข้อมูลออนไลน์บางส่วนที่สามารถช่วยให้คุณเรียนรู้เกี่ยวกับทฤษฎีสีและวิธีการรวมสีสำหรับ UI ของคุณสิ่งที่ฉันชอบสำหรับการออกแบบแอปพลิเคชันคือไซต์ชุมชนสร้างสรรค์ COLORlovers (colorlovers.com)
ในการออกแบบไอคอนลูกศรให้สร้างสี่เหลี่ยมผืนผ้า 19x4px เติมด้วย solid #fff แล้วใช้ Transform / Rotate เป็นมุม 45 คัดลอกสี่เหลี่ยมผืนผ้าใช้ Transform / Flip Vertical ลากเพื่อสร้างรูปร่างลูกศร ผสานรูปร่าง โวล่า!
วางชื่อ "กล่องจดหมาย" 70px จากด้านซ้าย ตรวจสอบให้แน่ใจว่าจัดวางในแนวตั้ง จากนั้นสร้างวงกลมที่มีพื้นหลัง # 141516 วางตัวเลข 8 ไว้ด้านในและจัดแนวในแนวตั้งและแนวนอน นี่คือการแจ้งเตือนทางอีเมลใหม่
05. รายการอีเมล
สร้างสี่เหลี่ยมผืนผ้าและเติมด้วย #fff ทึบ วาดเส้นขอบ # e3e3e3 และวางไว้ที่ขอบด้านล่างของสี่เหลี่ยมผืนผ้า สร้างวงกลมขนาด 120x120px เติมด้วยสีเทาจับรูปถ่ายของผู้ใช้แล้ววางไว้ด้านบนใช้ Clipping Mask กับมัน
จัดกึ่งกลางในแนวนอนและแนวตั้ง ตรวจสอบให้แน่ใจว่ามี 25px สงวนไว้ทางซ้ายและขวา เพิ่มชื่อผู้ส่งใน # 000 และคัดลอกข้อความใน # 868b98 วางตำแหน่งให้เหมาะสม วันที่ยังอยู่ใน # 000 และมีน้ำหนักตัวอักษรที่เบากว่าโดยจัดชิดขวา ทำซ้ำสามครั้ง
สำหรับรายการที่สม่ำเสมอให้ใช้ #fafafa เป็นสีพื้นหลัง สำหรับรูปแบบที่เน้นเนื้อหา (โปรแกรมอ่านไคลเอนต์อีเมลหนังสือพิมพ์) ให้ใช้พื้นหลังสีอ่อนและข้อความสีเทาเพื่อให้สามารถเข้าถึงได้และอ่านง่ายบนหน้าจอขนาดเล็ก
06. ปุ่มใหม่
สร้างวงกลมที่มีเส้นผ่านศูนย์กลาง 102px และเติมด้วย solid # ec2e49 วางไว้ด้านล่างขวา ออกแบบไอคอนปากกาขนาด 40x40px วางบนวงกลมและจัดแนวในแนวตั้งและแนวนอน ให้ไอคอนมีความทึบ 90% หากต้องการเพิ่มเชอร์รี่ลงในเค้กของคุณปุ่มที่ปรากฏขึ้นอย่างสวยงามท่ามกลางอินเทอร์เฟซแสงโดยรวมจะเพิ่มรายละเอียดสุดท้ายและความสนใจให้กับ UI ของแอปของคุณ
สรุป
คุณได้ออกแบบอินเทอร์เฟซของแอปพลิเคชัน iPhone ที่ทันสมัยซึ่งมีรูปแบบกล่องจดหมายและรูปแบบโปรไฟล์ลองเล่นกับเค้าโครงเพิ่มพื้นหลังโมเสคให้กับชิ้นส่วนโปรไฟล์ผู้ใช้และสร้างเมนู อย่าลืมออกแบบและกำหนดการทำงานของเมนู คุณยังสามารถเพิ่มการโต้ตอบโดยใช้ Adobe After Effects หรือเครื่องมือออกแบบที่คล้ายกัน จัดส่ง!
คำ: Julia Khusainova
Julia Khusainova เป็นนักออกแบบผลิตภัณฑ์อาวุโสที่เชี่ยวชาญด้าน UI / UX การออกแบบภาพและอุปกรณ์เคลื่อนที่และการวางโครงร่างบทความนี้เคยปรากฏในนิตยสาร net ฉบับ 250
