别整标题党! 这是一份阿里的设计师分享的编写交互设计师的启迪思路的文章

别整标题党! 这是一份阿里的设计师分享的编写交互设计师的启迪思路的文章

鸿影:一份设计文档的 结构大概可以分成Background项目背景、Schedule排期、History版本历史记录、Information Architecture信息架构分析(包括Site Map、Experience Map、Flow等)、Framework框架设计、Wireframe线框图和Mockup视觉稿等。取决于实际项目的情况,部分内容可以省略,也可以 加入更多,比如Storyboard故事板,Prototype可交互原型等。

在过去,我一度没有什么规范的设计文档写 作习惯,用纸笔画完Information Architecture和Wireframe后,就匆匆进入了Mockup阶段,最后的交付物也仅仅是Mockup。前期的时候觉得没什么,后来就感觉 到了问题,这样很容易过早地陷入对视觉细节的纠缠,设计到一半忘了最初的设计目标,有时花了很多精力纠结一个模块交互or视觉设计的好坏,后来却发现整个 模块都没有存在意义,已经背离了最初的业务目标与设计目标,根本不是用户想要的东西;或者场景考虑不全面,设计完一个模块后放到整体里充满矛盾,结果需要 花更多精力来进行补救,导致进度Delay或只能上线充满问题的版本等。

而良好的设计文档写作习惯,虽然会在一开始占据比较多的时间和精力,但却能保证全程设计思路一直比较清晰,做设计的时候时刻思考用户是谁、目标是什么、这样设计是否能帮助达到目标,向团队、向合作伙伴沟通传达自己的设计方案时,也有更强的说服力。

Background

这一部分的内容在设计师和PM、业务方充分沟通需求之后完成,我的习惯一般是分成这几个模块:产品描述,要设计的产品是什么,依托怎样的平台,在什 么场景下发生;业务/产品现状,总结需求方现在面临的主要问题,有哪些体验不好的地方,关键痛点是什么;用户目标,用户群有哪些类型,他们分别想解决什么 问题;访问流程,产品有哪些入口,最终把用户导向哪些地方。这些都需要和需求方确认清楚,明白整个产品的来龙去脉,最终提炼出设计目标:需要设计什么新的 功能,需要优化哪些已有的设计,提高产品哪些使用环节的体验,引导用户做出什么操作,最终达到怎样的业务目标。

Schedule

和需求方确认各阶段交付物的时间节点,制定完成设计的具体计划,每个阶段大概做哪些工作,什么时候内部Review,什么时候和项目组Review等。确保设计以一个合理的节奏展开,可以以较高的质量按时交付。

History

设计稿版本每发生一次比较大的迭代更新,都要记录在版本历史记录里,相比一个个去翻以前的设计稿,版本历史记录可以清晰地展现设计稿的迭代历程,有 哪些需求的变动,有哪些设计时没思考清楚需要修改的地方,Review时大家给出了哪些意见和建议等。有时版本需要回滚,可以更方便地追溯,而项目结束后 浏览这一部分,可以看到自己的设计在哪些方面一开始思考不足出现了各种问题,是如何被发现、改进和提升的,下一次设计的时候是否可以更早地思考到和回避 掉。

Information Architecture

根据具体项目性质的不同,这一块的分析工具也有较大的差异,具体的选择和使用要按照实际场景来,而非机械进行套用。

如果是设计一整套网站系统,Site Map必不可少,通过它将需要设计的内容以全景图的方式呈现出来,对整个网站的架构可以构建起一个初步的印象,像架构层级过深、页面内容重复等问题都可以 通过Site map发现,进而提出是否可以减少页面的信息层级、合并部分页面等,从整体上优化产品的使用体验,而非只见树木不见森林。

Experience Map可以把产品在不同使用场景、流程下的体验问题直观地呈现出来,我们有时会得到一些用研结果反馈,但大量反馈建议直接列举的话会很散乱,也不知道哪些 是真正的问题,哪些只是个别用户的吐槽,通过Experience Map可以整理出用户使用产品大概有哪些场景和环节,各场景和环节下都遇到过什么样的问题,哪些问题出现的频率较高等,帮设计师更好地代入到用户使用产品 的实际体验过程中去,进而思考各场景、环节下都可以进行怎样的设计目标拆解与设计优化、最终帮助完成产品的整体目标。

Flow流程图也是一个常用工具,可以总结出不同场景下用户使用产品的流程和步骤是怎样的,可能产生怎样的分支需要在设计中考虑到,在哪些地方可能产生较大的流失,步骤是否可以合并优化,能否抽象出通用的流程来构建框架设计等。

别整标题党! 这是一份阿里的设计师分享的编写交互设计师的启迪思路的文章

Framework

Framework和Wireframe的区别主要在于前者更抽象、通用化,不需要太多的内容细节,而后者更详细、分场景、已经有了删格化和详细的文案等,离Mockup甚至只差配色、图标、阴影细节等。

Framework开始构建起产品的形,抽象出通用的布局原则,页面上大概有哪些模块,这些模块之间的主次、优先级关系是怎样的,每个模块要帮助用 户完成怎样的目标。思考清楚了这些问题,接下来的设计才会减少目标偏离与方案返工出现的概率,能把握住界面的整体结构、模块关系呈现等,而不是陷入细节, 结果让次要的东西喧宾夺主。

Wireframe

Wireframe在Framework的基础上具化出了产品的完整骨架,在这一步需要仔细考虑到每一个可能的使用场景,包括极多极少、错误等特殊情况都要包括在内。

我一般习惯在Axure文档里以建立很多页面,每个页面按照场景进行命名,再在页面里画Wireframe,具体到每一个模块可能出现的一些特殊场 景等,则直接在页面里以模块的方式在主界面旁边呈现,如果是比较简单的情况,也可用文字直接说明。总之,每一个角落都要考虑得当,不能有遗漏,因为水平经 验还比较稚嫩,一开始遗漏了较多内容,也非常感谢合作伙伴和团队前辈们的及时指出。

Wireframe虽然不是Mockup,但在视觉效果呈现上却马虎不得。一开始我觉得不是视觉稿没必要考虑那么多,在画Wireframe时完全 没考虑栅格之类,最终的视觉效果感觉也比较粗糙。后来被指出在Wireframe这一环,文案等内容基本就确定了,如果不考虑视觉效果,可能在实际的视觉 稿产出后,会发生因为文字内容过多溢出,导致整个页面结构都要被迫调整之类的情况,最终增加了产品的设计成本。作为交互设计师,我们可能不用考虑太多配 色、创建角色形象之类的视觉细节,但一定要懂基础的UI设计规范,甚至在视觉要求不高(如很多B端产品)的时候,需要直接扮演视觉设计师的角色,这也是我 们区别于“能画线框图的产品经理”的重要价值。

别整标题党! 这是一份阿里的设计师分享的编写交互设计师的启迪思路的文章

还有文案,通俗来说就是“说人话”,各种导航标签、各种引导提示问题、各种按钮说明等的文案也是交互设计师需要思考的,目前我在这方面做得还比较弱,文案有啰嗦、用户不容易理解等问题,正在努力看书写作试图弥补中,就不多谈了。

Mockup

Mockup作为表现层的主要产出,在Wireframe的基础上完成配色表现、图标绘制等视觉细节的呈现,为产品的骨架覆盖上最终的皮肤。在 Wireframe已经充分考虑到各种场景的情况下,Mockup不需要再面面俱到,而是选择关键场景的界面进行绘制表现即可,注意一些 Hover/Active之类的状态表现,再就是标注(在公司内部神器的帮助下似乎已经不用这一步了,怒赞,Sketch棒棒哒,前端都是专业的甚至还懂 点设计,不需要太多沟通就能高保真还原效果,感觉比以前幸福好多!)交付前端了。(想到自己以前画大量精力画不同场景的Mockup,很多只有一点细节的 差异,而Wireframe就是一点纸笔草图,感觉蠢爆了= =)

最后放一张自己的设计文档结构截图吧,虽然Axure很多人黑,但我觉得在文档结构呈现这块真的是最好用的。

别整标题党! 这是一份阿里的设计师分享的编写交互设计师的启迪思路的文章

来源:优设  原作者:鸿影

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

(0)
iouedioued
上一篇 2015-08-26
下一篇 2015-08-26

相关推荐

  • 页面停留时间和网站停留时间详解

    摘要:一、页面停留时间与网站停留时间是如何计算出来的? 假设用户访问了网站的主页(Home)。分析工具将这个访问者标记为一个Visit,接着这个访问者又浏览了另外两个页面(Page2和Page3),然后他离开了你的网站…

    2014-12-16
  • 三个维度解析一个产品的交互设计

    作者:飞起就是一jio链接:http://www.jianshu.com/p/ad13cebe513b本文以“微信首页”为例,用三个维度系统地解析一个产品的交互设计的方方面面首先我们来做个互动,请各位看官打开自己的微信,然后看到你的微信首页…

    2017-08-04
  • 复杂性和用户体验[译]

    每一个交互设计师应该都怀有一颗追求简单的心——轻盈的操作,简易的流程,干净的界面。每每提及复杂性,必然会想到其对立面——简单。所谓简单,就是要去除不必要的干扰,让用户直达目标。优秀的产品关注简约而非复杂…

    交互设计 2015-07-22
  • 阿里UED双11组织文化传播-为每位阿里小二制造快乐

    这个组织,从创意策划、设计体验方案、执行落地再到传播推广,各种角色无缝衔接。下面带大家探秘这个神秘组织—UED双11品牌传播团队。印象里…双11阿里组织文化传播设计不就是内部宣传么(简称内宣)。Too young Too simple,一次成功的双11背后,内宣就好比阿里小二的精神鼓励师,支(bi)撑(po)着大家不断创造新的历史(走过最长的路,就是内宣人的套路,此处应有掌声)。那么,今年内宣设计的策略和体验核心是什么呢?今年双11品牌...

    2018-02-02
  • 为什么互联网产品经理转做智能硬件后就不灵了呢?

    互联网产品经理转做智能硬件后还能像过去那样玩得转吗?互联网PM和智能硬件PM有何区别?知乎用户忘象Van以其亲身的经历,从定位、KPI考核、关注点、项目追求和成本意识的五个差别做了详细的解答:我做过手机PM,也做过互联网PM,感觉这个问题就是为我量身定做的。所有的区别都可以用一句话概括——硬件PM是生意人,互联网PM是设计师。————————————产品经理是近年来严重泛滥的一个词,而且由于互联网行业的强盛,导致大家对这个岗位的认知完全...

    2018-03-12
  • 关于用户体验,我有6点零星想法

    提升用户体验不是单方面的事情,它有多重影响,本文主要从六个方面来探讨关于如何提升用户体验。用户体验是指用户的主观感受(无法量化,因时而异,因人而异,因产品而异),它不仅仅是用户对产品本身的感受。产品所有可以延伸涉及的一切事件都可以是用户的判断基准,它所涵盖的范围很大,甚至对产品背后公司法人形象的认知都会影响到用户对产品的用户体验。提高用户体验不单单是靠交互、视觉、又或是产品,它还需要运营、市场、策划、客服等等部门的共同参与,用户所有能接...

    2018-03-16
  • 华润创业、建信融通、便利蜂等4家名企春招

    求职奶爸华南最活跃的大学生求职平台旗下公号求职奶爸、校园宣讲会V、名企校招实习,50W+粉丝企业合作请加 QQ 3527488757 或微信 naibabd01(添加请备注公司名称)学生求职请加创始人微信 qiuzhinaiba101全国 | 华润创业全国 | 建信融通全国 | 便利蜂广州 | 卡宾服饰华润创业/ 公司介绍 /华润(集团)有限公司是一家在香港注册和运营的多元化控股企业集团,其前身是 1938 年于香港成立的联和行,194...

    2018-04-08
  • 如何写一份全面、易读的交互说明文档?

    交互说明文档,是交互设计师的输出物中必不可少的一项,它关系着设计方案能否最大程度的被实现。交互新人,大多会烦恼如何写交互文档,今天来聊聊这个话题。 交互文档,写给谁看 交互文档可以看做交互设计师输出的”…

    2015-12-25
  • 柴静是个好的产品经理

    这几天,柴静刷屏,有捧有踩。但是从创业者的角度,谨以此文向由文艺青年找准路线之后成功转型的优秀代表柴静,她不仅是一位优秀的新闻工作者,还是一位极好的产品经理。 她做了一个很好的示范,互联网的时代如何打…

    2015-03-05
  • 牛X的交互设计稿应该具备的特点

    转自:UIUX设计工作坊(ID:UIUX-HUANG)作者:弘毅道还没有跨入交互设计的门槛时,总是想明确的知道一些客观、确定的事情。比如,想知道交互设计的具体流程是什么,交互稿到底长什么样子,Axure中的Case用例怎么用…

    2017-08-01