导图社区 原型图交互说明怎么写?
从微观和宏观两个角度去阐述,如何去写交互说明;除了相关的理论介绍,还配备了相关的示例图片,帮助大家快速的掌握交互标注技能;
该合集包含互联网从业人员常用的知识合集,主要包含UI设计、交互设计、产品设计、运营设计、短视频运营、新媒体写作等等,涵盖范围广,内容丰富,希望对各位宝子有帮助。
该合集汇总高血压、高血脂、糖尿病、慢性肾病、通风、肿瘤和心脏病等7种慢性病,从基础的生理代谢入手,追本溯源剖析病因,把慢性病发生发展的整个过程捋清楚,让患者明白自己到底是怎么生病的,并且该如何饮食。
该合集中包含抖音直播创业的四大模块以及其他的相关知识,四大模块主要为学习准备,破冰破圈,提升技巧,收获成功,一共分为23个子模块,抖音直播创业人必备知识体系
这是一篇关于社群商业模型设计图的思维导图,主要内容包括:涵盖创始人发心、品牌体系等维度,系统呈现社群商业从运营到风控、IT 系统的全流程设计,为社群商业落地提供指引。
这是一篇关于全链路UIUE设计学习攻略的思维导图,主要内容包括:设计师成长的三个阶段,以及每个阶段所需要掌握的技能或者工具。
本思维导图为宝子们提供了小红书创业思路,AI宠物定制也成为了新宠,暂时没有方向的朋友们可以尝试尝试,希望对你们有帮助!
社区模板帮助中心,点此进入>>
安全教育的重要性
个人日常活动安排思维导图
西游记主要人物性格分析
17种头脑风暴法
如何令自己更快乐
头脑风暴法四个原则
思维导图
第二职业规划书
记一篇有颜又有料的笔记-by babe
伯赞学习技巧
原型图交互说明怎么写?
交互说明的作用
一、减少交互设计师与产品上下游人员的沟通成本
二、提升协作效率
三、避免项目返工延期
宏观角度
一、交互说明的文字要简短精炼
PRD中关于Banner功能的描述
交互说明中只需要提取出以下几点
用户点击Banner图跳转至对应页面;
Banner图少于2张时,不进行自动轮播,也不展示翻页点;
Banner图大于等于2张时,进行自动轮播,且展示对应图片数量的翻页点;
Banner图最小张数为1,最大张数为5;
用户可左右滑动切换Banner图片,同时Banner每隔5秒自动轮播无限循环。
困惑:产品需求文档里的功能点逻辑描述已经相当全面,还有必要再次 写到原型图的交互说明里吗?
解答:只要在交互说明里把有关交互的主场景和各种状态作简要描述即可,开发人员如果有困惑会仔细查看PRD的。
二、 页面元素的交互说明
模块构成
元素基础设置
交互动作
跳转逻辑
限定极限值
状态及状态之间转换的描述。
三、页面内容尽量使用符合逻辑的真实数据
避免使用XX符号或者无关联的数据替代,这样写出的交互说明贴近真实场景,容易产生代入感,使阅读者清楚明确。
四、交互说明考虑内容元素的特殊状态
极限值
错误提示
判断规则
五、 交互说明的排版布局要有助于阅读
原型图内容元素标上数字放置在上方,对应的交互说明放置在原型图下方;
或者原型图在左侧,交互说明在右侧,有的设计师也会把元素和对应的交互说明用连接线连起来。
六、 页面之间逻辑跳转的关联性需要交代清楚
七、交互说明组件化
比如上面提到的“Banner图交互说明”,就可以保存一份在交互说明库中,等后续画原型图再需要时,直接调取出来根据情况微调即可。
使用时快捷调用,修改时快捷修改
八、页面交互说明建议平铺直述,不建议使用动态效果
原型图的动态效果适合页面跳转的演示,但不利于交互说明的呈现,会给视觉设计师和开发造成阅读困扰。
九、交互说明应该依据具体情况不断调整完善
如果业务和产品临时调整需求,或者交互评审后需要对原型稿进行修改,则交互说明也要进行相应的修改。
微观角度
一、模式与场景
1. 硬件设备
横竖屏
对于支持横屏和竖屏两种显示模式的应用,要考虑到两者排版布局的区别,以及模式如何切换。
分辨率
不同分辨率会牵扯到适配问题,我们在设计界面时往往要根据应用的受众群体,兼顾不同屏幕尺寸呈现。
硬件交互
某些应用在进行某项操作时需要调起手机的麦克风、摄像头或蓝牙等,这时需要询问用户,让用户自己选择是否开启相应权限。
2. 模式
编辑模式
夜间模式
无图或省流量模式
低电量模式
3. 异常状态
异常操作
连续多次相同的操作给予的反馈,比如相同时间段内多次点击发送短信验证码,应用会提示隔几分钟之后再来尝试发送。
数据相关
服务器无法获取数据,数据加载时间较长等。
页面提示
尤其是对To c的产品,经常会有运营活动,有关某活动即将上线、活动失效、服务下线、系统繁忙等提示就必不可少了。
4. 账号权限
账号是否注册登录,直接决定了是否能使用该应用,或者是否能在应用内进行某些操作。
二、页面状态
1. 默认状态
默认状态是指没有对页面进行操作的初始状态。通常需要注意默认显示的文案、默认筛选项、默认调起的键盘类型,以及常见的列表默认排序规则等。
2. 正常状态
用户正常使用时遇到的页面状态。比如常见的登录/未登录、认证/未认证/审核中/认证失败。
3. 特殊状态
页面无数据
网络加载失败
无网断网等情况
三、操作与反馈
1. 刷新和加载
页面刷新分为自动或手动刷新。页面加载是指加载数据的过渡状态。比如在视觉设计中专门会利用页面之间转场的过渡或等待时间,设计一些情感化或品牌化的形象动效。
2. 交互方式
移动端用户使用各种手势操作,如常用的单击、双击、滑动、长按和3Dtouch重按等。
3. 操作类型
常见操作
错误操作
错误操作时要给出纠正反馈
特殊操作区分
特殊操作是指用户进行了一些无意或者极端的操作,仍然要有提示和预防机制,这种情况虽然很少出现但也需要考虑到位。
4、反馈
提示
用户操作后,系统给用户的及时反馈
跳转
点击某个连接后,页面跳转到哪里
页面来龙去脉
动画
用户操作后,界面的转场方式
四、数值限制条件
1. 取值范围
数据的正常取值是由产品需求,目标受众使用场景等因素决定
2. 极限值
页面元素最大值或最小值的显示规则。
五、文案
1. 是否合理
界面设计中我们经常容易忽略文案隐喻的重要性。
六、其他
1、应用通知机制
完成某步操作后,是否需要触发消息,通知用户
2、埋点说明
数据埋点,为上线后统计分析提供基础
3、技术可行性及实现难度说明
4、动效的交互说明
5、新老版本兼容
当优化某个功能时,需要考虑是否存在新老 版本兼容问题,是否需要提前埋点
6、用户身份
当某些功能并非开放给全局用户时,需要明确告知开发人员,哪些用户有此权限
7、首屏位置
标出首屏位置,为设计师提供参考设计