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

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


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

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

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

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

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

第一个栗子

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

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

这是上线以后的样子:

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

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

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

这是优化后的样子:

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

第二个栗子

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

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

上线以后长这样:

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

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

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

这是优化后的样子:

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

第三个栗子

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

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

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

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

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

这是优化后的规范:

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

第四个栗子

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

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

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

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

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

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

最后是几条建议

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

相关推荐

  • 零基础学习交互设计先从这些知识开始!

    @黄红艺Designer :交互设计三部曲终于写到最后了,今天聊聊交互设计的最后一个要素 —— 交互细节设计。本要素是在前两个要素指导下的设计实践,也是交互设计可视化与形象化的关键。相对于前两个要素的完整性和系统…

    2017-08-02
  • 大屏时代,如何做好电视端交互设计?

    在过去一年多的时间里,笔者有幸参与了电视端大屏幕的项目,在不断的尝试、探索和设计中,也收获了一些关于电视端的设计经验,因此将这些“电视交互设计的一些事”分享出来,共同探讨电视端的设计。-硬件+远距离操控——基本交互-基于桌面资料研究以及设计经验,总结了基本交互主要包含以下几个关键内容:遥控器输入、导航和菜单、信息展现、控件摆放和焦点状态。一 、遥控器输入当我们用手指快速便捷地在手机屏幕上点击或滑动时,主流电视大屏及应用的操作还是:使用遥...

    2018-04-01
  • 【案例】LOFTER 信息框架改版(iOS版)

    对于一款APP的信息框架改版,可以分为以下几个步骤 竞品的信息框架分析 目的:找出差异点和共同点 作用:差异点可以根据产品的定位,做特色设计,成为产品特征;共同点是指同类产品的框架/布局共同点,可以用来寻…

    2016-07-01
  • 交互设计的实质是行为塑造

    交互性是信息化和互联网时代工业设计的发展趋势之一,也是用户体验研究的重要范畴。交互作为一种行为动作的研究,旨在把握人体工程学和逻辑思维学的多方位系统工程的发展趋势,以实现用户对操作行为的完美体验的设…

    2016-05-24
  • 设计实战:教育产品组件化交互设计的实践与思考

    网易UEDC – 王媛媛 :组件化设计,就是设计模块化,组件可复用。是以通用化的视角审视模块设计,根据业务方需求支持多个产品的接入与使用。

    2017-10-16
  • 语音交互中的“等待体验”研究

    文 | 叨叨来自雷锋网(leiphone-sz)的报道雷锋网按:本文来自百度人工智能交互设计院,通过实验的方式,研究了语音交互中用户对于智能音箱的“等待体验”。雷锋网编辑在不改变原意的基础上做了精编。回顾人机交互发展史,人类先后经历了基于命令行的CLI 时代,基于鼠标键盘的GUI时代,基于触摸的初级NUI时代。后面每一个阶段比前一个阶段更自然,学习成本更低,综合效率更高。进入AI时代,人工智能给机器带来三种能力:感知能力、认知能力、自然...

    2018-01-30
  • 从二维到三维,利用 Z 轴打造界面的空间感

    互联网空间不像现实世界,它完全是一个平面化的二维虚拟空间,所有的物体都处于一个空间平面上,但是信息内容却是有层级关系的,那么应该如何在一个平面空间里来展现多重层级关系的信息呢?

    2017-05-18
  • 微交互的设计案例与思考(中篇)

    设计师和初级产品经理在面试中不能很好回答APP设计好在哪里,并非是由于平时使用太少,而往往因为缺乏一种视角,即产品是为人而设计的。当我们意识到使用产品的是人,人具有感性层面,就会发现使用”功能强大、信息准确和流程最优“等客观化标准评价的不足。“设计和艺术是不同的,但很多人都没有认识到这一点,设计是为了人而产生的,如果你不明白人,你就不能理解什么是好的设计。”

    2017-05-02
  • 2018’IIDC信息与交互设计教学研修班开始报名了!

    点击信息与交互设计关注我们!资深教授的专业教学指导+行业专家的实际案例分享力求打造最有深度的课程培训5.10-5.12信息与交互设计专业委员会联合广州美术学院定于5月10日~12日在广州美术学院举办"信息与交互设计教学研修班"。本次研修班将特别邀请清华大学美术学院基础部主任、国家社科基金重大项目首席专家邱松教授就国家社科基金项目申报工作进行详细的解析与交流,同时邀请广州美术学院工业设计学院院长陈江教授;武汉理工大学艺术与设计学院副院长方...

    2018-04-20
  • 微信春晚摇一摇项目经验总结

    [关键词一:用产品说话] 春晚,虽然每年收视率逐渐下降,但是30%的收视率相对于其他晚会或电视剧的1-2%的收视率,依然是电视界的霸主。倚靠这个媒体,微信要做什么?打硬广?植入软广?都不是。用电视行业的话说…

    2015-02-28