[KM] Mac OS Design Guidelines

[JodieWu]

研讀 https://developer.apple.com/design/ 中 OS 設計的部分 用於重新設計結點分享app

[JodieWu]

Check List

General

General Menu

• [ ] Three types of menu

• Small. A row of four items appears at the top of the menu, above a list that contains the remaining items. For each item in the top row, the menu displays a symbol or icon, but no label.

• Medium. A row of three items appears at the top of the menu, above a list that contains the remaining items. For each item in the top row, the menu displays a symbol or icon above a short label.

• Large (the default). The menu displays all items in a list.

• [ ] Use title-style capitalization if you need to use more than one word in the menu title.
• [ ] Avoid mixing text with symbols or interface icons in a menu title.
• [ ] Support personalization, letting people customize toolbars, configure windows to display the views they use most, and choose the colors and fonts they want to see in the interface.
• [ ] Show keyboard shortcuts in your app’s main menus, not in context menus.

The Menu Bar

• [ ] Prefer using the default ordering
• [ ] Use the menu bar to give people easy access to all the commands they need to do things in your app.
• [ ] Menu order: The Apple menu- AppName- File-Edit-Format-View-(App-specific menus, if any)- Window- Help
• [ ] Prefer short, one-word menu titles.
• [ ] The app menu

The Menu Bar Extra

• [ ] Use black and clear colors to define their shapes
• [ ] The menu bar’s height : 24 pt. when your menu bar extra is selected.
• [ ] Display a menu — not a popover

Dock Menu

Context menus

• [ ] Aim for a small number of menu items. A context menu that’s too long can be difficult to scan and scroll.
• [ ] Support context menus consistently throughout your app. If you provide context menus for items in some places but not in others, people won’t know where they can use the feature and may think there’s a problem.

Sub Menu

• [ ] Use submenus sparingly. Each submenu adds complexity to the interface and hides the items it contains.
• [ ] Limit the depth and length of submenus: if a submenu contains more than about five items, consider creating a new menu.

部分完成： 1 hr

[JodieWu]

完成時間： 6 hr

Accessibility

• [ ] Support personalization: When you use standard components to implement your interface, text and controls automatically adapt to several accessibility settings, such as Bold Text, Larger Text, Invert Colors, and Increase Contrast.

• [ ] Audit and test your app or game for accessibility: turn on an accessibility feature, such as VoiceOver, Reduce Motion, or Large Text Size, and make sure that you can complete every task in the flow without difficulty.

• [ ] Consider giving links a visual indicator in addition to color, such as an underline.

• [ ] Let people input information by speaking instead of typing or gesturing.

• [ ] Support Siri or Shortcuts for performing important tasks by voice alone.

• [ ] When possible, don’t prevent people from selecting plain text.

• [ ] In platforms that don’t play haptics, use other ways to provide feedback when people interact with custom objects, such as sound.

• [ ] When an image is purely decorative and isn’t intended to communicate anything important, hide it from assistive technologies.

• [ ] In iPadOS, macOS, and visionOS, make sure people can use the keyboard to navigate and interact with all components in your app.

• [ ] Prefer regular or heavy font weights in your app.

• [ ] Don’t rely solely on color to differentiate between objects or communicate important information. If you use color to convey information, be sure to provide text labels or glyph shapes to help everyone perceive it.

• [ ] Prefer system colors for text. When you use system colors in text, it responds correctly to accessibility settings such as Invert Colors and Increase Contrast.

• [ ] Use strongly contrasting colors to improve readability.

  

• [ ] Avoid requiring animations unless they’re essential for your experience. In general, let people use your app without relying on any animations.

• [ ] Provide alternative text labels for custom interface icons. Alternative text labels — or accessibility descriptions

Branding

• [ ] Consider using a custom font: It can work well to use a custom font for headlines and subheadings while using a system font for body copy and captions, because the system fonts are designed for optimal legibility at small sizes.
• [ ] Ensure branding always defers to content: Using screen space for an element that does nothing but display a brand asset can mean there’s less room for the content people care about.
• [ ] Help people feel comfortable by using standard patterns consistently: Even a highly stylized interface can be approachable if it maintains familiar behaviors.
• [ ] Resist the temptation to display your logo throughout your app or game unless it’s essential for providing context.
• [ ] Follow Apple’s trademark guidelines: Apple trademarks must not appear in your app name or images.

Color

• [ ] Use color sparingly in nongame apps: In a nongame app, overuse of color can make communication less clear and can distract people.
• [ ] Make sure your app’s colors work well in both light and dark contexts.
• [ ] Include some transparency in custom component backgrounds when appropriate. Transparency lets your components pick up color from the window background when desktop tinting is active, creating a visual harmony that can persist even when the desktop picture changes. To help achieve this harmony, add transparency only to a custom component that has a visible background or bezel, and only when the component is in a neutral state, such as state that doesn’t use color.

Inclusion

• [ ] Avoid using specialized or technical terms without defining them. Using specialized or technical terms can make your writing more succinct, but doing so excludes people who don’t know what the terms mean. If you must use such terms, be sure to define them first and make the definitions easy for people to look up. Even when people know the definition of a specialized or technical term in a sentence, the sentence is easier to read — and translate — when it uses plain language instead.
• [ ] Being approachable: An approachable app doesn’t require people to have particular skills or knowledge before they can use it
• [ ] Build in ways to learn how to use your app: Consider designing a first-launch experience that helps people who are new to your app take a step-by-step approach while letting others skip straight to the content they want.

Motion

• [ ] Gratuitous or excessive animation can distract people and may make them feel disconnected or physically uncomfortable.
• [ ] Make motion optional. There are several reasons why people might not experience movement in your app, so it’s essential to avoid using it as the only way to communicate important information.

Privacy

• [ ] Avoid requesting permission at launch unless the data or resource is required for your app to function.

• [ ] Write copy that clearly describes how your app uses the ability, data, or resource you’re requesting.

  

• [ ] Pre-alert screens, windows, or views: Include only one button and make it clear that it opens the system alert.

  

• [ ] There are several prohibited custom-screen designs that will cause rejection. Some examples are offering incentives, displaying a screen or window that looks like a request, displaying an image of the alert, and annotating the screen behind the alert.

Right to left ( 評估我們是否需要支援相關國家語系）

https://developer.apple.com/design/human-interface-guidelines/right-to-left

Full-screen

• [ ] Support full-screen mode: If necessary, adjust your interface to take advantage of the expanded space in full-screen mode. Maintain access to essential app features so people can complete their task without exiting full-screen mode.

Deleting accounts

• [ ] Provide a clear way to initiate account deletion within your app or game.

Notifications

• [ ] A Focus helps people filter notifications during a time period they reserve for an activity like sleeping, working, reading, or driving.
• [ ] Make sure people can manage their notification settings within your app. In addition to requesting permission to send informational or marketing notifications, you must also provide an in-app settings screen that lets people change their choice.

Onboarding

• [ ] If you offer a tutorial, give people a way to skip it.
• [ ] Prefer teaching through interactivity.

Text View

• [ ] Make useful text selectable.