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

Material Design と Product UI Design

Material Design と Product UI Design

Katsumi Onishi

March 18, 2021
Tweet

More Decks by Katsumi Onishi

Other Decks in Technology

Transcript

  1. デザインシステム
 デザインの原則、概念、ガイド、コンポーネントなど、デザインに関するルールを定め たもの
 - Color 
 - Typography
 - Interaction

    (Animation)
 - Icon
 - Component
 - Button / List / ListItem / Divider / Card / Shadow (Elevation) / 
 - etc.
 一貫したデザインで、UIと操作/体験をユーザに伝える。

  2. Product UI Design への対応
 Product の Design System を作成する?
 デフォルトは

    Material Design を使用する!
 カスタムして Product UI Design へ適用!
 - Typography
 - Component
 - Color
 - Elevation
 - States
 マテリアルコンポーネントのテーマをカスタム!
 カスタムコンポーネント!

  3. Typography factory Typography._withPlatform( TargetPlatform? platform, TextTheme? black, TextTheme? white, TextTheme

    englishLike, TextTheme dense, TextTheme tall, ) { switch (platform) { case TargetPlatform.iOS: black ??= blackCupertino; white ??= whiteCupertino; break; case TargetPlatform.android: case TargetPlatform.fuchsia: black ??= blackMountainView; white ??= whiteMountainView; break; case TargetPlatform.windows: black ??= blackRedmond; white ??= whiteRedmond; break; case TargetPlatform.macOS: black ??= blackRedwoodCity; white ??= whiteRedwoodCity; break; case TargetPlatform.linux: black ??= blackHelsinki; white ??= whiteHelsinki; break; case null: break; } return Typography._(black!, white!, englishLike, dense, tall); } プラットフォーム毎に Facetype が定義されている
 fontFamily: '.SF UI Display/Text' fontFamily: 'Roboto' fontFamily: 'Segoe UI' fontFamily: '.AppleSystemUIFont' fontFamily: 'Roboto', fontFamilyFallback: _helsinkiFontFallbacks, _helsinkiFontFallbacks = ['Ubuntu', 'Cantarell', 'DejaVu Sans', 'Liberation Sans', 'Arial']
  4. defaultTargetPlatform
 /// The dart:io implementation of [platform.defaultTargetPlatform]. platform.TargetPlatform get defaultTargetPlatform

    { platform.TargetPlatform? result; if (Platform.isAndroid) { result = platform.TargetPlatform.android; } else if (Platform.isIOS) { result = platform.TargetPlatform.iOS; } else if (Platform.isFuchsia) { result = platform.TargetPlatform.fuchsia; } else if (Platform.isLinux) { result = platform.TargetPlatform.linux; } else if (Platform.isMacOS) { result = platform.TargetPlatform.macOS; } else if (Platform.isWindows) { result = platform.TargetPlatform.windows; } assert(() { if (Platform.environment.containsKey('FLUTTER_TEST')) result = platform.TargetPlatform.android; return true; }()); if (platform.debugDefaultTargetPlatformOverride != null) result = platform.debugDefaultTargetPlatformOverride; if (result == null) { throw FlutterError( 'Unknown platform.\n' '${Platform.operatingSystem} was not recognized as a target platform. ' 'Consider updating the list of TargetPlatforms to include this platform.' ); } return result!; } final typography = Typography.material2018(platform: defaultTargetPlatform );
  5. Typography - englishLike2018
 /// Defines text geometry for [ScriptCategory.englishLike] scripts,

    such as /// English, French, Russian, etc. /// /// The font sizes, weights, and letter spacings in this version match the /// [latest Material Design specification](https://material.io/go/design-typography#typography-styles). static const TextTheme englishLike2018 = TextTheme( headline1 : TextStyle(debugLabel: 'englishLike headline1 2018', fontSize: 96.0, fontWeight: FontWeight.w300, textBaseline: TextBaseline.alphabetic, letterSpacing: -1.5), headline2 : TextStyle(debugLabel: 'englishLike headline2 2018', fontSize: 60.0, fontWeight: FontWeight.w300, textBaseline: TextBaseline.alphabetic, letterSpacing: -0.5), headline3 : TextStyle(debugLabel: 'englishLike headline3 2018', fontSize: 48.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.alphabetic, letterSpacing: 0.0), headline4 : TextStyle(debugLabel: 'englishLike headline4 2018', fontSize: 34.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.alphabetic, letterSpacing: 0.25), headline5 : TextStyle(debugLabel: 'englishLike headline5 2018', fontSize: 24.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.alphabetic, letterSpacing: 0.0), headline6 : TextStyle(debugLabel: 'englishLike headline6 2018', fontSize: 20.0, fontWeight: FontWeight.w500, textBaseline: TextBaseline.alphabetic, letterSpacing: 0.15), bodyText1 : TextStyle(debugLabel: 'englishLike bodyText1 2018', fontSize: 16.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.alphabetic, letterSpacing: 0.5), bodyText2 : TextStyle(debugLabel: 'englishLike bodyText2 2018', fontSize: 14.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.alphabetic, letterSpacing: 0.25), subtitle1 : TextStyle(debugLabel: 'englishLike subtitle1 2018', fontSize: 16.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.alphabetic, letterSpacing: 0.15), subtitle2 : TextStyle(debugLabel: 'englishLike subtitle2 2018', fontSize: 14.0, fontWeight: FontWeight.w500, textBaseline: TextBaseline.alphabetic, letterSpacing: 0.1), button : TextStyle(debugLabel: 'englishLike button 2018', fontSize: 14.0, fontWeight: FontWeight.w500, textBaseline: TextBaseline.alphabetic, letterSpacing: 1.25), caption : TextStyle(debugLabel: 'englishLike caption 2018', fontSize: 12.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.alphabetic, letterSpacing: 0.4), overline : TextStyle(debugLabel: 'englishLike overline 2018', fontSize: 10.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.alphabetic, letterSpacing: 1.5), );
  6. Typography - dense2018
 /// Defines text geometry for dense scripts,

    such as Chinese, Japanese /// and Korean. /// /// The font sizes, weights, and letter spacings in this version match the /// latest [Material Design specification](https://material.io/go/design-typography#typography-styles). static const TextTheme dense2018 = TextTheme( headline1 : TextStyle(debugLabel: 'dense headline1 2018', fontSize: 96.0, fontWeight: FontWeight.w100, textBaseline: TextBaseline.ideographic), headline2 : TextStyle(debugLabel: 'dense headline2 2018', fontSize: 60.0, fontWeight: FontWeight.w100, textBaseline: TextBaseline.ideographic), headline3 : TextStyle(debugLabel: 'dense headline3 2018', fontSize: 48.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.ideographic), headline4 : TextStyle(debugLabel: 'dense headline4 2018', fontSize: 34.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.ideographic), headline5 : TextStyle(debugLabel: 'dense headline5 2018', fontSize: 24.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.ideographic), headline6 : TextStyle(debugLabel: 'dense headline6 2018', fontSize: 21.0, fontWeight: FontWeight.w500, textBaseline: TextBaseline.ideographic), bodyText1 : TextStyle(debugLabel: 'dense bodyText1 2018', fontSize: 17.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.ideographic), bodyText2 : TextStyle(debugLabel: 'dense bodyText2 2018', fontSize: 15.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.ideographic), subtitle1 : TextStyle(debugLabel: 'dense subtitle1 2018', fontSize: 17.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.ideographic), subtitle2 : TextStyle(debugLabel: 'dense subtitle2 2018', fontSize: 15.0, fontWeight: FontWeight.w500, textBaseline: TextBaseline.ideographic), button : TextStyle(debugLabel: 'dense button 2018', fontSize: 15.0, fontWeight: FontWeight.w500, textBaseline: TextBaseline.ideographic), caption : TextStyle(debugLabel: 'dense caption 2018', fontSize: 13.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.ideographic), overline : TextStyle(debugLabel: 'dense overline 2018', fontSize: 11.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.ideographic), );
  7. Typography - tall2018
 /// Defines text geometry for tall scripts,

    such as Farsi, Hindi, and Thai. /// /// The font sizes, weights, and letter spacings in this version match the /// latest [Material Design specification](https://material.io/go/design-typography#typography-styles). static const TextTheme tall2018 = TextTheme( headline1 : TextStyle(debugLabel: 'tall headline1 2018', fontSize: 96.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.alphabetic), headline2 : TextStyle(debugLabel: 'tall headline2 2018', fontSize: 60.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.alphabetic), headline3 : TextStyle(debugLabel: 'tall headline3 2018', fontSize: 48.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.alphabetic), headline4 : TextStyle(debugLabel: 'tall headline4 2018', fontSize: 34.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.alphabetic), headline5 : TextStyle(debugLabel: 'tall headline5 2018', fontSize: 24.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.alphabetic), headline6 : TextStyle(debugLabel: 'tall headline6 2018', fontSize: 21.0, fontWeight: FontWeight.w700, textBaseline: TextBaseline.alphabetic), bodyText1 : TextStyle(debugLabel: 'tall bodyText1 2018', fontSize: 17.0, fontWeight: FontWeight.w700, textBaseline: TextBaseline.alphabetic), bodyText2 : TextStyle(debugLabel: 'tall bodyText2 2018', fontSize: 15.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.alphabetic), subtitle1 : TextStyle(debugLabel: 'tall subtitle1 2018', fontSize: 17.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.alphabetic), subtitle2 : TextStyle(debugLabel: 'tall subtitle2 2018', fontSize: 15.0, fontWeight: FontWeight.w500, textBaseline: TextBaseline.alphabetic), button : TextStyle(debugLabel: 'tall button 2018', fontSize: 15.0, fontWeight: FontWeight.w700, textBaseline: TextBaseline.alphabetic), caption : TextStyle(debugLabel: 'tall caption 2018', fontSize: 13.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.alphabetic), overline : TextStyle(debugLabel: 'tall overline 2018', fontSize: 11.0, fontWeight: FontWeight.w400, textBaseline: TextBaseline.alphabetic), );
  8. Typography - どこで使われてるのか?
 About applicationName, DatePicker
 AppBar
 TextFormField's hintStyle, DropdownButton,

    ListTile's title
 ListTile on Drawer, NavigationRail, TabBar
 Text, ListTile's subtitle
 Button
 TextFormField's errorStyle, helperStyle

  9. Component
 プロダクトで使用するコンポーネントをピックアップ - AppBar - Buttons - Bottom Navigation -

    Cards - Chips - TextField - etc... カスタムコンポーネント
 - Material Design に無いコンポーネント作成 - テーマのカスタムでは実現できないコンポーネント... - Radio/Check Material Design の テーマをカスタム

  10. Component
 プロダクトで使用するコンポーネントをピックアップ - AppBar - Buttons - Bottom Navigation -

    Cards - Chips - TextField - etc... カスタムコンポーネント
 - Material Design に無いコンポーネント作成 - テーマのカスタムでは実現できないコンポーネント - Radio/Check Material Design の テーマをカスタム

  11. Component - Button
 ElevatedButton( style: ButtonStyle( backgroundColor: MaterialStateProperty.resolveWith<Color>( (Set<MaterialState> states)

    { if (states.contains(MaterialState.pressed)) return Theme.of(context).colorScheme.primary.withOpacity(0.5); return null; // default to the component's default }, ), ), ) states で値を変更

  12. Elevation
 const Map<int, List<BoxShadow>> kElevationToShadow = _elevationToShadow; // to hide

    the literal from the docs const Color _kKeyUmbraOpacity = Color(0x33000000); // alpha = 0.2 const Color _kKeyPenumbraOpacity = Color(0x24000000); // alpha = 0.14 const Color _kAmbientShadowOpacity = Color(0x1F000000); // alpha = 0.12 const Map<int, List<BoxShadow>> _elevationToShadow = <int, List<BoxShadow>>{ // The empty list depicts no elevation. 0: <BoxShadow>[], 1: <BoxShadow>[ BoxShadow(offset: Offset(0.0, 2.0), blurRadius: 1.0, spreadRadius: -1.0, color: _kKeyUmbraOpacity), BoxShadow(offset: Offset(0.0, 1.0), blurRadius: 1.0, spreadRadius: 0.0, color: _kKeyPenumbraOpacity), BoxShadow(offset: Offset(0.0, 1.0), blurRadius: 3.0, spreadRadius: 0.0, color: _kAmbientShadowOpacity), ], 2: <BoxShadow>[ BoxShadow(offset: Offset(0.0, 3.0), blurRadius: 1.0, spreadRadius: -2.0, color: _kKeyUmbraOpacity), BoxShadow(offset: Offset(0.0, 2.0), blurRadius: 2.0, spreadRadius: 0.0, color: _kKeyPenumbraOpacity), BoxShadow(offset: Offset(0.0, 1.0), blurRadius: 5.0, spreadRadius: 0.0, color: _kAmbientShadowOpacity), ],
  13. まとめ アプリ開発初めには、
 - カラー/トンマナは決まってない。
 - ブランディング/マーケティングでかわってくる。
 - アプリ名/アプリアイコンも。
 
 作成途中の機能とデザインを元に実装を進めなければならないことがある。


    
 - コンポーネント志向!! デザイナとエンジニアで共有する
 - スタイルはテーマ化を意識して実装する
 - 足りないUIパーツは、カスタムコンポーネント化していく
 
 デモソースコード granoeste/flutter_custom_theme https://github.com/granoeste/flutter_custom_theme