業務向けについて
UI/UXの観点から見た業務系ツールを開発するときに気をつけたい20項目これが参考になるのでは！
引用などに気をつけて、デザインしよう！
- データ削除のConfirm
- ページング、検索結果件数、表示件数
- 並び替え
- 部分一致、前方一致の明記
- カタカナ英語を使わない（NEXT→次のページ）
- 用語の統一
- ×検索 ○検索する
- 操作できる部分でポインターの切り替え
- 余白
- クロスブラウザ対策
- IMEモードの設定
- メニューは全ページ共通のものをつける
- 軽く
- ログアウト
IMEモードの設定とかは、使っている立場だとけっこううざいんだけど、
やっぱりやった方がいいのだなぁ。
見た目について
目に優しいUIデザイン(1)これが参考になった。
＜目のつかれ＞
１．眼球の動き
動きを少なくするために
→配置に一定のルールを設ける（左上から右下が暗黙のルール）
→関連するものは近くに配置するとか？
２．情報の認識率
ピント合わせを少なくするために
→例えば、ポップアップWindow以外の後ろの画面にマスクをかける（FLEXみたいに）とか
→注目してほしいところに注目してくれるようにするってこと？難しいなぁ
→似たようなものを並べて発見しやすくするとか？
３．光量
瞳孔のコントロールを少なくするために
→ローコントラスト（白黒が最悪）
→チラチラしないってことかな、色を統一すればいいのかな？
→標準反射率は人肌（反射率18％）でｗなるほどと思いました。
らしい！勉強になります。
とりあえず、人肌色についてもうちょっと調べてみた。
反射率18の色を探そうと思っていろいろググってみたんだけど、
よくある、colorhexaとかのサイトには、反射率なる項目が無い( ；∀；)
で調べたら、
ここのサイトにLight Reflectance Value (LRV) なる一覧があったよ。
LRVの一覧がこれ↓
ColorEssentials LRV Spreadsheet
＃これなんだけど、ちょっと、HTML colorとのマッピングができないので、
＃スプレッドシートにまとめてみたよ→color-LRV
で、とりあえず18から24くらいだとこんな感じ
LRV Value = 18~24
結構暗いね。
あと、黄色系が無い！
黄色系は、反射率が70～80あるみたいで、目にやさしくないことがわかった。
オレンジに近い色でも60くらい。
んー黄色はよく使うけどなぁ。
Excel2007か2010からテーマの色に黄色が無いなーっと思ってたんだけど、
目にやさしくないからなのか！
まあ、こんな感じで、上にあげたようなモヤッとした色を採用すればいいのかなｗ
| Number | Color Name | LRV Values | HTML color |
|---|---|---|---|
| 0039 | Mandalay Road | 19 | #A46952 |
| 0045 | Sizzling Hot | 21 | #A67160 |
| 0051 | Caramel Candy | 24 | #B57866 |
| 0052 | Spiced Carrot | 19 | #A86A57 |
| 0058 | Angelic Choir | 22 | #B86D64 |
| 0064 | Lord Baltimore | 22 | #B86E69 |
| 0065 | Poppy Prose | 20 | #AF6661 |
| 0073 | Corazon | 19 | #A06C69 |
| 0080 | Abra Cadabra | 18 | #9A696C |
| 0087 | Cinnapink | 20 | #A76C76 |
| 0092 | Fresh Day | 24 | #B2777A |
| 0093 | Herald of Spring | 20 | #A86B6D |
| 0114 | Montrose Rose | 20 | #A07079 |
| 0120 | Summer's Eve | 23 | #AB766F |
| 0129 | Arrowhead | 19 | #936F64 |
| 0135 | Emerging Leaf | 24 | #9C7F74 |
| 0150 | Temptation | 20 | #987464 |
| 0157 | Dodge Pole | 23 | #A6795C |
| 0165 | Cavern Sand | 21 | #9A775C |
| 0171 | Golden Glove | 23 | #A37C5B |
| 0178 | Cupcake | 20 | #90765C |
| 0185 | Noble Crown | 20 | #907962 |
| 0191 | Dusty Path | 22 | #917D69 |
| 0199 | Sandy Shoes | 20 | #887B69 |
| 0206 | Thatched Cottage | 21 | #877D6C |
| 0213 | Coastal Fog | 20 | #84796C |
| 0219 | Camel's Hump | 21 | #877C6D |
| 0227 | Moonscape | 23 | #90836F |
| 0234 | Industrial Strength | 22 | #8B7F6A |
| 0241 | Prince Paris | 24 | #A17F5D |
| 0242 | Rare Happening | 18 | #92714F |
| 0256 | Crazy Horse | 24 | #A87E52 |
| 0263 | Country Charm | 19 | #92734F |
| 0269 | Sahara Wind | 18 | #90714A |
| 0277 | Golden Freesia | 19 | #8C7554 |
| 0291 | Rutherford | 20 | #917956 |
| 0298 | Brocade | 20 | #90784F |
| 0312 | September Gold | 21 | #927C50 |
| 0319 | Herald's Trumpet | 20 | #8E7A52 |
| 0325 | Welcome Home | 23 | #94825A |
| 0326 | Bambino | 18 | #83734E |
| 0339 | Ceramic Pot | 24 | #93866D |
| 0360 | Land Before Time | 24 | #908565 |
| 0367 | Chocolate Velvet | 20 | #857B5C |
| 0381 | Sonata | 21 | #868065 |
| 0396 | Wing Man | 18 | #7E7646 |
| 0403 | Tropical Twist | 21 | #897F4D |
| 0416 | Taffeta Sheen | 23 | #868766 |
| 0429 | Pendula Garden | 23 | #81876C |
| 0437 | Bowling Green | 20 | #788068 |
| 0458 | Malarca | 22 | #778575 |
| 0465 | Earthen Cheer | 20 | #6F8076 |
| 0479 | Stairway to Heaven | 18 | #6F7874 |
| 0486 | Paradise City | 18 | #67797A |
| 0492 | Polar Pond | 20 | #72807F |
| 0506 | Ocean Storms | 23 | #778692 |
| 0513 | Backwater | 18 | #70767E |
| 0520 | Slate Tint | 23 | #818590 |
| 0534 | Subtle Shadow | 24 | #858787 |
| 0542 | Captain Nemo | 24 | #878686 |
| 0549 | Emu | 18 | #7A7473 |
| 0555 | Ocean Frigate | 21 | #817C7D |
| 0563 | Vigilant | 21 | #867F74 |
| 0569 | Fireplace Mantel | 22 | #878074 |
| 0576 | Stormy Weather | 19 | #7C786D |
| 0583 | Billowing Smoke | 18 | #747770 |
| 0590 | Madonna Blue | 20 | #687C9C |
| 0591 | Blue Jacket | 18 | #627697 |
| 0598 | Caribbean Current | 20 | #617DAC |
| 0605 | Capri Isle | 18 | #5974B4 |
| 0612 | Parkwater | 20 | #547CBC |
| 0626 | Blue Depths | 18 | #65778D |
| 0640 | Skylla | 20 | #397EC3 |
| 0647 | Zenith | 20 | #567FA3 |
| 0654 | Peninsula | 19 | #4A80A1 |
| 0668 | Wish Upon a Star | 19 | #4E828D |
| 0675 | Blue Bliss | 24 | #0096AC |
| 0689 | Atmosphere | 21 | #478887 |
| 0703 | Mountain Meadow | 24 | #6E8D80 |
| 0710 | On the Nile | 24 | #55937A |
| 0725 | Melbourne | 19 | #578253 |
| 0760 | Green Knoll | 21 | #6D8654 |
| 0767 | Golf Day | 23 | #639149 |
| 0788 | Green Glow | 22 | #7E8547 |
| 0886 | Gold Estate | 23 | #9C814C |
| 0893 | Rich and Rare | 22 | #9B7D4E |
| 1005 | Flickering Flame | 21 | #AA734F |
| 1012 | Hampton Beach | 18 | #A16947 |
| 1019 | Orange Ballad | 23 | #B77449 |
| 1039 | Pretty Parasol | 19 | #AE674B |
| 1067 | Sweet Baby Rose | 19 | #BE594B |
| 1068 | Best of the Bunch | 19 | #BE5E4C |
| 1081 | Endless Possibilities | 22 | #DF4F47 |
| 1100 | Heart to Heart | 24 | #D56169 |
| 1101 | Mullen Pink | 18 | #C74B4A |
| 1144 | Temptress | 21 | #BF6471 |
| 1165 | Pink Parade | 24 | #B571A6 |
| 1171 | Teen Queen | 24 | #A9799D |
| 1193 | Crown Jewels | 22 | #9A73B0 |
| 1200 | Felicia | 22 | #957896 |
| 1206 | Screen Gem | 24 | #A07C9B |
| 1221 | Charming Violet | 20 | #907683 |
| 1249 | Purple Spire | 19 | #7974A0 |
| 1256 | Plum Preserve | 21 | #8276AC |
| 1263 | Medieval | 19 | #7273B3 |
| 1270 | Wind Star | 21 | #727AB8 |
| 1277 | Regal Azure | 21 | #737BB2 |
| 1291 | Dancing in the Spring | 20 | #82798D |
| 1298 | Queen of Sheba | 22 | #877B9B |
| 1305 | Victorian Violet | 18 | #82727D |
| 1312 | Southern Belle | 19 | #837382 |
| 1319 | Overlook | 18 | #717481 |
結構暗いね。
あと、黄色系が無い！
黄色系は、反射率が70～80あるみたいで、目にやさしくないことがわかった。
オレンジに近い色でも60くらい。
んー黄色はよく使うけどなぁ。
Excel2007か2010からテーマの色に黄色が無いなーっと思ってたんだけど、
目にやさしくないからなのか！
まあ、こんな感じで、上にあげたようなモヤッとした色を採用すればいいのかなｗ
0 件のコメント:
コメントを投稿