从选择需要添加的指标项---选择输入方式(手动输入&语音输入)---添加完成的一个流程的交互思考。
在原有的基础上优化选择的交互方式,以及两种输入方式的易操作使用性,同时保留原来“特殊的语音输入方式”,进行了全新的交互设计。
“特殊的语音输入方式”——需要按照以下的方式语音输入,
按住麦克风,请按下面的语音方式输入
体重 60.0
备注 xxxxxx
说完松开麦克风按钮,将只能识别并记录。
语音提示信息内容对于语音输入比较重要和特殊,如果用户在不清楚语音输入方式时,按照目前语音的习惯,直接选择语音输入,有百分之百的概率是不能识别的。
最初方案设计--文字输入和语音输入同在一个界面展示,分成同层级的两个Tab切换。


三个问题:
第一:八类这样排列成两行四列,很容易让人产生点击进入相应的界面。但是在同一个界面,所以这种方式,所选择的类别不方便清晰选择以及所处的位置。
第二:文字输入和语音输入同在一个界面展示,分成同层级的两个Tab切换。这样排列两种方式很清晰,但是让人感到任务内容很多,而且两种输入方式的使用概率并不是五五开,手动输入居多些。
第三,添加完成的按钮,作为整个添加流程中最后生效的一个动作,在视觉上要重点强调(考虑到用户的年龄)。
改版设计方案



三个改动:
改动一:选择大类的方式,类似选择电影的选择方式 ,默认选中体重 ,选中状态与未选中状态区分,选中放大切且高亮。这里会存在一个问题:如果默认进入界面,可能以为只有三类,这里在设计上做了全新的设计,完整可以显示5类,默认显示2类+另外一类的半个,告诉用户后面还有内容,可以通过左右滑动查看更多。(确定)
改动二:两种输入方式的改动,突出主要使用的手动输入方式,语音输入减少视觉重点。点击【语音输入】后弹出语音框和语音提示信息内容,按住说话出现指示器,指示文字消失。自动识别语音内容。
存在一个问题:完成说话后语音框的消失,识别完成之后自动判定语音输入结束。但是如果识别结果不正确,再次需要重复一次语音输入。这个动作有点麻烦。
改动三:添加完成按钮,同样放在右上角,视觉上用颜色,形状上用圆角按钮进行强调。(确定)
再次改版方案


一个改动:语音输入跳转一个新界面(弹层)--点击语音输入,跳转新的语音界面,而且语音提示信息内容直接显示在界面当中。 说话之后自动识别后跳转到上个界面。这样逻辑清晰操作明确。
出现的一个疑问的地方,在语音识别后跳转回上一层。而且这里的操作需要两次动作,当用户了解和熟练运用语音输入后,会不会觉得有点繁琐呢?
再一次改版设计

改动:将语音输入固定在界面底部。当用户第一次使用时,给予弹窗提示如何语音输入。右下角的小问号同样是提示。语音输入,说话、识别都在同一个界面。
疑问:这样用户第一次体验会不会太友好(结合语音操作的动作)。
第五次改版设计


改动:直接将语音说话功能与语音提示信息内容 显示在界面上。指示文字浅颜色降低视觉重点(参考花瓣的指引操作)。语音提示信息内容一直界面当中,并且当作一个对语音输入的提示。
添加数据这五方案中,目前对于第三种与第五种比较倾向。两者之间做出选择的话,会选择第五种的交互方案——两者输入方式排版交互使用互不干扰,逻辑比较清晰,使用简单比较方便。 而且操作结果都在一个界面上呈现。
第一次在简书上写有关交互设计的文章,就是简单的将平时工作过中遇到的问题以及思考过程以及方案的呈现。语言词藻平平,对于交互方案有想法请多多指教~
网友评论