12345...100
推荐课程
  • 与大山的孩子们,画一场10年的梦|设计公益

    文章/经验与大山的孩子们,画一场10年的梦|设计公益

    2032年6月1日,东经105度,北纬32度,四川·青川县,我们再次来到曾经的红光小学。挖出埋藏10年的时光胶囊,展开一张张记录梦想的图画,仿佛又看见那些充满阳光与稚气的脸庞。青川红光小学位于四川省欠发达地区, 90% 的学生是留守儿童,当地教育资源匮乏,学校没有专职艺术教师。机缘巧合下,我们成为了他们的美术老师,开启了长达1460天的线上美术课堂。在这近5年的流程中,我们看到孩子们在画笔中感受到了艺术的自由与喜悦,提高了孩子们对艺术的兴趣和感受美的能力。但是,由于乡村人口流失严重,生源缺乏,红光小学将搬迁撤点,孩子们也将离开自己熟悉的学校...2022年6月1日,我们第三次来到了红光小学,希望与他们在这里度过最后一次儿童节。我们不知道能陪伴他们在前行的路上走多远,只希望能通过艺术的力量,贡献一点小小的光亮。这一次我们和孩子一起创作,绘画出他们十年后各自的梦想,把这些承载梦想的画作保存在一枚时空胶囊中。我们不知道这个世界10年后会变成什么样子,只希望10年后我们还能够记得少年时代,自己当初那颗炽热的心。小俊,五年级,父母常年在外打工,一年中只有春节期间父母会回到红光乡与他团聚,起居多由奶奶与学校老师们照顾。老师说他上文化课的时候,经常会坐不住。但在画画这件事情上他充满了热情。每次课程开始前,我们总会发现他抢着坐在前排,第一个翻开画本。他独特的想法与表达常常带给我们几位老师惊喜与感动。这是他的作品,在10年后的两个平行时空里,一边的他落魄失意、坎坎坷坷,在独自哭泣,而另一边的他意气风发、功成名就,在享受着生活。在画的空白处,他写到对10年后自己的问候:“10年后的自己,你好吗?不管环境怎么变化,贫穷或富有,艰难或幸福,都不要忘记初心,努力追逐更好的自己。”很难想象一个11岁孩子的愿景是如此的质朴与正能量。有时我们无法左右生活的酸甜苦辣,但想守住面对困难的勇气与追逐梦想的信心,是我们唯一能做得到的。小伟 ,三年级,父母在外地打工。家里三个老人都先后经历了重病,姑姑平时照顾小伟。小伟年纪还小,还不太能理解家里正在经历的这些事情,但家里的事情或多或少导致了他相对自闭的性格。他平时不爱与人沟通,学习成绩也在班里排名靠后。老师在他身上仿佛也并没有看到什么闪光点。但是,在接触美术课后,原本不怎么爱交作业的他会准备好几本册子用来画画,并分门别类的归档:动物、人物、植物、风景。美术课上没有完成的作品,他会利用课余时间去完成,并不会把画画这件事情当做是一项任务,乐在其中。在绘画这件事情上他得到了老师和同学们前所未有的认可。也许绘画是他生活中表达的一个出口,他在这些不同册子上,记录、表达生活的不同角度,记录他看待世界的方式。小曼 ,五年级的她是红光乡各个家庭中相对幸福的孩子,平时妈妈一直照顾着她,每天会接送她上下课。每周一次的美术课是小曼充分施展她艺术才华的地方。她有着对色彩、构成有着惊人的天赋,她的画总是令人赏心悦目。在之前的两次评选中,都拿了绘画一等奖的她收获了自信。她说她的梦想是做一名画家,幸运的是这件事情也被他的父母老师看到,他们愿意支持她去完成梦想。小杨,可能是学校里家庭比较困难的孩子,家中只有年迈的奶奶和还在上初中的哥哥。平时家里的日常起居,烧火做饭,都是小杨和哥哥共同完成。也许由于成长的过程中营养没能跟得上,小杨是班里个子较矮的孩子。小杨的学习成绩也一直不太理想,老师每次和他沟通希望能通过家庭现状,激发他学习的动力,但是小杨彷佛对这些说辞都有些麻木了,每次的沟通也只有一两个字的回复。但是在美术课上的小杨,却有着超脱于同龄孩子的思考。这是他的作品《十年路》,他把未来十年自己希望经历的事情,统统在这张画纸上展现出来。他梦想自己同NBA球星詹姆斯一般强大,未来十年有画笔的陪伴,他会去读大学,去到地球不同的地方,会学习很多知识 。这4个孩子只是全班47个孩子中的十分之一,其它孩子们身上也都有着不一样的故事,我们通过美术课与他们相识,通过画笔看到了他们小小身体里的巨大能量...我们在跟孩子们交流这个主题的时候,时常有穿越时空的错觉,也许每一人在自己小时候,都过一次相似的10年之约。对我们这些成年人来说,在这些小朋友们身上,或多或少都会看到曾经那个真诚的自己。感谢这些孩子们帮助我们看到初心,希望我们能始终心存善良与爱。希望更多设计师加入,共同为欠发达地区的美育献出一点力量。设计有爱,温暖未来!

    Alibaba DeAlibaba De 365 4 0
  • 弹窗篇 | 如何弹、什么时候弹?你需要知道的弹窗设计原则!

    文章/经验弹窗篇 | 如何弹、什么时候弹?你需要知道的弹窗设计原则!

    前言产品经理:我觉得这里要加个弹窗,你去设计吧。设计师:emmm...。弹窗到底该不该加?怎么加?用什么形态展示?真正的作用是什么?这些真的是产品经理说了算吗?好的产品通常会在恰当的时间、合适的位置给出合理的反馈,弹窗也是必不可少的反馈方式,不反馈、反馈不及时或反馈不合理都会带来不好的使用体验,甚至误导用户,从而导致用户流失。很多时候,产品经理会从商业角度、公司业务、资源限制等方面考虑问题,但这些未必是用户所需要的,设计师不应该完全按照产品需求做设计,否则就成了只会照搬产品原型的“美工”。需要做的是从用户角度出发,把产品需求转化成设计目标,只有经过反复的推敲、认真分析,最终才能打磨出服务于用户的弹窗设计,所以弹窗该不该加、如何加就成了设计师不可推卸的责任和使命。本篇文章将围绕着弹窗类型、使用场景、转化率及常见问题为侧重点,将自己对弹窗的理解、设计经验分享给大家,帮助大家对弹窗组件有更清晰的认识,为后续避坑设计出更好的弹窗做准备。本期大纲一、弹窗的基本介绍二、弹窗体系分类三、弹窗的使用场景四、如何设计有效的弹窗五、需关注的问题点六、总结一、弹窗的基本介绍1 弹窗的定义当我们与应用产生主动或被动交互时,页面上层会弹出容器,将可承载的文本、按钮、选项、标签或表单等任一内容与之组合,就可以用来传递信息、状态反馈、引导用户等操作,这就是弹窗。弹窗的目的主要是为回应用户或让用户回应,是用户与产品间对话的一种方式,在线上各种场景中都有可能碰到,相当于产品的线上小助理。不同类型的弹窗其作用不同,但最终都是为了满足跟用户之间的友好交流。2 弹窗组件的构成弹窗组件的样式很多,如浮层、对话框、下拉菜单、toast等,且iOS、Android官方平台也都根据自身的规范对组件进行命名,不管如何称呼,其常见的弹窗组件绝大多数都是由以下元素组成:◇ 容器:作为承载弹窗的文本、图片等内容,容器必不可少,有的弹窗直接以蒙层作为容器,如toast;◇ 蒙层:为了和底层内容分离,避免信息混淆,通常会在界面上层(容器下层)设置一个不透明度为20%~60%的纯黑色蒙层。部分小型弹窗不设蒙层,但会为容器设置投影,例如筛选器的展开、下拉菜单等;◇ 文本:文本是弹窗传达信息主体的必要条件,如标题、按钮等,即便把文本融入图片,也能一目了然;◇ 图片:用于运营弹窗传达更多信息内容的方式之一,为了对用户产生更强的吸引力,还可设计成动态效果;◇ 表单:为成功进入下一步做准备,如输入密码(iOS设备下载应用前的必要步骤)。也可以是当前页面流程的分支,例如输入优惠券等;◇ 选项:条件较少的选项可使用弹窗完成,单选、复选在选项不超过6个的情况下都可使用;◇ 图标:在弱化次要操作的情况下,通常会将关闭弹窗按钮设计成图标放在右上角或弹窗下方,目的是突出主操作,鼓励用户从弹窗中进入下一步,另外还有单选、复选、提示等按钮;◇ 按钮:是进入下一步或回到上一步(去掉弹窗)的操作入口,部分应用也可以点击弹窗以外的空白区域让弹窗消失,但同样会提供按钮以方便用户更容易操作。toast等短时间自动消失的弹窗无需设置按钮。二、弹窗体系分类1 模态弹窗用户在完成任务的过程中,界面会出现弹窗打断用户的操作行为,用户必须通过主动点击才可以进行下一步操作,这即是模态弹窗。模态弹窗通常能较好的获取用户的视觉焦点,并通过承载的内容、按钮主次层级来引导用户完成他们的需求,这也会根据用户、产品侧重点的不同,弹出样式也有所不同,常见的模态弹窗有对话框、动作栏、浮层...等。1.1 对话框Dialog/Alert对话框是很常见的弹窗,主要在打断用户后并提供选项操作,对用户的干扰较大,通常会配备1~3个操作按钮,而且会把用户最期待的或产品最期待用户操作的按钮突出显示。对话框类型的弹窗主要分为主动、被动两种触发类型,主动弹窗:信息的二次确认、输入内容、前置条件选择、风险警示等;被动弹窗:版本更新、运营宣传、消息通知、系统功能授权等。1.2 动作栏Actionbar动作栏是通过用户主动操作后弹出的内容信息,基本都是从底部弹出,屏幕占用比例根据内容量的多少比较随意,从小区域、半屏、再到全屏随处可见。动作栏相比对话框则能承载更多、更丰富的功能信息,在用户清晰感知当前操作及反馈的情况下,比跳转到新的页面更有安全感。1.3 浮层Popover/Popup浮层是指用户操作某个功能/内容后,会在附近出现一个带有视觉引导性质的弹窗,最常见的浮层就是下拉菜单/弹窗等,浮动于顶层窗口并指向触发操作的位置。例如很多社交娱乐类型的应用右上角有一个“+”入口,里面会放置部分常用功能。部分浮层底部没有设置不透明度的蒙层,为了与页面信息更好的区分,会给浮层容器加上投影,避免与底部信息混淆。2 非模态弹窗相比模态弹窗,非模态弹窗属较为轻量,触发后以一种非阻碍的的方式呈现,不会打断用户的当前操作,主要是给予用户即时反馈,让用户清楚应用当前的交互后状态。非模态弹窗不强制用户操作,根据反馈信息的重要程度及意愿,可在一定的时间内自动消失,也可等待用户操作后消失,常见的有以下几种:2.1 提示框Toast/Hud用于反馈用户操作成功、警告、错误等当前状态信息,可能出现在任何位置(底部/中间/顶部),在呈现样式上,相同等级的模块统一位置、风格即可,无需用户有任何操作,出现2s左右自动消失。Toast只有纯文字提示,例如格式错误、刷新成功、删除成功等;Hud会使用文字+图标样式,例如添加到购物车、关注成功等。2.2 提示对话框SnackbarSnackbar早期只是Android系统的一种弹窗控件,后在iOS、Web前端都会使用到,可以看作是toast的加强版。一般只出现在屏幕底部,存在的时间比toast长,提供0~1个操作入口,可自动消失,也可与用户产生交互后消失或者跳转至其他页面。Snackbar反馈的重要程度强于toast,例如,某个应用今天有重要提醒,同时又不想影响用户的其他操作,会在用户首次进入时弹出提醒,并提供关闭操作入口,等待用户通过手动关闭(部分自动关闭),加强用户记忆。2.3 通知Notice最有代表性的就是消息通知、系统推送,在设备未锁屏的情况下,通常从顶部弹出,停留几秒后自动消失,锁屏后,不同设备弹出的位置也有所不同。Notice的前提是需要在应用设置中打开消息通知开关,具备应用外推送功能的,需在设备系统设置中开启通知权限。2.4 透明指示层HUDHUD是一种在透明元素上通过填充、反馈用户当前交互操作的指示层,实时生效,例如视频类产品中的调整音量、亮度、控制进度条等。三、弹窗的使用场景当我们对弹窗体系有了一定了解后,就需要清楚什么场景需要设计弹窗?用什么类型的弹窗?产品最终都是服务于用户,如果仅凭自己的主观意见乱加一通,整的花里胡哨,弹窗就成了干扰元素,很大程度上会影响用户体验。什么样的场景适合什么类型的弹窗,我们可以从以下几点来说明。1 打断用户的操作风险警示:当用户的某种操作可能存在风险,为避免操作失误,会弹出对话框打断用户,并给予一定的风险提示引起用户的注意,让其有足够的时间确认是否真的需要进行下一步操作,如:删除、放弃福利机会、退出登录等,会弹出对话框提示操作后可能引起的后果。前置条件:部分任务在流程中设有一定的前置条件,需要满足条件才能进入下一步操作,通常这种情况会根据内容量的多少、重要程度以对话框或动作栏的样式弹出,例如下单时选择优惠券、支付方式。任务关键节点:用户在满足任务的基本条件后,需要操作一个关键步骤才能成功,则会弹出对话框让用户完成最后一步操作,例如提交订单、表单、输入支付密码等。2 定制化弹窗这类弹窗主要从产品角度出发,不会过于在乎用户是否需要、会不会反感,都会引导或强制用户操作。例如产品发布新版本,会强制用户更新,否则将无法使用。还有各大电商APP,在进入首页时会弹出一堆红包、优惠券,刻意将取消/关闭入口弱化,给用户返回造成一定的难度,利用突出的视觉、动态效果突出主题增加吸引力,以达到转化用户的目的。3 二次确认二次确认也是一种打断用户的操作行为,但跟上面纯粹的打断用户相比其作用更大,主要是在用户已做好选择的情况下再次弹出确认,以免操作结果造成用户认知上的偏差。虽然从用户体验角度出发,用最少的操作、最简单的流程满足用户所需是产品追求的目标之一,但通过权和利弊之后,二次确认的出现实属迫不得已的折中方案,它能够起到给用户多一次思考避免误操作、同样的含义换种方式表达、重要的内容加深二次记忆等作用。二次确认使用得当,可以避免用户、产品的潜在风险,但若是从主观角度一味的滥用,就成了对用户的恶意干扰、影响使用体验,导致出现因多步骤操作增加任务完成难度、降低转化率、损害产品形象等问题,所以需要从业务(用户侧、产品侧)实际角度出发,两相其害(加-影响使用体验;不加-造成一定损失)取其轻的考虑是否需要增加二次确认弹窗。当用户的某个操作可能带来不可逆转、错误严重程度较高时,例如:放弃仅有一次机会的较好福利、手机系统还原、应用账号注销等,系统都会给予二次确认,降低用户认知偏差后,以确保用户是经过多次思考才做出的决定,即便后续给用户造成损失也不会过于降罪产品,产品也算是“问心无愧”了。4 简单提示常见于用户操作之后的状态反馈,即便用户没有注意到,也不会造成较大的损失、或结果已经注定,相对来说成本较低,大部分出现在任务过程中的提示(可重复)和结果反馈,以确保用户知晓当前所处状态。非模态弹窗toas样式居多,例如加载中、操作成功、刷新结果、清除缓存等,可出现在其他类型的弹窗之后或同时存在。四、如何设计有效的弹窗1 前提条件优秀的弹窗需要从视觉、交互两方面思考,视觉上简洁、易懂,交互上可操作且可控。视觉层面:首先需要做到的是易懂,这时候就非常注重文案清晰程度及按钮层级关系了,弹出的信息需能直击要害,用户看了能一目了然才是关键;其次,弹窗属于一种干扰信息的存在,设计必须简洁,在弹出时需要考虑是否会过度影响(影响是一定会有的、且看如何降低)用户的其他操作。假想我们正在玩游戏、突然来了电话全屏幕覆盖(传统来电),自己会以最快的速度挂掉电话,回到游戏中后发现自己已领“盒饭”,即便来电是多么的理所当然,但心里必定是非常不痛快的,那么,如果来电以弹窗的形式且占据屏幕很小区域(如今的来电方式)是不是就给了用户足够反应时间及缓冲时间呢?交互层面:弹出的内容及操作入口需清晰可操作,虽然有时基于业务需求,产品更希望用户能进行下一步操作而并非回到上一步,即便如此,我们也只能通过弱化次要操作以突出主要操作,用户有来去自由的权利,如果弱化至用户看不清、甚至找不到的程度,即便提供了次要操作入口,也会存在反面作用;另外需注意用户对产品的可控性,不管产品如何期望用户进入下一步转化,但不能强制,一定要给用户提供回去的路(强制版本更新除外),否则,任性的用户可能会直接结束应用,甚至因产品过于霸道直接卸载。2 设计目的首先,设计师应该理解产品需求,分别从用户侧(能给用户带来什么?满足什么样的需求?避免什么损失?...)、产品侧(能给产品带来什么?产品如何期望?是否合理?能得到什么样的结果?...)分析为什么要加弹窗,然后将分析的结果转化为设计目标,以确保弹窗根据不同的需求,在恰当的时间、适合的样式合理的呈现给用户。其次,在得到设计目标后,同样需要从设计侧、技术侧思考弹窗组件的一致性。从设计角度,团队所有成员需要对该组件有清晰且统一的认知,了解组件的使用场景,以确保不会错用、滥用,如果增加或更换新人设计师,很容易学习和上手,提升效率;站在技术角度,一致性的常用弹窗组件,便于开发做组件封装后续复用,减少不必要的重复工作,大大提高开发效率。3 设计思路在UI设计中,组件的设计思路基本相通,旨在满足产品的实用性、视觉的统一性,主要围绕着以下几点进行:◇ 基础定义:利用清晰易懂且简短的文案描述弹窗组件的内容及目的。◇ 类型及构成:明确弹窗的类型,如模态/非模态,将其拆分并注明每个小元素的具体信息。◇ 规则用法:弹窗出现的位置、包含的具体内容及信息的展示规则,比如哪些场景可复用。◇ 交互状态:交互流程逻辑清晰,拟请产品交互前、交互中、交互后如何反馈以及用户随时可能碰到的问题。五、需关注的问题点1 信息的层级关系设计弹窗时需要注意信息的主次层级关系,优先传达用户想要的或产品想要让用户知道的,以确保重要的信息在第一时间传达给用户。2 展现形式弹窗需要根据实际的场景合理使用,不能为了简洁而过分删减内容、更不能画蛇添足。例如一些偏向于操作状态、系统报告类的提示可以使用简单的反馈,而可能造成用户损失的提醒就需要刻意打断用户,给予更明确的提示甚至二次确认。△ 例如删除内容就需要使用模态弹窗明确提醒用户,如果用非模态很可能被用户忽略从而带来不可逆的损失。3 文案表述因弹窗本身承载内容有一定的局限性,固文案一定要简洁且精确,能用一句话说清楚的就不要过于啰嗦,不仅容器的空间有限且用户的耐性也有限,需要在有限的空间、有效的时间内清晰的表达出核心内容。4 弹出的时机及频率针对运营弹窗,如果弹出的时间不对或过于频繁,可能会造成用户反感,所以需要把握好弹出时机及频率。例如用户有一张未使用的优惠券,如果用户每次进入应用都看到弹出提醒,确实又没有购买商品的意愿,总是被弹窗打断真的就很烦,那么可以将提醒弹窗设置为每日首次进入应用时提示、每累计进入应用5次后提示、即将到期提示或者用户有购买意愿且优惠券支持改品类时提示等,总之,需要控制在大部分用户的可接受范围内。六、总结本篇文章主要系统的分析了弹窗组件分类及使用场景,总结的虽然不是很全面,但能让很多新手设计师清楚认知弹出组件的定义及用法。另外,弹窗不管如何设计,都需要有一个不断优化的过程,要根据产品的实际情况不断思考与打磨,通过脑暴或已知问题作出更好的改善。能清楚认知、理解、使用弹窗组件是一个成熟UI设计师必备的条件,当然,并不能以此定义设计师是否优秀,在此基础上,还需通过持续的学习探索,挖掘出更多技巧,不断提高自身的专业能力。

  • 第40期:图层样式提升页面质感

    教程第40期:图层样式提升页面质感

    这次给大家带来首页详情页里会使用的一些效果制作方法,通过图层样式达到的效果,一起来看看吧~ 在正式开始之前,我们先来拆解分析最终案例;不难看出,我们可以利用矩形将框架先标识出来,目的是为了让自己更清楚后续的流程01.先绘制圆角矩形,圆角数值30(数值仅供参考)填充蓝色02.再绘制里面的圆角矩形,圆角数值30(数值仅供参考)填充米灰黄色,再双击图层-添加投影,投影添加两个,能更好的满足需求,区分前后层次03.绘制一个矩形,将纸张纹理图层模式改为柔光后剪切进去矩形04.再将矩形复制一层缩小,去掉填充,添加内阴影,做出凹陷效果(参数仅供参考)05.再复制一个矩形去掉填充,将描边改为虚线模式,再添加内发光和投影06.接下来我们绘制布料部分,用钢笔工具绘制布料形状,再将布纹纹理图层模式改为柔光剪切进去,作为布料最外面一层缝纫位置07.将布料形状复制一层缩小,将牛皮纸纹理图层模式改为叠加剪切形状内08.再使用曲线工具根据布料的明暗面起伏,将布料的形体塑造更加立体;塑造好后,再复制一层水平翻转,给布料增添层次09.接下来我们绘制顶部;用矩形工具绘制圆角矩形,再将网格贴图置入矩形内;再给矩形添加投影以及高光,增强整体质感10.绘制圆,去掉填充改为描边模式,再添加斜面浮雕和投影;复制几个作为一排11.再来绘制绳索部分;将绳索素材挨个儿摆放位置,再用色相饱和度修改整体绳索颜色12.再添加上产品图和文字资料信息一起来看看最终效果吧ok,我们趁热打铁,继续下一个~还是老规矩,我们先拆解大体框架01.绘制圆角矩形,去掉填充,双击添加图层样式里的投影、描边(数值仅供参考 )02.现在开始绘制外部框架的描边效果,通过图层样式里的斜面浮雕,再配合描边内阴影达到效果(参数仅供参考)03.用白色画笔在中心点涂几下,为后面的产品做铺垫04.绘制顶部的圆角矩形,再将之前我们的图层样式(斜面浮雕)复制粘贴给矩形即可05.运用钢笔工具给矩形添加一个硬高光;再添加上文案信息06.底部的价格信息也同上操作即可07.再添加上产品,将产品复制一层垂直翻转,添加蒙版制作产品的倒影08.再用画笔给背景添加几束光影,丰富整体细节一起来看看最终效果吧让我们继续再接再厉吧~还是老规矩,我们先拆解大体框架01.绘制圆角矩形,将布料纹理图层模式改为线性光剪切进矩形02.用曲线提亮,塑造光影明暗变化;再将圆角矩形复制一层缩小,去掉填充,改为虚线描边,再添加投影03.绘制矩形,将布料纹理图层模式改为线性光剪切进矩形内04.再绘制用于产品填充的矩形背景框,绘制后再将产品剪切进去05.再复制一层矩形去掉填充,改为虚线描边,增添层次06.再绘制产品名称底部的矩形,里面依旧添加布纹纹理,同上添加虚线07.再将文案信息添加上08.再添加一个厚度效果;复制底部圆角矩形,位移位置至右下,再给添加上投影09.再将布纹纹理剪切进去形状,给纯色色块增添更多的细节一起来看看最终效果吧希望能够帮助到你们哦,有兴趣的小伙伴也可以自己尝试一下呢~但是注意具体数值颜色都是根据自身实际情况调整哦,我上方的数值仅供参考~

    设计加油站设计加油站 1163 11 0
  • 图片篇 | 掌握这些技巧,你的界面更加出彩!

    文章/经验图片篇 | 掌握这些技巧,你的界面更加出彩!

    前言在UI设计中,配图的好坏将直接影响着界面的品质及用户的视觉体验。纵观如今高质量的界面设计,具有设计感的配图不仅是吸引用户的重要元素,能比原本平淡无奇的文字界面更让人产生点击欲望,还能体现出设计师的品味、以及相关方面的专业性。在这个快节奏的时代,相比文字,图像的传达效率会更快、更高、更有助于用户轻松理解及记忆。配图用的好,往往能起到决定画面基调、流程引导、视觉平衡等关键作用,所以,在同等样式的布局下,因图片的使用及处理方式的不同,界面的品质也会存在较大的差异。本篇文章将介绍一些在UI设计中配图的基础知识,帮助大家在图片列表、背景处理、图文混排、头图等相关界面设计无从下手时提供灵感,在选择图片、后续处理时如何做到有规律可循带来一些思路。本期大纲一、了解UI设计中的图片二、图片的使用及处理方法三、图片样式效果四、图片处理小技巧五、总结一、了解UI设计中的图片1 为什么要重视图片在文字出现之前,人们都是靠看到的图像来理解信息内容,即便后来文字能表达出很丰富的内容,图示也不可少,试想一下,当别人拿着密密麻麻的数据给你看时,能看的头皮发麻,你更希望有一张清晰的图表,但并不能说明别人的数据不清晰。所以,图像相比文字能更具说服力、更容易传达信息,使读者产生共鸣、震撼内心,让人看了一目了然,能直观的与人产生互动。当说到UI设计中的图片非常重要时,并不是说文字就一定比图片弱,好的文字也能带给我们无限的遐想,只能说在更大的概率上图片和文字哪个更吸引人,所以我更倾向于观赏图片,然后感受到带来的美好。但是,如果非要问我选择哪一个时,我只能说“只有小孩子才做选择题,我(设计师)全都要”,图片可以表达出丰富的内容,再用文字言简意赅,是一个非常完美的组合。2 常用的图片格式图片有多种格式,如JPG、GIF、PNG、TIFF、RAW、BMP、WEBP...等,在UI设计中,最常用的无非JPG、GIF、PNG三种。JPG:目前为止使用最多的图片格式,兼容各大操作系统浏览器及编辑软件,非常方便被打开和处理,但不能显示透明底,压缩后会失去一部分原始信息。PNG:如需编辑,PNG应该算是所有图片格式中的最佳选择,支持无损压缩及透明底,但针对需要高保真的复杂图片,压缩后的文件较大,且有少数的浏览器不支持。GIF:动效图片,支持透明底及无损压缩,通常由视频格式的内容转换而来,但对色彩有非常严格的要求,数量最多不超过256种,相比前面两种,GIF格式的文件更大。二、图片的使用及处理方法1 图片的使用比例在移动端UI设计中,我归纳了最常用的几个图片比例,分别是1:1、3:2、4:3、16:9四种,这些比例都是源于最早的胶片摄影及现代相机的传感器演变而来。当我们不知如何选择比例时,首先需清楚的了解界面图片的应用场景、来源用户以及图片比例背后的缘由,否则将很难把控,下面将针对这几个比例作具体分析。1)1:1 比例因为相机结构的原因,早期最传统的120胶片画幅就是正方形(6*6cm),即1:1的比例,此比例更容易的将构图规整,使其最大程度的突出照片主体。在如今的电商APP中,商品图片绝大多数都遵循了1:1的比例,不管横向还是纵向都能将信息进行完整化的展示,且方便多场景、页面的适配。另外,用户头像也都使用了这一比例。2)3:2比例起初135胶卷的比例就是3:2,主要是因相机取景框的大小而决定。在移动端,这一比例使用也比较广泛,例如新闻、旅游类型产品,在拍照之后无需裁剪等处理,直接上传使用,非常方便。3)4:3比例随着摄影的发展,小/微型相机出现而诞生4:3比例,且移动设备发展迅速,在非专业摄影的情况下,手机能很大程度上代替单反并成为主流拍照设备,目前市场上主流手机的拍摄尺寸基本都为4:3比例。相比3:2的图片,4:3图片占比更大,能最大化显示图片以突出重点信息。4)16:9比例根据人体工程学的研究,人眼视野范围的比例约为16:9的长方形,所以电视、显示器及投影范围的设计都是基于这个黄金比例。线上产品不用多说,影视类型的产品均采用16:9的尺寸,例如爱奇艺、优酷、腾讯视频等,到目前为止,这个比例在设定上还没出现过问题。在上述4个尺寸中,最容易混淆的是3:2和4:3,如果不清楚如何选择,请根据产品目标定位,看看到底是以内容为主导还是图片为主导。例如:资讯类型产品很注重标题文案,即会使用上文下图、左文右图的版式,选择3:2作为封面,以降低图片的视觉重量;旅游、租房类产品,则可使用4:3的图片,以传达更多信息。这种选择方式虽然不是绝对,但当我们陷入两难的困境时,可作为参考依据帮助快速决策。2 图片的使用场景1)单图布局全屏:具有很强的视觉冲击力,非常适合用于传播行业属性及品牌调性。单图全屏布局处理灵活,可整体突出、局部特写或加纯色不透明度纹理/遮罩,对图片细节、构图等有较高的质量要求,一般用于登录、启动引导、产品介绍背景等页面。卡片:以单张图片作为视觉引导,宽高不固定,但占据界面大部分区域及重要位置,主要突出产品调性和成为吸引用户的流量入口,促使用户与其产生交互行为。常用于产品详情页头图、推荐页、专题入口等。2)图文列表在图文列表界面,很多时候,我们都在想一个问题,到底是选择左图右文、左文右图还是上图下文?所以我们首先要明白F式(从上到下、从左到右)浏览布局,这也跟人眼的浏览习惯相吻合,然后确定图、文信息内容的权重,根据优先级将重要的信息放在关键位置。单列组合左文右图:以文字为主、图片为辅,主要强调文字信息,且图片与标题的关联性不是很大,能减少减少图片对文字的干扰,对图片的质量要求不高,很多新闻、资讯类产品都是选用这种方式布局。左图右文:在图片内容优先于文本内容的情况下,采用左图右文的方式,更强调以图片直观的传达内容、吸引用户的视线,对图片的质量要求高于左文右图,一般是电商、旅游类产品的最佳之选。上图下文:一行只显示一张图片,大多采用横图,同屏一般不超过两个内容,用户需要从图片中获取大量信息,对图片的质量要求很高,大多有专门的人员审核,以完成对图片的品质的把控。这种方式很占用界面的纵向空间,部分租房类、艺术类产品会选用此种方式。双列组合并排:相同高度的比例控制,是较为经典图文布局,相比单列,同屏可展示更多的图片内容且空间利用率更高,能同时向用户传达更多信息。错位:图片高度自适应(瀑布流),在限制宽度的条件下,高度自由发挥,让图片得到更多的舒展,利用率更高。双列错位的排版方式增加了版式的趣味性,可缓解用户在长时间浏览下的视觉疲劳,需要注意的是宽高比例不要太大、成跳跃式的变化,否则可能导致视觉混乱,且低高度的图片信息很容易被忽略。3)多图组合规则:3张或以上的规则的图片组合很常见,主要用图片列表来引导用户查看更多,通常利用单排左右滑动或九宫格的方式呈现。例如旅游、租房、影视类产品,包括手机相册、社交圈子等。不规则:多图不规则比例并不常见,因移动端设备可视宽度有限,容易导致混乱的错觉。艺术、拼图类产品看到的居多,另外,部分社交类产品为了展示不同远近距离的层级关系也会用到这种排版方式。3 图片操作的交互手势图片常见的手势操为:滑动、点击、双指缩放,除此之外,还有很多针对所有元素都可以操作的交互手势,这里就不多说了,下面单独对图片手势作出介绍。1)滑动上下滑动:通常在图文列表或单张图片内容超过一屏的情况下,通过上下滑动查看更多信息。左右滑动:为了拓展更多内容,多用于相同等级的图片列表或大图切换,在页面列表中会将无法同时展示的图片呈现一部分或以数量作为提示,引导用户探索以发现更多。2)点击/长按单击:单击可查看图片,从缩略图到详情或大图的切换操作;双击:针对图片本身进行某些操作,比如喜欢、点赞等,另外,部分图片通过双击进行一定比例的放大缩小。长按:调出图片的部分属性信息、下载图片等进行下一步操作。3)双指缩放当我们需要查看图片的某些局部信息或细节时,就会使用双指(开合)缩放的交互手势。三、图片样式效果1 图片遮罩因图片的色彩变化不规则,为了保证图片上层文字的可读性,通常会在文字区域加一个纯色遮罩,也可设置不透明度的渐变效果,使遮罩跟图片的过渡更加协调,提升视觉美观度。2 毛玻璃(背景模糊)毛玻璃效果通常出现在应用的2、3级页面,对应用性能会有一定的消耗,一般使用封面图片进行大幅度的高斯模糊作为背景使用,可在上层加上一定透明度的蒙层配合使用,透明度数值根据不同的图片色彩及使用场景适当的调整。毛玻璃效果既能满足文字内容的清晰呈现,又能提供场景氛围并提升界面的品质感与神秘感,我们最熟悉的当属音乐播放页面的背景模糊效果了。3 抠图+纯色背景组合对于自营平台,内容较为固定的商品页面,可将商品抠图后自定义背景,让界面的整体设计风格可控,延展性更高。不适配平台类型应用,因为会让商家产生较高的运营成本。4 圆角设定图片圆角值设定,能体现出不同的产品属性及气质。例如:直角比较硬朗,给人高冷、力量的感觉,小圆角传达出安全、专业的属性,而大圆角显得活泼、可爱,更有亲和力。5 图片出界图片出界常用于运营设计,例如图片轮播、胶囊banner、专题页等,另外,经抠图处理过的图片也可用在商品详情页顶部图示。这种效果能有效避免呆板,营造出画面氛围,制造出更强烈的视觉冲击力。四、图片处理小技巧1 符合产品气质UI设计中,任何一个设计思路、想法及效果样式都是为产品而服务,图片也不例外,需要根据不同的场景进行合理搭配,好的配图更能与用户产生共鸣。2 切合主体,表达产品核心内容配图必须要明确主体,一眼就能看出核心内容,且不可以炫技或好看为主,否则会被多余的元素、效果影响主体视觉导致没有重点。但确定好一张图片的风格及色系后,后续也要保持统一。3 风格统一图片以实用性为准,如果一味的追求漂亮、好看,最终可能形色各异造成视觉的不统一,严重影响用户体验。设计师在选图时需要对风格精准把控或后续稍加处理,以形成统一的视觉。常见的控制方向有图片类型(位图/插画/形状)、视角(平视/仰视/俯视)、商品背景(简约/复杂/纯色)、呈现区域(堆积/局部/特写)、构图(中心/水平线/对称/对角线...)等。另外,还有很多抽象的方式但并不是绝对的,我们都可以尝试从不同的角度去调整,力求让所有图片达到最佳视觉效果。4 颜色丰富因人的天性即向往美好、品质(非物质化)生活,固品质感的配图更容易吸引用户的注意力,让人想要拥有的感觉,如果色彩不够饱满,不管风格是多么统一,也达不到良好的用户体验。在选好图片后,可对色相、饱和度、亮度稍加调整,以确保色彩饱满、丰富。5 设计稿需呈现上线的实际效果有时候做设计为了方便,整个界面的图片直接复用同一张,即便设计的再好,也可能隐藏着不易察觉的瑕疵。需要说明的是,一个成熟且专业的设计师,首先要对自己负责,然后才是设计,即便是初稿,在即将呈现给大家或汇报前,一定要给出上线后最真实的效果,这样方便他人贴合实际给出一些方向性的建议,帮助自己更好的决策。经处理过的实际配图能体现整体效果,方便找出图片以外的设计缺陷,例如版式、字体大小、层级关系等问题。6 文件大小处理静态图片常用的无非PNG、JPG这两种格式,文件较大的图片会影响打开页面或刷新时的速度,本地图片更会增加应用包的大小。从设计稿中导出图片时需要控制文件大小,如无特别(超大图)情况,切勿主动降低图片质量后再导出,否则会影响界面整体的视觉美观度。这里推荐一个线上无损智能压缩神器:https://tinypng.com,仅限PNG、JPG、WEBP格式的图片。△上图可以看出,图片在压缩了76%后,由1.4MB变成了332KB,肉眼很难看出(查看大图)质量上的损失。7 倍率切图切图不像以前那么麻烦,同一张图片需要手动导出多套规范,现在只需在软件(或安装插件)标记好切图,上传到类似蓝湖、摹客等第三方线上应用,分享给团队成员即可各自下载web、Android、iOS对应的多套规范制图。设计师在设计过程中,一定要按照规范的最大极限保留原图,以iOS系统@1x规范设计稿为例,如果图片的宽度是100px,那么导入软件中的图片宽度至少要在300以上,然后再进行缩小(PS中需转为智能对象),如果低于300px,开发在导出@3x的图片就会失真,可能会因损失像素而出现模糊的情况。五、总结文章中所介绍的图片使用方法及处理技巧,并非最好、唯一的答案,但在你没有更好的方法之前,多多少少能从中得到启发。UI中图片设计的本质在于自身的专业能力,然后用自己的视觉产出和设计手段去吸引、打动用户,从而为产品带来利益,也能体现出设计价值。不得不承认,人们很多时候都是通过视觉表象决定是否需要深入了解、拥有某一件事/物,设计师就是在做视觉表象的表达,如果图片用的好,不仅能让你的设计更加出彩,还有一定几率转化用户,形成商业价值。下篇「弹窗」文章再见。

    大漠飞鹰CYSJ大漠飞鹰CYSJ 1382 1 0
更多

推荐设计师

更多

推荐职位

推荐品牌

合作伙伴

恭喜作品被选入首页推荐,快去领取奖励吧!点击查看