Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The Essence of UI Design
Search
Kusamao Abe
May 31, 2019
Design
1
1.9k
The Essence of UI Design
Kusamao Abe
May 31, 2019
Tweet
Share
More Decks by Kusamao Abe
See All by Kusamao Abe
Vue builds
kusamao
1
450
Javascript in the past and now
kusamao
1
160
Make good (better) form
kusamao
0
230
Making mock-up in web application
kusamao
0
76
Keep a distance from jQuery
kusamao
0
110
Using Heroku on entrusted development
kusamao
0
1.1k
Other Decks in Design
See All in Design
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
500
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
490
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
300
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.2k
The One
chinweanimation
0
100
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
200
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
1
1.3k
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
230
アフォーダンスとシグニファイア
ryokanakai
1
350
TUNAG BOOK 2024
stmn
0
370
202409_会社概要資料_Englishver.pdf
zakkerooni
0
210
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
450
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
A Tale of Four Properties
chriscoyier
157
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Code Review Best Practice
trishagee
65
17k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Testing 201, or: Great Expectations
jmmastey
40
7.1k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Writing Fast Ruby
sferik
627
61k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
It's Worth the Effort
3n
183
27k
Transcript
UIデザインのエッセンス 2019/05/31 tambourine meetup at tambourine commune
安部 草⿇⽣ Kusamao Abe 株式会社タンバリン ‧テクニカルディレクター ‧Webエンジニア
エンジニアが デザインの話を……???
と思うじゃないですか
デザインはデザイナーだけが するものではありません
‒ IDEO ティム‧ブラウン⽒ TEDの講演にて http://www.ted.com/talks/tim_brown_urges_designers_to_think_big.html “デザインはデザイナーだけに任せるには重要過ぎる”
デザインは みんなで考えていい
01 デザインとは?
“作ろうとするものの形態について,機能や⽣ 産⼯程などを考えて構想すること。意匠。設 計。図案。「⾃分で―した服」”
設計
別にグラフィック作るのだけが デザインじゃないんですよ
デザイナーはいろいろいる ϑΝογϣϯ σβΠφʔ 8FCσβΠφʔ ΠϯςϦΞ σβΠφʔ ήʔϜσβΠφʔ
何を設計するか • グラフィック‧ビジュアルを設計する • ⼯業製品の⾒た⽬や使いやすさを設計する • 服の素材や縫製を設計する • 情報設計する etc
Web‧アプリではどんな デザインがある?
• グラフィックデザイン • UIデザイン • インタラクションデザイン • エクスペリエンスデザイン • インフォメーションアーキテクチャ
etc • もちろん、システムやアーキテクチャもデザインする
ひとりで作るときは?
.どんなデザイン(設計)があるかを知る .重要な要素をおさえる(基本原則) .既にあるものを活⽤‧模倣する
今⽇はUIデザインの話
02 UI: User Interface
Interface • Inter- 「間の」 • face 「⾯」 →(⼆者間の)境界⾯‧接点
異なる界をつなぐ接点
Userとなにかをつなぐ インターフェースがUI
何をつなぐ?
• (※以下Web/モバイルの⽂脈として) ストレートに⾔うなら「デジタルデバイス」との境界 • デジタルデバイスで操作するもの(オブジェクト)と の接点でもある
CUIとGUI • CUI: Command-line User Interface • GUI: Graphical User
Interface デジタルデバイスを操作するのがコマ ンドではなく視覚的な表現を⽤いるよ うになり、いわゆる「UIデザイン」が 活発化された
(G) UIデザインの対象 • 対象者は「ユーザ」 • 対象物は操作するもの 概念や操作したいものをモデリングして、 それを扱いやすくするための画⾯やインタ
ラクションの設計を⾏う
モデリング……
エンジニアリングでもやるよね
たとえばDDDだったり オブジェクト指向だったり
03 OOUI: Object Oriented User Interface
ソシオメディア | OOUI の⽬当て https://www.sociomedia.co.jp/
操作するオブジェクトの⼀覧 →オブジェクト詳細 →アクション選択 の流れを徹底する Τοηϯε01
タスクベースとオブジェクトベース • タスクベースUI • 最初に「動作」を指定する • ex. ) $ cat
hello.txt • オブジェクトUI • 最初に「オブジェクト」を選ぶ • ex. ) hello.txtファイルを選択し、開く
‒WEB+DB PRESS Vol. ページ 使いにくさはどこから⽣まれるか? より “タスクベースの操作⼿順はモーダル(モードがある状 態)であり、これをGUIに持ち込むと使いにくくなりま す。(……中略……)モードレスなUIは、ユーザーがい つでも⾃分の好きな順序で操作でき、その結果を画⾯の
変化によってリアルタイムにフィードバックするので す。”
‒WEB+DB PRESS Vol. ページ 使いにくさはどこから⽣まれるか? より
めちゃくちゃモーダル!
ピザを最初に選ばせてくれ .ピザをコレクションビューから選んでシングルビューを確認する • ピザの具を⾒たり⼤きさを確認したり • トッピングを追加したり(アクション) .コレクション/シングルビューからカートに⼊れる(アクション) .カートから⾜したり減らしたり(コレクションビュー + アクション)
.配送先や配送⽇を選んで注⽂
「ピザを注⽂」に とらわれてはいけない
注⽂せずにピザを ⾒たいかもしれん
エッセンス01: コレクションとシングル • 操作したいオブジェクトの⼀覧を作ろう • 決して、「操作」の⼀覧を作らない • ペルソナ分析とかするとやりがち • 「何ができるか」にひっぱられがち
• オブジェクトを選択して、何をするか選べるようにしよう
デザインの原則を知る Τοηϯε02
• 同じ性質のものは同じ⾒た⽬にする(反復‧⼀貫性) • 逆に、違う性質のものは違う⾒た⽬にする(対⽐) • 近い性質のものや関係するものは距離を近づける(近接‧隣接) • 情報の重みに応じてビジュアル表現に重み付けする(強弱)
• サムネイルとタイトルは情報が近いので距離が近い • 記事は繰り返し同じような装飾で並んでいて、等間 隔 • タイトルはその記事のサムネイルの⽅に近く、違う 記事のサムネイルはより遠い • インフィード広告は「同じ⾒た⽬」で広告をねじこ
むことであたかも関連記事に⾒えるようにするレイ アウトの原則を逆⼿にとっている →広告は性質が違うので違う⾒た⽬にするのが原則
※ほかにもいっぱい原則がある
でもデザインはセンスとか才能とか だけの話じゃないってのがわかればOK
コンポーネントや モジュールを 利⽤する Τοηϯε03
UIキットやUIフレームワーク • Apple Human Interface Guideline • Google Material Design
• Bootstrap • ElementUI
• 原則やOOUIをうっすらわかった上で、コンポーネントを使ってみよう • コンポーネントは単語のようなもの、原則は⽂法のようなもの • 単語だけでも⽂法だけで意思を伝えるのはなかなか難しいし、 この2つがあっても円滑なコミュニケーションができるわけではない (が、伝わりやすくはなるよな)
まとめ • デザインはデザイナーだけのもの‧関⼼ではない • デザインは設計 • デザインはいろんな種類がある • UIデザインの⽂法と語彙を学んでみると とっかかりがあって⾃分でも作りやすいかも
Thank you for your listening!
参考⽂献 • 誰のためのデザイン?増補‧改訂版 D.A.ノーマン著 • みんなではじめるデザイン批評 アーロン‧イリザリー/アダム‧コナー著 • はじめてのUIデザイン 吉⽵遼‧坪⽥勝‧池⽥拓司‧上ノ郷⾕太⼀‧元⼭和之‧宇野雄著
• WEB+DB PRESS Vol. 実践CircleCI/iOS 最新活⽤/速攻改善UIデザイン • https://www.sociomedia.co.jp/ • https://speakerdeck.com/kinakobooster/koredakeshou-rebajian-yasukunarudezainfalseji-chu • https://dely.design/n/n a c c