摘要:交互设计主要分为两块:信息架构和操作细节。交互设计的产出物(交付物)也应当包含这一静一动两块。希望本文对大家学习交互设计有所帮助。
JJg在《用户体验要素》中,将交互设计设置在结构层。
一方面,交互设计恰恰处在抽象的战略向具体实现页面的转化过度阶段。从产品开发流程中,交互设计上从产品经理接到需求,分析需求并最终交付网站高保真的原型。要把“抽象”的点子和想法如实贴切用界面语言表现出来。满足公司商业需求。
另一方面,交互设计师的诞生某种程度是为了提升产品可用性。其实就是要满足产品使用者——用户的要求。
交互设计主要分为两块:信息架构和操作细节。交互设计的产出物(交付物)也应当包含这一静一动两块。
下面从交互设计不同阶段的产出物,来谈谈交互设计的方法:
1.接需求
这个阶段主要是接到产品经理等拿来的需求,比如FRD文档。和产品经理讨论需求,了解重点。
2.需求分析——>翻译成界面语言
俗话说,Think first,Design next.对于接到的需求,第一件要做的事情就是仔细分析和讨论下需求的逻辑、内容和目的,而不是马上风风火火的开工。这个阶段的重点在于梳理用户逻辑+特殊需求,最好能高度概括成几点。
忍不住引用臭鱼博客的一个灰常贴切的案例:
一个需求文档。里面描述了页面需要承载的信息。
第一步. 概括信息
您选择了回邮方式办卡,概括解释这个办卡方式。
接下来您应该 下载申请表
回邮办卡的全过程是这样的…
一系列注意事项。
第二步. 排序
1. 您选择了回邮方式办卡,概括解释这个办卡方式。
2. 接下来您应该 下载申请表
3. 回邮办卡的全过程是这样的…
4. 一系列注意事项。
第三步. 翻译为界面语言
对于单一的页面(并非整站,没有操作逻辑)的产品来说,需求分析完,交付物出线框图,后面视觉和开发静态页面足够了。
3.结构框架
实际产品往往复杂很多,在需求分析的时候要对产品结构进行梳理,表达出网站的层级结构。做出类似的站点地图(site maps)。这个除了可以把公司所提供的内容层梳理清晰,为全站导航也奠定基础。
4.流程图(flow charts)
流程图的重要性在于从用户的使用逻辑来分析交互逻辑是否合理,走得通。
其实流程图分为单个用户流程图和多用户流程图。它不仅是提高可用性的利器,也是信息架构的好工具。具体详情可以看:利用任务角色来做信息架构。
5.线框图(wireframes):更像最终产品呈现的毛胚。简单来说,就是抛去配色、字体样式、图片等的原型设计。这个阶段包含具体操作细节。
线框图这个阶段,除了把上一阶段流程图需要的要素包含好,最重要的要考虑如何在页面中排布这些信息,积极具体的操作细节、状态说明。
交互体验的一些参照原则:操作前,结果可预知。 操作时,操作有反馈,可停止。 操作后,操作可撤销。
体交互细节的说明,包括focus状态,变化反馈条件等等。
6.检查check
这个阶段就是再次对线框图进行可用性的分析。第一时间,设计师可以把已有的可用性原则拿出来参照,是否出现问题。
《Don’t make me think》里有些说明,外加偶个人总结的常见排查点:
· 这是个神马网站?(站点名称、logo、适当的说明)
· 我在哪?(文章或page title)
· 主要栏目有神马?(导航、分类…)
· 我在导航的哪个位置?(导航反白、面包屑)
· 能回去么?(Home和返回或撤销)
· 需要搜索吗?(搜索框满足询问型用户,而不是浏览型用户的需求)
· 两个重要状态有吗?(第一次进来的新手引导,参见here+出错状态提示)
· 相同功能和文案的统一、一致表达。
回头看看,这几个阶段的交付物涵盖了交互设计的内容:信息架构和操作细节。当然,具体思考过程不会那么界限分明。可能兼顾两者,比如在流程图中既有细节又有架构。
交互设计其实让机器“模仿”人和人沟通对话。交互和视觉最终要的是清晰表达信息。
计师都该有自己的一套设计方法,设计分析思路和习惯,找到适合自己和环境的方法才是重点。
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标设计创作交互设计频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号