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

做改版设计大体思路很简单,只需要做好两件事:发现问题与解决问题。今天我们先来搞定第一件事:发现问题。他说:我感觉这个页面太乱。他说:这个图标重心不稳,页面颜色有点脏,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

相关推荐

  • 央视(传统媒体)与互联网巨头(AB)在新交互形式“脸部识别”上的互怼

    支付宝霸气回应:“被盗我全赔”表明了对于人脸识别这个技术领域有比较大的知识储备与研究,针对人脸识别交互本身并不是支付宝作出这个霸气回应的核心因素

    2017-03-17
  • 从产品到交互·2015同济设计学考研经验

    【写在前面】 我叫徐晨,来自陕西西安,毕业于兰州理工大学工业设计专业。2015年我参加了研究生入学考试,也如愿考上了同济大学创意学院的研究生。想想当初独自备战,其实都是在黑暗中摸索,曾经也担心自己的复习方…

    2015-11-08
  • 国内大公司的交互设计实习面试经验总结

    沈天宇 :看着拉钩、脉脉上关于互联网岗位的信息,找一个交互设计的岗位几乎要面对100个人的竞争。想想我面前站着100个人,我要赤手空拳的打败他们,这画面简直不敢想。所以一开始我完全不知道我到底能找到一个什么样的工作,大概有一种「大爷赏口饭吃」的姿态去找实习。毕竟,我们实验室也好几年没出过阿里的人了,我也感觉我没那么优秀。面对如此严峻的就业形势,恩,首先还是开始找实习吧。这是一个最坏的时代,(一点也不好。),而且也许以后会更坏。对于找工作...

    2018-02-01
  • 关注用户体验的酒店设计永不过时

    目前110000+人已加入品筑设计位于德国巴登-巴登(Baden-Baden)的Roomers酒店,建筑的外观采用简洁的黑白灰格调,错落有致的立面构成,干净利落。建筑的外观采用简洁的黑白灰格调,干净利落、错落有致的立面构成。酒店共设有130间客房及套房,另外还有餐厅与酒吧、屋顶酒吧、500m²的水疗中心、户外花园、无边泳池等等。在精品酒店的设计中,越来越关注客人的亲身体验感,其中有几个重要的关键点:家的温馨感、艺术馆般的艺术气息、现代极...

    2018-04-10
  • 交互设计应该学的软件有哪些?

    数十万互联网从业者的共同关注! 作者:Yoojoo,作者授权早读课发表,转载请联系作者。来源:知乎仅针对现有企业交互设计师常见设计范围(网页,桌面app,移动端app)作答。1-7为交互设计师必备,8-10有兴趣的…

    2017-08-01
  • 星环AI部门招聘 | 春风十里,星环有你

    星环简介星环科技是全球领先的大数据与人工智能基础平台供应商,专注于提供企业级容器云计算、大数据和人工智能核心平台的研发和服务,打造大数据和人工智能生态的“中国心”。公司以上海为总部,以北京、广州、多伦多为区域总部,并在南京、郑州、成都设有支持中心,同时在深圳、天津、武汉等地设有办事机构。经过多年自主研发,星环科技建立了四条产品线:一站式大数据平台Transwarp Data Hub(TDH)、基于容器的云操作系统Transwarp Op...

    2018-04-02
  • 平面设计里怎样提高作品的视觉冲击力?

    提高视觉冲击力的方法非常非常多,我将结合下我的平面设计经验,总结归纳一下我所学习到的平面设计理论。我一直觉得学习平面设计不能只着眼于平面,应该让眼光开阔些,所以我下面的一些例子会从传统平面海报,绘画,建筑,电影等各个方面来分析设计原则。

    2017-05-17
  • 气定神闲的珍珠

    快快点击关注人言风华绝代太难得,然而,一个人终日沉浸在王者农药里碌碌无为,几时能被时光打磨成气定神闲的珍珠?但,珍珠是天然的馈赠,美,则是一种修炼。这世界上的一切精致动人,都是狠狠的被修理出来的。软了不行,硬了也不行,得软硬兼施。就像选专业一样。就像选择计算机软件技术专业一样。你想让自己活得精致,过得洒脱,不对自己狠一点,社会对你狠一点。自己的狠,是由内而外的质变。社会的狠,是苟且偷生。自己的狠,是内软外硬,由环境的硬塑造内心你的软,打...

    2018-03-15
  • 为什么互联网产品经理转做智能硬件后就不灵了呢?

    互联网产品经理转做智能硬件后还能像过去那样玩得转吗?互联网PM和智能硬件PM有何区别?知乎用户忘象Van以其亲身的经历,从定位、KPI考核、关注点、项目追求和成本意识的五个差别做了详细的解答:我做过手机PM,也做过互联网PM,感觉这个问题就是为我量身定做的。所有的区别都可以用一句话概括——硬件PM是生意人,互联网PM是设计师。————————————产品经理是近年来严重泛滥的一个词,而且由于互联网行业的强盛,导致大家对这个岗位的认知完全...

    2018-03-12
  • 手机交互设计中的“拇指法则”

    你有没有遇到过一款APP让你用的很不舒服?你的拇指必须要伸得老远才能够得到菜单,或者页面里元素太多导致你经常误操作。这些都是因为交互设计师在设计的时候没有考虑拇指的感受,或者更学术化点说,没有考虑到“拇…

    2017-08-03