网页设计与外观设计(网页设计与外观设计的区别)

　　Pinterest 的Feed 页面重新设计

　　为了2016KPCB设计奖金，我重新设计了Pinterest，这个我经常来收集想法和发现灵感的产品。我的重新设计并不是一个彻底的视觉上大改观，而是对主页上一些组织结构和重点的改变。

　　现在打开Pinterest是需要下载代理使用的

　　问题

　　Pinterest是一个神奇的数字画板，通过其视觉布局我们可以发布和采集各种各样的创意。

　　这种随机展示帖子的方式有一个问题，就是它只适用于Pinterest的低频用户。对于订阅和关注了大量内容的用户，他们会被一大堆帖子所包围而目不暇接，尽管这些帖子本身有趣且吸引人，但整体看时却不适合。换句话说，在我浏览页面的时候，这些充斥Pinterest feed的繁杂内容实际上会让我分心。

　　这是我当前的Pinterest网页截图。单独来看，每一个帖子都很有趣。但整体看时，这些帖子并没有很多相似性，浏览起来非常分散注意力。

　　我的主页上的帖子是相当不同的

　　其他一些小的设计缺陷的存在——例如“new pin”按钮的可见性（你能在上面快速找到它吗？），以及页面的拥挤感。我接下来会尝试解决这些问题。

　　调研

　　我和两个好友——玛格丽特Cheng和乔纳森楚 ——谈论了他们当前对Pinterest的体验，来了解他们与主页的交互是怎样的。玛格丽特是Pinterest的一个高频用户，每天访问该网站来发现食谱，看看旅行目的地，浏览化妆/时尚潮流。乔纳森也经常浏览Pinterest，但不会定期地pin到自己的board。

　　他们都喜欢这样的布局，指的是Pinterest易于一次浏览大量不同的内容。

　　“Pinterest用起来很有趣，因为图片随机地出现在你的feed。”

　　他们也对设计的外观进行了评价。

　　“配色方案，以及图像大小的相似性使它非常美观。”

　　我同意！

　　Pinterest是数字化的pinboard，其排版包容了所有帖子的随机性和自发性，我们已经渐渐习惯了。Pinterest是一个获得灵感的好地方！我根本就没想过要去改变网站的视觉“感觉”。

　　当被问及特定主题的可视性时，玛格丽特表达了这一观点：

　　“我希望能够紧紧追随心中所想的目标（比如：找到一个馅饼配方或一个露营活动），而不是被动地浏览一些不相关的帖子。”

　　这正是我的感受！我喜欢当前的主页，但我也希望，当我脑海里有一个具体的主题时，Pinterest的主页能够为此时的浏览提供一定程度的组织划分。

　　原型设计

　　我喜欢从草图开始，只是为了获得页面布局的感觉。在我开始之前，我认识到在不同类别之间必须有一些视觉上的分隔，但我不确定如何结束一个类别。Pinterest是独特的，因为每张帖子都有不同的高度，所以几乎不可能保确保每一栏的帖子都结束于同一点。在原来的设计中，它有一个无限滚动的特征，这是没有问题的。

　　一个速写

　　Pin 类别

　　我快速画了一个总体布局的草图，并打开Sketch创建一个高保真原型。在最终选择使用左边的这版之前，我想出了2个不同的改版方案。我感觉，相比锐利的线条，这种微妙的渐变创造了一个更为平滑的“结束”过渡，并且它更好地暗示了下面还有更多的内容。

　　两种模型

　　我设想，为每个用户展示三个部分，建议内容以在他们最近的活动和查看最多的类别为基础。点击某一组下面的“查看更多”将扩展页面显示更多的卡片，如下面的动画：

　　animation made in framer.js

　　在浏览过这三块内容之后，该应用程序可以开始显示随机推荐的pins，正如它目前的显示。这个想法是这样的，一旦用户跃过这三个类别，他或她很可能没有一个具体的想法，而只是想随意浏览。

　　Pin 提交按钮

　　主页中另一个需要重新设计的地方是“submit new post”按钮。以目前所在的位置，提交按钮很难被找到，因为它尺寸小，与卡片相近，位于靠近屏幕下方的位置，并缺乏突出强调。

　　我设计了两个可以提高“new pin“按钮可用性的交互原型。在左边的截图中，按钮位于导航栏的最右边，类似于许多其他的web应用。右边截图的特点是右下方较为突出的按钮，这一灵感来自Material Design 的FAB（浮动动作按钮）。

　　FAB超级灵活，因为在鼠标悬停时它可以展开来显示其他选项—— 如选择不同的上传选项。由于FAB的展开用来支持提交之前的不同选项是如此一种自然的方式，以及它的位置不离开当前视图，我最终选择了右边的原型。

　　导航栏按钮 vs. FAB

　　最后，另一个小的改变是增加左，右两边间距。我明白Pinterest想要在屏幕上显示尽可能多的帖子，但根据我进行的用户研究和个人经验，当前布局过于杂乱和密集。我觉得两侧充足的空间，会产生一个更好的浏览体验，而且并没有从页面里删除太多列。

　　总结与迭代

　　虽然我在视觉上的改变不显著，帖子的按类别重组和增加的空间着实改变了Pinterest的用户体验。现在用户拥有的是一些他们感兴趣的类别，而不是随意分配的帖子。有了这个改变，我希望像玛格丽特和乔纳森这样的用户可以“坚持一个心中的目标”，并集中于一个特定的类别，在有这个需要的时候。

　　本文由“拼图素材”发布

　　2017年4月7日