Aviary设计师的Material Design改版实战

by admin on 2020年4月22日

设计是一门不断发现问题并解决问题的艺术:发现需求,形成想法,然后打造合适的解决方案,周而复始。现在,这一极富创意和挑战的工作,有了一个新的平台。Google
推出开源设计平台 Material.io,为设计师提供丰富的资源、工具和灵感。

在过去的三年里面,我一直带领着 Aviary
的Android设计师团队。非常荣幸我能为大家设计这款摄影APP,让大家能释放创造力,通过这款APP来拍摄出如此之多优质的照片。随着Google
推出Material Design
这种全新的设计语言,我们的产品设计团队也开始针对Photo Editor
进行重新设计。今天这篇文章,我会仔细分享我们重新设计它的故事,以及设计经验和进度,你可以看到这个全新设计语言是如何重塑这款APP的。

澳门新葡亰信誉平台游戏 ,每个月的设计圈干货大合集都是素材云集,这个月也是一样。新的网站搭建工具,不一样的CMS系统,从未见过的CSS框架,流行的配色工具,各路生产力工具,新鲜出炉的图标,还有永远不会缺席的字体,一次让你看个够。

澳门新葡亰信誉平台游戏 1

通过这次改版,我发现如何通过Material
Design的设计规范来激发灵感,而非束缚设计。更重要的是,我逐渐明白了新的设计平台是怎么回事。从
Photo Editor 最初的美学特征逐渐过度到Material Design
是一个漫长的旅程,但是这也足以让我收获许多经验和教训,也让我逐渐体会到全新的Android系统的美感。

同样的,不论你是设计师还是开发者,合集中的素材是不会让你失望的,总会有几款你能正好用上。

此次开源设计平台 Material.io
提供了全新的工具和灵感,为优秀设计团队提升沟通和生产力。

Android版的诞生

StringBean

Material.io 将 Material Design
的现有资源进行了集中,并为其打造了全新的视觉识别系统。在这个站点上,从工具到组件都实现了更好的交互,同时更加方便了官方发布新的视觉设计指引。

刚刚加入Aviary的时候,我碰到的第一个UI设计项目是将我们的iOS平台的APP的UI转化适配到Android平台上。作为一个iPhone用户,我那时候才刚刚对移动端UI设计有所把握,对于Android也仅仅是大学时候稍有了解,从未对这个平台有过系统的认知。

澳门新葡亰信誉平台游戏 2

未来在平台上将有更多的工具可供使用,现在先来看看已经推出预览版本的几个工具吧。

所以我首先得对手头的Android测试设备有所了解,尝试制定iOS UI转化为Android
UI的相应的规则。当初我曾经遵循iOS的拟物化风格为Aviary设计了iOS客户端,充分运用层次分明的阴影和细腻来展现整个APP。当时
Android
4.0的设计风格被成为Holo,考虑到Android和iOS的差异,在转换过程中,我将繁复的阴影效果降低了,用更轻的笔触重新绘制了纹理,将UI的边角处理得更加锐利,以匹配Holo的整体风格。如此一来,Aviary最初的Android版本就这么诞生了。

StringBean
是一款轻量级CSS框架,仅有4k大,但是其中包含的24点栅格系统比起传统的12点栅格系统更加灵活。

澳门新葡亰信誉平台游戏 3

澳门新葡亰信誉平台游戏 4

Gutenberg

澳门新葡亰信誉平台游戏 5

第一次Android重设计

澳门新葡亰信誉平台游戏 6

Gallery:协作流程的简化

由于当时Aviary 专注于iOS平台,Android
版本的UI设计项目并不在聚光灯之下,所以也由着我肆意修改。如此一来,我也有了充分的自由度,可以以更有创意的方式来打造这个Android版的客户端,并且学习更多移动端设计的知识。由于用户基础薄弱,大家对于Andorid版的期待并不高。可是新版发布之后,随着下载量的疯狂增长,我们很快就意识到Android
版的宝贵之处,这也最终促使公司上层决定在Andorid平台上投注更多的精力。

Gutenberg 是一款入门级别的网站排版工具,灵活而易用。

在 Gallery
中,不同人员的设计工作流程被集中展现,以便团队成员清楚了解工作进度。从视觉设计到交互原型都可以轻松分享并和评论。整个流程简单便捷,同时设计作品得到了精美呈现和安全管理。

当时,和我一同工作的Android平台开发者是这个平台的坚定支持者和倡导者。在他看来,我借助iPhone来设计Andorid
平台的UI,简直是对Andorid的侮辱,后来我意识到他是对的。所以,在2013年的时候我购置了一台HTC
ONE。下载了大量应用之后我才发现,绝大多数的Android应用并没有类似iOS一样的系统的美学特征和完整而统一的设计语言,很容易迷失在复杂而极度灵活的设置和可定制性当中。通过大量的筛选之后,我逐渐开始摸索到Android
的一些设计模式。结合这个过程中的所学,提升了一部分可用性设计和美学特征之后,我逐渐摸索到了设计Android客户端的设计思路。

Frend

澳门新葡亰信誉平台游戏 7

澳门新葡亰信誉平台游戏 8

澳门新葡亰信誉平台游戏 9

澳门新葡亰信誉平台游戏 10

Material Design 简介

Frend 是一一组现代前端组件合集,温和而无依赖性。

Stage:交互运动的动态呈现

快进入2014年6月的时候,Google 经过Android 4.0
长达2年的缓冲之后,终于推出了系统而完善的设计语言,Material Design
。这一规范的推出,使得我们之前的Android
平台客户端的重新设计显得不合时宜。之前的些许调整在新规范之下,并无法显出我们对于Andorid
平台的重视。同时这也给予我们再次重新设计Android 应用的理由。

RichCSS

由 Pixate 团队和 Form 团队共同打造的 Stage
工具将改变团队设计的工作方式,实现操作的实时交互。数字产品的设计的工作流程将变得动态、自主和系统化。

为了重新改造APP,我们先做了大量的研究。在Google
刚刚开始发布文档和设计资源的时候,我们便开始竭尽所能地阅读和学习新规范。幸运的是,比起之前,新的规范系统而完善,我们的获得了比以前更多的指导。Google所提供的文档为每一个设计进行了详细的解释,阐述了目的。这些细致精准的设定为整个平台的一致和统一奠定了基础。

澳门新葡亰信誉平台游戏 11

澳门新葡亰信誉平台游戏 12

我开始钻远整个Material Design
概念设计的核心:墨水和纸张。这些基于印刷实体的设定和灵活自然的动效,赋予了整个设计语言以意义明确的关系和足够的连续性,从而造就大胆而灵活的布局和深远的影响。不过很明显,这样的设定对于列表较多的应用,诸如邮件和新闻,有着明显的优势。

RichCSS 是一款干净、面向对象且可复用的CSS框架。

澳门新葡亰信誉平台游戏 13

澳门新葡亰信誉平台游戏 14

Microsoft Bot Framework

Remixer:用户界面调试的实时互联

谷歌 Material Design 三大准则 (纸的隐喻;图形化,强交互;用动效传达涵义)

澳门新葡亰信誉平台游戏 15

从调色板到动画时间调整,Remixer
实现了在多种设备上对设计产品进行实时调整和完善。在运行过程中可对
iOS、Android 甚至是在多款设备以及网页界面上进行调整,修改参数。

随着对Material
Design的熟悉,我开始构思怎样调整我们的APP才能符合它的三大准则。内容要如何展示?释放按钮的时候,应该怎样呈现动效?拥有如此之多的操作,如果使用一个浮动按钮解决所有操作?在编辑流程里,如何使用过度动效?当视觉焦点是照片的时候,如何为之添加色彩?面对如此之多的未知因素,我选择将整个应用的功能剥离肢解开来。

微软的机器人框架可以帮你构建和连智能机器人,无论你的机器人在哪里都可以让用户与之进行互动。

(稿源:谷歌黑板报)

澳门新葡亰信誉平台游戏 16

Min

(文/开源中国)    

配色方案

澳门新葡亰信誉平台游戏 17

想清楚主要的视觉元素,对于重新设计而言是个不错的开始。我开始规划每一屏的布局,在此过程中并不涉及样式和过度动效。我开始依照Material
Design
的规范选择主色调和相应配色,就像做品牌设计配色一样。蓝灰色被我选为主色调,这是一种反差不明显的偏中性色调,但是又足够有特色。对于小图标和文字,我选择白色和亮蓝色以示强调。再去掉复杂的阴影和渲染之后,整个设计有了不小的提升。

Min
是一款更智能的网络浏览器,他使用DuckDuckGo作为搜索引擎,并且集成了计算器等其他的功能。你可有使在Fuzzy搜索和输入推荐系统的帮助下,搜索并跳转到几乎所有网站。

澳门新葡亰信誉平台游戏 18

Runner

Aviary 的新配色

澳门新葡亰信誉平台游戏 19

小图标

Runner
可以帮你提速Sketch工作流程。它直观的交互界面可以极大的改变你每天的工作流程。

下一步,需要重新思考小图标的设计。之前的小图标设计过于厚重、跳脱,现在看来也相当过时。重新审视Google提供的图标设计栅格系统和现有的Material
Design风格的图标之后,我获得了设计的灵感。栅格确保了Android小图标的一致性,同时也足够呈现出Aviary独有的风格和品牌特征。我使用大量相同的形状构建出对称的结构,简约而大胆,稍加调整之后,基本就构成了现有的图标体系。

Flexbox Patterns

澳门新葡亰信誉平台游戏 20

澳门新葡亰信誉平台游戏 21

图片选取

Flexbox Patterns 是一组基于Flexbox
的用户界面模式的合集,包含了案例和对应的代码。

将整个APP的拆分为基础形态之后,我开始一点一点地重新搭建整个交互流程。不同于其他的应用,我们的Photo
Editor的使用过程是一个简单的线性流程。通常用户在一个标准的图片库当中选取图片,不过这个地方可以进行些许调整。于是我们将此处图库的顶部工具栏替换掉,添加抽屉式导航栏,并添加一个浮动按钮作为图库的入口。

Email Toolbox

澳门新葡亰信誉平台游戏 22

澳门新葡亰信誉平台游戏 23

APP 流程

Email Toolbox
是一组为设计师和营销人员而精心挑选的电子邮件设计、案例、学习、使用的资源合集。

选择图片之后,下一步是选择工具。用户可以从一个拥有20多个工具的水平列表中选取编辑工具,选择之后,用户可以进行相应的操作。比如用户可以选择一键优化的工具,选取之后,有三种模式可供用户选择。很明显,二级菜单需要和一级菜单区分开来。为了区分,我们让二级菜单的背景颜色比一级菜单稍浅一点,并加入了圆角边框,以示区分。同时,我们还添加了一个不断扩大的墨水动效来强化这一概念。

Material Color

澳门新葡亰信誉平台游戏 24

澳门新葡亰信誉平台游戏 25

内容

Material Color 是一款Material Design
的配色工具,并且可以生成代码、哈希值和RGB值。

另外一个案例来自我们的内容工具。这其中包括特效、贴纸、边框和遮盖等工具。这四类工具中,除了预制的一些工具之外,还有许多可供购买。所以此处还需要一个工具商店的入口,供用户浏览选购。此处的设计,我们借鉴了Google
Play的设计,使用了卡片式的交互。我相信这样的交互方式,能让用户感受到熟悉的购买体验。这样一来,在适当加入一些Material
Design的设计元素,就更完美了。

Microsoft Flow

澳门新葡亰信誉平台游戏 26

澳门新葡亰信誉平台游戏 27

色彩与图像

Microsoft Flow
是微软版的IFTT,它可以将你最喜欢的应用和服务连接到一起形成自然的工作流,并提供提醒、数据搜集等多种功能。

工具商店和其中的内容,是展现Material
Design设计的不错的途径,而其中最主要的是控制好色彩和图像。工具包的图片都是经过精心挑选的,结合整个应用的配色,足以呈现其中工具的类型和功用,也足够美观。我们将示例图片中的主色调提取出来,融入整个界面。移除边框,让图片和整个界面更加无缝。

Bookmark

澳门新葡亰信誉平台游戏 28

澳门新葡亰信誉平台游戏 29

动态色彩

Bookmark 是一个网站搭建工具,通过托拽来定制界面,简单易用,也灵活可靠。

调整和测试过我们的配色引擎之后,我们意识到,它还可以在APP中更多的地方得到应用。我们将图片的主色调提取出来,用作系统UI的互补色。我们还把这些色彩用到侧边栏和加载图标上,使得每次编辑不同的图片、操作不同步骤的时候,都有不同的变化,给人一种自然而神奇的感觉。为了将这种神奇的设定推到极致,我们还将这一特性加入到绘图和文字工具中去。

MJML App

澳门新葡亰信誉平台游戏 30

澳门新葡亰信誉平台游戏 31

应用图标

MJML App
可以同MJML的桌面端联动,导入、管理模板、渲染还可以编辑电子邮件。

最后,我们还需要完成应用图标的设计。借助Googlo
提供的栅格系统,我们完成了新的设计。去掉了冗余的层次和花哨的装饰,一个干净而充满活力的新图标就诞生了。其中配色是源于Material
Design的官方配色方案,适当的加入了一点阴影区分层次,使得整个图标不会过于呆板。

Simplified JavaScript Jargon

澳门新葡亰信誉平台游戏 32

澳门新葡亰信誉平台游戏 33

发布

Simplified JavaScript Jargon 是一款来自于社区的流行词汇表。

经过几个月艰苦的工作,我们最终完成了全新的设计,并在2015年
4月9日发布了新的应用。

UTM Builder

通过这次重新设计,我意识到我对于官方设计规范的坚持,最终使得我们的应用足够漂亮,也足够原生。虽然谷歌并没有强制要求这样,但是我们依然完美地做到了这一点。系统而细致的设计规范并不是束缚,深入理解同样会激发设计师的创造力,其中清晰的解释最终造就了完美一致的用户体验,更好地展现产品的个性。

澳门新葡亰信誉平台游戏 34

如果你需要为你的连接增加UTM标签,那么使用 UTM Builder 来创建会更加方便。

Create

澳门新葡亰信誉平台游戏 35

Create
是一个强大的移动端创意和图形设计应用,使用图形、图标、字体、线条和图片来创建设计作品。

Stashes.io

澳门新葡亰信誉平台游戏 36

Stashes.io 可以帮你构建可供分享的资源合集。

Showbox

澳门新葡亰信誉平台游戏 37

Showbox 可以帮你在浏览器中创建工作室级别的高素质视频。

Sympli

澳门新葡亰信誉平台游戏 38

Sympli 是一个同Xcode、Android Studio 、Sketch 和Photoshop
联动的协作平台。

Fontea

澳门新葡亰信誉平台游戏 39

Fontea 可以帮你在Photoshop中直接调用涵盖700多款在字体的Google Fonts。

Maki

澳门新葡亰信誉平台游戏 40

Maki
是一款为地图设计师所设计的图标合集,其中包含了114种不同的图标,类型包括公园、博物馆、宗教场所等等。

FourZeroFour

澳门新葡亰信誉平台游戏 41

FourZeroFour 是一个囊括了许多漂亮的404设计作品的图库。

Smartmockups

澳门新葡亰信誉平台游戏 42

Smartmockups 是一个免费的产品视觉稿合集。

Carrd

澳门新葡亰信誉平台游戏 43

Carrd 可以让你简单便捷地设计单页网站。

Logo Foundry

澳门新葡亰信誉平台游戏 44

LOGO Foundry 是一个用来制作LOGO的手机应用。

Flexbox Grid

澳门新葡亰信誉平台游戏 45

Flexbox Grid 是一款基于Flex显示属性的响应式栅格系统。

Fwrdto.me

澳门新葡亰信誉平台游戏 46

Fwrdto.me 是一款轻量级的书签工具,可以让你将网页一键发送到你的邮箱。

Pitch Card

澳门新葡亰信誉平台游戏 47

Pitch Card
是一款社交类的工具,可以让你将想法浓缩到200个字符以内,并且更轻松地获得反馈。

Sherbit

澳门新葡亰信誉平台游戏 48

Sherbit
可以帮你分析和理解APP和设备所搜集的关于你自己的数据,生成视觉化的分析报告,让你更深层地洞悉自己。

Pagekit

澳门新葡亰信誉平台游戏 49

Pagekit 是一款现代的开源内容管理系统,模块化,灵活,界面简约。

Worona

澳门新葡亰信誉平台游戏 50

Worona 可以方便地将你的Wordpress 网站转化为iOS或者Android平台的应用。

Homizio Nova

澳门新葡亰信誉平台游戏 51

Homizio Nova 是一款免费的无衬线字体。

Sweet Sorrow

澳门新葡亰信誉平台游戏 52

Sweet Sorrow
是一款复古的手写字体,非常适合用来做标识、印刷品等展示类的场合。

Ludicrous

澳门新葡亰信誉平台游戏 53

Ludicrous 是一款免费的手写字体。

Goldin

澳门新葡亰信誉平台游戏 54

Goldin 是一款边角圆润的非衬线体,可作为品牌推广和展示之用。

South Rose

澳门新葡亰信誉平台游戏 55

South Rose 是一款漂亮的展示用字体,灵感来源于巴黎圣母院的南方玫瑰窗。

Wadon

澳门新葡亰信誉平台游戏 56

Wadon 是一款充满复古气息的现代风格字体。

Asteroid

澳门新葡亰信誉平台游戏 57

Asteroid 是一款时髦的几何字体,看起来非常的科幻。

Nighttime & After Midnight

澳门新葡亰信誉平台游戏 58

Nighttime & After Midnight
是一款免费的字体,边角圆润,看起来整齐而适合展示。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图