IPsec 仮想トンネル インターフェイス - CiscoIPsec 仮想トンネル インターフェイス IPsec 仮想トンネル インターフェイスに関する情報5 DVTI
デザイニング・インターフェイス勉強会...
-
Upload
yohei-yasukawa -
Category
Documents
-
view
717 -
download
5
description
Transcript of デザイニング・インターフェイス勉強会...
![Page 1: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/1.jpg)
下北沢オープンソース Cafe
デザイニング・インターフェース勉強会第11章 - 視覚的なスタイルと美学
安川 要平 / @yasulabhttps://www.facebook.com/groups/di2e.study/
12年9月18日火曜日
![Page 2: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/2.jpg)
デザイニング・インターフェース 第2版
パターンによる実践的インタラクションデザインhttp://amzn.to/LfZuHZ
12年9月18日火曜日
![Page 3: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/3.jpg)
@yasulabUIデザインを勉強したいエンジニア
勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/
今日の発表について
12年9月18日火曜日
![Page 4: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/4.jpg)
第11章で学ぶこと
形式上の構造ではなく感情に基づく特性から,ビジュアルデザインの基礎について学ぶ. また,それらのデザインパターンについて整理する.
12年9月18日火曜日
![Page 5: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/5.jpg)
Visual Design の基礎(外装・Look & Feel)について学ぶ.
Visual Design における具体的なデザインパターンを学ぶ.
12年9月18日火曜日
![Page 6: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/6.jpg)
Visual Design の基礎(外装・Look & Feel)について学ぶ.
Visual Design における具体的なデザインパターンを学ぶ.
12年9月18日火曜日
![Page 7: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/7.jpg)
http://credibility.stanford.edu/
“ユーザは,素人が作ったように 見えるサイトを信頼しなかった”
P. 477
12年9月18日火曜日
![Page 8: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/8.jpg)
“スタイル的な要素はあなたの製品 についてのメッセージを伝える.”
P. 478
スタイルを通じて,信頼感,刺激性,愉快さ,活力,落ち着き,力強さ,緊張感,喜びなどを伝えられる.
あなたはその製品を通して,何を伝えたいのだろうか?
12年9月18日火曜日
![Page 9: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/9.jpg)
同じ内容,違うスタイル
CSS Zen Garden
http://csszengarden.com/12年9月18日火曜日
![Page 10: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/10.jpg)
Design #1
✓空間的なゆとり
✓ font: 筆記体
12年9月18日火曜日
![Page 11: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/11.jpg)
Design #2
✓空間詰め込み型
12年9月18日火曜日
![Page 12: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/12.jpg)
Design #3
✓ leaf/greenの繰返し
12年9月18日火曜日
![Page 13: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/13.jpg)
Design #4
✓寒色: professional
12年9月18日火曜日
![Page 14: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/14.jpg)
Design #5
✓Georgia: 温もり感
12年9月18日火曜日
![Page 15: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/15.jpg)
Design #6
✓暖色: 熱さ
✓ゆとりのある空間
12年9月18日火曜日
![Page 16: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/16.jpg)
Design #7
✓様々な角度
12年9月18日火曜日
![Page 17: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/17.jpg)
Design #8
✓ sans-seirf/bold: cool
✓たった1つの楕円
12年9月18日火曜日
![Page 18: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/18.jpg)
同じ内容,違うスタイル
CSS Zen Garden
http://csszengarden.com/12年9月18日火曜日
![Page 19: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/19.jpg)
Visual Design の基礎
認知的な反応 感情的な反応
12年9月18日火曜日
![Page 20: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/20.jpg)
Visual Design の基礎
認知的な反応
今日の話はこっち
感情的な反応
12年9月18日火曜日
![Page 21: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/21.jpg)
感情的・生理的な反応
非常に多くの要因に左右される.
適切に調整するには豊富な実践が必要.12年9月18日火曜日
![Page 22: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/22.jpg)
1. 色
2. タイポグラフィ
3. 空間的なゆとり
4. 角度と形状
5. 質感とリズム
6. 画像
7. 文化的参照
8. 繰り返す視覚的モチーフ
感情的・生理的な反応に作用する要因
12年9月18日火曜日
![Page 23: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/23.jpg)
暖色/寒色,暗い/明るい背景,強い/弱いコントラスト,高い/低い彩度,色相の組み合わせ,などを意識する.
1. 色
12年9月18日火曜日
![Page 24: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/24.jpg)
2. タイポグラフィ
どんな声で語られるのかを決める.大きい/小さい,親しい/堅苦しい,口語的/権威的,など.
12年9月18日火曜日
![Page 25: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/25.jpg)
3. 空間的なゆとり
空間的なゆとり↑:開放性,静けさ,落ち着き,自由空間的なゆとり↓:切迫感,緊張感
Design #2 Design #6
12年9月18日火曜日
![Page 26: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/26.jpg)
4. 角度と曲線
直線や直角で構成: 安定した印象様々な角度で構成: 躍動感・活力
Design #7 Design #8
12年9月18日火曜日
![Page 27: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/27.jpg)
5. 質感とリズム
フォントは質感を左右する最も重要な要素.スクリーン上でテキストの背景にテクスチャを使う時は注意.
Design #8
Design #6
12年9月18日火曜日
![Page 28: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/28.jpg)
6. 画像
デザインの雰囲気作りを支える存在.ただしアプリでは,スタイルより,内容と使いやすさの方が重要.
12年9月18日火曜日
![Page 29: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/29.jpg)
6. 画像
デザインの雰囲気作りを支える存在.ただしアプリでは,スタイルより,内容と使いやすさの方が重要.
12年9月18日火曜日
![Page 30: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/30.jpg)
7. 文化的参照
よく親しまれているモノの参照は,強烈な感情を呼び覚ます.ただし,ターゲットユーザが誰なのか,十分に意識すること.
12年9月18日火曜日
![Page 31: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/31.jpg)
8. 繰り返す視覚的モチーフ
よいデザインには統一性がある.各要素が,構造的/感情的に支え合って,全体が1つにまとまっている.
Design #4 Design #5 Design #8
12年9月18日火曜日
![Page 32: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/32.jpg)
1. 色
2. タイポグラフィ
3. 空間的なゆとり
4. 角度と形状
5. 質感とリズム
6. 画像
7. 文化的参照
8. 繰り返す視覚的モチーフ
感情的・生理的な反応に作用する要因
12年9月18日火曜日
![Page 33: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/33.jpg)
Visual Design の基礎(外装・Look & Feel)について学ぶ.
Visual Design における具体的なデザインパターンを学ぶ.
12年9月18日火曜日
![Page 34: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/34.jpg)
Visual Design の基礎(外装・Look & Feel)について学ぶ.
Visual Design における具体的なデザインパターンを学ぶ.
12年9月18日火曜日
![Page 35: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/35.jpg)
1. Deep Background
2. Few Hues, Many Values
3. Corner Treatments
4. Borders That Echo Fonts
5. Hairlines
6. Contrasting Font Weights
7. Skins and Themes
Visual Design の7つのデザインパターン
12年9月18日火曜日
![Page 36: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/36.jpg)
1. Deep Background
2. Few Hues, Many Values
3. Corner Treatments
4. Borders That Echo Fonts
5. Hairlines
6. Contrasting Font Weights
7. Skins and Themes
Visual Design の7つのデザインパターン
12年9月18日火曜日
![Page 37: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/37.jpg)
1. Deep Background / 深みのある背景
Firefox Download画像またはグラデーションカラーを,
前面にある要素より奥まって見えるページ背景として配置するワザ.
12年9月18日火曜日
![Page 38: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/38.jpg)
1. Deep Background / 深みのある背景
注意:注目点(Focul Point)は分散させないこと.画像またはグラデーションカラーを,
前面にある要素より奥まって見えるページ背景として配置するワザ.
12年9月18日火曜日
![Page 39: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/39.jpg)
2. Few Hues, Many Values / 少色相・多明度
Mintインターフェイス上で使用する色相を3つ以下に絞る.
その後,選んだ色相の明度を変更して,カラーパレットを作成する.
12年9月18日火曜日
![Page 40: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/40.jpg)
2. Few Hues, Many Values / 少色相・多明度
Mint のインターフェイスで用いられている色インターフェイス上で使用する色相を3つ以下に絞る.
その後,選んだ色相の明度を変更して,カラーパレットを作成する.
12年9月18日火曜日
![Page 41: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/41.jpg)
3. Corner Treatments / コーナー処理
JetBlueインターフェイス上の Box のコーナーに曲線または斜線を用いるワザ.用いた曲線または斜線は,インターフェイス全体を通して一貫させる.
12年9月18日火曜日
![Page 42: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/42.jpg)
4. Borders That Echo Fonts / font を反映した border
MoMA, Online Exhibition in 2002ボーダーやその他の線などに,主要なフォントのデザインと同じデザイン(色・太さ・曲がり具合など)を適用する.
12年9月18日火曜日
![Page 43: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/43.jpg)
5. Hairlines / ヘアライン
ex
1 ピクセル幅の線を、ボーダー、水平線、テクスチャとして利用するワザ.
12年9月18日火曜日
![Page 44: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/44.jpg)
6. Contrasting Font Weights / Font Weight の Contrast
Waterlife.nfb.ca2 種類の対照的なフォントを用いて,
レベルが異なる情報を区別し,見た目に味わいを増すワザ.
12年9月18日火曜日
![Page 45: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/45.jpg)
1. Deep Background
2. Few Hues, Many Values
3. Corner Treatments
4. Borders That Echo Fonts
5. Hairlines
6. Contrasting Font Weights
7. Skins and Themes
Visual Design の7つのデザインパターン
12年9月18日火曜日
![Page 46: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/46.jpg)
7. Skins and Themes / スキンとテーマ
WordPress Themeアーキテクチャを公開し,ユーザやサードパーティが,
独自のグラフィックやスタイルをデザインできるようにするワザ.
12年9月18日火曜日
![Page 47: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/47.jpg)
1. Deep Background
2. Few Hues, Many Values
3. Corner Treatments
4. Borders That Echo Fonts
5. Hairlines
6. Contrasting Font Weights
7. Skins and Themes
Visual Design の7つのデザインパターン
12年9月18日火曜日
![Page 48: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/48.jpg)
Visual Design の基礎(外装・Look & Feel)について学ぶ.
Visual Design における具体的なデザインパターンを学ぶ.
12年9月18日火曜日
![Page 49: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/49.jpg)
第11章で学ぶこと
形式上の構造ではなく感情に基づく特性から,ビジュアルデザインの基礎について学ぶ. また,それらのデザインパターンについて整理する.
12年9月18日火曜日
![Page 50: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/50.jpg)
@yasulabUIデザインを勉強したいエンジニア
勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/
今日の発表について
12年9月18日火曜日
![Page 51: デザイニング・インターフェイス勉強会 第11章「視覚的なスタイルと美学」](https://reader038.fdocuments.net/reader038/viewer/2022102805/556610cdd8b42a7d608b4673/html5/thumbnails/51.jpg)
下北沢オープンソース Cafe
デザイニング・インターフェース勉強会第11章 - 視覚的なスタイルと美学
安川 要平 / @yasulabhttps://www.facebook.com/groups/di2e.study/
12年9月18日火曜日