タグ

UIに関するkirononoのブックマーク (5)

  • Vue.jsベースのECサイト向けUIコンポーネントライブラリ・「Storefront UI」

    Storefront UIはECサイトの為に開発されたVue.jsベースのUIコンポーネントライブラリです。デザイナーや開発者向けに設計されており、カスタマイズのしやすさも考慮されているそうで、デスクトップやモバイル、PWAに対応できるようになっているそうです。 アトミックデザインが適応されており、必要な時に必要な要素を組み合わせて設計する流れを想定しています。 ECサイト向けのUIコンポーネントが沢山 ECサイト用に構築されたのだから当たり前かもしれませんけど、ECサイトでよく使われるUIコンポーネントが沢山用意されており、これだけでも珍しい気がします。 例えばS、M、Lなどのサイズの選択や色の選択、購入数を増やすためのカウンター、レーティング、アラートやプライス表示に割引表示の工夫なども見られ、細かく配慮されている印象です。 Vue.jsを使ったECサイトの構築を考えられている方は一見

    Vue.jsベースのECサイト向けUIコンポーネントライブラリ・「Storefront UI」
  • 配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド|Taiki Ikeda|note

    どうも、イケダです。最近よくTwitterで知り合った若いデザイナーにお会いしているのですが、どなたにも決まって聞かれることがあります。 「G●●dpatchってぶっちゃけどうなんですか?」 知りません、なんで僕に聞くんだw 2015年に「Dear G●●dpatch」という内容のサイトを作って持っていったところ、「あー、またこれね...」と土屋さんに非常に悲しいリアクションをされてしまったので別の方法で気を引くことをオススメします。 というわけで今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオ

    配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド|Taiki Ikeda|note
  • iOS用のレスポンシブなUIをつくる - Unityな日々(Unity Geek)

    iOSデバイスにはさまざまな解像度、アスペクト比があり、それぞれに適切なUIとなるような工夫がいる。 参考: unitygeek.hatenablog.com 実現したいUI:トリミングとストレッチ たとえば、次のようなUIデザインを実現したいとする。 背景の画像は画面の縦サイズにあわせ、横方向はトリミングされる。 ボタンを3つ配置したメニューバーは、画面の横いっぱいに表示し、バー内にボタンを3等分して配置する。 テキストボックスは、横幅一定、高さはテキスト量によって変える。 具体的な完成イメージは次のようなものだ。2つの画面の解像度・アスペクト比はそれぞれ、iPhone5s, iPad Retinaを想定している。 背景の人物の写真は、iPhoneでは左右がトリミングされている。ボトムの黒色のメニューバーは、iPhone, iPadそれぞれに横方向いっぱいに表示され、ボタンは3等分されて

    iOS用のレスポンシブなUIをつくる - Unityな日々(Unity Geek)
  • ひどいダッシュボードの法則 | POSTD

    白状しますが、私にはひどいダッシュボードを構築してきた責任があります。個人的に、この記事に書いた間違いのほとんどを犯してしまいました。ユーザに謝罪するとともに、同じ過ちを繰り返さないことを誓います。これらの過ちが悪い見として、プロジェクトマネージャやデザイナ、エンジニアがひどいダッシュボードを構築したり確認したりする無駄な時間を少し減らすのに役立つことを願います。 法則1:ほとんどのソフトウェアのダッシュボードはひどい ひどいと言うのは このGoogle画像検索 のようなひどさ(まだ吐いていませんよね?)のことではありません。退屈で、設計が不十分で、有用性も一切ないという意味です。 信じられませんか? では、今すぐ優れたダッシュボードのソフトウェア名を3つ挙げてみてください。 見つかりましたか? ええ、そうだと思いました。しかし、ダッシュボードはどこにでもあります。あなたが使っているSa

    ひどいダッシュボードの法則 | POSTD
  • Storyboardを1画面ごとに分割した話 - 24/7 twenty-four seven

    今年の5月くらいの話なのですが、ユビレジのiPadアプリケーションのプロジェクトで使っているStoryboardを基的に1画面(≒1 View Controller)の単位に分割するということをしました。 1画面1Storyboardメソッドについてはnakiwoさんが書かれた記事も参考になります。 1画面から始めるStoryboard - Cocoaメモ ↑ 上記の資料はどちらかというとStoryboardを使い始めるにあたって、1画面単位で少しずつ使っていこうという感じですが、ユビレジではもともとほぼ全部の画面がStoryboardになっていました。 ただ複数人で共同作業をするにあたっては、1画面単位を1ファイルにしておくくらいがメンテナンスしやすいんじゃないかなあという結論になったのでしばらくそういうふうに運用することにしました。 また、XIBと違ってStoryboardは単純にコ

    Storyboardを1画面ごとに分割した話 - 24/7 twenty-four seven
  • 1