it-swarm.cn

有没有一种“不错”的方式来显示导航图标,以使它们不会干扰UI?

我有一个小型桌面应用程序,它可以扫描音乐文件夹并随机选择要播放的专辑。第一个版本是WinForms,在专辑封面的两侧都有“上一个”和“下一个”按钮,当同一位艺术家有更多专辑时,这些按钮将被激活。

enter image description here

我对此界面不满意,因为按钮占用了太多空间。

我正在使用WPF重写应用程序,并且正在寻找一种更好的方法来指示同一位艺术家还有其他专辑。我尝试过在封面上显示按钮,并且仅在鼠标滑过它们的位置时才显示它们,但我对结果不满意,主要是因为没有迹象表明存在这些选项。

我在 Brian Stevens Photography 网站上发现了一个巧妙的窍门,在该网站上,光标在图像的每半部分上分别变为“ +”和“-”以指示导航,但是我也单击图像来播放那张专辑,所以如果我想自己使用它,我将不得不采用这种方法。

有没有更好的方法,还是轮播或Coverflow控制此方法?

有关更多背景知识,请阅读我的 blog post

10
ChrisF

这里基本上有2个想法,第一个是显示小圆圈,中间突出显示的是当前页面/相册,当您单击箭头时,它将突出显示下一个/上一个。这使用户可以了解给定艺术家可以使用多少张专辑。

(重新使用Matt Lutze优秀ASCII绘图))

[Settings]  [Random album]  [Info]

 {                              }
 {                              }
 {            Cover             } 
 {                              }
 {                              }

 <<       o o o * o o o        >>

当一位艺术家的专辑超过6个时,可能会显示下一个专辑,而该专辑仅显示全部专辑中的专辑1。

[Settings]  [Random album]  [Info]

 {                              }
 {                              }
 {            Cover             } 
 {                              }
 {                              }

 <<          1 of 10           >>

这样,元素仍然存在,并显示一个可视(或文字)队列,其中还有更多要查看/收听的内容。

Random Idea:当然,我真的很喜欢单击Cover Art并能够查看内部的想法,在这种情况下,它只是显示该专辑中可用歌曲的列表。他们可以选择播放特定的歌曲。

[Settings]  [Random album]  [Info]

 {   1. Song Names here       ^ }
 {   2. Song Names here         }
 {   3. Song Names here         }
 {   4. Song Names here         }
 {   5. Song Names here       v }

 <<           1 of 10          >>
9
Drofnas

由于视觉不和谐

  • 它们是圆形的,图像是方形的。
  • 它们具有强烈的3D发光效果,并且图像平坦

  • 他们在上方和下方浪费的空间是未使用的浅灰色,没有使用与按钮类似的装饰,因此也与按钮不协调。

狭窄的矩形平面按专辑封面的整个高度,在中间使用堆叠的“>”(或“ <”)可以解决这三个问题,但是封面仍然是分隔导航控件。将导航控件放在一个可视块中会更好地工作。


这是老式的解决方案(左)和更现代的解决方案(右)。

按钮的样式(斜角/圆角/阴影/您有什么用)应与样式匹配用于封面艺术框架。

enter image description here

左边的一个优点是您可以轻松地增加左右按钮的大小,具体取决于您想给它们提供多少房地产以及希望它们被击打的容易程度。

右侧有一个鱼眼微型旋转木马。如果未激活缩略图,则需要对缩略图进行旧照片处理,以免分散封面的注意力,并且在尺寸上您别无选择。

左侧简单有效,右侧则具有更多的视觉效果。我更喜欢左边。您可能会猜出我的音乐爱好来自哪个时代。

5
James Crook

作为另一项建议,Apple的CoverFlow在封面插图下方使用了水平滚动条,以允许用户在封面上进行擦洗。

优点:

  • 可以快速擦洗艺术品。可能不是您的应用程序所必需的。
  • 比例尺可以与大量艺术品一起使用。
  • 通过前后擦拭可以进行良好的随机搜索。

缺点:

  • 不明显有多少个项目。
3
ICR

仅仅因为UI元素不是立即显而易见的,并不意味着它是一个错误的选择。我肯定会采取以下措施:单击护盖的右侧前进一个步骤,然后单击左侧返回。 (假设这仅适用于从左到右的语言?)

我只建议<和>而不是照片网站的+和-符号。而且我不会让它们变形或跟随光标,而是将它们放在右中和左中。

您可以尝试在中间单击以播放/暂停专辑。

一旦找到它,这种几乎不可见的用户界面就一样容易使用,并且它看上去比将按钮挂在一个单独的按钮(通常)上要好得多。美学上的极端做法是将所有UI元素合并到封面预览中的不可见元素中。这样,当鼠标没有悬停在封面(或歌曲标题)上时,便可以看到它。也许这会为您的应用程序工作,也许不会。

3
Scott Newson

有趣的问题,以及既有答案的一些优点。

关于无处不在的控件与隐藏的控件:我建议您将控件放在始终可见但不会在视觉上分散注意力的控件。绿色,蓝色,图案;所有这些都有可能至少会分散注意力。我通常同意Nir在这里使用简单的箭头或“大于”符号

<< {图片} >>

与图标/​​按钮。

我也将建议扩展到您的顶部图标,也许建议让该概念在视觉上架起桌面应用程序/ Web应用程序的边界:

[Settings]  [Random album]  [Info]
              Title
   {                          }
   {                          }
<< {          Cover           } >>
   {                          }
   {                          }

通常,我倾向于使封面艺术成为界面中的主要对象。顶部是一排细薄的文本链接按钮,标题是封面的大图,两侧各有狭窄的后退横条。或类似的东西。

无论您如何摇摆,我至少建议不要使用新颖的动态指示器,例如不断变化的鼠标指针图标。当指针改变时,许多人会感到害怕或紧张。根据我的经验,用户希望他们的指针在可预测的动作之后做可预测的事情,而不会使他们感到惊讶。

整洁的项目,感谢您的讨论。我很好奇听到别人的想法。

2
Matt

作为回答支持电子邮件的人,我可以告诉您,如果用户界面元素不是立即显而易见的,您的用户群中有很大一部分将永远找不到。

他们也永远不会阅读文档或任何弹出消息。

一个功能应该很明显(甚至连一个按钮都不够明显),或者可以在不打扰用户的情况下正常工作(红色花括号下划线拼写检查器就是一个很好的例子,您不必找到它,它就在那里)。

您可以重新设置按钮的样式,使其不会太大,以至于它们更多地融合到背景中,例如,如果您将按钮替换为两个没有较重按钮框架的小箭头,它们将不会伸出来在仍然向用户发出信号的同时,还有更多可用的东西。

2
Nir

在网上寻求指导。这是大多数用户居住的地方,它指导着用户界面的期望。查看热门网站以了解您的目标受众,并查看它们如何管理导航。浏览音乐类似于浏览照片,因此请向报纸和杂志网站寻求指导。

这种导航通常是通过图形上方的小按钮或鼠标悬停在上方的透明按钮来完成的。如果您设计的用户界面设计为使用户单击专辑封面来收听,则他们将足够快地发现透明按钮。

1
David Veeneman