一点Microsoft Edge浏览器的设计细节思考

发布于 / 随笔 / 3 条评论

Microsoft Edge浏览器预览小窗口点细节设计思考

一直认为:好的产品设计应该来源于生活,而产品经理则是将现实中的点滴从逻辑上串联起来转换为软件语言,理想的结果应该是产品的最终设计带给用户的满意度等于或高于在现实中获得的满意度。
对产品设计来说,没有比注重细节更重要,尤其是在同类产品竞争日益白热化的阶段,当相似度和重合度越来越高的时候,能牢牢抓住用户的或就是源于细节的设计。

偶然打开了Edge浏览器,发现是这样的:

edge

第一感觉是一愣…顶部窗口咋这样,我想关掉这个小的预览窗【这种小预览窗的设计个人认为也有待考究..】,于是点击小窗上的“X” ,又一想不对啊,这个叉叉不是关闭窗口吗?于是我把鼠标移到了左侧,第一个按钮显示:【已搁置的标签页】这肯定不是关闭预览窗,继续移动到第二个按钮,显示:【搁置这些标签】,继续向右看,在“+”后有一向上的arrow按钮…这个隐藏按钮极不起眼。

分析

现在,我们来分析一下为什么在我想关闭小预览窗的时候会有些疑惑。
首先,按照如图Edge的设计,在顶部需要处理如下业务:

  1. 新建一个标签页
  2. 打开预览窗
  3. 关闭预览窗
  4. 搁置已打开的标签页
  5. 管理搁置标签页的入口
  6. 最小化窗体
  7. 最大化窗体
  8. 关闭浏览器

这里我们根据处理业务的API可以显著的将这些业务对应的功能按钮分为两个层级:

1.系统级:

  1. 最小化窗体
  2. 最大化窗体
  3. 关闭浏览器

2.应用级:

  1. 新建一个标签页
  2. 打开预览窗
  3. 关闭预览窗
  4. 搁置已打开的标签页
  5. 管理搁置标签页的入口

从这个角度来看,Edge浏览器的功能按钮设计严格按照这两个不同层级显著分开,每个层级都各自分布排列在一起,这种设计也符合工程设计思维。也是因为这样所以有了一开始的疑惑。
事实上【隐藏标签页预览】按钮不仅仅是对单个标签页的操作,而是对标签页组合的一个操作,它不应该在【新建一个标签页】按钮旁边,这会让用户产生疑惑。Edge的这个细节设计可能是考虑到放在左侧会影响美观,毕竟左侧已经占据了两个按钮位置[已经很糟糕了],放三个看起来更糟糕。

启示

那应该如何设计呢?

  1. 不更改现有逻辑,移动隐藏按钮到右侧最小化窗体前面,这种设计还能带来一个好处:能够增加这个功能的使用频率
  2. 合并搁置标签和管理搁置标签按钮,左移隐藏按钮,更改逻辑,比如:每次点击这个按钮都是对当前已打开的标签页组合的叠加搁置,点击后显示标签页搁置页面
  3. 合并搁置标签和管理搁置标签按钮,左移隐藏按钮,比如在没有搁置的时候显示加入搁置状态,有搁置的时候呈现二级菜单显示,这种设计会增加用户的操作步骤
  4. 移动按钮到左侧第三位置
转载原创文章请注明,转载自: LYLARES'S BLOG » 一点Microsoft Edge浏览器的设计细节思考

  1. avatar

    为什么美图素材404了,还能弄好么?站长,之前那些图片都挺好用的!

    1. avatar
      @誓言 美图素材?是这个么:https://image.lylares.com/
      1. avatar
        @lylares 是的,之前的那个404了