怎么让wegame适应屏幕大小_iOS的五大设计原则:统一化和适应化原则

昨天米醋跟大家分享了iOS的五大设计原则中凸显内容原则,那么今天我们继续来说说统一化原则和适应化原则。

统一化原则

统一化原则主要体现在视觉统一和交互统一两个方面。在视觉统一方面,要讲究字体、颜色和元素的统一性,标题字号的统一,主色彩和辅助颜色的统一都是能够体现出产品一致性的基本标准,关于这方面的知识将在后面的内容中进行详细介绍;交互统一,是指操作使用的一致性,在一个软件中保持交互形式的一致性可以大大降低用户的操作时间。下面来对比一下锤子手机和苹果手机的时钟设置方式。在锤子手机的界面中设置闹钟、秒表和计时器的方式都是在不同的位置进行设定的,交互的形式有点击和下拉方式,其视觉表现的形式也不相同,对于第一次使用的用户来说,操作起来会比较困难,如图所示;而在苹果的设计中更为讲究操作的统一性,操作方式全是点击,秒表和计时器都是使用点击开启的方式,这样的设计能让用户在最短的时间内找到正确的操作方式,如图所示。由此看来,交互统一比视觉统一在用户体验方面要更重要一些。

0f53a6cf6cb049a1d5518ad70c0965e8.png

锤子手机闹钟、秒表和计时器设置

db3c253f06430ae2f86c1f7424ea41d0.png

9c0ad7ad2149e3f64a38eff802459ab6.png

d91d41056875e92eacb226217ef89da3.png

苹果手机闹钟、秒表和计时器设置在交互中要遵循从哪来回哪去的原则,要保持路径的统一性。可以看到在iOS系统中,点击App主图标后会基于产品的icon放大展示出产品的主界面,如图所示,当按Home键退到主页界面的时候也是基于产品icon的缩放进行消失的。这样的交互方式能更好地体现出页面与App之间的关系。

062e9dafa34644fa2d8d3b486cfdb46a.png

基于产品的icon放大展示主界面

适应化原则

适应化原则包括了场景适应和屏幕适应两种。一个指的是使用场景的适应,另外一个是屏幕的适配。在苹果的原生天气App中,不仅可以通过天气的变化进行自适应匹配,还可以根据时间来区分白天和黑夜,让用户在不同的环境和时间下都能感受到软件的智能性,如图所示。6c840908558757070e6872953413ccdb.png365059b1d0f22d6c52321a9e6700e170.png苹果的原生天气App在很多的阅读类产品中也会有日夜的切换功能,从而保证用户在夜晚关灯的模式下还能舒服的进行阅读,如图所示。

7c6c3b306e297909049ed3ea3b7e09dd.png

8621b72e2b0c6f5e8aecaaed8df1d2a7.png

日夜切换功能有时候可以通过硬件和软件的结合来对场景进行适应,在TCL 360空气净化器的界面设计中,可以通过不同的颜色来表现空气的指数,这样可以用最直观的方式表现空气的质量,如图所示。

4b3013710a2528df907c7152e6ae488a.png

TCL 360空气净化器的界面相比于适应化原则中的场景适应,屏幕适应则更为重要。在iPad的界面中要考虑横屏和竖屏的效果,设置界面的左侧菜单的宽度是保持不变的,而右侧的列表信息会发生适应变化,这是常见的适配方式,可以有效保证视觉的统一性,如图所示。a8aaa87380dff4e6589b1a7749fd9384.pnge824b744e2241568ffefc35b782a5477.png屏幕适应在横屏和竖屏中的适配中,经常会出现视觉不平衡的情况,我们会对单独的控件进行调整适配。例如计时器的时间选择框,为了让竖屏模式下的界面显得更为饱满,对其单独进行了放大设计,让页面从视觉上看起来更为舒服,如图所示。

38763add27ef21199ce88b4f73b2b9e4.png计时器的时间选择框

在手机移动端中,苹果有iPhone 4、iPhone 5、iPhone 6和iPhone 6 Plus等不同的机型,其中iPhone 4和iPhone 5的屏幕比例还不一样,有时候为了让用户在不同的机型上都能看到想要展示的信息,就需要考虑到在不同比例上的屏幕适应,例如在图中,直接嵌套后可以看到在iPhone4下的界面展示不完整,而单独对iPhone4中的按钮进行缩放处理,让整体功能(下面的两个按钮)在一个页面中展示完整,可以大大节省展示空间,如图所示。

2c3625d5293d6e7920c82be93ce351ba.png

直接嵌套后的界面展示不完整

37d6b00c6f048eeeaced8a7e8359f71e.png

单独对按钮进行缩放后可展示完整在设计工作中,我们应该设计哪个尺寸?如何只做一套设计图就可以完成多屏幕的适配呢?下面以iOS的界面尺寸为例来进行讲解。苹果手机的分为3种主要的分别率,即640px×1336px、750px×1334px和1242px×2208px,其中切图的后缀分别为@2x、@2x和@3x,如图6-20所示。在现在的硬件设备趋势下,效果图可以出iPhone 6的尺寸大小,也就是750px×1334 px的大小,可以通过iPhone 6的基础尺寸来进行适配。

44dc92f203653267d3e945c05ba6416d.png苹果手机的分辨率

在Photoshop CC 2015中新建文档时,可以从“画板大小”选项中找到iPhone机型的分辨率,如图6-21所示。一般会使用画板的方式来制作App界面,因为在一个画布中可以建立多个画板,这样可以同时处理多个页面,从而保证页面的统一性,同时也方便进行制作,如图所示。

9625c3690e5252e66a8dbd420286cea2.png

在画板大小中设置iPhone分辨率

9b260ef283b01285465cfdca9ee672f9.png

在一个画布中建立多个画板因为设计的效果图是iPhone 6的尺寸(750px×1334px),所以在设计的过程中我们要理解界面元素的适配原则。由于iPhone 5和iPhone 6的屏幕精度是一样的,所以从iPhone 5到iPhone 6的适配可以进行拉升适配,但是不同元素的拉升方式也是不同的。iPhone5和iPhone 6共用一套切图,如图所示是同款App在不同屏幕下的截图大小对比。

b70150ea3e04815459ca12db713acab8.png

同款App在不同屏幕下的大小对比在将iPhone 5适配到iPhone 6时,头像和文字的大小可以保持不变,导航条可以通过左右进行拉伸适配,如图6-24所示;对于文字的适配,可以根据屏幕的宽度进行折行显示,如图所示;对于按钮控件的适配,可以保持按钮的高度进行左右拉升适配,如图所示;对于图片适配,可以进行等比缩放,如图所示。

e9bfc77935254db6bd15c707245f42b5.png

导航条的适配

44c92bec7cb8549e260bd7a70b4b9219.png

文字的适配

84068021bd865f3a41682fe0fd96b268.png

按钮控件的适配

10028759cbe5461762497d947b0abcaf.png

图片的适配

对于iPhone 6适配到iPhone 6 Plus就更好办了,因为iPhone 6 Plus的尺寸是iPhone 6的1.5倍,所以只需要出一套@3x的切图就可以了(1.5倍iPhone6的切图)。好啦!今天就分享到这里,明天米醋将继续给大家分享iOS的设计原则中层级性原则、易操作性原则的设计技巧,我们不见不散哦!cf3c4f64b3a83c115baeaccc480e3c05.gif

cb6c94d0f245d2942e1f9543fc969a84.png

8926736c80a5a282e5a48562669ef196.png

5cb64ef5ac7df14155169049c342ebac.png回复【AE教程】获取全套AE动效视频课程bf16cd6fd5c651f9ca9cd3a380e97331.gif

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/428563.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

语言求圆周率近似值改错_新证明解决了如何求无理数的近似值

原文:Kevin Hartnett,QuantaMagazine日前,一份新鲜出炉的论文证明了近80年悬而未决的达芬-谢弗(Duffin-Schaeffer)猜想,让数轴上讳莫如深的部分再也不如表面看来那么遥不可及。达芬-谢弗猜想的证明完美解答…

谷歌翻译无法连接网络_window10无法连接网络

很多朋友都将电脑的系统升级到Win10,如果遇到了Win10系统无法连接网络该如何解决,下面就为大家介绍一下解决的方法。window10无法连接网络一、检查路由器1、重新启动(断电10秒钟) 无线路由器和猫(调制解调器),有时候是路由器的故障&#xff1…

获取弹出的窗口_Win7系统如何获取设置everyone权限的问题

一位win7之家系统的小伙伴,想要在电脑系统中获取everyone权限,但是不知道该怎么做,对于Win7电脑如何获取设置everyone权限这个问题,小编觉得我们可以在电脑的计算机中找到相关的磁盘,打开磁盘属性然后在安全选项中进行…

异步请求中jetty处理ServletRequestListener的坑

标题起得比较诡异,其实并不是坑,而是jetty似乎压根就没做对异步request的ServletRequestListener的特殊处理,如果文中有错误欢迎提出,可能自己有所疏漏了。 之前遇到了一个bug,在Listener中重写requestDestroyed清理资…

华为h22h05服务器做raid_华为V5服务器 RAID控制卡(LSI SAS3008IR)

提供高速接口和模块LSI SAS3008IR的PCIe Core提供PCIe x8接口,每lane速率为8Gb/s,可以兼容x1、x2、x4配置;支持PCIe 3.0规格,兼容PCIe 2.x和PCIe 1.x。LSI SAS3008IR的SAS模块提供SAS功能,并定义支持的硬盘速率。LSI S…

css加了固定定位就不显示内容_前端开发必备,学好”定位“向菜鸟说拜拜

众所周知,前端CSS中,盒模型、浮动、定位为必须掌握的三座大山。今天就来聊聊定位的那些事。定位是什么?先来看看哪些场景用到定位,如下图所示,凡是有盒子压住另一个盒子的地方都可定位,因为用浮动做不了&am…

vscode更换主题的插件_VScode 插件开发(三)主题

咱们上回书说道,安装完基础环境,我们要来玩自己的主题了1. 创建一个主题项目$ yo code选中 New Color Theme接下来照图中所选,完成项目创建(简单英语不做解释)打开项目如图2. 配置文件2.1 themes这个文件夹包含主题配置文件,可以新…

软件工程概论课后作业01

1. 网站系统开发需要掌握的技术 ①java语言 Java语言体系比较庞大,包括多个模块。从WEB项目应用角度讲有JSP,Servlet,JDBC,JavaBean(Application)四部分技术。JDBC可做三件事情:与数据库建立连接…

mysql 参数bug_MySQL 的这个 BUG,坑了多少人?

作者:腾讯数据库技术来源:cloud.tencent.com/developer/article/1367681▌问题描述近期,线上有个重要Mysql客户的表在从5.6升级到5.7后,master上插入过程中出现"Duplicate key"的错误,而且是在主备及RO实例上…

i9 9900k mysql_i9-9900K和9900KS有什么区别?i9-9900KS和i9-9900K区别对比评测

众所周知,i9-9900KF相当于i9-9900K去除核显的版本,其它参考保持一致,所以在性能上也是相同的。不过在近期,intel牌牙膏厂再一次发布了一款九代酷睿i9-9900KS特别版,从产品型号S后缀上来看,确实有点类似于NV…

Memory及其controller芯片整体测试方案(上篇)

如果你最近想买手机,没准儿你一看价格会被吓到手机什么时候偷偷涨价啦! 其实对于手机涨价,手机制造商也是有苦难言,其中一个显著的原因是存储器芯片价格的上涨↗↗↗ >>> 存储器memory的江湖地位 存储器memory&#xff0…

BootStrapJS——modal弹出框

学习参考视频https://ninghao.net/video/1615 1.对话框 - Modal 需要bootstrap的CSS文件引入&#xff0c;以及jQuery的js包 1 <!DOCTYPE html>2 <html lang"en">3 <head>4 <meta charset"UTF-8">5 <title>弹窗测试&…

mysql.ini环境配置_MySQL配置文件mysql.ini参数详解

my.ini(Linux系统下是my.cnf)&#xff0c;当mysql服务器启动时它会读取这个文件&#xff0c;设置相关的运行环境参数。my.ini分为两块&#xff1a;Client Section和Server Section。Client Section用来配置MySQL客户端参数。要查看配置参数可以用下面的命令&#xff1a;show va…

mysql数据备份在哪里_mysql之数据备份与恢复

本文内容&#xff1a; 复制文件法利用mysqldump利用select into outfile其它(列举但不介绍)首发日期&#xff1a;2018-04-19有些时候&#xff0c;在备份之前要先做flush tables &#xff0c;确保所有数据都被写入到磁盘中。复制文件法&#xff1a;对于myisam存储引擎的数据库&a…

python opencv 边缘检测_Python使用Opencv实现边缘检测以及轮廓检测的实现

边缘检测Canny边缘检测器是一种被广泛使用的算法&#xff0c;并被认为是边缘检测最优的算法&#xff0c;该方法使用了比高斯差分算法更复杂的技巧&#xff0c;如多向灰度梯度和滞后阈值化。Canny边缘检测器算法基本步骤&#xff1a;平滑图像&#xff1a;通过使用合适的模糊半径…

web程序入门五(http无状态)

Asp.net中的状态保持方案&#xff1a; ViewState&#xff1a;是donet特有的 微软提供的对象来完成状态保持 ViewState["key1"] 11; 赋值 键值对 形式 object类型 ViewState["key1"] 直接取值&#xff0c;将其转化成相应的类型 原理&#xff1a;本质…

互评Beta版本(Hello World!——SkyHunter)

1 基于NABCD评论作品&#xff0c;及改进建议 SkyHunter这款游戏我很喜欢&#xff0c;小时候总玩飞机类的游戏&#xff0c;这款游戏我上课的时候试玩了&#xff0c;在我电脑上运行是很好玩的&#xff0c;音乐震撼&#xff0c;画面玄幻&#xff0c;富有金属音乐的味道&#xff0c…

unshift() 方法将一个或多个元素添加到数组的开头,并返回新数组的长度

var arr [1, 2];arr.unshift(0); //result of call is 3, the new array length //arr is [0, 1, 2]arr.unshift(-2, -1); // 5 //arr is [-2, -1, 0, 1, 2]arr.unshift( [-3] ); //arr is [[-3], -2, -1, 0, 1, 2]语法 arr.unshift(element1, ..., elementN)参数列表 elemen…

markdown基础语法整理

标题级别(一共六级) &#xff08;建议在#后加一个空格比较标准&#xff09; 通过在文字下方添加“”和“-”&#xff0c;他们分别表示一级标题和二级标题。在文字开头加上 “#”&#xff0c;通过“#”数量表示几级标题。&#xff08;共1~6级标题&#xff0c;级别越小字体越大&a…

安卓源码下载

SetupSecurityPortingTuningCompatibilityReference转到源代码SetupGetting StartedDownloading and Building RequirementsEstablishing a Build EnvironmentDownloading the SourcePreparing to BuildCompiling with JackUsing Reference BoardsRunning BuildsBuilding Kerne…