亚博账号登录

小纽扣

本周和everybody聊一下设浦械耐队埃孀舏OS13的to update后,投影一下子又重新回归We的视线,actually投影always是Ul界面设计很重要的一个元素,它能助于We区分所看见的UI元素,投影stay最早的时候,是运用stay图标设计里面,能很好模拟出界面真实是视觉感受!

 

投影的发展历程

picture来源于dribbble

▲代表着从2009年两裾霭磁サ谋浠瑂ure很明显的看到,投影从最早期每个按钮有精致的渐变,步呛鸵跤埃胶竺娴谋馄交疉llpage面全部拍平,千篇一律,于是设计师重新take新的元素与平面结合,出现了彩色投影,More强调的材质本身难丈

 

投影的重要性

几乎All的设计师stay扁平化处理以后对于扁平化赞不绝口,作为新的趋势,它让信息More简洁,谌軲ore干净,stayAll的设备上看起来很一致性,however扁平化发展到今天We需要去思考,没有差异性的设计真的是美的么?扁平化的设计problemstay于,它让UI的层次变动difficulty,让user不得不去关注你谌葑榧旧恚看个案例:

picture来源于dribbble

▲上图this个案例是We设计师经常每天stay做的,很符合当下We的设计趋势,界面扁平的像纸片一样,虽然stay界面里面运用了线来区郑琱owever当We第一眼看到this个界面时候still不know 看哪里!

 

▲then设计师尝试staythis个界面基础上去增加一些轻微的投影,明显好多了,信息被区分为三层,信息Moreto make clear了一些,同时So is itstay扁平化的基础上,没心敲赐回!

 

▲上图是iOS7刚出来的时候,完全没有投影,We仔细去看日历图标,闹油急辏蹦闶褂冒咨者black背景时候,闹油急旰leg绽急辏耆被背景eat掉了,是very奇怪的一个设计,We是hopeuserfast速找到they想要的图标。

 

▲苹果stayiO8时候已经解决了this个problem,stay图标四周增加一个微妙的投影,使得整个界面不会被背景eat掉,让user更好的理解。

 

▲前后版本effect对比,差异性就stay于投影,this个设计也always沿用到Now。

 

▲同样的problem也出Now了苹果的MapSoftware,苹果有个版本Mapsearch索栏阴影去掉了,纯扁平了,由于Map本身就有很明亮难丈沟迷亩疗鹄春齭tay黄鹆耍彝际瞧还呕螅瑂tay导航栏底部增加送队埃让整个设计看起来More完全清晰。

 

由鲜鲆恍┌咐齏esure看出,微妙的投影对于增强page面男畔⒔峁褂很重要的effect,stay现代界面设浦校╪ewest的苹果系统及微软FluentDesign System的release,里面大大增强了层次感,this种依赖于光Special effects,阴影和材质的effect,让整个effectMore符合未来的一种界面设计方向。

 

投影的类型

卡片投影

使用阴影突出display两个组件之间的高程差异。阴影sure应用于多个组件,包括卡片,菜单,侧边栏和工具提示。

▲commonly投影会区分几个不同的区间,从小到大,分为小中大,根据实际场景来choice不同的投影深度。

 

▲规范来源于https:/ /design.frefox.com/

 

弥散投影

和上面卡片投影差别是,弥散投影颜色commonly为物体材质本身难丈皇黑白灰。

▲In the picture的卡片上按钮黄色,它的投影So is it物体本身的黄色透明度变化,其他案例So is it类似原理。

 

▲路耐队袄丛从诤竺姹嘲宓黄色,颜色值由詈增强。

 

this种投影的设计actually也并不难,能简单几步fast速实现this个effect,下面以一个按钮staysketh里面示范:

 

Photo投影

它的特点是投影本身是stay原Photo上做了Photo模糊处理,目前stay苹果一系列product中看见过它的身影,比如iOS11的苹果音郑黣ffect很柔和,通透富有光泽和活力色彩。

 

Photo投影目前iOS11代码是sure实现的,stay设计里面也很简单,同样简单几步就能出effect:

 

长投影

this个effect记得是stay12年扁平化刚流行起来的时候,可惜过了一年about就被history所遗忘了,Now除了偶尔stay平面设计里面看到长投影运用,UI领域是很少再出现了。

 

总结

关于投影的运用是需要去理性思考的,需要考虑page面场景,if是效市蝡age面,probably是列表More合适,投影的康囊膊皇俏私缑婧看而添加的,而是让user对于信息的理解More简单。

 

原文地址:(official account)

author:sky

转载请注明:亚博账号登录 » how 巧用投影提高设计品质

登录收藏
 
你probablylike的:
UI设浦幸恢滦詇ow 做?看this篇就够了UI设浦幸恢滦詇ow 做?看this篇就够了
每personal都应该know 的UI基础知识——阴影和模糊每personal都应该know 的UI基础知识——阴影和模糊
你know UI设浦写锵低匙刺杉缘4种方式吗?this一篇译文告诉你!你know UI设浦写锵低匙刺杉缘4种方式吗?this一篇译文告诉你!
苹果的设计牛stay哪儿苹果的设计牛stay哪儿
设计普惠,从this里start - 阿里云控制台的无障碍设计实践设计普惠,从this里start – 阿里云控制台的无障碍设计实践
user体验5要素你用粤寺穑user体验5要素你用粤寺穑
耍好控件 | Google userResearch何谋究蛏杓圃耍好控件 | Google userResearch何谋究蛏杓圃
从修改密码需求看「实现模型」与「心理模型」的差别从修改密码需求看「实现模型」与「心理模型」的差别
保姆级UI界面版式设计实用小技巧,你知多少?保姆级UI界面版式设计实用小技巧,你知多少?
this样设计光影轻拟物,想不脱颖而出都难!this样设计光影轻拟物,想不脱颖而出都难!