产品界面设计（移动产品登陆界面设计）

本文目录

• 移动产品登陆界面设计
• 产品设计的人机交互界面设计主要作用
• 产品界面原型设计排版规则
• UI产品设计有哪五层
• UI界面设计风格大致都有哪些
• “界面设计”在整个产品设计过程中的重要性如何
• 界面设计是什么

移动产品登陆界面设计

首先和大家介绍一下项目背景，它是一个地产客户资源管理的APP，目标人群就是我们公司的销售人员约3000人，以前他们在客户资源管理上主要使用的后台管理系统，但是常常会出现资料跟进不及时，或者资料录入不完善的情况，这次在APP中得到了改善并增加了一些新的功能。

我主要负责这次界面的设计工作，整个界面设计完成还算比较顺利，只是登录界面迟迟不过稿，因为想到咱们的产品是工具类、需要登录之后才能进入界面进行操作，因此登录界面就是大家进入APP看到的第一个界面，在设计上我采用的是全屏大图的商务风格，使用了一个和房产有关和商务类的图片。

不过后来老板反馈登录界面的背景图像有一层雾，他建议图片最好是蓝天白云看上去活跃点，不要气死沉沉的。

大家看到蓝天白云可能会笑，这设计出来会不会太low，我开始也是这样想的但是转念一想。老板只是觉得这个界面没有生气不活泼，我们的目标人群本来就是自己公司的销售员工，在设计上一定要是充满朝气。

后来我尝试了多种图片类型：商务办公、海景房、纯意向类图片等，觉得都不能很好的表达。这时候同事看到我有点纠结，于是就提醒我我换个思路不一定要设计成这种全屏大图风格，现在很多APP登录界面设计都较为简洁，不用拘泥于一种样式。那还有什么样式较为适合呢？于是晚上回家我对登录界面的设计样式进行了梳理，我主要从三个方面入手：

1、如何进行参考收集？

2、参考收集完后怎么办？

3、如何选择符合产品的设计样式？

如何进行参考收集

参考收集大家也可以理解为寻找参考，不管是样式参考还是版式参考，在设计前期一定是会经历收集的过程。收集可以分为网上资源和项目资源，网上资源也就是大家熟知的花瓣、追波、Behance、站酷、UI中国这些设计平台，大家可以通过这些平台了解当前流行趋势、样式风格、界面分析等内容获取帮助。

除此之外，我们还可以收集各行业优秀的APP、竞品对他们进行分析，因此收集这一步是必不可少的。下图是我手机上常备的觉得还不错的APP：

由于这次做登陆界面，因此我首先将这些APP的登陆界面大体过了一遍，了解每个行业的特点。然后我在搜集了一些资源管理和工具类的APP（竞品分析是必不可少的）。

收集完成后，我们可在每个行业挑选两到三款APP进行截图，到这里收集工作也就完成了。（收集工作虽然简单，但是通过长期积累你会熟知每个行业的设计特点、你知道某个APP更新了，它为什么要更新，更新之后有什么好处等）

参考收集完后怎么办

参考收集完后就需要将上面收集到的截图进行相关的分类（风格样式分类、展示内容分类等），在设计时由于我们的内容已经确定，因此只需要进行风格样式分类即可。这里我将登录界面的样式分为：白色简洁、轻装饰、纯色背景、全屏大图、半屏图片、插画背景六大分类。通过分类我们可以了解到不同行业他们采用的设计方式。

1、白色简洁

白色简洁风格是目前较为常见的样式，其目的以信息录入为目的，多用于体量比较大的APP中，在设计时没有采用较为复杂的装饰元素，整个界面以简洁设计为主，在设计上主要是信息展示的排版设计。如下图所示：

以得到、土豆、拉勾为例，在展示上出入不大，主要设计是信息的排版，得到和拉勾类似采用线条输入框，居左排版样式。土豆采用椭圆矩形输入框，居中排版，同时还加入Logo体现品牌感。

2、轻装饰背景

轻装饰背景也就是在简洁风格的基础上添加一些品牌装饰元素，相较于简洁风格该设计更能体现界面细节，增加界面品牌感，同时也不影响信息的录入。如下图所示：

轻装饰在设计上可以有四种展现效果：第一类似网易云音乐和网易美学，取产品相关元素进行装饰；第二类似好奇心日报做模糊处理增加界面层次感；第三类似网易云课堂加入意向类的图片；第四类似优酷、36Kr添加几何元素进行装饰。

3、纯色背景

纯色背景在使用时往往采用品牌色，同时搭配Logo进行设计，体现品牌感。需要注意的是，该方式多用在登陆信息简单，或者以第三方登陆为主的界面中。如下图所示：

Keep、问卷网、腾讯课堂均采用品牌色进行设计，同时可以看出他们的登陆信息都较少，在视觉设计上也较为简洁。

4、全屏大图

全屏大图也就是在登陆信息下方采用图片的形式填充，其优势是图片更容易吸引人的注意力，更容易传递情感引起用户共鸣，如果采用产品相关的图还能够提前给用户有个预期。其缺点是信息和背景融合度较高，对于一些体量较大的产品不太适合，多用在垂直类的APP中。如下图所示：

全屏大图其图片是整个界面的核心，因此想要找到一个符合产品的图片是不易的事情，在进行图片查找时我们也需要有目的性的寻找，比如咕咚、钉钉选择的和产品相关的图片；每日开眼、随办、企业查用了较为意向的图片；马蜂窝采用全屏动图让整个登陆界面更加生动（使用动图要慎重，因为用户往往会使用过长的时间查看，拉长登陆时间）。

5、半屏图片

半屏图片和全屏图片类似都可以通过图片传递产品核心功能、或者通过意向图传递产品品牌感，只是半屏图片其重点是以登陆信息为主。其缺点是在设计上不容易出彩，目前仅有少部分的APP采用该样式，如下图所示：

小猪短租、NOTHING、蚂蚁短租均使用的是半屏图片的形式，可以看出其登陆操作模块在界面的黄金位置上，整个界面设计会有一定的分割感。

6、插画背景

相比于图片设计，插画背景有个优势就是通过自己手绘不需要到处找图片，也不用担心图片的版权问题，可以完全根据自身产品进行插画制作。需要注意的是插画设计最好加入品牌识别元素，或者和品牌相关元素，这样才会显得有意义。如下图所示：

印象笔记采用闹钟、文档的方式也让人一目了然知道他的记事功能，in的Slogan就是有趣的人都在in，这幅插画刚好也表现出了这个意思，最右采用品牌章鱼卡通形象，让界面具有可识别性。

如何选择符合产品的设计样式

上面我们已经进行了参考的收集、截图分类并做了简单的样式分析。现在我们就需要将这些样式结合我们实际的产品进行梳理，选出适合我们当前的设计方式。

任何界面的设计都是有理有据的，也就是我们的设计需要根据我们的设计目的、老板预期、竞品分析多方面进行筛选。

1、设计目的

首先我们来看登陆界面的目的主要有哪些？这里我主要归纳了4个方面：个人信息录入、品牌展现、传递信息（商业信息、产品核心作用）、故事或产品的人文情怀。这些目的分别对应着不同的设计样式。

个人信息录入： 主要使用在体量较大的项目中，其主要涉及目的就是高速高效的帮助用户登录，结合上面的样式分析我们可以推出白色简洁样式、半屏图片展示样式、轻装饰风格是以个人信息录入为主要目的的。

品牌展现： 如果你觉得千篇一律的白色简洁风格没有特点，你也可以根据需要加入品牌识别，比如在界面中添加Logo、添加和产品相关的图片、插画元素等。结合上面的样式分析，主要有轻装饰风格、纯色背景、插画背景、全屏大图能够更好的提现品牌化。

传递信息： 当你的登陆信息较为简单时，比如仅有第三方或者简单的登陆信息，这时候登陆界面不单单是以个人录入为主，还会起着传递商业信息、产品信息等作用。结合上面的样式分析，主要有轻装饰风格、全屏大图、半屏图片能够更好的传递产品信息。

故事或产品的人文情怀： 这个比较适合小众的产品，我们知道图片是最好的传递情感的方式，因此全屏图片是不错的选择，当然如果产品预算较高，我们也可制作成视频，更能够引起用户的共鸣。

分析完后就需要结合我们产品的设计目的进行选择了，根据前期的需求沟通我们的登陆界面信息简单，同时用户需要登录之后才能进入界面，因此在展现上以品牌展现和传递信息为主，因此我们可以推出我们的产品较为适合轻装饰风格、纯色背景、插画背景、全屏大图。

2、老板预期

有时候你分析的不一定是正确的，你可以将你的分析和经理说，经理会比你更清楚和老板想要哪种。在前言部分我也提到过，老板想要登陆界面较为活跃，体现销售行业的朝气。因此在设计时我们需要考虑这一因素。

3、竞品分析

竞品分析往往能够解决我们采用何种样式，我们的项目定位很明显，就是客户资源管理，目标人群也只是本公司销售人员使用，因此可以将其归纳为工具类的APP，在工具类的APP中常见的设计方式主要有：白色简洁、纯色背景、全屏大图。

客户资源管理类的优秀APP几乎很少，因此这里我找了以工具使用为主的APP，贝壳找房面向人群更广，主要为大家提供找房信息，他的用户群体主要是用户，当然他希望用户快速登录为主，因此采用了能够高效操作的白色简洁风格，这个样式我从侧面问过经理，觉得不太适合。最后我们决定做两个风格，纯色扁平风格和商务背景能够很好的提现品牌化。

最后，为了提高过稿率，我将最后得出的纯色背景和全屏大图样式各设计了一稿，提交给老板进行反馈。他们选择的是纯色背景的风格样式，到这里我们就成功过稿了。

这个分析过程大家可能会觉得很繁琐，其实当你将收集之后的图片分类对比分析时，基本就能够确定采用何种风格了，这里提醒大家，你的分析可能和老板预期会有出入，因此最好能够设计两个版本给老板选择，同时分别阐述使用他的原因，这样就能大大提高过稿率。

总结

今天主要以登陆就界面为例，和大家分享设计没想法时可以通过收集、分类、分析对比三个方面进行梳理，帮助我们有理有据的找到适合产品的设计方案，提高过稿率。

1、收集：平时多收集优秀APP，在你不知道怎么做的时候我们可以结合竞品，将这些APP大致过一遍，了解每个行业的设计特点，为后面的分类做准备。

2、分类：通过分类可以就可以知道有哪些风格样式，了解他们的设计优缺点，可以帮助我们做到心中有数。

3、分析：根据产品设计目的，结合上面的样式分析，选出适合我们产品的设计方式。

以上就是我在项目中遇到问题的总结，希望对大家有帮助，看完你可以找个界面来分析试试，看看是不是这样。

产品设计的人机交互界面设计主要作用

人机交互界面是产品设计中实现人与机器信息传递的界面，是人、机器及环境发生交互关系的具体表达形式，是用户与机器交互信息的媒介。人机交互界面设计是基于用户对机器的感知而进行，要求产品设计师以用户的需求出发，强调可用性及用户友好性。

根据据用户需求心理，博拉图工业设计整理人机交互界面设计的原则有：1、一致性。从信息的表达、界面控制操作等方面与用户感知的模式尽量保持一致。2、适应性。界面能多方面适应用户。3、结构性。界面设计采取结构化以减少复杂度。

具体步骤：（1）进行产品设计前分析用户特点。考虑不同用户的认知能力，满足人的多样性与文化的多样性条件，实现用户对人机界面的多样性需求。（2）产品设计师设计人机交互界面时要充分考虑人的视觉、触觉的作用。信息可视化表达要符合人机工程学的原理，要符合美学上的基本原则，要容易理解便于掌握。要融入人性化设计元素和情感因素，以满足人们日益增长的高层次情感需求。人们根据显示内容来解释所获取的可视信息。因此，大小、颜色、形状等都会直接影响信息提取的难易程度。很好地表示可视信息是产品设计中设计友好界面的关键。（3）用户从界面提取到的信息需要存入人的记忆中，供以后回忆和使用。人机交互界面设计要尽量减少用户记忆负担，采用有助于记忆的产品设计方案。要求产品设计师在设计人机交互界面时不能采用复杂的操作顺序，既要满足用户需求又尊重用户需求。

产品界面原型设计排版规则

01字体：类型&字号

在原型页面的文字设计中，字体的选择方面建议使用苹方（macOS）或是微软雅黑（Windows），以便达到更好的显示效果。

字号我个人比较常用的是12、13、14、15、17，偶尔会用9、10、20。

02配色：色彩&界面

在原型页面的色彩设计中，最好保持一致，无论是文本还是其他图形、图片不要使用太多非黑灰白以外的色值。

如果用于演示的产品原型稿件中需要配图标，则需要保持图片的一致性，大小及样式。但在实际的工作中，除了一些指示性比较强的图标，比如搜索、设置、分享等等，其他的尽量不要使用图标素材。

组成原型界面的素材也要尽可能的避免混搭，比如从成熟产品中截图然后应用到自己的产品原型当中。

在Axure9中新增了AdjustColor【颜色调整】，可对图片可以进行色值调整。

03排版：对齐&间距&留白

在原型页面的结构设计中，要灵活的使用参考线、对齐、分布等功能，使页面内容具有良好的可读性。

从个人习惯来讲，无论是间隔还是留白，我会按照5像素的倍数进行设置。留白一般在Style样式面板中调整Padding值，很多时候，Padding值也能辅助我对组件进行对齐操作。文本之间的行间距偶尔会调整，但会以默认为主。

04案例

以下是一些规范原型页面示意：

05结束语

对于想要从事产品经理或是交互设计师的新人来讲，建议大家在熟悉工具的使用过程中有意识的培养自己的设计规范。在绘制线框图，或者临摹其他成熟产品创建高保真原型（实际工作中并不需要创建高保真原型，这边需要特别注意）的时候，一定要注意以下2点：

线框图：不建议完全按照苹果或是安卓，设计规范进行页面设计。

高保证：不建议像素级临摹。

UI产品设计有哪五层

1.战略层：用户需求、网站目标（产品定位）---
1.1产品的目标（做什么，达到什么目标？）
1）精确的定位目标用户（市场划分）
2）主张为目标用户带来的核心价值（对目标用户的使用意义）
3）价值的变现方式（收入模型）
4）价值的实现策略（落地的办法）
1.2洞见用户需求：用户希望这个产品能帮他解决什么
1）场景故事（目标用户的特征、情景、任务、行为、结果等）
2）用户当前的主导诉求
3）用户的潜在诉求
2.范围层：功能规格、内容需求（1.功能设计、竞品分析 2.需求调研与分析）
3.结构层：交互设计、信息架构（1.业务流程梳理 2.操作流程梳理 3.信息流程梳理 4.数据流程梳理）
4.框架层：界面设计、导航设计、信息设计（页面布局、场景布局）
通过Axure软件制作
5.表现层：视觉设计（界面设计）
就是自己根据以上所准备的材料，通过PS的形式完全的表现出来

UI界面设计风格大致都有哪些

【UI界面设计】的风格有很多，现在最常见的简约风格、扁平化风格等。主要表现形式有以下几种：
1、新拟物化：新拟物化是2020年处于风口浪尖的一种视觉风格，新拟物化从最初诞生到现在，已经有一定的改变，并且在向着更加复杂、完善的方向发展，有着更为良好的可访问性，开始具备更多拟物化的设计特征，但是更加新鲜、现代，并且更能渲染出独特的氛围感。
2、柔和渐变：渐变这种设计趋势正在进入两极分化的一个阶段。一方面，在视觉设计领域，一部分渐变变得更加夸张，但是在UI设计领域，无论是背景、UI元素（比如按钮、卡片和图形），渐变依然存在，只不过会显得更加微妙柔和。
在UI设计领域，还有的设计师会使用双色渐变，并且结合模糊效果，让它更加柔和。
2、几何元素：几何元素既可以作为背景来使用，也可以作为装饰细节，设计越来越有趣。几何元素在最近几年受到的关注非常多，在设计上的应用也颇为广泛，甚至有人将几何元素拼接成为马赛克，最终呈现出来的视觉效果非常好。感兴趣的话点击此处，免费学习一下
想了解更多有关ui设计的相关信息，推荐咨询【达内教育】。秉承“名师出高徒、高徒拿高薪”的教学理念，是达内公司确保教学质量的重要环节。作为美国上市职业教育公司，诚信经营，拒绝虚假宣传是该机构集团的经营理念。该机构在学员报名之前完全公开所有授课讲师的授课安排及背景资料，并与学员签订《指定授课讲师承诺书》，确保学员利益。
达内IT培训机构,试听名额限时抢购。

“界面设计”在整个产品设计过程中的重要性如何

”界面设计“不论对于何种产品都是非常重要的营销手段，为什么将其称之为”营销手段“呢？其实界面对于产品本身来说，尤其是功能性的作用，是没有太大影响的，但之所以说它非常重要是因为，它是给消费者或用户的第一扇窗。

它可以决定用户是否想走进去使用并消费你的产品。比如说，绝大多数人在选择商场时都想去一些舒适的、好看的商场去购物，因为这样既可以购物又可以享受舒适的环境。这个时候，如果同时有两家商场，你一定是会选择去界面设计良好的那一家去消费。对于商场来说，界面设计包括商场的各个墙面和地面，该设计的好坏直接影响着商场的整体效果。从而间接影响着消费者是否进入以及待多久、会不会下次再来。进而对商场的客流和销售额有巨大的影响。

另外，在另一领域——软件开发。界面设计十分重要，但却往往被开发人员所忽略。在软件的使用领域，用户体验是衡量一款软件的适用性的重要指标，而在用户体验里，用户界面（user interface）又是起着决定性因素的。因为，不管你的后台再优秀，在用户的易用性被折扣以后，用户是不会感知到你后台的工作的。这样就会造成非常差的用户体验，就算是再好的软件都不会再去被使用。

因此一个好的产品开发人员在最初规划设计时，首先就要考虑到使用的用户群体，从而判断何种界面设计可以被用户接受。这也是软件开发公司越来越需要用户界面设计人员的原因。

界面设计是什么

UI 设计(或称界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计，也叫界面设计。UI 设计分为实体 UI 和虚拟UI，互联网说的 UI 设计是虚拟 UI, UI 即User Interface(用户界面)的简称。
UI 设计师的职能大体包括三方面:一是图形设计，软件产品的产品“外形”设计。二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量 UI 设计的合理性。
UI设计目前的前景还是很不错的，很多企业都缺少 UI设计师。而且可以看到的是，现在社会的发展，更多的智能机和智能机器人研发出现，这些都离不开UI 设计师。所以说 UI 设计的是很有前途的，是不会失业的。而且 UI 设计门槛不高，要入门也不难的。
从工作内容来说，UI 设计在当前的互联网领域、科技领域可以说无处不在，
好的 UI 设计能够明显提升用户的使用体验,从而给产品带来更多的附加值,所以UI 设计对于互联网产品是非常重要的。目前 UT 设计通常分为两个大的工作方向，一个是交互设计,另一个是视觉设计。
总的来说，UI 设计相比较于编程而言，还是非常适合大众学的并且就业前景很广阔。学完 UI 设计，能获得一份稳定而又不失乐趣的工作，同时有利于追求更高品质的生活，在艺术领域可以获得更多的启迪。