<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>UI设计规范 &#8211; 萧邦的博客</title>
	<atom:link href="https://www.zlhlab.top/tag/ui%e8%ae%be%e8%ae%a1%e8%a7%84%e8%8c%83/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.zlhlab.top</link>
	<description>If not me who, If not now when</description>
	<lastBuildDate>Sun, 22 Oct 2017 14:57:40 +0000</lastBuildDate>
	<language>zh-Hans</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.6</generator>
	<item>
		<title>ios11 and iphoneX UI设计规范</title>
		<link>https://www.zlhlab.top/ios11-and-iphonex-ui%e8%ae%be%e8%ae%a1%e8%a7%84%e8%8c%83/</link>
		
		<dc:creator><![CDATA[萧邦]]></dc:creator>
		<pubDate>Sun, 22 Oct 2017 14:57:40 +0000</pubDate>
				<category><![CDATA[推荐]]></category>
		<category><![CDATA[iPhone X规范]]></category>
		<category><![CDATA[UI设计规范]]></category>
		<guid isPermaLink="false">https://www.zlhlab.top/?p=393</guid>

					<description><![CDATA[ios11 and iphoneX UI设计规范 近期苹果发布了ios11系统、iPhone8、iPhone <div class="more-link">
				 <a href="https://www.zlhlab.top/ios11-and-iphonex-ui%e8%ae%be%e8%ae%a1%e8%a7%84%e8%8c%83/" class="link-btn theme-btn"><span>Read More </span> <i class="fa fa-caret-right"></i></a>
			</div>]]></description>
										<content:encoded><![CDATA[<h3>ios11  and  iphoneX  UI设计规范</h3>
<p>近期苹果发布了ios11系统、iPhone8、iPhone 8 Plus、iPhone X等，but 网上的设计规范零散，于是入行两年的我做了一些总结，如有雷同请各位体谅，此次总结望对各位设计界的同仁有所帮助。（如有错误，请各位指出）！</p>
<p><strong>iOS 11</strong></p>
<p><a href="https://www.zlhlab.top/wp-content/uploads/2017/10/01855e59c37226a8012053f81ce835.png" target="_blank"><img decoding="async" src="https://www.zlhlab.top/wp-content/uploads/2017/10/01855e59c37226a8012053f81ce835.png" alt=""></a></p>
<p>iOS 11是苹果公司研发的操作系统。北京时间2017年6月6日凌晨1点， WWDC（苹果全球开发者大会）2017在加州圣何塞麦克恩利会议中心召开，苹果系统iOS 11正式亮相。<br />
正式版iOS 11在2017年9月份随着新品iPhone的发布推送更新升级。2017年9月20日，iOS 11正式版发布，增加的特定功能是：二维码扫描、诈骗短信识别、拼音键盘以及上海话语音识别等,其中，二维码扫描还支持“扫码解锁”摩拜单车。</p>
<p><strong>动态效果</strong></p>
<p>Dock 可以出现在任何应用的界面上，只要从屏幕下方划出就可以了。长按一个应用图标，可以将它拖到正在使用的应用之上。<br />
也就是说，屏幕上会同时显示出两个应用，再次拖动一个应用的边缘，界面就演化成 1：1 或者 1：2 的分屏。这个操作的过程有些细节，比如拖动应用边框，界面较大的那个会在边缘向内收缩——这是在告诉你它即将缩小、另一个应用要出现在隔壁了。</p>
<p><a href="https://www.zlhlab.top/wp-content/uploads/2017/10/01cda459c37254a8012053f8fe1add.png" target="_blank"><img decoding="async" src="https://www.zlhlab.top/wp-content/uploads/2017/10/01cda459c37254a8012053f8fe1add.png" alt=""></a></p>
<p><strong>动态特效</strong></p>
<p>比如录屏，点击它你会看到一个从 3 到 1 的倒计时，然后它才开始录屏；电池图标点一下会变成黄色，用来开启省电模式。更多的情况下，长按图标会进入一个二级页面，比如屏幕明暗的调节。这让你更直观的看到亮度的变化。</p>
<p><strong>锁屏界面</strong></p>
<p>Apple Music 在锁屏上占据的位置更少，它变成了一张卡片，显示歌名和控制按键。原本 Music 会占据一整个锁屏，有些第三方应用还会在这里展示滚动歌词。现在的样子更清新一些了。</p>
<p><strong>搜索顺序</strong></p>
<p>在Spotlight 键入关键词，紧接着它的是推荐的关键词、通讯录、短信内容等等融合在一起的一个下拉菜单，在这下方才是与这个关键词有关的应用程序。在 iOS 10 上，这个顺序是反过来的。以及，Spotlight 会一直顶在主屏左边、也就是摆放各种插件的界面。</p>
<p><strong>模块变样</strong></p>
<p>Apple Music 在控制中心中有点特殊，如果你长按，会看到这个框上不仅显示正在播放的歌曲名称、以及暂停播放和前后首按钮，右上角还有一个小小的信号图标，这里可以让你切换正在使用的蓝牙设备，比如 AirPods、各种音响。相比之下，iOS 10 切换蓝牙设备的时候还需要你到设置中找到“蓝牙”，再一个个查看。</p>
<p><strong>拖动图标</strong></p>
<p>同时拖动多个图标到文件夹，这也是效率提升的体现，如果你要把几个应用拖进某个文件夹，iOS 11 上可以长按一个图标、同时点选其他应用，就可以把它们几个同时拖进目标文件夹之中。手机上也支持这个操作。</p>
<p><a href="https://www.zlhlab.top/wp-content/uploads/2017/10/01c48259c37271a8012053f8cd1c07.png" target="_blank"><img decoding="async" src="https://www.zlhlab.top/wp-content/uploads/2017/10/01c48259c37271a8012053f8cd1c07.png" alt=""></a></p>
<p><strong>相关UI</strong></p>
<p><a href="https://www.zlhlab.top/wp-content/uploads/2017/10/01ffaa59c3727ea8012053f8484299.png" target="_blank"><img decoding="async" src="https://www.zlhlab.top/wp-content/uploads/2017/10/01ffaa59c3727ea8012053f8484299.png" alt=""></a></p>
<p><strong><em>一、图标<br />
在比较中寻求进步<br />
iOS 10 VS iOS11</em></strong></p>
<p><a href="https://www.zlhlab.top/wp-content/uploads/2017/10/01df2759c3728ea8012053f8ed7324.jpg@800w_1l_2o_100sh.jpg" target="_blank"><img decoding="async" src="https://www.zlhlab.top/wp-content/uploads/2017/10/01df2759c3728ea8012053f8ed7324.jpg@800w_1l_2o_100sh.jpg" alt=""></a></p>
<p><strong>2PX线性图标</strong></p>
<p>特点：<br />
1. 未选中时图标是以2px线框形展现，选中后的当前页以填充形态展现；<br />
2. 设计、语言一致性，图标精致轻巧。</p>
<p><a href="https://www.zlhlab.top/wp-content/uploads/2017/10/0194d759c3729ca801218e18ffd37a.jpg@800w_1l_2o_100sh.jpg" target="_blank"><img decoding="async" src="https://www.zlhlab.top/wp-content/uploads/2017/10/0194d759c3729ca801218e18ffd37a.jpg@800w_1l_2o_100sh.jpg" alt=""></a></p>
<p><strong>面性图标</strong></p>
<p>特点：用轻量化的面性图标代替2 PX的线性图标，以较为圆润的外观展现，使整体更加具有亲和力。</p>
<h3><strong>二、字体</strong></h3>
<p><strong>iOS 11粗体标题</strong></p>
<p><a href="https://www.zlhlab.top/wp-content/uploads/2017/10/01dfdd59c372daa801218e181de88f.jpg@800w_1l_2o_100sh.jpg" target="_blank"><img decoding="async" src="https://www.zlhlab.top/wp-content/uploads/2017/10/01dfdd59c372daa801218e181de88f.jpg@800w_1l_2o_100sh.jpg" alt=""></a></p>
<p><a href="https://www.zlhlab.top/wp-content/uploads/2017/10/01004159c37308a8012053f8eb6e8e.png" target="_blank"><img decoding="async" src="https://www.zlhlab.top/wp-content/uploads/2017/10/01004159c37308a8012053f8eb6e8e.png" alt=""></a></p>
<p><strong>粗体</strong><br />
<strong>特点：粗体，且字体像素大，标题醒目</strong>（开个玩笑：典型的老夫设计）</p>
<p><a href="https://www.zlhlab.top/wp-content/uploads/2017/10/011f7c59c37320a8012053f82c5a28.png" target="_blank"><img decoding="async" src="https://www.zlhlab.top/wp-content/uploads/2017/10/011f7c59c37320a8012053f82c5a28.png" alt=""></a></p>
<p>在扁平化设计中的优点：在扁平化设计中文字排版影响着信息层级展示的清晰与否，通过文字的字号、字重、颜色等的对比去建立清晰的信息层级，而不用太多的装饰元素。</p>
<p><strong>三、设计元素</strong></p>
<p><strong>圆角、卡片化、投影元素</strong></p>
<p><a href="https://www.zlhlab.top/wp-content/uploads/2017/10/01a6a059c37343a801218e185dfd7a.jpg@800w_1l_2o_100sh.jpg" target="_blank"><img decoding="async" src="https://www.zlhlab.top/wp-content/uploads/2017/10/01a6a059c37343a801218e185dfd7a.jpg@800w_1l_2o_100sh.jpg" alt=""></a></p>
<p>特点：圆角弧度的增大让用户的视觉更轻快，柔和；卡片式设计贯穿在界面各个图文排版中，起到了规整图文内容的作用。投影元素的加入，令设计元素更加独立醒目，强有力的抓住用户的注意力。</p>
<p><strong>四、界面布局中的留白</strong></p>
<p><a href="https://www.zlhlab.top/wp-content/uploads/2017/10/015a6859c37361a801218e189ffcd3.png" target="_blank"><img decoding="async" src="https://www.zlhlab.top/wp-content/uploads/2017/10/015a6859c37361a801218e189ffcd3.png" alt=""></a></p>
<p>特点：大标题文本包含一组带有图片和描素的元素，组元素和组元素之间保持较大的间距。<br />
优点：设计元素和元素之间保持足够的间距，可以减少用来区分层级关系的不必要装饰块元素，使界面简洁、干练。</p>
<p><strong>支持设备</strong></p>
<p>iphone5s及5s以上<br />
ipad air/air2及以上<br />
ipod touch第六代</p>
<p><strong>iPhone X</strong></p>
<p><a href="https://www.zlhlab.top/wp-content/uploads/2017/10/01ba1159c37375a801218e18c57e4c.jpg" target="_blank"><img decoding="async" src="https://www.zlhlab.top/wp-content/uploads/2017/10/01ba1159c37375a801218e18c57e4c.jpg" alt=""></a></p>
<p><strong>iPhone界面规范</strong></p>
<p><a href="https://www.zlhlab.top/wp-content/uploads/2017/10/01f54e59c3739ea801218e18907930.png" target="_blank"><img decoding="async" src="https://www.zlhlab.top/wp-content/uploads/2017/10/01f54e59c3739ea801218e18907930.png" alt=""></a></p>
<p><a href="https://www.zlhlab.top/wp-content/uploads/2017/10/015b7d59c3739ea8012053f88f8071.jpg@800w_1l_2o_100sh.jpg" target="_blank"><img decoding="async" src="https://www.zlhlab.top/wp-content/uploads/2017/10/015b7d59c3739ea8012053f88f8071.jpg@800w_1l_2o_100sh.jpg" alt=""></a></p>
<p><strong>不同机型升级iOS 11效果展</strong></p>
<p><a href="https://www.zlhlab.top/wp-content/uploads/2017/10/01048359c37406a801218e18f08dbd.jpg@800w_1l_2o_100sh.jpg" target="_blank"><img decoding="async" src="https://www.zlhlab.top/wp-content/uploads/2017/10/01048359c37406a801218e18f08dbd.jpg@800w_1l_2o_100sh.jpg" alt=""></a></p>
<p><strong>iPhone X规范</strong></p>
<p><a href="https://www.zlhlab.top/wp-content/uploads/2017/10/0181c759c37454a8012053f80e046c.png" target="_blank"><img decoding="async" src="https://www.zlhlab.top/wp-content/uploads/2017/10/0181c759c37454a8012053f80e046c.png" alt=""></a></p>
<p><a href="https://www.zlhlab.top/wp-content/uploads/2017/10/01dfd759c37455a8012053f8e44497.png" target="_blank"><img decoding="async" src="https://www.zlhlab.top/wp-content/uploads/2017/10/01dfd759c37455a8012053f8e44497.png" alt=""></a></p>
<p><a href="https://www.zlhlab.top/wp-content/uploads/2017/10/01860859c37456a801218e18e26d2a.jpg@800w_1l_2o_100sh.jpg" target="_blank"><img decoding="async" src="https://www.zlhlab.top/wp-content/uploads/2017/10/01860859c37456a801218e18e26d2a.jpg@800w_1l_2o_100sh.jpg" alt=""></a></p>
<p><strong>分享iOS11 GUI视觉规范</strong>（附PSD+Sketch+Adobe XD源文件）</p>
<p><a href="https://www.zlhlab.top/wp-content/uploads/2017/10/iOS-11-GUI%E6%BA%90%E6%96%87%E4%BB%B6.jpg" target="_blank"><img decoding="async" src="https://www.zlhlab.top/wp-content/uploads/2017/10/iOS-11-GUI%E6%BA%90%E6%96%87%E4%BB%B6.jpg" alt=""></a></p>
<p><strong>百度网盘下载地址：</strong></p>
<ol>
<li>665M    PSD格式下载地址：链接: <a href="https://pan.baidu.com/s/1i5CFD8D" title="https://pan.baidu.com/s/1i5CFD8D" target="_blank">https://pan.baidu.com/s/1i5CFD8D</a> 密码: v3km</li>
<li>38.5M   sketch格式下载地址：链接: <a href="https://pan.baidu.com/s/1c163YcK" title="https://pan.baidu.com/s/1c163YcK" target="_blank">https://pan.baidu.com/s/1c163YcK</a> 密码: j4hs</li>
<li>7.7M    Illustrator格式下载地址： 链接: <a href="https://pan.baidu.com/s/1i5nDgBr" title="https://pan.baidu.com/s/1i5nDgBr" target="_blank">https://pan.baidu.com/s/1i5nDgBr</a> 密码: 5c27</li>
<li>三个打包下载地址：链接: <a href="https://pan.baidu.com/s/1slFNbtV" title="https://pan.baidu.com/s/1slFNbtV" target="_blank">https://pan.baidu.com/s/1slFNbtV</a> 密码: xaqt</li>
</ol>
<p>本文作技术分享，原始文章链接：<br />
1、<a href="http://www.25xt.com/?p=16136" title="iPhone8和iPhoneX发布了，iOS11视觉规范源文件也来了" target="_blank">iPhone8和iPhoneX发布了，iOS11视觉规范源文件也来了</a><br />
2、<a href="http://www.zcool.com.cn/article/ZNTU5Mzky.html" title="ios11 and iphoneX UI设计规范" target="_blank">ios11 and iphoneX UI设计规范</a></p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
