ユーザーインターフェイスにおける明示的アクション／暗黙的アクションの違いと設計の考え方 – usagimaru – Medium
明示的アクション／暗黙的アクションについてずっと言語化できていなかったので、このたび記事にまとめてみました。馴染みのあるMac OSそしてiOSを例に、画面上のオブジェクトを操作するための二つのパラダイムについて説明します。 2005年頃の Apple Human Interface Guidelines (HIG) を開いてみると、そこには「Explicit and Implied Actions – 明示的および暗黙的アクション」と呼ばれるデザイン原則が示されています。Mac OSのユーザーインターフェイスでは、明示的アクションと暗黙的アクション、この二種類の操作体系が同時に提示され、ユーザーは好きな方法を選択することができるようになっています。 明示的アクション明示的アクションとは、すなわち画面上に明示された手段を選択してコマンドを実行するというものです。Macを例にすると、ユーザー
UIデザインにユーザーストーリーが必要な理由
Tom Brinton氏はBYUを2012年に卒業した後、CitrusBits、Wallaroo Media、CustodyXChangeでUI/UX設計者として働いてきました。彼は優雅なインターフェースをデザインすることが好きです。 あるデザインチームが、クライアントの新しいアプリのモックアップについて話し合っているとします。すると、アプリがどのようにあるべきかついて、チームメンバーはそれぞれ 違う考えを持っているということが明らかになります。こうなると、ミーティングはすぐに、「何が正しいか」というよりも、「誰が正しいか」という議論になってしまいます。 誰もが自分のデザインを守ろうとしますが、誰もユーザーを守ろうとはしません。ひょっとしてあなたにも思い当たる節がありませんか？ このようなときにこそ、ユーザーストーリーを導入する必要があります。 最近では、UI/UXのプロがアジャイル開発で
数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 - 笑顔を創りたいWebディレクターの日常
なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです
優れたフォームをデザインする
サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
良い UI をつくる - おいちゃんと呼ばれています
師走に入った。来年良いスタートを切るために一年を振り返るには良い時期だ。 さて、2015年の後半くらいから、フロントエンド・エンジニアとして「良い UI をつくる」ことに自分のリソースを集中させてきた。UI はここではウェブアプリケーションの UI を指す。 一年半をそれに費やしてきて、このあたりで、自分が考える、良い UI（ユーザーインターフェイス）とは何か、どうすればそれを実現できるのかを整理しておくのも悪くないなと思ったので書き留めておく。 良い UI をつくるには 良い UI をつくるには次の 2つが必要だと考える。 1 良い UI を定義できること 2 上記 1 を実装（実現）できること そう、いまから何をしようとしているのかというと、良い UI をつくるために必要な要素をツリー構造で整理しようとしているのだ。 ただし、以下に良い UI をつくるために必要な要素を分類しようと試み
デザイナーなら誰もが知ってるグラフィックデザインの基本「スイススタイル」をCSSアニメーションで！ -Swiss in CSS | コリス
デモを見ているだけで、クリエイティブな刺激がもらえる！そんな「Swiss in CSS」を紹介します。 ↓はアニメーションgifですが、実際のページはCSSのアニメーションで動いています。 Swiss in CSS ※アニメーションgifは、Konstruktive Grafik Swiss in CSSはスイススタイルでデザインされたポスターをCSSアニメーションで再現されたもので、美しいタイポグラフィ、精密なグリッド、印象的なカラーなど、現代のWebデザインの参考になると思います。 キャプチャ画像は静止画ですが、リンク先でそのアニメーションをお楽しみください。 ※全部アニメーションgifにしたら重すぎたので、やめました。
建築史に隠されたウェブデザインの未来
ウェブデザインの進化の過程を考えるとき、西洋建築史はとても参考になります。美術の形として、両者は同じ項目で定義することができます。 人が集まる場所として機能する実用的に作られている技術の進歩に大きく左右される実用的だが、間違いなくアートでもあるこのような制約があるなかで、両者の進化の過程はとても似ています。どちらも同じように過去の作品をもとに、その上に新しいものを築いています。もしウェブデザインの未来が知りたければ、建築家が辿った道を見てみればいいのです。
あなたのインスピレーションが刺激されるであろう9つのWebサイト
こんにちは。 今回は、何かを制作する際に、アイデアのヒントになったりインスピレーションを刺激されるサイトを9つほどご紹介します。 The Book Cover Archive 世界の本の装丁をアーカイブしたサイト。 本の表紙からは、インスピレーションを受けることが多いです。 → The Book Cover Archive Ads of the World 世界の広告デザインをアーカイブしたサイトです。 地域、国別、業種、広告媒体別に分かれていて、様々なデザインに触れることができます。 → Ads of the World motions アイコンやインフォグラフィックなどのアニメーションの動きを、アーカイブしたギャラリーサイトです。 キャッチコピーは、あなたに「気持ちいい動き」のインスピレーションを。 → motions 404design 「404 not found」のページを集めた
イミュータブルデータモデル(入門編)
6. Step1 エンティティの抽出 発送担当者が受注リストをもとに、商品の在庫を確認し、在庫が あれば商品を発送する。 ① 要求仕様の「動詞」を抜き出しエンティティとする。 ② ①に関わる「名詞」を抜き出しエンティティとする。 ③ エンティティ間の関連に線を引く ④ 属性や候補キーも分かる範囲で書いておきます。 間違い！ この段階で実装をプロパティファイルにするとか、Enum にするとか決め打ちでエンティティとして表さないのはや めましょう。 まず、はじめにエンティティを抽出します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP