美文网首页设计学习@产品路,让生活触发思考@产品
UI设计师面临的问题-如何改版提升产品?

UI设计师面临的问题-如何改版提升产品?

作者: 卢旭梁EvanLu | 来源:发表于2017-03-05 00:43 被阅读657次

    在UI设计行业,小伙伴们的成长路上,我想很多小伙伴们会遇到这样的问题亦或是在面试时,面试官也会问到这个问题:面试官通常拿出手机给你看,这是我们开发的xxx产品,目前正处于什么阶段。你看看我们的软件,能给我一些改进的建议吗?或者你觉得不好的地方是哪里?这往往是一些成长路上的设计师所面临的一个问题——如何提升产品。

    我总结了身边一些朋友经历,以及自己工作经验和伙伴的面试经历。发现小伙伴们面临这个问题,多数只会在软件的视觉层面去找一些问题。例如:这个icon不好看,这个头像太小了,这个颜色太重了等等。

    然而一个产品要想得到全面的提升,不仅仅是提升产品表面(视觉设计层面的提升)的事情。我常常把视觉设计师比做美妆师,视觉设计就像是给产品穿衣打扮,让产品看上去更“漂亮”。然而,这种美观是有局限性的,为什么这么说呢?你想象一下,一个女生身高150cm,体重140斤然后画了妆。你脑补一下这个场景,你觉得这个女生会好看吗?肯定不会好看。因为他的身高体重已经决定了身形的结构。 即便她脸蛋长得再好看,身高150cm/140斤的体重也足让整个人体态走形。
    为什么要举这个例子,因为产品其实就像人,每个公司的产品都是一个个体。

    那如果想让这个体(一个产品),改版的更好,不只是给他化妆就行了,必要时还得动动结构,把它身高拉高,体形变瘦。再加上视觉层面的设计(穿上好看的衣服,化化妆),这个产品才会看上去“更好”。

    为什么这么说,我也在书上找到了依据-—《用户体验要素》

    这本书的作者加瑞特(Jesse James Garrett)倡导的《用户体验要素》说:“用户只能看到表现层的用户界面,而只要剥离了用户界面,就能看到下面的框架层。支撑框架层的就是在下一层的结构层,结构层来源于范围层,而范围层的基础就是战略层”。

    snail.png

    每个层面都是根据它下面的那个层面来决定的。所以,表现层由框架层决定,框架则建立在结构层的基础上,结构层的设计基于范围层,范围层是根据战略层来制定。这种依赖性,意味着在战略层上的决定将具有某种自下而上的的“连锁效应”。

    表现层就是我们视觉设计师的职责所在,通过设计让用户界面看起来更美观。

    那么可想,如果面试官问你亦或者领导让你提升产品,那不只是从视觉上面提升就可以的,除非他们要求只从视觉层面提升。

    从这个模型,我们可以看出,每一层都是由它下面一层所决定的。那要提升整个产品,就要考虑到整体。考虑到每个层次所涉及的内容:

    表现层——用户界面,设计上是不是有缺陷,能不能从视觉设计上把界面设计改进的更好一些。

    框架层——按钮、控件、照片和文本区域等。这些能否优化设计布局,以达到这些元素的最大效果和效率。

    结构层——结构层确定了产品的各种特性的功能最合适的组合方式。用来设计用户如何到达某个页面,并且在他们做完事情之后去什么地方。

    范围层——产品(软件)的特性和功能构成了网站的范围层。例如:浏览商品、夜读模式、可视频、存入草稿箱等等功能;

    战略层——战略层往往是公司高层(经营者)考虑的事情。经营者想从产品(软件)上得到什么?用户想从产品(软件)上得到什么。例如淘宝、天猫。经营者通过网站卖出东西,用户(消费者)像通过网站买到自己想要的东西。

    从上面的各个层面的细分,不难看出,多半产品的提升需要从,表现层,框架层,结构层进行提升,必要时还要追溯到范围层和战略层。

    那么针对我们设计师,我们要提升产品,那要考虑的是视觉上如何让产品更有自己的品牌特性,如何让一个功能视觉设计上更好。还要考虑框架层,按钮、控件、照片、文本区域布局是否合理。以及结构层这些功能组合是否合理。甚至还要考虑某些功能是否必要(范围层)。

    今天分享的内容只是面对如何提升产品的一个思路,并未具体讲述通过某个方法去提升产品。希望整理的这个思路能帮到正在面临此问题的小伙伴,产品提升不只是视觉层面的提升。后续我也会分享具体如何着手提升产品的方法。我也在边学习边成长,希望和小伙伴的一起成长。

    相关文章

      网友评论

      • 山羊球球:非常感谢,一直苦恼做视觉改版(自学求职用),做的很乱,看来还是该了解都要了解,该做的都要做~谢谢分享和解释
        山羊球球:昂😁

      本文标题:UI设计师面临的问题-如何改版提升产品?

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