美文网首页
满易行产品视觉分析

满易行产品视觉分析

作者: 笑笑子阿 | 来源:发表于2016-07-20 11:04 被阅读0次

    最近在换工作,有一家企业希望我能够通过分析其竞品考察我的专业能力,因此让我对满易行这款产品进行分析,若是我怎么设计这款产品。

    以下就是我的回复,主要是视觉方面的分析,从色彩、字体、icon方面进行了分析,最后给出了自己的设计方案。

    1.色彩

    首页色彩混乱,表现在冷暖色调混搭。首页有绿色、蓝色、橙色和黄色,绿色、蓝色属于冷色调,而橙色和黄色属于暖色调,且冷暖色调的面积大小接近,导致界面营造出来的氛围是混乱冲突的。

    色调

    2.字体

    首页五大功能以九宫格形式排布,每一个功能是由一个色块+一个icon+功能名称三个元素组成,功能名称文字在这里只是使用普通状态普通字号的微软雅黑,没有设计感,并没有做一个突出的效果,比如采用另一种字体,换一个颜色,放大,加粗等方式强调一下。

    字体

    上部分的banner的设计主副标题做了区分,但是主副标题都与背景色太过接近,没有跳出来。尤其是副标题很有可能在强光下是根本看不到的。

    助手界面的文字编排主次分明,通过字号大小和色彩的深浅做了区分。但是图标与文字没有对齐。负空间增加,造成阅读负担。

    字体

    3.icon

    主导航icon设计,形式感不太优美。助手和我这两个icon还好,首页中间的心形不太美观。

    首页功能按钮icon不统一。ETC圈存与实时路况、邀请好友的icon的背景(气泡一样的圆圈)是一致的,但是大小不一致,icon造型ETC充值圈存是线描形式,实时路况和邀请好友是填充形式。高速通行费喝油费估算icon和违章查询icon的背景类似,但是高速通行费和油费icon有阴影,而违章查询没有。

    banner上面的按钮设计太平太小,要不是前面画了一只手,人看到之后不会有点击的欲望。

    助手界面实时路况icon与其它项目icon不一致,其它icon为彩色背景上面加白色的项目造型剪影,而实时路况为扁平插画样的。

    我的界面的icon设计总体也不统一,造型不够优雅。很典型的是我的头像、我的认证、邀请好友这三个icon中都有小人的造型,而这三个icon各自的小人造型各不一样。

    4.重新设计

    4.1 确定风格

    提起货运,头脑中就会出现重型卡车,多轮大车装载着满满的货物在大路上奔驰,发出好像只用了一点点力气但已经很高鸣的声音。好像永远在路上,在行驶途中,总体给人的感觉是稳重、移动、重型、大体量。针对这个印象,我提取出设计中想要表达的风格关键词,分别为:工业、安全、冷静。

    4.2 确定色彩

    满易行产品最初定位为绿色,(APP的icon色。)

    (1)货运,在运输途中,会遇到交通规则制约,我们期望一路绿灯,顺顺利利,因此选择绿色有一种暗示——出行一路顺利。

    (2)绿色是植物的色彩,代表安全、放心、安心(好多安全软件的主体色彩选择绿色),在外出行安全最重要,绿色相对合适。

    (3)反向思考,做假设。假如我选择红色,红色有危险、红灯的含义,不合适。黄色有活泼好动的特性,行车还是需要稳重一些,不合适。选择蓝色,蓝色更多代表科技感,在这里也可以,不过就没有其他暗示的意味了。紫色,紫色有高贵、冷艳的感觉,与货运行业不是很符合。

    综上,最终选择相对合适的绿色作为满易行产品主题色彩。

    4.3 首页效果图设计(包括界面布局,icon绘制)

    方案1,将五大功能以五种彩色色块代表,大按钮,大色块,大气直接。

    在颜色的选择上,基于主色调绿色,选择了色环上连续渐变的几种色彩。

    字体设计方面,这种风格的大色块大体量已经将功能入口体现的很清晰了,因此选择与其相呼应的大号细体字体,显得优雅美观。

    方案2,之前的设计思路都是首页只给每一个功能一个入口,跳转至二级界面再做具体操作。但是首页的元素相对较少,完全可以将最常用功能的二级操作界面提升到首页来,方便快捷。并且让首页丰富起来,同时透过这么一个操作界面体现出该应用的功能性。

    色彩方面,以绿色为主题色调,按照黄金分割比例,将屏幕一分为二,上半屏全绿色覆盖,为通行费油费估算模块,下半部分以白色做背景,排列ETC圈存、实时路况、违章查询以及邀请好友入口。

    通行费油费估算模块的设计中选中货车或者卡车,对被选中的类型用圆圈圈起来进行强调,将未被选中的类别进行弱化,用前景背景体现出主次。

    方案二中对ETC圈存、实时路况、违章查询、邀请好友的icon进行了重新绘制,采用当前流行的设计方式,使得这款产品更加与时俱进。并且 ,首页本身元素较少,没有亮点,icon的美化使得在视觉上首页也是有看点的,更加吸引眼球。

    相关文章

      网友评论

          本文标题:满易行产品视觉分析

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