用户界面原理#

类似 Chrome 以减少学习曲线#

• 许多用户说，“哦，这只是 Chrome。”但它不是！
  • 使用与桌面 Chrome 相同的公共浏览器引擎及其 UI 资源。
  • 它是完全不同的架构：64 位，移植的桌面引擎，具有扩展、投射、多窗口支持和零跟踪等桌面功能。
• 必须尊重 Chrome 浏览器的高质量，90% 以上的市场份额，以及我以前同事的辛勤工作。

顶部的地址栏#

按钮#

• 扩展按钮：与桌面 Chrome 中的功能相同。
• 标签切换图标：
  • 我们更改了它，因为：
    • 静态图标允许 HuBrowser 缓存整个顶部栏以提高性能。
    • 动态渲染带有标签计数的图标过于复杂并影响性能。
    • 标签计数可能会增加不必要的心理压力，而不会提供有用的信息。
    • 允许用户专注于内容而不是标签数量。
    • HuBrowser 的桌面级内存管理允许根据需要打开任意数量的标签，并自动缓存标签。
    • 用户不需要因为打开了很多标签而感到压力。
    • 可以通过查看标签栏大致估计标签数量，或通过点击标签切换精确查看。
    • 动态标签计数图标是 Chrome 原创的，但许多人不必要地复制了它。
• 菜单：为小屏幕简化。
  • 顶部部分：用于页面操作。
  • 底部部分：用于目的地。

为什么不把地址栏放在底部？#

• 将地址栏放在底部会导致每次键盘弹出时底部栏渲染两次，从而抵消渲染缓存的好处。
• 长地址栏主要用于显示，会浪费宝贵的底部屏幕空间，最好用于用户操作。

为什么不放更多按钮？#

• 较长的地址栏对于显示 URL 和搜索查询很重要。
  • 通过显示完整域名来帮助防止欺诈，避免 hubrowser.com.hugle.com 可能显示为 hubrowser.com 的误导性 URL。
• 顶部按钮在小屏幕上更难按。

底部的标签栏#

• 底部栏是执行操作的理想位置。
• 由于每次键盘弹出时底部栏需要重新渲染，因此最好将频繁变化的元素放在这里。
• 标签图标：非常适合轻松切换标签。
• 新标签页和快速搜索按钮：非常有用。
• 鹦鹉助手按钮：在 UI 位置和功能上与菜单按钮对称。
  • 菜单按钮提供分层的、预定义的选项，遵循行业惯例。
  • 鹦鹉助手提供动态和个性化的体验：
    • 控制媒体播放、购物时比较价格、调用页面感知的 AI 等。

总结#

• 顶部和底部栏都设计为一个带有三个按钮的栏，提供对称性和一致性。
• 空间利用效率高，不会让按钮显得拥挤。
• 这是一个完美的平衡！😊