Yenilenen Office tasarımının ardındaki üstün zarafet, win10 en kapsamlı hazine sistemi haline geldi
Microsoft tasarımcıları, win7 çivi kullanıcılarını win10 olarak değiştirmek için büyük çaba harcadılar!
Bu makale halka açık numaralardan yeniden üretilmiştir: Mükemmel Web Tasarım Kimliği: youshege Yazar: Chan, ahşap editörü: Jessica ChengWindows 10 sisteminin bir kullanıcısıysanız, Windows sisteminin simgelerinin son zamanlarda yavaş yavaş değiştirildiğini ve yükseltildiğini fark etmiş olmalısınız (yerli aile kovası yazılımlarının çoğunun etkisi göz ardı edilerek) Windows 10, Fluent Design enjeksiyonuyla geliştirilmektedir. Gittikçe daha zarif hale geliyor.
Daha sonra, tüm Windows 10 sistemi, yinelemeli yükseltmede giderek daha çekici hale geldi:
Ancak bu değişiklik daha önemlidir ve kurulum için gerekli Office yazılımına yansıtılır - hayır, şimdi Microsoft 365 olarak adlandırılmalıdır:
Microsoft, Çin, Hindistan, Avrupa ve Amerika'daki farklı pazarlardaki kullanıcıların her gün cep telefonlarını nasıl kullandıklarını incelemek için çok zaman ve enerji harcadı. Microsoft'taki 40'tan fazla tasarımcı ve araştırmacı, bunu mobil cihazlarla nasıl başa çıkılacağını ve iyileştirileceğini incelemek için bir temel olarak kullanıyor. Üretkenliği sonlandırın ve "uygulama katmanındaki" deneyimi Fluent Design'ın tüm tasarım sistemine aktarın. Office veya şimdi Microsoft 365, araştırma ürünlerinden biridir.
"... Tüm bu araştırmalardan, insanların cep telefonlarında ortalama 4 saat geçirdiklerini ancak bir uygulama ile her etkileşimde 20 ila 30 saniye olduğunu öğrendik."
--Jon Friedman, Tasarım ve Araştırma Başkan Yardımcısı, Microsoft
Bu kullanıcı alışkanlıklarına ve eğilimlerine uyması için Word, Excel, PowerPoint, OneDrive, Outlook ve diğer ürünler parçalandı ve yeniden entegre edildi. Ve bunda, bazı detaylar daha derin niyetleri gizler.
Kameranın mobil ofise yeni bir giriş olmasına izin verin
"Filipinler'de, öğrencilerin sınıftaki el yazısıyla yazılmış notları PDF'ye dönüştürdüklerini ve bunları arkadaşları ve sınıf arkadaşlarıyla paylaştıklarını gözlemledik ... Akıllı telefonlarda kamera klavye kadar önemlidir ve mobil iş akışının önemli bir parçasıdır. "-Jon Friedman
Birçok ürün yöneticisi ve tasarımcı, bir resmin bin kelimeye bedel olduğu gerçeğini anlıyor. Çin'deki en popüler özellik, QQ ekran görüntüsü işlevidir. Microsoft tasarım ekibi, orijinal Office Lensi, mobil ofis verimliliğini doğrudan artıran Microsoft 365'e entegre etti.
Tabii ki bu en büyük değişiklik değil.
Vizyon ve deneyimin yeniden entegrasyonu
"Kullanıcıların ortak işlemleri aslında 20 ila 30 saniye arasındadır." Bu hızlı, geçici, yüksek yoğunluklu ve yüksek geri bildirimli kullanım alışkanlığı yaygındır. Bu parçalı bilgi ve etkileşim çağında, verimlilik yalnızca "yeterince güçlü işlevlere sahip olmak" değil, aynı zamanda "belirli işlevleri daha hızlı elde edip kullanabilmek" anlamına da geliyor. Jon Friedman, bu özel küçük görevleri parçalar halinde tamamlama yeteneğini "mikro verimlilik" olarak adlandırıyor.
Kullanıcı her seferinde kısa bir metin paragrafı yazar, küçük bir biçim oluşturur veya fotoğrafı hızlı bir şekilde PPT'ye yerleştirir, ardından başka bir ortak çalışanına ekler ve ardından bulutla senkronize eder. 30 saniye sonra başka şeyler yapmaya devam edin.
Word, PowerPoint ve Excel "Belgeler" sütununda birleştirilir. OneDrive arka planda senkronizasyon yapmanıza yardımcı olur. Masaüstü ve mobil uygulamalar sorunsuz bir şekilde birbirine bağlanır ve değiştirilir. Gerçek zamanlı sohbet ve Outlook e-posta hizmetleri için doğrudan Word'ü veya Artık Excel'deki belirli işlevler için programlar arasında geçiş yapmanız gerekmiyor ve PDF bileşenlerinin eklenmesi, tüm içeriği tek bir uygulamada yönetmenize olanak tanıyor.
"Önce mobil" dediğimizden, işe gidip gelirken ve yemek pişirirken kolayca bilgi edinebilir misiniz? Microsoft'un tasarım ekibi, ilk olarak Outlook posta kutusu hizmetinde görme engelli kullanıcılara hizmet vermek için kullanılan ekran okuma bileşenini Microsoft 365'e aktardı.
"Arayüzün tamamını kulaklarınızla dinlemek ... aslında beyin için büyük bir yüktür." Jon Friedman, giriş sırasında bu tasarımın olası sorunlarını açık bir şekilde belirtti. Ancak Washington Eyalet Körler Okulu ile araştırma ve işbirliği sürecinde, bu bileşene bir ses arabellek işlevi eklediler. Uzman olmayanların deyimiyle, belgedeki kilit noktaları belirlemenize yardımcı oluyor.
Görünmez görsel kimlik tasarımı
Microsoft 365 pek çok ürünü kapsar ve interaktif arayüzde yüksek derecede entegrasyon sağlar. Kontrollerin ve kontrollerin stilleri oldukça tutarlıdır. Marka renkleri sadece belirli işlevlerde uygun ayrımlar yapmak için kullanılır.
PPT'yi düzenlediğinizde, arayüzün üst kısmındaki turuncu menü çubuğu, PowerPoint yazılımı hakkındaki görsel algınız ile uzun yıllar tutarlıdır ve düşünmeden algılayabilirsiniz. Ve bu algı insanları bağlantısız hissettirmez, böylece görsel tanıma görünmez ve işlevsel hale gelir.
Microsoft 365, masaüstü web sayfalarını, masaüstü Windows ve macOS sistemlerini ve mobil iOS ve Android sistemlerini kapsayan pek çok işlevi ve hizmeti entegre eder.Bu tür karmaşık revizyon tasarımı, açıkça tam bir sistem gerektirir. destek. Ve bunun 3 yıldan fazla bir süredir var olduğu ve Akıcı Tasarım hakkında nadiren bilgi sahibi olduğunuz söylenmelidir.
Hazine Tasarım Sistemi: Akıcı Tasarım
Aslında, Fluent Design'ın diğer platformlara daha iyi uygulanmasını sağlamak için Microsoft yalnız değil, daha geniş bir tasarımcı ve geliştirici topluluğundan destek almak için açık kaynaklı projeler ile iletişime geçmenin yanı sıra Surface Duo'ya da güveniyor. Microsoft 365'in iOS sürümünün de Microsoft ve Apple arasındaki işbirliğinin ürünü olması gerektiğini ve iOS platformuyla uyumlu Fluent Design'ın arkasında resmi bir gölge olması gerektiğini hayal etmek zor değil.
Tıpkı önceki makalem "Heavy! Esnek ekranlar ve çift ekranlar geliyor. "Çoklu Ekranlar için Tasarım Özellikleri, Tasarımcılar Öğrenmeli" de belirtildiği gibi Microsoft, Android gibi farklı sistemlerle yüzleşmek için daha açık bir fikir edinmiştir. Windows 8 ve Windows Phone'un başarısızlığından sonra, Microsoft tüm platformları kucaklamaya başladı.Açık kaynağın büyük bir yararlanıcısı olan Microsoft, Github'ı bile satın aldı ve Chromium kernel kullanan Edge tarayıcısı gibi kendi ürünleriyle daha uyumlu hale geldi. Win10 sisteminde yerleşik Linux alt sistemi vb.
Aslında, Fluent Design 2017'de piyasaya çıktığında, ilk yıllarda Android 4.0 ve iOS 7 ile aynıydı.Sonuçlara açıkça işaret eden 5 özelliği vardır: hafif, derin, dinamik ve zengin doku. , Ölçek.
Daha sonra, belirli görsel tasarımda, Akıcı Tasarım, "derinlik" (yani Derinlik) kavramını birlikte güçlendirmek için paralaks, gölgeler ve hareket efektleri kullanmak gibi bu ilkeler temelinde bazı daha spesifik yöntemler ve ilkeler yerleştirmeye başladı. .
Ancak tüm tasarım ekolojisindeki değişikliklerle birlikte, tasarım ekibinin karşılaştığı daha büyük sorunlar şunlardır: ürünlerin yinelenmesi, platformlar arası olması, çok kişili işbirliğine ihtiyaç duyması, uzaktan işbirliğine ihtiyaç duyması, giderek daha fazla ihtiyaçla başa çıkma ihtiyacı, modernizasyon ihtiyacı, Operasyonel gereksinimleri karşılamalı, vb.
"Akıcı Tasarım yalnızca sonuçlara değil, aynı zamanda ürünleri birlikte tasarlama ve oluşturma sürecine de işaret edecek." - Joseph McLaughlin, Tasarım Direktörü, Microsoft
Ortamdaki değişiklikler ve gereksinimler, bugün Fluent Design'ı 3 yıl önce piyasaya sürüldüğü zamandan değiştirdi. Tasarım özelliklerinden sorumlu bir Microsoft tasarımcısı olan Mike Jacobs, Fluent Design'ın estetik özelliklerini özetlemek için bir metafor kullanıyor.
"Akrilik" görsel stil estetiği
MacOSX yıllar önce ilk doğduğunda, gerçek hayattaki ışık, gölge ve dokunun temel metaforu olarak "su" kullanıyordu.
Mac OS X DP3, tasarım dili Latince "Aqua", "Su" dur
Rakiplerinden ilham alan Microsoft, Vista ve Win 7'de, camdaki ışığın ışık ve gölge dokusunu vurgulayan ve Yunanca "Hava" anlamına gelen "Aero" tasarım dilini seçti.
Daha statik görsel stilleri vurgulayan bu tür yarı-somutlaştırılmış "tasarım metaforları", daha sonra, metaforu sonsuz genişleyen bir "kağıt" olan Android'in "Meterial Design" gibi daha zengin ve daha dinamik "tasarım metaforları" ile değiştirildi:
Ve Fluend Design'ın temel metaforu, genellikle akrilik dediğimiz şey olan "Akrilik" dir. "Kağıt" ile karşılaştırıldığında, bir seviye daha yakındır ve yarı saydam bir görsel seviyeye sahiptir:
Akıcı Tasarımda sadece "katman", "ışık ve gölge" ve "uzama" kavramları yoktur, yarı saydam olduğu için hassas bir "doku" katmanına da sahiptir.
Microsoft'un tasarım yönergelerinden sorumlu kişi Mike Jacobs şunları söyledi: "Bu uygulama seviyesi, kullanıcı arayüzünü son derece dokulu hale getirebilir. Ne kadar dikkatli tasarlar ve onunla ilgilenirseniz, nihai sonuç o kadar şaşırtıcı olacaktır."
Kenar çubuğunda ve üst gezinme çubuğunda "akrilik" görsel öğeleri kullanın.
"Akrilik" in görsel estetik faydaları, karmaşık pencere sistemlerinde, özellikle açılır pencereler gibi unsurlarla uğraşırken çok etkilidir ve alttaki pencerelerin yarı saydam "akrilik" tabakadan görünmesini sağlar. Bu, kullanıcıların nerede olduklarını daha iyi anlamalarını sağlar. Açık ve gizli his arasındaki bu ince, yeterince güzelliğe sahip. Areo estetiğinin devamı niteliğindedir, ancak daha ince ve eksiksiz olarak sunulmuştur.
Metro'nun tipografik estetiğinden devam
Akıcı Tasarım'ın güçlü yönler geliştirme, zayıflıklardan kaçınma ve en iyiyi saklama yönü burada yansıtılmaktadır.
Tipografik tasarımı, önceki nesil Metro tasarım dilinden miras alınmıştır. Karmaşık renk düzeninden kurtulun, hiyerarşiyi süslü olmayan ancak bilgi arasındaki ilişkiyi yansıtacak kadar net metin düzenine bölün; Fluent Design ve Microsoft'un başlangıçta takip ettiği şey, kullanıcıların gerçekten sahip oldukları bilgilere, özellikle de Bu aşırı bilgi yükü çağı.
-
Kontrast: Görsel hiyerarşi oluşturmanın temeli olarak kontrastı kullanın.
-
Boyut: Önem ve düzeydeki fark, boyuta göre sunulmuştur.
-
Yakınlık: Komşu öğeler güçlü bir şekilde ilişkilidir ve benzer ve ilgili öğeler gruplandırılarak bir araya getirilir.
-
Boş alan: Yakınlığın aksine, farklı kategorileri ve grupları boşluklara göre ayırın.
-
Tekrarlama: Tekrar eden öğeler benzerlik gösterir.Bu tekrar, kullanıcı bilişini geliştirebilir, süreklilik sağlayabilir ve tasarımı öngörülebilir hale getirebilir.
-
Malzeme: Son olarak, malzemeyi ekleyin, kullanıcı arayüzü görsel olarak çekicidir.
Akıcı Tasarım kendi kendine tutarlıdır, ancak diğer sistemlere de genişletilecekse, yapılacak fazla iş yoktur.
İşletim sistemi önemli değil
Aşırı bilgi yükü ve dikkat için rekabet, bugün herkesin yüzleşmesi gereken konulardır.
Geçen yıl, iOS ve Android sistem güncellemeleri de dahil olmak üzere Twitter'ın revizyonu, Facebookun F8 konferansı, önemli platformlar bilinçli bir şekilde düzene koyuyor ve entegre ediyordu. Bu konuyla Microsoft CEO'su Satya Nadella ilgileniyordu. En önemli cümle: "İşletim sistemi artık en önemli seviye değil."
Kullanıcılar için, farklı işletim sistemlerindeki yazılım ve hizmetlerin işlevlerinin, deneyimlerinin ve hizmetlerinin% 90'ından fazlası aynıysa, esasen hangi platformda büyük bir fark yoktur. Bununla birlikte, tasarımcılar, tasarım ekipleri ve hatta ürün ekipleri için yüzleşilmesi gereken bir sorun vardır: Giderek karmaşıklaşan ve devasa ürün ve hizmetlerin her platformda aynı şekilde nasıl deneyimleneceği.
Çoğu durumda, bir ürünün iOS ve Android platformlarında tutarlı bir deneyim sürdürmesini istiyorsanız, ödün vermeniz gerekir. Mobil ve masaüstünü düşünürseniz, tutarlılık için daha yüksek bir fiyat ödemeniz gerekir.Ürün ne kadar karmaşıksa o kadar fazla çaba gerekir. Ve Akıcı Tasarım tasarım süreci için doğdu, sistemler arasındaki farklılıkları büyük ölçüde düzeltti.
Akıcı Tasarım ve süper kapsamlı malzemesi
Fluent Design, 2017'de yayınlanan ilk sürümden 2019'un sonundaki büyük Microsoft 365 güncellemesine kadar resmi Microsoft tasarım ekibinin liderliğinde artık dört ana Windows, iOS, Android ve Web dalını kapsıyor , Açık kaynak topluluğu, Apple, Google, vb.'den tasarımcılar ve geliştiriciler, tüm tasarım sisteminin özelliklerini tamamlamak ve ilgili geliştirme bileşenlerini oluşturmak için işbirliği yaptı.
Bir tasarımcıysanız ve Fluent Design'ın çeşitli tasarım paradigmalarını daha derinlemesine anlamak istiyorsanız, WIndows platformunun tasarım özelliklerinde her bir görsel öğenin tasarım ilkelerini ve özel uygulama yöntemlerini ayrıntılı olarak öğrenebilirsiniz:
Örneğin, "Akrilik" efektinin gerçekleştirme ilkesi dahil olmak üzere "Stil" bölümünde belirli düzenler ve simgeler bulabilirsiniz:
Fluent Design'ın platformlar arası bir tasarım sistemi olmasına rağmen, iOS ve Android'de kendi tutarlılığını sürdürmek için orijinal tasarım özelliklerini ve etkileşim modlarını göz ardı etmediğini, ancak mümkün olduğunca orijinal sistem mekanizmasında olduğunu belirtmek gerekir. Her platformdaki algınızın son derece yakın olmasını sağlamak için kapsam dahilinde etkileşim ve deneyim kısıtlamalarına izin verin.
Bu nedenle, Fluent Design sayfasında, her platformdaki belirli tasarım özelliklerine ve ayrıca Fluent Design bu platformlarda tasarım yaparken kullanılabilecek çeşitli tasarım kaynaklarına ve malzemelerine, ilgili platform da dahil olmak üzere çok eksiksiz referanslar bulunmaktadır. Taslak, Figma format malzemeleri, ilgili yazı tipleri, ilgili eklentiler ve her platformun tasarım özelliklerine bağlantılar:
Peki ya Windows olmayan platformlarda işlevlerin uygulanması ve geliştirilmesi? Başlangıçta Microsoft, Windows platformunda kendi UI ve geliştirme bileşeni kitaplığını kullandı ve iOS, Android ve Web için Github üzerinde Fabric adında açık kaynaklı bir proje oluşturdu. İOS platformunda Swift desteği var. Languagein Fabric iOS kitaplığı, geliştirmeyi desteklemek için kullanılırken, Android'de Fabric Android (Kotlin) ve web tarafı Fabric Web (React) kullanıyor. Bunların tümü, geliştiricilerin yerel olduğundan emin olmak için doğrudan arayabilecekleri hazır kitaplıklardır. Ve pürüzsüz bir deneyim.
Microsoft, bu yılın 12 Mart'ında yaklaştı ve orijinal olarak bağımsız Windows bileşen kitaplığını diğer üç Fabric kitaplığıyla tamamen birleştirdi ve tamamen Fluent Design projesiyle birleştirildi. Şu anda Github'da UI Fluent kullanıyor. Bu isimle Akıcı Tasarım'ın şu anda tasarımdan geliştirmeye kadar eksiksiz ve sistematik bir bütün haline geldiği söylenebilir!
"Kısacası, iki kitaplık grubunu birleştirdik. UI Fabric ve Stardust Github depoları artık birleştirildi. Fluent UI adı altında Microsoftun Github kitaplığında birleştirildi! ... Farklılıklar nedeniyle ileri geri geçiş, deneyim ve akışta kesinti. "
Bir UI tasarımcısıysanız, "Akrilik Estetik" size daha geniş bir tasarım hayal gücü sağlayabilir, o zaman çalışmak için ilgili UI bileşenlerini de indirebilirsiniz. Tasarım ekibiniz sistematik bir çözüm arıyorsa, Akıcı Tasarım'ı deneyebilirsiniz.
Not: Bu makale bir oylama içerir, lütfen oy vermek için tasarım bağımlılığının resmi web sitesine (shejipi.com) gidin.
