After iOS 13 was released, I compiled this update of Apple's Human Machine Design Guidelines

After Apple announced iOS 13 at WWDC (Worldwide Developers Conference) in the early morning of June 4, it immediately provided Sketch UI templates for iOS 13, and there were many updates to the Human Interface Guidelines.

iOS 13 official Sketch UI file download

You can download the latest iOS, macOS, macOS, tvOS and other UI templates at https://developer.apple.com/design/resources/, providing source files for Sketch, Photoshop, Adobe XD and even Keynote. As of June 9, only iOS 13 UI templates for Sketch are available, and other versions will need to wait.

Note: Since iOS 13 presents some icons through the new SF Symbols technology, if you don’t make some settings, the icons will be garbled when you open the Sketch template for the first time.

You must first install the SF Symbols program (download address: https://developer.apple.com/design/downloads/SF-Font-Pro.dmg), and then delete the old San Francisco font following the instructions in the program before the Sketch template can display normally.

The new UI template adds Dark Mode styles, iPad OS layout templates, and more.

There are some interesting things, such as the selected state of the segmented control has a more textured feel, like a raised button.

I put together a file containing: Sketch UI templates, component libraries, the new SF Symbols app, and the San Francisco Pro font available for download.

• Download link: https://pan.baidu.com/s/1qkZbToUFE7GYaH11r0uyag
• Extraction code: bwtp
• Alternative link: https://share.weiyun.com/5iYa2gk

Design Guide Content Updates

The design guide update consists of two parts: new content and revision of old content.

1. New content

iPad Apps for Mac

The last WWDC mentioned support for porting iOS apps to Mac, and this WWDC provided detailed porting techniques and design solutions. This part mainly instructs developers to pay attention to the interface adaptation of large-screen Macs, support for mouse and keyboard shortcut operations, etc. during the porting process.

Dark Mode

After enabling dark mode, iOS will automatically adapt the background, main color, etc. However, designers still need to check how colors, icons, and text colors display in dark mode.

Materials

iOS Materials are different from Google's Material Design. iOS Materials refers to adding a semi-transparent effect to the control itself or the background to give the interface a sense of depth. It can make users aware of the relationship between the control and the background without distracting the user's attention. In fact, this is the iOS 7 frosted glass effect, but it has never been emphasized in the design guidelines before.

Multiwindow on iPad (iPad supports multiple windows)

iPad OS supports opening multiple windows for a single app. The windows of iPad App can be divided into main window and sub-window. The sub-window should provide a "Close" or "Done" button. Clicking the button will close the sub-window and return to the main window. The "Back" button cannot be used to replace the close function, because users may not understand whether the return button closes the sub-window or returns to the previous page in the sub-window.

Context Menus

Context Menus is an improved version of Peek and Pop in 3D Touch. In the future, Context Menus can be called up with 3D Touch or opened with other operations or gestures (such as long press). This means that iOS devices without 3D Touch also indirectly gain the functionality of 3D Touch.

2. Modification of old content

Added Custom haptic pattern

Since the iPhone 7 added a linear motor, we can feel the phone vibrating slightly when sliding the Picker and other controls, which gives users the touch of a real-world dial. iOS 13 allows custom touches, such as when a character in a game jumps down from a tree, using custom touches to simulate the effect of the floor vibrating when jumping down makes the experience more real and intense.

New System Color and Dynamic System Color

If you use a specific RGB color value for interface design, when the user uses dark mode or disabled people turn on barrier-free mode, the original color may become ugly or difficult to see. The colors provided by System Color will automatically change to appropriate color values ​​in dark mode and barrier-free mode, making the colors more comfortable and clear in these special modes.

Dynamic System Color can define a set of colors for a certain type of control to automatically adapt to light mode and dark mode. For example, if you set a set of colors for the title, all the titles in the entire app will be the same color in light mode, and the color will change to another color when switching to dark mode.

Added card-style modal

When it comes to modality, the most common one is a dialog box popping up in the middle of the interface.

Or a full-screen modal, exit the modal through the Cancel or Done button on the navigation bar.

In fact, before iOS 13, the system mail app also provided a modal style between a dialog box and a full-screen modal. This modal card not only occupies a very large screen space, but also allows the user to vaguely see the navigation bar of the original page through the top of the card, allowing users to realize the relationship between the modal and the previous page. After the iOS 13 update, the card-style modal was officially written into the iOS design guidelines. I believe that more and more apps will adopt this style in the future.

The large title navigation bar can hide the bottom border

Hide the bottom border line of the large title navigation bar to make the title and content more closely connected. Of course, the bottom border line will still be displayed when scrolling, otherwise it will be difficult to distinguish the boundary between the navigation bar and the content.

△ iOS 12 vs. iOS 13 large title navigation bar