改版设计的思路(下):解决问题

做改版设计大体思路很简单,只需要做好两件事:发现问题与解决问题。上一期(点击查看)我们做了改版设计的第一步──发现问题,今天我们来做第二步──解决问题!


做改版设计大体思路很简单,只需要做好两件事:发现问题与解决问题。上一期(点击查看)我们做了改版设计的第一步──发现问题,今天我们来做第二步──解决问题!

改版设计的思路(下):解决问题

经过分析,我发现一个很有趣的事情,就是上期提出的问题与问题之间还有很多其他维度的共性,于是我再次分类,得到以下三种类型:

1、规范统一类问题

例如:文字、颜色、控件、图标有太多的不统一、不规范。

2、设计风格类问题

例如:图标、卡片风格陈旧。

3、信息层级类问题

例如:信息布局层级、卡片文字层级。

我们来分别讲解,并给出相应的解决思路。

1. 规范统一类问题

图标线条粗细不一致,文字各种大小,颜色各种乱用,其实这些都是规范没有制定好的原因,也就是我所讲的规范类问题。

如何解决呢?

我们需要先定好一个前期规范,然后随着场景的增加,再不断调整规范,但是千万不能在没有任何指导原则、目标的情况下就开始天马行空的设计,那样最后一定会乱作一团,尤其是在团队合作的情况下。

举几个例子(上期的问题):

1.1 文字各种大小、颜色

如下图:
改版设计的思路(下):解决问题

我们需要拉通所有场景,来进行分类,最后给出一个前期规范:

比如定义一级标题的文字为24pt,二级标题的文字为18pt,正文为14pt,辅助性文字为12pt。

文字的颜色,重要型文字使用#333333,普通型文字使用#666666,辅助型文字使用#999999。

对于文字的加粗问题,整个页面,要么主标题都加粗,要么都不加粗,如果有些加粗有些又不加粗,别人也许就会觉得我们做的不够严谨(当然特殊场景除外)!

1.2 图标线条粗细不一致

这是一个非常不应该发生的错误,在具体设计执行前,需要将描边粗细的规范提前制定好,例如统一为2px。

如下图:

改版设计的思路(下):解决问题

1.3  颜色乱用

颜色也需要我们输出前期的基础规范,考虑好他们的使用场景,以免在设计的时候胡乱用色,使最后产出的页面杂乱无章。

比如主色、辅助色、灰度色等等。

以前有写过一篇关于规范的模板,有需要的可以去看看,这里就不具体展示了。

网址如下:核桃App界面设计及设计规范

1.4 控件样式不统一

改版设计的思路(下):解决问题

明明是一个控件,却要用两种样式。

我们需要择优做好一个,然后放进控件库中,等到需要的时候直接调取。

通过上面几个例子,大家会发现,如果前期规范没有做好铺垫,后面的设计就会很难把控,尤其是当页面越来越多的时候。

2. 设计风格类问题

这一类问题都发生在具体设计的时候,

如何解决呢?

我的解决思路如下(其实这个思路适用于大部分问题):

  1. 分析自己产品的问题(上一期已经分析过)
  2. 看看竞品都是怎么做的
  3. 结合自己产品的属性、业务需求等因素进行优化

举例开始。

2.1 卡片样式不够精致

先看看我们的卡片:

改版设计的思路(下):解决问题

上一期我们已经分析出这个排行榜卡片的问题:前三名的序号过于抢眼,且样式不美观。

接下来我们需要做的就是看看竞品都是怎么处理的,因为看竞品是我们做设计必须要经历的一步,千万不要凭空想,会浪费很多时间。

我找了几个竞品网站的排行榜卡片设计,部分截图如下:

改版设计的思路(下):解决问题

我们会发现竞品的卡片前三名序号颜色都是统一的(当然有些网站也不是这样的),虽然网易新闻官网的卡片用了红色,但是为了避免过于刺眼,它没有用色块的形式,而是仅仅使数字加大变红。

我们可以结合竞品的优点来进行我们的卡片设计,最后得到下图:

改版设计的思路(下):解决问题

不过这只是自己主观针对视觉问题来做的优化,我们解决了颜色花哨抢眼及标签样式繁琐的问题,但实际工作中你还需要结合需求方的要求去进行调整,在这个过程中,沟通方式比较关键,恰当的沟通可以让你和需求方成为共同解决问题的战友,而不恰当的沟通方式也许会让你们成为互相排斥的敌人,所以很多时候心态和处事方法更加重要。

2.2 图标颜色花哨、风格陈旧

你也可以按照上面的步骤来进行优化,只不过说起来容易,真的想做得好还是需要经验的沉淀、审美的提高,只有不断地练习,才能做的得心应手。

由于工作内容不能拿出来分享,所以改版的图标都是临时在网上下载直接用的,大家可不能这样做哦!

虽然是下载的图标,但是基本的问题我们已经解决,例如视觉大小不一致,图标颜色过于抢眼等等,如下图:

改版设计的思路(下):解决问题

优化前

改版设计的思路(下):解决问题

优化后

如果是刚入行的朋友,建议可以先从模仿,借鉴开始,因为如果没有经历过大量的临摹做基础,直接就想创新,是很难做到的。

但也不能照搬抄袭,这个度一定要把控好。

3. 信息层级类问题

这一类问题为什么要单独拿出来说呢?

因为层级区分不明显是导致页面没有主次、混乱的最重要原因,我们在做设计的时候,一定要随时提醒自己,哪个是最主要的,哪些是次要的,当什么都重要的时候,也许做出来的效果就是什么都不重要了。

说几个例子:

1. 布局层级问题

改版设计的思路(下):解决问题

上图让我觉得重点是个人信息和5个图标,但其实最重要的是课程导航,针对这个问题,我们可以:

  1. 隐藏个人信息,将其收在导航栏头像里面,鼠标经过时展示即可
  2. 弱化图标(例如:使用线性图标或降低图标颜色的饱和度等)

最后得到结果如下图:

改版设计的思路(下):解决问题

2.2  文字层级

改版设计的思路(下):解决问题

我们的卡片标题与辅助信息对比不明显,解决方案就是加大标题,弱化辅助信息,最后得到结果如下图:

这个问题也属于层级类问题,标题与辅助信息对比不明显,解决方案就是加大标题,缩小辅助信息,最后得到结果如下图:

改版设计的思路(下):解决问题

以上就是今天分享的内容,希望在思路上能给大家一点启发,菜心的说法不一定对,不过你可以用来参考,取其精华去其糟粕!

最后看一下改版后的首页界面,如下图:

改版设计的思路(下):解决问题

对了,为什么上一期的栅格问题没有说呢?因为栅格系统是一个很大的知识点,打算下一期单独写一篇来和大家分享。

相关阅读

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

#专栏作家#

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

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

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

(0)
CatherineCatherine
上一篇 2017-05-03 03:27
下一篇 2017-05-03 05:31

相关推荐

  • 如何平衡用户体验和商业变现

    互联网公司往往会面对怎样平衡用户体验和商业变现的问题。其中最常见也是最典型的代表就是,作为互联网公司商业模式之一的广告,某种程度上会影响用户体验。比如广告数量过多、与用户需求根本不相关等,这都会引起用户的反感。而在Facebook看来,这并非是一个无解的问题。在1月21日举办的2018极客公园创新大会上,Facebook工程总监范鹏分享了Facebook平衡用户体验与商业变现问题的4个原则。范鹏认为,用户体验与商业变现之间产生的问题其实...

    2018-02-10
  • UED建筑品谈 | 昭君博物馆:土木轮回

    📌编辑 | F.项目竣工的下午,一片低黑的云朵重重地飘盖过来,浓烈的阳光穿过云缝狠狠地砸在了和周围土地一样色质的“夯土”表面上,一派陌上苍歌的景象。新的“土木”谦虚地溶嵌在大地之上,迥异的材料体验感却反而没有让建筑消失,熟悉得甚至可以忘记的“土”和“木”。体验变得几分陌生,他们与大地一同构建了令人难忘的场所。这让我想到几米漫画书里的句子:“……看不见的,看见了;遗忘的,记住了。”——曹晓昕主创建筑师曹晓昕中国建筑设计院有限公司副总建筑师...

    2018-02-02
  • 互联网产品经理常用工具有哪些?

    互联网产品经理的工作是复杂和多样的,PM们通常要负责产品各方面的事务,因此工作中需要用到的工具有很多,现在就跟这笔者一起来看看互联网产品经理常用工具有哪些,想走产品经理路线的同学可以提前了解一下。一、产品经理的主要工作"工欲善其事,必先利其器!"既然是"善其事",关键就是搞明白产品经理相关的工作内容,针对工作合理有效的利用软件,才能达到事半功倍的效果。要说到产品经理的职能,这是另开新篇的话题,这里我们先通俗概括一下PM的主要活动:1、参...

    2018-03-13
  • 小白菜们:别再用“好的文案”YY了,该醒醒了!

    不知何时起,文案写的好,竟然成了众多互联网小白追捧的热点,各种文案大师,文案叫兽,传道受业解惑,登台演讲,大讲文案的力量,貌似文案写的好,就练成了盖世神功,天下无敌了。

    2017-05-26
  • O2O产品的用户评价思考

    为什么产生这样的思考? 可能因为我在一家做 O2O 产品的公司,碰巧我做过 UGC 评价相关的交互设计,然而更重要的是前不久我在线下真实的场景中希望使用自家产品的评价帮助我作决策时,发现我的一些需求并没有得到很…

    2016-03-02
  • 多功能福彩APP用户体验调查问卷

    近日,湖南省福彩中心在全省7100多个彩站安装使用“智慧福彩APP”。该APP具有申领热敏纸、报修设备故障、发布活动公告、发布开奖公告、发布消息通知等功能,并服务于彩站具有各站点详情、销售目标、巡检劝人、评价管理员、问卷调查、意见反馈的功能,从而实现“福彩中心”、“市场管理员”、“彩站站主”、“彩民”、“社会公众”五者间的互通互联。彩站或彩民们有任何意见建议或技术方面的问题,均可通过该APP上报省中心,为中心机构与站主、彩民之间搭建了桥...

    2018-04-24
  • 声明:关于微信号"交互设计学堂 ID: jhsjxt"中的收费课程与本网站没有关系

    现在赚钱真容易,随便抄点内容可以开班授课了。

    2016-11-03
  • 7个技巧,帮你搞定网页首图设计

    首屏设计的7个技巧,它们并不复杂,却能帮你的首图设计更上一层楼。

    2017-06-06
  • 微信10个交互设计细节问题的探讨(下)

    文章转自:http://qinsman.com/1701_wechatrd/微信号:西市馒头铺接上篇~~~5. 删除会话时的危险操作警告左滑会话可以调出删除按钮是一个iOS下很常规的交互操作,但微信中删除一个会话意味着所有聊天记录、图片文…

    2017-08-02
  • 预算少时间紧还要出色的用户体验?看来只有试试精益设计了!

    低成本,高效率,还能把友商比下去的用户体验——全世界老板的目标都是一样的!问题是,这现实吗?先别着急否定,也许,精益创业方法系统中的精益用户体验设计可以帮到你。是时候淘汰预先大量设计、单打独斗、各个专业团队将交付文档甩给对方这些传统的用户体验设计了——把精益创业法与用户体验(UX)设计结合起来,共同成长,互惠共存——这就是Lean UX。三原则Lean UX 从精益创业法中吸收了三个基本原则。首先,它们能帮助我们简化 UX 设计流程。我...

    2018-05-04