高软作业3-基于xiaopiu的短视频原型（抖音）
基于xiaopiu及其平台的公开的抖音设计组件、图片，实现了一款（模仿抖音）短视频软件的原型~（因为无论从产品设计，还是界面设计，抖音app都是做的十分完美的）
部分截图未向作者申请版权，若有侵权，烦请联系我。
为什么做短视频原型？为什么要仿照抖音？
短视频类app逐渐成为年轻人热衷的手机必备app，代表了一种时尚和新潮，大众化的体验能够使得每个人都能轻易拍出想与其他人分享的视频。
抖音app在短视频类app中，以酷炫的页面、拍摄视频时可自动调整的节奏感、新潮的拍摄风格和视频配乐，令众多年轻人喜爱。
原型演示环境
点击 链接 或复制 https://www.xiaopiu.com/h5/byId?type=project&id=5bbc64f7b3dccb06bc02111a 到浏览器 或 扫码浏览
实测可以在Chrome 69.0.3497.100版本上演示。
该原型为iOS软件的原型，软件适配iPhone 6-8。
如果在手机网页上以非全屏模式浏览，体验可能不太好，但部分功能如拍摄视频时拖动选择相机模式，在电脑浏览器上可能无法演示，仅在手机上可以展现。
产品功能
信息流首页
同城页面
发现附近有趣的视频
发现页
发现热门有趣的内容
视频录制页面
底部的拍摄图标及滑动效果，来源于xiaopiu的公开页面库，背景为抖音上用户真实视频截图（侵删）
接下来我将介绍相关的设计理念
设计理念
首页
不同于快手的4个视频首页给用户带来的困惑感
抖音的index页面只有一个正在播放的短视频。
靠着高效的推荐筛选算法，抖音推荐出用户最感兴趣的视频，在小小的手机屏幕上，只显示一个视频，降低用户的选择困难，降低用户精力的分散，给用户以身临其境的沉浸感，使用户集中注意力于当前的视频中。
首页隐藏了手机本身的导航栏（信号电量时间等信息），用户在使用时，常常会不自觉的发现花了好多时间，虽然沉迷抖音是很浪费时间的事情，但从产品上，从kpi上，这种做法是很成功的。
交友功能
”同城“短视频，消息中心，好友功能等，满足了用户的社交需求。
做原型时遇到的坑
有时关联事件失效
”推荐“页和”同城“页上的页内导航栏，是同一个导航。”同城“页里的导航引用了”推荐“页的导航，由此，我需要设计页面的联动效果，比如点击”同城“后，“同城”字样要变大，跳转到同城页，”推荐“二字要变小。
xiaopiu提供了组件元素的关联事件，我设置好了关联事件后，在”推荐“页点击”同城“，效果正常，再点击”推荐“，效果正常。。。多点几下后，就会出现异常。。。感觉可能工具有点问题或者就是我没深入熟悉这款工具
提交作业的时候又发现一个问题，在原型编辑时预览，关联事件正常。分享后预览，关联事件不正常。。
底部导航栏消失
在“同城”页，页面下滑，底部导航栏依附于底部，这是预期效果。
在“发现”页，同样的设置，效果不一样，导航栏会消失。。。暂不清楚原因，只好删掉了“发现页”超出屏幕的部分
展望
已经实现了短视频，社交功能，后续可以独立分拆一个社交工具，类似于Facebook 的 messenger
posted on 2018-10-09 19:55 cuiguohua1994 阅读(812) 评论(0) 编辑 收藏 举报
