全局边距: 32px、30px、24px、20px(建议最小20px,边距数字选择偶数)
Title:nil message:nil 标题和信息都设为 nil 不能设置为 @“” 这样还是会出现空白的标题
在任何网站或移动应用设计的过程中,线框图作为设计元素和功能的图示,它有助于帮助定义和更好地传达信息层次结构,让参与设计和开发的人员更好的理解设计师的思路和设计的功能点。
hi,在项目开发中,有时候需要仿照ios的底部弹框做效果,比如我们在iPhone上面关闭定位的时候,就会弹出ios特有的底部弹框:
meta属性在HTML中占据了很重要的位置。如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等。虽然一些网页可能没有使用meta,但是作为正规军,我们还是有必要了解一些meta的属性,并且能够熟练使用它们。 1、声明文档使用的字符编码
之前帮我朋友检查他们的HTML/CSS项目时注意到一些错误在项目中重复出现。所以我决定写这篇文章,这样大家就可以对照检查你是否也会犯同样的错误。希望看完这篇文章对您有所帮助。
在移动端或者前端开发中,UI图通常是带标注的,指定某个控件的长宽等属性,一般UI给的是68px,72px这样的样式,但是我们在开发过程中通常又并不是完全按照上面的标注去设置值,有时候需要将这个标注除以2或者除以3在进行赋值给frame,这其中的原因是因为标注一般都是按px格式给的,但是iOS底层绘制的时候是按照pt为单位进行绘制,这两个的区别在于:
背景 iPhone X 刘海机于9月13日发布,给科技小春晚带来一波高潮。作为开发人员却多出来一份忧虑,iPhone X 怎么适配?我们 App 的脑袋会不会也长一刘海出来?Tabbar 会不会被圆角
上表中的宽高(width/height)为手机的物理尺寸,包括显示屏和边框。
文章索引 5.1 图标与图像尺寸(Icon and Image Sizes) 5.2 应用图标(App Icon) 5.2.1 文档图标(Document Icons) 5.2.2 用于Spotlight和设置的图标(Spotlight and Settings Icons) 5.3 启动画面(Launch Files) 5.4 模板图标(Template Icons) 5.5 网页图标(Web Clip Icons) 5.6 创建可缩放图片(Creating Resizable Images) 译者注:本
上一篇文章[原型篇]发布之后,就开始设计UI了,包括Icon和界面UI,周一到周五晚上一般花两到三到小时,周六日的时候则有五六个小时,最终用了一个星期多才设计完成。先直接展示下成果吧。
HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代,head 头部结构,移动端的 meta 元素,显得更为重要。了解每个标签的意义,写出满足自己需求的 head 头标签,是本文的目的。本篇以一丝的文章为基础,进行扩展总结介绍常用的 head 中各个标签、元素的意义以及使用场景。 DOCTYPE DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 h
刚接触移动应用的界面设计,最先跳入脑海的疑问是:画布尺寸设计多大(特别是Android)、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现? 本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索,来分享移动应用界面设计中的尺寸规范等问题,希望能给移动端的新手设计师些许指引。若有不当之处,欢迎斧正。
献给未来的我 每天的坚持 在一群出色的人中间, 常常误以为自己也是其中一员, 然后忘了努力。 在一群不出色的人中间, 常常误以为自己比他们优越, 然后也忘了努力。 所以, 无论什么时候, 都要清醒地认识自己, 并始终不忘努力。 SEO搜索引擎优化不仅仅是优化页面内容在百度搜索结果页面中的排名,其实也还有很多地方是可以优化,获取排名,从而获取流量。 今天,给大家分享如何做百度图片的排名注意事项,这些技巧也很基础,希望能够对各位同学有所帮助。 — — 及时当勉励,岁月不待人。 百度图片优化排名技巧 时本文总计
移动应用的界面设计画布尺寸设计多大(特别是Android)、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现? 本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索,来分享移动应用界面设计中的尺寸规范等问题,希望能给移动端的新手设计师些许指引。若有不当之处,欢迎斧正。
自去年9月12日苹果发布会发布iPhone X之后,新颖的设计虽然引来不少骂声,但也给iOS设计和开发者带来了新的挑战,本文总结了iOS QQ空间对iPhone X适配过程遇到的问题和解决手段。
总所周知,iOS和Android是当今两大移动平台,前者采用Human Interface Design,后者采用Material Design。作为设计师,尤其是App设计师,总是会在这两者进行设计。如果你的产品能在井喷的App里推颖而出,这一定会是超级棒的体验。你做到了,设计改变生活。
大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说ios学习7_iPhone屏幕尺寸、分辨率及适配,希望能够帮助大家进步!!!
iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师,都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率,保证用户良好的体验。
一.W3C标准 1)W3C标准不是某一个标准,而是一系列的标准的集合,一个网页主要由三部分组成,即结构(Structure),表现(Presentation)和行为(Behavior) 2)不很严谨的说"结构","表现","行为"分别对应了三种非常常用的技术,即HTML,CSS,JavaSxript.也就是说HTML用来决定结构和内容,CSS用来设定网页的表现样式,JavaSpcript用来控制网页的行为 3)W3C标准包括结构化标准语言(HTML,XML),表现标准语言(CSS),行为标准(DOM,
本文主要针对适配 iPhoneX列出一些关键点,仔细阅读可完美适配 iPhoneX,其中还有一些是适配 iOS11的, 话不多少,开始正餐。
编译|褚杏娟 核子可乐 有一种普遍性认知:只要可以,大型平台厂商一定希望每个人都只为他们自己的平台编写专有应用程序。但现在的厂商们还做不到这一点,所以 Web 就天然获得了市场优势。可人们心里的天秤总在摇来晃去,在 Web 和本机之间游移不定。 回顾历史,苹果、谷歌等都为 Web 的发展努力过,但为什么他们后来都放弃了 Web 应用,转而走向本机应用了呢? 近日, CodePen 联合创始人、网页开发者 Chris Coyier 写了一篇关于不同平台的“本机应用程序”和“Web”之间总是剑拔弩张、相互竞
声明viewport视口 viewport对于移动端设备来说非常的重要,用于定义视口的各种行为。其中最为重要的就是要设定一个展示页面的宽度width=device-width,如果我们不设置的话,width默认的值是980PX,假设我们当前用的是IPHONE 5来访问H5页面,IPHONE 5本身的宽度只有320PX,但是设备定义了H5页面展示的区域宽度应该是980PX,这样的话要想把H5页面全部进行展示,只有整体缩小大约三倍或者让用户在320PX的区域中来回的挪动才能看全整个H5页面。这种方式用户的体验度会非常的差,所以我们设定width=device-width,意思是当前设备屏幕有多宽,那么就按照多宽来渲染页面,这样就不会出现需要靠缩小或者左右移动来看完整个页面了。
在单个位置聚合调用微服务:API网关。用户只需调用API网关,然后API网关就会调用每个相关的微服务。API网关模式为您的微服务调用提供单点聚合.
在设计过程中,我们常常需要对设计图进行说明、标注、记录想法、收集灵感、引用系统资源。然而,没有合适易用的工具,这些过程很容易让设计稿变得杂乱不堪。一段时间以后,如果要重新进行编辑或维护,一切都变得格外痛苦。
iPhone自诞生以来,随着其屏幕尺寸不断的多样化,屏幕适配的技术一直在发展更新。目前,iOS系统版本已经更新到9.3,XCode的最新版本已经是7.3,仅iPhone历史产品的尺寸就已经有4种:3.5英寸、4.0英寸、4.7英寸、5.5英寸。最近,iPhone家族又诞生一款iPhoneSE,鉴于这款iPhoneSE的屏幕尺寸和iPhone5S的尺寸一模一样——同样是4.0英寸,广大iOS开发者可算是松了口气,不然iOS的屏幕尺寸真的是越来越让人眼花缭乱。 按照时间顺序,屏幕适配是这样发展的:纯代码计算frame-> autoresizing(早期进行UI布局的技术,仅适用于约束父子控件之间的关系)->AutoLayout(iOS6/2012年、iPhone5被引入,比autoresizing更加高级,旨在替代autoresizing,可以设置任何控件之间的关系)->sizeClass(iOS8出现,用于解决越来越多的屏幕尺寸的适配问题)。 在iPhone3gs时代,手机的屏幕尺寸有且只有一种,也就是3.5英寸。开发app的时候,根本不用考虑同一个视图在不同尺寸的屏幕上显示的问题。iOS开发者完全可以用纯代码的方式把一个控件的frame写死。 后来apple公司推出了4.0英寸的iPhone5和iPhone5S,所以,针对于不同尺寸的屏幕,再把控件的frame写死就不可取了。(其实也不是不可取,很多iOS开发者做屏幕适配的时候不是用的autoresizing或autolayout,而是以代码的方式动态获取屏幕的尺寸,然后根据屏幕的尺寸来写死子控件的frame。使用这种方式你会在代码中无辜增加很多if...else... 的条件判断语句。另一种方式是获取到屏幕的尺寸后,按照控件和屏幕的比例来设置控件的frame,其本质上也是写死frame。所以这两种方式都不可取,毕竟将来会回出现越来越多的屏幕尺寸。从开发的角度,重复繁琐的代码会牵绊住开发者的进度;从程序设计角度,这样的设计思路不够高级,且日后不易于拓展和维护。)
我的网名叫做「Hsinyan」,如果是作为网名出现的话需要首字母大小。如果作为URL的一部分,应该使用全小写的「hsinyan」。
在 iOS 13 中引入了新的 API — Diffable Data Source,它不仅能够驱动 UITableView 和 UICollectionView,而且可以更简单高效的实现数据的刷新。
大意如下: 3DTouch为iOS9用户提供了一个额外维度的人机交互界面。在支持3DTouch的设备上,在app外,人们可以在主屏幕上按压app图标来快速选择app可执行的某个具体的操作。在app内,人们可以使用不同的压力来得到不同的内容查看效果:1.预览视图 2.打开一个单独的视图控制器界面查看视图,进而进行其他交互。 苹果的3D Touch分为两类,一类是app外,在主屏幕上按压app的图标,可以在app图标旁边弹出一个带有快捷操作项的菜单。另一类是在app内,稍用力按压某个视图,可以预览除去该视图额外的内容,再稍加用力按压屏幕,可以弹出另一个控制器界面,这个控制器界面就是点击这个被按压的视图将会跳转的控制器。 下面我就以app内和app外两个维度来跟着官方文档解释3D Touch。
前端同学通常都用媒体查询或 rem 做多端适配,但是在 Cocos 上 CSS 不复存在。那你知道在 Cocos 上如何做到多端适配吗?本文从需求背景出发,带你领略Cocos的多端适配之道~ 背景 某一天接到了新需求,自己看了设计同学给的设计稿后瞬间感觉头大,分析了下主要有以下难点: 题目背景需为同一张背景图,在不同端上要显示背景图的不同区域 标题栏上的倒计时、题干与最小化按钮的贴边距离在各端各不相同 选项背景图需根据选项长度自动拉伸,同时保证两侧圆角不被拉伸 如果这种适配方案采用CSS实现的话,肯定
这个项目是关于数据可视化中好的和不好的实践,作者通过一系列例子解释了哪些图表类型是不合适的,并提供了如何改进或替代它们。主要功能包括展示错误做法以及正确做法,并提供相应代码文件来生成相关图形。该项目核心优势在于:
本文总结
我们在打开APP或者网站的时候,经常可以看到这样的效果,在内容加载完成之前,会有一个骨架动画的出现,这种加载方式比传统的进度条方式要友好的多,但是很多朋友都不知道这种效果是如何做出来的,下面我们一步步的来看看吧。
文章索引 4.3 控件 4.3.1 活动指示器 4.3.2 添加联系人按钮 4.3.3 日期时间选择器 4.3.4 详情展开按钮 4.3.5 信息按钮 4.3.6 标签 4.3.7 网络活动指示器 4.3.8 页面控件 4.3.9 选择器 4.3.10 进度视图 4.3.11 刷新控件 4.3.12圆角矩形按钮 4.3.13 分段控件 4.3.14 滑块 4.3.15 步进器 4.3.16 开关按钮 4.3.17 系统按钮 4.3.18文本框 4.4.1 警告框 4.4.2 操作列表 4.4.3模态视图
在最近推出的 iPhone X 中,它被讨论最多的特点之一是它采用了新的解锁方法,即 TouchID:FaceID。
昨天凌晨,苹果公司发布了带刘海的 iPhone X,这需要 iOS 开发者针对其屏幕做新的适配,会后苹果公司发布了 iPhone X 的适配指南,下面是翻译稿,供大家参考。
说实话,对于一个刚入门iOS两个月的新手而言,在拿到这个任务的时候整个人都是懵逼的,怎么做适配?哪些地方需要适配?该怎么做?一个个问题搞得头都大了。 首先,啥都不管,先在iPhone X上运行起来看看效果在说,运行之后出现的问题主要有如下几个: 屏幕尺寸还是6S上的尺寸大小,用 打印log确实如此 [[UIScreen mainScreen] bounds] 自定义的导航栏的返回按钮右移明显 UISearchBar的高度有变化,而且点击之后背景颜色和原先不一致 UITableview的header
AutoLayout旨在替代Autoresizing,所以在同一个项目中,AutoLayout和Autoresizing是不能共存的,二者只能选其一,如果你选择了AutoLayout,那么Autoresizing自动被屏蔽掉;如果你选择了Autoresizing,那么AutoLayout自动被屏蔽掉。XCode5及其之后的版本,默认新建的项目就是使用AutoLayout
文章索引 2.1 设计原则(Design Principles) 2.1.1 美学完整性(Aesthetic Integrity) 2.1.2 一致性(Consistency) 2.1.3 直接操作(Direct Manipulation) 2.1.4 反馈(Feedback) 2.1.5 隐喻(Metaphors) 2.1.6 用户控制(User Control) 2.2 从概念到产品(From Concept to Product) 2.2.1 定义应用(Define Your App) 2.2.2 为
主要逻辑就是动态获取设备的 statusBarHeight 和 titleBarHeight,来设置导航栏的高度和 paddingTop
使用的是”预估行高+自动布局“的方法实现动态行高(适用于 iOS7.0 以后系统)。
在国外的 PaintCode 网站上,有一篇文章《The Ultimate Guide To iPhone Resolutions》整理了包括从第一代 iPhone 到最新发布的 iPhone XS Max 等所有 iPhone 设备的屏幕数据,包括:开发尺寸(points)、物理尺寸(pixels)以及实际渲染像素、1倍/2倍/3倍模式等,如图 1 所示(建议大图查看更加清晰)。
最近有个小需求需要实现,最后要给出一个 GUI 界面,想了想还是不用 c++ 写 MFC 了,因为还涉及到网络编程,感觉还是简单事情简单做,然后转手写 python,刚开始想尝试 pyqt,但感觉好像还是有点麻烦,本来就只是做个插件,最后就大概看了一下内置的 tkinter,一边写一边学也马上就上手了,总的来说感觉还是简单的。
换了XCode6之后,发现以前写Icon-76.png这样很麻烦,就使用了Image.xcassets,公司所有测试机跑了一下,发现没什么问题。唯独有一台设置有问题,iphone5 ios6.0系统,游戏启动后黑屏。而且断点发现游戏获取的屏幕大小变为320x480了,实际应该是640x1136。因为之前打包是可以的,可以我只好把之前的资源打包的时候再添加进去,但总觉得很麻烦。因为不同的越狱不同它可能要求你使用的Launch Image是不一样的,替换来替换去的很繁琐
注意,很多人使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染,用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1,则用户将不能放大/缩小网页来看到全部的内容。
文章索引 1.1 为iOS而设计(Designing for iOS) 1.1.1 设计跟随内容 (Defer to Content) 1.1.2 保证清晰 (Provide Clarity) 1.1.3 用深度层次来进行交流 (Use Depth to Communicate) 1.2 iOS应用解析 (iOS App Anatomy) 1.3 适应性和布局(Adaptivity and Layout 1.3.1 为自适应而开发(Build In Adaptivity) 1.3.2 在不同环境提供良好体验
这篇文章是上一篇文章的延伸与总结,做的一个微信游戏宣传页上要调用长按识别二维码的功能,做的过程中遇到了两个坑,后来在组里分享会上分享了入坑经历,然后再度发现一个坑。本文就是在分享会上发言总结而成。 坑一:iOS 版微信长按识别二维码无法正常识别的bug (8.21 更新:最新版6.2.4 已经修复该bug) 以下实测在iOS 版(iPhone)微信6.2.2 中有此bug,安卓版微信暂时没有发现有此bug。建议看下面的内容前先看这篇文章。 “众所周知”,在一些使用在微信内置浏览器的页面上要调用其长按识别二维
领取专属 10元无门槛券
手把手带您无忧上云