首页

国外画册的图文版式参考

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

国外的版式一直对图文排版要求很高,即便没有花哨的元素设计,也能通过简单的图文进行最大限度地编排,重点以展示内容为主,使版面更实用。今天小编为大家分享一组图文排版不错的国外杂志设计,也是小编喜欢的设计风格,希望会给你带来不同的排版灵感。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如何设计节日闪屏?来看腾讯设计师的实战思路!

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

情感化设计已经不是一个新概念,唐纳德·诺曼在《情感化设计》一书中,清晰地阐述了情感化设计的重要地位与作用。现阶段,同类型的产品在功能、服务、内容上日益趋同,差异越来越小,想让产品触及用户的内心,除了功能满足需求之外,也需要进行情感化运营。

微云在不断完善基础功能的同时,还基于用户行为,增加了许多情感化的体验,比如往年今日、人脸相册等。在情感化运营上,微云在2018年开始了较为完整的节日闪屏设计,希望向用户传达节日的祝福,拉近产品与用户的距离。

什么是节日闪屏?

节日闪屏是指在特定的节日进行情感化设计,传递品牌关怀的闪屏。优秀的节日闪屏,在内容上不仅能够触达用户的记忆点,也能够与品牌相融合,这样既拉近了用户与产品的距离,也强化了品牌的认知和记忆。

确定设计目标

在开始设计之前,我们期望节日闪屏能够达到以下两个目标:

  • 传达节日祝福唤起用户回忆
  • 体现微云品牌调性

不同的节日有不同的文化背景和风俗习惯,节日祝福可以结合最典型的特征,这样更有利于唤起用户回忆,后文会结合案例进行分析。然而,品牌调性是贯穿所有节日的,在设计之初,我们明确微云的品牌调性,这样更有利于品牌的传达。

1. 品牌调性研究

Alan Cooper在《About face 4》中提到,在传达品牌调性时,可以用一组形容词来描述产品及体验,这些词可以组成词云,用来指导视觉设计。如何创建这组词云呢?Allan Cooper 提供了四个方法:从品牌大纲提炼关键词、分析现有产品的界面和服务、分析竞品的界面和服务、收集用户反馈。

结合微云的特征,我们从现有产品的界面和用户反馈两个角度进行分析,提炼符合微云调性的词云。

2. 分析现有产品界面

微云的平台较多,包括WEB端、PC端、移动端、小程序等,其中WEB端和移动端的用户最多,就从这两个端入手,分析产品界面的品牌特征。从结构布局和色彩比例上,可以归纳两端的共同点:结构清晰、留白较多、简约干净。

3. 分析用户反馈

微云用户在职业分布上,白领用户占最大。结合使用场景分析,用户反馈最多的词是:轻量、方便、下载快速。

4. 提炼微云品牌词云

结合产品界面「结构清晰、留白较多、简约干净」的特征和「轻量、方便、下载快速」的用户反馈,我们提炼出适合描述微云品牌的词云:简约、干净、留白。

如何做一个节日闪屏?

接下来就以劳动节闪屏为例,从节日特征和品牌调性两个维度来阐述节日闪屏的设计过程。

1. 节日特征

利用穷举法,筛选最典型的节日特征。

微云是一个工具化的产品,旅行/度假更适合旅行类产品,劳动/休息与微云更契合。结合产品功能,定了两个方向,第一个是「五一不劳你动,微云帮你整理」,与备份照片功能结合;第二个是「劳动光荣」,凸显节日气氛。以下是一些草图方案:

2. 品牌调性

前面三个方案重点在于功能的表达,把用户目光吸引到场景上,内容丰富,但可能造成用户在3秒内无法明白画面主题。方案四重点在于气氛的表达,关注人物故事,角色正在辛勤的劳动,直接点题,场景只起烘托作用。结合「简约、干净、留白」的品牌调性和「唤起美好回忆」的品牌期望,我们选择了氛围方向进行深入设计。

主题确定之后,就开始进行优化设计了。围绕着关键词,采用扁平化的设计手法,在色彩搭配上,由于劳动节没有明显的色彩倾向,故以品牌蓝为主色调,橙色来源于产品的图标,作为辅助色提亮整体画面;在页面排版上,保持大面积的留白,简约清爽。

3. 小结

劳动节闪屏上线后,我们进行了复盘,我们希望微云的节日闪屏给用户传达的是「你的珍贵回忆微云帮你记录」这样的小心思,而不是「我们有xx功能」之类的广告,所以在以后的节日闪屏中,我们会更加倾向节日故事性的表达。视觉风格则采用简约、干净、留白的方式,重点突出人物故事,不在场景上过多渲染。

4. 其他的节日闪屏设计

按照上面的思路,我们完善了其他的节日闪屏设计。

母亲节闪屏

母亲节是一个西方的节日,在这一天,孩子给母亲送康乃馨,来表达自己的爱意。在节日故事上选择了最具代表性的孩子给母亲送花的场景。

端午节闪屏

一提到端午节,就会想起粽子的「甜咸之战」,可见粽子在端午节的重要地位,所以端午节的节日故事就围绕粽子开展,三个好友齐心协力包粽子。

七夕闪屏

牛郎织女,鹊桥相会,是七夕节的美丽传说,这一天情侣相聚,相互表达爱意。七夕故事定格在情侣相会的瞬间,女生飞奔向男生,在银河上翩翩起舞,表达久别重逢的喜悦。

中秋闪屏&圣诞节闪屏

中秋节故事主题是合家团圆、赏月吃饼。圣诞节故事则以父女二人齐心协力装饰圣诞树为主题。

△ 备注:圣诞节最终效果图由另一同事绘制

所有节日闪屏合集

输出节日闪屏规范

节日闪屏除了故事性的表达之外,在设计上我们也输出了一部分规范,用来把控风格的统一。

1. 配色规范

色彩作为用户最容易感知的部分,使用时与品牌相呼应,主色与辅助色均来源于产品图标。有明显色彩属性的节日,以节日固有色为主,比如春节红色,中秋黄色等等。无明显色彩属性的节日,可以以品牌蓝为主,强化品牌印记。

2. 角色规范

我们希望重点展示的是人物的珍贵回忆,基于此,我们设计了一批角色,讲述角色的故事,让用户产生代入感。为了保证统一性,我们制定了人物的细节规范,包括角色头身比=1 : 9、服装款式以休闲为主、服饰颜色与品牌色呼应等。

在设定好人物细节规范之后,我们也完善了角色资源库,方便后期在其他场景的应用。

3. 场景规范

在场景设计上,我们以简洁,明确为主,场景主要起烘托人物故事的作用,而不进行过多的渲染。

拓展场景的使用

做了一系列闪屏之后,这些插图和角色并没有闲置,我们在线下挖掘了一些新的使用场景。这些素材被重新利用起来,变身为办公室的装饰挂画,营造出一个充满品牌气氛的办公环境。

总结

2018年微云希望通过节日闪屏的情感化运营,给用户传达节日关怀的同时也强化微云的品牌认知。在后续的规划中,我们希望节日闪屏不仅仅是单方面的给用户传递关怀,还能够和用户互动,实现更深层次的情感交流,比如点击节日闪屏,跳转到往年今日,帮助用户回忆起以往的美好回忆,增加用户粘性。2019年微云会继续给大家传递节日的祝福,也会不断探索新的闪屏设计风格,敬请大家期待。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

模型交互的设计分析及体验建议模型交互的作用范围及交互特点


当用户在真实环境的场景中稳定放下物体模型后,会有与模型进行进一步互动的需求。这类模型交互,通常会改变模型本身的物理属性。例如:

  • 移动:改变物体在环境中的位置。
  • 缩放:改变物体的大小。
  • 旋转:旋转物体便于用户不改变自身位置观察物体。
  • 删除/重置:让模型在环境中消失或出现。

基于目前的 AR技术和手机设备限制,目前的模型交互主要是通过屏幕利用二维交互驱动 AR 三维场景中的模型,从而与模型进行互动。屏幕二维交互设计,主要是利用二维手势和界面控件去达到交互的目的。例如:

  • 按钮/摇杆:在手机界面中设计按钮、摇杆。
  • 手势:目前技术支持的瞬间的手势操作、连续的手势操作。比如单指点击、单指长按、双指缩放、双指旋转等等,我们在日常使用APP常用的手势操作。

通过进行合理的分析设计,赋予这些手势和界面控件具体的功能,去控制三维场景中模型的移动、旋转、缩放。

模型移动的交互定义及设计形式

用户会与模型进行互动,移动是最为常见的一种操作行为。通过在手机屏幕的手势操作或按钮操作,控制模型在现实场景中的位移。

我们需要通过设计用户使用常用并熟知的手势与模型进行交互,利用二维手势驱动三维空间中的模型在X轴、Y轴、Z轴的位移。

放置模型后根据移动范围X轴、Y轴、Z轴,与在现实环境的虚拟模型进行移动互动操作,设计手段包括手势、摇杆的方式。可以参考以下五种设计内容:

  • 单指按住左右移动:模型移动以屏幕有效的外侧边沿为限。
  • 单指按住前后移动:纵深移动遵循近大远小的透视效果。
  • 单指按住上下移动:模型以中轴线上下移动,实际为改变模型所在平面位置,投影以暗示高度。(需注意,单指按住前后和上下移动不会同时出现。)
  • 点哪去哪:模型从原位置向目标位置移动。
  • 界面摇杆:若屏幕手势交互有可能对控制对象造成持续遮挡,或者无法很好的完成复杂操作要求,可以通过屏幕控件满足需求。

模型移动并非需要X、Y、Z三个轴均开放,实际是根据模型位移交互的具体需求去选择开放维度,并设计合理的交互方式去响应模型的移动。可参考以下案例:

模型旋转的交互定义及设计形式

在现实场景中除了移动模型的位置,还可以通过旋转360°来观察模型细节,不仅控制模型还能把玩模型,赋予模型生命感,让用户更好地与模型进行互动。设计手段主要是针对手势的设计。可以参考以下三种设计内容:

  • 双指顺/逆时拧:一只手双指顺时/逆时拧旋转模型。
  • 双指向左/向右滑动:一只手双指左右滑动。
  • 单指向左/向右滑动:一只手单指左右滑动。

旋转模型是为了全方位观察模型,让用户更好地把玩模型。通过以下案例来进行说明:

模型缩放的交互定义及设计形式

移动模型、旋转模型都是与模型互动,如果想深入了解模型则需要对模型进行缩放操作。设计手段包括手势、滑动条、缩放倍数的按钮。可以参考以下三种设计内容:

  • 双指扩展/捏合缩放:以模型的中心点等比缩放。
  • 拖动滑动条缩放:拖动滑动条在0-100%的范围内进行缩放,当标尺拖动到极限时,则模型不再响应缩放。
  • 固定缩放倍数按钮:倍数已经固定,限定缩放的大小。

双指扩展/捏合缩放是在二维手机界面被大家熟知的手势操作,而滑动条、固定缩放倍数按钮的缩放形式,在AR场景多用于游戏类产品,一般在模型放置时固定模型大小,进入游戏后不支持手持操作。可以参考以下案例:

有一种特殊的情况,当支持放置多个模型时,如何设计呢?此时,需要通过点击选中模型,模型进入选中态,与其他模型区分开,选中后进行的操作只作用于该模型,并支持删除模型的功能。

为了增加模型交互时体验的丰富和细腻程度,模型交互(过程中、成功后)会有相应的反馈设计。包括:模型自身的动效、符合真实世界的视觉表现、音效、震动、语音反馈等。

模型交互的设计原则和建议

1. 根据模型需要定义交互自由度

模型的交互程度,需根据特定模型的自身属性/产品的类型去定义,并非所有可交互类型都需要涉及。跟核心模型体验无关的交互可禁止或增加操作难度。例如科普类模型固定放置在平面后,需要便捷地旋转以查看模型细节,但Y轴移动查看的需求不大,部分场景可考虑禁止Y轴操作。又例如游戏类 AR 模型位置相对固定,更多的体验在于与固定模型进行的细部交互。

2. 手势设计简单且符合直觉

手势设计优先使用通用的方式,若没有通用的方式,则尽可能使用简单和符合用户直觉的方式进行设计。若违反该原则可能造成用户的理解和记忆障碍,需要加重用户引导,避免给用户造成操作困难。

3. 手势设计按需搭配且不可冲突

在设定模型的交互自由度后,可选择合适的手势进行搭配使用。但一种操作方式只可匹配一个交互结果,不可出现手势冲突。手势的搭配需要成套考虑。例如以下搭配:

异常处理的设计分析及体验建议

1. AR中异常情况的定义及设计内容

传统APP设计存在异常情况,比如无网络加载失败,登录发生错误等情况,那在放置类AR 中是否存在异常情况呢?

在放置类AR 场景中体验时,由于使用者操作不当,导致模型出屏或模型丢失,无法与其再进行交互,我们统称为异常情况。还有一种情况比较特殊,当正在体验放置类AR时,其它应用突然被唤起,再重新返回放置类AR 场景的处理。所以我们从交互设计层面需要对异常情况进行及时处理,正确引导用户解决困惑,给使用者一个良好的 AR 体验。

在与模型互动过程中,会出现异常情况,需要通过一些设计形式可以及时地帮助使用者解决异常问题,设计手段包括:文字、动图、语音、辅助图形、重置、复位,具体运用根据实际设计需求而定。可以参考以下设计内容:

  • 模型出屏:模型出屏后视觉线索引导用户找到模型,可以搭配文字、动图、语音等形式,按照设计场景来自由组合。
  • 模型丢失:当视觉线索引导未找到模型时,通过点击按钮将模型复位。按钮可以常驻或非常驻。

当发生模型出屏、模型丢弃复位的异常情况,根据产品类型和场景选择合适的设计手段,解决用户的困惑。结合具体案例以说明:

在异常情况中有一些相对特殊的情况,第一种情况:体验放置类AR时,手机来电后不得不离开,当再次返回时,根据技术能力来进行交互设计引导,保留场景及模型或引导用户重新获取平面建立AR场景。第二种情况:当进入AR场景后,模型是固定大小尺寸,在设计时,需要考虑让用户可以重新放置模型在新的位置,提供重置按钮。

游戏类、科普类设计时需要保留之前AR场景,有延续性的体验,技术做不到保留,则需要重新识别平面再次建立AR场景进行体验,如果支持放置多个模型的场景,建议不保留。当进入AR场景后,模型是固定大小尺寸,在设计时,要考虑界面上需要重置按钮,让用户可以重新放置模型在新的位置。下面结合案例具体说明:

此外,在AR内容体验中也会发生丢失平面的异常情况。这里的异常处理可以使用话术准确告知用户原因,还可以配以图片、动图、语音,更具象更清晰引导用户解决问题。需注意与平面识别引导的设计形式保持一致性,若平面识别未使用语音,则识别失败提示也不能使用语音,避免突兀感。可以参考以下设计内容:

  • 纯文字话术:通过简单明了的文字正确引导用户操作。
  • 图片/动图+文字话术:图片/动图诠释文字的含义,帮助用户理解如何操作。
  • 语音+文字话术:语音辅助文字,使信息更有效传达,从而引导用户操作。

2. 异常情况的设计原则和建议

模型出屏后需要及时引导用户找到模型,避免焦虑感。

模型丢失后需要通过设计形式的组合搭配,以操作便捷的交互引导用户。

建议在设计游戏类、科普类AR产品时,再次返回APP 需要保留之前的AR场景,保留延续性。

注意如果进入AR场景时无音效和语音,则异常情况引导不能出现音效和语音,避免突兀感。

平面识别失败后需要及时反馈用户如何操作,需注意设计形式保持前后一致。

放置类AR的设计核心原则

以上就是AR放置类交互节点的分析和设计建议的详细内容。我们希望设计师能围绕AR应用的真实场景,考虑到每个体验节点的细节,结合上文提到设计建议,在设计过程中关注以下关键目标,为用户创造更加友好和细腻的交互流程和体验过程。

  • 清晰:传达的内容清晰明了,不会产生疑惑或歧义。
  • 有效:能帮助用户成功达到交互目标。
  • 流畅:无停顿感,过程一气呵成。
  • 愉悦:用户感觉愉快、无压力。
  • 可控:可自主交互,过程反馈清晰,给用户尽在掌握中的感受。

希望通过我们提出的设计内容、设计原则建议能帮助到作为阅读的设计师、开发者们,在日后的产品设计、交互设计中能让用户在放置类AR场景有更好的体验,这也是我们编写的目的所在,为AI科技尽绵薄之力。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


设计师都应该了解的Loading动画知识

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

Loading动画,在现在的设计中已经是一个必须要考虑的系统元素,它能减缓用户等待焦虑的心态,也能用来作为品牌透传,增加曝光。

那关于loading动画相关知识,我觉得对于设计师来说是有必要去了解的,所以我找到了这篇优秀文章,让大家能够深入了解loading动画,透过现象看本质,学以致用。

图片来源:Domaso

没有人喜欢等待

在用户心目中,优秀的应用、工具、网站都应该是制作精良且能快速响应他们需求的产品。

举一个真实的例子:最近我们新发布了一个用户评价的应用,第一个版本并不完美,loading延迟在2-3秒。

你猜怎么着?

很多人认为这3秒是一个故障。在实际开发中,你可能要面对龟速的网络,没有优化的代码,操作时间长或数据处理太多等问题。因此,App的运行速度可能没有用户预期中的那么快。虽然早期用户可能会给你的产品第二次机会,但绝大多数人会立即退出它。

除非你的产品界面对用户的行为提供了明确的即时反馈。刚才发生了什么?是操作错误还是在等待服务器的请求?用户需要等待多长时间才能正常使用这个工具或网站?用户为什么要等待呢?

让我们一起深入了解Loading动画:

  • loading动画的历史由来
  • 优秀loading动画所具备的特征
  • 细节可以做出精彩
  • 简单处理还是精心制作
  • 有用的工具和资源

Loading动画的历史由来

对于这种类型的反馈,设计师会使用进度条、loading示意图、预loading、或旋转器。它们向用户解释什么时间发生了什么或正在loading的过程,以减少用户的心理焦虑。

你觉得设计师是从什么时候开始考虑加上这种反馈的?

我很惊讶的看到关于Nielsen Norman的一篇文章,提到响应时间和loading动画是在1993年(参考1985年的资料):

如果计算机无法提供快速响应,则应该以百分比的形式向用户提供持续反馈。【Myers 1985 论文,“计算机-人机界面百分比进度指标的重要性”】

显示进度的三个主要优点:向用户保证系统没有崩溃且正在处理他们的问题;告诉用户还需要等待多久时间,让用户能腾出时间来做其他的事而不只是干等;甚至可以向用户提供一些可以阅读和查看的内容,减少等待的焦虑。— Jakob Nielsen, on January 1, 1993

自从Web 1.0以来,几乎每个网站都有loading状态,用户可以注意到当页面内容正在loading时,这些Loading动画活跃的身影。

在2007年的时候,网站的Loading形式大概是下面这张图上的样子:

2007年时的Loading

在那个年代,你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator (2009)这样的工具来做这些 loading动画。

到了2010年,随着CSS3的迅猛发展,出现了很多教程教大家如何做CSS3动画,也能找到大量的loading 动画预设包。设计师也可以在Ps cs5中做这种loading动画,这个在10年前是非常流行的。

在那时,Loading动画更像是web的专属问题,因为页面loading确实是一个问题。在2010年的时候,很多Flash网页都做了一些很有创意的loading动画:

30个创意Flash loading案例(https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/)

渐渐地,设计师们开始不满足于简单的进度条和旋转Loading,到2014年-2016年的时候,变得更加关注这块的设计。所以,你能发现更多关于loading教程,免费的Loading设计资源,插件和开源项目。

2016年出现的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)

设计趋势和方法已经发生了变化,但向用户提供有效反馈的原则依然需要遵循。

优秀loading动画所具备的特征

在一个完美的世界里,loading动画应该:

1、尽可能少的显示给用户

如果你的工具或网站工作的足够快,那就是非常完美的。或者至少要使得它们的速度符合用户的预期,显示好看的loading动画只是一个缓兵之计,等待太久了一样会惹恼用户。所以,首先应该是解决内容的loading问题。

2、给出具体时间

它可以是一条简单的文本信息,告知大致的等待时间,也可以是可视化的图形来表示。总共上传了多少文件?更新需要多少分钟?已经进行到了什么阶段?这些体验上的设计细节都可以给用户预期并减少焦虑。

宇航员数据loadingby Cream M.

3、告诉用户为什么需要等待

一些应用的loading过程,通常让用户不大容易理解。一个好的Loading动画,应该要告知用户等待的原因以及等待的背后软件正在做什么:

文件获取动画 by Vinoth

让我们说回我的案例,那个反馈工具软件。当我们的等待时间超过1秒时,我们决定给这段等待时间增加一段解释。动画说明应用目前正在处理截图资源,这清晰的表明,我们的工具没有崩溃,它只是正在处理请求:

好的loading动画

4、让等待的过程不那么让人无聊

可以放一个有趣的动画来吸引人,让用户的眼睛始终保持忙碌。

动画来源:Alex Kunchevsky

5、减少用户等待时间的心理感知

这与上面提到的一点非常相关,如果你在等待的过程中发现了一些能够吸引用户注意力的东西,那么感觉上时间就会过得更快。它可以是一个引人注目的色彩搭配,有趣的想法,或者是一个什么特别的东西。

蛋糕loading by Pierre Kleinhouse

6、透传公司品牌形象

如果用户在用你的应用或者网站时会有一段等待时间,为什么不机智的利用好这段时间呢?我不建议仅仅只是为了做loading而做一个loading动画或者去在动画里使用一些心理学技巧。我觉得最好是将品牌的声音融入整个Loading动画中,让它成为一个非常重要的设计细节:

BCG的车票应用动画 by Antonin

细节可以做出精彩

虽然有些人可能会认为Loading只是一个很小的UI细节,但它其实也有许多类型和变化。一般来说,我把loading动画分为几类,进度条,无限循环的loading图和骨架图。

进度条

当可以明确loading时间时使用,进度条可以通过数字或视觉化的形式来表现。

有数字进度的,有时也称为百分比指示符。他们可以简单直接,也可以很有创意,需要对你的用户业务表达更有效:

一个app loading页 by Nguyen Tran

你也可以找到有趣的进度条和循环动画结合的loading图。

Loading动画by Dragonlady

进度条背后的主要思想是显示一个操作将花费多长时间以及目前所处的状态。根据UI需求的不同,进度条也可以是线性的,没有百分比的形式。

想想Gmail,它没有显示进度百分比,但是用户同样可以感觉到加载的进度。下面是两个简单而又创意的例子:

Gamil loading和一个创意loading动画 by  Allen Zhang

循环Loading动画

当loading的时间是未知的时候来使用,它可以是默认的旋转图,也可以是一些创意动画,显示应用正在做一些事情。

计算loading图标 by Hoang Nguyen

创意性loading动画一样可以与业务紧密相关,并帮助支持品牌发声。请思考下那些应用会使用这种loading动画?

LittlePin Spinner by Daniel Sofinet

无限循环动画要求用户在上传或执行某些操作时等待,但不要求具体需要多久时间,它们可能会非常简单或非常有创意。

Loading cat by domaso. So cute!

Infinity by Eszter Balogh. 看起来非常有趣,但是你并不想他们永远不停下来。

如你所见,如今的loading动画不仅仅只是一个系统状态的UI元素。

骨架动画

骨架动画展示了loading页面的变化过程,你可以把它理解为开始是一些页面占位图,逐步加载上一些可见的图片,文本和其他内容。

这个词最早出现在Luke Wroblewski 的文章中,Luke建议使用骨架动画来获得更好的loading体验。这个想法得到了其他设计师的支持,并在Facebook、Linkedln、YouTube, Google Drive 等用户界面中得到了应用。

举个栗子,如果你使用的是网页设计工具Figma,你会在页面顶部看到一个进度条,同时还在逐步loadingUI:首先你会看到占位符,然后才是可用数据:

Figma UI

简单处理还是精心制作

除了这篇文章中所展示的一些优秀案例和Dribbble上的设计概念,在目前大多数应用中,你可能能看到还是一个默认的Loading。

有一段时间,简单的Loading被大众所推崇,因为他们对于性能的影响最小(尤其是对于web)。使用默认的或开源的loading要容易的多,不需要设计师和开发花心思来设计和实现它。

如果你正在开发MVP或者项目的第一个版本,那么使用简单的或者开源的loading动画更符合逻辑。在这个阶段,即使把loading动画做的再怎么有创意,也并不会对你的产品有多么大的帮助,如果它不能解决真正的需求。

一些简单的loading动画案例

有趣的是,在2016-2019年,我们可以看到非常多精心的loading动画。注重细节,日益成熟的设计公司,更好的科技环境,更方便的设计工具,这些都使得loading动画变得更加富有创造性。如果你浏览Dribbble,能找到非常多超赞的Loading动画,所以这也成了展现自己设计能力的一种方式。

即使在我们只有5人的初创公司里,我们也会考虑更好的用户体验,让我们用户等待的体验更愉快。否则,我们做的反馈工具可能会失去用户,没有人希望失去用户。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

Material Design 之响应式栅格布局

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

Material Design 响应式布局栅格适应屏幕尺寸和方向,确保布局的一致性。

列、间距和边距

Material Design 布局栅格由三个元素组成:列、间距和边距。

内容放置在包含列的屏幕区域中。

列宽是使用百分比而不是固定值来定义的,以允许内容灵活地适应任何屏幕大小。网格中显示的列数由查看屏幕的断点范围(预定屏幕大小的范围)确定,无论是移动设备,平板电脑还是其他尺寸的断点。

间距

间距是列之间的空间,它们有助于分离内容。

间距在每个断点范围内的值是固定的。为了更好地适应屏幕,间距宽度可以在不同的断点处改变。更宽的间距更适合大屏幕,因为它们在列之间创建了更多的空白。

边距

边距是内容和屏幕左右边缘之间的空间。

边距宽度定义为每个断点范围的固定值。为了更好地适应屏幕,边距宽度可以在不同的断点处改变。更宽的边距更适合更大的屏幕,因为它们在内容的周边创建了更多的空白。

自定义栅格

可以调整布局栅格以满足您的产品和各种设备尺寸的需求。

自定义间距

可以调整间距以在布局的列之间创建更多或更少的空间。

自定义栅格

可以调整页边距,以在内容和屏幕边缘之间创建或多或少的空间。页边距对每个断点使用固定值。

正文副本可读性的理想长度是每行40-60个字符。

间距和边距

在同一断点内,间距和边距宽度可以彼此不同。

水平栅格

Material Design布局栅格可以被水平滚动的触摸UI自定义。列、间距和边距从左到右排列,而不是从上到下排列。屏幕的高度决定水平栅格中的列数。

在非触控和web平台,水平滚动的UI并不常见。

可以定位水平栅格以适应不同的高度,从而为顶部的app栏或其他UI区域留出空间。

断点

断点是具有特定布局要求的预定屏幕大小的范围。在给定的断点范围内,布局将根据屏幕大小和方向进行调整。

Material Design基于以下列结构提供响应式布局。使用4列,8列和12列栅格的布局可用于不同的屏幕、设备和方向。

每个断点范围决定每个显示大小的列数、建议的边距和间距。

栅格特点

弹性栅格

弹性栅格使用可缩放和调整内容大小的列。弹性栅格的布局可以使用断点来确定布局是否需要显著更改。

固定栅格

固定栅格使用固定大小的列,具有流体边距,以在每个断点范围内保持内容不变。固定栅格的布局只能在指定的断点处更改。

UI(用户界面)区域

布局由多个UI区域组成,例如侧面导航,内容区域和应用栏。这些区域可以显示操作、内容或导航目标。UI区域应跨设备保持一致,同时适应不同屏幕尺寸的不同断点。

为了提高设备之间的熟悉度,为桌面设计的UI元素应该以与移动UI一致的方式进行组织。

永久UI区域

永久UI区域是可以在响应栅格之外显示的区域,如导航抽屉。这些地区不能重叠。

持久UI区域

持久性UI区域是可以随时根据命令显示的区域,或者它们可以保持可见。它们可以打开或关闭,出现或消失。当它们出现时,它们会压缩内容和栅格。

当持久性UI区域可见时,其可见性不受与屏幕上其他元素交互的影响。

临时UI区域

临时UI区域暂时出现,当它们出现时,它们不会影响响应式栅格。当它们可见时,可以通过点击其区域中的项目或其区域外的任何空间来隐藏它们。

当UI区域可见时,其他屏幕元素不是交互式的。

原型

原型是结构化布局,为布局、分层和阴影提供一致的方法。它们是一个起点,旨在在进行修改以满足产品的特定需求。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

做10年UX才能明白的9个道理

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

最近,我注意到初创企业和成熟企业都对研究热情备增 。企业欣然接受这一观点:富有意义的创新,需要把客户作为复杂生命体来理解。

这太棒了。

我也反复听过不少错误和模棱两可的说法被反复提起。因此,为了帮助大家——因为我确实喜欢帮助人——我在这里介绍一份简单易学的纠正理解偏差的小清单,希望能够广泛传播(我很有信心,因为研究表明,读者喜欢简单易学的清单)。

UXRen

1、适应不舒适的感觉

“我只知道一件事,就是我一无所知。”—苏格拉底(Socrates)

我们在重视回答和害怕提问的环境中长大。在学校里,我们因为回答正确而得到奖励;在工作中,我们因为提出好的点子而得到奖励。难怪很多人会找理由避免做研究,特别是定性研究。显得无知所产生的焦虑在心中滋长。定量的东西至少有标准化测试所带来的熟悉感,令人舒适。保持研究型思维模式意味着要认识到偏差无处不在,确定性只是一种错觉,任何答案的有效期都是短暂的。因此从长远来看,好的问题更有价值得多。只有你承认自己没有答案,才能问出好问题—也才会了解更多。

UXRen

2、先提问,再做原型

“如果我们只测试开瓶器,可能永远不会意识到客户更喜欢螺旋盖的瓶子。”
—维克多·隆巴迪(Victor Lombardi),《设计败道:来自著名用户体验案例的教训》(Why We Fail)

我们理所当然会急于制作原型,测试原型。原型就是答案,可触可摸,即使只是纸上的草图。这样做很舒服,比只是问问题舒服多了,即便这无异于烧钱。对于任何想要立竿见影地证明自己价值的人来说,只问问题,就像那只洗棉花糖的浣熊一样,事与愿违。

太早制作原型的风险在于,这会把资源投入去回答一个无人问及的问题,同时还忽略了机会成本。测试原型可以帮助你优化好点子,但不会告诉你是否在解决恰当的问题,并且,也很容易将原型的亮点误以为是点子的质量。不论如何,研究报告中的亮点也容易被误认为是具有价值的洞察。

提出恰当的问题,不会让不好的点子得到保留和维护,反而会帮助你更快地将它们识别和清除。你只需要有足够强大的内心去拥抱错误。

(如果你正在想“嘿!这对我的团队会有帮助”,我们会非常乐意去你的办公室呆一天,确定你是否准备Mule Design Studio合作。)

 UXRen

3、了解目标

除非你事先知道做某项研究的动机,否则提问就是浪费时间。你必须公开发誓:你的动机不是“为了证明自己是正确的”。这是每个人内心隐藏的目标。参看第一点。

通常,出于对研究的一腔热情,团队往往会在目标不明确、不一致时就开始跟客户对话。然后,他们会感觉花了宝贵的时间,但却不知道怎么去应用自己了解到的东西来提供解决方案,因而没有什么可供展示的。于是就有了这样的说法:“我们去年做了研究,但却是浪费时间。”于是,又回到了建立原型和测试原型的舒适圈。又或者,他们对听到的内容有不同的理解,结果又因谁对谁错更加争论不休。

在大公司、大机构中,有时大家都有心照不宣的目标:“表现出我们在尽力做研究,不过还是让产品负责人做他想做的事吧。”这听起来可能有点嘲讽意味,但通过跟许多在资金充足的研究部门的资深研究者交谈,我了解到,尽管他们撰写的报告相当精彩,但对决策的影响却为零。承认这个事实,是阻止它发生的第一步。

完美绝佳的起点,是把你的目标设置成:“我们需要确定水准,快速理解他人的观点。”不要在事后任意添加其他目标。

只有当你确定了目标,才知道自己需要了解什么。而在你选择怎么回答之前,你必须知道自己的问题是什么。

UXRen

4、在重大问题上达成一致

“从本质上讲,所有商业活动都是在人的行为上下赌注。”
——《“厚”数据的力量》(The Power of ‘Thick’ Data),《华尔街日报》

问题的质量决定了结果的用处。提出错误的问题跟用原型解决错误的问题如出一辙,它们都会给你一些你不想要的东西。从优先级最高的问题开始。确定这类问题的办法是:如果你在这些问题上的假设搞错了或忽略了,风险会最大。

最重要的研究问题是你想要知道什么,而不是你在访谈中要问什么。事实上,直接抛出你的研究问题往往是最糟糕的方式。人们往往不知道或者不愿承认他们真实的行为,但人人都很擅长编造答案。

设计研究总是和用户研究混淆。回答高优先级研究问题的方式多种多样,跟有代表性的用户对话只是其中一种。你所需要知道的,并非都是与用户相关。

通常,最关键的问题是:“基于证据,我们对客户、竞争、内部能力真正了解些什么?”问法各有不同。这可能是一个非常难以完全诚实作答的问题,但又得在短时间内回答。

UXRen

5、时间和金钱永远是够用的

当研究被定义为设计之外的一种工作,人们就很容易把收集证据当作额外负担,找理由不做。

通常,团队必须获得权威人士的许可,才能进行研究工作。提问本质上是对权威的挑战。如果你曾经和一位不同意为百万美元项目开展定性研究的领导合作,那么问问自己,这位领导购买一辆价值5万美元的汽车前会不会自己做做研究?口头上提出反对意见,心里面往往是害怕自己的主意被破坏,被证明错误,或者不那么行之有效。

如果你的目标和高优先级问题明确直白,不管时间和预算如何,你都可以了解到一些有用的信息。比如在线研究,午餐时间外出观察,测试其他产品的可用性,发挥创意。

只要不是做调查就行。

UXRen

6、不要指望数据能改变想法

“当一个人要靠着对某件事的不理解来拿薪水时,要让他理解这件事是很困难的。”—厄普顿·辛克莱(Upton Sinclair)

即使研究已经证明了这一点,但训练有素的专业研究者还是往往很难接受。如果你习惯和重视某种特定数据类型的同事一起工作,那你可能很难去说服那些不假思索就否定这种观点的人。而且,可能会因为数据不足而让某人觉得自己的专业能力受到了侮辱。

收集证据的全部意义在于基于证据做出决定。如果这些证据破坏或者反驳了决策者所信奉的想法,他们就会找理由去否定或忽视这些证据。这也是定性研究者在一些工程师驱动的组织中处境艰难的核心原因。即使问题需要的是更具描述性的答案,熟悉且擅长数字的人却想要用数字表达的答案。

因此,在尝试用数据去影响决策之前,你必须了解你的同事和领导的个人特点和他们所处的环境,了解他们是怎么做决定的。

UXRen

7、接受混乱带来的不完美

“我们善变,愚蠢,记忆力差,且有自我毁灭的天赋。”
——苏珊·柯林斯(Suzanne Collins),《饥饿游戏:嘲笑鸟》( Mockingjay)

人类的生活是混乱的。人类如果没有遇到问题,就不需要产品和服务,我们也就不会有工作。在真实、混乱的世界中为人们找出解决问题的最佳途径需要一些时间,并在一定程度上放开控制。虽然有必要采取一种合乎道德的、足够严格的方法,但并不存在绝对纯净的定性环境。明确的目标和好的问题可以承受各种不可预知的情况的考验。

人们希望开展舒适有序、显得专业的活动,这导致他们不恰当地使用焦点小组、可用性实验室、眼球追踪、调查和光鲜的报告等方式,但其实,不那么正式的研究可能会更加有效。

将证据纳入设计决策,本身就是一个增强了解的过程。你永远不会找到正确的答案并解决问题。如果过程行之有效,你就会在做决策时信心备增。

UXRen

8、致力于合作

每个从事相同工作的人面对的都是相同的现实。做出产品决策的人需要对信息完全知情。如果知识只存在于一个人的头脑中(除非你在伦敦,而那个人是你的出租车司机),那么知识本身有多好并不重要。

一组人制作报告,而另一组人收到报告后置若罔闻,便是没有合作的研究。如果这样工作,即使是最用心的团队也会让知识溜走。而如果合作中缺乏证据,则意味着每个人都心照不宣地默认:胜出的是个人偏好。这两种方法都不是最有效的。

最有效的方法,是让产品开发人员直接参与提问和回答。这样做也很有趣。实现这一点的方法有多种,依具体公司或机构而定。

提问关键在于建立一个共享的决策框架,以便做出更快更好的决策。我曾经就此召开了一场研讨会,它带来了改变。

UXRen

9、找到纠正你的偏差的伙伴

“我们可能对显而易见的事情视而不见,也可能对自己的盲目视而不见。”
——丹尼尔·卡尼曼(Daniel Kahneman), 《思考,快与慢》(Thinking Fast and Slow

你做了一些工作,找到了一些答案。现在你需要确定它们的意义。在解释研究结果时,合作变得尤为重要。每个人都被偏差所困扰,而且自己还无从察觉。我们所看到的是最符合我们现有信念的。因此,我们必须参考外部标准(包括预先设定的目标和问题),一起工作,互相检查。

这与你有多聪明或消息多灵通无关。一旦你接受了这一点,只要你在一个心理上有安全感和相互尊重的团队中工作,识别出偏差就会是一场有趣的游戏。

维基百科(https://en.wikipedia.org/wiki/List_of_cognitive_biases)提供了不错的认知偏差清单,可以和认知偏差图( Cognitive Bias Codex  )一起打印出来贴在墙上。

也许,这就叫正确的设计。

UXRen

总之,当我们在讨论设计研究时,实际上是在讨论基于证据的设计。创作、批评和探究都是设计过程中不可分割的一部分。将它们分裂开来,就会因无知、自负或恐惧而错上加错。

设计是一种价值的转换。在实现任何产出之前,你必须先问问人们真正需要什么、看重什么,问问你希望从中得到什么样的商业价值回报。

只要你采取道德的方法,诚实对待你的所见所闻,朝着富有价值的目标前进,那么,你所提出的问题和你找到答案的方式都无关紧要。正确的方法并非只有一种,正确的答案也并非只有一个。享受不确定性吧!它永无止境。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

UI设计师除设计外所需要具备的能力

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

我们已经或多或少看过一些优秀作品,也知道了一些设计方法和技巧,了解到了一些相关的理论知识,自己也做过一些项目或者是练习,总体来说都掌握了一定的设计能力;但是设计师想要拥有更多的资源(指薪资、工作机会等等)或者是想职业进阶,除了一定的设计能力之外是远远不够的。

设计师还需要掌握更多的能力,才能让自己成长提升,并且拥有他人无法取代的价值。我通过自己的经历和整理收集,发现目前如今不同阶段的设计师对待同一个问题不同的角度以及特征,如下图所示:

不难发现,当大家还是初级设计师的时候,刚刚接触设计行业,我们更多的是去观察、学习、临摹一些“好看”的作品,熟练地使用设计软件和提升设计技法,最后的是自己做出来的产品是否漂亮美观,最重要的是客户/老板是否会买单,而自己无法清晰地定义自己设计的产品价值,也不能很好表达出自己的想法和观点。所以产品走向会根据老板/客户的水准来定义,轮到自己表达只是支支吾吾,最后只是做为执行无休止地改改改。一切由老板/客户说的算,无法清晰地了解自己产品的定位,缺乏表达观点的能力,缺乏一定的审美,作为执行角色无休止加班成为了初级设计师最大的痛点。

而经过一段时间的学习和工作后,逐渐转型成为中级设计师后,有了一定的设计技法和软件使用熟练度,有了一定的审美和视觉表现能力,平台规模合作团队也逐渐变大,基本能满足老板/客户/业务方提出的需求。开始学习一些设计相关理论,开始拆解自己或别人产品的交互架构,更多地开始关注用户体验起来,也会融入品牌元素到自己的产品当中,为自己的产品做情感化设计和制定设计规范,会组织一些专业语言和业务沟通以及陈述自己的产品。但是如何从众多的设计方案中找到最优的方案来解决问题,如何更多地体现产品的价值,产品利益链如何形成商业闭环,如何在团队/设计圈体现自己个人的价值,如何提升自己的个人影响力,成为了中级设计师这阶段的痛点。

通过三年五年的沉淀,成为高级设计师后,形成了自己独有的一套方法论和设计思维,能熟练地拆解每款产品和定义产品,视觉表现层已经完全能驾驭,能清晰地阐述自己的设计思路和结论,产品用户体验层也有了一定的经验和方法,在团队中或者设计圈有自己一定的个人影响力,更多地会在工作中思考产品带来的社会价值和商业价值,会用不同的思维去思考产品的各个维度,找到最优的方法解决问题,会把固有的利益链转换成商业闭环,提升用户转化率等等。而这阶段的设计师的主要痛点就是面临着团队管理和沟通,朝着资深设计师和设计专家转型,以及如何为平台带来的利益价值考核等等问题。

资深设计师或者设计专家这里不谈,因为这阶段所思考的问题大都和设计无关了。通过上述不难发现,每个阶段的设计师都有各自的特征和痛点,虽然其中都包含着设计相关的能力,但是随着阶段的进阶设计相关的能力占比逐渐变少,更多的是其他的能力增长,所以设计师除了设计以外其他能力的重要程度显而易见,那么我们来看看除了设计以外,设计师应该掌握其他什么能力。

思考能力(Thinking)

思考能力作为首要的能力,不仅仅是设计师,其他职业一样需要这个能力,这里所涵盖的面太广泛了也说不了,这里主要针对三点来讲:核心竞争力、批判思维和分析能力。思考分为两个层面:自我层面的和业务层面的思考;自我层面的思考就是要通过深度剖析自我,发掘自己处于哪个阶段,有什么长处和不足,自己想要什么,需要往怎样的方向发展;而业务层面的则是要需要思考业务产品的结构框架、用户体验、商业价值等等等等,前者更加关注自身的成长,后者更加关注业务的成长。

· 核心竞争力

核心竞争力就是有与别人不一样的竞争力,想要做到别人无法替代你的地步,就要有自己个人核心的竞争力。如果你会做一张 Banner,我也会做一张 Banner,你会搞一个页面,我也会搞一个页面,那么你这个人就成为了可有可无的螺丝钉,唯一的优势就是年轻能拼能熬,等你熬锈了老了,随时可以换一颗新的螺丝钉来取代你的位置。所以不管什么阶段,我们要深度剖析自己,认清自己的优势劣势,并采取相应的措施。

剖析自己的核心竞争力给大家一个大致思路,从异样性和共通性入手。自己周围或多或少有团队,条件不足的话现在网络各大平台都很发达,也能融入一些设计圈子中,和不同的人对比寻找自己的核心竞争力。异样性是当前的优势,找出其中的优点,不断地放大深造,变成你的核心竞争力,而和别人不一样的缺点找出来摒弃改正;共通性就是和大家一样的地方,可以看作是伪劣势,因为诸多共通性中总有你最喜欢最擅长的一个,将它单独拿出来不断扩大,逐渐就拉开了差异性,慢慢就转化成你的核心竞争力了,而大家都有的缺点,你把它纠正了,就成为你的核心竞争力了。

来举一个栗子:小王是一名工作了3年的设计师,研究生毕业,由于公司的原因平时工作最多接触的就是一些运营图 banner,也有过很多品牌 VI 的经验,逐渐自己在视觉表现上有自己一定的见解和想法,也更加感兴趣做视觉表现的东西。

那么他的共通性就有:1.工作3年之久;2.研究生毕业;3.视觉表现能力强也更感兴趣;4.做过品牌 VI 的经验;5.有自己的见解和想法。

由此推断出小王的共通性是:1.工作经验丰富;2.视觉表现力强;3.有想法和见解;

异样性是:1.学历优势;2.品牌 VI 相关经验

那么小王可以保持自己学历优势下,可以继续深造品牌 VI 相关,逐渐转型成为高学历的品牌 VI 设计师,那么学历和很多品牌 VI 的经验就是小王的核心竞争力;也可以通过热爱去学习 C4D 动效等软件继续增强自己视觉表现力,配合自己丰富的工作经验逐渐转型成高学历的创意艺术设计师,然后通过将自己的想法见解通过分享会、文章等模式产出,将这一点升级成个人影响力,那么综合下来更加优秀的视觉表现力、丰富的工作经验和个人影响力也会逐渐变成小王的核心竞争力。

只有通过不同维度深度地剖析自己,找到自己的共通和异样点,清晰自己的价值定位,然后制定出适合自己成长目标和方案,不断放大增加自己的核心竞争力,成为不可取代的那个人。

· 批判思维

批判思维是一名设计师必须具备的思维能力,我们不仅仅要学会批判别人的作品,还要学会自我批判。这里不是指无脑的批判(之前遇到过一个实习生刚进到公司里,就把之前所有人做的东西全部批判了一遍,重点是只说产品好看与否,完全不顾及平台一致性商业价值用户体验等等,最后只批判却没有任何实质性的建议,颇有一种指点江山的感觉,然后后面再也没见到过他了),这里是指在自己通过批判别人或自我的方案,不断地优化纠正,最后产出最优质的方案,这是批判思维的出发点。

不同的人有不同的经历,看待问题的维度是多种多样的,所以一个方案产出后,通过不同的人思考后的结果是最好的解决方案。这也印证了波克定理:只有在争辩中,才可能诞生最好的主意和最好的决定。所以当设计师接到产品交互给到的原型图后,不要上手就做图,要通过自己经验和想法去看待原型图,然后提出更加优质的方案进行讨论,如果你的方案更加优质,那么不仅是产品的质量得到了优化,你个人的经验也得到了沉淀,下次遇到相同的场景就可以拿出来复用,直到遇到更好的方案。

唯一注意的事项就是注意沟通的方法,这里后文会提到,比你资历高的人提出的观点更加具有建设性,在毫无头绪没有创新的情况下就听比你更有经验的人的;遇到比你资历低的人提出的观点也不要嗤之以鼻,抓取其中有用的点,没准是一个新的思维方向;总之,有数据说数据,没数据举案例,没案例讲观点,如果连观点都没有的话,照着大佬说的话做就是了。

· 分析能力

分析能力也是设计师必须掌握的能力之一,无论你是创意艺术设计师,还是用户体验设计师,譬如一张 Banner 氛围传递或者文案排版,譬如插画的配色或者场景搭建,譬如产品的布局结构或者用户体验,这些都需要有一定的分析能力。通过拆解改版/竞品/参照产品等,明确产品的最终目的、商业价值等等,有了这些准备后才能对自己的产品进行设计或者改版。而分析产品可以以用户体验五要素的角度来分析,分别是:战略层、范围层、结构层、框架层和表现层,具体相关的文章站酷、PM 社区、36氪等等都搜的到,这里不再细说;之前在分析产品的时候发现有些产品强行套用这五个要素进去不适用,因为有些产品的页面它不存在战略层或者范围层的东西,所以我总结归纳了三个角度来分析产品。

案例就用淘抢购 v4.1 页面(已上线)来讲,三个角度主要是:表现层、用户体验层和价值层。表现层主要就是产品页面的配色、布局结构之类的;用户体验层就是产品的心智透出、交互流程之类的;价值层就是产品深度的价值体现了,比如商业价值、社会价值和用户留存率之类的;大致可以套用这个公式去思考:为什么这里会用这种表现形式,它想要表达怎样的效果,它要达到怎样的最终目的,如果是自己去设计会怎样做。举例:因为淘宝规范为卡片式设计,在视觉表现上要统一,所以淘抢购 v4.1 的业务目的是统一视觉样式,并且它需要给用户产生一种“商品很便宜快去抢购再不抢购就没了”的心智认知,它的最终目的是引导用户去商品 Detail 页面购买商品和提高商品的点击率,这样通过协调关系形成平台、商家和用户之间的利益链商业闭环。

想要提升自己的分析能力除了项目和时间的沉淀外,更多的时候需要自己平时的积累,站酷等平台有很多优秀的作品,作者会把自己设计的分析和思路写出来,我们可以看看别人的想法是否值得借鉴,然后再去分析一下,最后思考如果是自己的话会怎么去做;其次做设计的时候带着同理心去做,把自己当作用户去看待自己的产品,通过不断的积累提升自己对产品的敏锐度,将一些产品的隐性问题挖掘出来;另外可以多看一些好的设计分析书,比如《U一点料1、2》、《以匠心 致设计》等等,将学到的分析方法代入自己的产品或作品中,逐渐分析能力就增强了。

规划能力(Plan)

规划能力是日常工作生活中所需要掌握的能力,主要讲业务规划和职业生涯规划,业务规划能力应对的是我们工作中处理业务所需要具备的能力,而职业生涯规划应对的是我们整个人生职业生涯规划的能力。掌握这个能力后前者会给我们带来业务处理效率上的提升,后者给我们带来整个人生有益的好处,所以这个能力非常重要。

· 业务规划

很多时候我们还在有条不紊地处理某个需求,心想着下班去吃个饭买水果回家洗澡睡觉的时候,突然来了一个紧急的需求,就把我们整天的计划给打乱了,火急火燎地处理完这个需求,然后又把之前的需求做了,最后加班改改改导致整个计划泡汤了。工作中遇到这样的情况很多很多,处理方法有很多种,最经典的就是四象限法则,把事情的紧急重要程度分为:重要且紧急、紧急不重要、重要不紧急和不重要且不紧急四个象限。

很多时候都是道理我们都懂,可是一遇到情况依旧手忙脚乱,根本原因是没有认真地把它代入自己的工作生活当中。画一个象限表,把自己今天所要处理的事务陈列出来五分钟都不需要,一开始可能因为事情不多就没坚持下去,一旦养成习惯后,将来遇到多种紧急情况突发的时候就能认识到这个习惯给你带来的好处了,所谓养兵千日,用兵一时就是这个道理。

在做业务需求的时候,可能会碰到有些需求价值高,有些需求价值低但又很紧急,不知道怎么处理之间的关系,我们依旧可以套用四象限法则来制定一个四象限表:价值高且紧急、紧急但价值低、价值高不紧急和价值低不紧急。什么是价值高的需求呢,就是能让你有充分思考和分析的需求,比如某个页面的改版;价值低的需求则是相对不怎么需要思考和分析的需求,比如根据已有的规范改个颜色之类的。在时间的优先级前,价值高的需求大于价值低的,最后剩下的就是价值不高且不紧急的。因为我们无法拒绝需求,需求来了肯定要是做的,工作不是爱好可以有多种选择性,但我们要学会将需求分解成不同类型的,对自己有成长沉淀的需求那可以作为最高优先级去处理,留够充裕的时间去思考分析,然后沉淀经验稳定提升。

· 职业生涯规划

这个在大学期间就学过相关的课程,只不过当时并没有太深的感触,而是等工作以后才知道这项能力的重要性,它相当于关系着你每个阶段的里程碑,当成游戏中的成就任务也不为过,还是自己设定的成就任务。某个阶段想要达成什么样的目标,想要获得怎样的成就,都是要自己一步一步慢慢规划并且完成出来的。

因为我遇到过几个非常努力的人,努力到让人心悸的地步,每天除去吃饭睡觉工作时间就是在努力学习,到最后还是很迷茫,不知道做什么,不知道如何体现自己的价值。这类没有目的的努力的人是很可怕的,他们努力得没有错,但是这样下去没有成效的努力会让他们觉得努力并没什么用,然后逐渐开始产生抱怨、泄气和放弃等负面情绪。

举个例子来说明:如果你刚毕业,给自己制定的长远的职业生涯规划是在工作3~5年后进到大厂工作提升自己,那么所拆分下来就需要一些项目工作经验和优秀的作品,再拆分下来就是如何做出优秀的作品,细分到最后就是作品当中的元素,比如图标排版布局之类的,那么就制定一段时间内的练习就按照各类元素去做,比如图标画两个星期,APP 设计排版布局练习两个星期,插画练习画两个星期,这样坚持下来就组成一个完整的项目作品了,以此类推。有了规划目标并且在自我驱动的推动下,逐渐实现自己的职业目标。

执行能力(Execute)

执行能力是指自我在工作&学习中执行的能力,执行能力为一个设计师最主要的核心技能,一切的能力都凌驾于这个基础之上;哪怕你再能说会道,能赋予你的设计各种价值,能给予你的设计各种环境,但这些都是第二步,第一步就是你的设计表现达到期望值,如若第一步稿子都不好看,那么没人愿意会听你叙述的。前文已经提及到了,设计师在初级至中级阶段的时候大多数注重的就是表现手法,如同学说话一样,表现手法可以看作是汉语拼音,然后才是组成一个个字,最后组成一句完整的话语。

· 自我执行力

提升自我执行的能力我大致分为两个步骤:看和做。

首先先来说看,看其实是提高自己审美的一个过程,通过看一些平台网站的优秀设计作品,久而久之自己的审美能力才会提高,然而看分下来一种是带有目的性和不带有目的性的。不带有目的性地去看是在自己有空余或学习时间,通过浏览设计网站采集学习一些你觉得好看的作品;采集是一个很好的习惯,我觉得是每个设计师必须养成的习惯,把自己平时觉得好的表现形式收集起来,等到某一天需要用到的时候,脑海中对当前场景会有一定的印象,再根据印象去寻找采集到的作品,能很大程度上节省自己脑爆的时间,哪怕没有采集或者文件丢失,自己的脑中大致也会有一个雏形方向。而带有目的性地看是指针对某一个模块去搜集整理,比如今天我需要做一个关于内容的模块,那么我就会去寻找一些做内容的产品设计,搜集到的各类关于内容的表现手法,然后结合自己的经验和分析,找出最适合自己产品的一种。

仅仅看是不够的,在看过之后我们需要动手尝试才能算真正地沉淀自己所看到、学到的东西。做设计最忌讳的就是“眼高手低或者眼低手高”这种状态,有了审美但表现手法跟不上,或者说表现手法有但是审美跟不上。一定要在自己吸收了一定的审美后,通过自己的尝试去做出来,才能真正的沉淀到自己的大脑当中,变成自己的表现手法之一。最后通过大量的积累,结合对商业需求的判断形成设计策略,才能从容应对不同的产品需求,哪怕你今天做金融相关的产品,还是明天做电商的产品,后天又改做工具类产品,一旦形成了自己不同的应对策略,才能做到真正意义上的游刃有余。

很多时候我们只关注到鱼的大小、鱼的肉质是否鲜美那20%层面的东西,往往忽视了80%最重要的捕鱼技巧和方法;看到的只是产品是否好看,交互是否流畅,体验是否良好,没有往更深层次地去想这个产品的商业背景是什么,设计师为什么要这样设计,如果换做自己的话会去怎么做;毕竟我们所做的一切训练、思考都是为了更好地为工作服务,就如同脱离了商业背景以后,有些设计就只是单纯的炫技,并没有解决问题的价值,而设计师的工作核心就是解决问题,所以我们要结合作品的背景、价值等因素,去看、去做、去学相应的表现手法才是自我执行的核心所在。

表达能力(Express)

表达能力是设计师除去执行能力外第二重要的能力,小到平日里的沟通对接,大到述职晋升面试,都离不开表达能力的支持。有些设计师经常面试怎么都过不了关,我本以为是作品集的问题,可是看完之后作品方面完全没有什么问题,具体了解后才知道是在面试过程当中不知如何阐述自己的作品和思路或者在阐述过程中由于紧张等因素导致表达断断续续不顺畅,面试官就会觉得这个人不靠谱然后 PASS,明明做图很优秀却输在了表达上,这种情况就很憋屈。在广告公司中,一个 LOGO 或者广告视频往往只是赠品,出售的却是这个品牌VI的故事;如果一个设计师不懂得怎么阐述自己的业务,不懂得怎么推销自己的方案,不懂得拓宽自己的个人影响力,就单纯的只会执行作图的话,那么这名设计师是不合格的。网传有一个段子“一个公司的工资排名规律:用 Word 的不如用 Excel 的,用 Excel 的不如用 PPT 的,用 PPT 的不如讲 PPT 的,讲 PPT 的不如听 PPT 的,听 PPT 的不如听汇报的,听汇报的不如决定的,决定的不如签字的”,由此可见表达能力在职场中的重要性。

· 业务表达

业务表达是指在自己工作的过程当中,对自己的设计方案进行阐述。大部分设计师会遇到一个困扰,当设计稿做完以后就不知道怎么去表达自己的设计理念,被业务方/面试官/老板提出质疑时,比如:“你这产品的设计为什么要用红色?”、“聊天信息这块儿为什么要用小气泡的样式?”,往往不知道怎么去说,有一种当时就觉得好看所以这样做了,也没有去想那么多的感觉,或者其他优秀的作品/竞品是这样做的,我也就这样做了;那么结果往往就是自己的专业性遭到质疑,然后转变成业务方/老板进行设计主导,形成“改来改去还是第一版好”这样类似的恶性循环中。

那么如何提升自己的业务表达能力呢?首先设计师要提升在设计领域的专业度,通过学习吸纳设计相关的知识,然后代入自己的设计当中去试着阐述设计稿,准备工作先做到位,收集相关的数据,掌握相对应的设计理论,先说服自己再去说服别人。比如:“通过色彩心理学得知,红色能带给人兴奋、激动、热情等积极情绪,而我们产品所需要透出的氛围是热情的、积极向上的,相对应地激发出用户的正向情绪,所以我这里使用红色。”、“根据近半年数据研究得出,产品聊天信息模块使用过程当中女性用户占总用户数的85.9%,而小气泡样式相对比其他样式更能迎合女性用户群体的喜好,通过 A/B 测试结果得出,使用小气泡样式后数据上涨了15%左右,所以聊天信息模块整体改版成小气泡的样式。”

通过自己前期的准备(设计理论知识补充、用户调研、数据测试等),将自己的设计理念表达出来,主导整个设计的方向,必要时可以理性地坚持自己的设计方案,毕竟无论是老板还是业务方,出发点都是希望自己的产品能做到最好最完善,只要你给出数据支撑和专业性的建议,他们一定都会采纳接受的,而最后你的能力和专业性也得到了对应的认可。

· 书面表达

我本人是强烈建议在能力达到一定程度的时候,通过写作来检视自己成果的。因为往往很多东西自己是明白的,但是写出来让其他人看懂是另外一种能力了。自己一段时间的职业经验总结、对设计的见解看法、自己独特的设计思维、一本书的读后感等等都可以通过书面表达出来,某个知识理论难的不是学习,而是将它教授出去,因为只有你想要把某件事说明白,阐述得其他人都能看懂,那么首先你要对这件事理解得很透彻,然后通过自己的经验和见解,转化成通俗的语言说给别人听。最好的状态就是与你同样级别的人你能与他用专业术语对话,级别比你低的人你能把理论转换成他能听懂的语言进行交流,这样才算是对理论概念理解透彻到位。

大家也明白,学习最有效的方法不是输入而是输出,设计也是一样的。在学习某种理论方法后,通过书面表达出自己的见解和想法,并代入到相应的例子当中,做到举一反三才能算是真正的学到了这个知识点。

· 述职

述职一般出现在晋升报告或者面试当中,“诸侯朝于天子曰述职,述职者,述所职也。”述职可以说是工作报告中的总结性报告。向自己的老板述职是为了升职加薪,向面试官述职是为了获取更好的工作机会;工作成果有了,但是述职做不好的话,在老板/面试官眼里你就做了无成效的工作,述职没有想象的那么简单,但是也没有那么难,很多人都会经历两个述职的误区,这些误区我经历过也看到过,所以总结出来警醒大家。

一、把述职当作流水账

把述职当作流水账是很多新人容易犯的错误,当述职的时候,有的人就会陈列出自己今年做了多少多少工作:“我今年改版了 XXX 模块”、“我设计了 XXX 的首页”、“我通过调查研究自主推导改版了 XXX 模块并落地成功”等等,这时候你的老板/面试官会心里会想:“所以呢?”“然后呢?”,工作结果固然重要,但是决定你能否晋升/录用的,不仅仅是把你做的工作进行流水账般的描述就够了的。

二、把述职当作邀功大会

这个误区相对来说更高端一些,述职的时候有的人常常会像邀功一样:“我今年通过改版了 XXX 模块,导致用户量从50%上涨到了80%”、“通过调查研究改版了 XXX 模块,最后通过 A/B 测试发现数据上涨了5%,最后落地全部实施新的设计方案”,这些看似阐述了产品的背景、自己做了什么以及结果,但是往往来说还是不够的,以上统统可以归为无效述职。

你做了什么重要吗?没那么重要,重要的是你带了什么样的价值。述职所需要你做的,老板/面试官所想要了解的就是:分析为什么产品之前数据会那么低?你是通过那些方法得出解决方案的?为什么那么多种解决方案里你要选择这一种?你这样的方法能否沉淀成体系?如果换一个人来按照你的方法做是否可以得到同样的效果?有效述职也就是决定你能向上一步的,是把你在工作中的感性认知上升到理性规律的归纳总结的能力体现。

· SCQA 模型

SCQA 模型是一个“结构化表达”工具,是麦肯锡咨询顾问芭芭拉·明托在《金字塔原理》中提出的,而这个模型可以套用在业务表达、书面表达以及述职任何场景当中;S是指场景(Situation),C是指冲突(Complication),Q是指问题(Question),A是指解决方案(Answer)。

无论你是在向业务方/老板阐述方案做工作汇报,还是自己写作梳理都可以用到这个模型;S场景陈述的通常是大家都熟悉的事、普遍认同的事、事情发生的背景。由此切入既不突兀交代了事情背景又容易让大家产生共鸣,产生代入感,然后引出冲突C。Q是其中发现的问题,最后A给出相对应的解决方案,是对Q的回答也是接下来我们要阐述的内容。整个结构其实是形成良好的沟通氛围,然后带出冲突和疑问,最后提供可行的解决方案。

我们熟知的广告词经常使用这个套路:

得了灰指甲——描述场景【S】

一个传染两——发生了冲突【C】

问我怎么办?——提出问题【Q】

马上用亮甲!——给出解决方案【A】

这个模型无论作为演讲的开场白,作为向业务方/老板阐述设计方案的开场,还是作为一篇文章的序言都是屡试不爽的。S场景需要让对方产生共鸣,必须让对方产生一种:“是的,你说的好有道理”的反应,只有场景被认同了才能继续故事的发展,这时候打破你给对方营造的安全感,制造C冲突,相继提出Q问题,共同确认面临的一个问题,然后你给出你的A解决方案,而这个解决方案就是你整个叙述的核心和中心思想。

比如你要向业务方/老板阐述你的设计方案,就可以这样来描述:“在 XXv2.0 版本上线后(交代场景),收集了近半年以来的数据发现,女性用户相对减少了20%(发生冲突),为什么会减少20%的女性用户(提出疑问),根据我的调查研究发现原因是改版后整个产品色调偏男性化,由于我们产品的受众群体大多是女性用户,男女比例为1:3,所以在 v.2.1 的改版中我将整个产品色调改为偏女性化的方向(给出解决方案)”。

同样,我写这个章节的思路就可以这样理解:设计师们工作中通常会面临述职、面试以及写文章等情况(交代场景),但是往往很多设计师不知道如何去表达,思路也不是很清晰,导致述职无效、面试失败等情况(发生冲突),要如何避免这种情况发生?如何锻炼自己的表达能力?(提出疑问),那就要多通过 SCQA 模型在生活工作中去练习表达(给出解决方案)。

生活能力(Lives)

最后是生活能力,设计不是工作的全部,工作不是生活的全部,我们应该过好自己的生活,产品设计都是从生活中获得灵感和启发的,我们如何对待自己的生活,我们就会得到怎样的反馈。多陪伴下自己的家人、培养一个兴趣爱好、保持学习新鲜事物的动力等等,成为一个有趣的灵魂。往往设计师能从多样化的生活中发现灵感和启发,也能从生活中找到不同用户的痛点和感知;如何做一名好的设计师,就是带着同理心去做设计,如何带着同理心做设计,就是将自己当作用户,而用户是融入到生活中的。下面我就来例举两个通过生活中的启发改变产品设计的例子。

· 用户拥有感

在购买星巴克的时候,为什么服务员要把顾客的名字写在杯子上呢?难道仅仅是为了分辨嘛?像其他奶茶店一样贴一张打印好的便签不就好了么?去宜家购置家具的时候,为什么要让顾客自己亲手组装家具?可口可乐为什么可以定制自己城市的易拉罐?因为这一切都是要给用户塑造拥有感,人是一种很不理性的生物,只要先拿到一个东西,就会觉得自己拥有这个东西,就不想放掉它了,这就是拥有感最根本的示范。从心理学的角度来说这被称为禀赋效应,意思就是我们对于自己所拥有东西的价值往往会看得更重。这就是为什么小时候玩的玩具、收集的画册、穿的衣服都已经没什么用了,我们还要留着当纪念的原因。因为我们的人性对于拥有感非常执着,对于自己得到的东西非常迷恋,当我们觉得要失去它的时候,会有一种损失感,觉得很不舍,会觉得心里很难受,这就是禀赋效应在我们身上发生了最明显的效果。

而这样的营销策略被用到产品设计当中,例如前段时间很火的软件 Zepeto,每个人都不一样的生成图片洗刷着我们的朋友圈;例如每年年末的账单、网易云音乐总结等等,账单它只是一份账单,根据不同用户生成不同的账单,也就赋予了不同的意义;又例如各种 H5 性格测试生成的分享卡等等,这些都是产品设计中从生活中营销案例中汲取经验的体现。

· 线下导购转线上

每当我们去到商场线下商店的时候,导购员和我们素未谋面,但是却可以通过我们的大致年龄、穿着、性别等因素推断我们需要什么样的产品,然后向我们推销对应的产品,如若刚好触动我们的需求,于是我们就会发生购买这个行为。生活中线下导购的方式也被运用到线上导购的产品中,同样平台和用户素未谋面,可是可以通过掌握大数据,分析用户近半年、近一个月的购买和浏览商品的数据,结合相对应季节等因素推送给用户所需要的产品。比如我平时经常浏览一些潮牌个性的衣物,现在正值冬季,想买一件冬季穿的棉衣,那么当我打开淘宝的时候,系统会推送一些潮牌大衣等冬季衣物在首页,我正好有这个需求又符合我的口味爱好,自然而然就会点进去购买了。

有一条创业准则是这样说的:“如果有点儿闲钱,还有点时间,但又找不到商机,最好的办法就是去闹市、电梯、小区人流量最高的那个大门口,端杯茶,静静的听人们抱怨。”,谷歌、苹果公司的设计思维首当其冲的就是带着同理心去设计、去制定设计策略,同理心来源于生活,而这一切只有设计师把自己的生活经营好,才能从当中获得启发和感悟,然后代入自己的设计理念当中,设计出真正能根本解决问题的产品。

其次偶尔会从网上看到或者听说 XX 设计师猝死,XX 设计师检验出 XX 疾病等等,每每看到此类消息都会感到痛心,工作不是生活的全部,如果连自己的工作和生活都处理不好的话,那么说明这个人生活能力真的很糟糕。如果一个人整天筋疲力尽打不起精神,那么他的工作会做得好嘛?所以在这请求大家合理安排好工作时间,劳逸结合,多锻炼身体,多花些时间陪伴父母、家人,这样才能带着健康的身心去工作,从而取得更好的工作成果,形成一个良性的循环。你怎样对待生活,生活就会怎样对待你。

总结

以上是我总结的除设计之外设计师需要掌握的技能,如果将这些比喻成大树的话,设计能力是大树的根部,是设计师立足的根本;而执行能力则是这根树的枝干,是支撑设计师全部的基础;表达能力是树枝,撑起设计师的整个世界;思考能力则是树叶花果,是设计师综合的产物;大地就是生活能力,当设计师的产物(物质、地位等)“落地”时,滋养着大地,大地越“肥沃”,越能催生出茂盛的枝叶;而规划能力就是一位辛勤的园丁,什么时候需要浇水,什么时候需要修剪枝叶,都是由园丁来承担。

想要跑赢别人,首先得跑过那个跑得最快的自己。





蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

涨姿势!设计师应该要了解的9种常见中国传统纹样

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

设计师应该要了解的9种常见中国传统纹样,制作传统主题的海报、网页、PPT都能用到。

云雷纹

祥云纹

八宝纹

云头纹

寿字纹

万字纹

唐草纹

环带纹

缠枝纹

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

 

阶段性版式心得分享灬

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

随着时间流逝,我们会对不同的人事物有新的理解,比如那时听歌听旋律,现在听歌听故事。
希望文章对现阶段的你有所帮助 —



版式的重要性就不多说了, 一个页面的排版,基本就能看出一个人的设计功底了,而且不管你是从事vi、画册、电商、平面、网页、ui都是离不开版式的,一手好的版式非常重要。其实版式可以简单理解为,在一个限定好大小尺寸的画面里,把信息进行有视觉层次的展现,基础的字体图片选择应用等就不多讲了,这里主要讲5点,下面开始正文 ~



1.画面切割,由大而小  


常见的分割有,左右、上下,而我则喜欢不规则分割(大体看是不规则,其中还是有着某种规则),我的习惯是先把画面分割好,然后去填充对应内容,这样就非常快速了,实际上和海报合成之前的灵感草图是一样一样的,下面我就拿几张近期的海报举个栗子。



因为上图是海报,我都是以纯图片为背景的,就是在已有的空间上去分割出文案的位置,可能表达的不是很透彻,下面我以网页来举例子。


那么开始的就是大版面分割了,页面做出来是新颖特别呢还是稳定常规?基本就有感觉了,具体版面怎么分割,完全看个人,只要比例协调,版块与版块之间衔接舒适就ok。



上图左边页面结构,看起来就会显得稳定常规一些,而右边则新颖一些,当然分割不止是大版面,由大而小,大版面分完了就需要从店招开始依次往下进行小版面的分割,最后去填充内容,具体填充手法就看个人设计功底了,下面实际举例,左边为我创作之前的版面分割,大到页面布局,小到某个地方的排版,都是事先分割好的。


也有这种情况,就是按照事先切割好的版块设计途中,有了更好的想法,就会稍作改动,但是大体基本是没有什么变化的(有时候为了修改一个版块排版,结果把下面的排版都给改了去迎合这一个排版,都是泪)




2.了解版式中的点、线、面 


那么什么是点、线、面呢? 

简单来讲,单个元素、文字或者图形都可以是点,多个点相连就形成线,多个点、线在同一个平面内相交形成面。


单个或者极小范围内的图形元素,称之为点,点在版式中常用于,点缀、装饰、平衡页面轻重。


线

线是点运动的轨迹,多个点的链接则形成了线,线常用于强调突出、链接、分割


扩大的点,或者多个点线则形成了面,常用于背景、区域划分



下面举个栗子,大家可以找找图里的点线面分别是哪里,有什么作用。



应该不难看出,单个的虚化渐变都是点,单个的字母  数字也是点,点在这里起到的是装饰点缀作用,中间的大面积渐变是线的体现,下面一排文案相连也是线的体现,线在这里起到的是链接视觉作用,最后这张图里多个点、线的存在就形成了面。




3.信息表达分主次


层级混乱是导致画面失衡的重要因素,客户看图会看得云里雾里,这就注定了是一张失败的图,什么是层级,就是在一个画面里,一眼能看出来主次,信息层级的清楚区分会给人舒适的浏览体验,仔细观看优秀设计师的作品,你会发现,好的作品会在浏览舒适的同时, 引导着你的视觉浏览顺序,我们来看看案例。



我们来简单看看问题,首先是上图,产品和文字之间的距离没有拉开,信息层级区分不够明显,没有明显的视觉浏览顺序以及舒适的体验,设计本身就是一个细节见证品质产物,如果一个页面里多个地方出现这种无层级的信息,则问题就大了。



那么信息分层的方法有哪些呢?


方法1:改变透明度,弱化其他信息的透明度来突出你想要突出的信息


方法2.拉开信息间距,把主题放在视觉焦点的位置展示,一般为中心,或者视觉浏览顺序,即左右,或者上下

方法3:改变字体粗细,通过调整字体粗细来进行弱化和突出

方法4:颜色,通过色彩来区分主次,黑白灰我称为无色调,不算颜色。

方法5:大小,通过改变字体或者图片大小来进行弱化和突出

如果结合多种方法,那么信息层级的区分就会非常明显了,下图用到了居中,颜色,大小,透明度。


4.页面平衡


也是很重要的一点,平衡这个词的概念非常广泛,各种平衡,自然、物理、艺术、心理、色彩、空间等等都包含平衡,而在设计中,平衡也是不可缺少的一个构成要素,画面不平衡就会导致看起来不稳定,在设计中,更多的是体现色彩与体积的平衡。



那么页面为什么需要平衡?


我个人理解为,构成版面的所有元素,不论是文字还是图片,都是有份量的,比如面积大小、颜色深浅、我们在排版的时候要做到各种元素在画面中的占比达到和谐,画面才会平衡,那我们来看看常用的平衡有哪些。



4.1  色块体积占比平衡



上图中,非常明显的平衡就是上下两个色块的面积占比基本一致,给人一种平衡感,色块平衡多用于平衡页面重心,让画面看起来更加稳定,但是上图因为图片反着的,所以才会给人一种另类的感觉。



4.2  位置空间的平衡


上图就是空间平衡,没有用整个图片素材填满整张图,而是文字部分和图片各占据一半,形成平衡。



在来看个栗子



上图两张基本一致,上图就是移动了一下文案和装饰英文的位置,以及加了根条线,却给人不一样的感觉,可以想想为什么。




5.对齐


关于对齐真的是非常基础的一项内容,也是非常重要的内容,放在最后来讲也是希望在提醒大家一遍,画面里的信息一定是遵循着某种规则而摆放,绝对不是随意摆放,有位大哥说过,随意摆放经不起时间推敲,有规则摆放则可能流芳百世 ~ 下面我们来看看对齐的例子。


你都看到哪些地方对齐了?  这样产出的页面,是否更具说服感呢,元素切勿随意摆放,让每一个元素位置都满足为什么。




总结:


版式中包含非常多的设计理念,从字体图片的选择、网格系统的规范、点线面的认知、视觉平衡感、信息分层等多项知识点。今天没有讲栅格,因为我觉得我理解的栅格还不是很系统规范,等后续稍微成熟点在做分享吧,希望本篇文章能对现阶段的你带来帮助,感谢浏览,有问题欢迎留言探讨。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

UI中如何做好产品需求分析

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档