——————————————————————云客网您网站的流量加油站
MATERIALDESIGN实战!FEEDLY创始人再聊改版实战经验
编者按:上一篇关于FeedlyUI设计实战的文章,实际上算是Feedly团队去谷歌总部交流学习的经验总结,按照MaterialDesign的规范设计了界面,但是并非最终的版本。重返谷歌总部在此交流之后,Feedly团队最终作出原型,并完成了整个APP改版,这篇文章就由此而来。
几周之前,我们在谷歌总部参加了一个MaterialDesign的研讨会,在那里我们探索了一下Feedly如果遵循MaterialDesign的设计规范会是什么样子,并随后撰写了一篇文章《MATERIALDESIGN实战!FEEDLY创始人聊聊改版实战经验》,做了简单的经验分享。
2月10日,我和我的团队成员Edwin与Sean再次回到了Google总部,同MaterialDesign团队更深入地探讨了设计技巧。坦率的讲,谷歌的艺术总监RachelBeen真心是我们的良师益友,她同我们详细讲述了MaterialDesign的几个核心设计原则。
通过在Google的车库长达2年的交流,我们为Feedly真正意义上完成了一个可运行可交互的设计原型。通过几周时间的打磨细化之后,我们最终完成了第一次符合MaterialDesign的产品。现在你已经可以在GooglePlay上下载最新版的Feedly了。(国内的朋友可以在诸如酷市场这样的APP软件商店下载到来自GooglePlay的原版应用)
情感化体验设计
在Google的这两天,我们专注于重新思考用户探索体验的视觉设计。当用户刚刚使用Feedly的时候,会看到APP的介绍,并且通过逐步引导开始构建适合用户自己的新闻和信息源,而这个过程就是我们所说的用户探索体验。面对这个环节,Rachel主要的设计方向是让这个过程的体验更富于情感,更加身临其境,所以她提出了以下倡导:
视觉设计高于文本:如何用图像替代单纯的文本标签更好地呈现每个元素?
SEO排名http://www.yuntask.com/——————————————————————云客网您网站的流量加油站
策划优于算法:我们能否基于人的策划和想法来提供搜索结果,而非使用单一的算法来推荐最优结果?
精选而非扁平的列表:让搜索结果以不同层级呈现,显示推荐的元素或内容,而不是单纯的列表,让用户能获取最优的内容。
文章排版优于图片堆叠:使用动态的视觉设计而非简单的静态堆叠。这样的设计尤其适用于“话题卡片”。
推荐优于基本的搜索:如何在构建核心用户体验的时候,向用户推荐相关内容,而不是让用户专门去搜索特定内容。
我们写将这些原则写在白板上,并且将其纳入到原型设计中。我们并非要将所有原则一一实现,而是要借助它们获取灵感。
我们将这些想法纳入到Feedly的发现体验设计中,这部分的界面由两屏组成:
“探索”
在这个地方,用户可以搜索他们感兴趣的内容,也可以搜索他们向关注的特定站点。另外我们也为他们推荐了一些话题,帮助他们获取灵感,找到他们想要的内容。
“搜索结果”
搜索结果界面展示了那些与话题或搜索关键词相匹配的博客与网站。
SEO排名http://www.yuntask.com/——————————————————————云客网您网站的流量加油站
使用纸模来制作发现体验环节的原型。探索
在“探索”这一屏,我们使用了栅格和图片来代表一系列话题,我们将这一部分成为“StarterKit(新手工具箱)”。但是设计这一界面有一些里痛点:
并列的三个卡片挤在一起让它们难于被浏览话题的可读性较差整个体验算不上身临其境
所以我们决定更大胆的视觉设计和更大的卡片。我们还为每个卡片列出了子话题,确保用户在选择卡片的时候,能够明白他们所探索的站点的类型。举个例子,我们在“设计”的卡片下面会列出“建筑”、“平面设计”和“UI设计”。为了防止列表太长并难于浏览,我们参考最初的6个原则,为这些子话题设计了更小的卡片。
SEO排名http://www.yuntask.com/——————————————————————云客网您网站的流量加油站
搜索结果
通过选择话题或者关键词来搜索之后,我们习惯于使用扁平化的列表来呈现结果,但是这一会存在以下缺陷:
这个列表并不会让用户有参与感,更不会身临其境用户很难知道搜索出来的网站和源到底是干什么的我们很难向某些小众读者推荐那些真正炫酷的网站
上面的这些问题最终导致读者很难决定将哪些网站添加到他们的Feedly源中。
SEO排名http://www.yuntask.com/
相关推荐: