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

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


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

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

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

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

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

第一个栗子

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

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

这是上线以后的样子:

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

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

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

这是优化后的样子:

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

第二个栗子

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

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

上线以后长这样:

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

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

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

这是优化后的样子:

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

第三个栗子

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

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

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

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

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

这是优化后的规范:

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

第四个栗子

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

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

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

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

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

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

最后是几条建议

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

相关推荐

  • 那些上亿人都在看的Banner都是怎么设计出来的?

    每到一年一度的大促季,会场、页面、互动游戏,都在紧张设计之中,这些精美的页面和互动游戏,如何与用户产生联系?必然需要一条与用户连接的纽带 —— 它就是BANNER。有些人可能认为资源位的设计相对简单,但其实不然,小小的资源位承载着重大的使命,设计上自然也是下了一番功夫,那这一次的双11我 们是怎么做的?请听我细细道来…..

    2017-05-30
  • 译文 | iOS 10 人机界面指南(二)

    iOS10发布了,苹果遵循了一切从简但又增加了一些提升用户体验的功能,比如向开发者开放了更多接口,设计者又如何跟随iOS的步伐做好产品设计呢?

    2017-05-22
  • 创新历史上的今天:黑白电视首次面世 1926.01.26

    今天看到谷歌Doodle的名称是: 黑白电视首次面世 1926 ,我们来说一说这个产品从0到1的创造历史,从交互设计角度看你有什么启示呢? Doodle的名称: 第一台电视亮相 90 周年 表明此doodle时间是: 26.01.2016 这个产品…

    2016-01-26
  • 看世界之Google对话式交互设计规范

    目录序言1.对话式用户界面及其重要性2.建立友好用户界面的关键-理解对话如何进行设计实践3.设计原则与方法论4.设计走查5.设计检查表6.用户界面工具包最佳实践7.像你的用户一样...有合作精神(待翻译)8.解锁口语的力量(待翻译)9.通过确认逐渐给用户信心(待翻译)10.对话中是没有错误的(待翻译)1.对话式用户界面及其重要性我们已经进入全新并且充满希望的计算机时代,机器学习和人工智能的进步使得对话式界面和自然语言处理得以兴起,通过技...

    2018-02-24
  • 做用户体验设计最难的是「平衡」

    做用户体验设计最难的是什么?「平衡」是我一贯以来的答案。在实际工作中,需要我们平衡的因素有很多,比如商业目标与体验目标的平衡、理性思维与感性思维的平衡、追求极致与关注全局的平衡、发散创新与克制专注的平衡、符合习惯与突破常规的平衡……一个好的用户体验设计师能够综合考虑到绝大部分情况,作出最适合当下产品的设计思考与决策,而不是理想化地沿着一个方向走到底。

    2017-05-08
  • 用户体验设计与创新怎么做?首期高端讲座,听世界知名企业用户体验设计总监为你答疑

    4月28日一大早海信学院的阶梯教室就已经满!满!都!是!人你看,现场是这样的还有这样的大家聚精会神,全神贯注地在做什么?原来,咱们首期高端讲座开讲啦!大家都知道,做高质量好产品一直是咱们集团的重点战略在高端讲座的首期,我们就邀请到了世界知名企业用户体验设计总监现任韩国某体验设计公司总裁Yoo老师给大家进行分享三个小时的讲座中,Yoo老师阐明了他对用户体验设计创新的理解他提到,大部分大企业往往就问题而直接解决问题,而忽略了去进行充分调查,...

    2018-05-05
  • 2018年04月07招聘岗位

    诚聘:通辽澳鼎医疗器械公司诚聘:工作人员要求:40岁到50岁之间的女性,能长期工作的,有爱心,有孝心,家庭没有负担的,高中以上文化程度,语言表达能力好待遇:中午有工作午餐,每个周日休息,节假日休息,基本工资1800元,满勤奖200元,年底奖金不少于12000元。联系人:闫经理。联系电话,15247572846,15374967717不能长期工作的勿扰!招聘服务员工资底薪2500加提成收银员2700元加提成招聘电话:8663888,157...

    2018-04-08
  • 艺术留学 | 交互设计在未来会多火?

    交互设计是什么?对你而言,它可能还是未知数。这是康石石撰写本文的首要初衷,我们先看看大多数人如何看待交互设计这一专业:1.交互设计师是做APP的2.交互设计师是给APP动效的3.交互设计师都月薪上万,且薪资上涨空间高,酬劳丰厚。其它就不清楚了。。。以下康石石引用《女神进化论》创始人--寺主人在知乎关于交互设计师目前生存现状的一段描述,供大家了解行业目前基本情况:月薪<10k俗称“线框仔”,出没于小公司和外包公司,没有设计决策权,专门配给...

    2018-04-01
  • 留白这种设计手段的4大必要功效

    留白不只是空白的画布,它是一个功能强大的设计工具。留白是很难掌握的,留白的应用是包含艺术与科学。真正了解多少空白位置才足够创造一个良好的布局需要多实践。你设计得越多,你就会学得越多。“Whitespace is to be regarded as an active element, not a passive background” — Jan Tschichold
    “留白不单单是一个被动的背景,而是一个活跃的元素。”Properly using whitespace between paragraphs and in the left and right margins can increase comprehension up to 20%
    适当的运用段落之间的留白和左右边距的留白能有效增强理解力高达百分之20.The more whitespace around an object, the more the eye is drawn to it
    越大的留白空间包围一个物件,越多的目光就会集中在这个物件身上。As designers, it’s our responsibility to create usable communication vehicles.
    “作为设计师,我们职责就是去创造“沟通手段””Let the products speak for themselves
    让产品自身为自己说话。

    2017-04-28
  • 相当便利的UI交互演示工具

    做为一个移动端的互联网产品设计师,天天心心念的就是如何做出一款款能让用户爱不释手的应用,想来轻松,做起来点点滴滴都是功能、美观和用户体验的契合难题,在一个个经典创意最终拍板前,产品原型及其演示体验,…

    UI设计 2016-06-08