IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

当你画线框图时,你应该想些什么?

Catherine • 2017-05-21 13:28 • 交互设计

我们每个人在刚入行的时候,接到项目需求,最初更多的会沦为产品经理的画图工具,帮他画好线框图、补全场景状态反馈等,这时候你可能会彷徨痛苦,感觉自己没有办法实现作为交互设计师的价值,不用彷徨痛苦,你现在需要的只是一个完善的工作流程,下面我就抛砖引玉来讲一下当我在画线框图时,我在想的12345……,希望对刚入行的小伙伴能有所帮助。

文章目录[隐藏]

  • 1.分析梳理确认需求
  • 2.思考分析确认优化方案
  • 3.具体方案——低保真设计
  • 4.设计检查
  • 5.交互设计说明文档

当你画线框图时,你应该想些什么?

我们每个人在刚入行的时候,接到项目需求,最初更多的会沦为产品经理的画图工具,帮他画好线框图、补全场景状态反馈等,这时候你可能会彷徨痛苦,感觉自己没有办法实现作为交互设计师的价值,不用彷徨痛苦,你现在需要的只是一个完善的工作流程,下面我就抛砖引玉来讲一下当我在画线框图时,我在想的12345……,希望对刚入行的小伙伴能有所帮助。

1.分析梳理确认需求

如果不想沦为产品工具的话,首先你在接到需求时应该要做的是需求分析梳理确认。

当你画线框图时,你应该想些什么?

第一步,了解项目背景。

去找这个产品业务的负责人聊一聊,这能让你快速的知道这个项目的背景,这个产品的规划,用户的基本资料,需求要解决的痛点;

第二步,分析需求的合理与否。

你要思考需求解决的痛点是不是用户在使用过程中真正的痛点?需求提出的功能是否能够解决这个痛点?有没有更好的方法去解决这个痛点?如果认为需求不合理,你应该去和项目负责人、项目成员去沟通交流,在沟通的时候如果你是新人的话请准备好数据,毕竟数据更具有说服力。

第三步,确认需求的细节。

比如信息模块内容、功能点、后台交互逻辑等,毕竟谁也不想在项目进行过程中,出现需求变更,信息模块内容呈现与产品需求有出入,前端的写好的页面样式后台不能使用等情况。

2.思考分析确认优化方案

当需求确立后,我们下面要做的就是设计优化方案,是体验价值的时候了~

当你画线框图时,你应该想些什么?

第一步,竞品分析。

当然在设计方案的时候如果有同类型的产品,我们还是要去看一看,分析一下他们的和我们有什么区别,他们做的有什么好的地方,有哪些是可以吸收和借鉴的,毕竟站在别人肩膀上看的更远~

第二步,信息模块的重要级别划分。

把信息的重要级别进行区分排序,那些是要突出的、那些是要弱化的、那些是要隐藏的,这样的话进行后期页面布局就会轻松很多。

第三步,任务流程。

梳理主要的任务流程,最好把他们画出来,分析那些环节是可以优化的,最终确认主要任务流程的优化方案。

第四步,页面流程。

根据主要任务流程,画出页面流程,每个页面的入口出口,页面之间的串联等,最好都要画出来,当你在做具体方案的时候就不会出现遗漏页面的情况了。

3.具体方案——低保真设计

当思路和优化方案已经确定好,下面要做的就是具体方案的设计~

当你画线框图时,你应该想些什么?

第一步,页面低保真设计。

根据页面流程进行页面的低保真设计,信息模块的级别划分能让你在布局的时候有一个整体的考量,当然细节的布局设计也是考量设计功力的一个地方,所以做好每一个细节的设计来体验自己的价值吧……

第二步,根据任务流程进行全场景的设计。

各种反馈状态~异常状态~初始状态~文案~信息极限值~跳转~加载~无状态~网络异常~404~等

4.设计检查

当方案做完以后,接下来重要的一步就是要进行设计检查。

当你画线框图时,你应该想些什么?

第一步,检查页面一致性。

Logo、头部、尾部、面包屑等是否和整站统一,按钮样式、反馈状态、报错等样式是否统一;是否有缺少的场景和状态,根据任务流程对场景和状态进行排查,保证设计的完整性

第二步,确保方案的可用性和易用性。

设计任务流程,进行设计走查,测试时选择普通用户,保证设计的可用性和易用性。

5.交互设计说明文档

当你画线框图时,你应该想些什么?

设计方案是要给别人看的,而不是把方案丢给产品就可以了,视觉设计需要你的说明文档来设计所有的样式,前端需要你的说明文档去做交互样式、各种反馈、限制,开发需要你的文档梳理页面之间的逻辑关系,制作交互动效等,所以做好交互设计文档不只是对项目负责也是为了更好的方便其他同事的工作,毕竟大家好才是真的好~

到了这一步,下面就是跟进的工作了~确保视觉产出质量,前端的交互效果、还原度和兼容性~最后的最后吾日三省吾身——设计总结,总结才有收获,才能不断前行~

设计的流程大同小异,重要的是接到项目先去思考,然后再去做,这样真正到了画线框图的时候你才能一泻千里^_^

 

本文由 @Ruby007 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/28606/

logo交互交互设计交互设计师交互设计文档产品产品原型产品经理动效场景沟通用户线框图视觉视觉设计设计设计师资料转载
赞 (0)
CatherineCatherine
0
生成海报
社区O2O与传统社区平台的对比
上一篇 2017-05-21 12:28
10分钟科普!那些不明觉历的“交互设计方法论”到底是什么?
下一篇 2017-05-21 14:03

相关推荐

  • 交互设计

    Focus Group 焦点小组访谈

      焦点小组访谈法源于精神病医生所用的群体疗法。目前的焦点小组一般由8-12人组成,在一名主持人的引导下对某一主题或观念进行深入讨论。焦点小组调研的目的:在于了解和理解人们心中的想法及其原因。调研的关…

    2015-12-28
  • 【干货分享】从交互角度聊聊四类弹框的设计准则 交互设计

    【干货分享】从交互角度聊聊四类弹框的设计准则

    本来传统意义上的弹框一般有三种: 系统自动弹出的提醒 帮助用户快速的做出选择 对用户的操作给予反馈 但是现在还多了一种,而且很多产品都在用这种弹框方式,因为它很赚钱 — 广告。所以广告类的弹框已经被我列入弹…

    2016-08-11
  • 微信热点

    我为什么喜欢sketch?

    数十万互联网从业者的共同关注!作者:luffy微信公众号:麒麟设计中心(ID:luffydesign)作者授权早读课发表,转载请联系作者。欢迎投稿到早读课,投稿邮箱:mm@zaodula.com文章底部可以评论留言啦,欢迎大家赞同质疑或吐槽。积极留言的同学,注意关注小编的回复,不定期送互联网畅销书以感谢你们的支持,么么哒!Adobe XD出来了,第一时间试用,感觉除了repeat grid和hotspot好像没什么亮点。笔者是一名无线U...

    2018-04-09
  • 微信热点

    用户体验设计影响力引起两会代表关注,获业界点赞!

    如今,用户体验设计已成为社会广泛关注的话题,在今年两会上,用户体验设计的影响力也引起了两会代表关注。在今年的两会期间,全国政协委员叶友达向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》。设计创新与科技创新互为表里,需要协同发展;从国家层面启动基于用户体验的设计创新倡议,构建用户体验设计创新战略和行动纲领。用户体验是指用户基于对产品、系统、服务使用或者预期使用的态度和反馈。叶友达解释:“说白了,就是我们在产品的设...

    2018-03-20
  • 微信热点

    用户体验与智能产品设计专业课程研修班

    通知:根据国务院学位委员会(2013)36号文件,原用户体验与智能产品设计在职研究生课程统一更名为“用户体验与智能产品设计在职研修课程”!一培养目标:良好的用户体验是产品成功的关键。在科学技术日益突飞猛进的今天,用户体验与创新设计不仅是国际IT界、设计界和商业界最活跃的热点,甚至成为企业成败的决定因素。随着科技进步和社会发展,人们对产品的需求由满足可用的时代提升到更加重视主观感受和体验。用户在使用产品、服务、系统的前期期望、使用过程中,...

    2018-04-06
  • 交互设计

    交互设计的5个常见错误

    交互设计从来都不容易。它包括了用户行为的深度分析,和一丝不苟的规划。随着新技术和交互设计模式的出现,事情并不会变容易。 艳丽的图片、顺畅的鼠标悬停效果和意外的动画,不再那么容易引起用户注意了。但难题却…

    2015-11-09
  • 在WEB/UI的交互设计中运用格式塔心理学理论

    UI或UX分析需求主要是以人机交互界面为主,而这个需求不仅仅是一些设计、视觉使用体验,在这里体验当中,我们可适当运用一些心理学,比如格式塔理论就是一个很好的分析法。[图片]格式塔学派是心理学重要流派之一,兴起于20世纪初的德国,又称为完形心理学。由马科斯·韦特墨(1880-194

    微信热点 2018-02-04
  • UE网国内首发:Axure APP:Axshare APP下载地址非google play Axure

    UE网国内首发:Axure APP:Axshare APP下载地址非google play

    很多童鞋反应googleplay下载不下来,我们发布在 UE社区 以后各种新的东东想第一时间知道欢迎安装我们的UE小组APP 请需要的同学尝鲜下载。 http://www.iamue.cn/read.php?tid=16&fid=2 不过阿西这里要提醒下,这…

    2015-05-25
  • 微信热点

    前Apple员工谈交互设计的未来

    作者:Bret Victor  |  翻译:包子,校审:Chen Jing本文长度2731字,建议阅读5分钟现在,有很多流行的有关未来交互设计的想象。机缘巧合下,设计未来的交互界面成为了我的工作。我有机会用真正能工作的原型来做设计,而不是如图所示用绿光屏和After Effects合成的特效。我对视频中的一些交互表示怀疑,因为我尝试过实现它们,而制作视频的动画师显然没有。但是,这不是这个视频真正存在的问题。我觉得这个视频真正出了问题的地...

    2018-01-30
  • 探讨F式布局在网页中的运用 交互设计

    探讨F式布局在网页中的运用

    虽然网页排版 方式千变万化,但是布局方式通常都遵循着几种常见的规则。在诸多布局方式当中,F式布局是可用性较强,且适用范围较广的一种。今天的文章同你来探讨F式布局在网页中的运用。

    2017-05-04
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress

分享到:

微博 微信 QQ好友 QQ空间 豆瓣 LinkedIn Facebook X
1/
  • go to the previous image
  • go to the next image