此前在一些设计网站看到一些设计趋势相关的内容,但大多是属于全品类的趋势。因此,我想通过我自己的了解和一些收集,重新整理一些属于移动UI设计方向的设计趋势,并且进行一些设计相关的分析。这样或许对于许多移动UI设计师来说会更加的实用一些,而非只是纯粹的停留在了解趋势而已。同时希望这些内容可以起到抛砖引玉的作用,欢迎大家一起来探索及讨论。
深色模式作为2020的主流设计趋势之一,早已上升到系统级别的设计了( iOS、material design),另外还有一些主流的APP也跟随系统进行了深色模式的设计。
1. iOS & Material design作为主流的手机系统,对于一些手机APP的设计非常具有指导意义,他们在其官网有有一些相关的指引,建议大家可以去对应的网站详细查看。
一些国内的安卓系统的也深色模式的设计,如OPPO、魅族、华为等。
国内外的APP都有用使用到深色模式,部分跟随系统的设定而变化,例如Instagram、知乎、微信、优酷;而部分则是以主题化的方式进行呈现,例如YouTube、 *** 音乐。
深色模式的设计不能简单粗暴的进行反色处理或变暗处理,处理不当可能还会产生反效果。因此需要整体考虑深色调的使用规则和逻辑,这里参考Material Design的规范总结了几个较为关键的点。
使用基础色进行延展
在设计之初你可以先设定一个最基础的深色,并且使用这个色调去贯穿整体深色模式的设计。尽量使用深灰色而非纯黑色,因为在深灰色上使用浅色文本的对比相对来说较弱些,可以减轻眼睛阅读的疲劳度。
从以下案例来看,“000000”(纯黑色)会显得颜色过深浅色文字过亮;“111111”和“222222”则适中;“333333”相对来说相对较亮,虽然文字阅读并无问题,但需要考虑往上叠加后整体设计是否偏灰。
通过层级叠加的颜色变化
为你的界面层级设计一个合理的透明度叠加变化规则,例如以底层为基准,往上每一层都叠加2%的透明度变化。如下:底层叠加0%,导航层叠加3%,内容层叠加6%,弹出类浮层叠加9%,操作反馈层叠加12%。以上是一个举例,实际则需要根据你的设计需要进行设定。
优化深色下的亮色对比程度
深色的背景下,文本或图标的饱和度或亮度过高会产生强对比,容易造成视觉疲劳,因此从白色切换到深色模式下的设计需要进行适当的调整,通过降低饱和度或明度来达到视觉和谐的程度。
深色模式在各大手机系统及主流APP的推进下,相信会越来越多的APP会跟随设计。但其实我们还需要思考,深色模式的设计解决了什么问题?是否都需要深色模式的设计?我们可以一起来探讨下。
二、新鲜多彩的颜色年轻人一直是移动互联网的主力军,年轻化的UI设计风格一直是UI设计师所追求的方向之一。年轻、活力、朝气是年轻化的表现特征,而设计师通过新鲜、多彩、大胆的颜色来表达这些特征是更容易产生设计共鸣。
如下面的案例,就是通过多颜色搭配、渐变色、对比色等设计方式来表达年轻化的设计。
从个人的经验中总结,如果只使用一种颜色来设计往往容易使界面变得单调,且具有应用的局限性。而多颜色搭配的设计更能让整体的UI界面变得丰富有层次,并且更加贴合年轻化的趋势。这里建议一个主色搭配多个次级颜色,整体上让使用者感知到整体的品牌色调,但却不会觉得单调。
如以下的一些APP的设计,也是使用主的品牌色再结合一些辅助色进行设计,来达到年轻化和颜色丰富感。
克日,BOSS直聘宣布《2020应届生春招求职趋势陈诉》,数据显示:停止2020年3月31日,在春招季(2月3日以来)活泼求职的应届生较去年增加了56%,但企业对应届生的雇用需求局限同比下降22%。...
编辑导语:西柚找找是一个为学生、教职工、学校和校周边用户群体提供信息便利的一个平台,它针对错乱的校园信息举办汇总分类,用户通过学生证,身份证举办实名注册,按照需求选择处事范例。本文作者对西柚找找举办了...
编辑导读:人们购物的方法从线下转酿成了线上,得益于互联网的成长。企业也徐徐将重心从线下转到线上,贸易模式的转变背后是生意业务逻辑的变革。电商的生意业务逻辑与传统线下生意业务模式产生了哪些变革?环绕这个...
编辑导读:许多人用过淘宝,可是未必传闻过淘宝特价版。它是一款购物不只省钱还送钱的特价版APP,本文作者将用AARRR模子拆解并阐明它,但愿对你有辅佐。 一、淘宝特价版是什么 是什么: 淘宝特价版由淘...
疫情加速了教育信息化的进程,教学场景转移到了线上,大部分师生通过直播以及其他教育产品实现教学。不过当学生从线下转到线上后,在课后作业的过程中,学生不可避免地遭受一些阻力。 背景: 国家大力倡导停课...
编辑导语:流量怎么提高一直都是营销人的困难,但如今各人都过于在意流量,反而忽略了产物自己;只要产物做好了,流量自然而然就来了。本文作者阐明白当下流量为王的时代,揭破流量本质。 一切的贸易代价都基于用...