طراحی اپ ویرایشگر ویدیو: بازطراحی صفحه ادیتور، قبل و بعد
صفحه ویرایشگر ویدیویی که نما بین دو نوار سیاه له شده، چهارده ابزار ریز و ترک‌های بی‌نام دارد، و همان صفحه اصلاح‌شده: پیشنمایش تمام‌عرض، یک ردیف ابزار برای کلیپ انتخابشده و تایم‌لاینی که می‌شود خواندش. تک‌تک تغییرها کنار هم، با فایل رایگان Figma.
یک ویرایشگر ویدیو فقط یک کار دارد: بگذارد کسی ویدیو را شکل بدهد، در حالی که دارد به آن نگاه میکند. پیش‌نویس اول زیر همه ابزارهایی را دارد که یک سازنده می‌تواند بخواهد، اما نما کوچک بین نوارهای سیاه نشسته، چهارده ابزار ریز سر انگشت شست با هم دعوا می‌کنند، ترک‌ها اسم ندارند و یک تب‌بار روی صفحه‌ای جا گرفته که کسی قصد ترکش را ندارد.
نسخه اصلاح‌شده همه کارکردها را نگه می‌دارد و فضا را به ویدیو برمی‌گرداند. از ادیتور اپ Edits اینستاگرام پیروی میکند و هر تغییر زیر چیزی است که می‌توانید کپی کنید.
کل صفحه، قبل و بعد
پیش‌نویس تازه‌کار
اصلاح‌شده
سمت چپ، ویدیو کوچک‌ترین چیز صفحه است. نما نواری ۱۶۴ پیکسلی بین نوارهای سیاه است و تقریباً هر چیز دیگر یک کنترل است: چهار دراپ‌داون، چهارده ابزار، پنج دکمه، پنج اسلایدر، یک ردیف مدیا و یک بنر ارتقا.
سمت راست، صفحه از بالا به پایین به ترتیب کار سازنده خوانده می‌شود: خروج یا اکسپورت، نگاه به نما، حرکت پلیهد، انتخاب کلیپ، عمل روی آن. پیشنمایش ۳۹۰ در ۴۰۴ است، متن‌ها ۱۱ تا ۱۷ پیکسل‌اند در برابر ۷ تا ۱۱ پیکسل پیش‌نویس، و تب‌باری وجود ندارد.
چه چیزی عوض شد، با عدد
| پیش‌نویس تازه‌کار | اصلاح‌شده | |
|---|---|---|
| نوار بالا | بازگشت، لوگوتایپ، نام، undo، redo، راهنما، تنظیمات، Export 1080P | بستن، نام پروژه با فلش، 1080p، یک Export مرجانی |
| پیشنمایش | ۳۶۴ در ۲۰۵، نما ۱۶۴ پیکسل بین نوارهای سیاه | ۳۹۰ در ۴۰۴، بدون گردی گوشه، بدون هیچ چیز روی آن |
| ابزارها | چهارده تا با ۱۶ پیکسل، برچسب ۸ پیکسلی، هر دو ردیف همیشه روشن | یک ردیف تخت با ۲۲ پیکسل، برچسب ۱۲ پیکسلی، فقط ابزارهای کلیپ انتخابشده |
| تایملاین | چهار ترک ۱۸ پیکسلی بدون برچسب، پلیهد ۱ پیکسلی | لاینهای نامدار با ارتفاع ۲۴ تا ۳۶، نوار فیلم ۵۸، پلیهد سفید ۳ پیکسلی |
| تب‌ها | پنج تا، روی یک ادیتور | هیچ |
| حاشیه‌ها | ۱۴ چپ، ۱۲ راست | لبه تا لبه، گردی ۰ |
اصلاح ۱: نوار بالا را به آنچه لازم است برسانید
قبل
بعد
فلش بازگشت، لوگوتایپ Cutline، نام Untitled Project 1 (edited)، سپس آیکن‌های undo، redo، راهنما و تنظیمات و یک دکمه کوچک نارنجی EXPORT 1080P. در برابر یک آیکن ساده بستن، نام Road trip با فلش، 1080p و دکمه بزرگ‌تر Export مرجانی.
نوار پیش‌نویس هشت چیز را در ارتفاع ۲۶ پیکسل جا داده و نام پروژه زیر فشار لوگوتایپی خرد می‌شود که هیچ‌کس داخل ادیتور خودش لازمش ندارد. Export مهم‌ترین دکمه صفحه است و در عین حال یکی از کوچک‌ترین‌ها، قرص ریزی در گوشه دور.
نوار اصلاح‌شده چهار چیز دارد: بستن، نام، کیفیت و Export. دکمه Export ۳۳ پیکسل ارتفاع دارد و یک پرکننده مرجانی، پس تنها چیز پرصدای بالای صفحه است. فلش کنار نام منوی پروژه را باز میکند، جایی که حالا راهنما، تنظیمات، لوپ و ارتقا آنجا هستند. Undo و redo پایین کنار پلیهد رفتند، همان‌جا که دست از قبل هست.
قاعده برای استفاده مجدد: نوار بالا به «کجا هستم و چطور تمامش کنم» جواب میدهد. بقیه چیزها پشت نام پروژه می‌روند.
اصلاح ۲: تمام عرض را به ویدیو بدهید
قبل
بعد
قابی کوتاه با نوار سیاه در دو طرف و نمای عمودی ون نارنجی در وسط، با عرض ۱۶۴ پیکسل. در برابر همان نما که تمام عرض ۳۹۰ پیکسل و ارتفاع ۴۰۴ را پر کرده، با گوشه‌های تیز و بدون کنترل روی آن.
ویرایشگری که ویدیو را کوچک نشان میدهد کار خودش را اشتباه فهمیده. در پیش‌نویس قاب ۱۶:۹ است و نما عمودی، پس نوارهای سیاه بیش از نصف عرض را می‌خورند. قاب حاشیه، گوشه گرد و یک واترمارک و قرص تایم‌کد هم دارد که روی تصویر کشیده شده‌اند.
اصلاح می‌گذارد پیشنمایش تمام عرض صفحه را پر کند، بدون گوشه، بدون حاشیه و بدون هیچ چیز روی آن. قابی را می‌بینید که دارید برش می‌دهید، در اندازه‌ای که بتوانید فوکوس و کادربندی را قضاوت کنید. تایم‌کد زیر پیشنمایش رفت و واترمارک از ادیتور حذف شد.
قاعده برای استفاده مجدد: چیزی که کاربر آمده تا تغییرش دهد باید بزرگ‌ترین چیز صفحه باشد، بی‌آنکه چیزی روی آن نقاشی شده باشد.
اصلاح ۳: ابزارهای کلیپ انتخابشده را نشان دهید
قبل
بعد
چهار دراپ‌داون Aspect 16:9، Quality 1080p، FPS 30 و Color Rec.709، سپس چهارده ابزار کوچک در دو ردیف هفت‌تایی با برچسب ۸ پیکسلی: Trim، Split، Speed، Volume، Filters، Adjust، Crop، Text، Stickers، Effects، Music، Voice، Mask و Rotate، و برچسب Clip 2 با Delete، Duplicate، Copy، Replace و Reverse. در برابر یک ردیف تخت از پنج ابزار بزرگ، Split، Volume، Speed، Effects و Delete، با فلش بازگشت در چپ که از لبه راست بیرون می‌زند.
پیش‌نویس همه ابزارها را یکجا روی صفحه می‌گذارد، چه به چیزی که انتخاب کرده‌اید ربط داشته باشند چه نه. چهارده آیکن ۱۶ پیکسلی با برچسب ۸ پیکسلی خواندنشان زیاد است و لمس‌شان سخت‌تر، و دکمه‌های کلیپ در خطی جدا زیر آن‌ها نشسته‌اند.
اصلاح دو حالت دارد. وقتی کلیپی انتخاب شده، یک ردیف تخت نشان میدهد با آن کلیپ چه می‌توان کرد: Split، Volume، Speed، Effects، Delete و Adjust، و ردیف از لبه بیرون می‌زند تا بدانید باید سوایپ کنید. فلش سمت چپ به ردیف اصلی برمیگردد با Text، Stickers، Music، Voice، Filters، Crop، Rotate و Mask. آیکن‌ها با وزن بولد به ۲۲ پیکسل و برچسب‌ها به ۱۲ پیکسل رشد کردند.
چیزی حذف نشد. Trim حالا همان دستگیره زرد روی خود کلیپ است، ویژگی‌های کلیپ پشت Adjust هستند، و نسبت تصویر، فریم‌ریت و رنگ پشت دکمه کیفیت در نوار بالا.
قاعده برای استفاده مجدد: ابزارِ چیزی را نشان دهید که انتخاب شده. ابزاری که نمی‌تواند روی انتخاب عمل کند نویز است.
اصلاح ۴: تایملاین را خوانا کنید
قبل
بعد
خطکشی از 00:00 تا 00:40، نوار فیلم کوچکی از پنج فریم، یک ترک بنفش، یک ترک سبز و یک موج صوتی سبز، هیچ‌کدام بی‌نام، و یک پلیهد قرمز ۱ پیکسلی. در برابر خطکشی با زوم دقیق‌تر، لاین نامدار Film Grain، لاین متن مرجانی به نام Road trip، لاین موسیقی سرخابی به نام Golden Hour با موج صوتی، نوار فیلمی که از دو لبه بیرون می‌زند با دستگیره زرد و برچسب 10.0s روی کلیپ انتخابشده، و یک پلیهد سفید ۳ پیکسلی که از همه لاینها میگذرد.
اینجا جایی است که ادیتور در آن زندگی میکند و پیش‌نویس با آن مثل تزئین رفتار میکند. چهار ترک ۱۸ پیکسل ارتفاع دارند و برچسبی ندارند، پس نمی‌توانید بفهمید کدام متن است، کدام موسیقی و کدام افکت، مگر روی هرکدام بزنید. پلیهد ۱ پیکسل است و نوار فیلم تصاویر بندانگشتی گرد با فاصله دارد که شبیه ردیفی از استیکر است.
تایملاین اصلاح‌شده لاینهای نامدار دارد: Film Grain، لاین متن به نام Road trip و لاین موسیقی به نام Golden Hour. هرکدام ۲۴ تا ۳۶ پیکسل ارتفاع دارند و از لبه تا لبه می‌روند، بدون گوشه گرد و با ۴ پیکسل فاصله.
نوار فیلم ۵۸ پیکسل ارتفاع دارد و مثل یک تکه فیلم خوانده می‌شود. کلیپ انتخابشده دستگیره زرد با فلش و برچسب مدت می‌گیرد و یک پلیهد سفید ۳ پیکسلی از همه چیز میگذرد.
زمان هم صادق است. زوم ۱۵۳ پوینت بر ثانیه است، پس پلیهد کمی بعد از ثانیه ۱۲ ایستاده و زمان دوخطی 00:12 را روی 00:48 نشان میدهد.
قاعده برای استفاده مجدد: لاینِ بی‌نام یک معماست. هر ترک را برچسب بزنید و به انتخاب یک رنگ پرصدا بدهید.
اصلاح‌های کوچک‌تر
- بدون تب‌بار. ادیتور جایی است که در آن می‌مانید، پس Home، Projects، Editor، Templates و Profile ۷۲ پیکسل را به نواری دادند که هنگام برش کسی رویش نمی‌زند.
- یک رنگ تأکیدی برای هر کار. مرجانی Export و لاین متن را نشان میدهد، زرد کلیپ انتخابشده را. پیش‌نویس نارنجی، بنفش، سبز و قرمز را خرج ترک‌هایی میکند که نمی‌گویند چه هستند.
- کنترل‌های ساده. دایره‌های پشت play، undo و redo رفتند. آیکن‌های ساده روی زمینه تیره تمیزتر خوانده می‌شوند.
- واترمارک و قرص تایم‌کد از روی پیشنمایش رفتند. زمان زیر نما زندگی میکند و پیام واترمارک با لینک ارتقا به منوی پروژه رفت.
- زوم با پینچ است. اسلایدر زوم و دکمه‌های مثبت و منفی‌اش یک ردیف کامل می‌گرفتند و پینچ روی تایملاین همان کار را میکند.
- پرش با درگ است. دکمه‌های skip رفتند چون کشیدن تایملاین پلیهد را جابه‌جا میکند.
- افزودن مدیا یک مثبت روی نوار است. وقتی کلیپی انتخاب نشده نمایان می‌شود.
- مقیاس تایپ. متن ۱۱ تا ۱۷ پیکسل است به جای ۷ تا ۱۱، و خط‌کش تایملاین با فونت مونواسپیس ۱۱ پیکسلی ست شده تا اعداد نپرند.
ادیتور خودتان را ممیزی کنید
| سؤال | چرا مهم است |
|---|---|
| پیشنمایش چقدر از عرض ۳۹۰ پیکسل را استفاده میکند؟ | ویدیو چیزی است که مردم آمده‌اند تغییرش دهند |
| آیا چیزی روی پیشنمایش کشیده شده؟ | اورلی‌ها قابِ در حال ویرایش را پنهان می‌کنند |
| آیا ابزارها با انتخاب عوض می‌شوند؟ | ابزارهایی که نمی‌توانند روی کلیپ عمل کنند نویزند |
| آیا هر ترک اسم دارد؟ | مردم نباید برای فهمیدن اینکه یک لاین چیست رویش بزنند |
| آیا از آن سوی اتاق می‌بینید کدام کلیپ انتخاب شده؟ | یک رنگ پرصدا از ده رنگ ساکت بهتر است |
| آیا Export بزرگ‌ترین دکمه بالاست؟ | پایان هر جلسه است |
| آیا صفحه ادیتور به تب‌بار نیاز دارد؟ | کاربران قصد رفتن ندارند و ۷۲ پیکسل خیلی است |
فایل Figma را بگیرید
فایل رایگان پیش‌نویس تازه‌کار، صفحه اصلاح‌شده و هر بخش را به صورت کامپوننت دارد.
فایل رایگان Figma
بازطراحی صفحه ویرایشگر ویدیو، قبل و بعد
هر دو صفحه و هر بخش به صورت کامپوننت Figma. رایگان، فقط مشاهده، آن را در درفت‌هایتان دوپلیکیت کنید.
سوالات متداول
صفحه ویرایشگر ویدیوی موبایل را چطور باید طراحی کرد؟
عرض کامل صفحه را به پیشنمایش بدهید، نوار بالا را به دکمه بستن، نام پروژه، کیفیت و یک دکمه Export محدود کنید و ابزارهای کلیپ انتخابشده را در یک ردیف تخت بگذارید. یک تایملاین با لاینهای نامدار و یک پلیهد اضافه کنید.
پیشنمایش در اپ ویرایش ویدیو چقدر باید بزرگ باشد؟
تا جایی که صفحه اجازه میدهد، بهتر است تمام عرض، بدون گوشه گرد و بدون چیزی روی آن. نمایی که کوچک بین نوارهای سیاه نشسته قضاوت درباره کادربندی و فوکوس را سخت میکند.
آیا ویرایشگر ویدیو باید تب‌بار داشته باشد؟
معمولاً نه. کسانی که در حال برش ویدیو هستند قصد رفتن ندارند، پس تب‌بار حدود ۷۲ پیکسل را خرج ناوبری‌ای میکند که استفاده نمی‌شود. Home، Projects و Templates را پشت نام پروژه یا دکمه بستن بگذارید.
چطور ابزارها را در ویرایشگر ویدیو بدون شلوغی نشان دهیم؟
فقط ابزارهایی را نشان دهید که به چیز انتخابشده مربوطاند. با انتخاب یک کلیپ، ردیفی از Split، Volume، Speed، Effects، Delete و Adjust کافی است و یک فلش به ردیف اصلی Text، Stickers، Music، Voice و Filters برمیگردد.
رابط تایملاین ویدیو چه شکلی باید باشد؟
خطکشی با برچسبهای زمان، لاینهای نامدار برای متن، موسیقی و افکتها، نوار فیلمی که از لبه تا لبه میرود، یک دستگیره روی کلیپ انتخابشده و یک پلیهد پهن که از همه لاینها میگذرد.
منابع
- هر دو صفحه ساخت خودمان هستند، در Figma طراحی و اندازه‌گیری شده‌اند. اپ Cutline، پروژه و ترک‌ها ساختگی‌اند. تایملاین از دو اسکرین‌شات واقعی آیفون از ادیتور اپ Edits اینستاگرام پیروی میکند، با زوم خودش یعنی ۱۵۳ پوینت بر ثانیه.
- آیکن‌ها از Phosphor (MIT) هستند. استاتوس‌بار از روی یک اسکرین‌شات اندازه‌گیری‌شده واقعی آیفون کشیده شده است.
- عکس‌ها از Pexels هستند: Roman Odintsov، Hector Perez، Thang-Nhat Tran، Airam Dato-on و Sokil.
- ابتدا به صورت کاروسل در App Brainy منتشر شد.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
