好好设计

作者: 暮紫___ | 来源:发表于2017-11-20 17:55 被阅读20次

    设计的初感

    我看到一样东西时,在我的脑中此时是会呈现出来的。立体或平面、磨砂或毛绒。还有时我会感受它的平静与狰狞。互联网产品的品质不像实体,可以拿到手里真实的触摸体会,因为互联网产品的品质是内在的,也就是所谓的用户体验。用户体验在设计层面大家都知道包括了表现层的视觉和使用层的交互。设计对产品的影响之一是吸引力,在某种竞争情况下差异化的突破;二是对用户心理模型的揣摩,如动机心理学模型。动机心理学将人的行为分为四个步骤:目的、计划、实施、评价。对应于软件行为设计领域,也就是一般所说的用户模型(mental model)。在所有的设计实践中,都在反复的揣摩用户的目的是什么,他的预期是什么(计划如何行动),结合到实际,他是怎么做的,并且获得了哪些反馈,最终,他在整件事所获得的体验如何(评价)。

    设计的存在为了解决问题,只要设计过程中没有为用户解决问题而存在的设计都是不完美的。用户的行为都是存在目的性的,产品,尤其是互联网产品的品质最大体现就是用户使用过程的体验。设计做得好的产品,会让用户用的很顺手,愿意长期使用下去,或许有些"有心"的用户,喜欢货比三家,会基于对市场上其他类似产品的了解,发现这款产品的设计"很不错",进而觉得这款产品的品质不错,设计用心,可以信赖。不过,做为设计师,我不太指望这类用户的存在,大部分用户还是"单纯"的。直观的品质感感受,可能更多的来源于视觉设计。精致的细节,微妙的渐变和出奇的动态效果。

    设计一般有三个递进的层次性目标:页面流程清晰、信息传达到位,与用户产生情感共鸣。页面流程是最基本的要求,清晰、简单而不繁杂混乱。信息传达到位主要关注单页面的目的,该选择展示哪些信息,这些信息的表现形式是否能够清晰准确的传达信息的含义,对于目标用户群体的认知水平,这样的表现是否足够容易理解,同一元素,是否可以有其他更好的表现形式。情感化设计的最终目标是让用户对界面语素在通过眼睛阅读加工后,能够触发情感共鸣,从而增强体验。这些靠的是界面语言和图形表现的组合,需要设计师在做的时候就能够捕捉用户此时可能会有的心情,然后用界面语素来附和或疏导这种情绪。好的设计不仅仅是设计,还有对用户心理的把控。

    好好设计

    设计在我们身边无处不在,每一个优秀的商业化设计都可以是我们借鉴的蓝本,在开始之前我们先来看一张小米的海报。

    小米海报

    这是小米手机的一组海报中的其中一张,虽然海报中没有提到一点小米手机的具象,但全部都在述说着产品的品质。一切尽在不言中,也就是常说的视觉信息量。

    无论是工业设计,海报设计,还是在发布会中,被我们所认同的有品质感的设计主体都处于一种素雅而干净的环境中,这种环境等同于我们俗称的「留白」。在一个视觉干扰很低的设计中,我们会认为他们的「视觉信息量」很低。在视觉信息量较低的设计中,大脑容易获取信息,存储设计的风格,往往会给人一种舒适感,从而形成品质感。而如果在一个大量视觉信息堆叠的设计中,设计中的每个元素风格不能够统一,它们每个都需要经过大脑处理,而不能识别出一种风格,大脑会被认为这是一种不友好的设计,即所谓设计的廉价感。

    在提升设计的品质感时,我们可以尝试降低视觉信息量。一种手段是颜色的删减,去掉不和谐的设计元素,保持整体的干净简洁。在绝大多数没有把握的情况下,要严格控制画面中颜色的数量。过高的饱和度会产生廉价感、同一副画面颜色不要太多、不同的色相传递不同的情绪。当去掉了许多不和谐的元素之后,页面的设计风格会变得更加整体,留白的区域变大,页面的呼吸感就出来了。

    当我们在学习阶段,还没有形成完善的色彩体系时,学习借鉴网上的一些经验是最快的捷径。网上一篇文章提出,在设计选色上,有4种办法:

    • 近似色
    • 互补色
    • 同色系
    • 自然(图片中)寻找

    拿近似色来说,有现成的工具比如 Adobe Color,以及 Apple 设计师也在用的Color Schemer Studio 2,在色轮上取正负30°的颜色,通常就是非常好的近似色组合。

    Adobe Color Color Schemer Studio

    再说互补色,色轮上对应的两个颜色就是视觉冲击最强的颜色组合。

    20dx20160505

    但是千万不要拿来就用,先敲定一个主色和若干辅色:

    19dx20160505

    再确定色块的比例:

    比较常用的做法

    接着说同色系,这个比较简单,通过加深或减淡基本色,就可以定义一组可用的颜色出来:

    17dx20160505 16dx20160505 15dx20160505

    设计时基本上是选定一种颜色后,分别叠加20%透明度的白色和20%透明度的黑色,得到了想要的同类色组合。

    最后说说从自然中取色,拿一张大表姐的照片举例,放入Adobe Color 自动识别出图片中的主要颜色:

    Adobe Color 识别颜色

    根据这几个颜色以及主辅色的比例,我们可以在短短几分钟就完成一个可用的版式设计:

    这里稍微提升了画面的亮度和饱和度

    如果在设计中发现作品不合心意,没准问题就出在颜色上。

    除了颜色之外,影响设计的还有结构简化。当我们尝试删掉一些层级时,会使设计看起来更加简明一些,使得我们的页面变得更加清爽。在中文字体的选用上,可以选择一个耐看且识别性要高的无称线字体作为正文字体。中文排版的呼吸感的建立关键在于字距与行间距的调整。文字让整体更加富有空间,更加充裕的留白让整体正文变得更加富有呼吸感。

    最后是建立一个视觉层次,整体观察这段文字,一些核心字眼使得设计看起来更加有序。任何一个设计师,都应该充分意识到,有节奏的层次变化,能在用户内心产生微妙的化学反应。

    品质感来源与对生活美的追求,来源于精益求精的每一个细节的追求与把握!设计归根结底是细节的积累,当你页面处理干净,排版整齐有序,字体选择得当,页面设计的品质就会大大提升!用心探索,设计会越做越好。

    最好的设计是真诚

    在设计以及功能上有所谓的8-2取舍,即让用户更专注于原本功能,提高用户交互过程的效率,减少无措感,同时增加细节。本身的情感表现可以给产品带来品质感。设计就是不断打磨,用心体验的一种过程!对页面每个微小的地方我们都关注到的话,那么页面得质感就会得到一个非常大的提升!做一个精致的人,做一个精致的设计师!

    越用心,越美好。如果我是真实的,我的设计便是真实的。

    最后推荐

    《特别精致!10个设计师必备的顶尖用户界面纹理》

    《PS新手教程!简单几步给相片加上效果逼真的雨丝效果》

    《简约至上 交互式设计四策略》

    《设计中的设计》

    相关文章

      网友评论

        本文标题:好好设计

        本文链接:https://www.haomeiwen.com/subject/tbvvvxtx.html