信管家软件吧 关注:142贴子:3,944
  • 5回复贴,共1

扁平和简约来袭

只看楼主收藏回复

在过去几年里,软件和APP的界面设计风格发生了迅速变化,由3D、拟物发展到扁平、简约。尽管这一趋势普遍存在,我们还是思考下是如何发展至此的,以及它对整个界面设计领域有何影响。另外,我会分享扁平界面设计的一些技巧和注意问题。
发生了什么?
  那么,为什么群体意识从喜爱带纹理、有透视和阴影的设计转变喜爱扁平色彩和极简图形的设计呢?当然导致这一转变有很多因素,但是有一些因素更为突出。
  信息过载
  随着世界联系越来越紧密,我们不断地接受大量信息,一些信息是重要的、相关的,但大部分不是。我们不断地评估其价值,过滤无用信息,或创建新的内容,所有这些都使我们精疲力竭。还有,大部分内容消费已转移到小屏幕设备,更是加剧了超负荷现象。这样我们就很容易就淹没在信息中,砍掉用户界面(UI)的繁杂元素才是视觉设计的王道。  


1楼2017-05-03 10:58回复
    简约就是金科玉律
      同样有个趋势就是,颠覆性的网页应用和服务正提供高度专用化的工具,只设计少数功能。虽然传统软件开发员倾向于为产品加载过多功能,以期获得高价定位;但目前变化趋势专注于微应用,偏爱功能简洁。简单的应用意味着有简单的界面。
    又一次,以内容核心
      新设备和新技术涌入市场时,常常会出现这样的情况,我们热衷于思考于它们能做什么,我们又怎样才能提高交互性。但关注界面设计这一狂热之后又回归专注于内容。媒体资源的消费,不论文字、音乐还是视频、音视频,等我们设备上最常用的活动,在你乐享其中时,肯定不希望被无关的界面元素打扰。


    2楼2017-05-03 10:59
    回复
      技术水平
        随着智能手机和平板电脑已渗透到千家万户,显性操作正在逐渐减少。过去,如果弹窗没有从屏幕跳出来,我们曾担心用户会错过操作,而现在,我们更愿意让用户去探索这种细微的交互体验。鉴于此,很多互联网产品已经支持没有任何视觉引导的触碰指令。  
      Fitbit的仪表盘的视觉设计清爽,、胆大,和亲和力


      3楼2017-05-03 11:00
      回复
        技术的影响
          大部分软件受限于运行平台。屏幕尺寸和像素密度也受限于硬件设备条件。一个简约的界面需要十分有限的设计元素,这意味着每一个元素都要有所发挥。排版布局和字体粗细在很大程度上决定了扁平设计的美观和易用性。
          如果你的目标设备不能处理好这方面的细微差别,你就不太幸运了。随着屏幕尺寸和像素密度不断增加,更细、更小的样式也能呈现最佳的清晰度。当然,对@font-face属性的支持,提高了对文字间距的集中处理,也增加了极简排版的吸引力。

        Wallmob的市场数据监控应用:从任何一个有一个浏览器的设备上都可以检测到数据


        4楼2017-05-03 11:00
        回复
          响应式设计
            随着各种尺寸联网设备的普及,交互界面变得更需要强调适配性,响应式设计也就应运而生。虽然响应式设计并不要求特定风格,但扁平的交互界面显然比其它样式要更容易处理。简约设计的另一种优势就是,能见降低页面重量和缩短加载时间。

          无重量的响应设计: OnSite. (大尺寸展示)
            勇于实践
            好了,不唠叨理论了。让我们看看实践上的操作吧。设计一个有效的简约风格很具有挑战的。当你抛弃界面上那些花哨的装饰元素(下拉阴影,透视关系,纹理材质等),立马就会意识到剩余的元素关键且重要。以下几个技巧在设计中普遍很实用,特别是针对扁平UI设计:
            开始设计之前
            任何项目开始第一步,就是确保你选对风格。深入设计之前,确保风格符合目标用户的感知需求,适应目标平台、承载设备和应用类型。如果该方案风格与项目不匹配,那么接下来的导向则毫无意义。


          5楼2017-05-03 11:00
          回复
            延伸—Step3
              最后,如果你对你的应用一开始就有高度期望或计划,除了送审用的图标外,如果事先跟请美术制作高清(可供印刷用的图片)或直接以AI/EPS向量图档来制作,通常外包美术都会乐意的(尤其iOS7之后,图标的风个趋向简约,这时候用AI及EPS向量格式来制作是最适合的,可以改用Illustrator来制作图标)另外,设计好的图标可以延伸用在(客户服务&支援网站)的设计,也可以用来运用在给国内外各大推广渠道的广告Banner制作之上,甚至可以印在名片上使用(即使一人开发,也可以当成公司或工作室来经营)
              学习应用的ICON/UI/UX等美术设计别无他法,买书自学摸熟功能,接下来就靠自己慢慢从练习中体会,过程跟学写代码很类似,都要下苦心砸时间,但学习美术更需要「体会」与「感觉」要花些时间去体会「美」是什么,如果有心想自学美术,成为「同时会美术也会程序的通才」那么多去类似很多人都知道的「500px.com」或「behance.net」等优秀网站去观摩别人的摄影与图像作品对你会有帮助。
              高度——Step4
              摄影是培养美学的重要关键(尤其对于多数程序员比较缺乏的手绘技能来说,摄影图片能有效地辅助你作为应用开发时的美术资源之一)运用摄影图片来当成你的UI或图标的方式也是一种表现风格,妥善运用摄影图片在你的应用截图或图标也是很好的。
              学摄影可以培养美感,培养对「美」的眼光与「鉴赏力」可以「有效」且「精准」的知道什么叫做「合格」的美术成品,这样可以减少很多不必要的美术修改费用,更可以尽量避免「枪毙」你的美术伙伴与作品,对美术的「鉴赏力」可以降低美术的费用支出,提高项目的开发进度,你不一定得会「画图」但一定要有足够的「鉴赏力」
              总结
              要独立做好应用开发所需的美术设计,买书摸熟Photoshop(或其他你想用到的2D或3D软件)接着大量观摩别人作品的方式来「从生活中培养你对美学的鉴赏力」然后藉由摄影与其他方式来将素材运用到开发作品中,如此能让你更容易做出吸引用户下载的优秀应用。


            7楼2017-05-03 11:01
            回复