タグ

designとlayoutに関するpipoのブックマーク (9)

  • エンジニアのための Figma 知識

    記事の多くは Inspect モードを前提に解説しています。 下記に Dev Mode に対応した解説を書いてみたのであわせてご参照ください。 https://codezine.jp/article/detail/18000 エンジニアにデザインツールの知識・習熟は必要か? しなくても仕事はできると思うのですが、あるとよりクオリティの高い仕事ができることは間違いありません。 という訳でエンジニアエンジニアとしての仕事をしていく上で「Figma のこういうことを知っておくと良さそう」という知識をまとめてみました。 ユースケースを考える まず始めにデザインは作らないはずのエンジニアFigma を使う時にどんなユースケースがありそうかを考えてみます。 デザインを元に実装する時 デザインから何かを生成したい時(コードとか画像とか) 自分でちょこっとデザイン修正しちゃう この辺りがあるかな〜

    エンジニアのための Figma 知識
  • Android Design Support Libraryを使う | Recruit Tech Blog

    どうもこんにちは。Google I/O 2015 帰りの 英単語サプリ 担当 田澤です。 Material Designを実現するためのAndroid Design Support Libraryが発表されました。 これまではサードパーティーのライブラリを利用するか、独自実装してMaterial Design対応をする必要がありましたが、ついに公式でサポートされるようになりました。サポートOSバージョンはAndroid 2.1 以上となっています。 そこで、記事ではAndroid Design Support Libraryで追加されたコンポーネントと使い方を紹介します。 また、各コンポーネントに関するDesign Guidelineのリンクも用意しているのでご参照ください。 なお、ここで紹介しているコードは Github - android-SampleDesignSupportLib

    Android Design Support Libraryを使う | Recruit Tech Blog
  • Design Support Library v22.2.0について Part 3 - EDIT MODE

    Part 1ではTextInputLayoutとFloatingActionButtonについて、Part 2ではSnackbarとCoordinatorLayoutについて調べたことを、それぞれ書きました。 今回は、TabLayoutについて書いていきます。 TabLayoutの概要 リファレンスを確認すると、TabLayoutクラスはHorizontalScrollViewクラスを継承していました。 API Level 20まで使われていたActionBar.Tabなどとは、関連がないようです。 Tabの生成にはTabLayout.TabクラスのnewTab()メソッドを使います。 MaterialDesignにおけるTabの使い方は、デザインガイドラインで細かく指定されています。 このクラスの見た目や振る舞いは、ガイドラインに沿った形で実装されているようです。 基的な使い方 とりあ

    Design Support Library v22.2.0について Part 3 - EDIT MODE
  • AndroidのLayoutについて | TechBooster

    Androidアプリケーションを始めて作成するときに、一番つまづきがちになるLayoutの構成の仕方。 エントリでは、下記要素についての紹介を踏まえて、思い通りの位置にViewを構成する方法を紹介します。 今回紹介する要素 android:layout_weight android:gravity android:layout_gravity android:layout_margin android:padding 今回のサンプルではこれらの要素を使用して、以下画面を作成します。 また、今回の記事の作成にあたり、以下サイトを参考にさせていただきました。 ありがとうございました。 zaki日記 様 http://zaki.tdiary.net/20110702.html#p01 プログラミング雑記 様 http://d.hatena.ne.jp/Korsakov/20100826/128

    AndroidのLayoutについて | TechBooster
  • 第2回 基本を押さえながら、まずは要素だけでXMLコーディング

    デザイナーがこだわったAndroidアプリのデザインを実現するXMLコーディングを解説する連載の第2回。前回は、デザイナーが作りたいと思うアプリと、こだわりたいポイントについて挙げていきました。 今回から実際のコーディングに入っていきますが、その前に、作るアプリについてしっかりと考えておきましょう。前回でも述べたとおり、ただのインスピレーションのデザインではなくて、ユーザーが使いやすいインタフェースを設計する必要があるからです。 作りたいアプリを決める 前回でも紹介しましたが、今回実装するのは、「CAT PATH」と題する仮想アプリです。 XMLコーディングのサンプルですのでシステム的な仕様はありませんが、画面を作っていく上で、ユーザーのユースケースなどはきちんと考えてインタフェースを設計する必要がありますので、大まかな内容だけ決めておきます。 <アプリの概要> 自分のアカウントを持ち、自

    第2回 基本を押さえながら、まずは要素だけでXMLコーディング
  • 常に新しい端末に適応する

    指定できるリソース修飾子 前回は、端末における画面以外の特性に修飾子を付けることによって、それらの特性に応じてリソースを自動的に切り替えるという方法を解説しました。 最終回の今回は、前回のおさらいを兼ねて、リソースに指定可能な修飾子の一覧を示すとともに、リソース・マネージャが参照する端末の特性をコード側から取得する方法を示します。 最後に、リソース関連以外で重要なポイントとして、端末に搭載されているセンサー・デバイスを確認する方法や、状況に応じて最適な位置情報取得元(ロケーション・プロバイダ)を選択する方法について解説します。 これまで、リソースにさまざまな修飾子を付けてきましたが、あらためて、指定可能な修飾子を一覧すると、次の表(図1)のようになります。 これらの修飾子を複数指定する場合は、表の上から下の順番で指定します。例えば、言語と地域(ja-JP)を指定して、画面の向き(port、

  • 文章の作り方 - 伝わるデザイン 研究発表のユニバーサルデザイン

    研究者や研究に関わる大学生や大学院生は、一年を通じて研究室ゼミや学会などで研究成果の発表を行なわなければなりません。また、近年、科学者でない人たちに対する一般向けのプレゼンや講演(アウトリーチ活動)の機会も増えてきています。他にも、研究論文や報告書を書いたり、研究費調達のために予算申請書やプロジェクトの提案書を作成したりすることも、研究者にとって欠かせない仕事です。これらはいずれも情報を他者(研究仲間や審査員、一般市民)へ伝えようとする行為であり、正確かつ効果的な情報の発信が望まれます。しかし、自己流で資料を作成して、闇雲に情報を発信していても、スムーズに情報は伝わりません。ときには誤った情報が伝わってしまい、研究の価値を正当に評価してもらえないことさえ起こりえるのです。 情報を正確にかつスムーズに他者に伝えるためには、情報をデザインすること、つまり文章を読みやすく整えたり、図表を見やすく

  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
  • resizeMyBrowser

    320 x 480 iPhone 3G/3GS 480 x 720 Meizu M8 480 x 800 Google Nexus one 640 x 960 iPhone 4 768 x 1024 iPad 480 x 320 iPhone 3G/3GS 720 x 480 Meizu M8 800 x 480 Google Nexus one 960 x 640 iPhone 4 1024 x 768 iPad 1024 x 600 Most Netbooks 1280 x 800 MacBook Air 08 1366 x 768 Some Laptops 1440 x 900 MacBook Pro 15 inches Maximum Resize to Maximum

  • 1