Video Editör Uygulaması Tasarımı: Editör Ekranı Yeniden Tasarımı, Önce ve Sonra

Bir video editörünün tek işi var: birinin videoyu izlerken şekillendirmesine izin vermek. Aşağıdaki ilk taslakta bir üreticinin isteyebileceği her araç var, ama çekim siyah çubuklar arasında küçücük duruyor, on dört minik araç baş parmak için kavga ediyor, izlerin adı yok ve kimsenin terk etmeye çalışmadığı bir ekranda sekme çubuğu yer kaplıyor.

Düzeltme her işlevi korur ve alanı videoya geri verir. Instagram'ın Edits uygulamasındaki editörü örnek alır ve aşağıdaki her değişiklik kopyalayabileceğiniz bir değişikliktir.

Tüm ekran, önce ve sonra

Junior taslağı

Düzeltilmiş

Solda video ekrandaki en küçük şey. Çekim, siyah çubuklar arasında 164 px genişliğinde bir şerit ve geri kalan neredeyse her şey bir kontrol: dört açılır menü, on dört araç, beş düğme, beş kaydırıcı, bir medya sırası ve bir yükseltme bannerı.

Sağda ekran, üreticinin çalıştığı sırayla yukarıdan aşağıya okunuyor: çık ya da dışa aktar, çekime bak, oynatma çizgisini taşı, klibi seç, ona işlem yap. Önizleme 390 x 404, metin taslağın 7 ila 11 px'ine karşılık 11 ila 17 px ve sekme çubuğu yok.

Değişenler, ölçülmüş olarak

Düzeltme 1: Üst çubuğu ihtiyacınız olana indirin

Önce

Sonra

Bir geri oku, Cutline logosu, Untitled Project 1 (edited) adı, ardından geri al, yinele, yardım ve ayarlar simgeleri ve küçük turuncu EXPORT 1080P düğmesi. Buna karşı sade bir kapat simgesi, oklu Road trip adı, 1080p ve daha büyük mercan rengi bir Export düğmesi.

Taslağın çubuğu 26 px yüksekliğe sekiz şey sığdırıyor ve proje adı, kimsenin kendi editöründe ihtiyaç duymadığı bir logo tarafından eziliyor. Export ekrandaki en önemli düğme ve aynı zamanda en küçüklerinden biri, uzak köşede minik bir hap.

Düzeltilmiş çubuk dört şey tutar: kapat, ad, kalite ve Export. Export 33 px yüksekliğinde ve tek mercan dolgulu, yani üstteki tek gürültücü nesne o. Adın yanındaki ok, yardım, ayarlar, döngü ve yükseltmenin artık yaşadığı proje menüsünü açar. Geri al ve yinele, elin zaten bulunduğu yere, oynatma çizgisinin yanına indi.

Tekrar kullanılacak kural: üst çubuk "neredeyim ve nasıl bitiririm" sorusunu yanıtlar. Geri kalan her şey adın arkasına gider.

Düzeltme 2: Videoya tüm genişliği verin

Önce

Sonra

Her iki yanında siyah çubuklar olan kısa bir kare ve ortada 164 px genişliğinde turuncu bir minibüsün dikey çekimi. Buna karşı aynı çekimin tam genişlikte, 390 px geniş ve 404 yüksek, köşeleri kare ve üzerinde hiçbir kontrol olmadan hali.

Videoyu küçük gösteren bir video editörü kendi işini yanlış okumuş demektir. Taslakta kare 16:9, çekim dikey, bu yüzden siyah çubuklar genişliğin yarısından fazlasını yiyor. Karenin ayrıca bir kenarlığı, yuvarlatılmış köşeleri ve resmin üzerine çizilmiş bir filigranı ile zaman kodu hapı var.

Düzeltme, önizlemenin ekran genişliğini köşesiz, kenarlıksız ve üzerinde hiçbir şey olmadan doldurmasına izin verir. Kestiğiniz kareyi, odağı ve kadrajı yargılayabileceğiniz bir boyutta görürsünüz. Zaman kodu önizlemenin altına taşındı ve filigran editörden kalktı.

Tekrar kullanılacak kural: kullanıcının değiştirmeye geldiği şey ekrandaki en büyük şey olmalı, üzerine hiçbir şey boyanmadan.

Düzeltme 3: Seçtiğiniz klibin araçlarını gösterin

Önce

Sonra

Aspect 16:9, Quality 1080p, FPS 30 ve Color Rec.709 için dört açılır menü, ardından yedişerli iki sırada 8 px etiketli on dört küçük araç: Trim, Split, Speed, Volume, Filters, Adjust, Crop, Text, Stickers, Effects, Music, Voice, Mask ve Rotate, ve Delete, Duplicate, Copy, Replace ve Reverse içeren bir Clip 2 etiketi. Buna karşı solda geri oku olan, sağ kenardan taşan beş büyük araçlık tek düz sıra: Split, Volume, Speed, Effects ve Delete.

Taslak, seçtiğiniz şeye uygulansın uygulanmasın her aracı aynı anda ekrana koyuyor. 8 px etiketli, 16 px'lik on dört simge okumak için fazla, vurmak için daha da küçük ve klip düğmeleri altlarında ayrı bir satırda duruyor.

Düzeltmenin iki durumu var. Bir klip seçiliyken tek düz sıra o klibe ne yapabileceğinizi gösterir: Böl, Ses, Hız, Efektler, Sil ve Ayarla; sıra kenardan taşar, böylece kaydırmanız gerektiğini anlarsınız. Soldaki ok, Metin, Çıkartmalar, Müzik, Ses kaydı, Filtreler, Kırp, Döndür ve Maske içeren ana sıraya geri götürür. Simgeler kalın ağırlıkta 22 px'e, etiketler 12 px'e büyüdü.

Hiçbir şey kesilmedi. Kırpma artık klibin üzerindeki sarı tutamaç, klip özellikleri Ayarla'nın arkasında ve en-boy, kare hızı ve renk üst çubuktaki kalite düğmesinin arkasında.

Tekrar kullanılacak kural: seçili olan şey için araçlar gösterin. Seçime etki edemeyen araç gürültüdür.

Düzeltme 4: Zaman çizelgesini okunabilir yapın

Önce

Sonra

00:00'dan 00:40'a bir cetvel, beş kareden oluşan küçük bir film şeridi, mor bir iz, yeşil bir iz ve yeşil bir dalga formu, hiçbirinin adı yok ve 1 px kırmızı bir oynatma çizgisi. Buna karşı daha ince yakınlaştırmada bir cetvel, isimli Film Grain şeridi, Road trip adlı mercan rengi metin şeridi, dalga formlu Golden Hour adlı macenta müzik şeridi, iki kenardan taşan, seçili klipte sarı tutamaç ve 10.0s etiketi olan film şeridi ve her şeridi kesen tek 3 px beyaz oynatma çizgisi.

Bir editörün yaşadığı yer burası ve taslak onu süs gibi görüyor. Dört iz 18 px yüksekliğinde ve etiketsiz, bu yüzden hangisinin metin, hangisinin müzik, hangisinin efekt olduğunu her birine dokunmadan anlayamazsınız. Oynatma çizgisi 1 px genişliğinde ve film şeridinin boşluklu yuvarlak küçük resimleri onu bir çıkartma dizisine benzetiyor.

Düzeltilmiş zaman çizelgesinde isimli şeritler var: Film Grain, Road trip adlı bir metin şeridi ve Golden Hour adlı bir müzik şeridi. Her biri 24 ila 36 px yüksekliğinde, uçtan uca, yuvarlak köşesiz ve aralarında 4 px boşlukla.

Film şeridi 58 px yüksekliğinde ve tek parça görüntü gibi okunuyor. Seçili klip ok işaretli sarı bir tutamak ve süre etiketi alıyor, her şeyi tek bir 3 px beyaz oynatma çizgisi kesiyor.

Zaman da dürüst. Yakınlaştırma saniyede 153 pt, yani oynatma çizgisi 12. saniyenin hemen ötesinde duruyor ve iki satırlı zaman 00:48 üzerinde 00:12 yazıyor.

Tekrar kullanılacak kural: adı olmayan şerit bir gizemdir. Her izi etiketleyin ve seçime tek bir gürültücü renk verin.

Küçük düzeltmeler

• Sekme çubuğu yok. Bir editör kalınan bir yerdir; Home, Projects, Editor, Templates ve Profile, kesim sırasında kimsenin dokunmadığı bir çubuğa 72 px veriyordu.
• İş başına tek vurgu. Mercan Export'u ve metin şeridini, sarı seçili klibi işaretler. Taslak, ne olduklarını söylemeyen izlere turuncu, mor, yeşil ve kırmızı harcıyor.
• Sade kontroller. Oynat, geri al ve yinelemenin arkasındaki daireler gitti. Sade simgeler koyu zeminde daha temiz okunuyor.
• Filigran ve zaman kodu hapı önizlemeden kalktı. Zaman çekimin altında yaşıyor ve filigran mesajı yükseltme bağlantısıyla birlikte proje menüsüne taşındı.
• Yakınlaştırma bir çimdik. Yakınlaştırma kaydırıcısı ile artı ve eksisi tam bir satır tutuyordu; zaman çizelgesinde bir çimdik aynı işi yapıyor.
• Atlamak bir sürükleme. Atla düğmeleri gitti, çünkü zaman çizelgesini sürüklemek oynatma çizgisini taşır.
• Medya eklemek şeritteki bir artı. Klip seçili değilken görünür.
• Yazı ölçeği. Metin 7 ila 11 px yerine 11 ila 17 px ve zaman çizelgesi cetveli, sayılar zıplamasın diye 11 px monospace ile yazıldı.

Kendi editörünüzü denetleyin

Figma dosyasını alın

Ücretsiz dosyada junior taslağı, düzeltilmiş ekran ve her parça bir bileşen olarak var.

Ücretsiz Figma dosyası

Video editör ekranı yeniden tasarımı, önce ve sonra

İki ekran ve her parça bir Figma bileşeni olarak. Ücretsiz, salt görüntüleme, taslaklarınıza çoğaltın.

Figma'da aç

SSS

Bir mobil video editörü ekranı nasıl tasarlanmalı?

Önizlemeye tam ekran genişliği verin, üst çubuğu bir kapat düğmesi, proje adı, kalite ve tek bir Export düğmesiyle sınırlayın ve seçili klibin araçlarını tek düz sıraya koyun. İsimli şeritler ve tek oynatma çizgisi olan bir zaman çizelgesi ekleyin.

Bir video düzenleme uygulamasında önizleme ne kadar büyük olmalı?

Ekranın izin verdiği kadar büyük, ideal olarak köşesiz ve üzerine hiçbir şey çizilmemiş tam genişlikte. Siyah çubuklar arasında küçük duran bir çekim, kadrajı ve odağı değerlendirmeyi zorlaştırır.

Bir video editöründe sekme çubuğu olmalı mı?

Genellikle hayır. Video kesen insanlar ayrılmaya çalışmıyor, bu yüzden sekme çubuğu kullanmadıkları gezinmeye yaklaşık 72 px harcar. Home, Projects ve Templates'i proje adının veya kapat düğmesinin arkasına koyun.

Bir video editöründe araçlar karışıklık olmadan nasıl gösterilir?

Yalnızca seçili olana uygulanan araçları gösterin. Bir klip seçiliyken Böl, Ses, Hız, Efektler, Sil ve Ayarla sırası yeterlidir ve bir ok, Metin, Çıkartmalar, Müzik, Ses kaydı ve Filtreler'in ana sırasına geri götürür.

Bir video zaman çizelgesi arayüzü nasıl görünmeli?

Zaman etiketli bir cetvel, metin, müzik ve efektler için isimli şeritler, uçtan uca akan bir film şeridi, seçili klipte bir tutamaç ve her şeridi kesen tek geniş bir oynatma çizgisi.

Kaynaklar

• Her iki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. Uygulama, Cutline, proje ve izler uydurmadır. Zaman çizelgesi, Instagram'ın Edits uygulamasındaki editörün iki gerçek iPhone ekran görüntüsünü, kendi saniyede 153 pt yakınlaştırmasıyla izler.
• Simgeler Phosphor'dan (MIT). Durum çubuğu, ölçülmüş gerçek bir iPhone ekran görüntüsünden çizildi.
• Fotoğraflar Pexels'ten: Roman Odintsov, Hector Perez, Thang-Nhat Tran, Airam Dato-on ve Sokil.
• İlk olarak App Brainy üzerinde bir karusel olarak yayımlandı.