Help us understand the problem. What is going on with this article?

スマホアプリのUIデザインについて知っておきたいこと

はじめに

スマホアプリのエンジニアとして、UIデザインについて知っておきたいことをまとめておきます。
自分用のリンク集のような意味合いが強いですがお役に立てば幸いです。

公式資料

一度は目を通しておきたい基本的で重要なドキュメントです。

Apple

Google

知っておきたい概念

エンジニアとしてここまで把握しておく必要はないかもしれませんが、デザイナーさんはこの辺りを踏まえてデザインを行っているはずです。

UIデザイン要素

UIを実装するための要素について。デザイナーさんとも認識を合わせておく必要があります。

標準のUIコンポーネント

OSによって有無や呼び方の違いはあるものの、基本的なものは両OSに備わっています。
それぞれに用途についてのルールがあるのでそれを意識して使う必要があります。

カテゴリ コンポーネント iOS Android
ナビゲーション ナビゲーションバー Navigation bars TopAppBar, BottomAppBar
タブバー Tab bars BottomNavigation
タブ Tabs
ドロワー Navigation drawer
バー サーチバー Search bars
ツールバー Toolbars AppBar
操作・入力 ボタン Buttons FloatingActionButton, Buttons
テキストボタン TextButton
テキストフィールド Text Fields Text fields
チェックボックス Checkboxes
スイッチ Switches Switches
ラジオボタン Radio buttons
ピッカー Picker
スライダー Slider Sliders
ステッパー Steppers
リスト リスト Tables, Collections Lists
テーブル Data tables
カード Cards
ページャー Page Controls ViewPager
表示補助 インジケータ Progress Bars Progress indicators
スピナー Activity Indicators Progress indicators
ダイアログ Dialogs
アラート Alerts Dialogs
アクションシート Action sheets, Activity Views BottomSheet
トースト Snackbars
ツールチップ Tooltips
ポップオーバー Popovers

カラー

色は重要な要素です。暖色、寒色で大きくイメージが変わりますし、警告色としての赤のように汎用的に意味を持つものもあります。
ブランドカラーを設定して有効的に使うこと、あるいはプライマリ・セカンダリカラーを決めて使い分けるなどを考える必要があります。
また、多用せず目的を持って使うことが重要です。

フォント

システムフォントを使うかカスタムフォントを導入するか、大きさ、太さ、色などフォントについても考えることは多くあります。

イメージ

どのような画像をどこに置くか、というものはもちろんとして、用途やデバイスによってルールが色々決められておりこれを考慮する必要があります。

解像度
アイコン
ストア用

デバイス

デバイスのサイズについてもUIデザインにとって重要な影響を与えます。
最近はアスペクト比にもいろいろなパターンがあり、複雑さを増しています。

ツール・サービス

デザインツール

バージョン管理

共有(ハンドオフ)

プロトタイプ作成

フロー図作成

参考

記事・サイト

書籍

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした