把网页缩小就是APP了吗?

545550598@qq.com
545550598@qq.com
545550598@qq.com
211
文章
0
评论
2021-05-0317:12:2049 2381字

在之前相当长的一段时间里, 小P都是一位相当出色的网页设计师, 优秀的设计功底加上良好的沟通 能力让小P在公司乃至整个设计圈中都小有名气。直到有一天, 领导把他叫到办公室。

“小P啊,由于公司业务调整,我们需要为现有的产品设计一套手机上可以使用的APP,你的工作能力突出,这个任务就交给你来完成吧。

“没问题,这个不在话下,手机端比Web网页结构要简单多了,小意思。”

于是小P就开始手机APP的设计了。“不就是把Web页面放小到手机吗,看起来很简单的样子。” 打开拿手的Photoshop,小P犯难了,我要建多大的画布呢?设计稿里的文字用多大字号合适呢?字体还是用宋体吗?切图要怎么切? HTML?如此多的疑问让小P无从下手。硬着头皮用网页设计的经验做 了一版,好像感觉完全不对嘛。看着空空如也的计算机屏幕,小P感慨,网页设计原来跟APP的界面设计差别如此之大。

操作平台上,毫无疑问,Androld与iOS占据几乎全部市场份 额,1OS设备以iPhone 4S. iPhone 5S为主,由于Phone设备更新 稳定,分辨率变化不大,但最新的IPhone 6及Plus设备也必须在设计 上加以考虑了; Androld系统的手机品牌数不胜数,但占据前几位的 依然是三星、小米、华为、联想、OPPO等有影响力的厂商。在设计 及开发APP时,除了市场占有率因素,应用自身的定位所带来的品牌 占有率的偏差也必须考虑进去。例如,在使用某奢侈品电商APP的用 户中,iPhone及 三星占据较大份额。但在手机阅读类软件(网络文 学)用户中,较低端的Android型号更为普遍。 这点需要区别对待, 在设计时有所偏向。

接着说分辨率,分辨率是我们在设计APP界面的时候第一要考 虑的事情,手机分辨率干差万别,我们不可能针对每一种分辨率单 独来做设计,所以使用哪种分辨率来设计最合适,这是设计师必须 要做出的选择。

在假设手机ppi(精度)-致的情况下,用哪种分辨率作为设计稿的标准尺寸?

那我们选择哪种画布尺寸来开始设计工作呢?

这里有几个原则:

1.手头有哪些手机可以选择,或者具体为哪种手机( Android、 iOS或者都有)设计界面。

2.最方便、最有效率地适配各种尺寸和型号的手机(图片处理起 来最方便、最省时间,同时保证效果最好)。

3.保证屏幕中的U元素显示效果最佳,不出现虚边、模糊等现象。

4.确保可以适配当今主流机型,同时兼顾手机日新月异的进化 势(设计稿是否可以快速适配越来越大的分辨率)。
了解这几个原则后,分析上文提到的分辨率,我们发现720x 1 280、640x960、480x800、640x 1136、加上最新 iPhone 6及Plus的750x1 334、1 080x 1920等几种分辨率最 常见。另外,联想一下网页的浏览习惯,APP的浏览习惯和前者 点相似,上下滚动最为主流,也就是说整个内容中,高度是一I 为不固定的因素。现在进一步简化上边提到的几个分辨率,将1 省去后得到几个数字: 480、640、720、750、1 080。请注 间一个数字720,480的1.5倍即为720,720的1 .5倍为1080 时再次将数值简化为480、720、 1 080。有读者可能会有疑问。

640、750、1 242几个宽度为什么要省去呢。由于现在手机ppi普遍大于300,已经高于人眼可以识别的范畴,所以几十个像素的差别可以忽略不计(我们可以拿一-张640宽的图片分 别放在iPhone 4S与iPhone 6上,将宽度撑满进行观察,虚吗?抛开设计师的“ 像素眼”,一般人看来区别很小)。另一个原因,在iOS与Android的图像处理机制的设计中,为了便于快速适配,工程师将不同大小的素材区分为几个不同等级。也就是我们平时会接触到的iOS素材中的以@2x和@3x结尾的图片,Android图片素材中放入hdpi、xhdpi、xxhdpi中的素材。程序在不同ppi的手机设备上运行的时候,会根据某种算法来判断读取哪个文件夹或者哪个后缀的图片文件,确保图片素材在不同手机上呈现-致的设计效果。

当你为iOS设计时,需要准备两套素材,分别对应iPhone 4、 iPhone 4S、iPhone 5、iPhone 5S、iPhone 6的@2x图片,以及 为iPhone 6 Plus设计的@3x倍图片。当你为Android设备设计时,至少需准备对应1 080p分辨率(放 在xxhdpi文件夹中)的素材,还需要一套对应720p分辨率 (放在 xhdpi文件夹)的素材。如果你追求完美,甚至需要设计针对480p分 辦率(放在hdpi文件夹)的素材,当然不放也没有关系,Android大 部分情况下会自动将图片进行缩小或者放大处理,所以选择一套缩放 不虚的图,也就是对应1 080p分辨率的图即可。
唠叨了那么多,我们到底用哪种分辨率作为基准分辨率更合适 呢?在这里推荐720宽的分辨率,它的突出特点是能上能下,设计稿 直接切图即为@2x图或者对应xhdp的素材,图片放大1.5倍即为@3x 或者对应xhdp的素材。
到这里原理解释完毕,但有人会问,可是我没有iPhone 6或者这 个分辨率的Android手机怎么办呢?没关系,可以根据自己手头的设 备,选择合适的分辨率即可,最后无非是根据宽度进行等比放大长宽 的操作。继续举例,如果用320 x 480的分辨率做设计稿,那么只需 要把素材尺寸宽高等比放大2倍、3倍即可。这里为什么强调要根据手 头的手机来设定尺寸呢,毕竟我们要做的是移动设备UI,在显示器查 看设计稿的感觉与在手机上查看差别很大,建议大家最好将设计稿导 入手机进行查看,最好是手头设备分辨率与设计稿完全对应,在手机 上可以点对点地显示,这时你会看到最接近于开发后的效果。Sketch 为我们提供了非常方便的预览软件Mirror,在计算机中完成的设 高,通过无线网络连接,可随时在手机中查看,非常方便,此功能将 会在随后的章节中讲解。

  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
545550598@qq.com
  • 图片来源于网络,除非特殊声明,本站文章均为原创,转载请务必保留本文链接图片来源于网络,除非特殊声明,本站文章均为原创,转载请务必保留本文链接
  • 转载请务必保留本文链接:https://app.daqing8080.com/?p=77
小型企业如何使用定制软件进行竞争 app开发

小型企业如何使用定制软件进行竞争

作为一家小企业,在竞争激烈的行业中脱颖而出可能很困难。但越来越多的小型企业正在发现各种定制软件解决方案如何帮助他们不仅提高工作效率,提高利润,而且还能比以往更快地覆盖更多客户。 在这篇文章中,我们仔细...
如何促进移动应用APP增加安装数量? app开发

如何促进移动应用APP增加安装数量?

移动应用市场已达到顶峰,因此竞争非常激烈。每一位新的创新者注定都会发现应用营销的挑战。在众多应用程序中,要说明您的应用程序如何有用和独特将不是一件容易的事。 因此,出现了一个问题–如何提高移动应用程序...
如何为您的公司雇用最佳移动应用程序开发人员 app开发

如何为您的公司雇用最佳移动应用程序开发人员

此报价在商业世界中普遍适用。只有在适当的人员配合下,公司才能完全实现其愿景。任何企业的最终愿景都是加强市场。考虑到最新趋势,您已经知道移动应用程序是实现这一目标的最佳方法。如果您没有开发应用程序的技能...