获取包含滚动条宽度_学了这么久UI，你还不知道UI设计界面包含哪些？

可以说现在的智能手机几乎已经渗透到了我们生活中的方方面面&＃xff0c;各种各样的手机APP让我们的生活变得更加便利。而UI设计师的工作职能就是给APP用户提供满足需求的UI界面&＃xff0c;并且让用户在使用的过程中&＃xff0c;获得愉快而满意的体验。

为了建立有效的UI&＃xff0c;设计师需要深入的了解移动端APP的特性&＃xff0c;了解他们的组成部分和功能。现如今随着移动行业的快速发展&＃xff0c;很难给所有的APP建立一个统一的界面标准。

那么下面将会给大家介绍几种最常见、最流行的移动端UI设计界面&＃xff0c;并展示他们不同的设计特点&＃xff0c;学以致用&＃xff0c;打开创意思维。

常见的几种UI设计界面 启动页

首次打开使用app时一般会弹出一个启动页面&＃xff0c;这也是是影响用户第一印象的重要因素&＃xff0c;这种最初的愉悦体验很有可能让这款app流行起来。这就是为什么要格外重视启动页的原因。

启动页是用户打开APP时看到的第一个界面&＃xff0c;它们通常很简洁&＃xff0c;往往是一个logo、app的名称或者是这个产品的一句slogan&＃xff0c;呈现在用户眼前。

为了确保启动页在各个不同分辨率的屏幕上适配良好&＃xff0c;UI视觉设计师们常常会把它们放在屏幕的中间位置或者底部位置。

启动页的建议显示时间是4~8秒之间&＃xff0c;超过这个区间&＃xff0c;用户可能会感觉厌烦。此外&＃xff0c;最好显示加载进度&＃xff0c;这样一些不耐烦的用户就会知道还要多久才可以进入app。

珠宝电商APP启动页为例 引导页

引导页是APP可能提供给新用户的一组介绍产品功能、特性以及优点的界面&＃xff0c;它们在用户首次使用的时候加载。帮助用户熟悉它的控件和对应功能&＃xff0c;让用户更好的上手使用&＃xff0c;并且帮助用户判断这款软件是否有用。

虽然每一款app的结构和内容都是非常独立的&＃xff0c;然而它们的引导页还是有一些相同的设计趋势。而很多引导页都习惯于用插画的形式来表现他们的新特性或者优点&＃xff0c;这对用户很有吸引力&＃xff0c;同时开发成本也很低。

设计师们也常常会为app创建一个卡通形象&＃xff0c;用它来模拟真实的使用场景&＃xff0c;将它作为一种连接用户与app的情感纽带。还有引导页的文案也是十分重要的&＃xff0c;它应该是简短的、有帮助的并且具有可读性。

Underwater World Encyclopedia app的 引导页

首页和菜单栏界面

首页是每个app必不可少的界面&＃xff0c;在app中起承上启下的作用&＃xff0c;它是用户与app产生交互的主要界面。

首页的设计取决于产品的类型&＃xff0c;它包含各种各样常见的重要组件。首先&＃xff0c;首页通常包含搜索栏或者搜索icon&＃xff0c;可以帮助用户很方便的搜索他们需要的内容。

同时&＃xff0c;因为首页是用户通往app各个功能的起点&＃xff0c;它通常包含导航栏&＃xff0c;让用户可以访问到不同的单元模块。

Homey app的首页

为了让用户的交互更简单&＃xff0c;可以创建一个菜单&＃xff0c;里面包含一些常用的功能&＃xff0c;仅通过一次点击即可抵达。这里有两种app菜单栏的布局方法&＃xff1a;它可以是首页的一部分。

或者是一个独立的页面&＃xff0c;里面包含的内容最好少于7项&＃xff0c;仅展示最重要的部分&＃xff0c;如果想要包含更多内容&＃xff0c;可以创建子类别。

侧边栏菜单

登录和个性化设置界面

许多app都要求用户注册登录自己的个人账号&＃xff0c;所以每一个设计师都应该知道怎么样来设计登录界面&＃xff0c;登录界面应该简洁清晰&＃xff0c;以便用户可以快速的进入app。

该界面通常有两个输入框&＃xff0c;用来输入登录名和密码&＃xff0c;和一个确认按钮。同时还应该有注册按钮。个性化设置可以使app更加的适用于个人&＃xff0c;并且可以帮助app为用户提供最有效的数据信息。

同时&＃xff0c;个性化设置数据也是所有社交网络app的关键部分&＃xff0c;它引导用户进入虚拟社区网络&＃xff0c;并且开始与其他人进行分享。设计师的主要任务就是通过流畅的UX设计&＃xff0c;使这一步骤尽可能的方便友好。据交互设计组织所说。

设计师首要考虑的是&＃xff0c;个性化设置界面应该清晰明确&＃xff0c;展示的信息数量应该限制在一定范围内。否则整个界面看上去会很乱很复杂同时要时刻确保导航栏清晰可见&＃xff0c;这样用户就不用花费太多精力去摸索app。

最后&＃xff0c;个性化设置界面的设计应该以目标受众为主导&＃xff0c;如果想要你的app满足用户的使用需求&＃xff0c;那么用户研究是必不可少的。

Dating App

数据统计界面

很多app都包含数据统计界面。它提供的数据越多&＃xff0c;设计难度就越大。设计师需要确保所有的重要数据在屏幕上都是清晰可见并且有用的&＃xff0c;曲线图、比例尺和统一的icon可以使整个界面看上去很流畅、很整洁。

此外&＃xff0c;数据统计界面需要为不同的数据划分不同的区域&＃xff0c;以方便用户阅读。

NGIN App

日历

事件app、待办清单app和一些个人app都有日历界面&＃xff0c;取决于app的类型。日历主要有这么几种功能&＃xff1a;提醒或者制定计划。它的视觉风格应该符合用户的心情和使用目的。

Bright Vibe Calendar App

电商类app界面 产品列表页

所有的电商平台主要目的都是为了销售产品&＃xff0c;它的视觉设计对用户的决策有很大的影响。产品列表是公司销售的一系列商品。设计师的工作是设计一个可以吸引用户并且鼓励他们购买商品的页面。

移动端的产品列表也可以像一些web端的电商平台一样&＃xff0c;将产品类目放置在一个容器中&＃xff0c;可以通过上滑来查看&＃xff0c;一行中放置的产品数量应该根据屏幕宽度来决定。

Resto App

另一种展示产品列表的交互方式是水平滑动&＃xff0c;为了让导航更加清晰明确。页面中最后一个选项不应该完全展示&＃xff0c;这样可以提示用户滑动的方向。

此外&＃xff0c;产品的照片或者是插图应该是高清的&＃xff0c;这样用户可以更好的了解他们要购买的商品。产品列表界面应该有一个行为召唤按钮&＃xff0c;用户通过这个按钮可以将商品添加到购物车。

这样用户就能从产品列表界面获取到商品&＃xff0c;不用再额外跳转到特定的界面。

Cafe Coupon app

产品详情页

这个界面是给那些想要进一步的人&＃xff0c;提供更多关于产品的信息&＃xff0c;它用来展示产品的一些主要信息&＃xff0c;以此来帮助用户决定他们是否真的需要这个产品。

设计师一般将产品的展示图片放在屏幕中央&＃xff0c;相关描述放在图片下方。设计师可以将尺寸、材质或者其他数据分成不同的模块&＃xff0c;以便用户可以轻松的找到他们所需要的信息。

珠宝电商app

确认支付页面

如今越来越多的人愿意使用智能手机线上支付&＃xff0c;各大公司纷纷对这一环节开始加以重视&＃xff0c;力求打造最便捷的支付体验。

支付是用户购买商品的最后一步&＃xff0c;设计师的职责是让用户在使用的过程中感觉舒服。首先&＃xff0c;确认支付页面的必有的部分是一个表单&＃xff0c;用来填写一些个人信息&＃xff0c;诸如姓名、银行卡账号此类。

填写信息类别取决于用户在何地产生购买行为。此外&＃xff0c;至关重要的一点是让用户知道他个人信息是安全的。所以设计师必须通过一些视觉元素让用户知道这些信息不会被泄露出去&＃xff0c;令他们安心。

可以使用一系列已经约定俗成的icon&＃xff0c;它们被赋予了特定意义&＃xff0c;并且经过了大公司的检验。

Cinema app

社交软件界面 列表页

人们常常使用各种各样的社交软件聊天或者浏览动态&＃xff0c;列表页是一个连续不断的页面&＃xff0c;包含用户想要浏览的动态或者其他消息。

实践表明&＃xff0c;移动端的用户喜欢快速的浏览列表页&＃xff0c;这就是为什么他们需要一个简洁清爽的视觉设计的原因&＃xff0c;不要加载过多的视觉元素。

信息可以通过用户滑动屏幕&＃xff0c;逐个呈现&＃xff0c;确保导航栏清晰可触&＃xff0c;一屏中的最后一条信息应该被部分显示。

Timeline app

联系人

联系人列表已经存在很久了&＃xff0c;从最初的纸笔演变到今天的电子载体&＃xff0c;它视觉风格如此多变的一个主要原因是&＃xff1a;想要帮助人们保存朋友或者其他重要联系人的信息。

联系人列表向用户展示的联系人应该按照首字母排序&＃xff0c;每一个联系人都应该是可触的&＃xff0c;点击进去后显示电话号码、E-mail之类的详细信息&＃xff0c;比如Skype、Messenger之类的聊天软件。同时可以允许用户上传照片&＃xff0c;帮助用户更方便的搜索联系人。

联系人界面

音乐播放器 音乐列表

音乐爱好者们喜欢根据不同类别创建自己的歌单&＃xff0c;很显然每个音乐app都应该为用户提供这样的功能。

列表页在不同的app上看起来都差不多&＃xff1a;它会显示歌曲名称、歌手或者乐队&＃xff0c;以及歌曲的长度。

同时设计师可以为这首歌曲添加一张图片&＃xff0c;可以是它的专辑封面。如果一首歌曲没有封面&＃xff0c;那么这个位置仍然应该有一个icon&＃xff0c;例如&＃xff0c;一个音符标志。

Music app

播放页

人们可以通过它来控制自己听到的歌曲&＃xff0c;该功能包括切歌、暂停和播放&＃xff0c;这里需要醒目、易于识别的button。

这一部分通常放在屏幕底部中央&＃xff0c;上方主要部分放置一个与歌曲相关的图片&＃xff0c;但是也有一些设计师会在此区域做一些音乐可视化的动效&＃xff0c;这对于设计师来说是展示想象力和创造力的好机会。

ECHO app

现如今&＃xff0c;移动端app快速发展&＃xff0c;每天都有大量的新商品出现&＃xff0c;它们在解决用户新型需求的同时也产生了很多新型界面&＃xff0c;设计师应该做好准备面临这一挑战&＃xff0c;一直保持创新精神&＃xff0c;从启发中迸发灵感。

如果你现在是零基础或者是想转行学好UI设计&＃xff0c;最好的学习方式就是报班系统学习&＃xff0c;学的全面&＃xff0c;学的专业&＃xff0c;学完就业薪资高&＃xff0c;只有不断提升自己&＃xff0c;提高收入水平&＃xff0c;才能有效改变自己的现状。

这个世界上没有绝对的公平&＃xff0c;但是努力了&＃xff0c;就会增加成功和变好的可能性。不管你现在经历着什么&＃xff0c;不管前路多么坎坷&＃xff0c;你的每一次努力&＃xff0c;都会缩短你和你想要的生活距离&＃xff01;