恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Windows 10:设计的平衡感
0.0°
2015-04-30 自译外文 经验/观点 原作者: Albert Shum 举报 33930 86 46 10

Win10 OS Leader Albert讲述

原文地址:http://blogs.windows.com/bloggingwindows/2015/04/29/windows-10-design-getting-the-balance-right/

作者: Albert Shum 


Hi大家好,我是Albert,我在微软领导OS设计团队。以前读的很多,但是从来没有发过设计文章。我们的团队主要负责Windows phone端、平板端和PC端的一些设计。具体为Store、账户、MSN、Xbox等提供一些设计服务,也会尝试设计一些新兴产品的互联网使用体验,比如HoloLens以及Surface Hub。我们还和Bing、Outlook,OneDrive,OneNote的设计团队紧密协作。


本文我会分享一些在Windows 10 Phone端进行设计时的一些设计思考。我和团队里的很多成员从Win Phone7时代就开始从事手机设计了,我们对我们的成果感到自豪。但是没有完美的设计,我们也听取了很多其他人关于当前项目的建议——感谢那些热心者的帮助和反馈,我们的内部员工给予了很多评审意见以及想法。例如,最近汉堡菜单饱受争议。


“汉堡”这一话题上一次让我印象深刻的时候,还是因为我用施塔希蛋黄酱、煎蛋、番木瓜自制了一个汉堡......新食谱开发并不容易,视觉和味觉的平衡很难达成,你需要做很多尝试。

ramen burger

今天,我将分享我们是如何达成设计上的平衡感的。我们的设计探索如同开发新食谱一般,并不容易,时至今日,我们的整体设计没有完成,我将重点针对目前为止反馈最多的地方进行设计分析,并讲解我们是如何通过设计解决问题,提高用户体验的。有一些反馈在反馈之前,我们便意识到了问题,进行了改正,而还有一些反馈恰到好处,帮助我们认识到了问题,促使我们提高设计。我们正努力构建目前为止最好的Windows Phone,而这些反馈颇有帮助。


当我们的设计能够帮助用户更好的处理事物、提高效率、提供愉悦感时,我们感到非常欣慰。但是能让用户和设计者都满意需要艰辛的探索,每一次设计高度的提升都会面临新的挑战和问题,解决这些问题和挑战,就是我们的工作。

关于我们的设计方法

我们的设计受瑞士国际主义风格和微软早期设计影响。我们仿佛在设计一座城市。首先要打好基础,网格系统,这些基础维持着“秩序和标准”,但并非死板,依然允许一些灵活的视觉表达。


我们的设计基础是建立在一些常见的设计模式和交互控制行为之上的。我们希望能够在多种设备上构筑一致且优雅的使用体验...我会认真倾听开发者的意见,他们希望设计要更加简化,以便其他平台的用户也能够获得一样的体验。这些需求帮助我们最终确立了更加灵活,支持多种交互方式的“可适应性UX”


最开始,我们会通过概念设计来进行设计探索,探索设计系统的限制所在,我们尝试了多种设计变种,尝试了很多设计模式和交互,尝试了很多字体处理方法和配色方案。我们希望我们的OS能够达到“整体简约,内容突出、充满情感”。下面这些案例就是我们去年为Windows 10进行的概念设计探索。

concept compilation

当然,仅仅是概念设计。

当我们确定了设计方向后,我们便将这种设计理念在各个应用中贯彻。构建、学习、迭代、继续迭代、持续优化,直到产品符合我们的设计理念。

通过设计来学习

我们已经从微软的早期windows设计中学习到很多知识,“win10 1月预览版”后,我们又发现很多问题。在内部,Windows 10的设计路线已经比较明确了,我们全新的协同开发模式——向微软内部员工公开设计流程。很多人给予的反馈非常积极,他们赞同我们的设计路线。而另外一些人则会提供一些有用的问题建议。


我们会在博客或Twitter上看到这样的言论“手机设计的有点糙啊——微软现在听我们的建议修改一下来来得及”。我们喜欢听到这样的建议,虽然我们已经发行了build版,但我们自己也知道还有很长的路要走。正是这些建议让我们了解到了用户的看法。你们的反馈非常有价值——虽然目前只是预览,我们的研发还远没有完成。


在Build版中,你会见到Win 10很多即将完成的新功能。核心代码早就有了——非常可靠,而且省电,运作良好。然而,还有很多应用还处于早期开发阶段。我们需要考虑构建成Universal版以便跨平台使用,这样在设计的时候就无需根据屏幕尺寸和交互模式来“量体裁衣”。所以,总的来说,你们目前看到的仅仅是我们所打算构建的系统的一部分,很多我们还没有完成。


下面这些案例我将透露一些崭新的东西,在这些地方我们学到了很多,设计也精心调整:

  • 菜单图标 (汉堡)
  • Outlook邮件和日历
  • Project Spartan
  • 任务切换
  • 人物
  • 照片

汉堡菜单

Windows 10 for Phone Build 10051 里面的汉堡菜单(译者添加)


打开手机浏览器,去一些Facebook、Bank of America、Huffington Post一类的网站,你都会发现汉堡图标居于右上角或左上角,作为主要的导航元素。汉堡菜单是怎样成为UX的争议话题呢,请看这篇文章。在所有的用户体验设计中,往往槽糕的用户体验设计不在于设计元素本身,而在于设计元素的使用方式不当。正确的设计元素应该对应正确的交互行为。汉堡通常被用来作为App最主要的导航,相当于App的“Home”键,能够帮助用户快速抵达想要的功能。但是如果汉堡菜单打开后,信息层级混乱,那么导航菜单的效率就会很低。而一些需要用户频繁使用的功能,把他们“深埋”在汉堡里面也是非常不合理的做法。很多时候App bar、tab栏、pivot control等方式的效率会更高。

pivot control大致说明(译者添加)


在我们Universal App 和 可适应性UX 需求的大前提下,我们的开发者只需设计一次应用,但是在各个平台的实际使用上,处于用户体验考量,还需要稍加修改。例如在PC端上面,我们便去掉了pivot,一遍用户使用键盘鼠标导航,而同样的在移动端上面的英语,我们便加入了pivot control和滑动控制,以便用户单手操作。我们做到了让Pivot control和汉堡菜单和谐共处——你看,在不同的设备上采用不同的交互方式。


这便是崭新的可适应性UX的优点,关于汉堡菜单的使用,我们还在根据内部员工的反馈持续迭代,以便让它可用,愉悦用户。


Outlook

尽量在屏幕的底部进行控制

顶部?(译者添加)


我们接到很多反馈,用户说他们喜欢Windows Phone 8里面的设计模式,让操作尽量几种在屏幕底部,而App Bar显示标题和图标。而现在我们可以明确的告知你们,我们不会移除这一设计模式——在build版里面你可能看到Office不是采用这种设计模式,但是在接下里的几周里面,你会发现这种设计模式将回归,操作集中在屏幕底部。

邮件

在我们最近发行的build版里面,我们可看到我们设计的“收件箱”的早期版本。Universal版Outlook应用的UI界面,为了长远打算,代码库部分重写。Outlook团队的动作速度很快,因此在未来的几周内,相信体验会大幅提升。很多人告诉我们说他们特别喜欢统一收件和多选功能。好消息是:这些功能会在下次升级中加入——我们确实还有很多需要改进的地方。

Outlook for PC(译者添加)


现在谈谈邮件里面的汉堡菜单:首先来谈谈设计的大背景:对于很多用户在使用邮件的过程中,他们非常需要理解这封邮件来自哪个邮箱账号或哪个folder。而在Outlook应用的桌面版上,有三个主要面板区域,左面是folder面板,中间是该folder内的信息列表,也就是Inbox收件面板,二最右面显示了具体内容。


Outlook1

在手机上,我们单屏一次只显示一个面板。通过点击汉堡图标来弹出左面的面板,能够清晰的展示Folder面板和Inbox的从属关系,而且能告知用户当前所属的层级。尽管汉堡菜单离屏幕底部有点远,但是我们观察到用户不会很频繁的去进入Folder面板。

而在即将到来的版本中 ,我们会继续观测用户是否会频繁的进入Folder面板,考虑是否使用下拉。

这是最新build版的样子,底部展示了一些可操作图标,而上顶部的汉堡图标,用来查看账号信息和收件分类。

Outlook2

Outlook3

日历

很多人请求我们把原来日历的周视图和月视图恢复到新版本中。在Build 10051中,有一种快速抵达月视图的方法,但是可发现性不高——你需要点击月份名。我们争取让这个交互操作更容易被发现。

未来几周内将发生如下改变:

  • 更容易进入最小月视图.
  • 对于大屏手机,增加最小月视图显示的周数

我们相信这个设计改变既能够满足使用日视图、关注日常事务的人,也能够满足使用月视图、喜欢谋划未来的人。

我们正在设计横版日历,马上就要到来!

这是日历目前的样子:

Outlook5

Outlook6

Microsoft Edge

Microsoft Edge (译者添加)

Microsoft Edge (原来叫Project Spartan)是Windows 10上面最新的浏览器体验。包含了全新的web引擎,基于Universal App平台构建。从PC到手机,我们努力让Microsft Edge的设计更具现代感,更加简约,而且符合Win 10的整体体验设计。

我们聚焦于构建跨平台的体验一致性。采用了统一的视觉设计样式。并取消了地址栏。

关于地址栏的取舍我们还在听取反馈中,你可以分享你的见解,我们会认真听取的。

用户可不是方形的

于此同时,对于用户头像的处理上,统一采用了圆形元素。


我们在win 10的设计规划阶段思考了很多,我们想要让手机中得用户充满生活感。尤其对于Start来说这种体验非常重要,圆形元素让用户头像可以更好的贴合其他内容元素。目前为止,我们决定使用圆形来代表人像。关于这一设计决定,我们也很乐于听到你们的正面反馈。


这是最新版本中的设计:

People1

照片

这个应用证明了Pivot Control和汉堡菜单是如何在不同设备上各有所长、发挥自己的优势的。

在照片应用中,我们希望帮助用户更好的收集生活的美好瞬间,同事能够尽可能多的展示照片。我们的目标是照片能够自动整理成专辑,同时希望在其他设备上也能快速获取照片。

目前我们正在跨平台使用汉堡菜单,而在手机上,Pivot Control可以更好的单手操作和滑动。至于照片应用的导航方式,我们还在进一步迭代。目前的版本是,PC端应用使用汉堡菜单,而手机端使用Pivot Control,以便用户使用键鼠或触控更好的操作。

这是目前的设计:

Photos1

Photos2

任务切换

很多人注意到我们现在的任务切换顺序反过来了,(之前的时从右到左,目前从左到右)。我们目前还在手机反馈中:PC的任务顺序是从左到右,而手机上之前版本是从右到左。我们是否应该在多种设备上采用统一的交互方式呢,以便符合用户的肌肉记忆?或者还是沿袭之前手机的交互方式,我们还需要了解一下手机用户的使用习惯和重学习的成本。

旅程开始

这次分享了很多Windows Phone10的设计,我们还会保持迭代,满足多平台的灵活性,并保持一致愉悦的用户体验。Windows 10代表着崭新的设计和操作方式。我们会将Windows 10视为一种“服务”,我们会不间断的更新和改善。而上面提到的这些应用马上即将升级。

这是我第一篇设计经验分享,如果想了解更多,关注Build 2015,我们会在几周后讲讲我们的设计。


译注:好久不译,生疏了,如有错误见谅

更新:2015-04-30

收藏

86人已收藏

MartinRGB

http://www.MartinRGB.com

  • 234

    作品

  • 1.7w

    粉丝

  • 413

    关注

  • MartinRGB.com
  • Icon Freebie - Code
  • 实验系列II —— Music App For Tv/Pad
  • Private Trainer 引导页实现
相关标签

    猜你喜欢

      2015-04-30 自译外文 经验/观点 原作者: Albert Shum 举报 33930 86 46 10

      Windows 10:设计的平衡感

      0.0°

      你确定要举报Windows 10:设计的平衡感

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2015年04月30日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      46
      86
      10

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录