Еркін жобалау жүйесі - Fluent Design System

The Күнтізбе қолдану жылы Windows 10, Fluent Design аспектілерін, мысалы, акрилді және терезенің жіңішке шекараларын көрсетеді.
Еркін және Office Online Windows нұсқаларында көрінетін шабыттандырылған «Үй» экрандары Office 365 және Office 2019.

Еркін жобалау жүйесі (кодпен аталды Neon жобасы),[1] ретінде ресми түрде ашылды Microsoft еркін сөйлеу жүйесі,[2] Бұл жобалау тілі 2017 жылы әзірленген Microsoft. Еркін сөйлеу дизайны - бұл жаңарту Microsoft Design Language 2 (көпшілікке «Метро» деп аталады) барлығына арналған бағдарламалық жасақтамада қолданылатын дизайн мен өзара әрекеттесуге арналған нұсқаулықтан тұрады Windows 10 құрылғылар мен платформалар. Жүйе бес негізгі компонентке негізделген: жарық, тереңдік, қозғалыс, материал және масштаб.[3] Жаңа дизайн тілі қозғалыс, тереңдік және мөлдірлік әсерлерінің анағұрлым көрнекті қолданылуын қамтиды.[4]

Fluent-ке көшу - ұзақ мерзімді жоба; дизайн аспектілері пайда бола бастады Windows 10 2017 жылдың қазанында шыққан «Күзгі жасаушылардың жаңартуларынан», сонымен қатар Xbox One жүйесінің бағдарламалық жасақтамасы қатар шығарылды.[5][6][7][8] Кейінірек бірге жасалынғаны анықталды Windows 10X,[9] болашақ Windows 10-ға ұқсас дизайны бар жаңартудан басқа.[10]

Metro және Aero-мен салыстырғанда

Еркін сөйлеудің негізгі қағидалары немесе «блоктары» (Жеңіл, Тереңдік, Қозғалыс, Материал және Масштаб) тегіс тұжырымдамадан бас тартады Метро Метрополитеннің таза көрінісі мен сезімін сақтай отырып, Fluent визуалды элементтерін жаңартады Aero, енгізілген дизайнерлік тәсіл Windows Vista және Windows 7 бұлыңғыр мөлдірлікті, параллаксты анимациялық үлгілерді, көлеңкелі көлеңкеді, тышқанның меңзерінен немесе кірістірілген қимылдардан кейінгі әсерлерден алынған әсерлерді және метрополитенді «жасанды материалдардан» тұрады.

Fluent-тің қазіргі кездегі қолданылуы

Жарық

Бөлектеуді ашыңыз

Жарықтың мақсаты - назар аудару және ақпаратты жарықтандыру. Қозғалыс кезінде Reveal бөлектеуі сияқты нысандардың жақын орналасқан жасырын шекараларын жарықтандырады гамбургер навигациясы мәзірі тізімдер мен түймелер. Таңдау кезінде, мысалы, басу немесе түрту арқылы ақ дөңгелек жарықтандыру әсері тез пайда болады.[11] Сонымен қатар, Windows голографиялық дөңгелек ақ көрсеткіш бар.

6 қарашада 2017, Microsoft қызметкері Дэвид Хаз ашылған бөлектеуді қолдануды жоспарлап отырғанын мәлімдеді тапсырмалар тақтасы бар - бірақ 2019 жылдың шілдесіндегі жағдай бойынша, ол болған жоқ.[12]

Фокусты көрсету

Көрнекі фокус арқылы шекара жарқылымен үйлесімді элементтер.[13]

Тереңдігі

Тереңдікті қосу арқылы z осі және қабаттар арқылы мазмұнды саралауға мүмкіндік береді. Тереңдігі көлеңкелі және Z тереңдіктегі қабаттар арқылы ұсынылады.[14][15] Бұл әсіресе 2019 жылы қайта жасалған Office бағдарламасында айқын көрінеді.

Қозғалыс

Қозғалыс UI элементтері арасындағы байланысты орнатады және тәжірибе сабақтастығын қамтамасыз етеді.[16]

Анимацияларды қосу / жою

Элементтерді коллекцияға енгізуге және жоюға арналған анимацияларды тізімдеңіз.[17]

Байланыстырылған анимациялар

Байланыстырылған анимациялар - бұл элементтердің ауысуы. Мазмұнды өзгерту кезінде элемент қосымша арқылы ұшып жүретін көрінеді.[18]

Мазмұнға өту

Беттегі мазмұнның бір бөлігі ғана өзгерген кезде қолданылады.[19]

Бұрғылау

Бұрғылау қолданбаны тереңірек шарлау кезінде қолданылады. Мысалы, элемент таңдалғаннан кейін қосымша ақпаратты көрсету.[20]

Өңдеу

Бөлшектерді көру және алып тастау үшін сөніп қалу және өшу.[21]

Параллакс

Parallax нысандарды әртүрлі жылдамдықпен қозғалтады. Фон жоғарыдағы мазмұнға қарағанда баяу қозғалады. Мысалы, тізім қозғалысқа қосымша тереңдік эффектісін жасай отырып, фондық суретке қарағанда жылдам айналады.[22]

Кері байланыс

Элемент басылған кезде, ол бір сәтте фонға түсіп кетеді, содан кейін бастапқы қалпына келеді. Баспасөз байланысының мысалдары Бастау мәзірі тірі плиткалар, Әрекет орталығы жылдам әрекеттер және Microsoft Edge мекенжай жолағы түймелер.[23]

Материал

Акрил

Акрил материалдары бар жаңа белгішелер Microsoft бағдарламалары үшін басталды, бастап Кеңсе қосымшалар мен Хром - негізделген Microsoft Edge сәйкесінше 2018 және 2019 жылдары.[24][25] Соңғы белгішелердің алдын-ала нұсқалары «Office 365 үшін жаңа белгішелермен танысыңыз» видеосында,[26] бұрын Windows 10X ашылған кезде байқалған жоқ,[27] 2019 жылдың 12 желтоқсанында ресми түрде ашылғанға дейін.[28] Бұл белгішелер пайда бола бастады Microsoft дүкені бастап сол бағдарламаларға арналған жаңартулар Пошта және Күнтізбе.[29][30]

Акрил материалы шамалы шу әсерімен мөлдір, бұлыңғыр әсер жасайды. Көрнекі иерархияны әр түрлі мөлдірліктерді қолдану арқылы жасауға болады. Мысалы, қосымшада бастапқы мазмұн беттері мөлдір емес (виджеттерден немесе жеңіл бағдарламалардан басқа) Калькулятор ), екінші тақтада 80% фондық акрил, ал үшінші панельде 60% фондық акрил болуы мүмкін. Фондық акрил белсенді акрил материалының артындағы барлық заттарды бұлыңғыр етеді. Қолданба ішіндегі акрил қолданба ішіндегі мазмұнды бұлыңғыр етеді.

Акрил қосымша таңдалмаған кезде белгілі бір терезеде ажыратылады. Акрилдің екі түрі де мөлдірлік өшірілгенде, батареяны үнемдеу режимі қосылған кезде немесе төменгі деңгейлі жабдықта жүйеде ажыратылады. Фондық акрил терезе таңдалмаған немесе қосулы кезде ажыратылады Windows 10 Mobile, HoloLens немесе планшет режимі.[31]

Масштаб

Қолданбалардың масштабы әртүрлі форма факторлары, дисплей өлшемдері, және 0D дейін 3D. Элементтер экран өлшеміне бейімделеді және бірнеше өлшемдерде қол жетімді.[32][33] Саналы басқару элементтері де масштабта жіктеледі (мысалы, шақырудың әртүрлі әдістеріне бейімделетін айналдыру жолақтары мен кірістер)[34][35]

Анықталмаған

  • Кеңістіктік дыбыс[36]

Сондай-ақ қараңыз

Әдебиеттер тізімі

  1. ^ «Fluent Design - бұл Microsoft үшін Windows үшін жаңа заманауи интерфейс және басқалар». Жоғарғы жақ. 2017-05-11. Алынған 2017-05-11.
  2. ^ «Twitter-де Windows Developer». Twitter. Алынған 2017-05-11.
  3. ^ «Еркін дизайн тілі». Microsoft. Алынған 2017-05-12.
  4. ^ «Жаңа Windows көрінісі мен көрінісі, Neon, ресми түрде« Microsoft Fluent Design System »болып табылады"". Ars Technica. Алынған 11 мамыр 2017.
  5. ^ «Майкрософт Windows 10 жүйесіндегі еркін сөйлеу дизайнын өзгертеді». Жоғарғы жақ. Алынған 2017-10-29.
  6. ^ «Майкрософттың еркін сөйлеу жүйесі Windows-ты жақсы етіп көрсетуге қауіп төндіреді». Ars Technica. Алынған 2017-10-29.
  7. ^ «Xbox One-дың жаңа жаңартуы Fluent Design көмегімен бақылау тақтасын қайта қарайды». Жоғарғы жақ. Алынған 2017-10-29.
  8. ^ «Xbox One бүгінде үлкен жаңартуды алады, оның ішінде жылдамырақ бақылау тақтасы бар». Жоғарғы жақ. Алынған 2017-10-29.
  9. ^ «Қос экрандарға арналған Microsoft корпорациясының жаңа Windows 10X операциялық жүйесіне алғашқы көзқарас». Жоғарғы жақ. 11 ақпан, 2020. Алынған 19 сәуір, 2020.
  10. ^ Instagram. 19 наурыз, 2020 https://www.instagram.com/p/B97VqkXg0iN/. Алынған 19 сәуір, 2020. Жоқ немесе бос | тақырып = (Көмектесіңдер)
  11. ^ миакобтар. «UWP қосымшасын әзірлеуші». docs.microsoft.com. Алынған 2017-12-22.
  12. ^ «Бастапқы мәзірде жақсы сөйлейтін дизайн жоқ - Жаратушының күзгі жаңартуы». жауаптар.microsoft.com. Алынған 2017-12-26.
  13. ^ cphilippona. «Reowal focus - UWP қосымшасын жасаушы». docs.microsoft.com. Алынған 2018-03-30.
  14. ^ «Майкрософт өзінің еркін сөйлеу жүйесінде» Z тереңдік қабатын «3D функциясын көрсетеді». Windows орталық. Алынған 2017-12-22.
  15. ^ «Microsoft Windows 10 аралас шындық құрылғыларына арналған Z-Depth қабатын ашады». VRFocus. Алынған 2017-12-22.
  16. ^ миакобтар. «UWP қосымшаларындағы қозғалыс және анимация - UWP қосымшаларын жасаушы». docs.microsoft.com. Алынған 2017-12-22.
  17. ^ миакобтар. «UWP қосымшаларындағы қозғалыс және анимация - UWP қосымшаларын жасаушы». docs.microsoft.com. Алынған 2018-03-30.
  18. ^ миакобтар. «Байланыстырылған анимация - UWP қосымшасын әзірлеуші». docs.microsoft.com. Алынған 2017-12-31.
  19. ^ миакобтар. «UWP қосымшаларындағы қозғалыс және анимация - UWP қосымшаларын жасаушы». docs.microsoft.com. Алынған 2018-03-30.
  20. ^ дэвидвкимбол. «WUP қосымшаларындағы парақтың ауысуы - UWP қосымшалары». docs.microsoft.com. Алынған 2019-11-27.
  21. ^ миакобтар. «UWP қосымшаларындағы қозғалыс және анимация - UWP қосымшаларын жасаушы». docs.microsoft.com. Алынған 2018-03-30.
  22. ^ миакобтар. «ParallaxView басқару элементін қолданбаңызға тереңдік пен қозғалыс қосу үшін қалай пайдалануға болады. - UWP қосымшасы». docs.microsoft.com. Алынған 2017-12-22.
  23. ^ миакобтар. «UWP қосымшаларындағы меңзерді басу анимациясы - UWP қосымшасын жасаушы». docs.microsoft.com. Алынған 2017-12-31.
  24. ^ «Жаңа жұмыс әлеміне ену үшін Office қолданбасының белгішелерін қайта құру». Орташа. 29 қараша 2018 ж. Алынған 19 сәуір, 2020.
  25. ^ «Microsoft компаниясы Edge браузерінің бұдан былай Internet Explorer-ге ұқсамайтын жаңа логотипін ұсынады». Жоғарғы жақ. 2019 жылғы 2 қараша. Алынған 19 сәуір, 2020.
  26. ^ «Office 365 үшін жаңа белгішелермен танысу». 29 қараша 2018 ж. Алынған 19 сәуір, 2020.
  27. ^ «#MicrosoftEvent Live». 2 қазан, 2019. Алынған 19 сәуір, 2020.
  28. ^ «Калейдоскоп белгішесі». Орташа. 12 желтоқсан, 2019. Алынған 19 сәуір, 2020.
  29. ^ «Иконикалық белгішелер: Windows әлемін жобалау». Орташа. 20 ақпан, 2020. Алынған 19 сәуір, 2020.
  30. ^ «Microsoft түрлі-түсті Windows 10 белгішелерін шығарады». Жоғарғы жақ. 20 ақпан, 2020. Алынған 19 сәуір, 2020.
  31. ^ миакобтар. «Акрил материалы - UWP қосымшасын жасаушы». docs.microsoft.com. Алынған 2017-12-22.
  32. ^ «Еркін жобалау жүйесі». fluent.microsoft.com. Архивтелген түпнұсқа 2018-03-01. Алынған 2018-02-18.
  33. ^ Верма, Адарш (2017-05-12). «Еркін жобалау жүйесі дегеніміз не? Microsoft корпорациясы ең әдемі операциялық жүйені қалай құруда?». Фоссайттар. Алынған 2018-02-18.
  34. ^ сіңіру. «Айналдыруды қарау құралын басқару - UWP қосымшасын әзірлеуші». docs.microsoft.com. Алынған 2017-12-22.
  35. ^ «Windows 10-ға арналған» бір толқынды «Microsoft Fluent Design System жүйесіндегі жаңалықтар». Windows орталық. 2017-06-29. Алынған 2017-12-22.
  36. ^ «Кеңістіктегі дыбыстық дизайн». developer.microsoft.com. Алынған 2017-12-22.

Сыртқы сілтемелер