《破茧成蝶》读书笔记

交互设计师的主要任务

通过分析用户心理模型,设计任务流程,把交互逻辑也就是功能和需求,以用户能理解的方式传达给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, 转化率等。对同一用户呈现相同界面;两个版本同时测试;单一变量。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 223,567评论 6 521
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 95,644评论 3 401
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 170,540评论 0 366
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 60,466评论 1 300
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 69,481评论 6 399
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 53,026评论 1 314
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 41,414评论 3 426
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 40,376评论 0 278
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,914评论 1 322
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,967评论 3 343
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 41,104评论 1 354
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,758评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,429评论 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,920评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,038评论 1 275
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 49,586评论 3 380
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 46,129评论 2 362

推荐阅读更多精彩内容

  • 前两天事情较多,没来得及将前两天的读书笔记补上。接着上次的记录。 25.从需求到界面: 26.信息归类: 1).逻...
    Witty_28阅读 354评论 0 1
  • 40.写交互说明的诀窍: 尽量使用真实、符合逻辑的数据;不遗漏特殊的状态;避免过长的说明;考虑方案成本是否高,有没...
    Witty_28阅读 426评论 0 1
  • 【取穴位置】 在第4趾末节外侧,距趾甲角0.1寸。 【解剖位置】 有趾背侧动、静脉和趾跖动脉形成的动脉网;布有趾背...
    哈林哥阅读 1,445评论 0 0
  • 或许每个人都有欲望占据上风的时候。有时看百度云群里的那些视频,却发现很很奇怪的现象:很多视频中都只是女生露脸而男生...
    风思云起阅读 167评论 0 0
  • 曾经属于我们的母校 一个夏天过去了 我也变成了客人…… 我熟悉的路 开始修建 我闻过的花香 开始修剪 连碰见的高二...
    秦梦娜liz阅读 320评论 0 0