Upgrade to Pro — share decks privately, control downloads, hide ads and more …

日本語アプリケーションのインターフェイスデザイン(公開版)

usagimaru
March 13, 2018

 日本語アプリケーションのインターフェイスデザイン(公開版)

UI Crunch #12「伝える」を加速させる。書く、読むUI
https://ui-crunch.connpass.com/event/78845/

usagimaru

March 13, 2018
Tweet

More Decks by usagimaru

Other Decks in Design

Transcript

  1. v1 2018.3.13 © 2018 Satori MARU. @usagimaruma ೔ ຊ ޠ

    Ξ ϓ Ϧ έ ồ γ ἀ ϯ ͷ Π ϯ λ ồ ϑ ỻ Π ε σ β Π ϯ UI Crunch #12 ň ఻ ͑ Δ Ứ Λ Ճ ଎ ͞ ͤ Δ Ố ॻ ͘ ỏ ಡ Ή 6*
  2. @usagimaruma ؙྯཬ · Δ ͞ ͱ Γ גࣜձࣾάουύον Application Designer

    • Interface Developer • iOS Developer macOS Developer • Sketch Plugin Developer
  3. ฏ ੒ ࡾ े ೥ े Ұ ݄ ฏ ੒

    ೥ ݄ 11 30 ೋ ઍ े ീ ೥ े Ұ ݄ ೋ ࿡ ࣣ ീ ೥ े Ұ ݄ ೋ ʓ Ұ ീ ೥ Ұ Ұ ݄ ੢ ྐྵ ੢ ྐྵ ߖ ل ࿨ ྐྵ ࿨ ྐྵ
  4. ฏ ੒ ೥ ݄ 11 30 ฏ ੒ ࡾ े

    ೥ े Ұ ݄ ೋ ઍ े ീ ೥ े Ұ ݄ ೋ ࿡ ࣣ ീ ೥ े Ұ ݄ ೋ ʓ Ұ ീ ೥ Ұ Ұ ݄ ੢ ྐྵ ੢ ྐྵ ߖ ل ࿨ ྐྵ ࿨ ྐྵ
  5. Cen

  6. Typography Ascender line Mean line x-height Descender line Cap line

    Base line Cap height Descender Ascender Line Height
  7. SF Pro Display SF Pro Text SF Compact Display SF

    Compact Text SF Mono San Francisco !"#$%&'()* !"#$%&'()* Ultra Light Light Thin Medium Regular Black Heavy Semibold Bold
  8. SF Pro Display SF Pro Text Ultra Light Light Thin

    Medium Regular Black Heavy Semibold Bold Light Medium Regular Heavy Semibold Bold
  9. SF Pro Display SF Pro Text Text Talk Text Talk

    Text Talk Text Talk େ͖ͳλΠτϧ޲͚ ࢹೝੑɺՄಡੑॏࢹ 20pt Ҏ্ͷςΩετ 20pt ະຬͷςΩετ
  10. SF Pro Text < 20pt >= 20pt SF Pro Display

    “Lorem ipsum dolor sit amet...”
  11. SF Pro Text < 20pt >= 20pt SF Pro Display

    “Lorem ipsum dolor sit amet...”
  12. System Font SF Pro )JSBHJOP4BOT en ja zh ko SF

    Pro SF Pro 3LQJ)DQJ6& SF Pro "QQMF4%(PUIJD/FP + + + ϝλϑΥϯτ Metrics Metrics Metrics Metrics × × × ×
  13. ۭ ᑮ ॢ ໖ ρϬᓟΨᑮ΁ͭͼ͚Δͯ   ιϤᓪΤ໖ͽͩ͸͖ΐͫ PingFang SC

    STHeiti Apple SD Gothic Neo தࠃޠ தࠃޠ ؖࠃޠ ΰϛശΛۭʹ͍ͯ͠·͢ Hiragino Sans ೔ຊޠ NJǵདƵॢƎźƉŧơż Hiragino Sans GB தࠃޠ
  14. ᑮ ᅍ ፗ ݍ ۸ ڒ 櫏  ၹ ବ

    ಅ ࢏ 气 ਖ਼ ᥯ PingFang SC Hiragino Sans ۭ փ ௚ ൓ Խ ਕ ࡶ  ւ ఈ ॴ ث ྨ ক ֯
  15. • ίϯςϯπ ʹର͢Δ ΞΫγϣϯ Λఏࣔ͢Δ • Ϣʔβʔ͕ೳಈతʹߦಈ͢Δ৔߹ʹ༻͍Δ • ഁյతΞΫγϣϯ͸࠷΋ԕ͍Ґஔʢ্ʣʹஔ͘ •

    ඞͣʮΩϟϯηϧʯΛஔ͘ • ඞཁͳΒϝοηʔδΛؚΊΔ • ಈ࡞ͷओମΛϢʔβʔʹ͢Δ • ؆ܿʹදݱ͢Δ Ωϟϯηϧ ഁغ ಺༰Λอଘ ฤू಺༰Λഁغ͠·͔͢ʁ ໊ࢺ ಈࢺ
  16. Slack Λऴྃ͢Δ ⌘Q ͢΂ͯදࣔ ͦͷଞΛඇදࣔʹ͢Δ ⌥⌘H Slack Λඇදࣔʹ͢Δ ⌘H αʔϏε

    ΞοϓσʔτΛνΣοΫ͢Δ… ؀ڥઃఆ… ⌘, Slackʹ͍ͭͯ Slack SlackΛऴྃ ⌘Q ͢΂ͯΛදࣔ ΄͔ΛӅ͢ ⌥⌘H SlackΛӅ͢ ⌘H αʔϏε ΞοϓσʔτΛ֬ೝ… ؀ڥઃఆ… ⌘, Slackʹ͍ͭͯ Slack
  17. For issues that aren’t covered in the Apple Publications Style

    Guide, Apple recommends three other works: The American Heritage Dictionary,The Chicago Manual of Style, and Words Into Type. When these books give conflicting rules, The Chicago Manual of Style takes precedence for questions of usage and The American Heritage Dictionary for questions of spelling. The rest of this section discusses specific details of how to present your text in a style that integrates properly with the Aqua user interface. Inserting Spaces Between Sentences If any part of your application's user interface displays two or more sentences in a paragraph, be sure to insert only a single space between the ending punctuation of one sentence and the first word of the next sentence. Although much of the text in an application's user interface is in the form of labels and short phrases, application help, alerts, and dialogs often contain longer blocks of text. You should examine these blocks of text to make sure that extra spaces do not appear between sentences. Using the Ellipsis Character An ellipsis character (…) can imply that there is more text than there is room to display or that a command (such as Open...) requires additional information before it can be performed. If, for example, the name of an item is too long to fit in a menu or list box, you should insert an ellipsis character in the middle of the name, preserving the beginning and the end of the name. This ensures that the parts of the name that are most likely to be unique are still visible. An ellipsis character after a menu item or button label indicates to the user that additional information is required to complete a command. You should use an ellipsis character in the following cases: ▪ An action that requires further user input to complete or presents an alert allowing the user to cancel the action. Examples include Find, Go To, Open, Page Setup, and Print. ▪ An action that opens a settings window. The main function of settings windows is to allow the user to change some aspect of the application, not the document content. Examples include Set Title, Preferences, and Options. Don’t use an ellipsis character in the following cases: ▪ An action that requires no further user input to complete and does not present an alert. Often the item to be acted upon is already selected. Examples include New, Cut, Bold, and Quit. ▪ An action that opens an informational, accessory, or tool window. These windows can be implemented as either utility windows (as in the case of a color palette) or modeless windows. These windows provide tools that help create or manage the content in the main window and are frequently left open to assist in accomplishing the task of the main window. Examples include Get Info, Show Tools, and About This Application. Be sure to create the ellipsis character using the key combination Option-; (Option-semicolon). This ensures that an assistive application can provide the correct interpretation of the character to a disabled user. If you use 3 period characters to simulate an ellipsis, many assistive applications will be unable to make sense of them. Style 121 2006-02-07 | © 1992, 2001-2003, 2006 Apple Computer, Inc. All Rights Reserved. C H A P T E R 9 Text • ͞ΒʹϢʔβʔೖྗ͕ඞཁͳΞΫγϣϯ໊ • ઃఆ΢Πϯυ΢Λ։͘ΞΫγϣϯ໊ • ϞʔυϨεͰ͸ͳ͍΢Πϯυ΢Λ։͘ΞΫγϣϯ໊ • ςΩετ͕දࣔྖҬʹऩ·Βͳ͍৔߹ͷςΩετ Apple Human Interface Guidelines 2006 লུه߸ “…” Λ࢖༻͢΂͖৔໘
  18. SlackΛऴྃ ⌘Q ͢΂ͯΛදࣔ ΄͔ΛӅ͢ ⌥⌘H SlackΛӅ͢ ⌘H αʔϏε ΞοϓσʔτΛ֬ೝ… ؀ڥઃఆ…

    ⌘, Slackʹ͍ͭͯ Slack Ωϟϯηϧ ഁغ ಺༰Λอଘ ฤू಺༰Λഁغ͠·͔͢ʁ ۭ ᑮ San Francisco தԝ഑ஔ ฏ ੒ ࡾ े ೥ े Ұ ݄ ᷫԂਫ਼ࣷͷL
  19. v1 2018.3.13 © 2018 Satori MARU. @usagimaruma ೔ ຊ ޠ

    Ξ ϓ Ϧ έ ồ γ ἀ ϯ ͷ Π ϯ λ ồ ϑ ỻ Π ε σ β Π ϯ UI Crunch #12 ň ఻ ͑ Δ Ứ Λ Ճ ଎ ͞ ͤ Δ Ố ॻ ͘ ỏ ಡ Ή 6*