美文网首页UI/交互设计规范PMbook
《破茧成蝶》读书笔记

《破茧成蝶》读书笔记

作者: 711child | 来源:发表于2016-06-15 20:06 被阅读685次

    交互设计师的主要任务

    通过分析用户心理模型,设计任务流程,把交互逻辑也就是功能和需求,以用户能理解的方式传达给yoghurt,最终实现公司需求和用户需求的最佳平衡。

    交互设计师的价值

    首先,设计成果会直接带来用户价值--用户直接感受到优秀设计产品带来的美观和便捷,以及商业价值--得到用户喜爱的产品必然给公司带来利润。此外,交互设计师在项目推进中也起到了重要的作用:通过专业能力节省PM反复修改原型的时间、可用性测试的时间、UI改稿的时间、整个项目不断迭代的时间;与PM共同推进UI, 前端、开发的产出质量;使设计统一化、标准化,提高设计效率;清晰的产品流程让项目更合理、进展顺利。交互设计师还会带来品牌价值,统一的设计理念和风格有助于增加品牌的辨识度。

    和PM抢位的需求分析

    术业有专攻,PM重大方向—商业目标、功能业务;UE重逻辑、细节、情感、创意、界面。所以需求分析需要两方共同完成。

    产品定位:产品定义+用户需求。

    产品定义=使用人群+主要功能+产品特色,用户需求=用户+使用场景+用户目标。

    所以,产品的定位就是使用人群、主要功能、产品特色、目标用户、使用场景和用户目标的结合,其中,核心要素是主要功能、产品特色、目标用户,而以目标用户最为重要。因为一切都是为目标人群服务,需求可以根据不同时期的目标用户做出改变,使产品做新、做强。应优先考虑商业价值大、潜在用户多的目标群体。

    当然,产品定位不是决定需求分析的唯一因素,还需考虑合理性、资源分配等问题。

    需求分析的采集方法有用户调研、竞品分析、上线后的用户反馈和产品数据等。

    需求文档包含:版本记录;背景描述;用户类型和特征;信息结构;业务流程;每一条需求的详细说明,如功能、处理流程等。

    理想的需分:产品定位—需求采集—需求文档;

    现实中PM没有按流程工作,需分:需求文档—设计目标—设计需求。需要UE再次做用户调研,确立设计目标。

    利用竞品做需分:竞品分析—设计目标—设计需求。尝试所有操作,截取全套竞品图;根据截图绘制流程图,倒退出需求,再进行设计。

    从需求到设计草图:需要信息的组织与任务的设定(即信息架构和流程图

    对信息进行分类:导航设计,解决我是谁、我从哪儿来、我要做什么的问题。应有广度和深度的平衡。广度有利于用户发现信息,一般不超过7项;深度要尽量少,每次点击都会流失用户。

    好的导航系统为重要和常用功能设置快捷入口,例如淘宝中的购物车、更多里的回到首页等。

    怎样从需求文档中组织出任务流程:

    区分主要任务和次要任务,设计主线,根据是否对完成主线有帮助设计支线。支线要尽量少,这样复杂度低,用户更容易完成任务。

    有了流程图,再画页面流程图(方块信息),然后完成页面交互图,即线框图(具体大小位置的模块)。

    突出主要任务:首先分解任务,每个子任务可能对于一个功能或页面;根据使用人数、频率、重要程度排列任务优先级,将次序相近、界面相似的任务组合成一个界面。这样,在同一界面中,根据优先级按照从左上到右下的顺序展现任务。

    引导用户完成任务:

    通过色彩、大小、形状、视觉的相似引导;对齐使视线自动向下;向导控件。这与“对齐”、“重复”、“亲密性”的设计原则是类似的。

    优化操作流程:提供合适的首选项、帮助提示、及时反馈、默认值。

    突出重点信息:差异化模块;次要信息通过暗示或多层点击隐藏起来。

    总结:有了设计需求后需要确定产品的操作流程,一方面构建导航系统,一方面设计每个界面的任务布局和跳转,引导用户完成任务。这样就可以根据页面流程图创建线框图了。

    原型与线框图

    原型是产品功能和内容的示意图,既包含静态的页面样式—线框图,又包含动态的操作效果--交互说明。

    标准的原型应包含:

    变更日志;版本说明;信息结构;任务流程+页面流程(上一部分);线框图+交互说明。

    不推荐动态效果的原型:花费时间长;使用者需要注意操作,可能有所遗漏。

    交互说明类型有:动态范围,如用户名或密码如何显示,长度控制等;状态,包括默认状态、常见状态、特殊状态;操作和反馈,如翻页操作后页面跳转,误操作后系统提示等。

    线框图设计要注意:

    通过明暗表达层次。深浅未必和重要性一致,但要达到直观的效果,必要时用单一彩色凸显重要之处。

    不用图片和多种颜色,图片以空白代替。

    遵守栅格规范。便于与视觉设计保持统一性。

    标记第一屏的高度。第一屏可以设为600像素。

    标记内容优先级。按钮>链接>文本等。

    遵循视觉趋势,如扁平化、简约风格。

    交互说明技巧:

    使用真实、符合逻辑的数据和文字;

    考虑规则和特殊情况的描述,如勾选后状态,显示个数限制等,虽然这在开发代码里都应详细考虑到,但从设计的角度就应先入为主,尽可能多地把逻辑都覆盖一遍。

    说明可用表格或流程图罗列,如多种状态—悬停、点击时、点击后的状态显示。还可用if-else-case语句解释。

    对重复出现的模块,可以独立出来,在每个出现的地方留空位和模块名称即可。

    设计规范

    包含交互、色彩、图标、控件等的规范。先制定交互规范—什么情况下的什么状态,在此基础上制定视觉规范--什么状态显示成什么。设计规范一般在大产品、组件单一多复用、时间充裕的情况下完成。

    设计师的项目跟进工作

    设计评审:目的是为了检验设计方案是否达到最初目标,从各项目人员角度及时发现设计的风险,及时更正,并让大家达成共识。

    评审前,考虑所有可能的方案,即使最后只拿出一种设计方案。准备设计数据,包括用户调研结果、研究数据、竞品分析、设计目标等。只邀请必要的人,最好提前与主要负责人达成意见一致。

    评审中,掌握会议的主导权。明确产品定位或设计目标——展示参考资料——展示设计意图和方案——收集意见、引导讨论。特别注意,不要让主题偏离,及时制止对细节的持续讨论。

    评审后,收集有效的反馈,整理最终设计方案告知成员。

    UI设计跟进:视觉稿需要做到与交互稿传达的信息一致,重点突出,层次分明;两者差别是否会引起歧义;同时也要抓人眼球。

    开发阶段跟进:与前端工程师沟通,看是否理解到位;规范设计稿,与前端采用相同标准,便于整理。

    做设计走查:对产品demo进行交互操作、反馈、各种状态、默认值、极限值的走查。也可配合测试写用例,确保上线的产品与设计稿一致。

    设计检验方法

    上线前采用可用性测试—定性分析(样本少、可以了解用户想法)、A/B测试—定量分析(结果客观、不能得知原因);上线后收集用户反馈、产品数据。

    可用性测试:通过观察用户使用,发现设计存在的问题。这里建议招募5名与试者。

    测试任务应为:给出目标而非操作描述;选择最频繁、最重要的任务;符合正常操作流程。

    测试过程中注意:不要引导,多做观察和记录,用户遇到困难是多鼓励少帮助;重视用户细微情绪反应;相信他们的行动胜于语言;考虑场景多样性,比如移动端就适合在真实环境中(街头等)测试。

    测试后分析:统计问题频率、严重级别、违反的可用性规则——Nelson启发式评估十大准则:可视性;自由度;符合惯例;一致性;可识别性;高效性;精简信息;防错性;容错性;提供帮助。

    A/B测试:设定衡量标准,PV, UV, 转化率等。对同一用户呈现相同界面;两个版本同时测试;单一变量。

    这里提到的交互流程:竞品分析 — 低保真交互 — 可用性测试 — 交互评审 — 高保真交互。

    相关文章

      网友评论

        本文标题:《破茧成蝶》读书笔记

        本文链接:https://www.haomeiwen.com/subject/exspdttx.html