「什么场景下使用」

当你设计一个功能却面临互相矛盾的设计需求,找不到你能同时满足使用情境A
和使用情境B的方法,所以分开设计这两类情境的界面,让用户择一取用。

为什么会有设计矛盾:

  • 用户有自己的喜好的速度、视觉风格或其他
  • 用户在不同情境下,需要从不同的角度来审视信息。比如地图模式切换行政地图or卫星地图
  • 用户对某一任务主要工作是编辑,但也有可能他想从观看者的角度进行预览最后的成品。比如Sketch预览

「使用的原则或依据」

  • 可能会新增某些信息,也可能拿走某些信息,但核心内容应该是一致的。常见的是改变编排方式,比如Windows和macOS文件管理时,用户可以让文件以清单list、分格缩略图、树状目录菜单、走马灯等方式呈现。
  • 如果要简化界面,只保留基本的导航,其他一律删除
  • 切换开关不需要特别突出,但要能实现轻松切换
  • 如果用户退出了程序,记住上一次的视图设置并作为下一次打开的预设值

「类型与案例」

类别:移动软件内部视图切换

用在何处 在电脑端一页可以充分展示的内容,在移动端的小屏环境中无法全部显示,只能拆分成几种角度的视图提供给用户。

案例1:多角度检视

😄 Yelp在移动端提供了两个角度视图(商家分布全览、商家详情浏览),用户必须进行视图的切换才能从不同角度看信息。
image.png
😄 Yelp在电脑端显示空间充足的情况下,将列表和地图这两个视图的内容一起展示。这提供了更好的联动效果,选择列表中某一个商家,地图上就会突出显示这个商家地点。
image.png

😄 同样地iOS上的zillow也是类似设计。提供了地图和列表两种视图,用户必须切换才能看到不同角度内容。
image.png
😄 而在电脑端,想要买房子或租房子的人可以并排看两个视图内容,这让用户可以快速浏览大量的选择,以便搜寻和瞄准他们认为最有吸引力的房子。
image.png

类别:电脑软件内部视图变化

用在何处 用户需要从不同的角度来使用功能。

案例1:半成品检视

😄 A
pple Keynote为半成品提供不同的的检视。用户通常编辑一张幻灯片,但有时用户需要在虚拟桌面上查看所有幻灯片。(这里未展示第三种视图,即接管屏幕并实际播放幻灯片)
image.png
image.png
😄 Adobe Illustrator也为半成品提供不同的的检视。用户通常使用正常完全渲染的视图,但当有很多复杂且分层的东西,轮廓视图就很有用,可以让软件不易卡顿,因此加快工作速度。
image.png
image.png

「更多案例」

切换视图(更多案例)