私は、いくつかの非常に長い名前とユーザー名を持つ既存のユーザーベースを持つクライアントを使用しています。 (つまり、Xx_fakenamehere_xX)それらを切り捨てたくない(現在のバージョンではすでに切り捨てられている)ため、これを解決する方法を見つけようとしています。
私はいくつかの戦略を考えることができます。関連するアイデアについては、 ユーザー名を短縮する必要がありますか? および 長いテキストラベルを切り捨てる-ベストプラクティス? も参照してください。
Wrap。名前が特定の長さを超える場合は、小さいフォントに切り替えて名前をラップすることができます。ただし、すべてのケースであなたを救うわけではありません。そのヘッダーには約2行のスペースしかないため、名前が長い人もいるからです。
スケール。名前が収まるようにfont-sizeを減らします。ただし、最小のスケールを使用することをお勧めします。これをラップ戦略と組み合わせることができます。しかし、いくつかの複雑なコードになります。
名、おそらく姓の最初の文字。表示された名前がユーザーの名前である場合、これで十分です。システム内の他のユーザーを識別するには、おそらく十分ではありません。フルネームを表示する方法(おそらくツールチップ)も必要です。また、名前のどの部分が名を構成するかを知る必要があります(たとえば、「名、姓」ではなく「名前」のみを要求した場合、名前を正しく分割できないと思います)。
トランケート。ある時点で、名前がどこにどのように表示されるかを見ると、切り捨てる必要があります。最後の文字を半分にカットするのではなく、正しく実行し、最後に省略記号を付けてください。
切り捨てますが、完全な名前を表示します ホバー たとえば、オリジナルの上に重ねられたオーバーレイを使用します。
私のエラー:この質問は、ホバーしないモバイルについてです! (@Sheffに感謝)また、切り詰められた名前に触れることはオプションではありません。指が展開された名前をほとんどの場合不明瞭にするためです。
名前の列の下にあるボタンを試してみます(そのような列が1つあると想定しています)。これをタッチすると、タッチしている間だけ、名前の列の幅が広がり、名前が完全に表示されます。
ユーザーはリスト内の名前を見たいと思うかもしれませんが、常にフルネームではないかもしれません。
また、ユーザー名列のwithとフォントサイズを定義するときは、文化の違いも考慮に入れてください。たぶんあなたの文化では、名前は "John Doe"のように短くて単音節ですが、スペインやコロンビアのような他の文化では、二重の名と二重の姓があります。
解決策ではありませんが、解決策を定義するのに役立ついくつかの考慮事項があります。
1)典型的な長さ
システムに含まれる名前について何か考えがありますか?その既存のユーザーベースを言ったので、このデータを分析すると、ある程度の洞察が得られますか? 「典型的な」長さがわかっている場合は、問題の処理方法についてより良い考えを与えることができます。
たとえば、人の名前しか見られないことが多く、同じ名前の人がたくさんいる場合、それは大きな問題です
2)ユースケース
名前の情報はどのように使用されていますか?多くの名前が並べて表示されていますか?または、1ページに1つのプロファイル名のようなものです。他の一意の識別子はありますか、それともタスクが何であれ完了するために名前は不可欠ですか?
名前が収まるように小さいフォントサイズを提案する明らかな解決策以外に、ユーザー名の隣にドロップダウンを使用して名を表示し、展開するとフルネームとその他の詳細を表示するという、推奨されるデザインがあります。表示したいと思います。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
これを行うサイトの例はGmailです(ただし、サインインしたメールIDを表示していることは認めます)