Lovelin3391

微信条目分析

木木:

上回说到条目,这次我来对微信条目进行具体分析,带大家倒推分析写详细的PRD。首先还得感谢原作者HoZin带来的灵感。

废话不多说,直击主题。


测试手机:Iphone 5S

体验时间:2016-1-25

《微信》版本号:v 6.3.9


1.对样本进行截图

每次打开微信,最经常使用的界面就是[消息列表],把它先收入囊中,截图取样。截图还是有一些技巧的,尽量把更多交互控件状态都保留下来。


(微信消息列表样本)


2.还原高保真RP

对于原型的保真度,每个交互设计师的理解不同,下面是我做的。

(还原之后的高保真RP)


3.输出《交互设计说明文档》

此刻,变身微信的交互设计师,将产品还原成相对标准的文档。

首先,整个界面由三部分组成:标题栏Title、消息列表MsgList、标签式下导航TabNavi;主要操作有:对话搜索、添加(+)、Tap点击进入消息对话界面等。


(微信消息列表原型交互模式区分)


4.对话Block(消息列表隐藏交互操作)

其次,消息列表中,某一对话的通栏区块定义为[对话Block]交互组件,包含一个隐藏操作行为:切换已读/未读、取消关注、删除对话。


(微信消息列表隐藏交互操作)


再次,[对话Block] 这个组件包含图片Image、交谈对象 、当前对话摘要 、日期时间、未读提示五个交互控件;五个控件并且会根据交谈主体、新消息种类、开通免打搅功能而相互影响变化,交互规则异常复杂,于是将规则逐个列出。


5.对话Block(图片)


(交互文档片段对话Block图片)


6.对话Block(图片-消息提示)


(交互文档片段对话Block图片-消息提示规则)


7.对话Block(交谈对象)


(交互文档片段对话Block交谈对象)


8.对话Block(当前对象摘要)


(交互文档片段对话Block当前对话摘要)


9.对话Block(时间格式)


(交互文档片段对话Block日期时间)


逼格满满的信息图,整齐漂亮,一目了然,描述了界面的内容逻辑




最后:凡事亲力亲为,才能真正了解背后的逻辑层次,希望文章对你有帮助,加油吧。

其实再复杂的逻辑先想大方向,然后在把大的划小,小的再划小,一个一个的去处理,于是就很简单了。

(哎,写的好累,利用在公司的空余时间写了三天,这次要多吸点小粉丝过来。喜欢就请关注我哦)

转载自:土豆妹儿  
   
评论
热度(18)