3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

UI > 線の見え方 > head2下の線は見えにくい

Last updated at Posted at 2016-01-24

記事を読んでいてまとまりがわかりにくかった

head1

head2

head3

head2の下の線が僕にはほとんど見えない。
head1の下の線は太さがあるため存在を認識できる。

記事を見ていて、head2が文書のテキストと同等に見えてしまう記事があり、どこで文書のまとまりが切れているかはっきりしなくて読みにくかった。その理由がこれだろう。

自分が同じUIを作る場合は、細い線は色を濃くする検討をするかもしれない。そのとき、head1下とのバランスは検討が必要。

この見え方はPCの解像度によるかもしれない。1024 x 768の解像度で見えていたものが、1920 x 1080では見えなくなる、など。

ヘッドの文字を少し左に表示できるだけでも見え方は良くなるが、制約があるかもしれない。

幸い右側のメニューでジャンプはできる(かつ章は把握できる)ので致命的ではない。

他の例

ヘッドの文字の位置が文書と同じ

LOEではヘッドを緑色の色つきにしている。ヘッドは1段階しかない。
http://loe.org/shows/shows.html?programID=12-P13-00042

Debate #2 and Energy

Zynq LinuxのWikiでは黒文字だがヘッドがまだわかりやすい。太字とフォントがQiitaとは違うのだろうか。ヘッドはゴシック体なのかもしれない。
http://www.wiki.xilinx.com/Zynq+Linux#x-Zynq Linux Kernel


(追記 2016/01/25) head2下の細い線が見えるモニタと見えないモニタがあると気づいた。
  • 線が見える
    • EIZO EV2750-BKR (2560 x 1440) on MacOS X 10.8.5
  • 線が見えない
    • RDT23IWLM, RDT232WLM (1920 x 1080) on Windows 8.1 pro (64bit)
    • RDT23IWLM, RDT232WLM (1920 x 1080) on Windows 7 pro (64bit)

ブラウザはいずれもChrome使用。

良いモニタでデザインした時には見えていて、ユーザ環境で見た時に見えない場合があるかもしれない。ソフトウェアを作る時の注意点かもしれない。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?