Windows 10: Microsoft bringing Fluent Design to Office for iOS and Android

Brink · Dec 5, 2019

In Seattle, an engineer thumbs through a Mumbai-based coworker's edits while walking between meetings. In rural China, an artisan uses their phone to sell their creations. In Johannesburg, a lawyer texts back a client before catching the bus. These real-life snapshots show the diverse and evolving workflows of today's 5 billion mobile users worldwide.

In many ways, mobile productivity is still a code waiting to be cracked. Beyond mobile-first and mobile-only markets where necessity mandates it, we can rarely accomplish as much on a phone as we do on our PCs. However, we believe in empowering everyone to be fully productive on any device. Our teams' focus on emerging markets, inclusive design, and accessibility has broadened our aperture as we create more tailored, intelligent experiences across Microsoft 365.

Today, we]re excited to unveil redesigns to our flagship mobile apps! We've redesigned Outlook, OneDrive, Word, Excel, and PowerPoint. You can also expect new versions of Teams, Yammer, and Planner soon. These redesigns contribute to broader company efforts to take mobile productivity to the next level. At Microsoft Ignite, we publicly previewed our beta Office app and Fluid Framework. Office combines multiple Microsoft 365 mobile experiences in one app, and Fluid is a new technology that breaks broad experiences into dynamic, real-time components ideal for mobile scenarios.

Beyond the public eye, we]re also conducting global research, designing a mobile-born version of Fluent, exploring scenarios for dual-screen experiences, and creating mobile UI toolkits for external developers to build this mobile future alongside us.

Read on for a behind-the-scenes look at our research, design process, and future vision for Microsoft 365 mobile experiences.

How newly crafted shared components were used to redesign our mobile experiences from the ground up.

Research: Understanding microproductivity and the mobile mindset

Human-centered research underpins great design, and our teams dove deep to understand how people think, feel, and act when getting things done on the go. Research in mobile-first or mobile-only markets like India and China allowed us to study everyone from students to factory floor workers. We also leveraged pioneering work by Jaime Teevan and Microsoft researchers around "microproductivity."

Microproductivity exemplifies meeting users where they're at: the modern world has increasingly fragmented work. Instead of solely pushing people to focus more, however, we explored whether those fragmented slices of time could be more productive with "microtasks." A microtask is a bite-sized piece of a bigger task, like writing one paragraph instead of working on an entire Word document. Research showed microtasks increase feelings of productivity.

This aligned with our observations of mobile behavior where, despite spending up to four hours a day on the phone, sessions average just 20 to 30 seconds. Moving forward, we began redesigns by asking two things: What are the most valuable actions that someone can perform on their phone in less than 30 seconds? And how can our intelligent services enrich these actions?

As it turns out, helping people be as productive in 30 seconds as they usually are in 30 minutes unlocks myriad opportunities, and we've released several new features designed with mobile in mind. In Outlook, the new Play My Emails feature lets you listen to your inbox as you would a podcast - ideal for making productive use of idle time. In Word and Office apps, Read Aloud offers a similar benefit. The mobile-first experience of quickly scanning docs and tables with your phone's camera has been added to Office, OneDrive, and several other apps. Microsoft intelligence enhances each of these features to present context-specific, relevant, and personalized information.

Craft: Bringing Fluent to mobile for a post-OS world

Fluent for iOS and Android is a mobile-born interpretation of our Fluent principles that ensures experiences will feel both distinctly Microsoft and at home on mobile devices.

Leveraging native platform conventions also lets us tap into built-in accessibility technologies. This ensures an equally great experience for people who prefer an auditory experience like Android's talkback screen reader, or low vision customers using iOS's dynamic type.

Moreover, any update we make to the system populates to all apps that use Fluent mobile. For example, when we recently updated our color palettes to match the latest accessibility standards and introduce dark mode, all changes automatically updated in each of our app UI components.

Among our new design artifacts are redesigned experience icons, which you'll see in current and future designs.

When designing Fluent for mobile, we focused on consistently designing seven signature elements to create a great end-to-end experience: the app icon, splash screen, cells, cards, typography, people, and file lists. Now, tapping the app icon takes you to a branded splash screen, which leads to your content, neatly framed by a brand-colored header and a simple bottom bar featuring our brand-new, beautiful and friendly Fluent mobile icons ready to take action.

Microsoft 365 applications seen side by side, illustrating the how design language can also unify and bring delight to a system of experiences.

Coherence: Alignment through shareable mobile UI toolkits

For all Microsoft 365 experiences, coherence is an important design tenet, but it's particularly vital in mobile environments. While on the go, we often switch between apps and have shorter attention spans, sharper time constraints, or are in more distracting environments.

When mobile apps seamlessly connect and feel similar, it reduces cognitive burden by eliminating the need to re-learn app patterns and navigation. This is especially important to us as we're investing in side-by-side productivity scenarios on iPad and Surface Duo.

As part of the Fluent Mobile effort, a team of over 40 designers created mobile UI toolkits that enable all designers at Microsoft to build experiences using the same shared components, and collectively evolve the design system over time. These toolkits are also available to external designers and developers to ensure our mobile experiences stay aligned and scale with our customer and platform needs. Start building your own best-in-class apps today with our Fluent toolkit.

A sampling of shared components from the Fluent mobile UI toolkit.

Vision: The future of mobile productivity

When it comes to mobile productivity, we're just getting started.

We're excited to build entirely new mobile experiences with Fluid, whose dynamic components foster microtasking by updating in real time and making it easier to collaborate. As phones increasingly bridge into augmented- and mixed-reality spaces, we'll be evolving Fluent mobile to design 3D experiences that are especially promising for firstline workers and students. Finally, expanded investments in inclusive design propel us beyond leveraging existing accessibility technologies and toward designing entirely new voice interactions for innovative experiences on Surface Earbuds.

So, the next time you’re on the move, grab your phone and give our new mobile apps a whirl.
Click to expand...

Source: Cracking the Code to Mobile Productivity - Microsoft Design - Medium

:)

MenaNashaat · Dec 5, 2019

fluent design system on 950xl

as a big fan and Microsoft user . I was just asking about windows fluent design system, can I upgrade my Microsoft lumia 950xl windows 10 to the fluent design system.. if there is ability for that how can I upgrade my system to fluent design

thanks ..

Brink · Dec 5, 2019

New Fluent Design Experience for Microsoft OneDrive Mobile apps

Work does not solely revolve around an office space. With Microsoft mobile apps, you can create and edit documents, scan receipts and business cards, markup and annotate PDFs, chat and co-author Office documents and share content with your peers across departments and with external clients and vendors outside your organization – directly from a mobile device.

Alongside Office Mobile apps and Microsoft Teams, our 4.5+ rated OneDrive mobile apps on iOS and Android empower you to stay connected to all files throughout Microsoft 365 from anywhere as well as capture and collaborate on the go.

Last year we announced that Office Fluent Design would expand to OneDrive for the web and align with the entire Office 365 suite on a common color palette, typography and icon systems. We introduced a shared header seamless across products, with elements thoughtfully aligned to focus on what matters. As we continued to roll out the Fluent Design system and the revamped Office brand icons, we also updated the file folder representation, unveiling golden folders across web and mobile.

Today, we carry forward this broad design overhaul to mobile and are excited to share the refreshed look and feel of the OneDrive mobile app. We, too, are updating how you work with recent files, annotate PDFs, link to files via Outlook mobile and more.

Refreshed design for OneDrive app on iOS
[roadmap: 49085]

Well-crafted experiences are at the heart and soul of Microsoft OneDrive. With a focus on familiarity and ease-of-use, we’re bringing common experiences that align with the suite of Office apps along with subtle improvements to make finding and navigating files easier than ever.
Our bold new header adds a splash of color, more native feel, and alignment with Outlook on iOS. Microsoft Search is now integrated front and center, allowing users to find files faster.

Revamped look and feel of OneDrive on iOS

The files list has also seen unique, updates. The font sizes and colors have been updated to bring increased legibility and contrast to long lists of files – making it easier than ever for users to get back to their files.

Lastly, our command sheet, accessible from the “…” icon, has seen a refresh, bringing in a softer look and a draggable surface.

Refreshed and easily accessible command sheet

Recent View now includes PDFs and scans
[roadmap: 49083]

Quickly find the files that matter the most to you. OneDrive for Microsoft 365 makes it simple to get to your recent files easily across web, mobile, and Office.

We have improved the “Recent files” experience on the iOS and Android apps, making it consistent to the experience you see on OneDrive for the Web and Office endpoints. Uploaded scans and recently viewed PDFs are now automatically surfaced at the top of the “Recent” list.

Recent View now includes PDFs and scans

New file picking experience in Outlook for iOS
[roadmap: 27015]

With this update, we have rolled out a new and improved file picking experience to Outlook on iOS that lets you quickly and easily share files as links from across Microsoft 365. This OneDrive-powered file picker in Outlook enables you to share the files right from the email compose screen.

Now, when you share a file, you will be able to navigate and browse through a consistent and familiar “Recent” list of files, files and folders in your OneDrive, email attachments, as well as frequently accessed and followed shared libraries.

These files can now be shared quickly and securely with sharing links that comply with your organization’s sharing permissions.

New file picker experience in Outlook for iOS

Updated experience for PDF annotation
[roadmap: 49084]

Accomplishing tasks on your phone is easy and fast with OneDrive including annotating a PDF file to highlight items or add notes. The updated PDF editing experience for OneDrive on iOS is designed around quick actions that lead to a truly mobile first markup experience.

Pens, highlighters, and the eraser can now be found at the bottom of the screen, making markup more intuitive and touch friendly.

Notes are now more lightweight and reactive, making them easier to create and view. We’ve also made it simpler to customize and select note color by bringing the color picker into the note surface.

We’ve also made visual improvements to the signature feature by increasing the signing surface area, smoothing out the pen handwriting, and made it more intuitive to store signatures for future use.

These changes, too, will be coming soon for OneDrive on Android.

Revamped settings experience
[roadmap: 53230]

We have improved the usability of our settings page for OneDrive on iOS so that the configurations are now more discoverable, simple, and accessible. Notification settings are now grouped by account in a single “Notifications page” so customizing according to specific preferences is more straightforward.

The settings for “Camera Upload” has been updated as well, to give users more control over aspects of the feature like choosing whether videos are uploaded and how photos are organized. And lastly, we’ve added a friendly question mark icon next to certain settings to provide additional context about that feature.

Learn more and stay engaged

We are very excited to showcase these features and discuss effective mobile usage scenarios with you. Join us in the upcoming, related webinar and AMA:

WEBINAR | If you are interested in learning more, please register for our upcoming webinar on “Redefining mobility with OneDrive” on July 31, 2019 at 9:00 am PT.

AMA | Participate in our AMA on July 31, 2019 between 9:30 am – 10 :30 am PT to get answers to your questions directly from the experts.

Till then,

Install OneDrive on iOS and Android to take advantage of the various functionalities.

Explore the perks of using the app in a related blog post, “Top 5 benefits of the OneDrive mobile app.”

Check out the latest look, feel and workflows while rediscovering what you can get done in just a few taps with the OneDrive mobile app, in a related session from SPC 19, presented by the team that designed and built it ," "

We continue to evolve OneDrive as a place to access, share, and collaborate on all your files in Office 365, keeping them protected and readily accessible on all your devices, anywhere.

You can stay up-to-date on all things via the OneDrive Blog and take advantage of end-user training resources on our Office support center.

Thank you again for your support of OneDrive. We look forward to your continued feedback on UserVoice and hope to connect with you at Ignite or another upcoming Microsoft or community-lead event.

Thanks for your time reading all about OneDrive,
Jackson Cowan, Lauren Khoo, Ankita Kirti – OneDrive | Microsoft
Click to expand...

Source: https://techcommunity.microsoft.com/...ce/ba-p/757716

Tweet

— Twitter API (@user) View on Twiiter
Click to expand...

Brink · Dec 5, 2019

New Fluent Design Experience for Microsoft OneDrive Mobile apps

Work does not solely revolve around an office space. With Microsoft mobile apps, you can create and edit documents, scan receipts and business cards, markup and annotate PDFs, chat and co-author Office documents and share content with your peers across departments and with external clients and vendors outside your organization – directly from a mobile device.

Alongside Office Mobile apps and Microsoft Teams, our 4.5+ rated OneDrive mobile apps on iOS and Android empower you to stay connected to all files throughout Microsoft 365 from anywhere as well as capture and collaborate on the go.

Last year we announced that Office Fluent Design would expand to OneDrive for the web and align with the entire Office 365 suite on a common color palette, typography and icon systems. We introduced a shared header seamless across products, with elements thoughtfully aligned to focus on what matters. As we continued to roll out the Fluent Design system and the revamped Office brand icons, we also updated the file folder representation, unveiling golden folders across web and mobile.

Today, we carry forward this broad design overhaul to mobile and are excited to share the refreshed look and feel of the OneDrive mobile app. We, too, are updating how you work with recent files, annotate PDFs, link to files via Outlook mobile and more.

Refreshed design for OneDrive app on iOS
[roadmap: 49085]

Well-crafted experiences are at the heart and soul of Microsoft OneDrive. With a focus on familiarity and ease-of-use, we’re bringing common experiences that align with the suite of Office apps along with subtle improvements to make finding and navigating files easier than ever.
Our bold new header adds a splash of color, more native feel, and alignment with Outlook on iOS. Microsoft Search is now integrated front and center, allowing users to find files faster.

Revamped look and feel of OneDrive on iOS

The files list has also seen unique, updates. The font sizes and colors have been updated to bring increased legibility and contrast to long lists of files – making it easier than ever for users to get back to their files.

Lastly, our command sheet, accessible from the “…” icon, has seen a refresh, bringing in a softer look and a draggable surface.

Refreshed and easily accessible command sheet

Recent View now includes PDFs and scans
[roadmap: 49083]

Quickly find the files that matter the most to you. OneDrive for Microsoft 365 makes it simple to get to your recent files easily across web, mobile, and Office.

We have improved the “Recent files” experience on the iOS and Android apps, making it consistent to the experience you see on OneDrive for the Web and Office endpoints. Uploaded scans and recently viewed PDFs are now automatically surfaced at the top of the “Recent” list.

Recent View now includes PDFs and scans

New file picking experience in Outlook for iOS
[roadmap: 27015]

With this update, we have rolled out a new and improved file picking experience to Outlook on iOS that lets you quickly and easily share files as links from across Microsoft 365. This OneDrive-powered file picker in Outlook enables you to share the files right from the email compose screen.

Now, when you share a file, you will be able to navigate and browse through a consistent and familiar “Recent” list of files, files and folders in your OneDrive, email attachments, as well as frequently accessed and followed shared libraries.

These files can now be shared quickly and securely with sharing links that comply with your organization’s sharing permissions.

New file picker experience in Outlook for iOS

Updated experience for PDF annotation
[roadmap: 49084]

Accomplishing tasks on your phone is easy and fast with OneDrive including annotating a PDF file to highlight items or add notes. The updated PDF editing experience for OneDrive on iOS is designed around quick actions that lead to a truly mobile first markup experience.

Pens, highlighters, and the eraser can now be found at the bottom of the screen, making markup more intuitive and touch friendly.

Notes are now more lightweight and reactive, making them easier to create and view. We’ve also made it simpler to customize and select note color by bringing the color picker into the note surface.

We’ve also made visual improvements to the signature feature by increasing the signing surface area, smoothing out the pen handwriting, and made it more intuitive to store signatures for future use.

These changes, too, will be coming soon for OneDrive on Android.

Revamped settings experience
[roadmap: 53230]

We have improved the usability of our settings page for OneDrive on iOS so that the configurations are now more discoverable, simple, and accessible. Notification settings are now grouped by account in a single “Notifications page” so customizing according to specific preferences is more straightforward.

The settings for “Camera Upload” has been updated as well, to give users more control over aspects of the feature like choosing whether videos are uploaded and how photos are organized. And lastly, we’ve added a friendly question mark icon next to certain settings to provide additional context about that feature.

Learn more and stay engaged

We are very excited to showcase these features and discuss effective mobile usage scenarios with you. Join us in the upcoming, related webinar and AMA:

WEBINAR | If you are interested in learning more, please register for our upcoming webinar on “Redefining mobility with OneDrive” on July 31, 2019 at 9:00 am PT.

AMA | Participate in our AMA on July 31, 2019 between 9:30 am – 10 :30 am PT to get answers to your questions directly from the experts.

Till then,

Install OneDrive on iOS and Android to take advantage of the various functionalities.

Explore the perks of using the app in a related blog post, “Top 5 benefits of the OneDrive mobile app.”

Check out the latest look, feel and workflows while rediscovering what you can get done in just a few taps with the OneDrive mobile app, in a related session from SPC 19, presented by the team that designed and built it ," "

We continue to evolve OneDrive as a place to access, share, and collaborate on all your files in Office 365, keeping them protected and readily accessible on all your devices, anywhere.

You can stay up-to-date on all things via the OneDrive Blog and take advantage of end-user training resources on our Office support center.

Thank you again for your support of OneDrive. We look forward to your continued feedback on UserVoice and hope to connect with you at Ignite or another upcoming Microsoft or community-lead event.

Thanks for your time reading all about OneDrive,
Jackson Cowan, Lauren Khoo, Ankita Kirti – OneDrive | Microsoft
Click to expand...

Source: https://techcommunity.microsoft.com/...ce/ba-p/757716

Tweet

— Twitter API (@user) View on Twiiter

Windows 10: Microsoft bringing Fluent Design to Office for iOS and Android

Microsoft bringing Fluent Design to Office for iOS and Android

Microsoft bringing Fluent Design to Office for iOS and Android

Microsoft bringing Fluent Design to Office for iOS and Android

Microsoft bringing Fluent Design to Office for iOS and Android - Similar Threads - Microsoft bringing Fluent

Re Fluent Design

Re Fluent Design

Fluent Design

Fluent Design

Microsoft expanding the Fluent design to OneDrive for Android

Outlook for iOS and Android get new icons with Fluent design

When microsoft will bring us a new file explorer with fluent design???

New Outlook mobile design for iOS and Android

Microsoft is bringing the rebranded News app to Windows 10 with Fluent Design