网站界面设计和ios移动界面设计的区别（UI面试题：iOS和安卓的UI设计有什么区别）

本文目录

• UI面试题：iOS和安卓的UI设计有什么区别
• 平面设计，网页设计，ui设计三者有什么区别
• Android与iOS：应用程序用户界面设计的差异和比较
• 界面设计和网页设计的区别
• iOS和安卓的UI设计有什么区别
• web端UI设计和移动客户端UI设计有什么不同
• 网页UI设计和手机UI设计的区别是什么

UI面试题：iOS和安卓的UI设计有什么区别

在设计UI界面以及图标的时候，这两个主要的区别有这几个方面：
1、设计规范不同【设计尺寸、ico尺寸、字体、界面等】
2、要设计的按钮不同【ios只有一个按键】
3、导航条设计不同【标签栏的模式和抽屉式模式】
4、排版、字体风格不同
5、行动表单不同
6、一些通用的控件不同
不过现在有很多相互融合的。
要详细说的话，细节还是蛮多的。我等以后写篇文章，专门来介绍下

平面设计，网页设计，ui设计三者有什么区别

区别一：定义不同

1、平面设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。

2、网页设计，根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。

3、UI设计，指对软件的人机交互、操作逻辑、界面美观的整体设计。

区别二：使用平台不同

1、平面设计是纸媒时代的产物，主要以平面媒体或载物进行设计，报纸、杂志、画册、海报、宣传页、书籍装帧等都是平面设计的工作。随着互联网及移动互联网的发展，浏览逐渐趋向移动端发展，平面设计的发展也受到一定的阻碍。

2、网页设计主要针对的PC端运用的设计，后来移动互联网的流行，网页开始在手机上流行起来，为保证能够多端正常显示，在HTML5和CSS3的帮助下，“响应式设计流行”，使得网页能够在任何平台都能正常显示。

3、UI设计主要针对的PC端运用的设计手机系统界面、软件界面、网站界面、游戏操作界面、智能电视界面、汽车导航界面、VR虚拟现实等都需要UI设计师。

区别三：信息量不同

1、平面设计承载的信息量是有限的。

2、网页设计或UI设计的信息承载量是无限的。

3、平面设计是无法与读者进行沟通获取用户反馈的或者二次更新的。

Android与iOS：应用程序用户界面设计的差异和比较

移动领域的两大风向标--Android和iOS，也是移动应用设计时最大的两个竞争对手。Android与iOS在市场份额、受欢迎程度、使用人口统计方面数据不相上下，在这里，我们对比了Android和iOS之间的简单设计差异，这将帮助我们弄清一个与另一个有何不同。
由于碎片化的原因，安卓系统的应用设计会有细微的差异。

我们先来了解一下Android与iOS UI应用设计在扁平化设计和材质设计方面的对比。

人机界面指南主要基于三个原则。清晰、尊重和深度。简单来说，该方法支持极简主义，使用简洁的元素，注重排版和扁平化色彩。

简而言之，Android Material Design被认为是Flat设计的升级版，带有拟态性（一种流行的设计概念，即让所代表的物品与现实世界中的对应物相似）。

用Google设计副总裁 MatíasDuarte 的话来说，它是–

有了这些基础知识，让我们从7个方面研究两个平台之间的差异。

目录
1. 导航
2. 按钮
3. 图标和屏幕分辨率
4. 字体
5. 控件
6. 卡片
7. 警报

对于iOS应用程序，总是在“后退”按钮旁边提示上一个选项卡的名称。在中间，显示当前选项卡的名称，而在右上角则显示“”或“完成”（控制按钮）。
说到Android的设计规则，应用程序通常在抽屉菜单或后退按钮（可选）之后的左上角显示标题。移至右上方，总是有一个操作项，例如搜索图标（也可以是多个，例如“收藏夹”图标），其后是溢出菜单。

在iOS中，主导航始终显示在底部，功能菜单专门用于存储一次性功能。而在Android中，通常会在功能菜单中看到主要导航，或者以搜索栏，浮动操作按钮等形式在整个界面中存在。

ios界面指南中，没有类似抽屉导航菜单的标准控件。iOS的全局导航被放置在应用屏幕的底部，一般位于最末位的 "更多"标签下找到二级导航。
Android中，二次导航是一个抽屉，一旦按下功能菜单图标，就会从左到右打开，同时产生一个深色的遮罩层。

有四种方法可以在iOS应用中实现“后退”操作：

在某些情况下，Android应用程序中给出了类似后退的操作，您可以通过该操作进入前一个标签。但是，最常见和最简单的方法是使用导航栏中的后退按钮（Android 10中现在是可选的）。

iOS和Android中的按钮风格最主要的设计区别在于，iOS中的按钮遵循扁平化的设计模式，不带阴影、支持标题大小写。Android遵循Material Design，带阴影且字母大写。

另一个比较重要的按钮是Floating action button（FAB行动呼吁按钮）。例如安卓系统中Gmail的compose按钮，iOS系统中社交媒体应用的新建文章按钮。

两种系统都使用8dp的网格来构建屏幕结构，而最常见的边框是16dp。
在开发移动应用程序时，以预定义的尺寸设计图标是非常关键的。这里有一个表，描述了所有的测量。

这些表格一开始可能会让人有点不知所措，但是如果你知道基本尺寸，并且能够使用倍数进行检查和导出，会发现这并不复杂。

多年来，苹果一直是Helvetica Neue字体的粉丝，然而在2015年，苹果开始使用San Francisco，它更节省空间，非常适合手机、台式机和iOS Watch使用。

Android系统，一直使用Roboto作为标准系统字体。在可预见的未来，谷歌也没有计划改变这一深受喜爱的元素。

控件设计包含搜索、CTA按钮、选择控件和标签等元素。每一个都满足了这样或那样的目的，让我们来看看他们的位置。

搜索功能对于两个平台来说都非常重要，苹果最近还在iMessage中加入了 "搜索栏 "。

在苹果中，搜索选项有两种类型--突出和隐藏。通常情况下，搜索图标会显示在上边的选项卡上，而有时需要从上到下拖动屏幕才能显示搜索栏。此外，如果要取消搜索查询，可以按 "取消"，如果要清除，可以用 "X"。

在安卓系统中，没有隐藏的搜索栏，你总能在上层标签中找到一个。如果要取消搜索，只需点击"←"图标即可，如果要清除查询，则和iOS中的一样。

浮动的动作按钮（FAB）在Android中充当主要行动按钮，可以出现在顶部应用栏或一些组件的边缘。而iOS应用中的主要行动按钮总是出现在页面的右上角。

不过也有一些例外，少数iOS会在底部工具栏显示CTA，而Android则在上部工具栏显示。

如果需要显示一些选项，可以在iOS平台上使用选取器控件，选取器一般出现在底部。
对于在Android平台上显示很少的选项，通常使用一个出现在原地的下拉菜单，或者一个出现在中心的模态对话框，使用模态框时应用背景变暗。

据观察，iOS系统并没有一个视觉上类似于 "标签"的控件。它使用的是一个分段的按钮。Android使用了"扁平化设计的tab"来实现同样的效果。

卡片是图片、文字、视频的集合，还包括按钮和评论。
在iOS中，卡片的特点是无阴影、全宽、无圆角。而在安卓系统中，卡片的设计有阴影、沟槽、圆角等功能。

安卓系统的提醒采用的是扁平化的按钮样式，具体尺寸可以在材质设计指南中找到。操作按钮被放置在提醒的右下角。这些 "按钮 "完全以文字为主（全大写），让用户更容易理解。

至于iOS系统的提醒，则是用分割线隔开。它们基本采用句子或标题的形式，在独立的区块中呈现。它们被放置在弹出窗口的中心。

本文涵盖了iOS和Android所有的初步差异，希望对你有所帮助，而设计一个iOS或Android的移动应用，总是有迭代的准则，所以，一定要保持信息的更新，及时调整自己的产品设计。

Q. 为什么iOS和Android上的应用看起来不一样？
品牌和意识形态的不同，已经波及到他们的操作系统的运作方式。两个平台的UI设计已经成为品牌的符号化。

Q. 如何设计一个原生应用？
在设计原生应用时，必须始终遵守iOS UI应用设计指南和Material设计指南。这样才能使应用与它所要针对的平台同步。另外，这些平台有不同的要求，所以你的应用必须满足它们才能在应用商店上发布。

Q. iOS比Android更方便用户使用吗？
这个问题的答案是纯主观的。它是基于用户的个人偏好。有些人可能会觉得iOS更实用，而有些人则在各方面都偏爱Android。

界面设计和网页设计的区别

界面设计也可以包括网页设计，两者具体也有一些不同：
一、载体不同
1、界面设计的载体比较多，除了我们常用的手机以外，还有电脑、平板、电视、取款机、购票机、游戏机、汽车显示屏等，基本有屏幕的地方都会用到UI界面设计；
2、网页设计的载体比较单一，基本是PC电脑端和移动端的手机、平板等。
二、内容侧重不同
1、界面设计除了要注重视觉设计，比如APP画面，图标等，更偏重于用户体验和交互的功能实现；
2、网页设计更加侧重代码层面，一些前台的技术如HTML，CSS，JQuery，JS等都要熟练掌握，还有网页的版面美工设计和排版，围绕用户的操作习惯出发。
硬件型号：惠普暗影精灵6
系统版本：Windows10 专业版
软件版本：Adobe Photoshop 2021 V22.1.0.94

iOS和安卓的UI设计有什么区别

iOS与安卓设计上的差异主要从系统差异、成本考虑、用户习惯3个方面来阐述。
　一. 系统差异
　　1. 物理按键对返回的影响
　　安卓的物理按键以及屏幕导航按键的差异是安卓的返回键更加方便，
　　iOS只有home键，随着全屏的出现，可能会打破这种差异。
　　因此在设计返回操作的时候需要考虑平台的差异性。
　安卓比iOS增加了物理返回键、底部导航，有些设备可以隐藏底部导航。
　　全面屏的普及会慢慢打破这种因为物理按键造成的交互及设计差别，全面屏设计适配是要考虑底部按键的差异。
　　华为全面屏的几种手势：
　　安卓全面屏出现后，并没有完全舍弃内置导航按键，还有纯手势、悬浮按钮、内置导航条3种方式。随着硬件的发展，安卓和iOS的交互操作会更加趋同，改变这种差异。
　　返回浮窗的UI表现：
　　iOS 手机只有一个“Home ”键，为方便用户退出浮层需要增加了“取消”入口。
而 Android 手机本来就有“返回”虚拟键，所以多做一个“取消”的意义性不大。
　　2. 屏幕分辨率造成的色调选择
　　Material Design作为谷歌推出的全新的设计语言，和iOS对比，Material Design更加沉稳，iOS更加鲜艳。原因是因为iOS的屏幕分辨率更高，对鲜艳颜色的还原度更好，安卓适应的机型比较多，颜色还原度没有那么好。
　　深色模式下考虑到用户长期使用的体验，因iOS的还原度高，背景使用#000000，安卓分辨率的限制，文字颜色较浅，谷歌推荐背景色为#121212。有些平台护眼模式和深色模式用两套，比如网易云音乐。
. 软件更新方式的不同
　　Android ：由于安卓的开源特性，当有新版本时都会提示用户更新，且每个产品内部都带有“版本更新”入口。
　　更新的方式可分2种：
　　引导更新：弹出提示让用户更新 APP ，用户点击「更新」按钮前往应用商店更新、或者在当前页面更新并显示下载进度。
　　强制更新：也是先提示用户更新，只不过用户点击「更新」按钮，即调起软件安装页面。
iOS ：而 iOS 端出于对用户体验的考虑，UI设计中IOS和安卓的设计差异是禁止向用户提示版本更新信息的。这也是为什么绝大部分的 iOS 产品，都是没有“版本更新”入口的原因，即使有，点击了也直接跳转到 App Store 查看版本情况。
4. 切图标注
　　XHDPI对应的是安卓2倍图，XXHDPI对应的是安卓3倍图，iOS的3倍图和安卓的XXHDPI是一样的。
　　iOS用375*667px做设计，有些也用750*1334px，原因有3点：
　　①开发同学不用换算，直接采用1倍图就可以
　　②sketch切图时导出更加方便
　　③极大提高了视觉还原和其他机型的适配
　　安卓用1080*1920px做设计，原因有3点：
　　①从中间尺寸向上和向下适配的时，调整幅度最小，最方便适配
　　②大屏幕时代依然以小尺寸作为设计尺寸，会限制设计师的设计视角
　　③用主流尺寸做设计，极大提高视觉还原和机型适配
　　5. 键盘差异引发的搜索框样式
　　安卓键盘有些是系统自带的，也有第三方的，例如搜狗输入法，iOS更多是系统自带的键盘。
很多输入法在键盘的右侧加入了更加明显的搜索按键，但为了照顾一些用户的操作习惯，安卓还是把搜索放在了搜索框后面。
　　二. 成本考虑
　　1. 开发成本
　　loading
　　iOS的loading自定义更加常见、个性化强，安卓很多都是用系统自带的(转圈的那种)，主要是考虑开发成本。
　　TAB样式
　　2个平台会有特有的控件样式。
　　安卓系统本身全局actionbar，若去实现其他的样式，会破坏整体的封装，开发成本更高。
　　iOS系统有自定义的tab切换样式，开发人员只需要更改颜色、圆角，更加方便。
高斯模糊
　　毛玻璃在iOS比较常见，安卓开发成本高，建议不做这种效果。
　　2. 商业成本
　　一般iOS会让用户承担30%的抽成，例如优酷、腾讯的VIP会员价格。
　　三. 用户习惯
　　1. 长按侧滑删除
　　信息列表的侧滑，在iOS中是很常见的操作，但是在安卓更习惯长按，如果改成侧滑删除，会增加用户的理解成本。
　2. 图标设计
　　返回按钮：一般iOS返回不带横线“《”，安卓喜欢带有横线，例如下图，不过有些app会统一用一种。
　　分享按钮：一把iOS会采用苹果自带的向上的形式，安卓喜欢用三个圈圈(看下图)。
　弹窗按钮：有些安卓弹窗上的按钮会遵循系统规则，在右侧这种形式，iOS更喜欢居中。
　　bar标题位置：安卓上的标题跟随着“返回”，在bar的左侧，iOS会喜欢放在中间。

web端UI设计和移动客户端UI设计有什么不同

界面的大小不一样

UI即User Interface（用户界面）的简称。泛指用户的操作界面，包含移动APP，网页，智能穿戴设备等。UI设计主要指界面的样式，美观程度。而使用上，对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的另一个门道。好的UI不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。

网页UI设计和手机UI设计的区别是什么

UI即UserInterface(用户界面)的简称。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。也就是说，UI设计做出来的东西是和用户有互动的，以下是网页UI设计和APPUI设计的一点区别：

APP：展示效率低，在移动端，展示面积比较小，展示效率也比较低，用户的耐心不佳，必须重点突出。

网页：展示效率高，在PC端，展示面积比较大，展示效率也比较高，用户的耐心比较好。

APP：更看重交互，手指触摸范围更大，较难精确控制点击位置，没有hover等操作因此版面要尽量干净，合理的手势操作，配合手势呼出“藏”得更深的界面。

网页：更看重版式，展示比较丰富的内容，也适合在一个页面里安排较复杂的操作因此网页对布局排版要求比较高。

APP：有“范”可循有“范”可循，移动端的设计具有更严格的规范要求。针对不同平台的应用设计，谨慎地遵循平台规范有助于降低用户的学习成本，也是优秀体验的重要保障。

希望能帮助到你