210408 Thu

8339 ワード
テキストリンク

学習内容


1.最初の学習内容：ダイナミックタイプ


ダイナミックタイプとは?


ユーザーが画面上の文字サイズをカスタマイズできる機能
Dynamic Type is a feature that allows user to customize the size of text on screen.
たとえば、一部のユーザーは、小さなテキストサイズが好きです.
why? そうすれば画面の中でもっと多くの内容を見ることができます.
他のユーザーはより大きなテキストサイズが好きです
それはもっと見やすい.

ダイナミックタイプが必要なのはなぜですか?


動的タイプは、ユーザーのテキストサイズに対する好みがより大きいことです.
一部のプレイヤーはdefault text sizeで長時間スクリーンを見ると目が痛くなる可能性があります
他のプレイヤーは老化で視力が悪いかもしれません.
default sizeで文字を読み取ること自体は不可能かもしれません
したがって,異なるプレイヤー(好みだけでなく)は実際に動的typeを必要とする.
適切なtext sizeは、アプリケーションのテキストの内容を明確に理解するのに役立ちます.
With Text Styles APIs, Dynamic Type support is automatic
Text Styles:UIFont.preferredFont(forTextStyle:)
Content Size Categories
  • Labelの動的タイプ:フォントサイズを調整するためにFontを自動的に追加
  • 文字が大きくなる可能性があるので、スタックビュー
    • を固定しないでください.
  • 油のマイクロビームは、スタックビューで
    • を1つずつ束ねることができる.
    Scaling Fonts Automatically
    Typography and Fonts - WWDC 2016
    Building Apps with Dynamic Type - WWDC 2017 - Videos
    Typography - Human Interface Guidelines

    2.第2の学習内容：アクセス性


    Accessibility Inspector


    The Accessibility Inspector enables you to identify parts of your app that are not accessible. It provides feedback on how you can make them accessible, as well as simulating voice-over to help you identify what a Voice Over user would experience.
  • Xcode > Open Developer Tool > Accessibility Inspector
  • デバイスターゲットをシミュレータに指定!
  • Run Audit
    • →アクセス性の問題を知らせる
    →矢印を押して何か問題があるか教えて!
    Accessibility Inspector

    Accessibility Labels


    A string that succinctly identifies the accessibility element.
    The label is a very short, localized string that identifies the accessibility element, but does not include the type of the control or view. For example, the label for a Save button is “Save,” not “Save button.”
    var accessibilityLabel: String? { get set }
    [Instance Property] accessibilityLabel

  • Remember to add labels
    레이블 안 넣어주면 위의 경우 플러스 언더스코어 아이콘 언더스코어 ~~ 나인나인 블라블라 이렇게 읽어줄거임!!

  • Don’t include the element type
    어차피 VoiceOver가 (button이라고 레이블에 안 적어줘도) button이라고 뒤에 읽어줌

위의 경우 결과적으로 'Add button button' 버튼 2번 불러줘서 이상하게 들림 =_=

  • Update labels when the UI changes

    • 만약에 버튼이 바뀌면 레이블도 버튼 내용에 맞게 고쳐줘야 함!
  • Avoid redundancy, but provide enough context 
    • Add만 레이블에 적어주면 뭘 더하겠다는 건지?? 알 수 없음

충분한 문맥을 제공하려면? 뒤에 피넛 버터라는 목적어를 적어줘야함!

    어차피 song을 플레이한다는 건 아니까 Previous만 적어줘도 충분함

  • Add labels to meaningful animations


  • Avoid verbose labels… unless you have a great reason
    verbose: 장황한

저렇게 구구절절이~ 얘기 안해줘도 Delete라고 하면 의미 전달됨 

(Delete button이라고 읽어줌)
    • Writing Great Accessibility Labels
    Accessibility on iOS
    Accessibility WWDC Videos

    3.3番目の学習内容：表ビュー


    iOS provides three styles of table: plain, grouped, and inset grouped.
  • 標準ビュー
  • 連続行のリスト形式で、分割されません.
    • 1つまたは複数の部分
  • があってもよく、各部分に複数の行があってもよい.
  • 各セクションには、オプションのタイトルまたはプッシュボックスがあります.
  • インデックスを使用してクイックナビゲーションやオプションを選択する場合に便利です.
  • パケットTable View
  • 節でグループ化されたリスト形式.
    • 1つまたは複数の部分
  • があってもよく、各部分に複数の行があってもよい.
  • 各セクションには、オプションのタイトルまたはプッシュボックスがあります.
  • は、特定の基準に従って情報を概念的に区分するのに適している.
  • ユーザーの情報の迅速な理解を支援します.

    • ビュー付きプロパティ

  • ダイナミックタイプ
  • ユニットを設計し、他のユニットのテンプレートとして使用します.
  • 同じレイアウトの複数のセルを使用して情報を表示する場合:
    • コンテンツは、
  • のデータ・ソース・インスタンスによって管理されます.
    • は、セルの数が変化したときに使用されます.
  • 静的ユニット
  • は、ユニークなレイアウトと固定された行数を有する帯域ビューに使用される.
  • テープビューを設計する場合、テーブルの形状とセルの数が指定されている場合、
    • が使用されます.
  • コア数は変わらない

    • H.I.Gの5つのガイドライン


  • Think about table width:狭すぎてもよくない、長すぎてもよくない
    Thin tables can cause truncation and wrapping, making them hard to read and scan quickly at a distance. Wide tables can also be difficult to read and scan, and can take away space from content.

  • Begin表の内容をすばやく表示:すぐにテキストデータを表示し、複雑な画像を表示します.
    Don’t wait for extensive table content to load before showing something. Fill onscreen rows with textual data immediately and show more complex data—such as images—as it becomes available. This technique gives people useful information right away and increases the perceived responsiveness of your app. In some cases, showing stale, older data may make sense until fresh, new data arrives.

  • Communicate progress as content loads:テーブルデータのロードに時間がかかる場合は、Progress BarまたはSping記号を表示します.
    If a table’s data takes time to load, show a progress bar or spinning activity indicator to reassure people that your app is still running.

  • Keep content fresh:テーブルの内容を反映するために新しいデータを更新
    Consider updating your table’s content regularly to reflect newer data. Just don’t change the scrolling position. Instead, add the content to the beginning or end of the table, and let people scroll to it when they’re ready. Some apps display an indicator when new data has been added, and provide a control for jumping right to it. It’s also a good idea to include a refresh control, so people can manually perform an update at any time. See Refresh Content Controls.

  • Avoid combining an index with table rows containing right-aligned elements.
    An index is controlled by performing large swiping gestures. If other interactive elements reside nearby, such as disclosure indicators, it may be difficult to discern the user’s intent when a gesture occurs and the wrong element may be activated.
    • ソース
    Boostcourse-iOSアプリケーションプログラミング1)tableviewとは?
    Human Interface Guidelines - Tables
    その他)読解資料
    UITableViewCell
    [module] deque (queue+stack)
    Redux