渐进扁平:漫谈手机App设计趋势,扁平设计美学的终极指南

2016年10月06日 澳洲IT匠人圈


点击上方“公众号” 可以订阅哦!

2015年的创业潮,把手机App推到了风口浪尖,貌似只要做出App就能出任总经理,迎娶白富美,走向人生巅峰。所以这一期想讨论一下手机App,有不少朋友问小编关于手机App该如何设计,手机App如何做的有腔调,那由我来总结一下2016年App设计的趋势,和到底该如何把手机App设计做好
当Michael Horton提出Complexion Reduction将会成为设计美学的风潮时,2016年的各大手机App 正往扁平化渐进话发展。可能更加引起大家注意的是Uber和Instagram对他们的手机App作出了众多调整。如果你对App设计美学足够的敏锐,你可能发现有一种似曾相识的设计理念在各大Mobile app中蔓延。

从Airbnb,Instagram,到Uber 和它的Uber eat,Linkedin,就即使一直在设计诟病的Meetup也开始拥抱这种设计理念。我姑且叫他渐进扁平式设计(Progressive Flat Design Concept),Michael Horton 称为Complexion Reduction Design,Google提出Material Design和Motion Design. 当然Universapp一直在大力推广我们自己的Progressive Paper Design Concept。:) 罗永浩曾经激烈地批评了这种转变,并将此视为是苹果在乔布斯去世之后品味恶化的表征之一。毕竟锤子也成为过去式了。


让我们来浏览下最近几年LinkedIn , Instagram, Uber,Airbnb的设计演变
Instagram

对比以上的截图,我们发现,去掉了过去深色顶栏,新版只保留了黑白两色。Instagram 换logo使得过去的拟物化设计变成扁平化,扁平化过程中又采用了渐进式设计。新的Icon的设计虽然摒弃了最著名的彩虹这相机这一icon,但instragram表达了希望更有温暖,更有能量。在Instagram刚刚诞生的时候,作为一种新生事物,为了让用户尽快接受,它选择了拟物风格的Logo,以便在用户脑中催生一种“比喻”,直白的语意就是Instagram=照相软件。那么当Instagram变得更加成功以后,就像他的前辈们一样开始将拟物转向扁平,也就是逐步剥离用户脑中与既有事物的联系。扁平的实质是一种抽象,抽象出事物的本质,用一种概念化的符号而不是明确的形象来指代。多说了一些产品角度,让我们来看看Linkedin,uber,airbnb的设计改变
Linkedin

Uber

Airbnb

Airbnb新版中标题加粗加大,去掉不必要的图片和颜色,简化图标,图标的border宽度都为1pt。黑白色UI,凸显内容,功能清晰。小编一直最喜欢Airbnb的设计风格,Universal自己为别人设计的app也是延续了Airbnb的风格。请看这一宠物o2o的app


和时尚圈一样,科技圈也是一个追赶潮流的过程,跟多的app设计会拥抱这种设计理念,但话说回来了,拥抱别的人潮流,等拥抱了毕竟也落后了。

那如何去做一套渐进扁平设计App呢

  • 去除杂色。除了黑白外,最多加一种颜色,用来识别app,我们称之为主题色。简化Color Scheme能够提升用户体验,如果太多的颜色会使用户lose focus,首先定义color schme来说,对于初学者来说特别重要。产品层面讲,App是不断地去抽离核心功能,并且突出价值所在

  • One typeface  混用几种字体是App设计的大忌,一个应用中使用了多种字体,看起来非常的散乱和马虎。通常来说一个app中,只用一种字体。我个人喜欢Avenir系列

  • 标题字号 标题字号变大,变粗。 标题是否需要变黑还是要根据Context来调整。

  • Icon Icon的利用可能更加谨慎。我见过许多Junior designer 并不在乎icon的粗细程度,不在乎是否是solid,只用font awesome的字体,说真的,真的不好看~ 由于现在的智能手机屏幕都是达到了视网膜程度,所以icon设计来讲,它的border的粗细完全可以只用1pt或者1px来定义了。
    这就是为什么Icon要做到简洁,纤细。对纤细有兴趣的,可以查看中国古代皇帝最高艺术家,宋徽宗的瘦金体。 如果哪位老板对Icon的设计有疑问的话,可以在我们的公共平台留言哦,我们会免费解答。很好的利用Icon能提升手机app不少层次。
左侧的App中icons不分solid还是outline,整个tab也是顶住边缘,没有空隙,显得很不专业。右侧的Airbnb的icon设计就明显采用的是outline icons ,风格统一

  • 留白 留白一直也是我们提倡的,就像自己的家里的软装不能填满,需要留出空间一样。大的留白区域不会使设计显得压抑。如果不喜欢留白,那就移步去智联招聘的网页:) 使用留白代替线条来区分元素,更少的线条和分割线能够让我们的页面看起来更加的干净,现代化和功能突出
  • Blur Effects 和Shadow 模糊效果在ios7之后大量的出现,在扁平设计中,能够增加UI的层次感。比如雅虎天气
  • 闪亮的APP图标 可以参考Instagram和Uber的logo变化,由于Logo设计本身过于复杂,在此就不做赘述
  • Consistency UI基础概念,下图应该一目了然


我们是谁

Universapp是一家面向全球提供解决方案与服务供应商,致力于通过创新的信息化技术来推动社会的发展与变革,为个人创造新的生活方式,为社会创造价值,由七位顶级精英组成。Universapp拥有自主研发的系统,大数据和机器学习算法。 公司主营业务包括:行业解决方案、产品工程解决方案及相关软件产品、平台及服务等。包括IOS,Android,Web消费级平台级及企业级开发,对SEO也有相当长的经验。团队由行业顶级IT人才组成,只做情怀产品。

 
Universapp
微信:universapp

Bring stunning products to life
长按二维码关注
点击阅读原文,查看更多
收藏 已赞