UIが嘘をつく？ ユーザ体験における「楽観的な更新」とSPAでの作り方
こんにちは、株式会社カミナシでデザインエンジニアをしているショウです。 突然ですが、UI/UX デザインにおいて、「楽観的な更新」という言葉を聞いたことがありますか？あまり聞いたことがなくても、実は日常にたくさん存在しています。 例えば、 twitter や facebook のいいねボタン。いいねをタップした直後に色がつくのですが、実はサーバーへのリクエスト送信と UI 上のいいねの色付きが同時に発生しています。つまりサーバーからの通信結果を待たずに UI を更新しています。 他に、trello でタスクカードを隣の列に移動したり、iMessage や Facebook メッセンジャーでのメッセージの送信、Kindle アプリで途中までしかダウンロード出来てない本が読めることなども楽観的な更新です。 図：楽観的な更新を採用しない時と採用した時のメッセージ送信のUI （引用元） 楽観的な更
ソフトウェアデザインにおける構造設計を実践！マネーフォワードさんとワークショップを開催しました｜Goodpatch Blog グッドパッチブログ
Goodpatchでは、UIの構造設計を重視したデザインプロセス「モデルベースUIデザイン」を推進しています。最初にコンセプト定義やユースケースを定義し、情報整理をして最終的に機能やビジュアルなどの具体的なところを詰めていく考えをとっていくプロセスです。 今回は、マネーフォワードさんと「デジタルプロダクトのUI設計のプロセスと考え方を学び、実践することでスキルのベースを身につけること」をテーマに、モデルベースUIデザインについて理解・実践するワークショップを開催しました。本記事では開催の背景から当日の様子をご紹介します。 参加いただいたマネーフォワードのUI/UXデザイナーさんによるnoteもぜひご覧ください！ マネーフォワードがGoodpatchさんとUIデザインワークショップを実施しました！ ご相談いただいた背景 「お金を前へ。人生をもっと前へ。」をミッションに掲げる株式会社マネーフォ
Jetpack Compose, React, Flutter, SwiftUIを比較する - Blog - Mori Atsushi
宣言的UIの考え方はReact、Flutter、SwiftUI、Jetpack Composeと広がり、ほぼ全てのプラットフォームで利用できるようになりました。 今までのHTMLやXMLに対して命令的に処理を書くのに対し、宣言的UIはUIの構築や更新を圧倒的に簡素にしてくれます。 また、差分更新の仕組みを備えているものも多く、パフォーマンスの向上も見込めます。 今回はいくつかある宣言的UIのツール群の中から、代表的なJetpack Compose、React、Flutter、SwiftUIを個人的な見解も含めて比較していきます。 コンポーネントの記述宣言的UIの大きなメリットの一つに、再利用可能なコンポーネントが挙げられるでしょう。 StatelessコンポーネントとStatefulコンポーネントそれぞれについて比較を行います。 SwiftUI Statelessコンポーネントまずは状態を
【VSCode】よけいなものを消し去ってコードに集中しよう【ミニマリスト】 – Kurusugawa
【VSCode】よけいなものを消し去ってコードに集中しよう【ミニマリスト】投稿者: SHOUJI Kazuo 投稿日: 2021-05-122021-05-12 今回は、社内の技術者が提供してくれた 便利ネタを共有します。 VSCode は使いやすいエディタですが、無駄な領域が多くてエディタの領域が狭いと感じます。 今回は VSCode をカスタマイズして、エディタの領域をより広く確保してみましょう。 以下の画像を見比べてみてください。 上がデフォルトの状態です。下は今回の記事を適用した状態です。（記事と関係ない拡張機能が入っていますが） ウィンドウサイズはどちらも同じです。 UI がスッキリして、エディタに表示されているコード量が増えていることがわかりますか？ では、カスタマイズのポイントをひとつずつ紹介していきます。 アクティビティバーを消し去る 画面左のアイコンが縦に並んだ領域をアク
React + Material-UIで管理画面を作成してみた | DevelopersIO
Reactアプリを作成 Material-UIで管理画面を作るためのベースとなるReactアプリを作成します。 Create React App Create React Appで新しいReactアプリを作成します。 npx create-react-app react-material-ui-sample --typescript プロジェクトのディレクトリへ移動して実行します。 cd react-material-ui-sample npm start ブラウザにReactアプリが表示されます。 ディレクトリ構成 ディレクトリはあまりネストさせすぎずシンプルな構造にしました。コンポーネントの分け方はAtomic Designを参考にしています。 src/ ├ components/ │ └ atoms/ # 原子（個々のパーツ） │ └ molecules/ # 分子（原子の集合体）
Tiny Emulators
Tiny Emus HALP! github ide mastodon twitter blog Visual 6502 Remix Visual Z80 Remix Visual 2A03 Remix KC85/2 UI KC85/3 UI KC85/4 UI KC Compact UI Amstrad CPC464 UI Amstrad CPC6128 UI ZX Spectrum 48k UI ZX Spectrum 128 UI Commodore VIC-20 UI Commodore C64 UI Acorn Atom UI LC-80 Robotron Z1013 UI Robotron Z9001 UI (with BASIC and RAM modules) Robotron KC87 UI BASIC[Enter] FORTH (KC85/4) UI FORTH (Z1
開発者は必見? GoogleがAndroidアプリのUXアンチパターン動画を公開 - すまほん!!
数多のアプリが氾濫する Android アプリですが、過去に開発の経験がある方・現在進行形で開発中の方……数多くいらっしゃるかと思います。 そんな方に是非、ご覧頂きたいのが Google が Youtube にて公開している ANDROID DESING in ACTION UX アンチパターンです。ご存じの通りアンチパターンとは「べからず集」のことで「これは駄目だからこうして欲しい」といったことがわかりやすく紹介されています。 動画の内容としては、ダイアログの表示方法、ボタンの位置、タッチフィードバック……etc 開発者の方はそのまま知識を吸収することができますし、開発者ではない方も「へー」と思えること間違いなしです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
