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

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

相关推荐

  • Axure手机多屏幕滑动原型案例下载

    网络中有价值的Axure原型案例不多,给客户做的原型或者自己公司内部的几乎没有人愿意共享出来,这很正常。建议刚刚学习Axure的小伙伴儿们不要到找人索要原型,换位思考一下,你付出劳动制作好的成品也不会随意送给…

    2015-01-04
  • 设计一生要读的书汇总

    如果你是一名设计师,绝不要满足于从各个地方学来的小技巧,而忽略系统的学习。真正的设计高手,绝不仅是因为知道的招数比别人多,而是对 Photoshop和自我有深刻的、系统的认识。他们熟稔各种技巧,恰恰是因为他们…

    2017-03-08
  • 我们如何有所作为的设计经验?:在DfE的教训- 有效用户体验

    它并非罕见,请参见语句喜欢"让世界更好的地方,在一段时间的一次经历"在用户体验从业者的生物。这些都是崇高的索赔,但当你的工作都是围绕创造产品和服务,使人们更加快乐和多产,很容易看到如何思考这种悄然而至。

    2014-12-28
  • 为用户操心!如何用预期式设计保持用户体验简单易行?

    现如今,用户大多深陷于碎片化的时间和过量的信息,所以用户更加青睐简约而现代的网页设计。“少即是多”是这类网站的设计哲学,少而精准的内容设计方式和内容策略让访客从沉重的信息压力中解放出来。 虽然做减法的方…

    2015-11-19
  • 定义设计原则,驱动设计决策

    UX团队如何给设计原则做优先级排序?本文就此展开讨论,enjoy~这个list有优先顺序吗?

    2017-04-27
  • 这样学Axure,效果显著,还能提升产品交互,更容易拿高薪

    众所周知,Axure是产品经理必备的工作软件。BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别让Axure阻碍你的高薪产品路!别等面试时,才发现自己掌握不够。“起点学院&腾讯课堂”联合打造6周Axure实战班,第7期开启报名!从第1期到现在,1800多位同学学习成长,这是1800多位同学的经验贴。花3-5分钟了解,很快Axure对于你,就不再是问题。(真诚地说)0基础的Axure新手,如何才能更快达到高薪产品经理的Axu...

    2018-03-18
  • 用户体验与可用性的差别有多大?

    一个好的用户体验究竟是什么?它与可用性易用性的差别有多大?这是从事这份工作后没有停止思考过的一个问题,因为对用户体验不同的解释会导致不同的测量范围。哪些用户体验信息(从我们的定位用户处直接或者间接可测量的数据)是对你们的组织有用的?起到什么样的作用?

    2017-05-13
  • 这个按钮不简单

    Slack 将保存时的「状态提示」设计在了同一按钮中。Flava 通过按钮的不同状态将「删除」与「确认」两个操作结合在了一起。Arent & Pyke 巧妙的将进度提示设计在了提交按钮中。Fantastical 2 利用了 iOS 的 Switch Button 来对 Event 和 Reminder 两种类型进行切换,并在按钮中加入了相应的图标用以识别。Wifeel 将 iOS 和 Android 版 App 的下载按钮统一设计在了一个按钮中。Tidy 在进行「归档」和「添加至相册」操作时,会在顶部以同色的方式来标识所对应的操作按钮。在 Tumblr 中关注某个用户时,「Follow」按钮会变为当前用户的头像并以一个小动画来作为关注成功的提示。

    2017-06-05
  • 交互设计师的60日计划之第十天

    今天一直处于多线程高并发的状态,所以大脑目前已经死机了。一上午的用户访谈,今天的用户很专业,所以得到很多有用的信息;下午和产品经理过wiki优化的事情,确定大致的方向,然后开了一下午周会;回来和视觉一起…

    交互专题 2015-08-20
  • 不以用户体验为目标的人工智能都是耍流氓

    上周末,老刘在家整理了一下旧物,忽然发现了这个。估计现在很多人都会觉得这简直是土到爆了,但在当年那可是先进到不行。听歌、拍照、玩游戏、上QQ,绝对是功能最强大的手机,每当老刘拿出来,那内心简直不要太骄傲。曾经把诺基亚这款手机当成宝贝的老刘,绝对没有想到,短短几年后,那些曾值得炫耀的功能,会变得不值一提。看看现在的手机,拍照都是自带PS的,玩游戏都是屏幕上直接操作的,买东西手机是可以直接付钱的,出门迷路了是可以直接导航的。老刘不禁感叹,科...

    2018-02-01