如何做好app网页设计?

现在的app 网页设计变得越来越流行了，在做app网页设计的时候，是需要遵循一定的原则的，今天就给大家具体分享下app网页设计的相关资料吧。

App与Web网页设计比较

一.基础单位不同

　　不同的开发语言，他们的单位都不同。

　　Web端：

　　前端单位：px，em，rem，dpr;实际开发中用到的单位：px，em，rem，dpr;设计单位px(em，rem，dpr可以理解为换算系数)。

　　App：

　　•iOS 单位：pt，px，ppi;实际开发中用到的单位：pt;设计单位px (2px=1pt)。

　　•Android 单位：dip/dp，sp，px，dpi/ppi，ldpi，mdpi，hdpi，xhdpi，xxhdpi;实际开发中用到的单位：dp，sp;设计单位px (计算公式:1dp*像素密度/160 = 实际像素数)。

　　大家可以发现，虽然设计单都是px，但设备单位则是根据不同的设备像素转化的;就移动端而言，设备像素在一定程度上帮助了我们对各个端不同的屏幕进行适配，这也是我们可以一稿配两端(ios及android)的基础。

　　二.Banner图适配不同

　　Banner图片适配的目的，是为了在不同宽高的设备中可以还原设计图中用到的图片，并做到图片不失真。

　　关于web端的适配方式，如果是0-1的版本设计，设计师大可以根据自己的要求提给开发。如果不是，可以跟开发或PM沟通具体适配方式后再进行设计。

　　设计尺寸一般为：1920px设计范围1000-1200px或1920px，等比缩放。

　　而App中，图片是否清晰和展示页面的硬件设备的dpr以及图片分辨率这两个因素有关。

　　个人的设计习惯是二倍大小进行切图使用，并导出二倍图和三倍图分别进行设备适配使用。(当然你可以在三倍下进行设计～)

（图片来自网络）

三.布局适配不同

　　移动端和PC端都有各自约定俗成的结构布局方式，我们同一些可设计区域、安全距离、模块间的固定间距让页面能够进行布局适配。

　　WEB端：布局中对宽度的适配，多采用rem来实现，和上面第2种字体大小适配方式中的原理类似，也是计算出一个比例值，然后不同布局宽度中等比缩放。

　　响应式设计：响应式设计就是PC和手机端公用一套结构，通过@media为主要手段，对不同分辨率(设备独立像素)的设备使用不同的css样式。

　　可设计区域：和banner的原理一样，一般是主画面保持居中1000-1200px范围内，根据屏幕或窗口缩放去进行左右的裁切;或按比例缩放。

　　App：布局为自适应屏幕宽度，我们需要给出相应的安全距离、页面边距、底部导航高度等固定高度，并告知开发自适应方式。一般顶部状态栏高度为40px、标题栏88px、底部导航栏100px、左右边距为24-32px(以上数据仅供参考，各位大佬可更具具体项目进行调整)。

（图片来自网络）

　　 APP设计与网页设计方式区别

　　从使用场景上，Web App用户面临比原生APP用户更严峻的问题：

　　1、页面跳转更加费力，不稳定感更强

　　思考点：如何减少跳转(扁平结构、页面布局技巧)，增加数据及展示的流畅流程及稳定性(技术)。

　　2、更小的页面空间(由于浏览器的导航本身占用一部分屏幕空间)，更大的信息记忆负担;

　　移动设备的屏幕要小得多。这种如同透过门缝进行的阅读增加了认知的负担。人脑的短期记忆是不稳定的，用户在滚动屏幕的过程中需要临时记忆的信息越多，他们的表现就会越差。——《贴心设计：打造高可用性的移动产品》

　　思考点：排版更清晰、信息更简练 (可在原生APP基础上去掉一些丰富、复杂的视觉表现)

　　3、导航不明显，原有底部导航消失，有效的导航遇到挑战

　　思考点：如何有效的提供导航?有哪些形式?

　　4、交互动态效果收到限制，影响一些页面场景、逻辑的理解。

（图片来自网络）

　　思考点：比如登录注册流程的弹出、完成及异常退出，做好文字提示。

　　区别：APP属于手机应用客户端，移动网站可以制作成APP，APP也可以呈现手机网站。

　　相同点：二者都属于手机系列 区别在于：APP可以安装到手机上，而移动网站只能通这用户打开网址才能打开了解信息。如果移动 网站设计成app，则二者兼合。

　　通过以上的内容，大家已经了解了app网页设计有一定了解了，这样在设计网页的时候，就需要考虑一些需要注意的点，只有这样才能设计出满意的作品。