2：ui设计基础基础规律

已于 2023-06-19 11:15:05 修改
阅读量319 收藏
点赞数
文章标签： 即使设计
于 2023-06-19 10:41:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29257691/article/details/131282421
版权

一：非设计区域：手机自带，顶部44pt底部34pt

二：侧边栏，距离最好大于16pt,  16,20,24,32(pt)等，官方规定大于10pt

三：导航栏，官方建议44pt

 四：一级tab栏，建议49pt

 五：安全区

【前端UI】小程序&H5 适配iPhoneX/XS 安全区
baidu_29086999的博客
11-20 2220
【前端UI】小程序&H5 适配iPhoneX/XS 安全区 做一个严谨的页面还原稿 一、适配的含义 可视、可操作区域是在安全区域内。 没有做适配的情况： 二、安全区的含义 不被圆角、齐刘海、底部小黑条（Home Indicator）遮挡的长方形。 三、H5页面适配安全区 body { padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constan
ui布局设计元素：ui布局设计元素有哪些？
weixin_48575991的博客
07-17 2746
ui布局设计元素：ui布局设计元素有哪些？这一直是我比较喜欢研究的话题，今天正好朋友正好问起。所以就在这里来把自己在行业里的总结写下来，给大家参考一下。说实话，做ui设计师以来，一直有很多朋友问我相关的知识，我也很高兴能够帮助到你们。 在UI页面的布局当中，可以把其几个核心视觉元素进行分解，单独罗列。某些在多个页面设计中，我们可以理解为几大核心点，如『版，质，形，色，字』 局– 版式及布局，版式间距会直接影响到页面的张力及空间感； 质 – 页面风格，肌理维度，整个产品视觉调性； 形 – 大面积
鸿蒙UI开发——基于组件安全区方案实现沉浸式界面
harmonyClassRoom的博客
10-28 909
​ 本文是接着上篇文章鸿蒙UI开发——基于全屏方案实现沉浸式界面的继续讨论。除了全屏方案实现沉浸式界面外，我们还可以使用组件安全区的方案。
Swift UI学习(2)
kkzjyy的博客
03-23 1424
前面我们学习了swiftUI的一些基本知识，接下来我们进一步学习swiftUI
iOS界面布局：屏幕尺寸与安全区域全面指南
weixin_39339407的博客
09-19 3158
以上就是在iOS项目开发中关于屏幕尺寸以及导航栏高度Tab Bar高度适配的所有内容。通过动态获取屏幕尺寸、导航栏、状态栏和安全区域的高度，我们能够适配不同设备，确保应用在各种屏幕上都有最佳的用户体验。随着iPhone屏幕设计的演进，特别是全面屏和灵动岛的引入，开发者必须灵活运用这额布局方法，以适应不断变化的屏幕形态。
Tab bar
D20032272的博客
04-24 1994
一、什么是标签栏 标签栏（Tab Bar）是用于组织APP结构，以扁平层级，只用于导航的基础控件。 二、作用： 1）定位导航 一般情况下，标签栏常驻于各一级页面底部。选中标签明确提示用户当前所处位置，当用户想要前往其他一级页面时，只需切换底部标签即可。 2）凸显品牌 首页是产品给用户留下第一印象的关键一步，标签栏中的视觉元素，包括选中标签的颜色、图标形式、组合样式等等无不体现了产品气质。 三、分类：顶侧底 从导航体系的层级来说，底部栏属于一级导航，顶部栏属于二级导航，而侧边栏属于三级导航。这种划分
提升用户体验：UI设计的十大关键规则
一个好的UI设计不仅要美观，更要遵循一系列规则和规范，确保用户能够高效、自然地与其交互。以下是UI设计中必须重视的十条核心原则： 1. 易用性：首要原则是设计简洁明了的界面，按钮名称应清晰，避免使用模糊不清...
图标设计指南：UI设计师的ICON知识详解
在处理边缘、边角、曲线和角度时，尽量保持一定的数学规律，同时保持设计的趣味性。不必过于拘泥于数学精确性，而应追求视觉上的和谐与吸引力。 图标设计是一个结合了规则与创意的过程，需要在遵循规范的同时，灵活...
第003天：APP的UI设计
m0_67474913的博客
02-04 4811
我一直都认为程序员在软件的审美方面普遍都比较差，至少我个人就是如此。如果说要追究 其根本原因，我觉得这是由程序员的工作性质所导致的。每当我们看到一个软件时，不会像普通 用户那样仅仅是关注一下它的界面和功能，而是会不自觉地思考这些功能是如何实现的。很多在 普通用户看来理所应当的功能，背后可能却需要非常复杂的逻辑来完成，以至于当别人唾骂一句 “这软件做得真丑”的时候，我们还可能赞叹一句“这功能做得好牛啊”！不过缺乏审美观毕竟不是一件值得炫耀的事情，在软件开发过程中，界面设计和功能开发同 样重要。界面美观的应用程
国开作业《网站界面（UI）设计》形考任务2参考（含答案）733.docx
07-13
网站界面设计，也被称为用户界面（User Interface，简称UI）设计，是构建成功在线平台的关键因素之一。在这个视觉与信息爆炸的时代，一个网站能否吸引用户，并给用户留下深刻印象，很大程度上取决于它的设计，尤其是...
手机滑屏tab菜单自适应高度，菜单内容级联滑动（tab超过屏幕宽度可自动滑动）
10-09
手机滑屏tab菜单自适应高度，菜单内容级联滑动（tab超过屏幕宽度可自动滑动）
css移动端设备的安全区内边距
最新发布
qq505751223的博客
11-12 697
主要是为了处理 iOS 设备上的“刘海屏”和其他不可见区域而引入的，但现代的 Android 设备也存在类似的问题，例如屏幕凹槽、摄像头打孔、底部导航栏等。来获取设备左右的安全区内边距。这些属性用于确保内容不会被设备左右的不可见区域（如侧边按钮或边框）遮挡。为了确保在不同浏览器和不同版本的 iOS 上都能正确处理安全区内边距，通常会同时使用。iPhone X 及其后续型号的“刘海”和底部导航栏。这样可以确保在所有支持的浏览器中都能获得正确的效果。函数，可以确保内容不会被这些区域遮挡。
iOS 11 安全区域适配总结
码农天后的博客
09-20 2万+
导语：本文主要是对iOS 11下APP中tableView内容下移20pt或下移64pt的问题适配的一个总结。内容包括五个部分：问题的原因分析、adjustContentInset属性的计算方式、什么情况下的tableView会发生内容下移、有哪些解决方法、解决这个问题时遇到的另外一个小问题。 一、iOS 11下APP中tableView内容下移20pt或下移64pt的原因分析
【UI设计基础知识】UI界面设计怎么划分
kobe_back的博客
07-06 3303
UI界面设计是什么?我们来解释一下。对于用户的界面，我们想一下，我们日常生活中接触到的哪些是用户界面?我们的手机界面、电脑界面、iPad界面、还有车载系统界面、VR界面等。将这些界面设计划分为三类：PC端UI设计、移动端UI设计、其他UI设计。我们主要给大家介绍的是PC端UI设计和移动端UI设计。 一、PC端UI设计 主要应用在web上，因此可称为web UI。它的设计范围包括常见的网站(电商、社交)设计、工具(邮箱、后台系统)类网站设计等，在web UI的设计过程中，一定要注意其载体的基本属性，用户使
关于H5页面在iPhoneX适配
weixin_34033624的博客
11-06 1669
​1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下： △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸： △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开发尺寸的倍率关系，但这只是外在的表现。倍图核心的影响因素在于PPI（DPI），了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念：《基础知识学起来！为设计师量身打造的DPI指南...
Apple iOS11: Guide Layout Safe Areas And Margins 布局指南: 安全区域和边距
山茶树和葡萄树
01-02 1624
https://developer.apple.com/design/resources/
iOS 屏幕适配 iPhone X SafeArea安全区域
iOS开发程序媛
09-06 5428
三月份工作 9月份才开始自己主动了解安全区域适配问题 一. 前言 本文的出发点是对iOS设备的适配, 我们之前的适配只是考虑设备的尺寸, 设备的方向, 而在iPhoneX出来之后呢, 我们又多了一种考量, 那就是刘海和底部横条(HomeIndicator), 我们通过UIKit11.0之后新增的API来解决这个问题, 达到不同设备尺寸, 不同设备方向的完美适配. 二. 之前的做法 注...
Android官方底部Tab栏设计规范
热门推荐
谷哥的小弟
04-20 2万+
上一篇《仿微信底部Tab栏》中粗略的讲了下底部Tab栏的封装，不少同学在实际运用中发现了一些问题，比如我demo中的title用了actionbar，所以如果新建的Activity的Theme不包含actionbar就回出现空指针；再比如假如底部的Tab对应的并不全都是Fragment，而是一部分Fragment，一部分Activity，就不适用了，但办法总比困难多，这个也是可以解决的；还有一个很常
iOS灵活适配刘海屏手机的顶部状态栏高度和底部安全距离
jayson_hk的博客
12-09 1万+
我们知道在刘海屏手机出来之前，iOS App的顶部状态栏高度为20pt，导航栏的可布局区域高度为44pt，整个导航栏高度为64pt，底部安全距离为0。 在刘海屏手机出来后，刘海屏机型iOS App的顶部状态栏高度为44pt，导航栏的可布局区域高度为44pt，整个导航栏高度为88pt，底部安全距离为34pt。 我们除了要考虑手机在正常状态下的适配以外，还要考虑通话、定位、录屏状态下时，因为顶部还会多...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值