You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
管理画面を作ってると,「みだりに押されたくはないが,かといって無いと不便」みたいなボタン (或いはそれ以外の何か) を画面上に置きたくなる時があると思う. 例えばバッチで行うような処理を (なんらかの事情で) 即時実行するボタンのようなやつ.こういったボタンは便利だけれど,無闇に押されるとシステムに対する負荷が上がり,サービスの提供に悪影響を及ぼす場合があるのでなるべく押しにくくあるべきだと思う. そういった,おもてなしを目的とはせず,むしろ或る操作に対する敷居を高くするための,謂わば負の UI・負の UX をどうするべきかを軽く考えたのでここに記す. 警告を出す 例えばこの画像のような感じ. こうして注意を喚起することで精神に注意を促すくことで,みだりな利用を抑制するという方法.ボタンを赤くすることで危険な処理であることも表している. 加えてボタンが押された時に念を押すための confi
dwango creators’ blogをご覧のみなさま、こんにちは。ドワンゴデザイナーのたかはしです。 普段はニコニコ動画周りの仕事をしております。 プロトタイプが作れるアプリやサービスはいろいろとありますが、それぞれ得意なこと不得意なことがあり、フェーズにあった目的が果たせるツールを選択することが大切です。 画面遷移や全体設計ではProttやinVision、より細かいインタラクションやアニメーションにはPixateやOrigami、Framerといった目的にあったツールを組み合わせて使うことでより期待できる結果をもたらしてくれます。 そこで今回は、ちょっと踏み込んだUIアニメーションが作成できるプロトタイプツールPrincipleを年末年始に触ってみたのでちょろっと紹介したいと思います。 Principle for mac 去年の夏頃、Appleの元エンジニアが開発したプロトタイピ
みぃむ( id:ml_myme )ですこんばんわ!! そういえば最近めっきりおそ松さんにハマっています。 さて、メモっていたニュース系アプリのスクロールを実現するライブラリやサンプルを検索することがあり、ブックマークが溜まっていたのでせっかくなのでまとめてみました。 ライブラリ紹介とサンプルや実装について記載されている記事を厳選してお届けします・ω・♪ ニュース系アプリのUIとは 上部に画面切り替え用のタブがあり、そのタブがスクロールして複数のViewが表示されるUIのことです。 下記3つ例にあげてみます! マンガも全て無料で読める総合ニュースアプリ グノシー(Gunosy) Gunosy Inc.ニュース無料スマートニュース / 圏外でもニュースがサクサク読める!(SmartNews) SmartNews, Inc.ニュース無料Yahoo!ニュース / 重要ニュースも、好みのニュースも
一度は憧れたことがあるメディア系アプリのUI 最近のキュレーションアプリやファッション情報系のアプリでよくある、スワイプすると写真付きコンテンツリストの一覧が切り替わり、なおかつコンテンツの上部分に設置されたタブが切り替わるようなUIはよく見かけると思います。このようなアプリを作成するための足がかりとしてまずはUIScrollViewとContainerViewを用いて、アプリの骨格となる部分を作成するための方法とポイントをご紹介致します。 ContainerViewに関してざっくり説明&導入する際のポイント 以外と参考書や書籍などでも扱っているものが少ないContainerViewですが、特に1つのベースとなるViewControllerに複数のViewControllerを配置して複雑な画面構成をする際には重宝します。 InterfaceBuilderで「Container」という要素
モーダルビューを「閉じる」ボタンの位置は右に置くべきか左に置くべきか。iOSにおいてはナビゲーションバーの右と左の2択であるため、逆に迷ってしまいがちなのかもしれません。 よくある話としては「設定ボタンがナビゲーションバーの左にあるのなら、同じように左側に閉じるボタンを配置するべきではないのか…」といったことをよく聞きますが、トリガーとなるボタンの位置はあまり関係なく、その後のモーダルビューでの内容や一貫性によって判断する必要があります。 モーダルとは ボタンの位置を考える前に、まずはモーダルとはどういったものかを紹介します。アプリケーションでのモーダルはユーザーに行動を制限し、特定のタスクに集中させるモードです。もちろんアプリケーションという意味では、ホームボタンを押したりマルチタスクにより他のアプリケーションを使うことができるため完全な制限ではありませんが、現在使用中のアプリケーション
ホリデー株式会社 *1 の多田です。Holiday ( https://haveagood.holiday/ ) というサービスの開発を行っています。 アプリを通してユーザに価値を届けるためには、アプリの細部のインタラクションを軽視することはできません。細かい部分に気を配り使い心地を良くしてこそ、サービスで本当に実現したい価値をユーザにまっすぐ届けることができるためです。 iOS アプリの使い心地を良くするための基本的なインタラクションを以前当ブログで投稿した記事でいくつか紹介しましたが、今回は前回紹介しなかったインタラクションのうち、「読み込み中」の UI の基本パターンについて取り上げようとおもいます。 はじめに:なぜ読み込み中の UI を考えなくてはいけないのか Holiday iOS アプリでは、基本的にデータはクライアント側で持たずサーバと通信して表示するデータを受け取っており、
Store and fetch images asynchronously to make your app more responsive.
想像してください。あなたは今、オフィスにいます。周りとは仕切られた個別スペースです。今週は、近々新たに展開する予定の製品を紹介するために多くの時間を割いてきました。疲れが溜まり、不機嫌ぎみになっています。今はようやく近づいた週末が待ち遠しくて仕方ありません。 しかしその前に、新製品を紹介するホームページがWindows 10で正常に動かくかどうかを試してみなければなりません。あなたは問題ないはずだと信じています。あなたが信頼を寄せているMacには、Windowsを問題なく実行できるソフトもインストールされています。 ソフトを起動してみると、丁寧にもWindowsがポップアップ通知で可能なアップデートがあることを知らせてくれます。もちろんアップデートを開始するため、あなたは了承します。 すると、こんなものを目にするのです。 訳:何かが発生しました。 何かが発生。 新製品の準備のため期限が迫っ
今開発中のPlayer!のログイン・登録画面で、こんな進捗表示をしていますが、これ実はフェイクだったりします( ´・‿・`) (Qiitaの画像サイズ制限が厳しくて粗いです。キレイなものは実際にアプリダウンロードしてご覧下さい。) 経緯 元々、この画面はこういう進捗表示では無く、単にインジケーターがクルクルするだけで、進捗状態が分からないものでした。 特にネットワークが悪いところだと、バグって固まってしまったのでは?とユーザーを不安にさせるようで、たまにそういう声を聞くことがありました。 登録フローは大事なところなので、そういうところでこれが原因で離脱してしまうと残念なので、改善が必要でした。 そこで、ネットワーク処理にもたつきつつもちゃんと正常に処理をしているということを示すために、進捗を表示することにしました。 ただ、例えば大きな画像などメディアファイルダウンロードなどならともかく、こ
The Select control for React. Initially built for use in KeystoneJS. See react-select.com for live demos and comprehensive docs. react-select is funded by Thinkmill and Atlassian. We are an open source project that is continuously supported by the community. React Select helps you develop powerful select components that just work out of the box, without stopping you from customising the parts that
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時(メニューが展開しているときなどのアクティブ時)のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
Tweetbot 3 風の UI を実現する iOS 用の Twitterクライアント Tweetbot 3 for Twitter で画像をタップすると、いい感じに画像を動かせます。このUIは良く出来ていますね。 今回はこれを手軽に再現できる OSS である、JTSImageViewControllerをご紹介します。 標準では Objective-C プロジェクトで使えますが、今回は 一手間かけて、Swift のプロジェクト上で使ってみようと思います。 JTSImageViewController JTSImageViewControllerは、Jared Sinclairさんが GitHub で公開されている イメージビューア・コンポーネントです。 先ほどの Tweetbot 3 風の UI が、短いコードで実現できてしまいます。 早速使ってみましょう! CocoaPods まずは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く