CardとListTileっぽいWidgetの書き方｜Shinichiro Iwatsuru
FlutterのCardとListTileを使えばよくあるこんなカード型のViewがかんたんに実現できます。 ですが、実現したいデザインと少し違う場合は、ListTileを使わずにColumnとRowを組み合わせることになると思います。公式のListTileクラスでサンプルを確認できます。 ContainerとColumnとRowを組み合わせた素振りをしてみます。以下のようなデザインにしたいと思います。 ・カードをタップしたらリップルエフェクトを効かせる ・リップルエフェクトの色とカード背景色をそれぞれ指定したい ・カードは角丸＆シャドウをつける ・画像はウェブからダウンロードして表示するColumnとRowのレイアウト Rowで画像とテキスト領域を縦分割し、テキスト領域はColumnで積み重ねていきます。RowとColumnのmainAxisAlignmentはMainAxisAlign
ミルクボーイがUIとUXの違いを説明したら｜広野 萌
挨拶内海「どうもお願いします。ありがとうございます。今、NFTアートをいただきましたけどもね。ありがとうございます。こんなんなんぼあってもいいですからね」 駒場「いきなりなんですけどね、うちのおかんがね、好きなIT用語があるらしいんやけど」 内海「そうなんや」 駒場「その名前を忘れたらしいねん」 内海「IT用語の名前忘れてまうってどうなってんねん。あれやろ、IT用語ゆうたらどうせ、デザイン思考か、アジャイル開発か、リーンスタートアップやろ！」 駒場「俺もそう思ったんやけどちゃうらしくてな、いろいろ聞くんやけど、全然わからへんねん」 内海「そうなん？」 駒場「うん」 内海「ほんだら俺がね、おかんの好きなIT用語、一緒に考えてあげるから、どんな特徴言うてたかとか教えてみてよ」 定義駒場「おかんが言うには、製品やサービスとの関わりを通じて利用者が得る体験及びその印象の総体やって言うてた」 内海「
Airbnbが採用するServer-Driven UIについて、私達はどう活かすのか｜rikika
まずはじめにこれは、デザインエンジニアとして生きてきた私Rikikaのポジショントークです。 エンジニアとデザイナーの垣根が少しでも低くなれば、最高のプロダクトが次々に生まれると信じています。気に入ってくれた方はフォローお願いします！ Server-Driven UI（SDUI）とは何かAirbnbのテックブログで出てきた、UIをサーバーサイドで定義し、クライアント側に返却するという手法です。 つまりクライアント側で状態管理やレンダリングのロジックを持たせずに、各プラットフォームでのUIの同一性をサーバー側で担保するというもの。 GhostPlatform というイケイケの名前で立ち上がったというプロジェクト、Airbnb社内ではかなり普及しているようです。 ※GuestとHostを大切にするためのシステムだからGhostらしい SDUIは何を解決しているのか例えば、コンポーネント間の並び
Material Designの設計思想を探る｜usagimaru
この記事は、2018年5月25日に開催された Google I/O Extended 2018 Shibuya での講演内容を文章に起こしたものです。当時はGoogle I/O 2018の直後、Material Designガイドラインがいくらかアップデートされ、Material Themingや柔軟な基盤の構築といった新たな考え方が明示されたばかりでした。この講演は、アップデートされた内容の背景にある思想や意図を考察し、Material Designの動向を探ろうという趣旨になります。この記事では当時のスライドを交えながら内容の解説と考察を行います。 今回は、I/Oで明らかになったMaterial Designの新しい部分を中心に、iOSのデザインと比較しながらその設計の仕組みや思想を探っていきたいと思います。異なる観点から向き合うことで共通点と他との差異を見極めるという方法をとります。
デザインと行動心理学｜nagaimen
情報設計やコミュニケーションに役立ちそうな、人の無意識な行動心理のキーワードをイラスト付きでまとめてみました。 視線解析 目は脳とつながっていて、視線と心理状態は結びつきやすい。記憶に関することは左に、未来に関すること右に視線が向く傾向がある。視覚に意識を集中すると上、聴覚に意識を集中すると真ん中、体全体で感じようとするときは下らしい。なので、嘘をつくときは右上をみてしまう傾向がある。ユーザーインターフェイスにおいても「戻る」ボタンが左、「進む」ボタンは右に配置されている。 アフォーダンス アフォーダンスとは、環境や形状が与える意味のこと。例えば、ドアの取っ手は前後に開けるものと認識するし、ドアにくぼみがあればスライドして開けると認識する。そういえば、線香花火はヒラヒラに火をつけたくなるので 反対かもと思い調べてみると、ひらひらを持つことで揺れを吸収し火球が落ちにくくなるらしい。線香花火の
Figmaを導入して変わった5つのこと｜使い方・事例・記事まとめ｜スマートキャンプ デザインブログ
スマートキャンプデザインブログ、Designer / Engineer のhaguriです。 スマートキャンプでよく使用するデザインツールにFigma（フィグマ）というツールがあります。過去にも数回、Figmaに関する記事を書いてきました。 Figmaの導入後からしばらく経ち、会社全体で5つの変化が生まれました。 今回はFigmaによるコラボレーションやデザインワークの変化について、スマートキャンプの事例を紹介します。 Figma（フィグマ）とはブラウザ、もしくはアプリ上で共同でデザインワークができるツールです。 リアルタイムで共同編集できるのが特長で、SketchやAdobe XDなどのようなプロトタイピングツールの位置づけとなります。 なぜFigmaを導入したのかスマートキャンプではUIデザインをする際、2018年まではSketch、XD、Illustratorなど複数のツールを使って
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
