前端和设计师 结果 差异化的原因

        记得很久之前与我同住的室友经常加班到半夜三更才回家,我很是不解。后来闲聊才得知她们公司的设计师待前端开发完毕之后需要一点点的对稿走查,非常浪费时间。而且设计这边不但需要标注好给开发,然而开发照着做完依然存在诸多问题。

        

        我也曾对接过几个前端却都没有出现过这种前端与设计稿相差很大的问题,不需要标注也无需怎么走查,即便发现问题也是非常稀少。以至于我一度以为仅仅是开发与开发之间水平差异的问题,也非常庆幸自己没有遇到过那种实现效果差的开发。

        然而好景不长,就在前段时间我对接了一位前端开发,落地效果非常不理想。让我比较困惑的是前端实现效果好不好,真的是碰运气么?

        那我们来探讨一下有什么方式能够在面对不同的前端开发来规避这些问题,首先我们需要了解为什么前端实现的页面跟设计稿的差别那么大呢?

一、前端实现与设计稿差异背后的问题

H5相对于APP在设计上的区别:

        设计师相较于前端来讲是最接近产品用户体验的人,但是毕竟APP原生系统界面设计跟H5页面设计还是存在很多差异性的。所以很多不太熟悉H5技术限制的设计师还是很容易犯一些错误的。

        为了更直观的对比APP与H5的页面设计差异,下面我们来举个栗子:

天猫APP与H5的页面对比

(1)功能的简化

        我们通过对比发现天猫H5的首页功能比APP的首页功能减少了很多,例如:扫一扫的和消息功能以及底部导航都没有了。同类的banner广告布局也没有这么复杂,只是简单粗暴的大banner下方放几个功能入口。

(2)突出基本功能

        例如天猫的App端商品类别放置在第二屏,而H5的商品分类在首页顶部原扫一扫图标的位置,点开就是一个抽屉式弹窗,更简洁直观的功能更有利于增强H5的操作体验。

(3)顶部navigationBar不可更改

        H5的顶部navigationBar是不可更改的,不管任何软件打开H5,其顶部显示的始终是原打开此H5页面app的navigationBar。所以一般如果需要设计顶部导航的时候,我们是基于navigationBar的下方再放置一个navigationBar的。这里也就是如上图右侧所示显示了双层navigationBar的效果。

(4)常使用顶部返回按钮

        h5页面较长的情况下经常会使用顶部返回按钮,这个类似与pc网页端的交互形式。目前多数h5已然淘汰了此交互功能,以顶端自带的返回按钮来替代。目前天猫也仅在首页使用,因为如果没有这个按钮的话点返回会退出天猫。所以,具体使用与否还需视情况而定。

(5)加载进度条

        每进入一个新的h5页面顶部都会显示加载进度条,如果是原生系统内嵌的H5页面注意这里是可以自定义进度条样式的。

二、为何设计师盯着改还是不满意?

        那么基本上了解了以上H5与APP设计上的基本差异,我们在查看某些前端开发后期实现效果的时候,还是需要花费大量的时间校对。有些问题甚至能改个2,3遍还是不太满意。

(1)设计师的苦恼

        那么我们先来看下我们身边普遍存在的真实情况,以下为某公司设计与产品的对话:

        我曾经询问过身边的几个设计朋友,她们都坦言工作中经常会花费不少时间与前端校对落地稿。有的设计师朋友甚至说:

(2)H5算法不同,真的没办法特别精确么?

        那么H5相较与IOS和安卓真的就这么特殊么?到底是哪里出现了问题呢?

那么接下来我们先来看看目前市面上web app屏幕适配的不同方法。

三、rem在web app中的广泛应用

1. 流式布局

        百分比布局,也叫流式布局,因为宽度是百分比,但是高度是按px来写的。可以简单的理解为高度固定,宽度不固定。

        使用流式布局的产品在市面上还是较为常见的,我们这里就以亚马逊为例。如上图所示750和640的 尺寸下不同模块的高度都是一致的,且字体大小和图标尺寸也是相同的。只有横向间距发生了变化。我们可以观察到在750尺寸下顶部亚马逊的LOGO和登录按钮以及购物车,都不处于页面的上下居中位置,也就是说他们均发生了偏移。

这是为什么呢?

        因为流式布局都是通过百分比来定义宽度的,但是高度往往是固定不变的PX参数,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度还是和原来一样,实际显示非常的不协调。有的个别元素还会产生偏移。这就是流式布局的最致命的缺点。

往往只有几个尺寸的手机下看到的效果是令人满意的,很多设计师是无法接受这样的显示结果。

况且流式布局并不是最理想的实现方式,通过大量的百分比布局,会经常出现许多兼容性的问题,还有就是对设计有很多的限制。因为他们在设计之初就需要考虑流式布局对元素造成的影响,只能设计横向拉伸的元素布局,设计的时候存在不少局限性。

2. 固定宽度的做法

        还有一种是固定页面宽度的做法,早期有些网站把页面设置成320的宽度,超出部分留白。我们可以理解为我们在做PC网页端的时候,采用的是这种固定宽度的方面。这样做视觉,前端都挺开心,视觉在也不用被流式布局限制自己的设计灵感了,前端也不用在搞坑爹的流式布局。

但是这种解决方案也是存在一些问题,例如:在大屏幕手机下两边是留白的,还有一个就是大屏幕手机下看起来页面会特别小,操作的按钮也很小,手机淘宝首页起初是这么做的,但后来弃用了才方法,采用了rem。

3. 响应式设计

        响应式设计在布局的宽度达到某些阙值时,改变其布局结构,适应不同终端,当然不仅限于移动端。相信大家对响应式设计并不模式,这里我就不进行过多阐述,可以看下图这个例子会比较直观。

        响应式设计的优点就是能够适用于多平台,多种不同的终端。但是在国内却很少有大型企业的复杂性的网站在移动端用这种方法去做,其主要原因是工作大,维护性难,所以一般都是中小型的门户网站或者个人博客会采用此方法。这样反而可以节约成本,不用再专门为自己的网站做一个web app的版本。

4. rem能等比例适配所有屏幕

        上面讲了一大堆目前大部分公司主流的一些web app的适配解决方案,接下来讲下rem是如何工作的。

        rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位,也就是说rem是通过根元素进行适配的。网页中的根元素指的是,html我们通过设置html的字体大小就可以控制rem的大小。

举个例子:

        左图的字体大小为20px,此时的按钮边框大小为120px*60px,当我们改变字体大小为40px的时候,那么按钮边框的大小则变为240px*120px。我们可以看到图二的宽高比图一的宽高大了2倍,其实我们只改变了字体的大小。

        我们可以看下天猫750尺寸和640尺寸下不同显示效果,图三是750等比缩小到640的尺寸,基本上跟640手机上显示的没多大差别。那么以此类推不管在任何分辨率下,采用rem的页面排版都是按照等比例进行切换,并且布局并不会产生错乱。

5. rem与px之间的换算

        那么我们接下来来了解一下rem与px之间是如何换算的。首先浏览器默认为16px,如果前端开发在写代码之前没有设定一个默认值方便计算的话那么当前默认值就为16px,即1rem=16px。

当然多数开发是会把默认值设定为普遍较为通用的14px的,即1rem=14px

那么此时当字体大小为12px的时候,若设计稿为320*580即1倍大小,则换算方法为:12/14=0.86rem

如果不能被整除,则小数点保留到后2位,四舍五入。

6. 百分之80的设计都被前端忽悠了

        那么问题来了当我们知道如何换算之后,如何确定我们的前端开发采用的默认值是多少呢?

当时开发在我反复询问时说他设置的默认大小为14px,然后我就建议他按照我给的字体大小通过上述计算方式换算,然而开发一直说这样算的话字体还是很大。然后又抱怨说之前的代码太乱了,自己也不晓得怎么算了。这个时候千万不要被开发的话迷惑,而放弃求解。

        下一步我们需要要求开发将某个字的字体大小改为1rem,然后在手机上截图,再挪到软件上测量显示的实际px大小是多少。当时我测量的1rem的字体大小为100px,也就可以断定我们的前端开发将默认值设置为了100px, 即1rem=100px。

        有的设计可能还会遇到这种情况,把设计稿做成了2倍大小的,那这个时候我们并不需要重新出1倍大小的图,而是将原有的参数都除以2进行换算。还是以1rem=100px为例,当字体大小为12px时的换算公式为:12px/2/100=0.06rem。

        另外:rem常用于字号和边距,边先无需用rem,都统一要求前端改为1px即可。

        我们在设计验收的时候还需要看下安卓跟IOS的不同显示效果差异,通常IOS的显示效果会比安卓显示的效果好很多,所以这个时候我们还需要重点对安卓手机进行设计验收。

        掌握了以上换算方式,安卓的验收就不难了,还需要设计师们更加耐心。

总结

        我们这里主要针对设计师在进行H5页面验收的时候,存在的种种问题进行了深入剖析。

        首先从了解前端实现与设计稿差异背后的问题入手,到分析目前市面上采用的几种适配方式,并针对主流的适配方式进行了讲解,给出相应的应对方案帮助设计师能够更有效的进行前端验收工作。

        那么其实在实际工作过程中,当我们遇到实现效果不佳的前端开发,我们要学会分辨到底哪些是真的不好改,还是其实好多能改,只是他们懒得改就会骗设计不好实现。

        好了唠叨了这么多希望本文对你有帮助,这些可都是设计师和前端之间不能说的小九九哦!

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

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

相关文章

关于赚钱上面的金句启发,一共12项100多条,值得收藏!

注意一:个人成长与自我实现 币圈有个词叫不要"mid curve",意思是在最傻和最聪明的人都能赚到钱,不要做中间那部分人。为什么会经常出现不配赚这么多的钱的感觉,主要还是见识少,当你亲眼见过一年赚上千万一个…

基于数据库现有表导出为设计文档

1.查询 SELECTCOLUMN_NAME 字段名,COLUMN_COMMENT 字段描述,COLUMN_TYPE 字段类型,false as 是否为主键 FROMINFORMATION_SCHEMA.COLUMNS wheretable_NAME region -- 表名2.查询结果 3.导出为excel

测绘管理与法律法规 | 测绘资质分类分级标准 | 学习笔记

目录 1. 申请条件 2.审批程序 3.专业技术人员的特殊规定 1. 申请条件 法人资格:申请单位必须具有法人资格。 专业技术人员:需拥有与测绘活动相适应的测绘专业技术人员和相关专业技术人员。 技术装备:具备与测绘活动相适应的技术装备和设…

数仓建模—数据架构

数仓—数据架构 为了在企业决策中使用数据,数据必须经过整个数据平台的各个阶段。整个过程是什么样子的,从开始到结束?原始形式的数据是如何转化为可导致商业决策的见解的?这些问题可以通过数据架构来回答。 数据架构是指记录组织所有数据资产的模型、规则和标准。它映射…

sql-labs靶场的搭建

1.下载一个sql-labs GitHub - Audi-1/sqli-labs: SQLI labs to test error based, Blind boolean based, Time based. 2.下载 phpstudy(小皮) https://www.xp.cn/download.htmlhttps://www.xp.cn/download.html 3. 4. 5. 6. 7.http://127.0.0.1/sqli-labs…

Qt 窗⼝

Qt 窗⼝ 菜单栏创建菜单栏在菜单栏中添加菜单创建菜单项在菜单项之间添加分割线综合⽰例 ⼯具栏创建⼯具栏设置停靠位置设置浮动属性设置移动属性综合⽰例状态栏状态栏的创建在状态栏中显⽰实时消息在状态栏中显⽰永久消息 浮动窗⼝浮动窗⼝的创建设置停靠的位置 对话框对话框介…

再生龙(Clonezilla)网络克隆linux系统实现迁移——筑梦之路

官方网站:Clonezilla - 簡介 环境说明 源端:CentOS 7 操作系统的虚拟机,硬盘大小为 40GiB,分为 1GiB 的 /boot(启动)分区、4GiB 的 swap(交换)分区和 35GiB 的 /(根&…

【解决去除springboot-内嵌tomcat的异常信息显示】去掉版本号和异常信息

调用这个,能复现tomcat的报错 http://localhost:8182/defaultroot/DownloadServlet?modeType2&pathhtml&FileName…\login.jsp&name123&fiewviewdownload2&cdinline&downloadAll2 springboot项目如何隐藏? springboot内嵌了to…

2024年Q1季度冰箱行业线上市场销售数据分析

Q1季度冰箱线上市场表现不如预期。 根据鲸参谋数据显示,2024年1月至3月线上电商平台(京东天猫淘宝)冰箱累计销量约410万件,环比下降11%,同比下降21%;累计销售额约98亿元,环比下降31%&#xff0…

好用的 with as

简介 with as 相当于视图,是子查询的另一种写法,原理是将建立一个临时表。在做分析时如果需要多次使用到某些中间表可以使用该方法,格式如下: with SQL_1 as (SELECT ***),SQL_2 as (SELECT ***) select * from XXX where XXX a…

spring-数据处理及跳转

结果跳转方式 ModelAndView 设置ModelAndView对象 , 根据view的名称 , 和视图解析器跳到指定的页面 . 页面 : {视图解析器前缀} viewName {视图解析器后缀} <!-- 视图解析器 --> <bean class"org.springframework.web.servlet.view.InternalResourceViewRes…

Vue源码解读学习

Vue源码 观察者模式 & 发布订阅 观察者模式&#xff1a;中心一对多 系统单点间的灵活和拓展&#xff08;广播的方式&#xff09; 发布订阅&#xff1a;将注册列表遍历发布给订阅者 initInject initState initProvide他们挂载顺序为什么这样设计&#xff1f; initstate…

解决npm run dev跑项目,发现node版本不匹配,怎么跑起来?【已解决】

首先问题点就是我们npm run dev 运行项目的时候发现出错&#xff0c;跑不起来&#xff0c;类型下面这种 这里的出错的原因在于我们的node版本跟项目的版本不匹配 解决办法 我这里的问题是我的版本是node14的&#xff0c;然后项目需要node20的&#xff0c;执行下面的就可以正…

html接入高德地图

1.申请key key申请地址&#xff1a;https://console.amap.com/dev/key/app 官方文档 https://lbs.amap.com/api/javascript-api-v2/summary 2.html接入示例 需要将YOUR_KEY替换成自己的key <!doctype html> <html> <head><meta charset"utf-…