ニュース

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1か月前、Huawei Honmeng NEXTシステムのプッシュを受けて、すぐに実践体験を行いました。

アイファナー編集部のパートナーたちも順番に体験してきました。誰もがさまざまなブランドのメイン携帯電話を持っていますが、純血の紅蒙に対する評価はほぼ同じです。

かなりシルキー。

そして、ほぼすべてのソーシャルプラットフォームで「#红梦NEXT スムーズアンドシルキー」というトピックが見られます。私も同じ気持ちですが、いくつか疑問が残ります。

• 絹のような滑らかさはどのような過程で生まれるのでしょうか？
• Honmeng NEXT と前世代のシステムには大きな違いはありません。では、詳細な違いは何でしょうか。

1か月にわたる徹底的な経験を経て、私はファーウェイの新しいシステムの隅々までいくつかを発見した。おそらく、これらの目立たないほどの最適化が、滑らかな滑らかさの根源なのかもしれません。

そこで今日は、小さいものから大きいもの、点から面、静的なものから動的なものまで、各デザインの「タッチ頻度」に応じてHongmeng NEXTを見ていきます。

アイコンはとても重要です

画面はインターネットへの窓です。

この表現は十分正確ではないと思います。携帯電話上で実際に「ウィンドウ/チャネル」と呼べるものはアプリケーションであるはずです。

WeChat、Weibo、Xiaohongshu、TikTok...これらのうち 1 つ以上がほぼ 1 時間ごとにクリックされます。システムの他の部分と比較して、アプリ アイコンが最も頻繁にクリックされます。

アプリアイコンのデザインは、スキューモーフィズム - 平坦性 - スキューモーフィズムと平坦性の自由な調整という、いくつかの開発段階を経ました。

端的に言えば、シミュレーションと簡潔なスタイルの間を行ったり来たりしていますが、情報を正確に伝える + 統一されたスタイルという 2 つのデザイン コアにすぎません。

ファーウェイは、EMUI-HarmonyOS-HarmonyOS NEXTの第3世代システムを通じて、独自のアイコンスタイルを徐々に完成させてきました。

新しいアイコン スタイルは「ライト シミュレーション」と呼ばれ、次の 4 つの非常に明らかな特徴があります。

①アイコンの概要が簡潔で分かりやすく、一目で何をするのかが分かります。

② 半透明のぼかした要素を重ねて重ねてレイヤー感を表現します。これは、純粋な疑似実体化よりも視覚的な重みが軽く、純粋な平面スタイルよりも立体的です。

③ グラフィックスのエッジのハイライト処理を強化して全体の質感を向上させ、グラフィックスの核となる要素を強調表示して、目がより早くキーポイントを見つけられるようにします。

④アイコンのバックパネルの色にはわずかなグラデーションがあり、トップダウンの照明で描かれたオブジェクトは人間の目にはより自然に見え、強い色のグラデーションの衝撃や突然さを回避します。

上記 4 点のアプリケーション デザインにより、デスクトップ上のアイコン シンボルがより統一的に見えます。最も直感的に感じられるのは、これがグループ ディスカッションの結果ではなく、チームによって設計されたものであるということです。

もちろん、「軽い疑似オブジェクト」は一般的な傾向にすぎません。より本物に近い、立体的なスタイルを好む人も必ずいるので、別のスタイルであるエッジ シャドウに手動で調整することもできます。より重く、ディテールはより具体的で、レイヤーはより立体的で明るい色になります。

▲左がライトスキュアモーフィックスタイル、右がスキュアモーフィックスタイル。

スキューモーフィックなアイコンでも上記のデザイン原則に従っていることを見つけるのは難しくありません。システムアイコンにも統一されたトーンが採用されています。

コントロール センター、設定インターフェイス、システム アプリケーション ナビゲーション バーにはすべてシステム アイコンがありますが、通常はテキストとともに表示されるため、見落とされがちです。

これは、システム アイコンをデザインする際の最初の困難でもあります。それは、テキスト レイアウトとの一貫性をどのように保つかということです。ファーウェイのソリューションは、画像を特徴づけてシステムフォントとシームレスに接続できるようにすることです。

テキストの太さの変化に応じてインテリジェントに適応できるため、アイコンはさまざまなテキストの太さに柔軟に適応し、視覚的な一貫性を維持できます。

体験中に、Hongmeng NEXT のシステム アイコンには、よりダイナミックな効果があることも発見しました。スター フラッシュ、懐中電灯、Huawei Share、目の保護モード、省電力モードなどはすべて独自の効果を持っています。

新しいシステムは、出現、消滅、跳ね返り、拡大縮小、置換、パルス、および可変色の組み合わせを通じて、アイコンに 7 つの動的効果を設定します。

アイコンのデザインとシステムの流暢さとの間にはどのような関係があるのか​​と考えているかもしれません。

小さな観点から見ると、アイコン アニメーションもシステムの一部であり、動きの一貫性と一貫性は、大きな観点から見ると、システムの滑らかさに対するユーザーの認識に影響します。アイコンはシステム内で非常に頻繁に表示されます。ユーザーが触れる回数も非常に多いです。

統一された調和のとれたデザインにより、ページを前後に切り替えるとシステムの影が見えるようになり、「乱雑」を回避できます。

したがって、一貫した静的要素の設計がシステムをスムーズにするための基礎となります。

水のように

アプリケーションとシステムのアイコンを配置して、具体的な使用シナリオを見てみましょう。

フルスクリーン携帯電話のアプリケーションとシステム UI の適応は、「暴力的すぎる」と常に批判されます。標準的な画面比率のアプリケーションを大きく広くするだけで、大きな画面を最大限に活用してより多くの情報を表示することはできません。初期のタブレットでの怠惰な戦略と同じように、面積が 2 倍になります。

快適なインターフェイスは、見た目に関係なく、常にコンテナを完全に満たす水のようなものである必要があります。

この「水のような」適応ソリューションは、ファーウェイでは「レスポンシブ レイアウト」と呼ばれています。

ウィンドウ コンテナのサイズが変更されると、コンテナ サイズの変更に適応するためにインターフェイス要素が自動的に変更されます。

ファーウェイは、ページの背景、テキスト、アイコン、コンポーネント、その他の要素を同時にストレッチすることで、スムーズな移行とインターフェイスの適応を実現します。

さまざまなページ上の固定比率に従って、さまざまなコンポーネントを拡大縮小できます。

ページが変更されると、それに応じて UI のレイアウトも変更されます。メモはその好例です。

ランドスケープ モードでは、インターフェイスは 2 つに分割され、左側にディレクトリ バー、右側に 2 番目のメニューが表示されます。これにより、単一ディレクトリ表示内の過剰な拡張や過剰な空白が回避されるだけでなく、水平方向の画面スペースも最大限に活用されます。

より特殊な小型コンポーネントの適応に関しては、Hongmeng NEXT は、独自の形状と情報密度を変更することで、さまざまなサイズに適応します。

これは、デスクトップ ウィジェットの設計思想と非常によく似ています。デスクトップの空きスペースに合わせて、フォルダーのサイズを変更し、さまざまなサイズのサービス カードを使用します。

レスポンシブ レイアウト ソリューションは数多くありますが、基礎となるロジックはまったく同じです。

• 静水のように適応する
• 水の流れのように移り変わる

隅に隠されたこれらの適応ソリューションは、ソフトウェアとハ​​ードウェアの統合も促進します。

Honmeng NEXTの分割画面は非常に優れています。従来のソリューションでは、2 つの画面を分離できさえすれば、タスクは完了します。

しかし、これに基づいて、新しいシステムはまた、小さなウィンドウの角を画面の R 角と同じ曲率にトリミングします。

正直なところ、ウィンドウや画面のデザインはこのようにあるべきですが、Android システムはあまりにも多くのブランドやモデルに適応する必要があるため、完全に適応することが大きな問題になっています。

そして、これは純血のHongmengシステムによってもたらされる追加の利点でもあります。ネイティブシステムはこのブランドのモデルに対応するように設計されており、他のシステムを考慮する必要はありません。

2D 画面上で 3D アートを再生する

1 か月前、私に「Hongmeng NEXT の UI にはどのようなアップグレードがありましたか?」と尋ねられたら、

一つだけ言っておきますが、各所に「曇りガラス」の特殊効果レイヤーが追加されていますが、単一の要素を追加するだけではシステムの滑らかさを一段と向上させるのは困難です。

それを達成し、ユーザーに「スムーズ」であると認識してもらいたい場合、それは実際には体系的なプロジェクトであり、すべてを考慮する必要があります。 1 か月の経験を経て、私は純血の紅蒙のスムーズな運営を 2 つの部分に分類しました。

• 重ね着の感覚
• 力任せに遊ぶ

まず、すりガラス (ぼかし) エフェクトは、アプリの開閉、1 画面のマイナス、ドロップダウン検索、背景の閉じ、分割画面、分割の移動などのシーンで表示されます。線。

以前のシステムと比較すると、確かに多くのぼかし効果がありますが、同時にデスクトップ アイコンのアニメーションとスケーリングが追加され、インタラクション中の人間の目の焦点の合ったりぼけたりするプロセスをシミュレートできます。両者の複合効果の結果。

デスクトップの持ち上げ効果はスケーリングによってシミュレートされ、システム内の階層関係も直感的に反映されます。

アプリを開く、新しいタスクを作成する、画面のロックを解除するなどはすべて、上位レベルと下位レベルに属します。Hongmeng NEXT では、このタイプの切り替えに対していくつかのアニメーション効果を設定しています。

さらに、クロスレベルと同じレベル間のスイッチもあり、対応するアニメーションもあります。

階層関係を細分化し、さまざまな特殊効果を適用することで、レイヤーによるシステムの立体感を高め、トランジションの硬直化を図り、もうひとつは各トランジションにノンリニアアニメーションを組み込んで操作性を高めます。よりスムーズに、あるいはそのように思えます。

公式ウェブサイトのデモビデオは、流暢さに対するノンリニアアニメーションの効果をよく示しています。

ファーウェイの階層関係の最適化は、大きなページ遷移に限定されるものではなく、小さなアイコンにも焦点を当てています。

新しいシステムのいたるところで、次のワンショット アニメーションが見られます。

検索ボックスを強調表示したり、アプリのアイコンをズームしたり、ファンクション キーをオンまたはオフにしたりする場合でも、このシステムでは形状、色、変位、スケーリングなどの一連の方法を常に使用して強制的に遷移することができます。移行プロセスがより自然になります。

公式統計によると、トランジションはシステム内で最も高い割合を占めるダイナミック エフェクト タイプであり、60% 以上に達します。これは、Hongmeng NEXT を使い始めた後に多くの人がスムーズになったと感じる根本的な理由の 1 つでもあります。これは随所で見られます。

どこにでもある「虚ろな泉」

同僚が次のような例を教えてくれたのを覚えています。

今日の子供たちが画面を見たときの最初の反応は、リモコンを見つけることではなく、指でクリックしたりスライドさせたりすることです。

フルスクリーン時代において、新世代のデジタル製品との対話方法は完全に反復されており、ほとんどの家庭用電化製品ではスライドとタップが入力方法となっており、Z 軸プレスは廃れつつあります。

多くの人は、フィーチャーフォンの方が手になじみやすく、物理的なタッチが明確に確認できるため、ボタンを押し忘れるでしょう。

これは、タッチ スクリーンが批判される理由でもあります。つまり、フィードバックが不十分です。大手メーカーもモーター振動（触覚）や効果音（聴覚）などさまざまな手法を用いて、安心感のある物理的な動きを平面画面上に再現しています。

システム アイコンのアニメーションは、視覚的な確認を強化するものです。

Honmeng NEXT の「重力ダイナミック エフェクト システム」は、さまざまなダイナミック エフェクトを通じて移動中のオブジェクトの「力」をシミュレートし、インタラクティブな操作を生き生きとさせます。

ファーウェイは存在しないバネに力を具現化し、Hongmeng NEXTの隅々まで埋め尽くしています。

たとえば、ページをスライドすると、上下左右の境界線に「バネ」があり、境界線に到達すると非常に自然な反発効果が発生し、最後まで到達したことを知らせます。

ある程度の弾性スペースを残すことで、誤ってタッチしてしまうことを防ぎ、システムが敏感になりすぎて力を入れたり、ミリ単位の慎重な操作を必要としたりすることを防ぐこともできます。

また、随所に設けられた仮想スプリングにより、広範囲のスムーズな動作をある程度促進することができ、一度の動きで全身が連動し、実際のリバウンド効果に近い効果が得られます。

物理世界のモーション効果を復元すると、ユーザーの学習コストが削減され、生活の「こうである」習慣に従って操作することで、新しいデバイスやシステムをすぐに使い始めることができます。

ジェスチャー操作やHongmengシステムにすでに慣れている人にとって、手によるインタラクションは最も重要です。

Huaweiの公式開発者Webサイトには次のような文章があります。

アニメーション効果は常に操作に重点を置き、ユーザーの心理的期待に準拠する必要があり、オブジェクトの動きは現実世界に準拠する必要があります。

プロダクト エンジニアは、3 次元の世界のあらゆるものを 2 次元の画面に圧縮しようと全力を尽くしますが、プロダクト マネージャーは、2 次元のディスプレイ上で現実世界を模倣するために頭を悩ませます。

▲写真出典：rauno.com

最終的な分析として、インタラクション デザインを徹底的に研究することは、実際に私たち自身をより深く理解することにつながります。どのシナリオにスライディングが必要か?トランジション中に特殊効果を配置するにはどうすればよいですか? 99% の操作を 1 本の指でカバーするにはどうすればよいでしょうか?

あなたが私と同じで、ボタンマシンから段階的にフルスクリーンに切り替えてきた場合、携帯電話のインタラクティブシステムが実際には私たちにとってより適していることを見つけるのは難しくありません。考えたり勉強したりする必要はほとんどなく、ただ使用するだけです。それ。

システム相互作用の存在に気づいていないとき、それはシステムに対する最大の褒め言葉です。なぜなら、上記のすべての詳細な考慮事項により、製品は私たちの体の自然な延長になっているからです。