FellowPlus 看项目频道改版设计总结(原创文章)

　　1 简介

　　1.1 关于 FellowPlus

　　是一款帮助投资人找项目和帮助创业者找融资的产品，投资人和创业者看到的部分界面有所不同。

　　1.2 关于『看项目』频道

　　是投资人端“首页”，含项目卡片页（以下简称卡片或卡片页）和项目详情页（以下简称详情页）。

　　卡片页展示一个项目的最主要信息。卡片页和详情页都可以对项目表态：感兴趣、不感兴趣。

　　2 现状

　　2.1 卡片页

　　2.1.1 视觉及内容部分

　　

　　看图，其中卡片右上角的“创业者投递“表示来源，卡片中间的标签分别表示项目的融资、领域和团队情况，卡片下方的数字”1/40“表示共有 40 个项目，这是第 1 个。

　　2.1.2 交互部分

　　两种交互：点击和划动。

　　卡片可以被划动，左右上三个方向。

　　卡片被稍微拖动后左右上三个方向的边缘会出提示，告诉用户每个方向代表的意思：左划代表『不感兴趣』，右划代表『感兴趣』，上划代表『待处理』（暂不明确表态的意思）。

　　划动后会在屏幕上直接看到下一张项目卡片，没有明确的视觉信息高速你刚才划动成功了，这是交互上比较突兀的一个地方。

　　3 改版

　　3.1 需求

　　一切以需求为导向。先说下需求关键点：

　　1 核心需求

　　卡片页展示项目最主要信息：项目标题、一句话介绍、三大类标签，这些信息需要被 突出；可以在卡片页和详情页对项目表态；

　　2 基本定位

　　卡片页对项目表态仅是一个便捷，不鼓励用户这么做；非常希望用户在详情页对项目表态。

　　3.2 卡片页

　　3.2.1 视觉及内容部分

　　

　　主要优化部分：

　　1 关于三大类标签，综合考虑空间有限及标签长度和标签数量问题，我们一开始尝试了纯文字展示标签，发现效果奇差，这些标签会被湮没在茫茫文字中，所以最终还是选择了矩形的标签样式。

　　2 增加了对划动手势的解释。我们认为，用户在出手划动前，就应该知道每个方向划动的含义，这样划动时才可以果断而顺畅。

　　3 三大类标签，从视觉上区分出来了，每一类前面加了一个小图标，出于美观和阅读体验的考虑。

　　4 标签改成了一个虚线描边的形式，因为我们认为这个地方文字本身才是最重要视觉上需要最突出的部分，背景应该适当弱化，原有设计的背景填充色有点太重了。虚线描边这个方案借鉴于 web 端的天猫，当然这不是唯一的方案，也许也不是最好的方案。

　　5 项目数量方面，改成了只显示还剩下多少个项目。我们的考量是，卡片页秉持简单的原则，只显示最重要的信息。

　　6 关于项目来源，大部分都是创业者投递（未来有转发、推荐等），我们视之为一般情况，一般情况不再标明来源，不然显得很啰嗦。

　　7 顶部导航两测的“筛选”和“待处理项目”统一改成了文字。当然也可以统一改成图标，但是囿于时间，当时缺一个图标。

　　8 图里看到的主色蓝色及 tab bar 的图标，是我后来优化的，当时的优化里并没有加进去。

　　3.2.2 项目卡片和交互动画

　　下面和大家重点分享一下项目卡片本身和『划动卡片』这两方面的内容，二者会结合起来。

　　『划动卡片』的交互

　　目前有三个方向的划动，我们一致认为未来理想的方案是去掉『待处理』，因为用户不表态什么也不做就等于是这个项目要『待处理』了，没必要刻意表态说这个项目我『待处理』。

　　下面就只剩『感兴趣』和『不感兴趣』了，我的提议是上划代表『不感兴趣』，下划代表『感兴趣』。

　　其中灵感来自 iOS 和 Smartisan OS，iOS 里关闭应用的手势是上划（类似于 say no 和『不感兴趣』）， Smartisan OS 里面挂掉电话（（类似于 say no 和『不感兴趣』）是上划来电时的卡片，接听电话（类似于 say yes 和『感兴趣』）是下划来电时的卡片。

　　老罗也分享过说上划有一种去你妈的的气势。

　　表示赞同，因为我们用手机的时候，手机通常和我们的上身呈一定的比例，此时上划卡片，从空间上来讲，卡片会离我们远去，有一种被我们扔掉和抛弃的感觉，下划的话则会离我们更近，有一种到我碗里来的感觉。这个方案符合我们潜意识里的情感化表达。

　　卡片本身

　　我们有两个入选的方案：放三张卡片，放一张卡片。

　　三张卡片的特点：

　　1 更直观的提示到还有很多项目没有处理；

　　2 可能会给用户一定的心理压力（总是还有这么多项目没处理完）；

　　3 交互动画的处理上有优势：通过放大下面的卡片制造出浮出来并代替刚才那张卡片，就可以传递出刚才的划动成功了信号。

　　一张卡片的特点：

　　1 视觉上更简单，跟三张卡片的特点基本上是反过来的；

　　2 对我们团队而言最大的问题可能在于交互动画的自然顺畅与美观：一张卡片意味着所有卡片是横向并排的（竖向太奇怪，已被排除），那屏幕内的卡片被划到哪个位置时下一个卡片开始出现（一般从右侧）？如果做到两张卡片顺滑交替是不是要像 iOS 双击 home 键后各个应用卡片重叠排在一起？……总之牵涉其中的问题蛮多，且没有现成的方案可参考，最关键是我们没有动效设计师。

　　我们的现状：

　　三张卡片潜在的压力可能会使投资人用户更多的在卡片页对项目表态，但这不符合我们的定位；

　　而且我们希望用户体验尽友好、尽量不给用户带来压力，但是综合考虑实现还是选择了放三张卡片，接下来就需要在视觉上弥补一下：把剩余两张卡片做的弱一点。

　　3.2.3 一个插曲

　　还有一个值得一提的插曲是，设计前我有去看到国外的 Down 和 Fleck 这两款应用，它们都有一个交互是照片居中，上下各有两个图标或其它元素表示两种表态，你可以上划下划来表态。

　　我们考虑过要不要这种方式，最终选择放弃，原因是照片/卡片上下方的图片会形成强引导强压力，这种情况下用户表态一定会更频繁（可以通过 Fleck 感受一下），而这和我们的定位不符。

　　3.3 详情页

　　

　　

　　3.3.1 概述

　　根据内容的重要程度，对其进行重新整理与摆放，这块主要是做优化，不再赘述。

　　3.3.2 关于模块标题

　　以前的模块标题是被强调的，现在被弱化了：字号不大，而且颜色很弱。

　　开发的时候工程师还带着丫是不是傻啊的笑容问了我：标题不加粗正文加粗？

　　我说这是一个好问题，然后准备解释。。。可惜啊，年轻气盛的工程师啊，不想听我废话。

　　举个例子，拉勾网自己的简历，你是看不到“姓名”、“学历”、“所在地”等这些标题的，因为不用看也知道“张三、本科、北京”什么意思啊。简历这里就是弱化标题，而且是最大程度的。

　　投资人用户看到的项目详情页，其大模版都是一样的，即模块都是一样的，不一样的地方在于模块里面的内容，所以需要被强调的是模块内容，需要被弱化的是模块标题。