设计案例研究:将网站搬上Windows应用商店

标签: APP与开发者 Windows 专题 特别报道 Metro App | 发表时间:2012-11-10 10:38 | 作者:绍森
出处:http://www.wpdang.com

几十年来,设计网站已成为常规惯例。对于 Windows 8,设计人员和开发人员可以使用他们熟悉的 Web 技术(包括 HTML5、级联样式表 Level 3 (CSS3) 以及 JavaScript)来构建 Windows 应用商店应用。下面,我们将探讨如何显示网站的功能从而使 Windows 应用商店应用更出色,并介绍一些使用 Windows 8 平台功能提供附加值、个性化以及更丰富体验的方法。

食品运输车网站和应用本文的基础是食品运输车网站,该网站允许用户浏览他们区域中的食品运输车,使用最新新闻保持更新内容并且提供食品运输车的用户评论。在后面部分的面向设计的案例研究中,我们探讨了重构网站核心功能并以 Windows 应用商店应用的形式对其进行扩展的方法。

我们迁移到 Windows 应用商店应用的目标是突出网站的最佳功能,同时保留网站的核心功能。我们确定 Windows 应用商店应用是允许用户浏览和查找附近运输车的最佳应用。下图显示了食品运输车网站 UI 的结构。下面,我们将介绍如何将这些 UI 组件转换为 Microsoft 设计风格。

  1. 布局和导航
  2. 命令和操作
  3. 合约:搜索、共享以及设置
  4. 触摸
  5. 缩放和视图
  6. 通知

布局和导航

聚焦内容,而不是版式

多数网站都使用已为大家接受的布局模式。主页设计包含支持导航(页眉和页脚)的 UI、实用程序组件(登录、搜索)以及队其他内容(博和新闻)的访问。这些都是常用的网站元素,但这些元素会使用户不关注最重要的任务:查找附近的食品运输车。设计 Windows 应用商店应用时,我们去除很多这样的 UI 和内容,因为它们未直接与应用的主要功能相关。

网站:

  • 网站具有常见的两列式布局模式:主要内容在左侧,其他内容在右侧。
  • 网站的焦点,即食品运输车,只占用了大约屏幕的三分之一。

Windows 应用商店应用:

登录页面上的所有空间都用于显示此应用的出色功能:查找附近的食品运输车。

示例:突出显示网站主页以及 Windows 应用商店应用主屏幕上的内容。

网站和 Windows 应用商店应用都在主页上显示了特色的食品运输车和类别。 由于网站上的空间有限,因此每个食品运输车类别都由一个图片表示。 当设计 Windows 应用商店应用主屏幕时,我们选择将更多食品运输车信息放在顶层,用于为用户提供更多上下文并且创建更吸引人的界面。

网站:

每个食品运输车类别都由一个图片表示。用户必须转到另一个页面才能看到该类别中的更多运输车,然后选择要查看详细信息的运输车。

Windows 应用商店应用:

每个类别都由一组图片表示,因此用户可以快速确定附近有哪些指定类别的运输车。用户可以从主屏幕直接转到运输车。

遵循 Windows 应用商店应用剪影并使用网格对齐

典型 Windows 应用商店应用剪影的最公认特性就是屏幕区域都专用于内容,上边缘、下边缘以及右边缘都留有很多空白。左边距以及从右侧的浏览项目承担视觉提示作用,内容横跨左右两侧。上边距和下边距提供可固定内容的视觉围栏。页面上的组件对齐到网格,以表现层次结构。

示例:Windows 应用商店应用上设计的食品运输车应用轮廓和网格。

红色基准显示页面上的每个元素如何对齐到网格(请注意,每个单元为 20 个像素)。

A.在整个应用中上边距和左边距一致。
B.我们使用一致的边距来分隔不同的食品运输车类别,如“特色运输车”、“我附近的运输车”和“亚洲运输车”。
C.我们使用一致的边距来分隔运输车类别中的图片。该边距小于食品运输车类别边距,目的是表现页面布局层次结构。
D.每个食品运输车类别的组标题也对齐到网格。

使用直接操作进行导航

在网站上,顶部导航栏和页脚的导航元素是重复的。导航元素是始终显示的并且始终位于视图中。我们在 Windows 应用商店应用中设计了与内容直接集成且用户不需要时将其隐藏的导航元素。

示例:导航到网站和 Windows 应用商店应用上的特殊运输车。

网站:

A.用户导航到网站上的不同类别页面,以查看全部运输车类别。
B.然后,用户选取一个类别(例如“烤肉食品运输车”)并进入该类别。
C.用户最后可以从所选类别中选择一个运输车。

Windows 应用商店应用:

A.主屏幕包含一个由各个内容组组成的中心页面:特色运输车、我附近的运输车以及类别视图。
B.用户可以使用触摸在任一方向平移,以查看位于主屏幕上的不同食品运输车类别。
C.由于每个中心都重点介绍类别中的几个运输车,因此用户可以点击某个运输车直接转到该运输车的页面,或者他们可以点击类别组标题文本(如“亚洲运输车”)来进入类别页面。

命令和操作

在应用栏中保留应用命令和操作

网站常用的临时命令,可以以用户操作的形式显示在内容中。例如,在我们的网站上,每个食品运输车页面都包含一个链接,通过该链接用户可以上载给定运输车的照片。这些上下文中的操作在每个运输车页面上都是重复的。

按照 Windows 应用商店应用设计的“内容先于版式”方法,我们将所有上下文操作放置在 应用栏中,将常用的控件放置在系统中。此外,常用命令位于边缘附近以方便访问使用。通过这些设计原则,应用设计图面便不会因控件而显得杂乱,而且无论用户所处位置如何,都可以从屏幕底部或顶部轻扫应用栏查看相关操作。所有 Windows 应用商店应用都可以使用应用栏作为其命令。由于用户将熟悉应用栏交互,因此这样也会增加应用的可用性并且使整个系统看起来更有凝聚力。

示例:将食品运输车照片上载到网站和 Windows 应用商店应用中。

网站:

  • 临时命令。用户操作位于内容之中。

Windows 应用商店应用:

  • 默认情况下,应用栏处于隐藏状态,目的是为用户提供沉浸式体验。
  • 用户可以从屏幕底部或顶部轻扫来访问上下文操作。操作因用户处于应用中的位置或所选择的内容而有所不同。

合约

食品运输车网站的全局操作(如搜索和登录)遵循常见网站惯例。这些操作永久地固定在网站的右上角。设计 Windows 应用商店应用时,对于这些全局操作,我们不包含自己的 UI。而是使用系统的内置功能,包括搜索、共享和设置合约。由于这些 UI 组件并不始终位于屏幕上,因此应用画布更加干净,从而为内容提供了更多空间。

使用“搜索”合约集中搜索体验。

与大多数网站一样,食品运输车网站在每个页面上都有一个搜索框,并且搜索范围仅限该网站。这意味着用户必须首先进入食品运输车网站才能进行搜索。

设计 Windows 应用商店应用中的搜索体验时,我们使用了搜索合约。因此,屏幕上没有永久的用于搜索的版式。“搜索”超级按钮提供对搜索功能的访问,并且用户可以在应用的任意位置调用或从系统中的任意位置调用该按钮。

示例:使用网站和 Windows 应用商店应用搜索食品运输车。

网站:

  • 在网站上始终显示搜索框。
  • 显示搜索结果时,仍然提供所有网站版式。
  • 用户始终需要首先进入网站,然后才能搜索食品运输车。

Windows 应用商店应用:

  • 用户可以通过轻扫边缘来显示超级按钮并选择搜索,从而在应用的任意位置执行搜索。
  • 默认情况下,选择食品运输车应用,因为用户当前位于此应用中。当用户开始键入时,应用在搜索窗格中提供搜索建议。这样用户便可以快速查看哪些术语产生了搜索结果。用户提交其查询(例如“烤肉运输车”)之后,应用显示搜索结果视图。
  • 搜索结果视图非常干净并且仅用于搜索结果,没有不需要的版式。

示例:在应用之外搜索食品运输车(仅在 Windows 应用商店应用中可用)。

除了应用内搜索之外,用户还可以从应用之外进行搜索,方法是选择食品运输应用作为搜索目标。在此处的示例中,用户正在从开始屏幕搜索“烤肉运输车”。用户在搜索窗格中点击应用列表中的食品运输车应用,这会启动该应用并且完成搜索查询。由于该食品运输车应用针对查找附近食品运输车进行了优化,因此用户只需点击一次即可完成搜索并且找到其所在区域的烤肉运输车。

使用“共享”合约可访问更多目标以及你关注的联系人

在食品运输车网站,用户可以通过电子邮件、Facebook 或 Twitter 共享有关特殊食品运输车的信息。共享选项经常在网站的很多地方都可以找到,它们靠近可以共享的内容。

有了 共享合约,共享方案确实点亮了我们的 Windows 应用商店应用。使用系统内置的“共享”超级按钮,不再需要在整个应用中显示共享按钮。用户可以始终在统一的位置找到共享选项,而不管他们使用什么样的应用。这种改变简化了设计和开发,原因是不需要连接用户可能希望使用的每个服务。将应用与“共享”集成之后,便与实现共享合约的每个 Windows 应用建立了连接。而不需要处理外部 Web 服务的 API 更改。

示例:共享食品运输车照片。

网站:

  • 每个共享服务都有自己的按钮。
  • 共享按钮遍布整个网站。

Windows 应用商店应用:

  • 所有 Windows 应用商店应用中所有共享选项的位置都是一致的。用户可以在应用中的任意位置调用共享。
  • 用户选择共享服务时,目标应用可以自定义 UI 窗格和品牌。

示例:仔细查看“共享”窗格。

Windows 应用商店应用:

  • 已作为共享目标实现的任何应用都会出现在“共享”窗格的应用列表中。例如,Socialite、Tweet@Rama 或邮件。
  • 用户可以共享应用支持的各种内容类型。例如,如果用户愿意,可以共享链接、照片或将信息保存到笔记应用。
  • 常用的共享目标显示在顶部,以帮助用户快速完成共享工作流。

使用“设置”窗格

食品运输车网站具有一组实用功能,如“关于我们”、“登录”、“联系信息”以及“新闻稿”。这些功能根据常用的 Web 设计模式占据特定的屏幕区域,因此用户可以轻松找到它们。但是,它们分布在网站的不同区域上。配置和管理任务不是该 Windows 应用商店应用的焦点。使用 设置合约及其统一入口点,用户无需记住这些应用管理功能的位置便可以在需要时可靠地调用它们。

示例:在网站和 Windows 应用商店应用上设置选项。

网站:

  • 诸如登录、关于我们、联系信息以及新闻稿等实用功能位于网站的不同区域。

Windows 应用商店应用:

A.设置选项全部位于“设置”窗格中的一个位置中。 B.用户可以在不离开其当前上下文的情况下在应用中的任意位置登录。 C.使用通知设置,用户可以指定他们希望收到的通知类型。这将替代网站新闻稿并且为用户提供了应用的实时信息。

使用文件选取器来访问各种位置的文件。

食品运输车网站鼓励用户上载其区域中运输车的照片。在 Windows 应用商店应用中使用 文件选取器可轻松复制该功能。文件选取器是一个全屏对话框,使用该对话框,用户可访问本地电脑、连接的存储设备或者通过 HomeGroup 连接的其他计算机上的文件和文件夹。用户也可以访问参与“文件选取器”合约的应用中的项。

示例:从本地文件系统上载食品运输车照片。

Windows 应用商店应用:

  • 用户点击应用栏中的“上载”按钮即可打开文件选取器 UI。这是在用户希望访问文件时都会看到的统一的 UI 图面。
  • 点击“文件”标题,用户会看到其中包含所有可用的文件位置的弹出窗口并且会导航到某个文件文件夹。
  • 用户从文件夹和位于左下角的缩略图列表(显示所选择的照片)中选择显示多个照片。

触摸

对水平布局使用水平平移

请记住,食品运输车网站和 Windows 应用商店应用都是使用用户交互方法和人体工程学设计的。该网站主要是针对鼠标交互设计的,因此每个页面上的内容都是垂直布局的,用户可以使用他们的鼠标快速轻松地滚动到他们所需的内容。Windows 应用商店应用主要是针对触摸设计的,因此使用横向布局,例如大多数台式机和便携式电脑。水平布局优化了屏幕空间的使用。而且,对于用户来说,通过触摸在横向设备上进行水平平移比垂直滚动更舒适、更自然。

示例:在网站上和 Windows 应用商店应用主屏幕上导航内容。

使用横向滑动来选择对象

网站上的常用惯例是在多个对象旁边使用复选框,以指示多个选择。对于 Windows 8,用户可以通过垂直于平移方向在对象快速轻扫来选择列表或网格中的对象。选择对象时,会自动显示应用栏,以显示与该项相关的命令。

示例:在主屏幕上选择多个要固定到“开始”屏幕的食品运输车。

在应用登录页面上,用户轻扫以选取运输车时,会显示包含“添加到收藏夹”命令的应用栏,可以使用该命令将所选运输车标记为书签。该手势是可逆的,这样便使得在 Windows 应用商店应用中进行选择更加高效,从而用户可以放心浏览该应用。

使用收缩和拉伸来进行语义缩放

使用收缩和拉伸手势,用户可以快速浏览较长的内容列表。Windows 应用商店应用的登录页面显示了很多分组,包括特色运输车、我附近的运输车、亚洲运输车、烤肉运输车以及早餐运输车。用户可以在其上进行平移来查看更多内容,或者使用快速跳至特定部分的 语义式缩放。使用语义缩放控件,收缩即可缩小内容,以便全部显示当前视图中的所有部分。然后,用户便可以快速跳至列表的开头、结尾或者特定部分。缩小视图可以进一步设计为显示每个部分中感兴趣的内容或者有关某个部分的元信息(如每个类别中运输车的数量)。可以将它用于导航,而不是将导航元素持久保存在应用画布上。

示例:使用语义式缩放跳转至特定运输车类别。

网站:

  • 用户必须导航到不同的页面才能看到所有类别。

Windows 应用商店应用:

  • 用户可以在主屏幕上使用语义缩放来轻松查看所有类别,而无需离开该屏幕。
  • 在语义缩放视图中,每个类别都由一个图片来表示。通过主屏幕即可提供所有类别,而无需进行平移来查看完整列表。

缩放和视图

为方向和屏幕大小设计自适应布局

我们设计的食品运输车网站布局非常灵活,足以适应不同的设备、屏幕大小、分辨率以及方向。与流畅的网站设计类似,Windows 8 计算机的范围从小型仅触摸的平板电脑到大型的便携式电脑和台式机。对应用进行设计,以便它在支持 Windows 应用商店应用的很多设备上看起来更出色,如果我们希望应用涉及更多客户,则这一点至关重要。

你可以对 Windows 应用商店应用开发应用很多网站设计原则。使用内置模板和控件,可以使在横向视图和纵向视图之间来回切换更加轻松便捷。当方向更改为纵向时,会在每个类别中显示更多运输车。同样,应用也会为了利用高分辨率监视器的其他屏幕空间在每个类别中显示更多运输车。

示例:不同设备上的食品运输车网站和 Windows 应用商店应用。

网站:

  • 食品运输车网站针对不同的屏幕大小和构成因素来调整布局并进行重排。

Windows 应用商店应用:

  • 采用纵向模式、横向模式以及在高分辨率屏幕上的 Windows 应用商店应用。我们使用额外的空间来显示更多内容。

使用辅屏视图来吸引用户

Windows 8 允许用户通过对齐应用旁边的另一个应用来执行多个任务。辅屏视图是提高应用在屏幕上的时间,从而使用户使用时间较长的最好方法。用户通过操作两个应用之间的分隔线可轻松切换主屏和辅屏,因此在调整大小时保留上下文非常重要。用户不应因调整应用大小而丢失应用状态。

示例:填充视图和辅屏视图中的 Windows 应用商店应用主屏幕。

  • 左:位于填充视图中的食品运输车应用。用户可以并排使用天气应用和食品运输车应用。
  • 右:在辅屏视图中,用户垂直平移即可获得更多内容,因为沿着较长的边缘进行平移会更舒适。这与完整视图中的水平平移(也针对沿着较长的边缘平移进行了优化)不同。

 

通知

使用磁贴进行持续和动态更新

食品运输车网站的用户可以访问网站来查看有关他们所在区域的新食品运输车或更改位置的食品运输车的新闻和博客。该网站还允许用户获取 Facebook 和 Twitter 上的食品运输车公告。但是若要实现这一目的,用户必须进入该网站才能查看新闻或注册获取更新。只有在用户断开关联内容后才能看到某些更新。

将此功能转换为 Windows 应用商店应用时,我们使用了磁贴和 Toast 通知为用户提供根据他们的需求定制的最新信息。开始屏幕上显示的磁贴即为 Windows 应用商店应用的大门。通过活动并提供为用户定制的全新个性化内容使用户感觉应用充满活力,因此用户更愿意使用此应用并且从中获得价值。即使应用未运行,也会继续显示此内容。

网站:

  • 网站上最新新闻部分显示运输车的最新位置。
  • 网站上的博客列出了新的运输车并且提供了有关食品运输车何时将处于指定邻域的提示。

Windows 应用商店应用:

  • 食品运输车应用的主要磁贴显示用户附近有哪些食品运输车以及多久运输车会停在该位置。即使食品运输车应用未运行也可以更新磁贴,因此用户可以通过“开始”屏幕接收更新。
  • 用户可以将其收藏的运输车(如芝士汉堡包运输车)作为磁贴固定在“开始”屏幕上,以接收关于该运输车的最新新闻。这为用户提供了高度自定义的功能,可根据其需求进行定制。系统提供了很多磁贴模板,应用设计人员可以从中选择以使实施更加便利。

对于临时的重要通知,使用 Toast

除了磁贴通知之外,也可以使用 Toast 通知来通知用户实时事件。与被动磁贴更新不同,Windows 应用商店应用中的 Toast 通知是将中断用户的重要更新。它们显示在屏幕的右上角,并且可以显示在系统中的任何位置。通常,在第一次运行应用期间,最好允许用户选择加入通知。如果适用,则在磁贴上显示最新的 Toast 通知,但这些通知仍然相关。

示例:用户收藏的食品运输车已更改位置。

用户已选择通过“设置”窗格接收 Toast 通知,以了解收藏的食品运输车何时更改其位置。

总结

基于现有网站构建 Windows 应用商店应用时,应始终提醒自己应用最擅长的功能。当你有了答案时,针对这个方案对你的 Windows 应用商店应用进行优化。 始终要记住内容重于版式:通过熟悉且直观的机制,使用系统中的内置命令(如共享、搜索、设置)来提供对常用功能的访问。不需要使用应用栏和语义缩放控件时,将命令隐藏在屏幕之外。使用动态磁贴和通知,以便用户继续通过你的应用获得价值,即使在应用未运行时也是如此。如果你执行了这些操作,则将获得一个引人注目且用户都非常喜欢的 Windows 应用商店应用,并且该应用可以帮助扩大你的业务。

相关 [设计 研究 网站] 推荐:

设计案例研究:将网站搬上Windows应用商店

- - WPDang
几十年来,设计网站已成为常规惯例. 对于 Windows 8,设计人员和开发人员可以使用他们熟悉的 Web 技术(包括 HTML5、级联样式表 Level 3 (CSS3) 以及 JavaScript)来构建 Windows 应用商店应用. 下面,我们将探讨如何显示网站的功能从而使 Windows 应用商店应用更出色,并介绍一些使用 Windows 8 平台功能提供附加值、个性化以及更丰富体验的方法.

导航是Web网站重要的元素:置顶菜单的设计研究

- - 蓝飞技术部落格
SirsiDynix公司UX/UI设计师Hyrum Denney在Smashing Magazine上发表了一篇文章《 Sticky Menus Are Quicker To Navigate》,分享了自己对“置顶菜单”进行的可用性研究成果,及实现技术和相关挑战. CSDN对该文进行了编译,内容如下:.

Flickr 网站架构研究(1,2)(zt)

- - 网站架构_搜搜博客搜索
  Flickr.com 是网上最受欢迎的照片共享网站之一,还记得那位给Windows Vista拍摄壁纸的Hamad Darwish吗. 他就是将照片上传到Flickr,后而被微软看中成为Vista壁纸御用摄影师.   Flickr.com 是最初由位于温哥华的Ludicorp公司开发设计并于2004年2月正式发布的,由于大量应用了WEB 2.0技术,注重用户体验,使得其迅速获得了大量的用户,2007年11月,Flickr迎来了第20亿张照片,一年后,这个数字就达到了30亿,并且还在以加速度增长.

网页板块设计研究

- Xu - 所有文章 - UCD大社区
用户体验(User Experience,简称UE)是用户在使用产品过程中建立起来的一种纯主观感受. 在基于Web的产品设计中,UE是一个相对较新的概念. Donald Norman博士提出了“用户体验”一词,他是一个认知科学的研究人员,首次提出了在互联网领域以用户为中心设计的重要性(用户的需求决定产品如何设计).

网站首页的设计

- - 标点符
网站首页的设计是一件非常让人头痛的事. 虽然她看上去很简单:产品经路随便从网站里拿点东西出来,堆出一个看上去靠谱的页面. 也正因此,它往往非常麻烦:很多人都可以发表自己的见解,以致最终陷入到无尽的争执中. 首页的设计相对于其他页面要难的原因是,其他页面更多的是解决用户“能做”的问题,而首页的更多要解决用户“想做”的问题.

10个网站用户体验优化的研究结果

- 秋五 - 互联网的那点事
我们不断地从各种地方,听到各种关于用户体验优化的技巧或提示,其中许多乍一听都很富有逻辑,但是假如我们能找到真实的数据和报告去验证这些理论或猜想,显然就能更好地确认预期效果. 本文讨论一些用户可用性方面的研究发现,这些研究结果的获取,主要通过视觉轨迹、数据统计报告、以及关于网站可用性改进方面的调研. 你将会发现,许多可用性优化的提示是众所周知的,但是得到了更好的数据支持;与此同时,你也能得到一些惊喜,这些发现可能会改变你对目前网页设计方式发展走向的看法.

研究人们心情的网站汇总

- Jessica - 互联网的那点事
编者注:本文由clover投递(腾讯微博,邮箱:xiangsideqingwa{at}gmail.com),总结了8个国外优秀的研究人们心情的网站,和大家分享. 主要是基于图片和视频的分享交流而建立起来的. 有定义4种颜色分别表示发广播时候的不同心情,直观感受发广播的时的心情. 标签:颜色,心情,对话式回复,涂鸦板.

全球B2C电商网站创新模式研究

- - 互联网分析
过去的一年,国外的电商网站好过得多,尤其是在模式上有所创新的企业:. 大体上,不管是国内电商企业,还是国外电商公司,都有值得借鉴之处. 为此,我们总结了目前国外B2C电商网站创新模式及相关案例,以飨读者. (以团购为代表的每日特价模式在国内面临较大挑战,故不作为本报告研究对象). 简介:类似于报纸杂志的订阅,此类网站采用会员制度,用户在预先支付一定的费用后,可按月获得精美礼盒,里面装的是网站工作人员为用户精挑细选的商品.

2012年电子商务网站用户体验研究

- - 业界
本文是对Smashing Magazine上《 The State Of E-Commerce Checkout Design 2012》一文的编译,本文从付费流程角度,分析了2012年电子商务的用户体验现状. 2011年,Smashing Magazine发布了一篇文章《 Fundamental Guidelines Of E-Commerce Checkout Design》,分享了11条基本的电子商务网站付费流程设计指南.