ここでは全部を理解せずとも、デザイナーでなくとも何となく分かるをベースに書いております。★マテリアルデザインでは影の要素が大事!フラットデザインとは異なりオブジェクト同士の階層の構造が重要になり、高さの概念がある。★マテリアルデザインでは、1つのページ内で色を多様しません。マテリアルデザインのアニメーションアニメーションといえばざっくりいえば動いているものを連想しますよね。マテリアルデザインとは触感的表現を含ませたものをさしますのでアニメーション効果にもリアリティのあるルールを適応させます。......コロコロ...紫のボールが先にゴールへたどり着きました。紫のボールの方が急斜面になっていますので、スピードが早くなります。黄色のボールの方は斜面が緩いのでゆっくりとした速さで進んでいきます。この結果は現実的な自然なのものとなっています。紫のボールと黄色のボールが距離は同じといえど、斜面の関係から同じ速さにはなりません。★基本的に状態が同じものを除き、アニメーションを行う際は個々のUIパーツが加減速され、等速の動きは致しません。現実的な動きに合わせたモーションが推奨されます。仮想ではなく現実によせることで、よりユーザーの視点や動きに合わせた表現が可能になるそう。静止画の見え方だけではなく動的な動きの見せ方も新しさを感じますね。マテリアルデザインは奥が深いですね。次回もマテリアルデザインについて、項目をピックアップしながら全部を理解せずとも、デザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。コメントを残す8bitに学ぶUIデザインこんにちは。サービスデザインに関わっている、ネモトです。今回は、「8bitに学ぶUIデザイン」を考えてみました。「8bit」とは?「8bit」の言葉の響きに、あの古臭いやつね...とネガティブな想像する方もいると思いますが、心躍る方がいれば今回の内容について理解が早いです。昨日(2016/11/10)は往年の名8bit家庭用ゲーム機がダウンサイジングして発売されて話題となっており、今の情報過多の時代にある意味新鮮に受け止められているのではないでしょうか。今回は、そんな80年代に活躍したコンピューターゲーム機の画面表現力を、象徴的意味合いで「8bit」という用語に置き換えて使います。正しい解説については割愛します。8bitの表現をポジティブな目線で捉えると以下があげられます。1)扱う情報量が少なく、リソース比重が現在と比較すると「アイデア」に多く充てることが出来た。2)個人でも十分作業が出来た。3)低解像度/低発色数による簡素な表現であったため、利用者の想像力を掻き立てた。4)ハード性能不足による「制約」に挑戦する熱い想いが制作者/利用者共に生まれた。5)必然と「アイコン化/シンボル化」された画像は、今の時代でも新たなファン層を広げている。今回のテーマはここからが本題でして、ある意味何でも表現可能になった現在の情報デザインに、8bit時代の環境や表現、そして制限を「デザインルール」として充ててみようという記事です。前置きが長かったですね。「広い表現の幅」は、問題点の認識を遅らせたり、表現を複雑化してわかり難くする状況があります。開発案件では大きな問題になり、「悪いUI」を生む要因になっています。そこで、「8bit風デザインルール」の登場です。大げさですが、要はただのシンプルデザインレイアウトルールで、今流行りのワードを使いたかっただけですが...このルールを充てることで、適切なUIデザインに必然となります。8bit風デザインルールとは?今度こそ本題です。それでは「8bit風デザインルール」の説明が以下となります。何と今回は割愛します;※気になる方が多ければ別の機会に説明します。出来上がったワイヤーフレームがこちらシンプルな情報量になってますね。これからの工程はこれらの8bitルールで進めてみます↓6)カラフルな色なんて知りません!世の中白黒しか無い!前提として多すぎる情報量は余計なので、純粋に優先度や大きさ形の表現を検討する目的で、一切の有彩色を省きます。7)配置の微調整必要なし!グリッドに置くだけ!それでは、まずは実際の8bit機よりもさらに簡素なグリッドフォーマットを作ってみます。こちら厳密にはiPhone向けで、「44ルール」で作られています。横の解像度は320pxで一つのマス目はw36xh22で作られています。44ルールを使用してるのでその半分の22の高さで現実的なレイアウト再現させます。横軸に、ボタンなどのコンポーネントは横4個まで配置するルールを適用しています。左右にはマージンを既にとってます。それではマス目に単純に置いていきます。テキストは端末依存のズレも大きいので、マス目のラインにセンター置きします。大き目のフォントや複数行の文章の場合は別ルールを適応しましょう。1色だけ使用が許されるスペシャルな拡張機能「アクセントカラー(挿し色)」!単色だけでは華がないので、スペシャルアイテムとして1色だけ有彩色の投下が許されますので、ここぞな場所だけで使いましょう!割合は色MAPの2、3%でしょうか。いかがでしょうか?以上デザインルールでまとめたページがこちらです。サービスカラーを充てるとこんな感じです。実際は「サービス」自体を優先してしまい、色々な情報や広告、大人の事情、過度な色使いや装飾に埋もれてしまいがちです。振り返って原点に返り、理解しやすい表現を求めると、シンプルな方向性となり、シンプルになれば作業量も少なく効率的になり、結果、作業者にも、利用者にも、メリットが出てきます。