CMoney软体工程师战斗营_期末专题製作_Week 17

是时候来清这里灰尘了
这两週实在是过得水深火热
接下来我会补齐这两週事件
17週多半是在刻画面,后期开始接api
18週就是大量的接api,跟补上还没做的功能和画面

老样子！
我会用前后对照方式呈现(还好製作过程有截图)

以下是大量产图的17週：
申明：本週都是开发时方便用的色块,美术部分都是在后面两週补上

---

上一週先做好大厅空间
所以这週着重在个人空间上面

1 房间草图

首先我也想做跟大厅一样3D空间感
所以也是拿一个乾净的3D图来做底

背景上色

遇到的问题：因为他背景同色,我无法直接填满某区块颜色,所以就用了网站去圈选我要的区域后再填色
使用的工具网站：https://pixlr.com/tw/e/
ps(我做游戏也是靠着这网站来解决图片相关事情)
然后这篇有我使用的配色网：https://coolors.co/

接着我开始摆上我要用的功能-草图

红色圈圈处就是将来我要做的功能
这边一一介绍：(按照我实作顺序(重要程度))

书柜：个人看板，类似于部落格,里面会有查看看板,发文,预览及留言功能日记：房主才能使用,可以编辑文字和图片,月曆可以查看哪些天有纪录电脑：聊天室,可以和另外六位室友私讯照片：可以放三张照片当摆设衣柜：更换房间样式

完成图

---

2 部落格草图
文章预览草图：

原本想坐旋转木马,花一早上,失败了就改掉,改成熟悉的拉霸～

以下是后来考虑的,我的后端伙伴说还是之前三个文章呈现就好
完成图-文章预览画面

完成图-文章发文(之后有改版)

---

3 部落格留言板
文章浏览与留言板草图：
(文章附图版草图)

完成图

(文章未附图版草图)

完成图

文章浏览以及留言是参考脸书facebook的文章查看

---

4 日记
草图：

完成图：

日记中的月曆是使用套件：vue2-datepicker
参考文件：https://github.com/mengxiong10/vue2-datepicker/blob/master/README.zh-CN.md
但我这边在下週(18週)已经改成别的套件
原因是这套件我研究很久都无法成功设定标记日期颜色
而这款套件在网路上研究分享的资讯偏少所以最后改成vuejs-datepicker
参考文件：https://www.npmjs.com/package/vuejs-datepicker
这样我就可以顺利标记我想要的日期啰～
之后串接完api有资料的日期会像以下照片中出现浅蓝色标记：

---

5 聊天室
草图：

左边就会出现其他6位室友的头像和名称,右边就会是聊天内容以及传送讯息框

完成图：

---

以上大致就是我17週做的事情
接着我会在18週纪录我串接的坎坷之路
加上串接后的画面也会更加完整～
欢迎大家提出建议给小妹
感谢收看!