产品交互自查笔记#01框架布局

正文之前自己闲扯几句:最近团队内部正在做一个新的产品,而在做这个产品的过程中,慢慢暴露了团队在于磨合上,分工上的一些问题。可能是因为时间太紧、沟通不足等原因。产品承担着大部分的压力,而急于下决定,急于画线框图,而对于产品方向上的问题并没有进行详细地说明。几个星期下来,大家还是有种我们到底要做什么的状态,一切都处于摸索的状态。而其他人在这个过程中没什么参与感也成了一个很大的问题。

后来情况有些好转,产品运营这边开始分工调研,寻找差异化,找突破点,建立用户模型使用场景等。设计研发也能适当地参与到了讨论之中,在这个过程中我们也算是找到了一丝丝方向。

一直很希望经历一次产品从零开始的我,在这个过程中也让我更加理解了用户体验五要素。大家有时间可以看看,这里也贴上书籍下载地址


这是一个非常经典的框架体系,它包括战略层(产品目标、用户需求)、范围层(功能、需求分析)、结构层(信息架构、页面流)、框架层(页面布局)和表现层(视觉传达)。在一个实际的产品开发中,战略层及范围层主要由产品经理负责,而结构层和框架层则由交互设计师来完成,表现层由视觉设计师完成。但我们团队中没有交互设计师这样一个职位,所以结构层和框架层我们是由产品和设计共同合作来完成。

前期产品及运营的同事大致确定了产品的战略层以及范围层,接下来需要做的是结构层以及框架层的东西,这里解释一下这两个层的概念:框架层是针对于单页面的结构设计,而结构层则是将单页面连接在一起,从而形成了系统。

而在这一篇文章中,主要讲的是产品的框架层。分为4个部分来讲


框架结构

信息层次

信息组织

功能操作


框架结构

①能否承载产品功能?

是要采用列表、宫格还是图表等,都要基于设计的目的、产品功能、用户画像、使用场景等这些去考虑。想想当前设计的框架是否适合承载这些产品功能,有没有更好的方式去呈现,以及尽可能地想到页面会存在的问题。大的框架对于整个产品来说是很重要的,一个应用也不可能一开始就做到十全十美,后续可能对进行优化,但一般是基于大框架的基础上进行调整。


②明确点击区域

• 用户是否明白是可以点击的。

举个例子:下图是我们团队负责的一个项目,我们做这个页面的时候就遇到这种情况,红蓝两个模块是可以点击的,但很多用户并不知道,所以一开始数据表现很差,后面我们优化的时候增加了箭头以及浮起来的小动画以及投影后数据很明显就上去了。(虽然可能不是最优方案)

(补充:同时要避免非点击区域而让用户感觉想按钮的情况)

Ace cleaner


• 点击区域问题

这也是一个经常会遇到的一个问题。研发的同事把设计的页面实现出来以后,一般会让设计这边过一下,然后你在操作的时候发现,某个按钮点击后无反应,那一般有两种情况。一种是:研发这边实现的问题,还有一种是你点击区域大小设置的问题。

在MD设计规范里面写到:为了确保平衡信息密度和可用性,触发区域大小至少是 48 x 48 dp。在大多数情况下,触发区域之间应该还有8dp或更大的间距。

MD中关于 触发区域大小 一章


③ 内容区域等是否合理统一?

这个是从我组长那里学来的。如果是开始一个新的产品,先提取该产品的主要页面先做,比如:主页、二级页面、侧边栏以及弹窗等,并在这个过程建立基础规范,页面样式重复可以后续再完善。这样在时间相对较赶的情况下,研发可以先着手把产品的框架搭建起来,而团队中有其他的设计人员的话也可以进行更好的合作。


信息层次

①信息层次是否清晰        

明确任务的优先级别,对于想让用户第一眼看到或完成的任务需要在设计时进行合理凸显。拿cm来举个例:从主页来看,有一个一键清理的大按钮以及4个主要的功能,为了让用户进来后第一时间去点击一键清理按钮,在上面做了一些小动画,包括外圈3个圆的转动,冒气泡等。而且在完成提醒也和主页相呼应,做得还是比较完整的。

CM Security主界面

②表达是否清晰      

能清晰地表达想要传达给用户的意思。举个手机清理软件例子,大部分的清理软件中会有一个通知栏管理的功能,能够帮你将应用通知管理起来并可以快速清理,要开启这个应用呢需要用户转到内部开启权限。各个应用会采取不同的表达方式,比如说clean master和Power clean在引导上做得算比较好的。它们用动画进行展示,告知用户我正在把你的一条条信息都收起来,并且你可以一键清理掉。虽然文字表达不太一样,但目的都是一样的,都是让用户更加理解你这个功能的意义,以及引导用户去开启权限。而有些应用就说得不明不白的。所以做这些的时候也要多去看看竞品是怎么去做的。

信息组织

这个概念会比较泛。我理解的信息组织,大范围来说是你需要将所有页面组织起来,形成一个系统。小范围来说将单个页面的信息进行有序地排列。这是一项重要的能力。有逻辑有序的信息组织能让用户更加有效率的进行应用的操作。


① 确认逻辑是否通顺

② 是否可以将信息合并归类

上段时间有个研发的同事来问我,他说他们团队的研发老大让它整理一下debug的列表,目的是为了让其他的同事(研发、测试)能够快速找到需要调试的功能。如果是你你会怎么做。

我第一个想到的就是要将内容进行分类,方式可以通过标题,颜色等方式进行区分,再者就是任务的优先级了。对于功能众多的一个页面,比如说支付宝的应用列表,google play等,如果没有分类,简直不敢想象。

③ 页面的信息承载量会不会太大

④ 视觉焦点是否明确

...


功能操作

① 是否易操作

考虑常用手机型号尺寸,用户在各种使用场景下能否快速触发。比如以下情况

– 移动情景下,注意力容易被分散(如交谈,观察周围环境等)

– 移动情景下,操作手机的时间碎片化(各种事情打断)

– 移动情景下,任务容易被中断(意外情况影响)

– 移动情景下,肢体可能被其他物体被占用(如遛狗、拎包等)

– 移动情景下,噪音分散注意力(车水马龙、人声鼎沸的路边)

...

② 重要、频繁触发的功能按钮是否在手机的可操作区域


不同的产品对应的用户场景和操作流程是不同的,而在设计的过程中同样要考虑各种影响因素。在设计产出后再回过头来检验一遍方案是否真正满足用户需求?


好了大概以上这些,内容可能还有遗留,后续还会陆续补充..

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

推荐阅读更多精彩内容