UIトレース#001
トレース実践結果
(左)アプリ画面 (右)トレースした画面
【トレース概要】
・ツール→Adobe XD
・トレース対象アプリ→Pinterest
【トレースでやりきれなかった部分】
・フォントの統一
→WindowsPCでトレースを行ったところ、UI画面で使われているヒメラギゴシックを使用できなかったため、フォントを統一することができなかった。ヒメラギゴシックはMacにデフォルトで入っているがWindowsで使おうとすると、数万払って購入する必要があるため、断念。(他の人どうやっているんだろう?みんなMac勢なのかな)
・写真の明度
→アプリ画面の写真は、オリジナル写真から明度などが調整されていた。その調整度合いがわからなかったため、目分量で調整せざるを得なかった。
(上)オリジナル写真
(左下)アプリ画面の写真 (右下)トレースした画面の写真
【トレースで気づいたこと】
・黒背景→画像で、画像を見やすくしている
→画像が色彩豊かなため、黒背景に対しての画像のコントラストで、見やすくなっている
・靄をかけた写真→白文字で、文字を見やすくしている
→【トレースでやりきれなかった部分】でも書いたが、掲載されている写真には靄みたいなものがかけられている。恐らく、明度・彩度を下げて、白い文字が映えて、読みやすいようにしているのだと思う。
・文字が灰色がかった白色である
→文字の色が#FFFFFFではなく、#EFEFEFになっている。
(上)#EFEFEF(アプリ画面の文字) (下)#FFFFFF
【次回トレース】
・もっとアプリの機能の特徴にも注目する
→アプリ画面のグラフィックな部分のみに注目して分析していたが、前後の画面とのつながり、タブの種類など機能の部分にも注目して分析したい
・できない部分は潔く諦める
→トレースの目的は、デザインの忠実な再現ではなく、デザインの目的、考え方を学ぶことである。今回は、フォントの一致や画像の明度の一致を目指して、かなり時間がかかってしまった。諦めるところは、スパッと諦めるようにしたい。
この記事が気に入ったらサポートをしてみませんか?