恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
如何系统的进行改版设计(下)
0.0°
2017-04-26 原创文章 经验/观点 举报 10593 161 163 26

做改版设计大体思路很简单,只需要做好两件事:发现问题与解决问题。

上一期我们做了改版设计的第一步──发现问题,今天我们来做第二步──解决问题


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


1、规范统一类问题

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

2、设计风格类问题

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

3、信息层级类问题

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


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


1.规范统一类问题


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


如何解决呢?


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


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


1.1.文字各种大小、颜色

如下图:

Image title


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


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


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


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


1.2.图标线条粗细不一致

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

如下图:

Image title


1.3.颜色乱用

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

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

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

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


1.4.控件样式不统一

Image title


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

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


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


2.设计风格类问题


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

如何解决呢?


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


(1)分析自己产品的问题(上一期已经分析过)

(2)看看竞品都是怎么做的

(3)结合自己产品的属性、业务需求等因素进行优化


举例开始


2.1 卡片样式不够精致

先看看我们的卡片:

Image title

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


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


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

Image title


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


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

Image title


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


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

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


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


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


优化前

Image title

优化后

Image title

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


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


3.信息层级类问题

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


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


说几个例子:

3.1 布局层级问题

Image title

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


(1)隐藏个人信息,将其收在导航栏头像里面,鼠标经过时展示即可

(2)弱化图标(例如:使用线性图标或降低图标颜色的饱和度等)


最后得到结果如下图:

Image title

3.2  文字层级

Image title


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

Image title


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

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


Image title


对了,为什么上一期的栅格问题没有说呢,因为栅格系统是一个很大的知识点,打算下一期单独写一篇来和大家分享,这回不留言我也写,哈哈!(你要非留言我也不拦你)




微信公众号:菜心设计铺

更新:2017-04-26

收藏

161人已收藏

菜心设计铺

微信公众号:菜心设计铺

  • 123

    作品

  • 2.2w

    粉丝

  • 100

    关注

  • 第一次做插画视觉,真没想到有这么难!
  • 做了三年设计,第一次包装作品,献丑了!
  • 《菜心工作室 x 摩尔线程》
  • 原来我这一项这么弱,献丑了!

    猜你喜欢

      2017-04-26 原创文章 经验/观点 举报 10593 161 163 26

      如何系统的进行改版设计(下)

      0.0°

      你确定要举报如何系统的进行改版设计(下)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年04月16日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      163
      161
      26

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录