简洁而不乏味_浅谈扁平化界面设计_马娜娜
- 格式:pdf
- 大小:1.26 MB
- 文档页数:2
APP的UI风格分析与总结随着智能手机的普及,移动应用程序(APP)已成为了人们生活中不可或缺的一部分。
而APP的用户界面设计(UI)风格对用户体验的影响至关重要。
本文将对几种常见的APPUI风格进行分析与总结,包括扁平化风格、材料设计风格和骨架屏风格。
首先,扁平化风格是目前最为流行的APPUI设计风格之一、扁平化风格以简洁、平面化以及色彩鲜明为特点。
它摒弃了过去3D效果和阴影的修饰,更加注重简单清晰的界面布局和内容的重要性。
扁平化界面通过使用简洁的图标、鲜艳的颜色和大胆的排版来吸引用户的注意力。
这种风格给人一种清新、直观的感觉,同时也提高了用户使用APP的效率和体验。
其次,材料设计风格是由Google推出的一种UI设计风格,它融合了扁平化风格的简洁清晰和传统设计元素的实用性。
材料设计风格突出了物体与背景之间的层级关系,通过独特的动画和过渡效果来提升用户体验。
材料设计风格的特点包括鲜艳的颜色、阴影和光影效果的运用、卡片式的布局以及醒目的图标和按钮设计。
这种风格给用户一种直观、真实的感觉,同时也提升了用户对APP的信任感和使用的愉悦感。
最后,骨架屏风格是近年来兴起的一种UI设计风格,它通过在加载页面时显示一个简单的、由线条或灰色图形组成的骨架屏,来给用户一个即时的反馈。
骨架屏风格的特点是简洁、干净,使用户能够立即感知到页面正在加载,减少了等待时间对用户体验的影响。
这种风格在加载缓慢的情况下尤为有用,它可以让用户通过骨架屏对整个页面的结构有一个大致的了解,从而减少用户的焦虑感和不耐烦。
综上所述,APP的UI风格对于用户体验至关重要。
扁平化风格通过简洁、平面化的设计来吸引用户的注意力;材料设计风格融合了扁平化风格和传统设计元素,提升了用户的体验;骨架屏风格通过展示简单的、即时的骨架屏来减少用户等待的时间和焦虑感。
随着技术的不断进步,UI 设计风格也在不断演变,希望未来的UI设计能够更加贴近用户的需求,提供更好的用户体验。
扁平化设计
近几年,扁平化设计风格正在世界各地的设计领域中有着极其重要的作用。
扁平化设计指的是采用浅色渐变、轮廓和简约的空间来表达审美的设计风格,这种设计方式更加注重简洁、朴素和统一性。
此外,扁平化设计还可以让设计更加注重色彩。
首先,扁平化设计将图形界面设计发展到一个更加深入和抽象的层面,它可以让设计师更加清楚地理解和构建客户的需求。
例如,在设计图形界面时,设计师可以利用扁平化设计的特点来表达更多的信息,让用户更容易理解图形界面的含义。
其次,扁平化设计具有高度的用户友好性,可以为界面设计带来更加实用和实效的内容。
比如,利用扁平化设计的特点可以让设计师更加清楚地表达重要信息,同时也可以为用户提供最优的交互体验。
此外,扁平化设计可以有效的将技术和创意结合起来,使得用户可以更加贴切地使用网页。
最后,扁平化设计的另一个优点是它可以有效的表达性感的色彩元素,而且可以节省开发的时间和成本。
比如,基于扁平化设计的色彩可以充分表达和强调界面上重要的部分,而且可以让设计师把更多的精力放在设计较为复杂的图形元素上,而不是花费大量的时间在色彩上。
因此,扁平化设计提供了一种新的思路,不仅可以有效的简化界面设计,同时也可以提高界面的实效性,为用户带来最佳的体验。
未来,扁平化设计将会受到越来越多的设计师的重视,成为当今设计环
境的重要元素。
扁平化设计实践报告(通用)扁平化设计是一种以简洁、直观和直接的方式呈现信息的设计风格。
它摒弃了过去过度装饰和阴影效果的设计元素,注重内容的重要性和用户体验。
在这篇报告中,我将分享一些扁平化设计的通用实践,以帮助设计师更好地应用这一设计风格。
首先,扁平化设计注重简洁和直观的界面。
设计师应该遵循“少即是多”的原则,尽量减少不必要的元素和视觉噪音。
在界面的布局上,使用简单、对称和平衡的结构,以增加整体的清晰度和易读性。
同时,要注重内容的重要性,通过不同的大小、颜色和字体等视觉手段来突出显示关键信息。
其次,颜色的运用也是扁平化设计中的关键因素之一、扁平化设计常常使用鲜明而饱和的颜色,以增加界面的活力和视觉吸引力。
设计师应该选择一组适合项目风格和品牌形象的颜色,在界面中进行统一和协调的运用。
此外,避免过度使用渐变效果和阴影效果,以保持整体的简洁性和现代感。
第三,图标的设计在扁平化设计中起着重要的作用。
图标是界面中的重要元素,它能够直观地传达信息和功能。
在扁平化设计中,图标应该简化和减少细节,使其更容易理解和识别。
同时,使用独特而一致的图标风格,以增加整体的一致性和品牌形象。
第四,动画和过渡效果也是扁平化设计中的重要组成部分。
通过动画和过渡效果,能够提升用户体验,增加界面的交互性和吸引力。
设计师可以利用动画来引导用户的注意力和指导操作,同时避免过度使用和妨碍用户体验。
第五,响应式设计是扁平化设计的一个重要方面。
随着移动设备的普及和多屏幕的使用,设计师需要确保界面能够适应不同的屏幕尺寸和设备类型。
在扁平化设计中,通过灵活的布局和自适应的元素调整,可以实现良好的响应式体验。
最后,用户测试和反馈是扁平化设计的不可或缺的部分。
通过对用户的测试和反馈,设计师可以发现和解决界面中存在的问题和改进的空间。
同时,设计师应该与开发人员和产品经理密切合作,以确保扁平化设计在实际应用中的可行性和可用性。
总结起来,扁平化设计是一种简洁、直观和直接的设计风格,它注重内容的重要性和用户体验。
扁平化风格在线上商店的视觉设计应用扁平化风格是一种现代化的设计风格,它的特点是简洁、明快、有层次感,适用于各种不同的设计领域,其中包括在线上商店的视觉设计应用。
在今天的数字时代,越来越多的企业选择在线上商店进行销售,设计一个吸引人的视觉界面对于吸引和保留用户至关重要。
本文将探讨扁平化风格在在线上商店的视觉设计应用,并介绍一些实用的设计技巧。
扁平化风格的特点之一是简洁明快。
在线上商店的视觉设计应用中,简洁的设计可以帮助用户快速理解和使用网站。
一个简洁明快的设计通常具有清晰的排版,明亮的色彩和大面积的留白。
通过简单的颜色和清晰的图标,可以让用户快速找到所需的商品或信息。
大面积的留白可以减少页面的复杂性,提高用户体验。
在设计在线上商店的页面时,应尽量避免过度设计和复杂的排版,保持简洁明快的风格。
扁平化风格强调层次感。
在线上商店的视觉设计应用中,层次感的应用可以帮助用户快速获取所需的信息,并且增加页面的美观性。
通过使用不同的颜色、大小、形状和深浅等来创建层次感,可以使页面的内容更加清晰有序。
通过使用明亮的背景色和深浅不同的文本,可以使主要的商品信息突出显示,吸引用户的注意力。
也可以使用有层次感的图标和按钮来辅助用户完成各种操作。
在设计在线上商店的页面时,应尽量注重层次感的应用,以提高用户导航和使用的便利性。
扁平化风格的设计还可以通过色彩的运用来吸引用户的注意力。
色彩在视觉设计中起着非常重要的作用,可以与品牌形象相符,增强用户对品牌的记忆和辨识度。
在线上商店的视觉设计应用中,色彩的选择应考虑到产品的特点和目标用户的喜好。
扁平化风格通常使用明亮、鲜艳的色彩,使页面看起来更加活泼和有生气。
在设计在线上商店的页面时,应选择适合产品和品牌形象的色彩,并尽量运用明快鲜艳的色彩来吸引用户的注意力。
扁平化风格的设计还可以通过运用适当的动效来增强用户的互动体验。
动效在视觉设计中可以增加页面的活力和趣味性,并且帮助用户更好地理解和使用网站。
扁平化设计理念扁平化设计理念是一种设计风格,它强调简洁、直观和功能性,同时减少视觉上的装饰和复杂性。
这种设计理念可以应用于各种设计领域,包括平面设计、界面设计和产品设计等。
首先,扁平化设计追求简洁和直观。
它摒弃了过于细致的图案和复杂的效果,注重于清晰的排版、简明的符号和直观的界面布局。
通过减少视觉上的干扰,扁平化设计可以使用户更容易理解和使用设计作品。
其次,扁平化设计注重功能性。
它强调用户体验和可用性,将设计的重点放在内容和功能上。
通过简洁明了的界面和直观的操作方式,扁平化设计可以让用户更轻松地完成任务,并更好地理解和使用设计产品。
另外,扁平化设计强调一致性和统一性。
它使用相同的设计元素和样式,并遵循相同的排版和布局准则,使不同的设计作品在视觉上具有一致性。
这不仅能够提高用户的使用体验,还可以建立品牌形象和标识。
扁平化设计还具备一定的适应性和灵活性。
它可以适应不同的设备和屏幕尺寸,并根据用户的需求进行调整。
通过响应式设计和自适应布局,扁平化设计可以在不同的设备上呈现出最佳的效果。
此外,扁平化设计还强调色彩的运用。
它通常采用明亮、饱和的色彩,以及简单明了的色彩组合。
通过色彩的运用,扁平化设计可以吸引用户的注意力,并增加设计作品的亮点。
最后,扁平化设计倡导开放性和自由度。
它鼓励设计师和用户创造性地运用设计元素和样式,以满足不同的需求和个性。
通过开放的设计风格和自由的个性化选择,扁平化设计可以为设计带来更丰富、更多样的可能。
总结起来,扁平化设计理念是一种简洁、直观和功能性的设计风格。
它注重简明的符号、直观的界面布局和清晰的排版,追求用户体验和可用性,并强调一致性和统一性。
同时,扁平化设计具备适应性和灵活性,注重色彩的运用,并鼓励开放性和自由度。
这种设计理念的应用可以提高用户的使用体验,增加设计作品的吸引力和亮点,同时为设计师和用户创造更多样的可能。
RdioRdio最新版本的网站及产品界面中都采用了很彻底的最小化、扁平化的设计风格,你很难找到使用了阴影、渐变等效果的界面元素。
Nest在他们的网站中,实际的产品及相关的应用环境照片作为“真实”元素融入到扁平风格的媒介载体当中,虚实结合,让访问者可以很容易的将注意力聚焦在产品上,而不会被网站界面上的视觉元素所干扰。
对设计风格的选取最终还是要取决于具体产品的实际情况。
在我个人看来,相比于拟物化而言,扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生。
无论采用怎样的风格,优秀的界面设计都需要遵从一些共通的设计原则:一致性通过具有一致性的设计模式及视觉风格,为用户建立起完整一致的心智模型,使产品更加易用,提升整体体验。
对比通过对配色、尺寸和布局的调整,使可点击的界面元素在视觉上与其他元素形成鲜明的对比。
布局可以尝试使用960gs一类的网格布局为界面设定视觉规范,使用户的视线可以跟随内容本身所界定出的路径自然的移动,增强界面的视觉平衡。
层级化最重要的东西要比相对次要的东西更容易被看到。
关于这个话题我可以写一整篇文章出来,简单的说,就是在界面设计中着重突出那些与核心功能与常见用例相关的交互元素,而将其他操作元素置于次要位置,这可以使界面得到最有针对性的优化和简化。
目标用户不同类型的用户所青睐的界面风格也有所不同。
建筑、设计、时尚等领域的用户可以更好的拥抱扁平化风格,而其他更加“普通”的用户则更容易接受相对传统的拟物化界面。
反馈当点击行为发生时,要立刻向用户提供清晰明确的视觉反馈。
动画过渡效果就是一种比较常见的反馈方式,例如在用户执行操作后,使用旋转图标提示用户系统正在进行响应。
降低“摩擦力”无论采用怎样的视觉风格,都要使界面尽量简化,减少用户完成目标所需执行的操作,打造更加流畅的交互体验。
任何一点障碍或额外的步骤都会提高操作成本,增加功能的复杂度,进而降低转化率。
扁平化设计
什么是扁平化?
摒弃高光、阴影等能造成透视感的效果,通过抽象、简化、符号化
的设计元素来表现。
界面上极简抽象、矩形色块、大字体、光滑、
现代感十足,让你去意会这是个什么东西。
其交互核心在于功能本
身,所以去掉了冗余的界面和交互。
法则一拒绝特效:更少的按钮和选项
法则二界面元素:坚持使用简单的外形
法则三优化排版:让字体成为简化设计的武器
法则四如何配色:使用不做任何处理的纯色调
法则五最简单的交互方案:避免不必要的元素
另伪扁平化设计:一些渐变或阴影产生的变种
生命不息,艺术不止
萧伯纳说:我希望世界在我逝去的时候,要比我出生的时候好。
生命会世代延续,它是一种状态。
源于静,归于动。
止于行,归于坐。
而艺术也在生活演变中有着无限的价值魅力与包容性。
设计语言:
1.位于丹麦·哥本哈根设计机构BESSERMACHEN设计了一套BODYNORDIC品牌化妆品系列包装。
产品包含护肤品、护发喷雾、手工香皂等不同类别,设计风格清新、优雅、温馨舒润,使人心情舒畅,感受自然呵护。
2.希腊工作室 mousegraphics设计的Youth Lab化妆品包装,平淡真诚,有一种平静的质感。
扁平化风格在线上商店的视觉设计应用随着互联网的普及和电子商务的兴起,越来越多的企业和个人选择在线上开设商店。
随之而来的是对商店页面设计的需求。
扁平化风格的视觉设计在近年来变得越来越受欢迎,它简洁、清晰、直观,符合现代人的审美观和使用习惯。
本文将探讨扁平化风格在在线上商店的视觉设计应用,以及一些设计技巧和注意事项。
一、扁平化风格的特点扁平化设计风格是一种简洁、直观、平面化的设计风格。
它强调简洁明了的图形和文字,去除了过多的装饰和立体感,使得页面看起来更加清晰和易于理解。
扁平化风格追求简单和直白的表达方式,注重使用色彩、图形和文字的组合来传达信息,而不是依赖于复杂的效果和装饰。
扁平化设计的特点包括:1. 色彩鲜艳:扁平化设计注重运用鲜艳的色彩来吸引用户的注意力,所以在设计网页时可以大胆地使用饱和度高的色彩,但要注意色彩的搭配和和谐。
2. 简洁明了的图标和图形:扁平化设计取消了过多的阴影和立体效果,图标和图形更加简洁明了,更容易被用户理解和接受。
3. 直观的界面设计:扁平化设计注重界面的直观性,通过简单的设计和明了的布局使得用户可以直接获取需要的信息,减少用户的认知负担。
4. 响应式设计:扁平化设计风格更容易实现响应式设计,适应各种不同大小和分辨率的设备,提高用户体验。
二、扁平化风格在在线上商店的应用1. 简洁明了的导航栏设计扁平化设计的导航栏通常以简洁的图标或者文本呈现,去除了过多的立体效果和装饰,使得用户能够直观地找到所需的信息。
在设计导航栏时,要注意保持一致的风格和颜色,让用户更容易理解和操作。
2. 使用鲜艳的色彩吸引用户注意力3. 简洁明了的产品展示页面扁平化设计的产品展示页面通常会采用简单的排版和明了的分类,使得用户可以直观地获取想要的信息。
产品图片也可以采用扁平化的设计风格,使得页面更加整洁和美观。
4. 响应式设计增强用户体验扁平化设计更容易实现响应式设计,可以自适应不同的设备大小和分辨率,提高用户体验。
浅谈扁平化设计人人都是产品经理随着互联网的高速发展,我们可以看到质感厚重,图层样式繁多的网站越来越少,反之各种轻质感,布局大胆、创意新颖、的网站慢慢进入了大家的视野,人类发展至今,人们的审美、时尚标准总是无时无刻不在改变,互联网也是这样,下面这篇文章将要给大家谈谈2013网页设计新风向 “扁平化设计”(flat design)什么是扁平化设计这里简单介绍下关于扁平化的概念,所谓“扁平化设计”一词所指的是抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉效果,从而打造出一种看上去更“平”的界面。
善于用颜色去鼓励用户探索。
为什么选择扁平化设计>快速快速高效是扁平化设计的一个很重要的基因,时间就是金钱,如何在信息更新如此之快的互联网即时的跟上它的脚步呢 –快速这也是很多互联网巨头们为什么选择扁平化设计的原因之一。
以我们畅游鹿鼎记官网为例,早期的官网按钮质感较重,图层样式较多,很影响加载时间,根据统计页面大小在357K。
下图是我们畅游较最新的鹿鼎记官网,明显可以看到和老版两者的区别吧~ 在保证整体视觉的情况下,尽可能的精简图层样式,统计的页面大小在214KB。
同时减少页面请求的个数(每张图就是一个请求)从老版的26个优化到14个,优化比在40%以上。
>更迭快低成本运作每一次游戏版本更新我们都会对应对官网进行设计改版。
采用扁平化设计,我们可以再最短的时间内更新官网,只需要给制作提供相应的色值就行,大大的节省了项目时间,也方便下次再更新。
>信息突出上图是2013年3月份的雅虎国际首页的改版上图是facebook概念版微软2012年的品牌刷新官网首页Nest通过颜色的对比,大小不同的字号,让重要的信息放在首要位置,不重要的元素弱化,除了几个主要的动作按钮当中使用了轻微的斜面效果以外,其他界面元素全部采用扁平风格,这样的设计让访问者可以很容易的将注意力聚焦在品和信息上,而不会被网站界面上的视觉元素所干扰。
扁平化风格在线上商店的视觉设计应用扁平化风格是一种现代化的设计风格,其特点是简化和去除不必要的视觉细节,将界面元素呈现为扁平的、没有阴影和立体感的样式。
扁平化风格的设计风格在现代化的在线商店中得到了广泛应用。
扁平化风格的视觉设计使得在线商店的界面更加简洁和直观。
在传统的设计风格中,界面上往往有很多的立体感和阴影效果,这些细节会给用户造成视觉上的干扰,使得用户难以专注于商品的浏览和选择。
而扁平化风格的设计将这些不必要的细节都去除,使得界面更加纯粹和直观,能够更好地展示商品的信息和特点。
扁平化风格的视觉设计使得在线商店的界面更加符合移动设备的特点。
随着智能手机和平板电脑的普及,越来越多的人使用移动设备进行在线购物。
而移动设备有限的屏幕空间和触摸操作的特点要求界面简洁易用。
扁平化风格的界面设计符合这些要求,它的简洁和直观性使得用户能够更方便地浏览和选择商品。
扁平化风格的视觉设计使得在线商店的界面更加注重用户体验。
扁平化风格的设计强调的是界面的直观性和易用性,它不仅将信息呈现出来,还通过颜色、按钮、图标等元素来引导用户的注意力和操作。
通过使用鲜艳的颜色来突出特价商品或促销活动,通过简洁明了的按钮来引导用户进行结算或评价等操作,都能够提高用户的体验和购物的效率。
扁平化风格的视觉设计使得在线商店的界面更加易于维护和更新。
传统的设计风格中往往有很多的复杂的视觉效果,这些效果随着时间的推移会逐渐过时,需要进行更新和维护。
而扁平化风格的设计则相对简单和纯粹,它的设计元素主要是颜色、形状和文字,这些元素相对稳定和持久,不容易过时,能够减少维护和更新的成本。
扁平化风格的视觉设计在在线商店中的应用具有很大的优势。
它能够使界面更加简洁和直观,更符合移动设备的特点,更注重用户体验,更易于维护和更新。
在设计和开发在线商店时,可以考虑采用扁平化风格的设计来提升用户的购物体验和商店的竞争力。
扁平化风格的概念与界定扁平化风格是一种现代化的设计风格,主要特点是简洁、干净、明了。
它的出现标志着设计行业的一种风格的转换,是从过去的“真实主义”、“纹理化”、“立体感”向更加简洁、平面化、抽象化的方向发展的。
扁平化风格不仅在广告设计、界面设计、印刷品设计等领域中得到了广泛应用,还在建筑、产品设计、时尚等方面出现了越来越多的迹象。
扁平化风格的主要特点一、色彩简洁扁平化风格的色彩选择趋向单一化,使用大面积的块状颜色的结构来表达信息,使整个设计更具有辨识度和视觉冲击力。
色彩的运用不局限于某种一般认为的颜色组合。
同时,扁平化风格色彩只是单纯的色块,不会在色表上添加多种调配变化,呈现出低饱和度和冷调。
二、图形简约扁平化风格的图形设计方向上的趋势是让图形尽可能的简约,通过运用平面化元素,削弱图像的细节和过多的阴影、渐变、纹理。
对比以往的立体感设计,扁平化风格大量的使用简单的矢量图形,可减少设计距离。
三、文字简单扁平化风格的文字多采用简单、易读、不加修饰的字体,较少使用文字阴影、浮雕等效果,这样可以更直接表达文字的内容,让整个设计整洁、简洁。
四、排版简洁扁平化风格的排版一般设计成单纯的块状布局,以大面积的色块、图片结构以及大块的文字,作为设计元素运用。
排版的功能性和视觉效果的结合,呈现平面化的视觉风格。
扁平化设计通常依据简洁明了的原则,通过去掉过多的繁复装饰,降低视觉杂乱感,使受众视觉体验更加简约。
二、视觉冲击力强扁平化设计色彩大量的使用色块,表现比较冲击,易于引起用户的注意,很好地解决了弱化点的问题。
三、易于辨识扁平化风格简约、干净,可以帮助受众快速理解品牌的特点和概念,提高品牌的辨识度,进而提高品牌印象力和品牌价值感。
四、响应式设计扁平化设计与响应式设计紧密相连。
响应式设计需要将网站或应用程序的设计相应地缩放到不同的屏幕尺寸和设备上,而扁平化界面设计对于这种变化非常适应,并避免了在小屏幕上出现太多细节。
扁平化设计浅谈作者:梁晰来源:《文化研究》2015年第03期摘要:扁平化设计是去掉冗余的装饰效果,去掉多余的透视,纹理,渐变等等能做出3D 效果的元素。
让“信息”本身重新作为核心被凸显出来。
并且在设计元素上强调抽象、极简、符号化。
扁平化风格是信息高效传播时代的产物,受到20世纪60年代的极简主义的影响。
扁平化设计并非只是把立体的设计效果压扁,扁平化设计是功能上的简化于与重组。
扁平化设计与当下最为常见的拟物化设计形成鲜明对比。
这种变化在UI设计和网页设计上表现的尤为鲜明。
虽然扁平化设计并非是一个近期才产生的艺术流派或者概念,但他是随着网络和手机这两种媒介的改变而被大众所熟知并引起讨论的。
随着技术的发展,几乎所有设计师的作品中都呈现出一致的扁平化设计风格。
关键字:扁平化设计,UI设计,网页设计,微软,苹果什么是扁平化设计?英文名为“flat design”(扁平化设计),这个概念2008年由Google提出。
但围绕着“flat design”这个名字存在着诸多争论。
现在我们所看到的这个名称“flat design”也不是被大家绝对地认可。
扁平化设计的概念最核心的地方就是:去掉冗余的装饰效果,意思是去掉多余的透视,纹理,渐变等等能做出3D效果的元素。
让“信息”本身重新作为核心被凸显出来。
并且在设计元素上强调抽象、极简、符号化。
扁平化设计从何而来?扁平化风格是信息高效传播时代的产物,扁平化作为一种设计风格并非当下凭空出现,而是受到20世纪60年代的极简主义的影响。
它除了具备极简主义的风格特征还兼有更多的复杂性,是对极简主义的继承和发展。
应该说是从多个设计风格和时期中,都得到了相应的灵感最终形成了扁平化设计。
比如Swiss Style是扁平化设计历史上最值得讨论的。
这种设计风格兴起于瑞士,时间上贯穿了1940年代到1950年代。
Swiss Style风格的特点是大量使用网格的设计元素,另外内容和布局都很简洁,在那个年代经常可以看到一幅大照片配上简单的几个文字,这就是典型的Swiss Style设计。
龙源期刊网 http://www.qikan.com.cn 浅析扁平化互联网界面设计的特点 作者:周黎铃 来源:《艺术科技》2014年第12期
摘 要:随着扁平化风格互联网产品的相继推出,扁平化设计成为互联网产品界面设计中的热潮。在日新月异的互联网大背景下,如何通过完善用户体验,让扁平化设计更好地满足用户的需求,成为当下一个极其有意义的课题。本文从视觉体验角度,通过色彩、字体、图形的特点分析对扁平化设计方法进行了整合。
关键词:扁平化视觉设计;互联网产品 2013年9月,苹果公司推出了全新的iOS7系统,最为直观的便是焕然一新的视觉设计,抛弃了iOS系统最为经典的“拟物化设计”,采用了图形简洁、色彩明快的“扁平化设计”,从此扁平化设计成为设计热潮,并广为人知。何为扁平化设计?首先,扁平化是一种设计风格,是指去除拟真效果(包括给人立体错觉的渐变、阴影、高光、肌理、羽化等),追求简洁的整体设计,不仅是视觉上的扁平化还包括信息层级的扁平化。在日新月异的互联网大背景下,如何通过完善用户体验,让扁平化设计更好地满足用户的需求,成为当下一个极其有意义的课题。本文从视觉体验角度,通过色彩、字体、图形的特点分析对扁平化设计方法进行了整合。
1 色彩设计分析 1.1 单色渐变配色 所谓单色渐变,就是在色相环中选取一种色相,通过改变的明度和纯度来区分色彩层次。同一色相的色彩对比较弱,因此为避免单调,在扁平化的界面中,往往会用单色渐变配以某个明度的灰色作为基底色,或者选择另一种颜色,在色彩上出现冷暖或明度的对比。一般单色会用在最为关键的页面元素上或者文字部分。背景削减理论在单色渐变中发挥了重要作用。
单色会给人带来单纯、柔和、平静、雅致、秩序的感受。单色配色的界面相较于多色配色的界面,视觉上显得更加简洁、统一,同时这种极简的配色能够通过同色相的明暗、纯度的对比突出重要信息,有效地区分界面中元素的主次对比。
浅谈UI设计的演变扁平化设计风格浅谈UI设计的演变——扁平化设计风格高一(1)班凌霄/文2013年9月,苹果正式对外发布了其最新一代移动设备操作系统——iOS7,这是继iOS3至iOS6以来最大的一次升级,也带来了其用户界面(UI)的一次非常巨大的变化。
苹果自此摒弃了以往的拟物化UI设计风格,而开始走扁平化路线。
记得当初iOS7刚发布,就招致了极大的争议,贬褒不一:有人支持新系统的UI,也有人极力反对。
近三年过去了,苹果一直在延续这种扁平化的设计风格,并且于此同时,扁平化(或者说与拟物化相对的抽象化)设计也在其他品牌、其他领域不断蔓延发展,大有成为主流之势。
说到这种扁平化设计,其实最早将其应用于UI中的并非苹果,而是同样知名的科技公司——微软。
微软在2010年于Windows Phone7中正式引入了Metro界面设计语言,并且在接下来的诸如Windows8、Windows10以及Office2015、Office2016等大量产品中都将这种设计予以延续和发展。
更早在2006年,微软在其发布的便携式播放器Zune中就运用了类似的设计,可以说是Metro 风格的前身。
Zune带着它简洁明了、富有科技感的UI,在当时一众拟物化风格的产品中惊艳登场,许多人都为之感到惊叹,大呼“美爆了!逼格好高!”(←_←诶,当时好像还没有“逼格”这个词)不得不感叹新设计的诱人之处和明显优势。
从上面可以看到,扁平化风格在电子产品UI领域的创始者不是苹果,而是微软,但却是一开始对其不屑一顾甚至抵触的苹果将其发扬光大、推向主流。
事实证明,这种设计风格迎合了当今审美的最新需求和标准(又或许是新的设计引领了审美的转变吧),越来越多的产品上出现了这种类似的风格,大量产品——无论是实物外观设计还是使用界面等的设计——画风大转,原本拟物化的调调儿一去不复返,转而纷纷投向带有极简和实用主义色彩的新式流行风味。
就连一些大公司的logo也发生了变化:比如说之前提到的微软本身,相信很多人的对他的四格logo再熟悉不过(就算是每次开机时的洗脑也足够我们牢记这个标识了),然而微软在2012年也将其之前几年一直使用的带有立体感的波浪形四格logo改成了完全直线构成的矩形四格色块,并且在以后的操作系统(Windows8等)中得以使用。
137大众文艺摘要:关于目前引起激烈争论的扁平化与拟物化界面设计风格,本文从扁平化与拟物化的含义谈起,讨论扁平化设计流行的必然性以及界面扁平化的局限性,分析扁平化界面风格对设计师提出的新要求。无论何种视觉风格,精准的信息表达,良好的交互体验才是界面设计的根本。关键词:扁平化;拟物化;界面设计
将“扁平化”一词用于数字终端界面设计的时间并不长,却以不可阻挡之势迅速蔓延开,从做系统的大公司到做软件的开发者,纷纷卷入这股潮流中。但关于“扁平化设计”的激烈争论不但没有停止,反而愈演愈烈。在笔者看来,“扁平化”与“拟物化”本身并不存在本质上的冲突,Flat Design的出现及迅猛发展有其必然性,而且必将会有更多精彩呈现。视觉上扁平一些更简洁,信息层级扁平一些更便捷,但无论是视觉效果还是交互体验都不能因此而乏味,只有全面考虑用户的操作体验才能做出优秀的界面设计。一、准确理解“扁平化”和“拟物化”“扁平化”与“拟物化”分别由“flat”“skeuomorphism”翻译而来,准确理解词义是首先应当解决的问题。很多争论是建立在认同“扁平化设计是指抛弃渐变、阴影、高光、纹理等拟真视觉效果,从而打造出一种看上去更“平”的界面,而拟物化恰好相反,极力表现真实透视仿真效果”这个基础上的,因此直接形成了对立关系。其实“扁平化”和“拟物化”分别都有更深层的含义,两者并非同属一个领域范畴。“扁平化设计”不仅是视觉效果上的去除了立体、仿真的效果将按钮、界面拍扁了,还包括信息层级的简化。“拟物化设计”也不仅是视觉上的立体,而是指“原有物件中某些必需的形式在新的设计中已不再必要,但新设计仍模仿旧有形式,以使新的外观让人感觉熟悉和亲切”。如图所示360界面的图标,更新后使用简洁线条表现,彻底“扁”了,但无论放大镜还是显示器仍然是“拟物”的。“扁平”与“拟物”并没有冲突。
因此可以说,目前大多数争论是对于界面设计的“简洁抽象的平面效果”与“仿真写实的立体效果”两者的偏好问题,这就如同各种不同艺术流派,它们本身并不具有优劣之分,只是每位观者喜好不同罢了。我们解读扁平化界面设计时,不能仅从视觉风格来理解,
还需要考虑到“扁平化”包括了信息层级的精简、交互过程的简化。二、扁平化风格流行的必然性首先,界面拟物化的初衷是降低用户的学习成本、理解难度,使得无论年龄大小、是否有操作经验都可以在拿到设备后的短时间内轻松快速掌握它的用法。但在数码设备普及度极高的今天,尤其对于很多年轻用户而言,拟物化设计原本的功能性优势已经无法凸显。大家早已熟悉各种数码产品的基本特点,适应了各类界面的操作方法,当一些界面中常用的图形抽象化、符号化之后,完全不会因此而产生识别上的困难,反而会因为去除了各种复杂视觉效果、冗余的装饰元素而更容易更直接的得到他们想要的信息。其次,扁平化界面有助于提高用户体验——效率。其一,是视觉效果方面,例如:Andriod手机有很多种分辨率,要想使同一个App在各种分辨率中都能清晰显示,就需要准备多套资源以对应,ROM资源里就存在hdpi、ldpi、mdpi等资源以对应各种不同分辨率,这样一来,调用的资源越多,程序运行的速度就越慢。扁平化设计倾向于矢量风格图形,在一定程度上减弱对像素精度的依赖,从而创建出适应性更高的用户界面。类似的问题在Win7系统中也很突出,虽说Win7视觉效果比起XP而言要炫得多,但同等配置下的Win7运行速度却远远低于XP系统。扁平化设计可以很好的解决此问题,让系统运行更流畅,从而提高用户操作体验。其二,是信息层级方面:每点击一次进入下一层级,层级越多,操作体验性越差。当图标不仅是应用程序的入口,同时又是信息的载体能够直接展示关键信息时,效率就提高了。正如Win8系统的磁贴,不用进行任何点击操作便可以看到很多常用应用的最新信息状态。此外,虽不是最主要原因,但数字产品审美趋势的变化也是不可忽略的因素之一。具有丰富细节、逼真质感的界面令人感到真实、熟悉、亲切,但最终打动用户的还是信息本身。更何况iOS6之前的版本,视觉上每一处的纹理、质感和细节都经过精雕细琢,几乎已经把拟物化做到了完美,要想有更惊人的突破已经很难,也没有必要了。当满眼充斥各种炫酷拟物效果操作界面时,简洁朴素的设计反而让人耳目一新,而且这种设计可以更直接更清晰的呈现关键信息,自然容易受到青睐。三、界面设计扁平化的局限性彻底扁平化的界面设计在表现力上有很大局限性。例如,完全抛弃所有投影、肌理、浮雕效果,仅仅依赖极简风格的线条、色块来准确表现越来越多样化、新品层出不穷的App,是难以实现的。拟真效果的界面设计之所以大受追捧是因为它通过尽可能多的隐喻降低学习成本。虽说扁平化界面通过抛弃大量装饰元素、突出关键信息内容来让用户快速找到他们所关心的信息,但高度抽象化后的简洁图形符号却不是每个人都可以立即看明白的。从事视觉设计工作的人员很熟悉这种视觉语言,对于有丰富数码产品操作经验的人来说也更容易识别一些常用的图形符号,但对于没有多少数码产品操作经验的用户以及很多儿童、中老年人、甚至包括一些对于抽象图像符号敏感度不高的用户来说,这无疑是提高了认知成本,降低了用户体验。此外,扁平化信息层级的应用对于移动数码设备以及很多网
简洁而不乏味——浅谈扁平化界面设计马娜娜 (南京铁道职业技术学院软件学院艺术设计系 江苏南京 210031)
・美术与设计・大众文艺
138摘要:艺术设计是与生活密切相关的,二战后斯堪的纳维亚现代玻璃设计是如何发展的?这得需要了解斯堪的纳维亚各国在不同时期设计师对其设计实践影响因素,还要在不同玻璃产品引领新的设计趋势。其次,在斯堪的纳维亚现代玻璃设计发展中芬兰的玻璃制造业的崛起也具有举足轻重的作用。同时,还有20世纪60年代设计的语义和美学,体现了斯堪的纳维亚现代玻璃设计重要信息。关键词:现代玻璃设计;设计风格;产品设计;设计展览
乔治・保尔森(Gregor Paulsson)于1919年提出瑞典概念vackrare vardagsvara(更美的日常用品),这一理念很符合二战后弥漫于芬兰政治界的不稳定气氛功能家用玻璃的重要性在设计语言中扮演着一个核心的角色,即使直到1953年才少有几个例子投入量产在1949年的应用艺术展“Kauneutta arkeen”(更漂亮的日用物品)中,相对较小的玻璃物品被展示出来。从1948年起,这一领域的更多注意力关注在伽勒・尼曼(Gunnel Nyman)的家用玻璃制品和凯伊・弗兰克(Kaj Franck)的图帕(Tupa)眼镜上。伊塔拉(Iittala)这样登出图帕眼镜的广告:在今天我们的工业艺术宣言中,这些由凯伊・弗兰克为卡胡拉(Karhula)和伊塔拉设计的绿色家用玻璃制品会将美丽带入家庭中。诚实地讲,不复杂的设计和深绿色将会给这些玻璃碗、水罐和平底玻璃杯的收到人带来乐趣。一、从艺术玻璃到家用玻璃战后关于功能玻璃制品的辩论参与者来自于由设计师、建筑师和挑剔的消费者组成的一个小群体,他们中的迈尔・古利克森(Maire Gullichsen)和凯伊・弗兰克。这场辩论被刊登在芬兰著名的室内设计杂志--Kaunis Koti(美丽家园)上弗兰克和古利克森认为日用物品的设计应尽可能简单,一举多得,并且占用空间小。凯伊・弗兰克注意到这一他学生时代的理念更容易应用
在战后的20世纪30年代,一个真正需要社会变革的经济萧条和社会动乱的时期。 在某种程度上,来源于现代运动的设计理念是社会的必然产物。人们通过创造高品质的日用设计产品,以寻求提高芬兰人民的生活品质。这场辩论以一个易被接受的统一信念为特点,并陆续被其它国家所效仿。这些国家明确的与那些它们相信以利润空间和销售额为目标的人们处于对立的位置。同时,进步的设计师倾向于提高设计的品质,使其适用于最大群体的人们,他们反对盈利主义。1951年,在实用玻璃制品的Ariek 展览上,伊塔拉的产品得以获展。艾诺・奥拓1932年的压制玻璃系列被作为漂亮日用器具包括在内。戈兰康威的样式编号为2100的阿尔奈服务深受好评。20世纪50年代前叶,人们仍然习惯于用阿尔奈类型的酒杯装上酒精饮料相互服务,大多服务包括超出十种不同容量的酒杯。阿尔奈服务的新奇之处在于它只有四种型号: 2/5,2 3/4,4,8 4/5ounce(4,8,10和26 厘升)。迈尔・古利克森也为这次展览设计了玻璃作品,她的水罐(样式编号为2355和2356),饮水杯(编号为2192),以及乳白玻璃沙拉盘受到评论家们的喜爱。迈尔・古利克森的乳白玻璃制品直到1952年才投入生产并被人们所用。阿尔奈服务于1951年,也就是展览前夕,投入生产。家用玻璃的彻底变革并没有发生在伊塔拉和利马基(Riihimäki),而是在Nuutajarvi。到1953年,Nuutajarvi的生产线已现代化。大多1950年前的未命名的模型都已停止使用。虽然新的收藏品中包括伽勒・尼曼和鲁纳尔・英格布洛姆20世纪40年代后叶的一些设计大多数的创新工作还是由凯伊・弗兰克和萨拉・侯丕亚设计完成,他们与1952年进入公司。在Nuutajarvi,设计师的名字不用于实用产品的营销。凯伊・弗兰克的压制饮水杯(编号5023)也出现在1953年,随后在同一系列中加入了盘子、碗和水罐。饮水杯(编号5023)象征着“漂亮的日用器具”
浅析斯堪的纳维亚现代玻璃设计发展李 寅 (阿坝师范高等专科学校美术系 四川汶川 623002)
页设计而言有很强的推广意义,方便快捷的操作流程能够有效提升用户体验。但并不代表所有数码终端设备界面的框架都适合扁平化层级,在对于操作流程有着严格规范要求的应用程序中,仍然需要层层推进的操作引导。四、扁平化风格对设计师提出了更高要求扁平化并不是简单的去除复杂的饰效果而已。更何况,用简洁的线条和色块来准确表达信息,并不具备相对于精雕细琢的实物再现效果的天然优势。简洁而精准的图形设计要求设计师具备极强的视觉传达设计能力,并运用缜密的逻辑思维加以抽象和总结才能表现出来。其一,要保证图形在高度抽象、符号化以后仍能被准确识别,用尽可能简化的线条尽可能准确的表现对象,不是凭借耐心与细心便可以达到的,做减法往往比加法更难。其二,扁平化对设计师运用色彩的能力提出了高要求。在没有肌理、浮雕等效果的情况下,要准确把握色彩心理特性、熟练运用色彩层次,通过平面色块营造美观的界面、合理引导视觉流程的同时,还要准确传递给用户有用的操作信息,即“我可以做什么”。所以说,扁平化设计若能做好,可以给人简约、清新、高效的感觉,但如果处理不到位,不但容易显得乏味无趣,甚至会让用户无所适从。扁平化设计对设计师抽象构思能力、图形与色彩细节处理能力提
出了极高的要求。五、良好的交互体验才是根本单从视觉效果角度而言,无论是去繁从简的扁平化还是精心装饰的拟物化,都只是众多设计风格中的一种而已,任何一种事物走向极端都未必是好事。不妨换个角度来思考,风格之争并无多大意义,平面或是立体、简洁或是华丽、淡雅或是浓烈,用户各有所好,但几乎所有用户都会毫无疑义的要求界面设计应提供良好的交互操作体验。精准的信息表达,良好的交互体验才是界面设计的根本。此外,图形视觉效果引起的审美感受以及界面操作交互过程中所产生的情感性需求也是设计师不应忽视的一个重要方面。信息化时代数码终端碎片化趋势下,界面设计在视觉效果上尽量减少非功能性的多余装饰,保证关键信息的突出和清晰,在信息层级上尽量简化,让交互操作更加简易,才能快速适应用户越来越高的要求。