OSのフラットデザインを考えてみる_Hokuriku.NET vol.12

•

20 j'aime•3,668 vues

Microsoft

http://atnd.org/events/40509

Technologie

春日井良隆
日本マイクロソフト株式会社
UXエバンジェリスト
OS のフラットデザインを考えてみる

モバイルの利用状況のデザインヒント
1. 余分なものを削ぎ落とす
2. ちら見しやすいようにデザインする
3. 階層を深くしない
4. 自然な形で接点を見せる
5. 途中で操作を止めても同じところから再開できるようにする
6. 時間軸を使って情報を整理する

Windows 8 design principles
1. Do more with less 削ぎ落とす
2. Pride in craftsmanship とことんこだわる
3. Be fast and fluid 軽快であれ、滑らかであれ
4. Authentically digital デジタルの本質を採り入れる
5. Win as one 一体感を与える
http://msdn.microsoft.com/library/windows/apps/hh770552

Font Weight
Segoe UI Light
Segoe UI semilight
Segoe UI
Segoe UI semibold

グリッドシステム
Copyright © 2008-2012 Antonio Carusone, unless otherwise noted

Recommandé

CUI操作の履歴活用iguto

Summer camp2018 group1openrtm

Summercamp2020 group2openrtm

2014.09.16 jsオジサン3pandeiro245

Summercamp2020 group3openrtm

美人CDP/CDP男子総選挙速報真吾吉田

Cocos2d xでぬるぬる動くビルダー機能実装和樹川端

Summer camp2018 group2openrtm

Recommandé

CUI操作の履歴活用iguto

Summer camp2018 group1openrtm

Summercamp2020 group2openrtm

2014.09.16 jsオジサン3pandeiro245

Summercamp2020 group3openrtm

美人CDP/CDP男子総選挙速報真吾吉田

Cocos2d xでぬるぬる動くビルダー機能実装和樹川端

Summer camp2018 group2openrtm

だから、IEは業務システムで使われている。いままでもこれからもMicrosoft

Teachers in ActionJennyPhillips

Teachers in action projectenglishm

Haryanaguest60a7a84

HTML5とIE10とWindows 8Microsoft

$C:\Documents And Settings\Jgardiner1\My Documents\Ashlees Angles\Aa Presentat...$ $C:\Documents And Settings\Jgardiner1\My Documents\Ashlees Angles\Aa Presentat...$

C:\Documents And Settings\Jgardiner1\My Documents\Ashlees Angles\Aa Presentat...jessicahg01

Torneio de futsal CMRuben2121

Interactividad en el diseño del e-learningIPP

Projeto Festival Multimídia nandacruz

Dúas augas moitos peixeslianoa

Benjamin ..guest55932d

HinataMayron Lemus

5cuaresmaaJ S

Dossier de Pré produçãoRuben2121

Real life Ramayana Picturessravani choudary

Empresa ga eatomjt527

Czech Scrolls SlidesRTVC Ltd

Dutch work innovation 280410Marc de Vries

Grupo 2Débora Espirito Santo

OSのフラットデザインを考えてみるMicrosoft

Smartphone ui:ux」 de na creative seminar vol.1 レポートMasaru Kimura

Contenu connexe

En vedette

だから、IEは業務システムで使われている。いままでもこれからもMicrosoft

Teachers in ActionJennyPhillips

Teachers in action projectenglishm

Haryanaguest60a7a84

HTML5とIE10とWindows 8Microsoft

$C:\Documents And Settings\Jgardiner1\My Documents\Ashlees Angles\Aa Presentat...$ $C:\Documents And Settings\Jgardiner1\My Documents\Ashlees Angles\Aa Presentat...$

C:\Documents And Settings\Jgardiner1\My Documents\Ashlees Angles\Aa Presentat...jessicahg01

Torneio de futsal CMRuben2121

Interactividad en el diseño del e-learningIPP

Projeto Festival Multimídia nandacruz

Dúas augas moitos peixeslianoa

Benjamin ..guest55932d

HinataMayron Lemus

5cuaresmaaJ S

Dossier de Pré produçãoRuben2121

Real life Ramayana Picturessravani choudary

Empresa ga eatomjt527

Czech Scrolls SlidesRTVC Ltd

Dutch work innovation 280410Marc de Vries

Grupo 2Débora Espirito Santo

En vedette (20)

だから、IEは業務システムで使われている。いままでもこれからも

Teachers in Action

Teachers in action project

Haryana

HTML5とIE10とWindows 8

$C:\Documents And Settings\Jgardiner1\My Documents\Ashlees Angles\Aa Presentat...$ $C:\Documents And Settings\Jgardiner1\My Documents\Ashlees Angles\Aa Presentat...$

C:\Documents And Settings\Jgardiner1\My Documents\Ashlees Angles\Aa Presentat...

Torneio de futsal CM

Interactividad en el diseño del e-learning

Projeto Festival Multimídia

Dúas augas moitos peixes

Benjamin ..

Hinata

5cuaresmaa

Dossier de Pré produção

Real life Ramayana Pictures

Empresa ga eatom

Czech Scrolls Slides

Dutch work innovation 280410

Grupo 2

Similaire à OSのフラットデザインを考えてみる_Hokuriku.NET vol.12

OSのフラットデザインを考えてみるMicrosoft

Smartphone ui:ux」 de na creative seminar vol.1 レポートMasaru Kimura

UI＆UX / 重要なのは、毎日さわって嬉しい UI UX! Akiko Ohtsuka

Unityの夕べ in FukuokaShinobu Izumi

Css nite（2010.09.23）Yoshiki Ushida

20101127 Android Usability SeminarVisso株式会社

News picksのUIデザインtanukingUb

ゆるロボ製作所開発事例 – ドローコール削減 Mikito Yoshiya

Android開発者とデザイナーの効率的な連携についてlychee .

20110212 Silverlight から Bing Maps に触れるKenji Wada

ライブ UI プロトタイピングに向けたマルチ言語環境 SOMETHINGitTomohiro Oda

最近の実装方針について大介秋本

The Mobile Frontier at HTML5 Conference 2013/11/30Yukio Andoh

ネットワーク分散型フレームワークConViewRakuten Group, Inc.

C#でiPhoneアプリ開発 with MonoTouchShin Ise

Leapmotionとp5.js：DEMOと解説光吉浜谷

ビジュアライゼーションの役割とUI開発のイノベーション（２）BizCOLLEGE

Google mapとgps機能を使ってみた。Eiichi Tsuru

Windows PhoneについてGdgd話すよ Rev 2Kenji Wada

オープンソースカンファレンス2010Tokyo/Spring：infoScoop OpenSource＆infoScoop Calendar（木村）Atsuhiko Kimura

Similaire à OSのフラットデザインを考えてみる_Hokuriku.NET vol.12 (20)

OSのフラットデザインを考えてみる

Smartphone ui:ux」 de na creative seminar vol.1 レポート

UI＆UX / 重要なのは、毎日さわって嬉しい UI UX!

Unityの夕べ in Fukuoka

Css nite（2010.09.23）

20101127 Android Usability Seminar

News picksのUIデザイン

ゆるロボ製作所開発事例 – ドローコール削減

Android開発者とデザイナーの効率的な連携について

20110212 Silverlight から Bing Maps に触れる

ライブ UI プロトタイピングに向けたマルチ言語環境 SOMETHINGit

最近の実装方針について

The Mobile Frontier at HTML5 Conference 2013/11/30

ネットワーク分散型フレームワークConView

C#でiPhoneアプリ開発 with MonoTouch

Leapmotionとp5.js：DEMOと解説

ビジュアライゼーションの役割とUI開発のイノベーション（２）

Google mapとgps機能を使ってみた。

Windows PhoneについてGdgd話すよ Rev 2

オープンソースカンファレンス2010Tokyo/Spring：infoScoop OpenSource＆infoScoop Calendar（木村）

Plus de Microsoft

Windows 10のWebブラウザ Microsoft EdgeとInternet Explorer 11Microsoft

Windows 8とその開発環境についてMicrosoft

Windows 8/Windows Phone アプリのプロモーション　～初めてガイド～Microsoft

Windows 8.1 ユーザーエクスペリエンスガイドラインMicrosoft

HTML5とマイクロソフト（東京）Microsoft

HTML5とIE11とWindows 8.1　－最新の Web トレンドとマイクロソフトの関係Microsoft

「Web標準」の価値と可能性〜Windows 8.1とともに考える標準技術の重要性〜Microsoft

HTML5とマイクロソフト（沖縄）Microsoft

HTML5とマイクロソフト（長崎）Microsoft

HTML5とマイクロソフト（広島）Microsoft

HTML5とマイクロソフト（札幌）Microsoft

HTML5とマイクロソフト（土佐）Microsoft

HTML5とマイクロソフト（会津）Microsoft

IE10とWindows 8とHTML5Microsoft

WebとIE10とWindows 8Microsoft

【14-E-3】Windows 8デザインガイド～魅力的なWindowsストアアプリとデスクトップアプリを作るために～Microsoft

WebのスキルをWindows 8で活かそうMicrosoft

HTML5の振り返りとHTML5のこれからMicrosoft

マーケティングデータで紐解くHTML5Microsoft

HTML5とIE10とWindows 8 in OSC2012会津Microsoft

Plus de Microsoft (20)

Windows 10のWebブラウザ Microsoft EdgeとInternet Explorer 11

Windows 8とその開発環境について

Windows 8/Windows Phone アプリのプロモーション　～初めてガイド～

Windows 8.1 ユーザーエクスペリエンスガイドライン

HTML5とマイクロソフト（東京）

HTML5とIE11とWindows 8.1　－最新の Web トレンドとマイクロソフトの関係

「Web標準」の価値と可能性〜Windows 8.1とともに考える標準技術の重要性〜

HTML5とマイクロソフト（沖縄）

HTML5とマイクロソフト（長崎）

HTML5とマイクロソフト（広島）

HTML5とマイクロソフト（札幌）

HTML5とマイクロソフト（土佐）

HTML5とマイクロソフト（会津）

IE10とWindows 8とHTML5

WebとIE10とWindows 8

【14-E-3】Windows 8デザインガイド～魅力的なWindowsストアアプリとデスクトップアプリを作るために～

WebのスキルをWindows 8で活かそう

HTML5の振り返りとHTML5のこれから

マーケティングデータで紐解くHTML5

HTML5とIE10とWindows 8 in OSC2012会津

Dernier

論文紹介：Automated Classification of Model Errors on ImageNetToru Tamaki

スマートフォンを用いた新生児あやし動作の教示システムsugiuralab

SOPを理解する 2024/04/19 の勉強会で発表されたものですiPride Co., Ltd.

TSAL operation mechanism and circuit diagram.pdftaisei2219

論文紹介：Semantic segmentation using Vision Transformers: A surveyToru Tamaki

[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜スマートビルディング爆速開発を支える自動化テスト戦略Ryo Sasaki

論文紹介：Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...Toru Tamaki

Postman LT Fukuoka_Quick Prototype_By Danieldanielhu54

Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Yuma Ohgami

Dernier (9)

論文紹介：Automated Classification of Model Errors on ImageNet

スマートフォンを用いた新生児あやし動作の教示システム

SOPを理解する 2024/04/19 の勉強会で発表されたものです

TSAL operation mechanism and circuit diagram.pdf

論文紹介：Semantic segmentation using Vision Transformers: A survey

[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜スマートビルディング爆速開発を支える自動化テスト戦略

論文紹介：Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...

Postman LT Fukuoka_Quick Prototype_By Daniel

Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介

OSのフラットデザインを考えてみる_Hokuriku.NET vol.12

1. 春日井良隆日本マイクロソフト株式会社 UXエバンジェリスト OS のフラットデザインを考えてみる

2. iOS

3. Google+

7. Uniqlo

10. UI

11. CLI - Command Line Interface

12. GUI - Graphical User Interface

13. GUI - Graphical User Interface

14. GUI - Graphical User Interface

19. 本物っぽいデザインに飽きた派手なデザインにも飽きた

20. LINE天気

21. デフォルトの天気

22. ヤフー天気

23. Weather+

24. Solar

25. Partly Cloudy

26. device

27. PC

28. Station

29. fright

30. beach

31. スキューバーダイビングとシュノーケル

32. デバイスの多様化でアプリの使い方が変わった

33. Content before Chrome

34. モバイルの利用状況のデザインヒント 1. 余分なものを削ぎ落とす 2. ちら見しやすいようにデザインする 3. 階層を深くしない 4. 自然な形で接点を見せる 5. 途中で操作を止めても同じところから再開できるようにする 6. 時間軸を使って情報を整理する

35. Windows 8 design principles 1. Do more with less 削ぎ落とす 2. Pride in craftsmanship とことんこだわる 3. Be fast and fluid 軽快であれ、滑らかであれ 4. Authentically digital デジタルの本質を採り入れる 5. Win as one 一体感を与える http://msdn.microsoft.com/library/windows/apps/hh770552

36.

37.

38. フラットデザインのために

39. Flat UI

40. Pixel Fabric

41. Pinterest

42. UI/UX Flat design

43. Swiss Design

44. Font

45. Font Weight Segoe UI Light Segoe UI semilight Segoe UI Segoe UI semibold

46. Font Weight Segoe UI Light Segoe UI semilight Segoe UI Segoe UI semibold

47. Font Weight Segoe UI Light Segoe UI semilight Segoe UI Segoe UI semibold