广州网站建造集团官网 老直营威尼斯网址开户
老品牌威尼斯网址开户 吾们 效劳 网站建造 移动应用 案例 报道 联系
咨询热线:13924135319

期待聆听您的声音

13924135319

不忽悠,不作恶,不欺诈;敬天理,存良知,思利他。
QQ咨询 QQ咨询 QQ咨询
广州总部 深圳 佛山 广西

与吾们一起分享美好

2015-2016年最有影响力的移动界面策划是什么?看看Google就知道了

发布时间:2016-01-08 发布作者:老直营威尼斯网址开户 查阅次数:1503次 标签:移动界面策划

【编者按】文章来自百度MUX翻译小组,应作者要旨,如文章已获雷锋网授权转载,也请保留原标题。

译者注:本文译自UXPin出品的电子书Mobile Design Book of Trends 2015&2016中第二章Layered Mobile Interfaces。第一章卡片策划可参看:《2015-2016年最流行的APP策划是什么?譬喻,Facebook那样的》。

UXPin 这本电子书结合丰富案例讲述了2015-2016年间要紧的移动策划趋势,共有6个章节:灵巧的手势操作、层级化的移动界面、隽永的字体排印、扁平化策划、愉悦的微交互、小卡片。

Google的Material Design是最有影响力的视觉策划愿景之一。它用清晰的策划和可用性准则重新塑造了一种所见即所得的交互方式。

2015-2016年最有影响力的移动界面策划是什么?看看Google就知道了

(Photo credit: Dropbox)

然则Material Design的愿景不单仅局限在Google和安卓APP中。策划师们通过很多方法在使用这个策划愿景。正如姓名所暗示的那样,多个圆素的分层叠加,就像一副牌一样,建立一种奇特而又统一的体味,既实用又美观。

将圆素在界面内分层的想法并不是一个新愿景。然则, Material Design结合了大量具备美感和消息 的体味,使得这一愿景更进一步。

让吾们来聊聊Material Design

在吾们更进一步说明之上,先确保众家对Material Design的吟味都一样。让吾们回忆一下:

Material Design是Google的一种策划愿景,它概括出了APP在移动设备上应该长什么样以及如何work。它打破了一切——如动画、性状style、计划,再是给出了模式、始末、可用性的准则。如Google所说——

吾们进行自我挑战,为吾们的用户制造出了一种视觉语言,它遵循经典的策划准则,再是结合最新的高技术和创新,这就是Material Design。

Material起源于移动设备,再是可以扩展到其它设备。它立足于以下几个准则:

1、真实的视觉提示:该策划是建立在真实的底子之上,通过纸张和墨水的实际展现得到的启发。

2、形象鲜明,意图明确:上卫的策划 技术实现 驱动了视觉成果。排版,网格,控件,尺度,色彩和图像等等这些引导着策划。圆素都按照清晰的层级归属于既定容量。色彩和样式的决定更好形象鲜明。

3、动画呈现意图:Material Design中动画是一个关键要素,但它不单仅是为了动起来。动画需要发生在一个特定的场景中,通过easy的转换来聚焦策划。运动和行为都应当是真实物理世界的实际反应。

理解触觉界面(Tactile Surface)

吾们在聊下分层界面策划的时候,常常会碰到一个概念叫“触觉策划”。把它想象成好几张纸堆叠在一起,它们组成一个包含一切事物的框架。这些纸张和显示物理世界中的纸略有不同的是它们可以改动形状和形式,譬喻延展或倾斜,但在某种程度上又是符合真实的物理反馈的。

2015-2016年最有影响力的移动界面策划是什么?看看Google就知道了

(Photo credit: Google Material Design)

触觉界面是一个始末和信息的容器。容器被策划成扁平的,边缘带有淡淡的影子,这样不同容器和层级之间得以区分。其它区分层级关系的方式,譬喻纹理、渐变和计划都是不需要的。

2015-2016年最有影响力的移动界面策划是什么?看看Google就知道了

(Photo credit: Reddit)

在Reddit这个APP上,您可以看出不同层级之间的分离。覆盖在主始末的灰色浮层之上,有一个明显的最顶部的菜单界面。甚至是顶部大图也包含了分层的圆素和阴影来强调三维的触觉界面。

2015-2016年最有影响力的移动界面策划是什么?看看Google就知道了

(Photo credit: Google Material Design)

通过触觉界面的策划可以清晰的明确始末之间的联系和功能。(每个容器一贯有一项work,譬喻链接或视频播放器。)这种方式也可用来定义深度,圆素在容器中可层叠着展现,制造出一种近乎三维的世界。

Material Design是为自适应策划而生

层级策划本质上是为了自适应策划而生。一切的策划原则就现实来说都在鼓励策划师进行自适应策划(无论您更喜欢称之为自适应或响应式都可以)。

在揣摩层级界面的时候,圆素之间的竞相关联是很要紧的。

2015-2016年最有影响力的移动界面策划是什么?看看Google就知道了

(Photo credit: CBS Sports)

Google提及它的准则是源自于“弹性的网格确保了不同层级的一致性的计划,尺寸的临界描述了始末如何重排在不同尺寸的屏幕,应用界面如何能能够从小尺寸扩展到大尺寸。”

2015-2016年最有影响力的移动界面策划是什么?看看Google就知道了

(Photo credit: Google’s Material Design Guidelines)

care事项包括:

?  临界尺寸:宽度包括480、600、840、960、1280、1440、1600像素

?  网格:12栏计划,包括模块宽度和间距(8、16、24、40像素),以及基线网格 ?

?  界面行为:UI自适应屏幕的规格,可切换或隐藏

?  模式:功能模块是基于界面尺寸的,包括显示、变形、扩展、集合和计划。

策划师可以更匆子 侄玫娜繁K堑慕缑婵梢栽诰∈肪诚率视∈璞浮K枪└艘恢止娣独捶鲆床呋菇ㄌㄊ降缒浴⑵桨宓缒院褪只慕缑婕苹

Material Design 和其它移动端策划趋势

创建层级化界面的时候,其他的策划趋势同样可以发挥感化。Material Design借鉴了大量扁平化和其它技法的策划愿景。就现实来说也存在Material Design是2.0版本的扁平策划的争议,因很多视觉处理方式非常相似。

将层级化策划完全从扁平化策划中区分开来的关键点是层级化策划需要制造更好优质的三维容量以及光度的模拟。本质上来说,策划师回归了一些扁平策划的的策划技巧,所不同的是他们可以利用这些技巧来提高易用性,而不单仅是美化界面。

2015-2016年最有影响力的移动界面策划是什么?看看Google就知道了

(Photo credit: WordPress for Android)

层级化策划的色彩决定也非常接近扁平化策划的审美。较小的相似处是Google供给了大量的可选色彩。调色板中具备明快、鲜明、高饱和度的色彩。虽然很多策划师在扁平化策划中会决定Blue和Red,更好优质的界面被赋予深紫和明黄色。这可能是因为这些色调搭配白色或者黑色的文字时对比强烈、识别度高。

2015-2016年最有影响力的移动界面策划是什么?看看Google就知道了

(Photo credit: Morning Routine)

层级化界面在也可以很好的应用在极简界面中,特别是涉及到排版的时候。有着清晰层次结构的无衬线字体是最好的决定。谷歌倡议使用Roboto作为主要字体(有很多类型,如细体、粗体、斜体和瘦体)。这个样式可以区分字体之间的层级关系,以此在不同圆素间对用户进行引导。极简主义的精辟就是,通过大小和比例的正确应用,哪怕只靠字体,也足够了。

2015-2016年最有影响力的移动界面策划是什么?看看Google就知道了

(Photo credit: Field Trip)

Now您已经很难找到一个没有全屏图像功能的APP了,层级界面进一步强调了图像的生动和指向性。

上面是 Field Trip APP,它使大部分图片都有明确的指向,说明了Material Design不单仅是通过颜色,图片和特效来加强视觉冲击力,它们都是整体策划的必备圆素。

末了,层级界面可以完美地卡片化,这在之上的章节已经说过了。纵观一切的案例,险些都包含了卡片要素。从小卡片到全屏选项,这些都是一起进化的。

接下来呢?

2015年6月,谷歌发布了一些新的策划准则Material Design Lite,尽数网页和APP都可以遵循这个准则,来做的看起来更像安卓APP。吾们应该从中汲取一些东西,即室子 莍OS APP或者非APP。

Material Design很好看而且在很多区域成果很好。策划师想要实际应用,而Lite版本供给了完美的层级指导。Material Design Lite 也是一个对开发者和策划师很好的工具,如果想要开发一个跨安卓iOS平台的APP,so通过应用这一准则,在外观、感觉、功能上都会有着一致的体味,而不用揣摩设备的异议性。

层级化的概念肯定会被保留下来,但是整体看上去会更“非层级化”一些,少一点质感,这样策划性状style就可以介于Material Lite和iOS准则之间了。

2015-2016年最有影响力的移动界面策划是什么?看看Google就知道了

(Photo credit: The Weather Channel)

Weather Channel iOS APP已经应用了这个策略。APP将卡片、颜色和图片都层级化了。此道策划概念重合最多的区域是在卡片的应用和几何图形的布置上。“Less Material”的策划主要是减少应用深度和阴影,这样看起来更扁平更精简。

渐变和单色层是另一种形式的层级界面,可以持续的延伸层级。单色色板是一个经典的策划技巧,可以很匆子 侄玫卮唇ㄉ嗜窭淖榧,以适应险些尽数类型的始末类型。

2015-2016年最有影响力的移动界面策划是什么?看看Google就知道了

(Photo credit: Elevate)

Elevate iOS APP使用了渐变背下结合层级化卡片。这个动效是非常符合Material Design性状style的,但渐变的使用却很特别。这个easy的改动体现了策划师在兼顾到更好优质关键的功能时,开始打破层级界面的视觉规则。

策划师持续使用更深的颜色和色调到层级界面和Material Design 概念中去。Now大部分APP都应用了白色和浅色的Plan,但是更深的颜色已经开始流行了。

2015-2016年最有影响力的移动界面策划是什么?看看Google就知道了

(Photo credit: Weather Timeline)

Weather Timeline就是一个很好地例子。这个easy的色调改动已经足以从同类APP中脱颖而出了。它依然使用了固有的层级,但是应用了更深的色调,看起来更easy幽雅。整个策划的都是不饱和的色调和谐的深色Plan。

细节小结

方另层级界面的趋势才刚刚开始。

easy的视觉性状style和更易用的策划性状style开始逐渐融合,然下随着策划师的成长开始逐渐落地。更有意思的是层级界面看起来更像是最近几年流行的策划性状style的一种延伸,譬喻扁平化和极简化。

在某些点上,趋势有可能会回摆到拟物性状style上,但是在那之上,Material Design的概念灰子 怯辛⒆愕愕摹esign faster wireframes & prototypes with UXPin(free trial)

2015-2016年最有影响力的移动界面策划是什么?看看Google就知道了

[ 干货:资源和工具 ]

1.Google Material Design

2.Free Lollipop UI Kit?

3.“How Material Design Sparked Evolution of Web Design” by Material Design Blog

4.Angular Material Framework

5.Downloadable Material Design Color Palette Swatches ?

6."The Interface Layer: Where Design Commoditizes Tech"  by Scott ?Belsky

7.Material Up: Daily Design Inspiration ?

8. Material Design Icon Template Download ?

9.Materialize Framework ?

10.Material Design Typography Classes ?

11.Angular Material vs. Material Design Lite ?

Via:Mobile Design Book of Trends 2015&2016

本文来自百度MUX翻译小组,雷锋网发布,译文仅作进修用途,如有其它用途请联系原作者。

Keep calm and be awesome


近几年上端 技术实现 盘点以发展方向

“.广东”域名开启广东互联网新时代

吾们的地位

广州 广州市天河区岗顶百脑汇高技术大厦B塔27楼 020-6235 2949

深圳 深圳市南山区汉京万国大厦18A 159 8916 9178

广西 茂名市茂南区油城三路广西创业创新孵化基地B110 159 8916 9178

吾们的效劳

网站及移动应用 牛逼直营网站 APP开发 小程序开发 WeChat运营

系统应用开发 OA/ERP/CRM/HR系统开发 教学管理系统 电商系统 应用型软件系统定制开发

了解吾们

集团官网简介 联系吾们 吾们的案例 讯息报道

使用条款 隐私声明 Cookies

© 2009-2020 老直营威尼斯网址开户 版权一切 广ICP备16051058号

XML 地图 | Sitemap 地图