タグ

uiとdesignに関するmizdraのブックマーク (5)

  • 第2回 スクロールとページングのUIを考える(2) | gihyo.jp

    スクロールするUI UIの基を見てきましたが、Web UIの世界では、今まで当たり前だったものが、時代の変化に伴って廃れていったり、新しいものに置き換えられていくということが頻繁に起きます。今回のテーマであるスクロールとページングを例に、まずはスクロールバーの歴史を紐解いていきましょう。 スクロールバーとは スクロールバーは上下または左右にスクロールするために使用されるGUI(Graphical User Interface)の代表的なUIコンポーネントの一つで、近年、役割が変化しつつある部品です。 スクロールバーの役割としては次のようなものが挙げられます。 ページ全体の分量がどの程度なのか把握する 現在の位置がどこなのか把握する 指定位置にジャンプする 細かいスクロールをする 最初に登場したスクロールバーは、直接操作して画面を上下または左右に動かすものでした(図1・注3⁠)⁠。 図1 

    第2回 スクロールとページングのUIを考える(2) | gihyo.jp
  • 第2回 スクロールとページングのUIを考える(1) | gihyo.jp

    連載2回目となる今回は、WebページにおけるスクロールとページングのUIを取り上げます。ユーザに最高のUX(User Experience)を提供するためにフロントエンドUI(User Interface)設計は欠かせません。エンジニア観点から見たUI設計思想について語りたいと思います。 UIの基礎知識 最適なUIというものは、表示するデータの性質や利用者の使い方、使用しているデバイス、慣れによって変化していきます。 「万人にとって普遍的で、そこそこ使いやすいUI」を目指すべきなのか、あるいは、「⁠一部の人にとって最高に使いやすいUI」を目指すべきなのか。UIを設計する人それぞれでポリシーは異なるでしょう。 誰でもそこそこ迷わずに使える優等生的デザイン。最初はとっつきにくくても、慣れれば最速で使える奇抜なデザイン……。一口にWebページのUIと言っても多種多様です。 たまにしか使わないサ

    第2回 スクロールとページングのUIを考える(1) | gihyo.jp
    mizdra
    mizdra 2024/05/22
    10年以上前の記事だけど良いこと書いてある
  • Our Justified Layout Goes Open Source | code.flickr.com

    We introduced the justified layout on Flickr.com late in 2011. Our community of photographers loved it for its ability to efficiently display many photos at their native aspect ratio with visually pleasing, consistent whitespace, so we quickly added it to the rest of the website. It’s been through many iterations and optimizations. From back when we were primarily on the PHP stack to our lovely ne

  • Building the Google Photos Web UI

    A few years ago I had the privilege of being an engineer on the Google Photos team and part of the initial launch in 2015. A lot of people contributed to the product — designers, product managers, researchers, and countless engineers (across Android, iOS, Web, and the server) to name just some of the major roles. My responsibility was the web UI, and more specifically the photo grid. We wanted to

    Building the Google Photos Web UI
    mizdra
    mizdra 2021/02/27
    Web版のGoogle PhotosのUI設計について。最適な写真の並べ方を高速に計算するために、グラフ理論の問題に帰着させて解いているという話が面白い… めちゃめちゃ良かった。
  • 「きららファンタジア」メニュー項目が整理されていたので比較しました - ゲームアプリのUIデザイン

    こんにちは、ちょこきなこです。 「きららファンタジア」のメニュー項目を新旧で比較してみました。 リリース直後は以下のようなデザインだったようです。 色とか並び方が雑然としている印象です。 上の方にメインコンテンツを配置しているのかな…。ですが、色がバラバラです。 今現在のメニューは以下のようなデザインです。 項目は増えましたが、項目ごとに整理されて、ぱっと見の把握がしやすくなりました。 並べてみるとこんな感じです。 Before⇒After 項目の分け方の妥当性に関しては割と言ったもん勝ちで良いと思います。 (ホームは枠から外れて左下に配置に移動してますね) 例えば 「ミッションってメイン?」「トレーニングって育成だからキャラじゃないの?」とか疑問は浮かびますが、意外と「ミッションもトレーニングもメイン!」って言いきれば良いだけだと思います。 実際、プレイしていてそこに疑問は持たないですし

    「きららファンタジア」メニュー項目が整理されていたので比較しました - ゲームアプリのUIデザイン
  • 1