产品上线了,你咋都不好意思说是你设计的

对于界面来讲,我们设计师过于关注设计的美观度,而忽略了图片和文字的内容的真实性。而界面内容的真实性相当关键,这往往关乎自己的设计最终能不能高还原度地呈现。


对于界面来讲,我们设计师过于关注设计的美观度,而忽略了图片和文字的内容的真实性。而界面内容的真实性相当关键,这往往关乎自己的设计最终能不能高还原度地呈现。

产品上线了,你咋都不好意思说是你设计的

很枣很枣之前,有个新闻。有人娶了一个韩国老婆,因为生的孩子太丑,丈夫把老婆告上法庭,还赢了官司。

是不是似曾相识?我们很多设计师在出视觉稿的时候,设计稿狂拽炫酷屌炸天,但最后上线以后的效果,都不好意思说这是自己做的。

我们下面通过几个栗子,感受一下保持界面真实性有多重要:

第一个栗子

这是一个猜你喜欢的新界面设计

产品上线了,你咋都不好意思说是你设计的

这是上线以后的样子:

产品上线了,你咋都不好意思说是你设计的

上线以后的界面闪瞎设计师眼,图片质量比起设计稿差很多。

因为没有预料到卖家上传图片的质量,因此采用了较大尺寸的框架来承载卖家图片,这反而暴露了本身图片的缺点(有乱七八糟的膏药)。在无法规范卖家图片的情况下,最好使用别的框架去承载图片。

这是优化后的样子:

产品上线了,你咋都不好意思说是你设计的

第二个栗子

这是一个内容模块的设计:

产品上线了,你咋都不好意思说是你设计的

上线以后长这样:

产品上线了,你咋都不好意思说是你设计的

一行根本放不下标题,用户根本看不懂在说什么。同时,由于作者的名称很长,造成下面的信息重叠在了一起。而设计师显然没有考虑实际情况,只为内容的标题留了一行的空间,将作者、头像、点赞、阅读数也水平展示在一行内。

如果按照实际内容,利用横向列表式的排布,文章标题、作者头像和点赞阅读等信息都可以更好地展示。

这是优化后的样子:

产品上线了,你咋都不好意思说是你设计的

第三个栗子

需要制定一个表单信息填写的规范,主要填写信息有用户的名字和证件号,于是设计稿如图:

产品上线了,你咋都不好意思说是你设计的

拿这个规范去和机票业务方对,根本行不通。因为国际机票需要的信息如下:

产品上线了,你咋都不好意思说是你设计的

发现没,因为在设计时只知道有用户的姓名,而且仅用了“乘机人”代表用户名,忽略了国际机票是需要用户的姓/名分开来写,以及需要护照号,而不是身份证号的。虽然优化后的界面更简洁,但是不满足实际应用的。

这是优化后的规范:

产品上线了,你咋都不好意思说是你设计的

第四个栗子

设计师设计了一套频道入口的模板,如下:

产品上线了,你咋都不好意思说是你设计的

这套模板上线以后,发现有的模板应用效果如下:

产品上线了,你咋都不好意思说是你设计的

因为设计师只用了一套背景图,所以没有考虑到替换其他背景图时的展示效果,有的文字根本看不清楚。如果多尝试几张图片,为图片增加半透明黑色涂层,真实效果就会好很多:

产品上线了,你咋都不好意思说是你设计的

最后是几条建议

1|在设计前需要考察现状

考察内容包括界面都有哪些信息(照片、文字、用户名、用户头像等),每种信息的质量(照片分辨率、照片质量、文字长度、文字质量)等

2|尽量使用实际图片进行设计

在设计时使用的图片需要和线上实际的图片(卖家上传的图片、用户上传的图片、运营编辑的图片)等一致。例如商家可能会在图片上贴一些牛皮鲜,这样我们可以通过设计将牛皮鲜遮起来;如果图片分辨率暂时不能保证,那就尽量避免使用太大的图片展示区域,以免实际效果会模糊。

3|避免重复使用图片素材

如果通篇使用同一类型的素材(明暗、颜色种类等),比如白色元素在深色图片上展示效果很好,但是一旦图片是浅色,效果就会很差。这些问题在丰富性高的图片中会更容易发现。

4|保证文字内容和线上的文字内容一致

别再用Loren这样无意义的文字了,拿真实的内容填满你的界面,不仅方便你找到更好的形式去优化你的界面,更可以避免一些基础错误。

5|考虑文字的长度,制定文字规则

在规定字号的时候,首先去看你要规定的这段文字在大多数情况下有多少个字,这样能帮助你合理设计字号以及文字换行规则。

6|界面上下文关系保持一致

例如你要做一个亲子主题的页面,但是界面里出现了跳伞攀岩蹦极等刺激疯狂的活动,光在评审的时候就会让大家难以理解。

其他一些需要保持一致的情况,需要大家在工作中自己体会

 

 

作者:Sugar,(微信alibabadesigner)阿里高级设计师

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

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

(0)
CatherineCatherine
上一篇 2017-05-21 14:35
下一篇 2017-05-21 15:45

相关推荐

  • 福睿斯幸福号春运列车的背后:营销回归用户体验

    爆竹声中辞旧岁,品牌送暖入屠苏。一年一度的春节,不仅是万家团圆的时刻,也是品牌们“秀肌肉”,送暖消费者的黄金期。每到这时,煽情、怀旧、调侃、明星、红包、互动……各大品牌总会使出浑身解数以俘获消费者“芳心”。而今年最暖的,莫过于福睿斯推出的“幸福号春运列车”。今年春节期间,长安福特福睿斯联手凤凰网、12306客户端、高铁杂志《旅伴》等平台,在1月30日至3月31日期间联手为春节回家的朋友打造往返于成都—上海的“福睿斯幸福号”专属列车(D3...

    2018-03-29
  • 思路总结:从体验设计角度做有效竞品分析

    本文作者总结了自己在实践中学习和应用过的竞品分析思路,一起来看看~

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

    此次分享的 [button type="info" text="交互设计师的60日计划" url="https://www.iamue.com/tag/interaction-designers-of-60-days" open_new_tab="false"] 来自 Killa.G 让我们一起跟着学习和并学会做自己的总结与…

    2015-08-20
  • UI交互设计专业-第三十六期学员作品

    专业:UI交互设计班级:第三十六期学员学员:李银学校:湖南理工学院

    2018-03-12
  • 6个实用消费者心理学

    消费者究竟是不是傻子?这事儿真要分两面来看。有时傻的天理不容,有时精的六亲不认。傻子是这个世界最幸福的人群,哪里会有那么多傻子,只不过都是分时段的智商休眠而已,至于什么时间休眠,这完全取决于消费者出于…

    交互设计 2014-12-03
  • 为了更好的用户体验,谷歌拿出了“大棒”与“胡萝卜”

    点击关注36氪,置顶公众号专业的行业新闻及深度报道,不容错过━━━━━━这是著名分析师Ben Thompson对谷歌近期宣布的一组数据的评论,原标题为“THE AGGREGATOR PARADOX”以下为谷歌宣布的这组数据:现在共有3100万个网站加入了加速移动页面(AMP)计划,自去年10月以来增长了25%。在2月的第1周,谷歌向出版商发送了4.66亿个页面浏览量——比2017年1月增加了近40%。我们希望通过这样一篇文章,来带你了解...

    2018-02-27
  • 交互设计师的工作流程及不同阶段的职责

    本篇将介绍我目前参与交互设计的工作流程以及各个阶段的工作职责。

    2016-01-31
  • 聊聊交互新人容易犯的七个错误

    新手们在学习交互设计时永恒的问题

    2016-07-21
  • Axure RP入门第六篇——加载地图

    产品经理入门:Axure RP入门第六篇——加载地图http://api.map.baidu.com/lbsapi/creatmap/index.html

    2018-03-21
  • 课件界面交互设计

    交互的概念我们将交互定义为具有信息处理功能的两个实体或对象间信息传递和反馈的过程。具有信息处理功能的实体或对象是指那些在功能上能够完成对信息的接收、处理和发送实体或对象。交互本质上是信息传递的过程。由于交互总是由某一实体或对象出于一定目的引发起来的,所以我们还可以认为交互是一个具有信息处理功能的实体或对象基于解释为定目的对另外一个具有信息处理功能的实体或对象发送信息并得到反馈信息的过程。(孙海民,2005)。一、人机交互概念人机交互是指...

    微信热点 2018-03-01