怎么让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,一经查实,立即删除!

相关文章

23种设计模式之原型模式代码实例

原型模式就是利用一个克隆”原型“来产生新对象的一种模式, 克隆又分浅克隆与深克隆, 浅克隆:将一个对象复制后,基本数据类型的变量都会重新创建,而引用类型,指向的还是原对象所指向的。 深克隆&#xff1a…

图论模板——费用流(无法处理负环)

费用流 https://www.acwing.com/problem/content/2176/ //最大流的最小费用 #include<bits/stdc.h> using namespace std;const int N 5010, M 100010, INF 1e8;int n,m,S,T; int ne[M],e[M],f[M],w[M],h[N],idx; int q[N],d[N],pre[N],incf[N]; bool st[N];void add…

css调用外部字体

CSS中可以使用font-face属性即可实现调用任何外部等特殊字体。 font-face属性介绍及其实例&#xff1a; 对浏览器的支持&#xff1a; Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。 Internet Explorer 9 支持新的 fo…

python注入点查找_sqlmap常用注入点检测爆破命令

1、检测注入点是否可用python sqlmap.py -u "url"2、从目标url爆破所有数据库名python sqlmap.py -u "url" --dbs3、从目标url爆破当前数据库名python sqlmap.py -u "url" --current-dbs4、列出数据库所有用户python sqlmap.py -u "url&quo…

python如何输入空行_在python中,如何在接受用户输入时跳过空行?

您得到的行为是预期的&#xff0c;请阅读input文档。在input([prompt])If the prompt argument is present, it is written to standard output without a trailing newline. The function then reads a line from input, converts it to a string (stripping a trailing newli…

js层级选择框样式_【JavaWeb】85:jQuery的各种选择器

今天是刘小爱自学Java的第85天。感谢你的观看&#xff0c;谢谢你。话不多说&#xff0c;开始今天的学习&#xff1a;选择器的作用是什么&#xff1f;可以快速准确地定位我们所需要的标签。刚学CSS的时候&#xff0c;觉得CSS选择器也太多了吧&#xff0c;直到今天学了jQuery选择…

python的单例模式

单例模式(Singleton Pattern)&#xff0c;是一种软件设计模式&#xff0c;是类只能实例化一个对象&#xff0c; 目的是便于外界的访问&#xff0c;节约系统资源&#xff0c;如果希望系统中 只有一个对象可以访问&#xff0c;就用单例模式&#xff0c; 显然单例模式的要点有三个…

c语言自定义输出小数点位数_C语言中输出时怎样控制小数点后的位数,请举例说明......

控制2113小数位数就是通过输出格式说明符来规定的举例5261说明如下4102&#xff1a;1、float f13.1415926;2、float f21234.1415926;3、float f3124.1;4、printf("%3.4f",f1);//输出结果为&#xff1a;_ _ 3.1416(_表示空格1653)5、printf("%3.4f",f2);//输…

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

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

python在不同层级目录import模块的方法

转自&#xff1a;https://www.cnblogs.com/luoye00/p/5223543.html 使用python进行程序编写时&#xff0c;经常会使用第三方模块包。这种包我们可以通过python setup install 进行安装后&#xff0c;通过import XXX或from XXX import yyy 进行导入。不过如果是自己遍写的依赖包…

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

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

php: +1天, +3个月, strtotime(): +1 day, +3 month

php: 1天, 3个月, strtotime(): 1 day, 3 month 比如&#xff0c;我现在当前时间基础上1天&#xff1a; strtotime("1 day"); 比如我现在&#xff0c;2014-05-01时间上 3个月 $s strtotime("2014-05-01"); $d strtotime("3 month", $s); 转载…

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

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

异步请求中jetty处理ServletRequestListener的坑

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

Maven国内镜像 Maven阿里云镜像

<mirror><id>nexus-aliyun</id><mirrorOf>central</mirrorOf><name>Nexus aliyun</name><url>http://maven.aliyun.com/nexus/content/groups/public</url> </mirror> 转载于:https://www.cnblogs.com/a2b1/p/787…

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

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

通过tomcat日志定位错误

1、tomcat的安装路径下tomcat home下的common文件夹下的classes文件夹中创建log4j.properties文件&#xff0c;即 apache-tomcat-5.5.20\common\classes log4j.rootLoggerinfo,Console,Rlog4j.appender.Consoleorg.apache.log4j.ConsoleAppenderlog4j.appender.Console.layouto…

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

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

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

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

sql之引擎介绍

数据库引擎介绍MySQL数据库引擎取决于MySQL在安装的时候是如何被编译的。要添加一个新的引擎&#xff0c;就必须重新编译MYSQL。在缺省情况下&#xff0c;MYSQL支持三个引擎&#xff1a;ISAM、MYISAM和HEAP。另外两种类型INNODB和BERKLEY&#xff08;BDB&#xff09;&#xff0…