以上两个图片是我们现在的1号花城商户端中的两个界面,分别是店铺信息页与个人资料页。
我所标记的1~5框中的内容,大家是否能一眼直接看出这些栏目点击后的下一步动作?
其实这几个框中的栏目,由于最初设计没有在意以及开发的随意,在信息展示上非常混乱也非常不合理,主要是以下几个方面:
1框中的店铺名称为不可修改内容,但文字的显示上并没有暗示用户该条目内容为不可修改内容,且点击后没有响应的提示。
2框中的店铺描述为可修改内容,但样式与1中一样,用户依然无法从视觉上判断内容是否可修改,且点击2框后是直接在当前栏目中修改。
3框中的店铺地址为可修改内容,点击后的交互却是跳入下一级页面进行修改。
4框中的用户名为可修改内容,右侧有代表页面跳转的箭头,但点击后却是在当前栏目中进行编辑。
5框中的手机号与4框中的样式一致,但点击后却是跳入下一级页面进行修改。
从以上几条可以看出:
界面样式上很简单的两个页面,但如果细节的文字颜色、箭头以及交互时间处理不好,给用户的感觉依然是很混乱的,体验很不好。甚至我自己都搞不清楚到底接下来的交互是什么。
修改之后的界面如下图:
仅仅需要两个方面的略微调整即可达到显示与交互逻辑的清晰:
不可修改栏目中的文字内容使用较浅色,暗示用户此栏目不可点击;
可修改内容的栏目,点击之后的交互统一跳转至下一次页面进行修改,并在栏目中用箭头进行暗示。