IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

引入情景设计的交互设计实例

Leeking001 2011-03-27 23:39:55 累计浏览 2,503 次
本机暂存

    上文中谈到了情景设计,可能大家对情景设计如何具体使用还是很迷惑,我们就举个交互设计中的实例来抛砖引玉一下。

    我们之前在设计 白社会 中的个人主页时,经过产品需求分析,我们将个人主页的使用情景分成了4类,并情景的的重要度依次排列,排首位的是情景1:初次看陌生人的个人主页。

    这里,我们模拟一下情景,编一个小故事来带出需求和解决问题:

    人物:小宝

     故事:

     1、一天,小宝看到同事李伟的好友里有个叫小美的,特别活跃,看头像貌似还是个美女,于是特想知道小美的更多情况,多大了,有没有男朋友,在哪上班,喜欢什么,有没有更多的照片,想认识认识……

     2、小宝收到好友邀请,但是通过看人名和头像,好像不认识这个人,于是他想知道跟自己有什么关系,是不是该接受好友邀请

     需求:

     1、可以看到对方的详细的档案信息。

     2、可以看到对方的照片。

     3、可以了解对方的经常干些什么,最近是个什么状态。

     4、可以加对方为好友。

     5、可以看到对方跟自己的关系。

    主要成功场景:

     1、很快的找到大头像以及部分照片

     2、很快的看到年龄、工作、人生阶段等信息,并可以进一步了解对方的更多兴趣爱好

     3、可以看到对方最近喜欢干些什么事,近期的状态更新

     4、很方便的点击加她为好友,为了不那么冒昧,可以先打个招呼什么的

     5、能通过双方的联系(共同好友),很快猜出对方是什么人

    设计:

     1、元素:大头像,名字,简略的档案,部分照片,加好友,打招呼,动态,状态,共同好友,更多档案信息

     2、排列:大头像显示,简略的档案信息,部分照片的展示都属于人物个人属性,放在一列中体现,动态以及状态属于人物的行为属性,放在另一列中体现,双方的共同好友,属于人物的关系属性,放在第三列中体现,这样个人主页应该具备三列式的排布,依次个人-行为-关系,动态信息量比较大,放在中间列,更宽的位置展示。更多档案信息属于进一步了解对象,可以放到个人主页之外

     3、顺序:头像,简略档案,照片符合从浅到深的理解顺序,自上到下排列,加好友、打招呼、状态暂不排列

    这样,比较顺理成章的找到了主要需求,解决了主要问题,完成了主要情景下的设计。

    然后,我们在按此方法把其他情景依次分析,最后综合一下,就可以完成个人主页的基本设计了。

    情景2:看新好友的个人主页

     ……

     情景3:看老好友的个人主页

     ……

     情景4:看自己的个人主页

     ……

同分类推荐文章

  1. 如何写好设计文档? (2026-06-23 08:00:00)
  2. Designing With Uncertainty: How AI Supercharges Probabilistic Thinking (2026-06-16 23:00:00)
  3. The Benefits Of Cognitive Inclusion In UX Research (2026-06-10 18:00:00)

查看更多 设计 文章 →

建议继续学习

  1. 十个最容易犯的用户体验错误及规避方案 (累计阅读 79,500)
  2. 流程管理与用户研究 (累计阅读 17,053)
  3. 网站导航设计的6大分类 (累计阅读 9,298)
  4. 给想转行做产品经理的同学 (累计阅读 6,927)
  5. 互联网产品经理必读书目 (累计阅读 5,840)
  6. “预注册”是一把金钥匙 (累计阅读 5,677)
  7. 忘记技术原理,关注用户心智 (累计阅读 5,600)
  8. 界面设计速成 (累计阅读 5,428)
  9. Axure之变量的使用 (累计阅读 5,137)
  10. 解读iPhone平台的一些优秀设计思路 (累计阅读 4,941)