首页

终极指南!超全面的UI动效基本规则总结

雪涛

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

动画效果如今已经深入到 UI界面的每个角落。屏与屏之间的切换因为动效而显得更加连贯,交互的上下文逻辑也因为动效的加持而更加清晰。动效对于产品和用户而言,都是一个不可多得的重要组成部分。但是当我浏览相关的文章的时候,发现绝大多数的动效有关的文章,都仅仅只是针对特定的动效设计案例来进行分析和描述,少有文章真正系统地阐述动效应该遵循怎样的规则,符合什么样的特征。这篇文章当中,我不会讲述什么新颖的技巧或者前沿的趋势,但是我会将动效设计的主要原则和标准都汇集到一起,总结出来。

有了这篇文章,你就不用在其他地方学习基本的动效设计规则了。

动效的持续时长和速度

当元素的位置和状态发生改变的时候,动效的速度应该足够慢,维持足够长的时间,让用户能够注意到变化,但是同时,又不能慢到需要用户去等待。

大量的研究表明,动效的最佳持续时长是200毫秒到500毫秒之间。这个研究数字是基于人脑的认知方式和信息消化速度得出来的。任何低于100毫秒的动效对于人的眼睛而言,几乎都是瞬间,很难被识别出来。而超过1秒的动效会让人有迟滞感。

△ 界面中动效持续时长

在手机这样的移动端设备上,按照 Material Design 的建议,动效时长应该控制在200~300毫秒之间,在平板电脑上,这个时长应该延长大概30%,也就是说,时长应该在400~450毫秒之间。原因很简单,屏幕尺寸越大,元素在发生位移的时候,跨越的距离越长,速度一定的情况下,时长自然越长。相应的,在可穿戴设备的小屏幕上,这个时长应该缩短30%,在150~200毫秒之间。

△ 移动端设备的屏幕尺寸影响动画的持续时长

网页动效的处理方式也不一样。由于我们习惯在浏览器中直接打开网页,考虑到浏览器性能和大家的使用习惯,用户对于浏览器中动效变化速率的预期还是比较快的。相比于移动端中的动效速度,网页中的速度会快上一倍,换句话说,就是动效的持续时长应该在150~200毫秒之间。如果持续时间太长,用户会忍不住觉得网页卡住了。

不过,如果你的网页中所用的动效并非功能性的,而是装饰用的,或者用来吸引用户的注意力,那么请忘记这个规则,在这种情况下,动效可以更长。

更大的屏幕=更慢的动效?绝不是如此!

请务必记住,无论是在什么平台上,动效的持续时长绝不是单纯取决于屏幕尺寸和运动距离,还取决于平台特征、元素大小、功能设定等等。较小的元素或者较小的变化,相应的动效应该更快一点。因此,大而复杂的元素动效持续时间更长,看起来也更舒服一点。

大小相同的元素,在移动的时候,移动距离最短的元素,是停止下来的。

与较大的元素相比,较小的元素运动速度应该更慢,因为相同的移动距离,对于小元素而言,位移距离和自身大小比例倍数更大,相对偏移更远。

△ 动效的持续时长还和元素大小、运动距离有关

动效的运动规律要符合物理规律,当元素运动到边界,发生碰撞的时候,碰撞的「能量」最终是要均匀分摊下来的,而弹跳的在多数情况下是不适合的,仅在特殊情况下适合使用。

△ 避免使用弹跳,它会分散用户的注意力

元素的运动过程应该是清晰的,尽量不要在运动中使用模糊的效果(是的,说的就是 AE 的模糊动效爱好者们),模糊的动效不适合在 UI界面中使用。

△ 不要在动效中使用模糊效果

列表项(新闻列表、邮件列表等)所使用的动效,在实际运动的过程中,项和项之间应该有轻微的延迟,元素之间的延迟应该控制在20~25毫秒之间,如果持续时间再长,可能会给人一种迟滞的观感。

△ 列表项之间的延迟应该在20~25毫秒

缓动

缓动指的是物体在物理规则下,渐进加速或减速的现象。在动效中加入缓动的效果能够让运动显得更加自然,这是运动的基本原则之一。对于缓动,迪士尼的两位关键性的动画大师 Ollie Johnston 和 Frank Thomas 在他们的著作《The Illusion of Life: Disney Animation》中有过非常详尽的描述。

为了不让动效看起来机械或者人工痕迹太明显,元素的运动应该有渐进加速和渐进减速的特征,就像物理世界当中其他的物体这样。

匀速直线运动

不受任何物理力量的影响,匀速直线运动看起来是非常不自然的,尤其是对于人眼而言。

所有用来设计动画的应用都会使用坐标轴和曲线来阐述动效的运动特征,我将尝试阐述它们的含义,以及如何使用。坐标轴的 X轴是实现,而 Y轴则表示的唯一,换句话来说,如同我们在初中物理中所学到的,坐标轴上的线条描述的是速度和加速度的特征。下面所示的直线,表示速度是均匀的,也就是匀速直线运动,物体在相同时间内运动的距离是不变的。

△ 匀速直线运动的座标图

均匀的变化通常只会用在色彩的改变或者透明的改变上,一般来说,我们也可以让背景元素均匀运动,而前景元素保持不变,来呈现它的状态,就像上图一样。

缓动加速曲线

通过曲线我们可以看到,物体开始时候的初速度比较低,运动缓慢,随后速度逐渐增加,这意味着物体在加速运动。

△ 加速曲线

当物体加速飞出屏幕的时候,可以使用这种加速曲线,比如界面中被用户使用滑动手势甩出去的卡片。但是请记住,只有当运动对象需要完全离开界面的时候才会这么使用,如果它还需要再回来的话,则不行。

△ 以加速运动将卡片扔出屏幕

动画曲线有助于正确传达讯息,甚至表达情绪和感觉。在下面的案例当中,我们可以看每个元素的运动位移是完全一样的,所消耗的总时长也是一样的,但是运动的速率变化是不同的,这一点也体现在曲线上,所表现出来的情绪也不同。当然,通过调整曲线,你能够让物体的运动轨迹尽可能接近现实世界。

缓动减速曲线

当元素从屏幕外运动到屏幕内的时候,动效应该遵循这类曲线的运动特征。从全速进入屏幕开始,速度降低,直到完全停止。

△ 减速曲线

减速曲线可以适用于多种不同的 UI控件和元素,包括从屏幕外进入屏幕内的的卡片、条目等。

△ 减速曲线案例

缓动标准曲线

在这种曲线之下,物体从静止开始加速,到达速度最高点之后开始减速直到静止。这种类型的元素在 UI界面中最为常见,每当你不知道要在动效中使用哪种运动方式的时候,可以试试标准曲线。

△ 标准曲线

根据 Material Design 的规范,最好使用不那么对称的增速和减速的过程,让动效看起来更加真实。同时大家会更加在意运动的结果,曲线的末端,也就是运动结束的过程最好进行适当的强调,换句话说就是减速过程持续的时长最好超过开始加速的时长,用户将会更加清楚地观察到运动的最终结果,从而更好地明白运动的终止状态。

△ 对称和非对称运动的差异

当元素从屏幕的一个位置移动到另外一个位置的时候,最好使用这种标准的缓动曲线,这个过程中,尽量不要让动画效果引人注意,不要使用戏剧化的效果。

△ 卡片元素从屏幕上运动的时候,不对称的缓动曲线

当元素从屏幕上消失的时候,采用了相同的不对称缓动曲线,用户同样可以通过滑动回到之前的位置。这个环节使用了抽屉式导航控件。

△ 抽屉式导航随着缓动曲线从屏幕上隐藏

从这些案例当中,可以看出许多动效的初学者对于运动规则的了解还不足。比如下面的这个动效,元素随着减速曲线出现,然后使用标准缓动曲线消失。根据 Material Design 的标准,新出现的元素持续的时间应该更长,因为需要吸引更多的注意力。

△ 导航菜单的出现和消失

贝赛尔曲线函数 cubic-bezier()是用来描述曲线的,它的名字前面之所以带有 Cubic 是因为每个贝赛尔曲线的描述都是基于四个不同的参数来确定的。曲线的起点(0,0)和终点(1,1)在坐标轴上的位置是已经事先确定的。

为了简化你对于贝赛尔曲线的理解,我们推荐两个网站,分别是 easings.net 和 cubic-bezier.com ,前者包含了最常见的曲线的列表,你可以将他们复制到你的原型工具中,第二个网站为你提供了不同曲线的参数,你可以直接在其中查看各种对象的移动方式。

△ 不同类型的 cubic-bezier()的曲线和参数

界面动效的编排

就像芭蕾舞的舞蹈编排一样,动画效果也是需要编排的,它的主要目的是让元素从一个状态切换到下一个状态,自然过渡,让用户的注意力自然地被引导过去。

编排有两种不同的方式,一种是均等交互,另一种是从属交互。

均等交互

均等交互意味着所有的元素和对象都遵循一个特定的编排的规则。

在这个实例当中,所有的卡片都遵循着一个方向来引导用户的注意力,自上到下地次第加载。相反,没有按照这样清晰的规则来加载,用户的注意力会被分散,元素的外观排布也会显得比较糟糕。

△ 用户的注意力应该沿着一个流向来引导

至于表格式的布局,它相对就复杂一点。在这里,用户的视线流向应该是清晰的对角线方向,因此,逐个区块次第出现是一个糟糕的设计。这样的逐个显示,一方面耗时太长,另一方面会让用户觉得元素的加载方式是锯齿状的,这种方式并不合理。

△ 沿着对角线加载

从属交互

从属交互指的是使用一个中心对象作为主体,来吸引用户的注意力,而其他的元素从属于它来逐步呈现。这样的动画设计能够创造更强的秩序感,让主要的内容更容易引起用户的注意。

在其他的设计当中,用户很难搞清楚哪个才是主要的,因为注意力被分散了。因此,如果要设置多个动画元素,应该定义清楚谁为主,谁是中心,并且尽量按照从属关系来次第呈现不同的子元素。

如果只有一个中心对象,那么其他的对象的运动方式都要受它制约,否则用户分不清楚主次。

根据 Material Design 的规定,当元素不成比例地变幻尺寸的时候,它应该沿着弧线运动,而不是直线运动,这样有助于让它看起来更加自然。所谓「不成比例」地变化指的是元素的长和宽的变化并不是按照相同比例来缩放或者变化的,换句话来说,变化的速度也不一样。(比如,方形变成矩形)

△ 不成比例地改变对象外观的时候,运动轨迹应该是弧线的

相反,如果元素是按照比例改变大小的时候,应该沿着直线移动,这样不仅操作更加方便,而且更符合均匀变化的特征。看一下真实的案例,你会发现直线的运动轨迹会更加合理。

△ 成比例变化大小的时候,应该沿着直线运动

当元素不成比例放大的时候,运动轨迹是弧线,而这种弧线运动轨迹有两种不同的呈现一种,一种轨迹是初始方向为垂直方向而运动结束时瞬间运动方向是水平的(Horizontal out),另外一种初始方向是水平方向而运动结束时瞬间运动方向是垂直的(Vertical out)。

那么怎么选取这个方向呢?很简单,元素运动曲线的方向,应该是要向界面的主要运动方向的主轴靠拢重合。举个例子,在下面的动效当中,整个界面的滚动方向是上下滚动,主轴是纵向的,因此,当卡片点击之后被展开的时候,会先向右水平移动,并最终以垂直运动结束,运动的最终方向,切线是垂直的,也就和垂直方向的主轴重合了。

△ 元素按照弧线展开的时候,最终方向应该和主轴重合

如果几个不同的元素的运动轨迹相交,那么他们不能彼此穿越。如果每个元素都必须通过某个交点,抵达另外一个位置,那么应该次第减速,依次通过这个点,给彼此留出足够的空间。另外一种选择,是元素不相交,而是像实体一样在靠近的时候,彼此推开。为什么?因为我们通常假定界面中所有的元素都位于同一个平面当中。

在运动过程中,元素不应彼此穿越,而应该互相留出空间。

但是这一点也不是一成不变的。在比较拥挤的界面当中,某个元素可以「越过」其他的元素,它同样没有穿过其他的元素消失,而是单纯的移动。这一点从某种意义上也是延续自我们日常的物理规律,只不过我们会默认界面中的元素在这个情况下拥有了高度这样的属性。

△ 元素可以越过其他的元素运动

结语

我们总结了这么多动效运动的规则和原则,从某种意义上还是延续自我们对于物理世界的认知,摩擦力和加速度在虚拟界面中以另外的方式续存着。模仿现实世界的界面让我们对于界面的秩序有更清晰的认知,允许我们更轻松的了解和访问界面的内容。

如果动效按照正确的方式来设计,它应该是不显著,且不会分散用户注意力的。如果不是这样,那么你需要让动效更微妙一点,实在不行甚至需要将它移除。动效不应该成为影响用户操控界面的障碍,或者转移注意力的存在。

当然,即使是遵循这么多规律,动效的设计依然是一门艺术,而非单纯的科学,多做测试多摸索总是有必要的。

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

10分钟教你如何选择筛选组件

雪涛

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

生活需要筛选,App页面也一样。本文通过案例分析,从筛选组件的样式、使用场景等方面来解析筛选组件在手机端场景的设计。


筛选组件概述

筛选组件的作用是帮助人们在面对大量信息时,通过更的筛选方式提升决策效率。广义的筛选组件还包括搜索栏及Tab栏,本文暂不分析。


组件包括筛选按钮与筛选器,筛选器包含类别及各类别下的筛选项。使用频次高低、筛选条件的数量都是决定筛选组件样式的因素。



01


位于 Tab 栏的筛选组件


组件样式

筛选按钮位置:一般位于Tab栏最右侧视觉薄弱区域。


筛选器形式:点击按钮,筛选器以抽屉形式从Tab栏底部向下展开筛选条件,或以浮层形式从屏幕最右侧向左滑出筛选条件。


样式分析

当界面使用Tab栏时,已为内容做了第一层筛选,多数情况下已满足用户对内容的筛选需求。


当筛选类别较多且复杂时,就需要在Tab栏增加筛选组件来提供更详细的筛选能力。而这里的筛选组件较于Tab栏其他条件优先级较低,屏幕右侧为视觉薄弱区域,这也解释了为什么大多数Tab栏的筛选组件都位于最右侧。



案例一

Image title

案例来源于美团App


此页是对美食品类的选择,这里的筛选组件在Tab中是最常见的样式。对于用户而言,选择商家店铺优先考虑地域、美食类别、价格及综合评价,而用餐人数与餐厅服务等只是辅助选择条件。


筛选器使用了抽屉形式,如要选择此样式,建议在筛选条件不多且不超过一屏的场景使用。



案例二

Image title

案例来源于淘宝App


当用户从首页全局搜索后,出现此页。筛选按钮位于二级Tab栏。点击筛选按钮后,由于筛选条件较多,很难一页展示完,用户往往需要上下滑动屏幕查看全部,因此使用右侧浮层展开的形式较适合。



案例三

Image title

案例来源于哔哩哔哩App


全局搜索后,Tab栏默认展开综合tab内容,用户对排序、时长、分区的筛选需求较高,因此直接把筛选类别放在了二级Tab栏,相比通过点击筛选按钮再展开类别的交互方式更简单直白。


点击筛选类别后,筛选器使用抽屉式。此种筛选组件样式一般用于筛选类别较少(不超过4项),筛选项数量不多的场景。



02


底部按钮型筛选组件


组件样式

筛选按钮位置:以按钮或浮层形式固定在界面底部,便于用户操作。


筛选器形式:点击按钮,筛选器以抽屉形式从按钮底部向上展开筛选条件,或以界面浮层形式从底部向上展开筛选条件。


样式分析

使用底部筛选按钮的界面,内容区类别相对单一,通过筛选组件就能满足筛选需求,并对筛选的需求较大。而底部按钮作为常见的按钮形式,用户点击更方便,因此承载筛选组件较合适。


若使用此样式,点击筛选按钮后,筛选器的出现优先考虑从底部向上出现的抽屉式浮层。



案例一

Image title

案例来源于旅游类App Expedia


输入旅游目的地后进入此列表页,用户目的性明确,就是要查看结果。底部的筛选按钮是为了帮助用户更快的筛选结果,方便用户触达。并且筛选条件较多,无法一页展示完,使用了界面浮层的形式。


这里还有2个细节:


1、由于筛选类别较多,手动清除单个筛选条件太过繁琐,于是筛选器底部增加了清除按钮,操作更简便。但底部按钮一般为“确定”操作,“清除”放在底部样式上没有做误操作提示,可能会增加误操作机率。


2、筛选后,筛选按钮处会显示已选择的筛选类别数量,给用户带来良好的使用反馈。



案例二

Image title

案例来源于dribbble


当前页为地点搜索。需要先进行筛选操作,内容区再出现结果。筛选按钮位于底部浮层,筛选类别代替筛选按钮平铺展现,筛选器使用抽屉式从浮层底部向上展开。


此样式一般适合筛选类别较少,并且每个类别的筛选项不多的场景。优点是减少操作步骤,提高用户操作效率。并且可以学习一些体验细节:在筛选器中选择一个选项后,在其筛选类别处同步修改为该选项;筛选项与筛选类别选中状态一致,增加关联度。



03


浮层按钮型筛选组件


组件样式

筛选按钮位置:以浮层按钮的形式位于界面右下方,占用空间较少。

筛选器形式:点击按钮,筛选器以浮层形式为主,或在筛选按钮下方展开筛选条件。


样式分析

浮层型筛选按钮的优点是增大内容区的纵向空间,比底部按钮型筛选组件的层级要弱一些。但当用户需要操作时,它的位置也便于用户点击。

设计时按钮用色需要区别于内容区,内容形式尽量精简直观。若使用案例3中的扇形筛选器,则要求筛选类别为1-2类,筛选项数量少切文案精简。



案例一

Image title

案例来源于dribbble


筛选按钮位于界面右下方紧贴于右侧屏边,浮于被筛选内容上层,滑动屏幕时消失。点击筛选按钮后,从屏幕右侧展开筛选浮层,原筛选按钮变为确认按钮。


此按钮形式最大限度的让出空间留给内容区,且右下角为用户关注薄弱区,这样的位置关系可让用户按需操作。关于筛选器使用右侧浮层前面的案例也提到过,适用于筛选条件较多的场景。并且使用侧边栏形式的浮层与筛选按钮关联性较高,相对符合用户认知。体验细节上可学习的点还有按钮功能的改变,使得体验更便捷。



案例二

Image title案例来源于dribbble


筛选按钮位于界面右下方但没有贴屏边,筛选器以底部分层形式从底部向上展开。这里的筛选条件不多,因此使用了底部分层形式。



案例三

Image title

案例来源于dribbble


筛选按钮形式与上一案例相似,不同的是筛选按钮处直接显示筛选条件,可得知此内容区目前被筛选维度为“30M”。此样式适用于筛选条件为同一维度的场景。


点击按钮后,从按钮下层展开扇形筛选器,滑动选择筛选条件。此种筛选器样式使用场景较局限,多为选择时长或数量,并且单选居多。因此筛选器不需要“确定按钮”,只需放“关闭按钮”即可。这里的筛选器也可根据不同的场景选择其他的形式。



04


举一反三


接下来我们拿个案例练练手。


下图界面中内容区为概览与各监控数据图表,需要设计一个筛选组件对内容区进行不同时段的筛选。


Image title


在设计之前需要确定几个需求:筛选组件的使用频次、筛选类别的数量、筛选项的数量,单复选关系、筛选条件之间的优先级。


进一步明确需求

筛选类别只有时间段1项,筛选数量不固定,为多项,单选关系。当用户进入此页,根据用户使用需求判断“1小时”基本满足用户查看数据的需求,默认展示“1小时”的筛选。因此筛选组件此场景使用“1小时”时段基本满足用户查看数据的需求,可判断用户使用筛选组件的频次不高。


Image title


方案解析

方案一,Tab栏形式

Tab是对整页的筛选,多为不同维度,而这里只有时段一个维度。

Tab所处位置为视觉热点区域附近,但用户对筛选组件的需求并不高,放在此位置占用了概览区空间。


方案二,底部按钮形式

底部按钮位于用户的习惯操作区,放这里使用层级略高,并且会使内容区的整体高度减少。


方案三,浮层按钮形式

位于右下角的浮层按钮在页面中属于视觉薄弱区域,可以使用户浏览时不受按钮影响;但按钮拥有强对比色,在有筛选需求时满足使用需求。

筛选器以时间选择器形式出现,可满足筛选项数量较多的场景。



05


小结


以上内容是我对常见筛选组件的思考,每一种样式都有其优缺点。但我们设计筛选组件的最终目的是帮助用户筛选信息,决策。这就需要设计师根据筛选需求、用户习惯等设计符合用户使用场景的操作体验。



本文作者:TXD技术体验团队-喻杰(阿里巴巴视觉设计师)

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


CSS学习-选择器

seo达人

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

选择器

学习目的 熟练使用 css 选择器


css1 中的选择器


E #myid         id选择器

E .warning      类选择器

E F             包含选择器

E:link          定义超链接未被访问

E:visited       定义超链接已经被访问

E:actice        匹配被激活的元素

E:hover     鼠标经过的元素

E:focus     获取焦点

E::first-line   元素第一行

E::first-letter 元素第一个字符


css2


*               通配选择文档中所有元素

E[foo]          包含foo属性的元素

E[foo="bar"]    包含属性foo值为bar的元素


CSS3 中的选择器可替代 了解即可

E[foo~="bar"]  含有属性foo值包括bar的元素例如 <a foo="bar bar1 bar2">link</a>

E[foo|="en"]    属性值是一个“-”分割的 比如 en-us


E:first-child   父元素的第一个子元素

E:lang(fr)      匹配属性,元素显示内容为语言为 fr

E::before       在元素前面插入内容

E::after        在元素后面插入内容

E>F             子包含

E+E             相邻兄弟选择器 后面的兄弟


css3


E[foo^="bar"]   属性foo的值开头是bar

E[foo$="bar"]  属性foo的值得结尾是bar

E[foo*="bar"]   属性foo的值包含bar <a foo="abc_bar_as">link</a>


结构类选择器


E:root          属性文档所在的根元素

E:nth-child(n)  E元素第n个位置的子元素 n可以是 (1,2,3) 关键字(odd,even) 公式(2n,2n+3) 起始值为1

E:nth-last-child(n) 与上面的使用方法一样 倒数的第N个位置的子元素

E:nth-of-type(n)    匹配父元素中与E相同的元素中的第n个元素

E:nth-last-of-type(n)   匹配父元素中与E相同的倒数第n个元素

E:last-child    选择位于其父元素的最后一个位置,且匹配E的子元素

E:first-of-type 选择在其父元素中匹配E的第一个同类型的子元素

E:last-of-type  选择在其父元素中匹配E的最后一个同类型的子元素

E:only-child    选择其父元素只包含一个子元素,且该子元素匹配E

E:only-of-type  选择其父元素只包含一个同类型的子元素,且该子元素匹配E

E:empty         选择匹配E的元素,且该元素不包含子节点,文本也是节点


E~F 通用兄弟选择器

E:not(s)    否定伪类选择器


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



在iPhone的UI设计背后,是一场关于注意力的战争 2018/09/06in 设计文章 & 教程评论区

雪涛

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

iPhone 诞生之后,世界发生的变化是翻天覆地的。以电容触摸屏为交互中心的智能手机以难以想象的速度,成为了人类生活中不可分割的部分,人与人之间的连接因此而更加紧密,同时也更加疏远。从某种意义上来说,iPhone 的创造是开创性的,也是不可替代的。而我们也不约而同地发现,以iPhone 为标竿而创造的智能手机和数字化的交互界面,让我们处于一个时刻都会被分心的境地。

令人上瘾的数字内容,让我们一刻都离不开智能手机,从某种意义上,它彻底改变了我们的生活,工作,甚至思考的方式。现如今,越来越多的人开始尝试戒除令人上瘾的智能手机,寻找更加健康自由的人机关系。根据今天的调研,过度使用智能手机,确实会有一定机率带来心理健康的问题。从 iPhone 诞生之初,直到10年后的现在,在数字产品上瘾和用户注意力的控制这件事情上,开发团队本身就没有放松过。这次,Fast Company 专访了前苹果设计师 Imran Chaudhri。

Imran Chaudhri 早在 1995 年就加入了苹果公司,并且很快就出任了公司的人机交互界面组的设计总监,在2006年前后,他也是作为 iPhone 项目核心的6人团的一员,加入到项目当中来。

待在苹果的20多年时间里,他参与了 iPod、iPad、 Apple Watch、Apple TV 以及 iPhone 等几乎全部主要产品的用户界面的设计,直到他开始追求创造属于自己的公司和事业,才正式从苹果离职。也正是因为这样的契机,才使得 Fast Company 有机会能和他面对面地一起聊一聊他的过去,以及他留给苹果的那些遗产。

和许多设计师一样,他们对于产品的想法和企业的定位或多或少有一些错位。和苹果产品相关的很多信息,他现在依然还不能透露,但是他依然提到了很重要的事情:即使是在iPhone的原型设计阶段,他就已经意识到了,这款产品最大的缺陷之一,就是它注定会分散甚至垄断用户的注意力。而与此同时,苹果也有意识的没有给予用户,对于iPhone 完全的控制权。下面,是访谈中能够对外公布的几个重要的内容摘录:

设计「请勿打扰」的功能

「我认为,从某种意义上来说,真正洞悉设计的设计师,大都能够预见到手机对于注意力的影响。在使用手机的时候,我们总会碰到被各种各样的信息和通知打扰到。」

「早些时候,当我刚刚开始制作 iPhone 的原型之时,管束还不是那么多,我们当中有几个人还有幸把原型机带回家,这样就可以每天工作生活都使用它。那个时候我全世界各地的朋友都和我保持着联系,iPhone 几乎隔一会儿就会亮一下,显示有新消息,叮叮咚咚响个不停,于是我意识到,和我们朝夕相处的手机需要一个管控功能。所以,在很早的阶段,我就开始设计请勿打扰这个功能了。」

对于谁来掌控手机设备这个事,苹果的内部产生了分歧

「其实,在苹果公司内部,想要大家都理解分心是一个影响用户生活的问题,还挺难的。乔布斯倒是很能理解的,但是公司内其他的同事,对于用户对于手机的控制权多少,其实大家还存在不少争议。我和一部分同事倡议给用户更多的掌控权,不过这个事情对产品的营销和市场运作是有影响的。所以,当时内部也有声音说,如果真的给用户太多的控制权,那么这款手机就不酷了。」

「其实直到今天,iPhone 当中绝大多数的功能都是可控的,但是其中很多功能隐藏的比较深,彻底的掌控它们是比较困难的,如果你真得想让那些整天都在轰炸你的信息彻底远离,你需要花费很长的时间来摸索,用独特的方式逐个调整或者关闭才行。因此,对于那些熟练使用iPhone 的重度用户而言,确实是可以如臂使指地掌控这台设备,但是对于更换壁纸都不太会的用户,想要搞清楚iPhone ,让它如意随心,真的是难如登天。他们没有这样的控制能力。」

关于 iPhone 是否有可能更智能地预测通知

「你可能会在一个下午安装十几个不同的新应用,然后你不停地会收到提醒和通知,是否要授权使用相机,是否要授权获取你的位置,是否允许它给你发送通知,每个都要做决定。稍后,你可能会发现,Facebook 一直在后台给你推送信息。再之后你就会发现你有睡眠障碍了,总会有信息大半夜地推送到你的眼前,让你无法安生地休息。实际上,借助请勿打扰的功能,你可以一早上再查看它们。这套系统足够智能,能够判断出哪些应用之前就已经获得了许可,哪些仍然在后台获取数据,哪些通知实际上你并不关心。所以,这套系统其实是会选择更加恰当的时机和正确的方式来建立用户和手机之间的对话和关系,手机会询问用户,你真的需要这些通知吗?或者是,你真的需要Facebook 使用你的电话簿的信息吗(因为你已经很久没有登录了)?等等。正确地设计了这套系统之后,提醒用户的方式也非常的多。」

为什么苹果最后还是开始关注分心这个事情?

「iOS 12 中内置的这套防干扰的控制系统可以更加系统地监控手机各方面的功能和用量,它实际上是从iOS 6 时代的请勿打扰的功能拓展而来的。但是它在现在被推出来真正的原因是有太多的用户为此而抱怨,而媒体和用户都发文吐槽,在呼声和压力之下,它们最终在iOS 12 中呈现了出来。这个局面之下,苹果没有选择的余地,必须对于舆论有回应。这对于每个人都是好事,因为用户和他们的孩子都因此能够获得更好的产品。但是这是否是最好的产品?当然算不上,因为现在的iOS系统是为了应对舆论和负面新闻而设计的,设计的意图并不对。如果是苹果主动作出这样的决策,才算得上是好产品。」

「对于苹果这种体量的大公司而言,产品设计其实复杂性非常的高。真的是这样。作为设计师,你需要服务于你的用户,你还得和公司的利益保持一致,同时,还需要对得起自己的底线和道德。服务于一个大型的企业,确实非常的难做抉择。对于用户而言,可以很轻松的直接怼苹果,说它没有做对的事情。但是身为其中的设计师,要平衡各方面的需求也压力,经常会进退维谷。有些用户因为iPhone 的一些功能,受到了负面的影响,有些人受到的影响比另一部分人更多。但是身为设计师,一个受到各方面制衡的设计师,即使是作出了改变,在很多时候也远远不够。至少在我看来,现在的改变还不够大。」

管理数字化的生活,就像管理健康一样重要

「我和数字设备之间的关系非常简单。我不希望被它所控制。从使用 iPhone 的第一天起,我就用着黑色的壁纸。我不会将一大堆的东西塞进手机,减少被分心的可能性。我的手机第一屏上的应用程序非常少。」

「我的意思并不是说这样做很重要,或者说我推荐这么做,对于人和手机之间的关系,每个人都不一样,处理方式也都很个人。对于如何处理自己和手机之间的关系,有人让我提一些建议,我觉得没有必要,因为我的办法并不适合所有人。一天喝多少咖啡,抽几包烟,每个人的情况都不一样,没法一概而论。不过,心理健康是一件大事,你和你的智能设备之间,应该保持着平等的关系。这至少是一个大的设计趋势,是设计师需要关注的焦点。就像可持续性发展已经成为时代的主流诉求一样,你无法忽视认知压力的存在,认知设计也势在必行。」

界面设计的未来,以及不可避免的问题

「我观察到,界面设计在很自然地进化和发展着,从按钮到旋钮,从点击到手势操作,从语音交互到情感化设计,均是如此。无论是考虑到用户的情感诉求,还是进入语音交互的领域,都一定会遭遇一大堆的问题。按钮和旋钮的设计是需要考虑到人体工程学的问题,点击和手势的交互则牵涉到更具体的压感和硬件上问题。任何人和机器之间的交互,都一定都会遭遇不自然的状况和问题,就这么简单。身为设计师,需要足够的预见性,才能真正领先于用户,预测到可能会遭遇的问题。」

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

 

bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式

seo达人

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

前言

  • 最近在研究bootstrap table的表格的单元格编辑功能,实现点击单元格修改内容,其中包括文本(text)方式修改,下拉选择(select)方式修改,日期(date)格式修改等。
  • 本文着重解决x-editable编辑的数据动态添加和显示数据为Empty的问题,还有给表格单元格的内容设置多样式,使得显示多样化。
  • 由于官网给的demo的数据都是html文件里写好的,select类型的不能动态添加(所以网上的大多都是官网的类似例子,本篇博客就是在这种情况下以自己的经验分享给大家,有问题可以留言哦),一旦动态添加就会出现显示数据为Empty,我表格原本是有数据的,但是一用这个插件就把数据变成Empty了,这可不是我想要的,所以笔者就自行解决了这个问题。

对比网上的例子

  • 比如以下这种数据不是Empty的例子,但是是由于在html中写死了数据(awesome),不适合动态添加。
<a href="#" id="username" data-type="text" data-pk="1">awesome</a> <script> $(function(){ $('#username').editable({
        url: '/post',
        title: 'Enter username' });
}); </script>
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 另外一种就是使用bootstrap table动态添加的,但是select类型就会出现数据为Empty的情况。
$('#db_dependences').bootstrapTable({
        method:'POST',
        dataType:'json',
        contentType: "application/x-www-form-urlencoded",
        cache: false,
        striped: true, //是否显示行间隔色 sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*) showColumns:true,
        pagination:true,
        minimumCountColumns:2,
        pageNumber:1, //初始化加载第一页,默认第一页 pageSize: 10, //每页的记录行数(*) pageList: [10, 15, 20, 25], //可供选择的每页的行数(*) uniqueId: "id", //每一行的唯一标识,一般为主键列 showExport: true,                    
        exportDataType: 'all',
        exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'], //导出文件类型 onEditableSave: function (field, row, oldValue, $el) { $.ajax({
                success: function (data, status) { if (status == "success") {
                        alert("编辑成功");
                    }
                },
                error: function () { alert("Error");
                },
                complete: function () { }
            });
        },
        data: [{
            id: 1,
            name: '张三',
            sex: '男',
            time: '2017-08-09' }, {
            id: 2,
            name: '王五',
            sex: '女',
            time: '2017-08-09' }, {
            id: 3,
            name: '李四',
            sex: '男',
            time: '2017-08-09' }, {
            id: 4,
            name: '杨朝来',
            sex: '男',
            time: '2017-08-09' }, {
            id: 5,
            name: '蒋平',
            sex: '男',
            time: '2017-08-09' }, {
            id: 6,
            name: '唐灿华',
            sex: '男',
            time: '2017-08-09' }],
        columns: [{
            field: 'id',
            title: '序号' }, {
            field: 'name',
            title: '姓名',
            editable: {
                type: 'text',  
                validate: function (value) { if ($.trim(value) == '') { return '姓名不能为空!';  
                    }  
                }
            } 
        }, {
            field: 'sex',
            title: '性别',
            editable: {
                type: 'select',
                pk: 1,
                source: [
                    {value: 1, text: '男'},
                    {value: 2, text: '女'},
                ]
            }
        },  {
            field: 'time',
            title: '时间',
            editable: {
                type: 'date',
                format: 'yyyy-mm-dd',    
                viewformat: 'yyyy-mm-dd',    
                datepicker: {
                    weekStart: 1 }
            } 
        }]
    });
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101

结果图如下:

这里写图片描述

由于开源,很快就找到原因,由于formatter我们没有写这个function导致调用的默认的formatter,默认的没有把表格的值传入html中,bootstrap-table-editable.js源码如下,初始定义_dont_edit_formatter为false,我们没有实现noeditFormatter的function就会执行第二个if语句,其中的标签中没有对内容赋值,导致最后显示结果为它默认的Empty:

column.formatter = function(value, row, index) { var result = column._formatter ? column._formatter(value, row, index) : value;

                $.each(column, processDataOptions);

                $.each(editableOptions, function(key, value) {
                    editableDataMarkup.push(' ' + key + '="' + value + '"');
                }); var _dont_edit_formatter = false; if (column.editable.hasOwnProperty('noeditFormatter')) {
                    _dont_edit_formatter = column.editable.noeditFormatter(value, row, index);
                } if (_dont_edit_formatter === false) { return ['<a href="javascript:void(0)"', ' data-name="' + column.field + '"', ' data-pk="' + row[that.options.idField] + '"', ' data-value="' + result + '"',
                        editableDataMarkup.join(''), '>' + '</a>' ].join('');
                } else { return _dont_edit_formatter;
                }

            };
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

由于要实现多样式,则把上面的代码改变,并在使用的时候实现noeditFormatter:function(value){…}就是了。将上面的代码改为如下(此为我自己改的,你可以根据自己的需要做修改):

column.formatter = function(value, row, index) { var result = column._formatter ? column._formatter(value, row, index) : value;

                $.each(column, processDataOptions);

                $.each(editableOptions, function(key, value) {
                    editableDataMarkup.push(' ' + key + '="' + value + '"');
                }); var _dont_edit_formatter = false; if (column.editable.hasOwnProperty('noeditFormatter')) { var process = column.editable.noeditFormatter(value, row, index); if(!process.hasOwnProperty('class')){
                        process.class = '';
                    } if(!process.hasOwnProperty('style')){
                        process.style = '';
                    }
                    _dont_edit_formatter = ['<a href="javascript:void(0)"', ' data-name="'+process.filed+'"', ' data-pk="1"', ' data-value="' + process.value + '"', ' class="'+process.class+'" style="'+process.style+'"', '>' + process.value + '</a>' ].join('');
                } if (_dont_edit_formatter === false) { return ['<a href="javascript:void(0)"', ' data-name="' + column.field + '"', ' data-pk="' + row[that.options.idField] + '"', ' data-value="' + result + '"',
                        editableDataMarkup.join(''), '>' + value + '</a>' ].join('');
                } else { return _dont_edit_formatter;
                }

            };
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40

结果如下:

这里写图片描述

这里写图片描述

然后是bootstrap table的使用js文件,在其中实现noeditFormatter函数。返回的result必须包含filed和value,class和style可以不需要,class可以额外用其它插件之类,比如badge,style是增加样式(背景,颜色,字体等)。

$('#db_dependences').bootstrapTable({
        method:'POST',
        dataType:'json',
        contentType: "application/x-www-form-urlencoded",
        cache: false,
        striped: true, //是否显示行间隔色 sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*) showColumns:true,
        pagination:true,
        minimumCountColumns:2,
        pageNumber:1, //初始化加载第一页,默认第一页 pageSize: 10, //每页的记录行数(*) pageList: [10, 15, 20, 25], //可供选择的每页的行数(*) uniqueId: "id", //每一行的唯一标识,一般为主键列 showExport: true,                    
        exportDataType: 'all',
        exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'], //导出文件类型 onEditableSave: function (field, row, oldValue, $el) { $.ajax({
                success: function (data, status) { if (status == "success") {
                        alert("编辑成功");
                    }
                },
                error: function () { alert("Error");
                },
                complete: function () { }
            });
        }, //      onEditableHidden: function(field, row, $el, reason) { // 当编辑状态被隐藏时触发 //          if(reason === 'save') { //              var $td = $el.closest('tr').children(); //          //    $td.eq(-1).html((row.price*row.number).toFixed(2)); //          //    $el.closest('tr').next().find('.editable').editable('show'); //编辑状态向下一行移动 //          } else if(reason === 'nochange') { //              $el.closest('tr').next().find('.editable').editable('show'); //          } //      }, data: [{
            id: 1,
            name: '张三',
            sex: '男',
            time: '2017-08-09' }, {
            id: 2,
            name: '王五',
            sex: '女',
            time: '2017-08-09' }, {
            id: 3,
            name: '李四',
            sex: '男',
            time: '2017-08-09' }, {
            id: 4,
            name: '杨朝来',
            sex: '男',
            time: '2017-08-09' }, {
            id: 5,
            name: '蒋平',
            sex: '男',
            time: '2017-08-09' }, {
            id: 6,
            name: '唐灿华',
            sex: '男',
            time: '2017-08-09' }, {
            id: 7,
            name: '马达',
            sex: '男',
            time: '2017-08-09' }, {
            id: 8,
            name: '赵小雪',
            sex: '女',
            time: '2017-08-09' }, {
            id: 9,
            name: '薛文泉',
            sex: '男',
            time: '2017-08-09' }, {
            id: 10,
            name: '丁建',
            sex: '男',
            time: '2017-08-09' }, {
            id: 11,
            name: '王丽',
            sex: '女',
            time: '2017-08-09' }],
        columns: [{
            field: 'id',
            title: '序号' }, {
            field: 'name',
            title: '姓名',
            editable: {
                type: 'text',  
                validate: function (value) { if ($.trim(value) == '') { return '姓名不能为空!';  
                    }  
                }
            } 
        }, {
            field: 'sex',
            title: '性别',
            editable: {
                type: 'select',
                pk: 1,
                source: [
                    {value: 1, text: '男'},
                    {value: 2, text: '女'},
                ],
                noeditFormatter: function (value,row,index) { var result={filed:"sex",value:value,class:"badge",style:"background:#333;padding:5px 10px;"}; return result;
                }
            }
        },  {
            field: 'time',
            title: '时间',
            editable: {
                type: 'date',
                format: 'yyyy-mm-dd',    
                viewformat: 'yyyy-mm-dd',    
                datepicker: {
                    weekStart: 1 },
                noeditFormatter: function (value,row,index) { var result={filed:"time",value:value,class:"badge",style:"background:#333;padding:5px 10px;"}; return result;
                }
            } 
        }]
    });
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143

关于bootstrap table的导出及使用可以看我另外一篇博客

下载和引用

下载x-editable,并如下引用。

<link href="js/bootstrap_above/x-editable-develop/dist/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"> <script src="js/bootstrap_above/x-editable-develop/dist/bootstrap-editable/js/bootstrap-editable.js"></script> <script src="js/bootstrap_above/bootstrap-table-develop/dist/extensions/editable/bootstrap-table-editable.js"></script>
    
  • 1
  • 2
  • 3

然后讲上诉的一些文件修改添加,就完成了。

另外项目的结果展示

这里写图片描述

这里写图片描述

其中的样式都是自行在x-editable的基础上添加的。如配置出问题,以下是源码链接。

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


看看苹果App Store 10年来那些应用设计演变引领的潮流

博博

看看苹果App Store 10年来那些应用设计演变引领的潮流

UI巴巴 2018-07-17 21:53:05

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


很少有创新的事物能像手机应用一样在改变我们的生活方式,让我们与周围的世界互动。最开始的那500个开发者很幸运的有机会为未来数百万个应用程序提供设计方向和交互方式,为了庆祝App Store成立10周年,让我们来研究一下10个原创的App Store应用程序的界面设计演变。

一、应用程序

关于应用程序这部分,我们关注的10款应用到今天为止都还能下载的,有些近几天都还在更新。虽然很多应用提供了iPad版,但是这次我们主要研究iphone版的界面设计的变化。

1,iTunes Remote

Apple通过在App Store上发布一些自己的软件,为其他开发人员树立了榜样。Apple最初创建的应用有两个:Texas Hold'em(德州扑克游戏)和Remote,Texas Hold'em在2011年下架了。而Remote今天还在,Remote是一个简单实用的应用,通过Wi-Fi控制Mac或Apple TV的iTunes库的播放。

看看苹果App Store 10年来那些应用设计演变引领的潮流

从一开始,Remote的设计就受到iPhone iPod应用程序(今天称为音乐)的界面和感觉的影响很大。事实上,正在播放的视图在界面上基本相同。2.0版带来了由Louie Mantia设计的新图标。这两个应用程序从iOS 6开始,变得不一样,图标再次更新以匹配Mac上iTunes 11的设计风格。

看看苹果App Store 10年来那些应用设计演变引领的潮流

Remote 的一次全新设计发生在iOS 7,与音乐应用程序的鲜明白色主题不同,Remote采用了深色的模糊背景。并与专辑封面的颜色融合。2016年,Apple发布了针对第4代Apple TV 的Apple TV Remote应用程序,这是改变似乎要取代Remote。但不久之后,Remote被重命名为iTunes Remote,该应用程序一直保持原来的界面继续可供下载,直到今年6月,Remote才更新了全新设计并支持iPhone X。

2,Facebook

看看苹果App Store 10年来那些应用设计演变引领的潮流

与iTunes Remote的更新相比,Facebook在过去时间不断改进设计,而且修改的频率越来越高,算上小修小补,Facebook都可以出书了。我们选了其中比较重大的8个变化。

Facebook在2017年10月就开始在iPhone上使用了,那时候是作为网页版应用。如果不显示顶部的蓝色导航,App Store中Facebook 1.0版几乎无法识别。而且图标是用人物头像,而不是标志性的“f”。底部导航为:主页,个人资料,朋友,聊天和收件箱。2.0版基于相同的设计概念,在主标题栏下添加了二级导航。

看看苹果App Store 10年来那些应用设计演变引领的潮流

Facebook 3.0于2009年7月首次亮相,并推出了3×3网格图标,以帮助解决应用程序的气球导航问题。早期的屏幕截图显示了一个完全蓝色的平铺网格,但这个设计从未在应用程序的公共版本中发布。

2011年10月,Facebook 4.0 采用了汉堡包导航。在第4版之后,Facebook的设计更新变得更频繁了。应用程序的界面开始更快地迭代,并且设计的修改通常是逐步推出而不是推倒重来。

2013年4月,Facebook在iOS应用程序中使用“Chat Heads ”,允许用户一边爪机一边聊天。

Facebook的设计挑战主要来自其亿级别的用户基数。与许多小型应用程序不同,Facebook必须在各平台上为大量的用户提供一致的体验,而不仅仅是苹果的设备上。2017年8月的更新尝试统一 iOS,Android和网络上的新闻Feed 设计,其评论样式看起来更像是Messenger对话设计。

3,Things

看看苹果App Store 10年来那些应用设计演变引领的潮流

Things原来上Mac上的任务管理工具,所以有机会率先在iOS上出现。开发人员Cultured Code称,iOS的应用只用了1个月就开发完成,完成了一项不可能的任务。

Things 1.0 不能与Mac同步,而且不能标记。下图是早期的设计草图。

看看苹果App Store 10年来那些应用设计演变引领的潮流

2012年发布的2.0版本是比较大的一次更新。背景变得更干净了。图标也更小巧精致有个性。

看看苹果App Store 10年来那些应用设计演变引领的潮流

2014年的2.5版本,设计变得扁平化,颜色更浅。2017年5月发布的应用是界面上最大的一个变化。布局差不多,但是图标和ui元素都重新设计。设计师Cultured Code特别强调了如何使用动画为应用程序提供全新的感觉。重新设计的应用获得了2017年Apple设计奖。

4,OmniFocus

看看苹果App Store 10年来那些应用设计演变引领的潮流

App Store从一开始就提供了很多任务管理类的应用,来自Omni公司的Things和OmniFocus是两个重量级应用。虽然两个功能类似,但是两个应用的界面设计发展轨迹却各有千秋。

OmniFocus for iPhone最初使用简单的桌面视图和自定义底部导航,赢得了2008年Apple设计奖。Omni Group在2010年6月为iPhone 4 重新设计了高清图标。而2011年6月开始,界面发生了重大变化,头部多了一个日期选择。2013年针对iOS 7的推出,设计的界面变得扁平化。新的设计依赖颜色来提升空间感。

看看苹果App Store 10年来那些应用设计演变引领的潮流

2015年春季的app 图标更新使用了黑色的“☑️”。从2012年开始,每个图标都包含了彩蛋。图标放大,您会注意到碳纤维纹理实际上是由微小的重复Omni徽标组成。

5,Evernote

看看苹果App Store 10年来那些应用设计演变引领的潮流

Evernote的发展代表了很多软件自2008年以来的设计趋势。Evernote原来是在电脑端出现的,App Store推出之后,Evernote更为识别性高的大象图标。

像许多早期的iPhone应用程序一样,Evernote 1.0严重依赖于UIKit,大量使用高光效果。2011年重新设计了标签栏,按时间顺序排列笔记。Evernote在2012年推出了针对iPhone 5的新界面,但是仍然使用默认的iOS UI元素。

看看苹果App Store 10年来那些应用设计演变引领的潮流

2012年11月,Evernote 5推出了全新的界面设计。采用了卡片式的展示方式。浮雕效果,阴影效果的运用看上去更有深度。

2013年开始,Evernote 全面拥抱扁平化设计。每个纹理,阴影和斜角都消失了。一个明亮的从左到右的渐变条纹的导航栏设计,与新的无纹理图标上使用的颜色相匹配。2017年开始,设计又进一步极简化。白色的头部导航,黑色的底部标签栏。

6,eBay

看看苹果App Store 10年来那些应用设计演变引领的潮流
看看苹果App Store 10年来那些应用设计演变引领的潮流

eBay的设计可以说是这篇文章中10个应用程序中最引人注目的转变。在WWDC 2008上,eBay特别的登台展示。但与今天的app相比,最初的版本是相当的简陋。2009年11月,整个界面的背景换成了灰色。

一年后的2.0版本才是真正的设计,也为未来几年的设计奠定了基础。

2013年的设计像是重新披了一件外衣,而用户体验跟以前保持一致。

每个版本的变化都反映了整个时代快速变化的设计趋势,设计品味。

2015年9月,eBay 4.0 打破了常规。大多数应用程序的功能都放在汉堡包菜单下面,只留下顶部的三个标签:“活动,商店,销售。”然后这个设计很快没有继续了,2016年,ebay又重新恢复了原来的布局方式。如今的布局与2010年相比,又更加类似了。

7,Twitterrific

看看苹果App Store 10年来那些应用设计演变引领的潮流
看看苹果App Store 10年来那些应用设计演变引领的潮流

在App Store宣布之前,Craig Hockenberry和The Iconfactory为iPhone 设计了第一个 Twitter客户端。应用是放在越狱市场的。

App Store上的Twitterrific 1.0从越狱版上借鉴了一些设计元素。它获得了2008年的Apple设计奖。Twitterrific也是最早使用如今越来越流行的深色主题的应用程序之一 。但Twitterrific的设计故事更多地讲述了Twitter作为服务的历史,而不是设计趋势。每次更新都反映了Twitter平台的特性和功能的变化。在早期,这些功能通常由第三方自己开创的。

2012年,Twitterrific 5.0将所有导航移动到顶部,并使用完全自定义的UI元素。类似的布局一直持续到今天。就像应用程序的设计一样迷人,Twitterrific的图标使用了现代化的鸟类图像,而且从一开始到现在,基本上没有什么变化。

8,Instapaper

看看苹果App Store 10年来那些应用设计演变引领的潮流
看看苹果App Store 10年来那些应用设计演变引领的潮流

一个专门为阅读而设计的应用应该优先考虑内容而不是浏览器,因此Instapaper的设计从一开始就是非常自然简单的。但是,由于iOS本身的变化,应用也在外观上又一些变化。导航栏和按钮样式在iOS 6和7中都进行了更改。

9,PCalc

看看苹果App Store 10年来那些应用设计演变引领的潮流

PCalc的故事从App Store推出的前10年就开始了,开发人员James Thomson 于1992年为Mac 发布了应用程序,并一直延续至今。PCalc从一开始在iOS运行就是完全自定义的界面,并且有很多自定义的选项。

用于iPhone的PCalc 的第一个版本是从Mac仪表盘小部件移植而来。有光泽的按钮和深蓝色LCD面板与应用程序的图标相匹配。在2008年12月,一个名为Twilight的热门主题添加了更加详细的图形和类似于默认iOS计算器的配色方案。Twilight后来更新了视网膜并支持更大的显示屏。

看看苹果App Store 10年来那些应用设计演变引领的潮流

2013年,PCalc采用了名为“Samurai”的新默认主题和图标,适配iOS 7的扁平设计。PCalc的图标在2016年3月再次更新。自iOS 10.3发布以来,Apple已允许第三方应用程序动态更改其应用程序图标,而无需向商店提交新版本。PCalc于2017年5月开始充分利用该功能,推出了各种各样的备用图标供您选择。

10,Yelp

看看苹果App Store 10年来那些应用设计演变引领的潮流
看看苹果App Store 10年来那些应用设计演变引领的潮流

与Facebook一样,Yelp的iPhone界面多年来发生了重大变化,但由于使用了一致的导航栏颜色,因此品牌识别度非常高。由于与Apple Maps的深度集成,该应用程序越来越受欢迎。

2009年8月,Yelp将一个基本的增强现实界面隐藏在iPhone应用程序中,用于定位您周围的企业。虽然它当时只是一个新奇事物,但鉴于ARKit应用程序的兴起,这一功能在今天仍然具有先见之明。

2010年1月,Yelp主屏幕推出了 3×3网格快捷菜单。界面在风格上不断完善,直到整个应用程序在2013年10月重新设计,界面更加扁平,更加突出“附近”标签。

Yelp的更新通过显示与您相关的附近的内容,展示更多基于地理位置的内容。

二、图标

看看苹果App Store 10年来那些应用设计演变引领的潮流

比较所有上面列举的10个应用的图标迭代。在过去十年中,一些图标保持相当一致,只进行了细微的改进,其他图标每隔几年就重新设计一次。

在App Store推出时,高光的图标设计占统治地位。随着设计师和开发人员逐渐建立了图标设计规范和多年来的实践经验,细节和更多色彩的运用已经悄悄出现在许多图标中。

三、个性

看看苹果App Store 10年来那些应用设计演变引领的潮流

早期的iPhone应用进入的是一个未知的世界,除了苹果公司自己的小型股票应用外,应用的界面和交互方式没有先入为主的观念,设计师和开发人员可以完全自由地进行实验。

尽管如此,许多早期的应用看起来感觉非常相似,因为用户和开发者都在互相测试。早期的反馈和反复试验很快就会影响每个应用的发展方式。然而几年内,大多数应用都找到了自己的方式,并开发出独特的风格和个性。随着硬件功能的改进,设计差异逐渐从静态图形转变为动画和动态界面。

在iOS 7引入的设计规范将设计人员和开发人员又重新拉回来,许多应用开始通过感官体验选择来区分自己,而不仅仅是界面设计的不一样。所以用户体验的重要性导致近年来用户体验(UX)设计的普及。

四、未来10年

2008年,谁也无法准确预测App Store会发展到如今的繁荣。创新源于创新,iPhone用户的品味和习惯塑造了开发人员不断的创新。

可以说,未来是不可预测的,即将推出的iPhone和iOS版本肯定会以不可预见的方式改变应用的格局。一个新的设计趋势明天将席卷全球。即使在10年后,未来也是令人兴奋的。


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



还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

博博

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

UI巴巴 2018-08-09 20:34:25


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

图表是显示大量信息的一种重要表达方式,良好的图表设计能够传达复杂的统计数据,并让用户易于理解。图表设计可以专门分出一个设计类别:信息图设计。

不过,信息图设计更多针对桌面端,很少考虑移动端,所以,移动端的图表设计挑战性更大。在小的屏幕上展示数据或信息,只能做一些取舍。

Android - 统计数据图表

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

Arco的图表和图表

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

股票应用设计

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

Analytics(分析)

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

移动仪表盘

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

优化 - 统计

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

移动UI中的图表和图形

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

金融应用

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

财经和新闻应用

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

支付帐单

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

线图页面

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

分析应用页面

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

分析应用

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

健康应用

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

自行车比赛

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

威胁仪表盘设计

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

仪表盘设计

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

图表

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

足迹App

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

管理模块

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

紫色的图表和图形

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

运动追踪应用

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

关于铁的图

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

Noblyn App重新设计

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

投资平台

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……

跟踪应用

还在为APP UI信息图表界面设计而犯愁吗?来看这就够了……


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

你知道设计风格里的“等距风格”是啥怎么画不?

博博

你知道设计风格里的“等距风格”是啥怎么画不?

UI巴巴 2018-08-16 20:26:18

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

1.等距是什么?

等距视图是指,绘制物体时每一边的长度都按绘图比例缩放,而物体上所有平行线在绘制时仍保持平行的一种显示方法。

最早是出现在电脑应用程式的图像,以及早期的8位元电子游戏,近几年来的被广泛的使用在因特网、GUI(Graphic User Interface)以及行动游戏等等。

2.等距视图游戏的历史

虽然计算机游戏的历史一直在20世纪70年代初期就看到了一些真正的3D游戏,但是第一个使用上述意义上的等距投影的不同视觉风格的视频游戏是20世纪80年代初的街机游戏。

1)20世纪80年代 

你知道设计风格里的“等距风格”是啥怎么画不?

高速公路遇袭(1985年)

等距视图是一种把2D游戏伪装为3D游戏的显示方法。使用这种方法的游戏有时候会被称作伪3D或2.5D

你知道设计风格里的“等距风格”是啥怎么画不?

蝙蝠侠(1986年)

执行等距视图的方法有很多,但为了简化,最有效最常用的一种——贴图法。从上面两张图可以看出,其上覆盖的菱形网格把地形划分贴图。

2)20世纪90年代 

你知道设计风格里的“等距风格”是啥怎么画不?

最终幻想III(1997)

你知道设计风格里的“等距风格”是啥怎么画不?

文明六世(2016)

在贴图法中,各个视觉元素都被切分为更小的部件,称为“贴图”,都是标准尺寸的。根据预先确定的平面数据——通常是2D数组,这些贴图被组织成游戏世界。

3)目前,2000

你知道设计风格里的“等距风格”是啥怎么画不?

SOCIOBALL(2015)

你知道设计风格里的“等距风格”是啥怎么画不?

纪念碑谷 (2016)

3.等距风格的图标、插画及应用范围

这种插画有一个专门的名字叫“isometric”。

应用范围很广,比如:icon、界面、启动页、插画、游戏、动画视频等等。

你知道设计风格里的“等距风格”是啥怎么画不?

图标

你知道设计风格里的“等距风格”是啥怎么画不?

字体

你知道设计风格里的“等距风格”是啥怎么画不?

插画

你知道设计风格里的“等距风格”是啥怎么画不?

海报

你知道设计风格里的“等距风格”是啥怎么画不?

启动页

4.常用绘制软件

目前常用的软件有PS、AI、C4D。

5.干货来啦~

虽然PS/AI都能画出等距图标,但是现在有一个软件Affinity Designer 比它们画等距图更加轻松。

你知道设计风格里的“等距风格”是啥怎么画不?

首先画等距我们需要画参考线,PS/AI都能画出来,但是方法还是稍稍显得复杂了一点,一些基本功不到位的同学会很头疼这个参考线的画法。Affinity Designer 的网格和轴管理器十分人性化的解决了这个问题。

不但对于新手来说是个不错的选择,而且它完美的融合了Adobe和sketch两个原本不相融的软件。

你知道设计风格里的“等距风格”是啥怎么画不?
你知道设计风格里的“等距风格”是啥怎么画不?
你知道设计风格里的“等距风格”是啥怎么画不?

网格类型选择等轴测,这样网格就会自动生成等距所需要的斜线。

并且它的网格还可以设置吸附功能,也就是画的每个元素都可以自动吸附在网格边缘。

你知道设计风格里的“等距风格”是啥怎么画不?
你知道设计风格里的“等距风格”是啥怎么画不?

另外它还有一个十分便捷的功能,它的图形变形功能也十分强大。鼠标移动到矩形中间节点的会出现上下重叠的箭头(→),如下图:

你知道设计风格里的“等距风格”是啥怎么画不?

这样可以十分轻松的倾斜矩形到任意角度,并且还自动吸附到网格上了。

你知道设计风格里的“等距风格”是啥怎么画不?

拖拽矩形长宽的时候也是根据网格的路径来,不会影响矩形倾斜的角度。

你知道设计风格里的“等距风格”是啥怎么画不?

轻轻松松画一个小icon。

Affinity Designer这个软件目前只适用于苹果操作系统,在App Store商店里有售卖。

案例鉴赏:

你知道设计风格里的“等距风格”是啥怎么画不?
你知道设计风格里的“等距风格”是啥怎么画不?

↑软件:C4D、3D-MAX、MAYA等大部分3D软件

你知道设计风格里的“等距风格”是啥怎么画不?
你知道设计风格里的“等距风格”是啥怎么画不?
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


干货:看看国际大厂是如何创建UI组件设计规范?

博博

干货:看看国际大厂是如何创建UI组件设计规范?

UI巴巴 2018-08-20 20:31:25

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

通过本文,你将学习到 Uber ,Pinterest ,Shopify 和 Airbnb 等知名网站如何利用组件构建统一的UI / UX 设计规范 。

干货:看看国际大厂是如何创建UI组件设计规范?

Airbnb通过react-sketchapp将设计与开发之间的组件协作提升到了一个新的水平

在产品中创建和保持UI和UX的一致性,可以带给用户直观的导航体验,并引导他们成功地与应用的不同部分进行交互,而不会产生混淆。

在产品的各个部分和应用之间保持用户界面的一致性,可以创造更有价值的东西——品牌。将用户体验和用户界面品牌化的关键是让用户在与新产品互动时也能感到“宾至如归”,从而提高他们对新产品的的忠诚度和满意度。

那么,如何才能构建有效的UI组件设计规范呢?以下有几个方面需要引起注意。

1、保持视觉和功能一致性

干货:看看国际大厂是如何创建UI组件设计规范?

功能一致性使你的产品更具可预测性。用户能够预测元素的行为方式,这样即使在第一次访问的页面/屏幕上与之交互,他们也能感觉到安全和舒适。

视觉一致性包括UI的颜色,字体,大小,位置和其他视觉方面,它能帮助用户识别UI元素并归类。例如,某种字体颜色可以策略性地用于帮助用户明白他们按下特定按钮时会得到什么。

鉴于目前的行业情况, UI组件还可以作为用户体验组件 ,将功能和视觉一致性结合起来。

基于组件的设计规范可以使应用程序具有视觉和功能上的一致性,这有助于用户感到宾至如归,并能够轻松地得到指导以完成与产品的所需交互。

2、为什么需要组件设计规范?

组件是用于UI设计和开发的一种很好的办法,使用较少的可重用的组件,更好地实现一致性。

干货:看看国际大厂是如何创建UI组件设计规范?

Uber , Pinterest , Airbnb , Walmart ,Atlasssian等公司都通过基于组件的设计规范实现UI的一致性。

Airbnb的设计工作室在构建他们的设计规范时坚持了这种理念:“ 我们的设计应该是统一的平台,通过定义明确和可重用的组件来提率”。

以下是使用组件设计规范的一些优势:

1. 它的可重用性促进了UI和UX的一致,因为组件可以在任何被使用的地方创建一致的体验。

2. 因为较大的组件由较小的组件组成,因此可以利用原子设计概念实现更好的一致性,从而减少意外的和分离的体验。

3. 组件在设计和开发之间提供更好的协作,允许设计语言随着时间变化而发展。在理想情况下,你在Sketch上看到的是使用React构建的内容。

4. 从设计方面来看,如字体,排版,主色调和副色调仍然可以指定为组件设计规范的一部分。

3、建立一致的设计系统

干货:看看国际大厂是如何创建UI组件设计规范?

目前来看,设计规范确实有很多优势。但是,如何才能真正地创建基于组件的设计规范,使设计人员和开发人员可以利用该规范进行协作?

在创建基于组件的设计规范前,你必须了解它是什么。UI设计规范不仅仅是一个组件库,也不仅仅只是组件的颜色,它包括很多方面。对于构成整个产品体验的基本部分而言,它是一个不断增长且不断演变的真实来源。

因此,在制作第一个组件设计规范之前,你必须设置样式指南和设计语言来控制这些组件。

然后,将这些组件的设计原理转化为代码来实现,一步步从较小的原子再到较大的组成部分。

最理想做法的是将所有组件都应该放在一个设计人员和开发人员都可以访问的位置。通过这种方式,设计人员可以监控随着时间的推移而发展的设计语言,而开发人员也可以选择并使用正确的组件。

4、共享组件库

Shopify使用Polaris设计系统,该设计系统包含一个内部反应组件库,旨在为使用Shopify的商家创建更一致的体验。Airbnb使用共享组件库为其生产率带来了巨大飞跃。

干货:看看国际大厂是如何创建UI组件设计规范?
干货:看看国际大厂是如何创建UI组件设计规范?

Pinterest使用格式塔(Gestalt),一个React UI组件库。它“强化了Pinterest的设计语言。通过执行一系列基本的UI组件来简化设计人员和开发人员之间的沟通......“

通过以上的实例不难看出,共享组件库是实现UI一致性的有效的工具。 在我看来,这种一致性不应该被强制执行,而是自然地实现。

组件库基本上是一种在团队构建应用程序时执行一系列UI组件的方法。但是,开发人员不仅局限于库的视觉语言,还局限于库的持续开发。

干货:看看国际大厂是如何创建UI组件设计规范?

当特定应用程序的特定部分需要某个组件时,它可能需要一些调整和修改。设计师和开发人员应该在灵活性和一致性之间找到适当的平衡点。

共享库经常会打破这种平衡并减慢开发速度,这反过来又会影响开发团队对库本身的采用。在任何需要单个组件的地方强制使用一个庞大的库也是没有意义的(关于这个问题我们不要陷入争论不休的辩论了)。

要想实现设计人员与开发人员之间的协作,还必须为组件维护一个实时文档站点,并以某种方式使其可供设计人员和开发人员编辑(Airbnb的react-sketchapp和Figma等工具可以提供帮助)。

这里有23个常用的React UI库,点击即可使用。如果你实现了自己的库,请记住为开发人员留下足够的设计空间,从而保持两者之间的平衡。

5、Bit -作为构建块的组件

Bit是构建组件库的新趋势。

通过使用Bit,你可以组织来自云上不同项目的组件,而无需重构这些项目或现有库。

每个组件都可以正在进行的任何项目中发现,使用或开发,同时可以轻松地跨代码库进行同步更改。

干货:看看国际大厂是如何创建UI组件设计规范?

每个组件都会显示一个实时UI操作系统 ,自动解析文档,测试结果(Bit运行组件单元测试等),以便所有组件都可以被设计和开发团队发现。

干货:看看国际大厂是如何创建UI组件设计规范?

Bit的工作流可让你在UI一致性和设计规则之间找到一个更快,更动态的工作流。它也是开源的,所以可以随意查看。

6、平衡一致性和灵活性

丘吉尔曾经说过“改善就是改变,完美就是经常改变”。如果我们过于严格地执行一致性,这将会影响创新。

干货:看看国际大厂是如何创建UI组件设计规范?

在我们建立新事物的过程中,我们必须对规则进行适当的调整,预留出一些空间给变量,但不能因为调整让事物陷入混乱。

或许这个说法听起来没有什么特别之处,但正确的理念,方法和工具可以帮助你实现UI一致性和创新之间的平衡。以下是一些保持平衡有效的建议。

从设计的角度来看,并非每种风格都应该重新定义和预先定义。

例如,某个组件(导航栏,项目等)可能与应用程序的其余部分相比具有相对大小或边距。在不同的情况下,这些变量可能会发生变化,因此可以预留一些空间出来。

优步和其他团队使用的另一种有用的方法是将基本/全局/基础组件与“辅助”组件分开 。

例如, Uber使用具有超过22种不同颜色和22种值的主要和次要组件,总共484种独特色调。 创建了70多种独特模式 - 每个有Uber服务的国家都有一种独特模式。

设计人员与开发人员的协作是找到这种平衡的关键。一些团队(如沃尔玛实验室 )致力于提高UI组件本身的可重用性,从而缩小与开发人员端的差距。

干货:看看国际大厂是如何创建UI组件设计规范?

正确的工具和工作流程对UI也有很大的帮助,像Bit和Storybook这样的工具就可以帮助促进这种平衡。

在别无选择的情况下,打破一致性、模式 、视觉和文字是一种很好的方式,可以给用户一种熟悉的感觉并减少混乱。 一致的模式 ,可识别的视觉效果和一致的语气可以使用户感觉安全,直观地与你的产品互动。

总结

l 保持UI和UX的一致性可以引导用户成功与您的产品进行交互。

l 设计系统是UI / UX不断发展的主体。基于组件的设计系统具有视觉和功能一致性。

l Uber,Airbnb,Pinterest,Netflix和其他优秀团队使用基于组件的设计系统来创建和发展他们的视觉语言。

l 要构建组件设计系统,您可以创建库,使用Bit并利用不同的工具和方法来逐步扩展它。

l 通过为变量留出空间,使用有用的工具和鼓励协作文化来平衡一致性和灵活性是很重要的。

l 切记:平衡和协作就是一切。这不是一项单一的工作,而是设计师和开发人员共同进行的持续旅程。

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

比起设计和开发流程的选择,还有几个事情更重要

雪涛



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


在 Sarah 给 Jimmy 讲完了她在设计上的一些原则之后,Jimmy 就准备开始重新设计那个客户等着要的新的仪表盘界面了。与此同时,他所在的公司 Shmuckle 准备设置一个新的产品经理的职位,并且将会在公司内部选择合适的人员来任职。Jimmy 对此非常有兴趣,实际上,在当前的架构下, Jimmy 是一个非常合适的候选人。但是要担任这个职位,他必须证明自己能够胜任这个职位,证明自己知道如何管理项目和团队。

对于他正在做的这个控制面板的设计项目,他也正在挑选合适的产出流程。用敏捷(Agile)开发流程更好,还是应该用瀑布模型(Waterfall Model)?又或者是循环式开发流程?他觉得跟开发部的同事聊一聊会是更好的选择。

当他找到工程部的 Boris 的时候,他正在楼道里刷推特摸鱼。「用什么流程?那还用问,当然是敏捷啦。这个最好,过程清晰简单,现在没有什么办法比敏捷更好处理各种数字产品的设计和开发啦。」接着,Boris 去隔壁会议室拖出一个白板,并且说道:「给我一个小时,我告诉你关于敏捷开发的一切。接着还能捎带计划一下每周的工作内容,这样你就能完全明白要干啥了。哦,差点忘了,还有几个播客和视频可以帮你更加深入地了解敏捷。」

敏捷开发以用户的需求进化为核心,采用迭代、循序渐进的方法进行软件开发。在敏捷开发中,软件项目在构建初期被切分成多个子项目,各个子项目的成果都经过测试,具备可视、可集成和可运行使用的特征。换言之,就是把一个大项目分为多个相互联系,但也可独立运行的小项目,并分别完成,在此过程中软件一直处于可使用状态。

絮絮叨叨的 Boris 终于找到一个倾诉的对象,Jimmy 一时之间感到颇为尴尬,不知道如何回应。好在这个时候,开发部另外一个部门的 Floris 从门口路过,Jimmy 赶紧喊住他「Floris 我到处在找你,你怎么在这儿啊」说着就拉住 Floris 的手,窜进了另外一个办公室,远离了热情的 Boris。

「干啥?你俩在聊啥?」

「Boris在跟我说敏捷开发……」

「啥玩意儿?他跟你讲敏捷开发?快拉倒吧,他们部门里面唯一敏捷的就手头上的 Macbook。我们这边都用瀑布模型来作为产品开发的流程,因为它是线性的,有着更简单的结构,操作起来也简单,很少会发生混乱。」说着,Floris 从办公室的书架上摸出一堆文档压到 Jimmy 手上。「你要的东西都在里面,祝你好运。如果你需要任何帮助,请在公共的平台上跟我约时间,我们可以开个小会解决一下问题~」说着 Floris 回到自己的桌子边,开始继续干活儿。

瀑布模型(Waterfall Model) 是一个项目开发架构,开发过程是通过设计一系列阶段顺序展开的,从系统需求分析开始直到产品发布和维护,每个阶段都会产生循环反馈,因此,如果有信息未被覆盖或者发现了问题,那么最好「返回」上一个阶段并进行适当的修改,项目开发进程从一个阶段「流动」到下一个阶段,这也是瀑布模型名称的由来。包括软件工程开发、企业项目开发、产品生产以及市场销售等构造瀑布模型。

拿着一堆资料,回到自己的工位前,整个人都要陷入到怠惰的情绪里面,瘫坐在电脑椅上纠结了起来。信息太多了,不知道从何做起。在网上一搜也是成堆的内容,根本不知道从何入手。懵逼了。

Jimmy 决定采用最终的备用方案——万事不决问 Sarah。在 Jimmy 的工作经验当中,老领导 Sarah 总能给他靠谱的建议和可行的方案。

出问题的时候,先后退一步

Sarah 办公室的门从来都是敞开的。当 Jimmy 来找她的时候,Sarah 正在阅读一些有意思的东西。她的办公室里面有很多的书和绿植,漂亮的色彩让 Sarah 的整个工作区域仿佛能够唤起人的创造力和想象力,桌上打开的书页散发着油墨的味道,闻起来让人很有安全感,像家里的书房。「Hey,Sarah,我又有问题来麻烦你啦,你有空么?」

「我的门永远敞开着。这次有啥问题,看看我能怎么帮到你。」Sarah 听到声音就知道是谁,一边放下手头的文档,一边抬头笑着看到略显局促的 Jimmy 。说话间,Jimmy 非常熟悉地跑到办公桌另外一边的椅子上瘫坐下来,Sarah 笑着摇头,拿起咖啡壶给 Jimmy 倒上一杯咖啡。

回到自己椅子上的 Sarah 没有看自己的电脑,而是像心理咨询师一样,盯着 JImmy ,进入了等他倾诉的状态。而 Jimmy 此刻也惊讶于 Sarah 如此洒脱迅速地放下手头的工作,并专注地帮助自己,于是也不再放飞地瘫坐着,直起腰身,开始认真地陈述自己的问题:

「实际上,你之前跟我说的设计原则,让我获益匪浅。我按照你告诉我的方法,找到了症结,解决了问题。但是我现在不仅仅是要设计这个仪表盘界面,我需要开发和实现。有人说敏捷开发比较好,有人说瀑布模型很给力,这些开发方式到底有啥差别,优势具体在哪我并没有搞清楚。有人说我需要的是敏捷开发里面 Scrum,还有人说,它实际上是 shmum,也有人称之为 Bshmum,结果还有朋友告诉我说 Google 的 Design Sprint 才能帮我解决问题。我感觉脑子快要炸了。所以……Sarah 你明白么,我需要帮助了。 」

听到 Jimmy 说到后面,Sarah 就明白了他碰到什么问题了。「Jimmy,没事儿,我们总会在某些时候碰到问题,别人的指导总会派上用场。」

「我可以理解,如果在网上搜索这些相关的信息,会有太多杂乱的内容让你感到信息过载。幸运的是,如果你理解这些东西背后的基本原理,就可以相对轻松地梳理清楚所有的内容了。」

「早知道我应该一开始就来找 Sarah 问问。」Jimmy 不由得对自己抱怨了一句。说着,他在摸起咖啡杯旁边的纸和笔,准备做笔记,就像上次那样。Sarah 看穿了他的小心思,笑道:「不用记。」说着,喝了一口咖啡,然后继续道:「先想想看,我们为什么会有敏捷、瀑布模型、冲刺模型,为什么要用循环工作法呢?」

「为了?」Jimmy 下意识挠头。

「是的,但也不完全是这样。总的来说,我们需要一个过程来呈现产品,因为人类的思维是没有办法直接掌控混乱的事物。此外,一个清晰的、可遵循可记录的流程,能够确保你在完成后,确保产品的整个开发过程是可交付的,细节也是可回溯的。这就是为什么,我们需要这些流程。」

「最首要的问题,不是选择哪个流程,而是要了解这些流程为什么而存在,以及我们可能会碰到什么样的问题。无论你选择哪一个。」Sarah 看了一眼窗外,继续说道:「你有问过公司的其他的同事,他们都遵循什么样的流程么?」Sarah 问道。

「问过了,绝大多数都采用的敏捷和瀑布模型。」Jimmy 说到。

承诺是关键

「首先要告诉你的是,两种方法都很棒。但是绝大多数的公司只会在两种方法当中选择一种。因此,当人们采用敏捷或者瀑布的时候,我们更多看到的是他们所做的设计或者开发的小冲刺。以往,我们会看到团队会在3个月或者半年这样的时间尺度当中,一直保持着高强度冲刺的状态的。在旁观者眼中,会看到一个清晰的故事,或者说整个产品逐渐设计或者开发出来的景象。如今流行的做法是将冲刺划分为很多不同的阶段,这也是为什么如今被称为小冲刺。不过本质上,做的事情和内容并没有改变。」

「另外,很多人会使用敏捷的方法来做项目,过程中会不断的迭代修改。他们希望通过这样的方法来获得更好的结果。实际上,很多团队会持续不断地、长期地坚持这么做,几个月甚至一年半载都没有发布任何东西。如果你在这种情况下,会问自己,到底出了什么问题?我会告诉你,原因在于没有清晰的承诺,以及太多的事情让人分心。大家都不会承诺在一段时间内交付一些东西,使用各种借口不按时、按预算来完成项目。」

「如果这个时间只是一两周,一个月,好吧,或者说一年,这个周期并不重要。重要的是,你不需要拥有一个清晰的过程,并且承诺提供一些东西。当然,这是很有挑战性的。这意味着,在这个情况下,你必须作出一些选择,来完成任务。」Sarah 总结道。

阻碍前进的东西

「到底使用哪种敏捷的方法,采取多少个步骤,或者使用经典的瀑布模型,借助谷歌的设计冲刺,都可以,都没有问题。大家总会认为,采用哪种过程是关键,但是现实是,这个过程始终都只是达成目的一个手段而已。」

「真正的问题在于,人的天性是懒惰的,没有按照承诺交付东西。总是忍不住的拖延,膨胀的自我,办公室政治,爱来事儿的甲方,喜欢变卦的客户,它们还都会像拦路虎一样进入产品和设计的流程。无休止的辩论,不断改变的策略,不断膨胀来回拉锯的会议,最后你只能呆滞地坐在办公室当中,想想自己的生活到底出了什么问题。最后,我想说一下多年前,我自己所经历的一个项目。」Sarah 觉得她应该从具体案例上来说说这个事儿了。

「所以,首先你应该清楚,在一个特定的时间段内,交付一些东西出来。你要保证你的团队不会跳票和拖延,也不会让预算超出计划。你将要在约束中工作。约束其实是一种隐藏的优点,也许并不是每个人都明白。你需要完全保持专注,除了你的和参评之外,不会被其他的任何东西分心。就你的情况而言,你需要专注于这个仪表盘界面的设计和实现。」Sarah 说道。

「团队的规模很重要。不过那是后话,后面咱们再仔细聊。」

「假设,你有一个三个人组成的团队,他们共同负责开发并发布你的产品的下一个功能。具体到你的头上,就是为你开发并实现这个重设计的仪表盘。你需要确保公司的其他人不会前来干涉他们的工作,不会来和他们讨论这个项目以外的任何事情。」

「这一点极为重要。他们必须保持专注。减少被打扰的机率——或者说不被打扰是最好的事情,他们能够专注而清晰的思考问题。除了手头的任务之外,他们不会需要去做其他的任何事情,不会被其他的工作内容所分心。对于如何做手头的工作,什么时候做,具体做什么,他们应当有足够的控制权和自主权。最后,请记住这一点:

团队必须足够小。如果太大,沟通问题一定会成为主要的障碍。每增加一个人,想让大家信息和想法保持一致的成本,就会成倍增加。如果你拥有太多的自由,太多的资源以及大量的人员,你不仅会得到过度的设计,超出常规的工作,需要超出计划的预算,以及一个没有重点,不够出彩的产品。」

问题总是会出现的

「如果你像我说的一样,后退一步来看问题,就会意识到,流程背后所存在的问题,并不是流程本身的优劣,也不关乎公司、人员、国家、文化或者其他。这是关于纪律和约束。不仅是团队本身需要纪律,负责人要有纪律感,业务也需要有纪律约束。如同我们所知道的,团队也好,产品也好,公司也好,它都是自上而下的,顶部的纪律、约束和眼界,决定了底部的纪律、调性和产出。」

「现在,你可能会问自己,如果你的项目出现了问题,会怎么办?那么首先,对于你想要达成的目标,需要一个清晰的愿景或者想法。除非你的愿景和目标足够清晰,否则你是没有办法来提供承诺的。在项目开始之前,这个愿景/目标必须有足够清晰的定义,是否能够达成,难度高低,是否具备可执行性,否则在过程中一定会有所偏离。在这里,给你几个小贴士,务必要记住:

不要自欺欺人,你需要提前计划好整个项目,避免出错。很多事情都会出错,所以你需要有目标有愿景,你需要向着目标前进,并且随时做好解决问题、纠偏的准备。一旦你被其他的因素影响,就很容易增加开发时间、增加预算、招募更多的人手。不要相信所谓的规划和蓝图,那什么都不是。问题是一定会出现的,出错了,就专注于最终目标,抓紧手头的项目,别无其他。」

Sarah 说道这里,Jimmy 已经开始有所思考了。「所以,在我告诉你这些事情以后,对于你你手头的这个仪表盘的项目,你打算下一步要怎么做?」

需要始终牢记的事情

Jimmy 的脑中仍然在反思 Sarah 刚刚说过的话,下意识回复道:「要有远见,目标清晰,为即将出现的错误与问题做好准备,组建一个足够独立的小团队,和公司其他的团队和部门隔离开来,这样可以在不被打断的情况下聚焦于当前的任务,最重要的是,要在承诺的日期前交付承诺的产品。但是我不知道团队要有多小,我应该带多少人?」Jimmy 问道。

「如果我说我知道你要带几个,那么我一定是在骗你。不过,通常而言,你这种规模不算太大的产品,我建议控制在3人以内。你是这个项目的主管设计师,也是产品经理,在设计上已经没有大的问题,你还需要两个开发人员,一个负责前端,一个负责后端,这样足矣。」Sarah 回答道。

「那么我应该花费多少人在这个上面呢?」Jimmy 又问道。

「这个是你的项目,时间应该由你来衡量。不过,你需要一开始就清楚你手头有多少资源,你有多少时间来投入这个项目,有多少可供调用的预算,以及管理团队的耐心达到了什么程度。而且,这个事情最关键的并不是时间,而是你的承诺,以及到达约定时间之后要交付的东西。这不仅是对上层的责任,对于你和你的项目而言,也是一个可供奋斗的目标和清晰的边界。你的项目看起来并不算小,这个人员工作量之下,可能需要花费一个月的时间来进行开发。但是请记住,在一个月的时间内,你必须提交出一个可用的产品出来。从我的角度上来看,我是不允许增加预算和时间的。约束对双方其实都是有利的。」Sarah 说道。

「那么我还是想问最开始的那个问题,到底应该使用敏捷还是瀑布模型?」Jimmy 还是忍不住问道。

「我不知道。」Sarah 坦言道:「你的项目应该由你来决定。对我而言,选择哪个流程其实并不算最重要的问题,相反我刚刚说道的,流程之前的种种问题才是最重要的,关于承诺,团队的构建和管理,这些因素产生的影响更为深远。如果你清楚的知道最终要产出的产品,流程就仅仅只是手段了。」Sarah 笑着总结道。说话间,她伸手去拿之前没看完的文档。「谢谢,Sarah,」Jimmy 笑道:「你好像又救了我一次。」说着 Jimmy 走出了Sarah 的办公室。

「我的门一直都敞开着。」Sarah 低声说道,走远了 Jimmy 大概并没有听到这句低语。

结语

在设计和开发数字产品的时候,每个团队的负责人可以选择自己习惯的或者自己青睐的流程和方法。使用什么样的方法无关紧要,在未来10年,我们可能还会碰到更多的新方法,新的策略。而唯一不变的,始终还是最基本的问题,团队,承诺和交付。

我注意到,有人把产品所使用的敏捷和瀑布模型这类流程称为「项目的上帝」。但是实际上,不管哪种流程,依然会陷入无休止的扯皮会议和无意义的辩论,出现了问题之后,开始修改时间表。「我们无法按时完成功能A,因此我们无法开发模块B,开发人员又需要参与下一个项目,因此我们资源是不够用的,所以呢,这个项目不得不停一个月。」这情况很常见,也是典型的反面案例。

我相信,产品团队应该高度专注于当前的产品,和其他产品的需求、各种无关的事务隔离开来。「Hey,Angela,我们的大客户要求这个今天上线,能不能把你的项目放一边,帮我们把这个产品弄上线?」这也是一个反面案例。拒绝。


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

 



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档