设计达人 http://www.shejidaren.com 爱设计,爱分享。 Mon, 04 Nov 2019 07:29:43 +0000 zh-CN hourly 1 https://wordpress.org/?v=5.1.3 基于情感化设计的用户体验重构–贝壳找房 http://www.shejidaren.com/emotional-design-user-experience-optimize-beikezhaofang.html http://www.shejidaren.com/emotional-design-user-experience-optimize-beikezhaofang.html#respond Mon, 04 Nov 2019 07:29:43 +0000 http://www.shejidaren.com/?p=32658 基于情感化设计的用户体验重构–贝壳找房

基于理性逻辑的标准流程设计可能并不会像设计师所想的那样会被用户感知到,甚至会违背设计的初衷。既然理性行为的用户研究太过理想化,不如尝试站在用户的角度,根据产品使用过程中的负面情绪来设计体验流程,这种基于错误设计的反思逆向优化设计的行为正是情感化设计的应用。下面将以贝壳找房为例,阐述在产品优化过程中如何应用情感化设计输出人性化的产品体验。 基于情感化设计的用户体验重构–贝壳找房

项目背景

「买房」是人生大事,而「找房」起到决定性作用。 传统的找房主要依靠房产中介介绍、带看,过程费时费力,而对房产领域不熟悉的新人用户更是饱受「假房源」、「吃回扣」的苦;而贝壳的出现就是为了打通房源和用户的桥梁,让找房不再困难。 贝壳在2018年完成了从0到1的历程,但在移动端/web端都有许多的错漏和细节的不完善。从1到2的过程相对复杂,往往在立项之后会遇到一些项目之外/历史遗留问题——在修改响应式设计的过程中查看旧版网格系统设定,发现以早期链家网为模版的网格系统在设计时还没有到移动端设备爆发增长的年代(链家在2009年开始互联网化),因此没有考虑到众多尺寸的适配方案。改则费时费力,牵一发而动全身,不改则后续设计方案处处受限,所以干脆推翻重新设定网格系统。 详情在上一篇文章《贝壳找房的响应式网页布局设计》 也以此为契机,优化产品的用户体验。虽然过程非常曲折,但顺藤摸瓜发现问题本质的那一瞬间是豁然开朗的,过程中也参考了许多优秀案例和大神分享核心技术,收获颇丰,过往一些模糊不清的概念随着论证得到了明确的解答,所以把整个思考和实践过程整理出来分享给大家。

产品特点

目前还没发展到在线买房,大部分的交易流程都集中在线下。 贝壳的互联网化主要集中在「找房」阶段的信息呈现。 贝壳找房与其他产品的不同之处在于——房产是大宗需求,是刚需。 性格、爱好、情感等因素对最终决策的影响甚微,决定性因素是财富多寡。目前较为主流的分类方式将用户分为「刚需」、「改善」、「投资」三个类型,结合具体情况看,夫妻双方的孩子多数由父母帮带,因此刚需也要分为有无孩子的情况来讨论。 而且由于房地产领域的专业术语,贷款计算方式较为繁杂,很多用户都在初次接触这个领域时会经历艰难的“适应期”——了解“满五唯一”、“红本房”、“基准利率”等这些术语背后的含义,同时很多刚需都在买房之后就不再关注地产领域,直到有资本进行置换为止; 基于情感化设计的用户体验重构–贝壳找房 参考数据 基于情感化设计的用户体验重构–贝壳找房

情感化研究

1.情感化设计由来 概念是由唐纳·A·诺曼在《设计心理学3-情感化设计》一书中提出 情感化设计是旨在抓住用户注意力、诱发情绪反应,以提高执行特定行为的可能性的设计。通俗的讲,就是设计以某种方式去刺激用户,让其有情感上的波动。通过产品的功能、产品的某些操作行为或者产品本身的某种气质,产生情绪上的唤醒和认同,最终使用户对产品产生某种认知,在他心目中形成独特的定位。 2.使用情感化设计的原因 目前主流项目的优化流程是通过产品、交互、设计的讨论,将目标拆解、量化,然后调整整体架构、交互模式、视觉层级来正确引导用户完成既定目标。 但这样的用户研究方式太过理想化。 “事实上,理性行为在现实社会很少发生,人类的大部分行为都是非理性的,人类的消费行为往往会受到周围环境(时间、信息量、目标、兴趣、参照物、他人)影响,甚至有很多用户是通过分享链接直接进入某个产品页,而不是按照设想的从主页进入。”——《Don’t Make Me Think》 因此这次以「产品使用过程中的负面情绪」为准,判断产品目前存在的问题,并以减少或消除负面情绪为目标导向进行设计工作。 基于情感化设计的用户体验重构–贝壳找房

贝壳想给用户的「情感体验」是什么

「买房」是人生大事,信息爆炸的时代,「找房」的成果是起到决定性作用。 传统的找房主要依靠房产中介介绍、带看,过程费时费力,而对房产领域不熟悉的新人用户更是饱受「假房源」、「吃回扣」的苦;贝壳的出现就是为了打通房源和用户的桥梁,提升找房效率,让用户想起「找房」这件事不会如以往那么多负面情绪; 基于情感化设计的用户体验重构–贝壳找房

「情感」作为感性因素,如何量化并运用到项目中

在项目的前期调研中,通过对其他业务线的同事的随机采访,发现很多同事在使用自家产品时体验不佳,到最终演变成很排斥使用自家产品,同时用户也有很多类似的不良体验。 针对这种情况,需要建立起「情绪」的量化标准——代尔夫特大学积极情感研究实验室立足于基础理论模型,采集大量样本进行调研分析,提炼了人类的25个正面情感指标和36个负面情感指标。 结合正面和负面的情感指标,量化用户的体验,为提升产品使用体验提供解决方向。

用户产品体验中的负面情绪有哪些

「负面情绪」即「问题」,通过对采访对象的访谈、页面的操作记录等方式,经统计共有三种高频出现的负面情绪「挫折」、「烦躁」、「困惑」。 基于情感化设计的用户体验重构–贝壳找房

处理问题的顺序以用户体验流程为依据

基于情感化设计的用户体验重构–贝壳找房 困惑1:房源命名混乱 二手房源信息的命名方式目前较为混乱,没有统一的逻辑结构,且专业术语过多,对新人用户友好度很低;同时过长的文本会导致浏览效率低下; 但这个模式非常适合投资需求的专家级用户,专家用户有自成体系的判断依据,直接浏览搜索结果的信息,甚至不需要查看详情,就能判断是否自己中意的房源,而如今许多年轻人置业时对二手房的接受度有很大提升——开发较早,配套成熟,区域优势大。因此过于向专家级用户倾斜的设计已经不可取。 另一方面,拥有房源上传权限的房产经纪人很有可能会为突出房源特色填写非房源名称,提供一套规范也是为了遏制这些不规范行为。 基于情感化设计的用户体验重构–贝壳找房

购房的决定性因素是哪些?

参考贝壳研究院的内部数据和第三方平台提供的数据,除去「首付」、「贷款」等个人因素和法律法规要求,可以依次排序出购房要素——「楼盘名称」、「房价」、「交通」、「户型」、「面积」、五个要素; 五要素齐全,用户就能做初步的判断是否合适,而决定性因素是「房价」和「楼盘名称」,相对而言「户型」、「面积」的重要程度相对弱。 基于情感化设计的用户体验重构–贝壳找房 基于情感化设计的用户体验重构–贝壳找房

解决方案——按需求紧急程度来展示信息

基于情感化设计的用户体验重构–贝壳找房

设计实现

基于情感化设计的用户体验重构–贝壳找房 困惑2:web端首页导航过长难以识别 原版导航栏与背景较融合,用户的视觉中心可以集中在搜索功能上,但导航广度过大,选项过多且缺少鼠标悬浮(hover)标签的反馈, 导致用户花费较长时间识别标签的内容,同时过多的选项会对响应式设计造成影响。 基于情感化设计的用户体验重构–贝壳找房

原理分析

针对导航广度过长的情况,根据George A. Miller提出的7加减2法则把导航栏选项控制在9个以内,根据用户的行为层级将“二手房/新房”等细分业务收纳至一级行为。 基于情感化设计的用户体验重构–贝壳找房

重定导航架构

进过分析,一级行为共有8项,其中核心行为是「买、卖、租」,辅助行为是「查看百科、使用工具、查看市场现状、预测行业、个人帐户」,而二级导航负责众多的细分模块。 基于情感化设计的用户体验重构–贝壳找房 基于情感化设计的用户体验重构–贝壳找房

解决方案——首页导航改版

在修改了导航功能架构的基础上,在视觉上也改变旧版密集的视觉感受——导航高度调整为88px、标签调整为16px、 标签间距调整为48px;同时增加标签再鼠标hover状态的反馈——下划线,来明确“告知”用户鼠标所处的位置和即将前往的模块。 基于情感化设计的用户体验重构–贝壳找房

设计落地

在修改了导航功能架构的基础上,在视觉上也改变旧版密集的视觉感受——导航高度调整为88px、标签调整为16px、 标签间距调整为48px;同时增加标签再鼠标hover状态的反馈——下划线,同时为了避免二级菜单在视觉上和一级导航的标签重合产生混淆,标签的交互分为「悬浮」和「点击」两个状态 基于情感化设计的用户体验重构–贝壳找房 挫折1:web端「找错城市」「找不到房源」的现象频繁发生 基于情感化设计的用户体验重构–贝壳找房

用户情绪曲线分析

基于情感化设计的用户体验重构–贝壳找房

web端产品「定位」功能视觉层级过低

大部分接受调研的用户和同事都表示在使用web端产品时初次修改定位时都没找到「定位」button,发生了不符合心理预期的「挫折」,四处寻找后终于找到在左上角home键旁边找到了自己所处的定位; 基于情感化设计的用户体验重构–贝壳找房

「定位」不在「视觉中心」

让用户和同事心理预期落空的原因不是没有「定位」button,「定位」有,被安排在左上角的「Home」button旁。 旧版设计之初的房价(尤其一线城市)没有今天这么高昂,城市移民能够通过个人的努力加上时代机遇,基本能实现在工作地购买房产,因此「修改定位」这个需求在当时被认为是低频需求,因此没有安排到视觉中心——这一点可以在链家web端产品得到验证。 基于情感化设计的用户体验重构–贝壳找房 基于情感化设计的用户体验重构–贝壳找房

搜索标签视觉层级过低

在主流认知中,首页的搜索框应该承担的是全局搜索功能,当然这也不绝对,与具体的业务模式相关,但目前的标签形式与副标题没有明显差异,且层级过低——几乎所有新入职员工在搜索新房内容时都“忽视”了搜索标签的存在,“被”搜索了二手房内容,结果显示为无该房源;可想而知C端新房用户的使用体验。 基于情感化设计的用户体验重构–贝壳找房

视觉中心区域层级过多,变化趋势不明确

web端旧版主页的视觉中心区域层级过多,变化趋势不能够引导用户的视线走向,导致最突出层级为slogan,而不是搜索框,分类标签在多次测试中都被“无意识忽视”。 基于情感化设计的用户体验重构–贝壳找房

调整标签形式

嵌入式的标签的视觉层级更突出,可以很好避免旧版标签导致的误操作。 基于情感化设计的用户体验重构–贝壳找房

嵌入式标签不能超过1个

在确定了「定位」作为嵌入式标签后,业务类型也需要调整,但是直接再次加入嵌入式标签会造成视觉冗余,同时用户在搜索前必须进行两次「选择」,这样的体验不符合大部分搜索引擎多年培养的习惯——Google,百度两大搜索引擎都是无标签的搜索框,大部分互联网用户都会习惯直接输入检索内容。因此嵌入式的标签越少越好,不超过1个,否则会让用户产生「烦躁」的情绪。 基于情感化设计的用户体验重构–贝壳找房

唯一的搜索框标签该留给「定位」还是「房源类型」?

形式上无法解决,就回到交互层面解决 旧版的搜索流程需要用户在首页完成「定位」「房源类型」两项选择再输入关键字进入搜索结果页;这样的交互流程符合产品的实现模型,因为「二手房」、「新房」、「租房」等业务的数据库不同,提前进行选择可以避免得到错误结果。 但从用户的心理模型出发,最佳检索就是直接输入楼盘名称就得到正确结果——实际操作不可能这么简单,因此交互应该向减少「选择」方向修改; 「房源类型」的选择可以转换为程序自动匹配关键字,进入对应的房源库,提供符合条件的房源——房源类别不是用户搜索前必须搞明白的事情,应该是产品回答用户问题,而不是产品向用户提问。 基于情感化设计的用户体验重构–贝壳找房

「直接抓取ip地址为默认定位」不符合需求

今天“一线打拼,二三四线买房”是大多数打工者的最优解,行为模式发生了变化,「修改定位」由低频需求变为高频需求,「直接抓取ip地址为默认定位」的交互不符合需求,因此「定位」做搜索框标签更合适,将「房源类别」的选择留给产品,从而减少搜索前「选择」。 基于情感化设计的用户体验重构–贝壳找房

设计实现——「定位」功能视觉层级提升

基于情感化设计的用户体验重构–贝壳找房

二手房和租房房源的关键字会有重合

但房源库之间有重叠的内容,「租房」和「二手」就有可能重复,因此在进入搜索结果页后仍然有切换房源类别的需求,而出于技术上的考虑,合并所有房源库,以标签形式呈现房源类型难以实现,因此「房源类型」button在结果页需要呈现。 基于情感化设计的用户体验重构–贝壳找房

二级导航区域过大

上图为旧版本的搜索结果页导航设计,采用的是混合布局类型,可以呈现的功能较多,方便用户在不同层级间跳转,但占据了过多页面导致内容展示效率不高。 1.「在售」、「成交」都属于类别筛选,应该收纳到二级导航的类别筛选器 2.功能重复——二级导航和一级导航都有「小区」和「贝壳指数」,「地图找房」也有重复; 基于情感化设计的用户体验重构–贝壳找房

精简二级导航区域增加可用面积

「成交」、「在售」本身属于数据类,与搜索房源无直接联系,仅在用户需要参考因素时会产生需求,收纳至「贝壳指数」更符合用户的心理预期。 二级导航采用收纳形式,提升内容区的可用面积,取消旧版「小区」、「贝壳指数」等重复标签。同时在二级导航保留「房源类型」button,满足切换房源的需求 基于情感化设计的用户体验重构–贝壳找房

设计落地——业务分类收纳至二级导航

基于情感化设计的用户体验重构–贝壳找房

烦躁:用户不断地重复操作和面临「选择」

买车的流程和买房类似,买家都只知道自己的预算范围,最终下单之前用户都会随便逛逛,货比三家,很少提前列好详细的需求清单,也不会有4s销售一见顾客就问要不要天窗和要不要倒车雷达,这些不重要不紧急的需求不会一开始就明确。 复杂界面只有熟悉行业的投资型用户才能应付自如,只有他们才清楚这些条件背后对价格和居住体验的影响; 用户进入搜索结果页后,首先面对有20 选项的筛选器,大部分用户在结果页面对扑面而来的二十多个选项很容易引起「困惑」和「不耐烦」,因为他们清楚的只有自己的预算范围,在勾选了「区位」「房价」「建面」「房源特色」后,筛选器会向下展开「朝向」「楼层」等非核心要素选项,此时筛选器基本上占据了所有页面,用户需要往下滚动才能看见筛选得到的结果。 筛选条件比较繁琐,但无论优化程度如何,勾选筛选条件本身是打断“心流”的事,不是最优方案——用户肯定不愿意面对和飞机驾驶舱一样密密麻麻的筛选器。 初期的修改方案是分层级显示/收纳筛选条件,在形式上先解决旧版筛选器占面积过大,选项过多的问题。 基于情感化设计的用户体验重构–贝壳找房

情绪曲线分析

基于情感化设计的用户体验重构–贝壳找房

「筛选器」占据过多页面

旧版直接呈现筛选条件,方便用户快速勾选,但是面积过大也导致了内容展示效率低下,筛选条件分布过于零散,容易造成用户操作时的停留,影响使用流畅性。筛选器位置是固定位,不随网页滚动置顶显示,使用上非常不便。因此「筛选器」的优化方向时全局显示和收纳选项,因此「抽屉式」的二级导航可以满足需求。 基于情感化设计的用户体验重构–贝壳找房

解决方案:筛选器收纳至二级导航

目前二级导航的余位较多,收纳至二级导航可以将筛选器“隐藏”,在用户需要时才呈现,让用户不会在一进入搜索结果页就面对复杂的筛选器。 基于情感化设计的用户体验重构–贝壳找房

用户不想要「筛选」,只想要结果

但房地产本身因素较多,无论如何简化筛选器,「勾选选项」这个行为本身仍然存在。 从用户心理预期出发,用户并不想要「筛选」,只希望一键得到满意房源。 「形式上没有最优解,就往产品流程方面想。」 基于情感化设计的用户体验重构–贝壳找房

「记录用户行为」的推荐算法不适应房产类产品

目前推送算法借鉴了电商类产品的做法”记录用户的搜索行为,以此作为参考匹配同类产品进行推送”。 但搜索行为不一定和用户需求匹配。 1.用户随机搜索了当地最高档小区,系统以此为依据推送类似高档小区,而实际上用户是刚需置业,这就造成推送无效化,进一步让用户感知为产品“不懂我”,在情感上留下不好的印象; 2.用户搜索了预算内A区的房子,系统记录到用户行为后,只推送A区附近房源,而符合用户预算的房源,C区也有但系统没有推送; 基于情感化设计的用户体验重构–贝壳找房 这一点房产类和电商类产品的需求差异导致的——用户使用电商类产品的需求及时性较强且多变,且交易数额普遍偏小,因此用户主观意愿权限更高。 大部分用户财富总量是线性增长,同一区间内的需求有很高的重合度——目前年轻人或多或少需要长辈资助才能凑够首付,房贷则自行承担;因此用户在建立账户时确定了自己的需求类型后短时间很少会有变动;以此为依据,设定用户可选择的人物模型,预设一些大概率选项,提升首页推送的有效率,尽可能让用户在接触筛选器之前就找到合适房源,从而减少用户面对「筛选器」的几率。 基于情感化设计的用户体验重构–贝壳找房

「标签化」用户,降低筛选器使用频率

用户进入搜索结果页,以用户注册时填写的需求类型为默认选项,为用户推送房源,用户也可以根据需要自行修改需求细节。以用户模型为依据进行推送,可以避免用户偶发行为对推送算法的影响。 基于情感化设计的用户体验重构–贝壳找房

交互流程变更

以「人物模型」为依据提升推送算法准确度,减少用户接触「筛选器」的可能。 基于情感化设计的用户体验重构–贝壳找房 基于情感化设计的用户体验重构–贝壳找房

列表无法直观呈现房源具体位置

目前产品在各端都主推「列表模式」,(主流产品如安居客、中原地产等竞品也是如此)同时引导用户使用「地图模式」, 列表模式的优势是房源信息展示相对全面(字号较大,有房源内部图片),但缺少地理位置的直观展示。 大部分楼盘在对外宣传时都号称临近地铁,但有过看房经历或了解宣传方式的用户都清楚实际情况往往大相径庭,目前普遍做法是地铁口1km范围内都算做是“近地铁”,但早晚高峰的步行感受就是天差地别了。甄别房源实际情况也是看房费时费力的原因之一。 基于情感化设计的用户体验重构–贝壳找房

地图模式在移动端交互手势过多

「地图模式」在移动端的交互手势较多——单手「点击」、「平移」、双手「放大缩小」,而列表模式的交互手势主要是「点击」、「上下滑动」,操作负荷较小。 基于情感化设计的用户体验重构–贝壳找房

怎么提升地图模式的展示效率

地图模式提供更好的地理呈现,但是在实际操作中,居住区内的楼盘较为密集,容易出现楼盘信息互相重叠、干扰信息展示的情况,因此需要重新设计不同比例尺情况下的楼盘展示元素。 基于情感化设计的用户体验重构–贝壳找房

问题集中在比例尺较大的情况

上下重叠的情况较为棘手,在原则上用户只需要把放大比例尺就能看清重叠的标签,问题较为集中在比例尺较大的情况。 基于情感化设计的用户体验重构–贝壳找房

旧版解决方案

旧版解决方案是压缩字体和标签两侧间距,缩减标签的长度来减少互相重叠的情况。但在视觉上会造成过于紧促的视觉感受,同时旧版标签不再适应4px原则,需要重新调整尺寸。 基于情感化设计的用户体验重构–贝壳找房

设计实现——标签重设计

为解决旧版的紧促感,标签两侧间距20px,上下间距8px。 基于情感化设计的用户体验重构–贝壳找房

减少标签内容

先从标签形式着手,从左往右依次显示「房源名称」 「单价」 「房源数量」,显然「房源数量」不是必要的判断依据,可以删减。 基于情感化设计的用户体验重构–贝壳找房 虽然房源标签的长度减少了,但居住区本身比较密集,仍然出现较多重叠的情况。 失败方案:「上下错位」、「标签收纳/展开」的解决方案 方案一: 设想过标签上下错位的方案,但仅限于小范围内使用,一但全局应用会影响视觉的统一效果,显得杂乱,且在极限密集的情况,即使上下错位也无法解决; 方案二: 标签的收纳/展开的方案,虽然能够解决重叠问题,但在交互上需要用户单机/悬浮鼠标,重叠部分才能显示;而用户在地图模式下快速浏览目标的主要操作是平移 滚轮/双击放大,直接增加新的交互方式会增加用户的操作负担,同时增加了地图模式在web端的运行负担,因此方案二性价比不高; 基于情感化设计的用户体验重构–贝壳找房 形式上找不到最优解,那就优化流程

能不能减少用户主动点击重叠部分的楼盘的概率?

用户在依次选择完「行政区」、「片区」后,心理预期应该是「楼盘价格」,判断是否是匹配自己的预算区间,然后才会进一步查看房源信息,而「楼盘名称」在比例尺较大的时候则相对次要——买得起是最重要的,房源叫什么不是太重要,所以解决问题的关键在于辅助用户快速判断是否自己预算区间,提升检索房源的效率 基于情感化设计的用户体验重构–贝壳找房

重设标签元素的层级关系

根据用户的心理预期和需求的优先级,重新排列标签在不同层级的显示元素。 基于情感化设计的用户体验重构–贝壳找房 大量重复的标签色块也是冗余信息 从视觉角度出发,大量重复的标签色块也是冗余信息,用户实际上需要仔细辨别其中的价格,体验并不好, 需要再次优化标签的呈现形式来提升用户甄别信息的效率,避免用户在使用过程产生烦躁情绪。 基于情感化设计的用户体验重构–贝壳找房 解决方案:用色彩建立价格体系 标签内容已经确定的基础上,只能从色彩方面入手。用颜色建立价格高低体系,用户可以直接通过颜色来了解价格的大致区间,快速寻找到符合预算的房源区域。 减少用户在不符合预算区域的停留时间。以深圳市为例,贝壳研究院的数据显示均价57350元/平为品牌色——强化用户关于贝壳品牌色和房价的关系。 在贝壳蓝基础上提升明度用来显示低于均价的房源;在贝壳蓝基础上加入红色同时降低明度,形成有高贵神秘含义的紫色显示高于均价的房源; 基于情感化设计的用户体验重构–贝壳找房 基于情感化设计的用户体验重构–贝壳找房 至此,解决了一部分以情感为导向发现的产品交互、设计层面的问题。 当然工作并不是到这里就结束了,这次迭代是在用户体验研究方式趋同化的今天,所做的一些尝试,希望从不同的角度和不同的方式,真正能解决「找房难,买房难」的问题,哪怕只是一些细节上的调整,也可以给用户带来好的体验,那么前期的工作也是值得的。我一直相信“完美”是不存在于世界上的,只有“合适”与否罢了。同理将产品做到极致理性的完美,结果只能是做成一部机器。也希望能在后续的研究中继续丰富情感化设计的理论体系。 —————————————————————— 参考资料: Ant Design 情感化设计 https://zhuanlan.zhihu.com/p/55364776 《贝壳找房的响应式网页布局设计》 数据支持: 深圳贝壳研究院 作者:zozo94w


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/emotional-design-user-experience-optimize-beikezhaofang.html/feed 0
双重视觉错觉画中画 http://www.shejidaren.com/picture-in-picture-for-painting.html http://www.shejidaren.com/picture-in-picture-for-painting.html#respond Sun, 03 Nov 2019 00:00:37 +0000 http://www.shejidaren.com/?p=32634 双重视觉错觉画中画

错觉艺术是艺术家们追求幻想与绘画的一种结合,这种艺术的信息量比较大,通常画中有画。你可以看到不同的叙事,而这些叙事两者有机结合,元素是两种叙事共用,但不同的角度观赏可以形成不同的内容。今天设计达人为大家带来的是乌克兰错觉绘画大师的作品,通过双重错觉让你一次看两幅画。不得不感慨错觉艺术非常适合捕捉眼球注意力,会让你努力去发现画面的内容的不同构成。下面让我们一起来欣赏这些丰富想象力的双重错觉画作吧~ 双重视觉错觉画中画 作者:Oleg Shupliak INS:ins.com/olegshupliak_official/ 来自乌克兰的Oleg Shupliak是一位错觉绘画大师,他的作品中往往体现出来“画中画”的意境。建筑学专业出身的他,常用独特的视角进行绘画,像盖房子一样用各种元素堆砌出有趣的作品。当你第一眼看到他的作品时,会情不自禁地盯着它很久,不是因为它的创作有多么的辉煌宏大,而是画里像变魔术般的幻象。每一幅画里美丽的自然环境中,都隐藏着人像,使人能在一幅画中同时欣赏到两幅精彩的作品,这种独具匠心的创意,使得Oleg Shupliak成为当代最著名的超现实主义画家之一。 双重视觉错觉画中画 双重视觉错觉画中画 双重视觉错觉画中画 双重视觉错觉画中画 双重视觉错觉画中画 双重视觉错觉画中画 双重视觉错觉画中画 双重视觉错觉画中画 双重视觉错觉画中画 双重视觉错觉画中画 双重视觉错觉画中画 双重视觉错觉画中画 双重视觉错觉画中画 双重视觉错觉画中画 双重视觉错觉画中画 双重视觉错觉画中画 双重视觉错觉画中画 双重视觉错觉画中画 双重视觉错觉画中画 双重视觉错觉画中画 你喜欢哪幅画作呢?评论留下你的想法吧~


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/picture-in-picture-for-painting.html/feed 0
什么是原型设计?请看这份简明指南 http://www.shejidaren.com/prototype-design-in-ui.html http://www.shejidaren.com/prototype-design-in-ui.html#respond Sat, 02 Nov 2019 04:31:28 +0000 http://www.shejidaren.com/?p=32625 什么是原型设计?请看这份简明指南

在UI设计中,原型设计并非是自己可有可无的工作环节。很多UI设计师存在一个误区,认为原型设计是他人的工作,而自己是负责实现的。事实上,这种想法不利于自己的成长和职业发展。今天设计达人和大家分享原型设计的概念和意义,以及如何做出好的原型设计,希望大家对原型设计有更为全面的认识。 什么是原型设计?请看这份简明指南 一个好产品,离不开好的原型设计。大到产品的整体架构,小到一个功能点的设计,都起源 于原型设计。UI设计师的未来职业发展方向之一是全链路设计师或者产品设计师,而优秀的原型设计能力就是必备技能之一。 有人会说:“UI设计师不需要画原型,那是是产品经理或交互设计师的工作。”这其实是非 常错误的观点。如果想要做出优秀的UI设计,画原型这一环节也是必不可少的。本文就从多 方面来探讨一下原型设计的重要性以及怎样做出好的原型设计。

一、基础认知

01. 什么是原型 原型是对一个产品的可视化呈现,主要传达一个产品的信息架构、内容、功能和交互方式。 它是产品功能和内容的示意图,一般包括线框图以及交互说明。原型是产品设计初期供整个 团队参考、讨论、评估的主要依据。之前讲过的需求文档也包含对功能和内容的说明,但原 型并不是简单地把需求文档图形化。 如果在需求分析的前期,设计师能够和产品经理等人员一同进行产品定位、竞品分析和用户 研究等工作,再根据研究结果、项目资源等情况来筛选和分析需求,加上自己的思考和设计 方法,把需求转化为设计方案,再细化成线框图和交互说明,最后形成一份能让双方达成共 识的原型文档。那么设计师接下来的工作就会比较顺利地进行下去,并且在团队中的话语权 也会逐步提升。

02. 为什么要画原型

原型具有快速创建、聚焦易用性、修改成本低等不可取代的优势。 快速创建是指设计师不需要考虑太多细节和视觉表现手法,可以快速出图;聚焦易用性是指 将产品设计的重点放到功能的易用性上,不会被视觉设计所干扰;修改成本低,是指线框图 比视觉设计稿更容易、更快速地修改,耗时短,效率高。 对于设计师来说,一个好的设计想法,如果没有清晰、标准的表达方式,其效果会大打折 扣。由于原型可以被快速创建、快速修改的特性,使得产品设计团队能够把多种设计方案种 做直观的对比试验,可以快速地进行可用性测试并直接地获得反馈,轻松修改或者放弃某些 设计方案。 对于项目组来说,原型是项目开发的标准和依据,通过设计原型,项目组人员能够更高地理解产品逻辑,将需求具体化,从而可以量化地评估视觉设计与开发的排期。在这里要注意的 是,原型的使用者不仅仅是视觉设计师和开发工程师,还有测试人员,可能有市场人员、甚 至法务人员等各种不同职能的人员,为了让这么多种不同的角色都能理解你的设计方案,原型务必要表达得直观、清楚、规范。

二、进阶理念

01. 从最简单的开始 很多设计师,当接到一个庞大需求的时候,总是没有思路,以至于迟迟不想打开软件。由于 需求太多太复杂,给了设计师太多的压力。其实,万丈高楼平地起,任何复杂的产品,都是 从基本功能开始的。在这里,有一些很简单的步骤,可以让你快速起步:
  1. 页面上要放置什么功能或内容;
  2. 排列这些功能的优先级;
  3. 如何表现这些功能的优先级;
  4. 依次设计每个部分的具体内容,逐渐增加细节;
02. 不要过分追求精致 设计精致的原型图固然很好,我们都喜欢精细打磨的设计。但是在设计初期,最好不要陷入 作图的细节里,人的注意力是有限的,我们应该重点关注功能的位置、类别、顺序、层次, 页面的逻辑关系。有很多优秀的设计师是使用纸和笔快速开始的,在初始的阶段,最重要的 是想法,而线框图的精致程度,不应当成为这一阶段所追求的目标。 03. 目的是讨论和优化 几年之前,我参加了阿里某产品设计师的一次讲座,他的观点之一就是:在产品设计的前期 不要怕改稿,原型图就是用来修改的。 我相信大部分设计师,都不喜欢改稿,但是我们制作原型的目的就是以此为依据进行讨论、 修改。否则到了视觉设计、甚至到开发阶段再修改,成本会比修改原型大很多。其实设计原 型的阶段,有一大半时间是要花在讨论、评审和优化上,这也是原型设计的意义所在。 04. 人人都要画原型图 一般的产品部门有产品经理、交互设计师、UI设计师这三个角色。当然很多公司没有专职的 交互设计,只有产品经理和UI设计师,UI设计师同时承担着交互设计的工作。 产品经理进行需求确认,交互设计师其实在做一种需求翻译的工作,将产品的商业需求,进 行具象化,并加入一些用户视角,设计线出框图。最后由UI设计师产出高保真视觉图。这三 种角色,在实际工作中,都应该通过画原型图,来优化自己的设计。但是,他们画原型图的 重点是不同的。 作为产品经理,画原型图有时是不可以避免的,产品经理需要通过画原型来细化思路,理清 产品的功能点、内容块和业务流程,帮助自己写好需求文档,以便更好传达自己的需求给其 他人员。还有一些概念性项目,需要根据原型来让老板认可并做决定。 而作为交互设计师,在画原型图是需要重点关注一下几点:
  1. 目标和流程——根据需求和目标,分析用户的操作流程,并且尽可能地简化操作流程;
  2. 布局和结构——内容或功能分为几类,应该采用哪种布局,使其更加易用;
  3. 位置和顺序——各个版块内容应该按照怎样的顺序进行排列,来引导用户的行为;
  4. 层次和轻重——各版块、内容的层次该怎样区分,优先级应该如何排序。
到了视觉阶段,UI设计师不管接到多么精致的线框图原型,也需要重新进行思考,不要当原 型上色师。我们需要结合目标用户特征、需求以及当下设计趋势,进行产品的风格定位。有 些时候要改变原型的位置和结构,以达到更好的效果。 要注意的是在修改之前,要同产品经理和交互设计师保持沟通,通过一些自己画的视觉原型 图,向他们表达一些视觉设计上的想法,毕竟每个角色都会有自己的知识盲区。当你的修改 意见取得了其他人的认可,就可以根据这一版本的原型,进入视觉设计的阶段。

三、设计实践

01. 原型设计的步骤 在这里我简要地说明一下原型设计的步骤,在之后的文章中我会展开其中的某一项详细说 明,请持续关注我之后的内容产出。 ① 建立控件库 控件是指界面中所有的最小元件。 例如:按钮、图标、文本框、单选框、复选框、开关、图片占位符等控件。 ② 建立组件库 组件是一种功能模块,它能够被重复使用,从而提升设计效率,并且可以保持界面的一致性 和规范性。 例如:图文列表、图文卡片、表格、筛选条件、文件上传、系统反馈、弹出框等组件。 ③ 绘制流程图 流程图表达的是一个用户的操作过程,通常我们基于普通用户,如果时间和资源允许,也可 以绘制特殊用户的操作流程图。流程图的作用在于梳理和规范流程,在绘制流程图时,我们 要注意逻辑的清晰和完整,每一个流程分支都代表着用户的一个决策节点,需要我们进行深 入地思考和设计。 ④ 设计关键页面 例如:首页、详情页、个人中心、设置等页面 ⑤ 设计辅助页面 例如:注册登陆页、找回密码等页面 ⑥ 设计关键功能故事板 故事板,顾名思义就是讲故事的板子。故事板可以帮助我们将用户角色,使用场景和使用流 程串联起来,将抽象的体验过程具象成图文结合的形式,使团队成员可以通过某个角色来观 察我们关键功能的使用场景,并观察用户的操作的流程,使产品设计师能够对用户体验进行 更直观和深入的挖掘和思考。 故事板三要素:角色、场景、情节。角色要说明包含几类用户群体;场景要说明包括几种使 用场景;情节要说明用户目标、触发事件、行为流程和行为结果。 ⑦ 原型注释与交互说明 原型设计文档必须包含清晰的注释和交互说明。控件的不同状态、链接的指向、页面的跳 转、操作的结果、报错信息及其展示方式等交互说明内容,都需要在原型注释中用文字准确 的描述出来。 02. 原型设计的注意事项 我们在做原型设计时,要把原型的阅读者想象成对产品和设计一无所知的人,该怎样图文并 茂的展示产品的逻辑和功能,才能够让其通过原型来理解这个产品,需要注意以下几点:
  1. 使用灰度线框图:颜色和视觉效果会影响大家对易用性的判断;
  2. 清晰地展示流程:顺畅的操作流程是产品易用性最基本的标准。
  3. 关键功能要有故事板:角色、场景、情节,使团队人员更快、更好地理解产品。
  4. 要有注释和说明:图文并茂更能准确传达设计方案与想法。
  5. 一致性和规范性:优秀原型的元素、组件、页面甚至是文案用语的调性都规范一致的。

四、结语

本文从原型设计的基础认知到进阶理念,最后到设计实践,从多方面探讨了原型设计在整个 产品研发流程中的重要意义,以及该如何做出好的原型设计。写到最后,我发现还有很多要 展开详细讲的内容。在之后的文章中,我会持续地产出更多关于产品、交互方面的知识,以 及作为一名优秀的UI设计师应具备的多种设计能力。让我们一起成长进阶吧。 感谢阅读~ 作者:UX_Milk,个人主页:https://www.zcool.com.cn/u/2296261


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/prototype-design-in-ui.html/feed 0
输入框背后的输入反馈逻辑 http://www.shejidaren.com/input-feedback-logic-behind-the-input-box.html http://www.shejidaren.com/input-feedback-logic-behind-the-input-box.html#respond Fri, 01 Nov 2019 03:58:26 +0000 http://www.shejidaren.com/?p=32600 输入框背后的输入反馈逻辑

输入框是对交互设计知识的一个系统反映。设计本质上是两点:向对方传达什么样的信息(目的),根据目的采用合适的设计手法。 输入框作为交互的典型情景,设计师需要用户做什么,以及如何引导用户愉悦地进行递交信息。最重要的是想用户之所想,并且恰当地解决本应由设计师解决的,而不是交给用户做的事情,比如验证码自动验证,而不是用户输完固定格式的验证码还要点击递交;长字符信息根据格式分块,比如银行卡帐号按4位数分块,让用户辨识自己输入的帐号信息。 设计达人今天分享的这篇文章,基于输入框的交互设计进行输入反馈的逻辑梳理,让设计师理解用户共识心理之于交互设计的重要性​。其实设计的条条框框没有那么复杂,只要设计师在设计的时候做到站在用户的角度思考,想用户之所想,减少冗余的步骤、明确清晰的引导和反馈,做出的设计不会​差到哪里去。 输入框背后的输入反馈逻辑 对于「输入框」的解析,市面上有非常多的文章都讲得很不错。但是为什么它总是被拿出来说,却又总是说不完呢?​ 主要是因为它所承载的内容正好反映了交互设计的各种知识。 比如如何输入,输入前要注意什么,输入的过程中要如何校验,输入完成会有哪些反馈。这一串内容其实就包含设计师设计一个功能时,所需要注意的所有信息了。 类比用户使用功能前,如何清楚地知道这个功能的使用方式;使用过程中,明确地了解自己的行为正确与否;使用完成后,如何快速地得知结果。 所以针对「输入框」这个问题,我想着还是有必要写一篇文章来具体聊聊「输入框的组成部分」以及它的「正向逻辑与逆向逻辑」。

一、输入框的组成部分

通常一个「输入框」包含的内容有两种,载体、文本。但随着用户使用产品的场景复杂化,输入框的内容也逐渐变得更为丰富,现在也包括了图标。 细分下来是这样的:
  • 文本:包含标题,占位符,帮助,反馈;
  • 载体:文本框;
  • 图标:展示型图标,操作型图标,反馈型图标。
虽然输入框在随着场景的变化而越发丰富,但内容再怎么变化也基本离不开这三类。 接下来,我们对「输入框」做一个详细的拆解。 最常见的组合,就是文本框与标题的组合了。 输入框背后的输入反馈逻辑 这样一个组合,至少能确保用户知道需要在文本框中输入什么信息。 需要注意的是,虽然这看起来很简单,但在排版上需要注意多列内容如何进行正确展示才能在界面中显得更为和谐的问题,因为它也涉及到了用户的眼动行为。 输入框背后的输入反馈逻辑 上面两类,左图虽然左对齐,但是标题与输入框的间距从整体上看显得不够协调;右边采取了右对齐,但是标题与外框的距离又显得参差不齐。且用户在查看的过程中,会显得较为吃力。 所以出现了下图这样的组合: 输入框背后的输入反馈逻辑 但这样的组合也有问题,就是纵向展示空间变小了,上图能放下三个输入框,到这里就只能放下两个了。所以对于输入框展示形式的选择也很关键,如果页面内容较多,可选择水平排列的,但如果内容较少,就可以选择纵向排列的。 而当这两种状态都无法满足的某个场景出现时,也就出现了其它变化。也就是把标题内嵌,作为「占位符」来使用。 输入框背后的输入反馈逻辑 这种方式虽然节省了空间,但只要用户点击输入框后,就看不到标题了。很多用户会习惯性点击输入框,但往往会忘了标题是什么,再想返回去看,也不知道如何才能让其恢复再出现了。 所以又出现了这样的形式: 输入框背后的输入反馈逻辑 这种展示形式的唯一问题就是点击后显示的标题太小,从而导致在展示类表单复查时难以阅读的问题。 到这里已经提到三块内容,文本框、占位符、标题,下面我们再来延伸一种:帮助。 输入框背后的输入反馈逻辑 由左图可以看到,占位符的作用相对较大,上面既可以代替标题,这里同样可以作为一种帮助提示。但它不适合在文字较多的情况下来使用,如果文字较多,那么右图的展示形式会更可取。毕竟我们经常还能看到好几条帮助提示的输入框,就不适合用占位符来代替了。 说到这里可能需要理一下占位符,占位符的概念很大,不仅仅是占用某个位置,在占用的同时它需要提供自己的作用,因此除了代替标题,作为帮助提示,它还可以提供默认值。如姓名,可这样展示: 输入框背后的输入反馈逻辑 如果你玩游戏的话,现在很多手游刚注册登录后,会自动填充一个姓名,你可以选择替换,也可以就用这个自动填充的,比如我就是 @杭州彭于晏。 包括例如淘宝,在搜索输入框里,会自动填充一个商品,用户可以直接点击搜索,也可以输入替换。这就是占位符作为默认值的作用。 当然,对于文本框来说,它也有几种不同的样式,比如: 输入框背后的输入反馈逻辑 类似的还包括验证码的输入。所以文本框的形式,也是需要依据需填写内容的变化而改变。 那么到这里,我们讲了文本框、标题、占位符、帮助提示,然后我们继续延伸,下面我们来聊字符限制。 每次讲到字符限制,很多人都会列举譬如微博,告诉读者在特殊场景下要做好字符限制,但现在微博已经不限制字符数,所以这里讲一个常见但很少人提及的隐性字符限制。 在大部分产品的登录注册场景里,当用户在输入手机号时,只要超过 11 位就会无法继续输入。这其实就是一种字符数限制,只是大家有了共识,所以并不惊讶为什么无法继续输入,甚至反而会觉得可以继续输入的产品做得不好。包括在手机号输入框里可输入英文字母,这就是没有做好输入限制的典型问题,它不仅是技术逻辑的基础认知,还是一种共识。 这就是一种以用户共识创建产品功能的例子了。 聊完文本与载体,我们再代入图标来看看。 图标可分为展示、操作、反馈三类。其中最早出现,也是最为常见的,就是展示类图标,我们通常用它代替标题: 输入框背后的输入反馈逻辑 比如电话、邮箱等较为容易表达的。但它也有弊端,就是用户个体认知差异,所以当出现这么一个内容时,你就没办法猜测这到底是昵称,姓名,还是其它什么。 输入框背后的输入反馈逻辑 因此,现在很多产品开始在输入框里去掉这类展示型图标。毕竟当它和标题文本一起出现时,也就显得多余了。 还有一类是反馈型图标,比如当我们填写完内容脱离输入框后,系统开始校验,并给出反馈的图标。 输入框背后的输入反馈逻辑 除此之外,我们还能看到的一类图标是操作型图标,其中最为常见的还是要数「清除」了。 输入框背后的输入反馈逻辑 写这篇文章的时候,有群友在群里提到说,现在有些产品,在密码输入框中的键盘回删效果跟点击清除按钮的效果一样了,这是不是有问题的? 这要视具体情况而定,比如在校验之前,键盘回删应该是删除上一个字母或数字;而在校验之后,回删与清除都是全部删除。因为密码大多是星号隐藏,所以校验过后再单个回删的操作就显得笨拙了,而且用户很难去数数说第几个错了。所以干脆就一键删除。但是如果还没检验,键盘回删就全部删除,那肯定是不对的。 回到手机号,因为手机号是正常显示不隐藏,无论校验与否,都不应该让回删与清除的效果变得一致,这不利于用户建立界面图标的使用意识,更不要说建立共识了。 所以虽然这里把输入框都拆解出来了,但是到具体内容时,还需要具体问题具体分析才行。 当然,操作型图标还包括,语音、密码显示/隐藏等。所以操作型图标,是目前在输入框中见到最多的一类,但使用逻辑也是最复杂的,所以要好好斟酌才是。 输入框背后的输入反馈逻辑 包括上面提到的帮助提示,通常在界面中空间不够,且又不能没有的情况下会做这样的处理: 输入框背后的输入反馈逻辑 到这里,各位应该能知道输入框所包含的内容,我再放一张大图总结下。 输入框背后的输入反馈逻辑 内容包括:
  1. 标题,应该始终可见
  2. 载体,文本框,样式可根据场景变化
  3. 占位符,可作为提示,也可以提供默认值
  4. 帮助提示,内容多可拆分,也可以融入操作图标中
  5. 反馈提示,有正确与错误两种
  6. 图标,分为展示型图标,操作型图标,反馈型图标
  7. 反馈型图标的一种

二、输入反馈的规则逻辑

拆解完「输入框」的架构,现在来聊规则逻辑,会更清晰。 反馈通常被认为是输入完成后的被动行为,但其实它还包括了输入前与输入中的用户行为提示与反馈的逻辑规则。 说人话就类似于,你走在路上,认出前面那个人是你朋友,所以你打算去打招呼;当你在打招呼的过程中,他会因为你的一系列举止做出回应,而不是等你打完招呼他才转过来看你,否则你的招呼他基本不会看到,更不可能给你任何回应;最后你打完招呼,他也会给你一个回应,这个回应可能是开心的,也可能是愤怒的(比如你在路上遇到你大学老师,你喊一句,嘿,孙贼~)。 输入反馈的规则逻辑也一样,有这么三个过程:输入前提示,输入中校验,输入后反馈。 输入前提示,很简单,看下面这张图: 输入框背后的输入反馈逻辑 这里输入验证码,看到后知道我的手机接收到了一条验证码信息,这条验证码是 4 位数的,所以只要在这个位置输入这个 4 位数验证码即可。 当然,我上图采用的形式,已经剔除掉了一部分可能会出现的问题,比如格式,位数。 输入中校验: 输入框背后的输入反馈逻辑 这一次校验,因为我采用了这个形式,所以省略了一个内容,就是字母的限制输入,因此直接排除了这个情况。如果采用常规格式,允许用户输入字母,那么也可进行报错,但这样的设计挺反人类,所以直接限制掉会更好。 那么在这个过程中,只需要校验验证码是否正确就可以了。 最后如果成功,则直接进入下一步;如果失败,则给予反馈提示: 输入框背后的输入反馈逻辑 这里的反馈,在样式上要明确,且要清晰易懂:
  • 利用反馈文本让用户知道为什么会出现问题;
  • 确保反馈文本清晰易读;
  • 也可以加上图标增强可读性。
题外话:这里经常会出现的一类错误是密码设置。 输入框背后的输入反馈逻辑 当密码设置完,焦点脱离输入框后,如果两个密码不唯一,要给两个输入框同时反馈错误显示,因为系统不能判定哪一个输入框的密码是正确的。在一些产品里,经常会看到给第二个输入框标注显示错误,这是不对的。 说完输入前中后的内容,我们再来细分下输入反馈包含哪些规则逻辑:
  • 验证内容是否为空
  • 验证内容是否违规
  • 验证内容是否包含在一定范围内
  • 验证内容的二次确认
  • 验证内容的格式
  • 验证内容的长度
  • 验证内容的唯一性
上述内容我相信在梳理框架的过程中大家已经大体理解,所以我举几条特殊的来说下。 第一条,有些输入框具有占位符,但是该占位符不提供默认值,仅是提示,所以提交表单等行为会不产生任何作用,这时候也需要有反馈提示,告知用户为什么没有任何作用。 输入框背后的输入反馈逻辑 很多人这里会犯得一个错误,就是提交表单后,输入框应该清除占位符,以便用户查看具体错误原因。 接着是验证内容是否违规。类似于我在微博把昵称改成我的公众号名称,是不被允许的,可能它已经成了品牌名称。 再是验证内容是否包含在一定范围内,比如地址的选择,某些功能只能指定某些地区使用,所以如果我在山沟沟,可能就用不了某个产品的某个功能。 其它几条较为简单,相信大家都好理解,我这里就不做赘述了。 要理解输入反馈的逻辑规则,首先要知道它的组成架构,然后理清输入前中后的信息,基本就能理解大部分内容。而特殊问题,就需要具体分析了。 这里给各位留一个延伸。如果想研究「输入反馈」的交互规则,可以看一看《微交互》这本书,里面提及的「触发器、规则、反馈、循环与模式」的公式很好的解释了整个反馈过程是如何进行的,有兴趣的话可以读一读。

三、小结

来个文章的小结:
  1. 反馈有三个节点,输入前提示,输入中校验,输入后反馈;
  2. 对校验的规则要熟悉并掌握,确保功能逻辑的合理性;
  3. 对错误给予合理提示。
通常来说,具体反馈要具体分析,本文虽然含盖点较全,但也不是说所有输入框都要依据这样的形式进行设计。而针对于具体功能的复盘,可选择合适的内容进行分析是否符合这里提及的要求。 作者:呆总丶,微信公众号:呆呆U理


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/input-feedback-logic-behind-the-input-box.html/feed 0
讲究连贯性的三折页设计 http://www.shejidaren.com/continuity-folding-design.html http://www.shejidaren.com/continuity-folding-design.html#respond Thu, 31 Oct 2019 08:27:37 +0000 http://www.shejidaren.com/?p=32582 讲究连贯性的三折页设计

今天,设计达人为大家带来图赏​。连贯性一般分为两种:图形阻断的子母版式,即每一页的版式通过阻断的方式提示读者展开阅读,展开后又是另一种版式的设计形式,这种版式注重叙事性和感性信息的传递,每一页的版式独立,展开后则成为另一种版式的元素​;每一页的版式都一样的章节版式,第一页是总览,后面每一页都是同样版式的独立内容​,这种版式叙事性偏弱,更注重信息的查阅​。 讲究连贯性的三折页设计 下面一起来欣赏连贯性做得不错的折页设计作品: 讲究连贯性的折页设计_www.shejidaren.com三折页设计_1 三折页设计_2 三折页设计_3 三折页设计_4 三折页设计_5 三折页设计_6 三折页设计_7 三折页设计_8 三折页设计_9 三折页设计_ 三折页设计_10 三折页设计_11 三折页设计_12 感谢阅读! 图像来源:版式设计很简单


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/continuity-folding-design.html/feed 0
动效设计中的物理模拟 http://www.shejidaren.com/motion-design-with-physics.html http://www.shejidaren.com/motion-design-with-physics.html#respond Wed, 30 Oct 2019 05:36:05 +0000 http://www.shejidaren.com/?p=32566 动效设计中的物理模拟

动效设计并非空想的产物,而是对现实的一种抽象模拟,这意味着动效需要遵循现实中的一定物理法则。设计达人今天分享的这篇文章,通过对静态插画的动效化,再现动效设计的流程和思路,阐述动效设计中的物理模拟概念。话不多说,让我们跟着文章的思路了解动效设计中的物理模拟吧! 动效设计中的物理模拟 作为动效达人,我被问到最多的问题是:
我该如何开始学习动效设计?
对此,我通常直接回答:从物理学开始。我的回答吓跑了大多数的新人😂,但这是事实——真正热衷于此道的人不会因为一个问题而止步,他们追逐着永无止境的问题,我喜欢他们!❤️ 每一周,我会在日程上留些空档,用来指导这些热情的朋友。我亲自和他们见面(前提是他们在印度班加罗尔附近),或者通过互联网交流。我喜欢这样做。😊 当然,我的努力只能辐射到我圈子覆盖到的人。我肯定的是,世界上有许多朋友想知道这些。因此,这篇文章就是最好的传达。

物理是唯一

当我说:“你从物理学开始吧”,我没有全错。物理通常让我们回想起在学校中被方程式和公式支配的可怕经历! 动效设计中的物理模拟 然而在现实中,物理比所有纸上的这些复杂东西都重要得多。它是自然的行为方式、物体的运动轨迹、事物的此起彼伏。 例如:知道什么时候举手抓住飞来的球、什么时候后退以尽可能地减小球对手部的冲击力,这是真正的物理学。 对现实世界的理解是你开始动效设计所需的所有物理学。

让事物生动起来!

这是Snehal Patil戴着圣诞帽,骑车送快递的图片。非常可爱,对吧?😀 动效设计中的物理模拟

骑车送快递的简单插画

我们可以说他是“骑”在车上,而不仅仅是坐在上面,因为他的另一条腿可以倚在地上。但那只是一个猜测!我们如何才能让观众感知到车是运动着的而不是静止的?答案是编排! 让我们开始做有史以来最设计师的事情:
分解问题——这次是字面意思!
动效设计中的物理模拟 插画中的元素分解后,可以将每个组件视作一个单独的实体,分别进行动画处理,然后再组装在一起。

编排

我确定了5个简单的补充,这些补充将使这副静态插画生动起来,让我们开始吧!😍 01. 车轮会旋转(很明显) 旋转很简单!After Effects有旋转选项,我们只需要间隔几秒钟加2个关键帧,以及调整角度的不同。然后,根据自然法则的建议,车轮每旋转一圈,我们将底盘、车轮和骑手的整个组件向前移动2(π)r的距离——唷!🙄 或者,我们可以先跳过这些难题,尝试一些轻松而复杂的技术。这个怎样? 动效设计中的物理模拟

摩托车的轮子在旋转

看起来很微妙,不是吗?这里,我们基于两个假设:
  • 摩托车的速度很快,因此车轮的辐条看不见;
  • 车轮的表面天然瑕疵,因此反射闪烁;
专业建议:可以用简单的白色圆圈和After Effects中的“修建路径”工具来创建闪烁。 这种闪烁的确给人一种运动的感觉,但距离真实还差得远。让我们看看下一个。 02. 摩托车的底盘会隆起 即使我们假设摩托车在平坦的沥青路上行驶(在印度简直不可能😛),由于避震器的作用,仍然会有节奏地上下运动,就像这样。 动效设计中的物理模拟

轮子旋转、底盘起伏的摩托车

感觉上好多了,对吧?但它仍然缺少一些东西。 03.骑手的身体自然活动 这里的骑手可不是装在紧身衣里的塑料模特,他是人类,应该表现出人类的动作。想象当你在骑摩托车时会发生什么,身体的不同部位会彼此关联地运动。例如,你的手肘的角度会变化、你的脖子和头会活动、你的背部会弯曲伸展等等,我们只需要模仿其中的一部分动作。 动效设计中的物理模拟

车轮旋转、底盘起伏和骑手身体活动的摩托车

你看到这里的额外动作了吗?如果有,那么你就拥有设计师之眼😃这些点很微妙,但是它们让整个结构增添许多活力。它们清晰地将没有生命的食物盒与有生命的人类区分开来。 专业建议:骑手的身体可以进一步地分解,每个组件都位于不同的图层上。然后在After Effects中巧妙地移动和旋转这些组件来实现人的动作。 骑手的身体可以进一步分解,每个部分都位于不同的层上。然后,可以通过在After Effects中巧妙地移动和旋转这些部件来实现人的动作。在角色动画的世界中,这个过程被称为装配。 动效设计中的物理模拟 04. 一点儿额外提醒 我们都知道圣诞帽的一端是松弛的,当骑手高速行驶时,它永远不会僵硬,它会扑哧扑哧地扑打飘摆,所以我们继续😇 动效设计中的物理模拟

轮子旋转、底盘起伏、骑手身体活动和帽子扑打的摩托车

帽子扑打的这个步骤非常容易上瘾,你可能会觉得有些夸张。其实我也做得夸张了!😆但是,可以控制夸张。 专业建议:只需在很短的时间内将帽子从一种形状变形为零一种形状即可完成飘摆。这比看起来还容易! 05. 最后的修饰 嗯……让我看看……车轮在按应有的样子旋转,底盘在按应有的样子起伏,甚至骑手和他的帽子也是应有的样子。但是,仍然没有任何迹象表明摩托车正在向前行驶,这或许是所有步骤中最简单的! 只要, 我们将整个组件(底盘+轮子+骑手)向前移动; 或者, 我们可以简单布置个城市景观,并将其向后移动——就像我们从暴力摩托、超级马里奥和魂斗罗等电脑游戏中学到的那样,相对运动,你看😄 动效设计中的物理模拟

最后一个...耶!

看......我们增添许多活力!
专业建议:这样创建一个永远循环的背景非常容易。你只需要将2个副本拼接起来即可。最后,仅揭示组成无限循环的那部分内容。 动效设计中的物理模拟 原文作者:Saptarshi Prakash 原文地址:https://medium.com/swiggydesign/how-i-started-motion-design-using-high-school-physics-fa6cdbf12cde 翻译作者:小谭 | UI设计师 编辑整理:铅笔头 | 设计达人编辑组


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/motion-design-with-physics.html/feed 0
Behance好文,值得设计师关注的8大趋势 http://www.shejidaren.com/2020-design-trends.html http://www.shejidaren.com/2020-design-trends.html#respond Tue, 29 Oct 2019 07:18:36 +0000 http://www.shejidaren.com/?p=32509 Behance好文,值得设计师关注的8大趋势

这是我们连续5年针对未来设计趋势发布预测了。在过去几年中,我们获得了非常多积极的反馈,这不断激励我们在设计领域发现和探索设计的新趋势。虽然大多数趋势都是过去一年就已经形成的,但在2020年,我们还是会有一些值得追求的新设计趋势。 设计趋势往往会随着技术的升级而改变。 Behance好文,值得设计师关注的8大趋势 话不多说,让我们一起探索最新最复杂的2020年设计趋势吧!

动效设计和动画设计

2020年的主要设计趋势 (译者注:这个标题原文是Motion和 Animations ,我相信很多人可能会分不清,我在这里解释一下。Motion我翻译为动效,比如Loading动画这种,没有任何故事性的设计;而Animations我翻译为动画,类似于动画片,是有故事性的。) 在2020年,我们认为动效设计会是主要趋势,因为在几乎所有的设计领域都能用到动效,从微动效到Logo和UI,一切都在动。动画内容正在进入一个全新世界,在这个世界里,纯文字内容不再像以前那样吸引人了。 正确的动效设计可以使信息更快更准确的传达给受众。 目录
  • UI / UX
  • 插画
  • 动效设计
  • 平面设计
  • 技术趋势
  • 包装
  • 字体
  • 工具趋势

1. UI / UX

1.1 深色模式 (android Q and iOS 13) 深色模式会成为2020年的新趋势,Android推出了两种深色模式,分别叫Force Dark Mode和System Dark Mode。微软抢在谷歌之前在他们的邮件应用中首先更新了深色模式,谷歌紧随其后,也在他们的Android 10中的邮件应用Gmail中跟进了这个模式。 随着这一波更新的发布,许多设计师将会选择在他们的设计中使用这一模式,所以预计在未来的一年里会看到越来越多的深色模式。 1.2 大胆的配色 大胆鲜艳的配色在最近两年成为了一种很重要的趋势,在2020年这一趋势将会继续。这些颜色丰富,明亮,充满活力。他们既可以作为主色也可以作为辅色。 1.3 更多的插画被应用在UI中 最近几年来,插画设计一直是设计领域中最热的趋势之一。插画是一种很好的视觉符号来帮助用户理解产品背后的故事,配上一些好的创意概念,使得信息传达的更快。 1.4 更多的故事性 故事,能帮助用户在产品的使用过程中,获得尽可能简单和流畅的体验。一个好的故事更容易帮助用户理解产品。为了把故事讲好,我们可以创造出一个品牌人物,赋予他人格,为他制造一些故事和冲突,最终帮助我们解决产品问题。这是在产品设计中讲好故事的基础,至于讲故事的方式,在UI和UX中都有使用,原理一样只是落地方式不同。 1.5 更多的微交互动效 正如我们所说,动效是今年的趋势,在UI中表现的尤为突出,为插画也能增加丰富的细节,强化信息传达,提升记忆点。 微交互的概念最早出现在2018年,但这是一个值得在2020年关注的趋势。它们是UI设计中一个极其重要的趋势,决定了一个App或网站是普通还是优秀的区别。微交互在让用户理解系统如何工作,并引导其获得更好的体验方面扮演着非常重要的角色。 如果你是一位UI设计师但还不会在工作中用微交互,我们建议你赶紧学起来,因为在2020年的UI设计工作中,缺少了微动效,整个产品都会黯然失色。 1.6 应用视频到UI中 在2020年,信息的触达将会变得更快,而视频是最好的载体。无论是选择通过动画还是电影的方式来推广产品,视频都是任何网站或应用所必须具备的。 视频​: 1.7 关注功能性 UI设计中很重要的一个部分就是其功能性。每一个元素的设计都是基于它的目的和功能。很多人认为在设计过程中,对于视觉和功能只能二选一,但是随着技术的发展,两者可以很好的兼顾到。设计是为了让网站或应用引起用户的注意,而功能是为了让体验变得容易,目的是为了让用户更快的找到自己想要的信息。 1.8 追求极致细节 高度关注细节对于UI设计来说非常重要。从每一个按钮,图标,Loading,导航,以及任何一处小的细节都需要做到极致设计。我们在UI中需要注意的细节,总是随着新技术的出现而发生变化。 明年我们会看到越来越少的按钮,更多的基于手势的导航。例如,Android的一个主要导航按钮"返回",将会在Android 10中正式消失。 1.9 渐变 近些年,我们一直在说渐变,这个趋势在2020年会愈演愈烈,值得大家关注。那些鲜艳的颜色是最合适拿来作为渐变了,这些配色方案可以用在按钮,图标,插画甚至是文字中。

2.插画

2.1 角色 角色设计包括需要定义出符合整个品牌概念的形象。这其中最重要的事情是,通过插画,设计师需要给角色注入强烈的个性特征。当你在App或网站中遇到虚拟助理就是角色设计的一个很好的例子。 2.2 纹理 插画和纹理是一对非常棒的组合,能够创造出令人难忘的画面。你可以自己制作笔刷,也可以在素材网站上找到非常多的纹理和笔刷预设,很方便的能把你很多的创意想法和图案纹理加入插画中。 2.3 扁平描边插画 在过去几年,扁平插画几乎无处不在,这个趋势将会继续,但是会有一些新的变化:在每一个元素上会画上一条细的描边。大多数设计师习惯使用一条黑色的细线描边,但其实也可以用其他意思呢,颜色要比插画主色深一些。 2.4 轴侧图 轴测图(也叫2.5D)依然会流行,主要应用于UI设计。这一趋势发迹于虚拟货币领域,但在2019年得到了充分的发展,现在已经被广泛的应用到其他领域。 2.5 3D 随着越来越高效的软件和工具的出现,3D渲染也逐渐产生了变化。3D元素已经开始变得越来越受欢迎,因为与2D不同,它提供了更为逼真的效果。 2.6 超大胆的颜色 大胆的配色给插画提供了强大的表现力。这些颜色能营造出活泼的氛围,使人物脱颖而出,在背景上也给人以丰富的想象力。

3. 动态图形

3.1 3D视频 在2020年,很难想象做动态视频不用到3D技术。这种设计形式仿佛像打开了新世界的大门,只怕想不到,没有做不到。我们可以在商业广告,电影,游戏和更多的领域中找到3D设计。 视频: 3.2 视频+动画插图(也叫混合媒体) 拍摄的视频,生动的插图,还有静止的照片,把这些结合在一起会产生意想不到的惊喜。2D或3D插图能够创造出令人难忘的视频,从几条线的动画到3D中的真实人物,甚至是现实生活中并不存在的复杂视觉效果。 微信公众号最多只能放3个视频,给大家上传到了腾讯视频:https://v.qq.com/x/page/r3014d6hokh.html 3.3 2D动画——介绍性视频 2D动画聚焦于创作故事和角色,并以矢量形式居多。当想要为一个活动或产品做介绍性视频时,2D是一个完美的选择。在一个忙碌,没有时间阅读的世界里,介绍性视频是任何网站的必备品。 微信公众号最多只能放3个视频,给大家上传到了腾讯视频:https://v.qq.com/x/page/k3014u1e302.html 微信公众号最多只能放3个视频,给大家上传到了腾讯视频:https://v.qq.com/x/page/k3014oj2zr2.html 3.4 动态Logo 前面说了那么多,你应该明白动画在2020年是必须要有了,为了保持竞争力,我们也需要把它们整合到Logo设计中。许多公司已经开始运用动态Logo演绎来吸引用户的关注。这是Logo设计的一个主要趋势。 3.5 2D与3D的混合动画 这种趋势并不新鲜,但绝对值得一提。通过一整套软件流程,将2D与3D的动画结合到了一起。(彩云注:比如可以用c4d+ae组合的软件制作流程)

4. 平面设计

4.1 在平面设计中运用3D元素 虽然在平面设计领域主要是用2D元素来呈现的,但3D的元素的加入可以为画面增加了更多的视觉体验。3D元素可以是插画,动画或者字体等形式。 4.2 双色 少即是多这几个字非常完美的诠释了这一趋势,这其中设计师运用大胆的元素,优雅而又对比强烈。这种趋势非常适合印刷,如果颜色过多,印刷费用和技术要求也更高。 4.3 欧普艺术 欧普艺术是抽象的,很多著名的作品只有黑白两色。通常,它们给观众的印象是动感,神秘,闪烁或抖动,膨胀或扭曲的。(来自维基百科) 这种趋势是以静态的画面但能给人的动感的视觉印象。如果想在印刷海报中实现这种“动态图形“,这是最合适的方法。 4.4 平面设计中应用插画 插画在所有设计领域都非常重要,所以平面设计中也能表现良好。2D插画在最近几年极为流行,在2020年以后,将继续受设计师喜爱。 4.5 动态海报 动画无处不在,我们在设计的各个领域都能找到它们,在一些线上海报中也有使用到。动画混合了2D和3D元素,效果非常棒。 4.6 复古科技风(赛博朋克) 赛博朋克是80年代出现的一种趋势,但在好莱坞发行那个时代的电影又重新出现。随着《怪奇物语》系列的成功,这股浪潮又开始流行起来。 4.7 瑞士平面风格,达达主义,包豪斯 20世纪平面设计中最重要的运动往往是最优秀设计师的灵感来源。这些风格是值得一提的,因为它们是经典的,历久弥新,遵循它们的规则几乎不可能在设计中犯错。总的来说,这些风格强调版式,无衬线字体(Helvetica就是在1957年包豪斯时期设计的),几何图形,简单的线条,体积感和颜色等元素的运用。 4.8 大面积连续的色彩空间 大面积连续的色彩空间将会在明年大为流行,它们大胆的排版及搭配,可以在平面设计,产品设计以及UI中找到。 4.9 极简主义 极简主义强调设计只使用必要元素,用简单有限的颜色和形状来设计出一个难忘的画面。放弃任何多余的元素,所有的设计内容都聚焦于每一个目的。为了打造出一个极简主义的设计,需要使用尽可能多的留白,一个简单的配色方案和一些最基本的几何形状。

5. 技术趋势

科技正在用智能设备和全新的理念给我们的生活带来革命性变化。这些新技术使得设计师们已经开发出了符合当前趋势的新功能。人工智能,机器学习,虚拟现实和增强现实正在影响着设计师们的思维方式和创作方式。 5.1 增强现实的移动应用 随着苹果和谷歌推出各种的AR开发平台,ARKit和ARCore,很明显,整个世界都将转向增强现实技术。 许多大的品牌已经开始在他们的应用中采用这些技术,而那些还没有这样做的,必须认真考虑如何让用户体验这种新的交互方式。 有一些AR交互形式可以创建非常直观的应用。第一种是直接把应用界面放在手机内,另一种是把AR UI与周围的环境相互关联。最常用的交互之一是当UI与对象关联并通过扫描特定的内容来触发,这个操作的结果是把界面中的某一个元素链接到现实世界中的一个特殊标记上。 有关更具体的人工智能规则,可以去阅读下苹果公司编著的规范,这个规范旨在提供身临其境的体验,能将虚拟物体与真实世界无缝的融合在一起。 5.2 AI,机器语言,聊天机器人,虚拟助手 聊天机器人是一种软件,它通过听觉和文本的方式进行交互。这些程序经常设计成模拟人类进行对话,尽管在2019年,它们还远远不能通过”图灵测试“。(资料来源:维基百科) 人们还不习惯跟人工智能聊天,所以设计师(和开发)的一大部分工作就是简化过程并建立信任。他们需要帮助人们理解这个系统可以做什么,以及如何使用。 在AIML(人工智能标记语言)中设计和编写机器人脚本是一个优秀的UX设计师的魔力之处。 大多数使用聊天机器人的公司都选择用一个助手来演示如何面对人工智能。以下是一些在用户界面中使用聊天机器人的品牌:Spotify, Starbucks, MasterCard, Sephora, Lyft, Pizza Hut. 5.3 VR 大多数人将VR与游戏产业联系在一起,这是有原因的,但当所有主要的科技公司都在开发VR工具包和应用的时候,我们可以肯定地说,我们在不久的将来可以发现使用和享受这项技术的新方法。VR已经在教育,医疗,旅游,房地产或建筑领域得到应用。 5.4 语音用户界面 语音用户界面(VUI)使人与计算机的语音交互成为可能,它使用语音识别来理解说话,然后用文本转化为语音的流程来播放回答。语音命令设备(VCD)是由语音用户界面控制的设备。(资料来自维基百科) 在过去的一年中,40%使用互联网设备的人每月至少使用一次语音助手,这一数字比去年增加了10%。

6. 产品设计

6.1 包装上的图案 在一个过度饱和的包装市场中,很难创造出引人注目的新产品,所以设计师回到原点,期望创造出能让产品在拥挤的零售货架上脱颖而出的包装图案。几何图形,花卉,浪漫或单色图案是任何产品包装的大胆选择。 6.2 包装上的插画 插画一直是包装设计中的一个强大元素。通过这些插画能让用户更好的理解产品背后的故事,插画已经存在了几十年,很有可能它们永远都是一股潮流。 6.3 留白 如今,极简主义已经是设计中的一个基本原则。它以留白替代了任何无用元素。这种趋势带来了干净的设计,也让字体得以突出。 6.4 单色和双色 只是用1到2种颜色似乎是限制了设计的发挥,但却可以创造一个强大的视觉识别系统。只使用一种或两种颜色,可以让产品保持一个极简主义的外观,放弃一切多余的元素。其结果就是得到一种精致,优雅,赏心悦目的产品。 6.5 大胆的颜色 大胆的颜色和渐变在2020年依然是一股强大的趋势,使用好颜色你可以创造出难忘的产品。 6.6 注重细节 关注细节的包装比以往更受欢迎。设计师之所以选择这种趋势是因为它赋予了产品品质感。这种趋势让我们以现代视角重新思考经典。 6.7 包装里讲故事 到2020年,各个品牌将不得不重新思考产品和包装。品牌必须讲故事,帮助顾客体验到产品的精髓。这可以通过在包装上的视觉设计来实现。

7. 字体

7.1 粗体 粗体字设计是一个极为重要的设计趋势,将能代替图片成为主要的元素。新颖的字体设计能在网页设计和平面设计中发挥作用。

7.2 小写字母

越来越多的应用使用完全小写的字母,非常容易阅读,这与现代设计中的极简主义完美的契合。明年,我们一定要密切的关注这一趋势。 7.3 自定义字体 虽然这种自定义的版式已经不算新鲜,但我们会看到这种趋势越来越多的出现在设计中,尤其是在Logo和海报中。这种做法在大品牌中更为场景,因为生产一种专用字体可能相当贵,但设计师其实可以对现有字体进行小的调整,结果就可以做到非常独特。 7.4 动态字体 就像我们前面说的,动画在设计中真的是无处不在,所以我们也会在字体中发现它的身影。动态字体在屏幕上会用一些小的形变和移动进行设计。这个简单的技术设计字体,给观众留下记忆点。 7.5 堆叠字体 堆叠文字可以说是现代的解决方案,重在引起用户关注。我们可以在网页设计,应用及平面设计中看到这一趋势。

8. 工具趋势

8.1 Adobe Spark Adobe Spark 是由Adobe开发的用于移动和网页媒体创建应用的集成套件。它包含三个独立设计的应用 [Spark Page], [Spark Post], 和[Spark Video].(资料来源:维基百科) 这几个免费的应用可以让用户在任何设备上创建、编辑和分享他的作品。 这三个设计应用允许用户创建和设计可用于企业,教育,社交媒体等领域的视觉内容。Spark图库可以突出显示使用者所做的不同项目。使用这些应用的时候,用户可以导入和搜索图片。 8.2 Procreate Procreate是Savage Interactive为iOS开发并发布的绘画app。针对iPad而设计,适合初学者到专业人士使用。 它提供了超过130个逼真笔刷,多图层功能,有混合模式,遮罩,4k分辨率导出,自动保存以及其他许多经典应用都有的工具。它的缺点在于编辑,渲染文本和矢量图形的能力有限。(来源:维基百科) 8.3 Adobe XD Adobe XD是一款为网页和app而设计的矢量工具,由Adobe开发并发布。它有Windows和mac版本,在iOS和Android上都有可以预览的工具。XD可以支持网页原型和制作简单的交互行为。(来源:维基百科) 原文:https://www.behance.net/gallery/86124977/2020-Design-Trends 作者:Mihai Baldean,Loredana Papp-Dinea,Milo Themes 译者:彩云Sky (微信号id:caiyunyisheji)


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/2020-design-trends.html/feed 0
系统图标背后的Material基础规范 http://www.shejidaren.com/material-design-specification.html http://www.shejidaren.com/material-design-specification.html#respond Tue, 29 Oct 2019 04:56:32 +0000 http://www.shejidaren.com/?p=32479 系统图标背后的Material基础规范

前面通过Gmail的案例让大家初步了解产品图标的绘制,这篇文章则阐述Android的系统图标基础规范,让大家掌握Android下的图标风格、尺寸和网格布局。通过本文的学习,大家可以绘制简单的系统图标。 系统图标背后的Material基础规范 上一篇文章讲到了谷歌的Material Design产品图标规范。谷歌的Material Design图标规范分为:产品图标和系统图标。今天来讲一下系统图标,系统图标比较复杂,分为上下两章来讲,第一章主要讲系统图标的基础认知,第二章讲系统图标的绘制方法与解析。 谷歌规范相对过于范式化,他们只告诉大家界面的大体规范,而具体里面的为什么要这么做完全没有讲,思维和思考一点没提。很多细节都是自己根据自身经验去做的补充,很多细节也都有相应的描述,希望能帮助到大家提升些设计认知吧。

目录

1. 什么是系统图标 1.1 基础图标 1.2 棱角图标 1.3 线性图标 1.4 曲率图标 1.5 深浅图标 1.6 绝对棱角图标 2. 尺寸与网格 2.1 视图放大10倍 2.2 矢量工具绘制 2.3 避免小数位 3.图标区域 3.1 图标尺寸 3.2 尺寸24px 3.3 尺寸20px 4.关键线 4.1 24px关键线 4.2 20px关键线 5.绘制系统图标

1.什么是系统图标

谷歌的Material Design把下图中所示的这些图标习惯称作系统图标,系统图标会根据不同的系统/应用的需求来绘制相应的图标。系统图标中包含基础图标,上箭头、单选图标、复选图标、设置和位置等,都属于基础图标。在谷歌规范中系统图标有5种不同的主题样式,分别是有棱角图标、线性图标、曲率图标、深浅图标和绝对棱角图标。我们来一个一个来解析并理解它们之间的差异。 系统图标背后的Material基础规范

1.1 基础图标

基础图标属于整个系统图标里的一个小分支,主要由“基础的图标”组成的。如上下左右箭头、时间、位置、搜索、设置等都属于基础图标,基础图标应用最广也最为常用。在建立图标体系时应先考虑建立基础图标,这样利用帕累托定律就能减少80%的研发成本并带来20%的实际价值。 系统图标背后的Material基础规范 不是所有基础图标都是一种样式,不同的公司和业务对基础图标的定义均不同。

1.2 棱角图标

有棱角的图标并不是所有轮廓和细节全部都是直角的没有曲率的,是大体轮廓是有曲率的,而里面具体的细节是直角的。轮廓指的是图标中最大图形的边角;具体细节指的是图标中的最小单位、端点和末端。棱角图标的特点是外轮廓有曲率,而里面的细节是直角,如下图所示。 系统图标背后的Material基础规范 棱角图标的视觉表现有轮廓圆润细节棱角,个人感觉有包容性和亲和力的同时又能体现专注和专业性,非常适合中国人的思维表达(外有圆滑内有己见)。这类图标应用较广也最为常用。

1.3 线性图标

线性图标就比较好理解了,即图形不做全部填充的图标。图标不全部填充外轮廓就会形成条线,进而形成线性图标。线性图标也不一定就是完全闭合的,断开部分轮廓线也是可以的。线性图标的特点是视觉表现更轻盈、更精致、更清爽、更有活力等。但它的缺点也很明显,线条过于纤细会给人一种信赖感不强的感觉。如下图所示,线性图标(左图)与棱角图标(右图)的对比图。 系统图标背后的Material基础规范 线性图标从细节上应该分为两种,一种是图标中的最小单位、端点和末端有曲率,一种则没有曲率(直角)。细节上的差异会给用户带来视觉感官上的不同,并影响着整个产品的性格与风格。 系统图标背后的Material基础规范 线性图标的视觉表现给人感觉更精致,更细腻,常用于时尚产品、电商、女性产品/商品和年轻化产品等。在移动端设计中常用于状态切换来突出层级关系。

1.4 曲率图标

曲率图标指的是不管是图标中最大图形的边角,还是图标中的最小单位,只要是矩形就都会有一定的曲率。曲率图标中矩形的曲率并不是绝对的,只是说正常情况下图标所包含的矩形都有一定的曲率。有些图标内部矩形的构成就是需要直角,强行把这些直角转换为有曲率的矩形,就是失去这些矩形所带来的固有印象。如下图所示。 系统图标背后的Material基础规范 曲率图标的视觉表现给人感觉更柔和,更有亲和力,常用于较为年轻化的产品、母婴产品、具有亲和力印象的产品中。如果产品要传达一种“专业性”,用曲率图标就不是很合适了。

1.5 深浅图标(双色图标)

谷歌称这种图标为“Two-Tone”,深浅图标 / 双色图标。怎么叫它都行,只要明白它的含义问题就不大。我个人认为一个系统图标中不可能有相同的明度/饱和度两种同级的颜色,图标中的颜色一定是有层级关系,颜色同级会显得很杂乱,所以我个人习惯称为深浅图标。深浅图标的特点一般由外轮廓的线条和较浅颜色的矩形填充而成的。如下图所示。这类图标的特点是充满个性和趣味性的,十分有趣和多样性。 系统图标背后的Material基础规范 深浅图标 / 双色图标的视觉表现给人感觉很有活力,有个性、有趣味和不单调。

1.6 绝对棱角图标

上面讲到了“棱角图标”的特点是外轮廓有曲率,而绝对棱角的图标是图标中所有矩形均无任何曲率,全部都是方方正正的,这就是绝对棱角图标了。绝对棱角图标的特点是棱角过于尖锐,厚重并稳重,但没有亲和感和亲和力,相反却给人一种十分冷峻和专业的感觉。 系统图标背后的Material基础规范 绝对棱角图标的视觉表现给人感觉太冷峻,太有机械感了,不适合用于表达情感的设计中,也不适合用于营造人文气息的设计中。常用于传统企业、男性产品、专业性产品中。

2.尺寸与网格

系统图标与产品图标的尺寸是不同的,系统图标的设置会更繁琐一些,图标尺寸分别有24px和20px这两种,不会像产品图标那样放大4倍,都是按照1:1来进行绘制的。每一种尺寸中又包含“安全区域”和“裁剪区域”,安全区域中还有相应的4种关键线来约束图标,绘制起来较为复杂。

2.1 视图放大10倍

在我们用绘图工具绘制系统图标时,原尺寸24px/20px显得太小了。当我们创建好一个24px*24px大小的图标画布时,需要把这个画布的视图比例放大10倍至1000%,这样就能看清局部的细节了。而图标网格基数可以设置为2px,绘制线条较细较为精确的图标可以设置为1px。 系统图标背后的Material基础规范

2.2 矢量工具绘图

我们绘制图标时尽量用矢量绘图工具来绘制图标,而不要用位图工具,如矢量工具Sketch、AI、Affinity Designer,用位图工具Photoshop来绘制图标时,只要有曲率就会存在杂边,尤其是图标被放大以后,这种效果更加明显,这样也就无法精确的绘制一个图标系统了。 系统图标背后的Material基础规范

2.3 避免小数位

我们在用矢量工具绘制图标时,要仔细看好图标的尺寸和位置避免产生小数位。正确的数值如图标大小24px*24px,要是绘制成23.9px*23.7px这样的尺寸就是不对的,一定要仔细看好图标的尺寸避免产生小数。在我们把图标实际应用到页面中时,还需要留意(x,y)坐标的位置和数值,同样也要避免小数位,要做到精确无误,0.1个像素也不能放过。如下图所示。 系统图标背后的Material基础规范

3.图标区域

图标区域指的是图标的安全区域与裁剪区域的集合,也就是整个图标画布的区域。谷歌是这么解释的,图标内容应该保持在安全区域内。在安全区域内,图标有足够的显示空间,不会被视图截断。裁剪区域指的是除安全区域外的区域。如下图所示。 系统图标背后的Material基础规范

3.1 图标尺寸

当我们绘制系统图标时,所有形式的图标必须绘制在指定图标的区域中,这样就可以使所有系统图标得到一定的统一和规范。谷歌定义了两种尺寸的系统图标,分别是24px和20px,因为图标尺寸的不同会导致安全距离和裁剪区域的相对变化,所以得把两个图标的尺寸都讲明白。至于为什么要规定这两种尺寸而不是其他尺寸谷歌是没有讲的,可能是数据、可行性、兼容性测试的结果吧。接来下我们根据这两种图标进行详细的解析。 系统图标背后的Material基础规范

3.2 尺寸24px

先来理解一下24px这个尺寸的图标的安全区域。图标内容被限制在20px*20px的安全区域中,四周留有2px的留白。四周2px的留白构成了内边距,围绕着20px*20px的安全区域。 系统图标背后的Material基础规范

3.3 尺寸20px

再来讲一下20px这个尺寸的图标的安全区域。图标内容被限制在16px*16px的安全区域中,四周留有2px的留白。四周2px的留白构成了内边距,围绕着16px*16px的安全区域。图标尺寸20px相对较小,可以应用在紧凑型的页面布局中。 系统图标背后的Material基础规范

4.关键线

当我们把图标的设计尺寸和网格都设置好,就要约束设计尺寸24px/20px里面的图标的形状了,所有形状随便画就缺少了统一性,大小不一形状各异,又不美观又不实用就不规范了。由于系统图标不像产品图标那样有一个固定的尺寸(48放大4倍),就会导致两种尺寸的产品图标中均包含4种关键线形状,还是得一个一个来讲。 系统图标背后的Material基础规范

4.1 24px关键线

大家按照下图给出的参数来绘制出这四种关键线,一定要绘制在一个文档里!线段的宽度用于展示时可以设置为0.1px或0.2px,如下图所示。 标注1(正方):18px*18px,曲率2px;线0.1/0.2px; 标注2(正圆):20px*20px,正圆;线0.1/0.2px; 标注3(垂直矩形):高20px,宽16px;曲率2px;线0.1/0.2px; 标注4(水平矩形):高16px,宽20px;曲率2px;线0.1/0.2px; 系统图标背后的Material基础规范 绘制完成之后,我们将绘制好的四条关键线水平垂直居中对齐,并且按照最外围(24px*24px)的矩形框来绘制对角线,水平线和垂直线。之后就得到了下面的图。 系统图标背后的Material基础规范

4.2 20px关键线

跟上面绘制24px图标的方法一致,只是要重新修改一下数值。线段的宽度用于展示时可以设置为0.1px或0.2px,如下图所示。 标注1(正方):14px*14px,曲率2px;线0.1/0.2px; 标注2(正圆):16px*16px,正圆;线0.1/0.2px; 标注3(垂直矩形):高16px,宽12px;曲率2px;线0.1/0.2px; 标注4(水平矩形):高12px,宽16px;曲率2px;线0.1/0.2px; 系统图标背后的Material基础规范 同上,绘制完成之后,我们将绘制好的四条关键线水平垂直居中对齐,并且按照最外围(20px*20px)的矩形框来绘制对角线,水平线和垂直线。之后就得到了下面的图。 系统图标背后的Material基础规范

5.绘制系统图标

当我们掌握了图标的风格特性、图标的尺寸与网格、图标的区域和关键线等重要规则后,就可以绘制出一些较为简单的图标了。但往深了研究,绘制系统图标不仅于此,还需要去理解并分解图标的构成,包括图标的笔划末端、拐角、内部区域、笔划、内部笔划和边界区域等等,不同的绘制方法均有不同的规则约束,如线的宽度、角的曲率、间隔数值、笔画倾斜角度与视觉修正等等。这章篇幅也过长了,我就把这些内容分为两章来讲。这章主要讲解系统图标的基础认知,下一章讲解系统图标的解析与局部细节的掌控。 系统图标背后的Material基础规范 谢谢阅读 感谢支持 结尾我想与大家分享一下新的感悟。我们生活在三维(长宽深)的物质世界中,能感知到的全部都是“物质”形态,所以才会重视物质,渴望体验物质上的需求来慰藉精神所需。正因为我们处于三维世界中,而感知不到其他维度,也不会存在其他维度的认知,我们才会深陷于物质世界中。 最近我在想一种设想,人是由“意识”和“肉身”构成的,例如我们在睡觉或者冥想,我们的肉身是静止不动的,而意识却在发生变化,所以我觉得肉身与意识本是一体却不分离。那有没有一种可能,我们用一种方法来训练或者提升我们的意识,让我们的意识去感知万物。人的肉身和科技是无法穿越时空来揭开宇宙奥秘的,但意识不同,人是否能使意识脱离本体来打破三维的约束,进入到五维空间(意识体),是不是就可以利用人的意识去控制四维时空(时间),就可以凭意识穿越到任何一个时间点,这样就能解开宇宙的奥秘与人类的起源了呢。 我目前就有这么一个设想,为了找到我想要的答案我就查找了一些宗教知识,发现很多知识与我的设想都不谋而合,也找到了一个关键词“灵修”,灵修的目的就是让人的意识从三维世界中脱离出来,并进入更高维度的空间中,只是称呼不一样。 作者:罗耀_UI ,站酷主页:https://www.zcool.com.cn/u/14425487


(ノ◕‿◕)ノ*:・゚✧ 查看最受欢迎 301 个设计网站 *:・゚✧ヽ(◕‿◕ヽ)

UI设计QQ群 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
]]>
http://www.shejidaren.com/material-design-specification.html/feed 0