ขั้นตอนการออกแบบ My Pet Care App Mock-ups มี 5 ขั้นตอน:

1. คู่แข่งและการวิจัยแนวโน้ม

2. บทสัมภาษณ์ผู้ใช้ — การเอาใจใส่

3. ความคิด

4. โครงลวด

5. แบบจำลอง

ขั้นตอนที่ 1 การวิจัย

อันดับแรก ฉันดูแอป/แอปของคู่แข่งบางแอปที่มีธีมคล้ายกับสิ่งที่ฉันพยายามสร้าง

เหล่านี้รวมถึง:

แดฟนี

ฟลอร์เฟอร์

WWF ร่วมกัน

หมายเหตุเกี่ยวกับ Daphnee:

• 5 Hat Racks ข้อมูลเรียงตามโปรไฟล์ของสัตว์เลี้ยงเป็นหมวดหมู่
• การวางแนวสั้นและข้ามได้
• ภาพประกอบน่ารักเรียบง่าย (ปัจจุบันเป็นเทรนด์ UX)
• มีเพียงข้อมูลพื้นฐานส่วนใหญ่และ 3 ส่วน (การแลกเปลี่ยนความยืดหยุ่น-การใช้งาน)
• แอพสไตล์ Habit Tracker สามารถตรวจสอบงานและตั้งค่าการเตือนสำหรับการนัดหมาย
• สามารถจัดเก็บเวชระเบียนโดยแนบไฟล์
• ใช้เส้นโครงร่างเพื่อให้ดูเป็นมิตร
• สิ่งที่แนบมาใช้เพื่อแยกส่วนต่าง ๆ ของข้อมูลบนพื้นหลังสีขาว

หมายเหตุเกี่ยวกับฟลอร์เฟอร์:

• แกลเลอรี่สไตล์ Pinterest แสดงสัตว์เลี้ยงต่างๆ
• การวางแนวสั้นและข้ามได้
• จัดวันที่สำหรับการฉีดวัคซีนและการนัดหมาย
• ตัวแทนที่โดดเด่นสำหรับส่วนต่างๆ
• ชั้นวางหมวก 5 ชั้น แยกส่วนตามหมวดหมู่
• หลักการความคล้ายคลึงกันของ Gestalt ถูกนำมาใช้เพื่อช่วยให้ผู้ใช้เข้าใจว่าส่วนต่างๆ ของไอคอนมีหน้าที่คล้ายคลึงกันทั้งหมด

หมายเหตุเกี่ยวกับ WWF Together:

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

รายการเทรนด์ UX ปี 2023:

1. ขนาดตัวอักษรขนาดใหญ่และประสบการณ์ที่ดื่มด่ำ

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

2. การออกแบบที่เข้าถึงได้

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

3. การเล่าเรื่องข้อมูล

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

4. ความเรียบง่าย

Minimalism เป็นกระแสที่ได้รับความนิยมมาสักระยะหนึ่งแล้ว การอยู่ห่างจาก Horror Vacui จะทำให้งานออกแบบของฉันดูรกและนำทางยาก

5. โครงสร้างทางเรขาคณิต

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

ขั้นตอนที่ 2 การสัมภาษณ์ผู้ใช้และการเอาใจใส่

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

บุคคล:

ขั้นตอนที่ 3 ความคิด

เมื่อคำนึงถึงผู้ชมเป้าหมายแล้ว ฉันจึงเริ่มคิดหาหน้าจอที่เหมาะกับความต้องการของพวกเขา

ร่างความคิด:

ขั้นตอนที่ 4 โครงลวด

ฉันสร้างแนวคิด Wire framing ที่แตกต่างกัน 3 แบบ แนวคิดที่ 1 มุ่งเน้นไปที่การรับเลี้ยงสัตว์เลี้ยง แนวคิดที่ 2 มุ่งเน้นไปที่ความสวยงามของระบบการออกแบบโฟตอน และแนวคิดที่ 3 มุ่งเน้นไปที่การช่วยการเข้าถึงสำหรับผู้ที่มีสายตาเลือนรางหรือตาบอดสี

แนวคิดที่ 1 (การออกแบบบริบท):

แนวคิดที่ 2 (ระบบการออกแบบโฟตอน):

แนวคิดที่ 3 การช่วยสำหรับการเข้าถึง

ขั้นตอนที่ 5 การจำลอง

นี่คือแนวคิดขั้นสุดท้ายของฉัน!

แนวคิดที่ 1 เหตุผล: เรียบง่ายและเน้นที่รูปภาพ แนวคิดที่ 1 เป็นเรื่องเกี่ยวกับการโฆษณาลักษณะที่ดีและข้อมูลสำคัญของสัตว์ที่พร้อมรับเลี้ยง ฉันใช้ Data Storytelling และ 2D layering เพื่อสร้างการออกแบบที่น่าสนใจและเข้าใจได้

แนวคิดที่ 2 เหตุผล: แนวคิดนี้มุ่งเน้นไปที่การทำงานที่แตกต่างกัน 3 อย่าง ได้แก่ การค้นหาบริการใกล้เคียง การติดตามเวชระเบียน และการเปรียบเทียบผลิตภัณฑ์สำหรับสัตว์เลี้ยง ความสวยงามได้รับแรงบันดาลใจจากคู่มือแนะนำแบรนด์ของ Mozilla Firefox ดังนั้นจึงใช้สีสว่างและฟอนต์ที่ Mozilla รับรอง

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