iT邦幫忙

1

CMoney軟體工程師戰鬥營_專題製作改善ui/ux_Week 19

  • 分享至 

  • xImage
  •  

在這裡我就直接開門見山丟上我最終畫面了
網站(再過幾天服務應該就會到期)
http://crypto-monolith-316105.an.r.appspot.com/#/
這是我剪的簡易影片
Yes

https://ithelp.ithome.com.tw/upload/images/20210711/201355341bmAagg2DZ.png
在登入畫面多了忘記密碼的寄信功能
也把網站介紹給補上

https://ithelp.ithome.com.tw/upload/images/20210711/20135534H3ZnQACusf.png

大廳
https://ithelp.ithome.com.tw/upload/images/20210711/20135534tBTeB3Jrx3.png

功能提示
https://ithelp.ithome.com.tw/upload/images/20210711/20135534mzfyI7lPFM.png

左邊牆上電視-toutube影音分享
這裡是串接youtube的api獲取影片名字
https://ithelp.ithome.com.tw/upload/images/20210711/20135534MBq7kxwEIn.png

大廳右邊冰箱-匿名留言板
https://ithelp.ithome.com.tw/upload/images/20210711/20135534qps8y7LE4I.png

房門頭像-名片
https://ithelp.ithome.com.tw/upload/images/20210711/20135534QCl9qTAsY8.png

房門上頭貼-進入使用者房間
https://ithelp.ithome.com.tw/upload/images/20210711/20135534F6w2hCpY1l.png

此為初次進入畫面
之後可藉由衣櫃改變裝飾

還記得這是我在17週寫下的
現在就呈現最終畫面

書櫃:個人看板,類似於部落格,裡面會有查看看板,發文,預覽及留言功能
日記:房主才能使用,可以編輯文字和圖片,月曆可以查看哪些天有紀錄
電腦:聊天室,可以和另外六位室友私訊
照片:可以放三張照片當擺設
衣櫃:更換房間樣式

書櫃
所有文章的預覽縮圖
沒有圖片的話會是玩家頭像(右一)
https://ithelp.ithome.com.tw/upload/images/20210711/20135534sCfs1kzeq5.png

點開文章
房主可以編輯文章,刪除文章
文章下方可以供大家自由留言
https://ithelp.ithome.com.tw/upload/images/20210711/20135534TlBNaAmPvw.png

日記
我換了另外一個插件-DatePicker
我才能輕易做標記動作
有做rwd
https://ithelp.ithome.com.tw/upload/images/20210711/20135534UNfXP6OUj6.png

https://ithelp.ithome.com.tw/upload/images/20210711/20135534Py0ii4T6lg.png

電腦
這邊很可惜來不及研究socket
使用定時器,固定每1.5秒去呼叫api得到目前聊天記錄
https://ithelp.ithome.com.tw/upload/images/20210711/20135534NvZU0FjblK.png
有趣的是
我的partner會用這個功能跟我溝通

照片
也就是房間左上角圖片
可以進來設置照片
https://ithelp.ithome.com.tw/upload/images/20210711/20135534hnYuBWkr3d.png

衣櫃
原本想拿來做成就系統
也就是互動越多的人(依據發文跟留言)可以獲得更多家具
但時間來不及就只好開啟金手指模式
https://ithelp.ithome.com.tw/upload/images/20210711/20135534zsCiDrH0k8.png
藉由衣櫃可以打造不同風格的房間
https://ithelp.ithome.com.tw/upload/images/20210711/20135534NxncEVQb5Z.png

再來就是為了讓使用者認識不同的人
我們提供搬家功能-讓使用者自主搬移到排除本社區之外其他人數最少的社區
點擊右上角設定後再點選搬家
https://ithelp.ithome.com.tw/upload/images/20210711/201355346xDRAitLJr.png

選取確認,就可以順利離開
https://ithelp.ithome.com.tw/upload/images/20210711/20135534l7tw9XQugo.png

搬家可以帶走的:
房間裝飾、相片、文章、日記、大廳上傳的yt影音

以上大致就是我們的網站功能!


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言