注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

分享,态度 ·~~

—— 十年太长,五年;如果可以回到五年前,你最想对那时候的自己说什么?

 
 
 

日志

 
 

Windows8的Metro风格AP设计  

2011-10-23 18:05:20|  分类: Windows 8 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

——设计优秀Metro Style Ap的8条建议

Windows8已经发布开发者预览版,可以看到这一版OS的界面不同于以往任何桌面操作系统的UI设定,更流畅的触屏、Touch-First的理念、更多信息量的Tile、全新的操作体验。微软想借全球开发人员之手,打造全新一代的WindowsOS。

Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~
 

那么,什么样的Ap设计才能匹配Win8 Style?什么样的Ap才能让Win8 Users爱上并沉浸其中?
下面8条Metro风格的UI设计建议,供参考。

一、Metro风格设计
Metro意为地铁。可以看到瓷砖一样的Tile遍布Windows8的角落(所以是它像地铁么?),微软期望每一个Ap的Icon都可以承载有效信息,显示在开始页面上。User在开机后的第一个页面就可以获取想要的信息,甚至不需要开启对应的Ap。下面是“传统Win32程序”和“Metro风格程序”的直观比较:

Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~ 
MetroUI更美观、更简洁,使用户关注于Ap展示的内容。

下面是更多几个Metro Style的例子:
Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~ 
Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~ 

以上的例子可以看到,Metro遵循一个类似这样的模板界面,它们有相同标准的边栏和标题位置:
Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~
 
Headlines、Tweet@rama、Stocks、Socialite都是一样的设计:
Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~
 
如果将Headlines的图片移除,可以看到内容的分布,基线对齐:
Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~
 
以上所有的效果,不需要你去自己定义,下面就是GridPage和ReadingPage的两张模板,而微软提供的这样的模板还有许多,可以帮助你快速构建起一支Ap的基本框架。
Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~
 
所以,多使用模板建立你的MetroStyle Ap,这样User可以获取和操作系统界面一致的用户体验。

Metro提倡Touch-First的Ap设计,但不是对传统风格的颠覆。对于PhotoShop,鼠标和绘图板是不可替代的;对于Excel,键盘仍然是User最主要的输入工具;这些Ap的大部分功能都没有办法用简单的触摸收拾去呈现,这不是Metro的目标Ap,键盘和鼠标不是MetroAp的工作方式。以下是传统IE和Windows8上IE浏览器的区别,可以看到MetroUI提供简洁、漂亮、动态、真实的用户体验,User沉浸其中去体验和使用你的Ap:

Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~
 

如果你曾经使用过Win8或者看过视频,会发现Windows8在程序间的切换上做了很大的改变,在后台程序之间的切换只需要手指从屏幕左侧划出:

Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~ 
而从屏幕右侧划出则是系统菜单,这就是Windows8系统的运行方式:
Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~
 
再看到IE,当手指从屏幕上方或者下方划出,会弹出IE的更多菜单,这就是Windows8上MetroAp的运行方式:
Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~ 
Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~
 
你可以在Ap的上下边沿放置你的操作、工具,这和切换程序和调出系统菜单的想法是一致的。
所以,利用好边界手势(App edge gestures):
    1. 不要再用凌乱的Button去填充Ap界面,将一些操作转移到边界手势划出的Menu区域中;
    2. 保证Ap界面中包含的是最常用、最重要的操作;
    3. User会乐于使用你的Ap,前提是他们很确定的知道在什么地方可以找到他们想要的操作。

微软对边界手势、Touch-First的重视基于,User普遍会用双手持边来操作平板电脑:

Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~

 
屏幕热点分析可以看到,最舒适的操作区域在左右两边1/3屏幕范围内(绿色区域)(10寸屏):

Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~ Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~
基于此,边界手势划出Menu里的操作尽量布局在屏幕靠近左右两侧的位置:
Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~ 
Windows8的其中一种输入方式也采用同样的设计理念,所以你会看到:
Windows8的Metro风格UI设计 - 乂乂 - 一个人,一支烟  ·~~
 

Key Point:
    1. 使用提供的模板,定制个性化的基线对齐Ap里的内容模块,制作简洁的Metro风格UI
    2. 取消边框,凸显内容,将User最需要的信息显示在最直接最显眼的地方;
    3. 合理安排Ap关键操作的布局,让User在双手持设备边缘时能舒服操作Ap。

 

 二、快速,流畅的AP
“快速”和“流畅”是吸引用户并让用户喜欢Windows8的基石。它表现在三个方面:
    1. 运行速度快、响应时间短;
    2. 有平滑的过场动画和操作动画;
    3. 使用适合的触摸语言。

PC发展到现在,界面操作系统经历了Command-line Interface(CLI)、Graphical User Interface(GUI)和Touch User Interface(TUI)三个阶段,GUI见证了个人PC的成长和成熟,而TUI将会把PC的交互操作带到更高的高度。触屏操作比之前的反馈更直接,用户对Ap的即时反应要求也更高,下面的图表显示了三个操作界面对Ap性能表现的不同要求:

Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~

 
在CLI和GUI时代,你一边在操作鼠标和键盘,一边查看屏幕显示,有一点时间的lag可以被容忍。但是User在触摸屏幕时候,如果Ap没有马上反应,体验就会很差,像是Ap卡住或者已经当掉。微软强烈建议开发者使用平滑的动画来响应User的触屏操作。在你的Ap中,所有的东西都应该是平滑的从一个地方到另一个地方,不会突然出现也不会突然消失。微软的动画类(Animation Library)已经提供了制作动画的所有工具。所以,请使用微软内置控件构建平滑的动画

Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~ 
 

 从CLI、GUI到TUI,它们都有自己的语言(操作指令):CLI是文本命令;GUI有文本命令、鼠标点击、鼠标右击、鼠标双击等等;TUI则是丰富的触摸手势,点击、滑动、多点触控。

Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~

如果把玩过Windows8,你会发现甚至可以:一只手hold住Tile,另一只手滑动背景,从而调整Tile在StartScreen的位置。让人对Windows8上的触屏操作更多想象空间。


Ap使用触屏动作,User期望效果会是:
    1. 简单、一致,(我们不需要User去思考是否应该4个手指、5个手指在屏幕上乱舞);
    2. 快速、流畅;
    3. 有限的手势设置,(不因为手势过多而困扰User);
    4. 直观的操作;
    5. 顺畅连贯的手势动作设定;
    6. 互逆的手势应当代表着互逆的操作;
    7. 限制复杂耗时的手势使用。
下面是几个User常用的手势,简单、直观、统一:

Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~
 
在Windows8上,微软期望更多的Ap可以提供User“双指开合”的手势操作,用于缩放Ap界面。这要求开发者在不同的情景下设计不一样的显示效果或者说Ap中的内容布局。例如行事历在手势开合状态下的不同显示:
Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~ 

Metro风格Ap将触控放在第一位,但是仍然应该兼容鼠标和键盘操作。举个例子,在MetroStyle的IE中,我们通过上下边界划出Menu和其他操作,而用鼠标我们也可以通过右击来呼叫起一样的控制界面,这就是MetroAp应当做到的对触摸手势和鼠标动作的行为统一,键盘也是如此。

Key Point:
    1. 设计你的触摸响应——特别是运行缓慢的PC上——给用户友好的触摸反馈;
    2. 多使用动画库和内建控件,来呈现美观流畅的动画效果;
    3. 拥抱“触控语言”,让User以最常用最直观的手势操控你的Ap。

 

三、设计多种布局
如今从台式PC到平板到手持移动设备,用户的需求越来越多元。Windows8的目标机器小到10'以下的Pad,大到27'以上的高清荧幕。我们设计的Ap需要应付从200DPI以下到250DPI以上的不同解析度,从而给User相同舒适的操作体验。

Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~ 
好消息是,同样,微软开发工具内置的模板和控件提供了优秀的缩放性能(XAML+C#和HTML+JavaScript两种开发方式都已支持)。以下DPI比例是需要注意的几个关键点:100%、140%、180%

Ap需要提供4种模式下的界面:
    1. 小屏模式(Minimum: 1024*768);
    2. 宽屏模式(Widescreen: 1366*768+);
    3. 竖屏模式(Portrait);
    4. 快照模式(SnapView)。

Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~

 
SnapView是被要求提供的,它可以让User把Ap长时间的放置在屏幕前端,并不被切换程序的操作刷走。

Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~ 
SnapView是Ap的一个全功能页面,但与Ap的MainPage要有统一的风格:
Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~
 
Key Point:
    1. 提供DPI比为100%、140%、180%的资源;
    2. 提供合适的Snap界面;
    3. 竖屏布局不是必须的,但是如果你提供了,你的Ap会受益匪浅。

 

 四、使用合适的契约(Contract)
Contracts是Windows8上的粘合剂,它将MetroAp与MetroAp、MetroAp与系统之间做了绑定。

Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~

 
Windows8上有许多的Contracts,有三个十分常用:Share、Search、Picker。

Share Contract 详细让AP之间可以分享数据。一个AP作为“源程序”提供分享的数据;另一个AP作为“目标程序”接收分享的内容。如下,将在RssFeeds里看到的文章共享,只需要划出右边的系统Menu,点击Share,列出的AP即是注册了Share Contract的“目标程序”:

Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~ 
如果可能,任何程序都可以作为“源程序”并提供符合要求的数据;而那些具有“发布”、“保存”、“转换”数据功能的软件可以作为“目标程序”。“目标程序”的几个例子:Mail(邮件)、IM(即时通讯)、Chat(聊天工具)、social networks(社交网络)、translators(翻译工具)、note takers(笔记)、bookmarking(书签)、cloud services(云端服务)、image editors(图片编辑),等等。

Search Contract 详细让“在系统任何地方搜索Ap及Ap中内容”成为可能。用SearchContract替代你的Ap内部搜索页面,而Ap只提供和显示搜索结果。如果可以,Ap提供一些搜索建议方便User快速找到需要查找的信息。如下,屏幕右边划出Menu,点击Search,输入“haw”,会实时提供搜索建议,这不是系统实现的,而是你的AP(Bing)通过SearchContract提供。

Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~ 
确认之后,就会通过AP(Bing)显示AP中的搜索结果。同样的如果这时候点击Tweet@rama,马上会切换到Tweet@rama来显示它的搜索结果。这就是SearchContract。
Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~ 
以下情况适合使用SearchContract:Ap是被用来浏览或者产生内容;会被引用的Ap。
而下面情况就可能不合适:游戏、小工具(没有需要被搜索的内容);有“查找内容”功能的Ap,例如PDF浏览器等。
所以,如果你的Ap没有需要被检索的内容,不必实现SearchContract;而如果Ap有检索需求,“使用SearchContract而不是在AP内自定义搜索UI”会是一个不错的选择

Picker Contract 允许其它Ap选择和获取你Ap中的内容,展示给其他Ap的picker的界面和行为也是完全由你来控制的。对于其它Ap来讲,你Ap提供的picker就等同于本地存储。如下,是一个图片选择界面,不单单有本地文件,也可以直接进入Ap的picker界面来挑选网络上的图片。

Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~ 
如果你的Ap保存着会对其他Ap有益的的文件,或者是这些内容的存取通道,你的Ap有必要实现PickerContract。Ap可以将内容保存在云端,因为对于其它Ap来说和读取本地的内容是一样的体验。这样也会让你的Ap更有意义。

Key Point:
    1. 契约(Contracts)让Windows8拥有比之前更强的功能、更优秀的用户体验;
    2. 实现必要的(恰当的)契约;
    3. 契约能够提供的功能就尽量不在Ap内自定义实现,保持Apps操作的统一。

 

五、制作优秀的Tile
Tile就是在Windows8 StartScreen上的 瓷砖 AP图标,是MetroUI的一个重要组成部分。传统的AP图标是一个icon,一张图片,是AP的启动入口。(听起来不是很酷)。

Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~

 
而Tile,意为着更多东西。对不同的AP、不同的人,Tile传递不一样的信息。优秀的Tile是有生命的:它告诉你现在正在发生的故事;它通知你需要做的事情;它显示你正在看的视频、正在听的音乐....这些都不需要你进入Ap才能获取到,它就在那里,在StartScreen上。

Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~

 
所以,Tile不只是一个icon,它是Ap的延伸,它让你的Ap像是一直在运行。Tile有两方面的功能:
一是程序的入口,你提供“文字”和(或)“图片”,Win8会为你呈现一个漂亮的Tile。Tile有大、小两种尺寸,如果需要实时显示较多内容,可以提供大尺寸tile,但并不是必须的。Weather的两个Tile:

Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~ 
按照惯例,微软提供了丰富的模板供开发人员使用:
Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~
 

Tile的另一个功能是作为AP内容的深链接定(Pin)在开始页面上。这将允许User把一个Ap中关键的功用或者感兴趣的内容直接放置在StartScreen,而它的功能和它主Ap的没有两样(Pin、拖拽、打开AP等)。比如RssFeeds中的一个专栏,可以方便地Pin到StartScreen上:

Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~  

Key Point:
    1. Tile不只是icon,它是AP的延伸;
    2. Tile来展示Ap中的信息,让它变得有趣;
    3. Ap中重要的内容、项目、功用,允许用户将它们Pin到开始页面上。

 

 六、相互关联的、有生命的AP
Windows是活的,Win8将Web的想法集成到OS中。世界上每时每刻在发生着新的变化,不断有新的事物等待你去发现,不断有新的地方等待你去探索。Windows不是一块静态的屏幕,它是一个城市、一个社区,许多许多的人在里面做着有趣的事情。

有生命的Windows包含两方面含义:Live Tiles 和 Notification。

Live Tiles(活动的、滚动着AP内容的Tile)将User和你的AP联系起来。通过LiveTile,User会关注你的Ap,就像这支Ap永远是前置显示的。

呃,插一段StartScreen的内容。 (这部分知识点有些杂,忍忍吧,我码字到现在很累的。) User还可以自由组织Tiles。Windows8的StartScreen有组的概念(Groups)。它不再使用文件夹去管理不同类型的tile,文件夹很不直观,User需要在不同层次的文件夹上不断切换才能实现想要的操作。在Win8中User可以自定义不同的组群、定义不同的组名,直观、简洁:

Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~ 

继续LiveTile,(^_^)。
使用LiveTile,让你的AP看起来像是一直呈现在User面前:
    1. Live tiles可以是大尺寸、也可以是小尺寸;
    2. Tile的边缘(Badge,tile通常右下角)显示计数或者AP中其他有意义的状态值;
    3. 在Tile上体现Ap个性化的特征和风格;

另,Tile上禁止显示广告!(开始页面不是买卖市场,广告会让Tile显示极不友好。)

Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~
 

Notifications(弹出消息)允许你的Ap弹出一个简短的消息提示,而不论User处在Windows的哪个页面。这与前几代Windows的消息提示是一致的。

Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~ 
我们需要特别注意的是:Windows8没有特殊的消息积压抽屉(“junk drawer”,类似于AndroidOS 3.0 中有些显示过的Notification可以点击Taskbar的相应区域重新罗列出来。)。User可以选择不关注弹出的Notification(让它自动消失),或者将弹出窗口用触摸手势划出屏幕,甚至直接在Setting页面禁止任何Notification被show出。无论哪一种操作,Notification在它生命周期结束之后都不再被找到,所以如果有很重要的信息,必须将信息更新到对应Ap的Tile上,这也正是LiveTile的使命。
再一次,微软也为Notification提供了许多友好的模板:
Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~ 

请以正确的方式使用Notification:
    1. 绝大部分Ap应当是安静的,除非User特别在Ap的Setting界面中开启消息提醒;(如果你有提供这样的功能)
    2. Notification显示的是必须打断User并提醒他注意的信息;(如果是一般信息,LiveTile才是它们的最佳归宿)
    3. 当使用Notification,要保证即使User选择忽略它,也不会造成Ap发生严重的后果。

值得注意的是,Windows8中,LiveTile和Notification使用了相同的机制和架构。有三种方式使用、更新LiveTile和Notification:
    1. 局域的:当你的Ap运行时直接更新;
    2. 计划的:精准设定在未来某一个时间触发;
    3. 推送的:使用Windows消息推送服务(WNS,Windows Push Notification Service)。

使用WNS可以在任何时候更新Tile信息或弹出Notification,甚至你的Ap都没有运行。

Key Point:
    1. 使用WNS来创建和更新LiveTiles,确保信息是最新的;
    2. 仅当确实需要打断User的时候,用Notification;(除非User要求这么做)
    3. 当User可能会忽略重要的Notification时,将相应信息显示在Tile上。

 

 七、云端服务
AP只有在屏幕上显示才表示它在运行,但是云端服务的支持可以让AP看起来一直是运行着的。想象以下的情形:
    1. 当你离开15分钟后再次返回前一个AP时,AP的表现看起来是你从未离开过;
    2. 当完成了某一关游戏之后,你可以在另一台Windows8设备上继续接下来的关卡,而不需要从头开始玩;
    3. 当你改变了自己喜好的系统设置,不论更换设备还是重装系统,你都不必再做一样的设置;
    ......

    Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~
 

云端服务让这些成为可能。User只需要以一个WindowsLive ID登入Windows,系统中的每一个Ap就会获取到一部分云端存储空间来保存Ap的设置、状态和少量的用户信息。Windows Azure提供了这些服务。使用Ap中的Setting,自动保存到云端,User可以在任何地方使用自己喜欢的设定和个性化的操作界面,不需要每一次重新设置。
优秀的MetroAp会在适当时候保存自己的状态,而不需要显式地提醒用户保存。
另一个需要开发者注意的是,当你的Ap被切换到后台,Ap只有5s的时间处理你想要处理的任何事情,之后Ap就被挂起
建议使用云端服务的情形:
    1. 保存设置:比如,Weather中的“华氏/摄氏”温度;RssFeeds中订阅的新闻;Weather中设定的所在城市;等等。
    2. 保存状态:比如,Reader中最后阅读的页面;Game中最新完成的关卡;Music中暂停前的播放位置;等等。

Key Point:
    1. 让User觉得你的Ap一直活动,即使Ap事实上没有运行;
    2. 将Ap中需要的设定和状态同步到云端;
    3. 避免显式地提醒User保存Ap信息或设定,应当让Ap自动、智能地实现保存功能。

 

 八、MetroAp的设计哲学
Metro的设计包含了五点,找不到合适的表述方式,罗列在下面:
    1. Pride in craftsmanship;
    2. Be fast and fluid;
    3. Authentically digital;
    4. Do more with less;
    5. Win as one.

 

以上,是设计优秀Metro Style Ap的8条建议。设计思想不是我的原创,其中大部分来自于Jesen Harris在微软Windows8开发者大会上所做的主题演讲,当然中间也加入了我自己对Metro的理解。文中的图片大部分是演讲上的截图,我只有一块Windows8平板,不方便测试再截图,所以抱歉了。另,Windows8的Metro风格可能需要你去使用才能体验到那种动态的舒适感,我只能在这里用尽量多的图片表述Metro的想法和行为,希望读者有机会一定体验一样MetroUI。诚恳的文字记录在这里,以嗣各位看官。

Jesen Harris的演讲视频在这里可以找到:http://channel9.msdn.com/Events/BUILD/BUILD2011/BPS-1004

有关MetroUI的设计和开发,还有下面几个讲座,在Channel9上也可以找到。如果有需要,请给我留言。我会总结一下要点,并提供几个Demo程序上来。如果没有需求,也就没有功夫去写这么长的技术文档了。

206: Bring apps to life with Metro style animations in HTML;
207: Reach all devices with on beautiful HTML uset interface;
211: Create Metro style apps quickly with built-in controls;
391: Designing Metro style apps that ate touch-optimized;
395: Designging Metro style: Principles and Personality;
396: Using tiles and notifications;
405: Share: Yout app powers the Share experience;
406: Search: Integrating into the Windows 8 search experience.

多谢坚持看完这么多字和这么多图片。Windows8的Metro风格AP设计 - 乂乂 - 一个人,一支烟  ·~~

(全文完。。。。)
  评论这张
 
阅读(6355)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017