#📱 浏览器操作

#顶部工具栏

#地址栏

• 在此输入搜索查询或网址。
• 域名为白色，网址的其余部分为灰色。
• 网址左侧的小图标是页面信息按钮，显示访问历史和权限控制等。

#扩展按钮

• 在这里查看已安装的扩展。
• 也可以安装本地扩展。

#标签切换

• 长按返回主页，显示最近和推荐的标签。
• 支持标签组以更好地组织标签。

#菜单按钮

• 访问许多有用的功能。
• 顶部部分：页面操作（例如刷新、书签）。
• 底部部分：目的地（例如设置、帮助）。

#底部工具栏

#标签栏

#向上箭头图标

• 查看当前组中的所有标签。

#标签图标

• 一键切换标签。
• 点击"x"图标关闭标签。

#➕ 新标签页图标

• 点击打开"新标签页"，显示你最近访问和保存的网站。

#长按新标签页图标

• 长按以在新标签页中搜索复制的文本。
• 如果你复制的是网址，就会直接打开它。

#🔍 搜索图标

• 我们的手指大多停留在屏幕底部。无需费力去够顶部的地址栏，只需轻按搜索图标即可快速搜索或输入网址。

#长按搜索图标

• 长按以使用"动态书签"，轻松访问数千个操作！
• 阅读更多内容请访问动态书签。

#🦜 助手图标

• 点击鹦鹉图标打开功能菜单。
• 了解更多请访问 鹦鹉助手。

#手机返回键

• 按下返回键：
  • 如果有系统弹窗，则关闭弹窗。
  • 如果没有弹窗，则返回上一个页面。

#网页导航

• 前进：从屏幕右边缘向中心滑动。
• 后退：从屏幕左边缘向中心滑动。

#设置菜单

• 丰富的自定义选项 🎨
• 探索设置菜单，发现多种个性化 HuBrowser 的方式。

---

#💡 设计思考

#模仿 Chrome 以减少学习曲线

• 虽然胡浏览器其实是操作系统，和Chrome浏览器架构不同，但模仿Chrome的菜单有助于用户快速上手

#顶部工具栏

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

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

#为什么不放更多按钮？

• 较长的地址栏对于显示 URL 和搜索查询很重要。
  • 通过显示完整域名来帮助防止欺诈，避免 hubrowser.com.hugle.com 被误读为 hubrowser.com。

#标签切换为何使用静态图标？

• 静态图标允许 HuBrowser 缓存整个顶部栏以提高性能。
• 标签计数可能会增加不必要的心理压力——HuBrowser 的桌面级内存管理允许打开任意数量的标签，无需担心。
• 可以通过查看标签栏大致估计标签数量，或点击标签切换精确查看。

#底部工具栏

• 底部栏是执行操作的理想位置，我们的手指大多停留在屏幕底部。
• 由于每次键盘弹出时底部栏需要重新渲染，因此最好将频繁变化的元素放在这里。

#鹦鹉助手按钮的设计

• 在 UI 位置和功能上与菜单按钮对称：
  • 菜单按钮提供分层的、预定义的选项，遵循行业惯例。
  • 鹦鹉助手提供动态和个性化的体验：控制媒体播放、购物时比较价格、调用页面感知的 AI 等。

#手机返回键

• 为什么 HuBrowser 的返回键行为与其他 App 不同？
  • 在其他 App 中，返回键有时返回上一页，有时关闭当前页面，有时关闭整个 App，这种不确定性会让用户感到困惑。
  • 返回键又大又在底部，很容易误触——看视频、填表、支付或打游戏进行到一半时不小心碰到，如果跳回上个页面就要从头再来，会很糟心 😂。
  • 返回上个页面可以通过左滑手势实现，一样方便，而且不会误操作。

#总结

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