欢迎光临软程科技软程科技,我们致力于专业APP开发定制,小程序开发技术企业,拥有专业的技术团队,丰富的项目开发经验!

咨询热线:18143477239
微信号
新闻资讯News
首页 > 新闻资讯 > 把网页缩小就是APP了吗?
软程科技

把网页缩小就是APP了吗?

作者:admin | 点击:203 | 来源:软程科技
05 03 
2021 
在之前相当长的一段时间里, 小P都是一位相当出色的网页设计师, 优秀的设计功底加上良好的沟通 能力让小P在公司乃至整个设计圈中都小有名气。直到有一天, 领导把他叫到办公室。 “小P啊,由于公司业务调整,……

在之前相当长的一段时间里, 小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、640×960、480×800、640x 1136、加上最新 iPhone 6及Plus的750×1 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,在计算机中完成的设 高,通过无线网络连接,可随时在手机中查看,非常方便,此功能将 会在随后的章节中讲解。

我要咨询做网站
成功案例
软件开发流程
  • 软件需
    求分析
  • 软件策
    划方案
  • 页面风
    格设计
  • 程序设
    计研发
  • 资料录
    入优化
  • 确认交
    付使用
  • 后续跟
    踪服务
  • 18143477239
    18143477239
Hi,Are you ready?
准备好开始了吗?
那就与我们取得联系吧

了解咨询提出你的问题软程科技与我们的客服取得联系
详细回复您软程竭尽为您服务!
免费咨询一对一为您解答,欢迎新老用户前来咨询期待您哦
24小时免费咨询热线18143477239
咨询意向表
您需要服务的问题
您最关注的地方
预算

直接咨询