emacsでオリジナルのカラーテーマを作るときはbase16をもとにすると楽
見た目にこだわる上でオレオレカラーテーマが作りたくなると思いますが、
一からつくるとさすがにしんどいのでまずは本のテーマのカラーパレットを変更するぐらいにとどめておくといいと思います。
その時におすすめなのはbase16というものです。
mkaito/base16-emacs: Base16 for Emacs - GitHub
その名の通り16色のカラーパレットを使用しているのですが、
その部分を好きな色に変更するだけでバランスの良いカラーテーマになります。
;; 自分の設定 (let ((base00 "#2b303b") (base01 "#343d46") (base02 "#4f5b66") (base03 "#65737e") (base04 "#a7adba") (base05 "#c0c5ce") (base06 "#dfe1e8") (base07 "#eff1f5") (base08 "#E74C3C") (base09 "#E67E22") (base0A "#F1C40F") (base0B "#2ECC71") (base0C "#1ABC9C") (base0D "#3498DB") (base0E "#9B59B6") (base0F "#be643c"))
足りないfaceがあったり、
組み合わせ方を変えたい場合はさらにいじる必要がありますが、
まずはお気に入りのカラーパレットを見つけることから始めるといいと思います。
base16はvimも含めたくさんのエディタに取り入れられているので他のエディタを使用している方にもおすすめです。
「UI TALK SESSION/UIデザイン 認知心理学からのアプローチ@bizreach」に行ってきた
UI TALK SESSION ／ UIデザイン 認知心理学からのアプローチ@bizreach
内容
第1部 UIデザイン 認知心理学からのアプローチ
by 酒寄さん(デザインは30歳ぐらいから、フリーランスも経験。)
意識的にデザインをする、言語化大事。
認知心理学
情報処置の観点から生体の認知活動を研究する学問
人間工学
使いやすさ、人の感情への影響などを実際のデザインに活かす学問
人の認知
どのように見ているのか？
- 見たままそのままを見ているわけではない。
- 保有する情報により異なる認識
- 獣医と子供では猫を見る目が異なる。
- 経験と予測に基づいてみる。
- いつもどおりの動作じゃないと違和感がある
どのように読んでいるのか？
- 読むことと理解することは違う
- 英語を文字として読めることと理解できることは違う。
- 紙面とコンピュータの違い
- 文字の大きさ、フォントも重要
- 可読性、大きすぎてもダメ
- 長文に適したフォント、見出しに適したフォント
考えやすさ
- 情報は少なく->段階的表示
- 心的処理の負荷
- 認知(考える)＞視覚＞運動
フィッツの法則
ユーザーインターフェース設計における普遍的な法則。画面上で、マウスなどの入力装置を使ってものを指し示すときにかかる時間を計測するモデル。
メンタルモデル
世の中の人やものごとに関する前提
概念モデル
「物事」「現象」など仕組みの本質を抽出して、単純化した構造図
メンタルモデルと概念モデルが乖離していると使いにくい。
アフォーダンスの例 ピクニックに行った時、切り株があったら机代わりにしない？
※アフォーダンス=環境が人にあたえる機能の可能性シグニファイア アフォーダンスに近い。
デザイナーが意図して機能をユーザーに予測させる。 webサービスのボタン...シャドウをつけて立体的に。
↔ フラットデザイン
└シャドウがなくてボタンっぽくない。
なんでフラットデザイン?
->コンテンツに集中して欲しい。その他の部分の印象を弱くするため。- ヒューマンエラーの示すもの
ユーザーがこちらの意図しない操作をする
└こちらの意図が伝わっていない ->有益なデータ。ある程度パターン化できるのでデータを収集することが大切。
人は間違いを犯す前提
->致命的なエラー(データの全削除)を避ける - 同じUIに対してユーザーの評価が分かれる理由
- 人は何度か経験をすることで学習する
└ex.検索窓 - 世界観,好み
- 人は何度か経験をすることで学習する
第2部 事例紹介
Bizreachの事例
- careatreckキャリア診断の部分の回収
改善した点
− ステップ数の表示(今何を聞かれているのかの表示) - bizreachのモバイルサイト
スマホからのアクセスが多かったのでアプリ化した
改善した点
− アプリへの動線を変更(一番上に設置。コントラストも強く)
UIの正解は考えているだけではわからない。仮説を持って小さい粒度でテストを繰り返す。
心理学を学ぶ理由
(bizreach内では認知心理学を同じ書籍「インターフェイスデザインの心理学/インターフェイスデザインの実戦教室」で勉強中)
デザイナー同士だとわかる感覚を言語化して伝える。
デザインに根拠をもつ。
感想
デザイナーにしかわからない感覚を言語化する、デザインに根拠を持つ
あたりはほんとに大事だなと。
実際の取り入れ方は紹介された本を読んでみて考えます。
d3.jsのグラフをスマホ対応させるためのtips
今日思いついて比較てき汎用性高かったので。
たとえばd3.jsのグラフをレスポンシブ対応させる場合に、
windowサイズが欲しいわけですがその時に
<div id="aaa">
<svg>...</svg>
</div>
となっているとして
よくあるsvgコンテナを作る部分の
var margin = {top: 20, right: 20, bottom: 40, left: 40},
width = 600 - (margin.left + margin.right),
height = 400 - (margin.top + margin.bottom);
を
var parentDiv = document.getElementById(id);
var margin = {top: 20, right: 20, bottom: 40, left: 40},
width = parentDiv.offsetWidth - (margin.left + margin.right),
height = 400 - (margin.top + margin.bottom);
として
cssで
#aaa {
width: 80%;
}
とすればもうスマホ対応完了です。
もともとスマホ対応はCSSが得意なのでいっそそちらに任せてしまって、
jsでは値のみ取得するという役割分担できてる感じも素敵です。
d3.jsの散布図でアニメーションをいれる
d3.jsでアニメーションを使うときは
- アニメーション前の状態
- アニメーション後の状態
をそれぞれ分けてかき、アニメーション後の状態に移る部分で
その動きをeaseなどを使って表現します。
使えるアニメーションはこのあたりをみると参考になると思います。
d3/d3-ease - JavaScript - GitHub
D3.js で連続 transition アニメーション - 雑食性雑感雑記
以下のScriptだと散布図に上から点が落ちてきてboundするアニメーションになります。
// 描画(アニメーション前) svg.selectAll('circle') .attr({ 'cx' : function(d) { return xScale(d.votedRights); }, 'cy' : function(d) { return 0; }, 'r' : function(d) { return 0; }, 'fill' : function(d) { return"gray"; } }); // 描画(アニメーション後) svg.selectAll('circle') .transition() .duration(2000) .delay(function(d, i){ return yScale(d.aveAge); }) .ease("bounce") .attr({ 'cx' : function(d) { return xScale(d.votedRights); }, 'cy' : function(d) { return yScale(d.aveAge); }, 'r' : function(d) { return r; }, 'fill' : function(d) { return 'rgba(' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ', 0.6)'; } });
d3.jsで複数の折れ線グラフを書く
基本的には他と同様データをバインドして描画するのですが、
複数グラフを書きたいときは引数に配列をとって描画のところをループしてあげるとDRYにかけると思います。
function drawLine(id, datasets) { // コンテナ var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 600 - (margin.left + margin.right), height = 400 - (margin.top + margin.bottom); var svg = d3.select(id) .attr({ width : width + (margin.left + margin.right), height : height + (margin.top + margin.bottom) }) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // スケール var xScale = d3.scale.linear() .domain([20, 80]) .range([0, width]); var yScale = d3.scale.linear() .domain([0, 0.45]) .range([height, 0]); // 軸 var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom"); var yAxis = d3.svg.axis() .scale(yScale) .orient("left"); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") // ←x軸を下側に移動 .call(xAxis); svg.append("g") .attr("class", "y axis") .call(yAxis); // 描画 var line = d3.svg.line() .x(function(d){ return xScale(d.age); }) .y(function(d){ return yScale(d.rate); }); var colorArr = ['#E74C3C', '#3498DB', '#2ECC71', '#9B59B6', '#34495e', '#449248', '#652681']; for(var i = 0; i < datasets.length; i++) { svg.append("path") .datum(datasets[i]) .attr("class", "line") .attr("d", line) .attr("stroke", colorArr[i]) .attr("stroke-width", "2px") .attr("fill", "none"); } } // データ var Dataset1 = [ {age: 25, rate: 0.06633412364} ,{age: 30, rate: 0.1620942} ,{age: 40, rate: 0.1859880326} ,{age: 50, rate: 0.1567057713} ,{age: 60, rate: 0.1850232472} ,{age: 70, rate: 0.1450872925} ,{age: 80, rate: 0.09876733278} ]; var Dataset2 = [ {age: 25, rate: 0} ,{age: 30, rate: 0.07122905028} ,{age: 40, rate: 0.2346368715} ,{age: 50, rate: 0.3575418994} ,{age: 60, rate: 0.2402234637} ,{age: 70, rate: 0.09497206704} ,{age: 80, rate: 0.001396648045} ]; var Dataset3 = [ {age: 25, rate: 0.007227671657} ,{age: 30, rate: 0.0586990191} ,{age: 40, rate: 0.1338151781} ,{age: 50, rate: 0.2699019102} ,{age: 60, rate: 0.4212183789} ,{age: 70, rate: 0.1064532783} ,{age: 80, rate: 0.002684563758} ]; drawLine("#line", [Dataset1, Dataset1, Dataset3]);
