改版设计的思路(上):发现问题

做改版设计大体思路很简单,只需要做好两件事:发现问题与解决问题。今天我们先来搞定第一件事:发现问题。他说:我感觉这个页面太乱。他说:这个图标重心不稳,页面颜色有点脏,banner有点丑,图标描边粗细不一致。他说:问题出现在以下几个方面:颜色、图标、布局等等,其中颜色问题有……图标问题有……


做改版设计大体思路很简单,只需要做好两件事:发现问题与解决问题。今天我们先来搞定第一件事:发现问题

改版设计的思路(上):发现问题

给你下面这样的网站首页,让你找视觉层面的问题,你会怎么阐述?(注意:本文只讨论视觉层面问题。)

改版设计的思路(上):发现问题

我个人觉得会有三种不同类型的设计师:

1. 感觉型

他说:我感觉这个页面太乱。

你问他乱在哪里,他说不出来,仅仅是感觉!这种设计师可能刚刚踏入设计行业,或者做了很久但每天混日子的那种。

2. 混乱型

他说:这个图标重心不稳,页面颜色有点脏,banner有点丑,图标描边粗细不一致。

这种设计师有一定的经验与见解,但是不善于总结与梳理,所以你会发现他们虽然能够说出问题,但都是零散的点,没有逻辑。

3. 体系型

他说:问题出现在以下几个方面:颜色、图标、布局等等,其中颜色问题有……图标问题有……

他们能够先从大的方向将问题归类,然后再阐述细节问题,思路非常清晰。

大家应该都希望成为第三种类型的设计师,但如何能成为体系型的设计师呢?

其实无非就是将结构化思维用好,找问题也一样,不要上来就说一推零散的点,这样会让人觉得你毫无逻辑。

如果别人让你挑毛病,首先我们要禁止说“凭感觉”三个字,其次即使你能说出问题所在,说之前也要先思考一下,你所说的问题够不够系统,是否先从大的方向将其归类,然后才具体阐述。

例如就拿上面这个网站来说,我会从以下5个方面来挑出视觉层面的问题(仅供参考),大纲如下:

  1. 布局
  2. 文字
  3. 颜色
  4. 图标
  5. 控件

1. 布局

1.1 关于栅格分栏

我会挑战整个网站的栅格系统,5等分栏的布局方式使整体内容过于密集,并且很多内容并没有按照栅格来布局(比如中部的5个图标),如下图:

改版设计的思路(上):发现问题

1.2 布局层级问题

很多需求方希望传递很多内容信息,并且每一个都是重点,最后就会导致用户根本不知道看什么,我们的这个网站就存在这个问题,重点应该是课程的导航,然而个人信息和快捷入口的图标区已经完全抢走的我们的视线。

我觉得布局层级一定要清晰,该收的应该收起来,比如个人信息;该轻的应该轻一点,比如快捷入口的图标区,如下图:

改版设计的思路(上):发现问题

2.文字

2.1 文字规范

文字的大小及颜色的种类太多,个别还出现加粗情况,例如仅首页的字体大小有12、14、16、18、20、24这么多种,根本没有统一的规范与逻辑,如下图:

改版设计的思路(上):发现问题

2.2  文字层级

文字层级区分不明显,我们看下图:

改版设计的思路(上):发现问题

仔细观察,我们的卡片,标题与辅助信息视觉层级很接近,几乎看不出主次,而竞品的卡片,标题与辅助信息对比很强烈,很容易就知道要突出标题。

3. 颜色

3.1 整体颜色杂乱,缺少品牌感

颜色过于杂乱,没有规则,导致视觉流不清晰,根本无法聚焦内容本身,并且你几乎无法判断那个颜色是品牌色,因为实在太乱太杂了,如下图:

改版设计的思路(上):发现问题

3.2  颜色饱和度过高,种类偏多

改版设计的思路(上):发现问题

举个例子,前三名的序号真的需要那么抢眼吗?就算用三种颜色是否可以适当降低一下饱和度?我看了很多竞品,他们是怎么做的呢?下期再说!

4. 图标

4.1 图标视觉大小不统一

改版设计的思路(上):发现问题

4.2 描边粗细不一致

改版设计的思路(上):发现问题

非常低级的错误!

4.3 图标风格比较陈旧

这个就是仁者见仁智者见智了,个人觉得图标风格已经是很多年前的了,所以可以整体优化!

5. 控件

5.1 标签样式陈旧且不够明显

请看下图,能看见标签在哪吗?感觉已经和背景图融为一体,毫无违和感,厉害了!

改版设计的思路(上):发现问题

5.2 选项卡样式缺乏统一性

排行榜的选项卡有两种样式,没有进行统一设计,差评,如下图:改版设计的思路(上):发现问题

5.3 样式的细节过于复杂

都说现在的设计要简洁,比如今年很流行的无线化分割等等,来看下图:

改版设计的思路(上):发现问题

改版设计的思路(上):发现问题

这是网站的一块截图,我至少看到了10条分割线,包括卡片的线条,选项卡的线条等等,这么复杂的细节,你说网站能不乱吗?

以上就是改版的第一步——发现问题,也许问题覆盖的并不全面,但是思路是清晰的,可以在真正进行设计的时候查缺补漏,我也仅仅只是提供一种思考方式,至于你怎么找问题,不一定用我的方法,只要能够系统的解决问题,那就是正确的。

关于第二步——解决问题,由于篇幅原因,我们下周六再见喽!

#专栏作家#

菜心,微信公众号:菜心设计铺,人人都是产品经理专栏作家,华为ITUX用户体验设计师(主视觉),3年工作经验,参与华为Welink、3MS、连长社区等多个项目的用户体验设计工作。欢迎大家互相交流关注。

本文原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23028/

(0)
CatherineCatherine
上一篇 2017-05-03 18:14
下一篇 2017-05-03 20:00

相关推荐

  • 用户体验才是真正的“一句顶一万句” 安徽燕之坊食品公司用勤哲软件实现生产、经营和管理数据的互联互通

    统计数据显示,截止2017年底,国内食品工业企业超过4万家,主营业务收入占全国工业的比重十分之一强。在实施制造强国战略和推进健康中国建设中,食品工业作为传统的“以食为天”的民生产业占据着不可或缺的重要位置。当前,食品行业在实现快速发展的过程中,面对城乡居民安全、多样、健康、营养、方便的食品消费需求时,与其他行业一样面临着转型、升级的动能和压力。尤其是在食品质量安全水平和高品质食品有效供给方面,利用现代信息技术创新消除安全和质量隐患等领域...

    2018-02-11
  • 用户体验的创新设计和研究

    2018年全国两会期间,全国政协委员叶友达教授向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》,建议加大对基于用户体验的设计创新的宣传力度,建立全国或区域用户体验研究机构,促进科技创新成果快速、高效落地。长期以来,用户体验的“以用户为中心设计”(User-Centered Design, UCD)的理念一直冲击着传统的“以技术驱动设计”的理念。有研究表明,美国两个世纪以来著名的53位创新者的创新过程,从电话到互...

    微信热点 2018-03-27
  • 订阅渠道

    一些第三方媒体渠道大家需要的可以订阅我是UE网最新文章,订阅阅读交互设计教程文章 微博:http://t.im/iamuewb 微信:http://t.im/nw5y 网易云课堂:http://t.im/iamue 网易云阅读的:http://t.im/iamue1 或者:ht…

    交互设计 2015-06-30
  • 给设计师的网页动画设计基础指南

    挤压和拉伸
    预期
    登台
    连续动作和姿态对应
    缓进缓出
    弧形运动
    次要动作
    时序
    夸张
    立体刻画
    吸引力

    2017-05-27
  • 学交互设计,怎样选择到适合自己的学校?

    欢迎关注弗斯特国际艺术教育出国留学选择学校,哪些会成为你的考虑因素?学校名气超大,排名都是top级?明星校友超多,都是艺术大佬?学校位置超好,正居于市中心?校园环境超美,好似旅游学习?不得不说这些会成为许多学生和家长,在选择目标院校时经常考虑的一些因素。排名、明星校友、地理位置,可以作为参考依据。BUT!这些不能是最终的决定因素,最重要的还是自己对专业的最终追求。交 互 设 计 详 解交互设计又称互动设计,英文名称为Interactio...

    2018-04-03
  • 译文 | 我在餐厅工作时学到的关于用户体验的心得

    本人在涉足设计专业之前学习过两年的酒店管理。在我实习的过程中,经历过许多与客户之间的沟通交流,这其中有积极的也有负面的。在我看来,酒店餐厅服务也是交互的一种形式,而且这其中涉及到很多体验设计的理论和方法,当我作为交互设计师工作多年以后,仍然觉得很受启发。当我看到篇文章的题目时,我就决定要把它翻译出来!下面进入译文。

    2017-05-30
  • 用户体验设计师的进阶指南

    互联网行业大步流星、产品迭代周期越来越短,设计挑战日趋严峻。作为一名奋斗在前沿的设计师,你有多久没有更新自己的知识体系了呢?不论新人还是老司机,如何让自己的成长速度跟上行业的飞速发展,已然成为了一个重要命题。本文旨在帮助设计师正确、快速的成长,希望给进阶之路上的设计者们带来思考和启发(注:本文主要是指互联网产品设计、用户体验设计、交互设计、视觉设计等相关设计岗位)。我们认为,只有明确了努力的方向、找到了合适的方法、优化了学习的路径,才能...

    2018-03-14
  • Axure如何制作圆形加载效果?

    01新建一个矩形,去掉底部边框02调整矩形的圆角半径03设置颜色,命名为“半圆1”04复制半圆,垂直翻转,命名“半圆2”05新建矩形,命名“矩形遮挡”06设置“半圆1”的交互样式07“矩形遮挡”遮挡“半圆1”,“半圆2”隐藏08设置“矩形遮挡”交互样式09点击预览

    2018-03-29
  • 【Sketch切图】系列教程之sketch切图基础教程

    sketch切图效率是ps的几倍,几十倍。因为大部分公司没能给设(qie)计(tu)师(zai)配mac电脑,所以用sketch少,不然我相信大部分设(qie)计(tu)师(zai)都会转移到sketch。 先说说最基础的,在sketch中,一个项目的…

    2015-12-03
  • 『交互扫盲』云里雾里,傻傻分不清楚的UI/UE/ID/UED/UCD!

    对于刚刚接触用户体验交互设计的同学来说,很多云里雾里的英文缩写,分不清各个概念代表着什么含义,今天给大家做一个简单地介绍。 对于刚刚接触用户体验交互设计的同学来说,很多云里雾里的英文缩写,分不清各个概…

    2015-01-27