app开发网站建设细节设计

发布时间:2019-08-19来源:设计达人

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

1.缺省页
通常状态是,当前页面没有内容或无网络状态下出现的页面。由于此页面没有内容,设计师发挥的空间就变得很大。根据产品属性和品牌延展图形,结合动效或插画等情感化设计,可以很好的丰富页面内容。没有人喜欢看到缺少内容的页面,这会给用户心理造成很大的落差。非常影响体验。缺省页就变得格外重要。如果设计得当,非但不会影响体验,反而会让用户喜欢上它。
除了视觉方面的设计,缺省页也可以添加刷新按钮,在功能层面进行完善。

网站建设

2.头像
很多的产品已经放弃了死板的默认头像,给用户更多的选择。比如京东和小赢理财,就提供给用户多种头像选择。这种增加默认头像的做法虽然是锦上添花,但这种情感化的设计不仅在视觉上充满新意;同时,也让产品更加有趣。

3.辅助元素
移动端UI都是遵从相对应的规范来进行设计的,因此大部分产品都不太会在这种寸土寸金的地方放置一些硬核的纯装饰性元素。不过,设计师可以在卡片或是瓷片区域上加入自己的想法。
卡片/瓷片的布局多数是左字右图,而此类辅助元素并不仅仅是为了突出视觉上的设计。更主要的是保持卡片/瓷片的结构平衡,或是填充多于的留白。让整体页面在视觉上更加饱满吸睛。

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

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

1.徽标
徽标通俗的叫法就是“小红点”,一般固定在图标或是标签等右上角的位置。它具有非常强的提示作用。强大到有时不想让它出现。因为它的突然出现,破坏了周围的布局,打破了排版平衡。使某一块内容变得异常“醒目”。如果想让“小红点”在设计中不那么醒目,我们可以通过颜色来淡化它的存在。

移动端设计开发

2. 标签
标签的出现几率也非常高。常出现在电商、金融、生活娱乐类等产品中。它的主要作用是进行分类或突出重点。标签的样式非常丰富。标签可以出现在任何地方首页、我的页面、商品详情页、搜索页、客服咨询页等等。我们打开淘宝、美团等APP,就可以发现多种样式的标签。颜色方面,还是要以主色和中性色为主。加重提示可选用红色;突出活力和时尚感可用渐变色。所以这就需要我们根据具体需求和产品属性来搭配。但使用颜色不可过多,同时还要保持页面整体配色的平衡。

3.气泡弹窗
气泡出现的场景大致有两种:一种是新用户第一次登录或是更新完毕时。主要起到引导和教学的作用。第二种是新功能、新产品或新话题推出时,主要作用是提醒和宣传。

4.导航栏
安卓导航栏最原本属于安卓规范当中。目前,很多iOS产品当中也开始使用这种导航栏样式来进行设计。而原本属于iOS规范当中的分段选择器变得不那么常见了。导航栏常见的样式包括文字加线条、底色或品牌图形等,样式丰富。

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

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

三、功能类设计

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

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

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

4.功能性按钮
此类按钮也是非常多见的。比如,导航栏右侧或标题栏右侧的更多按钮。它的形式多以三点为主,也有文字、阵列点灯样式。三道杠icon多是抽屉导航代表图形;箭头基本都是下一页或返回的固定图标形式。已经成为了用户的一种固有认识。
以上,就是对手机移动端上关于“小元素”的总结。在整理期间还发现了其它有意思的设计,只不过它们并不属于“小”的这个属性,因此没有放进文章中。在体验产品的过程里,一些有趣的不错的设计想法,会对大家之后的作品、工作项目带来很大的启发。希望能够有更多的朋友可以开始整理并分享出来。