扁平化的界面设计!

作者: 3ff99717dcad | 来源:发表于2019-01-03 16:18 被阅读10次

 

文/陶薇薇 张小玲 从拟物化设计到扁平化设计,手机UI界面设计两种风格并驾齐驱。其中扁平化设计除去了过多的装饰,这可能给人以“缺乏真实感及生命力”的感觉,所以要想做出好的扁平化设计,需要了解扁平化设计的原则和设计技巧。 

设计千变万化,其实我认为设计是随着人们的审美的疲劳而变化的。拟物化设计给我们带来的是视觉上的“真实感”。故名思义拟物化设计,就是模拟现实物品的造型和质感,通过各种叠加高光、纹理、材质、阴影等效果对实物进行模拟再现。  

扁平化摒弃了拟物化设计惯用的高光、阴影等能造成透视感、立体感的效果,通过抽象、简化、符号化的设计元素来表现。界面上极简抽象、矩形色块、大字体、光滑、现代感十足,让你去意会这是个什么东西。其交互核心在于功能本身的使用,所以去掉了冗余的界面和交互。以下是做好扁平化设计的基本原则:  

拒绝特效 

去掉了繁琐的装饰(纹理、高光、阴影、突起、羽化等),让一切变得简单明了,所有界面的元素的边缘都是干净俐落的。 

使用简单的元素 

常用一些简单的几何图形,矩形、圆形、正角、直角、圆角等。现在手机图标基本都是矩形块面的组合。 

关注色彩 

扁平化设计都有个共同的特点,色彩鲜艳、明亮,通过这个方面来增强图标的视觉冲击力。比如,其他设计基本上只包含两三种主要颜色,但是扁平化设计会平均使用六到八种颜色。蓝色、橙色、玫瑰红、紫色、绿色......等颜色颇受欢迎。 

注重排版 

字体的排版在设计中起着举足轻重的作用,它和界面中的其他元素是相辅相成的。在扁平化设计中,尽量不要用生僻的字体。如,扁平化设计的手机图案在交互式上可能或多或少有所减弱,那么文字的阐述就是人们认知它的另一个重要窗口。  

准扁平化设计 

不要以为扁平化只是把立体的设计效果压扁,事实上,扁平化设计更是功能上的简化于与重组。在扁平化设计的基础上,适当增加一种特效,如简单的阴影、梯度、深度、矢量的纹理等。 

扁平化设计的趋势已经势不可挡,但拟物化设计也没有被完全取代,那么准扁平化设计就成为它们之间的调剂品。纵观扁平化设计的平台,我们会发现一个现象:那就是难看的应用不多,但令人印象深刻的应用也不多。应用很有统一感,但是很难张扬个性。根据扁平化设计的原则,及资料的收集,总结了以下几个设计技巧: 

①简单设计元素的运用。虽然是简单的几何图形,但是通过不同组合的排列、拼接、裁剪,可以得到意向之外的效果。 

②字体的设计。字体设计在扁平化中起到举足轻重的作用。字体设计的重点在于怎样协调笔画与笔画、字与字之间的关系,强调节奏与韵律,创造出更富表现力和感染力的设计,把内容准确、鲜明地传达给观众。

③丰富的色彩。色彩是造型艺术的重要手段之一,色彩也具有打动人类的直觉,并可以直接诉诸于情感。色彩作为设计中重要的形式因素,其应用价值和审美价值毋容置疑。 

④简化交互式设计。开始于目标用户的需求和期望,结合人类自身的心理及行为特点,用最简单的方法创建易用、有效并让用户愉悦的设计。

⑤伪扁平化设计。把某种特效融入整体的扁平化之中,是其成为一种独特的效果。比如说,在简单的按钮加一点点渐变或阴影,从而使这种风格成为其特色,产生出一种扁平化设计的变种。这种设计要比单纯的扁平化更具有适用性和灵活性。

注:本文为 设计智造编辑整理,转载请注明 来源:设计智造 http://cocoo.top

    本文版权归原作者所有,如有侵权请来信告知(cocootop@163.com),可合作,我们愿意支付稿费。

相关文章

  • 扁平化设计

    小设今天来讲讲扁平化设计。 顾名思义,扁平化界面设计仅仅采用二维元素。所有元素都不加修饰——阴影、斜面、突起、渐变...

  • 扁平化的界面设计!

    文/陶薇薇 张小玲从拟物化设计到扁平化设计,手机UI界面设计两种风格并驾齐驱。其中扁平化设计除去了过多的装饰,这可...

  • 商战智慧策略一扁平化管理

    当今世界,扁平化的浪潮可谓如日中天,从手机应用到界面设计,从组织结构到团队协作,扁平化的思潮指引着我们工作的多个方...

  • [组内分享] iOS7人机界面准则PPT+讲稿(多图)

    从iOS6到iOS7:扁平化是界面设计的必然趋势 在过去几年里,软件和APP的界面设计风格发生了迅速变化,由3D、...

  • iOS设计里念(人机界面准则)

    从iOS6到iOS7:扁平化是界面设计的必然趋势 在过去几年里,软件和APP的界面设计风格发生了迅速变化,由3D、...

  • UI设计界面流行风格,扁平化与拟物化

    界面设计风在不断发展变化,扁平化和拟物化是现代流行的界面设计风格,两种风格本身都存在着优缺点,常常让人拿来比较。设...

  • 界面设计的扁平化形式!

    文/李亭翠 陈颖 扁平化并不是简单的删除多余的修饰效果,毕竟用几根简单的线条和几个色块来表达主题,并没有用模拟真实...

  • 扁平化界面设计漫谈

    一、扁平化设计的历史渊源 界面设计(UserInterface)随着上世纪计算机技术的发展和成熟逐渐启蒙,经历了从...

  • 胡言乱语(一)

    下了简书没几天,先说下个人体验。 优点:首先个人觉得app界面设计还好,迎合了当下扁平化的需求,在看文的时候,没什...

  • 伙伴协同4.0正式发布

    伙伴协同4.0版已于6月27日正式发布上线。新伙伴界面设计更大气,细节更走心,扁平化、半透明、雅黑字体、多彩主题…...

网友评论

    本文标题:扁平化的界面设计!

    本文链接:https://www.haomeiwen.com/subject/ibtqrqtx.html