劳村二手市场诞生记

子曾经曰过：「学而不思则罔，思而不学则殆」。

以前总觉得总结复习是一件浪费时间的事，不如把时间花在学习新事物上。然而，这并没有什么乱用。时间一长，发现老事物渐渐淡忘，连回忆都无迹可寻；新事物也不成体系，终将退化成老事物，如此反复而已。

1. Ideas

本文将作者近期产品设计思路进行总结，展示，便于日后使用。

由于发现 QQ 群里很多同学有购买二手商品的需求，而以前正好使用过类似网站 华科二手街。心想，不如在劳村尝试建立一个二手购物网站，方便大家的生活。Follow your heart, just do it!

首先确立网站需求，下方是最初需求说明书，只是为了和程序员达成一个共同的概念。后期出于效率考虑，基本改为线上沟通需求。

产品需求说明书

「中国人劳伦斯二手市场」

产品简介：
一款针对于劳伦斯中国人的二手市场交易网站，供大家交易闲置用品，如车辆，手机，电脑，家具，数码配件，图书资料等。

产品背景：
由于 lawrence 的留学生或者说中国人数量逐渐增多，大家的闲置物品逐渐增多。部分人人希望能过卖出旧商品再购新商品，部分人觉得一手商品太贵，想购买二手商品减轻经济负担。因此无形中就形成了交易闭环。而目前的交易手段通常是QQ群内内部沟通。然而，时效性和广度成为了及时通讯的一个重要障碍。而一款简单的分类展示网站则可以很好的解决这一问题。

技术要求：

• 需要有强大的后台管理功能延展性，便于后期功能迭代
• 需要具有电脑端和移动端两种布局，可以自适应，也可以根据设备判断进入不同网站（沟通下，初期移动端可以只有瀑布流展示功能，其余功能引导到电脑端执行）
• 使用Google Analysis 或者 百度站长 之类的分析功能，或者后台模板自带，需要知道用户的总数量和增长量
• 服务器在国外，为快不破，网站一定要快，除搜索以外，一切功能均给速度让步。

产品功能：

产品功能

协作平台：
Worktile

其他：
略。

---

确定初步功能后，需要将功能细化。一是方便程序员开发，二是梳理下自己的思路，发现遗漏和需要补充的地方。下方是最初部分功能说明，后期也均改为线上沟通。

产品功能说明书

「中国人劳伦斯二手市场」

用户注册

表单域
1.昵称
2.邮箱
3.密码
4.确认密码

设计细节
1.输入框和按钮样式需区分
2.密码需要隐藏
3.按钮不要使用图片，用 CSS
4.按钮 hover click 时需要有效果
5.邮箱不需要链接验证，密码两次输入正确即可登陆
6.登陆后显示随机生成的卡通头像和昵称

后台管理

表单域
1.发帖用户昵称
2.发帖时间
3.发帖名称[链接]
4.发帖内容

功能
1.删除商品
2.删除帐号
3.推荐商品
4.今日特惠
5.分类筛选
6.撤销操作

分类导航

表单域
1.代步工具
2.数码产品
3.电器家具
4.图书教材
5.其他

设计细节
1.点击分类链接跳转到相应界面
2.预留二级分类导航，可根据实际情况添加细分类别
3.前期强化分类，弱化搜索，强迫用户多浏览，少搜索

导航详情

表单域
1.时间由近及远排序
2.价格排序[从低到高，也可从高到低]
3.热度从高到低排序[即浏览次数]

设计细节
1.点击分类链接跳转到相应界面
2.预留二级分类导航，可根据实际情况添加细分类别
3.前期强化分类，弱化搜索，强迫用户多浏览，少搜索

其他
略。

---

2. Prototype

接下来就是原型图的制作了。我觉得如果是小规模团队，最有效的方法就是在纸上画。软件做草图有点杀鸡用牛刀的赶脚，装逼的成分远大于实用。

The art of iterating quickly 是篇如何高效使用原型图迭代开发的文章，很实用，里面推荐的 Web tools 真真是极好的。

后台管理界面可用即可，丑无所谓了啦，哈哈。点击访问

后台原型图

前端展示界面原型图如下：

index.html

发布商品界面

商品详情界面

个人中心

二级界面

UI Kit

---

3. UI Design

原型完成了, 要出设计稿了。因为干活的一共就俩人，一个我和程序员的基友世界。所以硬着头皮做设计吧，东抄抄，西抄抄，再加点自己的 ideas, it is really a hard way to go. 但好在人少，所以沟通完全不是问题，小步迭代即可，毕竟需求总是反复变化。Haha，hopefully I won't be killed by developers.

这次用 Sketch 做设计稿，总结了如下经验：

1. 善于使用网上现有资源，it is gonna save you a lot of time.
2. 多下载些插件，大幅度提升使用软件效率。
3. 先画草图再做设计稿。看似浪费时间，实则事半功倍，至少我是这样的。
4. 设计的时候从最小单元开始。先确定颜色，字体；再按钮，弹出框等控件；然后是 Header, Navibar, Footer 等组件; 最后将它们整合一个个完整的界面。
5. 第一稿尽量关注易用性，怎么开发容易怎么设计。重交互，轻视觉，实用即可。PS: Zeplin，which helps developers get the pixel-perfect specs they want.

设计稿如下[非终稿]，边开发边改撒~

UI Kit.png

Index.png

分类界面.png

商品详情.png

我要发布.png

商品发布规则.png

搜索结果.png

个人中心.png

个人中心 2.png

展示稿

---

4. Develop

到这里，我的任务应该就结束了，呵呵，not yet。下面才是最繁琐的事情，催开发，哈哈哈。不会催程序员的设计师不会是一个好的产品经理。

开发任务分配

网站还在开发中，保佑程序大神最终克服一切困难，将其实现。

---

大家如果有任何想法或批评，欢迎和我联系。野子joey

There are always people who are richer than you. So not only focus on your money, but also on your work.
-- 野子Joey

原文链接