原标题:用这13个方法,帮你做出真正轻量化的移动 App 设计

(点击上方公号,可快速关注)

英文:medium

译者:优设网 - 陈子木

链接:http://www.uisdc.com/2015-ui-ux-trend-report?utm_source=tuicool

不论是在手机屏幕上,浏览器上,还是智能手表的屏幕上,设计都是促使产品和用户互动的最重要的驱动力之一。从扁平化设计到 Material Design ,从小屏幕到大屏幕,我分析了一下设计的趋势演变规律,并同你分享一下我的一些拙见。到底有哪些趋势?这些趋势的存在,对于用户有何裨益?它们将会创建怎样的未来?这就是今天的文章所要探讨的内容。

作为近年设计领域中最具有代表性的设计风格,我们不妨从扁平风和 Material Design 入手,聊聊它们是怎样出现、如何成为现如今的设计趋势。

更轻量的设计

Shot by Ghani Pradita

它是什么

相比于使用大量渐变和阴影堆砌细节的拟物化设计,扁平化设计在美感、程序设计以及流行趋势上,有着更为明显的优势。扁平化的设计对于负空间的运用有着更高的要求,不再对渐变和阴影有太多依赖,用简约的界面,专注于核心的信息,将流程中无法提高用户操作效率的设计元素移除。

为什么

轻量级的设计可以避免用户分心,引导用户专注于屏幕上更有意义更重要的内容,导航也因此更容易,时尚、现代、简约的美学也更符合目前品牌设计的诉求。

用单一字体贯穿整个设计

Shot by Brian Plemons

是什么

降低单屏的字体类型的数量,从而强化排版的设计感和美感。不同的字体拥有不同的气质,带来不同的感受,字体大小和疏密的排列则能更好的区分内容的亲疏关系。

为什么

通过横贯整个设计的单一字体来拥抱一致性设计,并不是只有品牌设计会做的事情,应用程序、桌面和手机网站都可以通过这样的优化统一多平台的体验。另外,单一字体也能让界面更加简单易用,提升内容识别度。

用空间来间隔

Shot by Eric Atwell

是什么

通过线条和分隔符来进行划分内容区块是之前所流行的处理方式,但是这样会让界面拥挤不堪。通过空白空间来划分区块能让界面更加通透,构建更优秀更干净的界面。

为什么

移除分割线和分隔符可以为界面提供更加现代化的外观,专注于功能,比如可以将图片和字体放大,提供更加清晰的层级划分和更优的易用性。通过空间间隔来划分区块是一种非干扰性的设计,更匹配时下流行的风格和设计的需求。

高亮的数据

Shot by Morgan Allan Knutson

是什么

用户更偏爱简单的界面,大号的字体和醒目的色彩,希望特定的数据在最重要的位置显示出来,而这些被高亮处理的数据会随着用户的状态变化而灵活地变化。

为什么

通过增加字体尺寸和显眼的色彩来将用户的注意力转到特定的区域,这种方式更加潜移默化,不显突兀。在这样的设计之下,用户会更快地接受信息和数据,更高效地导航。

微交互

Shot by Kirill

是什么

围绕特定的用例,通过微妙细小的动效或者交互强化它的视觉效果。通常当你完成某个过程的时候,比如收藏某个条目、弹出提示框,这个时候微妙的动画会强化这些动作,将这些控件同其他的元素区分开来。

为什么

这些微交互能够作为信号提示,来提醒用户动作和任务的完成,它们更简单、更有趣也更加吸引人。微交互通过微妙的细节和动效赋予界面更强大的生命力。

简约的配色

Shot by Ari

是什么

扁平风在2013年开始大规模流行,令简约设计风成为了大势所趋。为了更为契合简约的设计理念,设计师和用户都逐渐开始喜欢用更少的色彩来完成设计。

为什么

色彩的运用是营造情绪、吸引用户吸引力、构建品牌意识必不可少的组成部分。更少的色彩能让品牌形象更加突出,色彩的减少意味着凝聚性的提升,用户更容易买账,因为它不容易让人分心,突出主要功能和内容。

分层的界面

Shot by Roman Nurik

是什么

拟物化的设计在几年前占据着设计领域的主流,随后扁平化设计的革命将拟物化打入冷宫。可是随着时间的推移,层级更多、细节更丰富的扁平化2.0出现了,分层的扁平化界面让二维化的扁平风拥有了深度和更多维度,为用户带来一种更为“真实”的体验。

为什么

早期的扁平化设计存在“过于扁平”的风险,而扁平化2.0的出现,让扁平化的设计拥有了层级,以Material Design为代表的这类设计风格,通过阴影和分层显示,让界面步入3D,让不同的层有了对应的Z轴座标。不同的组件之间的相互关系开始越来越清晰了。

幽灵按钮

Shot by Gleb Kuznetsov

是什么

幽灵按钮是无色彩填充的透明按钮,它的边界用非常纤细的线勾勒出来,本身的形状通常是圆角矩形或者方形,这些按钮的名称用简单的文字来标识。

为什么

这些干净而时尚的按钮设计同样可以抓住用户的吸引力,同时还不会显得过于突兀。幽灵按钮让按钮在界面拥有了更高的融入度,甚至于按钮可以在界面中拥有不同的层级。在Material Design中,幽灵按钮还拥有轻微的阴影来表现层级。

手势操作

Shot bu Javi Pérez

是什么

设备借助陀螺仪和运动传感器,能够感知速度、加速度、方向等参数,识别运动和手势。用户同屏幕之间的交互从简单的点击延伸到现实生活中的手势、动作等不同的交互方式。

为什么

用户熟悉手势,当用户需要删除条目的时候,不论用户是是什么年龄,性别,社会背景,将条目移出屏幕都是下意识并且易于理解的操作。更少的点击,更多的滚动和滑动令用户体验有了极大的提升。

动效

Shot by Eddie Lobanovskiy

是什么

随着技术的发展,现在开发人员可以借助样式表来充分控制动画效果。基于动效的设计包含不同的形式,过渡效果、动画、甚至是有深度和纹理的3D效果。动效的存在有助于用户理解内容,熟悉界面,让更重要的部分被动效呈现出来。

为什么

动效会吸引用户的注意力,而不会被分散。通过视觉上的变化,提高用户的参与感,并且取悦用户。

更短的流程

Shot by Jan Losert

是什么

越来越多的应用开始使用单页面来搞定整个操作流程或者多个步骤,替代之前流行的多界面导航,降低用户在操作过程中花费的时间和精力。

为什么

移动端本身的特征决定了移动端用户对程序的流程和易用性有更高的要求,将操作流程最小化有利于提升移动端的用户体验,从而提高操作的转化率和操作频率。

设计标准

Shot by Bill S Kenney

是什么

在设计项目开始之初,设定一套标准化的视觉语言,包含色彩、图标、字体、排版等因素。

为什么

标准化的设计有助于建立应用程序和不同平台之间的一致性,它可以让项目更平稳地推进,更容易修改也可以减少错误的发生。

原型设计

Shot by Ramil Derogongun

是什么

这是准备阶段产品的早期可用版本。借助原型可以帮助设计和开发人员洞悉产品的功能,以最低的成本发现提升用户体验的可行方案和潜在可能性。

为什么

原型这种“低成本实验”可以让产品和项目的必要部分更清晰地展现出来,明确功能范围和需求。使用原型让开发人员有足够的时间和精力投放于必要的地方,从测试中获取信息,为迭代产品确立方向。

关注『UI设计达人』

看更多精选UI设计文章

责任编辑:

linux 轻量化图形界面,用这13个方法,帮你做出真正轻量化的移动 App 设计相关推荐

  1. 在 windows 下使用 Xming+Putty 显示 Linux 下软件图形界面

    From: http://www.blogjava.net/ivanwan/archive/2012/04/26/376670.html From: http://www.bubuko.com/inf ...

  2. 在windows下使用Xming+Putty显示Linux下软件图形界面

    From: http://www.blogjava.net/ivanwan/archive/2012/04/26/376670.html From: http://www.bubuko.com/inf ...

  3. linux下的图形界面扫雷游戏(Gtk+2.0)

    linux下的图形界面扫雷游戏(Gtk+2.0) 空间 转载请注明出处.http://www.cnblogs.com/dave_cn/ 之前做了一个字符界面下的扫雷(http://www.cnblog ...

  4. win10 使用Xming+Putty显示Linux下软件图形界面

    在windows下使用Xming+Putty显示Linux下软件图形界面 转载 ############# 安装Xming 和 Putty: ############# Xming是一个在Micros ...

  5. Xming + PuTTY 在Windows下远程Linux主机使用图形界面的程序

    Xming + PuTTY 在Windows下远程Linux主机使用图形界面的程序 一.原理     Linux/Unix的X Window具有网络透明性.X Window系统里有一个统一的Serve ...

  6. Linux下的图形界面编程

    一.Qt和GTK+ 虽然Linux下的大多数开发是基于字符界面的,但在Linux环境下也可以开发出美观大方的图形界面.经过多年的发展,目前已经存在多种用于在Linux下开发图形界面程序的开发包,其中较 ...

  7. xmanager linux,教您用xmanager启动Linux上的图形界面程序-Go语言中文社区

    对于习惯实体化的开发人员来说,还是界面化用着比较习惯,所以这就涉及到掌握使用Xmanager启动Linux上的图形界面程序,为了方便大家的使用,本集小编就详细的为大家讲解具体操作. 具体步骤如下: 1 ...

  8. 教您用xmanager启动Linux上的图形界面程序

    对于习惯实体化的开发人员来说,还是界面化用着比较习惯,所以这就涉及到掌握使用Xmanager启动Linux上的图形界面程序,为了方便大家的使用,本集小编就详细的为大家讲解具体操作. 具体步骤如下: 1 ...

  9. linux如何运行图形界面remotely在OEL8上

    其实对linux如何运行图形界面remotely一直搞得不是特别懂 因为EXADATA没有vncserver,所以需要借助其它机器的图形界面 原来一般是在一个OEL7机器上开一个vncserver,然 ...

最新文章

  1. The Shortest Statement CodeForces - 1051F LCA+最短路
  2. SqlBulkCopy与触发器,批量插入表(存在则更新,不存在则插入)
  3. 上海交大算法与数据结构
  4. 无法启动ASP.NET状态服务 错误0x8007277a;无法加载或初始化请求的服务提供程序
  5. php自定义弹窗,自定义弹窗Style样式
  6. 设计模式C++学习笔记之十三(Decorator装饰模式)
  7. LateUpdate、Late、FixedUpdate的意义
  8. Sql字符串函数(1)
  9. matlab复杂噪声产生实验报告,matlab加入噪声 - 范文中心
  10. linux 磁盘 io 瓶颈,记一次服务端 IO 瓶颈问题定位
  11. java接口自动化(二) - 接口测试的用例设计
  12. 验证码类库CaptchaMvc
  13. Linux硬链接和符号链接(转)
  14. 10年年初写的述职报告
  15. SQL必知必会 附录解读
  16. 基于SAP HANA 的SAP系统 安装
  17. epc项目设计流程图_EPC工程总承包管理流程图解。
  18. python如何打开txt文件、并算词频_python读取word文本进行词频统计
  19. Unity高德定位获取天气预报
  20. java excel导入 日期_java导入excel时处理日期格式(已验证ok)

热门文章

  1. java中的几个概念的比较
  2. Nature: 人的肠道古细菌基因组集
  3. 最后1周 | 高级转录组分析和R语言数据可视化第十一期 (报名线上课还可免费参加线下课)...
  4. Win8 x64 + Office Word 2013 x64 无法自动加载 Endnote X6 的解决方案
  5. R语言使用ggplot2包使用geom_boxplot函数绘制基础分组箱图(boxplot)实战
  6. R语言生存分析(survival analysis)与生存资料有关的概念详解
  7. R语言可视化面积图(area chart)移除轴标签与实际图形之间的空白区域实战:默认的面积图、移除轴标签与实际图形之间的空白区域
  8. R语言构建xgboost模型使用早停法训练模型(early stopping):自定义损失函数(目标函数,loss function)、评估函数(evaluation function)
  9. html5 桌面定时提醒,H5界面实现桌面推送通知
  10. MMD_3a_CommunitiesInSN