本文将持续更新,小美工(以后简称M)在工作中遇到的一些看似复杂的产品需求原型和一些UED团队的经典案例。
一些看似复杂的页面,说不定是原型出了问题?(敢于质疑)
我们工作中总是会碰见不少的纱布需求和一些相对不成熟的产品经理,那么我的应对方式是什么呢?其实这个话题是不少UI设计师经常会遇到和提及的问题,但时常多数的设计师是在没看明白产品原型的情况下就开始上色了。我们做美工的的确能把原型稿通过工具用不同的手法展示出不一样的感觉,但那样就真的对了吗?
有时候在我们学会做减法的时候可以尝试着去思考这个页面为什么会看上去复杂,或者是乱?(如果照着一个很“乱”的产品原型去上色,那我觉得设计出来的页面带给用户的体验也算不好的,甚至和你拿到原型的时候一样不知所云,找不到哦这个页面的根本,不知道这个页面在描绘着什么,那么这个时候这个页面就是不合格的。)所以在我们看到很乱很复杂的页面时,我们学会去从产品原型思考,思考为什么会乱,先得自己理清楚,做出来的东西才有可能让用户理解。
唐纳德说的很好的一句话:当我不知道怎么让水龙头出水时,那么就是这个水龙头设计得不好!
案例一
当M在浏览本次需求时,看到这个页面时脑子是一片空白的,有点力不从心,无从下笔,所以M决定将它留到最后花时间完成。
首先我们看难点:内容上,一屏展示这么多的内容,层级上,一屏展示3层层级(一级层级“曲线...”、二级层级“中行汇买价...”、三级层级“7天...”)。
其次我看在看到这个页面不知所措的地方当然不只是在难点上,当M在拿到这个页面的时候,第一反应是【乱】,一时看不明白这个页面。所以在有了问题,M就本能的去思考问题,为什么这个页面会【乱】,真的是自己的设计能力问题吗?或者是其他的原因?
在M经过一上午的思考后总算是得出了这个页面乱的问题所在。见下图解:
这是一个正常的层级区块划分图,但是在第二层级出现了问题,如下图:
二级title的管辖范围其实并不包括,第二个或第三个的内容部分。
那如果你说,我们可以理解成把title和对应内容看成是一个大title。那就是可以理解成【title+内容=banner】也就是下图所示:
这样看似乎层级是合理的了,不存在管辖混乱的说法。但这样出现了一个更大的问题,如果把title类比成banner,那么三个banner实则是平级的,是相对独立的,或者说是三个banner都属于第一层级。
但是,将其统一独立后的banner,我们会发现并不能与下面的内容联系起来,因为一个多行排版的banner并不能作为一个taitle来使用,心细的M做了如下两个如来区别什么banner可以什么不可以:
如图所示,如果要让banner作为二级taitle,那么应该是右边的情况。所以综上所述,我们不难得出产品的过分想展示内容导致了页面层级的混乱。
最后我们得出一稿相对合理的层级分布图,如下:
我们将二级title下其余的内容移除,只展示当前title下的内容,这样虽然我们不能在一屏上看到更多的信息,但是我们避免了让用户看到不属于这个页面的内容,让用户更清晰知道这个页面的内容就是属于这个title下的。
结论:有时候并不一定产品原型就是对的,有时候也并不是一屏展示出所有的信息就是对用户有益的,所以在合理的情况下去分析产品的结构也许对用户对设计来说都不是一门损失。
略述己见,大佬们不要见笑。
未完待续...