先从视觉聊产品设计(上)

作者: WLENNON | 来源:发表于2015-06-28 17:57 被阅读5473次

          发现身边某些产品小伙伴是不怎么重视视觉设计,今儿又是一个酷酷的周末,敲敲键盘。

          我们所接受的外界信息有差不多80%都来自视觉,而视觉传达对互联网产品的重要性更明显,我们所用到的无非:视觉,触觉,听觉。至于嗅觉和味觉,帅得屏幕啥的,以及当年乔帮主介绍iPhone的拟物UI时说让人有想舔屏幕的冲动所引发的味觉感受依然来自于视觉刺激。

    从图标说起

        对于一款新APP来说,用户真正开始认识我们的APP是从我们的图标开始的,而这个 图标设计是否精致漂亮,风格与产品定位,产品的整体视觉表现是否一致,图标是应用品牌的重要组成部分。而对于用户第一次看到图标时,便开始形成对产品的第一印象,用户在不了解应用产品时,会通过对图标的印象,判断该应用的品质,作用,以及可靠性。比如支付类的应用图标,除了精致漂亮,视觉传达给用户的感觉是稳定,可靠,安全。

    他们有什么共同点?假如我们对以上两款支付应用都毫不知情,只知道是两款不同的支付应用,只看图标选择唯一一款支付应用使用,你会选哪一款?(我选支付宝)

    到应用商店搜了一下财付通的评价

    由于财付通界面“山寨”  导致  用户怀疑“是不是假的”,最终必然是    用户放弃使用,而“山寨”的感觉来源于视觉没有传达给用户“正品”该有的感觉。

    再看两款应用图标吧:美团  大众点评

    锤子对图标进行了优化也拯救不了这个奇怪的娃娃的奇怪造型

    图标就说到这...

    接着说APP的引导页和启动页。


    引导页

    当用户第一次打开一款APP的时候往往都会设计引导页。

    按目的:一般分为:功能介绍类、使用说明类、推广类、问题解决类,页数一般不会超过5页,我个人认为3页恰好,5页过多,折中的做法是用户可以选择:掉过引导

    按表现形式:图片,动效,视频,+音效

    图片和动效果是常用的形式,视频则多用于一些很需要走心的产品,(废话)比如最美时光

          引导页使用的一段精心制作的关于时光的视频,容易引起用户的共鸣,同时也传到了产品的价值。不过若我是产品经理,视频的色调会使用黑白的怀旧色调,烘托出一种时光荏苒的氛围,而整个内容页的设计至少色彩也不会用的如此高亮鲜艳,不过到也符合最美出品的风格。


    现在的APP基本都有启动页(微信的启动页:小人看地球),也有一些没有启动页(知乎:直接打开)

    在次贴上简友的补充,加上一个补丁

    【根据简友@离木而飞@小乐帝@草帽路人丁在评论区的补充:已经问清楚了,安卓会给APP预留一个白屏作为启动页,安卓开发APP的时候如果自己设计了启动页就可以把这个白屏启动页给替换掉, 也可以就直接拿来用了, 所以安卓端的知乎就是没有自己设计启动页而是用了白屏启动页,之后进入“顶端导航和载入动画”页面然后完全展开内容,像知乎日报是先白屏然后再一张图片启动页再内容,微博QQ之类的就是先启动页后内容,所以严格意义上来讲白屏也是安卓的启动页,只不过是安卓预留给APP的,可以替换可以直接用。】

    启动页的形式包括:图片,动效

    启动页的内容包括:广告,,LOGO,或者用户使用场景等等

    而对于一款app,

    一,是否需要启动页。

    占领用户碎片化时间的应用大多不应该有启动页,比如知乎,印象笔记,以及一些资讯类的客户端,不应该增加用户的时间成本,如此得不偿失。

    二,需要哪种形式的启动页。(图片,动画,还是其他什么形式)

    三,放什么内容,内容需要什么样的表现形式?(需要传达给用户的是什么内容,怎样传达,是文字还是图片,还是文字加图片,是黑白色调还是炫酷的彩色调调。是动态静态,时间多长,是初次启动需要还是每次启动都需要,字体用电脑字体还是手写体,等等等等等都需要精致的打磨,不一一列举)

    这些都需要对产品定位,用户需求,用户体验,使用场景等有着深刻透彻的思考以权衡:(视觉服从于内容,内容服从于需求,需求求于商业需要)

    优秀的APP设计,每一个细节都可以看到细节的打磨。

    写到这里,发现一个严重的问题,对于整个视觉的设计并不是有着特别自信,因为我自身做过的视觉并不多,更多的是从产品的角度思考,而产品我自身也是一只小小菜鸟,不过想想,这又何妨我对产品的思考和评价,那就找几款具体的产品来聊聊好啦。

    接着说APP的首页

    本想找一款小众的APP说说,说错了也没人知道,不过这样哪来的挑战。

    那就挑微信吧,-。-

          关于微信,之前在网上看到一道关于微信的产品题,据说是微信的产品经理笔试题:为什么微信的首页是聊天列表,而不是朋友圈?

         看了一些答案觉得都写的多少拖泥带水,在我看来:对于一款APP产品来说,首页往往就是这款产品对于用户的核心需求所在,而核心需求决定该产品的产品定位。微信的产品定位是什么?抛开如今微信正在想着连接一切的野心不说,那之前的微信的产品定位是什么,我给的定义是:E-message。E-message不知这样的翻译是否正确,好比:传统纸质邮件与E-Mail:网络邮件,而微信则是:网络短信。

          所以之前看到什么说,微信抢了运营商的短信收入,那真是拍手叫好。只能发送短短的几个文字的信息的短信那是功能机时代的短信,智能手机上的短信有了移动网络的支撑,短信自然应该睡着时代升级进化,可以发语音,发图片,这便是微信。微信既然是一款“E-短信”,聊天列表自然应该在首页。所以陌陌的首页为什是“附近”,简书的移动端APP首页为什么是“热门”

    看一款产品的核心在哪,那就看它少了那一块会死。(而朋友圈呢,为什么微信还有朋友圈,朋友圈和空间有何不同?容我再想想。(这跟视觉有什么卵关系吗?当然,首页不是你视觉接触到的吗,难道是嗅觉不成�)

    好像说了一堆很空的东西,说点实在的吧。发现拖太长了,那放下一篇继续写...

    未完待续...

    ����������������������


    相关文章

      网友评论

      • Olek:膜拜,大神
      • 7dfcaaa6a58b:很棒!感谢分享
      • WLENNON: @94年的马尾 做前端的朋友,你好
        94年的马尾:我不是做前段的,而是在走上前端的路上@WLENNON
      • 58ff07ab9db9:可以做篇论文了
      • 94年的马尾:有些启动页看着的确不需要,就像ZAKER,我觉得完全没必要,浪费
      • 386857de9cb1:启动页好像早已经成了广告页,没有就太好了,也不浪费时间
      • jieroarchl:丫的,你是不是北京的。。传出来什么“走心” 这词到底毛意思!!
      • ClanS:记得好像是从知乎看到的,Android对应用的启动页是不推荐的(iOS记不清了,好像也是不推荐).
        推荐的策略是启动的时候显示基本框架的截图,让用户认为应用已经启动,只是在加载内容而已.

        感觉对于国内的这些应用来说,启动页的最大作用就是添加广告或者宣传自家产品了.
      • 叫我七夜夜:最近也在观察一些其他的app,总觉得自己观察的思路有欠缺,看完之后,发现我只是从大体去观察,忽略了很多细节,比如图标,比如启动页。
        受教了,感谢分享🙏
      • WLENNON:@草帽路人丁 好的呢,晚上回去再完善一下, :smiley:
      • 草帽的白日梦想: @草帽路人丁 补充一下,安卓机
      • 草帽的白日梦想:这两天刚好在研究启动页,打开了很多app,发现确实是有app的启动页就是白页,像知乎。但一般都是几秒的白页或黑页过后还会加载app自有的启动页,私以为这样有点过于片断化,打断了用户的注意力。还是觉得美团的启动页最好,直接用app的启动页代替了白页,有沉浸感。
      • 离木而飞:@小乐帝 @WLENNON 已经问清楚了,安卓会给APP预留一个白屏作为启动页,安卓开发APP的时候如果自己设计了启动页就可以把这个白屏启动页给替换掉, 也可以就直接拿来用了, 所以安卓端的知乎就是没有自己设计启动页而是用了白屏启动页,之后进入“顶端导航和载入动画”页面然后完全展开内容,像知乎日报是先白屏然后再一张图片启动页再内容,微博QQ之类的就是先启动页后内容,所以严格意义上来讲白屏也是安卓的启动页,只不过是安卓预留给APP的,可以替换可以直接用。
      • 离木而飞:@WLENNON 刚才问了一下安卓知乎的同学,告诉我的回答是会先白屏几秒,然后出现顶端导航和加载动画,那么白屏应该为启动页?因为苹果要求app启动页应该与app加载完毕后展现的内容是差不多的,目的是为了让用户在启动页就已经开始习惯app而且让用户减少焦虑,因为放一个与内容结构类似的静态页面会让用户感觉已经进入app了,所以你在打开ios设置的时候会有一秒的静态动画,静态动画的内容与真正的内容有相同的地方,但这个静态动画就是“设置”的启动页~所以我觉得白屏也是知乎的启动页,当然我不清楚这是不是安卓机应用共性23333,因为没用过,等明天再问其他小伙伴来验证一下。
      • WLENNON: @小乐帝 嗯,补充的好,ios8的界面设计准则里有提到
      • 产品经理读书会:好喜欢楼主的文章,但是从技术角度考虑,应用启动需要准备数据,为了降低用户等待焦虑,有了启动页
      • 离木而飞:@WLENNON 不太清楚如何截图给你看 我是IOS,是不是安卓木有咧
      • WLENNON:@离木而飞 为何我的打开是直接进入,没有任何启动内容,截图我看看
      • 离木而飞:@WLENNON 目前知乎移动端启动页是黑色背景,中间有知乎二字~
      • WLENNON:@离木而飞 你大概指的 引导页,知乎的启动页长啥样?
      • 离木而飞:知乎没有启动页?
      • WLENNON: @Fanpenghua 谢谢,不过文章很空,我也是边学边写,权当笔记尔
      • 7d45d51365ea:为什么大家都喜欢看而不评论呢

        此文我Mark 转到http://UIQ.me

      本文标题:先从视觉聊产品设计(上)

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