通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

不单是视觉扁平,交互层级也更加扁平啦~


不单是视觉扁平,交互层级也更加扁平啦~

通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

前不久,国外媒体曝光几张Win 10的全新设计语言的截图,把我给看嗨了(毕竟笔者是设计Windows 软件出身的老UI设计师啊)

于是我搜索了下这几张截图的相关信息,发现微软有一个开展了一年多的项 —— Project NEON,它的任务就是开发Windows新的设计语言(类似于设计实验室,大胆的做各种概念设计,大公司就是好,还有这种项目部门~~)

这次的新设计,相对于目前正在使用的Microsoft Design Language 来说,更加的大胆了,这些大胆既体现在交互层面也体现在视觉层面上。

通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

(Groove 界面)

通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

(Outlook 界面)

比较有趣的是曝光出的截图界面有两张都是来自微软自家音乐播放器界面Groove。笔者发现一个特点:很多设计师都喜欢拿音乐或者是视频播放界面来作为设计的突破口。可能因为这些界面在设计的时候确实容易出效果的原因吧,有各种漂亮的封面,操作按钮不需要特意解释都已经深入人心了,而且基本天天接触,想法自然比较多。

看完这几张截图不知你有什么想法,或者说发现了什么东西没有?

将来桌面客户端风向标的特点

笔者大致发现了以下几个特点,这或许是将来桌面客户端的一个风向标。

1. 弱化标题栏和菜单栏

传统的Windows 窗口由标题栏、菜单栏、工具栏、侧边栏、工作区域、状态栏组成。我们设计软件的时候基本也是遵循这几个模板进行交互布局。让我们简单回顾一下Windows的标准窗口~

通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

(Windows xp窗口)

通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

(Windows 7窗口)

通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

(windows 10窗口)

通过上面几个大版本的窗口截图对比,不难发现Windows 一直在想办法让界面更轻(只是Win 7由于整个设计语言是玻璃质感,但整体还是要比XP 时期轻很多的)。Win 10 的标题栏和菜单栏更是结合了在一起~

2. 进一步简化层级,使操作进一步扁平化

无论是XP 还是Win 10,我们其实都可以看成是三个板块(下图),而新的设计语言将三个层级简化为两个层级,通过左右(有点类似于iPad 的App 交互)展现任务和对应任务的结果。

通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

(iPad 概念设计)

3. 强化内容可读性

应该说以内容为导向进行设计一直以来是metro遵循的守则吧~大标题、醒目的颜色等。

4.目标导向设计,让界面更加干净和高效

只在触发到某个任务时才展现相关操作,这样就不用把所有的功能按钮都罗列出来,使界面更加Clean,操作更加的浑然天成.

5. 弱质感带来的高级感

通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

说到这个“毛玻璃”质感~最开始应该确实是微软先弄出来的,当时候Vista的出现,还确实是让眼前一亮的~只是过去的设计太粗糙了,那么粗的描边、那么亮的内发光,那么黑的阴影… 并且那个毛玻璃效果不够“毛”,而且纯属装饰,没有什么实际用处。

通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

(Win7界面)

然而比较搞笑的是,自家发明的毛玻璃效果被竞争对手苹果抄了去,而且青出于蓝,这让微软情何以堪啊。据说微软将这个毛玻璃效果正式命名为Acrylic(亚克力),在系统中会呈现出三种形态:Side-Nav(侧边栏) Acrylic、Background(背景) Acrylic、In-App(应用内) Acrylic。

通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

(Metro的理念)

好吧,以上就是我看了这些图的基本感受,当然都属于个人想法,也可能这些理念现在已经有了,或者是不够明显罢了(主要是我用Mac用太久了,偶尔看回Windows 好有亲切感),有不对的地方望见谅。

据各种传言都表示 Project NEON 开发的这套设计语言将会出现在 2017 年秋季正式推送升级的 Windows 10 Redstone 3 上,也许广大 Windows 粉丝只要再耐心等待一段时间,就能看见更全面的 Project NEON 设计成果。

其实我看了这几张图觉得曝光的太少了,于是我又跑去各种搜索国外大神的概念设计。嘿嘿,还真被我搜到了不少,下面分享给大家,超赞的。

通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

通过全新的WIN 10设计语言,我看到了将来桌面客户端风向标的5个特点

 

作者:俊宏,UI设计师,曾是迅雷设计经理,带领团队,负责迅雷桌面相关UI设计;目前在深圳百度,带团队,负责国际化两个产品的业务。信仰——专注和坚持。

来源:微信公众号【折腾先生】

本文由 @俊宏 授权发布于人人都是产品经理,未经作者许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24790/

(0)
CatherineCatherine
上一篇 2017-05-09 17:50
下一篇 2017-05-09 19:52

相关推荐

  • 一款运动类APP的产品交互设计全过程(两万字干货)

    这次的分享是前不久完成的一次比较完整的交互设计工作,基本上涵盖了前、中、后期的完整流程,包括前期的定位分析、用户调研、业务需求分析、目标用户画像、用户需求分析、关键因素分解、路径分析,完整的交互设计文档,以及后期的可用性测试,希望对需求分析、交互设计或可用性测试感兴趣的朋友们有用。1第一卷 需求分析1概述1.1 产品目标以运动为主题,选定某一种运动形式,完成一款 APP 产品的交互设计,内容集中在统计和分享运动量方面。1.2 关键词分解...

    2018-01-31
  • 【交互基础】你认为交互设计是什么?它是否有一个完整的定义?它的上升空间如何?交互设计又是如何应用的?

    交互学堂 微信号 IxDSchool 功能介绍: 从零开始学交互!国内最专业的交互设计学习内容资源。如需访问网站请百度搜索:交互学堂。 [alert_success]很多人问:你认为交互设计是什么?它是否有一个完整的定义?它的上…

    2016-02-19
  • 从用户体验的视角聊首款《CSR赛车(CSR Racing)》

    原文作者:Om Tandon我最近一直在玩《CSR赛车(CSR Racing)》和《CSR赛车:经典(CSR Classics)》,在近期的游戏中我发现,Natural Motion在该系列的核心玩法、货币体系、社交机制和盈利模式中都引入了许多新的花样和用户体验功能,这些新元素的加入为游戏的某些方面带来了更好、更流畅的玩家体验。CSR-Racing-iPhone(from theiospost.com)CSR系列专为手游玩家设计,会话时...

    2018-03-26
  • 交互实战|Web端表单项目总结

    本文作者分享了其所参与的Web端表单项目,enjoy~在拖放期间,需要处理许多特定的状态。我们把这些状态称为趣味瞬间(interesting moment)。书中提到,趣味瞬间是由15个事件与6个相关元素组合而成。

    2017-04-29
  • 怎么策划一个成功的活动——线上篇

    怎么策划一个牛逼哄哄的线上活动?大家都说网络营销火爆,都在搞线上活动,那么,一份完整的线上策划案,应该怎么准备呢?知乎用户柒石二为我们提供了一份可行的回答。 始。 先问度娘: “线上活动是指依托于网络的…

    交互设计 2014-12-13
  • 如果动物们会说话

    你是否曾经想过动物会说话的情景?艺术家Jimmy Craig用一组漫画描述他所想象的动物说话的场景。在这组名为They Can Talk 的系列漫画中,Jimmy给出了他自己的解释。在这组漫画中,我们可以感受到动物世界里的秩序以…

    2016-06-02
  • HOW TO—撰写可用性测试报告

    在报告可用性测试结果时,首要关注的应当是本次测试的发现与改进建议,并且将测试的发现与建议按照严重等级划分优先级。其次,还应当包括测试计划和测试执行过程,当然不用面面俱到,但是加入部分细节内容可以帮助读者了解此次测试所使用的方法,方便其评判该报告的可信度。在报告中,尽量保持段落简短,多使用图表、短视频等方式来描述。

    2017-05-28
  • 减少认知过载:塑造更好的用户体验

    设计不是美工,想成为优秀的设计师怎么能不懂点心理学?文章从认知心理学角度下手,分析了在交互设计过程中时常会犯得几种错误,一些平时稀松见惯的设计方式也都在这儿找到了比较理性的依据。设计是门科学,我们需要掌握一些方法论,以不变应万变。

    2017-05-11
  • 重温《别让我思考》,这本书到底告诉了我什么【UXRen译#141】

      作者:Nick Kellingley(交互设计基金会社区经理)| 译者:天蛙,审校:xing   《Don’t Make Me Think》是人机交互和易用性工程师Steve Krug写的一本书的书名(中文版本的书名是《点石成金》)。这本书教用户体验…

    交互专题 2017-08-07
  • 聊一聊常见的登录交互方式

    现在市场上面的APP种类繁多,而登录注册的方式也有很多,下文就简单来分析一下各种登录的交互方式,谈谈自己对这些方式的见解。

    2017-05-26