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

TypeScriptではじめるUIデザイン / UI design with TypeScript

kgsi
September 29, 2020

TypeScriptではじめるUIデザイン / UI design with TypeScript

UI/UXデザイナーLT会で発表したLT資料です。カレーがメインです。

https://rakus.connpass.com/event/187048/
#uiuxdesignerslt

kgsi

September 29, 2020
Tweet

More Decks by kgsi

Other Decks in Design

Transcript

  1. 罪 傲慢 憤怒 嫉妬 怠惰 強欲 暴食 色欲 SmartHRでのロール プロダクトマネージャー

    UXデザイナー UXリサーチャー UIデザイナー デザインエンジニア インフォメーションアーキテクト UIデザイナー、マネージャー 強欲 嫉妬 暴食 色欲 憤怒 怠惰 傲慢 メンバー fumiya versionfive oremega nao kgsi uknmr ouji プロダクトデザイングループのチームはそれぞれ「七つの大罪」を(以下略...
  2. interface RightFixedNote { NoteItems: 
 memoText?: sumit:
 } interface NoteItem

    { text?: date?: mail?: 
 edit: } ※interfaceで決められたお作法の上でUIに必要な値を整理する ケース1:大まかなワイヤーと仕様が渡されたら
  3. ※それぞれ値に思案をする。値に対して制約・どんな型が必要かを検討 interface RightFixedNote { NoteItems: NoteItem[]
 memoText?: string sumit: ()

    => void
 } interface NoteItem { text?: string date?: Date mail?: string
 edit: () => void } // UIの本体構造 // メモのテキストが必要だよね(最大値は?) // 保存するボタンも必要 // 編集リストが並ぶ(最大いくつだろ) // 編集リストが構造 // 日付(可能ならフォーマットも決めておきたい) // メール(メールのフォーマットも決める?) // 保存・編集するボタンも必要 // 編集リストが並ぶ ケース1:大まかなワイヤーと仕様が渡されたら
  4. interface RightFixedNote { NoteItems: NoteItem[]
 memoText?: string sumit: () =>

    void
 } interface NoteItem { text?: string date?: Date mail?: string
 edit: () => void } ケース1:大まかなワイヤーと仕様が渡されたら
  5. UIとして可視化し、Sketchなどで組み立てる interface RightFixedNote { NoteItems: NoteItem[]
 memoText?: string sumit: ()

    => void
 } interface NoteItem { text?: string date?: Date mail?: string
 edit: () => void } アウトプット ケース1:大まかなワイヤーと仕様が渡されたら
  6. ※カレーライスを表現する。ちなみに値に日本語を使ってもエラーにならない interface カレーライス { カレールー: カレールー ライス: ライス } interface

    ライス { 米: 米の品種 水分: 水 | ミルクの種類 ホールスパイス?: ホールスパイス[] } interface カレールー { ホールスパイス?: ホールスパイス[] パウダースパイス?: パウダースパイス[] 野菜?: 野菜の種類[] 肉?: 肉の種類 水分?: 水 | ミルク 塩分?: 塩の種類   その他?: その他[] } ケース2: も表現可能
  7. ※typeも自由な表現が可能です。書き切れないので割愛 ケース2: も表現可能 type 米の品種 = '日本米'|'ジャスミンライス'|'バスティマライス'|'玄米'|'五穀米' type ホールスパイス =

    'コリアンシード'|'シナモン'|'ベイリーフ'|'カルダモン'|'クローブ'|'クミン type パウダースパイス = 'コリアンパウダー'|'チリパウダー'|'パプリカパウダー'|'ターメリック' type 塩の種類 = '食塩'|'岩塩'|'ヒマラヤ岩塩' type 野菜の種類 = 'ズッキーニ'|'トマト'|'ナス'|'ピーマン'|'豆'|'じゃがいも'|'しょうが'|'ナス type 肉の種類 = '鳥肉'|'豚肉'|'マトン'|'水牛' type その他 = 'ヨーグルト'|'タマリンド'|'酢'|'カリフラワー'|'はちみつ' type 牛乳の種類 = '牛乳'|'ココナッツミルク'|'山羊の乳' ...以下略