手机界面设计图片（什么是手机ui设计）

本文目录

• 什么是手机ui设计
• 手机UI设计的基本规范

什么是手机ui设计

手机UI设计需要注意的几个问题

随着我国移动互联网的发展，其技术与用户规模、应用创新等都呈现出飞速变化的态势。另一方面，受移动互联网的应用环境与特征等因素影响，其产品均具有移动互联网的移动特征和优势，能够通过互联网社交平台以及感应技术、定位系统等的支持，不断渗透人们的日常生活，对人们的生活方式产生了较大影响，进而促进具有更加高效与便捷特征的移动信息网络的构建。基于此，对互联网产品的交互设计和应用实践进行研究，以促进移动互联网交互设计和应用不断创新发展，从而为人们的日常生活创造更加便捷的条件，推动我国社会经济的全面发展，具有十分积极的作用和意义。本文将通过对交互设计和互联网交互概念的分析，以手机UI设计的视觉传达为例，对互联网产品的交互应用及实践效果进行研究

请点击输入图片描述

UI设计，即用户界面设计，它是通过一种符号形式进行信息表现，从而为观看者提供一种能够更加直接的实现自身想要了解内容获取的方式。UI界面能够进行各种软件管理，也能够根据用户个人意愿进行管理操作，而UI设计的目的则是实现信息传递，信息的传递就是进行人机交互的过程，因此，UI设计具有一定的交互性功能。随着信息技术的发展和应用，信息在人们日常生活与工作中的作用日益显著，信息的传递和交流在人们的日常生活中也越来越多见。而UI设计中的交互性功能是以界面设计体现的。在界面设计中，通过更多较为新颖的画面设计，吸引人们的注意，从而通过界面在人机交互下实现信息传递。根据UI设计的交互性功能特征不难看出，在UI设计中，应以人性化理念作为设计的基本理念，并坚持以人为中心的设计原则，在设计人员的较高软件应用和设计能力支持下，来促进UI设计的不断提升和目标实现。此外，要注意的是，在UI设计中，有关设计人员对界面视觉设计及其应用要有充分的认识，从而使UI设计能够满足人机交互与用户体验需求。

请点击输入图片描述

根据上述情况分析可以看出，手机UI设计中，界面视觉设计对其交互性功能有着非常重要的作用和影响，对界面视觉设计的合理把控是促进手机UI设计的交互性功能实现的重要基础。手机UI的界面视觉设计对其交互的最终效果有着直接的影响，为满足手机UI设计及其交互性功能需求，需要设计人员重视具体设计中颜色、空间与图形的相互关系及其合理搭配，以保障能够吸引用户的注意力，而且要求空间的组织与设计科学、合理，使用户在人机交互体验中能够获取赏心悦目的体验效果。结合上述对手机UI设计中交互性视觉需求的分析，在具体设计中应注意以下几个方面。

（1）对手机UI的界面视觉设计，首先需要运用视觉思维分析。为满足手机UI设计的交互性功能视觉需求，需要设计人员在设计过程中通过视觉形成相应的较为完整的可视化系统，从而在视觉艺术表达和设计中展现交互对象的特点，第一时间吸引用户的关注点，以达到较好的界面视觉设计效果，充分发挥手机UI设计及其交互性功能实现的重要作用。

请点击输入图片描述

（2）手机UI的界面视觉设计，还需要设计人员合理利用文字、图片等设计元素，通过图文并茂的界面设计，吸引用户的注意力。因此，设计人员要合理把握视觉设计中图片、文字等要素的运用和图形、图片的布置，结合视觉思维以及大脑视觉冲击模式等有关理论，即人们在视觉信息接收过程中，对图片与图形的印象表现最为深刻，能够在较短时间内对其进行有效识别和记忆，从而结合这一理论，充分利用图形和图片，使界面视觉效果得到优化和提升，以使用户通过手机在实现人机交互中获取更加良好的视觉感官体验，以赏心悦目的体验感受信息传递和接收。

（2）手机UI界面视觉设计对交互性视觉需求的满足，还需要设计人员在自身专业技能与知识水平支持下，合理处理和调整图片大小与规格，以确保界面视觉设计的空间利用充分，保障图片信息的完整性及其传递，以满足界面人机交互的视觉需求。此外，还需要结合图片合理调整界面视觉设计中的文字元素，针对不同字体合理搭配应用，保证界面的整洁与信息完整，从而对用户形成较为强烈的视觉冲击。

结语总之，以手机UI设计的视觉传达为例，研究互联网产品的交互应用和实践，有利于促进互联网产品的交互设计和应用在移动互联网时代取得新的突破和发展，从而推动移动互联网的交互应用程序及产品开发不断创新，满足人们的日常生活及各产品应用需求，推动我国社会经济与信息网络建设的持续发展，具有十分积极的作用和意义。

手机UI设计的基本规范

大家都知道手机采用的：一个是苹果的iOS系统，另一个就是谷歌公司的安卓系统。华为的鸿蒙系统虽然早就上线，但是还没有真正运用在手机移动端上，小阿在这里期待着，希望有一天也能写“华为‘鸿蒙系统’的界面尺寸规范。”

这两者之间有一个明显的区别就是iOS系统是非开源的，简单来说就是不能别随意改动的，连图标都是必须带圆角的，对交互设计师很友好的。

而安卓系统就是开源的，界面可以随意改动，尺寸也没有特别的规范，图标、尺寸成千上万种，根据手机品牌不同，形状也不同，对于交互设计稍微有那么些许不友好。

那我们就来看看安卓和iOS的具体有哪些界面规范。

一、iOS界面规范

首先苹果分为两种尺寸，一种是中码比如6s、7、8等，这种我们一般切图命名为@2X。还有一种就是Plus版本，这种一般切图命名为@3X。

苹果6s 的尺寸750px * 1334px，6s Plus的尺寸就是1242px * 2208 px。两者之间的关系就是1.5倍，怎么说呢，就是6s之类的手机想要变成Plus，我们设计师稍微想要偷懒一下设计，只需要整体扩大1.5倍，比如图标。

来分析一下界面的尺寸规范：

首先是状态栏，就是信号电池栏的高度为40px。导航栏部分，就是“设置”栏高度为88px。

而下边的底部栏（导航栏）高度则为98px。

注意这三种尺寸是规定比较死的。我们做开发遇到Plus版把以上尺寸等比例扩大1.5倍就可以了。剩下的中间空白部分，我们就可以任意填充内容，Banner或者图标？

☆ 关于图标部分

苹果的图标极具有美感，完全符合栅格黄金比例，所以看起来十分协调。因为都是使用的网格进行规范化设计，所以一整套图标都保持着高统一性。

整个点击图标最小不能小于44px，一般大小为58px，圆角为12px,但是我们习惯取为整数60px,就会非常的标准。为什么一定有最小的控制呢？因为我们手指有一个触碰面呀~低于上述的宽度，就可能碰不到。一定要非常注意用户的使用感受哦。

☆ 关于分割线部分

注意分割线不是一条线，是一个宽度为1px的矩形，而且颜色多为灰色。

☆ 关于板块与板块之间

板块与板块之间的灰色条间隔是30-70之间，一般来说取整数。iOS系统采取了70 px,有利于减轻用户的阅读负担。列表的高度一般高于88 px，列表与列表之间的距离是10px-30px,太小会有碰撞。作为UI设计师，这一点是要考虑的是吧？

☆ 关于列表中的尺寸规范以及字体要求

☆ 关于左右间隔的安全区域

这个安全区域又称之为留白边距，iOS的原生态页面【设置】页面的边距是30px,根据不同产品有不同的调整，宽度一般在16px--30px浮动，最大的特点就是数值全是偶数。

☆ 关于切换按钮的尺寸

☆ 关于字体

iOS系统的字体是苹方字体，字体的颜色和粗细也大有讲究，标题等文字就是粗体，一些说明文字等就是浅色非加粗体。常常用文字的粗细体来区分重要信息和次要信息，进行信息层级的划分。字体颜色很少采用纯黑色，一般用的是深灰色和浅灰色。

主标题的字体大小设置一般是32-36左右，加粗居中。列表中的文字就要小一些，字体大小为30，不会加粗。辅助性字体大小一般24-26。说明文字一般不会小于22，最小设置为20，再小就看不到啦。另外需要注意的一点是所有的字号设置都必须为偶数，上下级内容字号极差关系为2-4号。

关于苹果界面的小部分尺寸规范就介绍到这里，下期再做安卓界面的尺寸介绍。

作为UI设计师，一定要具体掌握界面的大小尺寸来适应美学观点，让人感觉协调舒适，能在有效的范围内极快吸引用户的注意力。

二、安卓界面规范

众所周知，安卓系统是开源的，国内又有超多的手机厂商，小米、魅族、华为、oppo、三星等，每一个品牌有属于自己的UI设计规范，但是我们主要分析UI界面尺寸规范。

1、字体

安卓系统中文采用的是思源黑体，英文字体为robot字体。

只使用偶数单位 24 pt，28 pt，36 pt等字体大小

2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什么意思？

讲图标之前先来分析一下一排英文的意思：

mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小，依次数值越大，其分辨率越高。常用的是xxhdpi和xxxhdpi。

dp是安卓系统专用的长度单位，设备独立像素的意思。不同设备有不同的显示效果,这个和设备硬件有关。多为图标使用，文字则用sp(放大像素)，主要用于字体显示best for textsize。

px是像素的意思， 不同设备显示效果相同。

安卓各屏幕密度关系如下：

3、图标

不同手机品牌的图标的标志是不一样的，对应不同大小屏幕的尺寸如下：

系统图标的尺寸：

快捷图标的尺寸：

应用图标的尺寸：

4、应用栏的尺寸

从左到右依次是：① 应用栏高度：56dp；应用栏左右内边距为16dp；应用栏图标上下左内边距为16dp；应用栏标题左内边距为72dp；应用栏标题下边距：20dp；

②应用栏高度为128dp；

③操作栏高度为56dp；标题栏高度：80dp；标题栏底部内边距：8dp；描述区域高度：72dp；描述区底部内边距：16dp。

5、列表高度

垂直边框、水平外边距、边框左右外边距各16dp；带有图标或者头像的内容有72dp的左边距。

垂直边距

①状态栏：24dp；②工具栏：56dp；③子标题：48dp；④列表项：72dp

垂直边框、水平外边距、边框左右外边距各16dp；带有图标或者头像的内容有72dp的左边距。

垂直边距

①状态栏：24dp；②工具栏：56dp；③标题和列表项：48dp；④子标题：48dp；⑤内容区域间距离为8dp

6、切图

上周我们讲到iPhone 6与iPhone 6 Plus约是1.5的关系，而xhdpi的Android手机屏幕与xxdpi的屏幕刚好是1.5倍的关系，所以iPhone 6 Plus和xxhdip也可以共用一套切图，掌握好尺寸关系，能让工作变得简单很多。

7、界面适配

安卓多屏幕支持的基础是它能够管理应用程序的布局和位图可绘制对象的渲染以适当的方式对当前屏幕配置的能力。该系统处理的大部分工作由布局缩放以适合屏幕尺寸/密度和缩放位图可绘制在屏幕密度正确呈现您的应用程序在每个屏幕的配置，来优化用户界面设计，带来更良好的用户体验。

如何做到安卓界面适配呢？大家一定要很清楚的了解分辨率、屏幕大小、密度的关系；明白实际密度和系统密度的关系，dp、sp、px的区别；明白dp与px的转换。这里不做过多阐述，后期写一篇具体的~

安卓的界面规范就讲到这里，要明白设计界面规范的意义是确保设计的统一性与合理性，规范维护的是项目的统一，为了项目利益最大化，高效化。所以作为UI设计师的我们，如果一点设计规范不遵守，全靠自己想当然，那就别发给前端人员啦，他也看不懂。

所以作为UI设计，必须要要遵守设计规范，这样才能做到设计有道可寻，希望以上回答对你了解手机界面设计规范有所帮助。