网页设计 ? 交互设计 ? 界面设计中有那些重要的设计“小元素”呢

界面设计中有那些重要的设计“小元素”呢

发表于: 交互设计. 评论
赞助商链接

通常刚在UI设计培训班出来的设计师经验不足,往往只能把界面做到“好看”而已,却忽略了界面设计中那些重要的设计细节,其实界面有很多设计“小元素”是非常重要而且实用,这里分享一些关于“小元素”的设计经验总结,希望能对UI设计师们有所帮助。

界面设计中有那些重要的设计“小元素”呢

设计中的“小元素”的这个说法还是有些太笼?#24120;?#25105;又把它们分为大致三个部分:

一、视觉类设计元素

二、提示类设计元素

三、功能类设计元素

一、视觉类设计元素

虽然说是视觉类的设计,但还是要尽量避免加入过多无用元素,不能为了装饰而设计。要结合自身产品,满足视觉平衡,要达到情感化设计的目的。

? 1.缺省页??

通常状态是,当前页面没有内容或无网络状态下出现的页面。由于此页面没有内容,设计师发挥的空间就变得很大。根据产品属性和品牌延展图形,结合动效或插画等情感化设计,可以很好的丰富页面内容。

缺省页界面设计

点融投资

我想应该没有人?#19981;?#30475;到缺少内容的页面,这会给用户心理造成很大的落差。非常影响体验。因此,缺省页就变得格外重要。如果设计得当,非但不会影响体验,反而会让用户?#19981;?#19978;它。

除了视觉方面的设计,缺省页?#37096;?#20197;添加刷新按钮,在功能层面进行完善。

界面设计中有那些重要的设计小元素呢

饿了吗

?2.头像??

现在,很多的产品已经?#29260;?#20102;死板的默认头像,给用户更多的选择。比如京东和小赢理财,就提供给用户多种头像选择。

头像设计

京东金融

头像设计

小赢理财

这种增加默认头像的做法虽然是锦上添花,但这种情感化的设计不仅在视觉上充满新意;同时,也让产品更加有趣。

?3.辅助元素??

移动端UI都是遵从相对应的规范来进行设计的,因此大部分产品都不太会在这种寸?#38142;?#37329;的地方放置一些硬核的纯装饰性元素。不过,设计师可以在卡片或是?#21892;?#21306;域上加入自己的想法。

卡片/?#21892;?#30340;布局多数是左字右图,而此类辅助元素并不仅仅是为了突出视觉上的设计。更主要的是保持卡片/?#21892;?#30340;结构平衡,或是填充多于的留白。让整体页面在视觉?#32454;?#21152;饱满吸睛。

辅助元素

乐刻运动?/ 众安保险

? 4.切换动效??

①标签栏动效

通过动效的使用,标签栏切换变得不再死板。用户在频繁切换页面时,不再觉得单调。

标签栏动效

土豆视频

②?#24049;?#26639;动效

?#24049;?#26639;动效

?#22909;?#38899;乐

二、提示类设计元素

“提示类”顾名思义,对于我们有提示作用的或是有引导帮助作用的都可以归为此类。那么我最先想到的,应该就是让人又爱又恨的“小红点”了。

1.徽标??

徽标通俗的叫法就是“小红点?#20445;?#19968;般固定在图标或是标签等右上角的位置。它具有非常强的提示作用。?#30475;?#21040;有时不想让它出现。

说起小红点就不得不提“红点强迫症”这个?#30465;?#23427;是现代人的社交网络依赖症之一,表现为看到它就不自觉的或是强迫性的点击它,让它消失。

提示类设计元素

QQ一键清除“小红点”

导致人们看到“小红点”就像点开的原因,是因为它的突然出现,破坏了周围的布局,打破了排版平衡。使某一块内容变得异常“醒目”。如果想让“小红点”在设计中不那么醒目,我们可以通过颜色来淡化它的存在。

界面设计中有那些重要的设计小元素呢

淘宝 / QQ邮箱

徽标的颜色多为红色。因为红色足够醒目且让用户能够警?#36873;?#24120;见的样式有“小红点”、“红点内嵌数字”、“红点内嵌字符”等样式。

界面设计中有那些重要的设计小元素呢

徽标的尺寸并没有一个?#32454;?#30340;规范。“小红点”在一些主流产品中,尺寸从16px到30px不等。填充字符内容的徽标具体尺寸需视情况而定,最小字号为20px。

显示的数字最高到“99”。超过了则显示“99 ”或“…”。一些信息或是评论位置的徽标,显示可以达到四位数的千位甚至更高。

界面设计中有那些重要的设计小元素呢

今日头条

徽标可以出现在多个位置上。标签栏、?#24049;?#26639;、金刚区、文字标题、头像等等,均可以发现它的存在。

2. 标签

标签的出现几率也非常高。常出现在电商、金融、生活娱乐类等产品中。它的主要作用是进行分类或突出重点。比如界面中需要我们区分开商品的属性;或是对重点商品、新品进行着重提示等,都需要用到标签。

标签的样式非常丰富。底色、边框、图标组?#24076;?#30697;形、圆角矩形、异形、标题样式等等。同时,标签可以出现在任何地方。首页、我的页面、商品详情页、搜索页、?#22836;?#21672;询页等等。我们打开淘宝、美团等APP,就可以发现多种样式的标签。

标签

美团 /?淘宝 / 飞猪

颜色方面,还是要以主色和中性色为主。加重提示可选用红色;突出活力和时尚感可用渐变色。所以这就需要我们根据具体需求和产品属性来搭配。但使用颜色不可过多,同时还要保持页面整体配色的平衡。

?3. 图标?

这里?#19968;?#25552;到四种主要图标类型:①“首页”或“我的页面”标题前的提示性icon;②新闻或公示模块左侧的标题图标;③页面加载图标;④动态提示icon。

①目前,越来越的主流产品已经?#29260;?#20102;标题前加图标这样的设计形式了。取而代之的是简单粗暴的将标题加粗加大。

在“我的页面”中还是有很多产品保留了标题前添加提示性icon的设计形式。

图标

京东金融 / 支付宝 / 饿了么

而之前出现过的在标题前加竖杠的设计形式在APP端已经基本见不到了。在网页端还是会时常碰到。个人认为竖杠的设计不仅过时,而且没有什么实际意义。有点为了装饰而设计的感觉。在?#21482;?#31471;页面这种寸?#38142;?#37329;的地方,这种意义不大的装饰直接去掉反而会更好。

界面设计中有那些重要的设计小元素呢

腾讯电脑管家 / 360

这可能也是为什么越来越多的产品不再标题前加icon的原因吧。毕竟,足够醒目的标题就已经很好的起到提示作用。大标题这种设计形式也是iOS11重点升级点之一。

当然,像一些动漫类或是娱乐类、直播类的产品,增加icon反而会让页面更有活力,更有趣味性。还是要根据具体产品而定。

界面设计中有那些重要的设计小元素呢

斗鱼 / 腾讯动漫

②新闻/公示模块,在电商、招聘、生活类等产品中经常出现。为了更好的让用户注意到,通常的做法是将左侧标题进行重新设计。同时,此类标题图标可以融入产品的品牌基因元素,更好的突出产品特点。

界面设计中有那些重要的设计小元素呢

拉勾招聘

③加载图标是当网络速度受限,或页面内容加载过多等因素出现时的提示性icon。多以小菊花图标为主。

界面设计中有那些重要的设计小元素呢

微信

动效设计在目前越来越受到人们的重视。这种流畅的表?#20013;?#24335;和出色的视觉吸引力受到了很多人们的?#25918;酢?#25105;们会发现很多的产品由开始的死板单调,变?#27809;?#27900;丰富起来。这里面动效设计功不可没。

界面设计中有那些重要的设计小元素呢

饿了么

界面设计中有那些重要的设计小元素呢

马蜂窝

? 4.气泡弹窗??

气泡出现的场景大致有两种:一种是新用户第一次登录或是更新完毕时。主要起到引导和教学的作用。

界面设计中有那些重要的设计小元素呢

陌陌

第二种是新功能、新产品或新话题推出时,主要作用是提醒和宣传。

界面设计中有那些重要的设计小元素呢

知乎

气泡的样式并不丰富,多数还是常规的矩形或圆角矩形。配色多是以主色或其他辅助色为主。不过,通过动效的融入,可以使气泡变得更加吸睛,产生不错的吸引力。

除此之外还有一种气泡弹窗是Toast,也就是吐司弹窗。它开始出现在安卓规范当中,是提示弹窗的一种。初始形态是在页面底部显示的黑色提示窗。经过演变,即使是在iOS的产品中也出现了类似的设计。形式目?#25226;?#21464;成了下拉刷新?#30001;?#24377;出提示,并且有可关闭的样式。

界面设计中有那些重要的设计小元素呢

豆瓣

? 5.页面指示器??

页面指示器就是在banner下方排布的小圆点。会随着banner进行同步轮播。轮播到当前页面时,对应的小圆点会有特殊显示。

页面指示器

拉勾招聘

页面指示器的形式不只局限于小圆点。其他的形式包括矩形、异形、数字、延展图形等等。

界面设计中有那些重要的设计小元素呢

网?#21331;?#25289;

同时,页面指示器还可以和进度条相结合。会让用户更加清楚轮播一张图所消耗的时间。

界面设计中有那些重要的设计小元素呢

爱彼迎

理想状态下,最多轮播四到五张banner图。也就是说页面指示器的小圆点也最多显示四到五个。电商类的产品轮播图会更多一些。

6.?#24049;?#26639;??

安卓?#24049;?#26639;最原本属于安卓规范当中。目前,很多iOS产品当中?#37096;?#22987;使用这种?#24049;?#26639;样式来进行设计。而原本属于iOS规范当中的分段选择器变得不那么常见了。

这种?#24049;?#26639;的优点是除了点击外,还可以左?#19968;?#21160;进行切换。而且并没有对?#24049;?#26639;中的选项有过多的数量限制。

?#24049;?#26639;常见的样式包括文字加线条、底色或品牌图形等,样式丰富。

音量条

荔枝FM / AcFun / 众安保险 / 飞猪 / 他趣

7.音量条

目前很多产品都将原本弹窗形式的音量显示,改为固定在顶部的条状形式。目的是为了不影响用户的使用体验。能够更?#20004;?#30340;使用产品。

音量条

Instagram

8.按钮

这里的按钮以uber为例。在登录时,输入完成?#21482;?#21495;下一步的时候,按钮会变成?#21364;?#29366;态。按钮与?#21364;?#28436;示动效相结?#24076;?i>用流畅的动画消除了用户?#21364;?#26102;产生的负面情绪,让整体简洁的页面变得充满活力。

因此,我们在设计按钮的时候,结合场景,可以添加创意。让死板的按钮变得有趣起来。

按钮

Uber

9.提示性文字

我们常可以看到在产品中的“我的”页面中,标题?#20063;?#20250;有一?#24418;?#23383;提示。有些是单纯的提示性文字,而有些则会显示重要的数据,方便用户在不点开二级页面的情况下进行查看。不仅如此,设计师还可以对这类字体进行设计,或是添加图标来丰富它的设计样式。

提示性文字

荔枝FM

三、功能类设计元素

1.标签栏

作为一个基础控件,位于底部区域的标签栏已经演化出多种丰富的样式。

①刷新/返回顶部

瀑布流类的首页形式,为了方便用户更新内容。在刷到一定位置后原本的首页按钮都会变为刷新状态。一些产品也将返回顶部一起做到了页面中。例如马蜂窝,就将返回顶部按钮放到了顶部右上角的位置。刷新、返回两不误。

淘宝刷新/返回顶部设计

淘宝

马蜂窝返回顶部设计

马蜂窝

②添加按钮

除此之外,一些具有添加或是上传功能的按钮常常?#36824;?#23450;在标签栏中间位置。可以让用户第一时间发觉。

小红书添加按钮

小红书

穷游添加按钮

穷游

这些巧妙的设计不占用过多空间,又能很好的解决用户遇到的问题,非常方便。

2.悬浮按钮

悬浮按钮最开始属于安卓规范当中,之后在iOS产品中也被保留了下来。虽然在官方规范中并没有此类按钮,但因为他使用起来非常方便,并且国内很多软件安卓端和iOS端都是使用一套页面。因此,包括悬浮按钮等一些共性设计就都被保留了下来,在两个平台均可得到使用。

悬浮按钮

马蜂窝

荔枝fm

荔枝fm

马蜂窝

马蜂窝

悬浮按钮不仅仅可以完成点击等常规操作,还可以作为收藏容器将更多地功能结合在一起。而且位于屏?#25381;?#19979;角,方便用户使用。

3.顶部扩展内容

扩展区域是我个人对它的命名,这部分区域在页面的顶部。因为空间足够大,所以许多产品可以添加更多的设计想法在里面。比如添加日期或者天气等。像一些特定的产品会在顶部的区域放置一些特有的功能。比如蚂蚁金服的智能助手等。

顶部扩展内容

蚂?#21916;?#23500;

界面设计中有那些重要的设计小元素呢

UC浏览器

界面设计中有那些重要的设计小元素呢

看理想

4.功能性按钮

此类按钮也是非常多见的。比如,?#24049;?#26639;?#20063;?#25110;标题栏?#20063;?#30340;更多按钮。它的形式多以三点为主,也有文字、阵列点灯样式。

三?#26639;躨con多是抽屉?#24049;?#20195;表图形;箭头基本都是下一页或返回的固定图标形式。以上图标均?#36824;?#27867;使用,已经成为了用户的一种固有认识。

因此,我们在设计时可以在此基础上进行升级或创意性优化。切不可过分颠覆他们,不然会增加用户的学习成?#23613;?/p>

功能性按钮

5.下拉/上划

①下拉刷新功能已经成为了一种默?#21916;?#20316;。根据产品的属性定位,我们会见到各种不同风格或是设计元素的下拉动效。设计师可以根据品牌延展元素,融入更多的想法,让页面变得更有趣。

下拉/上划

土豆视频

②拿点融投资来举例,上划到页面底部会出现宝箱图?#28014;?#38543;着我们上划的幅度,宝箱会打开出现宝物和品牌形象。上划到?#33258;?#30452;接跳转到另一页面。这种设计让我对页面底部的空间有了更多的想法。

界面设计中有那些重要的设计小元素呢

点融投资

6.视?#21040;?#24230;条

视?#21040;?#24230;条放置在视频底部,是视频类产品不可或缺的重要控件。当视频播放时会自动隐藏。除此之外,进度条位置上还可以集成其他功能。比如全屏、点赞、收藏、弹幕开关等。

哔哩哔哩的视?#21040;?#24230;条:当拖拽控制按钮时,小电视icon会随着我们拖拽的方向而改变。虽然看似是很不起眼的设计,但在视频区域?#37096;?#20197;左?#19968;?#21160;调整进度时,进度条的小icon就能很好的展示出来,充分体现其趣味性。

视?#21040;?#24230;条

哔哩哔哩

总结

以?#24076;?#23601;是对?#21482;?#31227;动端上关于“小元素”的总结。在整理期间还发现了其它有意思的设计,只不过它们并不属于“小”的这个属性,因此没有放进文章中。在体验产品的过程里,一些有趣的不错的设计想法,会对大家之后的作品、工作项?#30475;?#26469;很大的启发。希望能够有更多的朋友可以开始整理并分享出来。

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
?#19981;?#36825;篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。