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

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


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

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

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

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

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

第一个栗子

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

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

这是上线以后的样子:

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

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

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

这是优化后的样子:

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

第二个栗子

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

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

上线以后长这样:

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

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

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

这是优化后的样子:

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

第三个栗子

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

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

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

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

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

这是优化后的规范:

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

第四个栗子

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

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

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

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

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

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

最后是几条建议

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

相关推荐

  • 让自行车站在墙上,生活中的交互设计|这个设计了不起

    Light Dusk by Z-Inhouse 宛如陶罐的铝制灯罩搭配质朴的软木,造作旗下的设计师利用两种材质的特性,打造了这个造型简洁的向晚小吊灯。喇叭形的灯罩由 1.5 毫米厚的轻薄铝板制成,表面还经过了哑光喷涂处理。嵌入顶…

    2016-12-09
  • 打造一个平台的用户体验,从需求方和供给方入手

    这几年做平台,我一直在思考平台的价值究竟是什么?后来我认识到:满足供需双方的需求,提供超越传统线下方式的用户体验,就是平台的价值。平台圈住的用户并不是它的价值,而是因为这个平台具备价值,所以用户愿意留在这个平台上。

    2017-05-11
  • 一个精美的手机的原型怎么产生的-第二集

    阿西录了下视屏尝试下最直接的方式 ,你看着阿西怎么做原型设计的。最简单方式往往最有效。 这段是:安卓手机,Axure手机框组件的视屏教程-2 在线播放! 第二集: 第一集下载地址:点我点我 第二集下载地址:点我点…

    交互设计 2014-09-06
  • 3秒即灭,APP引导页如何闪亮

    大家原谅我健忘的大脑,一直想写App经验总结,却不知道从何说起,真是对不起群众,对不起组织,对不起俺的一个好肾。这也不能完全怪俺,小学的时候语文就没考过100分,害怕写的浅了不疼不痒,浪费看官们 陪女朋友的…

    2014-12-05
  • 曝光HR简历筛选逻辑:关键词

    yooooooooooo!这里是周一很不想上班的校花~春招还在如火如荼的进行着,也不知道大家现在有没有拿到offer呢,有的就先恭喜啦,没有的也别着急,心态放平,慢慢来嘛。今天这篇文章,HR现身说法讲述平日筛选简历的真实准则。适合有过实习经历、学习经验的同学优化简历。只需多下一点功夫,简历过筛率大大提高!文 | 撕兄很多人很疑惑,HR到底是如何查找简历,筛选简历,判断简历匹配度的。大部分情况下,只要你能懂得HR是如何查看简历,判断匹配度...

    2018-04-08
  • Axure中使用图标字体【FontAwesome】

    我们使用Axure制作原型时,经常会使用到各种小图标。有些朋友自己制作、有些到网上下载,然后使用截图导入到Axure中使用。这样做非常繁琐,有些朋友问Axure是否能够像图像处理工具那样便捷灵活滴使用图标字体呢?答…

    2015-01-16
  • 如何看待近几年网页设计发展与前途?是否网页设计已死成事实?

     抱着理想走下去,跨出封闭的国门,你会看到前途是无限大的。眼界或者环境被约束了,你是爬不高的,甚至会自暴自弃,或者抱怨现实,或者失去长期坚持的信心。 就算爬高了,也只是指定一群人的尖子。不止是眼界,环境也很重要,想办法突破现实环境的约束,否则,你只能看到,web就像是被APP和 ios,android,创业,微信等等玩意儿淘汰的产物,特别是封闭在自己出生的国家,其实不然,不要相信别人说的,也不要相信你看到的,要换个环境, 体验你所感受到的。

    2017-05-21
  • 无限加载的最佳实践-交互&动效

        无限加载允许用户不断的通过滚动浏览大量的内容。它的实现原理就是当你在界面上滚动到离页底一定距离的时候,就会触发加载,在页底加载出新的内容。 这种形式让用户在浏览中不会被打断——当用户浏览到页底时,新…

    2016-06-21
  • Sketchfab可在引擎内直接搜索3D模型,太方便了!

    点击上方蓝字CG世界关注CG我们“ 感知CG · 感触创意 · 感受艺术 · 感悟心灵 ”中国最具影响力CG领域自媒体Sketchfab为其在线模型共享平台发布了新的下载API,使开发人员能够将Sketchfab内容直接导入其他应用程序或游戏引擎中。Sketchfab是一个集发布,分享,发现,购买和销售为一体的3D,VR和AR内容的平台。 提供基于WebGL和WebVR技术的查看器,允许在网络上显示3D模型,以便可以在任何移动浏览器,桌...

    2018-03-31
  • 6种实验性的网页导航模式,激发你独特的设计灵感

    不同的导航模式对于网站的影响不尽相同,针对不同的内容、不同的用户,你需要仔细挑选导航模式。

    2017-05-04