社交APP开发的UI界面设计

2019-07-18 标签:社交APP开发,UI界面设计 浏览数:19

摘要: 本系统的设计方案是在Axure RP 8平台上进行,Axure RP 8是一款非常强大的交互设计软件,能够很好方便的展现应用软件的交互模型,只需要将软件的交互面以及逻辑功能图写入软件中,就能体现出这款软件的成品效果。本系统的设计就是把Axure RP作为一个蓝图样本制作,展现该应用的各项功能以及交互效果等。

资讯主图

一、APP开发界面设计

(一)软件界面设计的前期准备工

1.确定软件的主题。明确软件的功能目的以及软件应有的功能特色。软件的核心需要围绕着软件的主题来进行设计。

2.UI设计师作为界面美化的主要人员,不仅仅要有专业的美术功底和设计能力,还应该有自己的逻辑思维了解软件功能之间的逻辑关系,交接任务给前端的开发人员提供系统的建议。

(1)软件设计前期,产品经理给出需求,UI设计师需要分析需求,定下软件的主题和软件的特色功能项目。写稿确定每个功能之间的逻辑关系与产品经理进行讨论最终确定初稿。

(2)以初稿为原型,在界面原型设计需要切好不同大小的图片,提供每个控件模块的图片,以及要设计出并实现该软件上线的效果原型。

(3)交接给前端开发人员,与开发人员共同讨论该项目需要实现的效果等。

3.确定界面

根据用户的自身特性、产品拥有的功能、系统任务、功能开发成本等因素确定适合的界面类型。

(二)软件界面设计

首先需要解释什么是软件的设计,一般软件设计开发的流程是:订单合同、项目启动、产品原型(草图)、视觉设计、开发、验收上线等几个基本流程。界面设计是是属于视觉设计上的一个流程,需要的工作内容一般 为规范制定、标注切图。

我个人对于UI/UE设计师的工作的理解是首先根据产品经理给的需求进行分析,然后写出各项功能的逻辑关系以及实现它的模拟效果然后制定他的规范内容,最后切图标注,标注每一项功能的实现和该项功能运行的功能逻辑,最后与程序员交接。在一款软件的界面设计上视觉设计我认为是最为重要的一个流程。它决定了这款软件的成色、如何展示它的功能等。

软件界面设计的原则:一致性原则、合理利用空间,保持界面的简洁、从用户的观点考虑、记忆负担最小化、清楚和谐的排列,保证界面的协调性。

(三)色彩

色彩是艺术表现的要素之一。在界面设计时,要有不同的色彩等级来明确的确定该界面的主题颜色以及用主题色来烘托软件的寓意或表达的情感等,将不同主次的颜色搭配构建一服简洁令人赏心悦目的界面。还可以根据色彩对人们情感上的不同影响,合理地加以运用营造出自身的色彩感情。

(一)色彩的感情

不同的颜色有着不同的情感,而人们往往喜欢在颜色上添加自己对事物情感的理解:抽象色彩情感(用户自身体会到情感),具象色彩情感(设计师故意引导的情感)。例如:红色的相反的色彩情感:正面的积极的、有活力的;负面的:血腥的、暴力的。

不同的颜色之间在设计运用上有着不同的效果,而在对于色彩的情感上是UI设计里一项很重要的细节,人们往往会根据产品颜色反馈的情感来对这款产品潜意识的进行相应的认知。

(二)主色和副色

首先我们要理解什么是主色和副色。主色大意上即是面积最大的色相、面积最大的色系、面积最大的冷色或暖色在、面积相等的情况下,颜色最重这四个代表,而副色则是与主色成相反的关系。

主色的优势在于在清晰、明确的情况下可以最快速、最简单的把画面的气质,副色则是相对于是一种衬托主色的关系,它的作用更大的在于烘托主色的情感。

画面在传递气质时候,版式的搭建很重要,因为版式是骨骼,但是更多的是情绪是通过色彩也就是主色与副色来表达出来的。

主色+副色+色调是组成一个色彩的三个很重要的关键点;一个画面有大面积的主色,会快速准确的传递调性。

(三)色彩的运用

什么是色彩?在我们常用的色彩一般分为印刷的CMYK以及电脑显示的RGB色彩。而我们在UI界面设计上常用的色彩模式是RGB模式。

色彩的搭配就是不同色相之间相互呼应调和的一个过程,而色彩之间的关系取决于色环或者色表上的位置,色相与色相之间的距离越近则对比越弱,越远对比越强力。所谓的色彩对比就是为了给用户在感官上营造一种强烈的视觉差异,会加深用户对产品的印象。

在国际设计潮流上曽有设计师给出过一个黄金比例:70:25:5,对应于主色,辅助色,点缀色,这也是当今设计配色比例的主流。一般情况下我们的产品界面上的色彩搭配不超过3种色相。

在色彩中区分为相邻色、间隔色、互补色三大要素色彩关系。相邻色即是相邻的两种颜色,搭配协调关联性强,是画面产生一种柔和感,但对比弱,对视觉冲击力不强;间隔色相比较相邻色,2色之间在色轮上相隔远一些,因此视觉冲击力会强于相邻色,间隔色使用非常广泛,既没有互补色冲击力强烈,又比相邻色的柔和多了一些明快活波、对比的感觉;互补色搭配可以表现出一种力量,气势与活力,有非常强烈的视觉冲击力,但容易造成审美上的疲劳。


二、交互设计

交互设计(英文Interaction Design,缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。我个人的理解简单而言就是人和机器之间的互动或者说是人对机器进行的操作指令然后机器反馈结果给人,在现在信息科技发展爆炸的时代里,交互设计被定义可以分为“可用性”和“用户体验”两个特点。


三、结论

UI设计是一款软件开发的起步也是定位一款软件实用性以及其功能性的一步。米维信息认为UI设计可以说是定义一款软件的走向,可以让用户群体更加直接明了的操作并且了解这款软件,因此它在软件开发的过程里占比重是十分大的。本文通过对Aurex RP 8 这个平台上实现了一款社交应用的UI设计以及它的逻辑功能可视化效果图。这定义了未来这款软件的开发流程,并且对我以后设计以及开发一款软件有了一定的思维步骤。


关键字: 社交APP开发,衡阳APP开发

提供衡阳微信小程序开发,微信营销功能开发、公众号开发等开发服务