Discover iOS Apps | Mobbin - The world’s largest mobile & web app design reference libraryThe world’s largest mobile and web design librarySave hours of UI & UX research with our library of 300,000+ screens from the world’s best designed apps.
iOS アプリの UI でこれだけはおさえたい、読み込み中の体験を向上させる基本 UI パターン3つ - クックパッド開発者ブログ
ホリデー株式会社 *1 の多田です。Holiday ( https://haveagood.holiday/ ) というサービスの開発を行っています。 アプリを通してユーザに価値を届けるためには、アプリの細部のインタラクションを軽視することはできません。細かい部分に気を配り使い心地を良くしてこそ、サービスで本当に実現したい価値をユーザにまっすぐ届けることができるためです。 iOS アプリの使い心地を良くするための基本的なインタラクションを以前当ブログで投稿した記事でいくつか紹介しましたが、今回は前回紹介しなかったインタラクションのうち、「読み込み中」の UI の基本パターンについて取り上げようとおもいます。 はじめに：なぜ読み込み中の UI を考えなくてはいけないのか Holiday iOS アプリでは、基本的にデータはクライアント側で持たずサーバと通信して表示するデータを受け取っており、
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.6
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第6弾は、アクセシブルで美しいユーザーインターフェイスを構築するデザインのテクニックです。 UI & UX Micro-Tips: Volume Six. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スマホアプリではタブバーを常に表示する 2. ウェイトを使用するだけで、強調と階層を作ることができます 3. スマホではタップ可能な領域を広くする 4. サイト内のナビゲーションは一貫性のあるものにする 5. コンテンツが豊富なサイトでは検索を目立たせる 6. 適当にフォントサイズを選ぶのではなく Typ
【フロントエンド初心者向け】ユーザビリティを上げるちょいテク
フロントエンドの開発が初めての人が意外と抜けがちな観点をまとめてみました。 初めにざっくりと概要を話すと「デザイナーが作るデザインでは表現しづらいもの」をまとめたものになります。 デザイナーが作るデザインは静的なものなので(たまにがっつりプロトタイプを作ったりもありますが)、いわゆる"状態"を表現するのが難しかったり抜けたりしがちです。 具体的に言うとローディング、Empty、エラーなどです。これらをよしなに補完できるフロントエンドエンジニアはデザイナーからもきっと「頼りになるぅ！」と思われること間違いないでしょう。 と言うわけでそんな例を紹介していきます。 今後も思いついたら追加する可能性が無きにしも非ず。 ローディングを出そう こう言うクルクルするやつとか こんな感じでシュインシュインするやつがあります。 基本的にユーザがアクションを起こした時に待たせる場合は必ず表示させましょう。 ロ
UIがおしゃれなアプリ７選｜MHTcode_designers｜note
今回は私が普段使っていてUI/UXが優れているなーというものを7つ選んだのでご紹介させて頂きます。 Sound Cloudドイツのベルリンに拠点を置くSoundCloud Limitedが運営する音声ファイル共有サービスです。 シンプルかつ操作性に優れているUIと、再生している楽曲が常に下部に表示され類似楽曲などがかなりの種類出てきてくれるのでついつい長時間使用してしまいますw SteamSteamは、PCゲーム、PCソフトウェアおよびストリーミングビデオのダウンロード販売とハードウェアの通信販売、デジタル著作権管理、マルチプレイヤーゲームのサポート、ユーザの交流補助を目的としたプラットフォームです。 こちらはリアルタイムで更新がかかるのが魅力的、その分UI/UXも滑らかなので触っていてとても楽しいですね。 The WorldTheWorld for Twitter はユーザーストリームに
UXデザインで参考にしたい『Starbucks』アプリを5つの観点からUX分析｜Repro Journal （リプロジャーナル）
米国のスターバックスアプリ『Starbucks』ではユーザーがオーダーしやすい機能、電子決済、ポイントプログラムを提供しています。すでに米国ではアプリは広く使われており、現在では約25%のオーダーや決済がアプリで行われているのです。 スターバックスはどのようにアプリのエンゲージメントを高めているのでしょうか？ 本記事では、他のアプリでも参考にできることがないか、最新のUX分析をご紹介します。 オンボーディング 良いポイント 第一印象、つまりアプリを開いて最初に出てくる画面は非常に重要です。 『Starbucks』の最初の画面はブランドロゴと簡単な説明をシンプルに配置することによって、ユーザーに良い第一印象を与えます。その次の画面でユーザーアカウントの作成を促すようにしますが、一番最初の画面は「Welcome」という単語を表示するだけで、ユーザーに行動を促すようなことはしません。 それ以降の
【iOS】あのUIは何て言うの？iOSのデフォルトUIコンポーネントをおさらいする | 日本VTR実験室
どうもこんにちはJBです。 アプリの開発&デザイン時に、関わる人たちがデフォルトのUIコンポーネントについてきちんと知っているとお互い話が通じやすいし、設計もしやすいですよね！という訳で、今回はiOSのデフォルトUIコンポーネントについてまとめてみたいと思います。 昔、「あの、あれだよ、あの青くてなんか切り替わるヤツ！」「Segmentted Controls?」「何それ」みたいな会話が繰り広げられて時間と労力を多少無駄にしました。 開発しない人も名前ぐらいは知ってた方が良いですね…と言う事をひしひし感じております。そんなわけでiOS8が出るか出ないかくらいの時期に空気を読まず、今回の記事です。 すべて網羅している訳ではないのと、色々端折っておりますのでその辺はあしからずですよ。詳しく知りたい方は、iOSのヒューマンインターフェースガイドラインをご覧ください！ それでは行ってみましょう！
iOS ヒューマンインターフェースの原則 - Qiita
はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が決められることがありますが、そういうことではないのです。いや実際かっこいいかわいいだとかの感覚は重要なのですが、見た目が何となくそれっぽいだけでは優れた UI とは言えません。磨りガラスでも何でも必ずそこには意味があります。だからこそ HIG に書かれた思想
AndroidのWebViewでダークモード対応する方法 - Qiita
アプリのダークモード（ダークテーマ）対応にて、WebViewの中身についてはCSSの prefers-color-scheme メディア特性を使って対応しておくだけでOKだろうと思っていました。しかし、簡単にはいかず、調べてもなかなか解決方法が見つからなかったので書きます。 結論だけ先に書くと androidx.webkit を使い、WebコンテンツのCSSを使うダークモードのON/OFFを設定します。これでAndroid 5(API Level 21）以上でダークモード対応を行うことができます。 ※Android的にはダークテーマ・ライトテーマですね。書いた後に気づきました。m(__)m https://developer.android.com/guide/topics/ui/look-and-feel/darktheme Webコンテンツのダークモード対応はCSSで行う Webコンテ
[Androidアプリ開発] 透明ボタンを作ってみた | DevelopersIO
今回は、Androidで 透明ボタン を作ってみます。 この記事でいっている 透明ボタン とは、通常時は透明で、タップした時は半透明になるボタンのことです。 実装 では、作っていきます。 まず、ボタンタップ時の半透明の色を、 colors.xml に追記します。 colors.xml <?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> <color name="clearButtonPressed">#33000000</color> </resources> 次に、透明ボタンの
![[Androidアプリ開発] 透明ボタンを作ってみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/091f15a7d75f8343165a62700143a86becce2771/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F09%2Fandroid.png)
食えるアプリにするための細かい工夫
【 追記 】 リリース初月の売上、1万円を超えることができました！ という訳で、この記事の効果はある程度はありそうです 😉 こんにちは。 脱サラして個人アプリだけで生活している、あたか、です。 iOS開発歴10年で、iPhone3GSぐらいからやっています。 さてさて、 3年ぶりに、iOSの新アプリ 「しつこいTODO」 をリリースしました 🎉 👉👉 ダウンロードはコチラ 👈👈 このアプリは 👺 < カテゴリー機能とかは、１つのカテゴリーに全部入れるから要らない！ 👺 < それより、TODOを忘れないように何回も通知して欲しい！！ という要望を叶える 「シンプルなのに、TODOを絶対忘れない！」 アプリに仕上げました。 超シンプルな1リスト しつこい「面白い」通知 このアプリが売れるようにした工夫はnoteで記事にして、沢山の方が読んでくれましたが https://note
SwiftUI は古参アプリ開発者を押し流しにきていますよという話｜notoroid
SwiftUIの腰が重たいアプリ開発者へのお怒り。SwiftUIの素振り待ったなし。 a) 勉強会についてiPhoneDevSapの勉強会が2020年7月末に開催(各月奇数開催、オンライン開催2回目)、発表者3名の1人を担当した。 WWDC2020でインパクト大の内容だったSwiftUIの進化がそのまま発表に反映、発表3枠のうち全てSwiftUIの発表だった。 SwiftUI 3本立てとはいっても、1枠はSwiftUIの仕組みから機能面を探っていこうという取り組みに対し、残り2枠はSwiftUIを2019年に触ったことがあるSwiftUI経験者の発表だったので重複のない3発表となった。 話題がかぶらないぐらいはSwiftUI の範囲が広がったのは機能の拡充によるものであり喜ばしい。 2019年からSwiftUIを触った(そしてほぼSwiftUIベースのアプリをリリースした)立場としてSwi
スマートフォンのディスプレイ巨大化に伴う、UIデザインの潮流｜Go Ando / THE GUILD｜note
前回の投稿でAppleのFluid Interfacesについての論考しましたが、Fluid Interfacesが生まれた一つの背景として、ディスプレイの巨大化があります。 本稿では大画面化するディスプレイへのUIデザインの対応について、現在どの様な流れになっているのか、個人的に観測している中で考察している事をご紹介したいと思います。 巨大化し続けるディスプレイサイズ2007年に初めてiPhoneが世に出てから、現在の最新のモデルiPhone XS Maxまでのディスプレイサイズの変遷をまとめたのが下の図です。 初代iPhoneとXS Maxを比較すると、物理的なディスプレイ面積は約2.7倍大きくなり、ディスプレイの縦横比は約1.4倍縦長になっています。 iPhone Xから22%縦長化特に著しく変化したのが、iPhone Xが登場した事によってそれまで1.77だった縦横比が2.16まで
iOSにおける半モーダルビューの解釈｜usagimaru
iOS 8の頃より見かけるようになった新しいモーダルビューの形態と、その設計思想、UI としての使われ方について考察します。この新しいモーダルビューのことを私は他のモーダルビューと区別する意味合いで「半モーダルビュー（Semi-Modal View）」と呼んでいますが、実際にガイドライン上でそのような定義がされているわけではありません。「ハーフモーダル」という呼び方も耳にすることがありますが、私は後述の理由からこの呼び方は推奨していません。 今回はパターンとしてあえて区別することで他のモーダルビューとの違いを明確にし、その特徴や仕組み、正しい設計とはどのようにあるべきかを理解しやすくすることを目指します。なお、2019年版のHIG（すなわちiOS 13対応版）からはモーダルビューのスタイルの一つとして Sheet の記述が現れるようになりましたが、今回は Sheet スタイルに限らずもう少
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
nvtrlab.jp
UIデザイナーはダウンロードしておこう！iOS 14のデザインテンプレート・UI要素が揃ったAdobe XD用の素材がApple公式からリリース
how to put badge on UIBarButtonItem in swift 4?