اسحب للاستكشاف. مرّر أو استخدم إصبعين للتكبير. افتح المساعدة لعرض اختصارات لوحة المفاتيح.

Yan
متاح
للمشاريع
لنتحدث
Yan Fontão Boring view
All work

Case 008تصميم تطبيق للهاتف المحمول

Boomerang Video Editor

محرر لهاتف iPhone لتحويل المقاطع القصيرة إلى مقاطع متكررة، صمّمته من شبكة المشاريع إلى ورقة التصدير. تُبقي الواجهة الداكنة بلون تمييز وردي فاقع واحد الانتباه على اللقطات.

دوري
مسارات المنتج وتصميم الواجهة
حالة المشروع
تصميم الواجهة · أرشيف Figma
غلاف عرض Boomerang التقديمي من ملف التصميم الأصلي.
غلاف العرض التقديمي من الملف الأصلي.

01

مساهمتي

Boomerang Video Editor تطبيق iPhone بواجهة داكنة لصنع مقاطع متكررة من مقاطع قصيرة. تسميه شاشته الرئيسية Boomerang Maker، وتلخص شاشة البداية الفكرة في سطر واحد: ‎“Create loops that Wow!”‎

صمّمت المسار من التهيئة الأولية مرورًا بالشاشة الرئيسية واختيار الوسائط وجدار الدفع والقص والتحرير والفلاتر والتصدير. تركّز دراسة الحالة هذه على الشاشات التي تظهر فيها قرارات التحرير بأوضح صورة.

شاشة التحرير بيد مضاءة بالنيون تملأ الجزء العلوي، ومسارات الفيديو والصوت على الخط الزمني، وصف من الأدوات عليها التسميات Trim وDirection وSpeed وLoops وText وVoice وMusic.
شاشة Trim بالمقطع نفسه، وجزء مميز من الخط الزمني بين مقبضين، وزرّي Cancel وSave في الأسفل.
مسجّل من النموذج الأولي في Figma. من شاشة البداية مرورًا بالتهيئة الأولية إلى مشروع مفتوح في المحرر. التحرير: المقطع في الأعلى، والمسارات تحته، وصف واحد من الأدوات على طول الأسفل. Trim: يحدد مقبضان الجزء المراد الاحتفاظ به، ويحل Cancel وSave محل الأدوات.

02

الشاشة للمقطع

في شاشة التحرير يملأ المقطع كل ما فوق الخط الزمني، وتستقر عناصر التحكم على تدرّج داكن ينبثق من اللقطات. يتشارك التشغيل والتراجع والإعادة والعداد ‎00:00 / 00:50‎ وملء الشاشة سطرًا واحدًا، مباشرة فوق المسارات التي تتحكم فيها.

تحت ذلك يتشارك الفيديو والصوت مسطرة واحدة. أما الأدوات فتمتد في صف واحد على طول الأسفل يتجاوز حافة الشاشة: Trim وDirection وSpeed وLoops وText وVoice وMusic وFXs. تقرن كل أداة أيقونة بكلمة، فلا يعتمد شيء على الرمز وحده.

شاشة My projects بشبكة من عمودين من الصور المصغرة للفيديو تعرض المدد، وزر New Project وردي، وزر Become a PRO في الأعلى.
بطاقة Export video بمعاينة للمقطع، وخيار بين HD وFull HD و4K، وأربع أيقونات لشبكات التواصل الاجتماعي، وزرّي Cancel وExport.
الشاشة الرئيسية: المشاريع في شبكة من عمودين، وNew Project دائمًا في المتناول. التصدير: اختيار الدقة ومكان النشر.

03

مهمة واحدة في كل مرة

يغيّر Trim النصف السفلي من الشاشة فقط. يحل Cancel وSave محل صف الأدوات، ويقع الجزء المحدد بين مقبضين على الخط الزمني. القرار الوحيد المتبقي هو أين يبدأ المقطع وأين ينتهي.

صورة عرض بشعار التطبيق الحلقي بالوردي والأزرق بجانب هاتفين مائلين يعرضان الشاشة الرئيسية وشاشة التحرير.
إطار عرض تقديمي بشعار التطبيق الحلقي والشاشة الرئيسية والمحرر.

04

قبل التحرير وبعده

تعرض الشاشة الرئيسية المشاريع في شبكة من عمودين مع مدة كل منها، تحت زر New Project الذي يبقى ثابتًا فوق المحتوى. على الطرف الآخر تسأل ورقة التصدير عن أمرين: الدقة، ويحمل خيار 4K تاجًا صغيرًا، والتطبيقات المراد النشر عليها.

يرافق اللون الوردي الخطوة التالية من البداية إلى النهاية: New Project وSave وExport. كما يميّز Become a PRO، الإجراء الوحيد في الشاشة الرئيسية الذي يقع خارج مسار التحرير.

000

التعليمات

Yan Fontão
لمسة
تفتح شاشة
نقرة
تفتح شاشة
سحب
يتجوّل في اللوحة
العجلة
الفأرة تكبّر، ولوحة اللمس تحرّك، وإصبعان يكبّران
− +
تراجع لرؤية اللوحة كاملة، أو اقترب
الأسهم
في دراسة الحالة: ↑↓ لتبديل الدراسة، ←→ لتبديل الوسائط. في اللوحة: للتحريك
مسافة
تفتح أو تعود
Enter
يفتح
Esc Backspace
رجوع
Home
العودة إلى الوسط، ثم إلى المقدمة
PgUp PgDn
القناة السابقة أو التالية
Tab
يتنقل بين المشاريع والروابط
R
مشروع عشوائي
0–9
اكتب رقم القناة، 1–61
?
هذه الصفحة
الاختصارات

موسيقى اللوحة

الملفات مضغوطة وموحّدة الصوت للويب.

متاح
للمشاريع
لنتحدث

رسالة جديدة إلى يان

أخبرني من أنت وسأرد عليك.

000

عن يان

مرحبًا، أنا يان

مصمم منتجات/ مهندس تصميم

معظم المنتجات تفقد شيئًا بين التصميم والبرمجة. منتجاتي لا: أبحث في المشكلة، وأصمم المنتج، وأطلق الواجهة بنفسي، فما توافق عليه هو بالضبط ما يحصل عليه مستخدموك.

  • 2018بداية تطوير البرمجيات
  • UI + codeالتصميم والتنفيذ

عملت مع Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

البرازيل · عن بُعد أو هجين أو حضوريًا

صورة يان فونتاو جالسًا بسترة خضراء ونظارة ويمسك ميكروفونًا.
متاح
للمشاريع
لنتحدث
متاح
للمشاريع
لنتحدث
000

قناة مقفلة

بموجب اتفاقية عدم إفصاح

أدخل الرمز

اطلب الرمز من يان ↗
متاح
للمشاريع
لنتحدث
YAN FONTÃO دراسات الحالة

القناة 08 تصميم تطبيق للهاتف المحمول

Boomerang Video Editor

محرر لهاتف iPhone لتحويل المقاطع القصيرة إلى مقاطع متكررة، صمّمته من شبكة المشاريع إلى ورقة التصدير. تُبقي الواجهة الداكنة بلون تمييز وردي فاقع واحد الانتباه على اللقطات.

دوري
مسارات المنتج وتصميم الواجهة
حالة المشروع
تصميم الواجهة · أرشيف Figma
غلاف عرض Boomerang التقديمي من ملف التصميم الأصلي.
غلاف العرض التقديمي من الملف الأصلي.

مقاطع قصيرة تتحول إلى مقاطع متكررة، والفيديو دائمًا أمام العين

شاشات من ملف التصميم الأصلي في Figma، بلقطات تجريبية.

مساهمتي

Boomerang Video Editor تطبيق iPhone بواجهة داكنة لصنع مقاطع متكررة من مقاطع قصيرة. تسميه شاشته الرئيسية Boomerang Maker، وتلخص شاشة البداية الفكرة في سطر واحد: ‎“Create loops that Wow!”‎

صمّمت المسار من التهيئة الأولية مرورًا بالشاشة الرئيسية واختيار الوسائط وجدار الدفع والقص والتحرير والفلاتر والتصدير. تركّز دراسة الحالة هذه على الشاشات التي تظهر فيها قرارات التحرير بأوضح صورة.

مسجّل من النموذج الأولي في Figma. من شاشة البداية مرورًا بالتهيئة الأولية إلى مشروع مفتوح في المحرر.
شاشة التحرير بيد مضاءة بالنيون تملأ الجزء العلوي، ومسارات الفيديو والصوت على الخط الزمني، وصف من الأدوات عليها التسميات Trim وDirection وSpeed وLoops وText وVoice وMusic.
التحرير: المقطع في الأعلى، والمسارات تحته، وصف واحد من الأدوات على طول الأسفل.

الشاشة للمقطع

في شاشة التحرير يملأ المقطع كل ما فوق الخط الزمني، وتستقر عناصر التحكم على تدرّج داكن ينبثق من اللقطات. يتشارك التشغيل والتراجع والإعادة والعداد ‎00:00 / 00:50‎ وملء الشاشة سطرًا واحدًا، مباشرة فوق المسارات التي تتحكم فيها.

تحت ذلك يتشارك الفيديو والصوت مسطرة واحدة. أما الأدوات فتمتد في صف واحد على طول الأسفل يتجاوز حافة الشاشة: Trim وDirection وSpeed وLoops وText وVoice وMusic وFXs. تقرن كل أداة أيقونة بكلمة، فلا يعتمد شيء على الرمز وحده.

شاشة Trim بالمقطع نفسه، وجزء مميز من الخط الزمني بين مقبضين، وزرّي Cancel وSave في الأسفل.
Trim: يحدد مقبضان الجزء المراد الاحتفاظ به، ويحل Cancel وSave محل الأدوات.

مهمة واحدة في كل مرة

يغيّر Trim النصف السفلي من الشاشة فقط. يحل Cancel وSave محل صف الأدوات، ويقع الجزء المحدد بين مقبضين على الخط الزمني. القرار الوحيد المتبقي هو أين يبدأ المقطع وأين ينتهي.

شاشة My projects بشبكة من عمودين من الصور المصغرة للفيديو تعرض المدد، وزر New Project وردي، وزر Become a PRO في الأعلى.
الشاشة الرئيسية: المشاريع في شبكة من عمودين، وNew Project دائمًا في المتناول.
بطاقة Export video بمعاينة للمقطع، وخيار بين HD وFull HD و4K، وأربع أيقونات لشبكات التواصل الاجتماعي، وزرّي Cancel وExport.
التصدير: اختيار الدقة ومكان النشر.

قبل التحرير وبعده

تعرض الشاشة الرئيسية المشاريع في شبكة من عمودين مع مدة كل منها، تحت زر New Project الذي يبقى ثابتًا فوق المحتوى. على الطرف الآخر تسأل ورقة التصدير عن أمرين: الدقة، ويحمل خيار 4K تاجًا صغيرًا، والتطبيقات المراد النشر عليها.

يرافق اللون الوردي الخطوة التالية من البداية إلى النهاية: New Project وSave وExport. كما يميّز Become a PRO، الإجراء الوحيد في الشاشة الرئيسية الذي يقع خارج مسار التحرير.

صورة عرض بشعار التطبيق الحلقي بالوردي والأزرق بجانب هاتفين مائلين يعرضان الشاشة الرئيسية وشاشة التحرير.
إطار عرض تقديمي بشعار التطبيق الحلقي والشاشة الرئيسية والمحرر.