子网页设计好处 第1篇
针对前面所讲的ios 系统的常用机型，几乎一种逻辑尺寸为375pt乘667pt 就可以完成设计的适配。而相对来说，ipone X 的适配处理稍微多一些细节。异形的 iPhone X 的屏幕部分的高度增加了145pt，如下图所示。
空间里利用率角度思考，与 IOS 界面的整体效果保持一致的感觉。如下图所示，竖版和横版。
而具体的适配方法要从这两块非安全区域去用心思考。由于顶部的非安全区域内不可以出现状态栏之外的内容，因此从前的状态条由20pt加长到44pt, 则意味着增加了 24 pt 。这时候导航栏的尺寸保持不变，只需整体向下移动24pt 。 这时候导航栏的尺寸保持不变，只需整体向下移动 24pt 即可。同时，状态栏背景的颜色需要与导航栏背景的颜色保持一致。
当界面顶部带有图片背景时，最简单的处理方式将顶部图片元素的高度增加 24pt。如果有 Banner 贯穿到顶部，一般有以下两种处理方式。
第一种方式是为 iPhone X 单独做一套 Banner 尺寸，拉长 24pt，并且顶部 24pt 不可放置有效的阅读消息，设计两套图，一种是正常的 IPONE 6、7、8 等尺寸，一种是 ipone X 的尺寸 下需要的设计广告图。如下图所示。
第二种方式是显示导航栏，并且 Banner 不再贯穿到 顶部显示，而是移动到导航栏下方。
显示效果缺少沉浸式的设计体验感。
说完刘海区域的适配方式之后，再来说一下底部非安全区域的适配方式。置于屏幕底部的 Home Indicator 集成了原有实体 Home 键退出与切换系统应用的功能。在适配过程中，可以更换此区域内背景的颜色、透明度与高度。底部的33pt 的非安全区域内禁止出现可操作按钮。
第1种情况，当界面底部有按钮，按钮依附在底部 34pt 的非安全区域的上方即可，非安全区域的背景色一般与操作按钮的背景色保持一致。如下图所示。
第2种情况，当界面底部没有按钮，只需让列表正常显示就可以了，无须遮挡，如下图所示。
第3种情况：在广告引导页等呈现全屏样式时，需要做两套设计稿的间距和大小的设计适配，保证好的视觉内容的展示，背景色延伸的方法就好。
界面设计中的间距思考
界面所留出的固定边距是最基础的栅格系统。如下图所示。
界面的分割规范应用在品类区的功能图标，四等分的设计，符合栅格系统的设计。规范的设计，有利于开发对设计稿的还原设计。
栅格系统中的8px 的原则
8px 原则，就是界面设计中所有元素的长度除以宽度和间距都可以被 8 整除。这里的 8px 是基于@2x 倍图格式下的切图使用的。以320dp乘480dp为@1x 逻辑尺寸，安卓系统屏幕下的部分适配尺寸。
子网页设计好处 第2篇
CSS 没有正规链接标签这回事,但透过 CSS 程式码,仍可提升 SEO 的各个层面。原理如下:
合理调整内容样式：例如运用正确的 HTML heading 标签展示文字段落,而不是全部用 div/span。再将 class/id 命名符合内容语意化。这些小动作能助搜寻引擎正确理解、标示关键资料。
移动版优化：同时兼顾不同装置,无缝提供类近的閲览体验,能有效提高移动用户的黏着度;而长短句子并存的写作,更能增加文本的吸引力与可读性。利用 media query 实现回应式设计;控制水准滚动、适配各萤幕尺寸也很重要。
性能、符合规范：压缩 CSS/JS、非关键资源延後载入,有助加快页面载入;妥善运用快取机制也可起加速作用。此外,紧扣无障碍标准有益 SEO,因为搜索引擎爬虫能更轻松抓取分析这类网页内容。
以上种种优化措施,虽然并非 canonical tag 本身,但无疑能对 SEO 形成正面推动力,实在不容忽视!
子网页设计好处 第3篇
iOS的三个主要主题将其与其他平台区分开来：
为了最大限度地提高影响力和影响范围，请在想象应用程序的身份时牢记以下原则。
审美完整性
审美完整性表示应用程序的外观和行为与其功能的集成程度。例如，一个可以帮助人们执行重要任务的应用程序可以通过使用微妙，醒目的图形，标准控件和可预测的行为来使他们专注。另一方面，沉浸式应用程序（例如游戏）可以提供引人入胜的外观，带来乐趣和刺激，同时鼓励发现。
一致性
一致的应用程序通过使用系统提供的界面元素，知名的图标，标准的文本样式和统一的术语来实现熟悉的标准和范例。该应用程序以人们期望的方式结合了功能和行为。
直接操纵
屏幕内容的直接操作可以吸引人们并促进理解。用户在旋转设备或使用手势来影响屏幕内容时会经历直接的操纵。通过直接操作，他们可以看到其操作的直接可见结果。
反馈
反馈确认行动并显示结果，以使人们了解情况。内置的iOS应用程序可响应每个用户操作提供可感知的反馈。轻触时，交互元素将突出显示，进度指示器传达长时间运行的操作的状态，动画和声音有助于阐明操作的结果。
隐喻
当应用程序的虚拟对象和动作是扎根于现实世界或数字世界的隐喻时，人们会更快地学习。隐喻在iOS中可以很好地工作，因为人们可以与屏幕进行物理交互。他们将视图移开以隐藏下面的内容。他们拖动和滑动内容。他们切换开关，移动滑块并滚动选择器值。他们甚至浏览书籍和杂志的页面。
互联网产品设计的尺寸规范和分辨率的认识，是进行线上界面设计的第一步。然而，市面上的型号有很多，咋办？
作为设计师，要掌握常见的尺寸和距离，理解并做好设计的适配，才能解决不同手机屏幕之间的布局规范和换算关系。
常见的移动端手机屏幕的设计尺寸如下：
DPI和PPI的定义（来自百度百科）
DPI原来是印刷上的记量单位，意思是每英寸上，所能印刷的网点数（Dot Per Inch）。但随着数字输入，输出设备快速发展，大多数的人也将数字影像的解析度用DPI表示，但较为严谨的人可能注意到，印刷时计算的网点（Dot）和电脑显示器的显示像素（Pixel）并非相同，所以较专业的人士，会用PPI(Pixel Per Inch)表示数字影像的解析度，以区分二者。
我们通常讲的打印机分辨率是多少DPI，指的是”在该打印机最高分辨率模式下,每英寸所能打印的最多”理论”墨点数”。
Pixels Per Inch也叫像素密度，所表示的是每英寸所拥有的像素数量。因此PPI数值越高，即代表显示屏能够以越高的密度显示图像。当然，显示的密度越高，拟真度就越高。
Pixels Per Inch是像素的密度单位，就像PPI值越高，画面的细节就会越丰富，所以数码相机拍出来的图片因品牌或生产时间不同可能有所不同，常见的有72PPI，180PPI和300PPI,默认出来就是这么多(A710拍出的是180PPI)。
DPI(Dots Per Inch)是指输出分辨，针对于输出设备而言的，一般的激光打印机的输出分辨率是300PPI-600PPI，印刷的照排机达到1200PPI-2400PPI，常见的冲印一般在150PPI到300PPI之间。
例如，iPhone 6、7、8 的屏幕物理尺寸是 英寸。RetinaHD高清显示屏，移动端屏幕尺寸是：750px 乘 1334px ,326ppi，全sRGB标准。
iPhone 6 Plus,英寸(对角线)LED背光宽Multi‑Touch显示屏，具有IPS技术,1920×1080像素分辨率，401ppi.全sRGB标准,如下图所示。
分辨率、像素和屏幕物理尺寸
iPhone X 尺寸 是 英寸，手机主屏幕分辨率是750乘1624 PX，整个屏幕的像素尺寸,一倍图：375 乘 812 。
关于 iPhone 6，一倍图下：375 乘 667 。
pc端网页设计的尺寸是：1920乘1080px。
像素密度，即每英寸屏幕所拥有的像素数，像素密度越大，显示画面细节就越丰富。
像素密度=√{（长度像素数^2+宽度像素数^2）}/ 屏幕尺寸。
屏幕分辨率是指纵横向上的像素点数，单位是px。屏幕分辨率确定计算机屏幕上显示多少信息的设置，以水平和垂直像素来衡量。就相同大小的屏幕而言，当屏幕分辨率低时（例如 640 x 480），在屏幕上显示的像素少，单个像素尺寸比较大。屏幕分辨率高时（例如 1600 x 1200），在屏幕上显示的像素多，单个像素尺寸比较小。
显示分辨率就是屏幕上显示的像素个数，分辨率160×128的意思是水平方向含有像素数为160个，垂直方向像素数128个。屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。
比例 ：4：3、5：4、16:10、16:9、21:9
4:3 是最常见屏幕比例。16:10 就是常见的「宽屏幕」比例。16:9 主要是HD电视在用的比例。
常听到的720p、1080p 都是这个比例。
逻辑大小和像素大小
对于人类的视觉对于对象尺寸的判断是由逻辑大小来决定的。以一个图形为例，无论这个图形距离我们多远，用户的认知中，大小是直径为25mm 。 也就是说，这是它的真实的大小，所以我们把人对于物体真实尺寸的认知成为逻辑大小。
屏幕像素数量不同，在相同像素大小的情况下，图形显示的大小，就会不一样。
IPONE 8 plus 屏幕上的元素尺寸需要在IPONE 8 的基础上乘以 ，才能以平常的物理尺寸显示元素的大小。
逻辑像素与实际像素
Ipone 手机屏幕常见的分辨率有 640px乘1136px、750px乘1334px、1242px乘2208px及1125px乘2436px 等。
同样一个圆，高分辨率的屏幕显示更清晰，视觉体验会更好。
设计时，优先保证高分辨率的屏幕效果。
一倍图字样的切图则应用在普通屏幕上，带 @2x字样的切图通常用于 Retina 屏幕上，带@3x 字样的切图则应用在 IPONE Plus 系列手机的屏幕上。设计者只需把这 3 个尺寸的切图给技术人员，技术人员可以将合适的尺寸的图片适配到各个机型了。实际像素除以倍率，就得到逻辑像素尺寸。
所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。最初该技术是用于Moto Aura上。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。
为了适配，是为了实现视觉的统一感，让相同大小的物体在不同像素密度的屏幕上看起来大小是相同的感觉。逻辑像素是pt，普通像素是px。 1 pt 在ipone 6、ipone 7、ipone 8等于 2px ，在 iPhone 6 plus、iPhone 7 plus、iPhone 8 plus中等于3px。开发项目中，一倍图机型上是100px乘100px,在iPhone 6s 中显示出来的是200px乘200px，在 iPhone 8 plus 中显示出来的是 300px乘300px 。在视觉上，这三个尺寸看起来是一样的。下图是 ipone 手机界面详细的适配尺寸规范。
针对以上规范，设计师的尺寸为 375乘667 pt、导出格式为 @2x 的设计稿可以应用在ipone 6、ipone 7、ipone 8 手机中。
安卓系统把各种设备的像素密度划分成几个范围区间，并且给不同范围的设备定义了不同的倍率，保证显示效果的相近。安卓系统的逻辑像素单位是 dp 。
安卓系统的手机屏幕都可以找到自己密度值、代表分辨率、倍率、逻辑分辨率等。
密度为xxxhdpi(1080px乘1920px) 的手机目前市场份额占比较大；目前密度为 xhdpi、xxdpi 和 xxxdpi 的手机产品占绝大多数的市场份额，而正好他们的逻辑像素是 360dp 乘 640dp, 根据这样的分辨率标准导出 @2x、@3x、@4x 这三种格式的切图，基本就可以适配市面上绝大部分的Andriod 系统的机型了。
全局边距
在UI界面设计中，以(750px乘1334px)全局边距一般是30PX，整个产品设计的边距都是30px，保持一致性。
或者 32px 的全局边距也是不错的选择，比如：Booking 就用了这个尺寸。
24px 全局边距
Facebook ，它们不但距离屏幕边缘距离一致，就连边缘距离一致，就连头像与文字的距离也相同，都是 16px。
40px 全局边距
40px 属于较大的大边距，留白开始变多，界面呼吸感好，阅读体验好。例如：36kr。大边距适合单一的应用，不需要复杂信息和交互层级。
50px 全局边距
50px 可以算最大边距，它让界面变得干净整洁，用户在浏览时极为轻松。
竖向间距
定义卡片和卡片间的间距一般是：20px、24px、30px，最大间距不超过40px。间距的背景色可以与你分割线一致，也可以浅一些，界面柔和一点。
88px