用户界面(UI)是人与机器之间发生交互的载体,也是用户体验(UX的一个组成部分用户界面由两个主要部分组成:视觉设计(即传达产品的外观和感觉和交互设计(即元素的功能和逻辑组织)。用户界面设计的目标是创建一个用户界面,使用户能够轻松、高效、愉快地与产品进行交互。下面由pixso带大家了解用户界面设计有哪些类型和设计模式。

用户界面(UI)

什么是UI设计:用户界面设计基础

用户的视觉体验。一个好的用户界面,需要具备功能强大可靠且使用感良好等特质。用户界面设计应最大限度地减少用户与产品交互所花费的精力,让用户可以更轻松达到目标

就用我们最熟悉的APP界面来举例,通常手机软件的UI用户界面设计主要由启动页、引导页、首页和菜单栏界面、登录和个性化设置界面、列表页构成如果继续细分菜单条、工具栏、工具箱、状态栏、滚动条、右键快捷菜单。

UI用户界面设计的三种主要类型

了解UI设计的基本概念之后,我们不妨继续深入。UI在当今互联网飞速发展的时代,并不是一个冷门行业,反而随着UI设计的发展和成熟,如今的UI设计类型已经如同雨后春笋,各类俱全。而其中最流行的三种主要类型,分别是:图形用户界面(GUI)、语音用户界面(VUI)、菜单驱动。

图形用户界面(GUI)--图形用户界面中,用户通过使用设备或触摸操作数字屏幕上的可视对象来与信息进行交互。优良图形用户界面元素应支持良好的可学习性和可查找性。其次,确保图形用户界面中的元素统一很重要的。总的来说,UI设计应该是一致的,进而创造一种控制感和可靠性。

图形用户界面(GUI)

菜单驱动的界面-- 这种类型非常普遍,它是图形用户界面的一部分,通常是指通过上拉或下拉,全屏或弹出式为用户提供菜单或列表形式的一系列命令所组成的界面。

语音用户界面(VUI)--也在慢慢进入大众的视野。全球销售的语音助手数量不断增加,这证明这些设备很有价值,但是语音用户界面需要不同于语音用户界面的设计方法。在语音用户界面中,设计人员需要创建一个高效的对话式 UI。在这其中,单词和语法至关重要。为了创造更多的人际互动,设计师需要学习心理学,并不断使用语音的原型来验证他们的设计决策。

语音用户界面(VUI)

如何用Pixso设计用户界面

通过学习Pixso资源社区《游戏视频直播APP》案例,快速了解UI用户界面设计的流程和技巧。

Pixso资源社区
step1:了解功能需求, 快速启动设计工作

用户界面UI设计涉及很多规则和规范,比如我们需要遵循易用性的原则,所谓易用性,就是说一个页面中的按钮应该指示精准,避免模棱两可或者不准确的引导,让用户可以快速简易地进行正确的操作,不需要花费过多的力气去阅读理解操作指引。对于初学者来说,设计一个符合用户习惯和界面设计规范的作品需要耗费大量的学习和操作成本,那么,直接在Pixso资源社区找到同类模板,可以快速启动设计工作。

Pixso资源社区
step2:绘制原型和布局,强调主次关系

那么如何去对这些格式和模块进行布局,就要说到UI设计中必须提到的词——“原型”,什么是原型?原型是对一个产品的可视化呈现,主要传达一个产品的信息架构、内容、功能和交互方式。

在Pixso资源社区找到《游戏直播APP》可以直接在模板基础上更改原型素材,但是,如果你想从0开始设计一个页面原型设计图,则需要去辨析和调配一个合理清晰的页面布局,梳理清楚页面设计的层次,主次关系,以及功能展示,如下图所示:

Pixso资源社区
step 3:设计用户界面的视觉风格和交互引导

用户界面有两种视觉模式,常规模式和黑夜模式,正如下图,游戏类面向的是年轻男性用户群体为主,因此视觉设计会以中心视觉设计、大范围的图片冲击力为主,因此我们的视觉模式设定为黑夜模式。

除了选择与业务模板匹配的图片素材外,还需要注意按钮和跳转交互的易用性,们在这款游戏竞赛软件的页面中,用户可以很清晰明了地清楚从哪里可以发出“观看直播”的操作指令,也可以仅根据页面就获得选择赛事的提示,而不需要作过多的解读和理解。

“界面”、“视觉”、“交互”组成了一个优秀APP的三大体验要素,一个优秀的设计师应该学会将三者融汇贯通在一起。如案例所示,视频直播界面中,可以上下拉动,展示更多用户互动聊天记录,也可以隐藏免干扰进入全屏幕观看模式。

Pixso资源社区

在Pixso,直接复制该素材就能编辑使用,设计一款成熟的游戏直播APP,还可以拓展至更多直播类的产品。

游戏直播APP

也许对于新人UI设计师来说,设计一套APP用户界面需要注意的地方非常多,难免有遗漏的地方不过一款好的UI设计工具,不仅可以提供足够多的组件资源,还可以为设计师提供灵感来源和设计提醒在使用Pixso的过程中,设计师可以从案例中学习到如何去为用户设计更具易用性的页面。

在Pixso中,UI设计师及其团队也可以通过在线设计系统,共同组建云端组件库。团队成员可以实时协作,还能自动生成链接,高效交付。Pixso还自带ArcoDesign、AntDesign、Tdesign等3000+设计资源和设计体系,一键复用项目中常用的图标、自制组件,所以如果你也想尝试UI设计,赶紧来上手试试吧!