Connpass
mobile-app-design.connpass.com
ionic_jp #jxug
Gitter
https://gitter.im/jxug/MobileAppDesign1
Wifiの入り方。
テキトーなページにアクセス「httpsはだめ」 https://msftguestap.partners.extranet.microsoft.com/guest/msftguest_employeefaq.php?_browser=1
真ん中の青を選ぶ。
IonicとXamarinの概要紹介
Xamarin
CLLocationManagerですね-> iOS
ネイティブのUIを持つフル"ネイティブ"アプリ
C# / .NET /Visual Studio
Monaca onsen UI -> Webビューで描画してるだけ。
標準に近いのが用意されている。
iOSのアプリを作るにはMacが必須。 WindowsのソースをMacにコピーしてビルドしてた。
MacではUWPx
- Xamarinネイティブ
ストーリーボードなどでUI Shared C# All Logic(PCL)
- Xamarin.Forms
XAML -> Xamarin.Forms (UIを共通化するライブラリ) Shared C# All Logic(PCL)
さっと作るならForms、ちゃんと作るならネイティブ
Ionic
Bower GrantもGulpもそろそろ時代遅れ。 npm + webpack
静的型付け。TypeScript
Angular / React / Vue 3強フレームワーク
プログレッシブWebアプリ(PWA)
アプリストアに遷移して~~インストール。 Cordova
WebViewが走っている。
wwwフォルダはコンパイルされたのが出てくる。
HTMLでモバイル
テックフィード ゲーマガ pixiv
[usecaseから学ぶConponents] https://github.com/ionic-team/ionic-conference-app
Material DesignとFlat Designの比較
Googleによって提唱されたユーザエクスペリエンス https://material.io
3原則
比喩されていること
- 意図的なものであること
- モーション
1pixelでやっていく
MSはFluent Design System
フラットデザイン
RiotJSのコミッタ
フラットデザインとは
「シンプル」「ダイナミックなレイアウトデザイン」
AppleもMictosoftもフラットデザインとは提唱咲いていない。 ガイドラインもない。 モダンUI
当時はスキュアモーフィックデザイン、リッチデザインが主流。
MSがWindows8のUIをフラット化 Modern UI(旧: Metro UI)
https://www.cultofmac.com/246312/jony-ive-explains-why-he-decided-to-gut-skeuomorphism-out-of-ios/
we understood that people had already become comfortable with touching glass
フラットデザインのメリット
柔軟性のあるフレームワーク
- より大きく、より合理的なタイポグラフィ
レスポンシブデザインとの互換性い
フラットデザインのデメリット
ユーザビリティへの悪影響
- 識別性の欠如
日本語には合わない -> フォントが合わない。ひらがなカタカナはいいけど漢字が・・
フラットデザイン 2.0
厳格にフラットデザインのルールを決めるのではない。
- マテリアルデザイン フラットデザイン比較
マテリアルデザイン
設計時はしっかりとしたマニュアル通りの設計が必要 アイコン１共通のアイコンでないといけなくなる 主ににAndroidとWebでの取り組みが
フラットデザイン
なるべくかげや、アニメーションなどのエフェクトをなくす グリッドをしっかり活用する デザインにこだわりすぎるとユーザビリティがさがるので注意が必要です
https://riotjs-jp.connpass.com/event/80806/
実践から考える「UIデザインの前にやらないといけないIAとUX設計」
ネイティブじゃない人はフラットデザインはわかりにくい。 モバイルアプリは学習済みの人に。
モバイルアプリだとOSに合わせるのが基本。
Android昔は上だけだったが、下にタブ。 今は自由になった。
WordPressはもう終わった。 WordPress.comのすすめ。
ServerlessWordPress
女友だちをつくる女性専用ソーシャルサービス https://tipsys.me/
Page間の意味の統一
Appleの圧力。 地域別のアプリは別々にせず１つにしろ。 ロゴがわかりにくい。
ジオロケーションのピン。 関西、関東の切り替え。
デザイナーはユーザーではない。
ツイート ↓ つぶやく
下からキーボードの右上に移動した。
Twitterは誤クリック防止のために右上になってた。
会いました(出会った)を。 ユーザのプロフィールに見えるように変えた。
機能に気づかなかったから。
ユーザ行動のデザイン
アムウェイのオフ会同士w
- ユーザ体験
ゲーム買ってからのワクワク感。 女優にあったことにないのに期待する気持ち。
本当は、UIの前にUXを定義しないといけない。だから皆UXと豪語する。
PDCAの方向性はユーザの体験が基となっている。
UX白書とは http://site.hcdvalue.org/docs
重要なのはどこに向かってPDCAを回していくかです。
デミングモデル
ペルソナ 誰が？ ペルソナとは、そのサービスにとって最も重要で象徴的なユーザー像（メインターゲット）のことです。新規サービスの企画の場合は、アーリーアダプターを想定すると良いでしょう。
https://monstar-lab.com/uxdesign_persona01/
「自分に都合の良いペルソナを作り上げる」ダメ、ゼッタイ。 ベルソナはサービス提供側に都合の良い人になりがち。 自分の知人にしておくと検証しやすい。 ペルソナは実際の知人、友人にすると「自分に都合の良いペルソナをつくってしまいがち」な落とし穴に陥らず、かつ、話を聞きに行けるので便利 。
UI/UXというのは信頼できない。 UIはすごい小さい。 UXはプロマネ寄り。
UXはPhotoshopやIllusratorはできなくても良い。 同列で語るものではない。直線状にはあるが。
アプリ起動を定期的にするから。 そうでなければWebでいい
プロダクトが存在しないと、学べない、はじまらない。
IA(Information Architecture)とUXの違い
ユーザにフォーカスしたのが 既存リソースの整理
【Xamarin.Forms】デザインと「よしなに」する方法
アプリ部東京 大田川洋
Ionic・・イオニックと呼ぶのもあるらしい。
Xamarin.Forms -> Forms
Intent?
「インテント」とは、Androidにおいて、アプリケーションの中の1つ1つの機能、たとえばアプリケーション同士や、アプリケーションとウィジェット、アプリケーションとシステムを橋渡しする仕組みのことです。
Xamarin.iOS であれば、CocoaPodsのライブラリをXamarinのプロジェクトでも動かせるようにできます。当然NuGetも使えます
仕様をコードベースで揃える＝共通化できるのか。→Xamarin
StackLayoutは Fill and Expandがデフォルト。
便利なコントロール。
縦幅と横幅が違うとできなくなるからGridを使う。
OS差異
TabとNavigation
リーンアジャイルで開発を加速しよう
なかしょの技術日誌
リサーチの実子と学習ー＞前提の整理、仮説の設定、成果をえるー＞デザインの設定ー＞ Minimum Visible Product
良いUIを考えるなら、仮説・検証は必須
- プロトタイピング
Sketch Framer Invision Origami Ionic
BDD(振る舞い型駆動開発) Cucumber記法
Zeplin (ゼッペリン) https://zeplin.io
デザイナーとデベロッパーの意思疎通。
配信の自動化
ペアで作業しよう 思い切りを
プロトタイプ無しでの開発はありえない。
Sketchで実装しやすいデザインデータをつくる
Line-Height Fixerプラグインを使って解決 Adobe Bnank
https://github.com/usagimaru/Sketch-AppleSystemFont-Plugin
pixel perfect
m-gram
性格診断
ページごとの応援メッセージ
