4.原型设计图
全局说明:
- 键盘划入:当输入文字时,键盘从下往上滑出,并做好用户行为回馈(回复时显示@名称、字符限制等)。
- 上传提醒:在右下方显示“写说说”固定浮窗按钮时,效果随页面滑动不断动态变化。
- 话题地点:用颜色/icon突出显示“话题”“地点”,支持用户点击后跳转对应界面。
- 页面交互:注意滑入和滑出的多种方式穿插(从左往右,从下往上等)。
- 互动特效:整体互动注重交互效果多样化。如:用户点击“删除/举报”后,页面显示确认弹窗,弹窗均以从底部向上弹出的形式展示,弹出时全局背景变暗,仅有弹窗为白色背景;用户“查看全部评”后支持“收起”,做向下拉/向上收的动态特效;用户“点赞”支持动态变红。
三、“说说”功能分析
1. 说说入口
主要有三大入口:
- 从“消息-动态”里查看关注人的单条说说详情,从而进入用户主页;
- 关注页置顶条的说说更新提示,发布对象为关注的用户;
- 用户主页有说说tab,可快速查看指定用户的说说动态。
1)个人动态
——在个人中心的“动态”里加入关注的人发布说说的提醒
页面信息:发布人信息(头像 昵称)、内容信息(文案、图片、话题、定位)
交互设计说明:
①界面风格:仅显示基础说说信息,不显示互动信息,秉持整体通知界面的简洁风格。
②页面跳转:点击整个说说区域可直接进入用户主页的说说界面,并且在说说feed流中标明该条说说。(点击指定话题和定位可进入对应feed流,非用户说说feed流)
2)首页关注提醒
——在首页“关注”tab顶部增加说说更新的提醒横条
页面信息:发布人信息(头像)、数量信息(说说更新条数)
交互设计说明:
①刷新提示:在用户下滑刷新时“刷新图标”在说说横条上方,标明说说更新提示也有更新。
②界面交互样式:点击横条用户可进入“关注的人”发表的说说feed流,界面交互形式为从右往左快速滑出
3)用户主页(本人/他人)(既是说说入口页又是浏览页)
——在主页tab栏增加“说说”栏
页面信息:用户基本信息、数量信息、内容信息、互动信息(点赞量、评论量)、管理信息(删除、举报说说)
交互设计说明:进入用户主页点击“说说”tab进入指定用户说说页面。
①未发说说:当本人未发表过说说时,a.对于新用户:页面设计“图标 文字”引导用户发表。b.对于老用户:后台计算用户注册天数,系统生成现成说说,支持用户一键发送。
②前往广场提醒:用户滑至说说底部才显示“前往广场”提醒。当浏览他人主页,他人未发表过说说时,直接提醒用户“前往广场”查看其他说说,该处设计突出“广场”和引导。
③上传说说提醒:在右下方显示“写说说”固定浮窗按钮,效果随页面滑动不断动态变化。
④话题筛选:当用户有多个话题说说时,界面自动显示话题筛选tab,用户选中后突出显示。
2. 浏览说说
1)说说广场
——主要用于同城社交的feed流。
页面信息:用户基本信息、数量信息、内容信息、互动信息(点赞量、评论量)、管理信息(删除、举报说说)
交互设计说明:同上方的“全局说明”。
另补充:
①广场背景:说说广场的顶部背景当有指定主题/定位时,显示指定主题/定位和说说数量,设计城市和主题对应的背景图。否则默认显示“说说广场”和说说数量。
②用户举报:用户跳转后前三项均可直接选择,但其他必须详细书写,此处注意举报按钮的状态切换