
课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认真做教育 专心促就业
我们在山西达内学习ui设计培训课程的时候,针对不同的ui界面设计都进行了分析和研究,同时也对网页上的ui交互按钮的种类进行了整理和分析,可以发展,在不同的行业中,因为作用和目的不同,许多的按钮设计也是不一样的。对山西达内ui培训课程感兴趣的朋友可以与我们的咨询师联系获取进一步的了解。
下面,我们就来学习一下,在当下的环境中,有哪些ui交互按钮是我们比较常用的。
1. 3D 按钮
自初以来,操作系统按钮一直通过浮雕和阴影来区分外围背景。这种设计方案是基于一个简单原则——通过边框、斜度和阴影使按钮在背景内容衬托下显得醒目,这样就方便将其识别为一个可点击的元素。
Windows 95 对话框使用了厚重阴影和高光来制造 3D 效果,以辅助用户识别视觉层次,并了解哪些元素是交互元素。
2. 拟物按钮
就数字设计而言,拟物化是指 UI 元素的设计与现实物体相像的一种方式,它可以是对现实物体材质外观的复制,也可以是模拟真实按钮使其看似像实物按钮。拟物化设计借助用户对某物的先验知识使其理解如何去使用新的交互界面。
3. 扁平按钮
如今 UI 设计的一个重大转变是逐渐从拟物化设计向扁平化设计过渡,设计效果也不再有 3D 效果。
与拟物化设计不同的是,扁平化设计被视作探索数字媒体的一种方式,其不再试图去「还原」实物的材质外观。因此,其摈弃了起初用来告诉用户哪些元素可点击/可操作的厚重视觉线索。
当整个用户界面都是扁平化设计,用户如何知道按钮在哪里呢?
用户仍需要通过视觉指引(帮助用户理解如何使用界面的可感知线索)来知道页面上可点击/可操作的地方。因此,颜色在扁平化设计中相当重要,因为若使用扁平按钮,这些颜色将是帮助用户识别按钮的主要标识符之一。
4. 近扁平化设计及浮动操作按钮(FAB)
近扁平化设计是在原扁平化设计(或超扁平化设计)基础上的一种演变。这种设计几乎是扁平化的,但又在设计中通过细薄阴影、高光和叠层在用户界面制造出立体效果。
Google 的质感设计(Material Design)语言即是一个按正确次序使用这些立体效果的近扁平化设计案例,它创新出一种全新按钮:浮动操作按钮(Floating Action Button,简称 FAB)。
这些按钮置于用户界面顶层,并吸引用户进行进阶操作(Promoted Actions)或主要操作(Primary Actions)。它们作为行为号召按钮(用以促进进阶操作),是用户在某特定屏幕上最常用的单一操作。
Google Maps 是正确使用 FAB 的一个典例,用户在地图上最主要的操作行为是找到方向,所以Google FAB 的设计方式就能说得通。
另一个在 UI 设计中使用 FAB 的范例是 Evernote 。尽管 Evernote 的 UI 几乎近扁平化,其在导航栏添加了细薄阴影,同时也使用了 FAB (新建笔记)。
5. 虚拟按钮
2014年,UI 设计领域的主导性演变趋势之一就是虚拟按钮的应用。虚拟按钮是有基本形状的透明或中空按钮,按钮形状通常是矩形或正方形。
虚拟按钮也被称为「中空(empty)按钮」、「裸露(naked)按钮」或「镂空(hollow)按钮」。虚拟按钮的边框通常是一条非常细的线条,框内即纯文本。
虚拟按钮最初始于扁平化设计的发展演变,当苹果发布 iOS 7 后就变得非常流行。苹果 iOS 界面有很多虚拟按钮的应用。
简约的矩形方框加上框内整洁的字体,使得扁平化界面看起来非常完美。
「Name」、「Release Data」以及「Featured」类似虚拟按钮。「GET」是虚拟按钮。
虚拟按钮通常看似行为号召(Call to Action, 简称 CTA)按钮,同时展示其清爽外观。Specular 网站是应用此类按钮的一个很好的范例。
Specular 网站上使用了扁平化按钮「立即购买(PURCHASE NOW)」作为主要操作按钮,同时使用虚拟按钮「浏览(TAKE TOUR)」作为次要操作按钮。
达内时代科技集团致力于培养面向电信和金融领域Java、C++、C#/.Net、3G/Android、3G/IOS、PHP、嵌入式、软件测试、UID、网络营销、网络工程、会计、UED、web、Unity3D、大数据、童程童美等17大方向中高端软件人才课程与少儿教育课程。选择山西ui培训,不再孤军奋战,轻轻松松做IT高薪白领。太原达内培训带领有明确目标的学子迈向成功之路!想找工作的求职者可以加QQ:3373924515(太原达内就业服务部)咨询了解。