首页 > 交互设计, 资源推荐 > 【译】Google新闻改版全程-交互视觉新体验

德国柏林的俄罗斯籍设计师George Kvasnikov,在2014年10月用业余时间为Google新闻做了一套新设计,包括功能、交互与视觉的创新,这里将他的原版设计及创作过程文档翻译出来供大家参考。翻译的很仓促望见谅。

原文请移步:https://www.behance.net/gallery/20386163/Functional-and-visual-redesign-of-Google-News

 

新闻是影响大众认知的直接工具,新闻的目的是报道事件,并把客观的信息提供给大众。

现实世界中,新闻常常被用来讲述事情的经过,并传递作者主观的态度。作者属性浓厚的新闻必然会导致存在一个相同事件但的前后矛盾的新闻报道。更加严重的是,作者常常因为某种利益掩盖新闻的真相,从而操控了大众的认知。

当下,有许多新闻机构代表着政府、激进、批判等色彩(人家说国外,切勿对号入座)。很多新闻带有某种态度倾向,这个问题很严重。让大众了解信息流变得更加困难。让大众去了解事实的真相,让公众读到最客观的新闻并形成自己的态度和认知,是当今传媒业界面临的一个挑战。

基于以上现状,我们需要去创造一个工具,让大众很轻松的获取信息,去除不合理的偏见、形成自己的态度。

1

 

调研

像Google提供的其他服务一样,Google新闻是一个伟大的产品,它让公众可以很方便的搜索新闻。Google新闻开创了一套先进算法,你可以就一个新闻热点看到多种来源的新闻

 

分析目前网页

Google新闻2002发布至今,仅经历过细微的调整。12年来它的理念和可用性的缓慢前行导致用户对体验和样貌的急迫需求。

2

 

用户(角色)案例

了解目标用户对网页设计十分重要。为了测试想法和假设,我根据Google新闻的目标用户做了4个虚拟的人物,来分析他们需要什么,哪些功能是有用的。根据用户需求,我写下了现在存在的以及可能的Google新闻的新特征。

3

 

特征与功能

根据对线上版本及用户研究结果的分析,我进行了一场头脑风暴。我们试图去找出需要哪些功能,调整哪些旧功能,哪些视觉上的改变可以提高用户的满意度。

头脑风暴后,最重要的点被列了出来,他们分为两类:产品功能及视觉。

4

 

用户情景

功能必须满足目标用户的需求,为了让这个目的更真实,我根据“用户案例”设定了许多用户场景。

5

6

 

交互与设计原则

一旦用户需求被确定之后,我们就可以创建一个网站地图。我们的目的是要尽可能简化这个结构,减少用户完成任务的步骤。

 

原型及线框图

由于我定义了Google新闻改版的目标和网站地图,那么到了定义新页面流程框架的时候了。

我画了上百张原型图去确定页面内容和设计样式。

7

 

8

 

9

 

10

 

情绪板

在创建线框图的同时,我收集了情绪板。它包括每一个可以给我带来灵感的内容,帮助我去找到更好的、更有创造力的感觉和表现方式。通常线框图和情绪板我是同时制作的。这不仅创造了页面良好的体验,还可以带来许多设计灵感。

11

 

板式和栅格

标题采用了roboto Font,可以很完美的表现Google简洁的品牌。文章字体选择PT Serif,适用于绝大多数系统。

栅格12列,8像素行,是Google许多新设计的典型标准。

12

 

一段长时间的准备期后,我开始聚焦于设计。我设计了每一个页面,设置和交互控件,总共花费了5周的时间。这些设计是完全响应式的并具备了很好的交互体验。

13

14

 

首页下滑

15

 

添加你喜欢的新闻来源和语言

16

 

一步添加新闻分类

17

考虑不同的观点,在一定的情景下阅读新闻。

新闻报道永远是Google新闻产品核心特征之一,现在google用户可以创造他们自己的报道和故事了。他们可以设置标题、内容和媒体文档,发表自己的观点并告诉全世界。可以很方便的浏览每一条新闻。

 

浏览新闻

18

 

新闻头图

19

20

 

新闻总览

21

它关于功能、可用性和用户体验

 

文章预览

22

 

增加内容到报道中

23

 

创建自己的报道很容易

24

25

26

27

 

它关于响应式设计

28

 

 

后记

Google新闻再设计项目只是为了学习目的,并不真正投入开发和使用。我将我的想法投入再设计的过程中,希望Google 新闻考虑去让新闻阅读体验更丰富、交互和原创。

浏览:0 喜爱:
分享到: