做了这么久设计!还不知道UI界面包含哪些内容?

智能手机几乎已经渗透到了我们生活的方方面面,各种各样的app帮助我们生活的更加便利。设计师的工作职能就是给用户提供满足需求的UI,并且让用户在使用的过程中,获得愉快而满意的体验。为了建立有效的UI,设计师需要深入的了解移动端app的特性,了解他们的组成部分和功能。现如今随着移动行业的快速发展,很难给所有的app建立一个统一的界面标准,这篇文章将会介绍几种最常见、最流行的移动端UI界面,并展示他们不同的设计特点。

常见的几种界面

启动页

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

启动页是用户打开app时看到的第一个界面,它们通常很简洁,往往是一个logo、app的名称或者是这个产品的一句slogan。确保启动页在各个不同分辨率的屏幕上适配良好,设计师们常常把它们放在屏幕的中间,启动页的建议显示时间是4~8秒之间,超过这个区间,用户可能会感觉厌烦。此外,最好显示加载进度,这样一些不耐烦的用户就会知道还要多久才可以进入app。

引导页

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

虽然每一款app的结构和内容都是非常独立的,然而它们的引导页还是有一些相同的设计趋势。首先,很多引导页都习惯于用插画的形式来表现他们的新特性或者优点,这对用户很有吸引力,同时开发成本也很低。设计师们也常常会为app创建一个卡通形象,用它来模拟真实的使用场景,将它作为一种连接用户与app的情感纽带。引导页的文案也是十分重要的,它应该是简短的、有帮助的并且具有可读性。

Underwater World Encyclopedia app的引导页

首页和菜单栏界面

首页是每个app必不可少的界面,在app中起承上启下的作用,它是用户与app产生交互的主要界面。首页的设计取决于产品的类型,它包含各种各样常见的重要组件。首先,首页通常包含搜索栏或者搜索icon,可以帮助用户很方便的搜索他们需要的内容。同时,因为首页是用户通往app各个功能的起点,它通常包含导航栏,让用户可以访问到不同的单元模块。

Homey app的首页

为了让用户的交互更简单,可以创建一个菜单,里面包含一些常用的功能,仅通过一次点击即可抵达。这里有两种app菜单栏的布局方法:它可以是首页的一部分,或者是一个独立的页面,里面包含的内容最好少于7项,仅展示最重要的部分,如果想要包含更多内容,可以创建子类别。

侧边栏菜单

登录和个性化设置界面

许多app都要求用户注册登录自己的个人账号,所以每一个设计师都应该知道怎么样来设计登录界面,登录界面应该简洁清晰,以便用户可以快速的进入app。该界面通常有两个输入框,用来输入登录名和密码,和一个确认按钮。同时还应该有注册按钮。

个性化设置可以使app更加的适用于个人,并且可以帮助app为用户提供最有效的数据信息。同时,个性化设置数据也是所有社交网络app的关键部分,它引导用户进入虚拟社区网络,并且开始与其他人进行分享。设计师的主要任务就是通过流畅的UX设计,使这一步骤尽可能的方便友好。据交互设计组织所说,设计师首要考虑的是,个性化设置界面应该清晰明确,展示的信息数量应该限制在一定范围内,否则整个界面看上去会很乱很复杂。同时要时刻确保导航栏清晰可见,这样用户就不用花费太多精力去摸索app。最后,个性化设置界面的设计应该以目标受众为主导,如果想要你的app满足用户的使用需求,那么用户研究是必不可少的。

Dating App

数据统计界面

很多app都包含数据统计界面。它提供的数据越多,设计难度就越大。设计师需要确保所有的重要数据在屏幕上都是清晰可见并且有用的,曲线图、比例尺和统一的icon可以使整个界面看上去很流畅、很整洁。此外,数据统计界面需要为不同的数据划分不同的区域,以方便用户阅读。

NGIN App

日历

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

Bright Vibe Calendar App

电商类app界面

产品列表页

所有的电商平台主要目的都是为了销售产品,它的视觉设计对用户的决策有很大的影响。产品列表是公司销售的一系列商品。设计师的工作是设计一个可以吸引用户并且鼓励他们购买商品的页面。移动端的产品列表也可以像一些web端的电商平台一样,将产品类目放置在一个容器中,可以通过上滑来查看,一行中放置的产品数量应该根据屏幕宽度来决定。

Resto App

另一种展示产品列表的交互方式是水平滑动,为了让导航更加清晰明确,页面中最后一个选项不应该完全展示,这样可以提示用户滑动的方向。此外,产品的照片或者是插图应该是高清的,这样用户可以更好的了解他们要购买的商品。产品列表界面应该有一个行为召唤按钮,用户通过这个按钮可以将商品添加到购物车。这样用户就能从产品列表界面获取到商品,不用再额外跳转到特定的界面。

Cafe Coupon app

产品详情页

这个界面是给那些想要进一步的人,提供更多关于产品的信息,它用来展示产品的一些主要信息,以此来帮助用户决定他们是否真的需要这个产品。设计师一般将产品的展示图片放在屏幕中央,相关描述放在图片下方。设计师可以将尺寸、材质或者其他数据分成不同的模块,以便用户可以轻松的找到他们所需要的信息。

珠宝电商app

确认支付页面

如今越来越多的人愿意使用智能手机线上支付,各大公司纷纷对这一环节开始加以重视,力求打造最便捷的支付体验。支付是用户购买商品的最后一步,设计师的职责是让用户在使用的过程中感觉舒服。首先,确认支付页面的必有的部分是一个表单,用来填写一些个人信息,诸如姓名、银行卡账号此类。填写信息类别取决于用户在何地产生购买行为。此外,至关重要的一点是让用户知道他个人信息是安全的,所以设计师必须通过一些视觉元素让用户知道这些信息不会被泄露出去,令他们安心。可以使用一系列已经约定俗成的icon,它们被赋予了特定意义,并且经过了大公司的检验。

Cinema app

社交软件界面

联系人

联系人列表已经存在很久了,从最初的纸笔演变到今天的电子载体,它视觉风格如此多变的一个主要原因是:想要帮助人们保存朋友或者其他重要联系人的信息。联系人列表向用户展示的联系人应该按照首字母排序,每一个联系人都应该是可触的,点击进去后显示电话号码、E-mail之类的详细信息,比如Skype、Messenger之类的聊天软件。同时可以允许用户上传照片,帮助用户更方便的搜索联系人。

联系人界面

音乐播放器

音乐列表

音乐爱好者们喜欢根据不同类别创建自己的歌单,很显然每个音乐app都应该为用户提供这样的功能,列表页在不同的app上看起来都差不多:它会显示歌曲名称、歌手或者乐队,以及歌曲的长度。同时设计师可以为这首歌曲添加一张图片,可以是它的专辑封面。如果一首歌曲没有封面,那么这个位置仍然应该有一个icon,例如,一个音符标志。

Music app

播放页

人们可以通过它来控制自己听到的歌曲,该功能包括切歌、暂停和播放,这里需要醒目、易于识别的button。这一部分通常放在屏幕底部中央,上方主要部分放置一个与歌曲相关的图片,但是也有一些设计师会在此区域做一些音乐可视化的动效,这对于设计师来说是展示想象力和创造力的好机会。

ECHO app

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

------

译文来源:uxplanet.org

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,014评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,796评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,484评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,830评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,946评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,114评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,182评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,927评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,369评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,678评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,832评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,533评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,166评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,885评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,128评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,659评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,738评论 2 351

推荐阅读更多精彩内容